*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#0b0b14;color:#e8e8d0;font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
#game{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
canvas#board{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
/* compact HUD */
#hud{position:absolute;top:calc(4px + env(safe-area-inset-top));left:calc(6px + env(safe-area-inset-left));right:calc(70px + env(safe-area-inset-right));
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:15px;font-weight:bold;color:#ff8;pointer-events:none;
  text-shadow:1px 1px 0 #000,-1px -1px 0 #000;background:rgba(0,0,0,.45);padding:4px 10px;border-radius:6px;width:max-content;max-width:calc(100% - 80px)}
#hud b{color:#ffd84a;margin-left:2px}
#timer.low{color:#f66}
#extra{color:#9f9}
#hint{position:absolute;top:calc(36px + env(safe-area-inset-top));left:calc(6px + env(safe-area-inset-left));font-size:12px;color:#ddd;pointer-events:none;
  background:rgba(0,0,0,.4);padding:2px 8px;border-radius:4px;max-width:60%;transition:opacity .6s}
#hint:empty{display:none}
#topRight{position:absolute;top:calc(4px + env(safe-area-inset-top));right:calc(6px + env(safe-area-inset-right))}
/* overlay controls (thumb zones) */
.cluster{position:absolute;bottom:calc(10px + env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:10px;pointer-events:none}
#ctlLeft{left:calc(10px + env(safe-area-inset-left))}
#ctlRight{right:calc(10px + env(safe-area-inset-right))}
.ctl{pointer-events:auto;min-width:56px;min-height:56px;width:56px;height:56px;border-radius:50%;padding:0;font-size:24px;
  background:rgba(20,20,35,.55);color:#ffd84a;border:2px solid rgba(255,216,74,.7);box-shadow:none;touch-action:manipulation}
.ctl.big{width:76px;height:76px;font-size:34px}
.ctl.small{min-width:40px;min-height:40px;width:40px;height:40px;font-size:20px;border-radius:8px}
.ctl:active{transform:scale(.93);background:rgba(255,216,74,.35)}
.ctl:disabled{opacity:.25}
#nextPiece{pointer-events:none;background:rgba(20,20,35,.55);border:2px solid rgba(85,85,102,.8);border-radius:6px}
/* overlays */
.overlay{position:absolute;inset:0;background:rgba(8,8,20,.82);display:flex;align-items:center;justify-content:center;padding:8px;overflow:auto;text-align:center}
.overlay[hidden]{display:none}
.card{border:3px solid #556;background:#14141f;padding:10px 16px;box-shadow:4px 4px 0 #000;max-width:560px;width:100%;max-height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
h1{margin:0;letter-spacing:4px;color:#ffd84a;text-shadow:3px 3px 0 #a33;font-size:28px}
h2{margin:0;color:#ffd84a}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.label{color:#7fd;font-weight:bold}
.card ol{text-align:left;margin:0;padding-left:22px;max-height:7.5em;overflow:auto;font-size:14px}
.card li.me{color:#ffd84a}
details{font-size:13px;text-align:left}
summary{cursor:pointer;color:#7fd;text-align:center}
.hints{font-size:12px;opacity:.85}
input,select{font-family:inherit;background:#000;color:#9f9;border:2px solid #556;padding:4px;font-size:16px}
button{font-family:inherit;font-weight:bold;background:#ffd84a;color:#111;border:0;padding:8px 14px;box-shadow:3px 3px 0 #a33;cursor:pointer;font-size:16px}
#startBtn,#againBtn{font-size:22px;padding:12px 36px;min-height:56px}
/* portrait phone prompt */
#rotatePrompt{display:none;position:absolute;inset:0;z-index:50;background:#0b0b14;color:#ffd84a;flex-direction:column;align-items:center;justify-content:center;gap:16px;font-size:20px;text-align:center;padding:20px}
#rotatePrompt .phone{font-size:64px;animation:spin 2s ease-in-out infinite}
@keyframes spin{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(90deg)}}
@media (orientation:portrait) and (pointer:coarse){#rotatePrompt{display:flex}}
@media (max-height:420px){#hud{font-size:13px;gap:2px 10px;padding:3px 8px} h1{font-size:22px} .card{padding:6px 12px;gap:5px} .card ol{max-height:4.5em}}

/* ---- polish ---- */
#hud{background:linear-gradient(180deg,rgba(14,20,38,.78),rgba(8,12,24,.62));border:1px solid rgba(255,216,74,.35);border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.35);color:#f3e7b0;letter-spacing:.3px}
#hud b{color:#ffe27a}
.ctl{background:radial-gradient(circle at 35% 30%,rgba(60,66,96,.8),rgba(14,16,30,.75));box-shadow:0 3px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.15)}
.ctl[hidden]{display:none}
#doneBtn{color:#9f9;border-color:rgba(140,255,140,.75)}
.overlay{background:radial-gradient(ellipse at center,rgba(12,22,44,.78),rgba(4,6,14,.92));backdrop-filter:blur(2px)}
.card{border:1px solid rgba(255,216,74,.45);background:linear-gradient(180deg,#1a1f33,#10131f);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}
h1{font-family:Georgia,"Times New Roman",serif;font-weight:900;letter-spacing:6px;font-size:34px;text-shadow:0 3px 0 #7a2222,0 6px 14px rgba(0,0,0,.6)}
h2{font-family:Georgia,"Times New Roman",serif;letter-spacing:2px}
button{border-radius:10px;box-shadow:0 3px 0 #8a2a2a,0 6px 14px rgba(0,0,0,.35);background:linear-gradient(180deg,#ffe27a,#f2b93a)}
button.alt{background:linear-gradient(180deg,#d9dff0,#a9b3cc);box-shadow:0 3px 0 #4a5470,0 6px 14px rgba(0,0,0,.35)}
input,select{border-radius:6px;background:#0a0d18;color:#cfe8ff;border:1px solid #4a5574}
.settings label{display:flex;flex-direction:column;align-items:center;font-size:14px;gap:2px}
.settings small,.sub{font-size:11px;opacity:.7}
.card.pause{max-width:340px;gap:10px}
.card.pause button{width:100%;min-height:48px;font-size:18px}
.set{font-size:14px}
body.menu #hud,body.menu #hint,body.menu .cluster{display:none}
#timer.low{animation:blink .5s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}

.code{font-family:"Courier New",monospace;letter-spacing:6px;color:#9ff;font-size:1.3em}
#netStatus{position:absolute;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(120,20,20,.85);color:#fff;padding:6px 14px;border-radius:8px;font-size:14px;z-index:60;pointer-events:none}
#netStatus[hidden]{display:none}
#hostCtl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}

/* always-visible Menu / exit button (top-right, above HUD, never under timer/banners) */
#topRight{display:flex;gap:6px;align-items:center;z-index:1000}
#menuBtn{pointer-events:auto;min-height:48px;padding:0 18px;font-size:20px;font-weight:800;border-radius:12px;color:#14100a;background:#ffd84a;border:2px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.6);white-space:nowrap;cursor:pointer}
#menuBtn:hover,#menuBtn:focus-visible{background:#fff1a8;outline:3px solid #fff}
body.menu #menuBtn{display:none}
#hud{right:calc(190px + env(safe-area-inset-right))}
#pauseMenu{z-index:50}
.card.pause{max-height:calc(100vh - 16px);overflow:auto}
.card.pause button{min-height:48px;font-size:19px}
.card.pause button.quit{background:#b8302a;color:#fff;border:2px solid #ffd0c8;font-weight:800}
.card.pause button:focus-visible,.card.pause button.padfocus{outline:4px solid #ffd84a;outline-offset:2px}
@media (max-height:420px){#menuBtn{min-height:40px;font-size:16px;padding:0 12px} #hud{right:calc(160px + env(safe-area-inset-right))} .card.pause button{min-height:38px;font-size:16px}}
@media (max-width:520px){#hud{right:calc(150px + env(safe-area-inset-right))} #menuBtn{font-size:16px;padding:0 10px}}

.exitArcade{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:10px;font-size:18px;font-weight:800;color:#fff;background:#3a4466;border:2px solid #ffd84a;text-decoration:none}
.exitArcade:hover,.exitArcade:focus-visible,.exitArcade.padfocus{background:#ffd84a;color:#14100a;outline:3px solid #fff}
.exitArcade.top{position:absolute;top:10px;left:10px;min-height:40px;font-size:16px;padding:0 12px}
#startOverlay .card{position:relative}
#startOverlay .card button.padfocus,#overOverlay button.padfocus{outline:4px solid #ffd84a;outline-offset:2px}
#pauseMenu{z-index:1100}
@media (orientation:portrait) and (pointer:coarse){body:not(.menu) #hud,body:not(.menu) #hint{display:none}}

/* shared NOG close X sits at the top-right corner: keep our controls clear of it */
#topRight{right:calc(60px + env(safe-area-inset-right))}
#hud{right:calc(250px + env(safe-area-inset-right))}
@media (max-height:420px){#hud{right:calc(220px + env(safe-area-inset-right))}}
@media (max-width:520px){#hud{right:calc(210px + env(safe-area-inset-right))}}