:root{--felt: #1c2b25;--felt-deep: #16211c;--ivory: #f4efe3;--ivory-edge: #d9d1bd;--ink: #20251f;--muted: #8a9b8f;--jade: #4ea98a;--jade-deep: #2f7a61;--amber: #d9a441;--rose: #c8694e;--line: rgba(244, 239, 227, .12)}*{box-sizing:border-box;margin:0;padding:0}body{background:radial-gradient(circle at 50% 0%,#243a31 0%,var(--felt) 45%,var(--felt-deep) 100%);color:var(--ivory);font-family:Hanken Grotesk,system-ui,sans-serif;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:4vh 1.25rem 8vh}#app{width:100%;max-width:680px}.masthead{text-align:center;margin-bottom:2.25rem}.masthead .kicker{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--jade);margin-bottom:.6rem}.masthead h1{font-family:Fraunces,serif;font-weight:500;font-size:clamp(28px,6vw,44px);line-height:1.05;font-optical-sizing:auto}.masthead p{color:var(--muted);font-size:14px;margin-top:.7rem}.panel{background:#f4efe30a;border:1px solid var(--line);border-radius:18px;padding:1.6rem;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.statusbar{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:1rem}.statusbar strong{color:var(--ivory);font-weight:600}.timer-track{height:5px;background:#f4efe31a;border-radius:99px;overflow:hidden;margin-bottom:1.5rem}.timer-fill{height:100%;width:100%;background:var(--jade);border-radius:99px;transition:width .07s linear,background .3s ease}.section-label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}.rack{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:.65rem}.tile{min-width:46px;height:60px;padding:0 7px;border-radius:8px;background:linear-gradient(180deg,var(--ivory) 0%,#e9e2d0 100%);border:1px solid var(--ivory-edge);box-shadow:0 2px #00000038;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--ink);text-align:center;line-height:1.15}.tile small{font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;opacity:.55}.tile.suit-d{color:#1f5fa5}.tile.suit-b{color:#3a6d12}.tile.suit-c{color:#9a3c1d}.tile.wind{color:#4a4a44}.tile.dragon-r{color:#a32d2d}.tile.dragon-g{color:#0f6e56}.tile.dragon-w{color:#4a4a44}.tile.flower{color:#8a5a0b}.tile.joker{color:#4b3f9a;background:linear-gradient(180deg,#efe9fb,#ddd3f3);border-color:#c7bdec}.legend{font-size:11px;color:var(--muted);margin-bottom:1.6rem}.prompt{font-family:Fraunces,serif;font-size:21px;font-weight:500;margin-bottom:.3rem}.prompt em{color:var(--jade);font-style:italic}.prompt-sub{font-size:13px;color:var(--muted);margin-bottom:1.2rem}.options{display:flex;flex-direction:column;gap:11px}.option{text-align:left;width:100%;border:1px solid var(--line);background:#f4efe308;color:var(--ivory);border-radius:13px;padding:14px 16px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:border-color .15s ease,background .15s ease,transform .05s ease}.option:hover:not(:disabled){border-color:#4ea98a99;background:#4ea98a12}.option:active:not(:disabled){transform:scale(.992)}.option:disabled{cursor:default}.option .label{font-size:15px;font-weight:600}.option .regime{font-size:12px;color:var(--muted);margin-top:3px}.option .pct{font-family:Fraunces,serif;font-size:17px;font-weight:600;opacity:0;white-space:nowrap;transition:opacity .25s ease}.option.show-pct .pct{opacity:1}.option.correct{border-color:var(--jade);background:#4ea98a21}.option.wrong{border-color:var(--rose);background:#c8694e21}.option.dim{opacity:.5}.explain{margin-top:1.4rem;border-left:3px solid var(--jade);padding:.5rem 0 .5rem 1rem;font-size:14.5px;line-height:1.65;color:var(--ivory)}.explain .verdict{font-weight:600}.explain .verdict.good{color:var(--jade)}.explain .verdict.bad{color:var(--rose)}.explain .verdict.time{color:var(--amber)}.footer{display:flex;align-items:center;justify-content:space-between;margin-top:1.5rem;gap:1rem}.footer .note{font-size:11px;color:var(--muted);max-width:60%}.btn{font-family:Fraunces,serif;font-size:15px;font-weight:500;color:var(--felt-deep);background:var(--jade);border:none;border-radius:10px;padding:10px 20px;cursor:pointer;transition:background .15s ease,transform .05s ease}.btn:hover{background:#5fbd9b}.btn:active{transform:scale(.97)}.hidden{display:none!important}.colophon{text-align:center;font-size:11px;color:var(--muted);margin-top:2rem;line-height:1.6}