/* Dr. Diggs · FutureTopia Break Room game. Brand: FutureTopia brand guide v2.0 */
@font-face{font-family:Orbitron;src:url("../assets/fonts/Orbitron.ttf");font-weight:400 900}
@font-face{font-family:Saira;src:url("../assets/fonts/Saira.ttf");font-weight:100 900;font-stretch:50% 125%}
@font-face{font-family:FTText;src:url("../assets/fonts/FutureTopiaText-Regular.ttf");font-weight:400}
@font-face{font-family:FTText;src:url("../assets/fonts/FutureTopiaText-Bold.ttf");font-weight:700}
:root{--mid:#100A24;--deep:#2A1450;--pur:#6B3FA0;--haze:#B79CE8;--lav:#EDE4FB;--teal:#4D999B;--navy:#0C2A59;--sky:#669DD1;--gold:#F7B639;--sand:#E8C39C;--ok:#1F9D5B;--warn:#E08A00;--bad:#D93D45;
 --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#100A24;color:#fff;font:15px/1.35 FTText,Arial,sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
.H{font-family:Saira,Arial;font-stretch:75%;font-weight:700}.O{font-family:Orbitron,Arial;font-weight:900}
.gold{background:linear-gradient(180deg,#FFD98A,#F7B639 55%,#D98E12);-webkit-background-clip:text;background-clip:text;color:transparent}
#app{position:fixed;inset:0;display:flex;flex-direction:column;max-width:560px;margin:0 auto;background:radial-gradient(ellipse at 70% 15%,#2A1450 0%,#160C33 55%,#100A24 100%)}
.boot{margin:auto;text-align:center}.bootbar{width:200px;height:8px;border-radius:4px;background:#ffffff22;margin:14px auto 6px}.bootbar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#4D999B,#669DD1)}
/* screens */
.screen{flex:1;display:flex;flex-direction:column;min-height:0;padding:calc(var(--sat) + 14px) 16px calc(var(--sab) + 16px)}
.title-art{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.title-art img{height:34vh;max-height:300px;filter:drop-shadow(0 6px 18px #0009)}
.title-art .sub{font-family:Saira;font-stretch:75%;font-weight:700;letter-spacing:2.4px;color:var(--haze);font-size:12px}
.btn{display:block;width:100%;text-align:center;border-radius:12px;padding:13px 16px;font-family:Saira;font-stretch:75%;font-weight:700;font-size:18px;letter-spacing:.8px;text-transform:uppercase;min-height:48px}
.btn.main{background:var(--navy);color:#fff;box-shadow:0 2px 0 #0006,inset 0 0 0 2px #669DD155}
.btn.gold{background:linear-gradient(180deg,#FFD98A,#F7B639);color:var(--mid);-webkit-text-fill-color:var(--mid)}
.btn.line{border:2px solid var(--sky);color:#fff}
.btn:disabled{opacity:.4}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px;align-items:center}
.small{font-size:12px;color:#CFC4EA}
.hud-l{font-family:Saira;font-stretch:75%;font-weight:700;letter-spacing:1px;font-size:11px;color:#CFC4EA;text-transform:uppercase}
/* dive list */
.dives{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin:10px -4px;padding:0 4px}
.dive{display:flex;gap:10px;align-items:center;background:#ffffff0d;border:1.5px solid #ffffff1a;border-radius:14px;padding:8px;text-align:left;min-height:64px}
.dive .th{width:44px;height:64px;border-radius:8px;background-size:cover;background-position:center;flex:none}
.dive .nm{font-family:Saira;font-stretch:75%;font-weight:700;font-size:17px}
.dive .st{color:var(--gold);letter-spacing:2px;font-size:15px}.dive .st i{color:#ffffff30;font-style:normal}
.dive.locked{opacity:.45}
.badge{display:inline-block;font-family:Saira;font-stretch:75%;font-weight:700;font-size:10px;letter-spacing:.6px;border-radius:5px;padding:1px 6px;background:#ffffff1a;color:#CFC4EA}
.badge.on{background:var(--teal);color:var(--mid)}
/* battle */
.battle{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}
.hud{background:#100A24E6;padding:calc(var(--sat) + 6px) 10px 6px;display:flex;flex-direction:column;gap:5px;z-index:2}
.hud .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hud .val{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:4px}
.coin{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE6A6,#F7B639 55%,#C9861A);display:inline-block;box-shadow:0 0 0 1px #8a5a0a}
.gem{width:12px;height:12px;transform:rotate(45deg);background:linear-gradient(135deg,#9CC6EC,#669DD1);display:inline-block;border-radius:2px}
.preview{display:flex;gap:6px;align-items:center;min-height:26px;overflow-x:auto}
.pv{display:inline-flex;align-items:center;gap:2px;font-weight:700;font-size:12px;position:relative;padding-right:2px}
.pv canvas{width:24px;height:24px}
.pv .sh{position:absolute;left:14px;top:-3px;font-size:10px}
.iconbtn{width:38px;height:32px;border-radius:9px;background:#ffffff14;font-family:Saira;font-stretch:75%;font-weight:700;font-size:15px;display:inline-flex;align-items:center;justify-content:center}
.boardwrap{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}
canvas.board{display:block;touch-action:none}
.side{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:7px;z-index:2}
.side .iconbtn{width:46px;height:34px;background:#100A24CC;border:1.5px solid var(--sky)}
.side .iconbtn.on{background:var(--sky);color:var(--mid)}
.early{background:linear-gradient(180deg,#FFD98A,#F7B639)!important;color:var(--mid)!important;border:0!important;font-size:13px!important;width:auto!important;padding:0 8px}
.dig{position:absolute;left:10px;bottom:10px;width:64px;height:64px;border-radius:50%;z-index:2;display:flex;align-items:center;justify-content:center}
.dig svg{position:absolute;inset:0}
.dig b{position:relative;font-family:Saira;font-stretch:75%;font-weight:700;font-size:17px;letter-spacing:.5px}
.dig.armed{animation:pulse .8s infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
.bar{background:#100A24E6;padding:6px 6px calc(var(--sab) + 6px);display:flex;gap:4px;justify-content:space-around;z-index:2;min-height:74px}
.tb{flex:1;max-width:66px;border-radius:10px;padding:3px 0 2px;text-align:center;border:2px solid transparent;position:relative}
.tb canvas{width:40px;height:40px;display:block;margin:0 auto}
.tb .p{font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;gap:3px}
.tb.sel{border-color:var(--gold);background:#F7B63922}
.tb.poor{opacity:.42}
.panel{background:#100A24F2;padding:8px 10px calc(var(--sab) + 8px);z-index:3;display:flex;flex-direction:column;gap:7px;border-top:2px solid var(--sky)}
.panel .row .btn{padding:9px 6px;font-size:15px;min-height:42px}
.chips{display:flex;gap:6px}.chip{flex:1;border-radius:9px;border:1.5px solid #ffffff33;padding:6px 0;text-align:center;font-family:Saira;font-stretch:75%;font-weight:700;font-size:13px}
.chip.on{border-color:var(--teal);background:#4D999B33}
.toast{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:#100A24F0;border:1.5px solid var(--sky);border-radius:10px;padding:6px 12px;font-size:13px;z-index:9;max-width:90%;text-align:center;pointer-events:none}
.cap{position:absolute;left:84px;right:10px;bottom:12px;background:#100A24E6;border-radius:10px;padding:6px 9px;font-weight:700;font-size:14px;z-index:3;pointer-events:none}
.cap b{display:block;font-family:Saira;font-stretch:75%;letter-spacing:.8px;color:var(--gold);font-size:12px}
.cap.L{font-size:17px}.cap.S{font-size:12px}
/* modal */
.modal{position:absolute;inset:0;background:#100A24D9;z-index:10;display:flex;flex-direction:column;justify-content:center;padding:20px 18px calc(var(--sab) + 20px);gap:10px}
.card{background:#fff;color:var(--mid);border-radius:14px;padding:12px;text-align:center;border:3px solid var(--line,#E2D8EF);min-height:64px}
.card b{display:block;font-family:Saira;font-stretch:75%;font-weight:700;font-size:20px;color:var(--deep)}
.card:active{border-color:var(--gold)}
.stars{font-size:44px;letter-spacing:6px;color:var(--gold);text-align:center}.stars i{font-style:normal;color:#ffffff25}
.result{text-align:center}
.set{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #ffffff1a}
.seg{display:flex;gap:4px}.seg button{border-radius:8px;border:1.5px solid #ffffff33;padding:5px 10px;font-weight:700;font-size:13px}.seg button.on{border-color:var(--teal);background:#4D999B44}
@media (prefers-reduced-motion:reduce){.dig.armed{animation:none}}