/* Only the Once Upon a Time module. The surrounding Hub tokens remain shared. */
.once-page { --accent:#48d5d0; --accent-text:#83e8e2; background:#101827; }
.once-page .topbar { width:100%; max-width:1320px; }
.once-shell { width:100%; max-width:1320px; min-width:0; }
.once-shell [hidden] { display:none !important; }
.once-card-page { display:block; padding:16px !important; background:#101827; }
.once-card-page #content { max-width:1320px; margin:auto; width:100%; min-width:0; }
.once-card-page > h1 { display:none; }
.once-card-page #i18n-toggle { position:relative; top:auto; right:auto; margin-left:auto; display:block; margin-bottom:12px; }
.once-game { color:#edf1f7; text-align:left; font-family:'Segoe UI',system-ui,sans-serif; min-width:0; }
.once-game *, .once-shell * { box-sizing:border-box; }
.once-game-header { display:flex; gap:20px; align-items:center; justify-content:space-between; margin-bottom:22px; }
.once-game-header h1 { color:#f4e2ba; font:700 clamp(1.65rem,3.5vw,2.6rem)/1.2 Georgia,serif; margin:4px 0 0; letter-spacing:0; }
.once-kicker { color:#8bddda; font-size:.8rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; margin:0 0 5px; }
.once-player-meta { display:flex; flex-direction:column; align-items:flex-end; gap:5px; font-size:.95rem; }
.once-connection { color:#9be8be; font-size:.78rem; }
.once-connection.is-offline { color:#ffce85; }
.once-world-tag { display:inline-block; color:#b7d5e6; font-size:.72rem; line-height:1.4; margin-top:6px; }
.once-lobby-settings { padding:14px; border:1px solid #718fa04d; border-radius:10px; background:#0b192b5c; margin:12px 0; }
.once-settings-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.once-settings-fields label { display:grid; gap:6px; font-size:.81rem; color:#d5dfed; font-weight:650; min-width:0; }
.once-settings-fields select { appearance:auto; min-height:44px; width:100%; min-width:0; padding:8px 10px; border:1px solid #687f9b; border-radius:8px; color:#f0f4fa; background:#1b304a; font:inherit; }
.once-settings-fields select:focus-visible { outline:3px solid #a6f3eb; outline-offset:2px; }
.once-settings-fields select:disabled { opacity:.55; }
.once-settings-summary { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:12px; }
.once-settings-summary .once-button { min-height:40px; padding:8px 12px; font-size:.8rem; }
.once-opening-count { margin:0; color:#ecd8aa; font-size:.82rem; }
.once-worlds-note { margin:8px 0 0; font-size:.74rem; }
.once-lobby-settings--readonly { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.once-lobby-settings--readonly .once-world-tag { margin-top:0; }
@media(max-width:480px){ .once-settings-fields { grid-template-columns:minmax(0,1fr); gap:10px; } }
.once-panel { background:#182334; border:1px solid #324155; border-radius:18px; padding:22px; margin:0 0 18px; min-width:0; }
.once-game h2 { font-size:1.15rem; line-height:1.4; margin:0 0 12px; color:#f0f3f8; letter-spacing:0; }
.once-game p { line-height:1.55; }
.once-muted { color:#b2bece; font-size:.86rem; line-height:1.5; }
.once-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.once-section-heading h2 { margin:0; }
.once-roster { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 18px; }
.once-seat { display:flex; gap:8px; align-items:center; border:1px solid #38465a; border-radius:100px; padding:8px 12px; font-size:.82rem; background:#121c2b; }
.once-seat span { color:#bec9d7; }
.once-seat.is-storyteller { border-color:#c9a258; background:#302b24; }
.once-storyteller { padding:20px 22px; border:1px solid #3a555e; background:linear-gradient(120deg,#183340,#172434); border-radius:18px; }
.once-storyteller h2 { margin:5px 0 0; font-size:1.1rem; }
.once-storyteller.is-mine { border:2px solid #d6b66d; background:linear-gradient(120deg,#3c3423,#182938); }
.once-storyteller.is-mine .once-kicker { color:#f8dba0; }
.once-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px; }
.once-button { appearance:none; min-height:46px; padding:11px 18px; border:1px solid #68e0d6; border-radius:10px; background:#51d6cc; color:#062927; font:750 .95rem/1.25 'Segoe UI',system-ui,sans-serif; cursor:pointer; }
.once-button--secondary { background:#24344a; border-color:#52657e; color:#e2ebf7; font-weight:600; }
.once-button:disabled { opacity:.5; cursor:default; }
.once-button:focus-visible,.once-card:focus-visible,.once-modal-close:focus-visible { outline:3px solid #a6f3eb; outline-offset:4px; }
.once-table-grid { display:grid; grid-template-columns:minmax(0,1fr) 264px; gap:18px; align-items:start; }
.once-history-panel { height:100%; min-height:300px; }
.once-carousel { display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; padding:6px 5px 16px; scroll-snap-type:x proximity; scrollbar-color:#596373 transparent; min-width:0; max-width:100%; }
.once-carousel > * { flex-shrink:0; scroll-snap-align:start; }
.once-history-item { display:flex; flex-direction:column; gap:7px; width:138px; }
.once-history-number { color:#b9c5d5; font-size:.74rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.once-history-item > small { font-size:.7rem; color:#dcc89e; }
.once-empty { width:100%; color:#b2bece; padding:30px 8px; font-size:.95rem; }
.once-card { --card-color:#d4af37; --category-ink:#fff2c8; --category-bg:#493817; position:relative; display:flex; flex-direction:column; width:138px; height:214px; flex-shrink:0; overflow:hidden; border:3px solid var(--card-color); border-radius:11px; padding:6px; background:linear-gradient(135deg,#f8d776,#8a6727 18%,#e7c375 50%,#63451b 80%,#f5cd62); color:#312819; box-shadow:0 7px 15px #04090f80,inset 0 0 0 1px #4b3318; font-family:Georgia,'Times New Roman',serif; text-align:center; cursor:default; }
button.once-card { cursor:pointer; }
.once-card::before { content:''; position:absolute; z-index:3; pointer-events:none; inset:0; background:url('assets/once-upon-a-time/card-backs/card-frame.svg') center/100% 100% no-repeat; }
.once-card::after { content:''; position:absolute; z-index:2; pointer-events:none; inset:5px; border:1px solid #f0cd76; border-radius:7px; box-shadow:inset 0 0 4px #f5ce6c88; }
.once-card.is-selected { outline:2px solid var(--card-color); outline-offset:3px; box-shadow:0 0 14px color-mix(in srgb,var(--card-color) 60%,transparent),0 7px 16px #0007; }
.once-card-category { display:flex; gap:5px; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--category-bg),#06101bcf); color:var(--category-ink); border:1px solid #dab661; padding:5px 2px; border-radius:5px 5px 0 0; font:800 .64rem/1 'Segoe UI',sans-serif; text-transform:uppercase; letter-spacing:.055em; min-height:26px; }
.once-card-category svg,.once-category-key svg { width:15px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; }
.once-card-art { position:relative; isolation:isolate; display:block; flex:1; min-height:0; overflow:hidden; border:1px solid #826744; background:radial-gradient(ellipse at center,var(--category-bg),#07111d); }
/* Preserve the whole semantic illustration in every card size, including short
   history/Ending thumbnails. Cropping portraits can hide the defining object. */
.once-card-art img { position:relative; z-index:1; height:100%; width:100%; display:block; object-fit:contain; }
.once-card-art .once-card-art-fill { position:absolute; z-index:0; inset:0; object-fit:cover; filter:blur(10px) brightness(.55); transform:scale(1.15); }
.once-card-title { display:flex; align-items:center; justify-content:center; flex-direction:column; min-height:43px; padding:7px 4px; background:radial-gradient(ellipse at 50% 15%,#fff2d0,#e6c78d); border:1px solid #9a7846; border-radius:0 0 5px 5px; font-weight:700; font-size:1rem; line-height:1.15; overflow-wrap:anywhere; }
.once-interrupt-mark { position:absolute; z-index:2; left:8px; right:8px; top:38px; color:#fff0c7; background:#44351dd9; padding:3px 2px; font:650 .59rem/1.15 'Segoe UI',sans-serif; border:1px solid #c7ab67; border-radius:2px; }
.once-cat-character { --card-color:#d4af37; --category-bg:#674813; --category-ink:#ffe5a0; }.once-cat-thing { --card-color:#22c55e; --category-bg:#06452e; --category-ink:#b5ffe1; }.once-cat-place { --card-color:#f97316; --category-bg:#6c2c0c; --category-ink:#ffe1b4; }.once-cat-aspect { --card-color:#3b82f6; --category-bg:#062f63; --category-ink:#bce4ff; }.once-cat-event { --card-color:#a855f7; --category-bg:#46215f; --category-ink:#eaccff; }.once-cat-ending { --card-color:#d4af37; --category-bg:#433113; --category-ink:#ffe6a5; }
.once-card--ending { width:100%; height:340px; }
.once-card--ending .once-card-title { min-height:115px; font-size:1.06rem; line-height:1.4; padding:13px; }
.once-card--ending .once-card-category { min-height:32px; font-size:.7rem; }
.once-ending-state { color:#ecd19a; font-size:.75rem; }
.once-ending-panel > .once-button { margin-top:14px; width:100%; }
.once-card--full { width:min(300px,100%); height:440px; margin:auto; }
.once-card--full .once-card-category { min-height:36px; font-size:.82rem; }
.once-card--full .once-card-category svg { width:21px; height:23px; }
.once-card--full .once-card-title { min-height:90px; font-size:1.55rem; padding:14px; line-height:1.3; }
.once-card--full.once-cat-ending .once-card-title { font-size:1.25rem; min-height:142px; }
.once-card--full .once-interrupt-mark { top:51px; font-size:.75rem; left:10px; right:10px; }
.once-hand-panel { margin-top:0; }
.once-hand-actions { position:sticky; bottom:max(0px,env(safe-area-inset-bottom)); padding:12px 0 0; background:linear-gradient(transparent,#182334 8px); z-index:4; }
.once-first select,.once-demo-bar select { min-height:46px; border-radius:8px; padding:8px 12px; border:1px solid #61708b; color:#eff4fa; background:#24344a; font-size:1rem; width:100%; }
.once-private-note { text-align:center; }
.once-private-note img { height:225px; max-width:100%; margin:auto auto 12px; display:block; }
.once-private-note p { font-size:.85rem; margin-top:8px; }
.once-notice { border:1px solid #756546; color:#f3dfb7; background:#322e24; padding:13px 16px; border-radius:10px; margin-bottom:14px; font-size:.9rem; }
.once-interrupt-notice { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.once-interrupt-notice .once-button { font-size:.8rem; }
.once-opportunity { margin:0 0 14px; }
.once-decision { border-color:#bca06a; }.once-decision p { margin-top:8px; }
.once-ending-review { color:#f3dfb2; font:700 clamp(1.1rem,2vw,1.6rem)/1.55 Georgia,serif; }
.once-winner { border:1px solid #c9ad6e; background:linear-gradient(120deg,#363024,#172b34); }
.once-winner h2 { font:700 1.8rem/1.3 Georgia,serif; color:#f7dfa5; }
.once-host-tools { margin:16px 0; }
.once-help { background:#142031; border:1px solid #344054; padding:15px 18px; border-radius:12px; margin:15px 0; font-size:.87rem; line-height:1.65; }
.once-help summary { cursor:pointer; color:#d5e3ed; font-weight:700; }
.once-help p { margin-top:14px; }.once-log { padding-left:20px; margin-top:14px; }
.once-category-key { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.once-category-key > span { display:flex; align-items:center; gap:5px; border:1px solid var(--card-color); border-radius:5px; background:var(--category-bg); color:var(--category-ink,#fff2c8); padding:4px 8px; font-size:.78rem; font-weight:700; }
.once-modal-backdrop { position:fixed; inset:0; z-index:1000; background:#040911e6; backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:20px; }
.once-modal { width:min(380px,100%); padding:28px 22px 20px; max-height:calc(100dvh - 40px); overflow-y:auto; border:1px solid #a68c5d; background:#172333; border-radius:18px; position:relative; box-shadow:0 20px 60px #0009; }
.once-modal .once-actions { justify-content:center; }
.once-modal-close { position:absolute; top:0; right:0; width:44px; height:44px; border:0; background:transparent; color:#f0dfb8; font-size:1.5rem; cursor:pointer; z-index:2; }
.once-confirm { padding:25px; width:min(460px,100%); }
.once-confirm h2 { color:#f0e1c4; margin:0 0 12px; font-size:1.15rem; line-height:1.5; }
.once-check { display:block; margin-top:16px; font-size:.86rem; line-height:1.6; color:#d5dfee; }
.once-check input { width:20px; height:20px; vertical-align:middle; margin-right:6px; }
.once-request-status:not(:empty) { color:#ffcc9c; padding:12px 14px; background:#2e2730; border:1px solid #745f59; border-radius:9px; margin-bottom:16px; font-size:.9rem; }
.once-request-status .once-button { margin-top:10px; }
.once-demo-bar { border:1px dashed #a78d5d; background:#292b2c; padding:14px 18px; margin:10px 0 18px; border-radius:12px; font-size:.85rem; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.once-demo-bar label { display:flex; gap:10px; align-items:center; }.once-demo-bar select { width:auto; }
.once-demo-bar a { color:#8be7df; }
.once-setup-panel { margin-top:22px; }.once-setup-panel p { margin:10px 0 16px; }
@media(max-width:760px){
  .once-page { padding:20px 14px 38px; }.once-card-page { padding:12px !important; }
  .once-game-header { gap:12px; margin-bottom:16px; }.once-game-header h1 { font-size:1.65rem; }
  .once-player-meta { font-size:.8rem; }.once-kicker { font-size:.7rem; }
  .once-panel { padding:15px; margin-bottom:14px; border-radius:14px; }
  .once-storyteller { padding:15px; }.once-storyteller h2 { font-size:.95rem; }
  .once-roster { gap:6px; margin:10px 0 14px; }.once-seat { font-size:.72rem; padding:6px 9px; gap:5px; }
  .once-table-grid { grid-template-columns:minmax(0,1fr); gap:0; }.once-history-panel { min-height:0; height:auto; }
  .once-section-heading { gap:5px; margin-bottom:8px; }.once-section-heading .once-muted { font-size:.72rem; }
  .once-carousel { gap:11px; padding-bottom:12px; }.once-history-item { width:112px; }
  .once-card--history { width:112px; height:166px; }.once-card--history .once-card-title { font-size:.87rem; min-height:36px; }
  .once-card--history .once-card-category { font-size:.55rem; min-height:23px; }
  .once-card--history .once-interrupt-mark { top:35px; font-size:.52rem; }
  .once-card--ending { display:grid; grid-template-columns:80px minmax(0,1fr); grid-template-rows:24px auto; height:auto; min-height:108px; width:100%; }
  .once-card--ending .once-card-category { grid-column:1/-1; min-height:24px; font-size:.64rem; padding:4px; }
  .once-card--ending .once-card-art { grid-column:1; min-height:67px; }
  .once-card--ending .once-card-title { grid-column:2; font-size:1rem; padding:8px; min-height:67px; line-height:1.35; }
  .once-ending-panel > .once-button { margin-top:10px; }.once-private-note { display:none; }
  .once-hand-actions { gap:8px; }.once-hand-actions .once-button { flex:1 1 auto; padding:11px; font-size:.9rem; }
  .once-game h2 { font-size:1rem; }.once-modal { padding:28px 15px 18px; }
  .once-card--full { height:400px; }.once-card--full .once-card-title { font-size:1.35rem; }
  .once-card--full.once-cat-ending .once-card-title { font-size:1.18rem; }
}
@media(prefers-reduced-motion:reduce){.once-card{scroll-behavior:auto;}}

/* Reference table refresh: quiet navy panels and ivory portrait cards.
   Layout is content-led, never compressed to a fixed viewport height. */
.once-page,.once-card-page {
  --accent:#b7c8ee; --accent-text:#d7e3ff;
  background:radial-gradient(ellipse at 80% 0%,#25345a88,transparent 55%),linear-gradient(150deg,#111b35,#18284c 65%,#111c36);
}
.once-page { padding-top:18px; padding-bottom:32px; }
.once-page .topbar { margin-bottom:16px; }
.once-page #once-host-status:empty { display:none; }
.once-card-page #content { display:block; padding:0; }
.once-card-page #i18n-toggle { margin-bottom:8px; }
.once-game--reference { width:100%; }
.once-game--reference .once-game-header { margin-bottom:12px; padding:0 2px 12px; border-bottom:1px solid #a9b8dd33; gap:14px; }
.once-game--reference .once-game-header > div:first-child { flex:1; min-width:0; }
.once-game--reference .once-game-header h1 { font-size:clamp(1.45rem,2.4vw,2rem); font-weight:500; color:#f4eadc; margin-top:2px; }
.once-game--reference .once-kicker { color:#bdcbe7; font-size:.7rem; letter-spacing:.08em; }
.once-game--reference .once-player-meta { font-size:.85rem; gap:4px; min-width:0; max-width:42%; text-align:right; }
.once-game--reference .once-player-meta strong { max-width:100%; overflow-wrap:anywhere; }
.once-game--reference .once-connection { font-size:.72rem; }
.once-game--reference .once-panel { padding:16px; margin-bottom:0; border-radius:10px; border-color:#a7bad44d; background:linear-gradient(125deg,#1a2a4bd9,#152441e8); box-shadow:inset 0 0 0 3px #b4c5ed05; }
.once-game--reference h2 { color:#f1e7d7; font:500 1.08rem/1.4 Georgia,serif; margin-bottom:10px; }
.once-game--reference .once-muted { color:#c6cfe2; }
.once-turn-strip { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:12px; padding:10px 12px; border:1px solid #a7bad43d; border-radius:8px; background:#1423419c; }
.once-game--reference .once-storyteller { border:0; border-left:2px solid #94b4d6; border-radius:0; background:transparent; padding:3px 10px; min-width:0; }
.once-game--reference .once-storyteller.is-mine { border-color:#f2d69c; background:transparent; }
.once-game--reference .once-storyteller.is-mine .once-kicker { color:#f7dca9; }
.once-game--reference .once-storyteller h2 { margin:3px 0 0; font:500 .83rem/1.45 'Segoe UI',system-ui,sans-serif; color:#c8d4e9; }
.once-game--reference .once-roster { margin:0; gap:6px; }
.once-game--reference .once-seat { border-radius:6px; border-color:#a7bad44d; padding:6px 9px; background:#203153; font-size:.75rem; }
.once-game--reference .once-seat.is-storyteller { background:#354260; border-color:#dcc59b; }
.once-game--reference .once-seat span { color:#c7d2e4; }
.once-turn-strip > .once-roster { min-width:0; }
.once-game--reference .once-seat { max-width:100%; }
.once-game--reference .once-seat strong { min-width:0; overflow-wrap:anywhere; }
.once-game--reference .once-storyteller .once-kicker { overflow-wrap:anywhere; }
.once-game--reference .once-table-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; align-items:start; margin-bottom:12px; }
.once-game--reference .once-table-grid.has-ending { grid-template-columns:minmax(0,1fr) 208px; }
.once-table-grid > .once-history-panel { grid-column:1; grid-row:1; }
.once-table-grid > .once-hand-panel { grid-column:1/-1; grid-row:2; }
.once-table-grid > .once-ending-dock { grid-column:2; grid-row:1; }
.once-game--reference .once-history-panel { min-height:0; height:auto; }
.once-game--reference .once-section-heading { margin-bottom:12px; gap:8px; }
.once-game--reference .once-section-heading h2 { margin:0; }
.once-game--reference .once-section-heading .once-muted { font-size:.74rem; }
.once-history-board.has-pile { display:grid; grid-template-columns:76px minmax(0,1fr); gap:16px; align-items:center; }
.once-history { display:grid; grid-template-columns:repeat(4,minmax(0,144px)); gap:14px; min-width:0; }
.once-history-item { position:relative; width:100%; min-width:0; }
.once-game--reference .once-history-number { font-size:.72rem; color:#d3dced; }
.once-game--reference .once-history-item.is-current > .once-card { outline:3px solid #f5d28b; outline-offset:3px; box-shadow:0 0 0 6px #f5d28b1a,0 6px 16px #0007; }
.once-current-label { display:flex; align-items:center; justify-content:center; gap:5px; min-height:26px; padding:4px 6px; border-radius:5px; background:#f5d28b; color:#25304a; font:750 .75rem/1.25 'Segoe UI',system-ui,sans-serif; text-align:center; }
.once-card--history { width:100%; height:224px; }
.once-game--reference .once-card { width:144px; height:224px; padding:4px; border:1px solid #eee0c9; border-radius:8px; background:#eee2cb; box-shadow:0 5px 10px #04091e66,inset 0 0 0 2px #27334b; }
.once-game--reference .once-card::before { filter:grayscale(1) sepia(.15) brightness(1.6); opacity:.7; }
.once-game--reference .once-card::after { inset:3px; border-color:#cfc0a5; border-radius:5px; box-shadow:none; }
.once-game--reference .once-card--history { width:100%; }
.once-game--reference .once-card-category { border:0; border-bottom:1px solid #d4c6b0; border-radius:3px 3px 0 0; background:#1a2944; color:#e9ddcd; min-height:25px; padding:4px 2px; font-size:.59rem; letter-spacing:.025em; gap:5px; }
.once-game--reference .once-card-category svg { width:13px; height:15px; color:var(--category-ink); }
.once-game--reference .once-card-art { border:0; background:#1a2944; }
.once-game--reference .once-card-title { flex-shrink:0; border:0; border-radius:0 0 3px 3px; min-height:49px; padding:8px 5px; background:linear-gradient(120deg,#fff7e9,#eadfcd); color:#463b34; font-size:1.02rem; line-height:1.17; font-weight:500; }
.once-game--reference .once-interrupt-mark { top:34px; left:8px; right:8px; background:#243553e8; border-color:#d9d5dd; color:#edf0fb; font-size:.54rem; }
.once-game--reference .once-cat-character { --category-ink:#f0d191; }
.once-game--reference .once-cat-thing { --category-ink:#b0e3d0; }
.once-game--reference .once-cat-place { --category-ink:#edc1ab; }
.once-game--reference .once-cat-aspect { --category-ink:#b2cbea; }
.once-game--reference .once-cat-event { --category-ink:#d4c0eb; }
.once-game--reference .once-card.is-selected { outline:3px solid #b8d9ff; outline-offset:3px; box-shadow:0 0 0 6px #638fe529,0 8px 14px #0007; }
.once-game--reference .once-card:focus-visible { outline:3px solid #e4edff; outline-offset:4px; }
.once-story-opening { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:243px; padding:20px 12px; margin:0; gap:12px; }
.once-story-opening svg { width:43px; height:38px; fill:none; stroke:#e4cda6; stroke-width:1.25; }
.once-game--reference .once-story-opening p { margin:0; max-width:460px; font-size:.82rem; color:#cbd4e6; }
.once-game--reference .once-story-opening .once-opening-title { font:500 1.65rem/1.2 Georgia,serif; color:#f6ead6; }
.once-history-expanded { margin-top:18px; padding-top:18px; border-top:1px solid #a7bad43d; }
.once-history-older { grid-template-columns:repeat(auto-fill,minmax(120px,144px)); }
.once-deck-count { display:block; margin-top:12px; padding-top:10px; border-top:1px solid #a7bad433; font-size:.72rem; text-align:right; }
.once-history-pile { appearance:none; display:flex; flex-direction:column; align-items:center; gap:12px; padding:10px 2px; border:0; border-radius:8px; background:transparent; color:#d8deee; font:inherit; cursor:pointer; min-width:0; }
.once-history-pile:focus-visible { outline:3px solid #e4edff; outline-offset:3px; }
.once-pile-visual { position:relative; display:block; width:56px; height:88px; isolation:isolate; }
.once-pile-visual::before,.once-pile-visual::after { content:''; position:absolute; inset:0; border:1px solid #d6c7b2; border-radius:6px; background:#0c2142 url('assets/once-upon-a-time/card-backs/story-back.svg') center/100% 100%; box-shadow:0 5px 10px #0008; transition:transform .18s ease; filter:saturate(.4); }
.once-pile-visual::before { transform:rotate(-10deg) translate(-4px,1px); z-index:-2; }
.once-pile-visual::after { transform:rotate(-4deg) translate(-1px,1px); z-index:-1; }
.once-pile-visual > img { display:block; width:100%; height:100%; border-radius:6px; box-shadow:0 5px 10px #0008; transform:rotate(3deg); transition:transform .18s ease; filter:saturate(.4); }
.once-history-pile:hover .once-pile-visual::before,.once-history-pile[aria-expanded="true"] .once-pile-visual::before { transform:rotate(-14deg) translate(-6px,0); }
.once-history-pile:hover .once-pile-visual > img,.once-history-pile[aria-expanded="true"] .once-pile-visual > img { transform:rotate(7deg); }
.once-pile-count { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); display:grid; place-items:center; min-width:24px; height:24px; padding:0 5px; border:1px solid #ddd0b7; border-radius:50%; background:#243653; color:#fff2d8; font:750 .72rem/1 'Segoe UI',sans-serif; box-shadow:0 2px 5px #0008; }
.once-pile-label { font-size:.72rem; line-height:1.4; text-align:center; }
.once-game--reference .once-ending-dock { display:block; padding:12px; width:100%; min-width:0; border:0; background:transparent; box-shadow:none; }
.once-ending-dock > summary { display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; min-height:44px; cursor:pointer; list-style:none; color:#f1e7d7; font:500 1rem/1.4 Georgia,serif; }
.once-ending-dock > summary::-webkit-details-marker { display:none; }
.once-ending-dock > summary::after { content:'⌄'; margin-left:auto; font:700 1rem/1 system-ui,sans-serif; }
.once-ending-dock[open] > summary::after { content:'⌃'; }
.once-ending-dock > summary:focus-visible { outline:3px solid #e4edff; outline-offset:3px; border-radius:5px; }
.once-ending-content { margin-top:8px; }
.once-ending-dock .once-ending-state { display:block; color:#d1d9e9; font-size:.71rem; line-height:1.4; }
.once-game--reference .once-ending-dock .once-card--ending { display:flex; width:100%; height:224px; min-height:0; }
.once-game--reference .once-ending-dock .once-card--ending::before,.once-game--reference .once-ending-dock .once-card--ending::after { content:none; }
.once-game--reference .once-ending-dock .once-card-title { flex-shrink:0; min-height:87px; padding:9px 7px; font-size:.92rem; line-height:1.35; }
.once-hand-title { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.once-hand-meta { display:flex; align-items:center; gap:12px; }
.once-ending-jump { appearance:none; min-height:44px; padding:8px; border:1px solid #a7bad455; border-radius:6px; background:#223456; color:#ddd5c7; font:600 .75rem/1.3 'Segoe UI',sans-serif; cursor:pointer; }
.once-ending-jump:hover { background:#2e4268; }
.once-ending-jump:focus-visible { outline:3px solid #e4edff; outline-offset:3px; }
.once-hand-layout { display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:18px; align-items:stretch; }
.once-game--reference .once-carousel { gap:12px; padding:5px 5px 12px; scrollbar-color:#71809d transparent; }
.once-hand { align-items:flex-start; }
.once-hand > .once-empty { flex:1 1 0; min-width:0; width:auto; padding:35px 12px; }
.once-hand-controls { display:flex; flex-direction:column; justify-content:center; min-width:0; border-left:1px solid #a7bad43d; padding-left:18px; }
.once-game--reference .once-hand-actions { position:static; padding:0; margin-top:10px; display:flex; flex-direction:column; align-items:stretch; gap:8px; background:transparent; }
.once-game--reference .once-button { min-height:44px; padding:10px 14px; border-radius:6px; background:#c5d3ed; border-color:#dce5f6; color:#172a49; font-size:.88rem; font-weight:700; }
.once-game--reference .once-button--secondary { background:#293d63; border-color:#8399bf; color:#edf1fb; font-weight:500; }
.once-game--reference .once-button:hover:not(:disabled) { filter:brightness(1.1); }
.once-game--reference .once-button:focus-visible { outline:3px solid #e4edff; outline-offset:3px; }
.once-game--reference .once-button:disabled { opacity:.48; }
.once-game--reference .once-help { background:#14213bc2; border-color:#a7bad43d; border-radius:8px; padding:12px 16px; margin:12px 0; }
.once-game--reference .once-help summary { font-size:.8rem; color:#d8e0ee; }
.once-game--reference .once-notice,.once-game--reference .once-opportunity,.once-game--reference .once-decision { margin-bottom:12px; }
.once-game--reference .once-first,.once-game--reference .once-winner { margin-bottom:12px; }
/* Opening story (replaces the old "who looks most like this card" starter).
   The page is a warm paper sheet that matches the card name plates. */
.once-visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.once-opening { min-width:0; color:#3c3128; background:linear-gradient(135deg,#fff8ea,#eee2ca); border:1px solid #e3d4b8; border-radius:10px; box-shadow:inset 0 0 0 3px #fffaf1,inset 0 0 0 4px #d7c6a6,0 8px 18px #050b1d59; padding:22px 26px; text-align:left; }
.once-opening-kicker { display:flex; align-items:center; gap:8px; margin:0 0 10px !important; color:#7a5f3d; font:750 .72rem/1.2 'Segoe UI',system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.once-opening-kicker svg { width:22px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; }
.once-game .once-opening-text { margin:0; color:#33291f; font:400 1.2rem/1.6 Georgia,'Times New Roman',serif; overflow-wrap:break-word; }
.once-game .once-opening-zh { margin:10px 0 0; padding-top:10px; border-top:1px dashed #cbb894; color:#5e4d3c; font-size:.9rem; line-height:1.7; }
.once-opening-tools { display:flex; justify-content:flex-end; margin-top:14px; }
.once-game--reference .once-opening .once-button--secondary { background:transparent; border-color:#b99d70; color:#5a4430; font-weight:650; }
.once-game--reference .once-opening .once-button--secondary:hover:not(:disabled) { background:#f5ead6; filter:none; }
.once-game--reference .once-opening .once-button:focus-visible { outline-color:#5a4430; }
.once-game--reference .once-first { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr); gap:24px; align-items:stretch; margin-bottom:12px; }
.once-first .once-opening--feature { display:flex; flex-direction:column; justify-content:center; }
.once-first .once-opening--feature .once-opening-text { font-size:clamp(1.15rem,1.6vw,1.45rem); }
.once-first-choice { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.once-first-choice h2 { margin-bottom:6px !important; }
.once-first-choice > .once-muted { margin:0 0 16px; }
.once-first-options { display:flex; flex-direction:column; gap:10px; }
.once-first-options > .once-button { width:100%; }
.once-game--reference .once-first-options .once-button[data-once-icon="dice"]::before { content:'🎲'; margin-right:8px; }
.once-first-or { display:flex; align-items:center; gap:10px; margin:4px 0 0 !important; color:#c6cfe2; font-size:.76rem; }
.once-first-or::before,.once-first-or::after { content:''; flex:1; height:1px; background:#a7bad44d; }
.once-first-pick { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
.once-first-pick label { min-width:0; margin:0; }
.once-first-pick select { min-height:44px; }
.once-first-waiting { margin:0; color:#e7ecf6; }
.once-story-opening--told { align-items:stretch; justify-content:center; min-height:0; padding:4px 0; }
.once-story-opening--told .once-opening--page { max-width:760px; margin:0 auto; width:100%; }
.once-game--reference .once-story-opening--told .once-opening-text { font-size:1.15rem; max-width:none; color:#33291f; }
.once-game--reference .once-story-opening--told .once-opening-zh { max-width:none; color:#5e4d3c; font-size:.88rem; }
.once-game--reference .once-story-opening .once-opening-hint { margin:14px 0 0; max-width:none; color:#6b5a48; font-size:.82rem; font-style:italic; }
.once-opening--prologue { padding:12px 16px; margin:0 0 14px; box-shadow:inset 0 0 0 2px #fffaf1,inset 0 0 0 3px #d7c6a6; }
.once-opening-toggle { display:none; margin-left:auto; min-height:32px; padding:4px 10px; border:1px solid #b99d70; border-radius:6px; background:transparent; color:#5a4430; font:650 .72rem/1.2 'Segoe UI',system-ui,sans-serif; letter-spacing:0; text-transform:none; cursor:pointer; }
.once-opening-toggle:focus-visible { outline:3px solid #5a4430; outline-offset:2px; }
.once-opening--prologue .once-opening-kicker { margin-bottom:6px !important; font-size:.66rem; }
.once-game .once-opening--prologue .once-opening-text { font-size:.95rem; line-height:1.55; }
.once-game .once-opening--prologue .once-opening-zh { margin-top:6px; padding-top:6px; font-size:.8rem; }
/* The shared host table is screen-shared: give the latest four cards the room
   instead of leaving most of the panel empty. Player cards keep their sizes. */
@media(min-width:761px){
  .once-game--host .once-history-latest { grid-template-columns:repeat(4,minmax(0,200px)); justify-content:center; gap:20px; }
  .once-game--host .once-history-board.has-pile { grid-template-columns:76px minmax(0,auto); justify-content:center; gap:28px; }
  .once-game--host .once-history-latest .once-card--history { width:100%; height:auto; aspect-ratio:9/14; }
  .once-game--host .once-history-latest .once-card-category { min-height:30px; font-size:.68rem; }
  .once-game--host .once-history-latest .once-card-title { min-height:58px; font-size:1.2rem; }
  .once-game--host .once-history-latest .once-interrupt-mark { top:40px; font-size:.62rem; }
  .once-game--host .once-history-number { font-size:.8rem; }
  .once-game--host .once-opening--prologue { padding:14px 20px; }
  .once-game.once-game--host .once-opening--prologue .once-opening-text { font-size:1.08rem; }
  .once-game--host .once-story-opening--told .once-opening--page { max-width:880px; }
  .once-game.once-game--host .once-story-opening--told .once-opening-text { font-size:1.35rem; }
}
@media(max-width:900px){
  .once-game--reference .once-first { grid-template-columns:minmax(0,1fr); gap:16px; }
}
.once-game--reference .once-story-opening .once-opening-kicker { color:#7a5f3d; font-size:.72rem; max-width:none; }
.once-game--reference .once-story-opening--waiting { min-height:140px; padding:12px; }
@media(max-width:1000px){
  .once-game--reference .once-table-grid.has-ending { grid-template-columns:minmax(0,1fr); }
  .once-game--reference .once-ending-dock { grid-column:1; grid-row:3; padding:0 12px; border:1px solid #a7bad43d; border-radius:8px; }
  .once-game--reference .once-ending-dock[open] { padding-bottom:12px; }
  .once-game--reference .once-ending-dock .once-card--ending { display:grid; grid-template-columns:90px minmax(0,1fr); grid-template-rows:25px minmax(100px,auto); height:auto; min-height:134px; }
  .once-game--reference .once-ending-dock .once-card-category { grid-column:1/-1; min-height:25px; }
  .once-game--reference .once-ending-dock .once-card-art { grid-column:1; min-height:0; }
  .once-game--reference .once-ending-dock .once-card-title { grid-column:2; min-height:0; padding:10px; font-size:.92rem; }
  .once-hand-layout { grid-template-columns:minmax(0,1fr); gap:8px; }
  .once-hand-controls { border-left:0; border-top:1px solid #a7bad43d; padding:10px 0 0; }
  .once-game--reference .once-hand-actions { flex-direction:row; flex-wrap:wrap; margin-top:6px; }
  .once-game--reference .once-hand-actions .once-button { flex:1 1 auto; }
  .once-action-hint { font-size:.78rem; }
}
@media(max-width:760px){
  .once-page { padding:14px 12px 28px; }
  .once-card-page { padding:12px !important; }
  .once-game--reference .once-game-header h1 { font-size:1.4rem; }
  .once-game--reference .once-panel { padding:12px; }
  .once-turn-strip { align-items:flex-start; flex-direction:column; gap:9px; padding:10px; }
  .once-game--reference .once-roster { gap:5px; }
  .once-game--reference .once-seat { font-size:.7rem; padding:5px 7px; }
  .once-history-board.has-pile { grid-template-columns:minmax(0,1fr); gap:6px; }
  .once-history { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  /* Keep the familiar upright cards in chronological, row-major order. The
     2x2 grid never scrolls horizontally; the hand directly follows this set. */
  .once-history-latest { grid-template-columns:repeat(2,minmax(0,128px)); justify-content:center; }
  .once-game--reference .once-history-latest .once-card--history { display:flex; flex-direction:column; height:200px; min-height:200px; }
  .once-game--reference .once-history-latest .once-card-category { min-height:25px; }
  .once-game--reference .once-history-latest .once-card-art { flex:1; min-height:0; }
  .once-game--reference .once-history-latest .once-card--history .once-card-title { min-height:45px; padding:7px 4px; font-size:.93rem; line-height:1.2; overflow-wrap:anywhere; }
  .once-game--reference .once-history-latest .once-interrupt-mark { top:34px; left:8px; right:8px; font-size:.54rem; padding:3px 2px; }
  .once-game--reference .once-history-number { font-size:.64rem; margin-top:2px; }
  .once-current-label { min-height:20px; padding:3px; font-size:.63rem; }
  .once-history-latest .once-history-item { gap:4px; }
  .once-game--reference .once-card--history .once-card-title { font-size:.93rem; min-height:45px; }
  .once-game--reference .once-card--history .once-card-category { font-size:.54rem; }
  .once-history-older { grid-template-columns:repeat(auto-fill,minmax(110px,128px)); }
  .once-history-pile { flex-direction:row; justify-self:start; gap:10px; min-height:44px; padding:4px 8px; }
  .once-pile-visual { width:22px; height:32px; }
  .once-pile-count { min-width:20px; height:20px; bottom:4px; font-size:.65rem; }
  .once-pile-label { text-align:left; }
  .once-game--reference .once-story-opening { min-height:120px; gap:8px; padding:10px; }
  .once-game--reference .once-section-heading { margin-bottom:8px; }
  .once-game--reference .once-table-grid { gap:8px; }
  .once-deck-count { margin-top:6px; padding-top:6px; }
  .once-game--reference .once-hand-actions { position:sticky; bottom:max(0px,env(safe-area-inset-bottom)); padding:8px 0; background:#18284cf2; z-index:4; }
  .once-hand-title { gap:4px 9px; }
  .once-hand-meta { gap:8px; }
  .once-ending-jump { font-size:.7rem; }
  /* Opening story on phones: same reading order, smaller type. */
  .once-opening { padding:16px; }
  .once-game .once-opening-text,.once-first .once-opening--feature .once-opening-text { font-size:1.05rem; line-height:1.55; }
  .once-game--reference .once-story-opening--told .once-opening-text { font-size:1rem; }
  .once-game--reference .once-story-opening--waiting { min-height:90px; }
  .once-opening--prologue { padding:10px 12px; margin-bottom:10px; }
  .once-game .once-opening--prologue .once-opening-text { font-size:.86rem; }
  .once-opening-toggle { display:inline-flex; align-items:center; min-height:44px; margin-right:-6px; }
  .once-opening--prologue { padding-top:0; }
  .once-opening--prologue .once-opening-kicker { margin-bottom:0 !important; }
  .once-opening--prologue.is-clamped .once-opening-text { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
  .once-opening--prologue.is-clamped .once-opening-zh { display:none; }
  .once-first-pick { grid-template-columns:minmax(0,1fr); }
  .once-first-pick .once-button { width:100%; }
}
@media(prefers-reduced-motion:reduce){
  .once-pile-visual::before,.once-pile-visual::after,.once-pile-visual > img { transition:none; }
}