body.city-page { height: auto; min-height: 100%; overflow: auto; }
.city-page .masthead { position: relative; top: auto; left: auto; right: auto; margin: 30px 4.2% 0; }
.city-page h1 { white-space: normal; transform: none; will-change: auto; line-height: 1.03; letter-spacing: -.075em; font-size: clamp(54px, 7vw, 104px); }
.city-shell { width: min(1180px, 91.6%); margin: 72px auto 100px; }
.page-heading { position: relative; padding-bottom: 40px; margin-bottom: 35px; border-bottom: 1px solid #111; }
.eyebrow { margin: 0 0 20px; font: 10px/1.6 'Courier New', monospace; letter-spacing: .12em; color: #777; }
.heading-dot { margin-left: .06em; }
.page-intro { margin: 24px 0 0; color: #666; font-size: 15px; line-height: 1.8; white-space: pre-line; max-width: 600px; }
.page-heading .page-intro { max-width: 530px; }
.page-status { margin: 20px 0; padding: 14px 17px; border-left: 2px solid #111; background: #f0f0f0; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.page-status:empty { display: none; }
.page-status .button { margin: 10px 0 0; }
.collection { margin-top: 50px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid #d5d5d5; }
.section-heading h2 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.section-heading > span { font: 11px 'Courier New', monospace; color: #888; }
.city-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; padding-top: 22px; }
.city-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 260px; padding: 28px; border: 1px solid #d5d5d5; background: #fafafa; }
.city-card h3 { margin: 0 0 14px; font-size: 28px; letter-spacing: -.055em; overflow-wrap: anywhere; }
.city-card > p { font-size: 13px; line-height: 1.8; color: #777; margin: 0 0 18px; white-space: pre-line; overflow-wrap: anywhere; }
.city-card .eyebrow { font-size: 10px; }
.card-meta { color: #888; margin-top: auto; font: 10px/1.6 'Courier New', monospace; }
.card-actions { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 23px; }
.button { display: inline-flex; gap: 26px; justify-content: space-between; align-items: center; min-height: 42px; padding: 12px 20px; background: #080808; border: 1px solid #080808; border-radius: 0; color: #fff; text-decoration: none; cursor: pointer; font: 12px/1.5 Arial, sans-serif; letter-spacing: .04em; }
.button:hover { background: #333; }
.button.secondary { background: transparent; color: #080808; border-color: #bdbdbd; }
.button.secondary:hover { border-color: #080808; }
.button:disabled { opacity: .45; cursor: wait; }
.button:focus-visible, .text-link:focus-visible, .back-link:focus-visible, .city-page input:focus-visible, .city-page select:focus-visible, .city-page summary:focus-visible { outline: 2px solid #080808; outline-offset: 4px; }
.text-link, .back-link { color: #555; font-size: 12px; text-decoration: none; }
.text-link:hover, .back-link:hover { color: #080808; text-decoration: underline; }
.back-link { display: inline-block; margin-bottom: 30px; }
.muted { color: #777; font-size: 13px; line-height: 1.8; }
.section-note { margin-bottom: 0; }
.empty-state { grid-column: 1/-1; margin: 0; padding: 40px 0; color: #888; font-size: 13px; }
.resume-panel { display: flex; align-items: center; justify-content: space-between; gap: 25px; border: 1px solid #080808; padding: 25px 28px; }
.resume-panel .eyebrow { margin-bottom: 12px; }
.resume-panel h2 { margin: 0 0 10px; font-size: 20px; }
.resume-panel p:last-child { color: #777; font-size: 13px; margin: 0; line-height: 1.65; }
.detail-title { max-width: 900px; overflow-wrap: anywhere; }
.detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 36px; }
.version-select { display: flex; align-items: center; gap: 14px; color: #777; font-size: 12px; }
.city-page select, .city-page input:not([type=radio]) { background: transparent; border: 1px solid #bbb; border-radius: 0; padding: 12px; color: #080808; font: inherit; min-width: 0; }
.archive-level { margin-top: 40px; }
.archive-level h2 { font-size: 23px; letter-spacing: -.025em; margin: 0 0 20px; }
.archive-question { border-top: 1px solid #d5d5d5; padding: 25px 0; }
.archive-question:last-child { border-bottom: 1px solid #d5d5d5; }
.archive-question h3 { margin: 0 0 14px; font-size: 17px; font-weight: 500; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.archive-question .answer-copy { margin: 16px 0 0; padding: 14px 17px; background: #efefef; font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.choice-list { padding-left: 25px; color: #777; font-size: 13px; line-height: 1.9; }
.team-shell { max-width: 980px; }
.join-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding: 25px 0 40px; }
.join-panel h2 { margin: 0 0 20px; font-size: 26px; letter-spacing: -.04em; }
.join-panel form { display: grid; gap: 16px; }
.join-panel label { font-size: 12px; }
.join-panel small { font-size: 11px; color: #888; line-height: 1.8; }
.city-page input.room-code { font: 43px/1.3 'Courier New', monospace; letter-spacing: .25em; padding: 17px 20px; width: 100%; }
.rules-strip { margin-top: 30px; border-top: 1px solid #d5d5d5; padding-top: 24px; display: flex; justify-content: space-between; gap: 20px; font: 11px/1.8 'Courier New', monospace; color: #888; }
.city-footer { margin: 0 4.2%; border-top: 1px solid #ddd; padding: 25px 0 32px; display: flex; justify-content: space-between; gap: 20px; color: #888; font: 10px/1.8 'Courier New', monospace; letter-spacing: .08em; }
.city-footer a { color: #777; text-decoration: none; }
.game-shell { margin-top: 50px; }
.game-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 35px; }
.city-page h1.game-title { font-size: clamp(36px,4.5vw,68px); letter-spacing: -.055em; overflow-wrap: anywhere; }
.room-stamp { text-align: right; flex-shrink: 0; }
.room-stamp span { font: 9px 'Courier New', monospace; color: #888; letter-spacing: .14em; }
.room-stamp strong { display: block; font: 30px/1.4 'Courier New', monospace; letter-spacing: .12em; }
.room-stamp p { margin: 3px 0 0; font-size: 10px; color: #888; }
.member-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid #d5d5d5; margin-bottom: 30px; }
.member-card { padding: 17px 18px; display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: center; border-right: 1px solid #ddd; min-width: 0; }
.member-card:last-child { border-right: 0; }
.member-card.is-me { background: #efefef; }
.member-avatar { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; background: #080808; color: #fff; display: grid; place-items: center; font-size: 11px; grid-row: 1/3; }
.member-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-meta { font-size: 10px; color: #888; margin-top: 5px; }
.game-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 32px; }
.match-lifetime { margin: -10px 0 25px; padding: 14px 18px; border: 1px solid #ddd; background: var(--paper); }
.match-lifetime p { margin: 0; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.match-lifetime p + p { margin-top: 3px; }
.task-panel { padding: 30px; border: 1px solid #d5d5d5; }
.city-intro-images { display: grid; gap: 24px; margin-top: 30px; }
.city-intro-images img { display: block; width: 100%; height: auto; }
.story-content { font-size: 15px; line-height: 2; overflow-wrap: anywhere; }
.story-section + .story-section { margin-top: 30px; }
.story-section h3 { margin: 0 0 18px; font-size: 19px; font-weight: 500; }
.story-section p { margin: 0 0 18px; white-space: pre-wrap; }
.story-confirmations { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 18px; }
.story-confirmations p { margin: 0; padding: 10px 4px; border: 1px solid #d5d5d5; text-align: center; font-size: 12px; }
.task-panel > h2 { margin: 0 0 20px; font-size: 25px; font-weight: 500; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-panel .eyebrow { margin-bottom: 20px; }
.task-panel .button { margin-top: 20px; }
.task-panel form { display: grid; gap: 14px; }
.task-panel form > div { display: grid; gap: 12px; }
.task-panel form .button { margin-top: 3px; justify-self: start; }
.task-panel label { font-size: 12px; }
.task-panel input:not([type=radio]), .task-panel select { width: 100%; font-size: 14px; }
.grid-scroll { min-width:0; max-width:100%; overflow-x:auto; }
.answer-grid { display:grid; grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr)); width:min(100%,calc(var(--grid-columns) * 44px)); min-width:calc(var(--grid-columns) * 24px); }
.answer-grid-cell { position:relative; aspect-ratio:1; min-width:0; border-style:solid; border-color:#111; }
.city-page .answer-grid .grid-cell-input { display:block; width:100%; height:100%; min-height:0; padding:0; border:0; font-size:18px; line-height:1; text-align:center; background:transparent; color:inherit; border-radius:0; }
.city-page .answer-grid .grid-cell-input:focus { outline:2px solid currentColor; outline-offset:-2px; }
.question-images { display:flex; flex-wrap:wrap; gap:16px; margin:0 0 18px; }
.question-images:empty { display:none; }
.question-images figure { max-width:100%; margin:0; }
.question-images img { display:block; width:auto; max-width:100%; max-height:540px; object-fit:contain; background:#fff; }
.question-images figcaption { margin-top:7px; font-size:11px; color:#777; }
.task-panel form > .rich-editor { display:block; }
.question-rich-prompt { margin-bottom:20px; }
.radio-choice { display: flex; gap: 12px; align-items: baseline; padding: 15px; border: 1px solid #d5d5d5; cursor: pointer; line-height: 1.6; overflow-wrap: anywhere; }
.radio-choice:has(input:checked) { border-color: #080808; }
.task-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.sidebar-panel { border: 1px solid #d5d5d5; padding: 22px; margin-bottom: 18px; }
.sidebar-panel h2 { margin: 0 0 18px; font-size: 15px; font-weight: 600; }
.crystal-value { font: 36px/1.3 'Courier New', monospace; letter-spacing: -.08em; margin: 0; }
.sidebar-panel .muted { font-size: 11px; margin-bottom: 0; }
.ball-row { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.ball { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 50%; background: #fafafa; border: 1px solid #aaa; color: #111; flex-shrink: 0; font: 10px Arial,sans-serif; }
.ball.black { background: #080808; border-color: #080808; color: #fff; }
.ball.red { background: #b44747; border-color: #b44747; color: #fff; }
.ball-label { font-size: 11px; color: #777; flex: 1; }
.ball-row select { padding: 5px; font-size: 10px; }
.hidden-balls { display: flex; gap: 7px; padding-block: 7px; }
.hand-line { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.item-list { padding: 0; list-style: none; font-size: 12px; line-height: 2; }
.intel-entry { border-top: 1px solid #ddd; padding-top: 12px; margin-top: 14px; font-size: 12px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.hints-panel { margin-top: 25px; border-top: 1px solid #ddd; padding-top: 22px; }
.hints-panel h3 { margin: 0 0 14px; font-size: 14px; }
.hint-entry { color: #777; font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.confirmation-list { display: flex; gap: 13px; font-size: 11px; color: #888; margin-top: 20px; }
.confirmation-list .confirmed { color: #080808; }
.settlement-table { border-collapse: collapse; width: 100%; margin: 25px 0 0; font-size: 12px; }
.settlement-table th, .settlement-table td { text-align: left; padding: 12px 5px; border-bottom: 1px solid #ddd; }
.settlement-table th { color: #777; font-weight: 400; }
@media(max-width:850px) { .game-layout { grid-template-columns: minmax(0,1fr); } .game-sidebar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } .sidebar-panel { margin: 0; } .join-panel { gap: 30px; } }
@media(max-width:640px) { .city-page .masthead { margin-top: 25px; } .city-shell { margin-top: 55px; margin-bottom: 65px; } .page-heading { padding-bottom: 30px; } .city-grid { grid-template-columns: 1fr; } .city-card { min-height: 240px; padding: 23px; } .resume-panel { flex-direction: column; align-items: flex-start; padding: 23px; } .join-panel { grid-template-columns: 1fr; gap: 25px; } .rules-strip { flex-direction: column; gap: 8px; } .game-heading { align-items: flex-start; gap: 12px; } .game-title { max-width: 75%; } .member-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .member-card { border-bottom: 1px solid #ddd; padding: 14px; } .member-card:nth-child(2) { border-right: 0; } .member-card:nth-child(3), .member-card:nth-child(4) { border-bottom: 0; } .game-sidebar { grid-template-columns: 1fr; } .task-panel { padding: 22px; } .room-stamp strong { font-size: 23px; } .city-footer { font-size: 9px; } }
@media(prefers-reduced-motion:reduce) { .city-page * { scroll-behavior: auto; } }
/* Authored city boards share the site's quiet dot-and-line visual language. */
.circle-board-panel{position:relative;overflow:hidden;}
.circle-board{display:grid;grid-template-columns:repeat(var(--circle-columns,3),minmax(0,1fr));gap:32px 18px;padding:28px 10px;background-image:radial-gradient(#deded8 .8px,transparent .8px);background-size:18px 18px;}
.question-node{appearance:none;border:0;background:transparent;color:var(--ink,#111);display:flex;flex-direction:column;align-items:center;gap:9px;padding:10px 4px;cursor:pointer;font:inherit;min-height:150px;text-align:center;}
.question-dot{display:grid;place-items:center;width:76px;height:76px;border:2px solid #161616;border-radius:50%;background:#fafafa;font-size:22px;font-weight:700;box-shadow:0 0 0 8px #fafafa;transition:background .16s,color .16s,transform .16s;}
.question-node:hover .question-dot,.question-node:focus-visible .question-dot{transform:translateY(-3px);box-shadow:0 0 0 8px #fafafa,0 0 0 10px #888;}
.question-node:focus-visible{outline:2px solid #161616;outline-offset:4px;border-radius:8px;}
.question-node.solved .question-dot{color:#fafafa;background:#171717;}
.question-node.has-draft .question-dot{border-style:dashed;}
.question-node-label{font-weight:600;font-size:14px;max-width:190px;}
.question-node-status{font-size:12px;color:#666;}
.board-progress{font-size:13px;border-bottom:1px solid #d8d8d2;padding-bottom:14px;}
.answer-dialog{width:min(820px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #222;background:#fafafa;color:#111;box-shadow:0 24px 100px #0004;}
.answer-dialog::backdrop{background:#17171799;backdrop-filter:blur(3px);}
.answer-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid #d8d8d2;}
.answer-dialog-head h2{margin:0;font-size:18px;}
.answer-dialog-body{overflow:auto;max-height:calc(100dvh - 126px);padding:24px;}
.answer-dialog .task-panel{border:0;box-shadow:none;padding:0;}
.answer-dialog .task-panel>h2{font-size:19px;line-height:1.7;white-space:pre-line;}
.task-panel>h2,.hint-entry,.clue-line{white-space:pre-line;}
.draft-status{font-size:12px;color:#555;padding-top:14px;}
.draft-status .button{margin:8px 8px 0 0;}
.clue-table{margin:18px 0;}
.clue-table figcaption{font-size:13px;margin-bottom:8px;}
.clue-table table{border-collapse:collapse;width:min(360px,100%);}
.clue-table td{border:1px solid #333;padding:16px;text-align:center;font-family:monospace;font-size:18px;}
.clue-line{font-size:17px;line-height:1.7;}
.confirmation-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:22px 0;}
.confirmation-list p{border:1px solid #d8d8d2;padding:12px;margin:0;}
@media(max-width:600px){.circle-board{grid-template-columns:repeat(min(2,var(--circle-columns,3)),minmax(0,1fr));gap:24px 8px;padding:24px 4px;}.question-dot{width:68px;height:68px;}.answer-dialog-head{padding:14px 16px;}.answer-dialog-body{padding:18px 16px;}.answer-dialog .task-panel>h2{font-size:17px;}}
@media(prefers-reduced-motion:reduce){.question-dot{transition:none;}}
/* Lunch pauses only the playable area; the match deadline remains visible. */
.game-heading-copy{min-width:0;flex:1;}
.game-title-row{display:flex;align-items:center;gap:18px;min-width:0;}
.game-title-row .game-title{margin:0;min-width:0;max-width:none;}
.lunch-button{min-height:44px;min-width:70px;padding:11px 16px;flex-shrink:0;white-space:nowrap;}
.lunch-button:disabled{cursor:default;}
.lunch-status{margin:12px 0 0;color:#666;font-size:12px;line-height:1.8;overflow-wrap:anywhere;}
.game-layout.lunch-active{grid-template-columns:minmax(0,1fr);}
.lunch-rest-panel{padding:48px 30px;text-align:center;}
.lunch-rest-panel .lunch-countdown{margin:28px 0;font:clamp(42px,8vw,76px)/1.2 'Courier New',monospace;letter-spacing:-.06em;}
.lunch-vote-dialog{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:30px;border:1px solid #222;background:#fafafa;color:#111;box-shadow:0 24px 100px #0004;}
.lunch-vote-dialog::backdrop{background:#17171799;backdrop-filter:blur(3px);}
.lunch-vote-dialog h2{margin:0 0 18px;font-size:23px;line-height:1.6;}
.lunch-proposal-timer{font-size:12px;color:#666;line-height:1.8;}
.lunch-vote-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px;}
.lunch-vote-actions .button{min-height:44px;min-width:84px;justify-content:center;}
@media(max-width:640px){.game-title-row{gap:10px;}.lunch-button{padding:10px;min-width:60px;font-size:11px;}.lunch-status{font-size:11px;}.lunch-rest-panel{padding:36px 22px;}.lunch-vote-dialog{padding:24px;}.lunch-vote-dialog h2{font-size:20px;}}
.end-game-panel{text-align:center;}
.end-game-panel .button{width:100%;min-height:44px;justify-content:center;}
.end-game-panel .button:disabled{cursor:default;}
.end-game-status{margin:12px 0 0;color:#666;font-size:12px;line-height:1.8;overflow-wrap:anywhere;}
.end-game-vote-dialog{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:30px;border:1px solid #222;background:#fafafa;color:#111;box-shadow:0 24px 100px #0004;}
.end-game-vote-dialog::backdrop{background:#17171799;backdrop-filter:blur(3px);}
.end-game-vote-dialog h2{margin:0 0 18px;font-size:23px;line-height:1.6;}
.end-game-proposal-timer{font-size:12px;color:#666;line-height:1.8;}
.end-game-vote-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px;}
.end-game-vote-actions .button{min-height:44px;min-width:84px;justify-content:center;}
@media(max-width:640px){.end-game-vote-dialog{padding:24px;}.end-game-vote-dialog h2{font-size:20px;}}