:root{--bg:#f4f5f8;--surface:#fff;--surface-2:#f7f7fa;--line:#e6e7ec;--line-strong:#d7d9e0;--night:#0b0e1a;--night-2:#161b33;--night-3:#232a4a;--ink:#101218;--ink-2:#5e6270;--ink-3:#6b6f7c;--ink-4:#9a9da8;--ink-inverse:#fff;--ink-inverse-2:#ffffffb8;--brand-pink:#ff4d8d;--brand-violet:#8b5cf6;--brand-blue:#4f7bff;--brand-orange:#ff8a4c;--brand-gradient:linear-gradient(135deg, #ff4d8d 0%, #8b5cf6 55%, #4f7bff 100%);--win-1:#ff72ab;--win-2:#f0397f;--win-gradient:linear-gradient(180deg, var(--win-1) 0%, var(--win-2) 100%);--lose-1:#7aa3ff;--lose-2:#3f6cf0;--lose-gradient:linear-gradient(180deg, var(--lose-1) 0%, var(--lose-2) 100%);--btn-primary:#111318;--btn-primary-ink:#fff;--btn-choose:#3b3e47;--btn-choose-ink:#fff;--focus:#8b5cf6;--chip-violet-bg:#f0ebff;--chip-violet-ink:#7c5cfa;--chip-green-bg:#e7f7ee;--chip-green-ink:#1f9d55;--chip-pink-bg:#ffe8f1;--chip-pink-ink:#e0327a;--chip-mint-bg:#e5f6ee;--chip-mint-ink:#2e9e6b;--chip-lime-bg:#eef7e1;--chip-lime-ink:#5b8c1a;--chip-rose-bg:#fde7ef;--chip-rose-ink:#d23a73;--chip-amber-bg:#fff3dd;--chip-amber-ink:#b7791f;--chip-blue-bg:#e7eeff;--chip-blue-ink:#3e6cf2;--chip-orange-bg:#ffede2;--chip-orange-ink:#e4631b;--chip-slate-bg:#eceef3;--chip-slate-ink:#4a5163;--chip-sky-bg:#e3f4ff;--chip-sky-ink:#1c8fd6;--chip-gray-bg:#efeff2;--chip-gray-ink:#61646f;--tile-1:linear-gradient(160deg, #ffe1ec 0%, #ffc2d9 100%);--tile-2:linear-gradient(160deg, #e2e9ff 0%, #c4d3ff 100%);--tile-3:linear-gradient(160deg, #e6f8ee 0%, #bfeccf 100%);--tile-4:linear-gradient(160deg, #fff1dc 0%, #ffd9a6 100%);--tile-5:linear-gradient(160deg, #efe7ff 0%, #d6c6ff 100%);--tile-6:linear-gradient(160deg, #e0f5ff 0%, #b6e4fb 100%);--tile-7:linear-gradient(160deg, #fde8e1 0%, #f9c5b3 100%);--tile-8:linear-gradient(160deg, #f1f2f5 0%, #dcdfe6 100%);--radius-card:24px;--radius-tile:18px;--radius-sm:12px;--radius-pill:999px;--shadow-card:0 1px 2px #1012180a, 0 8px 24px #1012180f;--shadow-float:0 12px 32px #10121829;--shadow-tile:0 10px 24px #f0397f38;--font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;--font-hand:"Segoe Script", "Bradley Hand", "Snell Roundhand", "Comic Sans MS", cursive;--fs-hero:44px;--fs-question:27px;--fs-title:22px;--fs-body:15px;--fs-small:13px;--fs-micro:11px;--fw-bold:750;--fw-heavy:800;--app-max:480px;--gutter:16px;--nav-h:64px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--dur-fast:.14s;--dur:.24s;--dur-slow:.52s}@media (prefers-reduced-motion:reduce){:root{--dur-fast:0s;--dur:0s;--dur-slow:0s}}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}@media (min-width:520px){html{background:var(--night)}}html.no-scroll{overflow:hidden}body{min-height:100dvh;color:var(--ink);font-family:var(--font);font-size:var(--fs-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;background:0 0;margin:0;line-height:1.4}#app{max-width:var(--app-max);background:var(--bg);min-height:100dvh;margin:0 auto;position:relative}@media (min-width:520px){#app{box-shadow:0 0 60px color-mix(in srgb, var(--night) 60%, transparent)}}h1,h2,h3,p{margin:0}button{color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;margin:0;padding:0}a{color:inherit;text-decoration:none}img,svg{display:block}input,textarea,select{font:inherit;color:inherit}:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px}.screen{min-height:100dvh;padding:0 var(--gutter) calc(var(--safe-bottom) + 20px);flex-direction:column;display:flex}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.btn{border-radius:var(--radius-pill);font-weight:var(--fw-bold);letter-spacing:-.01em;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) linear;justify-content:center;align-items:center;gap:8px;display:inline-flex}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.5;cursor:default}.btn--block{width:100%;display:flex}.btn--lg{height:54px;padding:0 24px;font-size:16px}.btn--md{height:44px;padding:0 20px;font-size:15px}.btn--sm{height:34px;padding:0 14px;font-size:13px}.btn--primary{background:var(--btn-primary);color:var(--btn-primary-ink);box-shadow:0 6px 16px color-mix(in srgb, var(--btn-primary) 22%, transparent)}.btn--outline{background:var(--surface);color:var(--ink);border:1.5px solid var(--line-strong)}.btn--accent{background:var(--surface);color:var(--ink);border:1.5px solid color-mix(in srgb, var(--brand-violet) 32%, var(--surface));box-shadow:0 4px 14px color-mix(in srgb, var(--brand-violet) 10%, transparent)}.btn--ghost{color:var(--ink-2);background:0 0;font-weight:600}.btn--light{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-float)}.empty{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:300px;padding:32px 12px;display:flex}.empty__art{margin-bottom:14px;font-size:56px;line-height:1}.empty__title{font-size:var(--fs-title);font-weight:var(--fw-heavy);letter-spacing:-.02em;margin:0}.empty__text{max-width:300px;color:var(--ink-2);margin:8px 0 0;line-height:1.45}.empty__actions{flex-direction:column;align-items:center;gap:10px;margin-top:22px;display:flex}.toast-host{left:0;right:0;bottom:calc(var(--safe-bottom) + 128px);z-index:60;pointer-events:none;justify-content:center;display:flex;position:fixed}.toast{border-radius:var(--radius-pill);background:var(--btn-primary);max-width:calc(100% - 32px);color:var(--btn-primary-ink);box-shadow:0 0 0 1px color-mix(in srgb, var(--ink-inverse) 16%, transparent), var(--shadow-float);animation:toast-in var(--dur) var(--ease-spring) both;padding:12px 18px;font-size:14px;font-weight:600}@keyframes toast-in{0%{opacity:0;transform:translateY(12px)scale(.96)}}.logo{color:var(--ink);font-weight:var(--fw-heavy);letter-spacing:-.02em;align-items:center;gap:6px;font-size:16px;display:inline-flex}.logo-mark{flex:none;display:block}.topbar{min-height:52px;padding-top:calc(var(--safe-top) + 8px);justify-content:space-between;align-items:center;display:flex}.topbar__left,.topbar__right{align-items:center;gap:8px;min-width:0;display:flex}.topbar__right{color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:14px;font-weight:600}.chip{border-radius:var(--radius-pill);background:var(--chip-bg,var(--chip-gray-bg));height:28px;color:var(--chip-ink,var(--chip-gray-ink));font-size:var(--fs-small);white-space:nowrap;align-items:center;gap:5px;padding:0 13px;font-weight:650;display:inline-flex}.chip--pick{background:var(--surface-2);height:34px;color:var(--ink-2);border:1px solid var(--line);transition:transform var(--dur-fast) var(--ease-out);padding:0 15px}.chip--pick:active{transform:scale(.96)}.chip--pick.is-active{background:var(--brand-violet);border-color:var(--brand-violet);color:var(--ink-inverse)}.img{background:var(--surface-2);display:block;overflow:hidden}.img img{object-fit:cover;-webkit-user-select:none;user-select:none;background-position:50%;background-size:cover;width:100%;height:100%;display:block}.media{border-radius:14px;width:100%;height:100%;position:relative;overflow:hidden}.media-fill{position:relative}.media-fill>.media{position:absolute;top:0;bottom:0;left:0;right:0}.media--tile{place-items:center;display:grid;container-type:inline-size}.media__emoji{filter:drop-shadow(0 6px 10px color-mix(in srgb, var(--ink) 16%, transparent));-webkit-user-select:none;user-select:none;font-size:clamp(34px,50cqi,96px);line-height:1}.opts{grid-template-columns:1fr 1fr;gap:10px;display:grid}.opt{border-radius:var(--radius-tile);background:var(--surface);min-width:0;box-shadow:var(--shadow-card);text-align:center;transition:transform var(--dur) var(--ease-spring), opacity var(--dur) var(--ease-out);-webkit-user-select:none;user-select:none;flex-direction:column;align-items:stretch;padding:6px 6px 10px;display:flex}.opt:disabled{cursor:default}.opt.is-idle:active{transform:scale(.975)}.opt.is-picked{transform:scale(1.04)}.opt.is-dimmed{opacity:.4;transform:scale(.95)}.opt__media{aspect-ratio:.92;border-radius:14px;flex:auto;min-height:140px;display:block}.opt__label{min-height:48px;font-size:16px;font-weight:var(--fw-bold);letter-spacing:-.01em;overflow-wrap:anywhere;justify-content:center;align-items:center;margin:10px 4px;line-height:1.22;display:flex}.opt__pill{border-radius:var(--radius-pill);background:var(--btn-choose);height:40px;color:var(--btn-choose-ink);font-size:14px;font-weight:var(--fw-bold);justify-content:center;align-items:center;margin:0 4px;display:flex}.opt__pill--outline{background:var(--surface);color:var(--ink);border:1.5px solid var(--ink-2);box-shadow:0 3px 8px color-mix(in srgb, var(--ink) 8%, transparent)}.opt.is-picked .opt__pill{background:var(--btn-primary);color:var(--btn-primary-ink);border-color:var(--btn-primary)}@media (hover:hover){.opt.is-idle:hover .opt__pill{background:var(--btn-primary);color:var(--btn-primary-ink);border-color:var(--btn-primary)}}.qcard{min-height:0;animation:qcard-in var(--dur) var(--ease-out) both;flex-direction:column;flex:auto;display:flex;container-type:inline-size}@keyframes qcard-in{0%{opacity:0;transform:translate(28px)}}.qcard__chip{margin-top:14px}.qcard__q{font-size:var(--fs-question);font-weight:var(--fw-heavy);letter-spacing:-.025em;overflow-wrap:break-word;margin:14px 0 20px;line-height:1.2}.qcard__opts{--m:1.45;min-height:0;max-height:calc((50cqi - 17px) * var(--m) + 124px);flex:auto}.qcard__opts--grow{--m:1.75}.qcard__opts .opt__media{flex:auto}.spinner{border:3px solid var(--line);border-top-color:var(--brand-violet);border-radius:50%;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}.loading{flex:1;place-items:center;min-height:240px;display:grid}.confetti{pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}.confetti i{animation:confetti-pop .46s var(--ease-spring) both, confetti-float 3.2s ease-in-out infinite alternate;border-radius:50%;position:absolute}@keyframes confetti-pop{0%{opacity:0;transform:translateY(14px)scale(0)}}@keyframes confetti-float{to{transform:translateY(6px)}}@media (prefers-reduced-motion:reduce){.confetti i{animation:none}}.rtiles{--tile-h:clamp(190px, 31dvh, 262px);grid-template-columns:1fr 1fr;align-items:end;gap:22px;padding:0 10px;display:grid}.rcol{min-width:0;height:calc(var(--tile-h) + 62px);flex-direction:column;justify-content:flex-end;align-items:stretch;display:flex}.rtile{height:calc(var(--tile-h) * var(--s,1));border-radius:var(--radius-tile);color:var(--ink-inverse);isolation:isolate;flex-direction:column;align-items:center;padding:16px 14px 14px;display:flex;position:relative;container-type:size}.rtile:before{content:"";z-index:-1;border-radius:inherit;background:var(--lose-gradient);box-shadow:0 10px 24px color-mix(in srgb, var(--lose-2) 24%, transparent);transform-origin:50% 100%;animation:rtile-grow var(--dur-slow) var(--ease-out) both;position:absolute;top:0;bottom:0;left:0;right:0}.rtile--win:before{background:var(--win-gradient);box-shadow:var(--shadow-tile)}.rtile>*{animation:rtile-in var(--dur) var(--ease-out) both;animation-delay:calc(var(--dur-slow) * .45)}@keyframes rtile-grow{0%{opacity:.6;transform:scaleY(.08)}}@keyframes rtile-in{0%{opacity:0;transform:translateY(10px)}}.rtile__pct{font-size:38px;font-weight:var(--fw-heavy);letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-shadow:0 2px 10px color-mix(in srgb, var(--ink) 12%, transparent);line-height:1}.rtile__pct small{font-size:20px;font-weight:var(--fw-bold);margin-left:1px}.rtile__media{width:100%;min-height:0;box-shadow:0 6px 14px color-mix(in srgb, var(--ink) 18%, transparent);border-radius:12px;flex:auto;margin-top:12px;overflow:hidden}.rtile__media .media{border-radius:12px}@container (height<=170px){.rtile:not(.rtile--emoji)>.rtile__media{z-index:0;width:auto;margin-top:0;position:absolute;top:8px;bottom:8px;left:8px;right:8px}.rtile:not(.rtile--emoji)>.rtile__pct{z-index:1;text-shadow:0 1px 10px color-mix(in srgb, var(--ink) 55%, transparent);margin-top:-6px;position:relative}}.rtile__emoji{min-height:0;filter:drop-shadow(0 8px 12px color-mix(in srgb, var(--ink) 20%, transparent));flex:auto;place-items:center;font-size:clamp(26px,min(34cqh,48cqw),72px);line-height:1;display:grid}.rcol__label{min-height:50px;font-size:15px;font-weight:var(--fw-bold);text-align:center;overflow-wrap:anywhere;justify-content:center;align-items:flex-start;padding-top:12px;line-height:1.22;display:flex}.reveal{flex-direction:column;flex:auto;display:flex}.reveal__head{text-align:center;padding:34px 20px 26px;position:relative}.reveal__title{max-width:250px;font-size:24px;font-weight:var(--fw-heavy);letter-spacing:-.02em;animation:reveal-in var(--dur) var(--ease-out) both;margin:0 auto;line-height:1.2;position:relative}.reveal__early{color:var(--ink-3);font-size:var(--fs-small);margin:8px 0 0;font-weight:600;position:relative}@keyframes reveal-in{0%{opacity:0;transform:translateY(8px)}}.reveal__vs{background:var(--chip-violet-bg);color:var(--ink);font-size:15px;font-weight:var(--fw-bold);text-align:center;animation:reveal-in var(--dur) var(--ease-out) both;animation-delay:calc(var(--dur-slow) * .8);border-radius:18px;margin:8px 0 0;padding:12px 16px;line-height:1.35}.reveal__vs span{white-space:nowrap}.you{background:color-mix(in srgb, var(--line) 60%, var(--surface-2));animation:reveal-in var(--dur) var(--ease-out) both;animation-delay:calc(var(--dur-slow) * .7);border-radius:20px;align-items:center;gap:12px;margin-top:12px;padding:14px 16px;display:flex}.you__pic{width:36px;height:36px;box-shadow:0 0 0 2px var(--surface);border-radius:50%;flex:none;overflow:hidden}.you__pic .media{border-radius:50%}.you__pic .media__emoji{font-size:20px}.you__text{flex-direction:column;gap:2px;min-width:0;font-size:14px;display:flex}.you__text b{font-weight:var(--fw-bold);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.you__text span{color:var(--ink-2);font-size:var(--fs-small)}.reveal__actions{flex-direction:column;gap:12px;margin-top:auto;padding-top:18px;display:flex}.landing__sharer{background:var(--chip-violet-bg);animation:reveal-in var(--dur) var(--ease-out) both;border-radius:18px;align-items:center;gap:10px;margin:10px 0 0;padding:10px 14px;font-size:15px;line-height:1.3;display:flex}.landing__sharer b{font-weight:var(--fw-heavy)}.landing__avatar{background:var(--brand-gradient);width:32px;height:32px;color:var(--ink-inverse);font-size:14px;font-weight:var(--fw-heavy);border-radius:50%;flex:none;place-items:center;display:grid}.landing__hint{color:var(--ink-3);font-size:var(--fs-small);text-align:center;margin:16px 0 6px;font-weight:600}.landing__confirm{margin-top:16px}.landing__confirm .landing__hint{margin-top:10px}.onb{z-index:40;max-width:var(--app-max);padding:calc(var(--safe-top) + 16px) 28px calc(var(--safe-bottom) + 52px);background:radial-gradient(90% 60% at 50% 30%, var(--night-2) 0%, var(--night) 75%);color:var(--ink-inverse);animation:onb-in var(--dur) var(--ease-out) both;flex-direction:column;margin:0 auto;display:flex;position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}.onb.is-leaving{opacity:0;transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);transform:scale(1.04)}@keyframes onb-in{0%{opacity:0}}.onb__floaters{pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}.onb__floater{--r:0deg;opacity:.2;filter:blur(3px);width:92px;height:108px;transform:rotate(var(--r));will-change:transform;border-radius:18px;place-items:center;font-size:40px;animation:7s ease-in-out infinite alternate onb-float;display:grid;position:absolute}@keyframes onb-float{to{transform:rotate(var(--r)) translateY(-14px)}}@media (prefers-reduced-motion:reduce){.onb__floater{animation:none}}.onb__x{top:calc(var(--safe-top) + 14px);z-index:1;width:40px;height:40px;color:var(--ink-inverse);border-radius:50%;place-items:center;display:grid;position:absolute;right:16px}.onb__body{flex-direction:column;flex:1;justify-content:center;align-items:center;padding-top:24px;display:flex;position:relative}.onb__mark{filter:drop-shadow(0 12px 28px color-mix(in srgb, var(--brand-pink) 35%, transparent));animation:onb-pop var(--dur-slow) var(--ease-spring) both}@keyframes onb-pop{0%{opacity:0;transform:scale(.6)rotate(-8deg)}}.onb__title{font-size:var(--fs-hero);font-weight:var(--fw-heavy);letter-spacing:-.035em;margin:12px 0 0;line-height:1.05}.onb__tag{color:var(--ink-inverse);font-size:var(--fs-body);margin:10px 0 0;font-weight:500}.onb__rows{flex-direction:column;gap:26px;margin:44px 0 0;padding:0;list-style:none;display:flex}.onb__rows li{color:var(--ink-inverse);font-size:var(--fs-body);align-items:center;gap:14px;font-weight:500;display:flex}.onb__ic{background:var(--ink-inverse);width:22px;height:22px;color:var(--night);border-radius:50%;flex:none;place-items:center;display:grid}.onb__foot{padding-top:24px;position:relative}.onb__go{height:56px;font-size:17px}.onb__note{color:var(--ink-inverse-2);font-size:var(--fs-small);text-align:center;margin:20px 0 0}.summary{text-align:center;animation:summary-in var(--dur-slow) var(--ease-out) both;flex-direction:column;flex:auto;align-items:center;padding-top:8vh;display:flex}@keyframes summary-in{0%{opacity:0;transform:scale(.96)}}.summary__burst{animation:summary-pop var(--dur-slow) var(--ease-spring) both;font-size:64px;line-height:1}@keyframes summary-pop{0%{transform:scale(.3)rotate(-20deg)}}.summary__title{font-size:var(--fs-hero);font-weight:var(--fw-heavy);letter-spacing:-.03em;margin:16px 0 0;line-height:1.05}.summary__text{color:var(--ink-2);margin:12px 0 0;font-size:16px}.summary__text b{color:var(--ink)}.summary__line{font-size:16px;font-weight:var(--fw-bold);margin:6px 0 0}.summary__dots{gap:8px;margin:22px 0 0;padding:0;list-style:none;display:flex}.summary__dots li{background:var(--line-strong);border-radius:50%;width:14px;height:14px}.summary__dots .is-maj{background:var(--win-gradient)}.summary__dots .is-min{background:var(--lose-gradient)}.summary__actions{flex-direction:column;gap:12px;width:100%;margin-top:auto;padding-top:28px;display:flex}.play{min-height:100dvh}.play__skip{color:var(--ink-3);align-self:center;margin:14px 0 4px;padding:10px 28px;font-size:15px;font-weight:600}.play__skip:active{opacity:.6}
