/* Layout: 工事現場。上にバリケードの縞、白い工事看板、LED電光掲示板、解体進捗（常識ビル）、工区（ゲーム）のグリッド、解体実績の一覧 */
:root{
  --bg:#d8d7d0;          /* コンクリート */
  --board:#fbfbf8;       /* 看板の白 */
  --ink:#16171b;
  --muted:#5c5b55;
  --line:#c4c2b9;
  --blue:#1747a6;        /* 看板の青文字 */
  --red:#c8231b;
  --hazard:#f2c200;
  --hazard-ink:#16171b;
  --led-bg:#101012;
  --led:#ff9a1f;
  --floor:#9aa3b2;       /* 常識ビルの壁 */
  --window:#e9eef7;
  --shadow:rgba(22,23,27,.18);
  --f-display:"Dela Gothic One","Hiragino Kaku Gothic StdN","Yu Gothic",sans-serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --f-dot:"DotGothic16","MS Gothic",monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141518; --board:#1e2025; --ink:#ecebe6; --muted:#a6a59e; --line:#34363d;
  --blue:#8db0ff; --red:#ff6b5e; --floor:#4a5263; --window:#ffd76a; --shadow:rgba(0,0,0,.5); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#141518; --board:#1e2025; --ink:#ecebe6; --muted:#a6a59e; --line:#34363d;
  --blue:#8db0ff; --red:#ff6b5e; --floor:#4a5263; --window:#ffd76a; --shadow:rgba(0,0,0,.5); color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);line-height:1.7;
  background-image:radial-gradient(var(--line) 1px,transparent 1.2px);background-size:22px 22px}
.barricade{height:28px;background:repeating-linear-gradient(-45deg,var(--hazard) 0 22px,var(--hazard-ink) 22px 44px)}
.site{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:28px 48px;display:grid;gap:28px}

/* 工事看板 */
.board{background:var(--board);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--shadow);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);position:relative}
.board::before,.board::after{content:"";position:absolute;top:-14px;width:14px;height:14px;background:var(--ink);border-radius:50%}
.board::before{left:22%}.board::after{right:22%}
.board-head{padding:28px 28px 24px;border-right:3px solid var(--ink);display:grid;gap:12px;align-content:start}
.eyebrow{margin:0;display:inline-block;justify-self:start;background:var(--red);color:var(--board);
  font-weight:900;letter-spacing:.2em;padding:2px 12px;font-size:.9rem}
h1{margin:0;font-family:var(--f-display);font-weight:400;color:var(--blue);
  font-size:clamp(2rem,5.4vw,3.6rem);line-height:1.15;text-wrap:balance;letter-spacing:.02em}
h1 .crush{display:inline-block;position:relative}
h1 .crush::after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:.12em;background:var(--red);transform:rotate(-4deg)}
.apology{margin:0;display:flex;align-items:center;gap:14px;font-weight:900;font-size:1.25rem}
.ojigi{width:64px;height:64px;flex:none;display:grid;place-items:center;font-size:2.4rem;
  border:3px solid var(--ink);border-radius:50%;background:var(--hazard);overflow:hidden}
.ojigi img{width:100%;height:100%;object-fit:contain}
.specs{margin:0;padding:20px 24px;display:grid;align-content:center}
.specs div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.specs div:last-child{border-bottom:0}
.specs dt{font-weight:900;color:var(--blue);letter-spacing:.08em}
.specs dd{margin:0;min-width:0}

/* LED電光掲示板 */
.led{background:var(--led-bg);border:3px solid var(--ink);overflow:hidden;position:relative;padding:10px 0}
.led::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(transparent 55%,var(--led-bg) 60%);background-size:4px 4px}
.led-track{display:flex;width:max-content;animation:scroll 26s linear infinite}
.led-track span{font-family:var(--f-dot);color:var(--led);font-size:1.6rem;white-space:nowrap;padding-right:2em;
  text-shadow:0 0 6px var(--led)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* 解体進捗 */
.progress{background:var(--board);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--shadow);display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;padding:20px 24px;align-items:center}
.tower{display:grid;justify-items:center;gap:0;width:150px}
.tower .crane{font-family:var(--f-dot);font-size:.75rem;color:var(--muted);margin-bottom:4px}
.floors{display:flex;flex-direction:column-reverse;gap:3px;width:110px;min-height:240px;justify-content:flex-start}
.fl{height:20px;background:var(--floor);border:2px solid var(--ink);background-image:repeating-linear-gradient(90deg,transparent 0 8px,var(--window) 8px 18px,transparent 18px 22px);background-size:22px 8px;background-position:4px 4px;background-repeat:repeat-x;transition:opacity .4s}
.fl.gone{background:transparent;border:2px dashed var(--line)}
.rubble{width:150px;height:14px;background:radial-gradient(circle at 20% 80%,var(--floor) 0 5px,transparent 6px),radial-gradient(circle at 45% 70%,var(--muted) 0 6px,transparent 7px),radial-gradient(circle at 70% 85%,var(--floor) 0 5px,transparent 6px),radial-gradient(circle at 88% 75%,var(--muted) 0 4px,transparent 5px);border-top:3px solid var(--ink)}
.prog-body{display:grid;gap:10px;min-width:0}
.prog-label{margin:0;color:var(--muted);font-weight:900;letter-spacing:.1em;font-size:.9rem}
.prog-num{margin:0;font-family:var(--f-display);font-size:clamp(2.6rem,7vw,4rem);line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}
.prog-num small{font-size:.35em;color:var(--muted);margin-left:.3em;font-family:var(--f-body);font-weight:900}
.meter{height:22px;border:3px solid var(--ink);background:var(--bg);position:relative;overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;background:repeating-linear-gradient(-45deg,var(--hazard) 0 12px,var(--hazard-ink) 12px 24px);transition:width .6s}
.prog-note{margin:0;font-size:.95rem}
.zonecounts{display:flex;flex-wrap:wrap;gap:6px}
.zonecounts span{font-size:.82rem;border:2px solid var(--ink);padding:0 8px;font-weight:700;font-variant-numeric:tabular-nums}
.zonecounts span.full{background:var(--hazard);color:var(--hazard-ink)}
@media (max-width:640px){.progress{grid-template-columns:1fr;justify-items:stretch}.tower{justify-self:center}}

