:root {
  color-scheme: light;
  --ink: #26334f;
  --muted: #71809d;
  --cream: #fffaf0;
  --sky: #e7f4ff;
  --panel: rgba(255, 255, 255, .86);
  --panel-solid: #fffdf8;
  --line: #d9e1ed;
  --accent: #5278d4;
  --accent-soft: #dce9ff;
  --danger: #b55562;
  --pink: #c86d94;
  --blue: #62a9df;
  --sage: #7caf8a;
  --purple: #9576bd;
  --nightmare: #8a829d;
  --shadow: 0 18px 40px rgba(76, 96, 136, .14);
  --actionbar-space: 6.6rem;
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--cream); }
body { margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(circle at 82% -5%, #fff 0 18rem, transparent 42rem), linear-gradient(155deg, #fffaf0 0%, #edf7ff 100%); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .25; background-image: radial-gradient(#9dc8e9 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(to bottom, black, transparent 70%); }
button, input { font: inherit; }
button { min-height: 44px; border: 1px solid #c3d1e7; border-radius: 13px; color: var(--ink); background: #fff; padding: .65rem .9rem; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(72, 105, 161, .16); }
button:disabled { opacity: .43; cursor: not-allowed; }
button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid #f2b84b; outline-offset: 2px; }
button.primary { color: #fff; background: var(--accent); border-color: #4166bd; }
button.warn { color: #fff; background: #b25f70; border-color: #974b5d; }
button.ghost { background: transparent; }
input { min-height: 44px; border: 1px solid var(--line); border-radius: 11px; padding: .55rem .7rem; color: var(--ink); background: #fff; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.45rem, 4vw, 2.25rem); letter-spacing: .02em; }
h2 { font-size: 1.12rem; }
h3 { color: #4e5f7e; font-size: .9rem; }
h3 small, h2 small { color: var(--muted); font-size: .78rem; font-weight: 500; }
.shell { width: min(1380px, 100%); margin: 0 auto; padding: 1rem 1rem calc(var(--actionbar-space) + 1.8rem); position: relative; }
.app-shell { display: grid; gap: .9rem; }
.topbar, .section-head, .status-cluster, .door-status, .drawer-head, .action-bar, .action-buttons, .hand-heading, .path-heading, .secondary-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.topbar { justify-content: space-between; gap: 1rem; padding: .25rem 0; }
.brand .eyebrow { margin-bottom: .18rem; }
.eyebrow { color: #7394ca; letter-spacing: .12em; font-size: .69rem; font-weight: 800; }
.status-cluster { justify-content: flex-end; }
.turn-status { display: grid; gap: .1rem; text-align: right; }
.turn-status strong { color: #38568d; font-size: .95rem; }
.turn-status span { color: var(--muted); font-size: .78rem; }
.menu { position: relative; }
.menu summary { list-style: none; min-height: 44px; display: grid; place-items: center; padding: .65rem .85rem; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; background: rgba(255,255,255,.74); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] { z-index: 20; }
.menu-actions { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 1; display: grid; gap: .5rem; min-width: max-content; padding: .5rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); }
.menu-actions button { position: static; width: 100%; white-space: nowrap; box-shadow: none; }
.panel { border: 1px solid rgba(185, 201, 222, .75); border-radius: 20px; padding: 1rem; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.door-status { display: grid; gap: .55rem; padding: .7rem .9rem; }
.door-status-title { min-width: 0; }
.door-status-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; min-width: 0; }
.door-status-player { display: grid; gap: .35rem; min-width: 0; }
.door-status-player > span { min-width: 0; overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.board { display: grid; gap: .9rem; }
.main-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: .9rem; }
.main-column, .team-column, .aux-column { display: grid; gap: .9rem; min-width: 0; }
.zone { display: grid; gap: .65rem; min-width: 0; }
.current-player { border-color: #b7c9e9; background: rgba(255,255,255,.92); }
.current-player .section-head { justify-content: space-between; }
.current-badge { display: inline-flex; vertical-align: middle; margin-left: .25rem; padding: .23rem .5rem; border-radius: 99px; color: #4163a0; background: var(--accent-soft); font-size: .68rem; font-weight: 700; }
.path-heading, .hand-heading { justify-content: space-between; margin-top: .15rem; }
.streak { color: #5c82c7; font-size: .78rem; font-weight: 700; }
.hand-heading { margin-top: .2rem; }
.path-strip, .hand-row, .shared-row, .mini-hand, .compact-cards, .path-full, .drawer-cards, .draft-candidates { display: grid; gap: .55rem; }
.path-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 9.5rem; }
.path-display { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; min-height: 0; }
.mini-path-heading { margin-top: .15rem; }
.hand-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shared-row { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 31rem; }
.cards { display: flex; flex-wrap: wrap; gap: .55rem; min-height: 4rem; align-content: start; }
.card { width: 100%; min-width: 0; min-height: 0; aspect-ratio: 2 / 3; height: auto; padding: .45rem; display: flex; flex-direction: column; justify-content: space-between; overflow: visible; text-align: left; border: 2px solid color-mix(in srgb, var(--card-color) 76%, #fff); border-radius: 14px; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--card-color) 88%, #fff), color-mix(in srgb, var(--card-color) 68%, #17233f)); box-shadow: 4px 5px 0 color-mix(in srgb, var(--card-color) 30%, #fff), 0 8px 14px rgba(67, 77, 112, .18); position: relative; }
.card::after { content: ""; position: absolute; inset: 5px; pointer-events: none; border: 1px solid rgba(255,255,255,.55); border-radius: 9px; }
.card:hover:not(:disabled) { transform: translateY(-2px); }
.card.selected { outline: 3px solid #f2b84b; outline-offset: 2px; transform: translateY(-5px); box-shadow: 5px 9px 0 color-mix(in srgb, var(--card-color) 30%, #fff), 0 14px 18px rgba(67, 77, 112, .22); }
.card-top { min-height: .75rem; display: flex; justify-content: space-between; gap: .3rem; color: rgba(255,255,255,.85); font-size: .68rem; font-weight: 700; position: relative; z-index: 1; }
.card-character .card-top { min-height: .75rem; }
.card-name { position: relative; z-index: 1; font-size: .83rem; font-weight: 800; text-shadow: 0 1px 2px rgba(20, 28, 48, .3); }
.card-source { position: relative; z-index: 1; color: rgba(255,255,255,.82); font-size: .63rem; }
.card-id { color: rgba(255,255,255,.68); font-size: .55rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-character { --card-color: var(--pink); }
.card-character.color-pink { --card-color: var(--pink); } .card-character.color-blue { --card-color: var(--blue); } .card-character.color-green { --card-color: var(--sage); } .card-character.color-purple { --card-color: var(--purple); }
.card-character.wild-card { --card-color: #8c78c6; background: linear-gradient(135deg, #d45a79 0%, #e2b04e 31%, #65a987 60%, #668ed0 100%); }
.card-character.wild-card::before { content: ""; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(120deg, rgba(255,255,255,.2), transparent 45%, rgba(255,255,255,.16)); pointer-events: none; }
.card-door { --card-color: var(--blue); } .card-door.color-pink { --card-color: var(--pink); } .card-door.color-blue { --card-color: var(--blue); } .card-door.color-green { --card-color: var(--sage); } .card-door.color-purple { --card-color: var(--purple); }
.card-nightmare { --card-color: var(--nightmare); background: linear-gradient(145deg, #aaa3b9, #686478); }
.character-art, .event-art { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: visible; z-index: 1; }
.character-art img, .event-art img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; filter: drop-shadow(0 4px 2px rgba(35, 43, 68, .22)); }
.image-fallback { display: none; color: rgba(255,255,255,.7); font-size: .75rem; font-weight: 700; }
.image-missing .image-fallback { display: block; }
.path-card { min-height: 0; font-size: .74rem; }
.path-card .character-art { height: auto; }
.mini-card { min-height: 0; padding: .3rem; border-radius: 11px; }
.mini-card .character-art { height: auto; }
.mini-card .card-name { font-size: .68rem; }
.mini-card .card-top { font-size: .56rem; }
.mini-hand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini-path { display: grid; grid-template-columns: 1fr 4.2rem; align-items: center; gap: .45rem; color: var(--muted); font-size: .76rem; }
.door-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; min-width: 0; }
.door-progress-item { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: center; justify-items: center; min-width: 0; aspect-ratio: 2 / 3; overflow: hidden; padding: .22rem .12rem .18rem; border: 1px solid #cbd3dd; border-radius: 8px; color: #8d97a6; background: #e7ebef; font-size: .72rem; }
.door-progress-item.color-pink { --card-color: var(--pink); } .door-progress-item.color-blue { --card-color: var(--blue); } .door-progress-item.color-green { --card-color: var(--sage); } .door-progress-item.color-purple { --card-color: var(--purple); }
.door-progress-item.has-door { border-color: color-mix(in srgb, var(--card-color) 76%, #fff); color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--card-color) 88%, #fff), color-mix(in srgb, var(--card-color) 68%, #17233f)); box-shadow: 2px 3px 0 color-mix(in srgb, var(--card-color) 30%, #fff), 0 4px 8px rgba(67, 77, 112, .14); }
.door-progress-art { display: grid; place-items: center; min-width: 0; min-height: 0; width: 100%; height: 100%; }
.door-progress-art img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; filter: grayscale(1) opacity(.42); }
.door-progress-item.has-door .door-progress-art img { filter: none; }
.door-progress-item b { position: relative; z-index: 1; min-width: 0; max-width: 100%; overflow: visible; font-size: .62rem; font-weight: 800; line-height: 1; text-align: center; text-shadow: 0 1px 2px rgba(20, 28, 48, .28); white-space: nowrap; }
.door-progress-item:not(.has-door) b { text-shadow: none; }
.door-progress-item em { position: absolute; top: .18rem; right: .18rem; z-index: 2; min-width: 1rem; padding: .08rem .18rem; border: 1px solid rgba(255,255,255,.7); border-radius: 99px; color: #38568d; background: #fff; box-shadow: 0 2px 5px rgba(72, 91, 126, .18); font-size: .58rem; font-style: normal; font-weight: 800; line-height: 1.1; text-align: center; }
.door-progress.compact { gap: .25rem; }
.door-progress.compact .door-progress-item { border-radius: 7px; padding: .16rem .08rem .14rem; }
.door-progress.compact .door-progress-item b { font-size: .55rem; }
.door-progress.compact .door-progress-item em { top: .1rem; right: .1rem; padding: .04rem .12rem; font-size: .5rem; }
.secondary-actions { justify-content: flex-end; border-top: 1px solid #edf0f5; padding-top: .6rem; }
.text-button { min-height: 38px; padding: .4rem .55rem; border: 0; color: #5575b1; background: transparent; font-size: .78rem; }
.text-button:hover:not(:disabled) { background: var(--accent-soft); box-shadow: none; }
.expanded-board, .teammate-detail { display: grid; gap: .55rem; padding-top: .65rem; border-top: 1px solid #edf0f5; }
.path-full { grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); max-height: 23rem; overflow: auto; padding: .25rem; }
.path-full .card { min-height: 0; }
.path-full .character-art { height: auto; }
.teammate { background: rgba(248, 252, 255, .88); }
.teammate .section-head { justify-content: space-between; }
.latest-result { min-height: 1.3rem; color: #53637d; font-size: .82rem; }
.auxiliary { background: rgba(255,255,255,.62); }
.aux-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: .8rem; padding-top: .7rem; border-top: 1px solid #edf0f5; }
.aux-grid > section { display: grid; align-content: start; gap: .45rem; }
.event-list { display: grid; gap: .35rem; max-height: 16rem; overflow: auto; }
.event { padding: .4rem .55rem; border-left: 3px solid #8eb4e8; border-radius: 0 8px 8px 0; background: #f4f8ff; font-size: .78rem; }
.event.door { border-color: var(--purple); } .event.nightmare { border-color: #a897bd; } .event.effect { border-color: #d49bca; }
.compact-cards { grid-template-columns: repeat(auto-fill, minmax(3.8rem, 1fr)); }
.compact-cards .card { min-height: 5.3rem; }
.draft-zone { display: grid; gap: .85rem; }
.draft-zone .section-head { justify-content: space-between; }
.selection-progress { color: #486db1; font-weight: 800; font-size: .86rem; }
.draft-candidates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.draft-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; padding-top: .7rem; border-top: 1px solid #edf0f5; }
.draft-players > section { display: grid; gap: .4rem; }
.action-bar { position: fixed; z-index: 25; left: 50%; bottom: 0; width: min(1380px, calc(100% - 1.2rem)); transform: translateX(-50%); justify-content: space-between; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); border: 1px solid #bdcce4; border-bottom: 0; border-radius: 18px 18px 0 0; background: rgba(255,255,255,.96); box-shadow: 0 -10px 30px rgba(72, 91, 126, .18); backdrop-filter: blur(12px); }
.selected-summary { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: .3rem .5rem; min-width: 0; }
.selected-summary small { grid-column: 1 / -1; color: var(--muted); font-size: .72rem; max-width: 42rem; }
.selected-dot { width: .65rem; height: .65rem; border-radius: 50%; background: currentColor; }
.selected-dot.color-pink { color: var(--pink); } .selected-dot.color-blue { color: var(--blue); } .selected-dot.color-green { color: var(--sage); } .selected-dot.color-purple { color: var(--purple); }
.action-buttons { flex-shrink: 0; }
.draft-bar > div, .result-bar > div { display: grid; gap: .15rem; } .draft-bar span, .result-bar span { color: var(--muted); font-size: .75rem; }
.pending-event { position: fixed; z-index: 27; right: 1rem; bottom: calc(var(--actionbar-space) + .65rem); display: flex; align-items: center; gap: .65rem; min-height: 44px; border-color: #bbabd2; color: #5e5374; background: #f4edfb; box-shadow: var(--shadow); }
.pending-event strong { color: #77649a; }
.drawer-backdrop { position: fixed; z-index: 28; inset: 0; background: rgba(45, 57, 86, .22); }
.event-drawer { position: fixed; z-index: 30; left: 50%; bottom: 0; width: min(780px, 100%); max-height: 85vh; transform: translateX(-50%); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #c6b7d8; border-bottom: 0; border-radius: 23px 23px 0 0; background: #fffdfd; box-shadow: 0 -14px 44px rgba(75, 69, 102, .27); }
.drawer-grip { width: 2.4rem; height: .28rem; margin: .5rem auto .25rem; border-radius: 99px; background: #d2c9dc; }
.drawer-head { justify-content: space-between; padding: .2rem 1rem .55rem; border-bottom: 1px solid #eee8f1; }
.drawer-copy { overflow: auto; padding: .9rem 1rem; display: grid; gap: .7rem; }
.drawer-copy h2 { color: #5b4b7c; } .drawer-copy h3 { margin-top: .15rem; }
.drawer-copy > p:not(.eyebrow) { color: #67718a; line-height: 1.6; }
.drawer-cards { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); }
.drawer-cards .card { min-height: 9rem; }
.drawer-actions { display: flex; gap: .6rem; padding: .75rem 1rem calc(.8rem + env(safe-area-inset-bottom)); border-top: 1px solid #eee8f1; background: rgba(255,255,255,.97); }
.drawer-actions button { flex: 1; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.choice-grid button.active { color: #fff; border-color: #9a83b7; background: #8a779f; }
.prediction-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.prediction-choice button.active { color: #fff; border-color: #6c88cb; background: #5278d4; }
.selection-note { padding: .55rem .7rem; border-radius: 10px; color: #5e6c86; background: #f1f6ff; }
.empty-prediction { display: grid; place-items: center; min-height: 7rem; border: 1px dashed #c9bfd3; border-radius: 13px; color: #80758d; background: #faf7fc; }
.prediction-list { display: grid; gap: .55rem; }
.prediction-row { display: grid; grid-template-columns: 8rem 1fr; align-items: center; gap: .65rem; padding: .4rem; border: 1px solid #eee8f1; border-radius: 15px; background: #faf7fc; }
.prediction-card { display: grid; gap: .25rem; }
.prediction-index { color: #715d7d; font-size: .75rem; font-weight: 800; text-align: center; }
.prediction-row .card { min-height: 8rem; }
.prediction-move { display: flex; gap: .45rem; flex-wrap: wrap; }
.prediction-move button { flex: 1; }
.discarded-preview { padding: .55rem .7rem; border-radius: 10px; color: #715d7d; background: #f3edf7; }
.color-modal-backdrop { position: fixed; z-index: 50; inset: 0; background: rgba(31, 39, 66, .6); backdrop-filter: blur(4px); }
.color-modal { position: fixed; z-index: 51; left: 50%; top: 50%; width: min(34rem, calc(100% - 1.4rem)); transform: translate(-50%, -50%); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #c7d5ef; border-radius: 24px; background: #fffdfd; box-shadow: 0 24px 70px rgba(35, 47, 82, .35); }
.color-modal-copy { display: grid; gap: .75rem; padding: 1.2rem; text-align: center; }
.color-modal-copy h2 { color: #4366a5; }
.color-modal-copy > p:not(.eyebrow) { color: #62718c; line-height: 1.55; }
.color-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.color-choice { display: grid; justify-items: center; gap: .35rem; min-height: 72px; border-width: 2px; color: #53637d; background: #fff; }
.color-choice.color-pink { border-color: #c86d94; } .color-choice.color-blue { border-color: #6b95d7; } .color-choice.color-green { border-color: #72ac8c; } .color-choice.color-purple { border-color: #9576bd; }
.color-choice.active { color: #fff; background: #6379a8; border-color: #6379a8; }
.color-choice-dot { width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #999; }
.color-choice-dot.color-pink { background: var(--pink); } .color-choice-dot.color-blue { background: var(--blue); } .color-choice-dot.color-green { background: var(--sage); } .color-choice-dot.color-purple { background: var(--purple); }
.color-choice.color-pink .color-choice-dot { background: var(--pink); } .color-choice.color-blue .color-choice-dot { background: var(--blue); } .color-choice.color-green .color-choice-dot { background: var(--sage); } .color-choice.color-purple .color-choice-dot { background: var(--purple); }
.reward-modal-backdrop { position: fixed; z-index: 60; inset: 0; background: rgba(24, 29, 55, .72); backdrop-filter: blur(5px); }
.reward-modal { position: fixed; z-index: 61; left: 50%; top: 50%; width: min(31rem, calc(100% - 1.4rem)); max-height: min(90svh, 42rem); transform: translate(-50%, -50%); display: flex; flex-direction: column; overflow: hidden; border: 2px solid color-mix(in srgb, var(--reward-color) 60%, #fff); border-radius: 26px; background: #fffdfd; box-shadow: 0 24px 80px rgba(14, 20, 52, .46), 0 0 42px color-mix(in srgb, var(--reward-color) 35%, transparent); }
.reward-modal.color-pink { --reward-color: var(--pink); } .reward-modal.color-blue { --reward-color: var(--blue); } .reward-modal.color-green { --reward-color: var(--sage); } .reward-modal.color-purple { --reward-color: var(--purple); }
.reward-modal-copy { overflow: auto; display: grid; justify-items: center; gap: .7rem; padding: 1.25rem 1.2rem .8rem; text-align: center; }
.reward-modal-copy h2 { color: color-mix(in srgb, var(--reward-color) 74%, #36466e); }
.reward-modal-copy > p:not(.eyebrow) { color: #5d6b86; line-height: 1.6; }
.treasure-art { position: relative; width: min(15rem, 65vw); padding: .6rem; border: 2px solid color-mix(in srgb, var(--reward-color) 58%, #fff); border-radius: 22px; background: radial-gradient(circle, color-mix(in srgb, var(--reward-color) 20%, #fff), #fff); box-shadow: 0 0 28px color-mix(in srgb, var(--reward-color) 40%, transparent); }
.treasure-art img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; }
.treasure-art > span { position: absolute; top: .25rem; right: .6rem; color: var(--reward-color); font-size: 1.8rem; text-shadow: 0 0 14px currentColor; }
.reward-modal .drawer-actions { padding-top: .8rem; }
.reward-modal .drawer-actions button { min-height: 44px; }
.error { color: var(--danger); white-space: pre-wrap; }
.hint, .muted { color: var(--muted); font-size: .82rem; }
.rules { display: grid; gap: .6rem; line-height: 1.65; }
.rules summary { cursor: pointer; color: #5a719c; font-weight: 700; }
.loading-shell { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 100svh; overflow: hidden; padding: max(1.2rem, env(safe-area-inset-top)) max(1.2rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.2rem, env(safe-area-inset-left)); color: #f7e8c5; background: radial-gradient(circle at 50% 42%, #263e70 0, #14264c 42%, #09142f 100%); }
.loading-shell::before, .loading-shell::after { content: ""; position: absolute; z-index: -1; border: 1px solid rgba(226, 192, 124, .22); border-radius: 50%; transform: rotate(-17deg); }
.loading-shell::before { width: min(88vw, 48rem); height: min(88vw, 48rem); box-shadow: 0 0 0 2rem rgba(218, 183, 111, .035), 0 0 0 8rem rgba(218, 183, 111, .025); }
.loading-shell::after { width: min(135vw, 74rem); height: min(42vw, 23rem); border-color: rgba(123, 172, 222, .18); transform: rotate(-22deg); }
.loading-stars { position: absolute; inset: 0; z-index: -1; opacity: .75; background-image: radial-gradient(circle, #fff0bd 0 1px, transparent 1.5px), radial-gradient(circle, #8fc1e9 0 1px, transparent 1.5px); background-position: 12% 22%, 76% 15%; background-size: 9.5rem 8rem, 13rem 11rem; }
.loading-orbit { position: absolute; z-index: -1; width: min(70vw, 32rem); height: 8rem; border-top: 1px solid rgba(236, 207, 151, .45); border-radius: 50%; filter: blur(.1px); transform: rotate(-19deg); }
.loading-orbit-one { top: 24%; left: -10%; box-shadow: 0 0 18px rgba(234, 201, 135, .28); }
.loading-orbit-two { right: -16%; bottom: 19%; border-color: rgba(117, 178, 226, .35); transform: rotate(18deg); }
.loading-train { position: absolute; z-index: 0; bottom: 19%; left: -13rem; display: flex; align-items: end; gap: .22rem; width: 13rem; height: 3.6rem; color: #d8bd7f; filter: drop-shadow(0 0 10px rgba(235, 205, 141, .22)); animation: loading-train 8s linear infinite; }
.train-engine, .train-car { position: relative; display: block; height: 2.1rem; border: 2px solid currentColor; border-radius: .55rem .55rem .25rem .25rem; background: linear-gradient(180deg, rgba(242, 221, 170, .95), rgba(149, 118, 63, .82)); }
.train-engine { width: 3.5rem; height: 2.7rem; border-radius: 1.2rem .4rem .25rem .25rem; }
.train-engine::before { content: ""; position: absolute; right: .28rem; top: .38rem; width: 1.45rem; height: .7rem; border: 1px solid #192d57; border-radius: .16rem; background: #89bee4; }
.train-engine::after, .train-car::after { content: ""; position: absolute; bottom: -.48rem; left: .35rem; width: .62rem; height: .62rem; border: 2px solid currentColor; border-radius: 50%; background: #172b53; box-shadow: 1.55rem 0 0 -2px #172b53, 1.55rem 0 0 0 currentColor; }
.train-car { width: 2.5rem; }
.train-car-one { opacity: .9; } .train-car-two { opacity: .72; } .train-car-three { opacity: .52; }
@keyframes loading-train { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 26rem)); } }
.loading-card { position: relative; z-index: 1; width: min(25rem, 100%); display: grid; gap: .85rem; padding: clamp(1.5rem, 5vw, 2.4rem); border: 1px solid rgba(238, 216, 163, .34); border-radius: 24px; background: rgba(8, 20, 48, .68); box-shadow: 0 20px 70px rgba(2, 8, 25, .38), inset 0 0 40px rgba(238, 207, 139, .04); text-align: center; backdrop-filter: blur(8px); }
.loading-eyebrow { color: #d6b875; font-size: .68rem; font-weight: 800; letter-spacing: .16em; }
.loading-card h1 { color: #fff1cc; font-size: clamp(1.65rem, 7vw, 2.35rem); letter-spacing: .12em; }
.loading-copy, .loading-status { color: #b5c9e6; line-height: 1.6; }
.loading-status { font-variant-numeric: tabular-nums; }
.loading-progress { height: .65rem; overflow: hidden; border: 1px solid rgba(226, 193, 124, .54); border-radius: 99px; background: rgba(7, 16, 39, .74); }
.loading-progress span { display: block; width: 100%; height: 100%; transform-origin: left center; border-radius: inherit; background: linear-gradient(90deg, #c89951, #f2dfad); box-shadow: 0 0 14px rgba(239, 210, 147, .48); transition: transform .25s ease; }
.loading-error { color: #f3b2a9; line-height: 1.55; }
.loading-retry { color: #172b53; border-color: #ecd39b; background: linear-gradient(135deg, #f4e3b8, #cfa45d); }
.loading-retry:disabled { color: #bdc9db; border-color: rgba(190, 201, 219, .3); background: rgba(190, 201, 219, .1); }
.shell.start-shell {
  width: 100%; min-height: 100svh; min-height: 100dvh; overflow: auto;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(86px, 6vw, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: flex-start;
  background-color: #0b1426;
  background-image: linear-gradient(rgba(11, 20, 38, .10), rgba(11, 20, 38, .10)), linear-gradient(90deg, rgba(11, 20, 38, .78) 0%, rgba(11, 20, 38, .72) 22%, rgba(11, 20, 38, .60) 38%, rgba(11, 20, 38, .34) 58%, rgba(11, 20, 38, 0) 75%), var(--menu-background-image);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.start-card { width: clamp(360px, 27.78vw, 400px); display: grid; gap: 0; padding: 32px; border: 1px solid rgba(239, 214, 157, .30); border-radius: 16px; background: rgba(10, 20, 45, .35); box-shadow: 0 18px 48px rgba(2, 9, 25, .32), inset 0 0 22px rgba(255, 226, 164, .035); backdrop-filter: blur(6px); text-align: left; }
.start-card h1 { margin: 0 0 28px; font-size: 48px; line-height: 1.1; letter-spacing: .02em; color: #fff6e3; text-shadow: 0 2px 16px rgba(0, 0, 0, .35); }
.start-card .lead { max-width: 34rem; color: #53647f; font-size: 1.05rem; line-height: 1.65; }
.start-orbit { position: absolute; top: -2.5rem; right: 2rem; width: 9rem; height: 9rem; border: 1px dashed #a7c4e7; border-radius: 50%; opacity: .8; }
.start-orbit span { position: absolute; width: 1rem; height: 1rem; border-radius: 50%; background: var(--pink); } .start-orbit span:nth-child(1) { top: 1.2rem; left: 1.4rem; } .start-orbit span:nth-child(2) { right: .5rem; top: 3.7rem; background: var(--blue); } .start-orbit span:nth-child(3) { bottom: .5rem; left: 3.9rem; background: var(--sage); }
.start-menu { display: grid; gap: 12px; }
.start-menu button { width: 100%; min-height: 52px; border-radius: 10px; color: #fff6e3; border-color: rgba(236, 216, 171, .72); background: rgba(20, 39, 76, .58); font-weight: 600; letter-spacing: .08em; }
.start-menu button.primary { color: #302b35; border-color: #f0d99f; background: linear-gradient(135deg, #f5e6c6, #ddbf83); }
.start-menu button:disabled { color: #bec5d6; border-color: rgba(190, 197, 214, .24); background: rgba(190, 197, 214, .08); opacity: 1; }
.start-menu button:hover:not(:disabled), .difficulty-card:hover:not(:disabled) { transform: none; box-shadow: 0 0 18px rgba(238, 207, 146, .24); filter: brightness(1.08); }
.start-menu button:focus-visible { outline-color: #fff2d6; }
.difficulty-grid { display: grid; gap: 12px; }
.difficulty-card { width: 100%; min-height: 52px; color: #fff6e3; border-color: rgba(236, 216, 171, .72); border-radius: 10px; background: rgba(20, 39, 76, .58); font-weight: 600; letter-spacing: .08em; }
.difficulty-card:focus-visible { outline-color: #fff2d6; }
.start-return-row { min-height: 38px; margin-top: 12px; display: grid; align-items: center; justify-items: start; }
.start-return-row .text-button { min-height: 38px; padding: .4rem 0; color: #f0d99f; }
.start-return-row .text-button:hover:not(:disabled) { transform: none; color: #fff2cf; background: transparent; box-shadow: none; }
@supports not ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) { .start-card { background: rgba(10, 20, 45, .82); } }
.save-state { color: #c7cce0; font-size: .82rem; line-height: 1.5; }
.save-state { padding: .7rem; border: 1px solid rgba(236, 216, 171, .2); border-radius: 12px; background: rgba(255, 246, 225, .06); }
.start-resume { color: #f5e6c6; }
.game-type { color: #b9c8e5; font-size: .75rem; }

/* Dedicated end-state pages */
.result-shell, .readonly-shell { position: relative; isolation: isolate; width: 100%; min-height: 100svh; overflow: auto; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.result-shell { color: #f7f2ff; background-color: #151b3d; background-image: linear-gradient(180deg, rgba(21, 24, 65, .18), rgba(18, 16, 54, .78)), var(--result-background-image); background-position: center; background-size: cover; }
.result-shell::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(145deg, rgba(15, 25, 72, .75), rgba(73, 39, 107, .52) 48%, rgba(14, 22, 57, .85)); pointer-events: none; }
.result-page { position: relative; z-index: 1; width: min(960px, 100%); min-height: calc(100svh - 2.25rem); margin: 0 auto; display: grid; align-content: start; justify-items: center; gap: .9rem; padding: .2rem 0 1rem; text-align: center; }
.result-meta { color: rgba(232, 224, 255, .78); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.result-status { display: inline-flex; align-items: center; min-height: 2rem; padding: .3rem .8rem; border: 1px solid rgba(255, 222, 157, .66); border-radius: 99px; color: #ffe6ae; background: rgba(255, 224, 148, .12); box-shadow: 0 0 22px rgba(255, 208, 114, .18); font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
.result-success .result-status { animation: result-fade-in .5s ease both; }
.result-celebration { width: min(38rem, 100%); display: grid; justify-items: center; gap: .55rem; }
.result-gates { position: relative; width: min(31rem, 100%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; padding: .25rem .25rem 0; }
.result-gate { position: relative; min-height: 7.1rem; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; padding: .35rem .2rem .45rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.035)); box-shadow: inset 0 -18px 28px rgba(20, 18, 61, .2); color: rgba(255,255,255,.86); font-size: .66rem; font-weight: 800; }
.result-gate img { position: relative; z-index: 1; width: 76%; max-height: 5.4rem; object-fit: contain; filter: saturate(.82) brightness(.86) drop-shadow(0 4px 8px rgba(13, 11, 42, .5)); }
.result-gate-light, .result-door-glow { position: absolute; inset: 12% 15% 25%; border-radius: 50%; background: var(--gate-glow); filter: blur(13px); opacity: .2; }
.result-gate-beam { position: absolute; z-index: 0; left: 50%; bottom: -4.2rem; width: 1px; height: 5.8rem; transform: rotate(var(--beam-angle, 0deg)); transform-origin: top; background: linear-gradient(180deg, var(--gate-glow), rgba(255, 230, 170, .05) 75%, transparent); opacity: .45; filter: blur(1px); }
.result-gate.color-pink, .result-door-slot.color-pink { --gate-glow: #f19ec4; } .result-gate.color-blue, .result-door-slot.color-blue { --gate-glow: #83cfff; } .result-gate.color-green, .result-door-slot.color-green { --gate-glow: #a6e3a7; } .result-gate.color-purple, .result-door-slot.color-purple { --gate-glow: #c8a3ff; }
.result-gate:nth-child(1) { --beam-angle: -17deg; } .result-gate:nth-child(2) { --beam-angle: -6deg; } .result-gate:nth-child(3) { --beam-angle: 6deg; } .result-gate:nth-child(4) { --beam-angle: 17deg; }
.result-treasure { position: relative; width: min(13rem, 48vw); padding: .45rem; border: 1px solid rgba(255, 222, 147, .78); border-radius: 24px; background: radial-gradient(circle, rgba(255, 231, 166, .23), rgba(255, 255, 255, .035) 66%); box-shadow: 0 0 20px rgba(255, 210, 115, .36), 0 0 65px rgba(185, 135, 255, .18); }
.result-treasure img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 9px 11px rgba(8, 9, 31, .52)); }
.treasure-rays { position: absolute; inset: -1.4rem; border-radius: 50%; background: conic-gradient(from 12deg, transparent, rgba(255, 237, 178, .32), transparent 14%, transparent 26%, rgba(255, 237, 178, .24), transparent 40%, transparent 63%, rgba(255, 237, 178, .22), transparent 78%); filter: blur(4px); opacity: .75; }
.treasure-spark { position: absolute; z-index: 2; top: -.9rem; right: -.55rem; color: #fff0b7; font-size: 2rem; text-shadow: 0 0 16px #ffe29c; }
.result-memory { color: #f8e7b7; font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
.result-rewards { width: min(36rem, 100%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.result-reward-card { position: relative; min-height: 4.5rem; display: grid; align-content: center; justify-items: center; gap: .25rem; padding: .5rem .3rem; border: 1px solid color-mix(in srgb, var(--gate-glow) 55%, rgba(255,255,255,.42)); border-radius: 14px; color: #fff9ec; background: rgba(18, 20, 57, .46); box-shadow: inset 0 0 18px color-mix(in srgb, var(--gate-glow) 12%, transparent); }
.result-reward-card.color-pink { --gate-glow: #f19ec4; } .result-reward-card.color-blue { --gate-glow: #83cfff; } .result-reward-card.color-green { --gate-glow: #a6e3a7; } .result-reward-card.color-purple { --gate-glow: #c8a3ff; }
.result-reward-color { width: .55rem; height: .55rem; border-radius: 50%; background: var(--gate-glow); box-shadow: 0 0 11px var(--gate-glow); }
.result-reward-card strong { font-size: .7rem; }
.result-reward-status { color: #ffe8aa; font-size: .62rem; font-weight: 800; }
.result-reward-status.status-locked { color: rgba(244, 238, 255, .62); }
.result-reward-status.status-pending { color: #ffc58a; }
.result-door-galleries { width: min(38rem, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.result-player-doors { display: grid; gap: .4rem; justify-items: start; }
.result-player-doors > span { color: rgba(245, 239, 255, .85); font-size: .75rem; font-weight: 800; }
.result-door-row { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
.result-door-slot { position: relative; min-width: 0; min-height: 4rem; display: grid; justify-items: center; align-items: end; padding: .15rem .1rem .25rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; color: rgba(255,255,255,.7); background: rgba(7, 10, 35, .32); font-size: .56rem; }
.result-door-slot.is-lit { border-color: color-mix(in srgb, var(--gate-glow) 75%, #fff); color: #fff; box-shadow: 0 0 12px color-mix(in srgb, var(--gate-glow) 33%, transparent); }
.result-door-art { position: relative; z-index: 1; display: grid; place-items: center; min-height: 2.7rem; width: 100%; }
.result-door-art img { display: block; width: 68%; height: 2.7rem; object-fit: contain; filter: grayscale(1) opacity(.48); }
.result-door-slot.is-lit .result-door-art img { filter: saturate(.86) brightness(1.08) drop-shadow(0 2px 4px color-mix(in srgb, var(--gate-glow) 55%, transparent)); }
.result-pam { display: flex; align-items: center; justify-content: center; gap: .7rem; width: min(34rem, 100%); color: #fff4e3; }
.result-pam img { width: 3.2rem; height: 3.2rem; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(8, 9, 31, .45)); }
.result-pam p, .result-quote { color: #fff4e3; font-size: .86rem; line-height: 1.55; text-shadow: 0 2px 9px rgba(8, 9, 31, .4); }
.result-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .55rem; width: min(34rem, 100%); margin-top: .15rem; }
.result-actions button { min-width: 8.5rem; }
.result-actions .text-button { color: #e5d8ff; }
.result-confetti { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.confetti { position: absolute; top: -1rem; left: var(--confetti-left); width: .42rem; height: .85rem; background: var(--confetti-color); opacity: 0; transform: rotate(var(--confetti-rotate)); }
.confetti-0 { --confetti-left: 6%; --confetti-color: #f3a9c9; --confetti-rotate: 18deg; } .confetti-1 { --confetti-left: 14%; --confetti-color: #8ad3ff; --confetti-rotate: -28deg; } .confetti-2 { --confetti-left: 27%; --confetti-color: #b3e4aa; --confetti-rotate: 42deg; } .confetti-3 { --confetti-left: 72%; --confetti-color: #ceb0ff; --confetti-rotate: -18deg; } .confetti-4 { --confetti-left: 84%; --confetti-color: #ffd77c; --confetti-rotate: 31deg; } .confetti-5 { --confetti-left: 94%; --confetti-color: #efadca; --confetti-rotate: -42deg; }
.celebration-playback.result-shell, .celebration-playback .result-page { animation: result-fade-in .5s ease both; }
.celebration-playback .result-gate { opacity: 0; transform: translateY(.35rem); animation: gate-light .4s ease forwards; }
.celebration-playback .result-gate:nth-child(1) { animation-delay: .25s; } .celebration-playback .result-gate:nth-child(2) { animation-delay: .4s; } .celebration-playback .result-gate:nth-child(3) { animation-delay: .55s; } .celebration-playback .result-gate:nth-child(4) { animation-delay: .7s; }
.celebration-playback .result-treasure { opacity: 0; transform: translateY(.8rem) scale(.9); animation: treasure-reveal .4s ease .85s forwards; }
.celebration-playback .result-reward-card, .celebration-playback .result-memory { opacity: 0; transform: translateY(.35rem); animation: result-fade-in .35s ease 1.25s forwards; }
.celebration-playback .result-reward-card:nth-child(2) { animation-delay: 1.4s; } .celebration-playback .result-reward-card:nth-child(3) { animation-delay: 1.55s; } .celebration-playback .result-reward-card:nth-child(4) { animation-delay: 1.7s; }
.celebration-playback .result-pam { opacity: 0; animation: result-fade-in .35s ease 1.85s forwards; }
.celebration-playback .confetti { animation: confetti-fall 1.2s ease 1.25s forwards; }
.celebration-complete .result-gate, .celebration-complete .result-treasure, .celebration-complete .result-reward-card, .celebration-complete .result-memory, .celebration-complete .result-pam { opacity: 1; transform: none; }
@keyframes result-fade-in { from { opacity: 0; transform: translateY(.35rem); } to { opacity: 1; transform: none; } }
@keyframes gate-light { from { opacity: 0; transform: translateY(.35rem) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes treasure-reveal { from { opacity: 0; transform: translateY(.8rem) scale(.9); } 70% { transform: translateY(-.2rem) scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes confetti-fall { from { opacity: .9; transform: translateY(-1rem) rotate(var(--confetti-rotate)); } to { opacity: 0; transform: translateY(54vh) rotate(calc(var(--confetti-rotate) + 120deg)); } }
.result-failure { background-image: linear-gradient(180deg, rgba(39, 40, 91, .3), rgba(31, 25, 70, .78)), var(--result-background-image); }
.result-failure::before { background: linear-gradient(145deg, rgba(36, 53, 103, .7), rgba(102, 76, 137, .46) 50%, rgba(32, 26, 67, .8)); }
.result-failure .result-page { align-content: center; gap: 1rem; animation: result-fade-in .5s ease both; }
.failure-visual { position: relative; width: min(22rem, 74vw); height: min(17rem, 38vh); display: grid; place-items: end center; }
.failure-visual img { position: relative; z-index: 1; width: min(12rem, 58vw); height: 100%; object-fit: contain; filter: drop-shadow(0 10px 15px rgba(15, 16, 47, .55)); }
.failure-aura { position: absolute; bottom: 4%; width: 78%; height: 2.8rem; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 236, 199, .36), rgba(199, 174, 255, .12) 50%, transparent 74%); filter: blur(5px); }
.failure-stars { position: absolute; inset: 0; opacity: .7; background-image: radial-gradient(circle, rgba(255, 242, 203, .85) 0 1px, transparent 1.8px), radial-gradient(circle, rgba(182, 204, 255, .72) 0 1px, transparent 1.8px); background-position: 19% 26%, 77% 33%; background-size: 5rem 4.4rem, 7rem 5.8rem; animation: star-drift 5s ease-in-out infinite alternate; }
.result-title { color: #fff5e5; font-size: clamp(1.65rem, 5vw, 2.45rem); letter-spacing: .08em; text-shadow: 0 2px 16px rgba(13, 14, 42, .48); }
.result-failure .result-quote { max-width: 32rem; }
@keyframes star-drift { from { transform: translateY(.15rem); opacity: .52; } to { transform: translateY(-.35rem); opacity: .9; } }

.readonly-shell { color: var(--ink); background: radial-gradient(circle at 80% -5%, #fff 0 18rem, transparent 42rem), linear-gradient(155deg, #fffaf0 0%, #edf7ff 100%); }
.readonly-top { width: min(960px, 100%); margin: 0 auto .9rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.readonly-top > div { display: grid; gap: .25rem; }
.readonly-top .result-meta { color: #7394ca; }
.readonly-top strong { color: #38568d; font-size: 1.25rem; }
.readonly-board { width: min(960px, 100%); margin: 0 auto; display: grid; gap: .9rem; padding-bottom: 1rem; }
.readonly-result { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .75rem .9rem; border: 1px solid #d8e0ee; border-radius: 16px; background: rgba(255,255,255,.75); color: var(--muted); font-size: .8rem; }
.readonly-result .result-status { color: #5572a8; background: var(--accent-soft); border-color: #bfd0ef; box-shadow: none; font-size: .7rem; }
.readonly-board .main-grid { gap: .9rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; } .card:hover:not(:disabled), .card.selected, button:hover:not(:disabled) { transform: none; } .loading-train { animation: none; left: 50%; transform: translateX(-50%); } .result-confetti { display: none; } .result-shell .result-gate, .result-shell .result-treasure, .result-shell .result-reward-card, .result-shell .result-memory, .result-shell .result-pam, .result-shell .result-page { opacity: 1 !important; transform: none !important; animation: none !important; } .result-shell .treasure-rays, .result-shell .failure-stars { animation: none !important; } .result-shell .result-treasure { box-shadow: none; } }
@media (max-width: 980px) { .teammate { grid-template-columns: 1fr; } .teammate .mini-hand { max-width: 24rem; } .aux-grid { grid-template-columns: 1fr 1fr; } .aux-grid > section:last-child { grid-column: 1 / -1; } }
@media (max-width: 620px) {
  html, body { min-width: 0; }
  :root { --actionbar-space: 8rem; }
  .shell { padding: .65rem .65rem calc(var(--actionbar-space) + 1.4rem); }
  .topbar { align-items: flex-start; } .status-cluster { width: 100%; justify-content: space-between; } .turn-status { text-align: left; }
  .door-status { gap: .4rem; padding: .6rem .65rem; } .door-status-players { gap: .45rem; } .door-status-player { gap: .25rem; } .door-status-player > span { font-size: .68rem; } .door-progress { gap: .18rem; } .door-progress.compact .door-progress-item b { font-size: .5rem; } .door-progress.compact .door-progress-item em { top: .06rem; right: .06rem; font-size: .46rem; }
  .panel { padding: .8rem; border-radius: 17px; }
  .path-strip, .path-display { min-height: 0; gap: .35rem; } .path-card { min-height: 0; } .path-card .character-art { height: auto; }
  .card { min-height: 0; border-radius: 12px; } .character-art { height: auto; } .card-name { font-size: .76rem; } .card-source { font-size: .57rem; }
  .hand-row, .shared-row { gap: .38rem; } .mini-card { min-height: 0; } .mini-card .character-art { height: auto; }
  .draft-candidates { grid-template-columns: repeat(2, minmax(0, 1fr)); } .draft-players { gap: .55rem; }
  .aux-grid { grid-template-columns: 1fr; } .aux-grid > section:last-child { grid-column: auto; }
  .action-bar { width: calc(100% - .7rem); align-items: stretch; } .selected-summary { flex: 1 1 12rem; } .action-buttons { width: 100%; } .action-buttons button { flex: 1; }
  .pending-event { right: .65rem; bottom: calc(var(--actionbar-space) + .45rem); }
  .event-drawer { max-height: 85svh; } .drawer-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; } .drawer-cards .card { min-height: 0; } .drawer-cards .character-art { height: auto; }
  .prediction-row { grid-template-columns: 7rem 1fr; } .prediction-row .card { min-height: 0; }
  .color-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reward-modal { max-height: 88svh; }
  .result-shell, .readonly-shell { padding: max(.7rem, env(safe-area-inset-top)) max(.7rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(.7rem, env(safe-area-inset-left)); }
  .result-page { min-height: calc(100svh - 1.7rem); gap: .7rem; }
  .result-meta { font-size: .62rem; }
  .result-gates { gap: .3rem; }
  .result-gate { min-height: 5.6rem; border-radius: 12px; font-size: .58rem; }
  .result-gate img { max-height: 4rem; }
  .result-treasure { width: min(11rem, 48vw); }
  .result-rewards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .result-reward-card { min-height: 4rem; }
  .result-door-galleries { grid-template-columns: 1fr; gap: .55rem; }
  .result-pam { gap: .45rem; }
  .result-pam img { width: 2.7rem; height: 2.7rem; }
  .result-actions { width: 100%; }
  .result-actions button { width: 100%; }
  .failure-visual { height: min(14rem, 34vh); }
  .result-title { font-size: clamp(1.4rem, 7vw, 2rem); }
  .readonly-top { align-items: flex-start; }
  .readonly-top > button { flex-shrink: 0; }
}
@media (max-width: 360px) { .drawer-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.status-marker { padding: .25rem .55rem; border-radius: 99px; color: #5572a8; background: var(--accent-soft); font-size: .72rem; font-weight: 800; }
.shared-hand { display: grid; gap: .45rem; margin-top: .85rem; padding-top: .75rem; border-top: 1px solid #edf0f5; }
.shared-hand .hand-heading { justify-content: space-between; }
.draw-modal-backdrop { position: fixed; z-index: 40; inset: 0; background: rgba(36, 45, 70, .58); backdrop-filter: blur(3px); }
.draw-modal { position: fixed; z-index: 41; left: 50%; top: 50%; width: min(32rem, calc(100% - 1.4rem)); max-height: min(90svh, 48rem); transform: translate(-50%, -50%); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #c7d5ef; border-radius: 24px; background: #fffdfd; box-shadow: 0 24px 70px rgba(35, 47, 82, .35); }
.draw-modal-copy { overflow: auto; display: grid; justify-items: center; gap: .7rem; padding: 1.1rem 1.2rem; text-align: center; }
.draw-modal-copy h2 { color: #4366a5; font-size: 1.6rem; }
.draw-operator, .draw-detail { color: #5c6d8e; line-height: 1.55; }
.draw-detail { min-height: 1.55rem; font-weight: 700; }
.draw-card-wrap { width: min(15rem, 72vw); }
.draw-card { aspect-ratio: 2 / 3; cursor: default; transform: none !important; box-shadow: 8px 10px 0 color-mix(in srgb, var(--card-color) 30%, #fff), 0 20px 30px rgba(67, 77, 112, .25); }
.draw-card .card-name { font-size: 1.2rem; }
.draw-card .card-source { display: none; }
.draw-modal-actions { display: flex; padding: .85rem 1.1rem calc(.9rem + env(safe-area-inset-bottom)); border-top: 1px solid #e7edf6; background: rgba(255,255,255,.98); }
.draw-modal-actions button { width: 100%; }
.draw-pile-stats-backdrop { position: fixed; z-index: 35; inset: 0; background: rgba(36, 45, 70, .58); backdrop-filter: blur(3px); }
.draw-pile-stats-modal { position: fixed; z-index: 36; left: 50%; top: 50%; width: min(58rem, calc(100% - 1.4rem)); max-height: min(90svh, 54rem); transform: translate(-50%, -50%); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #c7d5ef; border-radius: 24px; background: #fffdfd; box-shadow: 0 24px 70px rgba(35, 47, 82, .35); }
.draw-pile-stats-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.2rem .85rem; border-bottom: 1px solid #e7edf6; }
.draw-pile-stats-head h2 { color: #4366a5; font-size: 1.6rem; }
.draw-pile-total { margin-top: .35rem; color: #5c6d8e; }
.draw-pile-total strong { color: var(--ink); font-size: 1.2rem; }
.draw-pile-stats-copy { overflow: auto; display: grid; gap: 1rem; padding: 1rem 1.2rem 1.2rem; }
.draw-pile-stat-group { display: grid; gap: .55rem; }
.draw-pile-stat-group h3 { padding-bottom: .3rem; border-bottom: 1px solid #edf0f5; }
.draw-pile-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .75rem; }
.draw-pile-stat { min-width: 0; }
.draw-pile-stat-card { position: relative; padding: .25rem .25rem .35rem; }
.stats-card { min-height: 10rem; cursor: default; }
.stats-card:hover:not(:disabled) { transform: none; }
.stats-card .card-name { font-size: .76rem; }
.draw-pile-stat-count { position: absolute; right: -.2rem; bottom: -.15rem; z-index: 2; padding: .12rem .35rem; border: 1px solid #c7d5ef; border-radius: 99px; color: #3e5f9d; background: #fff; box-shadow: 0 3px 8px rgba(72, 91, 126, .16); font-size: .75rem; font-weight: 800; }
.draw-pile-empty { display: grid; place-items: center; min-height: 12rem; color: var(--muted); font-size: 1rem; }
@media (min-width: 981px) { .main-grid { grid-template-columns: minmax(0, 1.28fr) minmax(16rem, .72fr); } .main-column { grid-column: 1; } .team-column { grid-column: 2; } .aux-column { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 1fr; } .current-player .card { min-height: 12rem; } .teammate .card { min-height: 8rem; } }

@media (max-width: 1279px) {
  html, body { min-width: 1180px; }
  .shell { padding-left: 16px; padding-right: 16px; }
}

/* Repaired table layout: each table zone owns its height and card geometry. */
:root { --actionbar-space: 0rem; }
.app-shell { min-width: 0; }
.main-grid { grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr); min-height: 480px; align-items: stretch; }
.player-column, .shared-column { min-width: 0; min-height: 0; }
.player-zone { height: 480px; min-height: 480px; grid-template-rows: auto 44px auto 129px 28px auto 156px; align-content: start; row-gap: 8px; overflow: visible; }
.player-zone .section-head { min-height: 42px; }
.player-zone .door-progress { height: 44px; min-height: 36px; margin: 0 2px; }
.door-progress { gap: 5px; }
.door-progress-item { height: 44px; min-height: 36px; aspect-ratio: auto; grid-template-rows: 1fr auto; padding: 2px 3px; }
.door-progress-item b { font-size: .6rem; }
.path-heading, .hand-heading { min-width: 0; margin: 0; }
.hand-heading { padding-top: 4px; }
.path-heading h3, .hand-heading h3 { min-width: 0; }
.path-display { grid-template-columns: repeat(3, 86px); grid-auto-rows: 129px; justify-content: start; align-content: start; width: 100%; height: 129px; min-height: 129px; max-height: 129px; gap: 8px; padding: 5px 4px 0; overflow: visible; }
.path-display .card, .path-card { width: 86px; height: 129px; min-height: 129px; }
.path-display > .hint { grid-column: 1 / -1; align-self: center; }
.path-view-button { min-height: 28px; height: 28px; padding: .2rem .45rem; justify-self: start; }
.path-view-placeholder { display: block; min-height: 28px; }
.hand-row { grid-template-columns: repeat(3, 104px); grid-auto-rows: 156px; align-items: start; gap: 8px; height: 156px; min-height: 156px; padding: 6px 4px 0; overflow: visible; }
.hand-row .card, .hand-row .empty-slot { width: 104px; height: 156px; min-height: 156px; }
.empty-slot { display: grid; place-items: center; border: 1px dashed #cbd5e5; border-radius: 12px; color: #98a4b9; background: rgba(246,249,253,.82); font-size: .72rem; text-align: center; }
.shared-column { min-height: 480px; }
.shared-stack { height: 480px; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) 64px; gap: 10px; }
.shared-zone { height: auto; min-height: 0; padding: 12px; grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; }
.shared-row { width: 100%; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: center; gap: 10px; }
.shared-row .card, .shared-row .shared-empty-slot { width: 100%; min-height: 194px; }
.shared-empty-slot { display: grid; place-items: center; border: 1px dashed #cbd5e5; border-radius: 12px; color: #98a4b9; background: rgba(246,249,253,.82); font-size: .72rem; text-align: center; }
.shared-hint { display: none; }
.stash-zone { min-height: 64px; height: 64px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; }
.stash-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.stash-zone button { min-height: 36px; padding: .35rem .7rem; }
.door-target-area { min-width: 0; }
.door-target-area h3 { margin-bottom: 4px; }
.door-target-row { display: flex; gap: 8px; }
.door-target-row .card { width: 70px; min-height: 105px; }

.lower-grid { grid-template-columns: 220px minmax(0, 1fr) 260px; min-height: 204px; align-items: stretch; }
.lower-grid > * { min-height: 204px; }
.pile-zone { height: 204px; min-height: 204px; display: grid; grid-template-rows: auto 96px 36px; align-content: center; gap: 8px; padding: 12px; overflow: visible; }
.pile-zone .section-head { justify-content: space-between; min-width: 0; }
.pile-zone .section-head h2 { overflow-wrap: anywhere; }
.deck-stack { width: 64px; height: 96px; margin: 0 auto; }
.deck-card-back { border-radius: 9px; }
.deck-stack b { inset: auto 0 8px; }
.deck-zone > button, .discard-zone > button { width: 100%; min-height: 36px; padding: .35rem .55rem; }
.discard-top { width: 64px; height: 96px; margin: 0 auto; }
.discard-top .card, .discard-empty { width: 64px; height: 96px; min-height: 96px; }
.discard-empty { display: grid; place-items: center; border: 1px dashed #cbd5e5; border-radius: 12px; color: #98a4b9; background: rgba(246,249,253,.82); font-size: .7rem; text-align: center; }
.discard-zone .hint, .stash-line { display: none; }
.action-zone { height: 204px; min-height: 204px; display: grid; grid-template-rows: auto minmax(0, 1fr); align-content: stretch; overflow: visible; }
.action-zone-head { min-width: 0; }
.action-zone-head h2 { overflow-wrap: anywhere; }
.action-zone > .action-bar { min-height: 0; }
.action-bar { position: static; z-index: auto; width: 100%; transform: none; align-self: stretch; padding: 8px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.selected-summary { flex: 1 1 auto; min-width: 0; }
.selected-summary small { max-width: none; overflow-wrap: anywhere; }
.event-drawer { position: static; z-index: auto; width: auto; height: 100%; max-height: none; transform: none; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.inline-event { grid-template-rows: auto minmax(0, 1fr) auto; }
.inline-event .drawer-head { padding: 6px 0; }
.inline-event .drawer-copy { min-height: 0; max-height: none; overflow: visible; padding: 8px 0; align-content: start; }
.inline-event .drawer-actions { min-height: 44px; padding: 7px 0 0; }
.drawer-grip, .pending-event, .drawer-backdrop { display: none; }
.drawer-cards { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
.drawer-cards .card { min-height: 110px; }
.selection-summary { padding: 8px 10px; border-radius: 10px; color: #5e6c86; background: #f1f6ff; font-size: .78rem; }
.exchange-preview { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.exchange-preview > div { min-width: 0; display: grid; justify-items: center; gap: 4px; color: var(--muted); font-size: .72rem; }
.exchange-preview .card { width: 58px; min-height: 87px; }
.exchange-arrow { color: #806da2; font-size: 1.4rem; font-weight: 800; }
.empty-preview { display: grid; place-items: center; width: 58px; height: 87px; border: 1px dashed #c9bfd3; border-radius: 10px; color: #8c8496; font-size: .68rem; }
.complex-event, .lower-grid.complex-event > * { min-height: 280px; height: 280px; }
.complex-event .event-drawer { height: 100%; }
.prediction-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.prediction-row { grid-template-columns: 1fr; gap: 4px; padding: 4px; }
.prediction-row .card { min-height: 112px; }
.prediction-index { font-size: .66rem; }
.prediction-move { gap: 3px; }
.prediction-move button { min-height: 32px; padding: .2rem .25rem; font-size: .68rem; }

.record-panel { z-index: 32; max-height: min(540px, calc(100svh - 84px)); }
.record-panel .auxiliary { box-shadow: none; }
.record-panel .event-list { max-height: 330px; }
.auxiliary .section-head { justify-content: space-between; }
.auxiliary .event-list { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid #edf0f5; }
.draw-pile-stats-modal { width: min(58rem, calc(100% - 1.4rem)); }
.path-modal { width: min(72rem, calc(100% - 1.4rem)); }
.path-modal-copy { min-height: 0; }
.path-modal .path-full { grid-template-columns: repeat(auto-fill, minmax(86px, 86px)); justify-content: start; max-height: min(65vh, 38rem); overflow: auto; gap: 10px; }
.path-modal .path-modal-card { width: 86px; min-height: 129px; }

@media (max-height: 760px) and (min-width: 1180px) {
  .main-grid, .shared-column, .shared-stack { min-height: 430px; height: 430px; }
  .player-zone { height: 430px; min-height: 430px; grid-template-rows: auto 36px auto 105px 28px auto 135px; row-gap: 6px; }
  .player-zone .door-progress, .door-progress-item { height: 36px; min-height: 36px; }
  .path-display { height: 105px; min-height: 105px; max-height: 105px; grid-auto-rows: 105px; grid-template-columns: repeat(3, 70px); gap: 6px; }
  .path-display .card, .path-card { width: 70px; height: 105px; min-height: 105px; }
  .hand-heading { padding-top: 6px; }
  .hand-row { height: 135px; min-height: 135px; grid-auto-rows: 135px; grid-template-columns: repeat(3, 90px); gap: 6px; }
  .hand-row .card, .hand-row .empty-slot { width: 90px; height: 135px; min-height: 135px; }
  .shared-row .card, .shared-row .shared-empty-slot { min-height: 174px; }
  .complex-event, .lower-grid.complex-event > * { min-height: 280px; height: 280px; }
}

/* Table interaction repair: content-sized player zones and full-width operations. */
.topbar-entry { min-height: 44px; padding: .6rem .78rem; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.74); white-space: nowrap; }
.topbar-entry:hover:not(:disabled) { transform: none; border-color: #aebfdd; box-shadow: 0 4px 12px rgba(72, 105, 161, .13); background: rgba(255,255,255,.96); }
.topbar-entry:focus-visible { outline: 3px solid #f2b84b; outline-offset: 2px; }
.count-entry b { color: #4366a5; font-variant-numeric: tabular-nums; }
.menu summary { transition: background .14s ease, border-color .14s ease, box-shadow .14s ease; }
.menu summary:hover { border-color: #aebfdd; background: rgba(255,255,255,.96); box-shadow: 0 4px 12px rgba(72, 105, 161, .13); }
.menu[open] summary { border-color: #8ea6d2; background: var(--accent-soft); box-shadow: 0 4px 12px rgba(72, 105, 161, .14); }

.main-grid { grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr); align-items: stretch; }
.player-column, .shared-column { min-width: 0; display: flex; }
.player-zone { width: 100%; height: auto; min-height: 0; display: grid; grid-template-rows: auto auto auto auto auto auto auto; align-content: start; gap: .5rem; padding-bottom: 12px; overflow: visible; }
.player-zone .section-head { min-height: 0; }
.current-player .card, .teammate .card { min-height: 0; }
.player-zone .door-progress { height: auto; min-height: 0; margin: 0; }
.door-progress { gap: 5px; }
.door-progress-item { height: 44px; min-height: 36px; aspect-ratio: auto; grid-template-rows: 1fr auto; padding: 2px 3px; }
.path-heading, .hand-heading { min-width: 0; margin: 0; }
.path-heading h3, .hand-heading h3 { min-width: 0; }
.path-display { grid-template-columns: repeat(3, 78px); grid-auto-rows: 117px; justify-content: start; align-content: start; width: 100%; height: 117px; min-height: 117px; max-height: none; gap: 8px; padding: 3px 4px 0; overflow: visible; }
.path-display .card, .path-card { width: 78px; height: 117px; min-height: 117px; }
.path-display > .hint { grid-column: 1 / -1; align-self: center; }
.path-view-button { min-height: 28px; height: 28px; padding: .2rem .45rem; justify-self: start; }
.path-view-placeholder { display: block; min-height: 28px; }
.hand-row { grid-template-columns: repeat(3, 96px); grid-auto-rows: 144px; align-items: start; gap: 8px; width: 100%; min-height: 144px; padding: 3px 4px 0; overflow: visible; }
.hand-row .card, .hand-row .empty-slot { width: 96px; height: 144px; min-height: 144px; }
.empty-slot { display: grid; place-items: center; border: 1px dashed #cbd5e5; border-radius: 12px; color: #98a4b9; background: rgba(246,249,253,.82); font-size: .72rem; text-align: center; }
.card { min-height: 0; }
.card.selected { border: 3px solid #f2b84b; outline: 0; transform: translateY(-3px); box-shadow: 0 0 0 2px rgba(242,184,75,.24), 4px 8px 15px rgba(242,184,75,.26), 4px 6px 0 color-mix(in srgb, var(--card-color) 30%, #fff); }
.card[data-pointer-drag="true"] { touch-action: none; user-select: none; }
.card.is-dragging { opacity: .34; transform: none !important; }
.card.drop-target { outline: 3px solid #4d9de0; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(77,157,224,.22), 0 10px 18px rgba(55,117,178,.22); }
.drag-ghost { position: fixed; z-index: 100; pointer-events: none; margin: 0; transform: rotate(2deg) scale(1.02); opacity: .96; box-shadow: 0 16px 30px rgba(36,62,110,.34); }
.exchange-preview-card { position: relative; }
.exchange-preview-badge { position: absolute; z-index: 4; right: .28rem; top: .28rem; padding: .12rem .3rem; border: 1px solid rgba(255,231,153,.9); border-radius: 99px; color: #604b16; background: #ffe79a; box-shadow: 0 2px 5px rgba(76,58,20,.18); font-size: .58rem; font-weight: 800; }
.door-target-area { margin: 0; padding: .35rem .45rem; border: 1px solid #d5dcef; border-radius: 10px; background: rgba(244,247,255,.8); }
.door-target-area h3 { margin-bottom: 4px; }
.door-target-row { display: flex; gap: 8px; }
.door-target-row .card { width: 70px; min-height: 105px; }
.shared-stack { height: auto; min-height: 0; display: grid; grid-template-rows: minmax(250px, auto) auto; gap: 10px; width: 100%; }
.shared-zone { height: auto; min-height: 250px; padding: 12px; grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; }
.shared-row { width: 100%; max-width: 330px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: center; justify-self: center; gap: 10px; }
.shared-row .card, .shared-row .shared-empty-slot { width: 100%; min-height: 0; }
.shared-empty-slot { display: grid; place-items: center; aspect-ratio: 2 / 3; border: 1px dashed #cbd5e5; border-radius: 12px; color: #98a4b9; background: rgba(246,249,253,.82); font-size: .72rem; text-align: center; }
.stash-zone { min-height: 64px; height: auto; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; }
.operation-row { width: 100%; min-width: 0; }
.action-zone { width: 100%; height: auto; min-height: 112px; display: grid; grid-template-rows: auto minmax(0, 1fr); align-content: start; overflow: visible; }
.action-zone-head { min-width: 0; }
.action-zone > .action-bar { min-height: 0; }
.action-bar { position: static; z-index: auto; width: 100%; transform: none; align-self: stretch; padding: 8px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.selected-summary { flex: 1 1 auto; min-width: 0; }
.selected-summary small { max-width: none; overflow-wrap: anywhere; }
.event-drawer { position: static; z-index: auto; width: auto; height: auto; max-height: none; transform: none; display: grid; grid-template-rows: auto auto auto; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.inline-event .drawer-copy { min-height: 0; max-height: none; overflow: visible; padding: 8px 0; align-content: start; }
.inline-event .drawer-actions { min-height: 44px; padding: 7px 0 0; }
.drawer-grip, .pending-event, .drawer-backdrop { display: none; }
.exchange-pending { border: 1px solid #e8c15e; color: #705717; background: #fff7d8; box-shadow: 0 0 0 2px rgba(242,184,75,.12); font-weight: 800; }
.complex-event { min-height: 0; height: auto; }
.complex-event .action-zone, .complex-event .event-drawer { height: auto; }

.draw-modal-backdrop { position: fixed; z-index: 70; inset: 0; background: rgba(22,30,54,.68); backdrop-filter: blur(3px); }
.draw-modal { position: fixed; z-index: 71; left: 50%; top: 50%; width: min(440px, calc(100% - 28px)); max-height: 90svh; transform: translate(-50%, -50%); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #c7d5ef; border-radius: 24px; background: #fffdfd; box-shadow: 0 24px 70px rgba(18,28,59,.48); }
.draw-modal-copy { min-height: 0; overflow: auto; display: grid; justify-items: center; gap: .7rem; padding: 1.1rem 1.2rem; text-align: center; }
.draw-modal-copy h2 { color: #4366a5; font-size: 1.6rem; }
.draw-card-wrap { width: 140px; flex: 0 0 auto; }
.draw-card { width: 140px; height: 210px; min-height: 0; aspect-ratio: auto; cursor: default; transform: none !important; box-shadow: 8px 10px 0 color-mix(in srgb, var(--card-color) 30%, #fff), 0 20px 30px rgba(67,77,112,.25); }
.draw-card .card-name { font-size: 1.05rem; }
.draw-card .card-source { display: none; }
.draw-modal-actions { display: flex; flex-shrink: 0; padding: .85rem 1.1rem calc(.9rem + env(safe-area-inset-bottom)); border-top: 1px solid #e7edf6; background: rgba(255,255,255,.98); }
.draw-modal-actions button { width: 100%; }
.refill-blocked { display: grid; place-items: center; min-height: 54px; padding: .7rem; color: #5e6c86; border: 1px dashed #c8d6ed; border-radius: 12px; background: #f5f8ff; }
.reward-modal-backdrop { z-index: 90; }
.reward-modal { z-index: 91; }
.readonly-top-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }

@media (max-height: 760px) {
  .path-display { grid-template-columns: repeat(3, 64px); grid-auto-rows: 96px; height: 96px; min-height: 96px; }
  .path-display .card, .path-card { width: 64px; height: 96px; min-height: 96px; }
  .hand-row { grid-template-columns: repeat(3, 84px); grid-auto-rows: 126px; min-height: 126px; }
  .hand-row .card, .hand-row .empty-slot { width: 84px; height: 126px; min-height: 126px; }
  .shared-zone { min-height: 220px; }
  .shared-stack { grid-template-rows: minmax(220px, auto) auto; }
  .draw-card-wrap, .draw-card { width: 112px; }
  .draw-card { height: 168px; }
}
@media (max-width: 1279px) {
  html, body { min-width: 320px; }
  .shell { padding-left: 12px; padding-right: 12px; }
  .main-grid { grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .main-grid { grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr); gap: .55rem; }
  .panel { padding: .75rem; }
  .topbar { align-items: flex-start; }
  .status-cluster { justify-content: flex-end; gap: .35rem; }
  .turn-status { text-align: right; }
}
@media (max-width: 760px) {
  .main-grid { grid-template-columns: 1fr; }
  .shared-column { order: -1; }
  .shared-stack { grid-template-rows: auto auto; }
  .shared-zone { min-height: 220px; }
  .player-zone { min-height: 0; }
  .status-cluster { width: 100%; justify-content: flex-start; }
  .turn-status { text-align: left; }
}

/* Read-only windows stay available while game dialogs pause the flow. */
.topbar, .readonly-top { position: relative; z-index: 115; }
.record-modal-backdrop { position: fixed; z-index: 100; inset: 0; background: rgba(36, 45, 70, .58); backdrop-filter: blur(3px); }
.record-modal { position: fixed; z-index: 120; left: 50%; top: 50%; width: min(640px, calc(100% - 1.4rem)); max-height: 80vh; transform: translate(-50%, -50%); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #c7d5ef; border-radius: 24px; background: #fffdfd; box-shadow: 0 24px 70px rgba(35, 47, 82, .35); }
.record-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.2rem .85rem; border-bottom: 1px solid #e7edf6; }
.record-modal-head h2 { color: #4366a5; font-size: 1.6rem; }
.record-modal-head h2 small { color: var(--muted); font-size: .9rem; font-weight: 700; }
.record-modal .event-list { min-height: 5rem; max-height: none; overflow: auto; padding: 1rem 1.2rem 1.2rem; }
.record-modal .event-list > .hint { display: grid; place-items: center; min-height: 10rem; }
.draw-pile-stats-backdrop { z-index: 100; }
.draw-pile-stats-modal { z-index: 120; max-height: 80vh; }
.draw-pile-stats-modal:focus, .record-modal:focus { outline: 3px solid rgba(242,184,75,.6); outline-offset: 3px; }
.operation-row .action-zone { min-height: 0; }
.player-zone .door-progress { min-height: 48px; }
.player-zone .door-progress-item { height: 48px; }
.action-zone-head { display: grid; gap: .25rem; align-content: start; }
.action-zone-head h2 { color: #5b4b7c; }
.action-hint { color: var(--muted); font-size: .82rem; line-height: 1.45; }
.refill-operation { min-height: 76px; place-items: center; }
.refill-operation .refill-blocked { width: 100%; min-height: 0; border: 0; background: transparent; text-align: center; }
.inline-event .drawer-copy { padding-top: .45rem; }
.inline-event .drawer-copy > p:not(.eyebrow) { margin: 0; }
.inline-event .drawer-actions { padding-left: 0; padding-right: 0; }
.choice-grid button { min-height: 3.3rem; line-height: 1.35; }