/* Dark is the default; js/main.js sets data-theme="light" on the element when light is wanted or the system asks for it. */ :root{ --bg:#12141a; --bg-glow:#1d2331; --panel:#1b1f29; --panel-2:#232838; --line:#2c3242; --text:#e9edf5; --muted:#98a1b5; --accent:#e8b83a; --accent-ink:#231d05; --accent-border:#8a6508; --accent-text:#e8b83a; --current:#2b3145; --log-bg:#161a23; --die-bg:#f4f5f8; --die-ink:#20232c; --die-empty:#b7bcc8; --error:#ff8b84; --radius:14px; --bottombar:64px; color-scheme: dark; } :root[data-theme="light"]{ --bg:#f5f6f9; --bg-glow:#ffffff; --panel:#ffffff; --panel-2:#eef0f5; --line:#d8dce4; --text:#1a1e27; --muted:#5c6472; --accent:#e8b83a; --accent-ink:#2a2205; --accent-border:#8a6508; --accent-text:#8a6508; --current:#fdf2d3; --log-bg:#f0f2f6; --die-bg:#ffffff; --die-ink:#20232c; --die-empty:#a8afbb; --error:#c0392b; color-scheme: light; } *{box-sizing:border-box} /* Has to beat display:flex on .log and .drawer */ [hidden]{display:none !important} body{ margin:0; background:radial-gradient(1200px 700px at 50% -10%, var(--bg-glow) 0%, var(--bg) 60%); color:var(--text); font:15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; min-height:100vh; padding-bottom:calc(var(--bottombar) + env(safe-area-inset-bottom, 0px)); } button{font:inherit; cursor:pointer; border-radius:10px; border:1px solid var(--line)} button:disabled{opacity:.45; cursor:not-allowed} /* ---------- Kopfzeile ---------- */ .topbar{ position:sticky; top:0; z-index:4; display:flex; align-items:center; gap:6px; padding:8px 14px; border-bottom:1px solid var(--line); background:var(--bg); } .topbar h1{font-size:17px; font-weight:650; margin:0; letter-spacing:.2px; flex:1} .text-btn{ background:none; border:none; color:var(--accent); padding:8px 10px; border-radius:10px; font-size:14px; white-space:nowrap; } .text-btn:hover{background:var(--panel-2)} .icon-btn{ background:none; border:none; color:var(--text); width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:10px; } .icon-btn:hover{background:var(--panel-2)} .icon-btn svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round} .text-btn{color:var(--accent-text)} /* ---------- Drawer menu ---------- */ .scrim{ position:fixed; inset:0; z-index:15; background:rgba(8,10,15,.62); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; } .scrim.open{opacity:1; visibility:visible} .drawer{ position:fixed; top:0; bottom:0; left:0; z-index:20; width:min(280px, 82vw); display:flex; flex-direction:column; gap:4px; padding:18px 12px; background:var(--panel); border-right:1px solid var(--line); transform:translateX(-100%); visibility:hidden; transition:transform .22s ease, visibility .22s ease; } .drawer.open{transform:none; visibility:visible} .drawer h2{margin:4px 8px 12px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)} .drawer-item{ background:none; border:none; color:var(--text); text-align:left; padding:12px 14px; border-radius:10px; font-size:15px; } .drawer-item:hover{background:var(--panel-2)} /* ---------- Seiten ---------- */ .page{max-width:1200px; margin:0 auto; padding:18px 20px} .card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:14px; } .card h2{margin:0 0 10px; font-size:16px} .card p{margin:0 0 10px} .card p:last-child{margin-bottom:0} .card ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:7px} .muted{color:var(--muted); font-size:13.5px} .note{color:var(--muted); font-size:12.5px; margin:6px 0 0} /* ---------- Spielseite ---------- */ .layout{ display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:22px; align-items:start; } .board-wrap{display:flex; justify-content:center} #board{ width:100%; border:1px solid var(--line); max-width:min(72vh, 640px); height:auto; aspect-ratio:1/1; border-radius:20px; touch-action:manipulation; } .panel{ display:flex; flex-direction:column; gap:16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; } .players{display:flex; flex-direction:column; gap:6px} .player{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; border:1px solid transparent; background:var(--panel-2); } .player.current{border-color:var(--accent); background:var(--current)} .player.done{opacity:.55} .dot{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)} .player .name{font-weight:600} .player .kind{color:var(--muted); font-size:12.5px; margin-left:auto} .dice-box{display:flex; align-items:center; gap:12px} .die{ width:64px;height:64px;flex:none; background:var(--die-bg); border:1px solid var(--line); border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,.25); position:relative; } .die-empty{color:var(--die-empty);font-size:26px;display:grid;place-items:center;height:100%} .pip{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--die-ink)} .primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent-border); font-weight:650; padding:12px 18px; flex:1; } .primary:hover:not(:disabled){filter:brightness(1.07)} .wide{width:100%} .hint{margin:0; color:var(--muted); min-height:2.6em} .log{ list-style:none; margin:0; padding:10px; max-height:220px; overflow:auto; background:var(--log-bg); border:1px solid var(--line); border-radius:10px; font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:4px; } .log li strong{color:var(--text); font-weight:600} /* ---------- Leiste unten ---------- */ .bottombar{ position:fixed; left:0; right:0; bottom:0; z-index:10; display:flex; height:calc(var(--bottombar) + env(safe-area-inset-bottom, 0px)); padding-bottom:env(safe-area-inset-bottom, 0px); background:var(--panel); border-top:1px solid var(--line); } .tab{ flex:1; background:none; border:none; border-radius:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--muted); font-size:11.5px; } .tab svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round} .tab svg .filled{fill:currentColor; stroke:none} .tab svg .knob{fill:var(--panel)} .tab:hover{color:var(--text)} .tab.is-active{color:var(--accent-text)} /* ---------- Dialoge ---------- */ .overlay{ position:fixed; inset:0; background:rgba(8,10,15,.78); display:grid; place-items:center; padding:20px; z-index:25; backdrop-filter: blur(3px); } .dialog{ width:min(420px,100%); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:14px; max-height:90vh; overflow:auto; } .dialog h2{margin:0; font-size:18px} .setup-rows{display:flex; flex-direction:column; gap:8px} .row{display:flex; align-items:center; gap:10px; font-size:14px; padding:6px 0} .row span{flex:1} .row.check{gap:8px} select{ background:var(--panel-2); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:7px 9px; font:inherit; } input[type=checkbox]{width:17px; height:17px; accent-color:var(--accent)} /* Colour scheme: dots instead of names, ten lines of text would be too much */ .swatch-row{padding-bottom:0} .swatch-row .muted{flex:none} .swatches{display:flex; flex-wrap:wrap; gap:10px; padding:4px 0 6px} .swatch{ width:34px; height:34px; padding:0; border-radius:50%; border:1px solid var(--line); cursor:pointer; } .swatch.is-active{border:3px solid var(--text)} /* Over the network */ .online-code{margin:0 0 10px; font-size:15px} .online-code strong{ font-family:ui-monospace, "Cascadia Mono", Consolas, monospace; font-size:22px; letter-spacing:3px; color:var(--accent-text); } #online .row input{ flex:1; min-width:0; padding:7px 9px; border-radius:9px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); font:inherit; } #online-code{text-transform:uppercase; letter-spacing:3px} #online .wide{margin:4px 0 12px} .seat-buttons{display:flex; gap:6px; flex:none} .seat-buttons button{ padding:5px 9px; border-radius:8px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); font:inherit; cursor:pointer; } .seat-buttons button.is-active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent-border); } .seat-who{flex:1; min-width:0; color:var(--muted); overflow:hidden; text-overflow:ellipsis} .error{color:var(--error); margin:0; font-size:13px} .ranking{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px} /* Landscape on a phone: little height, plenty of width - the four colours stand side by side there, so the start button is reachable without scrolling. */ @media (orientation: landscape) and (max-height: 560px){ .dialog{width:min(680px, 100%); padding:18px} .setup-rows{display:grid; grid-template-columns:1fr 1fr; gap:6px 20px} } @media (max-width: 900px){ .layout{grid-template-columns:minmax(0,1fr); gap:16px} .page{padding:14px} #board{max-width:min(92vw, 520px)} .log{max-height:140px} }