:root{--bg:#f4f5f7;--panel:#fff;--panel-soft:#f8f9fb;--border:#dfe3e8;--text:#22262b;--muted:#6d747c;--hover:#eef1f4;--active:#e7eaee;--button:#2e3338;--button-text:#fff;--success:#287a4b;--success-bg:#edf8f1;--danger:#a84b4b;--helper:#aeb4bb;--shadow:0 8px 28px rgba(0,0,0,.08)} *{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}body{min-width:320px}a{color:inherit;text-decoration:none}button,input{font:inherit}.app{min-height:100vh;display:grid;grid-template-rows:58px 1fr 30px}.topbar{background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 18px}.brand{font-weight:700;font-size:20px}.top-meta{font-size:13px;color:var(--muted);display:flex;gap:16px}.content{padding:20px}.home-card,.panel,.dice-card,.score-card{max-width:1050px;margin:0 auto;background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}.home-card{max-width:760px;padding:28px}.home-card h1,.panel h1{margin:0}.lead{color:var(--muted);margin:6px 0 24px}.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-card{border:1px solid var(--border);background:var(--panel-soft);border-radius:10px;padding:18px;display:grid;gap:13px}.form-card h2{font-size:17px;margin:0 0 2px}.form-card label{font-size:13px;display:grid;gap:5px}.form-card input{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px 11px;background:var(--panel);color:var(--text);outline:none}.form-card input:focus{border-color:#aeb4bb}.check{display:flex!important;align-items:center;grid-template-columns:auto 1fr!important;gap:8px!important}.check input{width:18px!important;height:18px;margin:0}.tiny{font-size:12px;color:var(--muted);text-align:center;margin:20px 0 0}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:8px;padding:9px 14px;cursor:pointer}.btn:hover{background:var(--hover)}.btn.primary{background:var(--button);color:var(--button-text);border-color:var(--button)}.btn.primary:hover{background:#252a2f}.btn:disabled{opacity:.45;cursor:not-allowed}.message{max-width:1050px;margin:0 auto 12px;padding:10px 13px;border-radius:9px;border:1px solid #eccaca;background:#fff1f1;color:#8a2d2d}.panel{padding:24px}.lobby-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.lobby-head p{color:var(--muted);margin:5px 0}.big-code{font:700 30px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:3px;background:var(--panel-soft);border:1px solid var(--border);border-radius:9px;padding:10px 16px}.lobby-players{display:grid;gap:8px;margin:20px 0}.lobby-player{border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;justify-content:space-between}.host-tag{color:var(--muted);font-size:12px}.lobby-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.dice-card{padding:16px 18px;margin-bottom:14px}.turn-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.turn-player{font-weight:700}.turn-player .active{color:var(--success)}.roll-count{color:var(--muted);font-size:13px}.dice-area{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}.die-wrap{text-align:center}.die{width:58px;height:58px;border:2px solid var(--border);border-radius:10px;background:var(--panel);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:8px;cursor:pointer;transition:.12s}.die:hover{background:var(--hover)}.die.held{border-color:var(--button);background:var(--panel-soft)}.die.disabled{cursor:default}.pip{width:8px;height:8px;background:var(--text);border-radius:50%;align-self:center;justify-self:center}.p1{grid-area:1/1}.p2{grid-area:1/2}.p3{grid-area:1/3}.p4{grid-area:2/1}.p5{grid-area:2/2}.p6{grid-area:2/3}.p7{grid-area:3/1}.p8{grid-area:3/2}.p9{grid-area:3/3}.die-state{font-size:10px;color:var(--muted);margin-top:3px}.actions{display:flex;justify-content:center}.score-card{overflow:hidden}.table-wrap{width:100%;overflow-x:auto}.score-table{width:100%;border-collapse:collapse;min-width:700px}.score-table th,.score-table td{padding:6px 10px;border:1px solid var(--border);text-align:center;height:31px}.score-table th{background:var(--panel-soft);font-size:13px;font-weight:600}.score-table th:first-child,.score-table td:first-child{text-align:left;width:190px}.score-table tbody tr:nth-child(even){background:rgba(0,0,0,.018)}.player-head.active-player{background:var(--active)}.player-status{display:block;font-size:10px;color:var(--success);font-weight:700;margin-top:2px}.active-cell{background:rgba(0,0,0,.012)}.score-value{color:var(--text);font-weight:500}.helper{color:var(--helper);font-weight:500;cursor:pointer}.helper:hover{color:var(--text);background:var(--hover)}.section-row td,.total-row td{background:var(--panel-soft)!important;font-weight:700;border-top:2px solid var(--border)}.legend{display:flex;justify-content:space-between;gap:12px;padding:9px 13px;border-top:1px solid var(--border);background:var(--panel-soft);color:var(--muted);font-size:12px}.legend-swatch{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:0}.legend-swatch.saved{background:var(--text)}.legend-swatch.help{background:var(--helper)}.finish{text-align:center;max-width:620px}.finish #winner{font-size:22px;font-weight:700;margin:18px}.ranking-table{width:100%;border-collapse:collapse;margin:0 auto 22px}.ranking-table td{border-bottom:1px solid var(--border);padding:9px}.footer{border-top:1px solid var(--border);background:var(--panel);color:var(--muted);display:flex;align-items:center;justify-content:flex-end;padding:0 14px;font-size:12px} @media(max-width:760px){.app{grid-template-rows:54px 1fr 28px}.topbar{padding:0 10px}.content{padding:10px}.home-grid{grid-template-columns:1fr}.home-card,.panel{padding:18px}.lobby-head{flex-direction:column}.dice-card{padding:13px 9px}.die{width:46px;height:46px;padding:6px}.pip{width:6px;height:6px}.dice-area{gap:6px}.legend{flex-direction:column}.top-meta{gap:8px;font-size:11px}} /* v0.2.0 menu, language and help modals */ .top-actions{display:flex;align-items:center;gap:10px;min-width:0}.top-link{border:0;background:transparent;color:var(--muted);padding:6px 4px;cursor:pointer}.top-link:hover{color:var(--text)}.language-select{border:1px solid var(--border);border-radius:7px;background:var(--panel-soft);color:var(--text);padding:6px 8px;font-size:13px}.top-meta{border-left:1px solid var(--border);padding-left:12px;margin-left:2px;white-space:nowrap} .modal[hidden]{display:none}.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:80;display:flex;align-items:center;justify-content:center;padding:18px}.modal-card{width:min(460px,100%);max-height:calc(100vh - 36px);overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:20px}.rules-card{width:min(560px,100%)}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.modal-head h2{margin:0;font-size:20px}.modal-x{border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;padding:2px 5px;cursor:pointer}.modal-x:hover{color:var(--text)}.modal-actions{display:flex;justify-content:flex-end;margin-top:16px}.muted,.rule-hint{color:var(--muted)}.rule-hint{font-size:13px;margin:0 0 12px}.rules-grid{border:1px solid var(--border);border-radius:9px;overflow:hidden}.rule-row{display:grid;grid-template-columns:minmax(130px,1fr) minmax(180px,1.2fr);gap:12px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--border);font-size:14px}.rule-row:last-child{border-bottom:0}.rule-row:nth-child(even){background:var(--panel-soft)}.pattern{display:flex;justify-content:flex-end;gap:7px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:17px;letter-spacing:.5px}.pattern b,.pattern em,.pattern strong,.pattern i{font-style:normal;font-weight:700}.pattern b{color:#22262b}.pattern em{color:#6d747c}.pattern strong{color:#9a8c68}.pattern i{color:#b8bdc3;font-weight:500}.pattern.numbers{font-weight:700;word-spacing:6px;color:var(--text)}.rule-notes{margin-top:12px;padding:10px 12px;background:var(--panel-soft);border:1px solid var(--border);border-radius:9px;font-size:13px}.rule-notes p{margin:0}.rule-notes p+p{margin-top:6px}.version-line{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)} @media(max-width:760px){.topbar{gap:8px}.brand{flex:0 0 auto}.top-actions{gap:5px;overflow-x:auto}.top-link{font-size:12px;padding:5px 2px}.language-select{font-size:12px;padding:5px 6px}.top-meta{font-size:10px;padding-left:7px;gap:5px}.rule-row{grid-template-columns:1fr auto;gap:8px}.pattern{gap:4px;font-size:15px}.modal-card{padding:16px}} /* v0.2.1 top menu buttons */ .top-menu-btn{padding:7px 11px;font-size:13px;line-height:1.15;white-space:nowrap} .top-menu-btn:hover{background:#252a2f} @media(max-width:760px){.top-menu-btn{padding:6px 9px;font-size:12px}} /* v0.4.5 visual dice examples in Rules */ .dice-pattern{display:flex;justify-content:flex-end;align-items:center;gap:5px;flex-wrap:nowrap} .mini-die{display:inline-block;flex:0 0 28px;width:28px;height:28px;border:1px solid #aeb4bb;border-radius:6px;background-color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08);background-repeat:no-repeat} .mini-die.d1{background-image:radial-gradient(circle at 50% 50%,#22262b 0 2.3px,transparent 2.5px)} .mini-die.d2{background-image:radial-gradient(circle at 28% 28%,#22262b 0 2.3px,transparent 2.5px),radial-gradient(circle at 72% 72%,#22262b 0 2.3px,transparent 2.5px)} .mini-die.d3{background-image:radial-gradient(circle at 28% 28%,#22262b 0 2.3px,transparent 2.5px),radial-gradient(circle at 50% 50%,#22262b 0 2.3px,transparent 2.5px),radial-gradient(circle at 72% 72%,#22262b 0 2.3px,transparent 2.5px)} .mini-die.d4{background-image:radial-gradient(circle at 28% 28%,#22262b 0 2.3px,transparent 2.5px),radial-gradient(circle at 72% 28%,#22262b 0 2.3px,transparent 2.5px),radial-gradient(circle at 28% 72%,#22262b 0 2.3px,transparent 2.5px),radial-gradient(circle at 72% 72%,#22262b 0 2.3px,transparent 2.5px)} .mini-die.d5{background-image:radial-gradient(circle at 28% 28%,#22262b 0 2.3px,transparent 2.5px),radial-gradient(circle at 72% 28%,#22262b 0 2.3px,transparent 2.5px),radial-gradient(circle at 50% 50%,#22262b 0 2.3px,transparent 2.5px),radial-gradient(circle at 28% 72%,#22262b 0 2.3px,transparent 2.5px),radial-gradient(circle at 72% 72%,#22262b 0 2.3px,transparent 2.5px)} .mini-die.d6{background-image:radial-gradient(circle at 28% 25%,#22262b 0 2.3px,transparent 2.5px),radial-gradient(circle at 72% 25%,#22262b 0 2.3px,transparent 2.5px),radial-gradient(circle at 28% 50%,#22262b 0 2.3px,transparent 2.5px),radial-gradient(circle at 72% 50%,#22262b 0 2.3px,transparent 2.5px),radial-gradient(circle at 28% 75%,#22262b 0 2.3px,transparent 2.5px),radial-gradient(circle at 72% 75%,#22262b 0 2.3px,transparent 2.5px)} @media(max-width:760px){.rules-card{width:min(600px,100%)}.rule-row{grid-template-columns:minmax(95px,1fr) auto;padding:7px 8px}.dice-pattern{gap:3px}.mini-die{flex-basis:23px;width:23px;height:23px;border-radius:5px}} /* v0.4.5 - visible rule group highlighting */ .mini-die.group-a { border-color: #e2b93f !important; background-color: #fff7d6 !important; box-shadow: 0 0 0 2px rgba(226,185,63,.20), 0 0 10px rgba(226,185,63,.48) !important; } .mini-die.group-b { border-color: #62b875 !important; background-color: #e9f8ed !important; box-shadow: 0 0 0 2px rgba(98,184,117,.20), 0 0 10px rgba(98,184,117,.44) !important; } .mini-die.group-c { border-color: #6aa9df !important; background-color: #eaf4fd !important; box-shadow: 0 0 0 2px rgba(106,169,223,.20), 0 0 10px rgba(106,169,223,.44) !important; } .mini-die.group-straight { border-color: #ad7fd6 !important; background-color: #f5eafd !important; box-shadow: 0 0 0 2px rgba(173,127,214,.20), 0 0 10px rgba(173,127,214,.42) !important; } .bot-tag{color:var(--muted);font-size:11px;font-weight:700} /* v0.4.5 - mark each player's most recently chosen score */ .score-table td.last-choice { background: #fff3c4 !important; box-shadow: inset 0 0 0 1px #e2c45c; font-weight: 700; } /* v0.4.5 - Contributors & Thanks in About */ .contributors-box { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: #f8f9fa; } .contributors-box h3 { margin: 0 0 7px; font-size: 15px; } .contributors-box p { margin: 0 0 11px; color: var(--muted); font-size: 13px; line-height: 1.45; } .contributor-entry { display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .contributor-entry strong { color: var(--text); } .contributor-entry span { color: var(--muted); } /* v0.4.5 - About & Settings */ .about-settings-modal { width:min(900px, calc(100vw - 32px)); } .about-settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .about-card { border:1px solid var(--border); border-radius:12px; padding:18px; background:#fff; } .about-card h3 { margin:0 0 16px; font-size:16px; } .about-card p { line-height:1.55; } .setting-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0; border-bottom:1px solid var(--border); } .setting-row:last-child { border-bottom:0; } .setting-row strong, .setting-row small { display:block; } .setting-row small { margin-top:3px; color:var(--muted); font-size:12px; } .setting-select { min-width:102px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text); } .about-version { margin-top:20px; color:var(--muted); font-size:13px; } .thanks-card { margin-top:18px; } .thanks-card p { margin:0 0 12px; color:var(--muted); font-size:13px; } @media (max-width:700px) { .about-settings-grid { grid-template-columns:1fr; } } [hidden]{display:none!important} /* v0.4.5 - About modal uses the standard modal shell */ .modal-card.about-settings-modal { width: min(900px, 100%); } /* v0.4.5 - neutral dice before first roll */ .die.empty{opacity:.42;background:#f3f4f6;cursor:default} .contributor-entry span + span{margin-top:2px} /* v0.4.5 - local/remote lobby */ #remoteLobbyStep h3,#localLobbyStep h3{margin:0 0 10px} .local-player-rows{display:grid;gap:8px;margin:14px 0} .local-player-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:var(--panel-soft)} .local-player-row input[type=text]{width:100%;border:1px solid var(--border);border-radius:8px;padding:9px 10px;background:var(--panel)} .local-active,.local-bot{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap} .local-active input,.local-bot input{width:17px;height:17px} #finalPlayerSummary{margin-bottom:12px} @media(max-width:620px){.local-player-row{grid-template-columns:auto 1fr}.local-bot{grid-column:2}} /* v0.4.5 local player form fix */ .local-player-row input,.local-player-row label{pointer-events:auto} .local-player-row input[type=text]{position:relative;z-index:1} .local-player-row input[type=checkbox]{cursor:pointer} .local-player-row:focus-within{border-color:#bfc6ce;background:#fff} /* v0.4.5 - bot-only test mode */ .bot-test-log-panel{margin-top:14px} .bot-test-log-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .test-badge{display:inline-block;margin-left:6px;padding:3px 7px;border:1px solid var(--border);border-radius:999px;font-size:11px;font-weight:800} .bot-test-log{margin:0;max-height:50vh;overflow:auto;white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;font-size:13px;line-height:1.55;padding:12px;border:1px solid var(--border);border-radius:9px;background:var(--panel-soft)} .bot-test-finished-log{margin-top:18px;text-align:left} /* v0.4.5 - stable bot test log */ .bot-test-log{ overflow-anchor:none; } /* v0.4.5 multi-run bot test */ .bot-test-progress{font-weight:700;margin-bottom:10px} .bot-test-summary{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;margin:12px 0}