/* =====================================================================
   Doppelt so clever – Styles
   ===================================================================== */
:root{
  --bg:#12141a; --bg2:#191c25; --line:#2b303d; --fg:#eef1f7; --dim:#98a0b3;
  --c-yellow:#f5b301; --c-blue:#2f6fd0; --c-green:#6fb52b; --c-pink:#e46fa8;
  --c-silver:#9aa3b2; --c-white:#f4f6fa; --c-fox:#e63329;
  --ok:#4bb35a; --warn:#e5a13a; --bad:#e2544a;
  --r:10px;
  --shadow:0 2px 10px rgba(0,0,0,.35);
  /* Alles Wichtige wächst mit der Fensterbreite statt fester Pixel:
     beim Rauszoomen wird der Viewport breiter, die Elemente bleiben dadurch
     ungefähr gleich groß, statt mitzuschrumpfen. */
  --die:  clamp(30px, 3.2vw, 54px);
  --scell:clamp(30px, 3.6vw, 62px);
  --ycell:clamp(28px, 3.4vw, 58px);
  --lcell:clamp(26px, 2.9vw, 48px);
  --gap:  clamp(3px, .35vw, 6px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 800px at 50% -10%,#20242f 0%,var(--bg) 60%);
  color:var(--fg);
  font:15px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
  -webkit-text-size-adjust:100%;
}
button{font:inherit;cursor:pointer;border:0;border-radius:var(--r);padding:.55em 1em;
  background:#2b3140;color:var(--fg);transition:transform .08s,background .15s,opacity .15s}
button:hover:not(:disabled){background:#384052}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.35;cursor:default}
button.primary{background:linear-gradient(180deg,#e0473e,#c0322a);color:#fff;font-weight:600}
button.primary:hover{background:linear-gradient(180deg,#ee5a50,#cf392f)}
button.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--dim)}
button.ghost:hover{color:var(--fg);background:#20242f}
button.sm{padding:.3em .7em;font-size:.85em}
input{font:inherit;background:#0f1218;color:var(--fg);border:1px solid var(--line);
  border-radius:var(--r);padding:.6em .8em;width:100%}
input:focus{outline:2px solid #47536e}
h1,h2,h3,h4{margin:0 0 .5em}
h3{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:700}
h4{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700;margin:0 0 .35em}

/* ---------------- Login ---------------- */
body.gate{display:grid;place-items:center}
.login{padding:24px}
.login-card{background:var(--bg2);border:1px solid var(--line);border-radius:18px;
  padding:32px 28px;width:min(360px,92vw);text-align:center;box-shadow:var(--shadow)}
.login-fox{width:64px;margin-bottom:8px}
.login-card h1{font-size:1.4rem;letter-spacing:.02em}
.login-card .sub{color:var(--dim);margin:0 0 18px}
.login-card form{display:flex;flex-direction:column;gap:10px}
.err{color:var(--bad);margin:12px 0 0}

/* ---------------- Startseite / Lobby ---------------- */
.home{min-height:100vh;display:grid;place-items:center;padding:20px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:26px;
  width:min(440px,94vw);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.logo{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.logo img{width:52px}
.logo .l1{display:block;font-size:.8rem;letter-spacing:.28em;color:var(--c-pink)}
.logo .l2{display:block;font-size:1.7rem;font-weight:800;letter-spacing:.06em;line-height:1}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:.78rem;color:var(--dim);letter-spacing:.04em}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}
.btnrow button{flex:1}
.joinrow{display:flex;gap:10px}
.code-in{text-transform:uppercase;letter-spacing:.35em;text-align:center;font-weight:700;max-width:150px}
.hint{color:var(--dim);font-size:.85rem;margin:0}
.foot{margin-top:6px;text-align:right}
.foot a{color:var(--dim);font-size:.8rem}
.roomlink{display:flex;gap:8px}
.roomlink input{font-size:.8rem}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.seat{display:flex;align-items:center;gap:8px;background:#141822;border-radius:var(--r);
  padding:.55em .8em;border-left:4px solid var(--line)}
.seat.s0{border-left-color:#e0473e}.seat.s1{border-left-color:#2f8fd0}
.seat.s2{border-left-color:#6fb52b}.seat.s3{border-left-color:#c579e0}
.seat .nm{font-weight:600}
.tag{font-size:.68rem;background:#242a37;color:var(--dim);border-radius:20px;padding:.15em .6em}
.tag.me{background:#3a2b2b;color:#f0a09a}

/* ---------------- Spiel: Kopf ---------------- */
.game{max-width:1500px;margin:0 auto;padding:10px 12px 32px;display:flex;flex-direction:column;gap:8px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rounds{display:flex;gap:6px}
.rnd{width:34px;height:44px;border-radius:8px;background:#232838;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;position:relative;border:1px solid #313849}
.rnd b{font-size:.95rem}
.rnd.now{box-shadow:0 0 0 2px var(--c-pink);background:#2c2231}
.rnd.off{opacity:.25}
.rnd.done::after{content:"";position:absolute;inset:6px;background:
  linear-gradient(45deg,transparent 45%,var(--bad) 45%,var(--bad) 55%,transparent 55%),
  linear-gradient(-45deg,transparent 45%,var(--bad) 45%,var(--bad) 55%,transparent 55%)}
.topright{display:flex;align-items:center;gap:8px}
.roomtag{font-size:.78rem;color:var(--dim);letter-spacing:.12em}
.iconbtn{padding:.4em .7em;background:#232838}

.players{display:flex;gap:8px;flex-wrap:wrap}
.pchip{display:flex;align-items:center;gap:8px;background:#171b25;border:1px solid var(--line);
  border-radius:22px;padding:.3em .8em;font-size:.85rem;border-left-width:4px}
.pchip.s0{border-left-color:#e0473e}.pchip.s1{border-left-color:#2f8fd0}
.pchip.s2{border-left-color:#6fb52b}.pchip.s3{border-left-color:#c579e0}
.pchip.active{background:#25202b;box-shadow:0 0 0 1px var(--c-pink)}
.pchip.me .nm{text-decoration:underline;text-underline-offset:3px}
.pchip .pt{font-weight:700}
.pchip .rd{color:var(--dim)}.pchip .rd.ok{color:var(--ok)}

/* ---------------- Würfel ---------------- */
.dicezone{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:start;
  background:#171b25;border:1px solid var(--line);border-radius:14px;padding:8px 12px}
.dcol{min-width:0}
.dicerow{display:flex;gap:calc(var(--gap) + 6px);flex-wrap:wrap;align-items:center;
  min-height:calc(var(--die) + 6px)}
.dcol.tray .dicerow{padding:6px;border-radius:30px;
  background:linear-gradient(180deg,#2a2f3c,#1c202a);box-shadow:inset 0 0 0 1px #39414f}
.die{width:var(--die);height:var(--die);border-radius:calc(var(--die) * .2);display:grid;place-items:center;position:relative;
  box-shadow:0 2px 4px rgba(0,0,0,.5), inset 0 -3px 6px rgba(0,0,0,.18);transition:transform .12s,box-shadow .12s}
.die.empty{background:#141822;box-shadow:inset 0 0 0 1px #262c39;opacity:.6}
.d-white{background:linear-gradient(160deg,#fff,#dfe3ea)}
.d-silver{background:linear-gradient(160deg,#cfd5df,#8e97a6)}
.d-yellow{background:linear-gradient(160deg,#ffd34d,#e0a000)}
.d-blue{background:linear-gradient(160deg,#4d8fe8,#1d4f9e)}
.d-green{background:linear-gradient(160deg,#8fd451,#4b8a19)}
.d-pink{background:linear-gradient(160deg,#f79ac6,#d5588f)}
.die.back{outline:2px dashed var(--c-pink);outline-offset:2px}
.die.sel{cursor:pointer}
.die.sel:hover{transform:translateY(-3px) scale(1.05)}
.die.sel::after{content:"";position:absolute;inset:-3px;border-radius:12px;box-shadow:0 0 0 2px var(--ok);animation:pulse 1.6s infinite}
.die.chosen::after{box-shadow:0 0 0 3px #fff;animation:none}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
.pips{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  width:76%;height:76%;padding:0}
.pips i{border-radius:50%;background:transparent;margin:8%}
.pips i.on{background:#181c24}
.d-blue .pips i.on,.d-green .pips i.on{background:#eef2f8}
.die.roll-anim{animation:tumble .5s}
@keyframes tumble{0%{transform:rotate(0) scale(1)}40%{transform:rotate(180deg) scale(1.12)}100%{transform:rotate(360deg) scale(1)}}

/* ---------------- Statuszeile ---------------- */
.statusbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#171b25;border:1px solid var(--line);border-radius:14px;padding:8px 12px;min-height:0}
.stxt{font-weight:600;flex:1;min-width:180px}
.sbtns{display:flex;gap:8px;flex-wrap:wrap}
.extrachips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:100%}
.extrachips .lbl{font-size:.8rem;color:var(--dim)}
.extrachips .chip{background:var(--c-silver);color:#111;border-radius:6px;padding:.1em .5em}

.chooser{display:none;gap:8px;align-items:center;flex-wrap:wrap;
  background:#221c2c;border:1px solid #4a3a5c;border-radius:14px;padding:10px 12px}
.chooser.on{display:flex}
.clbl{display:flex;align-items:center;gap:6px;font-weight:600}
.chint{color:var(--dim);font-size:.86rem}
.cgrp{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.cgrp .gl{font-size:.75rem;color:var(--dim);margin-right:2px}
.cbtn{padding:.3em .6em;min-width:34px;background:#333a4a}
.cbtn.a-blue{background:var(--c-blue);color:#fff}
.cbtn.a-green{background:var(--c-green);color:#123}
.cbtn.a-pink{background:var(--c-pink);color:#231}
.cbtn.a-yellow{background:var(--c-yellow);color:#231}
.cbtn.a-silver{background:var(--c-silver);color:#111}

/* ---------------- Bonus-Symbole ---------------- */
.bic{display:inline-grid;place-items:center;width:clamp(16px,1.55vw,22px);height:clamp(16px,1.55vw,22px);border-radius:5px;
  font-size:.78rem;font-weight:800;background:#111;color:#fff;flex:none;line-height:1}
.bic.sm{width:clamp(15px,1.4vw,19px);height:clamp(15px,1.4vw,19px);font-size:clamp(.58rem,.75vw,.7rem)}
.bic.q_yellow{background:var(--c-yellow);color:#111}
.bic.q_blue{background:var(--c-blue)}
.bic.q_green{background:var(--c-green);color:#0e1a05}
.bic.q_pink{background:var(--c-pink);color:#2a0d1c}
.bic.q_silver{background:var(--c-silver);color:#111}
.bic.q_any{background:#0b0d12;box-shadow:inset 0 0 0 1px #59627a}
.bic.fox{background:transparent}
.bic.fox img{width:100%;height:100%;object-fit:contain}
.bic.taken,.taken .bic{opacity:.3;filter:grayscale(1)}

/* ---------------- Aktionsleisten ---------------- */
.trackbox{display:flex;flex-direction:column;gap:5px;background:#171b25;border:1px solid var(--line);
  border-radius:14px;padding:8px 12px}
.track{display:flex;align-items:center;gap:10px}
.tlabel{display:flex;align-items:center;gap:6px;width:150px;flex:none}
.tname{font-size:.8rem;color:var(--dim)}
.dots{display:flex;gap:5px;flex:1;flex-wrap:nowrap}
.dot{width:clamp(14px,1.4vw,19px);height:clamp(14px,1.4vw,19px);border-radius:50%;background:#20242f;box-shadow:inset 0 0 0 1px #333b4b;position:relative}
.dot.open{background:#39415a;box-shadow:0 0 0 2px var(--ok)}
.dot.used{background:#20242f;box-shadow:inset 0 0 0 1px #333b4b}
.dot.used::after{content:"";position:absolute;inset:2px;background:
  linear-gradient(45deg,transparent 42%,var(--bad) 42%,var(--bad) 58%,transparent 58%),
  linear-gradient(-45deg,transparent 42%,var(--bad) 42%,var(--bad) 58%,transparent 58%)}
.lane{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.tarrow{color:#5c6478;font-size:.72rem;line-height:1}
.trackend{opacity:.32;filter:saturate(.5);transition:opacity .25s,filter .25s,box-shadow .25s}
.trackend.earned{opacity:1;filter:none}
.tdone{display:none;color:var(--ok);font-weight:800;font-size:.85rem;line-height:1}
.tdone.on{display:inline}
.usebtn{margin-left:12px;flex:none}
.usebtn{padding:.25em .7em;font-size:.8rem;background:#2b3140;margin-left:12px;flex:none}

/* ---------------- Board ---------------- */
.board{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.area{background:#171b25;border:1px solid var(--line);border-radius:14px;padding:8px 12px;min-width:0}
.bluearea,.greenarea,.pinkarea{grid-column:1 / -1}
.areafoot{font-size:.75rem;color:var(--dim);margin-top:6px}

.cell{background:#f3f5f9;color:#1b2130;border-radius:7px;display:grid;place-items:center;
  position:relative;font-weight:700;user-select:none;transition:transform .1s,box-shadow .12s}
.cell.hl{cursor:pointer;box-shadow:0 0 0 3px var(--ok),0 0 12px rgba(75,179,90,.5);animation:hlp 1.4s infinite}
@keyframes hlp{0%,100%{box-shadow:0 0 0 2px var(--ok)}50%{box-shadow:0 0 0 4px var(--ok),0 0 14px rgba(75,179,90,.55)}}
.cell.hl:hover{transform:scale(1.08)}
.cell.crossed::before,.cell.crossed::after{content:"";position:absolute;left:12%;right:12%;height:3px;
  background:#c8342a;border-radius:2px;top:50%}
.cell.crossed::before{transform:rotate(45deg)}
.cell.crossed::after{transform:rotate(-45deg)}
.cell.pop{animation:pop .3s}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}

/* Silber */
.sgrid{display:grid;grid-template-columns:repeat(6,var(--scell));gap:var(--gap);justify-content:center}
.sbonus,.sscale{display:grid;place-items:center;height:26px}
.sscale{color:var(--dim);font-size:.7rem;gap:3px;display:flex;align-items:center;justify-content:center}
.sscale b{background:#39414f;color:#fff;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:.72rem}
.scell{aspect-ratio:1/1;font-size:clamp(.8rem,1.1vw,1.05rem)}
.scell.row-yellow{box-shadow:inset 0 0 0 3px var(--c-yellow);color:#b07d00}
.scell.row-blue{box-shadow:inset 0 0 0 3px var(--c-blue);color:#1d4f9e}
.scell.row-green{box-shadow:inset 0 0 0 3px var(--c-green);color:#3f7415}
.scell.row-pink{box-shadow:inset 0 0 0 3px var(--c-pink);color:#b03d72}
.scell.hl{box-shadow:0 0 0 3px var(--ok)}

/* Gelb */
.yscale{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:8px}
.ys{display:flex;align-items:center;gap:2px;font-size:.66rem;color:var(--dim);
  background:#20242f;border-radius:20px;padding:.1em .5em}
.ys b{color:var(--c-yellow)}
.ys.cur{background:var(--c-yellow);color:#111}.ys.cur b{color:#111}
.ygrid{display:grid;grid-template-columns:repeat(4,var(--ycell)) auto;gap:var(--gap);justify-content:center}
.ycell{aspect-ratio:1/1;background:#fdf6e3;color:#c98700;font-size:clamp(.82rem,1.15vw,1.1rem)}
.ycell .yv{position:relative;z-index:1}
.ycell.circled::before{content:"";position:absolute;inset:8%;border:3px solid #c98700;border-radius:50%}
.ycell.crossed::before,.ycell.crossed::after{content:"";position:absolute;left:10%;right:10%;height:3px;
  background:#c8342a;border-radius:2px;top:50%;border:0;inset:auto;left:10%;right:10%}
.ycell.circled.crossed::before{content:"";position:absolute;inset:8%;border:3px solid #c98700;border-radius:50%;
  background:none;height:auto;left:8%;right:8%;top:8%;transform:none}
.ycell.circled.crossed .yv::before,.ycell.circled.crossed .yv::after{
  content:"";position:absolute;left:-140%;right:-140%;height:3px;background:#c8342a;top:50%;border-radius:2px}
.ycell.circled.crossed .yv::before{transform:rotate(45deg)}
.ycell.circled.crossed .yv::after{transform:rotate(-45deg)}
.ygap{}
.yrb,.ycb{display:grid;place-items:center}

/* Zeilen (blau/grün/rosa) */
.linerow{display:flex;gap:4px;align-items:flex-end;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;scroll-snap-type:x proximity}
.linewrap{position:relative}
.linewrap::after{content:"";position:absolute;top:0;right:0;bottom:8px;width:26px;pointer-events:none;
  background:linear-gradient(90deg,rgba(23,27,37,0),rgba(23,27,37,.95));opacity:0;transition:opacity .2s}
.linewrap.more::after{opacity:1}
.linerow::-webkit-scrollbar{height:6px}
.linerow::-webkit-scrollbar-thumb{background:#39415a;border-radius:3px}
.lw,.gpair{scroll-snap-align:center}
.lw{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;min-width:var(--lcell)}
.lw.cur .lcell{box-shadow:0 0 0 2px #ffffff55}
.lw.next .lcell{box-shadow:0 0 0 2px #ffffff33;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.04) 0 6px,transparent 6px 12px)}
.star{font-size:clamp(.55rem,.72vw,.68rem);color:#fff;background:var(--c-blue);border-radius:50%;
  width:clamp(18px,1.7vw,26px);height:clamp(18px,1.7vw,26px);display:grid;place-items:center;font-weight:700}
.lcell{width:100%;height:var(--lcell);font-size:1rem;position:relative}
.lb{height:clamp(15px,1.5vw,20px);display:grid;place-items:center}
.blue12 .lcell{background:#eef3fb}
.green12 .lcell{background:#eef7e6}
.pink12 .lcell{background:#fdeef5}
.lcell .mult{position:absolute;top:2px;left:0;right:0;font-size:.6rem;color:#7ba03f;font-weight:700}
.lcell .req{position:absolute;top:2px;left:0;right:0;font-size:.6rem;color:#c77aa0;font-weight:700}
.lcell .val{font-size:clamp(.8rem,1.1vw,1.05rem);color:#1b2130}
.gpair{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;min-width:calc(var(--lcell) * 2.4);
  background:rgba(255,255,255,.035);border-radius:10px;padding:5px 6px 2px}
.gstar{width:clamp(20px,1.9vw,30px);height:clamp(20px,1.9vw,30px);border-radius:50%;background:#3d5f1d;
  color:#dff5c4;display:grid;place-items:center;font-size:clamp(.6rem,.8vw,.78rem);font-weight:700}
.gstar.set{background:var(--c-green);color:#10230a}
.gstar.neg{background:#8a3b34;color:#ffdedb}
.gcells{display:flex;align-items:flex-start;gap:3px;width:100%}
.gcells .lw{min-width:38px}
.minus{color:var(--dim);align-self:center;padding-top:8px}

/* Punktekasten */
.scorebox{display:flex;gap:8px;flex-wrap:wrap}
.sc{display:flex;flex-direction:column;align-items:center;background:#171b25;border:1px solid var(--line);
  border-radius:12px;padding:6px 14px;min-width:70px}
.sc .l{font-size:.68rem;color:var(--dim);letter-spacing:.05em}
.sc .v{font-size:1.2rem;font-weight:800}
.sc.silver{border-top:3px solid var(--c-silver)}
.sc.yellow{border-top:3px solid var(--c-yellow)}
.sc.blue{border-top:3px solid var(--c-blue)}
.sc.green{border-top:3px solid var(--c-green)}
.sc.pink{border-top:3px solid var(--c-pink)}
.sc.fox{border-top:3px solid var(--c-fox)}
.sc.total{background:#232838;border-top:3px solid #fff}

/* Menü / Modal */
.menu{position:fixed;inset:0;background:rgba(6,8,12,.7);display:none;place-items:center;z-index:40}
.menu.open{display:grid}
.menu-inner{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:20px;
  width:min(320px,92vw);display:flex;flex-direction:column;gap:8px}
.modal{position:fixed;inset:0;background:rgba(6,8,12,.75);display:grid;place-items:center;z-index:50;padding:20px}
.modal-inner{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:22px;
  width:min(560px,94vw);max-height:84vh;overflow:auto}
.rules{margin:0 0 16px;padding-left:18px;color:#cfd5e2}
.rules li{margin-bottom:6px}

/* Endstand */
.endscreen{max-width:760px;margin:0 auto;padding:40px 16px;text-align:center}
.endtable{display:flex;flex-direction:column;gap:6px;margin:20px 0}
.erow{display:grid;grid-template-columns:1.6fr repeat(7,1fr);gap:4px;align-items:center;
  background:#171b25;border:1px solid var(--line);border-radius:10px;padding:.5em .7em;font-variant-numeric:tabular-nums}
.erow.head{background:transparent;border:0;color:var(--dim);font-size:.75rem}
.erow .nm{text-align:left;font-weight:700}
.erow .tot{font-weight:800;font-size:1.1rem}
.erow.win{box-shadow:0 0 0 1px var(--c-yellow)}
.level{color:var(--c-yellow);font-size:1.15rem;font-weight:700}

#offline{position:fixed;top:0;left:0;right:0;z-index:70;text-align:center;
  background:#7a2a24;color:#ffe6e3;padding:.5em 1em;font-size:.86rem;box-shadow:0 2px 10px rgba(0,0,0,.5)}

/* Toasts */
#toasts{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);display:flex;
  flex-direction:column;gap:8px;z-index:60;pointer-events:none;width:min(420px,92vw)}
.toast{background:#232838;border:1px solid var(--line);border-radius:10px;padding:.6em .9em;
  box-shadow:var(--shadow);animation:tin .25s;font-size:.9rem}
.toast.good{border-color:var(--ok)}
.toast.warn{border-color:var(--warn)}
.toast.bad{border-color:var(--bad)}
.toast.out{opacity:0;transition:opacity .35s}
@keyframes tin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}


/* ---------------- Breiter Bildschirm: flacher stapeln ----------------
   Ziel: das ganze Brett soll ohne Zoomen auf einen Laptop-Bildschirm passen. */
@media (min-width:1000px){
  /* Auf flachen Fenstern richten sich die Felder auch nach der Höhe,
     damit das Brett ohne Scrollen auf den Schirm passt. */
  :root{
    --die:  clamp(30px, min(3.2vw, 5.6vh), 54px);
    --scell:clamp(30px, min(3.6vw, 5.4vh), 62px);
    --ycell:clamp(28px, min(3.4vw, 4.9vh), 58px);
    --lcell:clamp(26px, min(2.9vw, 4.1vh), 48px);
  }
  .game{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    grid-template-areas:
      "top      top"
      "players  score"
      "dice     status"
      "chooser  chooser"
      "tracks   tracks"
      "board    board";
    align-items:start;
  }
  .topbar{grid-area:top}
  .players{grid-area:players}
  .dicezone{grid-area:dice;height:100%}
  .statusbar{grid-area:status;height:100%;align-content:center}
  .chooser{grid-area:chooser}
  .trackbox{grid-area:tracks}
  .board{grid-area:board}
  .scorebox{grid-area:score;justify-self:end;align-self:center;gap:6px}
  .scorebox .sc{padding:3px 10px;min-width:0}
  .scorebox .sc .v{font-size:1rem}
  .players{align-self:center}

  /* Aktionsleisten nebeneinander statt untereinander */
  .trackbox{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px}
  .tlabel{width:auto;flex:none}
  .dots{flex:1}

  /* Brett zweispaltig: Silber|Gelb, darunter Blau+Rosa links, Grün rechts */
  .board{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "silver yellow"
      "blue   green"
      "pink   green";
    align-items:start;
  }
  .silverarea{grid-area:silver}
  .yellowarea{grid-area:yellow}
  .bluearea  {grid-area:blue}
  .greenarea {grid-area:green}
  .pinkarea  {grid-area:pink}
  .bluearea,.greenarea,.pinkarea{grid-column:auto}
  .green12{flex-wrap:wrap;justify-content:flex-start;gap:8px}
  .greenarea .gpair{flex:0 0 calc(33.333% - 6px)}
}


/* Flache Fenster (kleine Laptops): alles Feste noch etwas enger ziehen,
   damit das Brett trotzdem auf einen Schirm passt. */
@media (min-width:1000px) and (max-height:900px){
  .game{gap:6px;padding:6px 10px 16px}
  .area{padding:6px 10px}
  .area h3{font-size:.7rem;margin:0 0 4px}
  .dicezone{padding:6px 10px;gap:10px}
  .dicezone h4{font-size:.6rem;margin:0 0 2px}
  .statusbar,.trackbox{padding:6px 10px}
  .trackbox{gap:6px 14px}
  .rnd{height:38px;width:30px}
  .pchip{padding:.2em .7em;font-size:.8rem}
  .sbonus,.sscale{height:20px}
  .yscale{margin-bottom:4px}
  .ys{font-size:.62rem;padding:.05em .45em}
  .areafoot{margin-top:3px;font-size:.7rem}
  .track{gap:8px}
  .scorebox .sc{padding:2px 8px}
  .sc .l{font-size:.62rem}
}
@media (min-width:1000px) and (max-height:780px){
  :root{
    --die:  clamp(28px, min(3.2vw, 5.2vh), 54px);
    --scell:clamp(28px, min(3.6vw, 5.0vh), 62px);
    --ycell:clamp(26px, min(3.4vw, 4.5vh), 58px);
    --lcell:clamp(24px, min(2.9vw, 3.8vh), 48px);
  }
  .area h3{font-size:.66rem}
  .yscale{display:none}
}

/* Sehr breit: Würfel und Zahlen dürfen etwas größer werden */
@media (min-width:1700px){
  :root{--die:56px;--scell:58px;--ycell:54px;--lcell:48px}
}

/* ---------------- Mobil ---------------- */
@media (max-width:860px){
  :root{--die:38px;--scell:44px;--ycell:50px;--lcell:34px;--gap:4px}
  .board{grid-template-columns:1fr}
  .dicezone{grid-template-columns:1fr;gap:8px}
  .dcol.tray .dicerow{border-radius:16px}
  .tlabel{width:120px}
  .tname{display:none}
  .game{padding:8px 8px 60px}
  .rnd{width:30px;height:40px}
  .lw{min-width:42px}
  .gpair{min-width:96px}
  .dot{width:15px;height:15px}
  .tlabel{width:auto}
  .track{gap:6px}
  .usebtn{padding:.25em .5em;font-size:.74rem}
  .ygrid{grid-template-columns:repeat(4,50px) auto;gap:5px}
  .ycell{font-size:.95rem}
  .sgrid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .area h3{font-size:.72rem}
  .erow{grid-template-columns:1.4fr repeat(7,1fr);font-size:.8rem}
}
@media (max-width:640px){
  :root{--lcell:32px}
  /* auf dem Handy passen alle 12 Felder nebeneinander – kein Scrollen nötig */
  .blue12,.pink12{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;overflow:visible}
  .green12{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;overflow:visible}
  .linewrap::after{display:none}
  .lw{min-width:0}
  .gcells .lw{min-width:0}
  .gpair{min-width:0}
  .lcell .val{font-size:.85rem}
  .lcell .mult,.lcell .req{font-size:.52rem}
  .star{width:20px;height:20px;font-size:.56rem}
  .gstar{width:24px;height:24px;font-size:.7rem}
  .lb{height:17px}
  .bic.sm{width:15px;height:15px;font-size:.6rem}
  .minus{padding-top:4px;font-size:.7rem}
  .scorebox{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .scorebox .sc{min-width:0;padding:5px 4px}
  .sc .v{font-size:1.05rem}
}