[hidden] { display:none !important; }   /* an id rule with display:flex would otherwise beat the hidden attribute (2026-10-14: the closed panel ate every click) */
:root { --fs-s: 9px; --fs-m: 9px; --fs-l: 18px; --fs-xl: 27px; }
@media (min-resolution: 1.5dppx) { :root { --fs-m: 13.5px; --fs-l: 13.5px; } }   /* whole device pixels per font pixel */
:root { --night:#1b1838; --ink:#0f0e22; --snow:#f2f6ff; --sodium:#ffa94d; --fog:#9cc4c6; --copper:#f26b21; --navy:#1f3e7a; --transit:#3a6fb0; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--ink); color:var(--snow); overflow:hidden; touch-action:none;
  font: var(--fs-m)/1.4 'Whyte', ui-monospace, Menlo, Consolas, monospace; -webkit-font-smoothing:none; font-smooth:never; -webkit-user-select:none; user-select:none; }
#game { position:fixed; inset:0; }
#game canvas { image-rendering: pixelated; image-rendering: crisp-edges; display:block; }
#title { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background: radial-gradient(ellipse at 50% 70%, #2a2350 0%, var(--ink) 70%); text-align:center; padding:16px; }
#title .sub { color: var(--fog); margin:0 0 10px; font-size:var(--fs-l); }
#title .small { max-width: 420px; color:#bcc7e6; } #title .attr { color:#7e8ab8; font-size:var(--fs-s); }
#join { display:flex; gap:8px; }
#join input, #chatin { background:var(--ink); color:var(--snow); border:2px solid var(--transit); padding:8px 10px; font:inherit; font-size:var(--fs-l); }
  padding:4px 8px; display:flex; gap:12px; letter-spacing:2px; font-weight:700; text-shadow:0 0 4px #e07a2e; }
#chatform { position:absolute; left:8px; bottom:12px; pointer-events:auto; display:none; }
#chatform.open { display:block; } #chatin { width:min(70vw, 420px); }
  padding:4px 10px; letter-spacing:2px; font-weight:700; display:none; white-space:nowrap; }
