:root {
  --ink: #18224a;
  --ink-soft: #5e6c9d;
  --navy: #16245b;
  --navy-deep: #0d153d;
  --sky: #dff6ff;
  --cloud: rgba(255, 255, 255, .83);
  --line: rgba(31, 53, 116, .14);
  --paper: rgba(255, 255, 255, .92);
  --coral: #ff6b78;
  --coral-dark: #dc5265;
  --blue: #4a8df6;
  --blue-dark: #356bd0;
  --yellow: #ffc94c;
  --yellow-dark: #e9a92d;
  --mint: #4fcab4;
  --mint-dark: #2da493;
  --shadow: 0 24px 60px rgba(32, 56, 125, .16);
  --soft-shadow: 0 12px 28px rgba(32, 56, 125, .12);
  --radius: 24px;
  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  color: var(--ink);
  background: #cfefff;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  min-width: 300px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.9) 0 7%, transparent 7.5%),
    radial-gradient(circle at 90% 15%, rgba(255,255,255,.75) 0 10%, transparent 10.5%),
    linear-gradient(180deg, #bdeafe 0%, #effbff 48%, #f6fbff 100%);
  overflow-x: hidden;
}
button, input { font: inherit; }
button { cursor: pointer; border: 0; }
button:focus-visible, input:focus-visible { outline: 4px solid rgba(81, 151, 250, .35); outline-offset: 3px; }
.is-hidden { display: none !important; }

.app-shell { min-height: 100vh; position: relative; overflow: hidden; }
.app-shell::before, .app-shell::after {
  content: ""; position: fixed; pointer-events: none; z-index: -1;
  border-radius: 50%; filter: blur(2px);
}
.app-shell::before { width: 330px; height: 100px; top: 15%; left: -120px; background: rgba(255,255,255,.66); }
.app-shell::after { width: 460px; height: 140px; right: -160px; bottom: 10%; background: rgba(255,255,255,.75); }

.site-header {
  height: 78px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 34px; color: white; background: linear-gradient(90deg, #18255e, #24347d 58%, #334995);
  box-shadow: 0 8px 24px rgba(23, 42, 100, .16); position: relative; z-index: 5;
}
.brand-mark { display: flex; align-items: center; gap: 10px; }
.brand-name { font-weight: 900; letter-spacing: .04em; font-size: clamp(20px, 2.2vw, 27px); white-space: nowrap; }
.brand-name span { color: #7ee6da; }
.brand-stair { display: block; width: 7px; height: 7px; border-radius: 2px; background: #ffc94c; transform: skewY(-28deg); }
.brand-stair-2 { margin-left: -7px; margin-top: 11px; background: #ff7784; }
.brand-stair-3 { margin-left: -7px; margin-top: 22px; background: #75b5ff; }
.brand-subtitle { margin: 0; opacity: .76; font-size: 12px; letter-spacing: .1em; }

.app-main { max-width: 1440px; margin: 0 auto; }
.screen { min-height: calc(100vh - 78px); padding: clamp(24px, 4vw, 54px); position: relative; }

/* shared controls */
.primary-button, .secondary-button, .text-button {
  min-height: 48px; padding: 12px 24px; border-radius: 14px; font-weight: 800; letter-spacing: .04em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease; white-space: nowrap;
}
.primary-button { color: white; background: linear-gradient(135deg, #ff7784, #ec526d); box-shadow: 0 9px 0 #c8475e, 0 14px 24px rgba(229, 76, 104, .25); }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 11px 0 #c8475e, 0 17px 28px rgba(229, 76, 104, .27); }
.primary-button:active { transform: translateY(5px); box-shadow: 0 3px 0 #c8475e, 0 6px 14px rgba(229, 76, 104, .22); }
.secondary-button { color: var(--navy); background: white; border: 1px solid var(--line); box-shadow: 0 5px 0 rgba(25, 45, 102, .09); }
.secondary-button:hover { transform: translateY(-2px); background: #f5f9ff; }
.text-button { min-height: auto; color: var(--ink-soft); background: transparent; padding: 10px 4px; }
.text-button:hover { color: var(--navy); text-decoration: underline; }
.form-message { min-height: 22px; margin: 16px 0 0; color: #cf4c65; font-size: 13px; font-weight: 700; }

/* title */
.title-screen { display: grid; place-items: center; overflow: hidden; }
.title-hero { width: min(740px, 100%); text-align: center; position: relative; z-index: 1; padding: 28px 0 48px; }
.hero-badge, .eyebrow { color: #268c9b; font-weight: 900; font-size: 11px; letter-spacing: .18em; }
.hero-badge { display: inline-flex; padding: 8px 14px; border-radius: 999px; color: #267989; background: rgba(255,255,255,.78); box-shadow: 0 6px 18px rgba(54, 125, 172, .12); }
.title-hero h1 { margin: 18px 0 12px; color: var(--navy); font-size: clamp(54px, 9vw, 100px); line-height: .88; letter-spacing: .04em; font-weight: 950; text-shadow: 0 8px 0 rgba(90, 153, 210, .16); }
.title-hero h1 span { color: var(--coral); }
.title-hero p { margin: 0 auto; color: var(--ink-soft); font-size: clamp(14px, 2vw, 17px); line-height: 1.85; font-weight: 600; }
.hero-button { display: block; min-width: 250px; margin: 32px auto 18px; font-size: 16px; }
.micro-copy { font-size: 11px !important; letter-spacing: .03em; opacity: .75; }
.hero-cloud { position: absolute; border-radius: 50%; background: rgba(255,255,255,.62); filter: blur(.5px); }
.cloud-a { width: 310px; height: 100px; bottom: 14%; left: -85px; }
.cloud-b { width: 430px; height: 130px; top: 12%; right: -110px; }
.hero-stair-preview { width: 250px; height: 100px; position: relative; margin: 35px auto 4px; }
.preview-flag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50% 50% 45% 45%; color: #fff; background: var(--yellow); display: grid; place-items: center; font-size: 14px; box-shadow: 0 4px 0 var(--yellow-dark); z-index: 2; }
.preview-step { position: absolute; left: 50%; width: 210px; height: 16px; transform: translateX(-50%) skewX(-20deg); border-radius: 5px; background: linear-gradient(180deg, #91bdf7, #558bdc); box-shadow: 0 4px 0 #3f6fc4; }
.ps-1 { top: 70px; width: 240px; }.ps-2 { top: 55px; width: 215px; }.ps-3 { top: 40px; width: 190px; }.ps-4 { top: 25px; width: 165px; }.ps-5 { top: 10px; width: 140px; }
.preview-token { position: absolute; z-index: 3; width: 24px; height: 24px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; color: #fff; font-weight: 900; font-size: 7px; box-shadow: 0 4px 8px rgba(32,56,125,.2); }
.preview-token.token-coral { left: 42px; top: 56px; }.preview-token.token-blue { left: 91px; top: 39px; }.preview-token.token-yellow { left: 138px; top: 22px; }.preview-token.token-mint { left: 178px; top: 5px; }

/* setup / lobby */
.setup-screen, .lobby-screen { max-width: 900px; margin: 0 auto; }
.section-heading { text-align: center; margin-bottom: 28px; }
.section-heading h2 { margin: 10px 0 8px; color: var(--navy); font-size: clamp(28px, 5vw, 42px); letter-spacing: .04em; }
.section-heading p { margin: 0; color: var(--ink-soft); font-weight: 600; }
.setup-card, .lobby-card { padding: clamp(20px, 4vw, 38px); background: var(--paper); border: 1px solid rgba(255,255,255,.92); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.count-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.count-card { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 18px 10px 14px; color: var(--ink-soft); background: #f5f9ff; border: 2px solid transparent; border-radius: 18px; transition: .18s ease; }
.count-card:hover { transform: translateY(-3px); border-color: #a8d9fb; }
.count-card.is-selected { color: var(--navy); border-color: #ff7784; background: #fff7f8; box-shadow: 0 8px 20px rgba(239, 91, 116, .12); }
.count-number { color: var(--navy); font-size: 32px; line-height: 1; font-weight: 950; }.count-card.is-selected .count-number { color: var(--coral); }
.count-label { font-weight: 900; font-size: 13px; }.count-card small { font-size: 11px; opacity: .76; }
.setup-choice-panel { margin-top: 28px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 20px; border-radius: 18px; background: linear-gradient(110deg, #ecfaff, #f4f3ff); border: 1px solid #d9e9fc; }
.setup-choice-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: white; background: linear-gradient(145deg, #4bcdb8, #4a8df6); font-size: 23px; box-shadow: 0 6px 0 rgba(65, 135, 212, .22); }
.setup-choice-panel h3 { margin: 0 0 5px; color: var(--navy); font-size: 17px; }.setup-choice-panel p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.online-actions { display: flex; align-items: center; gap: 10px; }.join-row { display: flex; gap: 7px; }
.room-input { width: 142px; padding: 12px 11px; color: var(--navy); background: white; border: 1px solid #cddcf2; border-radius: 12px; font-size: 14px; letter-spacing: .12em; text-align: center; }
.setup-screen > .text-button { display: block; margin: 22px auto; }
.compact-heading { margin-bottom: 22px; }.lobby-card { max-width: 560px; margin: 0 auto; text-align: center; }.room-code-label { color: var(--ink-soft); font-size: 12px; font-weight: 900; letter-spacing: .17em; }.room-code { display: block; margin: 6px auto 0; padding: 0; color: var(--navy); background: transparent; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(40px, 9vw, 64px); font-weight: 950; letter-spacing: .16em; }.room-code:hover { color: var(--coral); }.copy-message { min-height: 18px; margin: 3px 0 24px; color: var(--ink-soft); font-size: 11px; }
.lobby-slots { display: grid; gap: 10px; text-align: left; }.lobby-slot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; border-radius: 14px; color: var(--ink); background: #f5f8ff; border: 1px solid #e5ecf9; }.lobby-slot.is-joined { background: #effcf8; border-color: #c8f0e5; }.slot-name { font-weight: 900; }.slot-status { color: var(--ink-soft); font-size: 12px; font-weight: 800; }.slot-status.ready { color: var(--mint-dark); }.slot-pip { width: 10px; height: 10px; border-radius: 50%; background: #c9d4e6; }.is-joined .slot-pip { background: var(--mint); box-shadow: 0 0 0 4px rgba(79,202,180,.13); }
.lobby-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }.lobby-actions .primary-button { flex: 1; }.lobby-actions .secondary-button { flex: 0 0 auto; }

/* game */
.game-screen { min-height: calc(100vh - 78px); padding: 16px 20px 24px; max-width: 1600px; }
.game-toolbar { min-height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; padding: 9px 13px 9px 20px; color: white; background: rgba(21, 35, 88, .95); border-radius: 18px; box-shadow: 0 12px 28px rgba(25, 43, 105, .19); }
.toolbar-round { display: flex; flex-direction: column; gap: 2px; }.turn-label { font-size: 19px; font-weight: 950; letter-spacing: .05em; }.phase-label { color: #a7c1ef; font-size: 11px; font-weight: 800; }.toolbar-center { display: flex; align-items: baseline; gap: 7px; min-width: 110px; justify-content: center; }.countdown-caption { color: #a7c1ef; font-size: 12px; font-weight: 800; }.countdown-label { width: 47px; color: #ffe27d; font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; text-align: center; }.countdown-label.is-urgent { color: #ff8390; animation: heartbeat .7s infinite alternate; }.toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }.online-room-badge { padding: 7px 10px; color: #bceee7; border: 1px solid rgba(130,235,220,.28); border-radius: 8px; font: 700 10px ui-monospace, monospace; letter-spacing: .08em; }.icon-button { width: 36px; height: 36px; display: grid; place-items: center; color: white; background: rgba(255,255,255,.12); border-radius: 11px; font-size: 18px; }.icon-button:hover { background: rgba(255,255,255,.21); }.icon-button[aria-pressed="false"] { color: #8795bd; }
.game-layout { display: grid; grid-template-columns: 205px minmax(360px, 1fr) 225px; gap: 16px; margin-top: 16px; align-items: stretch; }.panel-card { background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.9); border-radius: 20px; box-shadow: var(--soft-shadow); backdrop-filter: blur(9px); }.rank-panel, .history-panel { padding: 18px 15px; }.panel-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }.panel-title-row h2 { margin: 0; color: var(--navy); font-size: 14px; letter-spacing: .04em; }.panel-dot { width: 7px; height: 7px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,107,120,.14); }.history-count { display: grid; place-items: center; width: 20px; height: 20px; color: white; background: #9ba9c6; border-radius: 50%; font-size: 10px; font-weight: 900; }
.rank-list, .final-rank-list { list-style: none; padding: 0; margin: 0; }.rank-item { display: grid; grid-template-columns: 22px 16px 1fr auto; gap: 5px; align-items: center; padding: 11px 5px; border-bottom: 1px solid #e7edf7; font-size: 11px; }.rank-item:last-child { border-bottom: 0; }.rank-number { color: #8c9ab7; font-size: 12px; font-weight: 950; }.rank-item:first-child .rank-number { color: #e2a51f; }.rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }.rank-position { color: var(--ink-soft); font-size: 10px; font-weight: 800; }.mini-pip { width: 11px; height: 11px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 4px rgba(30,50,100,.16); }.goal-note { display: flex; align-items: center; gap: 7px; margin-top: 16px; padding-top: 12px; color: var(--ink-soft); border-top: 1px solid #e7edf7; font-size: 11px; font-weight: 800; }.goal-note strong { color: var(--navy); }.goal-flag-mini { width: 20px; height: 20px; display: grid; place-items: center; color: #fff; background: var(--yellow); border-radius: 7px; font-size: 11px; }
.arena-panel { min-width: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, #8ed9f1 0%, #e9faff 51%, #fff 100%); }.arena-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.15), transparent 18%, transparent 82%, rgba(26,43,101,.05)); }.status-banner { position: absolute; top: 13px; left: 50%; z-index: 4; transform: translateX(-50%); padding: 9px 15px; min-width: 220px; color: var(--navy); background: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.9); border-radius: 99px; box-shadow: 0 7px 18px rgba(33,80,134,.12); text-align: center; font-size: 12px; font-weight: 900; white-space: nowrap; }.status-banner.is-bump { animation: bannerBump .32s ease; }.arena-viewport { height: min(62vh, 650px); min-height: 410px; position: relative; overflow: hidden; }.arena-world { position: absolute; width: min(620px, 100%); height: 1160px; left: 50%; bottom: -630px; transform: translateX(-50%); transition: transform .75s cubic-bezier(.22,.8,.35,1); }.sky-glow { position: absolute; width: 330px; height: 330px; top: 110px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.76), rgba(255,255,255,0) 68%); }.moon-orb { position: absolute; top: 157px; left: 50%; width: 120px; height: 120px; transform: translateX(-50%); border-radius: 50%; opacity: .22; background: #fff9cf; filter: blur(1px); }.cloud { position: absolute; border-radius: 50%; background: rgba(255,255,255,.67); filter: blur(1px); }.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }.cloud-1 { width: 240px; height: 58px; left: -70px; top: 420px; }.cloud-1::before { width: 100px; height: 100px; left: 42px; bottom: 6px; }.cloud-1::after { width: 82px; height: 82px; left: 125px; bottom: 4px; }.cloud-2 { width: 280px; height: 68px; right: -100px; top: 680px; }.cloud-2::before { width: 120px; height: 120px; left: 52px; bottom: 5px; }.cloud-2::after { width: 94px; height: 94px; left: 158px; bottom: 3px; }
.finish-flag { position: absolute; top: 78px; left: 50%; z-index: 2; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; color: white; font-size: 10px; font-weight: 950; }.finish-flag::before { content: ""; display: block; width: 7px; height: 112px; border-radius: 4px; background: linear-gradient(90deg, #fff, #acc5ea); box-shadow: 3px 4px 0 rgba(39,68,142,.2); }.finish-flag span { position: absolute; top: 11px; left: 5px; z-index: 1; padding: 8px 17px 8px 10px; background: var(--coral); clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%); letter-spacing: .08em; }.finish-flag b { position: absolute; top: -7px; left: -7px; width: 30px; height: 30px; display: grid; place-items: center; color: var(--navy); background: var(--yellow); border-radius: 50%; box-shadow: 0 4px 0 var(--yellow-dark); }
.stairs { position: absolute; left: 50%; bottom: 0; width: 100%; height: 940px; transform: translateX(-50%); }.stair-step { position: absolute; left: 50%; height: 24px; transform: translateX(-50%) skewX(-15deg); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #a7d0fb, #5b8fe2); border: 1px solid rgba(255,255,255,.45); box-shadow: 0 7px 0 #3d6fc7, 0 9px 9px rgba(51,88,161,.13); }.stair-step:nth-child(3n) { background: linear-gradient(180deg, #b8e8f3, #66b8cf); box-shadow: 0 7px 0 #489aaf, 0 9px 9px rgba(51,88,161,.11); }.stair-step.goal-step { background: linear-gradient(180deg, #ffe691, #efa83d); box-shadow: 0 7px 0 #cf8430, 0 9px 9px rgba(51,88,161,.12); }
.token-layer { position: absolute; inset: 0; z-index: 3; }.player-token { position: absolute; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transform: translate(-50%, 0); color: white; border: 4px solid white; border-radius: 47% 47% 48% 48%; box-shadow: 0 7px 10px rgba(33,59,124,.24); font-size: 10px; font-weight: 950; transition: left .45s cubic-bezier(.25,.8,.25,1), bottom .18s ease; }.player-token::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 18px; height: 9px; transform: translateX(-50%); border-radius: 50%; background: rgba(30,55,120,.2); filter: blur(1px); }.player-token.is-human::before { content: ""; position: absolute; right: -4px; top: -7px; width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; background: #fff36d; }.player-token.is-shaking { animation: tokenShake .45s ease; }.player-token.is-stepping { animation: tokenHop .18s ease; }.token-coral-bg { background: linear-gradient(145deg, #ff8490, #e64e68); }.token-blue-bg { background: linear-gradient(145deg, #67a5ff, #3c72d4); }.token-yellow-bg { color: #754e00; background: linear-gradient(145deg, #ffe179, #e6a52f); }.token-mint-bg { background: linear-gradient(145deg, #6ee3c9, #2da48f); }
.result-strip { position: absolute; left: 14px; right: 14px; bottom: 13px; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 9px; color: var(--ink); background: rgba(255,255,255,.93); border: 1px solid rgba(255,255,255,.95); border-radius: 14px; box-shadow: 0 7px 20px rgba(31,61,112,.14); }.result-person { min-width: 0; padding: 5px; border-radius: 8px; text-align: center; font-size: 10px; }.result-person .result-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font-weight: 900; }.result-choice { display: block; margin: 2px 0; font-size: 20px; font-weight: 950; }.result-move { display: block; font-weight: 950; }.result-person.is-hit { color: #c94b63; background: #fff0f2; animation: resultPulse .7s ease; }.result-person.is-success { color: #168a77; background: #ecfcf7; }
.choice-dock { margin-top: 15px; padding: 17px 20px 20px; background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.95); border-radius: 20px; box-shadow: var(--soft-shadow); }.choice-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }.choice-heading h2 { margin: 0; color: var(--navy); font-size: 16px; }.choice-heading p { margin: 0; color: var(--ink-soft); font-size: 11px; font-weight: 700; }.choice-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 13px; }.choice-button { min-height: 80px; display: grid; grid-template-columns: auto auto; grid-template-rows: 1fr auto; align-content: center; justify-content: center; column-gap: 4px; padding: 10px 12px; border: 3px solid transparent; border-radius: 17px; color: white; transition: transform .16s ease, filter .16s ease, opacity .16s ease, box-shadow .16s ease; }.choice-button:hover:not(:disabled) { transform: translateY(-4px); filter: saturate(1.1); }.choice-button:active:not(:disabled) { transform: translateY(2px); }.choice-button:disabled { cursor: default; opacity: .46; filter: grayscale(.2); }.choice-button.is-chosen { border-color: white; box-shadow: 0 0 0 4px var(--navy), 0 9px 20px rgba(36,53,120,.2); transform: translateY(-2px); }.choice-one { background: linear-gradient(145deg, #59a9ff, #3677da); box-shadow: 0 6px 0 #2d61b5; }.choice-three { background: linear-gradient(145deg, #5bd7c4, #2fa58f); box-shadow: 0 6px 0 #278d7d; }.choice-five { background: linear-gradient(145deg, #ffcf5b, #eca531); box-shadow: 0 6px 0 #c98524; color: #684406; }.choice-number { grid-row: 1 / 3; align-self: center; font-size: 37px; line-height: .9; font-weight: 950; }.choice-unit { align-self: end; font-weight: 950; font-size: 13px; }.choice-button small { grid-column: 2; align-self: start; font-size: 10px; opacity: .82; font-weight: 800; white-space: nowrap; }
.history-list { display: grid; gap: 8px; }.empty-history { margin: 12px 0 20px; color: #9aa8c3; font-size: 11px; line-height: 1.6; }.history-item { padding: 9px 8px; background: #f7f9fd; border: 1px solid #e9eef8; border-radius: 10px; }.history-turn { display: block; margin-bottom: 5px; color: var(--navy); font-size: 10px; font-weight: 950; }.history-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }.history-choice { padding: 3px 1px; color: white; border-radius: 5px; text-align: center; font: 900 10px ui-monospace, monospace; }.history-choice.hit { box-shadow: inset 0 0 0 2px rgba(255,255,255,.9); }.history-help { margin: 16px 0 0; color: #91a0bd; font-size: 10px; line-height: 1.6; }

/* finish */
.finish-screen { display: grid; place-items: center; }.finish-card { width: min(580px, 100%); position: relative; z-index: 1; padding: 34px clamp(20px, 6vw, 55px) 30px; text-align: center; background: rgba(255,255,255,.93); border: 1px solid white; border-radius: 28px; box-shadow: var(--shadow); }.winner-crown { width: 74px; height: 74px; display: grid; place-items: center; margin: 12px auto 14px; color: var(--navy); background: var(--yellow); border-radius: 27px 27px 22px 22px; box-shadow: 0 9px 0 var(--yellow-dark); font-size: 38px; animation: crownFloat 2s infinite ease-in-out; }.finish-card h2 { margin: 0; color: var(--navy); font-size: clamp(26px, 6vw, 43px); letter-spacing: .04em; }.finish-card h2 span { color: var(--coral); }.finish-card > p { margin: 8px 0 22px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }.final-rank-list { display: grid; gap: 7px; text-align: left; }.final-rank-list li { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: #f6f9ff; border: 1px solid #e9eef8; border-radius: 12px; font-size: 13px; }.final-rank-list li:first-child { background: #fff9e5; border-color: #ffe39a; }.final-rank-list .final-rank-number { width: 22px; color: #8998b9; font-weight: 950; }.final-rank-list li:first-child .final-rank-number { color: #ce941e; }.final-rank-list .final-pip { width: 12px; height: 12px; border-radius: 50%; }.final-rank-list .final-name { flex: 1; font-weight: 950; }.final-rank-list .final-pos { color: var(--ink-soft); font-weight: 800; }.finish-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 25px; }.finish-actions .primary-button, .finish-actions .secondary-button { flex: 1 1 180px; }.finish-actions .text-button { flex: 1 0 100%; }.finish-confetti { position: absolute; inset: 0; pointer-events: none; }.finish-confetti i { position: absolute; width: 10px; height: 26px; border-radius: 5px; animation: confettiFall 3.5s infinite ease-in; opacity: .8; }.finish-confetti i:nth-child(1) { left: 12%; top: -20px; background: var(--coral); transform: rotate(22deg); }.finish-confetti i:nth-child(2) { left: 30%; top: -30px; background: var(--blue); animation-delay: .8s; transform: rotate(66deg); }.finish-confetti i:nth-child(3) { left: 55%; top: -18px; background: var(--yellow); animation-delay: 1.6s; transform: rotate(-22deg); }.finish-confetti i:nth-child(4) { left: 72%; top: -35px; background: var(--mint); animation-delay: .3s; transform: rotate(44deg); }.finish-confetti i:nth-child(5) { left: 87%; top: -24px; background: var(--coral); animation-delay: 2s; transform: rotate(-33deg); }.finish-confetti i:nth-child(6) { left: 43%; top: -35px; background: #9c80ed; animation-delay: 2.5s; transform: rotate(15deg); }
.toast { position: fixed; left: 50%; bottom: 23px; z-index: 20; transform: translate(-50%, 20px); max-width: calc(100vw - 30px); padding: 11px 16px; color: white; background: rgba(17, 29, 77, .93); border-radius: 12px; box-shadow: var(--soft-shadow); opacity: 0; pointer-events: none; font-size: 12px; font-weight: 800; transition: opacity .2s ease, transform .2s ease; }.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes heartbeat { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes bannerBump { 0%,100% { transform: translateX(-50%); } 40% { transform: translateX(-50%) scale(1.06); } }
@keyframes tokenShake { 0%,100% { transform: translate(-50%, 0); } 25% { transform: translate(calc(-50% - 5px), 0) rotate(-5deg); } 75% { transform: translate(calc(-50% + 5px), 0) rotate(5deg); } }
@keyframes tokenHop { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -10px) scale(1.05); } }
@keyframes resultPulse { 0%,100% { transform: scale(1); } 45% { transform: scale(1.04); } }
@keyframes crownFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes confettiFall { 0% { opacity: 0; transform: translateY(-10px) rotate(0); } 15% { opacity: .85; } 100% { opacity: 0; transform: translateY(80vh) rotate(260deg); } }

@media (max-width: 1120px) {
  .game-layout { grid-template-columns: 180px minmax(340px, 1fr) 190px; gap: 11px; }.rank-panel, .history-panel { padding: 15px 11px; }.history-help { display: none; }
}
@media (max-width: 820px) {
  .site-header { height: 66px; padding: 0 18px; }.brand-subtitle { display: none; }.screen { min-height: calc(100vh - 66px); padding: 25px 16px 40px; }
  .game-screen { padding: 10px 8px 18px; }.game-toolbar { grid-template-columns: 1fr auto auto; gap: 8px; padding: 8px 9px 8px 13px; border-radius: 14px; }.turn-label { font-size: 16px; }.phase-label { max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.toolbar-center { min-width: 78px; gap: 4px; }.countdown-label { font-size: 26px; width: 34px; }.online-room-badge { display: none; }
  .game-layout { grid-template-columns: 1fr; margin-top: 10px; }.arena-panel { order: 1; }.rank-panel { order: 2; }.history-panel { order: 3; }.rank-panel { padding: 12px 13px; }.rank-panel .panel-title-row { margin-bottom: 8px; }.rank-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }.rank-item { grid-template-columns: 16px 12px 1fr; grid-template-rows: auto auto; gap: 2px 4px; padding: 6px 4px; border: 0; }.rank-item .rank-position { grid-column: 3; }.goal-note { display: none; }.history-panel { padding: 12px 13px; }.history-list { grid-template-columns: repeat(3, 1fr); }.history-item { min-width: 0; }.empty-history { margin: 4px 0; }.history-help { display: none; }.panel-title-row { margin-bottom: 8px; }
  .arena-viewport { height: min(59vh, 570px); min-height: 390px; }.choice-dock { margin-top: 10px; padding: 13px 11px 16px; border-radius: 15px; }.choice-heading { display: block; text-align: center; }.choice-heading p { margin-top: 3px; }.choice-buttons { gap: 7px; margin-top: 10px; }.choice-button { min-height: 73px; border-radius: 14px; }.choice-number { font-size: 31px; }.choice-button small { font-size: 9px; }
  .status-banner { top: 10px; min-width: 190px; padding: 8px 10px; font-size: 11px; }.result-strip { bottom: 9px; left: 8px; right: 8px; padding: 6px; gap: 4px; }.result-choice { font-size: 16px; }.result-move { font-size: 9px; }
  .setup-choice-panel { grid-template-columns: auto 1fr; }.setup-choice-panel > .primary-button, .online-actions { grid-column: 1 / -1; }.online-actions { display: grid; grid-template-columns: 1fr; }.join-row { width: 100%; }.room-input { flex: 1; width: auto; }.lobby-actions { flex-direction: column; }.lobby-actions .secondary-button { width: 100%; }
}
@media (max-width: 500px) {
  .count-grid { gap: 6px; }.count-card { padding: 14px 5px 11px; border-radius: 13px; }.count-number { font-size: 27px; }.count-label { font-size: 11px; }.count-card small { font-size: 9px; }.setup-card, .lobby-card { padding: 17px 13px; border-radius: 19px; }.setup-choice-panel { padding: 14px; gap: 11px; }.setup-choice-icon { width: 40px; height: 40px; font-size: 19px; border-radius: 12px; }.setup-choice-panel h3 { font-size: 15px; }.setup-choice-panel p { font-size: 11px; }.primary-button, .secondary-button { padding-left: 15px; padding-right: 15px; font-size: 12px; }.game-toolbar { grid-template-columns: 1fr auto; }.toolbar-center { grid-column: 2; grid-row: 1; }.toolbar-actions { grid-column: 1 / -1; grid-row: 2; justify-content: flex-end; margin-top: -4px; }.toolbar-actions .icon-button { width: 31px; height: 31px; }.game-toolbar { min-height: 67px; }.arena-viewport { min-height: 360px; height: 53vh; }.arena-world { transform-origin: center bottom; }.rank-list { grid-template-columns: repeat(2, 1fr); }.history-list { grid-template-columns: 1fr 1fr; }.history-item:nth-child(5) { display: none; }.choice-button { min-height: 68px; padding: 8px 4px; }.choice-number { font-size: 28px; }.choice-unit { font-size: 11px; }.choice-button small { font-size: 8px; letter-spacing: -.04em; }.finish-card { padding: 28px 15px 24px; }.finish-card h2 { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Keep the lowest steps visible before the camera begins to follow the climbers. */
.arena-world { bottom: 0; }