/* ARCADE-UI: gemeinsamer Design-Standard (Mockup "PROJECT 153", dunkelgruen-schwarz, Mono, Eckklammern)
   Gilt fuer PROJECT_153, THE 12 und alle Spiele. Tokens zuerst, dann Bausteine. */
:root{
  --bg:#030806; --panel:#06110c; --line:#12392a; --line2:#1c5a40;
  --g:#8bf3a6; --g2:#3fd47a; --dim:#6f9283; --fg:#cfe0d4;
  --y:#ffd84d; --r:#ff6b6b; --redbg:rgba(190,30,30,.55);
  --mono:ui-monospace,"JetBrains Mono","SF Mono",Consolas,Menlo,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:14px/1.5 var(--mono)}
body{display:flex;justify-content:center;background:radial-gradient(ellipse at 50% -10%,#0b1f15 0,#030806 62%)}
button{font-family:inherit}
.hide{display:none!important}

/* Geraete-Rahmen am Desktop */
#wrap{width:100%;max-width:430px;height:100%;display:flex;flex-direction:column;position:relative;background:var(--bg);overflow:hidden}
@media(min-width:620px){
  body{align-items:center}
  #wrap{height:min(100vh - 24px,880px);border-radius:42px;border:2px solid #17402f;box-shadow:0 0 0 6px #040b07,0 0 60px rgba(63,212,122,.12)}
}
.screen{position:absolute;inset:0;display:none;flex-direction:column}
.screen.on{display:flex}

/* Kopf, Tabs, Panels */
.hd{padding:16px 18px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line)}
.hd h1,.hd h2{margin:0;font-size:17px;font-weight:600;letter-spacing:.3px;color:#e8f3ec}
.hd .ic{background:none;border:0;color:var(--fg);padding:4px;cursor:pointer;display:flex}
.hd .ic svg{width:22px;height:22px}
.hd.ctr{justify-content:center}
.ver{color:var(--g);font-size:15px}.ver small{color:var(--dim);font-size:14px}
.tabs2{display:flex;gap:4px;padding:0 14px;border-bottom:1px solid var(--line)}
.tabs2 button{flex:1;background:none;border:0;color:var(--dim);padding:12px 4px 10px;font-size:13px;cursor:pointer;border-bottom:2px solid transparent}
.tabs2 button.on{color:var(--g);border-bottom-color:var(--g)}
.panel{flex:1;overflow:auto;padding:16px 18px}
.title{font-size:21px;letter-spacing:1px;color:var(--g);margin:6px 0 14px}

/* Bausteine */
.box{border:1px solid var(--line2);border-radius:10px;padding:14px;margin:14px 0;background:rgba(6,17,12,.7)}
.box .lbl{color:var(--dim);font-size:12px;letter-spacing:1px}
.big{font-size:40px;letter-spacing:2px;text-align:center;margin:6px 0 8px;color:var(--g);font-weight:500}
.big i{font-style:normal;color:var(--dim)}
.cells{display:flex;gap:3px;justify-content:center}
.cells i{display:block;flex:1;max-width:11px;height:11px;background:var(--g)}
.cells i.o{background:#0e2a1d}
.bar{height:6px;background:#0e2a1d;border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--g)}
.line{margin:3px 0;word-break:break-word;white-space:pre-wrap}
.line.y{color:var(--y)}.line.r{color:var(--r)}.line.d{color:var(--dim)}
.btn{position:relative;background:none;border:0;color:var(--g);padding:12px 26px;font-size:15px;letter-spacing:2px;cursor:pointer}
.btn::before,.btn::after{content:"";position:absolute;width:10px;height:10px;border:2px solid var(--g)}
.btn::before{left:0;top:0;border-right:0;border-bottom:0}
.btn::after{right:0;bottom:0;border-left:0;border-top:0}
.btn:active,.btn:hover{background:rgba(139,243,166,.12)}
.btn.solid{background:var(--g);color:#031008;letter-spacing:.5px;padding:11px 16px;border-radius:3px}
.btn.solid::before,.btn.solid::after{display:none}
.row2{display:flex;gap:8px;align-items:center}
.inrow{display:flex;gap:8px;align-items:center;border:1px solid var(--g);border-radius:6px;padding:9px 12px;margin-top:12px;background:rgba(3,8,6,.8)}
.inrow input{flex:1;background:none;border:0;outline:0;color:var(--fg);font:inherit;font-size:15px;caret-color:var(--g);min-width:0}
.inrow .go{background:var(--g);color:#031008;border:0;border-radius:4px;width:34px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.inrow .go svg{width:18px;height:18px}
.chips{display:flex;gap:8px;margin-top:10px}
.chips button{flex:1;background:none;border:1px solid var(--line2);color:var(--g);padding:8px 0;font-size:12px;letter-spacing:1.5px;cursor:pointer;border-radius:4px}
.chips button:active{background:rgba(139,243,166,.12)}
.found{border:1px solid var(--g);border-radius:10px;padding:12px 14px;margin-top:16px;display:flex;align-items:center;gap:12px;box-shadow:0 0 18px rgba(139,243,166,.12)}
.found svg{width:34px;height:34px;color:var(--g);flex:none}
.found b{color:var(--g);font-weight:500}
.toast{pointer-events:none;position:absolute;left:14px;right:14px;top:12px;background:#07150e;border:1px solid var(--g);border-radius:8px;padding:10px 12px;font-size:13px;z-index:20;display:none;box-shadow:0 6px 24px rgba(0,0,0,.6)}
.toast.on{display:block}

/* Untere Navigation (5 Icons) */
nav.bn{display:flex;border-top:1px solid var(--line);background:#040a07;padding:6px 6px 10px}
nav.bn button{flex:1;background:none;border:0;color:var(--dim);padding:8px 0;cursor:pointer;display:flex;justify-content:center}
nav.bn button svg{width:26px;height:26px}
nav.bn button.on{color:var(--g)}
nav.bn button.on.term svg{outline:1.5px solid var(--g);outline-offset:5px;border-radius:5px;box-shadow:0 0 14px rgba(139,243,166,.3)}
nav.bn button.on:not(.term) svg{filter:drop-shadow(0 0 6px rgba(139,243,166,.55))}