/* Syntropy City page (STAGE1.md §3-C). The engine's hud.css gives the tokens, .panel, #veil, #labels and .lbl; this adds the
   city's HUD: the title, the tools, the grade filter, the place card, teacher mode, and the map (full screen on the board
   tier, a panel over the maquette otherwise). Hit targets ≥ 44 px for a smart board at DPR 1. */
#veil{transition:opacity .7s ease}
body{background:#0b0c0e}
#hud{z-index:20}
#head{position:absolute;top:16px;right:16px;padding:12px 18px 12px;max-width:min(420px,calc(100% - 32px))}
#head h1{margin:0;font-family:var(--display);font-size:26px;font-weight:600;line-height:1.3}
#head p{margin:2px 0 0;font-size:14px;color:var(--ash)}
.tools{gap:10px}
.tbtn{min-width:56px;height:48px;padding:0 16px;border-radius:100px;font-size:15px;color:var(--fog);transition:border-color .2s,background .2s}
.tbtn:hover{border-color:var(--accent)}
.tbtn.on{border-color:var(--accent);background:rgba(var(--accent-rgb),.28);color:var(--text)}
#btn-lang{font-family:var(--latin);font-size:14px}

/* the grade filter: a bar of chips at the bottom centre */
#grades{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:6px;border-radius:100px;max-width:calc(100% - 32px);overflow-x:auto;scrollbar-width:none}
#grades button{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-width:52px;height:48px;padding:0 16px;border-radius:100px;font-size:15px;color:var(--ash);white-space:nowrap;border:1px solid transparent;transition:background .2s,color .2s}
#grades button:hover{color:var(--text);border-color:var(--line)}
#grades button.on{background:var(--accent);color:#fff}
#grades button b{font-family:var(--mono);font-weight:400;font-size:12px;opacity:.75}
#grades button .g{font-family:var(--mono);font-size:15px}

/* the place card */
#card{position:absolute;top:118px;right:16px;width:min(400px,calc(100% - 32px));max-height:calc(100% - 210px);overflow:auto;padding:18px 18px 14px;animation:slidein .45s var(--ease);scrollbar-width:thin}
#card small.k,#teach small.k{font-size:12px;color:var(--accent);font-weight:600}
#card h2,#teach h2{margin:4px 0 6px;padding-inline-end:34px;font-family:var(--display);font-size:23px;font-weight:600;line-height:1.35}
#card p{margin:0 0 12px;font-size:14.5px;line-height:1.85;color:var(--fog)}
#card-jobs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#card-jobs li>*{width:100%;display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;border-radius:12px;background:var(--raise);border:1px solid transparent;text-align:start;font-size:14.5px;line-height:1.5}
#card-jobs button{cursor:pointer;color:var(--text);border-color:rgba(217,164,65,.45)}
#card-jobs button:hover{border-color:var(--brass);background:rgba(217,164,65,.14)}
#card-jobs .soon{color:var(--ash);background:rgba(44,44,46,.55)}
#card-jobs .t{flex:1}
#card-jobs .gr{flex:none;font-size:12px;color:var(--ash);padding:2px 8px;border:1px solid var(--line);border-radius:100px}
#card-jobs .gr .num{font-size:12px}
#card-jobs .go{flex:none;font-size:13px;color:var(--brass);font-weight:600}
#card-jobs .ok{flex:none;color:var(--good);font-style:normal}
#card-jobs .soon .go{color:var(--dim);font-weight:400}
#card-jobs li.lit>*{box-shadow:inset 3px 0 0 var(--accent)}

/* teacher mode: the grade list and a jump */
#teach{position:absolute;top:80px;left:16px;width:min(380px,calc(100% - 32px));max-height:calc(100% - 180px);overflow:auto;padding:18px 18px 14px;animation:slidein .45s var(--ease);scrollbar-width:thin;z-index:3}
#teach details{border-top:1px solid var(--line-2)}
#teach summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;cursor:pointer;font-size:16px;list-style:none}
#teach summary::-webkit-details-marker{display:none}
#teach summary b{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--ash)}
#teach .row{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-height:48px;padding:6px 10px;margin:0 0 4px;border-radius:10px;background:var(--raise);text-align:start;font-size:14px;line-height:1.5;border:1px solid transparent}
#teach .row:hover{border-color:var(--accent)}
#teach .row small{color:var(--ash);font-size:12px}
#teach .row.built small{color:var(--brass)}

/* the board tier: the baked board picture full screen (map.js), pan/zoom by transform, invisible tap targets on the places */
#mapbox{position:absolute;inset:0;padding:0;overflow:hidden;border:0;border-radius:0;box-shadow:none;background:#5f8a3c;z-index:-1}
body.tier-board #hud{background:none}
.bmap{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;background:#5f8a3c;--k:1}
.bmap.dragging{cursor:grabbing}
.bmap .stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.bmap .pic{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;transition:filter .3s}
.bmap.filtering .pic{filter:brightness(.55)}
.bmap .pin{position:absolute;padding:0;margin:0;background:none;border:0;cursor:pointer;outline:none}
.bmap .pin .hit{position:absolute;left:50%;top:50%;width:max(100%,calc(48px * var(--k)));height:max(100%,calc(48px * var(--k)));transform:translate(-50%,-50%)}
.bmap .pin .crop{position:absolute;inset:0;background-image:var(--pic);background-size:var(--pw) var(--ph);background-repeat:no-repeat;opacity:0;transition:opacity .3s;border-radius:4px}
.bmap.filtering .pin.lit .crop{opacity:1}
/* stage 1C: the selection on the picture: a soft white glow on the ground under the building (CoC), the building a touch brighter */
.bmap .pin::before{content:'';position:absolute;left:-10%;right:-10%;bottom:-8%;height:52%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.7),rgba(255,255,255,.28) 62%,rgba(255,255,255,0));opacity:0;transition:opacity .2s;pointer-events:none}
.bmap .pin.sel::before{opacity:1}
.bmap .pin.hover:not(.sel)::before{opacity:.5}
.bmap .pin.sel .crop{opacity:1;filter:brightness(1.1) saturate(1.05)}

