:root{font:16px/1.4 system-ui,sans-serif;color:#102246;background:#eaf1fb;--navy:#101e44;--blue:#155eb6;--pink:#ca0893;--line:#b8c9e2}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.48;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #a7199a;outline-offset:2px}a{color:var(--blue)}h1,h2,p{margin:0}h2{font-size:1.45rem}button{border:1px solid var(--line);border-radius:8px;background:white;min-height:42px;padding:7px 12px;font-weight:650}.primary,button[aria-pressed=true]{background:var(--blue);color:white;border-color:var(--blue)}.wide{width:100%}.quiet{background:transparent;border:0;color:var(--blue)}.wordmark{display:flex;justify-content:center;align-items:center;gap:.13em;width:max-content;max-width:100%;margin:auto;font-size:clamp(1.8rem,7.2vw,3.65rem);font-weight:900;font-style:italic;letter-spacing:-.055em;line-height:1;color:#091c50}
.brand-die{display:block;width:1.9em;flex:none;filter:drop-shadow(0 2px 2px #09295d32)}
.brand-name{position:relative;padding-bottom:.25em}
.brand-name::after{content:"";position:absolute;left:.07em;right:.06em;bottom:0;height:.17em;background:linear-gradient(100deg,#0089f2 10%,#2854ecc9 40%,#fc078a 93%);clip-path:polygon(0 100%,20% 42%,100% 0,95% 75%,42% 82%)}
.splash .wordmark{color:white;text-shadow:0 3px 12px #050c28c9}
.splash{min-height:100svh;color:white;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;padding:clamp(32px,8vh,84px) 20px 26px;background:linear-gradient(#050c28a6,transparent 35%,transparent 58%,#050c28e8),#081534 url("assets/table.png") center 54%/cover no-repeat}.splash-actions{display:grid;width:min(100%,370px);gap:18px;text-align:center}.splash-actions button{font-size:1.3rem}.credit{color:white;text-decoration:none;display:inline-flex;gap:8px;align-items:center;justify-content:center}.credit img,.banner img{width:38px;border-radius:50%}
.shell{max-width:900px;margin:auto;padding:16px}.setup .wordmark{margin:12px auto 27px}.card,.banner{background:white;border:1px solid var(--line);border-radius:12px;padding:16px}.setting{display:grid;gap:8px;padding:12px 0;border-bottom:1px solid #d8e2f1}.setting:first-child{padding-top:0}.choices,.actions,.swatches{display:flex;gap:8px;flex-wrap:wrap}.choices button{flex:1}.player{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:1px 6px 1px 10px;border-radius:8px;margin-bottom:6px}.player strong{flex:1;overflow-wrap:anywhere}.dot{background:var(--player);width:12px;height:12px;border-radius:50%;display:inline-block;flex:none}.setup-actions{display:grid;gap:6px;margin-top:14px}.banner{margin-top:17px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy);border-bottom:3px solid var(--pink)}.banner span:last-child{margin-left:auto}.banner small{display:block}.resume{margin-bottom:12px}.muted{color:#52647f;font-size:.88rem}
.board{max-width:1040px;margin:auto;background:white;min-height:100svh}.board-header,.end-total{background:var(--navy);color:white}.board-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px}.board-header h1{font-size:1.3rem}.board-header button{color:var(--navy)}.board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:4px 8px;border-bottom:1px solid var(--line)}.tabs{display:flex;overflow:auto;gap:2px}.tabs button{display:flex;align-items:center;gap:5px;border:0;border-radius:0;border-bottom:3px solid transparent;background:white;color:var(--navy);white-space:nowrap}.tabs button[aria-pressed=true]{border-bottom-color:var(--pink)}.progress{display:flex;gap:6px;align-items:center;white-space:nowrap;font-weight:750}.undo{display:inline-grid;place-items:center;min-width:36px;min-height:30px;padding:2px 8px;font-size:1.15rem;line-height:1}.score-wrap{padding:8px}.scores,.results{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;font-variant-numeric:tabular-nums}.scores th,.scores td,.results th,.results td{padding:3px 2px;border-bottom:1px solid #cdd9eb;text-align:center}.scores th:first-child,.results th:first-child{text-align:left;padding-left:6px}.scores col:first-child{width:37%}.scores tbody th{font-size:.88rem}.scores td button{display:block;width:100%;min-height:34px;padding:0 2px;border-radius:6px}.upper{background:#eaf4fe}.lower{background:#f2edfb}.total-row{background:#d6e6fa;font-weight:800}.lower.total-row{background:#e7daf6}.filled{background:#d9e9fb}.crossed{background:repeating-linear-gradient(135deg,#fff 0 4px,#f4d8d6 4px 6px);color:#a5211c;text-decoration:line-through}.scores .gold{background:#ffe491;border-color:#ad7512}.bonus{display:block;border-radius:5px;font-weight:800;white-space:nowrap;padding:3px 0}.short{color:#a5211c;border:1px solid #cd4a45;background:#fff}.miss{color:#a5211c;background:#ffe9e6}.won{background:#b5edc6;color:#145232}.end-total{font-weight:850}.end-total button{color:var(--navy);min-height:30px;padding:2px 7px;font-size:.8rem}.end-total th:first-child{padding-block:6px}
dialog{width:min(94vw,530px);max-height:90vh;border:0;border-top:6px solid var(--navy);border-radius:12px;padding:19px;color:var(--navy);box-shadow:0 14px 48px #101e4455}dialog::backdrop{background:#101e446b}.dialog-head{display:flex;align-items:start;justify-content:space-between;gap:10px;margin-bottom:12px}.close{font-size:1.4rem;padding:0 9px}.dialog-body{display:grid;gap:12px}.dialog-body input{width:100%;border:1px solid var(--line);border-radius:6px;padding:10px;margin-top:5px}.swatch{background:var(--player);color:#fff;border:2px solid white;width:38px;height:38px;min-height:38px;padding:0;text-shadow:0 1px 3px #000}.swatch[aria-pressed=true]{background:var(--player);outline:2px solid var(--navy);border-color:white}.danger{background:#fff0ed;color:#a5211c;border-color:#d97d77}.erase{background:#edf0f5}.sequences{display:flex;gap:6px;flex-wrap:wrap}.sequence{display:flex;gap:3px;background:#d8edff;padding:5px;border-radius:6px}.die{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);place-items:center;background:white;border:1px solid #8199bd;border-radius:4px;width:21px;aspect-ratio:1;padding:2px}.die i{width:3px;height:3px;border-radius:50%;background:#132850}.results col:first-child{width:36%}.results td,.results th{overflow-wrap:anywhere}.saved{display:flex;align-items:center;justify-content:space-between;gap:8px}
@media(min-width:680px){.shell{padding:24px}.card{padding:20px 24px}.setting{grid-template-columns: minmax(160px,28%) 1fr;align-items:start;padding-block:14px}.setting>strong{padding-top:8px}.score-wrap{padding:14px}.scores th,.scores td{padding:4px 6px}.scores tbody th{font-size:1rem}.scores col:first-child{width:32%}}
@media(max-width:370px){.scores tbody th{font-size:.78rem}.scores col:first-child{width:34%}.progress{font-size:.82rem}.tabs button{padding-inline:7px}.score-wrap{padding:4px}}


.credit{flex-direction:column;gap:3px}
.credit img{width:min(152px,46vw);max-height:45px;border-radius:0;object-fit:contain}
.last-turn { padding: 6px 12px; }
.last-turn strong { color: var(--navy); }
.tabs button[aria-pressed=true] { border-bottom-color: var(--active-player); }
.scores thead th { border-bottom: 3px solid var(--active-player); }
/* Keep score columns aligned to the right, regardless of their number. */
.scores { --score-column-width: clamp(42px, 14vw, 112px); }
.scores col:first-child { width: auto; }
.scores td { padding-block: 2px; }
.scores col:not(:first-child) { width: var(--score-column-width); }

@media (max-width: 679px) {
  .scores { --score-column-width: clamp(40px, 13vw, 64px); }
  .scores th, .scores td { padding-block: 1px; }
  .scores td button { min-height: clamp(20px, calc((100dvh - 235px) / 21), 31px); }
}
@media (max-width: 679px) and (max-height: 850px) {
  .last-turn {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .board-header { padding-block: 4px; }
  .board-toolbar { padding-block: 0; }
  .score-wrap { padding-block: 3px; }
  .scores th, .scores td { padding-block: 1px; }
  .scores tbody th { line-height: 1.15; }
  .scores td button { line-height: 1.1; }
  .scores .bonus { padding-block: 1px; font-size: .8rem; }
  .end-total th:first-child { padding-block: 2px; }
}
.board-header .home-button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding-block: 3px; }
.home-icon { display: block; flex: none; }

@media (max-width: 679px) and (orientation: portrait) {
  .board { display: flex; flex-direction: column; min-height: 100dvh; }
  .score-wrap { flex: 1; display: grid; }
  .scores td button { height: 100%; font-size: clamp(13px, calc(1rem + (100dvh - 880px) * .015), 1rem); }
}
.end-total .results-button { display: inline-flex; align-items: center; gap: 4px; padding-inline: 5px; font-size: .72rem; vertical-align: middle; white-space: nowrap; }
.results-icon { color: var(--blue); font-size: .9rem; line-height: 1; }
.score-wrap { position: relative; overflow: clip; }
.swipe-enabled { touch-action: pan-y pinch-zoom; }
.score-preview { position: absolute; pointer-events: none; }

.score-wrap .scores {
  background: white;
  border: 1px solid #c3cfe2;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px #101e4420;
}
@media (max-width: 679px) and (orientation: portrait) {
  .setup {
    --setup-spacing: clamp(5px, calc(4dvh - 23px), 12px);
    padding-block: clamp(8px, calc(4dvh - 19px), 16px);
    font-size: clamp(.875rem, calc(.5rem + .9dvh), 1rem);
    line-height: 1.3;
  }

  .setup .wordmark {
    margin-block: var(--setup-spacing) clamp(10px, calc(8dvh - 43px), 27px);
  }

  .setup .card { padding-block: clamp(10px, calc(4dvh - 19px), 16px); }
  .setup .setting { gap: clamp(4px, 1dvh, 8px); padding-block: var(--setup-spacing); }
  .setup .setting:first-child { padding-top: 0; }
  .setup button {
    min-height: clamp(34px, calc(4dvh + 7px), 42px);
    padding-block: clamp(3px, calc(3dvh - 19px), 7px);
  }

  .setup .player { margin-bottom: clamp(3px, calc(2dvh - 11px), 6px); }
  .setup .player button:last-child { min-width: 36px; }
  .setup .setup-actions { margin-top: var(--setup-spacing); }
  .setup .resume { margin-bottom: var(--setup-spacing); }
  .setup .banner {
    margin-top: clamp(8px, calc(5dvh - 27px), 17px);
    padding-block: clamp(8px, calc(5dvh - 27px), 16px);
  }
}

.player .player-remove { color: #a5211c; }

.digital-board { --dice-panel-height: 175px; padding-bottom: calc(var(--dice-panel-height) + 12px); }
.digital-board .score-wrap { flex: none; }
.dice-panel {
  position: fixed;
  z-index: 2;
  bottom: 0;
  inset-inline: 0;
  display: grid;
  gap: 6px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 15px #101e4426;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
}
.dice-status { display: flex; justify-content: space-between; gap: 8px; }
.dice-controls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dice-controls button { display: grid; place-items: center; min-height: 40px; padding: 3px; }
.dice-controls button[aria-pressed=true] { background: #fce9f7; border: 2px solid var(--pink); }
.dice-controls .die { width: 27px; }
.dice-controls .die i { width: 4px; height: 4px; }
.digital-board .scores .suggested { background: #e4f6e8; color: #205b34; border-color: #5a9b69; }
.digital-board .scores .suggested-zero { background: #fff0ed; color: #a5211c; border-color: #cd7772; }
.digital-board .scores .filled:disabled,
.digital-board .scores .crossed:disabled,
.digital-board .scores .gold:disabled { opacity: 1; }

@media (min-width: 800px) and (orientation: landscape) {
  .digital-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 235px;
    grid-template-rows: auto auto auto 1fr;
    align-content: start;
    padding-bottom: 0;
  }
  .digital-board .board-header, .digital-board .board-toolbar, .digital-board .last-turn { grid-column: 1 / -1; }
  .digital-board .score-wrap { grid-column: 1; grid-row: 4; align-self: start; }
  .digital-board .scores { --score-column-width: clamp(55px, 8vw, 95px); }
  .dice-panel { position: sticky; top: 12px; grid-column: 2; grid-row: 4; align-self: start; margin: 14px 12px 14px 0; border-radius: 12px; }
}

.dice-panel { background: #3a404b; color: #fff; border-color: #596171; }
.dice-panel .muted { color: #dddfe6; }
.dice-status { align-items: center; }
.roll-indicators { display: flex; gap: 6px; }
.roll-indicators i { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #aab2be, #656e7d 62%, #434b58); box-shadow: 0 0 0 1px #262d37, inset 0 1px 1px #ffffff45; }
.roll-indicators .used { background: radial-gradient(circle at 36% 32%, #dfedff, #73b1ff 32%, #3771c8 65%, #234f98); box-shadow: 0 0 5px 1px #559dff70; }
.dice-controls button { background: #4b5361; color: #fff; border-color: #6c7687; }
.dice-controls button[aria-pressed=true] { background: #452d43; border-color: var(--pink); }
.dice-controls .die { background: #fff; }

:root[data-theme="dark"] {
  color-scheme: dark;
  color:#f0f4fc;
  background:#0d1420;
  --surface:#172231;
  --control:#202e41;
  --navy:#09182e;
  --blue:#2465bd;
  --pink:#ea4bb0;
  --line:#54657b;
  --link:#a3caff;
  --muted:#b7c6da;
}
[data-theme="dark"] :is(.card,.banner,.board,.score-wrap .scores,dialog) { background:var(--surface); }
[data-theme="dark"] :is(.banner,.setup .wordmark,dialog,.board-header button,.end-total button,.tabs button) { color:inherit; }
[data-theme="dark"] button:not(.primary,[aria-pressed=true],.swatch) { background:var(--control); }
[data-theme="dark"] :is(a,.quiet,.results-icon) { color:var(--link); }
[data-theme="dark"] .credit { color:white; }
[data-theme="dark"] :is(.muted,.last-turn strong) { color:var(--muted); }
[data-theme="dark"] :is(.setting,.scores th,.scores td,.results td,.results th,.score-wrap .scores) { border-color:#39495e; }
[data-theme="dark"] .scores thead th { border-bottom-color:var(--active-player); }
[data-theme="dark"] .tabs button { background:var(--surface); }
[data-theme="dark"] .upper { background:#14253a; }
[data-theme="dark"] .lower { background:#231d35; }
[data-theme="dark"] .total-row { background:#233952; }
[data-theme="dark"] .lower.total-row { background:#352b49; }
[data-theme="dark"] button.filled:not(.primary) { background:#304763; }
[data-theme="dark"] button.crossed:not(.primary) { background:repeating-linear-gradient(135deg,#34232a 0 4px,#55333b 4px 6px); color:#ffb4ac; }
[data-theme="dark"] .scores button.gold:not(.primary) { background:#5d4317; color:#ffe298; border-color:#b88e3b; }
[data-theme="dark"] :is(.short,.miss), [data-theme="dark"] button.danger:not(.primary) { background:#44262d; color:#ffbbb3; border-color:#c17071; }
[data-theme="dark"] .won { background:#32764d; color:#f1fff4; }
[data-theme="dark"] .digital-board .scores button.suggested { background:#193b2b; color:#b4f6c6; border-color:#659b74; }
[data-theme="dark"] .digital-board .scores button.suggested-zero { background:#40242c; color:#ffada3; border-color:#c17071; }
[data-theme="dark"] dialog::backdrop { background:#050811b8; }
[data-theme="dark"] .dialog-body input { background:var(--control); color:inherit; }
[data-theme="dark"] .sequence { background:#2c4968; }
[data-theme="dark"] .player .player-remove { color:#ffada3; }
[data-theme="dark"] .dice-panel { background:#202833; }
[data-theme="dark"] .dice-controls button[aria-pressed=true] { background:#52364f; }

.setup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block: var(--setup-spacing, 12px) clamp(10px, calc(8dvh - 43px), 27px);
}
.setup .setup-header .wordmark { margin: 0; font-size: clamp(1rem, 5.2vw, 3.25rem); }
.setup .theme-button, .board-header .theme-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  min-height: 42px;
  padding: 0 8px;
  font-size: .75rem;
}
.theme-button svg { width: 18px; height: 18px; }
.theme-label { opacity: .8; }
.start-content { display: grid; gap: 12px; }
.start-content > [data-action="newSettings"] { margin-block: 8px 4px; }
.game-list h2 { font-size: 1.1rem; }
.game-list ul { padding: 0; margin: 6px 0 0; list-style: none; }
.game-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 8px; border-top: 1px solid var(--line); }
.game-details { min-width: 0; overflow-wrap: anywhere; }
.game-details small { display: block; }
.game-actions { display: flex; flex: none; gap: 5px; }
.game-actions button { padding-inline: 8px; }

.star-fountain { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.star-fountain span {
  position: absolute;
  line-height: 1;
  text-shadow: 0 0 5px #15213a70;
  animation: star-fountain 950ms ease-out var(--star-delay) both;
}
@keyframes star-fountain {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  14% { opacity: 1; }
  58% { opacity: 1; transform: translate(var(--star-mid-x), var(--star-arc)) rotate(110deg); }
  100% { opacity: 0; transform: translate(var(--star-x), var(--star-y)) rotate(220deg) scale(.5); }
}

.setup .cancel-settings { background: transparent; border-color: var(--line); }

.throw-choices button { display: flex; align-items: center; gap: 8px; min-height: 44px; text-align: left; }
.throw-choices small { display: block; font-size: .8rem; font-weight: 400; line-height: 1.25; }
.throw-choices button[aria-pressed=true] { background: #e5efff; border-color: var(--blue); color: #102246; }
.throw-marker { width: 15px; height: 15px; flex: none; border: 1px solid var(--line); border-radius: 50%; }
[aria-pressed=true] .throw-marker { color: var(--blue); border-color: currentColor; background: radial-gradient(circle, currentColor 0 44%, transparent 49%); }
[data-theme="dark"] .throw-choices button[aria-pressed=true] { background: #233952; border-color: var(--link); color: #f0f4fc; }
[data-theme="dark"] [aria-pressed=true] .throw-marker { color: var(--link); }
@media (max-width: 679px) {
  .throw-choices { flex-direction: column; }
  .setup .throw-choices button { min-height: 44px; }
}
#new-game-settings .setting:nth-child(3) { margin-top: 5px; }
#new-game-settings .setup-actions { margin-top: calc(var(--setup-spacing, 14px) + 10px); }
.setup .start-game { position: relative; min-height: 46px; padding-inline: 34px; background: #ed278c; border-color: #ed278c; color: white; }
.start-arrow { position: absolute; inset-inline-end: 13px; top: 50%; transform: translateY(-50%); font-size: 1.1em; line-height: 1; }
.board-actions { display: flex; align-items: center; gap: 6px; }
.board-header .theme-button { min-height: 34px; }
.dice-controls button[aria-pressed=true] { background: #59405a; }
.dice-controls .held-start { position: relative; }
.dice-controls .held-start::before {
  content: "";
  position: absolute;
  inset-block: 3px;
  inset-inline-start: -5px;
  width: 1px;
  background: #e1a9ce;
  pointer-events: none;
}

:root[data-installed] .install-app { display: none; }

.splash .wordmark { margin-top: clamp(6px, 1.2svh, 12px); font-size: clamp(2.2rem, 8.6vw, 4rem); }
.splash-actions .credit { margin-top: clamp(32px, 6.8svh, 58px); }
@media (max-width: 679px) and (orientation: portrait) {
  .splash { background-position: center, center 66%; }
}