/* Drei Gipfel – Stylesheet v6 (31.10.2026): ein Spieler, ganze Fläche; Karten groß, ein Index je Karte */
:root{
  --bg:#0b1412; --text:#f3e9d2; --sand:#d9c9a0; --muted:#b9a881;
  --gold:#ffd27a; --gold2:#ffe28a; --copper:#c96a1f; --copper-dk:#7a3a10; --copper-br:#d8782a;
  --wood-1:#5a2a0f; --wood-2:#331606; --wood-3:#2a140a; --wood-4:#140905; --ink-dk:#1b0d06;
  --paper:#fbf7ee; --ink:#1b1b1b; --red:#c9172a; --back:#1f3f55; --back-line:rgba(255,255,255,.08);
  --lime:#9cff3a; --lime-dk:#4fdc1f; --amber:#ffb13b; --alarm:#ff4d3c; --blue:#2f8fd8;
  --focus:#ffffff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;-webkit-user-select:none;user-select:none;touch-action:manipulation}
#app{position:fixed;inset:0;background:var(--bg) url(bg.jpg) center/cover no-repeat}
@supports (background-image:image-set(url("a.webp") type("image/webp"))){
  #app{background-image:image-set(url(bg.avif) type("image/avif"),url(bg.webp) type("image/webp"),url(bg.jpg) type("image/jpeg"))}
  @media (max-width:640px){#app{background-image:image-set(url(bg-m.avif) type("image/avif"),url(bg-m.webp) type("image/webp"),url(bg.jpg) type("image/jpeg"))}}
}
#app::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 40%,rgba(0,0,0,.45) 100%);pointer-events:none}
.hidden{display:none !important}
button,input,select{font:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.card.open:focus-visible,.stock:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* ---------- Spielfeld ---------- */
#board{position:absolute;inset:0;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  --cw:64px;--ch:calc(var(--cw)*1.4);--px:32px;--pw:calc(var(--px)*9 + var(--cw)*1.1);--rs:.56}
#top{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 8px}
#top .round{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--sand);white-space:nowrap}
#top .rlabel{display:none}
@media (min-width:480px){#top .rlabel{display:inline}}
#top .track{display:flex;gap:5px;align-items:center}
#top .track i{width:10px;height:10px;border-radius:50%;background:#d9dcd6;box-shadow:0 0 6px rgba(255,255,255,.4);opacity:.45}
#top .track i.done{opacity:1;background:#ffd34d;box-shadow:0 0 10px #ffb400}
#top .track i.cur{opacity:1;background:#fff;animation:pulse 1.2s infinite}
#top .status{flex:1 1 auto;min-width:0;max-width:380px;margin:0 auto;text-align:center;font-size:14px;font-weight:600;color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:6px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .3s}
#top .status.show{opacity:1}
.iconbtn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--copper);background:rgba(20,8,4,.75);color:var(--gold);font-size:22px;line-height:1;cursor:pointer}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

#opp{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;padding:4px 10px;font-size:14px;color:var(--sand);background:rgba(0,0,0,.45);border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
#opp .oname{font-weight:700;color:#fff}
#opp .oscore{font-weight:800;color:var(--gold2);font-variant-numeric:tabular-nums}
#opp .ostate{font-weight:700;color:var(--lime)}
#opp .ostate:empty{display:none}

.field{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding:8px}
#board.side .field{flex-direction:row;justify-content:center;gap:16px}

/* Pyramide: hochkant mittig im Platz über dem HUD (HUD bleibt unten in Daumenreichweite) */
.pyr{position:relative;flex:0 0 auto;width:var(--pw);height:calc(var(--ch)*(3*var(--rs) + 1));margin:auto 0}
#board.side .pyr{margin:0}
.pyr .card{position:absolute;transition:transform .25s ease,opacity .25s ease,box-shadow .2s}
.pyr .card.gone{opacity:0;pointer-events:none;transform:scale(.6)}
.pyr .card.open{cursor:pointer}
.pyr .card.open.can{box-shadow:0 0 0 2px var(--gold),0 0 12px rgba(255,210,122,.55),0 2px 5px rgba(0,0,0,.7)}
.pyr .card.open.face:active{transform:scale(1.06)}
.field.done .pyr::after{content:attr(data-msg);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(28px,calc(var(--cw)*.5),64px);font-weight:900;color:#ffe066;text-shadow:0 0 14px #ff9900,0 2px 4px #000;letter-spacing:.05em;pointer-events:none}

/* Karten: genau ein Rang + ein Farbsymbol, oben links (bleibt bei Überlappung sichtbar) */
.card{position:relative;width:var(--cw);height:var(--ch);border-radius:calc(var(--cw)*.09);background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.6);overflow:hidden;font-weight:800;line-height:1}
.card.red{color:var(--red)}
.card .ix{position:absolute;top:calc(var(--cw)*.06);left:calc(var(--cw)*.05);width:calc(var(--cw)*.42);display:flex;flex-direction:column;align-items:center;gap:calc(var(--cw)*.03)}
.card .ix .r{font-size:calc(var(--cw)*.36);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.card .ix .s{font-size:calc(var(--cw)*.3)}
.card.back{background:var(--paper)}
.card.back::before{content:"";position:absolute;inset:calc(var(--cw)*.07);border-radius:calc(var(--cw)*.05);background:var(--back) repeating-linear-gradient(45deg,var(--back-line) 0 2px,transparent 2px 9px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.card.flip{animation:flip .35s ease}
@keyframes flip{0%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}

/* HUD */
.hud{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:8px;width:min(var(--pw),max(360px,calc(var(--cw)*6.5)));max-width:100%;background:linear-gradient(180deg,rgba(60,20,8,.6),rgba(20,8,4,.85));border:2px solid var(--copper-dk);border-radius:12px;box-shadow:inset 0 0 0 1px var(--copper),0 0 14px rgba(255,120,30,.25)}
.hud .info{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center}
.hud .score{grid-row:1/3;align-self:center;font-size:clamp(20px,calc(var(--cw)*.32),30px);font-weight:800;color:var(--gold2);text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums;min-width:4ch}
.meter{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--sand);min-height:20px}
.meter .lbl{min-width:3.4em}
.meter .val{font-weight:800;color:#fff;font-size:16px;min-width:3ch;text-align:right;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000}
.meter .trk{flex:1 1 40px;height:10px;border:1px solid var(--copper);border-radius:6px;background:rgba(0,0,0,.5);overflow:hidden}
.meter .fill{height:100%;border-radius:5px;transform-origin:left center;transform:scaleX(1);transition:transform .25s linear}
.meter.time .fill{background:linear-gradient(90deg,#b6ff5a,var(--lime-dk));box-shadow:0 0 8px rgba(125,255,42,.6)}
.meter.time.warn .fill{background:var(--amber);box-shadow:0 0 8px rgba(255,177,59,.6)}
.meter.time.crit .fill{background:var(--alarm);box-shadow:0 0 8px rgba(255,77,60,.7)}
.meter.time.crit .val{color:var(--alarm)}
.meter.combo .fill{background:linear-gradient(90deg,#ff5a3c,#d40b0b);box-shadow:0 0 8px rgba(255,48,48,.6);transform:scaleX(0)}
.hud .cards{display:flex;justify-content:center;align-items:center;gap:8px}
.hud .cards .stock{margin-right:calc(var(--cw)*.3)}
#board.side .hud{width:calc(var(--cw)*2 + 24px)}
#board.side .hud .info{grid-template-columns:1fr}
#board.side .hud .score{grid-row:auto;text-align:center}
#board.side .hud .cards{display:grid;grid-template-columns:1fr 1fr}
#board.side .hud .cards .stock{margin-right:0}
.stock{position:relative;cursor:pointer;border-radius:calc(var(--cw)*.09)}
.stock .card.back{display:flex;align-items:center;justify-content:center}
.stock .cnt{position:relative;font-size:max(16px,calc(var(--cw)*.3));font-weight:900;color:#fff;text-shadow:0 0 8px #000,0 2px 2px #000;background:rgba(0,0,0,.45);padding:3px 9px;border-radius:14px;font-variant-numeric:tabular-nums}
.stock.empty .card.back{filter:grayscale(1) brightness(.5)}
.stock.pulse .card.back{animation:nudge 1s infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.slot{position:relative;width:var(--cw);height:var(--ch);border:2px solid var(--copper);border-radius:calc(var(--cw)*.09);background:rgba(0,0,0,.45)}
.slot.locked{background:rgba(0,0,0,.6) repeating-linear-gradient(45deg,transparent 0 6px,rgba(255,255,255,.07) 6px 8px)}
.slot.locked::before,.slot.locked::after{content:"";position:absolute;left:12%;right:12%;top:50%;height:3px;background:#d8d8e0;border-radius:2px;box-shadow:0 0 4px #fff;transform:rotate(45deg)}
.slot.locked::after{transform:rotate(-45deg)}
.slot.freeopen{border-color:#7dff2a;box-shadow:0 0 12px rgba(125,255,42,.6);animation:glow 1s infinite alternate}
@keyframes glow{from{box-shadow:0 0 6px rgba(125,255,42,.4)}to{box-shadow:0 0 16px rgba(125,255,42,.9)}}
.slot .card{position:absolute;inset:-2px;width:auto;height:auto}

/* fliegende Karte + Punkte */
.fly{position:absolute;z-index:20;pointer-events:none;transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.pop{position:absolute;z-index:30;pointer-events:none;font-weight:800;font-size:max(16px,calc(var(--cw)*.24));color:#dfff5a;background:rgba(20,40,10,.85);border:1px solid var(--lime);border-radius:6px;padding:2px 6px;text-shadow:0 1px 2px #000;animation:popup 1s ease-out forwards;white-space:nowrap}
.pop.big{font-size:max(20px,calc(var(--cw)*.34));color:#ffe066;border-color:#ffd000}
@keyframes popup{0%{transform:translate(-50%,0);opacity:0}15%{opacity:1}100%{transform:translate(-50%,-50px);opacity:0}}
.shake{animation:shake .25s}
@keyframes shake{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}

/* ---------- Overlays ---------- */
.overlay{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(5,10,8,.72);backdrop-filter:blur(3px);padding:16px;overflow:auto}
.dialog{width:min(520px,100%);max-height:100%;overflow:auto;background:linear-gradient(180deg,var(--wood-3),var(--wood-4));border:2px solid #8a4414;box-shadow:inset 0 0 0 1px var(--copper-br),0 0 30px rgba(0,0,0,.8);border-radius:14px;padding:22px 20px;text-align:center}
.dialog h1{margin:0 0 6px;font-size:34px;letter-spacing:.04em;color:var(--gold);text-shadow:0 0 14px #ff8a00,0 2px 2px #000}
.dialog h1 span{display:block;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--text);margin-top:4px}
.dialog h2{margin:0 0 12px;font-size:26px;color:var(--gold);text-shadow:0 2px 2px #000}
.dialog .sub{margin:0 0 16px;color:var(--sand);font-size:15px;line-height:1.4}
.modes{display:grid;gap:12px;margin-bottom:16px}
.mode,.big{appearance:none;border:2px solid var(--copper);background:linear-gradient(180deg,var(--wood-1),var(--wood-2));color:#ffe9c4;border-radius:12px;padding:12px 14px;cursor:pointer;text-align:left;box-shadow:0 2px 0 #1a0a03}
.mode{padding:16px 18px;min-height:76px}
.mode:active,.big:active{transform:translateY(1px)}
.mode b{display:block;font-size:19px}
.mode small{display:block;color:var(--sand);margin-top:4px;font-size:14px}
.big{display:block;width:100%;text-align:center;font-size:18px;font-weight:700;margin-top:10px;min-height:44px}
.big.ghost{background:transparent;color:var(--sand)}
.opts{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;font-size:14px;color:var(--sand);margin-bottom:10px}
.opts label{display:inline-flex;align-items:center;min-height:44px;gap:6px}
.opts select{background:var(--ink-dk);color:#ffe9c4;border:1px solid var(--copper);border-radius:6px;padding:8px 6px;min-height:40px}
.opts input[type=checkbox]{width:20px;height:20px;accent-color:var(--copper)}
.rules{text-align:left;font-size:14px;color:var(--sand);margin-top:6px;line-height:1.45}
.rules summary{cursor:pointer;color:var(--gold);text-align:center;padding:8px 0}
.rules ol{padding-left:20px;margin:8px 0 0}
.rules li{margin-bottom:6px}
.result{font-size:16px;line-height:1.5}
.result table{width:100%;border-collapse:collapse;margin:6px 0}
.result td{padding:5px 6px;border-bottom:1px solid rgba(255,255,255,.12)}
.result td:last-child{text-align:right;font-weight:700;color:var(--gold2)}
.result .win{color:var(--lime);font-weight:800;font-size:20px;margin-top:8px}
.installhint{margin:14px 0 0;padding:10px 12px;border:1px solid rgba(255,255,255,.18);border-radius:10px;font-size:14px;line-height:1.4;opacity:.9;display:flex;gap:10px;align-items:flex-start;text-align:left}
.installhint .ih-text{flex:1}
.installhint .ih-close{background:none;border:0;color:inherit;font-size:18px;cursor:pointer;width:32px;height:32px;margin:-6px -6px 0 0}
.installhint .ih-install{margin-top:8px;padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:inherit;cursor:pointer}
@media (max-width:520px){.dialog h1{font-size:28px}.mode b{font-size:17px}}
@media (orientation:landscape) and (max-height:480px){.dialog{padding:14px 16px}.dialog h1{font-size:24px;margin-bottom:2px}.dialog h1 span{font-size:12px;letter-spacing:.12em}.dialog .sub{display:none}.modes{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.mode{min-height:60px;padding:10px 12px}}
/* Bestenliste */
.tabs{display:flex;gap:6px;justify-content:center;margin-bottom:10px}
.tabs button{appearance:none;font-size:14px;padding:10px 12px;min-height:44px;border-radius:8px;border:1px solid #8a4414;background:var(--ink-dk);color:var(--sand);cursor:pointer}
.tabs button.on{background:linear-gradient(180deg,var(--wood-1),var(--wood-2));border-color:var(--copper);color:#ffe9c4;font-weight:700}
.best table td:first-child{width:2.2em;text-align:right;color:var(--sand);font-weight:700}
.best table td:last-child{white-space:nowrap}
.best .meta{display:block;font-size:12px;color:var(--muted);font-weight:400}
.best .me td{background:rgba(255,210,0,.12);color:#ffe066}
.best .muted,.entry .muted,.dialog .muted{color:var(--muted);font-size:14px}
.entry{margin-top:10px}
.entry .row{display:flex;gap:8px;align-items:center;margin:8px 0}
.entry .row span,.entry .row label{flex:0 0 auto;color:var(--sand);font-size:14px}
.entry input{flex:1 1 auto;min-width:0;font-size:16px;padding:10px;min-height:44px;border-radius:8px;border:1px solid var(--copper);background:var(--ink-dk);color:#ffe9c4}
.entry button{appearance:none;font-weight:700;padding:8px 12px;min-height:44px;border-radius:8px;border:2px solid var(--copper);background:linear-gradient(180deg,var(--wood-1),var(--wood-2));color:#ffe9c4;cursor:pointer}
.entry button:disabled{opacity:.5;cursor:default}
.entry .rank{color:var(--lime);font-weight:800}
/* Online */
.or{color:var(--muted);font-size:14px;margin:12px 0 6px}
.code-in{text-transform:uppercase;letter-spacing:.3em;text-align:center;font-weight:800;font-size:20px!important}
.code{font-size:44px;font-weight:900;letter-spacing:.35em;color:#ffe066;text-shadow:0 0 14px #ff8a00,0 2px 2px #000;margin:4px 0 8px;padding-left:.35em;user-select:text;-webkit-user-select:text}
.err{color:#ff7b6b;font-size:14px;min-height:1.2em;margin:4px 0 0}
.result .wait{color:var(--muted);font-size:14px;margin-top:6px}

/* Weniger Bewegung */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fly{display:none}
}

/* Online-Button wie vorher blau unterlegt (fridmanz 31.10.2026) */
.mode.online{border-color:#2f8fd8;background:linear-gradient(180deg,#123a5e,#0a1f36)}
.mode.online:hover,.mode.online:focus-visible{border-color:#5fb0f0}