/* Darts-Plattform – Stylesheet. Fast alles HTML entsteht zur Laufzeit aus den Spielbeschreibungen (core/layout.js). Diese Klassen sind der Vertrag zwischen Layout und CSS – wer eine davon umbenennt, muss beide Seiten aendern: .view eine Ansicht (Menue und je ein Spiel); .hidden blendet aus .cardGroup eine Gruppe im Menue (Ueberschrift + .cards), aus games/index.js .card Menue-Kachel, .info ist das "i" fuer die Regeln, .ic das grosse Zeichen im Hintergrund (core/icons.js) .playLayout Spielansicht: Spalte links, Scheibe mittig, Spalte rechts .boardHost Rahmen um die Scheibe; darin .flash und .setup .flash grosse Einblendung ueber der Scheibe (.show macht sie sichtbar) .setup Einstellpanel vor dem Ausbullen (.show), darin .opt und .go .pcard Spielerkarte, .p0/.p1 faerben den Rand, .active hebt sie hervor .fieldNums/.num grosse Zahlen auf der Karte (stats-Art "nums"), .empty = grau .dartrow/.dartbox die Wurf-Felder unter der Scheibe .empty = noch kein Pfeil, .dead = zaehlt nicht .log Liste im Seitenpanel (side.kind "list") .scorecard Tabelle im Seitenpanel (side.kind "table"), .ace/.bad/.sum je Zelle .scorecard.golfcard Golf-Karte: Loecher untereinander, .now = laufendes Loch .modal/.modalBox Regel-, Prompt-, Board-, Spieler- und Einstellungsfenster (.show) .boardRow eine Zeile im Board-Fenster (Adresse, Zustand) .nameRow eine Zeile im Spieler-Fenster (core/players.js) .setGroup/.setRow eine Gruppe bzw. eine Zeile im Einstellungsfenster (core/settings.js), .setIn ist die Eingabe rechts, .tag das Abzeichen "Scheibe neu" usw. .cueBox/.cueTable ein Tonsignal zum Aufklappen und seine Notentabelle .pop / .bump einmalige Bewegung: neues Wurf-Feld bzw. geaenderte Zahl (core/game.js setzt beide), .view.enter = Ansicht faehrt herein Farben stehen als Tokens in :root; jedes Design ([data-theme="neon"] usw.) setzt dieselben Tokens neu – die Regeln darunter bleiben unveraendert. Die Liste der Designs steht in core/theme.js, dort auch die Farben, die das CSS nicht setzen kann: die gezeichnete Scheibe und die Spielerfarben (beide aus config.js). Am Ende der Datei steht die Bewegung; data-anim="off" stellt sie still. */ :root{ /* Klassisch – zugleich die Liste aller Tokens. Jedes Design unten setzt sie neu; --p0/--p1 kommen aus PLAYERS.colors (core/settings.js schreibt sie ans ). */ --bg:#12141a; --grad:none; --fg:#e8eaf0; --fg2:#c3cad9; --mut:#8b93a7; --dim:#3a4152; --pan:#1b1e27; --panHi:#1e2635; --ink:#0f1117; --veil:rgba(12,14,20,.93); --scrim:rgba(6,8,12,.72); --sh:rgba(0,0,0,.55); --line:#2a2f3c; --line2:#2a2f3c55; --edge:#39415380; --edge2:#4a5368; --btn:#2a3140; --btnHi:#354055; --acc:#4ea1ff; --accHi:#6db3ff; --onAcc:#0f1117; --ok:#3ecf7a; --warn:#f0b429; --err:#ef4b4b; --rad:10px; --radS:7px; --p0:#4ea1ff; --p0rgb:78,161,255; --p1:#f0b429; --p1rgb:240,180,41; } /* ---------- Designs ---------- Nur Tokens – die Regeln darunter bleiben fuer alle Designs dieselben. Die Liste fuers Einstellungsfenster und die passenden Scheibenfarben stehen in core/theme.js. */ [data-theme="neon"]{ --bg:#06070d; --grad:radial-gradient(1100px 800px at 12% -10%,#13275c 0,transparent 60%), radial-gradient(900px 700px at 108% 15%,#480d53 0,transparent 55%), linear-gradient(165deg,#06070d,#0a0e1c 55%,#100722); --fg:#eaf6ff; --fg2:#a9c6e6; --mut:#7f9bc0; --dim:#2a3a55; --pan:rgba(17,23,43,.74); --panHi:rgba(28,44,82,.88); --ink:#080b17; --veil:rgba(6,9,20,.92); --scrim:rgba(2,4,12,.78); --sh:rgba(0,0,0,.65); --line:rgba(120,200,255,.20); --line2:rgba(120,200,255,.10); --edge:rgba(120,200,255,.30); --edge2:rgba(120,200,255,.45); --btn:rgba(0,229,255,.12); --btnHi:rgba(0,229,255,.26); --acc:#00e5ff; --accHi:#67f3ff; --onAcc:#04121a; --ok:#2bff88; --warn:#ffd166; --err:#ff3d7f; --rad:16px; --radS:11px; } [data-theme="sonne"]{ --bg:#150a24; --grad:radial-gradient(1000px 700px at 8% -12%,#6d2b6b 0,transparent 58%), radial-gradient(900px 650px at 105% 8%,#a33b4a 0,transparent 52%), linear-gradient(170deg,#1b0e2e,#2a1233 55%,#3d1630); --fg:#fff3e6; --fg2:#f3cfae; --mut:#c09a90; --dim:#5a3c58; --pan:rgba(50,24,60,.74); --panHi:rgba(76,34,78,.88); --ink:#1b0e26; --veil:rgba(26,12,38,.93); --scrim:rgba(14,6,20,.75); --sh:rgba(20,4,30,.6); --line:rgba(255,190,140,.20); --line2:rgba(255,190,140,.11); --edge:rgba(255,190,140,.30); --edge2:rgba(255,190,140,.48); --btn:rgba(255,138,61,.16); --btnHi:rgba(255,138,61,.32); --acc:#ff8a3d; --accHi:#ffab72; --onAcc:#26100a; --ok:#7ee0a0; --warn:#ffc857; --err:#ff5d73; --rad:18px; --radS:12px; } [data-theme="minze"]{ --bg:#eef4f1; --grad:radial-gradient(900px 600px at 0% -12%,#d3f2e3 0,transparent 60%), radial-gradient(820px 620px at 108% 0%,#ffe6c9 0,transparent 55%), linear-gradient(180deg,#f8fbf9,#eaf3ef); --fg:#12241d; --fg2:#31463d; --mut:#5d7b70; --dim:#b9cdc4; --pan:#ffffff; --panHi:#e9f6f0; --ink:#f2f7f4; --veil:rgba(255,255,255,.96); --scrim:rgba(18,36,29,.35); --sh:rgba(20,60,45,.18); --line:#d7e3dd; --line2:#d7e3dd99; --edge:#c6d8d0; --edge2:#a9c4b9; --btn:#e7f1ec; --btnHi:#d6e9e0; --acc:#0ea472; --accHi:#12c187; --onAcc:#ffffff; --ok:#0ea472; --warn:#e08a00; --err:#d64545; --rad:16px; --radS:11px; } *{box-sizing:border-box} body{margin:0;color:var(--fg);font:15px/1.4 system-ui,-apple-system,sans-serif; background-color:var(--bg);background-image:var(--grad); background-attachment:fixed;background-size:180% 180%} /* Kopfzeile. Der Board-Zustand steht hier fest sichtbar statt nur hinter dem Fenster – waehrend des Spiels will man ihn im Blick haben. */ .topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:13px max(16px,env(safe-area-inset-left)) 13px max(16px,env(safe-area-inset-right)); position:sticky;top:0;z-index:5; background:color-mix(in srgb,var(--bg) 84%,transparent); backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .brand{display:inline-flex;align-items:center;gap:11px; font-weight:700;font-size:20px;letter-spacing:-.02em} .brand b{color:var(--acc)} .brandMark{width:28px;height:28px;flex:none} .bm-ring{fill:none;stroke:var(--edge2);stroke-width:1.6} .bm-mid{fill:none;stroke:var(--acc);stroke-width:1.6;opacity:.75} .bm-bull{fill:var(--err)} .tools{display:flex;align-items:center;gap:10px} /* Knoepfe im Balken sind groesser als die im Inhalt – sie werden im Vorbeigehen getroffen, oft mit dem Daumen. */ .topbar button{font-size:15px;padding:9px 16px} .topbar button.icon{padding:0;width:42px;height:42px;font-size:18px} /* Im Spiel raeumt die Kopfzeile auf – "Uebersicht" bleibt, das ist der Weg zurueck. Die Namen aendert man ohnehin vor der Partie. */ body.playing #playersBtn{display:none} .spacer{flex:1} /* Zustandsknopf: der Punkt sagt es auf einen Blick, der Text beim Hinsehen. */ .topbar .statusBtn{display:inline-flex;align-items:center;gap:11px; background:var(--pan);color:var(--fg2);border:1px solid var(--line); border-radius:999px;padding:9px 19px 9px 16px;font-size:15px; max-width:min(46vw,340px)} .topbar .statusBtn:hover{background:var(--panHi);color:var(--fg);border-color:var(--edge2)} .topbar .statusBtn #statusText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dot{width:15px;height:15px;border-radius:50%;flex:none;background:var(--mut); box-shadow:0 0 0 4px transparent;transition:background .2s,box-shadow .2s} .dot.off{background:var(--err);box-shadow:0 0 0 4px rgba(239,75,75,.16)} .dot.ok{background:var(--ok);box-shadow:0 0 0 4px rgba(62,207,122,.2)} .dot.busy{background:var(--warn);box-shadow:0 0 0 4px rgba(240,180,41,.2)} /* Am Handy: Marke und Werkzeuge in die erste Reihe, der Zustand quer darunter – sonst treibt der Abstandhalter drei Reihen auseinander. */ @media (max-width:620px){ .topbar .spacer{display:none} .brand{order:1} .tools{order:2;margin-left:auto} .topbar .statusBtn{order:3;flex:1 0 100%;max-width:100%} } .pill{font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:10px;padding:1px 8px} button{background:var(--btn);color:var(--fg);border:1px solid var(--edge);border-radius:999px;padding:6px 14px;cursor:pointer} button:hover:not(:disabled){background:var(--btnHi)} button.ghost{background:transparent} button:disabled{opacity:.4;cursor:default} input{background:var(--ink);color:var(--fg);border:1px solid var(--line);border-radius:var(--radS);padding:6px 8px} main{padding:18px} .view.hidden{display:none} /* Allgemein: was .hidden traegt, ist weg. Ohne das greift die Klasse nur bei .view, und alles andere damit Versteckte bleibt sichtbar. */ .hidden{display:none} h1{font-size:20px;margin:0 0 14px} /* Menue: je Gruppe eine Ueberschrift, darunter die Kacheln nebeneinander. */ .cardGroup{margin:0 0 24px} .cardGroup h2{font-size:17px;margin:0 0 3px} .cardGroup .hint{margin:0 0 12px} .cards{display:flex;gap:14px;flex-wrap:wrap} .card{text-align:left;width:260px;min-height:116px;padding:14px;border-radius:var(--rad); position:relative;overflow:hidden} /* Das Zeichen ist der Hintergrund der Kachel: so hoch wie sie selbst, rechts angeschlagen und leicht ueber den Rand hinaus. Der Text liegt darueber und haelt rechts so viel Abstand, dass beides nebeneinander lesbar bleibt. */ .card .ic{position:absolute;right:-8px;top:50%;transform:translateY(-50%); height:calc(100% - 16px);width:auto;aspect-ratio:1;opacity:.3;pointer-events:none; transition:opacity .18s,transform .18s} /* Wo der Text ueber dem Zeichen liegt, wird dieses dahinter weichgezeichnet – der Rahmen dafuer ist genau der Textblock, darum haelt er den Abstand nach rechts ueber margin (padding wuerde den Weichzeichner mit ausdehnen). Ohne backdrop-filter im Browser bleibt einfach alles scharf. */ /* Die Unschaerfe sitzt nicht am Text selbst, sondern auf einer eigenen Ebene dahinter (::before mit z-index -1 im eigenen Stapel des Textblocks). Nur so laesst sie sich ausblenden, ohne die Schrift mit auszublenden: zwei Masken (quer und hoch) werden verschnitten, dadurch laeuft die Unschaerfe nach rechts, oben und unten weich aus – hinter der Schrift bleibt sie voll. Browser ohne backdrop-filter zeigen einfach alles scharf. */ .card h2,.card p{position:relative;z-index:0} .card h2::before,.card p::before{ content:"";position:absolute;inset:-7px -34px -7px -9px;z-index:-1; backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 38px),transparent 100%), linear-gradient(180deg,transparent 0,#000 9px,#000 calc(100% - 9px),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 38px),transparent 100%), linear-gradient(180deg,transparent 0,#000 9px,#000 calc(100% - 9px),transparent 100%); -webkit-mask-composite:source-in; /* aeltere WebKit-Schreibweise */ mask-composite:intersect; } .card h2{font-size:16px;margin:0 40px 6px 0} .card p{margin:0 36px 0 0;color:var(--mut);font-size:13px} .cards .card:hover .ic{opacity:.45;transform:translateY(-50%) scale(1.05)} .boardHost{display:flex;justify-content:center;width:100%;position:relative} .boardHost svg{width:min(92vw,calc(100vh - 330px));min-width:300px;height:auto} .turn{font-weight:600;margin:0 0 12px} .pcard{flex:1;background:var(--pan);border:1px solid var(--line);border-radius:var(--rad);padding:10px;display:flex;flex-direction:column;gap:2px} .pcard.p0{border-left:3px solid var(--p0)} .pcard.p1{border-left:3px solid var(--p1)} .pcard span{font-size:12px;color:var(--mut)} .pcard b{font-size:26px;line-height:1} .pcard small{font-size:11px;color:var(--mut)} .row{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;justify-content:center} .row button{white-space:nowrap} .log{margin:0;padding-left:22px;font-size:13px;color:var(--mut);max-height:240px;overflow:auto} .log li{margin:2px 0} button.active{background:var(--acc);border-color:var(--acc);color:var(--onAcc)} .hint{font-size:12px;color:var(--mut);margin:-8px 0 14px} button.icon{padding:0;width:32px;height:32px;display:inline-grid;place-items:center; font-size:14px;line-height:1} button.icon.muted{color:var(--mut)} .boardHost svg{cursor:crosshair} .flash{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0.88); display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 46px;border-radius:20px; background:var(--veil);border:1px solid var(--edge2);box-shadow:0 12px 40px var(--sh); text-align:center;width:max-content;max-width:88%; opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:2} .flash.show{opacity:1;transform:translate(-50%,-50%) scale(1)} .flash b{font-size:clamp(26px,4.4vh,44px);line-height:1.15} .flash span{font-size:clamp(14px,2vh,19px);color:var(--fg2);line-height:1.35;max-width:32em} .dartrow{display:flex;gap:12px;justify-content:center;margin-bottom:10px} .dartbox{width:96px;padding:6px 4px;border-radius:var(--rad);background:var(--pan);border:1px solid var(--line); display:flex;flex-direction:column;align-items:center;gap:1px} .dartbox b{font-size:24px;line-height:1.1} .dartbox span{font-size:12px;color:var(--mut)} .dartbox.empty b{color:var(--dim)} .dartbox.dead{opacity:.45;text-decoration:line-through} .opt{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--mut);margin-bottom:16px} /* Board-Fenster: Adresse, Zustand und die Befehle an das Board. */ .boardRow{display:flex;gap:10px;align-items:center;margin:0 0 12px} .boardRow input{flex:1;min-width:0} .boardRow select{flex:1;min-width:0;background:var(--ink);color:var(--fg); border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit} .hint.warn{color:var(--warn);border-left:2px solid currentColor;padding-left:8px} .hint.hidden{display:none} /* Muss .modalBox button{width:100%} weiter unten schlagen – daher zweiklassig. */ .modalBox .boardRow button{width:auto;flex:none} .boardRow.status{font-size:13px;color:var(--mut);margin-bottom:14px;gap:8px} .modalBox .modalRow.boardCmds{margin:0 0 12px} /* Namensabfrage: eine Zeile je Spieler, der Punkt zeigt die Spielerfarbe. */ .nameRow{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:13px;color:var(--mut)} .nameRow input{flex:1;font-size:15px;color:var(--fg)} .nameRow .who{width:12px;height:12px;border-radius:50%;flex:none} .nameRow .who.p0{background:var(--p0)} .nameRow .who.p1{background:var(--p1)} /* Spieler B waehlt in seiner Zeile zwischen lokalem Namen und Lobby-Code. */ .nameRow select{background:var(--ink);color:var(--fg);border:1px solid var(--line); border-radius:var(--radS);padding:6px 8px;font-size:14px;flex:none} .nameRow .inlineGroup{display:flex;align-items:center;gap:8px;flex:1;min-width:0} .nameRow .inlineGroup input{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.06em} /* Muss .modalBox button{width:100%} schlagen, sonst sprengt der Knopf die Zeile. */ .modalBox .nameRow .inlineGroup button{flex:none;width:auto;padding:6px 12px} .nameRow .hidden{display:none} /* Spielansicht fuer Laptops: Scheibe so gross wie die Fensterhoehe hergibt, Spielerinfos links und rechts daneben. */ .playLayout{display:grid;grid-template-columns:minmax(170px,1fr) auto minmax(170px,1fr); gap:20px;align-items:start;justify-items:center} .playLayout .col{width:100%;display:flex;flex-direction:column;gap:10px;max-width:280px} .playLayout .boardCol{display:flex;flex-direction:column;align-items:center;gap:8px} .playLayout .boardHost svg{width:auto;height:min(calc(100vh - 208px),60vw);min-width:0} .playLayout .underBoard{width:100%;text-align:center} .playLayout .line{margin:0 0 8px;font-size:15px} .playLayout .line .turn{font-weight:600} .playLayout .dartrow{margin-bottom:8px} .playLayout .dartbox{width:86px;padding:4px} .playLayout .dartbox b{font-size:20px} .playLayout .row{justify-content:center;margin-bottom:6px} .playLayout .hint{margin:0;font-size:11px} .playLayout .log{max-height:40vh;margin:0} .playLayout .pcard b{font-size:48px} @media (max-width:900px){ .playLayout{grid-template-columns:1fr;justify-items:stretch} .playLayout .col{max-width:none;flex-direction:row;align-items:flex-start;flex-wrap:wrap} .playLayout .boardHost svg{height:auto;width:min(92vw,520px)} } body.playing main{padding:10px 12px} body.playing nav{padding:5px 12px} .opt select{background:var(--ink);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:4px 6px} .fieldNums{display:flex;gap:8px;justify-content:center;margin-top:6px;width:100%} .fieldNums .num{flex:1;padding:6px 0;border-radius:var(--rad);background:var(--ink);border:1px solid var(--line); font-size:clamp(26px,4vh,40px);font-weight:700;line-height:1.1;text-align:center} .pcard.p0 .fieldNums .num{color:var(--p0);border-color:rgba(var(--p0rgb),.35)} .pcard.p1 .fieldNums .num{color:var(--p1);border-color:rgba(var(--p1rgb),.35)} .fieldNums .num.empty{color:var(--dim)} /* Der aktive Spieler leuchtet – Karte, Zahl und (im Fightclub) die Feld-Kacheln. */ .pcard{--pc:var(--p0);--pcRGB:var(--p0rgb);transition:opacity .25s,background .25s} .pcard.p1{--pc:var(--p1);--pcRGB:var(--p1rgb)} .playLayout .pcard:not(.active){opacity:.6} .pcard.active{background:var(--panHi);border-color:var(--pc);opacity:1; animation:aura 2.4s ease-in-out infinite} .pcard.active span{color:var(--pc)} .pcard.active b{text-shadow:0 0 18px rgba(var(--pcRGB),.65)} .pcard.active .fieldNums .num{border-color:var(--pc); box-shadow:0 0 14px rgba(var(--pcRGB),.35) inset,0 0 10px rgba(var(--pcRGB),.25)} @keyframes aura{ 0%,100%{box-shadow:0 0 0 1px rgba(var(--pcRGB),.6),0 0 16px 1px rgba(var(--pcRGB),.28)} 50% {box-shadow:0 0 0 1px rgba(var(--pcRGB),.9),0 0 30px 6px rgba(var(--pcRGB),.5)} } @media (prefers-reduced-motion:reduce){ .pcard.active{animation:none;box-shadow:0 0 0 1px rgba(var(--pcRGB),.8),0 0 20px 3px rgba(var(--pcRGB),.35)} } /* Einstellungen vor dem Ausbullen – liegen mittig ueber der Scheibe. */ .setup{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3; display:none;flex-direction:column;align-items:center;gap:12px;padding:26px 34px;border-radius:18px; background:var(--veil);border:1px solid var(--edge2);box-shadow:0 14px 44px var(--sh)} .setup.show{display:flex} .setup h2{margin:0 0 4px;font-size:22px} .setup .opt{margin:0;font-size:14px;color:var(--fg)} .setup .go{background:var(--acc);border-color:var(--acc);color:var(--onAcc);font-weight:600; padding:9px 22px;font-size:15px;margin-top:6px} .setup .go:hover{background:var(--accHi)} .setup .rules{margin:2px 0 0;font-size:12px;color:var(--mut);line-height:1.5;text-align:center;max-width:32em} .scorecard{border-collapse:collapse;font-size:11px;color:var(--mut);width:100%} .scorecard th,.scorecard td{border:1px solid var(--line);padding:2px 3px;text-align:center} .scorecard td:first-child,.scorecard th:first-child{text-align:left;color:var(--fg);white-space:nowrap} .scorecard td.ace{color:var(--ok);font-weight:700} .scorecard td.bad{color:var(--err)} .scorecard td.sum{color:var(--fg);font-weight:700} /* Golf-Scorecard: die Loecher stehen untereinander (zwei Neuner-Bloecke nebeneinander), damit die Zahlen gross und gut lesbar bleiben. */ .scorecard.golfcard{font-size:16px;table-layout:fixed;margin-top:2px} .scorecard.golfcard th,.scorecard.golfcard td{border:0;padding:5px 2px;text-align:center; border-bottom:1px solid var(--line2)} .scorecard.golfcard th{font-size:12px;font-weight:600;color:var(--mut);letter-spacing:.4px; padding-bottom:6px;border-bottom:1px solid var(--line);overflow:hidden;text-overflow:ellipsis} .scorecard.golfcard th.p0{color:var(--p0)} .scorecard.golfcard th.p1{color:var(--p1)} .scorecard.golfcard td.h,.scorecard.golfcard th.h{color:var(--mut);font-size:13px; width:42px;text-align:right;padding-right:7px} .scorecard.golfcard th.h{font-size:11px;letter-spacing:0} .scorecard.golfcard td.v{font-variant-numeric:tabular-nums;font-weight:600;color:var(--fg); border-radius:6px} .scorecard.golfcard td.open{color:var(--dim)} .scorecard.golfcard td.ace{color:var(--ok);font-weight:800} .scorecard.golfcard td.hio{color:var(--ok)} .scorecard.golfcard td.bad{color:var(--err)} .scorecard.golfcard td.gap,.scorecard.golfcard th.gap{width:14px;border-bottom:0} .scorecard.golfcard td.pad{border-bottom:0} /* Das laufende Loch liegt auf einem hellen Band. */ .scorecard.golfcard td.now{background:var(--panHi);color:var(--fg)} .scorecard.golfcard td.h.now{color:var(--fg);font-weight:700;border-radius:6px 0 0 6px} .scorecard.golfcard td.nowEnd{border-radius:0 6px 6px 0} .scorecard.golfcard tr.tot td{border-top:1px solid var(--line);border-bottom:0; padding-top:7px;font-size:18px} .scorecard.golfcard tr.tot td.h{font-size:12px;text-transform:uppercase;color:var(--mut)} .scorecard.golfcard tr.tot td.sum{color:var(--fg);font-weight:800} .scorecard.golfcard tr.tot td.ges{color:var(--fg)} /* Regel-Fenster */ .modal{position:fixed;inset:0;background:var(--scrim);z-index:20;display:none; align-items:center;justify-content:center;padding:20px} .modal.show{display:flex} .modalBox{background:var(--pan);border:1px solid var(--edge2);border-radius:16px;padding:22px 26px; max-width:620px;max-height:80vh;overflow:auto;box-shadow:0 18px 50px var(--sh)} .modalBox h2{margin:0 0 10px;font-size:20px} .modalBox ul{margin:0 0 16px;padding-left:20px;line-height:1.55} .modalBox li{margin:6px 0} .modalBox button{width:100%} .modalBox .modalRow{margin:0;display:flex;gap:10px} .modalBox .modalRow button{width:auto;flex:1} .modalBox.wide{max-width:720px;width:min(92vw,720px)} /* Einstellungsfenster: je Gruppe eine Ueberschrift, darunter Zeile fuer Zeile Beschriftung links, Eingabe rechts (.setRow). */ .setGroup{margin:0 0 18px} .setGroup h3{margin:0 0 4px;font-size:14px;letter-spacing:.4px;text-transform:uppercase;color:var(--mut)} .setGroup .hint{margin:0 0 8px;font-size:12px} .setRow{display:flex;align-items:center;gap:12px;justify-content:space-between; padding:5px 0;border-bottom:1px solid var(--line2);font-size:13px} .setRow:last-child{border-bottom:0} .setRow > span:first-child{display:flex;align-items:center;gap:8px;flex:1;min-width:0} .setRow .tag{font-style:normal;font-size:10px;color:var(--mut);border:1px solid var(--line); border-radius:8px;padding:0 6px;white-space:nowrap} .setIn{display:flex;align-items:center;gap:6px;flex:0 0 auto} .setIn i{font-style:normal;font-size:11px;color:var(--mut);width:18px} .setIn input[type=number]{width:92px;padding:4px 6px;text-align:right} .setIn input[type=color]{width:44px;height:26px;padding:1px;border-radius:6px;background:var(--ink)} .setIn select{background:var(--ink);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:4px 6px} /* Ton-Editor: je Signal eine aufklappbare Zeile (.cueBox) mit einer Notentabelle. */ .cueBox{border-bottom:1px solid var(--line2)} .cueBox summary{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:6px 0;font-size:13px;cursor:pointer;list-style:none} .cueBox summary::-webkit-details-marker{display:none} .cueBox summary > span:first-child::before{content:"▸ ";color:var(--mut)} .cueBox[open] summary > span:first-child::before{content:"▾ "} .cueBtns{display:flex;gap:4px;flex:0 0 auto} .cueBtns button{padding:2px 7px;font-size:12px;line-height:1.3;width:auto} .cueTable{border-collapse:collapse;width:100%;margin:2px 0 10px;font-size:11px} .cueTable th{color:var(--mut);font-weight:600;padding:0 4px 3px;text-align:center} .cueTable td{padding:2px 3px;text-align:center} .cueTable input[type=number]{width:100%;min-width:52px;padding:3px 4px;text-align:right;font-size:12px} .cueTable select{width:100%;background:var(--ink);color:var(--fg);border:1px solid var(--line); border-radius:6px;padding:3px 2px;font-size:12px} .card .info{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%; border:1px solid var(--edge);color:var(--mut);font:italic 700 13px/20px Georgia,serif;text-align:center; background:var(--ink)} .card .info:hover{color:var(--fg);border-color:var(--acc);background:var(--panHi)} #promptText{width:100%;min-width:min(78vw,560px);background:var(--ink);color:var(--fg); border:1px solid var(--line);border-radius:8px;padding:10px;font:12px/1.5 ui-monospace,Menlo,monospace; margin-bottom:14px;resize:vertical} .modalBox .hint{margin:0 0 10px} /* ---------- Bewegung ---------- Alles hier ist Zierde: data-anim="off" (Einstellungsfenster) und ein System, das wenig Bewegung moechte, stellen es am Ende dieses Abschnitts wieder still. */ /* Der Farbschleier des Designs (--grad, am body) wandert langsam. */ body{animation:drift 34s ease-in-out infinite} @keyframes drift{ 0%,100%{background-position:0% 0%} 50% {background-position:100% 60%} } /* Ansicht wechseln */ .view.enter{animation:viewIn .34s cubic-bezier(.2,.8,.3,1)} @keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* Menuekacheln: kommen gestaffelt herein und heben sich unter dem Zeiger */ .cards .card{transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,border-color .18s; background:var(--pan);border:1px solid var(--line);animation:cardIn .45s backwards} .cards .card:nth-child(1){animation-delay:.02s} .cards .card:nth-child(2){animation-delay:.08s} .cards .card:nth-child(3){animation-delay:.14s} .cards .card:nth-child(4){animation-delay:.20s} .cards .card:nth-child(5){animation-delay:.26s} .cards .card:nth-child(6){animation-delay:.32s} .cards .card:nth-child(7){animation-delay:.38s} .cards .card:nth-child(8){animation-delay:.44s} .cards .card:nth-child(n+9){animation-delay:.44s} .cards .card:hover{transform:translateY(-5px) scale(1.015);border-color:var(--acc); box-shadow:0 14px 34px var(--sh),0 0 0 1px var(--acc)} .cards .card:active{transform:translateY(-1px) scale(.995)} @keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}} /* Knoepfe */ button{transition:transform .12s,background .18s,box-shadow .18s,border-color .18s} button:hover:not(:disabled){transform:translateY(-1px)} button:active:not(:disabled){transform:translateY(1px) scale(.98)} /* "weiter" ist die Hauptaktion – jede Spielansicht hat genau einen solchen Knopf. */ .row button[id$="End"]{background:var(--acc);border-color:var(--acc);color:var(--onAcc);font-weight:600} .row button[id$="End"]:hover:not(:disabled){background:var(--accHi)} /* Einblendung ueber der Scheibe: kommt mit Schwung */ .flash.show{animation:flashIn .42s cubic-bezier(.2,1.5,.4,1)} @keyframes flashIn{ 0% {opacity:0;transform:translate(-50%,-50%) scale(.7)} 60% {opacity:1;transform:translate(-50%,-50%) scale(1.06)} 100%{opacity:1;transform:translate(-50%,-50%) scale(1)} } /* Ein frisch erkannter Pfeil (core/game.js setzt .pop auf das neue Feld) */ .dartbox{transition:border-color .2s,background .2s} .dartbox.pop{animation:pop .5s cubic-bezier(.2,1.6,.4,1)} @keyframes pop{ 0% {transform:scale(.7);box-shadow:0 0 0 0 var(--acc)} 55% {transform:scale(1.08);box-shadow:0 0 18px 2px var(--acc)} 100%{transform:scale(1);box-shadow:0 0 0 0 transparent} } /* Eine Zahl auf der Spielerkarte hat sich geaendert (core/game.js setzt .bump) */ .bump{animation:bump .5s cubic-bezier(.2,1.5,.4,1)} @keyframes bump{ 0% {transform:scale(1)} 35% {transform:scale(1.22)} 100%{transform:scale(1)} } /* Fenster */ .modal.show .modalBox{animation:boxIn .3s cubic-bezier(.2,.9,.3,1)} @keyframes boxIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}} .setup.show{animation:boxIn .3s cubic-bezier(.2,.9,.3,1)} /* Schriftzug schimmert – nur in den bunten Designs, "klassisch" bleibt schlicht. */ [data-theme="neon"] .brand,[data-theme="sonne"] .brand,[data-theme="minze"] .brand{ background:linear-gradient(90deg,var(--p0),var(--acc),var(--p1),var(--acc),var(--p0)); background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent; animation:shine 9s linear infinite} @keyframes shine{from{background-position:0% 0}to{background-position:300% 0}} /* Glas-Anmutung: die bunten Designs legen die Flaechen halbdurchsichtig uebereinander. */ [data-theme="neon"] .pcard,[data-theme="neon"] .dartbox,[data-theme="neon"] .cards .card, [data-theme="sonne"] .pcard,[data-theme="sonne"] .dartbox,[data-theme="sonne"] .cards .card{ backdrop-filter:blur(7px)} [data-theme="neon"] nav,[data-theme="sonne"] nav{background:var(--pan);backdrop-filter:blur(10px)} [data-theme="minze"] .pcard,[data-theme="minze"] .cards .card,[data-theme="minze"] .dartbox{ box-shadow:0 6px 18px var(--sh)} [data-theme="minze"] nav{background:var(--pan);box-shadow:0 2px 12px var(--sh)} /* Stillstellen: Schalter im Einstellungsfenster und Systemwunsch. */ html[data-anim="off"] *,html[data-anim="off"] *::before,html[data-anim="off"] *::after{ animation-duration:.001s!important;animation-iteration-count:1!important; transition-duration:.001s!important} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important; transition-duration:.001s!important} }