:root { color-scheme: dark; --bg:#20212b; --text:#e8e6f0; --dim:#aaa7ba; --size:min(88vw, 46svh, 400px); }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif; }
#app { max-width:520px; margin:auto; padding:calc(env(safe-area-inset-top,0px) + 12px) 12px calc(env(safe-area-inset-bottom,0px) + 14px); }
header { display:flex; align-items:center; justify-content:space-between; height:44px; }
h1 { font:400 22px Georgia,serif; letter-spacing:.3em; margin:0; padding-left:.3em; color:var(--dim); }
button, header a { font:inherit; background:transparent; color:var(--dim); border:0; min-width:44px; min-height:44px; cursor:pointer; touch-action:manipulation; }
header a { text-decoration:none; font-size:28px; text-align:center; }
header > *:first-child, #restart { width:76px; }
#restart { font-size:12px; letter-spacing:.08em; }
button:disabled { opacity:.3; cursor:default; }
button:focus-visible, a:focus-visible { outline:2px solid #f4ead2; outline-offset:2px; }
main { display:flex; align-items:center; flex-direction:column; }
nav { display:flex; align-items:center; gap:12px; height:38px; font-size:12px; font-variant-numeric:tabular-nums; }
#target { width:clamp(76px, 13svh, 96px); aspect-ratio:1; position:relative; margin:6px 0 20px; }
#board { position:relative; width:var(--size); height:var(--size); overflow:hidden; border-radius:15px; background:#2a2c3a; touch-action:none; user-select:none; -webkit-user-select:none; box-shadow:0 8px 24px #0004; }
.tile { position:absolute; width:25%; height:25%; padding:3px; display:flex; align-items:center; justify-content:center; }
.face { width:100%; height:100%; border-radius:18%; display:flex; align-items:center; justify-content:center; background:var(--tile); box-shadow:inset 0 2px 2px #fff5, inset 0 -2px 3px #0002; }
.kind-0 { --tile:#a8d792; } .kind-1 { --tile:#8bbfe9; } .kind-2 { --tile:#f2d877; } .kind-3 { --tile:#efa3b8; }
.mark { width:44%; height:44%; overflow:visible; fill:var(--ink); filter:drop-shadow(0 1px 0 #ffffff65); }
.kind-0 { --ink:#578044; } .kind-1 { --ink:#486e97; } .kind-2 { --ink:#a0842e; } .kind-3 { --ink:#a75370; }
.suit-defs { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
#target .tile { padding:1px; }
#board .tile:focus-visible { outline:none; }
#board .tile:focus-visible .face { outline:3px solid white; outline-offset:-5px; }
#result { display:flex; gap:16px; align-items:center; justify-content:center; height:44px; }
#message { font:20px Georgia,serif; color:#c4dfb6; }
#next { background:#d9b26f; color:#282313; border-radius:24px; padding:0 22px; min-height:38px; }
[hidden] { display:none !important; }
@media (prefers-reduced-motion:no-preference) { #message { animation:appear .25s ease; } @keyframes appear { from { opacity:0; } to { opacity:1; } } }