:root { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif; color: #eee8dc; background: #0b1111; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #0b1111; }
body.lightbox-open { overflow: hidden; }
.app-shell { width: min(100%, 520px); margin: 0 auto; }
.screen { min-height: 100vh; background: #14201e; border: 0; border-radius: 0; padding: clamp(16px, 4vw, 28px); box-shadow: none; }
.is-hidden { display: none; }
.eyebrow { margin: 0 0 10px; color: #a05b37; font-size: .75rem; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(1.65rem, 6vw, 2.25rem); }
[data-round-title] { font-size: clamp(1.05rem, 4.6vw, 1.5rem); letter-spacing: -.02em; white-space: nowrap; }
.screen-title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: 100%; gap: 12px; }
.screen-title-row h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.screen-title-actions { display: flex; align-items: center; gap: 8px; }
.history-button { white-space: nowrap; padding: 2px 0; border: 0; background: transparent; color: #d39a55; font: inherit; font-size: .95rem; font-weight: 800; line-height: 1.2; cursor: pointer; }
.history-button:hover, .history-button:focus-visible { color: #f0c36e; text-decoration: underline; outline: none; }
.game-menu { position: relative; }
.menu-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #d39a55; font: inherit; font-size: 1.7rem; font-weight: 800; line-height: 1; cursor: pointer; }
.menu-button:hover, .menu-button:focus-visible { background: #263630; color: #f0c36e; outline: none; }
.game-menu-panel { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; display: grid; min-width: 120px; overflow: hidden; border: 1px solid #46534d; border-radius: 10px; background: #1d2b28; box-shadow: 0 8px 20px #0008; }
.game-menu-panel.is-hidden { display: none; }
.game-menu.is-open .game-menu-panel { display: grid; }
.game-menu-panel button { min-height: 44px; border: 0; border-bottom: 1px solid #46534d; padding: 0 14px; background: transparent; color: #eee8dc; font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.game-menu-panel button:last-child { border-bottom: 0; }
.game-menu-panel button:hover, .game-menu-panel button:focus-visible { background: #3a3026; color: #f0c36e; outline: none; }
.screen-subtitle { margin: 10px 0 0; color: #d39a55; font-size: 1rem; font-weight: 800; }
#round-title { font-size: 1.35rem; font-weight: 800; color: #eee8dc; }
.description { margin: 12px 0 26px; color: #c2c1b5; line-height: 1.7; }
.count-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.count-button { min-height: 48px; border: 1px solid #46534d; border-radius: 12px; background: #1d2b28; color: #eee8dc; font-size: 1rem; font-weight: 700; cursor: pointer; }
.count-button:hover, .count-button:focus-visible { border-color: #c58b48; background: #3a3026; outline: none; }
.count-button.is-selected { border: 3px solid #c58b48; background: #3a3026; }
.set-selection { display: grid; gap: 8px; margin: 24px 0 20px; }
.set-selection-label { color: #c2c1b5; font-size: .9rem; font-weight: 700; }
.set-select { width: 100%; min-height: 44px; border: 1px solid #46534d; border-radius: 12px; padding: 0 14px; background: #1d2b28; color: #eee8dc; font: inherit; font-weight: 700; }
.set-selection-label:nth-of-type(2) { margin-top: 8px; }
.set-select:focus-visible { border-color: #c58b48; outline: 3px solid #76552f; outline-offset: 1px; }
#player-count-next { display: block; width: 100%; margin-top: 32px; }
.button-row #player-count-next { margin-top: 0; }
.name-fields { display: grid; gap: 14px; }
.field-label { display: grid; gap: 6px; color: #c2c1b5; font-size: .9rem; font-weight: 700; }
input { width: 100%; border: 1px solid #46534d; border-radius: 12px; padding: 13px 14px; font: inherit; font-weight: 400; background: #1d2b28; color: #eee8dc; }
input:focus { border-color: #a05b37; outline: 3px solid #a05b3722; }
.form-error { min-height: 24px; margin: 12px 0 0; color: #b42318; font-size: .9rem; }
.button-row { display: flex; gap: 10px; margin-top: 16px; align-items: stretch; }
.button[hidden] { display: none !important; }
.button { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; min-height: 48px; flex: 1; border: 0; border-radius: 12px; padding: 0 20px; font: inherit; font-weight: 800; line-height: 1.2; cursor: pointer; }
.button-primary { background: #a45d38; color: #fff8ed; }
.button-secondary { background: #2b3733; color: #eee8dc; }
.player-list { display: grid; gap: 10px; margin: 20px 0 26px; }
.seating-illustration { display: block; width: 100%; height: auto; margin: 0 auto 20px; border-radius: 14px; }
.selection-summary { margin-top: 12px; }
.player-item { display: flex; justify-content: space-between; padding: 14px 16px; border-radius: 12px; background: #1d2b28; }
section[data-screen="ready"] .player-item .player-name { color: #fff; }
.player-item span:last-child { color: #a05b37; font-size: .85rem; font-weight: 700; }
.final-screen { padding-bottom: 28px; overflow: hidden; }
.final-card-recap { position: relative; height: clamp(280px, 72vw, 360px); margin: 12px 0 14px; overflow: hidden; isolation: isolate; border: 1px solid #91652d; border-radius: 16px; background: radial-gradient(ellipse at center, #67491d 0%, #2e2c20 37%, #14201e 73%); box-shadow: inset 0 0 34px #f6c94b44, 0 12px 28px #0008; }
.final-card-recap::before, .final-card-recap::after { position: absolute; z-index: -1; inset: -45%; content: ""; opacity: 0; pointer-events: none; }
.final-card-recap::before { background: repeating-conic-gradient(from 4deg, #f9d96900 0deg 10deg, #f9d96946 11deg 14deg, #f9d96900 15deg 28deg); }
.final-card-recap::after { background: radial-gradient(circle, #fff5b2 0 3%, #e7ad39bb 10%, transparent 42%); transform: scale(.2); }
.final-recap-card { position: absolute; z-index: var(--stack-order); top: 50px; left: 50%; display: block; width: clamp(118px, 37vw, 168px); height: auto; border: 2px solid #f4d771; border-radius: 10px; box-shadow: 0 12px 25px #000b, 0 0 0 3px #6c451d; opacity: 0; transform: translate(-50%, -240px) rotate(-16deg); }
.final-heading { margin: 24px 0 14px; color: #f0c36e; font-family: Georgia, "Noto Serif JP", serif; font-size: clamp(1.65rem, 7vw, 2.3rem); letter-spacing: .08em; text-align: center; }
.final-image { display: block; width: 100%; height: auto; margin: 0 auto; border: 1px solid #8d632f; border-radius: 12px; box-shadow: 0 8px 24px #0008; }
.final-winners { display: grid; gap: 4px; margin: 18px 0 22px; color: #f5d67b; font-family: Georgia, "Noto Serif JP", serif; font-size: clamp(1.65rem, 8vw, 2.35rem); font-weight: 800; line-height: 1.2; letter-spacing: .08em; text-align: center; text-shadow: 0 2px 0 #392414; }
.final-winners p { margin: 0; }
.final-score-summary { display: grid; gap: 9px; margin: 0 0 24px; }
.final-score { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border: 1px solid #46534d; border-radius: 12px; background: #1d2b28; color: #eee8dc; }
.final-score strong { color: #d39a55; font-size: .95rem; white-space: nowrap; }
.final-score.is-winner { border: 2px solid #d6a84e; background: linear-gradient(90deg, #493519, #263229); box-shadow: inset 0 0 0 1px #f0c36e55; }
.final-score.is-winner span { color: #fff3bf; font-size: 1.08rem; font-weight: 800; }
.final-score.is-winner strong { color: #ffe080; font-size: 1rem; }
@keyframes final-card-from-left { from { opacity: 0; transform: translate(calc(-50% - 145vw), 12px) rotate(-31deg) scale(.84); } 70% { opacity: 1; transform: translate(calc(-50% + var(--card-x)), calc(var(--card-y) - 20px)) rotate(var(--card-rotate)) scale(1.06); } 84% { transform: translate(calc(-50% + var(--card-x)), calc(var(--card-y) + 8px)) rotate(var(--card-rotate)) scale(.98); } to { opacity: 1; transform: translate(calc(-50% + var(--card-x)), var(--card-y)) rotate(var(--card-rotate)); } }
@keyframes final-card-from-right { from { opacity: 0; transform: translate(calc(-50% + 145vw), 12px) rotate(31deg) scale(.84); } 70% { opacity: 1; transform: translate(calc(-50% + var(--card-x)), calc(var(--card-y) - 20px)) rotate(var(--card-rotate)) scale(1.06); } 84% { transform: translate(calc(-50% + var(--card-x)), calc(var(--card-y) + 8px)) rotate(var(--card-rotate)) scale(.98); } to { opacity: 1; transform: translate(calc(-50% + var(--card-x)), var(--card-y)) rotate(var(--card-rotate)); } }
@keyframes final-card-last-hit { 0%, 66% { filter: brightness(1); } 80% { filter: brightness(1.6) drop-shadow(0 0 18px #ffdc64); } 100% { filter: brightness(1); } }
@keyframes final-card-to-recap { from { opacity: 1; transform: translate(calc(-50% + var(--card-x)), var(--card-y)) rotate(var(--card-rotate)); } to { opacity: 1; transform: translate(calc(-50% + var(--mini-x)), -99px) scale(.38) rotate(var(--mini-rotate)); } }
@keyframes final-recap-contract { from { height: clamp(280px, 72vw, 360px); margin: 12px 0 14px; } to { height: clamp(136px, 38vw, 156px); margin: 12px 0 0; } }
@keyframes final-recap-rays { 0% { opacity: 0; transform: rotate(0deg) scale(.5); } 32% { opacity: .9; } 100% { opacity: .2; transform: rotate(48deg) scale(1); } }
@keyframes final-recap-flash { 0%, 68% { opacity: 0; transform: scale(.2); } 78% { opacity: .94; transform: scale(1.3); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes final-reveal-drop { from { opacity: 0; transform: translateY(-20px); } 75% { opacity: 1; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes final-reveal-rise { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes final-winner-name { from { opacity: 0; transform: scale(.68); } 68% { opacity: 1; transform: scale(1.13); } to { opacity: 1; transform: scale(1); } }
@keyframes final-winner-glow { 0%, 100% { text-shadow: 0 2px 0 #392414, 0 0 0 transparent; } 50% { text-shadow: 0 2px 0 #392414, 0 0 17px #f6ce65aa; } }
@keyframes final-score-winner { 0%, 65%, 100% { box-shadow: inset 0 0 0 1px #f0c36e55; } 82% { box-shadow: inset 0 0 0 2px #fff0a3, 0 0 22px #e9bd4a99; } }
.final-screen.is-revealing .final-card-recap { animation: final-recap-contract 520ms cubic-bezier(.2,.8,.2,1) calc(var(--final-reveal-delay) - 430ms) forwards; }
.final-screen.is-revealing .final-card-recap::before { animation: final-recap-rays 900ms ease-out calc(var(--final-reveal-delay) - 620ms) forwards; }
.final-screen.is-revealing .final-card-recap::after { animation: final-recap-flash 680ms ease-out calc(var(--final-reveal-delay) - 500ms) forwards; }
.final-screen.is-revealing .final-recap-card { animation: final-card-from-left 780ms cubic-bezier(.15,.9,.2,1) var(--entry-delay) forwards, final-card-to-recap 500ms cubic-bezier(.2,.8,.2,1) calc(var(--final-reveal-delay) - 500ms) forwards; }
.final-screen.is-revealing .final-recap-card:nth-child(even) { animation-name: final-card-from-right, final-card-to-recap; }
.final-screen.is-revealing .final-recap-card.is-last { animation-name: final-card-from-left, final-card-to-recap, final-card-last-hit; animation-duration: 780ms, 500ms, 900ms; animation-timing-function: cubic-bezier(.15,.9,.2,1), cubic-bezier(.2,.8,.2,1), ease-out; animation-delay: var(--entry-delay), calc(var(--final-reveal-delay) - 500ms), var(--entry-delay); animation-fill-mode: forwards, forwards, both; }
.final-screen.is-revealing .final-recap-card.is-last:nth-child(even) { animation-name: final-card-from-right, final-card-to-recap, final-card-last-hit; }
.final-screen.is-revealing .final-reveal-content > * { opacity: 0; }
.final-screen.is-revealing .final-heading { animation: final-reveal-drop 440ms cubic-bezier(.2,.8,.2,1) var(--final-reveal-delay) forwards; }
.final-screen.is-revealing .final-image { animation: final-reveal-rise 480ms cubic-bezier(.2,.8,.2,1) calc(var(--final-reveal-delay) + 140ms) forwards; }
.final-screen.is-revealing .final-winners { animation: final-winner-name 500ms cubic-bezier(.2,.84,.2,1) calc(var(--final-reveal-delay) + 370ms) forwards, final-winner-glow 1.8s ease-in-out calc(var(--final-reveal-delay) + 950ms) infinite; }
.final-screen.is-revealing .final-score-summary { animation: final-reveal-rise 420ms ease-out calc(var(--final-reveal-delay) + 610ms) forwards; }
.final-screen.is-revealing #final-to-title { animation: final-reveal-rise 360ms ease-out calc(var(--final-reveal-delay) + 760ms) forwards; }
.final-screen.is-revealing .final-score.is-winner { animation: final-score-winner 850ms ease-out calc(var(--final-reveal-delay) + 900ms) both; }
.final-screen.is-revealed .final-card-recap { height: clamp(136px, 38vw, 156px); margin: 12px 0 0; }
.final-screen.is-revealed .final-recap-card { opacity: 1; transform: translate(calc(-50% + var(--mini-x)), -99px) scale(.38) rotate(var(--mini-rotate)); }
@media (prefers-reduced-motion: reduce) { .final-screen.is-revealing .final-card-recap { height: clamp(136px, 38vw, 156px); margin: 12px 0 0; animation: none; } .final-screen.is-revealing .final-recap-card { opacity: 1; transform: translate(calc(-50% + var(--mini-x)), -99px) scale(.38) rotate(var(--mini-rotate)); animation: none; } .final-screen.is-revealing .final-reveal-content > * { opacity: 1; animation: none; } }
.card-area { margin: 18px 0 22px; text-align: center; }
#handoff-card-area { min-height: min(48vh, calc(100dvh - 240px)); display: grid; place-items: center; }
.handoff-actions { display: flex; gap: 10px; margin-top: 12px; }
.handoff-actions .button { width: auto; margin-top: 0; }
.card-area img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(48vh, calc(100dvh - 240px)); margin: 0 auto; object-fit: contain; border-radius: 14px; }
.parent-card-lore { margin: -6px 0 24px; }
.parent-card-lore-panel { padding: 18px; border: 1px solid #46534d; border-radius: 14px; background: #192623; overflow-wrap: anywhere; }
.parent-card-lore-name { margin: 0 0 18px; color: #eee8dc; font-size: clamp(1.2rem, 5.5vw, 1.55rem); font-weight: 800; line-height: 1.45; text-align: center; overflow-wrap: anywhere; }
.parent-card-lore-entry + .parent-card-lore-entry { margin-top: 18px; }
.parent-card-lore-entry h3 { margin: 0 0 5px; color: #d39a55; font-size: .95rem; font-weight: 800; }
.parent-card-lore-entry p { margin: 0; color: #e3dfd2; line-height: 1.8; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
.parent-card-lore-number { margin: 18px 0 0; color: #aaa99e; font-size: .8rem; font-variant-numeric: tabular-nums; text-align: right; }
.card-zoom-trigger { cursor: zoom-in; touch-action: manipulation; }
.card-zoom-trigger:focus-visible { outline: 3px solid #a05b37; outline-offset: 4px; }
.compact-card img { max-height: min(30vh, calc(100dvh - 260px)); }
.button:disabled { opacity: .55; cursor: not-allowed; }
.missing-card { min-height: 180px; display: grid; place-items: center; background: #263630; border-radius: 14px; color: #aaa99e; }
.word-list { display: grid; gap: 10px; margin: 18px 0 22px; }
#official-preview[hidden], #parent-secret-description[hidden], #parent-word[hidden], #parent-error[hidden] { display: none !important; }
.word { padding: 10px 12px; border: 1px solid #46534d; border-radius: 12px; background: #1d2b28; color: #eee8dc; font-size: 1rem; font-weight: 700; text-align: center; }
.word:has(.word-number) { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 2rem; align-items: center; }
.word-number { grid-column: 1; color: #d39a55; font-variant-numeric: tabular-nums; text-align: left; }
.word-text { grid-column: 2; min-width: 0; text-align: center; }
.official { background: #263630; }
.word-button { width: 100%; cursor: pointer; font: inherit; }
.word-button:hover, .word-button:focus-visible { border-color: #c58b48; background: #3a3026; outline: none; }
.word-button.is-selected { border: 3px solid #c58b48; background: #3a3026; }
.timer { margin: 20px 0; color: #d39a55; font-size: clamp(2.7rem, 14vw, 4.5rem); font-variant-numeric: tabular-nums; font-weight: 900; text-align: center; }
.button-secondary { margin-top: 12px; }
.button-row .button-secondary { margin-top: 0; }
#parent-word { margin-bottom: 12px; }
.vote-list { display: grid; gap: 12px; margin: 18px 0 24px; }
.vote-card { padding: 10px; border: 1px solid #46534d; border-radius: 14px; background: #192623; }
.vote-card.parent-answer { border: 4px solid #a45d38; box-shadow: 0 0 0 2px #76552f; }
.vote-card .word { border: 0; background: #263630; }
.vote-count { margin-top: 8px; color: #d39a55; font-weight: 800; text-align: center; }
.voters { padding: 6px 8px; color: #b7b8ad; text-align: center; }
.card-lightbox { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: start center; padding: 72px 16px 8px; background: #000b; }
.card-lightbox.is-hidden { display: none; }
.card-lightbox-content { display: grid; place-items: start center; min-width: 0; min-height: 0; width: min(100%, 520px); max-height: calc(100dvh - 80px); }
.card-lightbox-content img { display: block; width: auto; height: auto; max-width: calc(100vw - 32px); max-height: calc(100dvh - 80px); object-fit: contain; border-radius: 10px; box-shadow: 0 10px 36px #0008; }
.card-lightbox-close { position: absolute; z-index: 1; top: 12px; right: 14px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #eee8dc; color: #192321; font-size: 2.4rem; line-height: 1; cursor: pointer; }
.card-lightbox-close:focus-visible { outline: 3px solid #eee8dc; outline-offset: 3px; }
section[data-screen="title"] { text-align: center; }
section[data-screen="howto"]:not(.is-hidden) { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0; height: 100dvh; min-height: 100dvh; padding-bottom: max(clamp(16px, 4vw, 28px), calc(env(safe-area-inset-bottom) + 12px)); overflow: hidden; }
.app-shell.has-multiplayer-round-header section[data-screen="howto"]:not(.is-hidden) { position: fixed; z-index: 2000; inset: 0; height: 100dvh; min-height: 100dvh; padding-top: max(clamp(16px, 4vw, 28px), calc(env(safe-area-inset-top) + 12px)); background: #14201e; }
.title-heading { margin: 0 0 3px; color: #d4c6ad; font-size: clamp(.95rem, 4vw, 1.2rem); font-weight: 700; line-height: 1.35; letter-spacing: .08em; }
.title-tagline { margin: 0 0 14px; color: #a89e8d; font-size: clamp(.72rem, 3.1vw, .9rem); font-weight: 600; line-height: 1.45; letter-spacing: .02em; }
section[data-screen="title"] .button, section[data-screen="howto"] > .button { width: 100%; }
section[data-screen="title"] .button + .button { margin-top: 10px; }
.title-main-image { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 0 22px; border-radius: 14px; }
.howto-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 0 14px; }
.howto-tab { min-height: 48px; border: 1px solid #46534d; border-radius: 10px; padding: 8px 6px; background: #1d2b28; color: #c2c1b5; font: inherit; font-size: .88rem; font-weight: 800; line-height: 1.25; cursor: pointer; }
.howto-tab:hover, .howto-tab:focus-visible { border-color: #c58b48; background: #3a3026; outline: none; }
.howto-tab.is-selected { border-color: #c58b48; background: #a45d38; color: #fff8ed; }
.howto-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 2px 20px 0; }
.howto-panel { display: none; }
.howto-panel.is-selected { display: block; }
.howto-image { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 0 22px; border-radius: 14px; }
.howto-description { margin: 0 0 26px; color: #c2c1b5; line-height: 1.9; text-align: left; }
.howto-description h2 { margin: 30px 0 10px; color: #eee8dc; font-size: 1.18rem; line-height: 1.4; }
.howto-description h2:first-child { margin-top: 0; }
.howto-description h3 { margin: 20px 0 6px; color: #d0c8b8; font-size: 1rem; line-height: 1.5; }
.howto-description p { margin: 0 0 10px; }
.howto-content + #howto-back { margin-top: 12px; }
.deck-stack-image { display: block; width: auto; max-width: 100%; height: auto; max-height: min(48vh, calc(100dvh - 240px)); margin: 18px auto 22px; object-fit: contain; cursor: pointer; transition: opacity .18s ease, filter .18s ease; }
.deck-stack-image.is-loading { opacity: .48; filter: saturate(.5); cursor: wait; pointer-events: none; }
.deck-stack-image:focus-visible { outline: 2px solid #d5b45f; outline-offset: 4px; }
.draw-status { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 24px; margin: -14px 0 14px; color: #d39a55; font-size: .95rem; font-weight: 800; }
.draw-status[hidden] { display: none; }
.draw-status-spinner { width: 16px; height: 16px; border: 2px solid #d39a5566; border-top-color: #f0c36e; border-radius: 50%; animation: draw-status-spin .7s linear infinite; }
@keyframes draw-status-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .draw-status-spinner { animation: none; } }
.discussion-screen { padding-top: clamp(18px, 5vw, 30px); padding-bottom: clamp(18px, 5vw, 30px); }
.discussion-screen .discussion-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; align-items: center; margin: 14px 0 18px; }
.discussion-screen .card-area { margin: 0; }
.discussion-screen .compact-card img { max-height: min(25vh, calc(100dvh - 300px)); }
.discussion-screen .word-list { grid-column: 1 / -1; gap: 7px; margin: 0; }
.discussion-screen .word { padding: 10px 12px; font-size: 1rem; }
.discussion-screen .timer { margin: 0; font-size: clamp(2.25rem, 11vw, 3.5rem); }
.discussion-screen .button-primary { margin-top: 8px; }
.multiplayer-discussion-intro { position: fixed; z-index: 2600; inset: 0; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); background: radial-gradient(circle at center, #263b34 0%, #0d1b18 58%, #050c0b 100%); opacity: 1; overflow: hidden; transition: opacity 500ms ease; }
.multiplayer-discussion-intro::before, .multiplayer-discussion-intro::after { content: ""; position: absolute; left: 50%; width: min(72vw, 430px); height: 1px; background: linear-gradient(90deg, transparent, #d7aa5f, transparent); transform: translateX(-50%); box-shadow: 0 0 14px #d7aa5f66; }
.multiplayer-discussion-intro::before { top: 15%; }
.multiplayer-discussion-intro::after { bottom: 15%; }
.multiplayer-discussion-intro.is-hidden { display: none; }
.multiplayer-discussion-intro.is-leaving { opacity: 0; }
.multiplayer-discussion-intro-panel { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); align-items: center; width: min(100%, 660px); height: min(66dvh, 620px); text-align: center; }
.multiplayer-discussion-intro-line { max-width: 100%; padding-inline: 10px; opacity: 0; transform: scale(.85); font-synthesis: none; }
.multiplayer-discussion-intro-position { align-self: end; padding-bottom: clamp(18px, 5vh, 42px); color: #e8dcc8; font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif; font-size: clamp(1.45rem, 6.5vw, 2.55rem); font-weight: 700; line-height: 1.3; letter-spacing: .1em; text-shadow: 0 2px 12px #000c; }
.multiplayer-discussion-intro-parent { color: #f2c872; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif; font-size: clamp(1.55rem, 7.5vw, 3rem); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; text-shadow: 0 2px 12px #000c, 0 0 18px #d69b414d; }
.multiplayer-discussion-intro-start { align-self: start; padding-top: clamp(18px, 5vh, 42px); color: #fff8e8; font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif; font-size: clamp(2.35rem, 12vw, 4.9rem); font-weight: 800; line-height: 1.25; letter-spacing: .08em; text-shadow: 0 2px 14px #000d, 0 0 24px #e4b55370; }
.multiplayer-discussion-intro:is(.is-stage-1, .is-stage-2, .is-stage-3) .multiplayer-discussion-intro-position,
.multiplayer-discussion-intro:is(.is-stage-2, .is-stage-3) .multiplayer-discussion-intro-parent,
.multiplayer-discussion-intro.is-stage-3 .multiplayer-discussion-intro-start { opacity: 1; transform: scale(1); animation: multiplayer-discussion-intro-hit 520ms cubic-bezier(.16, .88, .25, 1.2) both; }
@keyframes multiplayer-discussion-intro-hit { 0% { opacity: 0; transform: scale(1.35); } 58% { opacity: 1; transform: scale(.96); } 78% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .multiplayer-discussion-intro { transition-duration: 120ms; } .multiplayer-discussion-intro-line { animation: none !important; } }
.result-screen { padding-top: clamp(18px, 5vw, 30px); padding-bottom: clamp(18px, 5vw, 30px); }
.result-screen .result-overview { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; align-items: center; margin: 10px 0; }
.result-summary-panel { display: grid; gap: 4px; align-content: center; min-width: 0; }
.result-reveal-status { min-height: 0; margin: 0; color: #a05b37; font-weight: 900; text-align: center; }
.result-parent { margin: 0; color: #d39a55; font-size: 1rem; font-weight: 800; text-align: left; }
.result-screen .card-area { margin: 0; }
.result-screen .compact-card img { max-height: min(16vh, calc(100dvh - 300px)); }
.result-screen .description { margin: 0; line-height: 1.45; }
.result-screen #result-summary { display: grid; gap: 7px; color: #eee8dc; font-size: 1rem; }
.result-screen #result-summary strong { color: #a05b37; font-size: 1.12rem; }
.result-screen #result-summary span { color: #c2c1b5; font-size: .9rem; font-weight: 700; }
.result-screen .vote-list { gap: 7px; margin: 10px 0 14px; }
.result-screen .vote-card { padding: 7px 9px; border-radius: 10px; }
.result-screen .vote-card.parent-answer { border-width: 3px; }
.result-screen .vote-card { transition: opacity .24s ease, transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease; }
.result-screen .vote-card.reveal-checking { opacity: 1; transform: scale(1.035); border-color: #a45d38; background: #332921; box-shadow: 0 0 0 3px #76552f, 0 5px 14px #0006; }
.result-screen .vote-card.reveal-parent { opacity: 1; transform: scale(1.055); border: 5px solid #f1c85a; background: #44351d; box-shadow: 0 0 0 4px #7d4d1e, 0 0 18px 7px #eebc4a99, 0 0 34px 12px #eebc4a66; }
.result-screen .vote-card.reveal-flash { border-color: #fff1a5; background: #5a461d; box-shadow: 0 0 0 5px #d28d2d, 0 0 24px 10px #ffe274, 0 0 44px 18px #eebc4aaa; }
.result-screen .vote-card .word { padding: 10px 12px; font-size: .95rem; }
.result-screen .vote-count { display: inline; margin: 0 0 0 8px; font-size: .85rem; }
.result-screen .voters { display: inline; padding: 0 0 0 6px; font-size: .85rem; }
.history-lightbox { position: fixed; z-index: 2000; inset: 0; overflow-y: auto; padding: calc(16px + env(safe-area-inset-top)) 16px 16px; background: #000b; }
.history-lightbox.is-hidden { display: none; }
.history-panel { width: min(100%, 680px); min-height: calc(100dvh - 32px); margin: 0 auto; padding: 18px; border: 1px solid #46534d; border-radius: 16px; background: #14201e; box-shadow: 0 10px 36px #0008; }
.history-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: -18px; z-index: 1; margin: -18px -18px 16px; padding: 16px 18px; background: #14201e; border-bottom: 1px solid #46534d; }
.history-header h2 { margin: 0; color: #eee8dc; font-size: 1.35rem; }
.history-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #eee8dc; color: #192321; font-size: 2rem; line-height: 1; cursor: pointer; }
.history-close:focus-visible { outline: 3px solid #eee8dc; outline-offset: 3px; }
.history-list { display: grid; gap: 18px; }
.history-scores { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #46534d; }
.history-score-list { display: grid; gap: 5px; }
.history-score { display: flex; justify-content: space-between; gap: 10px; padding: 7px 9px; border-radius: 8px; background: #263630; color: #eee8dc; }
.history-score strong { color: #f0c36e; white-space: nowrap; }
.history-empty { margin: 12px 0; color: #c2c1b5; text-align: center; }
.history-entry { padding: 14px; border: 1px solid #46534d; border-radius: 14px; background: #192623; }
.history-entry-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; color: #d39a55; }
.history-entry-heading h3 { margin: 0; color: #eee8dc; font-size: 1.1rem; }
.history-entry-overview { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 12px; align-items: start; }
.history-card-area { min-width: 0; }
.history-card-area img { display: block; width: 100%; max-height: 300px; margin: 0 auto; object-fit: contain; border-radius: 10px; }
.history-result { display: grid; gap: 6px; min-width: 0; align-content: center; }
.history-result .result-parent { margin: 0; }
.history-summary { margin: 0; color: #eee8dc; font-size: .88rem; font-weight: 800; line-height: 1.5; }
.history-vote-list { display: grid; gap: 7px; margin: 12px 0 0; }
.history-vote-list .vote-card { padding: 7px 9px; border-radius: 10px; }
.history-vote-list .vote-card.parent-answer { border-width: 3px; }
.history-vote-list .vote-card .word { padding: 10px 12px; font-size: .95rem; }
.history-vote-list .vote-count { display: inline; margin: 0 0 0 8px; font-size: .85rem; }
.history-vote-list .voters { display: inline; padding: 0 0 0 6px; font-size: .85rem; }
@media (max-width: 380px) { .screen-title-actions { gap: 8px; } .history-entry-overview { grid-template-columns: 1fr; } .history-card-area img { max-height: 260px; } }
@media (max-width: 420px) { .howto-tabs { gap: 6px; } .howto-tab { font-size: .8rem; } }
.answer-screen .answer-overview { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; align-items: center; margin: 18px 0 22px; }\n.answer-screen .card-area { margin: 0; }\n.answer-screen .compact-card img { max-height: min(25vh, calc(100dvh - 300px)); }\n.answer-screen .answer-guide { min-width: 0; }\n.answer-screen .answer-guide .screen-subtitle { margin: 0 0 12px; }\n.answer-screen .answer-guide .description { margin: 0; line-height: 1.45; }\n.answer-screen .word-list { margin-top: 0; }\n@media (max-width: 380px) { .discussion-screen .discussion-layout { gap: 8px; } .result-screen .compact-card img { max-height: 14vh; } }



/* 通信対戦：ラウンド開始後の固定情報領域 */
.multiplayer-round-header {
  position: fixed;
  z-index: 1500;
  top: 0;
  left: 50%;
  width: min(100%, 520px);
  transform: translateX(-50%);
  padding-top: env(safe-area-inset-top);
  background: #0d1c18f5;
  border-bottom: 1px solid #68775c;
  box-shadow: 0 3px 12px #0006;
}
.multiplayer-round-title-slot {
  min-height: 48px;
  padding: 6px 10px;
  border-bottom: 1px solid #46534d;
}
.multiplayer-round-title-slot .screen-title-row {
  min-height: 36px;
}
.multiplayer-round-title-slot [data-round-title] {
  color: #eee8dc;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: normal;
}
@media (max-width: 380px) {
  .multiplayer-round-title-slot { padding-inline: 8px; }
  .multiplayer-round-title-slot .screen-title-row { gap: 6px; }
  .multiplayer-round-title-slot .screen-title-row h1 {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: keep-all;
    line-height: 1.25;
  }
  .multiplayer-round-title-slot [data-round-title] { font-size: clamp(.9rem, 4.4vw, 1.05rem); }
  .multiplayer-round-title-slot .screen-title-actions { gap: 4px; }
  .multiplayer-round-title-slot .history-button { font-size: .82rem; }
  .multiplayer-round-title-slot .reaction-button,
  .multiplayer-round-title-slot .menu-button { width: 32px; height: 32px; }
}
.multiplayer-player-bar {
  display: flex;
  gap: 5px;
  overflow: visible;
  padding: 5px;
}
.multiplayer-player {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 3px;
  row-gap: 1px;
  padding: 5px 4px;
  border: 1px solid #46534d;
  border-radius: 8px;
  color: #eee8dc;
  background: #192623;
  font-size: .68rem;
}
.multiplayer-player.is-parent { border-color: #d39a55; }
.multiplayer-player strong {
  grid-column: 1 / -1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.multiplayer-player-score {
  grid-column: 1;
  grid-row: 2;
}
.multiplayer-player-role {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  color: #d39a55;
  font-weight: 800;
}
.multiplayer-player small {
  grid-column: 1 / -1;
  grid-row: 3;
  color: #c2c1b5;
}
.multiplayer-message-bar {
  width: 100%;
  overflow: hidden;
  padding: 7px 10px 8px;
  border-top: 1px solid #46534d;
  color: #eee8dc;
  background: #132521;
  font-size: .82rem;
  line-height: 1.35;
  white-space: nowrap;
}
.multiplayer-message-text {
  display: inline-flex;
  width: max-content;
  min-width: max-content;
  column-gap: clamp(32px, 8vw, 56px);
  white-space: nowrap;
  transform: translateX(0);
}
.multiplayer-message-copy {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
}
.multiplayer-message-text.is-scrolling {
  animation: multiplayer-message-ticker var(--multiplayer-message-duration, 10s) linear infinite;
}
@keyframes multiplayer-message-ticker {
  from { transform: translateX(var(--multiplayer-message-start, 50%)); }
  to { transform: translateX(calc(var(--multiplayer-message-start, 50%) + var(--multiplayer-message-distance))); }
}
.app-shell.has-multiplayer-round-header {
  height: 100dvh;
  padding-top: var(--multiplayer-round-header-height, 100px);
  overflow: hidden;
}
.app-shell.has-multiplayer-round-header > .screen:not(.is-hidden) {
  height: calc(100dvh - var(--multiplayer-round-header-height, 100px));
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.app-shell.has-multiplayer-round-header #round-title:empty { display: none; }
.app-shell.has-multiplayer-round-header [data-screen="round"] [data-round-title] {
  color: #eee8dc;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: normal;
}

/* 通信対戦：名前パネルの下段状態 */
.multiplayer-player small { min-height: 1.2em; }
.multiplayer-player small.is-action-needed { color: #f0a14a; }
.multiplayer-player small.is-complete { color: #eee8dc; }
.multiplayer-player small.is-disconnected { color: #ef6b61; }

.deck-stack-image.is-passive { cursor: default; opacity: .78; }
.deck-stack-image.is-passive:focus { outline: none; }
#discussion-guide[hidden], #answer-guide-text[hidden] { display: none; }
.word-button.is-selected { border-color: var(--color-accent, #d77622); box-shadow: 0 0 0 2px rgba(215,118,34,.24); }

/* 通信対戦：固定ヘッダー下では、本文の先頭に残る余白を詰める */
.app-shell.has-multiplayer-round-header > .screen:not(.is-hidden) {
  padding-top: 8px;
  padding-bottom: 12px;
}
.app-shell.has-multiplayer-round-header > .screen:not(.is-hidden) .card-area {
  margin-top: 4px;
  margin-bottom: 12px;
}
.app-shell.has-multiplayer-round-header > .discussion-screen:not(.is-hidden) .discussion-layout {
  margin-top: 4px;
  margin-bottom: 10px;
}
.app-shell.has-multiplayer-round-header > .answer-screen:not(.is-hidden) .answer-overview {
  margin-top: 4px;
  margin-bottom: 12px;
}

/* 宴の支度：既存ボタンとフォームを使い、同じ画面内だけでモードを切り替える */
#setup-mode-choice { margin-bottom: 14px; }
#multiplayer-setup > .multiplayer-choice-buttons { margin: 14px 0 10px; }
#resume-stored-room-choice { width: 100%; margin: 0 0 14px; }
#setup-mode-choice .button {
  background: #2b3733;
  color: #c2c1b5;
  box-shadow: inset 0 0 0 1px #46534d;
}
#setup-mode-choice .button.is-selected {
  background: #063b2b;
  color: #fffdf4;
  box-shadow: inset 0 0 0 3px #d77622, 0 0 0 1px #f0c879;
}
#multiplayer-setup .multiplayer-choice-buttons .button {
  background: #1d2b28;
  color: #eee8dc;
  box-shadow: inset 0 0 0 1px #46534d;
}
#multiplayer-setup .multiplayer-choice-buttons .button.is-selected {
  background: #a45d38;
  color: #fff8ed;
  box-shadow: inset 0 0 0 3px #f0c879, 0 0 0 1px #7a3d20;
}
#multiplayer-name { margin-bottom: 14px; }
#host-form[hidden], #join-form[hidden], #single-device-setup[hidden], #multiplayer-setup[hidden] { display: none; }

/* 通信対戦：ひそめごと開帳 */
.result-screen[data-screen="result-open"].is-multiplayer-reveal {
  padding-top: clamp(18px, 5vw, 30px);
  padding-bottom: clamp(18px, 5vw, 30px);
}
.result-screen[data-screen="result-open"].is-multiplayer-reveal #result-open-card-area {
  margin: 4px 0 12px;
}
.result-screen[data-screen="result-open"].is-multiplayer-reveal #selection-summary {
  gap: 7px;
  margin: 0 0 14px;
}
.result-screen[data-screen="result-open"].is-multiplayer-reveal #selection-summary .vote-card {
  padding: 7px 9px;
  border-radius: 10px;
}
.result-screen[data-screen="result-open"].is-multiplayer-reveal #selection-summary .vote-card .word {
  padding: 10px 12px;
  font-size: .95rem;
}
.result-screen[data-screen="result-open"].is-multiplayer-reveal #selection-summary .vote-count,
.result-screen[data-screen="result-open"].is-multiplayer-reveal #selection-summary .voters {
  display: inline;
  font-size: .85rem;
}

.reaction-control{position:relative}.reaction-control.is-hidden{display:none}.reaction-button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:#d39a55;font-size:1.1rem;cursor:pointer}.reaction-button:hover,.reaction-button:focus-visible,.reaction-control.is-open .reaction-button{background:#263630;color:#f0c36e;outline:none}.reaction-palette{position:absolute;z-index:30;top:calc(100% + 8px);right:0;display:grid;grid-template-columns:repeat(4,38px);gap:5px;padding:7px;border:1px solid #68775c;border-radius:10px;background:#192623;box-shadow:0 8px 20px #0008}.reaction-control:not(.is-open) .reaction-palette{display:none}.reaction-palette button{width:38px;height:38px;border:0;border-radius:7px;background:#263630;font-size:1.2rem;cursor:pointer}.reaction-palette button:hover,.reaction-palette button:focus-visible{background:#3a3026;outline:1px solid #d39a55}.multiplayer-player{position:relative}.multiplayer-reaction-bubble{position:absolute;z-index:3;left:50%;top:calc(100% + 5px);bottom:auto;transform:translateX(-50%);display:grid;place-items:center;min-width:34px;height:30px;padding:0 5px;border:1px solid #d5b45f;border-radius:9px;background:#263630;box-shadow:0 4px 10px #000c,0 0 0 2px #14201e;font-size:1.15rem;line-height:1}.multiplayer-reaction-bubble::after{content:"";position:absolute;left:50%;top:-5px;bottom:auto;width:8px;height:8px;background:#263630;border-left:1px solid #d5b45f;border-top:1px solid #d5b45f;transform:translateX(-50%) rotate(45deg)}


/* 通信対戦：宴の待機室 */
.waiting-room.is-hidden { display: none; }
.waiting-room:not(.is-hidden) { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; min-height: 100dvh; padding-bottom: 0; overflow: hidden; }
.waiting-room > h1 { padding-bottom: 12px; font-size: clamp(1.45rem, 6vw, 1.85rem); }
.waiting-room-content { display: grid; align-content: start; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; }
.waiting-section { border: 1px solid #526357; border-radius: 14px; padding: 12px; background: #192623; }
.waiting-section-title { margin: 0 0 9px; color: #eee8dc; font-size: 1.06rem; }
.waiting-player-list { display: grid; gap: 6px; }
.waiting-player { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 10px; background: #263630; font-size: .94rem; }
.waiting-player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.waiting-player-role { flex: 0 0 auto; color: #d39a55; font-size: .78rem; font-weight: 800; }
.waiting-player-disconnected { color: #d5b45f; font-size: .78rem; font-weight: 800; }
.waiting-label, .waiting-settings-label { display: block; color: #c2c1b5; font-size: .78rem; font-weight: 800; }
.waiting-room-number-row { display: flex; align-items: center; gap: 5px; }
.waiting-room-number-row .waiting-label { flex: 0 0 auto; display: inline; color: #eee8dc; font-size: .86rem; }
.waiting-room-number-row strong { min-width: 0; color: #fff8ed; font-size: clamp(1.1rem, 5.4vw, 1.45rem); letter-spacing: .05em; }
.waiting-room .copy-icon-button { flex: 0 0 38px; width: 38px; min-height: 38px; border: 1px solid #68775c; border-radius: 10px; background: #2b3733; color: #eee8dc; }
.waiting-invite-actions { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.waiting-invite-actions .button { min-width: 0; min-height: 42px; padding-inline: 6px; font-size: .78rem; white-space: nowrap; }
.waiting-qr { display: grid; place-items: center; margin: 12px auto 0; }
.waiting-qr.is-hidden { display: none; }
.waiting-qr canvas { display: block; width: min(180px, 56vw); height: auto; max-width: 100%; border-radius: 8px; background: #fffdf4; }
.waiting-settings-section { padding-block: 10px; }
.waiting-settings-label { margin: 0 0 3px; }
.waiting-settings-value { margin: 0; color: #eee8dc; font-size: .86rem; font-weight: 700; line-height: 1.45; }
.waiting-room-actions { z-index: 5; margin-inline: calc(-1 * clamp(16px, 4vw, 28px)); padding: 8px clamp(16px, 4vw, 28px) max(10px, calc(env(safe-area-inset-bottom) + 8px)); border-top: 1px solid #526357; background: #14201ef7; box-shadow: 0 -6px 16px #0005; }
.waiting-room-message { min-height: 1.3em; margin: 0 0 6px; color: #c2c1b5; font-size: .82rem; line-height: 1.3; }
.waiting-room-message:not(:empty) { color: #eee8dc; }
.waiting-room-actions .button-row { margin-top: 0; }
.waiting-room-actions .button { min-height: 48px; }


/* セット・推理時間の選択肢は、端末標準の大きな選択画面ではなく宴の意匠で表示する。 */
.set-select-native { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.set-picker { position: relative; width: 100%; }
.set-picker-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; border: 1px solid #46534d; border-radius: 12px; padding: 0 14px; background: #1d2b28; color: #eee8dc; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.set-picker-trigger:focus-visible, .set-picker.is-open .set-picker-trigger { border-color: #c58b48; outline: 3px solid #76552f; outline-offset: 1px; }
.set-picker-trigger-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-picker-chevron { margin-left: 12px; color: #d6ae67; font-size: 1.25em; line-height: 1; transition: transform .15s ease; }
.set-picker.is-open .set-picker-chevron { transform: rotate(180deg); }
.set-picker-panel { position: fixed; z-index: 60; top: 50%; left: 50%; width: min(440px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 48px)); transform: translate(-50%, -50%); overflow: hidden; border: 1px solid #b88747; border-radius: 14px; background: linear-gradient(155deg, #263b34, #182824); box-shadow: 0 14px 28px #000b, inset 0 0 0 1px #f0c36e22; }
.set-picker-panel[hidden] { display: none; }
.set-picker-title { margin: 0; padding: 10px 14px 8px; border-bottom: 1px solid #92713c88; color: #f0c36e; font-family: Georgia, "Noto Serif JP", serif; font-size: .82rem; font-weight: 700; letter-spacing: .08em; }
.set-picker-options { max-height: min(420px, calc(100dvh - 122px)); overflow-y: auto; overscroll-behavior: contain; }
.set-picker-option { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; border: 0; border-bottom: 1px solid #46534d; padding: 9px 14px; background: transparent; color: #eee8dc; font: inherit; font-size: .92rem; font-weight: 700; line-height: 1.35; text-align: left; cursor: pointer; }
.set-picker-option:last-child { border-bottom: 0; }
.set-picker-option:hover, .set-picker-option:focus-visible { background: #3a3026; color: #fff4d8; outline: none; }
.set-picker-option[aria-selected="true"] { background: #3a3026; color: #f0c36e; }
.set-picker-option-mark { min-width: 1.3em; margin-left: 12px; color: #f0c36e; text-align: right; }