/* /your-number: Your Number (public/your-number-page.js). Sits on daily.css and quiz.css: same tokens, banner, stage and buttons. */
.yn{--a:#ff8a3c;--b:#b455e0}
.yn .ynq{padding-top:28px}
.yn .say{font-size:clamp(1.6rem,1.1rem + 3vw,2.4rem);line-height:1.12;font-weight:800;letter-spacing:-.01em;text-wrap:balance;margin-top:10px;color:var(--text)}
.yn .ends{display:flex;justify-content:space-between;gap:16px;margin-top:22px;color:var(--muted);font-size:.95rem;line-height:1.3}
.yn .ends span:last-child{text-align:right}
.yn .ends b{color:var(--text)}
.yn .scale{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;margin-top:10px}
.yn .num{appearance:none;font:inherit;font-weight:800;font-size:1rem;color:var(--text);background:var(--panel-2);border:2px solid var(--line);border-radius:12px;min-height:52px;padding:0;cursor:pointer;transition:transform .15s ease,border-color .15s ease}
.yn .num:hover:not([disabled]),.yn .num:focus-visible{border-color:var(--a);outline:none}
.yn .num:active:not([disabled]){transform:scale(.94)}
.yn .num[disabled]{opacity:.45;cursor:default}
.yn .num.mine{opacity:1;background:var(--grad);color:#1a1016;border-color:transparent}
.yn .bars{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;height:120px;margin-top:22px;align-items:stretch}
.yn .bars span{display:grid;grid-template-rows:1fr auto;align-items:end;justify-items:stretch;gap:4px;min-height:0}.yn .bars em{text-align:center}
.yn .bars i{display:block;width:100%;border-radius:6px 6px 2px 2px;background:var(--line);transform-origin:bottom;animation:yn-grow .5s cubic-bezier(.16,1,.3,1) both}
.yn .bars .mine i{background:var(--grad)}
.yn .bars .theirs i{background:var(--b)}
.yn .bars em{font-style:normal;font-size:.75rem;color:var(--muted);font-weight:800}
@keyframes yn-grow{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.yn .bars i{animation:none}.yn .num{transition:none}}
.yn .yn-room{margin-top:14px;color:var(--muted);line-height:1.45}
.yn .yn-room b{color:var(--text)}
.yn .vs{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;margin-top:20px;font-weight:800;font-size:1.1rem}
.yn .vs b{font-size:1.6em;color:var(--a);margin-left:.15em}
.yn .vs span:nth-child(2) b{color:var(--b)}
.yn .vs .apart{color:var(--muted);font-weight:500}
.yn .mine-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:2px}
.yn .mine-list li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.yn .mine-list .q{color:var(--text);line-height:1.3}
.yn .mine-list .n{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.yn .mine-list .n b{font-size:1.5rem;font-weight:800;color:var(--a)}
.yn .mine-list .n i{font-style:normal;color:var(--muted);font-size:.85rem}
.yn .stage>.small{color:var(--muted);font-size:.9rem;margin-top:12px}
@media (max-width:520px){.yn .scale{grid-template-columns:repeat(6,1fr);gap:6px}}