.btn { display:inline-block; background:var(--copper); color:var(--ink); border:2px solid #ffd38a; font-weight:700; padding:10px 16px; text-decoration:none; letter-spacing:1px; }
#select { position:fixed; inset:0; background:rgba(15,14,34,.94); overflow-y:auto; padding:16px; text-align:center; z-index:5; }
#select h2 { color:var(--sodium); letter-spacing:3px; margin:6px 0; text-shadow:2px 2px 0 #9c4a22; }
#cards { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:1180px; margin:12px auto; }
#cards .card { flex:0 1 150px; min-width:132px; }
.card { background:#1b1838; border:2px solid #3a6fb0; padding:8px 6px; cursor:pointer; text-align:center; position:relative; }
.card:hover, .card:focus { border-color:var(--sodium); outline:none; }
.card img, .card .ph { width:96px; height:96px; image-rendering:pixelated; display:block; margin:0 auto 6px; background:#2a2350; }
.card .nm { color:#ffd38a; font-weight:700; letter-spacing:1px; }
.card .tg { color:#bcc7e6; font-size:var(--fs-s); min-height:26px; }
.card .lv { position:absolute; top:4px; right:6px; color:#9cc4c6; font-size:var(--fs-s); }
.card.locked { opacity:.55; border-color:#4a5488; }
.card.locked::after { content:'LOCKED'; position:absolute; top:40px; left:0; right:0; color:#e2551f; font-weight:700; letter-spacing:2px; text-shadow:1px 1px 0 #000; }

#dialog { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom)); width:min(94vw, 560px); background:#111; border:3px solid #ffb13b; padding:10px; display:flex; gap:10px; z-index:6; box-shadow:4px 4px 0 #000; }
#dialog img { width:64px; height:64px; image-rendering:pixelated; background:#2a2350; flex:none; }
#dlg-who { color:#ffb13b; letter-spacing:2px; } #dlg-lines p { margin:4px 0; color:#f2f6ff; font-size:var(--fs-m); }
#dlg-opts { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } #dlg-opts button { background:#3a6fb0; color:#f2f6ff; border:2px solid #9cc4c6; font:inherit; font-size:var(--fs-s); padding:5px 8px; cursor:pointer; }
#panel { position:fixed; inset:max(10px, env(safe-area-inset-top)) 10px 10px 10px; max-width:720px; margin:0 auto; background:rgba(15,14,34,.97); border:3px solid #3a6fb0; z-index:7; display:flex; flex-direction:column; }
#tabs { display:flex; gap:4px; padding:6px; border-bottom:2px solid #2a2350; } #tabs button { background:#1b1838; color:#ffd38a; border:2px solid #4a5488; font:inherit; padding:6px 10px; cursor:pointer; }
#tabs button.on { border-color:#ffa94d; } #panel-x { margin-left:auto; }
.tab { overflow-y:auto; padding:8px; flex:1; font-size:var(--fs-s); }
.it { border:2px solid #2a2350; margin-bottom:6px; padding:6px; background:#1b1838; } .it h4 { margin:0 0 3px; font-size:var(--fs-m); } .it .meta { color:#9cc4c6; font-size:var(--fs-s); }
.it ul { margin:4px 0; padding-left:16px; color:#d6def5; } .it .acts { display:flex; flex-wrap:wrap; gap:4px; }
.it .acts button, .sr button { background:#2a2350; color:#f2f6ff; border:2px solid #4a5488; font:inherit; font-size:var(--fs-s); padding:4px 7px; cursor:pointer; }
.it.eq { border-color:#ffa94d; } .mats { color:#bcc7e6; margin:6px 0 10px; }
.sr { display:flex; gap:8px; align-items:flex-start; padding:5px 0; border-bottom:1px solid #2a2350; } .sr .t { flex:1; } .sr .t small { color:#9cc4c6; display:block; }
.sr .rk { color:#ffd38a; white-space:nowrap; } .mod.chosen { color:#ffa94d; } .mod.locked { opacity:.45; }


#card { position:fixed; inset:0; background:#000 center / cover no-repeat; opacity:0; pointer-events:none; transition: opacity .6s; z-index: 50; }
#card.on { opacity:1; }

/* ================= HUD (rebuild 2026-10-14: visible, pretty, desktop + phone landscape + phone portrait) ================= */
:root { --panel: rgba(15,14,34,.82); --edge:#5a4a6a; --gold:#ffd38a; --hp:#c8302c; --rage:#e2701f; --mana:#3a7ad0; --pad: max(8px, env(safe-area-inset-left)); }
#hud { position:fixed; inset:0; pointer-events:none; }
#hud button { font:inherit; font-weight:700; cursor:pointer; pointer-events:auto; }
.frame, #topbar, #tracker .q, #carbox, #prompt, #loot, #moodles .m { background:var(--panel); border:2px solid var(--edge); box-shadow: inset 0 0 0 1px #000, 2px 2px 0 #000; }
#topbar { position:absolute; top:max(8px, env(safe-area-inset-top)); left:var(--pad); display:flex; gap:10px; align-items:center; padding:4px 10px; color:var(--gold); letter-spacing:1px; font-weight:700; }
#topbar #clock { color:#bcc7e6; font-weight:400; }
#mapwrap { position:absolute; top:max(8px, env(safe-area-inset-top)); right:max(8px, env(safe-area-inset-right)); width:132px; height:132px; border-radius:50%; overflow:hidden; border:3px solid var(--edge); box-shadow:0 0 0 2px #000, 2px 2px 0 2px #000; background:#0f0e22; }
#minimap { width:186px; height:186px; position:absolute; left:-27px; top:-27px; transform: rotate(45deg); image-rendering:pixelated; }
#mapme { position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px; background:#ffd38a; border:1px solid #000; }
#tracker { position:absolute; top:calc(max(8px, env(safe-area-inset-top)) + 142px); right:max(8px, env(safe-area-inset-right)); width:min(40vw, 250px); font-size:var(--fs-s); }
#tracker .q { padding:4px 7px; margin-bottom:4px; border-left:3px solid var(--sodium); }
#tracker .q b { color:var(--gold); display:block; font-size:var(--fs-s); letter-spacing:1px; } #tracker .q span { color:#d6def5; }
#moodles { position:absolute; left:var(--pad); top:calc(max(8px, env(safe-area-inset-top)) + 40px); display:flex; flex-direction:column; gap:4px; }
#moodles .m { display:flex; align-items:center; gap:6px; padding:3px 8px 3px 4px; font-size:var(--fs-s); color:#f2f6ff; letter-spacing:1px; }
#moodles .m i { width:12px; height:12px; border-radius:50%; display:inline-block; border:1px solid #000; }
#moodles .m.warn i { background:#ffb13b; } #moodles .m.bad i { background:#e2551f; animation: pulse 1s infinite; } #moodles .m.ok i { background:#8fb04e; }
@keyframes pulse { 50% { opacity:.35; } }
#events { position:absolute; top:calc(max(8px, env(safe-area-inset-top)) + 6px); left:50%; transform:translateX(-50%); width:min(70vw, 620px); text-align:center; color:var(--gold); text-shadow: 1px 1px 0 #000, -1px 0 0 #000; font-size:var(--fs-l); }
#chatlog { position:absolute; left:var(--pad); bottom:calc(118px + env(safe-area-inset-bottom)); max-width:min(46vw, 420px); font-size:var(--fs-s); text-shadow:1px 1px 0 #000; }
#chatlog div { background:rgba(15,14,34,.55); padding:1px 5px; margin-top:2px; }
#prompt { position:absolute; left:50%; bottom:calc(122px + env(safe-area-inset-bottom)); transform:translateX(-50%); color:var(--gold); padding:5px 12px; letter-spacing:1px; font-weight:700; display:none; white-space:nowrap; }
#prompt.on { display:block; }
#carbox { position:absolute; left:50%; bottom:calc(150px + env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; gap:10px; align-items:center; padding:6px 10px; }
#carbox .g { text-align:center; } #carbox .g b { display:block; font-size:var(--fs-xl); color:var(--gold); line-height:1; } #carbox .g small { color:#9cc4c6; font-size:var(--fs-s); }
#carbox .bars label { display:flex; align-items:center; gap:6px; font-size:var(--fs-s); color:#bcc7e6; } #carbox .bars i { display:block; width:90px; height:7px; background:#000; border:1px solid #333; }
#carbox .bars i b { display:block; height:100%; background:#8fb04e; }
/* bottom: orbs and the belt */
#bottom { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(8px + env(safe-area-inset-bottom)); display:flex; align-items:flex-end; gap:10px; pointer-events:none; }
.orb { position:relative; width:84px; height:84px; border-radius:50%; overflow:hidden; background: radial-gradient(circle at 35% 30%, #2a2a36, #050508 70%); border:3px solid #6a5a3a; box-shadow:0 0 0 2px #000, inset 0 0 12px #000; }
.orb .fill { position:absolute; left:0; right:0; bottom:0; height:100%; transition: height .15s; }
.orb.hp .fill { background: radial-gradient(circle at 40% 20%, #ff7060, var(--hp) 45%, #5a0e0e); }
.orb.res .fill { background: radial-gradient(circle at 40% 20%, #ffc070, var(--rage) 45%, #6a2a08); }
.orb.res.mana .fill { background: radial-gradient(circle at 40% 20%, #9ad0ff, var(--mana) 45%, #0e2a5a); }
.orb::after { content:''; position:absolute; left:14%; top:8%; width:40%; height:22%; border-radius:50%; background:rgba(255,255,255,.18); }
.orb span { position:absolute; left:0; right:0; bottom:28%; text-align:center; font-size:var(--fs-s); font-weight:700; text-shadow:1px 1px 0 #000; }
#mid { display:flex; flex-direction:column; align-items:center; gap:4px; pointer-events:none; }
#belt { display:flex; gap:6px; padding:5px; background:var(--panel); border:2px solid var(--edge); box-shadow:2px 2px 0 #000; pointer-events:auto; }
#skillbar, #quickbar { display:flex; gap:4px; }
#quickbar { padding-left:6px; border-left:2px solid var(--edge); }
.sk, .qs { position:relative; width:48px; height:48px; background:#1b1838; border:2px solid #6a5a3a; color:var(--gold); font:inherit; font-size:var(--fs-s); overflow:hidden; padding:2px !important; display:flex; align-items:flex-end; justify-content:center; text-align:center; }
.sk .k, .qs .k { position:absolute; top:1px; left:3px; font-size:var(--fs-s); color:#bcc7e6; } .sk .n { line-height:1.05; font-size:var(--fs-s); word-break:normal; overflow-wrap:normal; white-space:nowrap; overflow:hidden; text-overflow:clip; max-width:100%; }
.sk .c { position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); }
.sk.locked { opacity:.4; } .sk.poor { color:#7e8ab8; }
.qs .ic { position:absolute; inset:6px 6px 12px 6px; background-repeat:no-repeat; image-rendering:pixelated; }
.qs .n { position:absolute; right:3px; bottom:1px; font-size:var(--fs-s); color:#fff; text-shadow:1px 1px 0 #000; }
#xpline { width:100%; height:5px; background:#000; border:1px solid #333; } #xpline i { display:block; height:100%; width:0; background:linear-gradient(90deg, #ffd38a, #ffa94d); }
#menu { display:flex; gap:4px; align-items:center; pointer-events:auto; }
#menu button { background:#2a2350; color:var(--gold); border:2px solid var(--edge); padding:3px 8px; font-size:var(--fs-s); }
#menu kbd { color:#7e8ab8; font-size:var(--fs-s); } #lvl { color:var(--gold); font-weight:700; padding-left:6px; text-shadow:1px 1px 0 #000; }
#chatform { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(140px + env(safe-area-inset-bottom)); display:none; pointer-events:auto; }
#chatform.open { display:block; }
#chatin { background:var(--ink); color:var(--snow); border:2px solid var(--transit); padding:8px 10px; font:inherit; font-size:var(--fs-l); width:min(80vw, 420px); }
#therm { display:none; }
/* touch controls */
#stick { position:absolute; left:0; bottom:0; width:45vw; height:55vh; pointer-events:auto; display:none; }
#nub { position:absolute; width:56px; height:56px; border-radius:50%; border:3px solid rgba(255,211,138,.7); background:rgba(15,14,34,.35); display:none; }
#pad { position:absolute; right:max(10px, env(safe-area-inset-right)); bottom:calc(10px + env(safe-area-inset-bottom)); display:none; width:170px; height:170px; pointer-events:none; }
#pad button { position:absolute; border-radius:50%; border:3px solid #ffd38a; box-shadow:2px 2px 0 #000; color:#0f0e22; }
#btn-hit { right:0; bottom:0; width:84px; height:84px; background:#e2551f; font-size:var(--fs-l) !important; }
#btn-enter { right:92px; bottom:6px; width:58px; height:58px; background:#3a7ad0; color:#f2f6ff !important; font-size:var(--fs-s) !important; }
#btn-alt { right:20px; bottom:92px; width:58px; height:58px; background:#8fb04e; font-size:var(--fs-s) !important; }
#btn-chat { right:110px; bottom:84px; width:44px; height:44px; background:#4a5488; color:#f2f6ff !important; font-size:var(--fs-s) !important; }
body.touch #stick, body.touch #pad { display:block; }
body.touch #menu kbd { display:none; }
/* phone landscape: orbs small, belt between the stick and the buttons */
@media (pointer: coarse) and (orientation: landscape) {
  .orb { width:56px; height:56px; } .sk, .qs { width:40px; height:40px; }
  #bottom { gap:6px; } #prompt { bottom:calc(100px + env(safe-area-inset-bottom)); } #carbox { bottom:calc(120px + env(safe-area-inset-bottom)); }
  #mapwrap { width:96px; height:96px; } #minimap { width:136px; height:136px; left:-20px; top:-20px; }
  #tracker { top:calc(max(8px, env(safe-area-inset-top)) + 104px); width:min(30vw, 220px); }
  #chatlog { bottom:calc(90px + env(safe-area-inset-bottom)); }
  #events { top:calc(max(8px, env(safe-area-inset-top)) + 40px); width:min(56vw, 520px); }
}
/* phone portrait: the belt above the controls, the orbs either side of it */
@media (pointer: coarse) and (orientation: portrait) {
  #bottom { bottom:calc(186px + env(safe-area-inset-bottom)); gap:6px; }
  .orb { width:54px; height:54px; } .sk, .qs { width:38px; height:38px; } #quickbar .qs:nth-child(n+3) { display:none; }
  #menu button { padding:3px 5px; }
  #prompt { bottom:calc(268px + env(safe-area-inset-bottom)); } #carbox { bottom:calc(290px + env(safe-area-inset-bottom)); }
  #stick { width:55vw; height:40vh; }
  #mapwrap { width:92px; height:92px; } #minimap { width:130px; height:130px; left:-19px; top:-19px; }
  #tracker { top:calc(max(8px, env(safe-area-inset-top)) + 100px); width:min(52vw, 220px); }
  #events { top:calc(max(8px, env(safe-area-inset-top)) + 40px); }
  #moodles { top:calc(max(8px, env(safe-area-inset-top)) + 36px); }
  #chatlog { bottom:calc(260px + env(safe-area-inset-bottom)); }
}
/* the loot window and the pack */
#loot { position:fixed; right:max(10px, env(safe-area-inset-right)); top:50%; transform:translateY(-50%); width:min(92vw, 320px); max-height:70vh; display:flex; flex-direction:column; z-index:6; }
#loot .hd { display:flex; gap:6px; align-items:center; padding:6px; border-bottom:2px solid var(--edge); }
#loot .hd b { flex:1; color:var(--gold); letter-spacing:1px; } #loot button, .gd button { background:#2a2350; color:#f2f6ff; border:2px solid var(--edge); font:inherit; font-size:var(--fs-s); padding:4px 8px; cursor:pointer; }
#loot-list { overflow-y:auto; padding:6px; }
.gd { display:flex; align-items:center; gap:8px; padding:4px; border-bottom:1px solid #2a2350; }
.gd .ic { width:30px; height:30px; flex:none; background-repeat:no-repeat; image-rendering:pixelated; background-color:#1b1838; border:1px solid #2a2350; }
.gd .t { flex:1; } .gd .t small { display:block; color:#9cc4c6; font-size:var(--fs-s); }
.gd .ct { color:var(--gold); min-width:26px; text-align:right; }
.rc { padding:6px; border:2px solid #2a2350; margin-bottom:6px; background:#1b1838; } .rc.no { opacity:.55; } .rc b { color:var(--gold); }
.rc small { display:block; color:#9cc4c6; } .rc button { margin-top:4px; background:#3a6fb0; color:#f2f6ff; border:2px solid #9cc4c6; font:inherit; font-size:var(--fs-s); padding:4px 8px; cursor:pointer; }
.wt { color:#bcc7e6; margin:4px 0 8px; } .wt b { color:var(--gold); }

/* ================= fonts + start screen (2026-10-14: font sets, logos, a proper start screen) =================
   Sizes are whole multiples of each face's grid: Whyte 9px, Bone and Ooze 16px, Neon 18px, Chalk 14px. */
.f-bone { font-family:'Deadmonton Bone','Whyte',monospace; } .f-ooze { font-family:'Deadmonton Ooze','Whyte',monospace; }
.f-neon { font-family:'Deadmonton Neon','Whyte',monospace; } .f-chalk { font-family:'Deadmonton Chalk','Whyte',monospace; }
h2, h3, #select h2, #panel #tabs button, .card .nm { font-family:'Deadmonton Bone','Whyte',monospace; font-weight:400; }
#select h2 { font-size:32px; letter-spacing:2px; }               /* Bone: 16 units, 2 px a font pixel */
#tracker .q b, #tracker .q h4 { font-family:'Deadmonton Chalk','Whyte',monospace; font-weight:400; font-size:14px; }
#topbar #place { font-family:'Deadmonton Bone','Whyte',monospace; font-size:16px; font-weight:400; letter-spacing:1px; }

#title { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  background:#0f0e22; padding: max(16px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom)); gap:0; overflow:hidden; text-align:center; }
#title-fx { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
#title > :not(#title-fx) { position:relative; z-index:1; }
#title h1 { margin: 2vh 0 0; line-height:0; }
#logo { width:min(86vw, 640px, 70vh); height:auto; filter: drop-shadow(0 4px 0 rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(15,14,34,.8)); animation: logo-in 1.2s ease-out both; }
@keyframes logo-in { from { opacity:0; transform: translateY(-10px) scale(.97); } to { opacity:1; transform:none; } }
#title .sub { font-family:'Deadmonton Chalk','Whyte',monospace; color:#cfe2e3; font-size:28px; margin: 4px 0 0; text-shadow: 2px 2px 0 #0f0e22; letter-spacing:1px; }
#tmenu, #howto { margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:8px; width:min(92vw, 360px); }
#status { margin:0 0 4px; font-size:var(--fs-l); color:#ffd38a; text-shadow: 1px 1px 0 #000, 0 0 6px #0f0e22; min-height:1.4em; }
.mbtn { display:block; width:100%; box-sizing:border-box; padding:11px 14px 9px; text-decoration:none; cursor:pointer; text-align:center;
  font-family:'Deadmonton Bone','Whyte',monospace; font-size:32px; line-height:1; letter-spacing:1px; color:#0f0e22;
  background: linear-gradient(#ffb15a, #e2551f); border:3px solid #ffd38a; box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 3px 3px 0 #000; }
.mbtn:hover, .mbtn:focus-visible { outline:none; filter:brightness(1.12); transform: translateY(-1px); }
.mbtn:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 1px 1px 0 #000; }
.mbtn.alt { font-size:16px; padding:8px 12px 7px; color:#f2f6ff; background: rgba(15,14,34,.82); border-color:#5a6aa8; box-shadow: 2px 2px 0 #000; }
#play { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 3px 3px 0 #000, 0 0 18px rgba(255,169,77,.7); } }
#howto { background: rgba(15,14,34,.9); border:3px solid #5a6aa8; padding:12px; box-shadow: 3px 3px 0 #000; text-align:left; }
#howto h3 { margin:0; color:var(--sodium); font-size:32px; }
#howto dl { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0; width:100%; }
#howto dt { color:#ffd38a; font-weight:700; white-space:nowrap; } #howto dd { margin:0; color:#d6def5; }
#title .attr { margin: 10px 0 0; color:#8e9acb; font-size:var(--fs-s); text-shadow:1px 1px 0 #000; }
@media (orientation: landscape) and (max-height: 500px) {     /* phone on its side: logo left, menu right */
  #title { flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap: 0 4vw; }
  #title h1 { margin:0; } #logo { width:min(46vw, 70vh * 2); }
  #title .sub { display:none; }
  #tmenu, #howto { margin-top:0; width:min(42vw, 340px); }
  #howto { max-height: 86vh; overflow:auto; }
  #title .attr { position:absolute; bottom:4px; left:0; right:0; }
}

#card { display:flex; align-items:center; justify-content:center; }
#card-logo { width:min(80vw, 620px); filter: drop-shadow(0 0 24px #000); }
#card-logo:not([src]) { display:none; }
#zone { position:fixed; left:0; right:0; top:22vh; text-align:center; pointer-events:none; z-index:4; color:#f2e6c8;
  font-size:48px; line-height:1; letter-spacing:2px; opacity:0; transform: translateY(6px); transition: opacity .5s, transform .5s;
  text-shadow: 3px 3px 0 #0f0e22, -1px -1px 0 #0f0e22, 0 0 18px rgba(0,0,0,.8); }
#zone.on { opacity:1; transform:none; }
#zone.f-neon { color:#ffd3e4; text-shadow: 0 0 6px #ff3a6a, 0 0 18px #ff3a6a, 3px 3px 0 #0f0e22; font-size:54px; }
#zone.f-ooze { color:#bff3e4; font-size:48px; } #zone.f-chalk { font-size:42px; }
@media (max-width: 600px) { #zone, #zone.f-ooze { font-size:32px; } #zone.f-neon { font-size:36px; } #zone.f-chalk { font-size:28px; } }   /* 2x each face's grid */