:root {
  --ink: #151515; --paper: #f7f4ee; --card: #ffffff; --muted: #6d675d; --line: #ddd6ca;
  --red: #e63b2e; --blue: #1f4fd8; --yellow: #f5b700; --empty: #ece7dd;
  --cell: min(10.2vw, 52px); --gap: 3px;
  font-family: Futura, "Century Gothic", "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #f1ede5; --paper: #141413; --card: #1e1d1b; --muted: #a39d92; --line: #34322e; --empty: #26251f; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom); }
button { font: inherit; color: inherit; cursor: pointer; }

.top { width: 100%; max-width: 460px; display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 3px solid var(--ink); }
.title { margin: 0; font-size: 1.5rem; letter-spacing: .02em; display: flex; align-items: center; gap: 10px; }
.mark { display: inline-flex; gap: 3px; align-items: flex-end; }
.mark i { display: block; width: 14px; height: 14px; }
.mark .m0 { background: var(--red); border-radius: 50%; }
.mark .m1 { background: var(--blue); }
.mark .m2 { background: var(--yellow); width: 16px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.icon-btn { width: 38px; height: 38px; border: 2px solid var(--ink); background: var(--card); font-weight: 700; font-size: 1.1rem; margin-left: 6px; }

main { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0; }
.hud { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.hud div { border: 2px solid var(--ink); background: var(--card); padding: 6px 4px; }
.hud .label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hud strong { font-size: 1.35rem; }

.board-wrap { position: relative; }
.board { display: grid; grid-template-columns: repeat(8, var(--cell)); gap: var(--gap); padding: var(--gap); background: var(--ink); touch-action: none; }
.cell { width: var(--cell); height: var(--cell); background: var(--empty); position: relative; }
.cell.c0, .cell.c1, .cell.c2, .mini i.c0, .mini i.c1, .mini i.c2, .drag-ghost i { box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.c0 { background: var(--red) !important; }
.c1 { background: var(--blue) !important; }
.c2 { background: var(--yellow) !important; }
/* A small Bauhaus motif in every block: circle on red, square on blue, triangle on yellow. */
.cell.c0::after, .drag-ghost i.c0::after, .mini i.c0::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: rgba(255,255,255,.28); }
.cell.c1::after, .drag-ghost i.c1::after, .mini i.c1::after { content: ""; position: absolute; inset: 32%; background: rgba(255,255,255,.25); }
.cell.c2::after, .drag-ghost i.c2::after, .mini i.c2::after { content: ""; position: absolute; left: 30%; right: 30%; top: 30%; bottom: 30%; background: rgba(255,255,255,.35); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cell.ok { background: color-mix(in srgb, var(--ink) 22%, var(--empty)); }
.cell.bad { background: color-mix(in srgb, var(--red) 30%, var(--empty)); }
.cell.clearing { animation: clear .32s ease-out; }
@keyframes clear { 0% { filter: brightness(1.8); transform: scale(1); } 100% { filter: brightness(1); transform: scale(.6); opacity: .2; } }
.combo { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: 2rem; font-weight: 800; color: var(--ink); text-shadow: 0 2px 0 var(--paper), 0 -2px 0 var(--paper); pointer-events: none; opacity: 0; }
.combo.show { animation: pop .9s ease-out; }
@keyframes pop { 0% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }

.tray { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-height: calc(var(--cell) * 2.6); }
.slot { display: grid; place-items: center; border: 2px dashed var(--line); min-height: calc(var(--cell) * 2.6); touch-action: none; user-select: none; }
.slot.selected { border: 2px solid var(--ink); background: var(--card); }
.slot.used { visibility: hidden; }
.slot.stuck .mini { opacity: .35; }
.mini { display: grid; gap: 2px; --m: calc(var(--cell) * .48); }
.mini i { display: block; width: var(--m); height: var(--m); position: relative; }
.mini i.blank { background: transparent; box-shadow: none; }
.drag-ghost { position: fixed; z-index: 10; display: grid; gap: var(--gap); pointer-events: none; opacity: .92; }
.drag-ghost i { display: block; width: var(--cell); height: var(--cell); position: relative; }
.drag-ghost i.blank { background: transparent; box-shadow: none; }

.hint { margin: 0; color: var(--muted); font-size: .9rem; text-align: center; }
.foot { margin-top: auto; padding: 14px; font-size: .85rem; color: var(--muted); text-align: center; }
.foot a { color: var(--ink); font-weight: 700; }

dialog { border: 3px solid var(--ink); background: var(--paper); color: var(--ink); max-width: 420px; width: calc(100% - 24px); padding: 20px 22px; }
dialog::backdrop { background: rgba(20,20,20,.45); }
dialog h2 { margin: 0 0 12px; }
dialog li { margin-bottom: 8px; line-height: 1.45; }
.btn { border: 2px solid var(--ink); background: var(--ink); color: var(--paper); padding: 10px 18px; font-weight: 700; }
.btn.ghost { background: transparent; color: var(--ink); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.actions form { margin: 0; }
.result { font-size: 1.05rem; margin-bottom: 12px; line-height: 1.5; }
.result .big { font-size: 2.2rem; font-weight: 800; display: block; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.stat-grid strong { display: block; font-size: 1.5rem; }
.stat-grid span { font-size: .72rem; color: var(--muted); }
.next { color: var(--muted); margin: 12px 0 0; }
.toast { min-height: 1.2em; margin: 8px 0 0; font-weight: 700; }
.share-text[hidden] { display: none; }
.share-text { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 8px; font: 15px/1.25 ui-monospace, monospace; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); resize: none; }