:root {
  font-family: Inter, "Segoe UI", "Noto Sans TC", system-ui, sans-serif;
  color: #20352f;
  background: #f8faf8;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; }
#app { min-height: 100svh; display: flex; flex-direction: column; }
#app > .main { width: 100%; flex: 1 0 auto; }
#app > .site-footer { width: 100%; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid #d35545; outline-offset: 3px; }

.site-header { position: sticky; top: 0; z-index: 30; background: #ffffffed; backdrop-filter: saturate(1.3) blur(14px); box-shadow: 0 1px 0 #183e3114; }
.site-inner { max-width: 1240px; min-height: 68px; margin: 0 auto; padding: 0 30px; display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 18px; font-weight: 800; text-decoration: none; color: #173d3b; }
.logo-mark { display: grid; grid-template-columns: repeat(3, 7px); grid-template-rows: repeat(3, 7px); gap: 2px; padding: 5px; background: #174b47; border-radius: 5px; transform: rotate(-8deg); }
.logo-mark i { display: block; background: #fff; border-radius: 1px; }
.logo-mark i:nth-child(2), .logo-mark i:nth-child(4), .logo-mark i:nth-child(9) { background: #f5bd61; }
.logo-mark i:nth-child(5) { background: #ec6962; }
.main-nav { display: flex; align-items: center; flex: 1; }
.mega-trigger { min-height: 38px; display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px; border: 0; border-radius: 5px; background: none; color: #264b47; font-size: 15px; font-weight: 650; cursor: pointer; }
.mega-trigger:hover, .mega-trigger[aria-expanded="true"] { background: #edf3ef; }
.mega-trigger[data-current="true"] { color: #176b5f; }
.menu-chevron { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.mega-trigger[aria-expanded="true"] .menu-chevron, .lang-menu[open] .menu-chevron { transform: rotate(225deg) translate(-2px, -1px); }
.mega { position: fixed; left: 0; right: 0; z-index: 29; pointer-events: none; }
.mega.is-open { pointer-events: auto; }
.mega-clip { height: 0; overflow: hidden; background: #fff; transition: height .32s cubic-bezier(.4, 0, .6, 1), box-shadow .32s; }
.mega.is-open .mega-clip { box-shadow: 0 15px 30px -24px #12302b47; }
.mega-panel { max-width: 1240px; min-height: 172px; display: flex; flex-wrap: wrap; gap: 40px 92px; margin: 0 auto; padding: 34px 30px 46px; }
.mega-panel[hidden] { display: none; }
.mega-group { min-width: 190px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.mega-label { margin: 0 0 2px; color: #687c76; font-size: 13px; font-weight: 650; }
.mega-group a { color: #244b46; font-size: 15px; font-weight: 650; line-height: 1.4; text-decoration: none; }
.mega-group a:hover { color: #d74d48; }
.mega-group .mega-primary { color: #193d3b; font-size: 25px; font-weight: 800; }
.mega-scrim { position: fixed; left: 0; right: 0; bottom: 0; z-index: 28; opacity: 0; visibility: hidden; pointer-events: none; background: #193d3b24; backdrop-filter: blur(8px); transition: opacity .32s, visibility 0s linear .32s; }
.mega-open .mega-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .32s; }
.mega-open .site-header { background: #fff; }
.lang-menu:not([open]) > ul, .nav-menu:not([open]) > .nav-panel { display: none; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lang-menu { position: relative; }
.lang-menu summary, .nav-menu summary { min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 8px 13px; border: 0; border-radius: 5px; background: #edf3ef; color: #36544a; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.lang-menu summary::-webkit-details-marker, .nav-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary, .nav-menu summary:hover, .nav-menu[open] summary { background: #e0ede5; color: #174b47; }
.lang-menu ul { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 150px; margin: 0; padding: 6px; list-style: none; border-radius: 6px; background: #fff; box-shadow: 0 12px 28px #193d3b20; }
.lang-choice { display: block; padding: 9px 12px; border-radius: 5px; color: #465e5a; font-size: 14px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.lang-choice:hover { background: #eaf2ef; }
.lang-choice[aria-current] { color: #176b5f; font-weight: 800; }
.nav-menu { display: none; }
.nav-menu-close, .nav-menu[open] .nav-menu-open { display: none; }
.nav-menu[open] .nav-menu-close { display: inline; }
.nav-menu-open, .nav-menu-close { width: 18px; text-align: center; font-size: 20px; line-height: 16px; }
.nav-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; background: #fff; box-shadow: 0 16px 30px #193d3b20; }
.nav-panel nav { max-width: 1240px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0 auto; padding: 14px 30px 20px; }
.nav-panel a { min-height: 48px; display: flex; align-items: center; padding: 10px 16px; border-radius: 5px; background: #edf3ef; color: #1e5148; font-size: 15px; font-weight: 750; text-decoration: none; }
.nav-panel a:hover { background: #d9ebe5; }
.nav-panel a[aria-current] { background: #dcece2; }
body:has(.nav-menu[open])::before { content: ''; position: fixed; inset: 60px 0 0; z-index: 29; background: #193d3b24; backdrop-filter: blur(4px); }
.main { max-width: 1240px; margin: 0 auto; padding: 40px 30px 64px; }
.crawl-fallback { max-width: 780px; padding-top: 70px; }
.crawl-fallback h1 { margin: 0 0 18px; color: #193c3b; font-size: 38px; line-height: 1.15; }
.crawl-fallback p { max-width: 650px; color: #425d51; font-size: 16px; line-height: 1.6; }
.crawl-fallback nav { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 27px; }
.crawl-fallback a { color: #176b5f; font-weight: 750; }
.site-footer { max-width: 1240px; margin: 0 auto; padding: 20px 30px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #687d72; font-size: 12px; }
.site-footer a { color: #526e67; text-decoration: none; }
.site-footer a:hover { color: #176b5f; text-decoration: underline; }

.lobby { min-height: calc(100svh - 136px); display: flex; align-items: center; }
.lobby-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr); gap: clamp(36px, 7vw, 100px); align-items: center; }
.lobby-content { max-width: 540px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #5a6e6b; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.eyebrow strong { font-size: 14px; color: #1a4d47; }
.eyebrow-dot { flex: none; width: 8px; height: 8px; background: #e9605a; border-radius: 50%; }
.lobby h1 { margin: 20px 0 28px; color: #193c3b; font-size: 72px; line-height: 1.04; font-weight: 850; }
.title-period { color: #e9605a; }
.form-panel { padding: 25px; background: #edf4ef; border-radius: 6px; }
.form-panel, .join-panel { scroll-margin-top: 80px; }
h2 { margin: 0; font-size: 18px; line-height: 1.35; color: #1d3537; }
.form-panel h2, .join-panel h2 { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; color: #556567; font-size: 13px; font-weight: 700; }
input { width: 100%; height: 47px; padding: 0 14px; color: #233138; background: #fff; border: 1px solid #c9d6d3; border-radius: 5px; outline: none; }
input:focus { border-color: #21837b; box-shadow: 0 0 0 3px #d3e9e5; }
input::placeholder { color: #9aa7a4; }
.button { min-height: 46px; padding: 10px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid transparent; border-radius: 5px; font-size: 14px; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; transition: background .16s ease, transform .16s ease, border-color .16s ease; }
.button:not(:disabled):hover { transform: translateY(-1px); }
.button:disabled { opacity: .53; }
.button.primary { background: #e95f59; color: #fff; }
.button.primary:not(:disabled):hover { background: #d74d48; }
.button.secondary { background: #e0ede5; color: #164b43; }
.button.secondary:not(:disabled):hover { background: #d2e6d9; }
.button.quiet { background: #eef2ed; color: #234341; }
.button.quiet:not(:disabled):hover { background: #e0e9df; }
.button.wide { width: 100%; }
.button span[aria-hidden] { margin-left: auto; font-size: 18px; font-weight: 500; line-height: 1; }
.form-panel .button { margin-top: 16px; }
.join-panel { padding: 25px 0 0; }
.join-panel h2 { margin-bottom: 12px; }
.join-row { display: flex; gap: 8px; }
.join-row input { min-width: 0; text-transform: uppercase; font-weight: 750; }
.join-row .button { min-width: 126px; }
.lobby-visual { padding: 28px; background: #174b47; border-radius: 6px; color: #fff; }
.preview-top, .preview-bottom { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 750; }
.preview-bottom { padding-top: 20px; color: #d6e8e1; }
.preview-bottom span:first-child { font-size: 32px; line-height: 1; color: #fff; }
.preview-live { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #ffe9bd; }
.preview-live i, .live-label i { width: 7px; height: 7px; background: #e95f59; border-radius: 50%; }
.sample-board { width: 100%; margin-top: 19px; padding: 12px; background: #fff; border-radius: 5px; }
.sample-letters, .sample-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.sample-letters { padding-bottom: 8px; }
.sample-letters span { color: #225950; font-size: 20px; font-weight: 900; text-align: center; }
.sample-cells span { display: grid; place-items: center; aspect-ratio: 1; background: #f1f5f3; border-radius: 3px; color: #24403e; font-size: 27px; font-weight: 800; }
.sample-cells span.sample-hit { background: #eaf0fb; color: #2d5eaa; }
.sample-cells span.sample-free { background: #fbe2c2; color: #a24d25; }

.notice { margin: 0 0 18px; padding: 13px 16px; border-radius: 5px; font-size: 14px; }
.notice.error { color: #a83734; background: #fff1ef; }
.notice.success { color: #185a4d; background: #eaf6f0; }
.center-state { min-height: calc(100svh - 145px); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 22px; text-align: center; }
.center-state h1 { margin: 0; font-size: 26px; }
.loader { width: 44px; height: 44px; border: 4px solid #d8e7e1; border-top-color: #df6158; border-radius: 50%; animation: spin .8s linear infinite; }
.empty-mark { display: grid; place-items: center; width: 76px; height: 76px; background: #e7efec; border-radius: 50%; color: #78928b; font-size: 44px; font-weight: 800; }
@keyframes spin { to { transform: rotate(360deg); } }

.room-page { padding-top: 34px; }
.room-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 25px; }
.room-heading h1 { max-width: 780px; margin: 11px 0 0; color: #193c3b; font-size: 42px; line-height: 1.13; overflow-wrap: anywhere; }
.role-tag { margin-left: 5px; padding: 5px 8px; background: #e4eeeb; border-radius: 3px; color: #31645d; font-size: 10px; }
.back-link { flex: none; padding-top: 4px; color: #667a76; font-size: 13px; font-weight: 700; text-decoration: none; }
.back-link:hover { color: #d64e48; }
.room-stats { max-width: 770px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 0 10px; }
.room-stats div { display: flex; flex-direction: column; gap: 5px; padding: 15px 18px; border-radius: 5px; background: #edf3ef; }
.room-stats span { color: #81908b; font-size: 12px; font-weight: 650; }
.room-stats strong { color: #1c3c3a; font-size: 24px; line-height: 1; }
.host-grid { display: grid; grid-template-columns: minmax(0, 1fr) 294px; gap: 38px; margin-top: 28px; }
.draw-stage { position: relative; min-height: 310px; padding: 30px; display: flex; flex-direction: column; align-items: center; background: #193d3b; border-radius: 6px; color: #fff; overflow: hidden; }
.draw-stage::before, .draw-stage::after { content: none; }
.draw-stage::before { top: -54px; right: 32px; }
.draw-stage::after { bottom: -65px; left: -20px; }
.stage-label { align-self: flex-start; color: #b4d2ca; font-size: 13px; font-weight: 700; }
.presentation-exit { position: absolute; top: 19px; right: 19px; z-index: 2; padding: 8px 11px; border: 1px solid #ffffff70; border-radius: 4px; color: #fff; background: #ffffff18; font-size: 12px; font-weight: 750; }
.presentation-exit:hover { background: #ffffff2c; }
.stage-ball { margin: 6px 0; }
.call-ball { width: 147px; height: 147px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border: 7px solid #f6e8d3; border-radius: 50%; color: #1a3b39; }
.call-ball .ball-letter { font-size: 17px; font-weight: 900; line-height: 1; }
.call-ball strong { font-size: 60px; line-height: 1; }
.call-ball.empty span { color: #779591; font-size: 60px; font-weight: 800; }
.call-ball.tone-b { border-color: #9ed7c8; }
.call-ball.tone-i { border-color: #ebae9d; }
.call-ball.tone-n { border-color: #f5ce79; }
.call-ball.tone-g { border-color: #afd2e4; }
.call-ball.tone-o { border-color: #cbbde8; }
.stage-meta { min-height: 19px; color: #bcdad2; font-size: 12px; font-weight: 800; }
.draw-button { width: min(100%, 260px); margin-top: 20px; }
.board-section { margin-top: 35px; }
.section-heading { min-height: 35px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.section-heading h2 { font-size: 17px; }
.section-heading > span { color: #83918d; font-size: 12px; font-weight: 750; }
.number-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.number-column { display: grid; grid-template-rows: 42px repeat(15, 32px); gap: 4px; min-width: 0; }
.number-letter { display: grid; place-items: center; color: #fff; border-radius: 4px; background: #2c6e67; font-size: 22px; font-weight: 900; }
.number-letter.tone-i { background: #cf6a5d; }
.number-letter.tone-n { background: #cc962d; }
.number-letter.tone-g { background: #4b86a7; }
.number-letter.tone-o { background: #876eb1; }
.number-chip { display: grid; place-items: center; min-width: 0; background: #e9eeec; border-radius: 3px; color: #60756e; font-size: 13px; font-weight: 750; }
.number-chip.is-called { color: #1e4e47; background: #cce7dc; }
.host-side { display: flex; flex-direction: column; gap: 29px; }
.invite-section, .winners, .host-actions, .latest-call, .recent-calls { padding-top: 12px; }
.invite-code { display: grid; place-items: center; height: 86px; margin: 10px 0 16px; background: #e7f1e9; border-radius: 5px; color: #1b5047; font-size: 35px; font-weight: 850; }
.text-action { margin-top: 12px; padding: 6px 0; border: 0; background: none; color: #396b63; font-size: 12px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.text-action.danger { color: #bf5753; }
.winners ol { margin: 0; padding: 0; list-style: none; }
.winners li { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.winners p, .recent-list p { margin: 8px 0 0; color: #899993; font-size: 13px; }
.winner-icon { width: 26px; height: 26px; display: grid; place-items: center; background: #ffedca; border-radius: 50%; color: #a36628; }

.join-layout { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 390px); gap: 75px; align-items: center; margin-top: 54px; }
.join-card { padding: 32px; background: #edf4ef; border-radius: 6px; }
.join-card h2 { margin: 13px 0 30px; font-size: 27px; }
.join-card .button { margin-top: 16px; }
.join-art .sample-board { margin: 0; padding: 16px; }
.join-art .sample-cells span { font-size: 24px; }

.player-layout { display: grid; grid-template-columns: minmax(0, 600px) minmax(240px, 1fr); gap: clamp(35px, 7vw, 100px); margin-top: 28px; }
.card-area { max-width: 600px; }
.card-area .section-heading { align-items: baseline; }
.player-board { width: 100%; padding: 10px; background: #fff; border-radius: 6px; }
.player-letters, .player-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.player-letters { padding-bottom: 8px; }
.player-letters span { display: grid; place-items: center; min-height: 40px; background: #1d5b54; border-radius: 3px; color: #fff; font-size: 23px; font-weight: 900; }
.player-letters span:nth-child(2) { background: #cf6a5d; }
.player-letters span:nth-child(3) { background: #cc962d; }
.player-letters span:nth-child(4) { background: #4b86a7; }
.player-letters span:nth-child(5) { background: #876eb1; }
.card-cell { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 3px; background: #f0f4f1; color: #2a4540; font-size: 36px; font-weight: 800; }
.card-cell:disabled { cursor: default; }
.card-cell.available { background: #dfeee6; }
.card-cell.marked { background: #1c7769; color: #fff; }
.card-cell.free-cell { background: #f9dfb5; color: #9b5d25; }
.free-star { font-size: 35px; }
.board-hint { min-height: 22px; margin: 13px 0 16px; color: #768681; font-size: 13px; }
.claim-button { min-width: 170px; font-size: 17px; }
.claim-button.won { background: #dff1e7; color: #1b6a4d; }
.player-side { display: flex; flex-direction: column; gap: 28px; }
.latest-call .call-ball.small { width: 100px; height: 100px; margin: 10px auto 0; border-width: 5px; }
.latest-call .call-ball.small strong { font-size: 40px; }
.latest-call .call-ball.small .ball-letter { font-size: 12px; }
.live-label { display: flex; align-items: center; gap: 6px; }
.recent-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 42px; }
.recent-list span { padding: 7px 9px; border-radius: 3px; color: #2e5751; background: #e8f0ec; font-size: 12px; font-weight: 800; }
.win-banner { display: flex; align-items: center; gap: 13px; max-width: 770px; margin: 0 0 20px; padding: 13px 18px; border-radius: 5px; background: #fff2cd; color: #805719; font-size: 18px; font-weight: 850; }
.win-banner span { font-size: 26px; }

.tools-page { padding-top: 42px; }
.tool-page-heading { margin-bottom: 28px; }
.tool-page-heading h1 { margin: 12px 0 0; color: #193c3b; font-size: 42px; line-height: 1.15; }
.tool-tabs { display: flex; gap: 10px; }
.tool-tabs button { min-height: 42px; padding: 10px 15px; border: 0; border-radius: 5px; background: #edf3ef; color: #60736e; font-size: 15px; font-weight: 750; }
.tool-tabs button[aria-selected="true"] { background: #244f46; color: #fff; }
.tool-section { padding-top: 30px; scroll-margin-top: 80px; }
.tool-section[hidden], .tool-error[hidden] { display: none; }
.caller-layout { display: grid; grid-template-columns: minmax(280px, 350px) minmax(0, 1fr); gap: 44px; align-items: start; }
.caller-control { position: sticky; top: 90px; padding: 26px; border-radius: 6px; background: #edf4ef; }
.tool-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tool-section-heading h2, .caller-board-wrap h2 { font-size: 17px; }
.tool-section-heading span { color: #7b8d86; font-size: 13px; font-weight: 750; }
.caller-current { min-height: 190px; display: grid; place-items: center; }
.caller-current .call-ball { box-shadow: none; }
.caller-remaining { margin-bottom: 17px; color: #6d827a; font-size: 13px; font-weight: 700; text-align: center; }
.caller-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.caller-actions [data-tool="draw"], .caller-actions [data-tool="fullscreen"] { grid-column: 1 / -1; }
.caller-board-wrap h2 { margin: 3px 0 17px; }
.caller-board .number-column { grid-template-rows: 38px repeat(15, 30px); }
.caller-board .number-chip { font-size: 13px; }
.caller-tool:fullscreen { padding: 30px; overflow: auto; background: #f6f8f7; }
.caller-tool:fullscreen .caller-layout { max-width: 1250px; margin: 0 auto; }
.caller-tool:fullscreen .caller-control { position: static; }
.card-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.card-controls label { margin-bottom: 6px; }
.card-controls input { width: 120px; }
.card-controls .button { min-height: 47px; }
.tool-error { margin: 0 0 18px; color: #ad3d39; font-size: 14px; }
.cards-output { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.generated-card { min-width: 0; padding: 18px; border-radius: 6px; background: #edf4ef; }
.generated-card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: #244b46; }
.generated-card-title strong { font-size: 17px; }
.generated-card-title span { color: #889c94; font-size: 12px; font-weight: 750; }
.generated-card .player-letters { gap: 4px; }
.generated-card .player-letters span { min-height: 34px; font-size: 19px; }
.generated-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.generated-cells span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 3px; background: #f0f5f2; color: #24403e; font-size: 25px; font-weight: 800; }
.generated-cells .free-cell { background: #f9dfb5; color: #9b5d25; }
.privacy-page { max-width: 880px; padding-top: 42px; }
.privacy-page h1 { margin: 12px 0 8px; color: #193c3b; font-size: 42px; line-height: 1.15; }
.privacy-updated { margin: 0 0 30px; color: #7b8d86; font-size: 13px; }
.privacy-page section { padding: 20px 0; }
.privacy-page section h2 { margin-bottom: 12px; font-size: 19px; }
.privacy-page p, .privacy-page li { color: #3c504b; font-size: 15px; line-height: 1.75; }
.privacy-page p { margin: 0 0 12px; }
.privacy-page p:last-child { margin-bottom: 0; }
.privacy-page ul { margin: 0; padding-left: 22px; }
.privacy-page a { color: #176b5f; }

.social-page, .nono-page { min-height: calc(100svh - 137px); padding-top: 48px; }
.social-heading h1, .social-top h1, .nono-heading h1 { margin: 12px 0 0; color: #193c3b; font-size: 46px; line-height: 1.12; overflow-wrap: anywhere; }
.social-entry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 920px; margin-top: 32px; }
.social-form { padding: 28px; background: #edf4ef; border-radius: 6px; }
.social-form:nth-child(2) { background: #f2f0e9; }
.social-form h2 { font-size: 21px; }
.social-form p { min-height: 42px; margin: 10px 0 22px; color: #637a73; font-size: 14px; line-height: 1.5; }
.social-form label:not(:first-child) { margin-top: 15px; }
.social-form .button { margin-top: 20px; }
.social-page .back-link { display: inline-block; margin-bottom: 25px; }
.social-top { display: flex; justify-content: space-between; align-items: end; gap: 22px; margin-bottom: 28px; }
.social-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; }
.social-main { min-width: 0; }
.social-stage { min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; border-radius: 6px; background: #e1eee6; color: #214b40; text-align: center; }
.social-stage.word-stage { background: #f9edda; color: #754324; }
.social-stage.result-stage { background: #e5e8f3; color: #303f6a; }
.social-stage .stage-kicker { color: inherit; opacity: .75; font-size: 13px; font-weight: 750; text-transform: uppercase; }
.social-stage > strong { margin: 19px 0 8px; font-size: 78px; line-height: 1; overflow-wrap: anywhere; }
.social-stage > strong small { color: inherit; opacity: .55; font-size: 28px; }
.social-stage > strong.secret-word { font-size: clamp(38px, 5vw, 68px); }
.social-stage p { margin: 10px 0 18px; color: inherit; opacity: .8; font-size: 14px; }
.social-stage .button.quiet { background: #fff; color: inherit; }
.social-instruction { margin: 18px 0; color: #5d726b; font-size: 14px; line-height: 1.6; }
.social-main > .button { margin-top: 12px; }
.social-people { padding-top: 4px; }
.social-people ol { display: grid; gap: 5px; margin: 14px 0 0; padding: 0; list-style: none; }
.social-people li { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 5px; background: #edf3ef; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.social-people li b { color: #27756a; }
.vote-button { flex: none; padding: 7px 11px; border: 0; border-radius: 4px; background: #fff; color: #1c5b51; font-size: 12px; font-weight: 800; }
.vote-button.selected { background: #ffe3c7; color: #8c5527; }
.vote-count { color: #657b74; font-size: 13px; }
.word-result { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 20px; margin: 12px 0 20px; color: inherit; font-size: 15px; }
.word-result b { color: inherit; }
.nono-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.nono-heading p { margin: 0 0 5px; color: #667a72; font-size: 14px; }
.nono-layout { display: grid; grid-template-columns: minmax(0, 650px) minmax(220px, 1fr); gap: 48px; align-items: start; }
.nono-play { min-width: 0; }
.nono-play-top { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.nono-play-top span { color: #728880; font-size: 12px; font-weight: 750; }
.nono-play-top h2 { margin-top: 4px; font-size: 24px; }
.nono-play-top strong { color: #236a5f; font-size: 15px; }
.nono-board { width: min(100%, 560px); display: grid; grid-template-columns: minmax(52px, 1fr) repeat(8, minmax(0, 1fr)); grid-template-rows: minmax(52px, 1fr) repeat(8, minmax(0, 1fr)); gap: 1px; aspect-ratio: 1; background: #c6d7cd; }
.nono-corner, .nono-clue, .nono-cell { min-width: 0; min-height: 0; border: 0; }
.nono-corner { background: #e4eee7; }
.nono-clue { display: flex; align-items: center; justify-content: center; gap: 2px; background: #e4eee7; color: #254d45; font-size: 14px; }
.nono-clue b { font-weight: 800; }
.nono-clue i { color: #6a8c7c; font-size: 12px; font-style: normal; }
.nono-clue.col-clue { flex-direction: column; }
.nono-cell { width: 100%; height: 100%; display: grid; place-items: center; padding: 0; border-radius: 0; background: #fff; color: #9ab0a8; font-size: 26px; font-weight: 600; touch-action: manipulation; }
.nono-cell:hover:not(:disabled) { background: #e8f2ed; }
.nono-cell.filled, .nono-cell.filled:hover:not(:disabled) { background: #2b6f65; }
.nono-cell.crossed { background: #f3f6f3; }
.nono-cell:disabled { cursor: default; }
.nono-controls { max-width: 560px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.nono-modes { display: flex; gap: 6px; }
.nono-modes button { min-height: 42px; padding: 8px 12px; border: 0; border-radius: 4px; background: #e7eee8; color: #315850; font-size: 13px; font-weight: 750; }
.nono-modes button[aria-pressed="true"] { background: #2b6f65; color: #fff; }
.nono-actions { display: flex; gap: 6px; }
.nono-actions .button { width: 42px; min-height: 42px; padding: 5px; font-size: 22px; }
.nono-win { max-width: 560px; margin-top: 14px; padding: 11px 15px; border-radius: 4px; background: #e7f3e8; color: #276144; font-weight: 800; }
.nono-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding-top: 4px; }
.nono-library h2 { grid-column: 1 / -1; margin-bottom: 8px; font-size: 17px; }
.nono-choice { min-width: 0; min-height: 60px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px; padding: 8px 11px; border: 0; border-radius: 5px; background: #edf3ef; color: #244940; text-align: left; }
.nono-choice:hover { background: #e2ede6; }
.nono-choice span { font-size: 13px; font-weight: 750; }
.nono-choice b { color: #84968c; font-size: 11px; }
.nono-choice.active { background: #cee7d7; color: #174c3b; }
.hub-page { padding-top: 48px; padding-bottom: 72px; }
.hub-page h1 { margin: 13px 0 30px; color: #193c3b; font-size: 44px; }
.hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ad-slot { min-width: 0; min-height: 120px; margin-top: 54px; }
.ad-slot > span { display: block; margin-bottom: 14px; color: #7b8d86; font-size: 12px; }
.ad-slot > div { max-width: 100%; }
.hub-game { min-width: 0; display: block; border-radius: 6px; text-decoration: none; }
.hub-game:hover .hub-art { transform: translateY(-3px); }
.hub-game:hover .hub-info strong { color: #a82f2e; }
.hub-art { height: 205px; display: grid; place-items: center; border-radius: 6px; transition: transform .16s ease; }
.hub-art.bingo { background: #deebf1; }.hub-art.impostor { background: #f9e5d8; }.hub-art.nonogram { background: #e6e5f2; }
.hub-bingo { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; max-width: 205px; }
.hub-bingo span { width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #1e4b45; font-size: 30px; font-weight: 850; }
.hub-bingo span:nth-child(2) { background: #e96f68; color: #fff; }.hub-bingo span:nth-child(3) { background: #f6ce7f; }.hub-bingo span:nth-child(4) { background: #638ca4; color: #fff; }
.hub-impostor { display: flex; gap: 7px; transform: rotate(-8deg); }
.hub-impostor span { width: 70px; height: 92px; display: grid; place-items: center; border-radius: 5px; background: #fff; color: #9c633f; font-size: 46px; font-weight: 800; }
.hub-impostor span:last-child { background: #e86759; color: #fff; }
.hub-nonogram { width: 160px; height: 160px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; transform: rotate(-6deg); }
.hub-nonogram i { background: #fff; }.hub-nonogram i:nth-child(2), .hub-nonogram i:nth-child(3), .hub-nonogram i:nth-child(5), .hub-nonogram i:nth-child(8), .hub-nonogram i:nth-child(9), .hub-nonogram i:nth-child(12), .hub-nonogram i:nth-child(14), .hub-nonogram i:nth-child(15) { background: #5b668c; }
.hub-info { padding: 18px 2px; }.hub-info span { color: #5d766a; font-size: 12px; font-weight: 750; }.hub-info h2 { margin: 7px 0 5px; font-size: 23px; }.hub-info p { min-height: 34px; margin: 0 0 14px; color: #526c5f; font-size: 14px; line-height: 1.5; }.hub-info strong { color: #c74d47; font-size: 14px; }

.presentation .site-header, .presentation .site-footer, .presentation .room-heading, .presentation .room-stats, .presentation .host-side { display: none; }
.presentation .room-page { padding-top: 20px; max-width: 1320px; }
.presentation .host-grid { display: block; margin: 0; }
.presentation .draw-stage { min-height: 330px; }
.presentation .call-ball { width: 175px; height: 175px; }
.presentation .call-ball strong { font-size: 74px; }
.presentation .board-section { margin-top: 16px; }
.presentation .number-column { grid-template-rows: 34px repeat(15, minmax(20px, 1fr)); }
.presentation .number-board { height: min(54vh, 690px); }
.not-found { min-height: 100svh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 24px; }

@media (max-width: 850px) {
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-layout, .nono-layout { grid-template-columns: 1fr; gap: 30px; }
  .social-people, .nono-library { max-width: 650px; }
  .lobby h1 { font-size: 58px; }
  .room-heading h1 { font-size: 36px; }
  .card-cell { font-size: 30px; }
  .lobby-grid { grid-template-columns: 1fr; gap: 35px; }
  .lobby-content { max-width: none; }
  .lobby-visual { width: min(100%, 480px); justify-self: center; }
  .host-grid, .player-layout { grid-template-columns: 1fr; gap: 35px; }
  .host-side, .player-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .host-actions { align-self: stretch; }
  .join-layout { gap: 30px; }
  .caller-layout { grid-template-columns: 1fr; gap: 26px; }
  .caller-control { position: static; }
}

@media (max-width: 1023.98px) {
  .site-inner { min-height: 60px; }
  .main-nav { display: none; }
  .nav-menu { display: block; }
  .mega, .mega-scrim { display: none; }
}

@media (max-width: 560px) {
  .hub-page { padding-top: 26px; }.hub-page h1 { font-size: 36px; }.hub-grid { grid-template-columns: 1fr; }.hub-art { height: 175px; }
  .social-page, .nono-page { padding-top: 26px; }
  .social-heading h1, .social-top h1, .nono-heading h1 { font-size: 36px; }
  .social-entry { grid-template-columns: 1fr; gap: 18px; }
  .social-form { padding: 21px; }
  .social-form p { min-height: auto; }
  .social-top, .nono-heading { align-items: flex-start; flex-direction: column; }
  .social-stage { min-height: 280px; padding: 20px; }
  .social-stage > strong { font-size: 64px; }
  .nono-board { width: 100%; grid-template-columns: minmax(43px, 1fr) repeat(8, minmax(0, 1fr)); grid-template-rows: minmax(43px, 1fr) repeat(8, minmax(0, 1fr)); }
  .nono-clue { gap: 1px; font-size: 11px; }
  .nono-cell { font-size: 20px; }
  .nono-controls { justify-content: center; }
  .nono-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-inner { min-height: 60px; padding: 0 12px; gap: 8px; }
  .brand { gap: 8px; font-size: 16px; }
  .header-actions { gap: 6px; }
  .lang-menu summary, .nav-menu summary { padding: 7px 10px; }
  .nav-panel nav { padding: 12px 16px 18px; }
  .main { padding: 26px 16px 45px; }
  .site-footer { padding: 18px 16px 22px; }
  .lobby { min-height: auto; }
  .lobby h1 { margin: 15px 0 24px; font-size: 46px; }
  .lobby-visual { width: 100%; padding: 20px; }
  .form-panel { padding: 20px; }
  .join-row .button { min-width: 110px; white-space: nowrap; }
  .sample-cells span { font-size: 20px; }
  .room-page { padding-top: 25px; }
  .room-heading { margin-bottom: 21px; }
  .room-heading h1 { font-size: 31px; }
  .room-stats { padding-bottom: 18px; }
  .room-stats strong { font-size: 21px; }
  .host-grid, .player-layout { margin-top: 22px; }
  .draw-stage { min-height: 300px; padding: 22px; }
  .number-column { grid-template-rows: 38px repeat(15, 30px); gap: 3px; }
  .number-board { gap: 3px; }
  .number-chip { font-size: 12px; }
  .host-side, .player-side { display: flex; flex-direction: column; gap: 25px; }
  .join-layout { grid-template-columns: 1fr; margin-top: 30px; }
  .join-card { padding: 25px; }
  .join-art { display: none; }
  .player-board { padding: 6px; }
  .player-letters, .player-cells { gap: 3px; }
  .player-letters span { min-height: 35px; font-size: 20px; }
  .card-cell { font-size: 27px; }
  .free-star { font-size: 25px; }
  .tool-page-heading h1, .privacy-page h1 { font-size: 34px; }
  .cards-output { grid-template-columns: 1fr; }
  .generated-card { padding: 12px; }
  .generated-cells span { font-size: 21px; }
  .caller-control { padding: 20px; }
  .caller-board .number-column { grid-template-rows: 36px repeat(15, 29px); }
  .claim-button { width: 100%; }
  .presentation .room-page { padding: 10px 12px; }
  .presentation .draw-stage { min-height: 260px; }
  .presentation .number-board { height: 53vh; }
  .presentation .number-column { grid-template-rows: 30px repeat(15, minmax(15px, 1fr)); gap: 2px; }
}

@media print {
  body { background: #fff; }
  .site-header, .site-footer, .room-heading, .room-stats, .player-side, .card-area .board-hint, .card-area .claim-button, .notice, .win-banner { display: none !important; }
  .main, .player-layout { padding: 0; margin: 0; display: block; }
  .card-area { width: 100%; max-width: none; }
  .player-board { max-width: 700px; box-shadow: none; }
  .card-cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ad-slot, body.print-cards .tool-page-heading, body.print-cards .tool-tabs, body.print-cards .caller-tool, body.print-cards .card-controls, body.print-cards .tool-error { display: none !important; }
  body.print-cards .tools-page, body.print-cards .cards-tool { display: block !important; padding: 0; }
  body.print-cards .cards-output { display: block; }
  body.print-cards .generated-card { width: 170mm; max-width: 100%; margin: 0 auto; padding: 10mm; border: 0; break-after: page; box-shadow: none; }
  body.print-cards .generated-card:last-child { break-after: auto; }
  body.print-cards .generated-cells span, body.print-cards .generated-card .player-letters span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}