/* 竣工式 */
.ceremony{background:var(--hazard);color:var(--hazard-ink);border:3px solid var(--ink);padding:20px 24px;display:grid;gap:12px;justify-items:center;text-align:center;position:relative;overflow:hidden}
.ceremony h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(1.6rem,4vw,2.4rem)}
.ceremony p{margin:0;font-weight:700}
.ribbon{width:min(520px,100%);height:18px;background:#d61f2c;position:relative;border-radius:2px}
.ribbon::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:40px;height:40px;border-radius:50%;background:#d61f2c;box-shadow:0 0 0 4px #ffd5d8 inset}
.ribbon.cut{background:linear-gradient(90deg,#d61f2c 0 45%,transparent 45% 55%,#d61f2c 55%)}
.ribbon.cut::after{display:none}
.cbtn{font:inherit;font-weight:900;border:3px solid var(--hazard-ink);background:var(--hazard-ink);color:var(--hazard);padding:8px 22px;cursor:pointer}
.cbtn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
#confetti{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}

/* 工区一覧 */
.zones{display:grid;gap:16px}
.zones-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.zones h2,.achv h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:1.6rem;letter-spacing:.06em}
.zones-head p{margin:0;color:var(--muted);font-size:.92rem}
.zone-list{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:640px){.zone-list{grid-template-columns:repeat(2,minmax(0,1fr))}.zone.feature{grid-column:span 2}}
@media (min-width:1024px){.zone-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
.zone a{height:100%;display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:inherit;
  background:var(--board);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--shadow);
  transition:transform .15s,box-shadow .15s}
.zone a:hover{transform:translate(-3px,-3px) rotate(-.4deg);box-shadow:9px 9px 0 var(--shadow)}
.zone a:focus-visible{outline:4px solid var(--blue);outline-offset:3px}
.tape{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px;
  background:repeating-linear-gradient(-45deg,var(--hazard) 0 12px,var(--hazard-ink) 12px 24px);border-bottom:3px solid var(--ink)}
.tape b{background:var(--hazard);color:var(--hazard-ink);font-weight:900;padding:0 8px;letter-spacing:.1em;font-size:.88rem}
.tape i{font-style:normal;background:var(--red);color:#fff;font-weight:900;font-size:.78rem;padding:0 8px;letter-spacing:.08em}
.zone-body{padding:16px 16px 18px;display:grid;gap:10px;align-content:start;grid-template-rows:auto auto 1fr auto}
.zone h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:1.45rem;line-height:1.25;text-wrap:balance}
.target{margin:0;font-size:.86rem;color:var(--muted);display:grid;gap:2px}
.target s{color:var(--ink);font-weight:700;font-size:.98rem;text-decoration-color:var(--red);text-decoration-thickness:3px}
.desc{margin:0;font-size:.95rem}
.enter{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:900;color:var(--blue)}
.enter span:first-child{border-bottom:2px solid currentColor}
.enter .cnt{color:var(--muted);font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}
@media (min-width:640px){.feature h3{font-size:2rem}}

/* 解体実績 */
.achv{display:grid;gap:14px}
.achv-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:760px){.achv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.achv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.achv-zone{background:var(--board);border:3px solid var(--ink);padding:12px 14px;display:grid;gap:6px;align-content:start}
.achv-zone h3{margin:0;font-size:1rem;font-weight:900;display:flex;justify-content:space-between;gap:8px}
.achv-zone h3 span{color:var(--muted);font-variant-numeric:tabular-nums}
.achv-zone ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.achv-zone li{display:grid;grid-template-columns:1.6em minmax(0,1fr);gap:6px;font-size:.88rem;align-items:start}
.achv-zone li b{display:block}
.achv-zone li small{color:var(--muted)}
.achv-zone li .mk{font-weight:900;text-align:center;border:2px solid var(--ink);line-height:1.2}
.achv-zone li.on .mk{background:var(--hazard);color:var(--hazard-ink)}
.achv-zone li:not(.on) b{color:var(--muted);letter-spacing:.2em}

footer{color:var(--muted);font-size:.85rem;display:grid;gap:8px;border-top:2px dashed var(--line);padding-top:16px}
footer code{font-family:var(--f-dot)}
.reset{justify-self:start;font:inherit;font-size:.85rem;border:1px solid var(--line);background:transparent;color:var(--muted);padding:4px 10px;cursor:pointer}
.reset.arm{border-color:var(--red);color:var(--red);font-weight:900}

@media (max-width:760px){
  .board{grid-template-columns:1fr}
  .board-head{border-right:0;border-bottom:3px solid var(--ink);padding:22px 18px}
  .specs{padding:12px 18px}
  .specs div{grid-template-columns:6em minmax(0,1fr)}
  .led-track span{font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){.led-track{animation:none}.zone a{transition:none}}
#meterBar{width:0%}