:root {
  color-scheme: light;
  --ink: #193b34;
  --ink-soft: #416057;
  --muted: #788881;
  --paper: #fbfcf9;
  --canvas: #f1f4ef;
  --line: #e2e8e0;
  --green: #2f765c;
  --green-dark: #20553f;
  --lime: #d3ef75;
  --coral: #e77d5b;
  --amber: #e8b74e;
  --blue: #78a9c6;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }
.title-screen { position: fixed; z-index: 100; inset: 0; display: grid; grid-template-columns: minmax(390px,.82fr) minmax(0,1.18fr); overflow: hidden; background: #fff8ec; opacity: 1; transition: opacity .42s ease,visibility .42s ease; }
.title-screen[hidden] { display: none; }
.title-screen.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.title-screen-copy { position: relative; z-index: 2; padding: clamp(34px,5vw,78px); display: flex; flex-direction: column; justify-content: center; background: linear-gradient(125deg,#fffaf0 0%,#fff8ec 82%,rgba(255,248,236,.82) 100%); }
.title-brand { position: absolute; top: 30px; left: clamp(34px,5vw,78px); display: flex; align-items: center; gap: 10px; color: #183a32; font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.title-brand small { margin-top: 2px; display: block; color: #819087; font: 8px var(--mono); letter-spacing: .16em; }
.title-eyebrow { margin: 0 0 18px; display: flex; align-items: center; gap: 10px; color: #d95d3f; font: 800 11px var(--mono); letter-spacing: .17em; }
.title-eyebrow span { width: 30px; height: 3px; display: block; background: currentColor; }
.title-screen h1 { margin: 0; color: #173b32; font-size: clamp(46px,4vw,68px); font-weight: 900; letter-spacing: -.065em; line-height: 1.14; white-space: nowrap; }
.title-screen h1 em { color: #df6243; font-style: normal; }
.title-lead { margin: 28px 0 30px; color: #63756b; font-size: clamp(14px,1.3vw,19px); font-weight: 600; line-height: 1.9; }
.title-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; }
.title-start-button { width: fit-content; min-width: 230px; padding: 17px 24px; border: 0; border-radius: 999px; background: #df6243; color: #fff; box-shadow: 0 12px 28px rgba(177,67,39,.25); font-size: 14px; font-weight: 900; text-align: left; transition: transform .2s ease,box-shadow .2s ease; }
.title-start-button span { margin-left: 38px; font-size: 18px; }
.title-start-button:hover { transform: translateY(-3px); box-shadow: 0 17px 34px rgba(177,67,39,.32); }
.title-start-button:disabled { background: #aaa9a2; box-shadow: none; cursor: not-allowed; transform: none; }
.title-setup-button { padding: 15px 20px; border: 1px solid #9bafa4; border-radius: 999px; background: rgba(255,255,255,.55); color: #315d4d; font-size: 13px; font-weight: 800; transition: transform .2s ease,background .2s ease; }
.title-setup-button:hover { background: #fff; transform: translateY(-2px); }
.title-setup-button span { margin-right: 5px; }
.title-limit-message { max-width: 500px; margin: 17px 0 0; padding: 12px 15px; border-left: 4px solid #d6533d; border-radius: 4px; background: #fff0ea; color: #9a3829; font-size: 12px; font-weight: 700; line-height: 1.7; }
.title-room-limit { margin: 18px 0 0; color: #8b978f; font: 9px var(--mono); letter-spacing: .12em; }
.title-room-limit strong { color: #557c60; font-size: 12px; }
.title-screen-visual { position: relative; min-width: 0; height: 100%; margin: 0; overflow: hidden; background: #cbeaf0; }
.title-screen-visual::after { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(255,248,236,.42),transparent 22%); content: ""; pointer-events: none; }
.title-screen-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; animation: titleImageIn 1.1s cubic-bezier(.22,.8,.3,1) both; }
.title-footer { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; min-height: 48px; padding: 9px clamp(20px,3vw,46px); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(39,86,70,.16); background: rgba(255,250,240,.92); backdrop-filter: blur(12px); }
.title-footer nav { min-width: 0; display: flex; align-items: center; gap: 10px 22px; overflow-x: auto; scrollbar-width: thin; }
.title-footer a { flex: 0 0 auto; color: #506d61; font-size: 10px; font-weight: 800; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.title-footer a:hover { color: #c64f35; text-decoration: underline; }
.title-footer small { flex: 0 0 auto; color: #7c8b83; font-size: 9px; white-space: nowrap; }
@keyframes titleImageIn { from { opacity: .35; transform: scale(1.055); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 820px) { .title-screen { grid-template-columns: 1fr; grid-template-rows: minmax(0,44vh) 1fr; }.title-screen-copy { order: 2; padding: 30px 26px 82px; }.title-screen-visual { order: 1; }.title-screen-visual::after { background: linear-gradient(0deg,#fff8ec 0%,transparent 28%); }.title-brand { top: 18px; left: 20px; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,.88); }.title-screen h1 { font-size: clamp(38px,11vw,58px); }.title-lead { margin: 16px 0 20px; line-height: 1.65; }.title-start-button { min-width: 210px; padding: 14px 20px; }.title-footer { gap: 12px; padding-inline: 14px; }.title-footer nav { gap: 14px; }.title-footer a { font-size: 9px; } }

.preparation-dialog { width: min(1040px, calc(100vw - 32px)); height: min(760px, calc(100vh - 32px)); padding: 0; border: 0; border-radius: 12px; background: #f8f4e9; color: var(--ink); box-shadow: 0 28px 90px rgba(11,35,27,.36); overflow: hidden; }
.preparation-dialog::backdrop { background: rgba(15,36,29,.68); backdrop-filter: blur(5px); }
.preparation-frame { height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.preparation-header { min-height: 82px; padding: 17px 24px; display: flex; align-items: center; justify-content: space-between; background: #173b32; color: #fff; }
.preparation-header p { margin: 0 0 3px; color: #b9d3c7; font: 9px var(--mono); letter-spacing: .15em; }
.preparation-header h2 { margin: 0; font-size: 24px; }.preparation-close { width: 40px; height: 40px; border: 1px solid #ffffff3d; border-radius: 50%; background: transparent; color: #fff; font-size: 25px; }
.preparation-shell { min-height: 0; display: grid; grid-template-columns: 230px minmax(0,1fr); }
.preparation-nav { padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; background: #244b40; overflow-y: auto; }
.preparation-nav button { width: 100%; padding: 14px 13px; display: flex; align-items: center; gap: 12px; border: 0; border-left: 3px solid transparent; background: transparent; color: #d9e6df; text-align: left; font-weight: 700; }
.preparation-nav button span { color: #efac75; font: 800 10px var(--mono); }.preparation-nav button.is-active { border-left-color: #e9694c; background: #ffffff14; color: #fff; }
.preparation-content { padding: clamp(26px,4vw,48px); overflow-y: auto; }.preparation-panel { display: none; }.preparation-panel.is-active { display: block; animation: preparationIn .25s ease both; }
.preparation-kicker { margin: 0 0 10px; color: #d65d43; font: 800 10px var(--mono); letter-spacing: .14em; }.preparation-panel h3 { margin: 0 0 18px; color: #173b32; font-size: clamp(25px,3vw,38px); line-height: 1.3; }.preparation-lead { max-width: 700px; color: #63766c; font-size: 14px; line-height: 1.9; }
.preparation-card-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }.preparation-card-grid article,.preparation-flow article,.preparation-checks article { padding: 18px; border: 1px solid #d8d5c6; border-radius: 7px; background: #fffdf7; }.preparation-card-grid b { color: #315d4d; font-size: 17px; }.preparation-card-grid p,.preparation-flow p,.preparation-checks p { margin: 7px 0 0; color: #6c786f; font-size: 12px; line-height: 1.7; }
.preparation-flow,.preparation-checks { display: grid; gap: 10px; }.preparation-flow article,.preparation-checks article { display: grid; grid-template-columns: 42px 1fr; gap: 13px; }.preparation-flow article>span { color: #df6243; font: 800 17px var(--mono); }.preparation-checks article>span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #e1eee6; color: #28704f; font-weight: 900; }.preparation-flow b,.preparation-checks b { color: #24483d; font-size: 15px; }
.preparation-questions { display: grid; gap: 11px; counter-reset: question; }.preparation-questions p { margin: 0; padding: 18px 20px 18px 58px; position: relative; border: 1px solid #d8d5c6; border-radius: 7px; background: #fffdf7; color: #40584d; font-weight: 700; line-height: 1.7; counter-increment: question; }.preparation-questions p::before { position: absolute; left: 18px; content: "Q" counter(question); color: #df6243; font: 800 13px var(--mono); }
.preparation-request-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.preparation-request-grid article { padding: 23px; display: grid; grid-template-columns: 42px 1fr; gap: 14px; border: 1px solid #d8d5c6; border-radius: 8px; background: #fffdf7; }.preparation-request-grid article>span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fce7dc; color: #d85e43; font-size: 18px; font-weight: 900; }.preparation-request-grid b { color: #24483d; font-size: 16px; }.preparation-request-grid p { margin: 8px 0 12px; color: #6c786f; font-size: 12px; line-height: 1.8; }.preparation-request-grid a { color: #b44f39; font-size: 12px; font-weight: 800; }
.preparation-footer { min-height: 68px; padding: 12px 22px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #d8d2c2; background: #f0e9d8; }.preparation-footer>span { color: #69766e; font: 800 10px var(--mono); letter-spacing: .12em; }.preparation-footer div { display: flex; gap: 8px; }.preparation-footer button { min-width: 105px; padding: 11px 16px; border: 1px solid #bbc5bd; border-radius: 5px; background: #fff; color: #315d4d; font-weight: 800; }.preparation-footer button:disabled { opacity: .4; }.preparation-footer .preparation-next { border-color: #315d4d; background: #315d4d; color: #fff; }
@keyframes preparationIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .preparation-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }.preparation-nav { flex-direction: row; overflow-x: auto; }.preparation-nav button { min-width: 145px; }.preparation-content { padding: 24px 20px; }.preparation-card-grid,.preparation-request-grid { grid-template-columns: 1fr; }.title-actions { align-items: stretch; flex-direction: column; }.title-start-button,.title-setup-button { width: 100%; } }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #9abc55; outline-offset: 2px; }
.is-hidden { display: none !important; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 66px; padding: 0 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: #fff; border-bottom: 1px solid var(--line); z-index: 3; }
.wordmark { width: max-content; display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.wordmark small { display: block; margin-top: 2px; color: #86918b; font: 9px var(--mono); letter-spacing: .1em; }
.wordmark-mark { position: relative; display: flex; width: 26px; height: 26px; align-items: flex-end; gap: 3px; padding: 4px; border: 1.5px solid var(--green); border-radius: 50%; transform: rotate(-30deg); }
.wordmark-mark span { display: block; width: 4px; border-radius: 3px; background: var(--green); }
.wordmark-mark span:nth-child(1) { height: 7px; }.wordmark-mark span:nth-child(2) { height: 12px; background: #a2c855; }.wordmark-mark span:nth-child(3) { height: 16px; }
.topbar-center { display: flex; align-items: center; gap: 8px; color: #77857e; font-size: 11px; }
.live-indicator, .live-pill i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #a6b5aa; }
.topbar-actions { display: flex; justify-content: flex-end; gap: 8px; }
.icon-button { display: inline-grid; width: 36px; height: 36px; place-items: center; border: 1px solid transparent; border-radius: 50%; background: transparent; color: #587168; transition: background .2s, color .2s; }
.icon-button:hover { background: #eef3ed; color: var(--green-dark); }
.icon-button svg, .primary-button svg, .outline-button svg, .input-with-icon svg, .select-wrap svg, .map-pin-icon svg, .empty-compass svg, .copy-button svg, .share-url-row button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.workspace { --panel-width:405px; position: relative; flex: 1; min-height: calc(100vh - 66px); display: grid; grid-template-columns: minmax(350px, var(--panel-width)) minmax(0, 1fr); }
.control-panel { min-height: calc(100vh - 66px); display: flex; flex-direction: column; background: var(--paper); border-right: 1px solid var(--line); z-index: 1; }
.panel-scroll { flex: 1; width: 100%; max-width: 490px; margin: 0 auto; padding: 35px 34px 28px; }
.app-kicker, .phase-label { display: flex; align-items: center; gap: 9px; color: #8b9890; font: 10px var(--mono); letter-spacing: .07em; }
.kicker-line { width: 24px; height: 1px; background: #cdd7cd; }
h1 { margin: 30px 0 13px; font-size: 31px; font-weight: 700; letter-spacing: 0; line-height: 1.42; }
.intro-copy { max-width: 330px; margin: 0; color: #728078; font-size: 12px; line-height: 1.95; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; margin: 26px 0 22px; border-bottom: 1px solid var(--line); }
.mode-tab { position: relative; height: 41px; border: 0; background: none; color: #89958d; font-size: 12px; font-weight: 600; }
.mode-tab::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; content: ""; }
.mode-tab.is-active { color: var(--green-dark); }.mode-tab.is-active::after { background: var(--green); }
.setup-form { animation: reveal .28s ease both; }
.field-label { display: block; margin: 0 0 8px; color: #52645b; font-size: 11px; font-weight: 700; }
.input-with-icon { position: relative; }
.input-with-icon svg { position: absolute; top: 13px; left: 12px; width: 16px; height: 16px; color: #819087; }
.text-input, .input-with-icon input, .select-wrap select { width: 100%; min-height: 42px; border: 1px solid #dfe5de; border-radius: 5px; background: #fff; font-size: 12px; transition: border-color .18s, box-shadow .18s; }
.input-with-icon input { padding: 0 12px 0 38px; }
.text-input { padding: 0 12px; }
.text-input:focus, .input-with-icon input:focus, .select-wrap select:focus { border-color: #74a284; outline: 0; box-shadow: 0 0 0 3px #e9f1e9; }
.field-row { display: flex; gap: 12px; margin-top: 17px; }
.field-grow { min-width: 0; flex: 1; }
.select-wrap { position: relative; }
.select-wrap select { padding: 0 34px 0 12px; appearance: none; }
.select-wrap svg { position: absolute; top: 13px; right: 11px; width: 15px; height: 15px; color: #77877d; pointer-events: none; }
.mini-note { display: flex; align-items: center; gap: 8px; margin: 18px 0 17px; color: #829087; font-size: 10px; }
.note-dot { width: 6px; height: 6px; border-radius: 50%; background: #91ae66; }
.primary-button { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 0; border-radius: 4px; background: var(--green); color: #fff; font-size: 12px; font-weight: 700; transition: background .2s, transform .2s, opacity .2s; }
.primary-button:hover:not(:disabled) { background: var(--green-dark); transform: translateY(-1px); }
.primary-button:disabled { cursor: not-allowed; opacity: .45; }
.primary-button svg { width: 16px; height: 16px; }
.full-button { width: 100%; }
.text-button { min-height: 36px; padding: 0; display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; color: #668074; font-size: 11px; font-weight: 600; }
.text-button:hover { color: var(--green-dark); }.setup-form > .text-button { width: 100%; justify-content: center; margin-top: 6px; }
.text-button span { font-size: 15px; }
.space-top { margin-top: 17px; }.field-hint { margin: 8px 0 0; color: #8b9690; font-size: 10px; line-height: 1.7; }
.code-input { font: 18px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.phase-label { gap: 10px; margin-bottom: 0; color: #7d8d82; }.phase-number { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #eaf0e4; color: #55785d; font-size: 9px; }
.phase-label + h1 { margin-top: 23px; }
.room-code-box { min-height: 84px; margin: 23px 0 10px; padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #dce5d8; border-radius: 5px; background: #f5f8f0; }
.eyebrow { display: block; color: #87958a; font: 9px var(--mono); letter-spacing: .1em; }
.room-code-box strong { display: block; margin-top: 5px; color: var(--green-dark); font: 24px var(--mono); letter-spacing: .14em; }
.copy-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #dae3d8; border-radius: 4px; background: white; color: #587168; }
.copy-button:hover, .share-url-row button:hover { background: #eef4eb; }
.share-url-row { display: flex; margin-bottom: 28px; }
.share-url-row input { min-width: 0; flex: 1; height: 35px; padding: 0 10px; border: 1px solid var(--line); border-right: 0; border-radius: 4px 0 0 4px; background: #fff; color: #7b8980; font: 9px var(--mono); }
.share-url-row button { width: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 0 4px 4px 0; background: white; color: #577064; }
.share-url-row button svg { width: 15px; height: 15px; }
.team-section-head { min-height: 49px; margin: 0 0 12px; display: flex; align-items: flex-end; justify-content: space-between; }
.team-section-head h2 { margin: 5px 0 0; font-size: 14px; font-weight: 700; }
.team-section-head h2 span { margin-left: 4px; color: #94a096; font: 11px var(--mono); }
.ready-summary { padding-bottom: 2px; color: #829087; font-size: 10px; }
.team-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 17px; }
.team-row { min-height: 53px; padding: 9px 11px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid #e8ece7; border-radius: 4px; background: #fff; animation: reveal .28s ease both; }
.team-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #e7efe1; color: #54794f; font-size: 11px; font-weight: 700; }
.team-row:nth-child(4n+2) .team-avatar { background: #f7ebe0; color: #b4744f; }.team-row:nth-child(4n+3) .team-avatar { background: #e2edf1; color: #4e7d8c; }.team-row:nth-child(4n+4) .team-avatar { background: #f0e9d5; color: #9b8044; }
.team-meta { min-width: 0; }.team-meta strong { display: block; overflow: hidden; color: #345349; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.team-meta span { display: block; margin-top: 3px; color: #9ba49e; font-size: 9px; }
.status-tag { padding: 4px 7px; border-radius: 3px; background: #f0f2ef; color: #89948c; font-size: 9px; white-space: nowrap; }.status-tag.ready { background: #edf5e7; color: #64864f; }.status-tag.racing { background: #fff3df; color: #a07728; }
.empty-team { padding: 23px 10px; border: 1px dashed #d8e0d8; border-radius: 4px; color: #929e95; font-size: 10px; text-align: center; }
.demo-team-tools { display: flex; justify-content: space-between; align-items: center; margin: -3px 0 15px; }.demo-team-tools > span { color: #9aa49d; font-size: 9px; }
.outline-button { min-height: 36px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #dce4da; border-radius: 4px; background: white; color: #5b7868; font-size: 10px; font-weight: 600; }.outline-button:hover { border-color: #a6bda5; background: #f6f9f3; }.outline-button svg { width: 14px; height: 14px; }
.danger-text { color: #ad776b; }.danger-text:hover { color: #9c5143; }
.panel-footer { min-height: 58px; padding: 9px 34px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); color: #99a39b; font-size: 9px; }
.panel-footer nav { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.panel-footer a { color: #60786c; font-size: 9px; font-weight: 800; letter-spacing: .03em; text-decoration: none; white-space: nowrap; }
.panel-footer a:hover { color: var(--green-dark); text-decoration: underline; }
.panel-footer small { flex: 0 0 auto; color: #99a39b; white-space: nowrap; }
.panel-footer button { flex: 0 0 auto; padding: 5px 0; border: 0; background: none; color: #89958c; font-size: 9px; }
/* Map workspace */
.map-workspace { min-width: 0; min-height: calc(100vh - 66px); padding: 0 25px 0; display: flex; flex-direction: column; }
.map-topline { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.map-title { min-width: 0; display: flex; align-items: center; gap: 11px; }
.map-pin-icon { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid #dfe7da; border-radius: 50%; background: #f8faf5; color: #557c60; }
.map-pin-icon svg { width: 17px; height: 17px; }
.map-title strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.map-title span:not(.map-pin-icon) { display: block; margin-top: 4px; color: #87948b; font-size: 10px; }
.map-top-actions { display: flex; align-items: center; gap: 7px; }
.map-display-control { display: flex; align-items: center; gap: 6px; color: #65776c; font: 8px var(--mono); white-space: nowrap; }
.map-display-control select { height: 30px; padding: 0 26px 0 9px; border: 1px solid #d8e1d8; border-radius: 4px; background: #fff; color: #40584b; font: 700 9px var(--sans); cursor: pointer; }
.map-zoom-control { display: flex; align-items: center; gap: 6px; color: #65776c; font: 8px var(--mono); white-space: nowrap; }
.map-zoom-control input { width: 92px; accent-color: #557c60; cursor: pointer; }
.map-chip { padding: 7px 9px; border: 1px solid #e0e7df; border-radius: 3px; background: #f8faf6; color: #6e8075; font: 9px var(--mono); white-space: nowrap; }
.map-expand { width: 32px; height: 32px; border-color: #e2e8e0; background: #fff; }.map-expand svg { width: 15px; height: 15px; }
.map-panel-toggle { min-width: 76px; }
.map-stage { position: relative; flex: 1; min-height: 440px; overflow: hidden; border: 1px solid #dfe6dd; border-radius: 4px; background: #e9eee7; }
.map-focus-exit { position: absolute; z-index: 50; top: 14px; right: 14px; padding: 9px 14px; display: none; border: 1px solid #dbe4dd; border-radius: 999px; background: rgba(255,255,255,.94); color: #315d4d; font-size: 11px; font-weight: 800; box-shadow: 0 5px 20px rgba(17,52,40,.2); }
.focused-event-trigger { position: absolute; z-index: 52; top: 18px; left: 18px; width: 86px; padding: 9px 10px; display: none; border: 1px solid rgba(255,255,255,.8); border-radius: 8px; background: #b94635; color: #fff; box-shadow: 0 7px 22px rgba(69,25,18,.3); text-align: left; }
.focused-event-trigger span, .focused-event-trigger strong { display: block; }
.focused-event-trigger span { font: 700 8px/1.1 var(--mono); letter-spacing: .08em; opacity: .82; }
.focused-event-trigger strong { margin-top: 2px; font: 900 14px/1 var(--sans); letter-spacing: .04em; }
.map-stage.is-focused .focused-event-trigger { display: block; }
.map-stage.is-focused .focused-event-trigger.is-panel-open { opacity: 0; pointer-events: none; transform: translateX(-12px); }
.focused-event-panel { position: absolute; z-index: 53; top: 14px; bottom: 204px; left: 14px; width: min(330px,calc(100% - 28px)); padding: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 12px; background: rgba(250,252,248,.96); box-shadow: 0 16px 42px rgba(19,47,37,.3); opacity: 0; pointer-events: none; transform: translateX(calc(-100% - 24px)); transition: opacity .22s ease,transform .32s cubic-bezier(.22,1,.36,1); backdrop-filter: blur(10px); }
.map-stage.is-focused .focused-event-panel.is-open { opacity: 1; pointer-events: auto; transform: translateX(0); }
.focused-event-panel-head { margin-bottom: 13px; padding-bottom: 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dfe6dd; }
.focused-event-panel-head span { display: block; color: #a45040; font: 800 9px/1.2 var(--mono); letter-spacing: .1em; }
.focused-event-panel-head strong { margin-top: 3px; display: block; color: #294d3d; font-size: 15px; }
.focused-event-panel-head button { width: 30px; height: 30px; border: 1px solid #dbe4dd; border-radius: 50%; background: #fff; color: #587168; font-size: 20px; line-height: 1; }
.focused-event-grid { height: calc(100% - 56px); padding: 2px 3px 10px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-content: start; gap: 10px; overflow-y: auto; }
.focused-event-grid button { min-width: 0; padding: 7px 4px 6px; border: 1px solid #e0e5df; border-radius: 8px; background: #fff; color: #4f6258; box-shadow: 0 3px 9px rgba(25,54,43,.1); font-size: 9px; font-weight: 800; }
.focused-event-grid button:hover { border-color: #c56452; background: #fff8f5; transform: translateY(-2px); }
.focused-event-grid img { width: 48px; height: 48px; margin: 0 auto 5px; display: block; border-radius: 50%; object-fit: cover; }
.focused-event-grid span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-map, .google-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo-map { min-height: 100%; animation: mapIn .75s ease both; transition: filter .25s ease; }
.map-stage.is-clear-map .demo-map { filter: contrast(1.18) saturate(1.15) brightness(.98); }
.map-stage.is-warm-map .demo-map { filter: sepia(.18) saturate(1.18) contrast(1.08); }
.map-stage.is-cool-map .demo-map { filter: hue-rotate(155deg) saturate(.92) contrast(1.08); }
.map-label { fill: #72887c; font-family: var(--sans); font-size: 14px; font-weight: 700; opacity: .62; }.small-label { font-size: 11px; opacity: .48; }.park-label { fill: #66846c; opacity: .65; }
.park { fill: #dce8d6; }.park-path { fill: none; stroke: #bfd1ba; stroke-width: 4; stroke-dasharray: 4 8; }.waterway { fill: none; stroke: #d7e7e3; stroke-width: 43; }.waterway-edge { fill: none; stroke: #c7ded9; stroke-width: 2; }
.road { fill: none; stroke: #fbfcf7; stroke-linecap: round; }.road-major { stroke-width: 17; }.road-main { stroke-width: 11; }.rail-line { fill: none; stroke: #b1b9ae; stroke-width: 4; }.rail-center { fill: none; stroke: #f1f4ed; stroke-width: 1.5; stroke-dasharray: 2 7; }
.demo-route { fill: none; stroke: #3b7c5e; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .48; filter: drop-shadow(0 2px 2px #4d6c5730); }.demo-route.route-1 { stroke: #df8762; }.demo-route.route-2 { stroke: #5d93b0; }.demo-route.route-3 { stroke: #b59450; }.demo-pin { filter: url(#pin-shadow); }.demo-pin circle { fill: #fff; stroke: #417457; stroke-width: 3; }.demo-pin text { fill: #315e45; font: 700 10px var(--mono); text-anchor: middle; dominant-baseline: middle; }.demo-start circle { fill: #305e45; stroke: #fff; stroke-width: 3; }.demo-start text { fill: white; font: 800 9px var(--mono); text-anchor: middle; dominant-baseline: middle; }.demo-pin .demo-team-dot { fill: #fff; stroke: #8fa097; stroke-width: 1.5; transition: fill .25s ease; }.demo-car circle { stroke: white; stroke-width: 2; }.demo-car text { font-size: 15px; text-anchor: middle; dominant-baseline: central; }.demo-event-icon circle { fill: #c85d48; stroke: #fff; stroke-width: 3; filter: drop-shadow(0 3px 5px #5d2b2460); }.demo-event-icon text { fill: #fff; font: 800 15px var(--sans); text-anchor: middle; dominant-baseline: central; }.demo-event-icon { animation: eventPulse .85s ease-in-out infinite alternate; }
.map-empty-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #edf1e9db; text-align: center; animation: fadeIn .45s ease both; }.map-empty-state strong { font-size: 15px; font-weight: 700; }.map-empty-state > span { color: #819087; font-size: 11px; }
.empty-compass { width: 51px; height: 51px; margin-bottom: 3px; display: grid; place-items: center; border: 1px solid #d9e3d6; border-radius: 50%; background: #f8faf5; color: #6d9272; }.empty-compass svg { width: 29px; height: 29px; stroke-width: 1.25; }
.map-legend { position: absolute; right: 14px; bottom: 16px; padding: 10px 12px; display: flex; gap: 14px; border: 1px solid #e2e9df; border-radius: 3px; background: #fffF; box-shadow: 0 3px 14px #2e4b3410; }.map-legend span { display: flex; align-items: center; gap: 6px; color: #77877e; font: 8px var(--mono); letter-spacing: .03em; }.map-legend i { display: inline-block; width: 8px; height: 8px; border: 2px solid #4d8060; border-radius: 50%; background: white; }.map-legend .legend-start { background: #35684d; border-color: #35684d; }.map-legend .legend-car { width: 8px; height: 8px; border: none; background: #e77d5b; }
.map-scale { position: absolute; bottom: 17px; left: 16px; display: flex; align-items: center; gap: 8px; color: #809087; font: 8px var(--mono); }.scale-line { width: 28px; height: 5px; border-right: 1px solid #809087; border-bottom: 1px solid #809087; border-left: 1px solid #809087; }
.map-bottomline { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }.map-tip { display: flex; align-items: center; gap: 8px; color: #77867d; font-size: 10px; }.tip-star { color: #92ab56; font-size: 16px; }.map-bottom-right { display: flex; align-items: center; gap: 17px; }.map-mode { display: flex; align-items: center; gap: 6px; color: #86938b; font: 8px var(--mono); }.map-mode i { width: 6px; height: 6px; border-radius: 50%; background: #a5b98a; }.small-action { min-height: 30px; font-size: 10px; }
#map-legend span { font-size: 9px; }
#destination-chip { font-size: 10px; }
.demo-pin text { font-size: 13px; }
.demo-start text { font-size: 11px; }
.map-label { font-size: 16px; }
.team-row { min-height: 60px; }
.team-meta strong { font-size: 13px; }
.team-meta span { font-size: 11px; }
.status-tag { font-size: 10px; }
.team-section-head h2 { font-size: 16px; }
.race-percent { font-size: 12px; }
.race-row .progress-track { height: 6px; }
.event-item { font-size: 10px; }
.event-time { font-size: 9px; }
/* Planning, race, participant */
.race-leader { margin: 23px 0 24px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 12px; border-left: 3px solid var(--lime); background: #f1f5e9; }.race-leader .eyebrow { grid-column: 1 / -1; }.race-leader strong { font-size: 17px; }.race-leader > span:last-child { color: #7e8b82; font-size: 10px; }
.live-pill { padding: 5px 8px; display: flex; align-items: center; gap: 5px; border-radius: 3px; background: #eaf3e6; color: #587a4c; font: 9px var(--mono); }.live-pill i { background: #88aa6b; animation: pulse 1.7s infinite; }
.race-row { grid-template-columns: 30px minmax(0,1fr) auto; }.race-row .team-meta span { display: flex; align-items: center; gap: 6px; }.progress-track { height: 4px; overflow: hidden; border-radius: 3px; background: #e8ede7; }.team-meta .progress-track { margin-top: 7px; }.progress-track span { height: 100%; display: block; border-radius: inherit; background: #87a958; transition: width .5s ease; }.race-row:nth-child(4n+2) .progress-track span { background: #dc8a68; }.race-row:nth-child(4n+3) .progress-track span { background: #76a5bc; }.race-row:nth-child(4n+4) .progress-track span { background: #c7a553; }.race-percent { min-width: 36px; color: #6d8174; font: 10px var(--mono); text-align: right; }
.event-feed { margin-top: 23px; border-top: 1px solid var(--line); }.feed-title { padding: 13px 0 9px; display: flex; justify-content: space-between; color: #849187; font-size: 9px; }.feed-title .eyebrow { font-size: 8px; }.event-list { max-height: 130px; overflow: auto; }.event-item { padding: 8px 0; display: grid; grid-template-columns: 36px 1fr; gap: 7px; border-top: 1px solid #edf0ec; color: #708076; font-size: 9px; line-height: 1.6; animation: reveal .25s ease both; }.event-time { color: #a0aaa2; font: 8px var(--mono); }.empty-feed { margin: 4px 0; color: #9ba59e; font-size: 9px; }
.host-removed-panel { display: none !important; }
.participant-section { margin-top: 29px; }.drag-hint { color: #94a098; font-size: 9px; }.sortable-list { margin: 0 0 15px; padding: 0; display: flex; flex-direction: column; gap: 6px; list-style: none; }.sortable-item { min-height: 42px; padding: 0 10px; display: grid; grid-template-columns: 23px 1fr 24px; align-items: center; gap: 9px; border: 1px solid #e5eae3; border-radius: 4px; background: white; cursor: grab; }.sortable-item:active { cursor: grabbing; }.sortable-item.dragging { opacity: .35; }.sortable-item.drag-over { border-color: #8eaf8b; background: #f3f7ed; }.stop-number { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #edf2e8; color: #5d7b55; font: 10px var(--mono); }.stop-name { overflow: hidden; color: #52685b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.drag-grip { color: #a2ada4; font-size: 15px; text-align: center; }
.participant-progress { margin: 31px 0 18px; padding: 20px 17px 18px; border: 1px solid #e3e9df; border-radius: 4px; background: #fff; }.progress-heading { display: flex; align-items: baseline; justify-content: space-between; color: #687b70; font-size: 11px; }.progress-heading strong { color: #2f6047; font: 26px var(--mono); }.progress-heading small { color: #92a097; font-size: 11px; }.participant-progress > .progress-track { height: 7px; margin: 14px 0 16px; }.participant-progress > .progress-track span { background: #77a75c; }.participant-progress p { margin: 0; color: #78877e; font-size: 11px; }.participant-room-info { margin-top: 27px; padding-top: 16px; display: flex; align-items: baseline; gap: 10px; border-top: 1px solid var(--line); }.participant-room-info strong { font: 13px var(--mono); letter-spacing: .08em; }.participant-team-name { margin-left: auto; overflow: hidden; color: #819087; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.finish-winner { margin: 23px 0 18px; padding: 17px; display: flex; align-items: center; gap: 13px; border: 1px solid #e5e9d4; border-radius: 4px; background: #f7f8ec; }.winner-medal { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; background: #e7d999; color: #7b6c31; font-size: 17px; }.finish-winner strong { display: block; font-size: 14px; }.finish-winner span { display: block; margin-top: 4px; color: #879082; font-size: 9px; }.finish-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 15px; }
.settings-dialog, .info-dialog { width: min(520px, calc(100vw - 32px)); max-height: min(90vh, 760px); padding: 28px; overflow-y: auto; border: 1px solid #e0e7df; border-radius: 6px; background: #fbfcf9; color: var(--ink); box-shadow: 0 20px 70px #1c382b30; }.settings-dialog::backdrop, .info-dialog::backdrop { background: #1b2d2480; backdrop-filter: blur(3px); }.settings-dialog > form:first-child, .info-dialog > form:first-child { position: absolute; top: 17px; right: 17px; }.dialog-close { width: 31px; height: 31px; border: 1px solid #e2e8e1; background: white; }.dialog-close svg { width: 15px; height: 15px; }.dialog-eyebrow { color: #819084; font: 9px var(--mono); letter-spacing: .12em; }.settings-dialog h2, .info-dialog h2 { margin: 9px 0 8px; font-size: 21px; }.dialog-intro { margin: 0 32px 21px 0; color: #75847a; font-size: 11px; line-height: 1.85; }.api-settings-form .field-hint { margin-bottom: 7px; }.config-textarea { min-height: 125px; padding: 11px; resize: vertical; font: 10px/1.6 var(--mono); }.dialog-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 9px; }.info-content { color: #67786e; font-size: 11px; line-height: 1.9; }.info-content ol { padding-left: 18px; }.info-content li { margin: 8px 0; }.info-content strong { color: #355b48; }.info-content code { padding: 2px 4px; border-radius: 2px; background: #edf1ea; font: 10px var(--mono); }
.toast { position: fixed; z-index: 20; right: 22px; bottom: 22px; max-width: min(390px, calc(100vw - 32px)); padding: 12px 16px; border: 1px solid #365e4a; border-radius: 4px; background: #284c3a; color: #fff; box-shadow: 0 7px 24px #1c382b30; font-size: 11px; line-height: 1.6; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }.toast.is-visible { opacity: 1; transform: translateY(0); }
.race-notice { position: fixed; z-index: 30; top: 84px; left: 50%; min-width: min(360px, calc(100vw - 32px)); max-width: min(520px, calc(100vw - 32px)); padding: 14px 20px; display: flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid #dfc5bc; border-radius: 999px; background: #fffaf7ee; color: #934b3d; box-shadow: 0 12px 36px #5731272b; opacity: 0; pointer-events: none; transform: translate(-50%, -14px) scale(.97); transition: opacity .25s ease, transform .3s ease; backdrop-filter: blur(8px); }.race-notice.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }.race-notice.is-resolved { border-color: #c8d9c5; background: #f7fbf4ee; color: #4e7655; }.race-notice-icon { width: 25px; height: 25px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: currentColor; color: #fff; font: 800 13px var(--sans); }.race-notice strong { font-size: 13px; letter-spacing: .02em; }.race-notice.is-resolved .race-notice-icon::before { content: "✓"; }.race-notice.is-resolved .race-notice-icon { font-size: 0; }
.map-stage.is-focused { position: fixed; z-index: 10; inset: 15px; min-height: auto; border: 1px solid #dce4db; box-shadow: 0 8px 60px #1a332d55; }.map-stage.is-focused .map-focus-exit { display: block; }.map-stage.is-focused .map-legend { bottom: 214px; }.map-stage.is-focused .map-scale { bottom: 215px; }.map-workspace.has-focused-map .map-race-status:not(.is-hidden) { position: fixed; z-index: 20; right: 30px; bottom: 30px; left: 30px; height: 174px; margin: 0; display: block; background: rgba(251,252,249,.96); box-shadow: 0 8px 35px rgba(18,48,38,.2); }.map-workspace.has-focused-map .map-race-status .race-progress-scroll { max-height: 120px; }
@keyframes reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mapIn { from { opacity: .55; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }
@keyframes eventPulse { to { transform: scale(1.14); } }
.connection-settings-status { margin: 18px 0 12px; display: grid; gap: 8px; }.connection-settings-status > div { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #e2e8e0; border-radius: 4px; background: #fff; }.connection-settings-status span { color: #65766c; font-size: 11px; }.connection-settings-status strong { color: #52764e; font-size: 10px; }.settings-status { min-height: 18px; margin: 13px 0 -8px; color: #9b5545; font-size: 10px; line-height: 1.6; }.settings-status.is-pending { color: #75847a; }.settings-status.is-success { color: #47734f; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px #88aa6b2b; } }
@media (min-width: 1500px) { .workspace { --panel-width:450px; grid-template-columns: minmax(390px, var(--panel-width)) minmax(0, 1fr); }.panel-scroll { padding-right: 40px; padding-left: 40px; }.map-workspace { padding-right: 34px; padding-left: 34px; }.map-stage { min-height: 520px; } }
@media (max-width: 980px) { .workspace { --panel-width:370px; grid-template-columns: minmax(320px, var(--panel-width)) minmax(0, 1fr); }.panel-scroll { padding-right: 23px; padding-left: 23px; }.map-workspace { padding-right: 16px; padding-left: 16px; }.map-stage { min-height: 400px; }.map-legend { right: 9px; bottom: 10px; gap: 9px; padding: 8px; }.map-legend span { font-size: 7px; }.map-scale { bottom: 12px; left: 10px; } }
@media (max-width: 700px) { .topbar { height: 58px; padding: 0 16px; }.topbar-center { font-size: 10px; }.workspace { min-height: calc(100vh - 58px); display: flex; flex-direction: column; }.control-panel { min-height: auto; order: 2; border-top: 1px solid var(--line); border-right: 0; }.panel-scroll { max-width: 520px; padding: 26px 22px 25px; }.panel-footer { min-height: 44px; padding: 0 22px; }.map-workspace { min-height: 0; padding: 0 12px; }.map-topline { min-height: 61px; }.map-display-control > span { display: none; }.map-display-control select { max-width: 112px; }.map-stage { min-height: clamp(270px, 49vh, 440px); }.map-empty-state strong { max-width: 80%; font-size: 13px; }.map-empty-state > span { max-width: 80%; font-size: 10px; }.map-bottomline { min-height: 40px; }.map-tip { font-size: 9px; }.map-bottom-right { gap: 8px; }.map-mode { font-size: 7px; }.small-action { font-size: 9px; }.map-scale { bottom: 11px; }.map-legend { bottom: 10px; }.panel-scroll h1 { font-size: 29px; }.settings-dialog, .info-dialog { padding: 24px 20px; } }

/* Facilitation and accessibility upgrade */
.utility-button { min-width: 54px; height: 32px; padding: 0 10px; border: 1px solid #b8c6bd; border-radius: 999px; background: #fff; color: #315d4d; font: 800 9px var(--mono); letter-spacing: .08em; }
.resume-room { max-width: 500px; margin-top: 14px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #c9d8cf; border-radius: 10px; background: rgba(255,255,255,.72); }
.resume-room span { display: block; color: #8a978f; font: 700 8px var(--mono); letter-spacing: .12em; }.resume-room strong { font-size: 12px; }.resume-room button,.diagnostic-launch { border: 0; background: transparent; color: #c7533a; font-size: 11px; font-weight: 900; }
.diagnostic-launch { width: 100%; padding: 9px 12px; border: 1px dashed #94aa9d; border-radius: 7px; color: #315d4d; }
.race-timeline-panel { margin: 16px 0; border: 1px solid var(--line); border-radius: 9px; background: #fff; overflow: hidden; }.race-timeline-panel .feed-title { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; }.race-timeline-panel button { border: 0; background: transparent; color: var(--green); font-size: 10px; font-weight: 800; }.race-timeline { max-height: 230px; padding: 0 12px 12px; overflow-y: auto; transition: max-height .25s ease,padding .25s ease; }.race-timeline.is-collapsed { max-height: 0; padding-block: 0; }.timeline-entry { padding: 8px 0; display: grid; grid-template-columns: 48px 1fr; gap: 8px; border-top: 1px solid #edf0ec; font-size: 10px; }.timeline-entry time { color:#91a097; font-family:var(--mono); }.timeline-entry span { color:#41584e; }
.upgrade-dialog { width: min(680px,calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 32px; border: 0; border-radius: 16px; color: var(--ink); box-shadow: 0 30px 100px rgba(13,43,33,.35); overflow-y: auto; }.upgrade-dialog::backdrop { background: rgba(15,36,29,.67); backdrop-filter: blur(5px); }.upgrade-dialog h2 { margin: 6px 0 20px; font-size: 28px; }.upgrade-tool-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }.upgrade-tool-grid button { padding: 19px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; border: 1px solid #d9e2dc; border-radius: 10px; background: #fbfdf9; text-align: left; }.upgrade-tool-grid button:hover { border-color: var(--green); transform: translateY(-2px); }.upgrade-tool-grid b { color:var(--ink); }.upgrade-tool-grid span { color:var(--muted); font-size:11px; }
.tutorial-progress { height: 24px; position: relative; display:flex; align-items:flex-start; justify-content:flex-end; }.tutorial-progress::after { position:absolute; right:0; bottom:0; left:0; height:4px; border-radius:4px; background:#e9eee9; content:""; }.tutorial-progress i { position:absolute; z-index:1; bottom:0; left:0; width:25%; height:4px; border-radius:4px; background:var(--coral); transition:width .25s ease; }.tutorial-progress span { color:var(--muted); font:700 9px var(--mono); }.tutorial-visual { width:74px; height:74px; margin:4px 0 18px; display:grid; place-items:center; border-radius:50%; background:#e5f0e8; color:var(--green); font:900 24px var(--mono); }.tutorial-dialog>p { color:var(--muted); line-height:1.9; }
.diagnostic-list { display:grid; gap:9px; }.diagnostic-item { padding:13px 15px; display:flex; align-items:center; gap:12px; border:1px solid #e0e6e1; border-radius:9px; background:#fbfdfb; }.diagnostic-item i { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:#e2efe7; color:#24704f; font-style:normal; font-weight:900; }.diagnostic-item.is-warning i { background:#fff0d7; color:#b67416; }.diagnostic-item div { flex:1; }.diagnostic-item b,.diagnostic-item small { display:block; }.diagnostic-item small { margin-top:2px; color:var(--muted); font-size:10px; }
.switch-row { padding:15px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); }.switch-row span,.switch-row b,.switch-row small { display:block; }.switch-row small { color:var(--muted); font-size:10px; }.switch-row input { width:42px; height:22px; accent-color:var(--green); }
.report-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.report-metric { padding:15px; border-radius:10px; background:#edf4ef; }.report-metric span,.report-metric strong { display:block; }.report-metric span { color:var(--muted); font-size:9px; }.report-metric strong { margin-top:4px; font-size:20px; }.report-ranking,.report-events,.report-questions { margin-top:18px; padding:18px; border:1px solid var(--line); border-radius:10px; }.report-ranking ol,.report-events ul,.report-questions ul { margin-bottom:0; padding-left:1.35em; }.report-ranking li,.report-events li,.report-questions li { margin:7px 0; color:#52645c; font-size:12px; }
body.a11y-large-text { font-size:16px; } body.a11y-large-text .panel-scroll,body.a11y-large-text .map-workspace { font-size:1.08em; } body.a11y-contrast { --ink:#062d24; --muted:#3d5148; --line:#73877b; } body.a11y-contrast button,body.a11y-contrast input,body.a11y-contrast select { outline-width:2px; } body.a11y-reduce-motion *,body.a11y-reduce-motion *::before,body.a11y-reduce-motion *::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
@media (max-width:700px) { .utility-button { min-width:44px; padding-inline:7px; }.upgrade-tool-grid,.report-summary { grid-template-columns:1fr; }.upgrade-dialog { padding:25px 20px; }.resume-room { margin-bottom:4px; } }
@media (max-width: 400px) { .topbar { padding: 0 11px; }.wordmark { gap: 7px; font-size: 11px; }.topbar-center { gap: 5px; font-size: 9px; }.topbar-actions { gap: 1px; }.map-chip { padding: 6px; font-size: 8px; }.map-bottomline { align-items: flex-start; padding: 7px 0; }.map-tip { max-width: 57%; line-height: 1.5; }.map-bottom-right { flex-wrap: wrap; justify-content: flex-end; }.map-legend { gap: 7px; }.map-legend span { gap: 4px; font-size: 6px; } }
@media (max-width: 700px) { .map-zoom-control > span { display: none; }.map-zoom-control input { width: 68px; } }

/* v27 refinements: collapsible host panels, card bubble spacing, UFO sequence and dimensional podium */
.panel-toggle-button { margin-left: 6px; padding: 2px 7px; border: 1px solid #d9e2da; border-radius: 999px; background: #fff; color: #6b7b70; font: 800 8px/1.5 var(--sans); cursor: pointer; }
.event-feed.is-collapsed .event-list, .host-team-cards.is-collapsed .host-cards-list { display: none; }
.host-team-cards-title { gap: 8px; }
.host-team-cards-title > span:nth-child(2) { margin-left: auto; }
.card-draw-stage { width: 250px; min-height: 238px; padding: 15px 14px 18px; }
.card-draw-team-badge { margin-bottom: 22px; }
.baraja-container { margin-top: 42px; }
.ufo-abduction-layer { position: absolute; z-index: 45; inset: 0; overflow: hidden; pointer-events: none; }
.ufo-abductor { position: absolute; width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(53,0,82,.35)); }
.ufo-beam { position: absolute; width: 92px; opacity: 0; background: linear-gradient(180deg,rgba(255,245,88,.82),rgba(255,242,77,.18) 72%,transparent); clip-path: polygon(39% 0,61% 0,100% 100%,0 100%); filter: drop-shadow(0 0 12px rgba(255,229,46,.8)); transform-origin: 50% 0; transition: opacity .22s ease; }
.ufo-beam.is-visible { opacity: .9; animation: ufoBeamPulse .42s ease-in-out infinite alternate; }
@keyframes ufoBeamPulse { to { opacity: .58; filter: drop-shadow(0 0 22px rgba(255,238,56,1)); } }
.podium-stage { position: relative; padding: 32px 40px 22px; border-radius: 24px; background: radial-gradient(ellipse at 50% 15%,rgba(255,255,255,.95) 0 8%,rgba(255,225,128,.30) 9% 27%,transparent 55%),linear-gradient(180deg,rgba(16,42,34,.92),rgba(6,20,16,.96)); box-shadow: inset 0 18px 45px rgba(255,255,255,.08),0 22px 55px rgba(4,18,13,.48); perspective: 850px; overflow: hidden; }
.podium-stage::before { position: absolute; inset: auto 3% 0; height: 34%; background: repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 38px),linear-gradient(180deg,#30443b 0%,#14231d 100%); border-top: 2px solid rgba(255,255,255,.22); content: ""; transform: perspective(360px) rotateX(52deg); transform-origin: bottom; }
.podium-step { border-radius: 6px 6px 2px 2px; box-shadow: 12px 16px 24px rgba(0,0,0,.42),inset 0 3px 1px rgba(255,255,255,.70),inset -12px -8px 18px rgba(0,0,0,.14); transform: perspective(650px) rotateX(-2deg); }
.podium-step::after { position: absolute; right: -10px; top: 7px; bottom: 3px; width: 10px; border-radius: 0 4px 3px 0; background: linear-gradient(90deg,rgba(0,0,0,.24),rgba(255,255,255,.08)); content: ""; transform: skewY(-34deg); transform-origin: left top; }
/* Live delivery progress matrix */
.demo-destination-pin path { fill: #fff; stroke: #417457; stroke-width: 3; stroke-linejoin: round; }
.demo-start-flag { filter: url(#pin-shadow); }
.demo-start-flag image { pointer-events: none; }
.demo-event-icon { animation: none; }
.demo-event-icon .event-badge { opacity: .88; filter: drop-shadow(0 3px 6px rgba(25,59,52,.28)); }
.demo-event-icon circle { fill: none; stroke: none; }
.demo-event-icon image { pointer-events: none; }
.event-map-label { overflow: visible; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.event-map-label div, .google-event-map-label { width: max-content; max-width: 260px; margin: 0 auto; padding: 7px 11px; border: 0; border-radius: 8px; background: rgba(200,65,52,.82); color: #fff !important; box-shadow: 0 5px 16px #44201833; font: 800 13px/1.35 var(--sans); text-align: center; }
.google-event-overlay { position: absolute; z-index: 3000; width: 0; height: 0; pointer-events: none; }
.google-event-badge { position: absolute; top: 0; left: 0; width: 44px; height: 44px; overflow: hidden; border: 0; border-radius: 50%; background: transparent; box-shadow: 0 4px 14px rgba(25,59,52,.32); transform: translate(-50%, -50%) scale(4); transform-origin: center center; will-change: transform, opacity; }
.google-event-badge img { width: 100%; height: 100%; display: block; object-fit: cover; }
.google-event-map-label { position: absolute; top: 0; left: 0; pointer-events: none !important; white-space: nowrap; transform: translate(-50%, 98px); transition: opacity .2s ease; will-change: transform, opacity; }
.demo-event-icon.is-entering .event-map-label, .demo-event-icon.is-ending .event-map-label { opacity: 1; }
.demo-event-icon.is-ending .event-map-label div, .google-event-map-label.is-resolved { background: rgba(103,119,130,.82); }
.demo-team-bubble { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.demo-team-bubble.is-visible { opacity: 1; }
.demo-team-bubble div { position: relative; width: fit-content; max-width: 150px; margin: 0 auto; padding: 7px 11px; border: 0; border-radius: 10px; background: #fff; color: #294d3d; box-shadow: 0 5px 15px #173e2e38; font: 800 12px/1.3 var(--sans); text-align: center; text-shadow: none; }
.demo-team-bubble div::after { position: absolute; bottom: -6px; left: 50%; width: 12px; height: 12px; border: 0; background: #fff; content: ""; transform: translateX(-50%) rotate(45deg); }
.team-event-bubble { width: fit-content; max-width: 160px; margin: 0 auto; padding: 2px 6px; border: 0; background: transparent; color: #294d3d; box-shadow: none; font: 800 13px/1.35 var(--sans); text-align: center; text-shadow: none; }
.event-controls { margin-top: 15px; padding-top: 4px; border-top: 1px solid var(--line); }
.event-control-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.event-control-grid button { min-width: 0; padding: 6px 3px; display: grid; justify-items: center; gap: 4px; border: 1px solid #e0e6df; border-radius: 5px; background: #fff; color: #62746a; cursor: pointer; }
.event-control-grid button:hover { border-color: #bc6d5f; background: #fff7f4; color: #9d4034; }
.event-control-grid img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.event-control-grid span { width: 100%; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.demo-car { opacity: .84; transition: opacity .2s ease; }
.demo-car.is-frozen circle { stroke: #00e5ff !important; stroke-width: 4px !important; fill: #80deea !important; }
.demo-bomb-wave { fill: rgba(235, 55, 42, 0.22); stroke: #d93025; stroke-width: 3.5px; pointer-events: none; }
.demo-car.is-ufo-lifted { animation: ufoLift 2s ease-in-out both; }
.demo-car.is-boosted-first circle { animation: boostStrokeBlink .32s steps(2, end) infinite; }
.demo-car.is-boosted-slot { filter: drop-shadow(0 0 8px #ffe600) drop-shadow(0 0 14px #ff1744); }
.demo-car.is-boosted-slot circle { stroke: #ffe600; stroke-width: 4.5px; }
.demo-car.is-warping { filter: drop-shadow(0 9px 5px rgba(9,32,25,.5)) drop-shadow(0 0 8px rgba(255,225,0,.7)); }
.demo-event-icon.is-repelled .event-badge { filter: drop-shadow(0 12px 7px rgba(10,31,24,.38)); }
@keyframes boostStrokeBlink { 0% { stroke: #ffe600; stroke-width: 3.5px; } 50% { stroke: #ffffff; stroke-width: 2px; } }
.slot-boost-effect { position: absolute; z-index: 43; width: 0; height: 0; pointer-events: none; transform: translateZ(0); }
.warp-cursor-effect { position: absolute; z-index: 42; width: 54px; height: 18px; border-radius: 50%; background: rgba(8,30,23,.4); filter: blur(5px); opacity: .8; pointer-events: none; transform: translate(-50%,12px); }
.slot-star-particles { position: absolute; inset: 0; }
.slot-star-particles i { position: absolute; left: -6px; top: -7px; color: hsl(var(--hue), 100%, 62%); font: 900 13px/1 sans-serif; opacity: 0; text-shadow: 0 0 4px #fff, 0 0 8px currentColor; animation: slotStarBurst var(--duration) ease-out var(--delay) infinite; }
@keyframes slotStarBurst { 0% { opacity: 0; transform: translate(0,0) scale(.25) rotate(0); } 18% { opacity: 1; } 75% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(1.05) rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .slot-star-particles i { animation-duration: 1.8s; } }
@keyframes eventEnter { 0%,50% { opacity: 1; transform: scale(4); } 100% { opacity: 1; transform: scale(1); } }
@keyframes eventExit { from { opacity: .88; transform: scale(1); } to { opacity: 0; transform: scale(1); } }
@keyframes ufoLift { 0%,100% { opacity: 1; } 35% { opacity: 1; transform: translateY(-180px); } 50% { opacity: 0; transform: translateY(-240px); } 65% { opacity: 0; transform: translateY(-180px); } }
.map-workspace.is-racing .map-stage { min-height: 240px; }
.map-race-status { flex: 0 0 198px; min-width: 0; margin-top: 10px; padding: 12px 14px 10px; overflow: hidden; border: 1px solid #dfe6dd; border-radius: 4px; background: #fbfcf9; }
.map-race-status-head { height: 34px; display: flex; align-items: center; justify-content: space-between; }
.map-race-status-head > div { display: flex; align-items: baseline; gap: 12px; }
.map-race-status-head h2 { margin: 0; color: #294d3d; font-size: 16px; }
.map-race-status .race-progress-scroll { max-height: 144px; }
.map-race-status .race-progress-table th, .map-race-status .race-progress-table td { height: 34px; min-width: 0; padding: 0 2px; font-size: 11px; }
.map-race-status .race-progress-table th:first-child { width: 248px; min-width: 248px; max-width: 248px; }
.map-race-status .race-progress-table tbody th span { max-width: 96px; font-size: 12px; }
.race-notice { max-width: min(760px, calc(100vw - 32px)); padding: 18px 28px; border-width: 2px; color: #d9382a; }
.race-notice strong { color: #d9382a; font-size: clamp(18px, 1.7vw, 26px); font-weight: 900; letter-spacing: .04em; text-shadow: none; }
.race-notice.is-resolved { border-color: #bcc9d0; background: #f7fafbee; color: #6f8290; }
.race-notice.is-resolved strong { color: #6f8290; text-shadow: none; }
.race-notice.has-team-color { border-color: var(--notice-team-color); color: var(--notice-team-color); }
.race-notice.has-team-color strong, .race-notice.has-team-color.is-resolved strong { color: var(--notice-team-color); }
/* Driver illustrations & popups */
.team-avatar.has-driver { width: 36px; height: 36px; overflow: hidden; border: 2px solid var(--team-color, #2f765c); background: #fff; }
.team-avatar.has-driver img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 20%; transform: scale(1.38); }
.team-color-dot { width: 8px; height: 8px; margin-right: 6px; display: inline-block; border-radius: 50%; vertical-align: middle; }
.driver-illust-frame { width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #ffffff; }
.driver-illust-frame img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center center; transform: scale(1.16); transform-origin: center center; }
.participant-driver-card { margin: 18px 0 6px; overflow: hidden; border: 2px solid var(--team-color, #2f765c); border-radius: 12px; background: #ffffff; box-shadow: 0 8px 24px rgba(25, 59, 52, 0.08); }
.participant-driver-card .driver-illust-frame.is-start { aspect-ratio: 16 / 10; max-height: 180px; }
.participant-driver-caption { padding: 10px 14px; display: flex; align-items: center; gap: 10px; border-top: 1px solid #eef2ee; background: #fbfcf9; }
.team-color-pill { padding: 3px 9px; border-radius: 999px; color: #fff; font: 700 10px/1.2 var(--sans); letter-spacing: .04em; }
.participant-driver-caption strong { color: #193b34; font-size: 13px; font-weight: 800; }
.participant-waiting-stage { position: absolute; inset: 0; z-index: 18; padding: 28px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, #ffffff 0%, #f1f5ef 100%); text-align: center; animation: fadeIn .35s ease both; }
.waiting-stage-card { width: min(680px, 100%); padding: 32px 28px 36px; display: flex; flex-direction: column; align-items: center; border: 3px solid var(--team-color, #2f765c); border-radius: 20px; background: #ffffff; box-shadow: 0 20px 55px rgba(25, 59, 52, 0.12); }
.driver-illust-frame.is-waiting-hero { width: min(380px, 82%); aspect-ratio: 16 / 10; margin-bottom: 14px; }
.waiting-team-badge { display: inline-block; padding: 5px 14px; border-radius: 999px; color: #ffffff; font: 800 12px/1.3 var(--sans); letter-spacing: .05em; }
.waiting-stage-copy h2 { margin: 16px 0 10px; color: #193b34; font-size: clamp(26px, 3.4vw, 44px); font-weight: 900; line-height: 1.35; letter-spacing: .02em; }
.waiting-stage-copy p { margin: 0; color: #687b70; font-size: clamp(12px, 1.2vw, 15px); line-height: 1.7; }
.delivery-point-popup { position: absolute; right: 16px; bottom: 54px; z-index: 38; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; opacity: 0; transition: opacity .22s ease; }
.delivery-point-popup.is-visible { opacity: 1; }
.delivery-point-card { width: 224px; overflow: hidden; border: 3px solid var(--team-color, #2f765c); border-radius: 14px; background: #ffffff; box-shadow: 0 14px 36px rgba(20, 45, 35, 0.28); opacity: 0; transform: translateY(16px) scale(.92); transition: opacity .24s ease, transform .26s cubic-bezier(.2,.85,.25,1.15); }
.delivery-point-card.is-active { opacity: 1; transform: translateY(0) scale(1); }
.delivery-point-card.is-trouble-card { border-color: #d9382a; box-shadow: 0 14px 36px rgba(180, 32, 20, 0.34); }
.delivery-point-card.is-trouble-card .delivery-point-meta { background: #fff7f6; }
.delivery-point-card.is-trouble-card .delivery-point-tag { color: #c42b1c; }
.delivery-point-card.is-777-card { border-color: #e6b400; box-shadow: 0 0 26px rgba(255, 215, 0, 0.65), 0 14px 36px rgba(20, 45, 35, 0.32); }
.delivery-point-card.is-777-card .delivery-point-meta { background: linear-gradient(180deg, #fffdf2 0%, #fff4c2 100%); }
.delivery-point-card.is-777-card .delivery-point-tag { color: #9e6b00; }
.driver-illust-frame.is-point, .driver-illust-frame.is-trouble, .driver-illust-frame.is-777 { width: 100%; height: 132px; }
.delivery-point-meta { padding: 9px 12px 11px; border-top: 1px solid #edf2ee; background: #ffffff; text-align: left; }
.delivery-point-tag { display: inline-flex; align-items: center; gap: 5px; color: #4c6458; font: 800 10px/1.2 var(--mono); }
.delivery-point-tag i { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.delivery-point-meta strong { display: block; margin-top: 3px; color: #193b34; font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delivery-point-meta small { display: block; margin-top: 2px; color: #6b7d73; font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-celebration { position: absolute; z-index: 45; top: 50%; left: 50%; width: max-content; max-width: calc(100% - 32px); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.85); }
.goal-celebration.is-visible { animation: goalCenterPop 3.8s cubic-bezier(.2,.85,.2,1) both; }
.goal-celebration-card { width: min(420px, 82vw); overflow: hidden; border: 4px solid var(--team-color, #285f46); border-radius: 20px; background: #ffffff; box-shadow: 0 24px 68px rgba(15, 38, 28, 0.45); text-align: center; }
.driver-illust-frame.is-goal { width: 100%; aspect-ratio: 16 / 10; max-height: 240px; }
.goal-celebration-body { padding: 14px 20px 18px; border-top: 2px solid #eef2ee; background: linear-gradient(180deg, #ffffff 0%, #f7faf6 100%); }
.goal-celebration-badge { display: inline-block; margin-bottom: 6px; padding: 4px 14px; border-radius: 999px; background: var(--team-color, #285f46); color: #ffffff; font: 900 13px/1.2 var(--mono); letter-spacing: .12em; }
.goal-celebration-body strong { display: block; color: #193b34; font: 900 clamp(20px, 2.4vw, 30px)/1.3 var(--sans); letter-spacing: .03em; }
@keyframes goalCenterPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.72); } 12%,84% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); } }
.slot-overlay { position: fixed; z-index: 55; inset: 0; background: transparent; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.slot-overlay.is-visible { opacity: 1; }
.slot-machine { position: fixed; left: var(--slot-x, 50vw); top: var(--slot-y, 50vh); padding: 16px 18px 13px; border: 3px solid #e9c85c; border-radius: 12px; background: linear-gradient(145deg,color-mix(in srgb,var(--slot-team-color,#2f765c) 78%,white),color-mix(in srgb,var(--slot-team-color,#2f765c) 68%,black)); box-shadow: 0 14px 46px #08140e8c,inset 0 0 0 1px #fff4; transform: translate(-50%, calc(-100% - 24px)) scale(.85); transform-origin: 50% 100%; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.slot-machine::after { position: absolute; bottom: -15px; left: 50%; width: 20px; height: 20px; border-right: 3px solid #e9c85c; border-bottom: 3px solid #e9c85c; background: color-mix(in srgb,var(--slot-team-color,#2f765c) 68%,black); content: ""; transform: translateX(-50%) rotate(45deg); }
.gm-style-iw button[aria-label="閉じる"], .gm-style-iw button[aria-label="Close"] { display: none !important; }
.slot-overlay.is-visible .slot-machine { transform: translate(-50%, calc(-100% - 24px)) scale(1); }
.slot-machine table { border-spacing: 5px; border-collapse: separate; margin: 0 auto; }
.slot-machine td { width: 56px; height: 68px; padding: 0; overflow: hidden; border: 2px solid #d6b84e; border-radius: 6px; background: #fffdf2; box-shadow: inset 0 5px 10px #25392c2b; }
.slot-reel { width: 52px; height: 64px; display: grid; place-items: center; color: #cf362b; font: 900 38px/1 var(--sans); text-shadow: 0 2px 0 #f0c84c; }
.slot-reel.is-stopped { animation: slotStop .35s cubic-bezier(.2,.9,.3,1.4); }
.slot-machine > strong { margin-top: 8px; display: block; color: #fff; font: 800 11px/1.4 var(--sans); letter-spacing: .06em; text-align: center; }
.slot-jackpot-driver { width: 186px; margin: 8px auto 0; overflow: hidden; border: 2px solid #ffd700; border-radius: 8px; background: #ffffff; box-shadow: 0 0 16px rgba(255, 215, 0, 0.7); animation: cellComplete .28s ease both; }
.driver-illust-frame.is-slot-777 { width: 100%; height: 112px; }
@keyframes slotStop { 0% { transform: translateY(-16px) scale(.86); } 100% { transform: translateY(0) scale(1); } }
.race-progress-scroll { width: 100%; overflow-x: hidden; border: 1px solid #e3e9e2; border-radius: 4px; background: #fff; scrollbar-width: thin; }
.race-progress-table { width: 100%; min-width: 100%; max-width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; color: #5f7167; font-size: 10px; }
.race-progress-table th, .race-progress-table td { height: 40px; min-width: 0; padding: 0 2px; border-bottom: 1px solid #edf0ec; text-align: center; }
.race-progress-table thead th { position: sticky; top: 0; z-index: 1; background: #f5f8f3; color: #75867c; font: 600 9px var(--mono); }
.race-progress-table th:first-child { position: sticky; left: 0; z-index: 2; width: 224px; min-width: 224px; max-width: 224px; text-align: left; }
.race-progress-table thead th:first-child { z-index: 3; padding-left: 12px; }
.race-progress-table tbody th { padding: 0 10px; background: #fff; font-weight: 700; }
.race-team-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; }
.race-team-title { display: flex; align-items: center; min-width: 0; overflow: hidden; }
.race-progress-table tbody th i { flex: 0 0 7px; width: 7px; height: 7px; margin-right: 6px; display: inline-block; border-radius: 50%; }
.race-progress-table tbody th span { display: inline-block; max-width: 82px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
.race-progress-table tbody th b { margin-left: 6px; color: #76877e; font: 700 10px var(--mono); white-space: nowrap; }
.race-status-badge { flex: 0 0 auto; max-width: 112px; padding: 2px 7px; display: inline-flex; align-items: center; gap: 4px; overflow: hidden; border-radius: 999px; font: 700 10px/1.3 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.race-status-badge img { width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%; object-fit: cover; }
.race-status-badge.is-normal { background: #eef3ef; color: #617469; }
.race-status-badge.is-event { border: 1px solid #f0b9b2; background: #fff1ef; color: #c4382a; }
.race-status-badge.is-boost { border: 1px solid #e6c649; background: #fff9db; color: #8c6400; }
.race-status-badge.is-finished { border: 1px solid #9ec4ac; background: #eaf6ee; color: #266041; }
.race-status-badge.is-rank { padding: 3px 9px; font-size: 11px; font-weight: 800; }
.race-status-badge.rank-1 { border: 1px solid #dfb434; background: linear-gradient(135deg, #fff6cc, #ffe27a); color: #6e4e00; }
.race-status-badge.rank-2 { border: 1px solid #b9c4cc; background: #eef2f5; color: #3d4d59; }
.race-status-badge.rank-3 { border: 1px solid #d5a988; background: #faeee5; color: #6e4124; }
.race-status-badge.rank-4 { border: 1px solid #cfd8d2; background: #f2f5f3; color: #52635a; }
.race-progress-table td { position: relative; background: #fff; color: #7e8a83; font: 700 11px var(--mono); }
.race-progress-table td:not(:first-of-type)::before { position: absolute; z-index: 0; top: 50%; right: 50%; width: 100%; height: 4px; border-radius: 999px; background: #d8dfda; content: ""; transform: translateY(-50%); transition: background .35s ease; }
.race-progress-table td.is-delivered:not(:first-of-type)::before { background: var(--team-color); }
.progress-node { position: relative; z-index: 1; width: clamp(19px, 1.9vw, 25px); height: clamp(19px, 1.9vw, 25px); display: inline-grid; place-items: center; border: 2.5px solid #cbd4ce; border-radius: 50%; background: #f4f6f4; color: #7d8982; font-size: 10px; box-shadow: 0 0 0 2px #fff; transition: border-color .35s ease, background .35s ease, color .35s ease, transform .3s ease; }
.progress-node.is-pushed { border-color: var(--pushed-color); background: var(--pushed-color); color: #fff; opacity: .82; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--pushed-color); }
.race-progress-table td.is-delivered .progress-node.is-pushed { border-color: var(--pushed-color); background: var(--pushed-color); color: #fff; opacity: 1; box-shadow: 0 0 0 2px #fff; }
.race-progress-table td.is-empty-slot::before { right: 0; width: 100%; }
.race-progress-table td.is-delivered .progress-node { border-color: var(--team-color); background: var(--team-color); color: #fff; }
.race-progress-table .progress-node.is-goal { border-color: #e53935; color: #d71920; font-weight: 900; }
.race-progress-table td.is-goal-slot.is-delivered .progress-node.is-goal { border-color: #e53935; background: #e53935; color: #fff; }
.race-progress-table tr:last-child th, .race-progress-table tr:last-child td { border-bottom: 0; }
.race-progress-table th:last-child, .race-progress-table td:last-child { border-right: 0; }
@keyframes cellComplete { from { opacity: 0; transform: scale(.65); } to { opacity: 1; transform: scale(1); } }
/* Award Podium Overlay */
.award-podium { position: absolute; z-index: 46; top: 50%; left: 50%; width: min(980px, calc(100% - 20px)); max-width: calc(100% - 20px); max-height: calc(100% - 16px); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.86); transition: opacity .35s ease, transform .42s cubic-bezier(.2,.85,.25,1.12), top .32s ease; }
.award-podium.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.award-podium.is-minimized { top: 12px; transform: translate(-50%, 0) scale(1); }
.award-podium.is-minimized .award-podium-body { display: none; }
.award-podium-card { width: 100%; overflow: visible; border: 0; border-radius: 24px; background: transparent; box-shadow: none; }
.award-podium-header { padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 3px solid #e5b93c; border-radius: 18px; background: linear-gradient(135deg, rgba(27, 59, 47, 0.94) 0%, rgba(44, 92, 73, 0.94) 55%, rgba(31, 68, 54, 0.94) 100%); color: #ffffff; box-shadow: 0 12px 32px rgba(12, 32, 24, 0.45); backdrop-filter: blur(6px); }
.award-podium-eyebrow { display: block; color: #f8d66d; font: 800 10px/1.2 var(--mono); letter-spacing: .12em; }
.award-podium-title h3 { margin: 3px 0 0; color: #ffffff; font: 900 clamp(22px, 2.8vw, 32px)/1.2 var(--sans); letter-spacing: .06em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.award-podium-actions { display: flex; align-items: center; gap: 8px; }
.podium-confetti-btn { padding: 6px 12px; border: 1.5px solid #ffe07d; border-radius: 999px; background: linear-gradient(180deg, #ffd859 0%, #f2ae1c 100%); color: #3a2500; font: 800 11px/1.2 var(--sans); cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); transition: transform .15s ease, filter .15s ease; }
.podium-confetti-btn:hover { filter: brightness(1.06); transform: translateY(-1px) scale(1.03); }
.podium-confetti-btn:active { transform: translateY(0) scale(.97); }
.podium-minimize-btn { padding: 5px 10px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #ffffff; font: 800 11px/1.2 var(--sans); cursor: pointer; }
.podium-minimize-btn:hover { background: rgba(255, 255, 255, 0.26); }
.award-podium-body { background: transparent; }
.podium-stage { padding: 18px 28px 0; display: flex; align-items: flex-end; justify-content: center; gap: clamp(12px, 2.4vw, 26px); background: transparent; }
.podium-column { flex: 1 1 0; max-width: 270px; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.podium-driver-wrap { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: -4px; }
.podium-medal-floating { margin-bottom: 6px; padding: 4px 14px; border-radius: 999px; border: 2px solid var(--team-color, #285f46); background: #ffffff; color: #193b34; font: 900 13px/1.2 var(--sans); box-shadow: 0 4px 12px rgba(20, 45, 35, 0.22); }
.podium-column.is-rank-1 .podium-medal-floating { border-color: #d89b00; background: linear-gradient(135deg, #fff8d6 0%, #ffe066 100%); color: #5e3e00; font-size: 15px; }
.podium-driver-figure { width: 100%; display: flex; align-items: flex-end; justify-content: center; overflow: visible; background: transparent; }
.podium-column.is-rank-1 .podium-driver-figure { height: clamp(185px, 27vh, 265px); }
.podium-column.is-rank-2 .podium-driver-figure { height: clamp(158px, 23vh, 228px); }
.podium-column.is-rank-3 .podium-driver-figure { height: clamp(144px, 21vh, 208px); }
.podium-driver-figure img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center bottom; background: transparent; filter: drop-shadow(0 8px 16px rgba(10, 26, 18, 0.38)); animation: podiumDriverBounce 2.4s ease-in-out infinite; transition: opacity .15s ease; }
.podium-driver-figure img.is-processing-alpha { opacity: 0; }
.podium-driver-figure img.is-transparent-ready { opacity: 1; }
.podium-column.is-rank-2 .podium-driver-figure img { animation-delay: .25s; }
.podium-column.is-rank-3 .podium-driver-figure img { animation-delay: .5s; }
@keyframes podiumDriverBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.podium-step { position: relative; z-index: 1; width: 100%; padding: 12px 8px 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border-radius: 10px 10px 10px 10px; text-align: center; box-shadow: 0 12px 28px rgba(12, 32, 24, 0.38), inset 0 2px 0 rgba(255, 255, 255, 0.65); }
.podium-step-top { position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 8px 8px 0 0; background: var(--team-color, #285f46); opacity: .9; }
.podium-step.is-rank-1 { min-height: 140px; padding: 16px 10px 14px; border: 2.5px solid #c99200; background: linear-gradient(180deg, #fff0a8 0%, #f6c438 48%, #d99b08 100%); color: #4a3000; }
.podium-step.is-rank-2 { min-height: 112px; padding: 14px 10px 12px; border: 2.5px solid #96a7b8; background: linear-gradient(180deg, #f4f7fa 0%, #d5dee8 52%, #aebdca 100%); color: #273747; }
.podium-step.is-rank-3 { min-height: 94px; padding: 12px 10px 10px; border: 2.5px solid #b57343; background: linear-gradient(180deg, #fae0c8 0%, #e2a878 52%, #bf7a47 100%); color: #47240c; }
.podium-rank-num { font: 900 clamp(26px, 3vw, 38px)/1 var(--mono); letter-spacing: -.02em; }
.podium-rank-num small { font-size: 11px; margin-left: 1px; }
.podium-team-name { max-width: 100%; margin-top: 6px; padding: 4px 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #193b34; font: 800 14px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-team-name i { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.podium-finish-time { margin-top: 5px; font: 700 12px/1.2 var(--mono); opacity: .88; }
.podium-runners-up { margin-top: 10px; padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; border: 2px solid rgba(229, 185, 60, 0.75); border-radius: 14px; background: rgba(246, 249, 246, 0.92); backdrop-filter: blur(6px); box-shadow: 0 10px 24px rgba(12, 32, 24, 0.3); }
.podium-runner-chip { padding: 4px 10px 4px 5px; display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--team-color, #6f8077); border-radius: 999px; background: #ffffff; box-shadow: 0 2px 6px rgba(20, 45, 35, 0.08); }
.podium-runner-avatar { width: 24px; height: 24px; overflow: hidden; border-radius: 50%; border: 1.5px solid var(--team-color, #6f8077); background: #ffffff; flex: 0 0 24px; }
.podium-runner-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: scale(1.2); }
.podium-runner-rank { color: #5b6e63; font: 800 10px/1 var(--mono); }
.podium-runner-chip strong { display: inline-flex; align-items: center; gap: 4px; color: #193b34; font: 800 11px/1.2 var(--sans); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-runner-chip strong i { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
/* Card Draw Overlay (Speech bubble near team icon + Codrops Baraja nav-fanOther4 fan & center slide-up reveal) */
.card-draw-overlay { position: fixed; z-index: 56; inset: 0; background: transparent; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.card-draw-overlay.is-visible { opacity: 1; }
.card-draw-stage { position: fixed; left: var(--card-x, 50vw); top: var(--card-y, 50vh); width: 250px; min-height: 270px; padding: 15px 14px 16px; border: 3px solid #d4af37; border-radius: 14px; background: #ffffff; color: #111111; box-shadow: 0 14px 44px rgba(10, 26, 18, 0.38); transform: translate(-50%, calc(-100% - 24px)) scale(.85); transform-origin: 50% 100%; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.card-draw-stage::after { position: absolute; bottom: -14px; left: 50%; width: 20px; height: 20px; border-right: 3px solid #d4af37; border-bottom: 3px solid #d4af37; background: #ffffff; content: ""; transform: translateX(-50%) rotate(45deg); }
.card-draw-overlay.is-visible .card-draw-stage { transform: translate(-50%, calc(-100% - 24px)) scale(1); }
.card-draw-team-badge { position: relative; z-index: 95; transform: translateZ(120px); margin: 0 auto 18px; padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 30px; border-radius: 8px; border: 1.5px solid #d5ded8; background: #ffffff; color: #111111; font: 900 12px/1.3 var(--sans); text-align: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12); }
.card-draw-team-badge i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.baraja-container { position: relative; z-index: 10; isolation: isolate; width: 68px; height: 100px; margin: 30px auto 8px; perspective: 800px; }
.baraja-card { position: absolute; inset: 0; width: 68px; height: 100px; border-radius: 7px; transform-origin: var(--origin-x, 50%) 100%; transform: translate3d(var(--stack-x, 0px), var(--stack-y, 0px), 0) rotate(0deg); transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 340ms ease, filter 340ms ease; will-change: transform; }
.baraja-container.is-fanned .baraja-card { transform: translate3d(var(--fan-tx, 0px), 0px, 0) rotate(var(--fan-angle, 0deg)); }
.baraja-container.is-selecting .baraja-card:not(.is-middle) { transform: translate3d(var(--fan-tx, 0px), 4px, 0) rotate(var(--fan-angle, 0deg)) scale(.95); filter: brightness(.82); }
.baraja-container.is-fanned .baraja-card.is-middle.is-sliding-up { z-index: 40 !important; transform: translate3d(0px, -30px, 16px) rotate(0deg) scale(1.08); transition: transform 440ms cubic-bezier(0.2, 0.9, 0.25, 1.14); }
.baraja-container.is-fanned .baraja-card.is-middle.is-revealed { z-index: 45 !important; transform: translate3d(0px, -30px, 24px) rotate(0deg) scale(1.16); }
.baraja-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1); }
.baraja-card.is-revealed .baraja-card-inner { transform: rotateY(180deg); }
.baraja-card-face { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, 0.92); background: #ffffff; box-shadow: 0 5px 14px rgba(8, 22, 16, 0.42); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.baraja-card-face.is-front { transform: rotateY(180deg); border: 2px solid #ffd859; box-shadow: 0 0 18px rgba(255, 216, 89, 0.8), 0 8px 20px rgba(8, 22, 16, 0.55); }
.baraja-card-face img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; transform: scale(1.09); }
.card-draw-result { position: relative; z-index: 95; transform: translateZ(120px); margin-top: 8px; padding: 4px 8px; display: block; border-radius: 6px; border: 1.5px solid #e2e8e4; background: #ffffff; color: #111111; font: 900 12px/1.35 var(--sans); letter-spacing: .04em; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: color .2s ease, transform .2s ease, background .2s ease; }
.card-draw-result.is-revealed { color: #111111; background: #fff9db; border-color: #d4af37; transform: translateZ(120px) scale(1.04); }
/* Held Cards in Participant View & Host View + Target Team Selection Dialog */
.participant-cards { margin: 18px 0; padding: 14px 14px 16px; border: 2px solid #d8e2d9; border-radius: 10px; background: #ffffff; box-shadow: 0 6px 20px rgba(25, 59, 52, 0.06); }
.participant-cards-head { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.participant-cards-head h3 { margin: 0; color: #193b34; font: 800 13px/1.3 var(--sans); }
.participant-cards-head span { color: #677a70; font: 700 10px/1.2 var(--sans); }
.held-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.held-card-item { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; color: #111111; text-align: center; }
.held-card-btn { width: 100%; margin-top: 20px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #111111; cursor: pointer; transition: transform .16s ease; }
.held-card-btn:hover { transform: translateY(-4px) scale(1.035); }
.held-card-btn:active { transform: translateY(0) scale(.98); }
.held-card-thumb { position: relative; width: 100%; aspect-ratio: 68 / 100; overflow: hidden; display: block; border-radius: 7px; border: 2px solid #d8dfda; background: #ffffff; box-shadow: 0 10px 22px rgba(19,42,33,.22), 0 2px 5px rgba(19,42,33,.15); transition: border-color .16s ease, box-shadow .16s ease; }
.held-card-btn:hover .held-card-thumb { border-color: #d4af37; box-shadow: 0 15px 30px rgba(19,42,33,.3), 0 4px 9px rgba(19,42,33,.18); }
.held-card-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; transform: scale(1.06); }
.held-card-item.is-event-card .held-card-thumb { display: grid; place-items: center; border: 2px solid #d6c59f; background: #fef8ec; box-shadow: inset 0 0 0 3px #fffaf2, 0 10px 22px rgba(83,62,28,.2), 0 2px 5px rgba(83,62,28,.14); }
.held-card-item.is-event-card .held-card-thumb::after { position: absolute; z-index: 3; inset: 7px; border: 3px solid var(--event-card-color,#527c64); border-radius: 6px; content: ""; pointer-events: none; }
.held-card-item.is-event-card .held-card-btn:hover .held-card-thumb { border-color: #bd984c; box-shadow: inset 0 0 0 3px #fffaf2, 0 15px 30px rgba(83,62,28,.28), 0 4px 9px rgba(83,62,28,.16); }
.held-card-item.is-event-card .held-card-thumb img { width: 76%; height: 68%; margin-top: 20%; object-fit: contain; transform: none; }
.event-card-name { position: absolute; z-index: 4; top: 15px; right: 14px; left: 14px; overflow: hidden; color: var(--event-card-color,#527c64); font-size: clamp(15px,1.35vw,20px); font-weight: 900; line-height: 1.15; letter-spacing: .02em; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.held-card-item.is-event-card .event-card-count { right: 12px; bottom: 12px; z-index: 4; min-width: 30px; padding: 3px 6px 4px; font-size: clamp(14px,1.15vw,17px); line-height: 1; text-align: center; }
.held-card-stack { position: relative; padding-right: 34px; }
.held-card-stack .event-stack-card { width: calc(100% - 34px); }
.held-card-stack .event-stack-card:not(.is-stack-front) { position: absolute; top: 0; left: var(--stack-offset); pointer-events: none; }
.held-card-stack .event-stack-card.is-stack-front { position: relative; left: 0; }
.held-card-item strong { color: #111111; font: 800 11px/1.2 var(--sans); text-align: center; }
.held-card-item small { color: #5b6e64; font: 700 9px/1.25 var(--sans); text-align: center; }
.empty-held-cards { padding: 14px 10px; border: 1px dashed #d6dfd7; border-radius: 8px; color: #87968d; font-size: 11px; text-align: center; }
.host-team-cards { margin: 14px 0; padding: 10px 12px; border: 1px solid #dce5dc; border-radius: 8px; background: #ffffff; }
.host-team-cards-title { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; color: #52685c; font: 800 10px/1.2 var(--sans); }
.host-cards-list { display: flex; flex-wrap: wrap; gap: 7px; }
.host-mini-card-btn { padding: 4px 8px 4px 5px; display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--team-color, #2f765c); border-radius: 8px; background: #ffffff; color: #111111; cursor: pointer; box-shadow: 0 2px 6px rgba(20, 45, 35, 0.08); transition: transform .15s ease, box-shadow .15s ease; }
.host-mini-card-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(20, 45, 35, 0.16); background: #fffdf5; }
.host-mini-card-image { position: relative; width: 22px; height: 32px; flex: 0 0 22px; }
.host-mini-card-btn img { width: 22px; height: 32px; border-radius: 3px; object-fit: cover; border: 1px solid #d8e0da; }
.event-card-count { position: absolute; right: 3px; bottom: 3px; z-index: 3; padding: 2px 4px; border-radius: 999px; background: rgba(214, 25, 45, .92); color: #fff; font: 900 11px/1 var(--mono); letter-spacing: -.04em; box-shadow: 0 1px 4px rgba(0,0,0,.38); text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.baraja-card-face.is-event-card .event-card-count { right: 5px; bottom: 5px; padding: 3px 5px; font-size: 13px; }
.host-mini-card-image .event-card-count { right: -5px; bottom: -4px; padding: 1px 3px; font-size: 8px; }
.host-mini-card-meta { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.host-mini-card-meta span { color: #5c6f64; font: 700 9px/1.1 var(--sans); }
.host-mini-card-meta strong { color: #111111; font: 800 11px/1.2 var(--sans); }
.card-target-dialog { width: min(480px, calc(100vw - 32px)); max-height: min(90vh, 720px); padding: 24px; overflow-y: auto; border: 2px solid #d4af37; border-radius: 14px; background: #ffffff; color: #111111; box-shadow: 0 24px 70px rgba(12, 32, 24, 0.42); }
.card-target-dialog::backdrop { background: rgba(18, 34, 27, 0.52); backdrop-filter: blur(3px); }
.card-target-dialog > form:first-child { position: absolute; top: 15px; right: 15px; }
.card-target-dialog h2 { margin: 8px 0 12px; color: #111111; font-size: 20px; font-weight: 900; }
.card-target-preview { margin-bottom: 14px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; border: 1px solid #e2e8e2; border-radius: 10px; background: #f8faf7; }
.card-target-preview img { width: 46px; height: 68px; border-radius: 5px; object-fit: cover; border: 1px solid #d4af37; flex: 0 0 46px; }
.card-target-preview strong { display: block; color: #111111; font-size: 14px; font-weight: 800; }
.card-target-preview p { margin: 4px 0 0; color: #4c5e54; font-size: 11px; line-height: 1.5; }
.card-target-list { display: flex; flex-direction: column; gap: 8px; }
.card-target-team-btn { width: 100%; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 2px solid #dce4dd; border-radius: 10px; background: #ffffff; color: #111111; cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.card-target-team-btn:hover { border-color: var(--team-color, #2f765c); background: #f5faf6; transform: translateX(3px); }
.card-target-team-btn .team-avatar { flex: 0 0 36px; }
.card-target-team-info { flex: 1; min-width: 0; }
.card-target-team-info strong { display: flex; align-items: center; gap: 6px; color: #111111; font-size: 13px; font-weight: 800; }
.card-target-team-info span { display: block; margin-top: 2px; color: #5f7268; font-size: 11px; }
.card-target-select-pill { padding: 5px 10px; border-radius: 999px; background: var(--team-color, #2f765c); color: #ffffff; font: 800 11px/1 var(--sans); }



.held-card-item em { color: #8a6a12; font: 800 9px/1.2 var(--sans); font-style: normal; }

body.participant-planning { overflow: hidden; }
body.participant-planning .workspace { height: calc(100vh - 66px); min-height: 0; }
body.participant-planning .control-panel, body.participant-planning .map-workspace { height: 100%; min-height: 0; overflow: hidden; }
body.participant-planning .panel-scroll { height: 0; min-height: 0; padding-top: 18px; padding-bottom: 14px; overflow: hidden; flex: 1 1 0; }
body.participant-planning #participant-view { height: 100%; max-height: 100%; display: flex; min-height: 0; overflow: hidden; flex-direction: column; }
body.participant-planning #participant-title { margin: 10px 0 4px; font-size: 22px; line-height: 1.25; }
body.participant-planning #participant-copy { line-height: 1.45; }
body.participant-planning .participant-driver-card { margin: 8px 0 4px; display: grid; grid-template-columns: 116px 1fr; align-items: center; }
body.participant-planning .participant-driver-card .driver-illust-frame.is-start { height: 72px; max-height: 72px; aspect-ratio: auto; }
body.participant-planning .participant-driver-caption { height: 100%; border-top: 0; border-left: 1px solid #eef2ee; }
body.participant-planning .participant-section { height: 0; min-height: 0; margin-top: 8px; display: flex; overflow: hidden; flex: 1 1 0; flex-direction: column; }
body.participant-planning .participant-section .team-section-head { min-height: 36px; margin-bottom: 6px; }
body.participant-planning .sortable-list { height: 0; min-height: 0; max-height: none; margin-bottom: 8px; padding-right: 6px; overflow-x: hidden; overflow-y: scroll; flex: 1 1 0; overscroll-behavior: contain; scrollbar-color: #8ca89a #edf2ee; scrollbar-gutter: stable; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
body.participant-planning .sortable-list::-webkit-scrollbar { width: 9px; }
body.participant-planning .sortable-list::-webkit-scrollbar-thumb { border: 2px solid #fff; border-radius: 999px; background: #9db3a3; }
body.participant-planning .sortable-item { touch-action: pan-y; }
body.participant-planning .sortable-item { min-height: 36px; }
body.participant-planning .participant-room-info { margin-top: 7px; padding-top: 7px; }
body.participant-planning .map-workspace { max-height: calc(100vh - 66px); }
body.participant-planning .map-stage { min-height: 0; }

body.participant-racing .workspace { display: block; min-height: calc(100vh - 66px); }
body.participant-racing .map-workspace { display: none; }
body.participant-racing .control-panel { min-height: calc(100vh - 66px); border-right: 0; }
body.participant-racing .panel-scroll { max-width: 920px; padding-top: 24px; }
body.participant-racing #participant-view { width: 100%; }
body.participant-racing .participant-cards { padding: 20px; }
body.participant-racing .participant-cards-head h3 { font-size: 20px; }
body.participant-racing .participant-cards-head span { font-size: 12px; }
body.participant-racing .held-card-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
body.participant-racing .held-card-item { gap: 9px; }
body.participant-racing .held-card-thumb { width: min(128px, 100%); }
body.participant-racing .held-card-item strong { font-size: 16px; }
body.participant-racing .held-card-effect { min-height: 2.8em; color: #3f5549; font-size: 12px; line-height: 1.4; }
body.participant-racing .held-card-item em { font-size: 11px; }

/* Participant race dashboard: fixed viewport, compact header and 10-card carousel. */
.participant-race-header { min-width: 0; display: flex; align-items: center; gap: 12px; }
.participant-race-header > img { width: 50px; height: 50px; flex: 0 0 50px; object-fit: cover; object-position: center 18%; border: 3px solid var(--team-color); border-radius: 12px; background: #eef3ef; }
.participant-race-identity { min-width: 120px; display: flex; flex-direction: column; }
.participant-race-identity strong { overflow: hidden; color: #183a32; font-size: 15px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.participant-race-identity span { color: #6d7f75; font-size: 10px; font-weight: 800; }
.participant-header-progress { width: clamp(210px, 30vw, 430px); }
.participant-header-progress > div:first-child { display: flex; align-items: baseline; justify-content: space-between; color: #66796f; font-size: 10px; font-weight: 800; }
.participant-header-progress strong { color: var(--team-color); font: 900 18px/1 var(--mono); }
.participant-header-progress small { font-size: 11px; }
.participant-header-progress-track { height: 7px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: #dfe7e1; }
.participant-header-progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--team-color); transition: width .3s ease; }
.participant-header-event { min-width: 180px; max-width: min(34vw, 430px); margin-left: auto; padding: 7px 14px; display: flex; align-items: center; gap: 10px; border-left: 4px solid var(--team-color); border-radius: 8px; background: color-mix(in srgb,var(--team-color) 10%,white); }
.participant-header-event span { color: var(--team-color); font: 900 10px/1 var(--mono); letter-spacing: .12em; }
.participant-header-event strong { overflow: hidden; color: #183a32; font-size: clamp(16px, 1.7vw, 23px); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.participant-event-alert { position: fixed; z-index: 5000; left: 50%; top: 50%; width: min(88vw, 920px); padding: clamp(22px,4vw,46px); display: flex; flex-direction: column; align-items: center; gap: 12px; border: 5px solid var(--team-color,#2f765c); border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: 0 24px 90px rgba(11,40,31,.28); opacity: 0; pointer-events: none; text-align: center; transform: translate(-50%,-42%) scale(.9); transition: opacity .25s ease,transform .38s cubic-bezier(.2,.9,.2,1.15); }
.participant-event-alert.is-visible { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.participant-event-alert span { color: var(--team-color,#2f765c); font: 900 clamp(16px,2vw,25px)/1 var(--mono); letter-spacing: .18em; }
.participant-event-alert strong { color: #183a32; font-size: clamp(28px,5vw,68px); line-height: 1.25; }
.held-card-carousel { min-height: 0; display: flex; flex: 1; flex-direction: column; }
.held-card-viewport { min-height: 0; padding: 0 8px 5px; overflow: hidden; flex: 1; }
.held-card-track { height: 100%; display: flex; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.held-card-page { min-width: 100%; padding: 0 2px; display: grid; grid-template-columns: repeat(var(--card-columns, 5), minmax(0, 1fr)); grid-template-rows: repeat(3, max-content); align-content: start; align-items: start; gap: 8px 12px; }
.held-card-carousel-nav { height: 30px; padding-top: 6px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.held-card-carousel-nav > button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #e8eee9; color: #315d4d; font-size: 22px; cursor: pointer; }
.held-card-carousel-nav > span { display: flex; gap: 6px; }
.held-card-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #c7d2ca; cursor: pointer; }
.held-card-dot.is-active { width: 22px; border-radius: 999px; background: #2f765c; }
.participant-goal { min-height: 0; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; border: 3px solid var(--team-color); border-radius: 18px; background: linear-gradient(145deg, #fff 0%, #f3f8f2 100%); box-shadow: 0 18px 55px rgba(25,59,52,.12); text-align: center; }
.participant-goal span { color: var(--team-color); font: 900 clamp(22px, 4vw, 48px)/1 var(--mono); letter-spacing: .12em; }
.participant-goal strong { margin-top: 18px; color: #183a32; font-size: clamp(30px, 5.4vw, 76px); line-height: 1.25; }

body.participant-racing { overflow: hidden; }
body.participant-waiting .control-panel-edge-toggle, body.participant-planning .control-panel-edge-toggle, body.participant-racing .control-panel-edge-toggle { display: none; }
body.participant-racing .app-shell { height: 100vh; overflow: hidden; }
body.participant-racing .topbar { height: 78px; grid-template-columns: minmax(0, 1fr) auto; }
body.participant-racing .topbar .wordmark, body.participant-racing .topbar-center { display: none; }
body.participant-racing .participant-race-header { grid-column: 1; }
body.participant-racing .topbar-actions { grid-column: 2; }
body.participant-racing .workspace { height: calc(100vh - 78px); min-height: 0; }
body.participant-racing .control-panel { height: 100%; min-height: 0; }
body.participant-racing .panel-scroll { height: 100%; max-width: none; padding: 10px 12px; overflow: hidden; }
body.participant-racing #participant-view { height: 100%; min-height: 0; display: flex; flex-direction: column; }
body.participant-racing #participant-view > .phase-label,
body.participant-racing #participant-title,
body.participant-racing #participant-copy,
body.participant-racing .participant-driver-card,
body.participant-racing .participant-progress,
body.participant-racing .participant-room-info,
body.participant-racing .panel-footer { display: none !important; }
body.participant-racing .participant-cards { width: 100%; min-height: 0; margin: 0; padding: 12px; display: flex; flex: 1; flex-direction: column; }
body.participant-racing .participant-cards-head { flex: 0 0 auto; margin-bottom: 8px; }
body.participant-racing .participant-cards-head h3 { font-size: 16px; }
body.participant-racing .held-card-item { min-height: 0; height: max-content; align-self: start; justify-content: flex-start; gap: 2px; overflow: visible; }
body.participant-racing .held-card-btn { min-height: 0; overflow: visible; }
body.participant-racing .held-card-thumb { width: auto; height: clamp(132px, 21vh, 208px); flex: 0 0 clamp(132px, 21vh, 208px); }
body.participant-racing .held-card-item strong { font-size: 10px; line-height: 1.1; }
body.participant-racing .held-card-effect { min-height: 0; max-width: 100%; overflow: hidden; display: block; color: #3f5549; font-size: 8px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
body.participant-racing .held-card-item em { display: none; }

body.participant-waiting .workspace { display: block; min-height: calc(100vh - 66px); }
body.participant-waiting .control-panel { display: none; }
body.participant-waiting .map-workspace { height: calc(100vh - 66px); min-height: 0; }
body.participant-waiting .map-topline, body.participant-waiting .map-bottomline { display: none; }
body.participant-waiting .map-stage { min-height: 0; height: 100%; border: 0; }

@media (max-width: 700px) {
  .control-panel-edge-toggle { display: none; }
  body.participant-planning { overflow: auto; }
  body.participant-planning .workspace { height: auto; min-height: calc(100vh - 58px); }
  body.participant-planning .control-panel { height: min(58vh, 520px); order: 1; }
  body.participant-planning .map-workspace { height: calc(42vh - 20px); min-height: 250px; order: 2; }
  body.participant-planning .panel-footer { display: none; }
  body.participant-planning .sortable-list { height: clamp(120px, 25vh, 250px); max-height: 25vh; }
  body.participant-waiting .workspace, body.participant-waiting .map-workspace { height: calc(100vh - 58px); min-height: calc(100vh - 58px); }
  body.participant-racing .topbar { height: 72px; padding: 0 10px; }
  body.participant-racing .workspace { height: calc(100vh - 72px); min-height: 0; }
  body.participant-racing .panel-scroll { padding: 8px; }
  body.participant-racing .participant-race-header { gap: 7px; }
  body.participant-racing .participant-race-header > img { width: 44px; height: 44px; flex-basis: 44px; }
  body.participant-racing .participant-race-identity { min-width: 76px; max-width: 110px; }
  body.participant-racing .participant-race-identity strong { font-size: 11px; }
  body.participant-racing .participant-header-progress { width: min(42vw, 220px); }
  body.participant-racing .topbar-actions .icon-button:first-child { display: none; }
  body.participant-racing .participant-cards { padding: 8px; }
  body.participant-racing .participant-cards-head span { display: none; }
  body.participant-racing .held-card-page { gap: 5px; }
  body.participant-racing .held-card-thumb { height: clamp(116px, 18vh, 164px); flex-basis: clamp(116px, 18vh, 164px); }
  body.participant-racing .held-card-item strong { font-size: 9px; }
  body.participant-racing .held-card-effect { font-size: 7px; -webkit-line-clamp: 2; }
  body.participant-racing .held-card-item em { display: none; }
}