#labels{z-index:10}
canvas#gl{cursor:grab}
canvas#gl:active{cursor:grabbing}
body.en #head,body.en #card,body.en #teach,body.en #grades{direction:ltr}
@media (max-width:760px){
  #card{top:auto;bottom:84px;max-height:46vh}
  /* phones: the title sits under the tool buttons instead of beside them, one line, no subtitle */
  #head{top:76px;right:12px;left:12px;max-width:none;padding:8px 14px}
  #head h1{font-size:19px}
  #head p{display:none}
  #grades{bottom:12px;gap:4px;padding:4px}
  #grades button{height:44px;padding:0 12px;font-size:14px;gap:6px}
}
#btn-turn{font-size:20px;min-width:48px;padding:0}

/* ===================== stage 1C: Clash-of-Clans plates and stars (plates.js), same on the 3D board and on the picture =====================
   They let taps through (like CoC's names): the building under the finger is what a tap picks (3D: the place's own geometry;
   the picture: its ≥ 48 px target), so a plate floating over a neighbour never opens the wrong card. */
.plates{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.plate{position:absolute;left:0;top:0;display:none;align-items:center;justify-content:center;height:23px;padding:0 9px 1px;border-radius:7px;pointer-events:none;white-space:nowrap;
  font:600 12px/1 var(--display);color:#4a2d0f;letter-spacing:0;
  background:linear-gradient(#fffbf2 0%,#f8ecd0 60%,#efdcae 100%);border:1.5px solid #cda75c;
  box-shadow:inset 0 1px 0 #fff,0 2px 0 #a57a33,0 5px 10px rgba(25,14,0,.32);text-shadow:0 1px 0 rgba(255,255,255,.75);
  will-change:transform;transform-origin:50% 100%;transition:filter .15s}
.plate.on{display:flex}
.plate::after{content:'';position:absolute;left:calc(50% + var(--dx,0px));bottom:-6px;width:9px;height:9px;margin-left:-4.5px;background:#efdcae;border:solid #cda75c;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);box-shadow:2px 2px 0 -.5px #a57a33}
.plate.hero{height:26px;padding:0 11px 2px;border-radius:8px;font-size:13.5px;font-weight:700;color:#3f250a;
  background:linear-gradient(#fffdf6 0%,#fbefcf 45%,#f1d38e 100%);border:2px solid #c48f2c;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(196,143,44,.28),0 3px 0 #8e5f17,0 7px 14px rgba(25,14,0,.4)}
.plate.hero::after{width:10px;height:10px;margin-left:-5px;bottom:-6.5px;background:#f1d38e;border-color:#c48f2c;border-width:0 2px 2px 0;box-shadow:2px 2px 0 -.5px #8e5f17}
.plate.hero .t::before,.plate.hero .t::after{content:'';display:inline-block;width:4px;height:4px;margin:0 6px 2px;background:#c48f2c;transform:rotate(45deg);vertical-align:middle}
.plate.player{border-color:#8fb2b8}
.plate.hover{filter:brightness(1.05)}
.plate.sel{z-index:2;filter:drop-shadow(0 0 8px rgba(255,236,170,.85))}
.plate.lit{border-color:#3fa7b4;box-shadow:inset 0 1px 0 #fff,0 3px 0 #2c7d88,0 7px 14px rgba(0,20,25,.4)}
.plate.lit::after{border-color:#3fa7b4}
body.en .plate{direction:ltr;font-family:var(--display)}
.star{position:absolute;left:0;top:0;width:24px;height:24px;margin:-24px 0 0 -12px;display:none;pointer-events:none;will-change:transform}
.star.on{display:block}
.star svg{display:block;width:100%;height:100%;fill:#ffcf3d;stroke:#a86f12;stroke-width:1.6;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(255,208,70,.95)) drop-shadow(0 2px 0 rgba(110,62,0,.55));animation:starbob 1.8s ease-in-out infinite}
.star.done svg{fill:#9be0b4;stroke:#2f7d51;filter:drop-shadow(0 0 5px rgba(140,230,170,.9)) drop-shadow(0 2px 0 rgba(20,70,40,.5))}
.star.lit svg{animation-duration:1s}
@keyframes starbob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.07)}}
@media (prefers-reduced-motion:reduce){.star svg{animation:none}}
.plate .stem{position:absolute;left:calc(50% + var(--dx,0px));top:100%;width:2px;margin-left:-1px;height:calc(var(--lift,0px) + 4px);background:linear-gradient(#c48f2c,rgba(196,143,44,.55));display:none;pointer-events:none}
.plate.lifted .stem{display:block}
.plate.lifted::after{display:none}

/* ===================== stage 1C: the HUD in the board's own spirit: ivory parchment, wood frames, gold buttons (no dark glass) ===================== */
:root{--iv:#fff8e8;--iv2:#f3e2bd;--wood:#8a5a2b;--wood2:#5e3b17;--gold:#f2bf45;--gold2:#d9962a;--ink:#4a2a0c;--ink2:#7a5a36}
#hud .panel:not(#mapbox){background:linear-gradient(#fffaf0,#f6e8c8);border:3px solid var(--wood);border-radius:16px;backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:inset 0 0 0 2px #e9c878,inset 0 2px 0 3px rgba(255,255,255,.6),0 4px 0 var(--wood2),0 10px 24px rgba(20,10,0,.38);color:var(--ink)}
#head h1{color:var(--ink);font-weight:700;text-shadow:0 1px 0 #fff}
#head p{color:var(--ink2)}
/* tool buttons: chunky gold, pressed on tap */
#hud .tbtn.panel{background:linear-gradient(#ffe6a0 0%,#f6c451 55%,#e7a634 100%);border:2.5px solid #8a5a1f;border-radius:100px;color:#4a2a0c;font-weight:700;font-family:var(--display);font-size:16px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.65),inset 0 -3px 0 rgba(150,90,20,.35),0 4px 0 #6e4412,0 8px 14px rgba(20,10,0,.35);transition:transform .08s,box-shadow .08s,filter .15s}
#hud .tbtn.panel:hover{filter:brightness(1.06);border-color:#8a5a1f}
#hud .tbtn.panel:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(150,90,20,.35),0 1px 0 #6e4412,0 4px 8px rgba(20,10,0,.3)}
#hud .tbtn.panel.on{background:linear-gradient(#bfe6e8 0%,#7cc7cc 60%,#55aab1 100%);border-color:#2d6d74;color:#133c41;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 4px 0 #22575d,0 8px 14px rgba(0,20,25,.35)}
#btn-lang{font-family:var(--latin)!important}
#btn-turn{font-size:21px!important}
/* the grade filter: a wooden bar of ivory chips; the chosen one gold */
#hud #grades.panel{background:linear-gradient(#b07a43,#8e5d2d);border-color:var(--wood2);box-shadow:inset 0 2px 0 rgba(255,220,160,.35),inset 0 -2px 0 rgba(0,0,0,.2),0 4px 0 #3f270e,0 10px 22px rgba(20,10,0,.4)}
#grades button{background:linear-gradient(#fffaf0,#f1dfb6);color:#5a3a16;border:1.5px solid #c99a3e;box-shadow:0 2px 0 #7d5220;font-family:var(--ui);font-weight:600}
#grades button:hover{color:#3a2208;border-color:#a8741f;filter:brightness(1.04)}
#grades button.on{background:linear-gradient(#ffe39a,#f2b43a);color:#3a2208;border-color:#8a5a1f;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 2px 0 #6e4412}
#grades button b{color:#9a6a2e;opacity:1}
#grades button.on b{color:#6e4412}
/* the place card: parchment, the name in El Messiri under a ribbon, the built jobs as gold buttons */
#card small.k,#teach small.k{display:inline-block;padding:3px 10px;border-radius:100px;background:#8a5a2b;color:#fff3d6;font-size:11.5px;letter-spacing:.2px}
#card h2,#teach h2{color:var(--ink);font-weight:700;text-shadow:0 1px 0 #fff}
#card p{color:#5f4426}
#card-jobs li>*{background:rgba(255,250,236,.8);border:1.5px dashed #d3b27a;color:#6b4c2a}
#card-jobs button{background:linear-gradient(#ffe6a0 0%,#f6c451 60%,#eaa938 100%);border:2px solid #8a5a1f;border-style:solid;color:#3a2208;font-weight:600;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 3px 0 #6e4412,0 6px 10px rgba(20,10,0,.22);transition:transform .08s,box-shadow .08s,filter .15s}
#card-jobs button:hover{filter:brightness(1.05);border-color:#8a5a1f;background:linear-gradient(#ffeab0 0%,#f8cb5e 60%,#eeb040 100%)}
#card-jobs button:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 1px 0 #6e4412}
#card-jobs .soon{color:#8a6a45;background:rgba(243,226,189,.45)}
#card-jobs .gr{color:#6e4412;border-color:#c99a3e;background:rgba(255,250,236,.7)}
#card-jobs button .gr{background:rgba(255,248,225,.75);border-color:#a8741f}
#card-jobs .go{color:#3a2208;font-family:var(--display);font-weight:700}
#card-jobs .soon .go{color:#a88a62}
#card-jobs .ok{color:#2f7d51;font-weight:700}
#card-jobs li.lit>*{box-shadow:inset 3px 0 0 #3fa7b4,0 3px 0 #6e4412}
/* teacher mode */
#teach details{border-top:1.5px solid #e2c78e}
#teach summary{color:var(--ink);font-family:var(--display);font-weight:700}
#teach summary b{color:#9a6a2e}
#teach .row{background:rgba(255,250,236,.85);border:1.5px solid #e2c78e;color:#4a2a0c}
#teach .row:hover{border-color:#a8741f}
#teach .row small{color:#8a6a45}
#teach .row.built{background:linear-gradient(#fff1c9,#f6d98b);border-color:#c99a3e}
#teach .row.built small{color:#7a4e14}
/* the close buttons: little wooden coins */
#hud .x{background:linear-gradient(#b07a43,#7e5024);border:2px solid #5e3b17;color:#fff3d6;box-shadow:0 2px 0 #3f270e;width:30px;height:30px;font-size:16px;font-weight:700}
#hud .x:hover{border-color:#5e3b17;color:#fff;filter:brightness(1.1)}
#loader p{color:#fff3d6;text-shadow:0 1px 3px rgba(0,0,0,.6)}
#hud .panel:not(#mapbox) ::-webkit-scrollbar{width:8px}
#hud .panel:not(#mapbox) ::-webkit-scrollbar-thumb{background:#d3b27a;border-radius:8px}
#card,#teach{scrollbar-color:#d3b27a transparent}
@media (max-width:760px){
  #head{left:auto;right:12px;max-width:calc(100% - 24px);padding:6px 16px}
  #head h1{font-size:18px}
  .plate{height:21px;padding:0 7px 1px;font-size:11px;border-radius:6px}
  .plate.hero{height:23px;padding:0 9px 1px;font-size:12px;border-radius:7px}
  .plate.hero .t::before,.plate.hero .t::after{margin:0 4px 2px;width:3px;height:3px}
  .star{width:20px;height:20px;margin:-20px 0 0 -10px}
}