/* ============================================================ MR. BASKETBALL — UI Designsprache aus der Gerber-Software-Website übernommen: theme-mrbasketball Palette, Orbitron als Display, Permanent Marker für Aktionen, Inter für Fliesstext, harte Offset- Schatten statt Rundungen, Laufbänder als Trenner. ============================================================ */ :root { --bg:#0d0a08; --bg-soft:#14100c; --card:#1a140e; --card-hi:#221a12; --border:rgba(255,140,26,.18); --border-soft:rgba(255,255,255,.07); --accent:#ff8c1a; --accent2:#e06700; --accent-glow:rgba(255,140,26,.33); --accent-faint:rgba(255,140,26,.06); --text:#ffffff; --muted:#9ca3af; --dim:#6b7280; --gold:#f0b429; --ok:#6fbf5a; --bad:#e0483d; --violet:#9b83ff; /* Orbitron nur fuer Ueberschriften: seine Null ist ein durch- gestrichenes Rechteck, auf Anzeigetafeln unlesbar. Ziffern -> Inter. */ --display:'Orbitron','Arial Black',sans-serif; --marker:'Permanent Marker','Orbitron',sans-serif; --ui:'Inter',system-ui,-apple-system,sans-serif; --noise:none; --ease:cubic-bezier(.2,.9,.25,1); } * { margin:0; padding:0; box-sizing:border-box; } /* ist der Container, an dem ALLE Groessenabfragen haengen (@container statt @media, cqw/cqh statt vw/vh). Nur so misst das Stylesheet die gedrehte Buehne und nicht das echte Fenster — hochkant sind die beiden vertauscht. */ body { container-type:size; } /* Die Farbe MUSS auch an haengen. Im Briefkasten (hohes Fenster am PC) ist kleiner als das Fenster — oben und unten schaut dann hervor, und ohne Farbe ist das WEISS. Genau so sah es aus, als wuerde das Spiel gar nicht laden. */ html { height:100%; overflow:hidden; background:var(--bg); } /* wird an die linke obere Ecke des SICHTBAREN Bereichs genagelt, die Masse setzt buehneAusrichten() in Pixeln. Vorher stand hier height:100% — das misst auf dem Handy das Layout- Fenster samt dem Streifen hinter der Adressleiste, und der Tipp landete rund einen Zentimeter zu weit oben. */ body { position:fixed; top:0; left:0; width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:var(--ui); } body { -webkit-font-smoothing:antialiased; /* Ohne die Vorsilben markiert ein langer Tipp auf dem Handy Text statt zu zielen — CrazyGames prüft genau das. */ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; } button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; } img { display:block; } ::-webkit-scrollbar { width:10px; } ::-webkit-scrollbar-track { background:#0a0806; } ::-webkit-scrollbar-thumb { background:#2a2018; border:2px solid #0a0806; } ::-webkit-scrollbar-thumb:hover { background:var(--accent2); } /* ---------- Bühne ---------- */ #stage { position:fixed; inset:0; display:grid; place-items:center; } #c { display:block; touch-action:none; } #scrim { position:fixed; inset:0; pointer-events:none; opacity:0; transition:opacity .4s var(--ease); background: radial-gradient(130% 100% at 50% 38%, rgba(13,10,8,.62), rgba(6,4,3,.96)), linear-gradient(180deg, var(--accent-faint), transparent 45%); backdrop-filter:blur(4px) saturate(.6); } body.menu-open #scrim { opacity:1; } /* Schwebende Emoji im Hintergrund der Menüs */ #floaters { position:fixed; inset:0; pointer-events:none; opacity:0; transition:opacity .5s; z-index:1; } body.menu-open #floaters { opacity:1; } #floaters span { position:absolute; font-size:var(--size,2rem); opacity:.16; animation:floaty var(--dur,7s) ease-in-out var(--delay,0s) infinite; filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); } @keyframes floaty { 0%,100% { transform:translateY(0) rotate(var(--rot,0deg)); } 50% { transform:translateY(-26px) rotate(calc(var(--rot,0deg) * -1)); } } /* ============================================================ BAUSTEINE ============================================================ */ .kicker { display:inline-block; padding:7px 16px; font:600 11px/1 var(--ui); letter-spacing:.3em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); background:rgba(255,140,26,.06); } .label { font:600 10px/1 var(--ui); letter-spacing:.24em; text-transform:uppercase; color:var(--dim); } /* Laufband */ /* Das Laufband ist reine Zierde. Ohne pointer-events:none faengt es am Handy die Beruehrungen ab — dann sind Shop, Einstellungen und das Beitreten-Feld darunter nicht mehr antippbar. Auf dem Rechner faellt das nicht auf, weil dort der Zeiger genauer ist und man neben das Band trifft. */ .ticker { pointer-events:none; overflow:hidden; white-space:nowrap; background:var(--accent); color:#000; font-family:var(--marker); font-size:15px; padding:9px 0; transform:rotate(-1.2deg) scale(1.03); box-shadow:0 8px 34px rgba(0,0,0,.55); position:relative; z-index:3; } .ticker.reverse { transform:rotate(1.2deg) scale(1.03); background:#000; color:var(--accent); border-top:2px solid var(--accent); border-bottom:2px solid var(--accent); } .ticker .track { display:inline-block; animation:marquee 22s linear infinite; } .ticker.reverse .track { animation-direction:reverse; } .ticker span { margin:0 26px; } @keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } } /* ---------- Buttons: harte Offset-Schatten, keine Rundungen ---------- */ .btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px; font-family:var(--marker); letter-spacing:.02em; border:2px solid var(--accent); transition:box-shadow .18s var(--ease), transform .18s var(--ease), background .18s, color .18s; } .btn-primary { background:var(--accent); color:#000; box-shadow:7px 7px 0 #000, 9px 9px 0 var(--accent-glow); } .btn-primary:hover:not(:disabled) { box-shadow:11px 11px 0 #000, 13px 13px 0 var(--accent-glow); transform:translate(-2px,-2px); } .btn-primary:active:not(:disabled) { box-shadow:1px 1px 0 #000; transform:translate(5px,5px); } .btn-ghost { background:#000; color:var(--accent); box-shadow:7px 7px 0 rgba(255,255,255,.16); } .btn-ghost:hover:not(:disabled) { box-shadow:11px 11px 0 rgba(255,255,255,.16); transform:translate(-2px,-2px); background:var(--accent); color:#000; } .btn-ghost:active:not(:disabled) { box-shadow:1px 1px 0 rgba(255,255,255,.16); transform:translate(5px,5px); } .btn:disabled { opacity:.32; cursor:not-allowed; box-shadow:3px 3px 0 #000; } .btn-play { width:100%; height:104px; padding:0 30px; gap:20px; font-size:clamp(22px,2.4cqw,33px); justify-content:flex-start; } .btn-play .txt { flex:1; text-align:left; white-space:nowrap; } .btn-play .sub { text-align:right; font-family:var(--ui); } .btn-play .sub b { display:block; font:600 12px/1.5 var(--ui); letter-spacing:.14em; text-transform:uppercase; } .btn-play .sub span { font:400 11px/1.5 var(--ui); letter-spacing:.06em; opacity:.65; } .btn-play .ball { width:44px; height:44px; flex:none; animation:spin 9s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } .btn-sm { flex:1; height:64px; font-size:21px; gap:12px; } .btn-tiny { height:42px; padding:0 18px; font-size:14px; gap:8px; box-shadow:5px 5px 0 #000; } .btn-tiny:hover:not(:disabled) { box-shadow:8px 8px 0 #000; transform:translate(-2px,-2px); } .btn-tiny.danger { border-color:var(--bad); color:var(--bad); background:#000; box-shadow:5px 5px 0 rgba(224,72,61,.3); } .btn-tiny.danger:hover:not(:disabled) { background:var(--bad); color:#fff; box-shadow:8px 8px 0 rgba(224,72,61,.3); } /* ---------- Münzen ---------- */ .coins { display:inline-flex; align-items:center; gap:9px; } .coin, .c-mini { border-radius:50%; flex:none; display:inline-block; background:radial-gradient(circle at 34% 30%, #ffe08a, var(--gold) 46%, #8a5c0c); box-shadow:inset 0 0 0 2px rgba(80,52,6,.6), 0 2px 6px rgba(0,0,0,.6); } .coin { width:20px; height:20px; position:relative; } .coin::after { content:"$"; position:absolute; inset:0; display:grid; place-items:center; font:800 11px/1 var(--ui); color:#6b4708; } .c-mini { width:13px; height:13px; margin-left:7px; vertical-align:-2px; box-shadow:inset 0 0 0 1.5px rgba(80,52,6,.6); } /* Inter statt Orbitron: Orbitrons Null ist ein durchgestrichenes Rechteck und liest sich bei dieser Grösse wie ein Fehlzeichen. */ .coins b { font:600 19px/1 var(--ui); color:var(--gold); font-variant-numeric:tabular-nums; letter-spacing:.02em; } /* ============================================================ HAUPTMENÜ ============================================================ */ .screen { position:fixed; inset:0; z-index:10; display:none; } .screen.show { display:block; } #menu { place-items:center; } #menu.show { display:grid; } .menu-box { width:min(660px,92cqw); position:relative; z-index:2; } .title-block { margin-bottom:38px; text-align:center; } .title-block .kicker { margin-bottom:20px; } .title-main { font-family:var(--display); font-weight:600; font-size:clamp(50px,7.2cqw,86px); line-height:.98; letter-spacing:.01em; text-transform:uppercase; white-space:nowrap; } .title-main em { font-style:normal; color:var(--accent); text-shadow:0 0 44px var(--accent-glow); } .tagline { margin-top:16px; font:300 15px/1.6 var(--ui); color:var(--muted); } .menu-actions { display:flex; flex-direction:column; gap:16px; } .menu-row { display:flex; gap:16px; } /* Ausrüstungs-Streifen */ .loadout { margin-top:30px; padding:16px 20px; display:flex; align-items:center; gap:18px; background:var(--card); border:1px solid var(--border); transition:border-color .2s, background .2s; } .loadout:hover { border-color:var(--accent); background:var(--card-hi); } .loadout .thumb { width:54px; height:54px; flex:none; position:relative; } .loadout .thumb img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.8)); animation:bob 3.4s ease-in-out infinite; } @keyframes bob { 0%,100%{transform:translateY(0) rotate(-6deg)} 50%{transform:translateY(-6px) rotate(6deg)} } .loadout .info { flex:1; min-width:0; } .loadout .nm { font:600 13px/1.3 var(--ui); letter-spacing:.12em; text-transform:uppercase; } .loadout .cond-row { display:flex; align-items:center; gap:12px; margin-top:9px; } /* Zustandsbalken */ .cond { flex:1; height:9px; background:#000; border:1px solid var(--border-soft); position:relative; overflow:hidden; } .cond i { position:absolute; inset:0 auto 0 0; display:block; transition:width .5s var(--ease); } .cond::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg, transparent 0 8px, rgba(0,0,0,.7) 8px 10px); } .cond-tag { font:600 9px/1 var(--ui); letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; } /* Einblenden gestaffelt */ .stagger > * { opacity:0; transform:translateY(16px); animation:rise .55s var(--ease) forwards; } .stagger > *:nth-child(1){animation-delay:.05s} .stagger > *:nth-child(2){animation-delay:.13s} .stagger > *:nth-child(3){animation-delay:.21s} .stagger > *:nth-child(4){animation-delay:.29s} @keyframes rise { to { opacity:1; transform:none; } } /* ============================================================ PANELS ============================================================ */ /* Zentriert, wenn Platz da ist — scrollbar, wenn nicht. Wichtig: mit place-items:center in einem Grid wird bei Ueberlauf der OBERE Teil abgeschnitten und ist per Scrollen nicht mehr erreichbar. Genau das passierte auf dem Handy im Querformat mit der Ergebniskarte. margin:auto am Kind hat dieses Problem nicht. */ .panel-wrap { position:fixed; inset:0; z-index:2; display:flex; padding:24px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .panel-wrap > * { margin:auto; } .panel { width:min(1160px,96cqw); height:min(790px,92cqh); display:flex; flex-direction:column; background:var(--bg-soft); border:2px solid var(--accent); box-shadow:14px 14px 0 #000, 0 0 70px rgba(0,0,0,.8); animation:panelIn .38s var(--ease); } @keyframes panelIn { from { opacity:0; transform:translateY(26px) scale(.97); } } .panel-head { display:flex; align-items:center; gap:22px; padding:20px 26px; border-bottom:1px solid var(--border); } .panel-head h2 { font-family:var(--display); font-weight:600; font-size:27px; letter-spacing:.06em; text-transform:uppercase; } .panel-head h2 em { font-style:normal; color:var(--accent); } .panel-head .spacer { flex:1; } .panel-body { flex:1; display:flex; min-height:0; position:relative; } /* Verlauf als Hinweis, dass unten noch mehr kommt */ .panel-body::after { content:""; position:absolute; left:0; right:0; bottom:0; height:56px; pointer-events:none; background:linear-gradient(transparent, var(--bg-soft)); } /* ---------- Reiterleiste unten rechts ---------- Auf dem Handy im Querformat hält man das Gerät an den Seiten; der Daumen kommt unten und rechts hin, oben links nicht. Deshalb liegen die Reiter hier und nicht in der Kopfzeile. flex:none — die Leiste darf nie mitschrumpfen, sonst wird sie auf niedrigen Bildschirmen als Erstes zusammengedrueckt und ist genau dort unbedienbar, wo sie am meisten gebraucht wird. */ .panel-foot { flex:none; display:flex; justify-content:flex-end; align-items:center; gap:12px; padding:10px 14px; border-top:1px solid var(--border); background:var(--bg-soft); } .panel-foot .seg { margin:0; } .panel-foot .seg button { min-height:46px; padding:0 20px; font-size:14px; } .x-btn { width:42px; height:42px; flex:none; display:grid; place-items:center; border:2px solid var(--border); color:var(--muted); font-size:20px; transition:.18s var(--ease); } .x-btn:hover { background:var(--bad); border-color:var(--bad); color:#fff; box-shadow:5px 5px 0 rgba(224,72,61,.3); transform:translate(-2px,-2px); } /* ---------- Shop: Liste ---------- */ .shop-list { width:326px; flex:none; overflow-y:auto; padding:18px; border-right:1px solid var(--border); display:flex; flex-direction:column; gap:12px; } .ball-card { position:relative; display:flex; align-items:center; gap:15px; padding:14px; width:100%; text-align:left; background:var(--card); border:1px solid var(--border-soft); transition:.2s var(--ease); } .ball-card:hover { border-color:var(--accent); background:var(--card-hi); transform:translateX(4px); } .ball-card.sel { border-color:var(--accent); background:var(--card-hi); box-shadow:6px 6px 0 #000; } .ball-card.sel::before { content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:4px; background:var(--accent); } .ball-card img { width:50px; height:50px; object-fit:contain; flex:none; filter:drop-shadow(0 4px 7px rgba(0,0,0,.8)); transition:transform .3s var(--ease); } .ball-card:hover img { transform:rotate(18deg) scale(1.08); } .ball-card .cn { flex:1; min-width:0; } .ball-card .cn b { display:block; font:600 12px/1.3 var(--ui); letter-spacing:.1em; text-transform:uppercase; } .ball-card .cn small { display:block; margin-top:5px; font:600 10px/1 var(--ui); letter-spacing:.1em; } .ball-card .cond { margin-top:9px; height:5px; } .owned { color:var(--ok); } .locked { color:var(--gold); } .equipped-tag { position:absolute; top:0; right:0; padding:4px 9px; font-family:var(--marker); font-size:10px; letter-spacing:.08em; background:var(--accent); color:#000; } /* ---------- Shop: Detail ---------- */ .shop-detail { flex:1; overflow-y:auto; padding:26px 30px 70px; min-width:0; } .detail-top { display:flex; gap:30px; align-items:center; margin-bottom:6px; } .detail-art { width:190px; height:190px; flex:none; display:grid; place-items:center; position:relative; } .detail-art::before { content:""; position:absolute; inset:8%; background:radial-gradient(circle, var(--accent-glow), transparent 66%); animation:pulseGlow 3.6s ease-in-out infinite; } @keyframes pulseGlow { 0%,100%{opacity:.5;transform:scale(.92)} 50%{opacity:1;transform:scale(1.06)} } .detail-art img { width:160px; height:160px; object-fit:contain; position:relative; filter:drop-shadow(0 16px 26px rgba(0,0,0,.85)); animation:hover3d 5.5s ease-in-out infinite; } @keyframes hover3d { 0%,100%{transform:translateY(0) rotate(-7deg)} 50%{transform:translateY(-14px) rotate(7deg)} } .detail-head h3 { font-family:var(--display); font-weight:600; font-size:32px; letter-spacing:.02em; text-transform:uppercase; line-height:1.05; } .detail-head p { margin-top:11px; font:300 13px/1.65 var(--ui); color:var(--muted); max-width:44ch; } .tier { display:inline-block; margin-bottom:11px; padding:4px 11px; font:600 9px/1 var(--ui); letter-spacing:.22em; border:1px solid currentColor; } .tier-1 { color:var(--muted); } .tier-2 { color:var(--violet); } .tier-3 { color:var(--gold); } .sec { margin-top:28px; } .sec > .label { margin-bottom:14px; display:flex; align-items:center; gap:12px; } .sec > .label::after { content:""; flex:1; height:1px; background:var(--border); } /* Statbalken */ .stat { display:flex; align-items:center; gap:16px; margin-bottom:10px; } .stat .sn { width:76px; font:600 10px/1 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .stat .bar { flex:1; display:flex; gap:3px; height:14px; } .stat .bar i { flex:1; background:#241c14; transform:scaleY(.55); transform-origin:bottom; animation:segIn .4s var(--ease) forwards; } .stat .bar i:nth-child(1){animation-delay:.02s} .stat .bar i:nth-child(2){animation-delay:.05s} .stat .bar i:nth-child(3){animation-delay:.08s} .stat .bar i:nth-child(4){animation-delay:.11s} .stat .bar i:nth-child(5){animation-delay:.14s} .stat .bar i:nth-child(6){animation-delay:.17s} .stat .bar i:nth-child(7){animation-delay:.20s} .stat .bar i:nth-child(8){animation-delay:.23s} .stat .bar i:nth-child(9){animation-delay:.26s} .stat .bar i:nth-child(10){animation-delay:.29s} @keyframes segIn { to { transform:scaleY(1); } } .stat .bar i.f { background:linear-gradient(180deg, var(--accent), var(--accent2)); box-shadow:0 0 12px var(--accent-glow); } .stat .bar i.u { background:linear-gradient(180deg, #7ce8ff, #1f8fb5); box-shadow:0 0 12px rgba(124,232,255,.35); } .stat .bar i.w { background:#3a2d20; } .stat .sv { width:58px; text-align:right; font:600 11px/1 var(--ui); font-variant-numeric:tabular-nums; } /* Upgrade-Zeilen */ .upg { display:flex; align-items:center; gap:16px; padding:12px 14px; margin-bottom:9px; background:var(--card); border:1px solid var(--border-soft); transition:.2s var(--ease); } .upg:hover { border-color:var(--border); background:var(--card-hi); } .upg .un { width:76px; flex:none; font:600 11px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; } .upg .ud { flex:1; font:300 11px/1.5 var(--ui); color:var(--dim); } .pips { display:flex; gap:5px; flex:none; } .pips i { width:16px; height:16px; background:#000; border:1px solid var(--border-soft); transition:.2s var(--ease); } .pips i.on { background:var(--accent); border-color:var(--accent); box-shadow:0 0 10px var(--accent-glow); } .actions { display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; } .actions .btn-tiny { min-width:170px; height:48px; } .hint-line { margin-top:15px; font:300 11px/1.7 var(--ui); color:var(--dim); } .hint-line b { color:var(--accent); font-weight:600; } /* ---------- Einstellungen ---------- */ .set-body { padding:26px 32px; overflow-y:auto; flex:1; } .set-row { display:flex; align-items:center; gap:22px; padding:16px 0; border-bottom:1px solid var(--border-soft); } .set-row .sl { flex:1; } .set-row .sl b { display:block; font:600 12px/1.4 var(--ui); letter-spacing:.12em; text-transform:uppercase; } .set-row .sl span { display:block; margin-top:5px; font:300 11px/1.5 var(--ui); color:var(--dim); } .seg { display:flex; border:1px solid var(--border); flex:none; } .seg button { padding:10px 18px; font:600 10px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border-right:1px solid var(--border); transition:.16s; } .seg button:last-child { border-right:none; } .seg button:hover { color:#fff; background:var(--card-hi); } .seg button.on { background:var(--accent); color:#000; } /* ============================================================ MATCH-HUD ============================================================ */ #hud-top { position:fixed; top:0; left:0; right:0; z-index:5; padding:16px 22px; display:flex; align-items:flex-start; gap:18px; pointer-events:none; opacity:0; transition:opacity .35s; } body.playing #hud-top { opacity:1; } #hud-top .esc { pointer-events:auto; } #hud-info { margin-left:auto; display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; max-width:36%; } .hud-chip { display:flex; align-items:center; gap:8px; padding:10px 14px; font:600 10px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border:1px solid var(--border-soft); background:rgba(8,6,4,.82); } .hud-chip .dot { width:7px; height:7px; border-radius:50%; flex:none; } .scoreboard { position:absolute; left:50%; top:12px; transform:translateX(-50%); display:flex; align-items:center; gap:24px; padding:12px 28px; background:#000; border:2px solid var(--accent); box-shadow:7px 7px 0 rgba(255,140,26,.22), 0 10px 34px rgba(0,0,0,.7); } .sb-side { display:flex; align-items:center; gap:12px; } .sb-lbl { font:600 10px/1 var(--ui); letter-spacing:.22em; text-transform:uppercase; color:var(--dim); } .sb-num { font:700 34px/1 var(--ui); font-variant-numeric:tabular-nums; min-width:32px; text-align:center; transition:transform .18s var(--ease); } .sb-num.p { color:var(--accent); text-shadow:0 0 20px var(--accent-glow); } .sb-num.a { color:var(--violet); text-shadow:0 0 20px rgba(155,131,255,.4); } .sb-num.pop { animation:scorePop .45s var(--ease); } @keyframes scorePop { 0%{transform:scale(1)} 35%{transform:scale(1.5)} 100%{transform:scale(1)} } .sb-clock { font:700 26px/1 var(--ui); font-variant-numeric:tabular-nums; color:#fff; padding:0 20px; border-left:1px solid var(--border); border-right:1px solid var(--border); transition:color .2s; } .sb-clock.urgent { color:var(--bad); animation:tick .9s steps(2) infinite; } @keyframes tick { 50% { opacity:.4; } } /* ============================================================ ERGEBNIS ============================================================ */ .result-card { width:min(520px,92cqw); padding:32px 34px; background:var(--bg-soft); border:2px solid var(--accent); box-shadow:14px 14px 0 #000, 0 0 60px rgba(0,0,0,.8); animation:panelIn .38s var(--ease); } .result-card h2 { font-family:var(--display); font-weight:600; font-size:44px; line-height:1; text-transform:uppercase; } .result-card .swish { margin-top:12px; font-family:var(--marker); font-size:17px; color:#5ce1ff; } .final-score { display:flex; align-items:center; gap:20px; margin-top:20px; } .final-score .fs-side { display:flex; align-items:center; gap:13px; } .final-score i { font:600 10px/1 var(--ui); letter-spacing:.22em; text-transform:uppercase; color:var(--dim); font-style:normal; } .final-score b { font:700 46px/1 var(--ui); font-variant-numeric:tabular-nums; letter-spacing:-.02em; } .final-score b.p { color:var(--accent); } .final-score b.a { color:var(--violet); } .final-score .fs-sep { font:700 30px/1 var(--ui); color:var(--dim); } .payout { margin:26px 0 8px; } .pay-row { display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid var(--border-soft); opacity:0; animation:rise .4s var(--ease) forwards; } .pay-row:nth-child(1){animation-delay:.10s} .pay-row:nth-child(2){animation-delay:.19s} .pay-row:nth-child(3){animation-delay:.28s} .pay-row:nth-child(4){animation-delay:.37s} .pay-row:nth-child(5){animation-delay:.46s} .pay-row:nth-child(6){animation-delay:.55s} .pay-row .pl { flex:1; font:600 11px/1 var(--ui); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .pay-row .pv { font:600 15px/1 var(--ui); font-variant-numeric:tabular-nums; } .pay-row.tot .pl { color:#fff; } .pay-row.tot .pv { color:var(--gold); font-size:23px; } .pay-row.neg .pv { color:var(--bad); } .result-card .actions .btn-tiny { flex:1; min-width:0; height:50px; } /* Ohne eigene Zeile schob sich der Verdoppeln-Knopf ueber die Aktionen darunter — auf flachen Schirmen unbedienbar. */ #btn-double { position:relative; z-index:1; } .result-card .actions { position:relative; z-index:2; clear:both; } .ad-optional { position:relative; z-index:2; } /* ---------- Toast ---------- */ #toast { position:fixed; left:50%; bottom:84px; transform:translate(-50%,16px); z-index:40; padding:13px 24px; font-family:var(--marker); font-size:14px; border:2px solid var(--accent); background:#000; color:var(--accent); box-shadow:6px 6px 0 var(--accent-glow); opacity:0; pointer-events:none; transition:opacity .22s, transform .22s var(--ease); } #toast.show { opacity:1; transform:translate(-50%,0); } #toast.bad { border-color:var(--bad); color:var(--bad); box-shadow:6px 6px 0 rgba(224,72,61,.3); } #toast.good { border-color:var(--gold); color:var(--gold); box-shadow:6px 6px 0 rgba(240,180,41,.3); } #hint { position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:5; font:400 10px/1 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .35s; } body.playing #hint { opacity:1; } #boot { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--bg); } #boot span { font-family:var(--marker); font-size:16px; letter-spacing:.1em; color:var(--accent); animation:tick 1.2s ease-in-out infinite; } /* ============================================================ SHOP-REITER, BOOSTER, GEGNERSUCHE ============================================================ */ #pane-balls { flex:1; display:flex; min-height:0; } .pane-scroll { flex:1; overflow-y:auto; padding:26px 30px 70px; } .panel-head .seg { margin-left:6px; } /* Steckplätze */ .slots { display:flex; gap:14px; } .slot { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 10px; background:var(--card); border:1px dashed var(--border); color:var(--dim); transition:.2s var(--ease); } .slot.filled { border-style:solid; border-color:var(--accent); color:var(--text); background:var(--card-hi); } .slot:hover { transform:translateY(-3px); box-shadow:5px 5px 0 #000; } .slot .si { font-size:26px; line-height:1; } .slot .sn { font:600 10px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; } .slot .sc { font:700 11px/1 var(--ui); color:var(--gold); } /* Kartenraster */ .bgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .bcard { position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; padding:15px 10px; background:var(--card); border:1px solid var(--border-soft); transition:.2s var(--ease); } .bcard:hover { border-color:var(--accent); transform:translateY(-3px); } .bcard.sel { border-color:var(--accent); background:var(--card-hi); box-shadow:6px 6px 0 #000; } .bcard b { font:600 11px/1.2 var(--ui); letter-spacing:.08em; text-transform:uppercase; text-align:center; } .bcard .bch { font:600 10px/1 var(--ui); color:var(--gold); } .bico { font-size:30px; line-height:1; filter:drop-shadow(0 3px 6px rgba(0,0,0,.7)); } .bico.big { font-size:56px; } .pips.small i { width:11px; height:11px; } .bdetail { display:flex; gap:22px; align-items:center; margin-top:26px; padding:20px; background:var(--card); border:1px solid var(--border); } .bdetail h3 { font-family:var(--display); font-weight:600; font-size:22px; text-transform:uppercase; } .bdetail p { margin-top:7px; font:300 12px/1.6 var(--ui); color:var(--muted); } /* Booster-Leiste im Match */ #boostbar { position:fixed; left:50%; bottom:44px; transform:translateX(-50%); z-index:5; display:flex; gap:12px; opacity:0; transition:opacity .3s; pointer-events:none; } body.playing #boostbar { opacity:1; pointer-events:auto; } .bslot { position:relative; width:64px; height:64px; display:grid; place-items:center; background:rgba(8,6,4,.85); border:2px solid var(--border); font-size:26px; transition:.16s var(--ease); } .bslot:hover:not(.spent) { border-color:var(--accent); transform:translateY(-4px); box-shadow:5px 5px 0 #000; } .bslot.spent { opacity:.35; cursor:not-allowed; } .bslot.empty { color:var(--dim); font:600 14px/1 var(--ui); border-style:dashed; } .bslot .k { position:absolute; top:3px; left:5px; font:700 9px/1 var(--ui); color:var(--dim); } .bslot .n { position:absolute; bottom:2px; right:5px; font:700 11px/1 var(--ui); color:var(--gold); } /* Gegnersuche */ #mm-dots { display:flex; gap:9px; justify-content:center; margin:22px 0; } #mm-dots i { width:10px; height:10px; background:var(--accent); animation:mmb 1.1s ease-in-out infinite; } #mm-dots i:nth-child(2) { animation-delay:.16s; } #mm-dots i:nth-child(3) { animation-delay:.32s; } @keyframes mmb { 0%,100% { opacity:.2; transform:translateY(0);} 50% { opacity:1; transform:translateY(-9px);} } #mm-status { min-height:60px; display:grid; place-items:center; } .mm-hint { font:300 12px/1.6 var(--ui); color:var(--dim); } .mm-vs { display:flex; align-items:center; gap:16px; font:700 16px/1 var(--ui); } .mm-vs i { font-style:normal; font:600 10px/1 var(--ui); letter-spacing:.22em; text-transform:uppercase; color:var(--dim); } .mm-vs .opp { color:var(--violet); } /* ---------- Simulierte Werbung ---------- */ #adsim { position:fixed; inset:0; z-index:60; display:none; place-items:center; background:rgba(4,3,2,.94); backdrop-filter:blur(6px); } #adsim.show { display:grid; } .adsim-box { width:min(460px,90cqw); padding:28px 30px; text-align:center; background:var(--bg-soft); border:2px solid var(--accent); box-shadow:12px 12px 0 #000; } .adsim-tag { display:inline-block; padding:5px 12px; margin-bottom:20px; font:600 9px/1 var(--ui); letter-spacing:.2em; text-transform:uppercase; color:var(--bad); border:1px solid var(--bad); } .adsim-art { font-size:64px; line-height:1; animation:spin 4s linear infinite; margin-bottom:14px; } .adsim-box b { display:block; font-family:var(--display); font-size:20px; text-transform:uppercase; } .adsim-track { height:6px; background:#000; border:1px solid var(--border); margin:20px 0 10px; } .adsim-track i { display:block; height:100%; width:0; background:var(--accent); transition:width .1s linear; } #adsim-count { display:block; font:700 12px/1 var(--ui); color:var(--dim); margin-bottom:20px; } #adsim-skip { width:100%; } /* ---------- Effet-Regler (Touch) ---------- */ /* ---------- Effet-Knoepfe ---------- Zwei Stueck, unten rechts beim Daumen. Sie sind ZUSTAND, nicht Befehl: was gerade gesetzt ist, leuchtet. Darum keine flüchtige Rueckmeldung, sondern eine dauerhaft sichtbare Markierung — sonst weiss man beim Zielen nicht mehr, womit man wirft. */ #spinbar { position:fixed; right:22px; bottom:40px; z-index:5; display:flex; align-items:stretch; gap:10px; opacity:0; transition:opacity .3s; pointer-events:none; } body.playing #spinbar { opacity:1; pointer-events:auto; } #spinbar button { width:74px; min-height:66px; padding:7px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--dim); background:rgba(8,6,4,.88); border:2px solid var(--border); transition:.14s var(--ease); cursor:pointer; } #spinbar button .pfeil { font-size:26px; line-height:1; } #spinbar button .lbl { font:600 10px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; } #spinbar button:hover { border-color:var(--accent); color:#fff; } #spinbar button:active { transform:translateY(2px); } /* Gesetzt: der linke Knopf orange, der rechte blau — dieselben Farben, die der Ring am Ball und die Flugbahn tragen. Ohne diesen Gleichklang muesste man sich die Zuordnung merken. */ #spinbar button.on { color:#0b0805; border-color:#ff8a2a; background:#ff8a2a; } #spinbar button[data-spin="1"].on { border-color:#5ce1ff; background:#5ce1ff; } @container (max-height:620px) { #spinbar { right:14px; bottom:14px; gap:8px; } #spinbar button { width:62px; min-height:56px; } #spinbar button .pfeil { font-size:22px; } } /* Effet-Schritt des Tutorials: die Knoepfe rufen selbst. Abwechselnd statt gleichzeitig — zwei synchron blinkende Knoepfe sehen aus wie ein Fehler, abwechselnd sieht es nach Auswahl aus. */ body.tut-effet #spinbar button { border-color:var(--accent); color:#fff; animation:tutPuls 1.5s ease-in-out infinite; } body.tut-effet #spinbar button[data-spin="1"] { animation-delay:.75s; } @keyframes tutPuls { 0%, 100% { box-shadow:0 0 0 0 rgba(255,122,26,0); transform:translateY(0); } 50% { box-shadow:0 0 0 5px rgba(255,122,26,.30), 0 0 30px rgba(255,122,26,.5); transform:translateY(-3px); } } /* ---------- Tutorial-Präsentation ---------- Dieselbe Formensprache wie Ergebnis und Shop: orangener Rahmen, harter Schatten, Display-Schrift. Die Bilder kommen aus dem Spiel selbst — nichts soll aussehen wie ein Fremdkörper. */ .tut-card { width:min(700px,94cqw); padding:28px 34px 22px; text-align:center; background:var(--bg-soft); border:2px solid var(--accent); box-shadow:14px 14px 0 #000, 0 0 60px rgba(0,0,0,.8); animation:panelIn .38s var(--ease); } .tut-kicker { font:600 12px/1 var(--ui); letter-spacing:.24em; color:var(--accent); text-transform:uppercase; } .tut-card h2 { font-family:var(--display); font-weight:600; font-size:38px; line-height:1.05; text-transform:uppercase; margin-top:10px; } .tut-fig { min-height:140px; display:flex; align-items:center; justify-content:center; gap:16px; margin:16px 0 4px; } .tut-fig img.hoop { height:140px; filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); } .tut-fig .ballcol { display:flex; flex-direction:column; align-items:center; gap:7px; font:600 10px/1 var(--ui); letter-spacing:.08em; color:var(--dim); text-transform:uppercase; } .tut-fig .ballcol img { width:62px; height:62px; animation:spin 9s linear infinite; } .tut-liga { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; } .tut-liga span { padding:9px 13px; border:1px solid var(--border); font:600 11px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); background:#241b14; } .tut-liga span.jetzt { border-color:var(--accent); color:#fff; box-shadow:4px 4px 0 rgba(0,0,0,.55); } .tut-liga i { color:var(--dim); font-style:normal; } .tut-pack { width:116px; height:146px; border:2px solid #9aa4b2; background:linear-gradient(160deg,#2c2119,#171006); display:grid; place-items:center; font-family:var(--marker); font-size:19px; line-height:1.3; color:#fff; box-shadow:0 0 36px rgba(255,122,26,.3), 8px 8px 0 rgba(0,0,0,.5); } .tut-code { font-family:var(--marker); font-size:29px; letter-spacing:.28em; padding:13px 22px 13px 28px; border:2px dashed var(--border); color:#5ce1ff; } .tut-text { font:300 16px/1.65 var(--ui); color:var(--dim); max-width:530px; margin:0 auto; } .tut-dots { display:flex; gap:8px; justify-content:center; margin:18px 0 14px; } .tut-dots i { width:8px; height:8px; border-radius:50%; background:var(--border); } .tut-dots i.on { background:var(--accent); } @container (max-height:620px) { .tut-card { padding:16px 22px 14px; } .tut-card h2 { font-size:27px; margin-top:6px; } .tut-fig { min-height:92px; margin:10px 0 2px; } .tut-fig img.hoop { height:92px; } .tut-fig .ballcol img { width:44px; height:44px; } .tut-text { font-size:13px; } .tut-dots { margin:10px 0 8px; } } /* Der Hochkant-Hinweis ist entfernt. Er lag mit z-index 80 über allem und fing im Hochformat jeden Klick ab — auch den auf den Tagesbonus. Hochkant wird die Buehne gedreht, nicht gesperrt. */ /* Flacher Bildschirm = Handy quer. Nicht nach Breite gehen: ein Handy im Querformat ist breit, aber sehr niedrig. */ @container (max-height:560px) { #hint { display:none; } #hud-top { padding:8px 10px; } .scoreboard { top:6px; gap:12px; padding:6px 14px; box-shadow:4px 4px 0 rgba(255,140,26,.22); } .sb-num { font-size:22px; min-width:22px; } .sb-clock { font-size:17px; padding:0 11px; } .sb-lbl { font-size:8px; letter-spacing:.14em; max-width:74px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #hud-info { max-width:30%; gap:5px; } .hud-chip { padding:6px 9px; font-size:8px; letter-spacing:.1em; } #hud-info .hud-chip:first-child { display:none; } /* Ballzustand weglassen */ .btn-tiny.esc { height:34px; padding:0 12px; font-size:12px; } .bslot { width:46px; height:46px; font-size:19px; } .bslot .k { font-size:7px; } .bslot .n { font-size:9px; } #spinbar button { width:44px; height:44px; font-size:18px; } #spin-val { min-width:40px; font-size:11px; } #boostbar { bottom:10px; gap:8px; } #spinbar { bottom:10px; right:10px; gap:6px; } } /* Lange Gegnernamen nicht abschneiden, sondern sauber kuerzen */ .sb-lbl { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ---------- Eigenwerbung ---------- */ #housead { position:fixed; inset:0; z-index:60; display:none; place-items:center; background:rgba(4,3,2,.96); backdrop-filter:blur(6px); padding:20px; } #housead.show { display:grid; } .house-box { width:min(720px,94cqw); background:var(--bg-soft); border:2px solid var(--accent); box-shadow:12px 12px 0 #000; padding:18px; } .house-tag { display:inline-block; margin-bottom:12px; padding:4px 11px; font:600 9px/1 var(--ui); letter-spacing:.24em; text-transform:uppercase; color:var(--dim); border:1px solid var(--border); } #house-player { position:relative; width:100%; aspect-ratio:16/9; background:#000; } #house-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; } #house-note { display:block; margin:12px 0; font:300 11px/1.5 var(--ui); color:var(--dim); } #house-cta { display:flex; align-items:center; gap:14px; padding:13px 16px; background:var(--accent); color:#000; text-decoration:none; transition:.16s var(--ease); } #house-cta:hover { box-shadow:7px 7px 0 #000; transform:translate(-2px,-2px); } .cta-ico { font-size:28px; } .cta-txt { flex:1; min-width:0; } .cta-txt b { display:block; font-family:var(--marker); font-size:19px; } .cta-txt i { display:block; font:400 11px/1.4 var(--ui); font-style:normal; opacity:.8; } .cta-go { font-family:var(--marker); font-size:15px; white-space:nowrap; } #house-skip { width:100%; margin-top:12px; } #house-skip:disabled { opacity:.4; } @container (max-height:560px) { .house-box { width:min(540px,92cqw); padding:12px; } #house-cta { padding:9px 12px; } .cta-txt i { display:none; } #house-note { margin:8px 0; } } /* ---------- Ligen ---------- */ .leagues { display:flex; gap:8px; margin-bottom:16px; } .lg { position:relative; /* Anker fuer das Schloss */ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; padding:11px 6px; background:var(--card); border:1px solid var(--border-soft); transition:.18s var(--ease); } .lg:hover { border-color:var(--accent); transform:translateY(-3px); } .lg.sel { border-color:var(--accent); background:var(--card-hi); box-shadow:5px 5px 0 #000; } .lg.locked { opacity:.5; } .lg.locked::after { content:"🔒"; position:absolute; top:3px; right:4px; font-size:10px; line-height:1; opacity:.9; } .lg b { font:600 10px/1.1 var(--ui); letter-spacing:.08em; text-transform:uppercase; text-align:center; } .lg-req { font:400 8px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); } /* Gesperrter Boosterplatz */ .bslot.locked { opacity:.3; border-style:dashed; cursor:not-allowed; font-size:18px; } .bslot .n em { font-style:normal; color:var(--bad); } /* Rangzeile im Ergebnis */ .rankline { display:flex; align-items:center; gap:12px; margin:14px 0 6px; padding:11px 14px; background:var(--card); border:1px solid var(--border); } .rl-l { flex:1; font:600 10px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .rl-d { font:700 15px/1 var(--ui); } .rl-d.up { color:var(--ok); } .rl-d.down { color:var(--bad); } .rl-p { font:700 19px/1 var(--ui); color:var(--gold); font-variant-numeric:tabular-nums; } @container (max-height:560px) { .leagues { gap:5px; } .lg { padding:7px 4px; } } /* ============================================================ STARTBILDSCHIRM — Dichte Ein Laufband oben, eins unten. Der Inhalt dazwischen muss auch in einem kleinen Fenster passen, ohne zu ueberlaufen. ============================================================ */ .ticker.top { position:fixed; left:-3%; right:-3%; top:-4px; } .ticker.bottom { position:fixed; left:-3%; right:-3%; bottom:-4px; } #menu.show { align-content:center; padding:66px 0; } .menu-box { max-height:100%; overflow-y:auto; overflow-x:hidden; padding:2px; } .menu-box::-webkit-scrollbar { width:0; } .title-block { margin-bottom:22px; } .title-block .kicker { margin-bottom:12px; } .title-main { font-size:clamp(30px, 5.4cqw, 74px); } .tagline { margin-top:10px; font-size:13px; } .leagues { margin-bottom:12px; } .menu-actions { gap:12px; } .menu-row { gap:12px; } .loadout { margin-top:18px; } /* Spielen-Knopf: Beschriftung darf nicht umbrechen und ueberlaufen */ .btn-play { height:clamp(74px, 11cqh, 104px); } .btn-play .sub { max-width:46%; } .btn-play .sub b, .btn-play .sub span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } /* Der Fussbalken kostet Hoehe, die im Laden fehlt. Auf flachen Schirmen wird er darum schmal — die Knoepfe bleiben mit 42 px trotzdem gut mit dem Daumen zu treffen. Zusaetzlich schrumpft die Kopfzeile: 83 px nur fuer eine Ueberschrift sind dort Verschwendung. */ @container (max-height:620px) { .panel-foot { padding:5px 10px; gap:8px; } .panel-foot .seg button { min-height:42px; padding:0 15px; font-size:13px; } .panel-head { padding:9px 16px; gap:12px; } .panel-head h2 { font-size:20px; } .pane-scroll { padding:14px 18px 24px; } } /* Wenig Hoehe: Beiwerk raus, damit das Wesentliche sichtbar bleibt */ @container (max-height:760px) { .tagline { display:none; } .title-block { margin-bottom:16px; } .title-main { font-size:clamp(28px, 4.6cqw, 54px); } .btn-sm { height:52px; font-size:18px; } .loadout { margin-top:12px; padding:11px 14px; } .loadout .thumb { width:44px; height:44px; } } @container (max-height:600px) { #menu.show { padding:52px 0; } .title-block .kicker { display:none; } .lg-req { display:none; } .ticker { font-size:12px; padding:6px 0; } } /* ============================================================ FLACH UND BREIT: ZWEI SPALTEN Auf einem quer gehaltenen Handy ist die Hoehe knapp und die Breite im Ueberfluss — 844 x 390 heisst 609 px Inhalt auf 390 px Schirm. Als eine Saeule muss man rollen, um den Spielen-Knopf ueberhaupt zu sehen. Darum hier zwei Spalten: links Titel, Name, Ligen, Modus und der Ball, rechts alles, was man drueckt. Das halbiert die Hoehe, ohne dass etwas verschwindet oder kleiner wird. Nur bei WENIG HOEHE UND GENUG BREITE. Auf einem hochkant gehaltenen Geraet waeren zwei Spalten das Gegenteil von platzsparend. ============================================================ */ @container (max-height:620px) and (min-width:700px) { /* Der alte Zweispalten-Umbau von vor der Buehne ist raus — das Raster kommt jetzt aus .menu-grid und gilt auf jeder Groesse. Hier bleibt nur, was weiterhin stimmt. */ #menu.show { padding:10px 0; } .menu-box { width:min(1060px, 96cqw); } .btn-play { height:clamp(52px, 14cqh, 74px); font-size:clamp(15px, 2cqw, 22px); padding:0 14px; gap:10px; } .btn-play .ball { width:30px; height:30px; } .btn-play .txt { flex:1; text-align:center; } #join-code { min-width:0; font-size:13px; } } /* Fortschritt der Werbung — ohne Restzeit bricht man eher ab */ .house-bar { height:5px; background:#000; border:1px solid var(--border); margin-top:10px; } .house-bar i { display:block; height:100%; width:0; background:var(--accent); transition:width .2s linear; } /* Gesperrte Liga: die Bedingung faellt auf, nicht das Schloss */ .lg-req.need { color:var(--gold); font-weight:600; } .lg.locked { opacity:.72; } .lg.locked b { opacity:.5; } /* Beim Ergebnis bleibt die Arena sichtbar — dort stehen die Figuren in ihrer Pose, das ist der Abschluss des Signaturmoments. */ body.menu-open #scrim { opacity:1; } #result.show ~ #scrim, body.result-open #scrim { background:radial-gradient(120% 90% at 50% 55%, rgba(13,10,8,.30), rgba(6,4,3,.72)); backdrop-filter:blur(1.5px) saturate(.85); } /* ---------- Einladungs-Link ---------- */ #mm-invite { display:none; margin:18px 0 4px; } #mm-invite.show { display:block; } #mm-invite .label { display:block; margin-bottom:9px; } .invite-row { display:flex; gap:10px; } #mm-link { flex:1; min-width:0; padding:11px 13px; font:400 12px/1 var(--ui); color:var(--accent); background:#000; border:1px solid var(--border); text-overflow:ellipsis; } #mm-link:focus { outline:none; border-color:var(--accent); } #mm-copy { flex:none; } /* ---------- Code zum Weitersagen ---------- */ .big-code { font-family:var(--display); font-weight:600; font-size:clamp(30px,5cqw,46px); letter-spacing:.22em; color:var(--accent); text-shadow:0 0 30px var(--accent-glow); padding:14px 10px; background:#000; border:2px solid var(--accent); user-select:all; cursor:text; } .join-row { align-items:stretch; } #join-code { flex:1; min-width:0; padding:0 16px; height:52px; font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:.18em; text-transform:uppercase; text-align:center; color:var(--accent); background:#000; border:2px solid var(--border); } #join-code::placeholder { font-family:var(--ui); font-size:12px; letter-spacing:.14em; color:var(--dim); } #join-code:focus { outline:none; border-color:var(--accent); } .join-row .btn-tiny { height:52px; flex:none; } @container (max-height:760px) { #join-code, .join-row .btn-tiny { height:44px; } .big-code { font-size:32px; padding:10px; } } /* Gegnersuche: Ueberschrift kompakter, sonst wird die Karte zu hoch */ #matchmaking .result-card h2 { font-size:clamp(24px,3.2cqw,34px); line-height:1.1; } #matchmaking #mm-dots { margin:16px 0; } #matchmaking #mm-status { min-height:44px; } /* ---------- Rematch ---------- */ .rm-note { margin-top:12px; text-align:center; font:600 11px/1.5 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); } .btn.pulse { animation:rmPulse 1.1s ease-in-out infinite; } @keyframes rmPulse { 0%,100% { box-shadow:7px 7px 0 #000, 9px 9px 0 var(--accent-glow); } 50% { box-shadow:11px 11px 0 #000, 13px 13px 0 var(--accent-glow); } } /* ---- Werbe- und Namensfeld (CrazyGames-Vorgaben) ------------ */ .ico-play { width:19px; height:19px; margin-right:9px; vertical-align:-4px; flex:0 0 auto; } .ico-play rect { fill:none; stroke:currentColor; stroke-width:2; opacity:.85; } .ico-play .tri { fill:currentColor; } .ad-optional { margin-top:9px; text-align:center; font-size:12.5px; letter-spacing:.01em; color:var(--muted); opacity:.85; } .namefield, .namefix { min-width:190px; height:40px; padding:0 14px; box-sizing:border-box; border-radius:11px; font:600 14.5px/38px Inter, system-ui, sans-serif; letter-spacing:.01em; color:var(--ink); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); } .namefield { cursor:text; user-select:text; -webkit-user-select:text; outline:none; transition:border-color .16s, background .16s; } .namefield:focus { border-color:var(--acc); background:rgba(255,255,255,.09); } .namefix { opacity:.7; text-align:center; } /* ---- Stummschalter ------------------------------------------ */ #btn-mute { min-width:44px; padding:0 12px; font-size:17px; line-height:1; } #btn-mute.off { opacity:.5; } /* Zweistufiges Zurücksetzen statt Browser-Dialog */ .btn.armed { background:rgba(255,86,60,.16); border-color:rgba(255,86,60,.55); } /* ---- Lehrleiste: kurz, unten, aus dem Weg --------------------- */ #coach { position:fixed; left:50%; bottom:26px; transform:translate(-50%, 14px); display:none; align-items:center; gap:16px; padding:11px 13px 11px 20px; border-radius:15px; background:rgba(14,10,7,.82); border:1px solid rgba(255,255,255,.12); box-shadow:0 14px 40px rgba(0,0,0,.45); backdrop-filter:blur(9px); opacity:0; transition:opacity .3s, transform .3s; z-index:40; pointer-events:none; } #coach.show { display:flex; opacity:1; transform:translate(-50%, 0); pointer-events:auto; } #coach .co-txt { font:600 15px/1 Inter, system-ui, sans-serif; letter-spacing:.01em; color:var(--ink); white-space:nowrap; } #coach .co-skip { font:600 13px/1 Inter, system-ui, sans-serif; color:var(--muted); padding:8px 13px; border-radius:10px; cursor:pointer; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); transition:color .15s, background .15s; } #coach .co-skip:hover { color:var(--ink); background:rgba(255,255,255,.12); } @container (max-width:560px) { #coach { bottom:16px; gap:11px; padding:9px 10px 9px 15px; } #coach .co-txt { font-size:13.5px; } } /* Uebersetzungen sind laenger als das deutsche Original. Die schmale Beschriftungsspalte im Shop bekommt darum eine feste Breite und bricht sauber um, statt den Text daneben zu ueberdecken. */ .upg .un { min-width:96px; max-width:120px; overflow-wrap:anywhere; line-height:1.25; } /* ============================================================ RANDLOS Die Arena ist 2.116:1, fast jedes Fenster ist flacher oder hoeher. Statt schwarzer Balken fuellen wir den Rest mit der Halle selbst: dasselbe Bild formatfuellend, unscharf und abgedunkelt dahinter. Das Spielfeld bleibt dabei unangetastet vollstaendig sichtbar — Waende und Decke gehoeren zum Spiel und duerfen nicht angeschnitten werden. ============================================================ */ #stage::before { content:""; position:absolute; inset:-4%; /* Ueberstand, damit die Unschaerfe keine Kante zeigt */ background:url("assets/arena.jpg") center/cover no-repeat; filter:blur(26px) saturate(.7) brightness(.34); transform:scale(1.06); z-index:-2; pointer-events:none; } #stage::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(0,0,0,0) 42%, rgba(0,0,0,.55) 100%); z-index:-1; pointer-events:none; } /* Die Leinwand bekommt eine weiche Kante statt einer harten Kachel */ #c { box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 30px 90px rgba(0,0,0,.6); } /* ---- Vollbild-Knopf ------------------------------------------ Kein frei schwebender Knopf: der fand an keiner Fenstergroesse einen Platz, ohne die Anzeige oder das Laufband zu ueberdecken. Stattdessen hat er zwei feste Plaetze — in der Spielleiste neben Ton und Pause, und im Menue neben Shop und Einstellungen. Beide werden ausgeblendet, sobald das Spiel auf CrazyGames laeuft: eigene Vollbild-Knoepfe sind dort ausdruecklich verboten. */ .btn.ico { display:none; align-items:center; justify-content:center; padding:0; } .btn.ico.show { display:inline-flex; } #btn-fs.show { width:44px; } #btn-fs2.show { width:52px; flex:0 0 auto; } .btn.ico svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } @container (max-width:560px) { #btn-fs.show { width:38px; } #btn-fs2.show { width:46px; } } /* ---- Installieren-Knopf (nur Website-Fassung) ---------------- Taucht nur auf, wenn der Browser von sich aus signalisiert, dass eine Installation moeglich ist — und nie waehrend einer Partie. */ #btn-install { position:fixed; left:14px; bottom:14px; z-index:35; display:none; opacity:.8; backdrop-filter:blur(8px); background:rgba(14,10,7,.72); } body:not(.playing) #btn-install { display:inline-flex; } #btn-install:hover { opacity:1; } @container (max-width:560px) { #btn-install { left:10px; bottom:10px; } } /* ============================================================ HANDY — Ueberlauf und Last Drei Dinge, die im Querformat auf dem Telefon geklemmt haben: die Ergebniskarte war hoeher als der Schirm und nicht scrollbar, das Werbevideo passte nicht hinein, und im Hintergrund lief die Halle munter weiter und hat alles zaeh gemacht. ============================================================ */ /* Menue und Suchbildschirm ebenfalls scrollbar statt abgeschnitten */ #menu.show { display:flex; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:16px 0; } #menu.show > .menu-box { margin:auto; } /* Werbe-Overlays: passen sich der Hoehe an und lassen sich rollen */ #housead.show, #adsim.show { display:flex; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } #housead.show > *, #adsim.show > * { margin:auto; } /* Das Video darf nie hoeher werden als der Schirm hergibt */ #house-player { max-height:52cqh; width:min(100%, calc(52cqh * 16 / 9)); margin:0 auto; } @container (max-height:520px) { .result-card { padding:18px 20px; } .result-card h2 { font-size:30px; } .final-score { margin-top:12px; gap:14px; } .final-score b { font-size:34px; } .payout { margin:14px 0 6px; } .pay-row { padding:6px 0; } .result-card .actions .btn-tiny { height:42px; } #house-player { max-height:44cqh; width:min(100%, calc(44cqh * 16 / 9)); } .house-box { padding:10px; } #house-note { display:none; } } /* Weichzeichner hinter Overlays kostet auf dem Telefon spuerbar Bilder pro Sekunde — auf kleinen Schirmen bleibt er weg. */ @container (max-width:900px) { #housead, #coach, #btn-install, #btn-fs { backdrop-filter:none; } #stage::before { filter:blur(14px) saturate(.7) brightness(.34); } } /* Animierte Einblendungen der Abrechnungszeilen: auf schwachen Geraeten und bei "weniger Bewegung" abschalten. */ @media (prefers-reduced-motion:reduce) { .pay-row { animation:none; opacity:1; } .result-card { animation:none; } } /* ============================================================ PACKS, KARTEN, AUFDECKEN ============================================================ */ /* ---- Was gerade gesammelt wird ----------------------------- */ .hero-track { display:flex; align-items:center; gap:16px; padding:15px 18px; background:var(--card-hi); border:1px solid var(--accent); box-shadow:6px 6px 0 #000; } .hero-track img { width:52px; height:52px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 3px 8px rgba(0,0,0,.6)); } .ht-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; } .ht-txt b { font-family:var(--marker); font-size:17px; } .ht-txt span { font:300 11.5px/1.4 var(--ui); color:var(--muted); } .ht-bar { display:block; height:7px; background:#000; border:1px solid var(--border-soft); padding:0; } .ht-bar i { display:block; height:100%; background:var(--accent); transition:width .5s var(--ease); } .ht-n { font:700 15px/1 var(--ui); color:var(--gold); font-variant-numeric:tabular-nums; flex:0 0 auto; } /* ---- Gratis-Reihe ------------------------------------------ */ .freerow { display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:12px; } .freecard { display:flex; align-items:center; gap:13px; padding:14px 16px; text-align:left; background:var(--card); border:1px solid var(--border); color:var(--ink); cursor:pointer; transition:.16s var(--ease); font:inherit; } .freecard:hover:not(:disabled) { border-color:var(--accent); transform:translateY(-2px); box-shadow:5px 5px 0 #000; } .freecard.spent, .freecard:disabled { opacity:.42; cursor:default; } .fc-ico { font-size:26px; line-height:1; flex:0 0 auto; } .freecard .ico-play { width:24px; height:24px; margin:0; flex:0 0 auto; } .fc-t { display:flex; flex-direction:column; gap:3px; min-width:0; } .fc-t b { font-family:var(--marker); font-size:15px; } .fc-t i { font:300 11px/1.35 var(--ui); font-style:normal; color:var(--muted); } /* ---- Die Packs --------------------------------------------- */ .packs { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; } .pack { position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; align-items:center; gap:6px; padding:22px 16px 18px; text-align:center; font:inherit; color:var(--ink); background:var(--card); border:2px solid var(--pc); cursor:pointer; transition:.18s var(--ease); } .pack:hover:not(:disabled) { transform:translateY(-4px); box-shadow:8px 8px 0 #000; } .pack:disabled { opacity:.45; cursor:default; } .pk-glow { position:absolute; inset:-40% -10% auto; height:120px; z-index:-1; background:radial-gradient(ellipse at center, var(--pc), transparent 70%); opacity:.20; pointer-events:none; } .pk-n { font:700 40px/1 var(--ui); color:var(--pc); letter-spacing:-.03em; font-variant-numeric:tabular-nums; } .pk-name { font-family:var(--marker); font-size:17px; } .pk-sub { font:300 11px/1.35 var(--ui); color:var(--muted); min-height:30px; } .pk-bits { display:flex; flex-direction:column; gap:3px; margin:2px 0 4px; } .pk-bits i { font:600 9.5px/1.3 var(--ui); font-style:normal; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); } .pk-buy { display:flex; align-items:center; gap:7px; margin-top:2px; padding:8px 16px; background:var(--pc); color:#000; font-family:var(--marker); font-size:15px; } .pack.mega { grid-column:1 / -1; flex-direction:row; justify-content:center; gap:22px; padding:18px 22px; } .pack.mega .pk-sub { min-height:0; } .pack.mega .pk-bits { flex-direction:row; gap:14px; } /* ---- Kartenbalken (Booster und Figuren) -------------------- */ .cardbar { display:flex; align-items:center; gap:13px; margin:4px 0 10px; } .cb-l { font:600 10px/1.2 var(--ui); letter-spacing:.11em; text-transform:uppercase; color:var(--muted); flex:0 0 auto; max-width:190px; } .cb-track { flex:1; height:9px; background:#000; border:1px solid var(--border-soft); } .cb-track i { display:block; height:100%; background:var(--accent); transition:width .45s var(--ease); } .cb-n { font:700 13px/1 var(--ui); color:var(--gold); font-variant-numeric:tabular-nums; flex:0 0 auto; } /* Ausbaupunkte, die die Figurenstufe schon erlaubt, aber noch nicht gekauft sind */ .pips i.free { background:transparent; border-color:var(--accent); opacity:.55; } /* ---- Aufdecken --------------------------------------------- */ #reveal { position:fixed; inset:0; z-index:70; display:none; background:rgba(4,3,2,.94); padding:20px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } #reveal.show { display:flex; } .rv-box { margin:auto; width:min(760px,96cqw); background:var(--bg-soft); border:2px solid var(--accent); box-shadow:12px 12px 0 #000; padding:20px; } .rv-head { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; } .rv-head b { font-family:var(--display); font-weight:600; font-size:26px; text-transform:uppercase; } .rv-head span { font:600 10px/1 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); } /* Die Spaltenzahl rechnet rvGitterPassen() aus, damit auch ein Mega-Pack mit 25 Karten auf einen Handyschirm passt. Der Vorgabewert greift nur, bis das Skript gemessen hat. */ .rv-grid { display:grid; gap:8px; grid-template-columns:repeat(var(--spalten, 5), var(--kartenbreite, 1fr)); justify-content:center; align-content:center; } /* ============================================================ DIE KARTE Aufbau wie bei jeder Sammelkarte: Kopfband (Name + Stein), gerahmtes Bildfenster, Typenzeile, Textkasten, Fussband. Nur das Bildfenster waechst und schrumpft — alles andere behaelt seine Hoehe, darum kann nichts abgeschnitten werden. ============================================================ */ /* Die Karte ist ihr EIGENER Container: alle cq-Masse hier drin messen die Karte, nicht die Buehne. Nur so sieht dieselbe Karte gross auf der Buehne UND winzig im 25er-Gitter richtig aus. */ .rc { position:relative; aspect-ratio:5/7; padding:0; border:0; background:none; cursor:pointer; perspective:900px; font:inherit; container-type:inline-size; } .rc-back, .rc-face { position:absolute; inset:0; backface-visibility:hidden; transition:transform .42s var(--ease); border:2px solid var(--rc); } /* Rueckseite: Rautenmuster und ein Praegezeichen statt eines Emojis */ .rc-back { display:grid; place-items:center; background: repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0 6px, transparent 6px 12px), repeating-linear-gradient(-45deg, rgba(255,255,255,.028) 0 6px, transparent 6px 12px), linear-gradient(150deg,#2a1d14,#120d09); box-shadow:inset 0 0 0 3px rgba(0,0,0,.55), inset 0 0 0 4px color-mix(in srgb, var(--rc) 28%, transparent); } .rb-mark { font-family:var(--display); font-weight:600; font-size:clamp(9px, 20cqw, 26px); letter-spacing:.1em; color:color-mix(in srgb, var(--rc) 70%, #000); opacity:.9; } .rb-mark em { font-style:normal; color:var(--accent); } .rc-face { display:flex; flex-direction:column; overflow:hidden; transform:rotateY(180deg); background:linear-gradient(168deg, color-mix(in srgb, var(--rc) 12%, var(--card-hi)), var(--card-hi) 55%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 0 30px color-mix(in srgb, var(--rc) 20%, transparent); } .rc.up .rc-back { transform:rotateY(-180deg); } .rc.up .rc-face { transform:rotateY(0deg); } /* Kopfband: Name links, Seltenheits-Stein rechts */ .rc-kopf { flex:0 0 auto; display:flex; align-items:center; gap:3cqw; padding:2.5cqw 3cqw 2cqw; background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.18)); border-bottom:1px solid color-mix(in srgb, var(--rc) 45%, transparent); } .rc-kopf b { flex:1 1 auto; min-width:0; font:700 clamp(6px, 11cqw, 15px)/1.1 var(--ui); text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:.02em; } .rc-stein { flex:0 0 auto; width:min(9px, 7cqw); height:min(9px, 7cqw); transform:rotate(45deg); background:var(--rc); box-shadow:0 0 7px var(--rc); } /* Bildfenster — das einzige, was mitwaechst */ .rc-art { flex:1 1 auto; min-height:0; display:grid; place-items:center; margin:3cqw; overflow:hidden; position:relative; background:radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 68%), rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--rc) 35%, transparent); } .rc-art img { max-width:92%; max-height:96%; object-fit:contain; } .rc-ico { font-size:min(64px, 38cqw); line-height:1; } /* Typenzeile und Textkasten */ .rc-typ { flex:0 0 auto; padding:1.5cqw 2cqw; font:700 clamp(5px, 6.4cqw, 10px)/1.3 var(--ui); letter-spacing:.1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:uppercase; color:var(--rc); text-align:center; border-top:1px solid rgba(255,255,255,.07); } .rc-desc { flex:0 0 auto; overflow:hidden; padding:0 5cqw 2cqw; margin:0; text-align:center; font:300 clamp(7px, 5.6cqw, 12px)/1.35 var(--ui); color:var(--muted); display:none; } .rc-big .rc-desc { display:block; } /* Fussband */ .rc-fuss { flex:0 0 auto; padding:2cqw 3cqw 2.5cqw; text-align:center; font:700 clamp(6px, 7.5cqw, 12px)/1 var(--ui); letter-spacing:.08em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:uppercase; color:var(--rc); background:linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,.15)); border-top:1px solid color-mix(in srgb, var(--rc) 45%, transparent); } .rv-foot { display:flex; align-items:center; gap:12px; margin-top:18px; } #rv-dust { flex:1; font:600 12px/1.3 var(--ui); color:var(--gold); } @container (max-height:520px) { .rv-box { padding:12px; } .rv-head b { font-size:20px; } .rv-grid { gap:5px; } .pack { padding:14px 12px 12px; } .pk-n { font-size:30px; } .pk-sub { min-height:0; } } .bcard.locked { opacity:.5; } .bcard.locked .bico { filter:grayscale(1); } /* ---- Name im Hauptmenü -------------------------------------- Er stand vorher nur tief im Shop. Im Duell muss sofort klar sein, wer wer ist. */ .namerow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; padding:11px 14px; background:var(--card); border:1px solid var(--border-soft); } .nr-l { font:600 9.5px/1 var(--ui); letter-spacing:.18em; text-transform:uppercase; color:var(--dim); flex:0 0 auto; } .nr-in, .nr-fix { min-width:150px; max-width:220px; height:36px; padding:0 12px; box-sizing:border-box; border-radius:9px; font:600 14px/34px var(--marker), Inter, sans-serif; color:var(--ink); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); } .nr-in { cursor:text; user-select:text; -webkit-user-select:text; outline:none; transition:border-color .16s, background .16s; } .nr-in:focus { border-color:var(--accent); background:rgba(255,255,255,.09); } .nr-fix { opacity:.75; } .nr-note { font:300 10.5px/1.3 var(--ui); color:var(--muted); flex:1; min-width:120px; } @container (max-height:600px) { .namerow { margin-bottom:10px; padding:8px 12px; } .nr-note { display:none; } } /* Ein frisch ausgegebener Code muss auffallen — der alte ist tot. */ .wcode.frisch { animation:codePuls 1s var(--ease) 3; } @keyframes codePuls { 0%,100% { box-shadow:0 0 0 0 rgba(255,180,61,0); } 50% { box-shadow:0 0 0 4px rgba(255,180,61,.45); } } /* ============================================================ FINGER STATT MAUS Der richtige Signalgeber ist nicht die Fensterbreite, sondern womit gezielt wird: pointer:coarse heisst Finger. Ein Daumen trifft eine 26 px hohe Schaltfläche nicht zuverlässig — 40 px sind das anerkannte Mindestmass. Gegengerechnet wird der Platz an anderer Stelle: auf flachen Schirmen schrumpfen Abstände und Titel, nicht die Bedienung. ============================================================ */ @media (pointer: coarse) { .seg button, #shop-tabs button { min-height:40px; padding:0 14px; } .btn-tiny { min-height:44px; } .freecard { min-height:56px; } .lg { min-height:56px; } .bcard { min-height:96px; } .namerow .nr-in, .wfield { height:44px; line-height:42px; } .rc { min-height:104px; } /* Zwischen kleinen Knöpfen etwas mehr Luft, damit man nicht versehentlich den Nachbarn erwischt. */ .actions { gap:10px; } .wbtns { gap:10px; } } /* Auf flachen Schirmen den Platz bei Abständen und Schrift holen, nicht bei den Schaltflächen. */ @media (pointer: coarse) { @container (max-height:460px) { .title-block { margin-bottom:14px; } .title-main { font-size:clamp(30px,7cqw,44px); } .title-block .kicker, .tagline { display:none; } .namerow { margin-bottom:10px; padding:7px 12px; } .nr-note { display:none; } .menu-row { margin-top:8px; } .shop-detail, .pane-scroll { padding:16px 18px 50px; } .set-body { padding:16px 18px; } .label { margin-bottom:8px !important; } } } /* ============================================================ ERGEBNISKARTE IM QUERFORMAT Gemessen: auf 844x390 war die Karte 553 px hoch und musste gerollt werden. Erreichbar war alles, platzsparend nicht. Ein Handy im Querformat hat aber reichlich BREITE. Die Karte wird deshalb zweispaltig: links das Ergebnis, rechts die Abrechnung und die Knoepfe. Damit passt sie ohne Rollen. ============================================================ */ /* Bis 620 px Hoehe: das deckt Handys im Querformat UND flache Tablets ab. Ein Rechner ist praktisch immer hoeher und behaelt die einspaltige Karte. */ @container (max-height:620px) and (min-width:620px) { .result-card { width:min(760px, 96cqw); display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); column-gap:24px; align-content:start; padding:16px 20px; } .result-card h2 { grid-column:1; font-size:26px; } .result-card .swish { grid-column:1; margin-top:6px; font-size:14px; } .final-score { grid-column:1; margin-top:10px; gap:12px; } .final-score b { font-size:30px; } .rankline { grid-column:1; margin-top:12px; } .cond-row { grid-column:1; margin-top:10px !important; } .payout { grid-column:2; grid-row:1 / span 5; margin:0; align-self:start; } .pay-row { padding:5px 0; } .pay-row .pl { font-size:10px; } .pay-row.tot .pv { font-size:19px; } #btn-double { grid-column:2; height:46px !important; margin-top:12px !important; } .ad-optional { grid-column:2; margin-top:5px; font-size:11px; } .result-card .actions{ grid-column:2; margin-top:10px; } .result-card .actions .btn-tiny { height:44px; } .rm-note { grid-column:1 / -1; } } /* Das Tutorial erklärt sich am Boden. Vom Kasten bleibt nur das Überspringen — dezent, aber vorhanden: ein Tutorial muss überspringbar sein. */ #coach { background:none; box-shadow:none; border:none; padding:0; } #coach .co-skip { opacity:.6; } #coach .co-skip:hover { opacity:1; } /* Ton vom Portal abgeschaltet: der eigene Knopf zeigt, dass er hier nichts entscheidet. */ #btn-mute.gesperrt { opacity:.45; cursor:not-allowed; } /* ============================================================ WOCHENRANGLISTE Gleiches Panel wie der Shop: Liste in der Mitte, Reiter unten beim Daumen. Die eigene Zeile leuchtet, damit man sich ohne Suchen findet. ============================================================ */ .bd-body { padding:14px 20px 6px; min-height:200px; } .bd-row { display:flex; align-items:center; gap:12px; padding:9px 10px; border-bottom:1px solid var(--border-soft); } .bd-row.me { background:var(--accent-faint); border:1px solid var(--border); border-bottom:1px solid var(--border); } .bd-r { flex:0 0 34px; text-align:right; font:700 14px/1 var(--ui); color:var(--dim); font-variant-numeric:tabular-nums; } .bd-row:nth-child(1) .bd-r, .bd-row:nth-child(2) .bd-r, .bd-row:nth-child(3) .bd-r { color:var(--gold); } .bd-n { flex:1; font:600 14px/1.3 var(--ui); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bd-n i { font:600 9px/1 var(--ui); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-style:normal; margin-left:6px; } .bd-g { font:300 11px/1 var(--ui); color:var(--dim); white-space:nowrap; } .bd-p { font:700 16px/1 var(--ui); color:var(--gold); font-variant-numeric:tabular-nums; min-width:52px; text-align:right; } .bd-dots { text-align:center; color:var(--dim); font:700 13px/1 var(--ui); letter-spacing:.4em; padding:7px 0 2px; } .bd-leer { padding:14px 4px; font:300 12px/1.7 var(--ui); color:var(--muted); } .bd-ends { font:600 10px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .bd-foot { flex-wrap:wrap; gap:8px; } #board-leagues button { padding:0 12px; } @container (max-width:700px) { .panel-foot.bd-foot .seg button { padding:0 10px; font-size:12px; min-height:40px; } .bd-g { display:none; } } /* ============================================================ TURNIER Baum als Spalten (VF / HF / F), Gruppentabellen daneben. Die eigene Zeile leuchtet wie in der Rangliste. ============================================================ */ .cup-lead { font:300 13px/1.7 var(--ui); color:var(--muted); margin:4px 0 14px; } .cup-wahl { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; } .cup-card { text-align:left; padding:18px; background:var(--card); border:1px solid var(--border); cursor:pointer; transition:background .15s; color:var(--text); } .cup-card:hover { background:var(--card-hi); } .cup-card b { display:block; font-family:var(--display); font-size:16px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); margin-bottom:7px; } .cup-card span { font:300 12px/1.6 var(--ui); color:var(--muted); } .cup-kopf { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; } .cup-chip { font:600 10px/1 var(--ui); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border:1px solid var(--border-soft); padding:6px 10px; } .cup-chip.gold { color:var(--gold); border-color:var(--gold); } .cup-chip.aus { color:var(--bad); border-color:var(--bad); } .cup-st { font:600 10px/1 var(--ui); letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin:0 0 8px; } .cup-baum { display:flex; gap:14px; align-items:flex-start; margin:6px 0 10px; } .cup-spalte { flex:1; display:flex; flex-direction:column; gap:8px; justify-content:space-around; } .cp { display:flex; align-items:center; gap:8px; padding:7px 9px; background:var(--card); border:1px solid var(--border-soft); } .cp-n { flex:1; font:400 12px/1.3 var(--ui); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cp-n.r { text-align:right; } .cp-n.win { color:var(--text); font-weight:600; } .cp-n.me { color:var(--accent); } .cp-s { font:700 12px/1 var(--ui); color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums; } .cp-s i { font:600 8px/1 var(--ui); color:var(--gold); font-style:normal; margin-left:4px; letter-spacing:.08em; } .cup-gruppen { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:6px 0 14px; } .cup-gr { background:var(--card); border:1px solid var(--border-soft); padding:12px 14px; } .cg-row { display:flex; align-items:center; gap:10px; padding:5px 4px; border-bottom:1px solid var(--border-soft); font:400 12px/1.3 var(--ui); color:var(--muted); } .cg-row.head { font:600 9px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); border-bottom:1px solid var(--border); } .cg-row span { flex:0 0 34px; text-align:right; font-variant-numeric:tabular-nums; } .cg-row .cg-n { flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cg-row.me .cg-n { color:var(--accent); font-weight:600; } .cg-row.q { border-left:2px solid var(--ok); padding-left:6px; } .cg-row b { color:var(--text); } @container (max-width:700px) { .cup-baum { flex-direction:column; } .cup-spalte { width:100%; } } /* Aktive Boosterwirkungen im HUD — türkis wie der Zünd-Blitz */ .hud-chip.fx { color:#5ce1ff; border-color:rgba(92,225,255,.4); } /* ============================================================ STARTSEITEN-ÜBERSICHT — Tagesaufgaben + Wochenrang Kompakte Zeilen mit Fortschrittsbalken; fertige Aufgaben zeigen ihren Abhol-Knopf direkt in der Zeile. ============================================================ */ .heute { margin:14px 0 4px; background:var(--card); border:1px solid var(--border); padding:10px 12px 6px; } .heute:empty { display:none; } .heute-kopf { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; } .heute-kopf > span:first-child { font:600 10px/1 var(--ui); letter-spacing:.22em; text-transform:uppercase; color:var(--dim); } .hz-bonus { font:600 10px/1.4 var(--ui); letter-spacing:.08em; color:var(--muted); text-transform:uppercase; } .hz-bonus.offen { background:var(--accent); color:#000; border:0; padding:7px 12px; cursor:pointer; font:700 11px/1 var(--ui); letter-spacing:.08em; animation:bonusPuls 1.6s infinite; } @keyframes bonusPuls { 50% { box-shadow:0 0 18px var(--accent-glow); } } .hz-bonus.done { color:var(--ok); } .hz { display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--border-soft); } .hz-i { flex:none; font-size:15px; width:22px; text-align:center; } .hz-t { flex:1; font:400 12.5px/1.3 var(--ui); color:var(--text); text-align:left; } .hz.done .hz-t { color:var(--dim); text-decoration:line-through; } .hz-bar { flex:0 0 74px; height:5px; background:rgba(255,255,255,.08); overflow:hidden; } .hz-bar i { display:block; height:100%; background:var(--accent); transition:width .3s var(--ease); } .hz.done .hz-bar i { background:var(--ok); } .hz-n { font:700 11px/1 var(--ui); color:var(--muted); min-width:34px; text-align:right; font-variant-numeric:tabular-nums; } .hz-ok { color:var(--ok); font-weight:700; min-width:34px; text-align:right; } .btn-mini { min-width:52px; height:30px; padding:0 10px; font-size:11px; } .hz.rang { cursor:pointer; background:none; border:0; border-top:1px solid var(--border-soft); width:100%; font:inherit; color:inherit; } .hz.rang .hz-t { color:var(--gold); font-weight:600; } .hz.rang:hover .hz-t { color:#fff; } @container (max-height:640px) { .heute { margin:8px 0 2px; padding:7px 10px 3px; } .hz { padding:4px 0; } .hz-bar { flex-basis:52px; } } /* ============================================================ PACK-ÖFFNEN — der grosse Auftritt Spotlight statt grauem Vorhang, Karten fliegen gestaffelt ein, der Flip bekommt einen Pop und einen Lichtstreif; Seltenes leuchtet in seiner Farbe, Figuren bekommen den Stern. ============================================================ */ #reveal.show { animation:rvFade .3s var(--ease); } @keyframes rvFade { from { opacity:0; } } #reveal { background: radial-gradient(58% 50% at 50% 42%, rgba(255,140,26,.13), transparent 70%), radial-gradient(120% 100% at 50% 50%, rgba(4,3,2,.9), rgba(2,1,1,.97)); } .rv-box { border:2px solid var(--accent); box-shadow:12px 12px 0 #000, 0 0 90px rgba(255,140,26,.18); animation:rvBox .45s var(--ease); } @keyframes rvBox { from { opacity:0; transform:translateY(30px) scale(.94); } } .rc { animation:rcDeal .5s var(--ease) backwards; animation-delay:calc(var(--i) * 80ms); } @keyframes rcDeal { from { opacity:0; transform:translateY(46px) rotate(4deg) scale(.7); } } /* Flip mit Pop: die Karte springt kurz auf Übergrösse */ .rc.up { animation:rcPop .38s var(--ease); z-index:2; } @keyframes rcPop { 45% { transform:scale(1.14); } } /* Lichtstreif, der beim Aufdecken über die Vorderseite wischt */ .rc-face { overflow:hidden; } .rc-face::before { content:""; position:absolute; inset:-40% -60%; background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.34) 50%, transparent 58%); transform:translateX(-120%); pointer-events:none; } .rc.up .rc-face::before { animation:rcShine .7s .18s var(--ease) forwards; } @keyframes rcShine { to { transform:translateX(120%); } } /* Seltenes leuchtet — je nach Stufe */ .rc.up.rar-rare .rc-face { box-shadow:0 0 22px color-mix(in srgb, var(--rc) 55%, transparent), inset 0 0 26px color-mix(in srgb, var(--rc) 26%, transparent); } .rc.up.rar-hero .rc-face { box-shadow:0 0 30px color-mix(in srgb, var(--rc) 70%, transparent), inset 0 0 30px color-mix(in srgb, var(--rc) 32%, transparent); } .rc.up.rar-hero { animation:rcPop .38s var(--ease), rcGold 1.8s .3s infinite; } @keyframes rcGold { 50% { filter:brightness(1.16); } } /* Verdeckte Karten verraten mit dem Rand, dass etwas Gutes wartet */ .rc.rar-hero .rc-back { box-shadow:0 0 16px color-mix(in srgb, var(--rc) 35%, transparent), inset 0 0 0 1px rgba(255,255,255,.05); } /* ============================================================ PACK-ÖFFNEN, ZWEITER AKT — die Bühne Eine Karte gross und mittig, Tippen irgendwo dreht sie um und holt die nächste. Erst die Zusammenfassung zeigt das Gitter. ============================================================ */ /* Die Buehne nimmt die volle Hoehe, und die KARTE nimmt, was davon uebrig bleibt. Vorher war sie auf 36cqh und hart auf 270 px gedeckelt — auf einem grossen Schirm stand sie klein in der Mitte herum, obwohl ringsum nichts war. Jetzt bestimmt die Hoehe die Groesse, die Breite folgt aus dem Seitenverhaeltnis. */ .rv-stage { margin:auto; width:min(860px,96cqw); height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(6px, 1.6cqh, 16px); padding:10px; } .rv-stage .rv-head { margin-bottom:0; flex:0 0 auto; } .rv-big { perspective:1000px; flex:1 1 auto; min-height:0; width:100%; display:grid; place-items:center; } .rv-big .rc { height:100%; width:auto; max-width:min(94cqw, 480px); cursor:pointer; animation:rvBigRein .4s var(--ease) backwards; animation-delay:0s; } @keyframes rvBigRein { from { opacity:0; transform:translateY(70px) rotate(5deg) scale(.6); } } .rv-tip { font:600 11px/1 var(--ui); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); animation:tipPuls 1.6s infinite; } @keyframes tipPuls { 50% { opacity:.45; } } .rv-stage .rv-foot { align-self:stretch; margin-top:6px; } /* Phasen: erst Bühne (Gitter versteckt), dann Übersicht. Der Ende-Hinweis ("irgendwo drücken") erscheint erst mit .fertig. */ #reveal .rv-grid, #reveal .rv-ende { display:none; } #reveal.fertig .rv-grid { display:grid; width:100%; } #reveal.fertig .rv-ende { display:block; } #reveal.fertig .rv-big, #reveal.fertig #rv-tip { display:none; } @container (max-height:520px) { .rv-big .rc { max-width:min(94cqw, 340px); } } /* ============================================================ SHOP-SCHAUFENSTER Grosse Hochformat-Kacheln, Reihe um Reihe seitlich scrollbar. Am PC ist Platz — dort brechen die Reihen um statt zu scrollen. ============================================================ */ .front-sec { margin-bottom:26px; } .front-sec .label { margin-bottom:12px; } .front-strip { display:flex; gap:12px; overflow-x:auto; padding:2px 2px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .front-strip > * { flex:0 0 auto; } .front-strip .freecard { width:190px; } .front-packs { display:flex; gap:12px; } .front-packs .pack { width:190px; } .ft { position:relative; width:132px; aspect-ratio:3/4.1; padding:12px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:var(--card); border:1px solid var(--border); cursor:pointer; color:var(--text); font:inherit; transition:background .15s, transform .15s; } .ft:hover { background:var(--card-hi); transform:translateY(-2px); } .ft img { width:64%; object-fit:contain; } .ft-ico { font-size:40px; line-height:1; } .ft b { font:600 12.5px/1.25 var(--ui); text-align:center; } .ft i { font:400 10px/1.4 var(--ui); font-style:normal; color:var(--muted); text-align:center; letter-spacing:.04em; } .ft .equipped-tag { position:absolute; top:6px; left:6px; } @container (min-width:1100px) { .front-strip, .front-packs { flex-wrap:wrap; overflow:visible; } } @container (max-width:700px) { .ft { width:118px; } .front-strip .freecard, .front-packs .pack { width:170px; } } /* Der Ball im Menü ist jetzt ein Knopf */ .loadout { cursor:pointer; transition:background .15s; } .loadout:hover { background:var(--card-hi); } /* ============================================================ STARTSEITE, DRITTER AKT — Reiter oben, Play-Reihe, Liga-Chips ============================================================ */ .menu-tabs { width:100%; margin-bottom:14px; } .menu-tabs button { flex:1; min-height:44px; font-family:var(--marker); font-size:14px; letter-spacing:.04em; } .menu-tabs button.ico { flex:0 0 52px; } .menu-tabs button.ico svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; } .play-row { display:flex; gap:12px; align-items:stretch; } .play-row .btn-play { flex:1; } .invite-side { flex:0 0 128px; flex-direction:column; gap:8px; font-size:14px; line-height:1.2; padding:10px; white-space:normal; text-align:center; } .invite-side .iv-ico { font-size:26px; line-height:1; } @container (max-width:560px) { .invite-side { flex-basis:104px; font-size:12px; } } /* Wochenrang-Chip an jeder Liga — der direkte Weg zur Liste */ .lg-rang { display:block; font:600 10px/1 var(--ui); letter-spacing:.06em; color:var(--gold); padding:3px 0 2px; } .lg-rang:hover { text-shadow:0 0 8px var(--gold); } /* Figuren-Kacheln im Schaufenster: die Gesichter dürfen gross sein */ .ft-figur img { width:78%; max-height:58%; object-fit:contain; } /* ============================================================ SHOP, VIERTER AKT — Bälle als Figurenreihe, Packs in Reihe Landung direkt bei den Bällen: alle nebeneinander, darunter die Werte. Packs stehen genauso in einer Reihe. ============================================================ */ #pane-balls { flex-direction:column; } .shop-list { width:100%; flex:none; flex-direction:row; align-items:stretch; overflow-x:auto; overflow-y:hidden; border-right:0; border-bottom:1px solid var(--border); padding:14px 18px; gap:12px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .shop-list .ft { width:128px; flex:0 0 auto; } .shop-list .ft.sel { border-color:var(--accent); background:var(--card-hi); box-shadow:5px 5px 0 #000; } .shop-list .ft.gesperrt img { filter:grayscale(.75) brightness(.65); } .shop-list .ft.gesperrt i { color:var(--gold); } .packs { display:flex; gap:12px; overflow-x:auto; padding:2px 2px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .packs .pack { flex:0 0 auto; width:200px; } @container (min-width:1100px) { .packs { flex-wrap:wrap; overflow:visible; } } @container (max-height:560px) { .shop-list .ft { width:106px; } } /* ============================================================ STARTSEITE KOMPAKT Vorbild LoL-Client: alles auf EINEM Bildschirm, ohne Scrollen. Zwei Stufen: unter 760px Höhe rückt alles zusammen, unter 560px (Handy quer) fliegt alles Dekorative raus. ============================================================ */ .menu-coins { display:flex; align-items:center; gap:7px; padding:0 14px; margin-left:auto; border-left:1px solid var(--border); } .menu-coins b { font:700 14px/1 var(--ui); color:var(--gold); font-variant-numeric:tabular-nums; } .lo-pfeil { font:700 18px/1 var(--ui); color:var(--dim); padding:0 4px; } .loadout:hover .lo-pfeil { color:var(--accent); } @container (max-height:760px) { .title-block { margin-bottom:8px; } .tagline { display:none; } .heute { margin:8px 0 2px; padding:6px 10px 2px; } .hz { padding:3px 0; } .hz-t { font-size:11.5px; } .hz-bar { flex-basis:52px; } .menu-tabs { margin-bottom:8px; } .menu-tabs button { min-height:38px; font-size:13px; } .play-row .btn-play { min-height:56px; } } @container (max-height:560px) { .kicker, .tagline { display:none; } .title-main { font-size:24px; } .title-block { margin-bottom:4px; } /* Name ändern ist ein Einstellungs-Fall, kein Startseiten-Fall */ .namerow { display:none; } .join-row { display:none; } .menu-tabs { margin-bottom:6px; } .menu-tabs button { min-height:32px; font-size:12px; } .menu-coins b { font-size:12px; } .loadout { padding:4px 8px; } .loadout .thumb img { width:30px; height:30px; } .heute { margin:5px 0 2px; padding:4px 8px 1px; } .heute-kopf { margin-bottom:2px; } .hz { padding:2px 0; gap:7px; } .hz-i { font-size:12px; width:16px; } .hz-t { font-size:10.5px; } .hz-bar { flex-basis:40px; height:4px; } .hz-n, .hz-ok { min-width:26px; font-size:10px; } .btn-mini { height:24px; min-width:42px; font-size:10px; } .hz-bonus { font-size:8.5px; } .hz-bonus.offen { padding:4px 8px; font-size:9.5px; } .lg { padding:5px 3px; } .lg-rang { font-size:12px; padding:1px 0; } .lg-req { display:none; } /* Detail steht im title-Tooltip */ .play-row { gap:8px; } .play-row .btn-play { min-height:46px; } .invite-side { flex-basis:96px; font-size:11px; padding:6px; gap:4px; } .invite-side .iv-ico { font-size:18px; } .menu-actions { margin-top:6px; } } /* ============================================================ STARTSEITE — DICHT ALS GRUNDZUSTAND Nicht erst auf kleinen Schirmen: die Startseite ist ein Kommandostand, kein Poster. Der Titel wächst mit der Höhe (clamp), alles andere rückt grundsätzlich zusammen. ============================================================ */ .menu-box { padding:14px 18px; } .menu-tabs { margin-bottom:10px; } .menu-tabs button { min-height:38px; font-size:13px; } .title-block { margin-bottom:6px; } .title-main { font-size:clamp(24px, 6cqh, 40px); line-height:1.05; } .kicker { font-size:9px; letter-spacing:.3em; } .tagline { font-size:12px; margin-top:2px; } @container (max-height:820px) { .tagline { display:none; } } .namerow { padding:4px 0; } .loadout { padding:7px 10px; margin:6px 0; } .loadout .thumb img { width:34px; height:34px; } .heute { margin:6px 0 2px; padding:6px 10px 2px; } .hz { padding:3px 0; } .leagues { gap:6px; margin:8px 0 0; } .lg { padding:6px 4px; } .menu-actions { margin-top:6px; } .play-row .btn-play { min-height:56px; } .menu-row.join-row { margin-top:6px; } .join-row input { height:36px; } /* ============================================================ ONLINE-ZEILE — Anfragen leuchten, die Liste klappt auf ============================================================ */ .hz.anfrage { background:var(--accent-faint); border:1px solid var(--border); padding:6px 8px; animation:bonusPuls 1.6s infinite; } .hz.anfrage .hz-t { color:var(--accent); font-weight:600; } .hz.online-z { padding-left:18px; } .hz.online-z .hz-t { color:var(--muted); } /* ============================================================ VOLLBILD-PANELS (Head-Ball-Prinzip) Shop und Turnier füllen den ganzen Schirm: eine Szene, kein Fensterchen. Die Rangliste ist KEINES mehr davon — sie ist jetzt ein Popup (siehe unten). ============================================================ */ #shop .panel, #cup .panel { width:100cqw; height:100cqh; max-height:100cqh; border-width:0 0 0 0; box-shadow:none; } #shop .panel-wrap, #cup .panel-wrap { padding:0; } #shop .panel-head, #cup .panel-head { padding:12px 22px; } #shop .panel-head h2, #cup .panel-head h2 { font-size:22px; } /* Kacheln skalieren mit dem Schirm: klein genug für eine Ansicht, gross genug zum Lesen */ .shop-list { padding:10px 18px; } .shop-list .ft { width:clamp(96px, 13cqh, 150px); } .ft b { font-size:clamp(10px, 1.6cqh, 13px); } .ft i { font-size:clamp(8.5px, 1.3cqh, 10px); } .packs .pack { width:clamp(160px, 24cqh, 230px); } .freecard { width:clamp(150px, 22cqh, 200px); } .shop-detail, .pane-scroll { padding:14px 22px 40px; } .upg { padding:8px 0; } @container (max-height:560px) { #shop .panel-head, #cup .panel-head { padding:8px 14px; } #shop .panel-head h2, #cup .panel-head h2 { font-size:16px; } .panel-foot { padding:4px 8px; } .panel-foot .seg button { min-height:36px; padding:0 12px; font-size:12px; } } /* ============================================================ TAGESBONUS — die 7-Tage-Leiter ============================================================ */ #daily { position:fixed; inset:0; z-index:75; display:none; place-items:center; background:radial-gradient(60% 50% at 50% 40%, rgba(255,140,26,.14), transparent 70%), rgba(4,3,2,.93); padding:16px; } #daily.show { display:grid; animation:rvFade .3s var(--ease); } .dy-box { width:min(560px,94cqw); background:var(--bg-soft); border:2px solid var(--accent); box-shadow:12px 12px 0 #000, 0 0 80px rgba(255,140,26,.16); padding:22px; display:flex; flex-direction:column; align-items:center; gap:12px; animation:rvBox .4s var(--ease); } .dy-titel { font-family:var(--display); font-weight:600; font-size:22px; text-transform:uppercase; letter-spacing:.05em; } .dy-sub { font:300 12px/1.5 var(--ui); color:var(--muted); } .dy-leiter { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; width:100%; } .dy-t { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 2px; background:var(--card); border:1px solid var(--border-soft); } .dy-t b { font:600 8.5px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); } .dy-c { display:flex; align-items:center; gap:4px; font:700 12px/1 var(--ui); color:var(--gold); font-variant-numeric:tabular-nums; } .dy-c .coin { width:11px; height:11px; } .dy-t.done { opacity:.45; } .dy-t.done i { position:absolute; inset:0; display:grid; place-items:center; color:var(--ok); font-size:17px; font-style:normal; } .dy-t.jetzt { border-color:var(--accent); background:var(--accent-faint); animation:bonusPuls 1.6s infinite; } .dy-t.jetzt b { color:var(--accent); } #daily .btn { min-width:220px; height:52px; } @container (max-height:520px) { .dy-box { padding:14px; gap:8px; } .dy-titel { font-size:17px; } #daily .btn { height:44px; } } /* Nächstes Ziel im Ergebnisfenster */ .rankline.ziel { border-color:var(--accent); background:var(--accent-faint); } .rankline.ziel .rl-l { color:var(--accent); letter-spacing:.08em; } /* ============================================================ DIE STARTSEITEN-BÜHNE Drei Spalten: Schnellzugriffe · Figur · Übersicht. Die Figur ist der Star, die Hinweispunkte sagen, wo etwas wartet. ============================================================ */ .menu-grid { display:grid; grid-template-columns:76px 1fr minmax(220px, 32%); gap:12px; align-items:start; } .m-links { display:flex; flex-direction:column; gap:8px; padding-top:6px; } .mt { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; padding:10px 4px 8px; font-size:22px; line-height:1; background:var(--card); border:1px solid var(--border); cursor:pointer; color:var(--text); transition:background .15s, transform .15s; } .mt:hover { background:var(--card-hi); transform:translateY(-2px); } .mt span { font:600 8.5px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .dot-neu { position:absolute; top:5px; right:6px; width:9px; height:9px; border-radius:50%; background:var(--bad); box-shadow:0 0 8px var(--bad); animation:bonusPuls 1.4s infinite; } .m-mitte { display:flex; flex-direction:column; align-items:center; } .m-mitte .title-block { text-align:center; margin-bottom:2px; } .figur { display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:0; cursor:pointer; color:var(--text); font:inherit; padding:4px 10px; } .fg-char { height:clamp(88px, 24cqh, 175px); object-fit:contain; filter:drop-shadow(0 10px 14px rgba(0,0,0,.75)); transition:transform .2s var(--ease); } .figur:hover .fg-char { transform:scale(1.05) rotate(-2deg); } .fg-name { background:#0a0806; border:1px solid var(--border); padding:5px 16px; font:600 11px/1 var(--ui); letter-spacing:.16em; text-transform:uppercase; box-shadow:4px 4px 0 #000; } .fg-ball { font:600 9.5px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .m-mitte .leagues { width:100%; } .m-rechts { display:flex; flex-direction:column; gap:6px; } .m-rechts .heute { margin:0; } .m-rechts .namerow { padding:2px 0; } @container (max-width:720px) { .menu-grid { grid-template-columns:60px 1fr minmax(180px, 38%); gap:8px; } .mt { font-size:17px; padding:7px 2px 6px; } .mt span { font-size:7px; } .fg-char { height:clamp(64px, 20cqh, 110px); } } /* ---- Bonus-Fenster: Drama ---- */ .dy-t { animation:rcDeal .4s var(--ease) backwards; animation-delay:calc(var(--i) * 55ms); } .dy-wie { font:300 11px/1.6 var(--ui); color:var(--muted); text-align:center; max-width:440px; } .dy-riss { font:600 12px/1.5 var(--ui); color:var(--bad); text-align:center; animation:rissWackeln .5s var(--ease); } .dy-box.riss { border-color:var(--bad); box-shadow:12px 12px 0 #000, 0 0 60px rgba(224,72,61,.25); } @keyframes rissWackeln { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-7px); } 40% { transform:translateX(6px); } 60% { transform:translateX(-4px); } 80% { transform:translateX(2px); } } .dy-schon { font:600 11px/1.5 var(--ui); color:var(--ok); letter-spacing:.06em; } .dy-muenze { position:absolute; bottom:38%; z-index:2; pointer-events:none; animation:muenzFlug 1.1s var(--ease) forwards; } @keyframes muenzFlug { 0% { transform:translateY(0) scale(.6) rotate(0); opacity:0; } 15% { opacity:1; } 100% { transform:translateY(-46vh) scale(1.15) rotate(340deg); opacity:0; } } /* ============================================================ GAME-SCREEN-POLITUR — Licht, Tiefe, Glanz Die Startseite soll aussehen wie ein Spiel, nicht wie eine Verwaltung: warmes Bühnenlicht statt grauem Vorhang, ein Spot auf der Figur, Glanz auf dem Play-Knopf, Panels mit Tiefe. Alles CSS, keine Assets. ============================================================ */ body.menu-open #scrim { background: radial-gradient(58% 52% at 50% 36%, rgba(255,140,26,.12), transparent 65%), radial-gradient(120% 90% at 50% 110%, rgba(224,103,0,.10), transparent 60%), linear-gradient(180deg, rgba(6,4,2,.84), rgba(10,7,4,.93)); } /* Spot auf der Figur */ .figur { position:relative; } .figur::before { content:""; position:absolute; top:-10%; left:50%; transform:translateX(-50%); width:150%; aspect-ratio:1.3; z-index:-1; background:radial-gradient(circle, rgba(255,140,26,.20), transparent 62%); animation:spotPuls 3.2s ease-in-out infinite; pointer-events:none; } @keyframes spotPuls { 50% { opacity:.55; } } .fg-name { border-color:var(--accent); background:linear-gradient(180deg,#171008,#0a0806); } /* Panels mit Tiefe statt flacher Fläche */ .menu-tabs { background:rgba(10,7,4,.72); } .heute, .mt, .lg { background:linear-gradient(168deg, #241b12 0%, #171109 70%); box-shadow:4px 4px 0 rgba(0,0,0,.5); } .lg.sel { background:linear-gradient(168deg, #2e2113, #1c1409); box-shadow:0 0 20px var(--accent-glow), 4px 4px 0 #000; } .mt:hover, .lg:hover { filter:brightness(1.12); } /* Der Play-Knopf glänzt — er ist der wichtigste Knopf des Spiels */ .btn-play { overflow:hidden; } .btn-play::after { content:""; position:absolute; inset:-40% -60%; background:linear-gradient(115deg, transparent 45%, rgba(255,255,255,.26) 50%, transparent 55%); transform:translateX(-130%) rotate(0.001deg); pointer-events:none; animation:playShine 3.4s 1.2s infinite; } @keyframes playShine { 0% { transform:translateX(-130%); } 40%, 100% { transform:translateX(130%); } } /* Münz-Pille mit Plus — das Plus führt dorthin, wo es Münzen gibt */ .menu-coins { gap:6px; } .mc-plus { width:22px; height:22px; border:0; background:var(--ok); color:#04140a; font:800 16px/1 var(--ui); cursor:pointer; flex:none; box-shadow:2px 2px 0 rgba(0,0,0,.6); transition:transform .12s; } .mc-plus:hover { transform:scale(1.12); } /* Schnellzugriffe: ein Hauch Cartoon-Knopf */ .mt { border-width:2px; } .mt:active, .lg:active, .btn-play:active { transform:translateY(2px) scale(.99); } /* ============================================================ KLEINE SCHIRME: NICHTS DARF SICH ÜBERLAPPEN Play wohnt jetzt in der Mittelspalte (kein Konflikt mit der rechten Spalte mehr). Dazu fliegt auf kleinen Höhen alles Dekorative raus, das über Inhalt lag: Laufbänder, Schweber, Install-Knopf. Die rechte Spalte scrollt zur Not in sich. ============================================================ */ .m-mitte .menu-actions { width:100%; margin-top:8px; } .m-rechts { max-height:calc(100cqh - 120px); overflow-y:auto; scrollbar-width:thin; overscroll-behavior:contain; } @container (max-height:620px) { .ticker, #floaters, #btn-install { display:none !important; } .m-rechts { max-height:calc(100cqh - 84px); } .fg-char { height:clamp(56px, 17cqh, 96px); } .figur { padding:2px 6px; } .fg-name { padding:4px 12px; font-size:9.5px; } .m-mitte .title-block { display:none; } /* der Tab "Start" sagt, wo man ist */ .play-row .btn-play { min-height:44px; } .btn-play .sub { display:none; } .invite-side { flex-basis:88px; font-size:10px; } .menu-tabs { margin-bottom:6px; } } @container (max-width:820px) { .menu-grid { grid-template-columns:56px 1fr minmax(170px, 36%); gap:8px; } } /* ============================================================ FEINSCHLIFF: REITER + PLAY RECHTS Die Reiter sind Navigations-Chips, keine Balken: klein, mit Luft dazwischen. Play wohnt rechts unter den Tagesaufgaben — kurz, breit, nur PLAY. ============================================================ */ .menu-tabs { border:0; background:none; gap:8px; } .menu-tabs button { flex:0 1 auto; min-height:32px; padding:0 16px; font-size:12px; background:linear-gradient(168deg, #241b12, #171109); border:1px solid var(--border); border-right:1px solid var(--border); box-shadow:3px 3px 0 rgba(0,0,0,.5); } .menu-tabs button.on { background:var(--accent); color:#000; } .menu-tabs button.ico { flex:0 0 40px; } .menu-coins { border:1px solid var(--border); background:rgba(10,7,4,.72); padding:4px 10px 4px 12px; box-shadow:3px 3px 0 rgba(0,0,0,.5); } .m-rechts .menu-actions { width:100%; margin-top:8px; } .m-rechts .play-row { gap:8px; } .m-rechts .btn-play { min-height:48px; height:48px; font-size:17px; padding:0 14px; gap:10px; } .m-rechts .btn-play .ball { width:24px; height:24px; } .m-rechts .btn-play .txt { flex:1; text-align:center; letter-spacing:.14em; } .m-rechts .invite-side { flex:0 0 48px; height:48px; padding:0; gap:0; } .m-rechts .invite-side .iv-ico { font-size:20px; } .m-rechts .join-row { margin-top:6px; } .m-rechts .join-row input { height:32px; font-size:12px; } .m-rechts .join-row .btn-tiny { height:32px; font-size:11px; } @container (max-height:620px) { .menu-tabs button { min-height:28px; padding:0 12px; font-size:11px; } .m-rechts .btn-play { height:42px; min-height:42px; font-size:15px; } .m-rechts .invite-side { flex-basis:42px; height:42px; } .m-rechts .join-row { display:flex; } /* Code-Zeile bleibt hier sichtbar */ } /* ============================================================ LUFT AUF GROSSEN SCHIRMEN Die Dichte war fürs Handy gedacht — auf allem darüber darf die Bühne atmen: breitere Box, grössere Figur, mehr Abstand. ============================================================ */ .menu-box { width:min(1120px, 96cqw); } @container (min-height:621px) { .menu-box { padding:22px 30px; } .menu-grid { gap:18px 24px; } .m-links { gap:12px; padding-top:10px; } .mt { padding:14px 6px 11px; font-size:25px; } .mt span { font-size:9px; } .menu-tabs { margin-bottom:16px; gap:10px; } .menu-tabs button { min-height:36px; font-size:13px; padding:0 20px; } .fg-char { height:clamp(110px, 27cqh, 200px); } .fg-name { padding:6px 20px; font-size:12px; } .m-mitte .leagues { margin-top:14px; gap:8px; } .lg { padding:9px 5px; } .heute { padding:10px 14px 5px; } .hz { padding:5px 0; } .m-rechts { gap:8px; } .m-rechts .menu-actions { margin-top:10px; } .m-rechts .btn-play { height:56px; min-height:56px; font-size:19px; } .m-rechts .invite-side { flex-basis:56px; height:56px; } .m-rechts .join-row { margin-top:8px; } .m-rechts .join-row input, .m-rechts .join-row .btn-tiny { height:38px; } } /* ============================================================ SIEG-INSZENIERUNG — Stempel + Konfetti ============================================================ */ #result-card h2 { animation:stempel .5s var(--ease); display:inline-block; } @keyframes stempel { 0% { transform:scale(2.4) rotate(-9deg); opacity:0; } 55% { transform:scale(.92) rotate(1.5deg); opacity:1; } 100% { transform:scale(1) rotate(0); } } .kfti { position:fixed; top:-24px; width:9px; height:13px; z-index:5; pointer-events:none; animation:kftiFall 1.6s ease-in forwards; } @keyframes kftiFall { 0% { transform:translate(0, 0) rotate(0); opacity:1; } 100% { transform:translate(var(--drift), 105cqh) rotate(var(--spin)); opacity:.8; } } /* Top 3 der Woche: die Krone leuchtet */ .lg-rang.spitze { color:var(--gold); text-shadow:0 0 10px rgba(240,180,41,.6); font-weight:700; } /* ============================================================ LOGO IN DER LEISTE + GROSSES NAMENSSCHILD MIT STIFT ============================================================ */ .tab-logo { display:flex; align-items:center; padding:0 14px 0 2px; font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; } .tab-logo em { font-style:normal; color:var(--accent); margin-left:5px; } .fg-name { display:flex; align-items:center; gap:8px; padding:7px 14px 7px 18px; font-size:14px; } .fg-name b { font:600 14px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; } .fg-edit { border:0; background:none; cursor:pointer; font-size:13px; padding:2px 4px; opacity:.7; transition:opacity .15s, transform .15s; } .fg-edit:hover { opacity:1; transform:scale(1.2); } .fg-in { width:150px; background:#0a0806; border:1px solid var(--accent); color:var(--text); font:600 13px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; text-align:center; } .fg-ball { font:600 9px/1 var(--ui); } @container (max-height:620px) { .tab-logo { font-size:14px; padding-right:8px; } .fg-name { padding:5px 10px 5px 14px; } .fg-name b { font-size:11.5px; } } /* ============================================================ SHOP-REITER KOMPAKT (Referenz-Dichte) Booster: Steckplätze + Karten + Detail auf einem Schirm. Packs: Gratisreihe + Packreihe ohne Scrollen. Extras: schmal. ============================================================ */ .slots { gap:10px; } .slot { padding:9px 12px; } .slot .si { font-size:21px; } .bgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:8px; } .bcard { padding:10px 6px; gap:5px; } .bcard .bico { font-size:24px; } .bcard b { font-size:10px; } .bcard .bch { font-size:8.5px; } .bdetail { display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--border-soft); padding:12px 14px; margin-top:14px; } .bdetail .bico.big { font-size:34px; } .bdetail h3 { font:600 14px/1.2 var(--ui); letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; } .bdetail p { font:300 11.5px/1.55 var(--ui); color:var(--muted); } #pane-boost .label { margin-bottom:8px !important; } #pane-boost .label + .slots + .label { margin:14px 0 8px !important; } #pane-boost .actions { margin-top:12px; } #pane-extras .upg { padding:10px 0; gap:12px; } #pane-extras .label { margin-bottom:10px !important; } .hero-track { padding:10px 12px; } @container (max-height:620px) { .bgrid { grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:6px; } .bcard { padding:7px 4px; } .bdetail { padding:8px 10px; margin-top:8px; } .bdetail p { font-size:10.5px; } .slots { gap:7px; } .slot { padding:6px 9px; } .packs .pack { width:clamp(140px, 21cqh, 180px); } .freecard { width:clamp(130px, 19cqh, 170px); } .pane-scroll { padding:10px 14px 24px; } } /* ============================================================ AUSSEN ANGESCHLAGEN — das Menü füllt den Schirm Kein schwebender Kasten mehr: die Reiter kleben oben, die Schnellzugriffe am linken Rand, die Ligen an der Unterkante, Heute + Play am rechten Rand. Die Mitte gehört der Figur — sie bekommt die Luft, die vorher der Rahmen fras. Steht bewusst ZULETZT: übersteuert alle älteren Menü-Masse. ============================================================ */ #menu.show { padding:0; } #menu.show > .menu-box { margin:0; width:100%; max-width:none; height:100%; max-height:none; padding:10px 14px 12px; display:flex; flex-direction:column; overflow:hidden; } .menu-box .stagger { flex:1; display:flex; flex-direction:column; min-height:0; } .menu-tabs { margin-bottom:10px; flex:0 0 auto; } .menu-grid { flex:1; min-height:0; display:grid; grid-template-columns:auto minmax(0, 1fr) minmax(240px, 30%); grid-template-rows:minmax(0, 1fr) auto; grid-template-areas:"links mitte rechts" "ligen ligen rechts"; gap:12px; align-items:stretch; } /* Linker Rand: die drei Schnellzugriffe, oben beginnend */ .m-links { grid-area:links; padding-top:0; justify-content:flex-start; } /* Mitte: nur noch die Figur, senkrecht zentriert */ .m-mitte { grid-area:mitte; min-height:0; justify-content:center; } /* Unterkante: der Ligastreifen über die volle Breite bis zur rechten Spalte — align-self:end lässt ihn wirklich kleben */ .leagues { grid-area:ligen; align-self:end; margin:0; gap:10px; } .lg { padding:12px 6px; } /* Der Wochenrang ist jetzt DIE Zahl auf dem Chip */ .lg-rang { font:700 16px/1 var(--ui); letter-spacing:.02em; padding:4px 0 2px; font-variant-numeric:tabular-nums; } .lg.locked .lg-rang { opacity:.85; } /* Rechter Rand: Heute wächst und scrollt, Play + Code kleben unten */ .m-rechts { grid-area:rechts; min-height:0; max-height:none; } .m-rechts .heute { flex:1 1 auto; min-height:0; overflow-y:auto; } .m-rechts .menu-actions { margin-top:auto; flex:0 0 auto; } @container (max-height:560px) { #menu.show > .menu-box { padding:6px 10px 8px; } .menu-grid { gap:8px; } .lg { padding:8px 4px; } .lg-rang { font-size:13px; } } /* ============================================================ POPUPS ÜBER DEM MENÜ — Rangliste & Herausforderungen Kein eigener Vollbild-Screen: ein Fenster mit orangem Rahmen schwebt über dem Start, dahinter dunkelt ein Schleier ab. Die Liga-Reiter sitzen OBEN, die Zeile darunter sagt, wann alles auf 0 geht. ============================================================ */ .popup { z-index:40; background:rgba(8,6,3,.62); backdrop-filter:blur(3px); } .popup .panel-wrap { display:grid; place-items:center; height:100%; padding:18px; } .popup .panel.pop { position:relative; width:min(620px, 94cqw); height:auto; max-height:min(560px, 92cqh); display:flex; flex-direction:column; border:2px solid var(--accent); box-shadow:8px 8px 0 #000, 0 0 60px rgba(255,138,0,.18); animation:popRein .28s var(--ease); } @keyframes popRein { from { opacity:0; transform:translateY(22px) scale(.96); } } .popup .panel-head { padding:12px 20px; } .popup .panel-head h2 { font-size:21px; } /* Liga-Reiter oben im Fenster */ .pop-tabs { display:flex; margin:10px 16px 0; } .pop-tabs button { flex:1; min-height:38px; padding:0 6px; font-size:12px; } /* Die Countdown-Zeile: klar und unübersehbar */ .pop-note { margin:8px 16px 0; padding:7px 12px; background:var(--accent-faint); border:1px solid var(--border); font:600 10.5px/1.4 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); text-align:center; } .popup .bd-body { flex:1; min-height:120px; overflow-y:auto; } .popup .panel-foot { padding:8px 14px; } /* Der Wochenend-Gewinn klebt an den Top-3-Zeilen */ .bd-prize { font:700 11px/1 var(--ui); color:var(--gold); white-space:nowrap; padding:3px 8px; background:rgba(240,180,41,.1); border:1px solid rgba(240,180,41,.35); } /* Herausforderungs-Zeilen im Popup: Satz + Erklärung + Lohn */ .ch-row { display:flex; align-items:center; gap:14px; padding:11px 10px; border-bottom:1px solid var(--border-soft); } .ch-row:last-child { border-bottom:0; } .ch-row.done { opacity:.55; } .ch-row.bonus { background:var(--accent-faint); border:1px solid var(--border); margin-top:10px; } .ch-i { font-size:22px; line-height:1; flex:0 0 30px; text-align:center; } .ch-t { flex:1; display:flex; flex-direction:column; gap:3px; } .ch-t b { font:600 13px/1.3 var(--ui); } .ch-t i { font:300 11px/1.5 var(--ui); font-style:normal; color:var(--muted); } .ch-lohn { font:700 13px/1 var(--ui); color:var(--gold); white-space:nowrap; } @container (max-height:560px) { .popup .panel.pop { max-height:96cqh; } .pop-tabs button { min-height:32px; font-size:11px; } .ch-row { padding:7px 8px; } .ch-t i { font-size:10px; } } /* ============================================================ PACK-ÖFFNEN, FINALE — die Karten füllen den Schirm Übersicht so gross wie möglich, unten nur der Hinweis, dass ein Tipp irgendwo genügt. ============================================================ */ #reveal.fertig .rv-stage { width:min(1400px, 98cqw); } /* Die Spaltenzahl kommt von rvGitterPassen() — auto-fit mit einer Mindestbreite hat bei 25 Karten unten aus dem Bild gefuehrt. */ #reveal.fertig .rv-grid { flex:1 1 auto; min-height:0; align-content:center; grid-template-columns:repeat(var(--spalten, 5), var(--kartenbreite, 1fr)); justify-content:center; gap:clamp(6px, 1.2cqw, 16px); } #reveal.fertig .rv-grid .rc { margin:0 auto; width:100%; } #reveal.fertig .rv-foot { justify-content:center; flex-direction:column; gap:8px; } .rv-ende { text-align:center; } /* ============================================================ DER SCHRIFTZUG HINTER DER FIGUR "Mr. Basketball" in Marker-Schrift, gross und schräg — aber nur ein Hauch: die Figur und alles andere bleiben klar lesbar. ============================================================ */ .m-mitte { position:relative; } /* Der grosse "Mr. Basketball"-Schriftzug hinter der Figur ist raus — er lag quer im Bild und nahm der Arena die Ruhe. */ .m-mitte > * { position:relative; z-index:1; } /* ============================================================ STARTSEITE ALS SÄULE Auf breiten Schirmen zog sich das Menü auseinander wie Kaugummi. Jetzt: eine Säule wie auf dem Handy — begrenzte Breite, mittig, oben und unten Luft. Die Figur wächst, der Heute-Block endet nach seinen Zeilen statt als leerer Kasten weiterzulaufen. ============================================================ */ #menu.show { padding:16px 0 14px; } #menu.show > .menu-box { width:min(100%, 1000px); margin:0 auto; } .fg-char { height:clamp(140px, 40cqh, 340px); } .m-rechts .heute { flex:0 1 auto; } .menu-grid { grid-template-columns:auto minmax(0, 1fr) minmax(230px, 31%); } /* ============================================================ SHOP, TURNIER, REGLER — dasselbe Popup-Kleid wie die Rangliste Kein Vollbild mehr: ein Fenster mit orangem Rahmen, mittig. ============================================================ */ #shop .panel-wrap, #cup .panel-wrap, #settings .panel-wrap { display:grid; place-items:center; height:100%; padding:16px; } #shop .panel, #cup .panel, #settings .panel { width:min(700px, 94cqw); height:auto; max-height:min(640px, 92cqh); display:flex; flex-direction:column; border:2px solid var(--accent); box-shadow:8px 8px 0 #000, 0 0 60px rgba(255,138,0,.18); animation:popRein .28s var(--ease); } /* Der Shop bekommt eine FESTE Höhe: nur so können die Kacheln wirklich fensterhoch sein (height:100% braucht eine Kette definierter Höhen — bei height:auto kollabiert alles). */ #shop .panel { width:min(1040px, 96cqw); height:min(700px, 94cqh); max-height:none; } #cup .panel { width:min(780px, 94cqw); } #shop .panel-head, #cup .panel-head, #settings .panel-head { padding:12px 20px; } #shop .panel-head h2, #cup .panel-head h2, #settings .panel-head h2 { font-size:21px; } #shop .panel-body { flex:1; min-height:0; display:flex; flex-direction:column; padding:0; } #cup .bd-body, #settings .set-body { flex:1; min-height:0; overflow-y:auto; } /* ============================================================ SHOP-KACHELN Ein Reiter = EINE Reihe hochkanter Kacheln, so hoch wie das Fenster; nach rechts scrollen zeigt den Rest. Gilt für Bälle, Packs und Booster. ============================================================ */ .pane-hs { flex:1; min-height:0; flex-direction:column; gap:8px; padding:12px 16px 4px; } .pane-hs .label { margin:0; } .hrow { flex:1 1 auto; min-height:0; display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; padding:4px 2px 8px; scroll-snap-type:x proximity; } .hrow::-webkit-scrollbar { height:9px; } .hrow::-webkit-scrollbar-thumb { background:var(--border); } .hrow::-webkit-scrollbar-track { background:rgba(255,255,255,.04); } .kx { position:relative; flex:0 0 clamp(190px, 24cqw, 252px); height:100%; display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 12px 12px; background:var(--card); border:1px solid var(--border-soft); scroll-snap-align:start; text-align:center; overflow:hidden; } .kx.gesperrt { opacity:.68; } .kx .tier { position:absolute; top:8px; left:8px; margin:0; } .kx .equipped-tag { position:absolute; top:8px; right:8px; } /* Das Bild nimmt den ganzen Rest — genau darum ging es: unter dem gedeckelten Bild sammelte sich der uebrige Platz als LOCH ueber den Knoepfen. Jetzt schluckt ihn die Figur, und weil alle Kacheln denselben Unterbau haben, stehen Namen, Werte, Fassung und Knoepfe nebeneinander auf einer Linie. */ .kx-art { flex:1 1 auto; min-height:56px; width:100%; object-fit:contain; margin-top:14px; filter:drop-shadow(0 8px 12px rgba(0,0,0,.6)); } .kx-ico { font-size:60px; line-height:1; } .pack-kx .pk-n { font-size:64px; } .kx-name { font:600 14px/1.2 var(--ui); letter-spacing:.06em; text-transform:uppercase; } .kx-sub { font:600 9.5px/1.4 var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-style:normal; } .kx-desc { font:300 11px/1.5 var(--ui); color:var(--muted); padding:0 2px; } .kx-hint { font:300 9.5px/1.4 var(--ui); color:var(--dim); font-style:normal; } .kx-fill { flex:1 1 0; } .kx .cardbar { width:100%; margin:0; } .kx-actions { width:100%; display:flex; flex-direction:column; gap:6px; margin-top:auto; } .kx-actions .btn { width:100%; min-height:34px; height:34px; font-size:11px; padding:0 8px; } /* Werte kompakt auf der Ball-Kachel */ .kx-stats { width:100%; display:flex; flex-direction:column; } .kx-stats .stat { gap:7px; margin-bottom:5px; } .kx-stats .stat .sn { width:52px; font-size:8px; letter-spacing:.1em; text-align:left; } .kx-stats .stat .bar { height:9px; gap:2px; } .kx-stats .stat .sv { width:36px; font-size:9px; } /* Pack-Kacheln behalten ihre Farbe (--pc) und die grosse Zahl */ .pack-kx { border-color:color-mix(in srgb, var(--pc) 45%, #000); } .pack-kx .pk-n { margin-top:18px; } .pack-kx.mega { box-shadow:0 0 26px color-mix(in srgb, var(--pc) 30%, transparent); } .kx-fuss { flex:0 0 auto; margin:0 0 6px; text-align:center; } /* Ausbau-Ansicht: Zurück-Zeile oben, Detail scrollt darunter */ .zoom-head { flex:0 0 auto; display:flex; padding:2px 0; } #pane-balls .shop-detail { flex:1; min-height:0; overflow-y:auto; padding:6px 10px 30px; } /* Booster: Steckplätze kompakt über der Reihe */ #pane-boost .slots { flex:0 0 auto; gap:8px; } #pane-boost .slot { padding:6px 10px; } @container (max-height:560px) { #menu.show { padding:8px 0 6px; } .kx { flex-basis:clamp(170px, 30cqw, 210px); gap:5px; } .kx-ico { font-size:34px; margin-top:14px; } .kx-name { font-size:12px; } .kx-desc { font-size:10px; } .kx-actions .btn { min-height:30px; height:30px; } .pane-hs { padding:8px 10px 2px; } } /* ============================================================ ERGEBNIS — GROSSES KINO, OHNE SCROLLEN Immer zwei Spalten: links das Drama (Titel, Ergebnis, Rang), rechts die Abrechnung samt Knöpfen. Alle Masse hängen an vh — auf flachen Schirmen schrumpft ALLES mit, statt zu scrollen. ============================================================ */ #result .panel-wrap { display:grid; place-items:center; height:100%; padding:10px; overflow:hidden; } .result-card { width:min(940px, 96cqw); max-height:96cqh; overflow:hidden; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); column-gap:clamp(16px, 3cqw, 34px); align-content:center; padding:clamp(14px, 3.2cqh, 30px) clamp(18px, 3cqw, 34px); } .result-card h2 { grid-column:1; font-size:clamp(28px, 8cqh, 52px); } .result-card .swish { grid-column:1; margin-top:clamp(2px, 1cqh, 10px); font-size:clamp(12px, 2.4cqh, 17px); } .final-score { grid-column:1; margin-top:clamp(6px, 2cqh, 18px); } .final-score b { font-size:clamp(30px, 7.5cqh, 52px); animation:scorePop .55s var(--ease) backwards; } .final-score b.a { animation-delay:.18s; } @keyframes scorePop { 0% { transform:scale(2.4); opacity:0; } 60% { transform:scale(.9); } 100% { transform:scale(1); } } .result-card .rankline { grid-column:1; margin:clamp(4px,1.2cqh,10px) 0 0; padding:clamp(6px, 1.4cqh, 11px) 14px; } .result-card .cond-row { grid-column:1; margin-top:clamp(4px,1.2cqh,10px) !important; } .payout { grid-column:2; grid-row:1 / span 6; margin:0; align-self:center; } .payout .pay-row { padding:clamp(4px, 1.1cqh, 10px) 0; animation-delay:calc(.09s * var(--i, 0)); } .pay-row.tot .pv { font-size:clamp(19px, 3.4cqh, 26px); display:inline-block; } #btn-double { grid-column:2; height:clamp(42px, 6.4cqh, 52px) !important; margin-top:clamp(8px, 1.6cqh, 16px) !important; } .ad-optional { grid-column:2; margin-top:4px; font-size:clamp(10px, 1.6cqh, 12px); } .result-card .actions { grid-column:2; margin-top:clamp(8px, 1.8cqh, 16px); } .result-card .actions .btn-tiny { height:clamp(40px, 6cqh, 50px); } .rm-note { grid-column:1 / -1; } /* Ein Sieg muss sich wie einer anfühlen: goldener Rahmen, Puls, leuchtender Stempel — und die Summe knallt am Ende (boom). */ .result-card.win { border-color:var(--gold); box-shadow:14px 14px 0 #000, 0 0 90px rgba(240,180,41,.28); animation:panelIn .38s var(--ease), wonPuls 2.4s 1.2s infinite; } @keyframes wonPuls { 50% { box-shadow:14px 14px 0 #000, 0 0 140px rgba(240,180,41,.5); } } .result-card.win h2 { text-shadow:0 0 28px var(--accent-glow); } .result-card.draw h2, .result-card.loss h2 { text-shadow:none; } .pay-row.tot .pv.boom { animation:totBoom .45s var(--ease); } @keyframes totBoom { 40% { transform:scale(1.4); text-shadow:0 0 26px rgba(240,180,41,.9); } } /* ============================================================ MEHR ARENA, WENIGER KASTEN Die Liga ist gewählt, die Arena gehört gesehen: der Schleier über der Bühne wird dünner, die Blöcke lassen sie durch. ============================================================ */ body.menu-open #scrim { opacity:.62; } .heute, .wochen-btn, .podest, .lg, .mt { background:rgba(18,13,9,.72); backdrop-filter:blur(3px); } .lg.sel { background:linear-gradient(168deg, rgba(46,33,19,.9), rgba(28,20,9,.85)); } /* ---- Das Podest: die drei Besten der Liga ---- */ .podest { width:100%; max-width:420px; margin-top:clamp(6px, 1.6cqh, 14px); border:1px solid var(--border-soft); cursor:pointer; background:rgba(18,13,9,.72); transition:border-color .15s; } .podest:empty { display:none; } .podest:hover { border-color:var(--accent); } .pd-kopf { padding:5px 10px; font:600 8.5px/1.3 var(--ui); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border-soft); } .pd-row { display:flex; align-items:center; gap:9px; padding:5px 10px; } .pd-row + .pd-row { border-top:1px solid rgba(255,255,255,.04); } .pd-row.me { background:var(--accent-faint); } .pd-m { font-size:14px; line-height:1; } .pd-n { flex:1; min-width:0; font:600 11.5px/1.2 var(--ui); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pd-w { font:600 9px/1 var(--ui); color:var(--gold); opacity:.75; } .pd-p { font:700 13px/1 var(--ui); color:var(--gold); font-variant-numeric:tabular-nums; min-width:26px; text-align:right; } .pd-row.leer .pd-n { color:var(--dim); font-weight:400; } /* ---- Der grüne Wochen-Knopf: hier liegt etwas bereit ---- */ .wochen-btn { position:relative; display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; margin-top:6px; cursor:pointer; text-align:left; color:var(--text); border:1px solid rgba(74,201,120,.45); overflow:hidden; } .wochen-btn:hover { border-color:var(--ok); } .wb-ico { font-size:19px; line-height:1; } .wb-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .wb-txt b { font:600 10.5px/1.2 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--ok); } .wb-txt i { font:300 10px/1.3 var(--ui); font-style:normal; color:var(--muted); } .wb-bar { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.07); } .wb-bar i { display:block; height:100%; background:var(--ok); box-shadow:0 0 10px rgba(74,201,120,.7); transition:width .5s var(--ease); } .wochen-btn.bereit { border-color:var(--ok); background:linear-gradient(120deg, rgba(74,201,120,.22), rgba(18,13,9,.75)); animation:bonusPuls 1.8s infinite; } .wochen-btn.bereit .wb-txt i { color:var(--ok); font-weight:600; } .wz-bar { display:block; height:4px; margin-top:5px; background:rgba(255,255,255,.08); } .wz-bar i { display:block; height:100%; background:var(--accent); } /* ---- Die rote Zahl an Glocke und Wochen-Knopf ---- */ .dot-zahl { position:absolute; top:4px; right:5px; min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:var(--bad); color:#fff; font:700 10px/16px var(--ui); text-align:center; font-style:normal; box-shadow:0 0 10px var(--bad); } .mt.klingelt { border-color:var(--bad); animation:bonusPuls 1.3s infinite; } /* ---- Rangliste: nachladen, springen, noch nicht drauf ---- */ .bd-mehr { display:block; width:100%; margin:8px 0 4px; padding:10px; background:var(--card); border:1px solid var(--border); color:var(--accent); font:600 10px/1 var(--ui); letter-spacing:.16em; text-transform:uppercase; cursor:pointer; } .bd-mehr:hover { background:var(--card-hi); border-color:var(--accent); } .bd-row.leer { border:1px dashed var(--accent); background:var(--accent-faint); } .bd-row.leer .bd-r { color:var(--accent); } .bd-row.blitz { animation:bdBlitz 1.2s var(--ease); } @keyframes bdBlitz { 0%, 100% { background:var(--accent-faint); } 30% { background:rgba(255,138,0,.42); box-shadow:0 0 24px var(--accent-glow); } } #board-jump { white-space:nowrap; } .lg-rang.gedacht { opacity:.55; font-weight:600; } /* ---- Duell-Fenster ---- */ .ch-row.offen { border:1px solid var(--accent); background:var(--accent-faint); animation:bonusPuls 1.8s infinite; } #duell-body .label { margin:12px 0 6px; } #duell-body .label:first-child { margin-top:0; } /* ============================================================ DIE FIGUR IM MENÜ — Zustand oben, Name gross, Fassung sichtbar ============================================================ */ .fg-cond { display:flex; align-items:center; gap:7px; padding:3px 12px; background:rgba(10,8,6,.7); border:1px solid var(--border-soft); margin-bottom:2px; } .fg-cond i { width:7px; height:7px; border-radius:50%; } .fg-cond b { font:700 12px/1 var(--ui); font-variant-numeric:tabular-nums; } .fg-cond span { font:600 8.5px/1 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .fg-ball { font:600 12px/1.3 var(--ui); letter-spacing:.06em; color:var(--cream); } .fg-var { font-style:normal; padding:2px 7px; margin-left:5px; border:1px solid var(--border); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .fg-var.gold { color:#ffd76a; border-color:#ffd76a; background:rgba(255,215,106,.1); } /* Die goldene Fassung leuchtet hinter der Figur */ .fg-char.gold { filter:drop-shadow(0 10px 14px rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(255,215,106,.55)); } /* ---- Special im Shop ---- */ .kx.golden { border-color:#ffd76a; box-shadow:inset 0 0 40px rgba(255,215,106,.12); } /* DIE FASSUNGS-AUSWAHL Vier gleich breite Felder, die den Platz auf der Kachel wirklich ausnutzen. Jedes traegt seinen Namen und darunter, was es bringt oder noch kostet — die Farbe des Rahmens ist die des Metalls. */ .kx-ed { width:100%; margin-top:2px; padding:6px 7px 7px; display:flex; flex-direction:column; gap:5px; background:rgba(255,215,106,.06); border:1px solid rgba(255,215,106,.28); } .kx-ed.an { background:rgba(255,215,106,.13); border-color:rgba(255,215,106,.6); } .ed-kopf { display:flex; align-items:baseline; justify-content:space-between; gap:6px; } .ed-kopf span { font:600 8.5px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; color:#ffd76a; } .ed-kopf i { font:400 8.5px/1 var(--ui); font-style:normal; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ed-kopf i.voll { color:#ffd76a; } .ed-reihe { display:grid; grid-template-columns:repeat(4, 1fr); gap:3px; } .ed { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:32px; padding:3px 1px; cursor:pointer; text-align:center; background:rgba(255,255,255,.04); border:1px solid var(--border-soft); color:var(--muted); font:600 8px/1 var(--ui); letter-spacing:.06em; text-transform:uppercase; overflow:hidden; } .ed em { font:400 7.5px/1 var(--ui); font-style:normal; letter-spacing:.02em; text-transform:none; color:var(--dim); white-space:nowrap; } .ed.zu { cursor:default; opacity:.55; } .ed.frei { color:#e8eef6; border-color:rgba(255,255,255,.22); } /* Die Metalle: erst der Rahmen, dann — wenn getragen — die Fuellung */ .ed.s1.frei { color:#f2f4f8; border-color:rgba(242,244,248,.45); } .ed.s2.frei { color:#cfdae6; border-color:rgba(185,198,212,.5); } .ed.s3.frei { color:#ffd76a; border-color:rgba(255,215,106,.5); } .ed.an { border-width:2px; } .ed.n.an { background:rgba(255,255,255,.10); border-color:#fff; color:#fff; } .ed.s1.an { background:rgba(242,244,248,.18); border-color:#f2f4f8; } .ed.s2.an { background:rgba(185,198,212,.20); border-color:#b9c6d4; } .ed.s3.an { background:rgba(255,215,106,.22); border-color:#ffd76a; } .ed.an em { color:inherit; opacity:.85; } /* ============================================================ DER SHOP ALS SCHAUFENSTER Eine Kachel muss man sehen, nicht lesen: Packs tragen ihre Farbe, einen Kartenstapel mit der Zahl darauf und Zeile für Zeile, was drin ist. Gratis trägt Grün, das Mega-Pack Gold. ============================================================ */ .pack-kx { background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--pc) 26%, transparent), transparent 70%), linear-gradient(180deg, rgba(24,18,12,.9), rgba(14,10,7,.95)); } .pack-kx .kx-name { color:var(--pc); } .pack-kx.arm { opacity:.72; } .pack-kx.mega { border-color:var(--gold); box-shadow:inset 0 0 50px rgba(255,180,61,.14), 0 0 30px rgba(255,180,61,.22); } /* Bänder oben links: Bester Wert / Gratis */ .pk-badge { position:absolute; top:0; left:0; padding:3px 10px; font:700 8.5px/1.4 var(--ui); letter-spacing:.14em; text-transform:uppercase; background:var(--gold); color:#1a1206; z-index:2; } .pk-badge.frei { background:var(--ok); color:#04140a; } /* Der Kartenstapel — drei Blätter, das vorderste trägt die Zahl */ .pk-stapel { position:relative; width:clamp(74px, 42%, 104px); aspect-ratio:3/4; margin:6px auto 8px; flex:0 0 auto; } .pk-k { position:absolute; inset:0; border:1px solid color-mix(in srgb, var(--pc) 55%, #000); background:linear-gradient(160deg, color-mix(in srgb, var(--pc) 22%, #0d0a07), #0d0a07); border-radius:2px; } .pk-k3 { transform:rotate(-9deg) translate(-7%, 2%); opacity:.55; } .pk-k2 { transform:rotate(5deg) translate(6%, 1%); opacity:.75; } .pk-k1 { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; box-shadow:0 6px 16px rgba(0,0,0,.6); } .pk-k1 b { font:700 clamp(24px, 4.6cqh, 36px)/1 var(--ui); color:var(--pc); letter-spacing:-.03em; text-shadow:0 0 18px color-mix(in srgb, var(--pc) 55%, transparent); } .pk-k1 em { font:600 7.5px/1 var(--ui); font-style:normal; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); } .pack-kx.mega .pk-k1 { animation:megaPuls 2.2s infinite; } @keyframes megaPuls { 50% { box-shadow:0 6px 16px rgba(0,0,0,.6), 0 0 26px rgba(255,180,61,.5); } } /* Was drin ist — eine Zeile je Zusage */ .pk-bits { display:flex; flex-direction:column; gap:3px; width:100%; } .pk-bits i { display:flex; align-items:center; gap:6px; font:400 9.5px/1.35 var(--ui); font-style:normal; letter-spacing:.04em; color:var(--cream); text-align:left; } .pk-bits i.matt { color:var(--dim); } .pk-bits i.gold { color:var(--gold); font-weight:600; } .pb-i { width:13px; text-align:center; font-size:10px; flex:0 0 13px; } .pk-stueck { font:400 8.5px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:5px; } /* Gesperrte Bälle: Sammelbalken statt Kleinschrift */ .kx-frei { width:100%; display:flex; flex-direction:column; gap:3px; margin-top:1px; } .kf-bar { height:5px; background:rgba(255,255,255,.08); } .kf-bar i { display:block; height:100%; background:var(--accent); box-shadow:0 0 8px var(--accent-glow); } .kx-frei em { font:600 8.5px/1 var(--ui); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } /* Die Münz-Kachel hat keinen Stapel, nur eine grosse Zahl */ .pk-stapel.solo { aspect-ratio:auto; width:auto; margin:10px auto 10px; } .pk-stapel.solo .pk-k1 { position:static; border:0; background:none; box-shadow:none; } .pk-stapel.solo .pk-k1 b { font-size:clamp(26px, 5cqh, 40px); } /* Gratis-Kacheln tragen Grün statt Packfarbe im Namen */ .kx.frei .kx-name { color:var(--ok); } /* Booster-Kacheln: Bild mittig, Text darunter, wie bei den Packs */ .boost-kx .kx-ico { margin:0 0 4px; } .boost-kx .kx-desc { min-height:2.6em; } .boost-kx .pips.small { margin-bottom:2px; } /* ============================================================ AUFRÄUMEN AUF DEM STARTBILDSCHIRM Gemessen am 6.8.2026: der Zustands-Chip ragte 15 px in die Reiterleiste, das Podest 19 px in die Liga-Knöpfe. Beides kam daher, dass die Mittelspalte höher war als ihr Platz. ============================================================ */ /* Die Figur darf schrumpfen, statt oben und unten auszubrechen */ .m-mitte { min-height:0; overflow:visible; } .figur { min-height:0; max-width:100%; } .fg-char { height:auto; flex:0 1 auto; max-height:clamp(84px, 34cqh, 330px); min-height:70px; } /* Der Zustand sitzt eng am Ball, nicht in der Reiterleiste */ .fg-cond { margin-bottom:0; padding:2px 10px; } .fg-cond b { font-size:11px; } /* Das Podest: EINE schmale Zeile statt eines Kastens */ .podest { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 10px; width:auto; max-width:100%; margin-top:6px; padding:4px 10px; background:rgba(18,13,9,.72); border:1px solid var(--border-soft); } .pd-t { font:600 8px/1 var(--ui); letter-spacing:.18em; text-transform:uppercase; color:var(--dim); } .pd-e { display:inline-flex; align-items:center; gap:4px; font-size:11px; line-height:1; } .pd-e b { font:600 10px/1 var(--ui); color:var(--cream); max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pd-e i { font:700 10px/1 var(--ui); font-style:normal; color:var(--gold); font-variant-numeric:tabular-nums; } .pd-e.me b { color:var(--accent); } /* Münzen oben rechts: das Plus bekommt Luft und eine klare Fläche */ .menu-coins { gap:8px; padding-right:2px; } .mc-plus { width:26px; height:26px; flex:0 0 26px; display:grid; place-items:center; font:700 17px/1 var(--ui); padding:0; } /* ============================================================ SHOP AUF DEM HANDY: schmaler Rahmen, mehr Kachel Kopfzeile und Fussleiste fressen auf flachen Schirmen die Höhe, die die Kacheln bräuchten. ============================================================ */ @container (max-height:620px) { #shop .panel { height:min(100cqh, 98cqh); width:min(1040px, 98cqw); } #shop .panel-wrap { padding:4px; } #shop .panel-head { padding:5px 12px; } #shop .panel-head h2 { font-size:15px; } #shop .panel-head .coins { font-size:12px; } #shop .panel-foot { padding:3px 8px; } #shop .panel-foot .seg button { min-height:30px; padding:0 10px; font-size:11px; } .pane-hs { padding:6px 8px 2px; gap:4px; } .pane-hs .label { font-size:8px; } .kx { padding:8px 8px; gap:4px; } .kx-name { font-size:11.5px; } .kx-sub { font-size:8.5px; } .kx-desc { font-size:9.5px; } .kx-actions .btn { min-height:28px; height:28px; font-size:10px; } .pk-bits i { font-size:8.5px; } .pk-stueck { display:none; } /* Steckplätze bleiben sichtbar — sonst liesse sich ein gesteckter Booster nicht mehr herausnehmen. Nur kleiner. */ #pane-boost .slots { gap:5px; } #pane-boost .slot { padding:3px 7px; gap:5px; } #pane-boost .slot .si { font-size:15px; } #pane-boost .slot .sn { font-size:8px; } } /* Der Special-Hinweis ist IMMER da — auch mit null Karten */ .kg-bar { display:block; height:3px; background:rgba(255,255,255,.1); } .kg-bar i { display:block; height:100%; background:#ffd76a; } /* Preistafel unter der Rangliste */ .preistafel { margin:10px 0 4px; padding:8px 10px; border:1px solid var(--border); background:var(--card); } .pt-kopf { font:600 9.5px/1.3 var(--ui); letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; } .pt-row { display:flex; align-items:center; gap:9px; padding:3px 0; } .pt-row + .pt-row { border-top:1px solid rgba(255,255,255,.05); } .pt-m { font-size:14px; line-height:1; } .pt-row b { font:700 12px/1 var(--ui); color:var(--gold); min-width:74px; } .pt-row i { font:400 10px/1 var(--ui); font-style:normal; color:var(--cream); } .pt-row i.matt { color:var(--dim); } .pt-fuss { margin-top:6px; font:300 9.5px/1.4 var(--ui); color:var(--dim); } .bd-prize i { font-style:normal; opacity:.85; } /* Ball-Kacheln auf flachen Schirmen: Werte und Bild geben nach, damit Special-Zeile UND Knöpfe sichtbar bleiben. Vorher wurde der untere Teil der Kachel schlicht abgeschnitten. */ @container (max-height:620px) { .kx-art { min-height:40px; margin-top:8px; } .kx .tier { top:5px; left:5px; padding:2px 6px; font-size:7.5px; } .kx-stats { flex:0 1 auto; min-height:0; overflow:hidden; } .kx-stats .stat { margin-bottom:2px; gap:5px; } .kx-stats .stat .sn { width:42px; font-size:7px; } .kx-stats .stat .bar { height:7px; gap:1px; } .kx-stats .stat .sv { width:30px; font-size:8px; } .kx-frei em { font-size:7.5px; } .kx-actions { gap:4px; } .kx-actions .btn { min-height:26px; height:26px; font-size:9.5px; } .pk-stapel { width:clamp(56px, 34%, 80px); margin:4px auto 5px; } .pk-k1 b { font-size:clamp(18px, 3.6cqh, 26px); } .kx-ico { font-size:38px; } } /* Alle fünf Werte müssen hineinpassen — eine mittendrin abgeschnittene Liste sieht kaputt aus, nicht kompakt. */ @container (max-height:620px) { .kx-stats .stat { margin-bottom:1px; } .kx-stats .stat .bar { height:6px; } .kx-stats .stat .sn { font-size:6.5px; letter-spacing:.06em; } .kx-stats .stat .sv { font-size:7.5px; } .kx-art { min-height:34px; } } /* Handy quer (unter ~480 px hoch): die fünf Wertebalken passen schlicht nicht mehr sinnvoll auf die Kachel. Statt sie halb abzuschneiden, bleiben sie hier weg — die vollen Werte zeigt "Ausbau ›". Sichtbar bleibt, was zum Entscheiden nötig ist: Figur, Zustand, Sammelstand, Special und die Knöpfe. */ @container (max-height:480px) { .kx-stats { display:none; } .kx-art { min-height:48px; } .kx-name { font-size:12.5px; } .kx-actions .btn { min-height:28px; height:28px; } } /* Der Figuren-Fortschritt über den Packs: auf flachen Schirmen eine schmale Zeile statt eines Banners — die Höhe gehört den Kacheln, sonst fehlen unten die Kaufknöpfe. */ @container (max-height:620px) { .hero-track { padding:4px 8px; gap:8px; flex:0 0 auto; } .hero-track img { width:26px; height:26px; } .ht-txt { gap:2px; } .ht-txt b { font-size:11px; } .ht-txt span { display:none; } /* der Satz steht im Popup */ .ht-bar { height:4px; } .ht-n { font-size:11px; } } @container (max-height:480px) { .hero-track { padding:3px 7px; } .hero-track img { width:20px; height:20px; } .ht-txt b { font-size:10px; } } /* Handy quer: der Kartenstapel wird klein, damit der Kaufknopf auf die Kachel passt — ein Pack ohne sichtbaren Preis ist nutzlos. */ @container (max-height:480px) { .pk-stapel { width:clamp(38px, 26%, 58px); margin:2px auto 4px; } .pk-k1 b { font-size:clamp(14px, 3cqh, 20px); } .pk-k1 em { font-size:6px; } .pk-bits i { font-size:7.5px; gap:4px; } .pb-i { width:10px; font-size:8px; flex-basis:10px; } .pk-badge { padding:2px 7px; font-size:7px; } .pack-kx .kx-sub { font-size:7.5px; } .kx { padding:6px 7px; } } /* Gemessen: auf 316 px Höhe war der Kachelinhalt 62 px zu hoch, der Kaufknopf 53 px abgeschnitten. Grösster Posten war der Kartenstapel — der wird jetzt über die HÖHE begrenzt (die Breite folgt dem Seitenverhältnis), und der Fusshinweis weicht. */ @container (max-height:480px) { .pk-stapel { height:clamp(30px, 13cqh, 56px); width:auto; margin:2px auto 3px; } .pk-stapel.solo { height:auto; } .kx { gap:3px; } .kx-fuss { display:none; } .hrow { padding:3px 2px 5px; } .hrow::-webkit-scrollbar { height:6px; } } /* ============================================================ HOCHFORMAT GIBT ES NICHT Hier standen vier Bloecke, die das Menue fuers Hochformat umgebaut haben: eine Spalte, umbrechende Reiter, geschrumpfte Ligen. Damit WAR Hochkant spielbar — und genau das soll es nicht sein. Statt das Menue zu stapeln, kippt jetzt die ganze Buehne (siehe buehneAusrichten in js/render.js): bekommt die vertauschten Masse und eine Drehung um 90 Grad. Das Spiel ist damit IMMER quer, ohne Hinweisbildschirm und ohne zweite Fassung des Layouts, die gepflegt werden will. ============================================================ */ /* Der Briefkasten am PC: schmales hohes Fenster, Bühne bleibt quer und sitzt mittig. Die Drehung braucht es hier nicht — aber eine Transformation schon: NUR sie macht zum Bezugsrahmen für alles, was position:fixed ist. Ohne sie richten sich Menü und Fenster weiterhin am ganzen Browserfenster aus, während die Bühne daneben in ihrem Kasten sitzt. Beim gedrehten Handy fällt das nicht auf, weil die Drehung selbst schon eine Transformation ist. (container-type:size reicht dafür nicht — nachgemessen, contain bleibt "none".) */ body.brief { transform:translateZ(0); } body.gedreht { transform-origin:0 0; /* Nach der Drehung liegt der Kasten links neben dem Bild — translate(0,-100%) schiebt ihn um seine eigene Hoehe zurueck. */ transform:rotate(90deg) translate(0, -100%); overflow:hidden; } /* Die Masse setzt JS in Pixeln, nicht vh/vw: die vh-Einheit wandert auf dem Handy mit der Adressleiste. */ /* ============================================================ BLÄTTERPFEILE IM SHOP Von sieben Pack-Kacheln waren nur vier erreichbar — dass die Reihe seitlich weitergeht, war schlicht nicht zu sehen. Die Pfeile erscheinen nur, wenn es in ihre Richtung noch etwas gibt. ============================================================ */ .pane-hs { position:relative; } .hnav { position:absolute; top:50%; transform:translateY(-50%); width:34px; height:56px; z-index:4; display:none; place-items:center; background:rgba(10,7,4,.86); border:1px solid var(--accent); color:var(--accent); font:400 26px/1 var(--ui); cursor:pointer; box-shadow:0 0 18px rgba(0,0,0,.6); } .hnav.an { display:grid; } .hnav:hover { background:var(--accent); color:#1a1206; } .hnav.l { left:4px; } .hnav.r { right:4px; } @container (max-height:480px) { .hnav { width:26px; height:44px; font-size:20px; } } /* Etwas schmalere Kacheln: es passen mehr ins Bild, bevor man überhaupt blättern muss. */ .kx { flex-basis:clamp(168px, 21cqw, 230px); } /* ============================================================ RANGSTUFEN Die Rangpunkte waren eine Zahl ohne Ziel. Jetzt tragen sie eine Leiter: der Balken am Fuss jedes Liga-Chips zeigt, wie weit es zur nächsten Stufe ist — ein Fortschritt, der immer weitergeht, auch wenn die Wochenrangliste aussichtslos ist. ============================================================ */ .lg-stufe { display:block; width:100%; height:3px; margin-top:4px; background:rgba(255,255,255,.09); } .lg-stufe i { display:block; height:100%; background:var(--st); box-shadow:0 0 7px var(--st); transition:width .5s var(--ease); } /* Im Ergebnisfenster: Stufe, Punkte und der Weg zur nächsten */ .rankline.rang-bar { flex-wrap:wrap; row-gap:5px; border-left:3px solid var(--st); } .rankline.rang-bar .rl-l { color:var(--st); } .rb-track { flex:0 0 100%; height:4px; background:rgba(255,255,255,.09); } .rb-track i { display:block; height:100%; background:var(--st); box-shadow:0 0 8px var(--st); } .rb-next { flex:0 0 100%; font:400 9.5px/1 var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); } /* Der Aufstieg selbst: einmalig, also darf er leuchten */ .rankline.aufstieg { border:1px solid var(--st); background:color-mix(in srgb, var(--st) 14%, transparent); animation:stufeRein .5s var(--ease); } .rankline.aufstieg .rl-l { color:var(--st); font-weight:700; letter-spacing:.1em; } .rankline.aufstieg .rl-p { color:var(--st); } @keyframes stufeRein { 0% { transform:translateX(-14px) scale(.96); opacity:0; } 60% { transform:translateX(0) scale(1.03); } 100% { transform:none; opacity:1; } } /* ============================================================ DER STARTBILDSCHIRM KANN JETZT ALLES Reparieren, Ball wechseln, Werte sehen und ausbauen — ohne den Umweg über den Shop. Vorher musste man dafür suchen. ============================================================ */ /* Zustand als Knopf, wenn es etwas zu reparieren gibt */ .fg-cond.klickbar { cursor:pointer; border-color:var(--accent); background:var(--accent-faint); transition:filter .15s; } .fg-cond.klickbar:hover { filter:brightness(1.25); } .fg-cond.klickbar span { color:var(--accent); } .fg-cond.ewig span { color:var(--ok); } /* Die Bühne mit den Blätterpfeilen links und rechts der Figur */ .fg-buehne { position:relative; display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:0; } .fg-pfeil { flex:0 0 30px; height:56px; display:grid; place-items:center; background:rgba(18,13,9,.72); border:1px solid var(--border-soft); color:var(--muted); font:400 22px/1 var(--ui); cursor:pointer; transition:background .15s, color .15s; } .fg-pfeil:hover { background:var(--card-hi); color:var(--accent); border-color:var(--accent); } /* Die Werte kompakt unter dem Namen */ .fg-stats { display:flex; flex-direction:column; width:100%; max-width:300px; margin-top:4px; } .fg-stats .stat { gap:8px; margin-bottom:3px; } .fg-stats .stat .sn { width:46px; font-size:7.5px; letter-spacing:.08em; } .fg-stats .stat .bar { height:7px; gap:2px; } .fg-stats .stat .sv { width:34px; font-size:8.5px; } .fg-ausbau { width:100%; max-width:300px; margin-top:3px; padding:5px; background:rgba(18,13,9,.72); border:1px solid var(--border); color:var(--muted); font:600 9px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:.15s; } .fg-ausbau:hover { border-color:var(--accent); color:var(--accent); } /* Auf flachen Schirmen weichen die Werte — Reparieren und Ballwechsel bleiben, die sind der Grund für den Umbau. */ /* Auf flachen Schirmen werden die Werte WINZIG statt unsichtbar — sie sind der halbe Grund, warum sie hier stehen. Gemessen passen fuenf Zeilen a 7 px auch auf ein Handy im Querformat. */ @container (max-height:560px) { .fg-stats { max-width:260px; margin-top:2px; } .fg-stats .stat { margin-bottom:1px; gap:6px; } .fg-stats .stat .sn { width:38px; font-size:6px; letter-spacing:.04em; } .fg-stats .stat .bar { height:5px; gap:1px; } .fg-stats .stat .sv { width:28px; font-size:7px; } .fg-ausbau { margin-top:2px; padding:3px; font-size:7.5px; max-width:260px; } .fg-pfeil { height:44px; flex-basis:24px; font-size:18px; } .fg-cond { padding:1px 8px; } .fg-cond b { font-size:10px; } .fg-cond span { font-size:7.5px; } } /* Der Rangstufen-Balken hat die Liga-Knöpfe um 7 px wachsen lassen — gemessen ragten sie damit 2 px aus dem Fenster. Auf flachen Schirmen darum enger. */ @container (max-height:560px) { .lg { padding:5px 3px; } .lg-stufe { margin-top:2px; height:2px; } .menu-grid { gap:8px; } } /* Gemessen: die letzte Grid-Zeile endete 2 px unter dem Fenster. Der Rand oben und unten gibt sie her. */ @container (max-height:560px) { #menu.show { padding:5px 0 3px; } #menu.show > .menu-box { padding:5px 10px 5px; } } /* ============================================================ DIE MITTE IN ZWEI SPALTEN Links die Figur mit ihren Werten, rechts alles zum Anfassen: Ball, Zustand, Reparatur, Ausbau — und darunter die drei Besten. Vorher stand alles untereinander und die Höhe reichte nirgends. ============================================================ */ .m-mitte { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(126px, .95fr); grid-template-areas:"figur info" "figur podest"; grid-template-rows:auto 1fr; align-items:start; align-content:center; gap:6px 10px; } #loadout { grid-area:figur; align-self:center; } .fg-info { grid-area:info; display:flex; flex-direction:column; align-items:stretch; gap:5px; min-width:0; } #podest { grid-area:podest; align-self:start; margin-top:0; } /* Die Figur darf jetzt die ganze Spaltenhöhe nutzen */ .figur { width:100%; } .fg-char { max-height:clamp(90px, 40cqh, 360px); } .fg-stats { max-width:none; width:100%; margin-top:5px; } /* Rechte Spalte: alles gleich breit, gleich hoch, gut zu treffen */ .fg-info .fg-ball { font-size:11px; line-height:1.35; text-align:center; } .fg-info .fg-var { display:inline-block; margin:3px 0 0; } .fg-info .fg-cond { width:100%; justify-content:center; margin:0; } .fg-info .fg-ausbau { max-width:none; margin:0; } /* Das Podest darunter, schmal und ruhig */ .podest { flex-direction:column; align-items:stretch; gap:3px; padding:5px 8px; } .podest .pd-t { text-align:center; } .podest .pd-e { justify-content:flex-start; } .podest .pd-e b { flex:1; max-width:none; } @container (max-height:560px) { .m-mitte { gap:4px 8px; } .fg-info .fg-ball { font-size:9.5px; } .podest { padding:3px 6px; } } /* Gemessen: mit der zweispaltigen Mitte ragten die Liga-Knöpfe 8 px aus dem Fenster. Die Figur gibt sie her — sie ist links ohnehin schmal und hoch. */ @container (max-height:560px) { .fg-char { max-height:clamp(80px, 29cqh, 190px); } .fg-name { padding:3px 10px; } .fg-name b { font-size:11px; } .fg-stats { margin-top:3px; } } /* Die letzten 8 px: enger Reiterabstand und flachere Liga-Knöpfe. Gemessen, nicht geraten — danach passt alles ins Fenster. */ @container (max-height:560px) { .menu-tabs { margin-bottom:5px; } .menu-tabs button { min-height:30px; font-size:11px; } .lg { padding:3px 3px; } .lg b { font-size:9px; } .lg-rang { font-size:11px; padding:0; } } /* ============================================================ MITTE, ENDSTAND Bei der echten Fenstergrösse gemessen (956x444): die Box passt mit 3 px Reserve. Also darf die Figur wieder gross sein — sie ist der Star, nicht der Platzhalter. Rechts stehen Ball, Zustand, Ausbau und Podest dicht beieinander statt verteilt. ============================================================ */ .m-mitte { grid-template-columns:minmax(0, 1.15fr) minmax(140px, .85fr); grid-template-rows:auto auto; align-content:center; gap:6px 12px; } #loadout { align-self:center; } .fg-info { justify-content:flex-end; } #podest { align-self:start; } /* Die Figur füllt die Spalte wieder aus */ .fg-char { max-height:clamp(90px, 54cqh, 340px); } @container (max-height:560px) { .fg-char { max-height:clamp(80px, 50cqh, 240px); } /* Reiter und Ligen dürfen wieder atmen — der Platz ist da */ .menu-tabs { margin-bottom:7px; } .menu-tabs button { min-height:32px; font-size:12px; } .lg { padding:5px 3px; } .lg b { font-size:9.5px; } .lg-rang { font-size:12px; padding:1px 0; } } /* Die rechte Spalte ist EIN Block: Ball, Zustand, Ausbau und die drei Besten stehen zusammen statt über die Höhe verteilt. */ .m-mitte { grid-template-columns:minmax(0, 1.15fr) minmax(140px, .85fr); grid-template-rows:auto; grid-template-areas:"figur spalte"; align-content:center; align-items:center; } .m-spalte { grid-area:spalte; display:flex; flex-direction:column; gap:6px; min-width:0; } .m-spalte .podest { margin:0; } /* ============================================================ MITTE: LINKS DER BALL, RECHTS STATS UND LIGA Links steht alles, was den Ball beschreibt — Figur, Name, Fassung, Zustand. Rechts die Werte unter einer Überschrift und darunter die Liga mit ihren drei Besten. ============================================================ */ /* Überschriften rechts */ .fg-kopf { display:block; padding:0 0 3px; font:700 8.5px/1 var(--ui); letter-spacing:.22em; text-transform:uppercase; color:var(--accent); border-bottom:1px solid var(--border-soft); margin-bottom:4px; } /* Links: Ballname gross, darunter Fassung und Zustand nebeneinander */ .figur .fg-ball { margin-top:3px; font:600 11.5px/1.2 var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--cream); } .fg-zeile { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:4px; flex-wrap:wrap; } .fg-zeile .fg-var { margin:0; } .fg-zeile .fg-cond { margin:0; padding:2px 8px; } /* Rechts: Werte und Ausbau als ein Block */ .fg-info { justify-content:flex-start; gap:4px; } .fg-info .fg-stats { margin:0; } .fg-info .fg-ausbau { margin:2px 0 0; } /* Podest: Überschrift ist die Liga */ .podest { align-items:stretch; } .pd-leer { font:400 9px/1.3 var(--ui); color:var(--dim); text-align:center; } /* Die rechte Spalte darf etwas breiter sein — Werte und Namen sollen nicht auf Kante stehen. */ .m-mitte { grid-template-columns:minmax(0, 1fr) minmax(160px, .95fr); } .fg-info .fg-stats .stat .sn { width:44px; } .fg-info .fg-stats .stat .sv { width:36px; } /* ============================================================ FEINSCHLIFF DER MITTE Rechts mehr Platz: die Werte sind der Grund, warum man hinschaut, und die zwei Knöpfe muss man treffen können. Links bleibt die Figur mit Name, Ball und Zustand. ============================================================ */ .m-mitte { grid-template-columns:minmax(0, .88fr) minmax(210px, 1.12fr); gap:6px 14px; } /* Der Name sitzt sauber unter der Figur, nicht daneben */ .figur { align-items:center; } .figur .fg-name { align-self:center; max-width:100%; } /* ---- Die Werte: grösser und ruhiger ---- */ .fg-info .fg-stats .stat { gap:9px; margin-bottom:4px; } .fg-info .fg-stats .stat .sn { width:52px; font-size:8.5px; letter-spacing:.1em; } .fg-info .fg-stats .stat .bar { height:11px; gap:2px; } .fg-info .fg-stats .stat .sv { width:42px; font-size:10px; } .fg-kopf { font-size:9.5px; padding-bottom:4px; margin-bottom:6px; } /* ---- Die zwei Knöpfe: richtig gross ---- */ .fg-ausbau { padding:9px 8px; font-size:10.5px; letter-spacing:.12em; background:var(--card); border-color:var(--border); color:var(--cream); } .fg-ausbau:hover { background:var(--card-hi); } .fg-zeile .fg-cond.klickbar { padding:7px 14px; } .fg-zeile .fg-cond.klickbar b { font-size:14px; } .fg-zeile .fg-cond.klickbar span { font-size:10px; } .fg-zeile .fg-var { padding:5px 10px; font-size:10px; } .fg-zeile .fg-cond { padding:5px 10px; } .fg-zeile .fg-cond b { font-size:13px; } /* ---- Die Liga mit den drei Besten: breiter und luftiger ---- */ .podest { padding:7px 10px; gap:4px; } .podest .pd-e { gap:7px; padding:1px 0; } .podest .pd-e b { font-size:11.5px; } .podest .pd-e i { font-size:12px; } /* ---- Tagesaufgaben rechts: enger, damit die Mitte Luft hat ---- */ .m-rechts .heute { padding:5px 10px 3px; } .m-rechts .hz { padding:2px 0; } .m-rechts .heute-kopf { margin-bottom:3px; } @container (max-height:560px) { .fg-info .fg-stats .stat .bar { height:9px; } .fg-info .fg-stats .stat .sn { font-size:7.5px; width:46px; } .fg-info .fg-stats .stat .sv { font-size:9px; width:38px; } .fg-ausbau { padding:7px 6px; font-size:9.5px; } } /* ============================================================ MITTE: FESTE GRENZEN Die rechte Spalte hatte keine Obergrenze — die Werte-Balken haben sie breitgeschoben, bis die Figur aus ihrer Spalte fiel und links über die Knöpfe lief. Jetzt hat jede Seite einen Mindest- UND einen Höchstanteil, und beide Kästen rechts sind exakt gleich breit. ============================================================ */ .m-mitte { grid-template-columns:minmax(130px, 0.92fr) minmax(190px, 1.08fr); gap:6px 12px; } /* Nichts darf seine Spalte sprengen */ .m-mitte > *, .m-spalte > * { min-width:0; } .figur, .m-spalte { min-width:0; max-width:100%; } /* Beide Kästen rechts exakt gleich breit */ .m-spalte { align-items:stretch; } .m-spalte > .fg-info, .m-spalte > .podest { width:100%; box-sizing:border-box; } /* Die Werte dürfen schrumpfen statt zu drängeln */ .fg-info .fg-stats { width:100%; } .fg-info .fg-stats .stat { min-width:0; } .fg-info .fg-stats .stat .bar { flex:1 1 0; min-width:0; } .fg-info .fg-stats .stat .sn { flex:0 0 auto; width:46px; font-size:8px; } .fg-info .fg-stats .stat .sv { flex:0 0 auto; width:38px; font-size:9.5px; } .fg-info .fg-stats .stat .bar i { min-width:0; } /* Etwas kleiner als zuletzt — es war zu wuchtig */ .fg-info .fg-stats .stat { gap:7px; margin-bottom:3px; } .fg-info .fg-stats .stat .bar { height:9px; } .fg-ausbau { padding:7px 6px; font-size:9.5px; } /* Fassung und Zustand bleiben in EINER Zeile unter dem Ballnamen */ .fg-zeile { flex-wrap:nowrap; gap:5px; } .fg-zeile .fg-var { padding:4px 8px; font-size:9px; white-space:nowrap; } .fg-zeile .fg-cond { padding:4px 8px; white-space:nowrap; } .fg-zeile .fg-cond b { font-size:12px; } .fg-zeile .fg-cond.klickbar { padding:5px 10px; } .fg-zeile .fg-cond.klickbar b { font-size:13px; } .fg-zeile .fg-cond.klickbar span { font-size:9.5px; } /* Podest wieder etwas kompakter */ .podest { padding:6px 9px; gap:3px; } .podest .pd-e b { font-size:11px; } .podest .pd-e i { font-size:11px; } /* ============================================================ STÖRKARTEN-BANNER Eingefroren heisst: der Wurf geht nicht. Wer das nicht sieht, hält das Spiel für kaputt — genau das ist passiert. ============================================================ */ #stoerung { position:fixed; left:50%; top:22%; transform:translate(-50%, -8px); z-index:30; display:none; flex-direction:column; align-items:center; gap:2px; padding:10px 22px; pointer-events:none; border:2px solid #bfe8ff; background:rgba(10,24,38,.86); box-shadow:0 0 40px rgba(120,190,255,.45); } #stoerung.show { display:flex; animation:stoerRein .25s var(--ease); } #stoerung b { font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:.08em; text-transform:uppercase; color:#dff2ff; } #stoerung i { font:700 15px/1 var(--ui); font-style:normal; color:#bfe8ff; font-variant-numeric:tabular-nums; } #stoerung.blind { border-color:#a08ec8; background:rgba(20,12,32,.9); box-shadow:0 0 40px rgba(160,142,200,.45); } #stoerung.blind b { color:#e2d8f5; } #stoerung.blind i { color:#c0aee0; } @keyframes stoerRein { from { opacity:0; transform:translate(-50%, -18px) scale(.9); } } @container (max-height:560px) { #stoerung { top:16%; padding:6px 14px; } #stoerung b { font-size:15px; } #stoerung i { font-size:12px; } } /* ============================================================ LAUFENDE KARTEN IM SPIEL Vorher stand dort nur "❄️ 3s" — ein Zeichen und eine Zahl. Jetzt trägt jede Karte ihren Namen und ihre Restzeit, und man sieht auf einen Blick, ob sie einem hilft oder schadet. ============================================================ */ .hud-fx { display:flex; flex-wrap:wrap; gap:5px; align-items:center; } .fxc { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; font-size:13px; line-height:1; background:rgba(10,8,6,.78); border:1px solid var(--border); } .fxc b { font:600 9px/1 var(--ui); letter-spacing:.12em; text-transform:uppercase; color:var(--cream); } .fxc i { font:700 11px/1 var(--ui); font-style:normal; font-variant-numeric:tabular-nums; color:var(--accent); } .fxc.gut { border-color:rgba(255,138,0,.5); } .fxc.schlecht { border-color:#7fd0f0; background:rgba(10,26,40,.85); animation:bonusPuls 1.2s infinite; } .fxc.schlecht b { color:#dff2ff; } .fxc.schlecht i { color:#bfe8ff; } @container (max-height:560px) { .fxc { padding:2px 6px; font-size:11px; gap:3px; } .fxc b { font-size:7.5px; letter-spacing:.06em; } .fxc i { font-size:9.5px; } } /* Die Effektreihe braucht mehr Breite als die alte 36-Prozent- Grenze: mit Namen statt nackten Zeichen passen sonst nur drei Karten hin, der Rest wurde rechts abgeschnitten. */ #hud-info { max-width:52%; } .hud-fx { justify-content:flex-end; max-width:100%; } @container (max-height:560px) { #hud-info { max-width:56%; } } /* Herausfordern direkt aus der Rangliste — nur bei denen, die gerade wirklich da sind. Wer offline ist, bekommt keinen Knopf statt eines Knopfes, der ins Leere führt. */ .bd-fordern { flex:0 0 auto; width:30px; height:26px; padding:0; display:grid; place-items:center; font-size:13px; cursor:pointer; background:var(--accent-faint); border:1px solid var(--accent); color:var(--accent); transition:filter .15s; } .bd-fordern:hover { filter:brightness(1.35); } /* ============================================================ INSTALLIERT ALS APP: DIE OBERE RECHTE ECKE GEHOERT DEM SYSTEM Als PWA legt das Betriebssystem dort seinen eigenen Knopf hin (Schliessen bzw. Menue). Unsere Schliess-Kreuze sassen genau darunter — man traf staendig den falschen. Im App-Modus rueckt darum alles, was oben rechts klebt, nach innen; dazu die Sicherheitsraender des Geraets (Notch, abgerundete Ecken). ============================================================ */ /* ============================================================ DIE OBERE RECHTE ECKE GEHOERT UNS NICHT Dort sitzt fremdes Zeug: der Schliessen-Knopf der installierten App, und auf der Website der Zurueck-Knopf der Seite drumherum. Beides lag genau auf unseren ✕-Knoepfen — man traf den falschen. Darum haelt --sys-rechts diesen Streifen frei. Die Regeln stehen IMMER, nur der Wert wechselt. WICHTIG — nur reservieren, wenn dort WIRKLICH etwas liegt: installierte App ihr Schliessen-Knopf sitzt dort Vollbild der Hinweis des Browsers sitzt dort ?rand= die einbettende Seite sagt es uns Vorher genuegte ein Fingergeraet. Das war zu grob: auf dem Handy im normalen Browser und in fremden Rahmen (CrazyGames) liegt dort nichts, und der Streifen war schlicht 46 px verschenkte Breite. Auf dem Startbildschirm sah man rechts eine leere Spalte, und im Spiel rutschten die Namen unnatuerlich nach innen. ============================================================ */ :root { --sys-rechts: 0px; } .panel-head, .popup .panel-head { padding-right: calc(20px + var(--sys-rechts) + env(safe-area-inset-right, 0px)); } #menu.show > .menu-box { padding-right: calc(10px + var(--sys-rechts) + env(safe-area-inset-right, 0px)); } #hud-top { padding-right: calc(22px + var(--sys-rechts) + env(safe-area-inset-right, 0px)); } /* Sagt uns die einbettende Seite per ?rand=, dass dort ihr eigener Knopf sitzt, gilt der groessere der beiden Werte — Raender addieren sich nicht, sie ueberlagern sich. */ body.rand-aussen { --sys-rechts: var(--sys-rand-aussen, 0px); } /* Im Vollbild kommt der Systemknopf dazu — auch dort gewinnt der groessere Wert, darum die genauere Regel. */ body.rand-aussen.vollbild { --sys-rechts: max(var(--sys-rand-aussen, 0px), 52px); } @media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) { :root { --sys-rechts: 52px; } /* Platz fuer den System-Knopf */ #hud-top { padding-top: calc(16px + env(safe-area-inset-top, 0px)); } /* Linker Rand und unten: Notch und Home-Balken beachten */ #menu.show > .menu-box { padding-left: calc(10px + env(safe-area-inset-left, 0px)); padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)); } .popup .panel-wrap { padding-right: calc(18px + env(safe-area-inset-right, 0px)); } } /* Auf flachen Schirmen (Handy quer) sind die Kreuze zu klein zum Treffen — sie bekommen eine ordentliche Flaeche. */ @container (max-height:560px) { .x-btn { min-width:40px; min-height:40px; } } /* ============================================================ AUSBAU-ANSICHT OHNE SCROLLEN Kopf mit Bild, Name und Zustand in einer Zeile. Darunter zwei Spalten: links Werte + Kartenstand, rechts die Ausbaupfade. Unten die Knoepfe. Alle Masse haengen an der Hoehe — auf dem Handy schrumpft alles mit, statt zu scrollen. ============================================================ */ #pane-balls .shop-detail { display:flex; flex-direction:column; overflow:hidden; padding:4px 8px 8px; gap:clamp(4px, 1.2cqh, 10px); } .detail-kopf { flex:0 0 auto; display:flex; align-items:center; gap:12px; } .dk-art { width:clamp(34px, 7cqh, 56px); height:clamp(34px, 7cqh, 56px); object-fit:contain; } .dk-txt h3 { font:600 clamp(13px, 2.6cqh, 18px)/1.2 var(--ui); letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; gap:10px; } .dk-txt .tier { margin:0; } .dk-zustand { display:inline-flex; align-items:center; gap:8px; margin-top:3px; } .dk-zustand .cond { width:120px; } .dk-zustand b { font:700 clamp(10px, 2cqh, 13px)/1 var(--ui); } .dk-zustand.ewig { font:600 9.5px/1 var(--ui); letter-spacing:.12em; text-transform:uppercase; color:var(--ok); } .detail-grid { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(6px, 1.6cqw, 18px); align-content:start; overflow:hidden; } .dg-links, .dg-rechts { min-width:0; min-height:0; } .dg-links .label, .dg-rechts .label { margin:0 0 clamp(2px,0.8cqh,6px); } /* Werte-Balken hoehenabhaengig */ .dg-links .stat { gap:8px; margin-bottom:clamp(2px, 0.9cqh, 8px); } .dg-links .stat .sn { width:clamp(40px, 8cqw, 66px); font-size:clamp(7px, 1.6cqh, 10px); } .dg-links .stat .bar { height:clamp(7px, 1.8cqh, 13px); gap:2px; } .dg-links .stat .sv { width:clamp(30px, 6cqw, 50px); font-size:clamp(8px, 1.8cqh, 11px); } .dg-links .cardbar { margin-top:clamp(4px, 1.2cqh, 10px); } .dg-links .hint-line { margin-top:clamp(4px, 1cqh, 8px); font-size:clamp(9px, 1.8cqh, 11px); } /* Ausbaupfade: Name · Pips · Preis in EINER schlanken Zeile */ /* Vier feste Spalten: Name · Punkte · Wert · Preis. Vorher war das Flex mit einem 1fr-Bereich fuer die Punkte — dadurch wuchs der Knopf ueber die halbe Seite und die Punkte verschwanden. */ .dg-rechts .upg { display:grid; grid-template-columns:clamp(44px,8cqw,66px) 1fr clamp(34px,5cqw,48px) clamp(62px,9cqw,86px); align-items:center; gap:clamp(4px, .9cqw, 10px); padding:clamp(1px, 0.7cqh, 5px) 0; border-bottom:1px solid rgba(255,255,255,.05); } .dg-rechts .upg:last-child { border-bottom:0; } .dg-rechts .upg .un { min-width:0; font:600 clamp(7.5px, 1.7cqh, 10px)/1 var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dg-rechts .upg .pips { min-width:0; display:flex; gap:3px; } .dg-rechts .upg .upg-wert { font:700 clamp(8px,1.7cqh,10px)/1 var(--ui); color:var(--text); text-align:right; } .dg-rechts .upg .btn { width:100%; min-width:0; height:clamp(22px, 4.4cqh, 30px); min-height:0; font-size:clamp(8.5px, 1.7cqh, 11px); padding:0 6px; } #pane-balls .shop-detail .actions { flex:0 0 auto; margin:0; gap:8px; } #pane-balls .shop-detail .actions .btn { height:clamp(30px, 6cqh, 44px); min-height:0; } /* Schmale Handys: die zwei Spalten ruecken enger, bleiben aber zwei */ @container (max-width:720px) { .detail-grid { grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); } .dk-txt h3 { gap:6px; } } /* Handy quer: fuenf Ausbaupfade muessen in ~120 px Hoehe passen. Nachgerechnet: Panel 338 − Kopf, Fuss, Zurueck-Zeile, Ballkopf und Knoepfe laesst dem Grid rund 124 px — also 24 px je Pfad. */ @container (max-height:480px) { .zoom-head { padding:0; } .zoom-head .btn { min-height:26px; height:26px; font-size:10px; padding:0 10px; } #pane-balls .shop-detail { padding:2px 6px 4px; gap:3px; } .detail-kopf { gap:8px; } .dk-art { width:28px; height:28px; } .dk-txt h3 { font-size:11px; gap:6px; } .dk-txt .tier { padding:2px 6px; font-size:7px; margin:0; } .dk-zustand { margin-top:1px; } .dk-zustand .cond { width:80px; } .detail-grid { gap:8px; } .dg-rechts .upg { padding:0; gap:5px; border-bottom:0; } .dg-rechts .upg .btn { height:21px; min-width:64px; font-size:8.5px; } .dg-rechts .upg .un { flex-basis:38px; font-size:7px; } .dg-rechts .upg .pips i { width:9px; height:9px; } .dg-links .stat { margin-bottom:1px; } .dg-links .stat .bar { height:6px; } .dg-links .cardbar { margin-top:2px; } .dg-links .cardbar .cb-l { font-size:7px; } .dg-links .hint-line { display:none; } #pane-balls .shop-detail .actions .btn { height:26px; font-size:10px; } } /* Die letzten Pixel: der Ballkopf wird auf flachen Schirmen EINzeilig — Name, Stufe und Zustand nebeneinander. */ @container (max-height:480px) { .dk-txt { display:flex; align-items:center; gap:10px; min-width:0; } .dk-txt h3 { white-space:nowrap; } .dk-zustand { margin-top:0; } .detail-kopf { margin-bottom:0; } #pane-balls .shop-detail { gap:2px; } .dg-rechts .upg .btn { height:20px; } } /* ============================================================ DIE DREI FASSUNGEN — White, Silber, Gold Plakette, Figur-Glow und die Sammel-Leiter auf der Kachel. ============================================================ */ .fg-var { cursor:pointer; } .fg-var.s1 { color:#f2f4f8; border-color:#f2f4f8; background:rgba(242,244,248,.10); } .fg-var.s2 { color:#b9c6d4; border-color:#b9c6d4; background:rgba(185,198,212,.12); } .fg-var.s3 { color:#ffd76a; border-color:#ffd76a; background:rgba(255,215,106,.12); } .fg-char.gold { filter:drop-shadow(0 10px 14px rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(255,215,106,.55)); } /* Die Leiter: drei Plaettchen W / S / G */ .ks-reihe { display:flex; gap:4px; justify-content:center; } .ks { width:18px; height:18px; display:grid; place-items:center; font:700 9px/1 var(--ui); font-style:normal; color:var(--dim); border:1px solid var(--border); background:rgba(255,255,255,.04); } .ks.frei { color:#0e0a06; } .ks.frei:nth-child(1) { background:#f2f4f8; border-color:#f2f4f8; } .ks.frei:nth-child(2) { background:#b9c6d4; border-color:#b9c6d4; } .ks.frei:nth-child(3) { background:#ffd76a; border-color:#ffd76a; } .ks.an { box-shadow:0 0 10px rgba(255,255,255,.55); transform:scale(1.12); } @container (max-height:480px) { .ks { width:14px; height:14px; font-size:7.5px; } } /* Auf flachen Schirmen darf die Fassungs-Leiter keine vierte Zeile kosten — Name und Plaettchen ruecken nebeneinander, damit die Knoepfe unter der Kachel sichtbar bleiben. */ @container (max-height:480px) { /* Flach: die Fassungs-Felder duennen aus, statt umzubrechen. */ .kx-ed { padding:4px 5px 5px; gap:3px; } .ed { min-height:26px; font-size:7px; } .ed em { font-size:6.5px; } .ed-kopf span, .ed-kopf i { font-size:7.5px; } } /* Die Fassungs-Leiter in der Ausbau-Ansicht: gleiche Sprache wie auf der Kachel, nur etwas luftiger — hier ist Platz. */ .dg-special { margin-top:8px; width:100%; } /* ============================================================ DIE SPECIAL-KARTE Der Unterschied muss beim Aufdecken sofort ins Auge springen — vorher war es ein goldener Rand, den man leicht uebersah. Jetzt: Folie, die ueber die Karte wandert, ein doppelter Rahmen, vier Zierecken und ein Band quer ueber die obere Ecke. ============================================================ */ .rc.istsp { --rc:#ffd76a; } .rc.istsp .rc-face { border-width:3px; background: linear-gradient(150deg, rgba(255,240,190,.10), transparent 42%), linear-gradient(168deg, #4a3712, #241a09 52%, #120c05); box-shadow:inset 0 0 0 1px rgba(255,215,106,.55), inset 0 0 0 4px rgba(0,0,0,.55), inset 0 0 0 5px rgba(255,215,106,.35), inset 0 0 40px rgba(255,215,106,.20); } .rc.istsp .rc-back { border-width:3px; box-shadow:0 0 24px rgba(255,215,106,.55), inset 0 0 0 3px rgba(0,0,0,.6), inset 0 0 0 4px rgba(255,215,106,.4); } .rc.istsp .rc-kopf { background:linear-gradient(180deg, rgba(255,215,106,.22), rgba(0,0,0,.3)); } .rc.istsp .rc-kopf b { color:#ffeab0; text-shadow:0 1px 0 rgba(0,0,0,.7); } .rc.istsp .rc-art { box-shadow:inset 0 0 0 1px rgba(255,215,106,.6), inset 0 0 22px rgba(255,215,106,.18); } .rc.istsp .rc-fuss { background:linear-gradient(0deg, rgba(255,215,106,.24), rgba(0,0,0,.25)); color:#ffeab0; } /* Die Folie: ein schraeger Schimmer, der langsam ueber die Karte wandert. Liegt UEBER dem Inhalt, aber ohne ihn zu verdecken. */ .rc-folie { position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen; opacity:.5; background:linear-gradient(115deg, transparent 30%, rgba(120,220,255,.30) 40%, rgba(255,255,255,.55) 47%, rgba(255,190,240,.32) 54%, transparent 66%); background-size:260% 260%; animation:folieWandern 4.5s linear infinite; } @keyframes folieWandern { from { background-position:130% 0; } to { background-position:-40% 0; } } /* Das Band quer ueber die obere linke Ecke */ .rc-band { position:absolute; z-index:4; top:21%; left:-28%; width:66%; transform:rotate(-38deg); pointer-events:none; /* Rechtsbuendig: das linke Ende des Bandes liegt ausserhalb der Karte und wird abgeschnitten — der Text muss ans sichtbare Ende, sonst stand da "ECIAL". */ text-align:right; padding-right:9%; padding:1.5cqw 0; background:linear-gradient(180deg,#ffe08a,#d99a1c); color:#241a09; font:800 clamp(4px, 5cqw, 10px)/1 var(--ui); letter-spacing:.16em; text-transform:uppercase; box-shadow:0 2px 6px rgba(0,0,0,.6); } /* Vier Zierecken */ .rc-eck { position:absolute; z-index:4; font-size:min(13px, 8cqw); color:#ffd76a; text-shadow:0 0 8px rgba(255,215,106,.9); pointer-events:none; } .rc-eck.lo { top:3px; left:4px; } .rc-eck.ro { top:3px; right:4px; } .rc-eck.lu { bottom:3px; left:4px; } .rc-eck.ru { bottom:3px; right:4px; } .rc.istsp .rc-stein { display:none; } /* die Ecke gehoert dem Band */ /* Aufgedeckt pulsiert sie und wirft Licht nach aussen */ .rc.istsp.up { animation:rcPop .38s var(--ease), spPuls 2.2s .3s infinite; } @keyframes spPuls { 0%,100% { filter:brightness(1) drop-shadow(0 0 10px rgba(255,215,106,.5)); } 50% { filter:brightness(1.14) drop-shadow(0 0 26px rgba(255,215,106,.85)); } } /* Auf winzigen Karten (Mega-Pack: 25 Stueck auf einem Schirm) bleibt nur, was man auf einen Blick erfasst: Bild, Name, Fuss. Typenzeile und Zierecken kosten dort nur Platz. */ @container (max-width:104px) { .rc-typ { display:none; } .rc-eck { display:none; } .rc-kopf { padding:2cqw; } } @container (max-width:74px) { .rc-fuss { letter-spacing:0; } .rc-band { font-size:0; padding:2.5cqw 0; } /* nur noch der goldene Streifen */ } /* ============================================================ CHEATS-KARTEN AUF DER STARTSEITE Drei Steckplaetze unter den Stats. Belegt zeigt Zeichen, Name und Ladungen, leer ein Plus, ueber dem Ligalimit ein Schloss. ============================================================ */ .ch-kopf { display:flex; align-items:baseline; gap:6px; margin-top:clamp(4px,1.2cqh,10px); } .ch-kopf i { font:400 8px/1 var(--ui); font-style:normal; letter-spacing:.08em; text-transform:none; color:var(--dim); } .ch-reihe { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; width:100%; max-width:300px; } .ch-slot { display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 3px 4px; background:rgba(255,255,255,.03); border:1px solid var(--border); cursor:pointer; min-width:0; } .ch-slot:hover { border-color:var(--accent); } .ch-ico { font-size:clamp(13px, 2.6cqh, 20px); line-height:1.1; } .ch-nm { font:600 7px/1.1 var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ch-n { font:700 7.5px/1 var(--ui); color:var(--gold); } .ch-slot.voll { border-color:color-mix(in srgb, var(--accent) 55%, transparent); background:var(--accent-faint); } .ch-slot.voll .ch-nm { color:var(--text); } /* Leer heisst: hier fehlt etwas. Das Plus darf ruhig auffallen. */ .ch-slot:not(.voll):not(.zu) .ch-ico { color:var(--accent); font-weight:700; } .ch-slot.zu { opacity:.4; cursor:default; } @container (max-height:480px) { .ch-slot { padding:3px 2px; } .ch-nm { font-size:6px; } } /* ============================================================ DIE FASSUNGEN NEBENEINANDER (Ausbau-Ansicht) Vier Kacheln: Normal, White, Silber, Gold. Jede zeigt die Figur, den Bonus und den genauen Kartenstand. Freigeschaltete lassen sich antippen, gesperrte sagen, wie viel noch fehlt. ============================================================ */ .vr-kopf { display:flex; align-items:baseline; gap:8px; } .vr-kopf i { font:400 8.5px/1 var(--ui); font-style:normal; letter-spacing:.06em; text-transform:none; color:var(--dim); } .vr-reihe { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:4px; } .vr { position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 3px 4px; min-width:0; cursor:default; background:rgba(255,255,255,.03); border:1px solid var(--border); } .vr.frei { cursor:pointer; } .vr.frei:hover { border-color:var(--fk, var(--accent)); } .vr-bild { width:100%; display:grid; place-items:center; overflow:hidden; height:clamp(30px, 9cqh, 74px); } .vr-bild img { max-width:100%; max-height:100%; object-fit:contain; } .vr b { font:700 8px/1.1 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--fk, var(--muted)); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .vr i { font:400 7px/1.1 var(--ui); font-style:normal; color:var(--dim); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .vr-zahl { font:700 7.5px/1 var(--ui); color:var(--dim); } .vr-zahl.voll { color:var(--fk, var(--accent)); } .vr .kg-bar { width:100%; margin-top:2px; } .vr .kg-bar i { background:var(--fk, var(--accent)); } /* Gesperrt: die Figur bleibt als Schatten sichtbar — man soll sehen, was einen erwartet, nicht nur ein leeres Feld. */ .vr.zu .vr-bild img { filter:grayscale(1) brightness(.4); } .vr.zu { opacity:.85; } /* Die vier Farben */ .vr.s0 { --fk:#9aa4b2; } .vr.s1 { --fk:#f2f4f8; } .vr.s2 { --fk:#b9c6d4; } .vr.s3 { --fk:#ffd76a; } .vr.frei.s1 .vr-bild img { filter:drop-shadow(0 0 7px rgba(242,244,248,.55)); } .vr.frei.s2 .vr-bild img { filter:drop-shadow(0 0 8px rgba(185,198,212,.65)); } .vr.frei.s3 .vr-bild img { filter:drop-shadow(0 0 10px rgba(255,215,106,.75)); } /* Getragen */ .vr.an { border-color:var(--fk); background:color-mix(in srgb, var(--fk) 14%, transparent); } .vr-an { position:absolute; top:2px; right:3px; font:700 9px/1 var(--ui); color:var(--fk); } @container (max-height:480px) { .vr { padding:3px 2px; } .vr-bild { height:clamp(22px, 7cqh, 48px); } .vr i { display:none; } } /* ============================================================ DER WEG AUS DEM VOLLBILD Im Vollbild legt der Browser oben rechts seinen eigenen Schliessen-Knopf ab. Der lag bisher auf dem Münzstand — man wollte die Münzen antippen und verliess das Spiel. Jetzt steht unser Vollbild-Knopf ganz aussen (rechts von den Münzen) und bekommt im Vollbild eine Beschriftung. Damit ist er ein richtiger Knopf mit eigener Fläche: der Systemknopf liegt dann auf IHM, wo er wenigstens dasselbe tut. ============================================================ */ /* Ueber den Bezeichner, nicht ueber Klassen: an .ico haengen mehrere gleich starke Regeln in verschiedenen Container-Bloecken, und je nach Fensterbreite gewann mal die eine, mal die andere. #btn-fs2 gewinnt immer — und meint genau diesen einen Knopf. */ .fs-txt { display:none; } #btn-fs2.drin { flex:0 0 auto; width:auto; min-width:0; gap:6px; padding:0 12px; display:flex; align-items:center; justify-content:center; border-color:var(--accent); color:var(--accent); } #btn-fs2.drin .fs-txt { display:inline-block; font:700 11px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; } #btn-fs2.drin svg { flex:0 0 auto; } /* Im Vollbild denselben Streifen freihalten wie in der installierten App — auch am Schreibtisch, wo sonst 0 gilt. */ body.vollbild { --sys-rechts: 52px; } @container (max-width:720px) { #btn-fs2.drin { padding:0 8px; } #btn-fs2.drin .fs-txt { font-size:9.5px; letter-spacing:.08em; } } /* ============================================================ SCHWEIFE IM SHOP Eine Reihe unter den Bällen. Jede Kachel zeichnet ihren Schweif selbst — mit derselben Funktion wie das Spiel, damit die Vorschau nie etwas anderes zeigt als der Wurf danach. ============================================================ */ /* Die Schweifreihe holt sich ihre Hoehe FEST, sonst quetschen die Ballkacheln (flex:1) sie zusammen und die Namen werden unten abgeschnitten. Die Kacheln geben stattdessen etwas ab. */ .sw-kopf { flex:0 0 auto; display:flex; align-items:baseline; gap:8px; margin-top:6px; } .sw-kopf i { font:400 8.5px/1 var(--ui); font-style:normal; letter-spacing:.06em; text-transform:none; color:var(--dim); } .sw-reihe { flex:0 0 auto; height:clamp(74px, 15cqh, 104px); gap:6px; padding-bottom:4px; } .sw { position:relative; flex:0 0 auto; width:clamp(96px, 15cqw, 150px); display:flex; flex-direction:column; align-items:stretch; gap:2px; padding:5px 6px 6px; background:rgba(255,255,255,.03); border:1px solid var(--border); cursor:pointer; } .sw:hover { border-color:var(--accent); } .sw-bild { display:block; width:100%; height:clamp(28px, 5.5cqh, 46px); background:radial-gradient(circle at 50% 70%, rgba(255,138,0,.10), transparent 70%), rgba(0,0,0,.30); } .sw b { font:700 8.5px/1.1 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sw i { font:400 7.5px/1.2 var(--ui); font-style:normal; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sw.an { border-color:var(--accent); background:var(--accent-faint); } .sw.an i { color:var(--accent); } .sw-an { position:absolute; top:3px; right:5px; font:700 10px/1 var(--ui); color:var(--accent); } /* Noch nicht gefunden: die Vorschau bleibt sichtbar, aber blass — man soll wissen, was einen erwartet. */ .sw.zu { cursor:default; } .sw.zu .sw-bild { filter:grayscale(1) brightness(.45); } .sw.zu b, .sw.zu i { color:var(--dim); } .sw-schloss { position:absolute; top:3px; right:5px; font-size:9px; opacity:.7; } /* Auf dem Handy quer ist die Hoehe knapp: dort wird die Kachel zur reinen Vorschau, der Name liegt UNTEN DARIN statt darunter. Das spart die Textzeile, ohne den Namen zu verlieren — und die Ballkacheln darueber behalten ihre Knoepfe. */ @container (max-height:480px) { .sw-kopf { margin:0; font-size:7.5px; line-height:1.1; } .sw-kopf i { font-size:7px; } .sw-reihe { height:40px; gap:4px; padding:2px 2px 3px; } .sw { width:clamp(74px, 12cqw, 104px); padding:0; overflow:hidden; } .sw-bild { height:100%; } .sw i { display:none; } .sw b { position:absolute; left:0; right:0; bottom:0; padding:2px 3px 2px; font-size:7px; letter-spacing:.04em; text-align:center; background:linear-gradient(0deg, rgba(0,0,0,.86), transparent); } .sw-an, .sw-schloss { top:1px; right:2px; font-size:8px; } } /* Reiter über dem Zier-Streifen: eine Fläche, drei Sammlungen. */ .zr-reiter { flex:0 0 auto; display:flex; gap:5px; margin-top:5px; } .zr { position:relative; display:flex; align-items:center; gap:5px; padding:4px 9px; font:700 8.5px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); background:rgba(255,255,255,.03); border:1px solid var(--border); cursor:pointer; } .zr i { font:400 8px/1 var(--ui); font-style:normal; color:var(--dim); } .zr:hover { border-color:var(--accent); } .zr.an { border-color:var(--accent); background:var(--accent-faint); color:var(--accent); } .zr.an i { color:var(--accent); } /* Der Punkt sagt: hier fehlt noch etwas in der Sammlung. */ .zr-punkt { position:absolute; top:-3px; right:-3px; width:6px; height:6px; background:var(--accent); border-radius:50%; box-shadow:0 0 6px var(--accent); } @container (max-height:480px) { .zr-reiter { margin-top:2px; gap:4px; } .zr { padding:3px 6px; font-size:7.5px; } .zr i { font-size:7px; } } /* ============================================================ SPRACHE — DE / EN mit Fahne Beide Fahnen stehen nebeneinander, die aktive ist hervorgehoben. Ein Umschalter mit nur einem Zustand zwingt zum Raten, welche Sprache gerade läuft — bei einem Spiel, das zur Hälfte im Ausland gespielt wird, ist das genau falsch. ============================================================ */ .lang-seg { display:flex; gap:0; flex:0 0 auto; align-self:stretch; } .lang-seg .lg-b { display:flex; align-items:center; gap:5px; padding:0 8px; min-height:100%; cursor:pointer; background:linear-gradient(168deg, #241b12, #171109); border:1px solid var(--border); box-shadow:3px 3px 0 rgba(0,0,0,.5); font:700 10px/1 var(--ui); letter-spacing:.12em; color:var(--dim); } .lang-seg .lg-b + .lg-b { border-left:0; } .lang-seg .lg-b:hover { color:var(--text); border-color:var(--accent); } .lang-seg .lg-b em { font-style:normal; } .flg { width:17px; height:12px; flex:0 0 auto; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.6); } /* Nicht gewählt: die Fahne tritt zurück, damit die aktive führt. */ .lang-seg .lg-b:not(.an) .flg { filter:grayscale(.75) brightness(.75); } .lang-seg .lg-b.an { color:#000; background:var(--accent); border-color:var(--accent); } .lang-seg .lg-b.an .flg { box-shadow:0 0 0 1px rgba(0,0,0,.45); } /* Schmal: die Buchstaben fliegen raus, die Fahne bleibt — sie ist das, was man auf einen Blick erkennt. */ @container (max-width:900px) { .lang-seg .lg-b { padding:0 6px; } .lang-seg .lg-b em { display:none; } } @container (max-height:480px) { .flg { width:15px; height:10.5px; } } /* Schmale Bühne (PC mit hohem Fenster, kleines Tablet): die Reiterleiste ist der breiteste Block. Das Logo fliegt raus, die Reiter rücken zusammen — sonst schiebt die Leiste den Münzstand und den Sprachknopf aus dem Bild. */ @container (max-width:660px) { .tab-logo { display:none; } .menu-tabs { gap:4px; } .menu-tabs button { padding:0 8px; font-size:11px; } .menu-tabs button.ico { flex:0 0 34px; } .menu-coins { padding:3px 7px 3px 8px; gap:4px; } .menu-coins b { font-size:11px; } .lang-seg .lg-b { padding:0 5px; } .lang-seg .lg-b em { display:none; } } /* Die zwei harten Tagesaufgaben: erkennbar, aber nicht laut. Das „3×" sagt in einem Zeichen, warum das Ziel dreimal so hoch ist. */ .hz.hart .hz-t em { font-style:normal; font-weight:800; letter-spacing:.02em; color:var(--gold); } .hz.hart .hz-bar i { background:linear-gradient(90deg, var(--accent), var(--gold)); } /* Fünf Zeilen statt drei — enger gestellt, damit die Spalte gleich hoch bleibt und der Wochen-Knopf darunter sichtbar bleibt. */ .heute .hz { min-height:0; } @container (max-height:620px) { .heute .hz { padding-top:2px; padding-bottom:2px; } } @container (max-height:480px) { .heute .hz { padding-top:1px; padding-bottom:1px; } .hz-t { font-size:8.5px; } } /* ============================================================ FITS — eigene Fläche, Kacheln in Ballgrösse Der alte Streifen unter den Bällen war 40 px hoch und abgedunkelt: man sah nicht, was man wählt. Hier bekommt die Vorschau den Platz, um den es geht. ============================================================ */ #pane-fits { flex:1; display:flex; flex-direction:column; min-height:0; padding:8px 10px 6px; } .fit-kx { flex:0 0 clamp(180px, 22cqw, 240px); } .fit-bild { display:block; width:100%; flex:1 1 auto; min-height:0; /* Deutlich heller als der Streifen vorher — eine Vorschau, die man nur erahnt, ist keine. */ background: radial-gradient(circle at 50% 62%, rgba(255,138,0,.16), transparent 72%), linear-gradient(168deg, #2a2019, #17110b); box-shadow:inset 0 0 0 1px var(--border); } .fit-kx.an { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset, 6px 6px 0 rgba(0,0,0,.5); } .fit-kx.an .fit-bild { box-shadow:inset 0 0 0 1px var(--accent); } /* Noch nicht gefunden: die Vorschau bleibt sichtbar, nur ruhiger — man soll wissen, was einen erwartet. */ .fit-kx.gesperrt .fit-bild { filter:grayscale(.85) brightness(.6); } .fit-kx .kx-desc { min-height:2.6em; } @container (max-height:480px) { #pane-fits { padding:4px 6px 3px; } .fit-kx { flex:0 0 clamp(140px, 19cqw, 190px); } .fit-kx .kx-desc { display:none; } } /* Der Verlassen-Knopf: nur da, wenn das Spiel in einer Seite steckt. Er sieht aus wie die Sprachknöpfe daneben — es ist dieselbe Art Schalter, kein Notausgang. */ #btn-verlassen { gap:4px; min-width:46px; justify-content:center; } #btn-verlassen[hidden] { display:none; } #btn-verlassen em { font-style:normal; } /* Schmal faellt die Beschriftung weg — die Flaeche aber NICHT. Ein 30 px breiter Ausgang ist auf dem Handy nicht zu treffen. */ @container (max-width:900px) { #btn-verlassen em { display:none; } #btn-verlassen { min-width:44px; font-size:15px; } } /* Eine Verbesserung liegt bereit — der Punkt sagt es dort, wo man hinschaut, und nicht erst zwei Bildschirme später. */ .ch-slot.bereit { border-color:var(--gold); } .ch-punkt { position:absolute; top:-3px; right:-3px; width:8px; height:8px; background:var(--gold); border-radius:50%; box-shadow:0 0 8px var(--gold); } .ch-slot { position:relative; } .ch-ruf { color:var(--gold); font-weight:700; } .cardbar.bereit .cb-n { color:var(--gold); font-weight:700; } .cardbar.bereit .cb-track i { background:var(--gold); } .btn.bereit { border-color:var(--gold); background:var(--gold); color:#0e0a06; } /* ============================================================ DIE STUFENLEITER AUF DER SPECIAL-KARTE Drei Felder — White, Silber, Gold — mit Preis UND Gewinn. Erreichte tragen ein Häkchen, die nächste ist hervorgehoben. Darunter der Weg dorthin als Balken. ============================================================ */ .rc-stufen { flex:0 0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:2cqw; padding:0 3cqw; } .rs-z { display:flex; flex-direction:column; align-items:center; gap:0; padding:2cqw 1cqw; background:rgba(0,0,0,.34); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); } .rs-z b { font:800 clamp(5px, 5.4cqw, 11px)/1.1 var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); } .rs-z i { font:400 clamp(4.5px, 4.4cqw, 9px)/1.2 var(--ui); font-style:normal; color:var(--muted); white-space:nowrap; } .rs-z em { font:800 clamp(6px, 6.4cqw, 13px)/1.2 var(--ui); font-style:normal; color:var(--dim); margin-top:.6cqw; } /* Die Farben der drei Fassungen */ .rs-z.s1 { --fk:#f2f4f8; } .rs-z.s2 { --fk:#b9c6d4; } .rs-z.s3 { --fk:#ffd76a; } /* Erreicht: die Fassung gehört dir */ .rs-z.da { background:color-mix(in srgb, var(--fk) 20%, rgba(0,0,0,.34)); box-shadow:inset 0 0 0 1px var(--fk); } .rs-z.da b, .rs-z.da em { color:var(--fk); } .rs-z.da i { color:color-mix(in srgb, var(--fk) 70%, var(--muted)); } /* Die nächste: das Ziel, auf das man gerade zusteuert */ .rs-z.dran { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fk) 60%, transparent); } .rs-z.dran b { color:var(--fk); } .rs-z.dran em { color:var(--fk); } .rc-weg { position:relative; flex:0 0 auto; display:block; margin:2cqw 3cqw 0; height:clamp(11px, 7cqw, 18px); background:rgba(0,0,0,.45); box-shadow:inset 0 0 0 1px rgba(255,215,106,.35); } .rc-weg > i { position:absolute; inset:0 auto 0 0; display:block; background:linear-gradient(90deg, rgba(255,215,106,.30), rgba(255,215,106,.60)); } .rc-weg > b { position:absolute; inset:0; display:grid; place-items:center; font:800 clamp(5.5px, 5cqw, 10px)/1 var(--ui); letter-spacing:.06em; text-transform:uppercase; color:#fff3e2; text-shadow:0 1px 2px rgba(0,0,0,.8); } /* Auf der kleinen Karte im Gitter hat die Leiter keinen Platz — dort sagt es weiter der Fuss (3 / 5 → WHITE). */ .rc:not(.rc-big) .rc-stufen, .rc:not(.rc-big) .rc-weg { display:none; } /* ============================================================ DIE FIGUR TRÄGT IHRE FASSUNG Man soll dem Bild ansehen, worum es geht. Wer schon eine Fassung hat, sieht sie: die Figur wird weiss, silbern oder golden hinterleuchtet — dieselbe Farbe wie später auf dem Platz. Wer noch keine hat, sieht gedämpft die NÄCHSTE: so zeigt die Karte, was einen erwartet. ============================================================ */ .rc.istsp .rc-art { position:relative; } /* Getragene Fassung — kräftig */ .rc.istsp.sp1 { --spf:#f2f4f8; } .rc.istsp.sp2 { --spf:#b9c6d4; } .rc.istsp.sp3 { --spf:#ffd76a; } /* Noch keine: die nächste, gedämpft */ .rc.istsp.sp0.spziel1 { --spf:#f2f4f8; --spdim:.42; } .rc.istsp.sp0.spziel2 { --spf:#b9c6d4; --spdim:.42; } .rc.istsp.sp0.spziel3 { --spf:#ffd76a; --spdim:.42; } .rc.istsp { --spf:#ffd76a; --spdim:1; } .rc.istsp .rc-art { background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--spf) calc(38% * var(--spdim, 1)), transparent), transparent 66%), rgba(0,0,0,.34); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--spf) 70%, transparent), inset 0 0 26px color-mix(in srgb, var(--spf) calc(26% * var(--spdim, 1)), transparent); } /* Die Silhouette selbst leuchtet — genau wie im Spiel */ .rc.istsp .rc-art img { filter:drop-shadow(0 0 calc(9px * var(--spdim, 1)) color-mix(in srgb, var(--spf) 85%, transparent)) drop-shadow(0 0 calc(20px * var(--spdim, 1)) color-mix(in srgb, var(--spf) 55%, transparent)); } /* Und die Ränder der Karte ziehen mit */ .rc.istsp.sp1 .rc-face, .rc.istsp.sp2 .rc-face, .rc.istsp.sp3 .rc-face { border-color:var(--spf); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--spf) 55%, transparent), inset 0 0 0 4px rgba(0,0,0,.55), inset 0 0 0 5px color-mix(in srgb, var(--spf) 35%, transparent), inset 0 0 40px color-mix(in srgb, var(--spf) 20%, transparent); } .rc.istsp.sp1 .rc-kopf b, .rc.istsp.sp2 .rc-kopf b, .rc.istsp.sp3 .rc-kopf b { color:var(--spf); } .rc.istsp.sp1 .rc-eck, .rc.istsp.sp2 .rc-eck, .rc.istsp.sp3 .rc-eck { color:var(--spf); text-shadow:0 0 8px var(--spf); } /* Das Band nennt die Fassung, nicht nur "SPECIAL" */ .rc.istsp.sp1 .rc-band { background:linear-gradient(180deg,#ffffff,#c9d2dc); } .rc.istsp.sp2 .rc-band { background:linear-gradient(180deg,#dbe4ec,#93a3b4); } /* ============================================================ SPEZIALWURF — Knopf unten links Gegenstück zu den Effet-Knöpfen unten rechts, gleiche Grösse und Sprache. Er erscheint nur, wenn der Wurf wirklich bereit ist — sonst bleibt die Ecke leer. ============================================================ */ #dunkbar { position:fixed; left:14px; bottom:14px; z-index:5; display:flex; opacity:0; pointer-events:none; transform:translateY(10px); transition:.2s var(--ease); } #dunkbar.show { opacity:1; pointer-events:auto; transform:none; } #dunkbar button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:74px; min-height:60px; padding:6px 12px; background:linear-gradient(168deg, #3a2b10, #1d1408); border:2px solid var(--gold); color:var(--gold); box-shadow:4px 4px 0 rgba(0,0,0,.55); cursor:pointer; } #dunkbar button:disabled { opacity:.4; cursor:default; } #dunkbar .pfeil { font-size:22px; line-height:1; } #dunkbar .lbl { font:700 8.5px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; } /* Scharfgestellt: jetzt fehlt nur noch der Wurf. */ #dunkbar.scharf button { background:var(--gold); color:#1d1408; border-color:#fff3e2; animation:dunkPuls .8s infinite; } @keyframes dunkPuls { 50% { box-shadow:4px 4px 0 rgba(0,0,0,.55), 0 0 22px var(--gold); } } @container (max-height:480px) { #dunkbar { left:10px; bottom:10px; } #dunkbar button { min-width:60px; min-height:50px; padding:4px 9px; } #dunkbar .pfeil { font-size:18px; } } /* Die Werkbank ist ein Werkzeug, kein Spielinhalt — sie sieht bewusst anders aus als der Rest und kann live gar nicht erscheinen (siehe werkbankDa). */ .set-row.werkbank { border-left:3px solid #5ce1ff; padding-left:11px; } .set-row.werkbank .btn { border-color:#5ce1ff; color:#5ce1ff; } .set-row.werkbank .btn:hover { background:#5ce1ff; color:#0e0a06; } /* ============================================================ CHEATS-KARTEN ALS RICHTIGE KARTEN Derselbe Aufbau wie beim Aufdecken: Kopfband, Bildfenster, Wirkung, Stufenleiter, Fussband mit dem Preis. Der Bestand sitzt oben rechts in einer eigenen Ecke — das ist die Frage, die man beim Draufschauen zuerst hat. ============================================================ */ .cheat-kx { --ck:#9aa4b2; padding:0; overflow:hidden; border:2px solid var(--ck); gap:0; background:linear-gradient(168deg, color-mix(in srgb, var(--ck) 12%, var(--card-hi)), var(--card-hi) 55%); } .cheat-kx.rar-rare { --ck:#5ce1ff; } .cheat-kx.bereit { --ck:var(--gold); box-shadow:0 0 0 1px var(--gold) inset, 6px 6px 0 rgba(0,0,0,.5); } .ck-kopf { display:flex; align-items:center; gap:6px; width:100%; padding:6px 8px 5px; background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.16)); border-bottom:1px solid color-mix(in srgb, var(--ck) 45%, transparent); } .ck-kopf b { flex:1; min-width:0; text-align:left; font:700 12px/1.15 var(--ui); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Der Bestand: eigenes Rechteck, damit die Zahl sofort ins Auge fällt */ .ck-bestand { flex:0 0 auto; min-width:26px; padding:3px 6px; font:800 12px/1 var(--ui); font-style:normal; color:#0e0a06; background:var(--ck); text-align:center; } .ck-bild { display:grid; place-items:center; width:calc(100% - 16px); margin:8px; height:clamp(46px, 11cqh, 88px); overflow:hidden; background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ck) 22%, transparent), transparent 68%), rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ck) 35%, transparent); } .ck-bild .kx-ico { font-size:clamp(26px, 6cqh, 46px); } .ck-typ { padding:0 8px 3px; font:700 8px/1.3 var(--ui); letter-spacing:.12em; text-transform:uppercase; color:var(--ck); text-align:center; } .cheat-kx .kx-desc { padding:0 9px; margin:0 0 5px; min-height:2.4em; } /* Wirkung jetzt → Wirkung danach */ .ck-wirkt { display:flex; align-items:center; justify-content:center; gap:7px; padding:5px 8px; margin:0 8px; background:rgba(0,0,0,.34); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); } .ck-wirkt span { display:flex; flex-direction:column; align-items:center; min-width:0; } .ck-wirkt i { font:400 7px/1 var(--ui); font-style:normal; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); } .ck-wirkt b { font:700 9.5px/1.2 var(--ui); color:var(--text); text-align:center; } .ck-wirkt .pfeil { font-size:12px; color:var(--dim); } .ck-wirkt .ck-next b { color:var(--gold); } .ck-ladungen { padding:4px 8px 0; font:400 8px/1.2 var(--ui); color:var(--dim); text-align:center; } /* Die Stufenleiter: wie viele es gibt und wo man steht */ .ck-leiter { display:flex; gap:3px; justify-content:center; padding:6px 8px 2px; } .ck-leiter i { width:15px; height:15px; display:grid; place-items:center; font:700 8px/1 var(--ui); font-style:normal; color:var(--dim); border:1px solid var(--border); background:rgba(255,255,255,.04); } .ck-leiter i.da { background:var(--ck); border-color:var(--ck); color:#0e0a06; } .ck-leiter i.dran { border-color:var(--gold); color:var(--gold); } /* Fussband: was der nächste Schritt kostet */ .ck-preis { display:flex; justify-content:center; gap:12px; padding:5px 8px; font:700 10px/1 var(--ui); background:linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,.15)); border-top:1px solid color-mix(in srgb, var(--ck) 45%, transparent); } .ck-preis .da { color:var(--gold); } .ck-preis .fehlt { color:var(--dim); } .ck-preis.voll { color:var(--muted); font-weight:600; } .cheat-kx .kx-actions { padding:7px 8px 8px; gap:5px; } @container (max-height:480px) { .ck-bild { height:38px; margin:5px; } .cheat-kx .kx-desc { display:none; } .ck-wirkt { padding:3px 6px; margin:0 5px; } .ck-leiter { padding:4px 6px 1px; } .ck-leiter i { width:12px; height:12px; font-size:7px; } } /* Der „Steckt"-Aufkleber sass genau auf der Kartenzahl oben rechts. Er wandert an die untere linke Ecke des Bildfensters — dort steht er niemandem im Weg und ist trotzdem sofort zu sehen. */ .cheat-kx .equipped-tag { top:34px; right:auto; left:10px; /* unter dem Kopfband */ font-size:8px; padding:2px 6px; } /* ============================================================ PACK ÖFFNEN — DER STAPEL Die Karten drehen sich nicht mehr einzeln um, sie laufen von selbst durch und stapeln sich. Man sieht den Stapel wachsen, und an der Karte steht, wie viele man von der Sorte hat. ============================================================ */ .rv-stapel { position:absolute; inset:0; pointer-events:none; } /* Jede schon gezogene Karte als schmale Kante dahinter */ .rv-stapel i { position:absolute; left:50%; top:50%; width:calc(100% - 8px); height:calc(100% - 8px); transform:translate(-50%,-50%) translate(calc(var(--n) * -5px), calc(var(--n) * 4px)) rotate(calc(var(--n) * -1.1deg)); border:2px solid var(--rc); background:linear-gradient(150deg,#2a1d14,#120d09); opacity:calc(0.55 - var(--n) * 0.035); box-shadow:0 6px 14px rgba(0,0,0,.5); } /* Die frische Karte fliegt herein — kurz, damit es zügig bleibt */ .rc.rein { animation:rvRein .26s var(--ease) backwards; z-index:3; } @keyframes rvRein { from { opacity:0; transform:translate(38px,-30px) rotate(7deg) scale(.82); } } /* „du hast 4×" an der Karte oben rechts */ .rv-bestand { position:absolute; top:-10px; right:-10px; z-index:6; display:flex; flex-direction:column; align-items:center; gap:0; padding:5px 9px; background:var(--gold); color:#1d1408; box-shadow:3px 3px 0 rgba(0,0,0,.55); } .rv-bestand i { font:700 6.5px/1 var(--ui); font-style:normal; letter-spacing:.14em; text-transform:uppercase; opacity:.75; } .rv-bestand b { font:800 16px/1.1 var(--ui); } /* In der Übersicht: wie viele in DIESEM Pack, wie viele insgesamt */ .rv-anzahl { position:absolute; top:-7px; right:-7px; z-index:6; display:flex; align-items:baseline; gap:3px; padding:2px 6px; background:var(--gold); color:#1d1408; box-shadow:2px 2px 0 rgba(0,0,0,.55); } .rv-anzahl i { font:700 8px/1 var(--ui); font-style:normal; opacity:.7; } .rv-anzahl b { font:800 12px/1 var(--ui); } #reveal.fertig .rv-grid .rc { overflow:visible; } @container (max-height:480px) { .rv-bestand { padding:3px 7px; } .rv-bestand b { font-size:13px; } .rv-anzahl b { font-size:10px; } } /* Ein verbrauchter Steckplatz bleibt sichtbar, aber tot: ausgegraut, mit Haken statt Zahl. Man soll sehen, WAS man gespielt hat — und dass es weg ist. */ .bslot.spent { opacity:.38; cursor:default; filter:grayscale(.7); } .bslot.spent .n { color:var(--dim); } .bslot.benutzt { opacity:.5; border-color:var(--gold); filter:none; } .bslot.benutzt .i { filter:grayscale(1) brightness(.8); } .bslot.benutzt .n { color:var(--gold); font-weight:800; } /* Der Ausbaustand des Balls auf der Startseite. Er stand bisher nur tief im Shop — wer nie dorthin ging, wusste nicht, dass es die Figurenstufe überhaupt gibt. */ .fg-stufe { position:relative; display:flex; align-items:center; gap:7px; width:100%; max-width:300px; margin-top:4px; padding:4px 8px; background:rgba(255,255,255,.03); border:1px solid var(--border); cursor:pointer; text-align:left; } .fg-stufe:hover { border-color:var(--accent); } .fs-l { font:600 7.5px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); } .fg-stufe b { font:700 9.5px/1 var(--ui); color:var(--text); white-space:nowrap; } .fs-bar { flex:1; height:5px; min-width:30px; background:rgba(255,255,255,.08); } .fs-bar i { display:block; height:100%; background:var(--accent); } .fs-n { font:700 8px/1 var(--ui); font-style:normal; color:var(--dim); } .fs-max { font:700 8px/1 var(--ui); font-style:normal; color:var(--gold); margin-left:auto; } /* Karten UND Münzen reichen — das soll man sehen, ohne zu suchen. */ .fg-stufe.bereit { border-color:var(--gold); } .fg-stufe.bereit .fs-bar i { background:var(--gold); } .fg-stufe.bereit .fs-n { color:var(--gold); } .fs-punkt { position:absolute; top:-3px; right:-3px; width:7px; height:7px; background:var(--gold); border-radius:50%; box-shadow:0 0 7px var(--gold); } @container (max-height:480px) { .fg-stufe { padding:2px 6px; gap:5px; } .fs-l { display:none; } } /* ============================================================ FIGURENSTUFE IM AUSBAU-FENSTER Welche Stufe der Ball hat, auf welche er kann, was das kostet — und ein Knopf, der es tut. Vorher stand hier nur ein Balken. ============================================================ */ .figstufe { display:flex; flex-direction:column; gap:3px; padding:7px 9px; margin-top:5px; background:rgba(255,255,255,.03); border:1px solid var(--border); } .figstufe.bereit { border-color:var(--gold); background:rgba(255,180,61,.07); } .fst-kopf { display:flex; align-items:baseline; gap:7px; } .fst-kopf b { font:700 10.5px/1 var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--text); } .fst-kopf em { font:700 10.5px/1 var(--ui); font-style:normal; color:var(--gold); margin-left:auto; } .fst-was { font:400 9px/1.3 var(--ui); color:var(--muted); } .fst-track { display:block; height:5px; background:rgba(255,255,255,.08); margin:2px 0 1px; } .fst-track i { display:block; height:100%; background:var(--accent); } .figstufe.bereit .fst-track i { background:var(--gold); } .fst-preis { display:flex; gap:12px; font:700 9.5px/1 var(--ui); } .fst-preis .da { color:var(--gold); } .fst-preis .fehlt { color:var(--dim); } .figstufe .btn { margin-top:4px; } .figstufe.voll { border-color:color-mix(in srgb, var(--gold) 45%, transparent); } .figstufe.voll .hint-line { margin:0; font-size:9px; } @container (max-height:480px) { .figstufe { padding:4px 7px; gap:2px; } .fst-was { display:none; } } /* ============================================================ AUSBAU-ANSICHT — AUFGERÄUMT Vorher: ein goldener Klotz für die Figurenstufe, der alles erschlug, Ausbau-Knöpfe mit unlesbarer Handschrift, und die Knöpfe unten abgeschnitten. Jetzt drei klare Zonen — Werte links, Ausbau rechts, Fassungen und Knöpfe im Fuss. ============================================================ */ #pane-balls .shop-detail { gap:clamp(5px, 1.4cqh, 12px); } /* Die Spalten muessen die volle Hoehe bekommen — mit align-items: start bekam die rechte nur ihre Inhaltshoehe, und die Zeilen darin quetschten sich auf wenige Pixel zusammen. */ .detail-grid { flex:1 1 auto; min-height:0; align-items:stretch; } .dg-links, .dg-rechts { min-width:0; } .detail-grid .label { display:flex; align-items:baseline; gap:8px; margin-bottom:3px; } .label-hinweis { font:400 8px/1 var(--ui); font-style:normal; letter-spacing:.04em; text-transform:none; color:var(--dim); margin-left:auto; } /* ---- Ausbaupfade: Name · Punkte · Wert · Preis ---- */ .upg-zu { font-size:8px; opacity:.85; } /* Gesperrt: ruhig, nicht laut — das Schloss am Namen sagt es schon */ .upg.zu .un, .upg.zu .upg-wert { color:var(--dim); } .upg.zu .btn { opacity:.5; } .upg.voll .upg-wert { color:var(--gold); } /* ---- Figurenstufe: eine Leiste, keine Wand ---- */ .figstufe { display:grid; grid-template-columns:auto auto 1fr auto auto; align-items:center; gap:8px; padding:5px 9px; margin-top:5px; background:rgba(255,255,255,.035); border:1px solid var(--border); } .figstufe.bereit { border-color:var(--gold); background:rgba(255,180,61,.08); } .figstufe > b { font:700 9.5px/1 var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--text); white-space:nowrap; } .fst-ziel { font:700 9.5px/1 var(--ui); color:var(--gold); white-space:nowrap; } .fst-track { height:5px; background:rgba(255,255,255,.08); min-width:26px; } .fst-track i { display:block; height:100%; background:var(--accent); } .figstufe.bereit .fst-track i { background:var(--gold); } .fst-preis { display:flex; gap:9px; font:700 9px/1 var(--ui); white-space:nowrap; } .fst-preis .da { color:var(--gold); } .fst-preis .fehlt { color:var(--dim); } .figstufe .btn { min-height:26px; padding:0 10px; font-size:11px; white-space:nowrap; } .figstufe.voll { grid-template-columns:auto 1fr; } .figstufe.voll i { font:400 8.5px/1.2 var(--ui); font-style:normal; color:var(--muted); } /* ---- Fuss: Fassungen und Knöpfe, immer sichtbar ---- */ .detail-fuss { flex:0 0 auto; display:flex; flex-direction:column; gap:4px; padding-top:4px; border-top:1px solid var(--border); } /* Der Fuss ist eine Zeile, kein Abstellraum: die Fassungskacheln bekommen eine feste, knappe Hoehe. */ .detail-fuss .vr-reihe { gap:4px; } .detail-fuss .vr { padding:3px 3px 4px; } .detail-fuss .vr-bild { height:clamp(26px, 6.5cqh, 54px); } .detail-fuss .vr i { font-size:6.5px; } .detail-fuss .vr b { font-size:7.5px; } .detail-fuss .actions { margin:0; } .detail-fuss .vr-kopf { margin:0; } @container (max-width:900px) { .upg { grid-template-columns:56px 1fr 40px 62px; gap:6px; } .figstufe { gap:6px; padding:4px 7px; } .fst-preis { gap:6px; font-size:8px; } } @container (max-height:480px) { .upg { padding:1px 0; } .upg .btn, .figstufe .btn { min-height:22px; font-size:10px; } .figstufe { padding:3px 7px; margin-top:3px; } .label-hinweis { display:none; } } /* Die fünf Ausbaupfade müssen IMMER alle sichtbar sein — vorher fiel „Panzer" unten heraus, weil die Zeilen ihre Wunschhöhe behielten und die Spalte überlief. Jetzt teilen sie sich die Höhe. */ .dg-rechts { display:flex; flex-direction:column; min-height:0; overflow:hidden; } .dg-rechts .label { flex:0 0 auto; } /* Die fuenf Zeilen teilen sich, was uebrig bleibt — nie mehr, nie weniger. Damit ist "Panzer" immer sichtbar. */ .dg-rechts .upg { flex:1 1 auto; min-height:26px; } /* Und der Fuss bleibt eine Zeile: die Fassungskacheln bekommen eine Deckelung, sonst wachsen sie in die Höhe und drücken die Knöpfe aus dem Bild. */ .detail-fuss .vr-reihe { max-height:clamp(58px, 13cqh, 96px); } .detail-fuss .vr { padding:2px 3px 3px; justify-content:center; } .detail-fuss .vr-bild { height:clamp(20px, 5cqh, 40px); } .detail-fuss .vr .kg-bar { margin-top:1px; } /* Auf flachen Schirmen darf die Mindesthöhe der Ausbau-Zeilen nicht greifen — sonst passen nur drei von fünf hinein und „Sicht" und „Panzer" fallen unten heraus. */ @container (max-height:480px) { .dg-rechts .upg { min-height:0; padding:0; } .dg-rechts .upg .btn { height:18px; font-size:8px; } .dg-rechts .upg .un { font-size:7px; } .dg-rechts .upg .upg-wert { font-size:7.5px; } .detail-fuss .vr-bild { height:22px; } .detail-fuss .vr-reihe { max-height:52px; } } /* ============================================================ DIE WOCHENUHR Jede Liga wird am Montag auf 0 gesetzt. Ohne sichtbare Uhr wusste das niemand — und wer aufholen will, muss wissen, wie lange er dafuer noch hat. Darum steht sie in der Kopfzeile der Liga und oben in der Rangliste, und wird rot, sobald es um Stunden statt Tage geht. ============================================================ */ .fg-kopf { display:flex; align-items:center; justify-content:space-between; gap:6px; } .wuhr { display:inline-flex; align-items:center; gap:3px; padding:1px 5px; font:700 8px/1.35 var(--ui); letter-spacing:.06em; color:#ffd76a; background:rgba(255,215,106,.10); border:1px solid rgba(255,215,106,.35); white-space:nowrap; } .wuhr i { font-style:normal; letter-spacing:.02em; } .wuhr.knapp { color:#ff8f6a; background:rgba(255,84,112,.12); border-color:rgba(255,120,90,.5); } #board-ends { font-weight:700; color:#ffd76a; letter-spacing:.04em; } /* ============================================================ RANGLISTE IM ERGEBNISFENSTER Platz allein reicht nicht: davor und dahinter steht jemand mit einem Abstand in Punkten, und genau der beantwortet die Frage "noch eine Partie?". Wer ueberholt hat, sieht es aufleuchten. ============================================================ */ #board-line.bl-block { display:block; } .bl-kopf { display:flex; align-items:baseline; gap:8px; } .bl-kopf .rl-l { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rl-von { font-style:normal; opacity:.55; font-size:.85em; } .bl-sprung { margin-top:5px; padding:3px 7px; font:700 9.5px/1.5 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:#0f0b06; background:var(--ok, #5ccf7a); } .bl-sprung.ab { color:#ffd7d7; background:rgba(255,84,112,.22); } .bl-nachbarn { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:6px; } .bl-n { display:flex; align-items:baseline; gap:5px; min-width:0; padding:4px 7px; background:rgba(255,255,255,.04); border-left:2px solid var(--border-soft); font:400 10px/1.3 var(--ui); } .bl-n i { font-style:normal; font-size:9px; opacity:.8; } .bl-n b { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:var(--cream); } .bl-n em { font-style:normal; font-weight:700; white-space:nowrap; } .bl-n.vor { border-left-color:#ff8c1a; } .bl-n.vor em, .bl-n.vor i { color:#ff8c1a; } .bl-n.nach { border-left-color:#5ce1ff; } .bl-n.nach em, .bl-n.nach i { color:#5ce1ff; } .bl-n.spitze { grid-column:1 / -1; justify-content:center; color:#ffd76a; border-left-color:#ffd76a; } /* Der Ueberhol-Moment: die Zeile schiebt sich einmal nach oben und leuchtet dabei auf — kurz, damit es ein Ausrufezeichen bleibt und keine Zappelei. */ @keyframes bl-hoch { 0% { transform:translateY(10px); opacity:0; } 55% { transform:translateY(-3px); opacity:1; } 100% { transform:translateY(0); opacity:1; } } @keyframes bl-leuchten { 0%, 100% { box-shadow:0 0 0 rgba(92,207,122,0); } 40% { box-shadow:0 0 22px rgba(92,207,122,.55); } } #board-line.ueberholt { animation:bl-hoch .5s cubic-bezier(.2,.9,.2,1) both, bl-leuchten 1.1s ease-out .3s 2; } @media (prefers-reduced-motion: reduce) { #board-line.ueberholt { animation:none; } } @container (max-height:480px) { .bl-nachbarn { gap:4px; margin-top:4px; } .bl-n { padding:3px 5px; font-size:9px; } .bl-sprung { font-size:8.5px; margin-top:4px; } }