/* A dusk-lit reading room. The cube is the brightest thing; controls are smoked glass. */
:root {
  color-scheme: dark;
  --glass: rgba(58, 47, 84, .74);
  --glass-line: rgba(255, 255, 255, .13);
  --control: rgba(255, 255, 255, .09);
  --control-hover: rgba(255, 255, 255, .17);
  --ink: #f6f0ff;
  --ink-soft: #cdc2e4;
  --accent: #8a5cf6;
  --accent-hover: #9b72f8;
  --amber: #ffc861;
  --blue: #55a8ff;
  --red: #ff6b7d;
  --error: #ffb0b8;
  --dialog: #30264c;
  --ground: #2c2445;
  --display: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}
body[data-theme="morning"] { --glass: rgba(92, 70, 60, .68); --accent: #d9734e; --accent-hover: #e58561; --dialog: #4a372f; --ground: #e7c8a8; }
body[data-theme="cat"] { --glass: rgba(84, 56, 42, .74); --accent: #e08a3c; --accent-hover: #ee9c52; --dialog: #43302a; --ground: #4a3430; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overscroll-behavior: none; touch-action: manipulation; }
body { background: var(--ground); color: var(--ink); font: 700 15px/1.35 var(--body); overflow: hidden; }
[hidden] { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#backdrop, #stage { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; display: block; }
#stage { touch-action: none; cursor: grab; }
#stage.dragging { cursor: grabbing; }

.app {
  position: relative; height: 100%; height: 100dvh; pointer-events: none;
  display: grid; grid-template-columns: 250px 1fr 200px; grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px; padding-block: 20px;
  padding-left: max(26px, env(safe-area-inset-left, 0px));
  padding-right: max(26px, env(safe-area-inset-right, 0px));
}
.app button, .panel, .modes, .pad { pointer-events: auto; }
.brand { grid-column: 1 / 3; grid-row: 1; display: flex; align-items: center; gap: 12px; }
.brand svg { width: 46px; height: 46px; flex: none; stroke: none; }
.brand h1 { font: 600 32px/1 var(--display); margin: 0; }
.brand p { margin: 4px 0 0; color: var(--ink-soft); }
.tools-toggle, .mini, .undo-quick { display: none; }
.plan-toggle { margin-left: 14px; min-height: 40px; background: var(--glass); pointer-events: auto; }
.plan-toggle[aria-pressed="true"] { background: var(--accent); }
.choice { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 15px; background: var(--control); }
.choice button { min-height: 42px; padding: 0 6px; background: none; border-radius: 11px; }
.choice button.on { background: var(--accent); }
.modes {
  grid-column: 2 / 4; grid-row: 1; justify-self: end; align-self: start; display: flex; gap: 4px; padding: 5px;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 18px;
}
.modes button { min-height: 40px; padding: 0 16px; background: none; }
.modes button.on { background: var(--accent); }

.panel {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 22px; padding: 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 10px; max-height: 100%; overflow-y: auto; scrollbar-width: thin;
}
.scorebar {
  grid-column: 2; grid-row: 2; align-self: start; justify-self: center; width: min(560px, 100%); z-index: 2;
  display: flex; flex-direction: column; gap: 5px; pointer-events: none;
}
.scores { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 6px; }
.turn-line { display: flex; justify-content: center; align-items: baseline; gap: 10px; text-shadow: 0 1px 8px rgba(20, 12, 40, .9); }
#turn-clock { font: 600 20px var(--display); font-variant-numeric: tabular-nums; }
#turn-clock.low { color: var(--red); }
.left { grid-column: 1; grid-row: 2; align-self: center; }
.right { grid-column: 3; grid-row: 2; align-self: center; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.label { font: 500 15px var(--display); color: var(--ink-soft); }

button {
  font: 600 15px var(--display); color: var(--ink); background: var(--control); border: 0; border-radius: 14px;
  min-height: 44px; padding: 0 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 8px; transition: background .15s, transform .1s;
}
button:hover { background: var(--control-hover); }
button:active { transform: scale(.96); }
button:focus-visible, input:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
button[disabled] { opacity: .4; cursor: default; }
button svg { width: 20px; height: 20px; flex: none; }
.action.primary { background: var(--accent); }
.action.primary:hover { background: var(--accent-hover); }
.action.quiet { background: none; color: var(--ink-soft); min-height: 36px; }

.stepper { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; background: var(--control); border-radius: 14px; }
.stepper button { background: none; padding: 0; }
.stepper output { text-align: center; font: 600 16px var(--display); }

.stats { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; color: var(--ink-soft); }
.stats b { font: 600 15px var(--display); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.cross { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 5px; justify-content: center; }
.cross button { padding: 0; }
.cross .u { grid-area: 1 / 2; } .cross .l { grid-area: 2 / 1; } .cross .d { grid-area: 2 / 2; } .cross .r { grid-area: 2 / 3; }
.tip { margin: 0; color: var(--ink-soft); font-size: 13px; }

.board { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; max-height: 300px; overflow-y: auto; }
.board li { display: grid; grid-template-columns: 24px 1fr auto; gap: 6px; padding: 3px 6px; border-radius: 8px; }
.board li.me { background: var(--control-hover); }
.board span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board b { font: 600 15px var(--display); font-variant-numeric: tabular-nums; }
.board .empty { display: block; color: var(--ink-soft); font-weight: 700; }

.score { --c: var(--blue); display: flex; flex-direction: column; padding: 7px 12px; border-radius: 16px; background: var(--dialog); border: 3px solid transparent; min-width: 0; opacity: .92; }
.score.p1 { --c: var(--red); }
.score.p2 { --c: #6fd08c; }
.score.p3 { --c: #c9a4ff; }
.score.turn { border-color: var(--c); opacity: 1; box-shadow: 0 0 18px -2px var(--c); }
.score.out { opacity: .5; }
.score .who { color: var(--c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score .pts { font: 700 34px/1.05 var(--display); font-variant-numeric: tabular-nums; }
.score .meta { color: var(--ink-soft); font-size: 12px; }
.abilities { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.abilities button { min-height: 38px; padding: 0 8px; font-size: 13px; justify-content: space-between; border-radius: 11px; }
.abilities button.on { background: var(--accent); }
.abilities small { color: var(--amber); font: 700 12px var(--body); }
.log { margin: 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: 13px; max-height: 88px; overflow-y: auto; }

.pad-row { display: flex; gap: 6px; pointer-events: auto; }
.pad-row button { min-height: 36px; background: var(--glass); font-size: 14px; }
.pad-row button[aria-pressed="true"] { background: var(--accent); }

.toasts {
  position: fixed; z-index: 20; top: calc(env(safe-area-inset-top, 0px) + 168px); left: 50%; transform: translateX(-50%);
  width: min(360px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 7px; isolation: isolate; pointer-events: none;
}
/* The wedge: tall on the left for the number, tapering right. */
.toast {
  --edge: var(--amber); position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 26px 12px 18px;
  font: 600 15px/1.25 var(--display); filter: drop-shadow(0 7px 12px rgba(20, 12, 40, .5)); animation: toast-in .2s ease-out;
}
.toast::before, .toast::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(0 0, 100% 7%, 100% 80%, 0 100%); }
.toast::before { inset: 0; background: var(--edge); }
.toast::after { inset: 3px 3px 3px 7px; background: var(--dialog); }
.toast.good { --edge: #6fd08c; }
.toast.bad { --edge: var(--red); }
.toast.turn, .toast.react-toast { --edge: var(--amber); }
.toast.fade { opacity: 0; transition: opacity .3s; }
.toast .big { font: 700 38px/1 var(--display); font-variant-numeric: tabular-nums; flex: none; }
.toast.good .big { color: #8fe6a9; }
.toast.bad .big { color: var(--red); }
.toast .sum { display: block; color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.toast .why { display: block; min-width: 0; }
@keyframes toast-in { from { transform: translateX(-16px) skewX(-4deg); opacity: 0; } }

.react {
  position: fixed; z-index: 15; right: max(26px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
#react-toggle { width: 54px; min-height: 54px; padding: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 6px 18px rgba(20, 12, 40, .45); }
#react-toggle:hover { background: var(--accent-hover); }
#react-toggle svg { width: 30px; height: 30px; stroke-width: 2.2; }
.react-menu {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 268px; padding: 8px; border-radius: 18px;
  background: var(--dialog); border: 1px solid var(--glass-line); box-shadow: 0 8px 26px rgba(20, 12, 40, .5);
}
.react-menu button { min-height: 42px; padding: 0 8px; font-size: 14px; justify-content: flex-start; white-space: nowrap; }

.confetti { position: fixed; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -20px; width: 11px; height: 11px; border-radius: 3px; animation: fall 2.6s ease-in forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(620deg); opacity: .7; } }

.eyebrow { font: 500 14px var(--display); color: var(--amber) !important; text-align: center; letter-spacing: .04em; }
#solved { text-align: center; }
#solved h2 { font-size: 34px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.podium { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.podium:empty { display: none; }
.podium li {
  --c: var(--blue); display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 14px; background: var(--control); border-left: 5px solid var(--c);
}
.podium li.p1 { --c: var(--red); } .podium li.p2 { --c: #6fd08c; } .podium li.p3 { --c: #c9a4ff; }
.podium li.first { background: var(--control-hover); }
.podium .rank { font: 600 16px var(--display); color: var(--ink-soft); }
.podium .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium small { display: block; color: var(--ink-soft); font-size: 12px; white-space: normal; }
.howto { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.howto div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--control); min-width: 0; }
.howto div:nth-child(-n+2), .howto .miss { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; }
.howto b { font: 700 24px/1 var(--display); color: var(--amber); }
.howto span { color: var(--ink); font-size: 13px; line-height: 1.2; }
.howto .gold { background: rgba(255, 200, 97, .2); }
.howto .miss b { color: var(--red); }
.podium b { font: 700 24px var(--display); font-variant-numeric: tabular-nums; }

.bottom { grid-column: 1 / -1; grid-row: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#status { margin: 0; min-height: 1.4em; text-align: center; max-width: 62ch; text-shadow: 0 1px 8px rgba(20, 12, 40, .9); }
.pad {
  display: grid; grid-template-columns: repeat(9, 56px); gap: 7px; padding: 9px; border-radius: 22px;
  background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pad button { flex-direction: column; gap: 0; min-height: 56px; padding: 0; font-size: 24px; line-height: 1; }
.pad small { font: 700 11px var(--body); color: var(--ink-soft); margin-top: 3px; font-variant-numeric: tabular-nums; }
.pad button.active { background: var(--accent); }
.pad button.active small { color: var(--ink); }
.pad button.done { opacity: .42; }

dialog {
  width: min(360px, calc(100% - 32px)); padding: 20px; color: var(--ink); background: var(--dialog);
  border: 1px solid var(--glass-line); border-radius: 24px;
}
dialog[open] { display: flex; flex-direction: column; gap: 10px; }
dialog::backdrop { background: rgba(20, 12, 40, .35); }
dialog h2 { font: 600 27px var(--display); margin: 0; text-wrap: balance; }
dialog p { margin: 0; color: var(--ink-soft); }
dialog { max-height: calc(100% - 32px); overflow-y: auto; }
.tutorial { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; color: var(--ink-soft); }
.tutorial b { color: var(--ink); }
dialog form { display: flex; flex-direction: column; gap: 8px; }
input:not([type="checkbox"]) {
  width: 100%; min-height: 44px; padding: 0 12px; color: var(--ink); background: var(--control);
  border: 1px solid var(--glass-line); border-radius: 12px; font: 700 16px var(--body);
}
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); }
.row { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.themes button.on { background: var(--accent); }
.error { color: var(--error) !important; min-height: 1.3em; }

@media (max-width: 900px), (max-height: 640px) {
  .app {
    grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 6px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .brand { grid-column: 1; }
  .brand svg { width: 30px; height: 30px; }
  .brand h1 { font-size: 20px; }
  .brand p { display: none; }
  .modes { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 14px; }
  .modes button { min-height: 36px; padding: 0; border-radius: 11px; }
  .brand { grid-column: 1 / -1; }
  .tools-toggle { display: flex; margin-left: auto; min-height: 36px; background: var(--glass); pointer-events: auto; }
  .mini { display: block; margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; }
  .undo-quick { display: flex; min-height: 36px; background: var(--glass); pointer-events: auto; }
  .plan-toggle { margin-left: 0; min-height: 36px; padding: 0 12px; }
  .undo-quick[disabled] { opacity: .55; }
  .brand > .tools-toggle { margin-left: 0; }
  .panel.left, .panel.right { display: none; }
  body.tools-open .panel.left, body.tools-open .panel.right {
    display: flex; position: fixed; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + 100px); max-height: calc(100% - 240px);
    padding: 8px; border-radius: 16px; gap: 6px; background: var(--dialog);
  }
  body.tools-open .panel.left { left: max(16px, env(safe-area-inset-left, 0px)); width: calc(58% - 20px); }
  body.tools-open .panel.right { right: max(16px, env(safe-area-inset-right, 0px)); width: calc(42% - 20px); }
  .right .tip { display: none; }
  .left button, .stepper { min-height: 36px; font-size: 13px; }
  .stepper { grid-template-columns: 30px 1fr 30px; }
  .stepper output { font-size: 13px; }
  .stats { font-size: 12px; gap: 0 6px; }
  .cross { grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(2, 34px); gap: 3px; }
  .cross button { min-height: 34px; }
  #settings-open { min-height: 32px; font-size: 13px; }
  .scorebar { grid-column: 1; grid-row: 3; width: 100%; }
  .score { padding: 4px 8px; border-radius: 12px; }
  .score .who { font-size: 13px; }
  .score .pts { font-size: 25px; }
  .score .meta { font-size: 10px; }
  #turn-clock { font-size: 17px; }
  .turn-line { font-size: 13px; }
  .toasts { top: calc(env(safe-area-inset-top, 0px) + 208px); }
  .toast { font-size: 14px; min-height: 40px; padding: 8px 22px 10px 16px; }
  .toast .big { font-size: 31px; }
  .toast .sum { font-size: 12px; }
  .pad-row button { min-height: 32px; font-size: 13px; }
  .react { right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 112px); }
  #react-toggle { width: 46px; min-height: 46px; }
  .react-menu { width: min(268px, calc(100vw - 32px)); }
  .abilities button { min-height: 34px; }
  .log { display: none; }
  .bottom { grid-row: 4; gap: 4px; }
  #status { font-size: 13px; }
  .pad { width: 100%; grid-template-columns: repeat(9, 1fr); gap: 3px; padding: 4px; border-radius: 14px; }
  .pad button { min-height: 46px; font-size: 20px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } .toast { animation: none; } }