:root{--paper: #efe6f6;--card: #fff7fc;--ink: #453a58;--dusk: #8a7a9c;--wisteria: #b892d4;--rose: #e37a9c;--mint: #5fcfc4;--peach: #f3b892;--line: #d8c8e6;--safe: env(safe-area-inset-bottom, 0px);color-scheme:light}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(42% 32% at 12% 0%,rgba(243,184,146,.28),transparent 58%),radial-gradient(48% 36% at 92% 8%,rgba(95,207,196,.22),transparent 60%),radial-gradient(70% 50% at 50% 100%,rgba(184,146,212,.24),transparent 62%),linear-gradient(180deg,#f7eef8 0%,var(--paper) 46%,#e7dcf0 100%);color:var(--ink);font-family:Zen Kaku Gothic New,Hiragino Kaku Gothic ProN,sans-serif}body{min-height:100dvh}#app{width:min(520px,100%);margin:0 auto;min-height:100dvh;min-height:100svh;padding:calc(8px + env(safe-area-inset-top,0px)) 12px calc(12px + var(--safe));display:grid;grid-template-rows:auto auto auto 1fr auto auto auto;gap:7px}button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid var(--wisteria);outline-offset:3px}.top{display:grid;grid-template-columns:1fr auto;align-items:end;gap:8px 10px}.brand h1{margin:0;font-family:Kaisei Decol,Yu Mincho,serif;font-weight:500;font-size:clamp(24px,6.4vw,36px);letter-spacing:.08em;line-height:1.15}.eyebrow,.ver{margin:0;font-size:11px;letter-spacing:.2em;color:var(--dusk)}.ver{font-family:IBM Plex Mono,ui-monospace,monospace;letter-spacing:.08em;color:var(--wisteria)}.pills{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.pill{min-width:64px;padding:6px 8px 5px;border:1px solid var(--line);background:#fff7fcc7;text-align:center;border-radius:14px}.pill b{display:block;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:15px;line-height:1.1}.pill span{font-size:10px;letter-spacing:.12em;color:var(--dusk)}.how{margin:0;font-size:12px;line-height:1.55;color:var(--dusk)}.diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.diff{min-height:44px;border:1px solid var(--line);background:#fff7fcb3;border-radius:16px;letter-spacing:.06em;display:grid;place-items:center;line-height:1.15}.diff small{display:block;font-size:10px;color:var(--dusk)}.diff.is-on{background:linear-gradient(180deg,#d7b4ee,#b892d4);color:#fff;border-color:transparent;font-weight:700}.diff.is-on small{color:#ffffffd1}.stage-wrap{position:relative;min-height:0;display:grid;grid-template-rows:auto auto 1fr;gap:8px}.secret-card,.draft-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:8px 10px 10px;box-shadow:0 8px #b892d41f}.secret-label{margin:0 0 6px;font-size:11px;letter-spacing:.16em;color:var(--dusk)}.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.slot{min-height:52px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(180deg,#fff,#f6ecfb);border:1.5px dashed #d3c0e4;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:26px;color:var(--ink)}.slot.is-empty{background:#f4eaf8}.slot.is-hidden{color:var(--wisteria);border-style:solid;background:radial-gradient(circle at 50% 42%,rgba(184,146,212,.18),transparent 48%),linear-gradient(180deg,#fff,#f3e8fa)}.slot.is-flash{animation:slot-flash .36s ease}.history{margin:0;padding:8px;min-height:0;overflow:auto;list-style:none;background:repeating-linear-gradient(180deg,#fff7fcf5 0,#fff7fcf5 28px,#f7ecfae6 28px,#f7ecfae6 29px);border:1px dashed #c9b4dc;border-radius:16px}.history li{display:grid;grid-template-columns:22px 1fr auto auto;align-items:center;gap:8px;min-height:36px;padding:4px 2px}.history .empty-row{display:block;color:var(--dusk);font-size:12px;letter-spacing:.04em;padding:10px 4px}.history .turn{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:11px;color:var(--dusk)}.history .guess{display:flex;gap:4px}.history .guess b{width:22px;height:22px;display:grid;place-items:center;border-radius:999px;background:#fff;border:1px solid var(--line);font-family:IBM Plex Mono,ui-monospace,monospace;font-size:13px;font-weight:500}.marks{display:flex;gap:4px}.bead{width:10px;height:10px;border-radius:50%;display:inline-block;box-shadow:inset 0 1px #ffffffb3}.bead.hit{background:radial-gradient(circle at 35% 30%,#ffd0dc,var(--rose))}.bead.blow{background:radial-gradient(circle at 35% 30%,#d9fff8,var(--mint))}.bead.none{background:#eadff2}.hb{display:flex;gap:6px;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:12px}.hb em:first-child{color:var(--rose);font-style:normal}.hb em:last-child{color:#2f9e94;font-style:normal}.hud{display:flex;justify-content:space-between;gap:8px;font-size:12px;letter-spacing:.06em;color:var(--dusk)}.hud b{color:var(--ink);font-family:IBM Plex Mono,ui-monospace,monospace;font-weight:500}.pad{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.key{min-height:46px;border-radius:14px;background:linear-gradient(180deg,#fffafd,#f3e6fa);border:1px solid var(--line);font-family:IBM Plex Mono,ui-monospace,monospace;font-size:20px;box-shadow:0 3px #d7c4e6}.key:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #d7c4e6}.key.is-used{background:#efe3f6;color:var(--dusk)}.key.is-flash,.slot.is-flash{background:#ffd6e2;border-color:var(--rose)}.key.wide{grid-column:1 / -1;font-family:inherit;font-size:14px;letter-spacing:.1em}.ghost-key{background:#fff7fcb3}.actions{display:grid;grid-template-columns:1fr .8fr 1.1fr;gap:6px}.brass,.ghost,.icon{min-height:44px;padding:0 8px;letter-spacing:.08em;border-radius:14px}.brass{background:linear-gradient(180deg,#f3b892,#e59a6c);color:#4a2d22;font-weight:700;box-shadow:0 3px #c57a52}.brass:active{transform:translateY(2px);box-shadow:0 1px #c57a52}.brass:disabled,.ghost:disabled,.key:disabled{opacity:.4}.ghost,.icon{border:1px solid var(--line);background:#fff7fcb8}.icon{min-width:44px}.toast,.sheet{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none;z-index:3}.toast p,.sheet .panel{margin:0;padding:14px 18px;background:#fff7fcf5;border:2px solid var(--wisteria);color:var(--ink);text-align:center;letter-spacing:.06em;border-radius:18px}.toast[hidden],.sheet[hidden]{display:none}.sheet{pointer-events:auto;background:#453a5847}.sheet .panel{width:min(90%,320px);display:grid;gap:10px}.sheet h2{margin:0;font-family:Kaisei Decol,Yu Mincho,serif;font-weight:500;letter-spacing:.12em}.sheet .meta{margin:0;color:var(--dusk);font-size:13px}.sheet .reveal{gap:6px}.sheet .burst{height:8px;background:radial-gradient(circle,var(--rose) 0 2px,transparent 3px) 10% 50% / 8px 8px no-repeat,radial-gradient(circle,var(--mint) 0 2px,transparent 3px) 50% 40% / 8px 8px no-repeat,radial-gradient(circle,var(--wisteria) 0 2px,transparent 3px) 86% 60% / 8px 8px no-repeat;animation:burst 1.2s ease}@keyframes slot-flash{0%,to{background:linear-gradient(180deg,#fff,#f6ecfb)}25%,60%{background:#ffd6e2;box-shadow:inset 0 0 0 2px var(--rose)}}@keyframes burst{0%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1.15)}to{opacity:.7;transform:scale(1)}}@media(max-width:420px){.top{grid-template-columns:1fr}.pills{justify-content:flex-start}}@media(max-height:740px){.how{display:none}.slot{min-height:44px;font-size:22px}.key,.ghost,.brass,.diff{min-height:40px}}@media(max-height:600px){.brand h1{font-size:22px}.secret-card{display:none}}@media(prefers-reduced-motion:reduce){.slot,.key,.brass,.sheet .burst{animation:none;transition:none}}