.survivor-page {
    background: #f3f6fa;
}

.survivor-main {
    padding-bottom: 64px;
}

.game-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    padding: 20px 0 8px;
    color: #738096;
    font-size: 0.83rem;
}

.game-breadcrumb a { color: #52647c; }
.game-breadcrumb a:hover { color: #168b7d; }

.survivor-heading {
    padding: 18px 0 24px;
    text-align: center;
}

.survivor-eyebrow {
    margin: 0 0 5px;
    color: #148b80;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.22em;
}

.survivor-heading h1 {
    margin: 0;
    color: #14263d;
    font-size: clamp(2.1rem, 6vw, 3rem);
    letter-spacing: -0.06em;
}

.survivor-heading > p:last-child {
    margin: 9px 0 0;
    color: #607189;
    line-height: 1.75;
}

.mobile-break { display: none; }

.survivor-panel {
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
    border: 1px solid #223b59;
    border-radius: 20px;
    background: #101d31;
    box-shadow: 0 22px 55px rgb(17 35 57 / 18%);
}

.game-hud {
    display: flex;
    min-height: 72px;
    align-items: center;
    gap: clamp(12px, 3vw, 30px);
    padding: 12px 18px;
    color: #e9f2ff;
    background: #172840;
}

.hud-stat {
    display: grid;
    gap: 1px;
    min-width: 52px;
}

.hud-stat span {
    color: #9db2cc;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.hud-stat strong {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.hud-stat--time strong { color: #b8f28e; font-size: 1.25rem; }
.hud-stat--hp { min-width: 100px; }
.hud-stat--hp strong { color: #ff8b93; font-size: 0.82rem; letter-spacing: 0.05em; white-space: nowrap; }

.pause-button {
    min-height: 38px;
    margin-left: auto;
    padding: 0 13px;
    border: 1px solid #526783;
    border-radius: 9px;
    color: #eaf1fb;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    background: #203652;
    cursor: pointer;
}

.pause-button:hover:not(:disabled) { background: #2c496c; }
.pause-button:disabled { opacity: 0.45; cursor: not-allowed; }

.arena-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #101d31;
    isolation: isolate;
}

#arena {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    background: #101d31;
    outline: none;
    touch-action: none;
}

#arena:focus-visible { outline: 3px solid #8ef1d5; outline-offset: -4px; }

.game-screen {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: grid;
    overflow-y: auto;
    place-items: center;
    padding: 18px;
    background: rgb(8 18 32 / 72%);
    backdrop-filter: blur(4px);
}

.game-screen[hidden] { display: none !important; }

.screen-card {
    width: min(100%, 440px);
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid rgb(200 230 255 / 24%);
    border-radius: 19px;
    color: #e4edf8;
    text-align: center;
    background: linear-gradient(145deg, rgb(33 54 80 / 97%), rgb(19 34 54 / 98%));
    box-shadow: 0 20px 55px rgb(0 0 0 / 32%);
}

.screen-card--wide { width: min(100%, 720px); }

.screen-kicker {
    margin: 0 0 7px;
    color: #a5efd9;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.2em;
}

.screen-card h2 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(1.45rem, 4vw, 2rem);
}

.screen-card > p:not(.screen-kicker):not(.screen-footnote):not(.best-record) {
    margin: 0 auto 18px;
    color: #c2d0e2;
    font-size: 0.91rem;
    line-height: 1.75;
}

.screen-footnote {
    margin: 15px 0 0;
    color: #a9b9cc;
    font-size: 0.73rem;
}

.primary-game-button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 22px;
    border: 0;
    border-radius: 12px;
    color: #082e36;
    font: inherit;
    font-weight: 900;
    background: linear-gradient(105deg, #81ecd7, #c7f58a);
    box-shadow: 0 8px 22px rgb(102 220 187 / 20%);
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
}

.primary-game-button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgb(102 220 187 / 30%); }
.primary-game-button:focus-visible,
.upgrade-button:focus-visible,
.pause-button:focus-visible { outline: 3px solid #ffe17a; outline-offset: 3px; }

.upgrade-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 18px;
}

.upgrade-button {
    display: grid;
    min-height: 132px;
    align-content: start;
    gap: 9px;
    padding: 16px 14px;
    border: 1px solid #4c6680;
    border-radius: 13px;
    color: #eaf2fb;
    text-align: left;
    background: #253c59;
    cursor: pointer;
    transition: border-color 0.18s, background-color 0.18s, transform 0.18s;
}

.upgrade-button:hover { border-color: #8ae8d0; background: #2c4b68; transform: translateY(-2px); }
.upgrade-button strong { color: #fff; font-size: 0.96rem; }
.upgrade-button span { color: #bfd0e3; font-size: 0.78rem; line-height: 1.55; }
.upgrade-button__icon { color: #9ef0d6 !important; font-size: 1.25rem !important; }

.best-record {
    margin: 0 0 18px;
    color: #c3d2e5;
    font-size: 0.83rem;
}

.best-record strong { margin-left: 6px; color: #b8f28e; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.back-to-games { display: block; margin-top: 15px; color: #c3d2e5; font-size: 0.82rem; text-decoration: underline; text-underline-offset: 3px; }
.back-to-games:hover { color: #fff; }

.arena-hint {
    position: absolute;
    z-index: 2;
    right: 14px;
    bottom: 10px;
    margin: 0;
    color: rgb(215 229 244 / 62%);
    font-size: 0.68rem;
    pointer-events: none;
}

.arena-hint span { padding: 0 4px; color: #8be9d4; }

.virtual-stick {
    position: absolute;
    z-index: 3;
    bottom: 20px;
    left: 20px;
    display: grid;
    width: clamp(92px, 23vw, 128px);
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgb(201 225 248 / 37%);
    border-radius: 50%;
    background: rgb(35 57 82 / 44%);
    box-shadow: inset 0 0 20px rgb(0 0 0 / 12%);
    touch-action: none;
    user-select: none;
}

.virtual-stick[hidden] { display: none !important; }

.virtual-stick::before {
    content: "";
    position: absolute;
    inset: 19%;
    border: 1px dashed rgb(213 232 250 / 28%);
    border-radius: 50%;
}

.virtual-stick__knob {
    position: relative;
    width: 42%;
    aspect-ratio: 1;
    border: 2px solid rgb(231 255 248 / 85%);
    border-radius: 50%;
    background: rgb(97 224 200 / 76%);
    box-shadow: 0 3px 14px rgb(0 0 0 / 25%);
    pointer-events: none;
}

.attack-button {
    position: absolute;
    z-index: 3;
    right: 20px;
    bottom: 20px;
    display: grid;
    width: clamp(76px, 19vw, 104px);
    aspect-ratio: 1;
    align-content: center;
    justify-items: center;
    gap: 2px;
    border: 2px solid rgb(255 231 195 / 85%);
    border-radius: 50%;
    color: #fff7eb;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 900;
    background: rgb(238 112 92 / 86%);
    box-shadow: 0 0 25px rgb(238 112 92 / 32%), inset 0 0 14px rgb(255 255 255 / 18%);
    cursor: pointer;
    touch-action: none;
    user-select: none;
}

.attack-button[hidden] { display: none !important; }
.attack-button span { color: rgb(255 247 235 / 82%); font-size: 0.58rem; letter-spacing: 0.08em; }
.attack-button.is-pressed { transform: scale(0.94); background: #cf564f; box-shadow: 0 0 30px rgb(255 125 102 / 60%), inset 0 0 14px rgb(255 255 255 / 20%); }
.attack-button:focus-visible { outline: 3px solid #ffe17a; outline-offset: 3px; }

.game-status-row {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 18px;
    color: #b9c9dc;
    font-size: 0.78rem;
    background: #172840;
}

.game-status-row p { margin: 0; }
.game-status-row strong { color: #fff; font-variant-numeric: tabular-nums; }

.how-to-play {
    max-width: 1000px;
    margin: 42px auto 0;
}

.how-to-play h2 {
    margin: 0 0 15px;
    color: #20344e;
    font-size: 1.35rem;
}

.how-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.how-step {
    display: flex;
    gap: 12px;
    min-height: 116px;
    padding: 17px;
    border: 1px solid #e0e7ef;
    border-radius: 14px;
    background: #fff;
}

.how-step__number {
    flex: 0 0 auto;
    color: #198a7f;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.how-step h3 { margin: 0 0 6px; color: #223650; font-size: 0.95rem; }
.how-step p { margin: 0; color: #62738a; font-size: 0.79rem; line-height: 1.65; }

.privacy-note {
    margin: 13px 0 0;
    color: #697a90;
    font-size: 0.78rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

@media (any-pointer: coarse) {
    .virtual-stick:not([hidden]) { display: grid; }
    .attack-button:not([hidden]) { display: grid; }
    .arena-hint { right: 12px; bottom: 12px; max-width: 42%; text-align: right; }
}

@media (max-width: 760px) {
    .survivor-main { padding-bottom: 45px; }
    .game-breadcrumb { padding-top: 14px; }
    .survivor-heading { padding: 10px 0 18px; }
    .mobile-break { display: initial; }
    .survivor-panel { border-radius: 14px; }
    .game-hud { min-height: 62px; gap: clamp(8px, 2.4vw, 16px); padding: 9px 10px; }
    .hud-stat { min-width: 40px; }
    .hud-stat span { font-size: 0.55rem; }
    .hud-stat strong { font-size: 0.88rem; }
    .hud-stat--time strong { font-size: 1.06rem; }
    .hud-stat--hp { min-width: 70px; }
    .hud-stat--hp strong { font-size: 0.62rem; letter-spacing: 0; }
    .pause-button { min-height: 34px; padding: 0 8px; font-size: 0.68rem; }
    .game-screen { padding: 10px; }
    .screen-card { padding: 20px 17px; border-radius: 15px; }
    .screen-card--wide { padding: 18px 12px; }
    .screen-card h2 { font-size: 1.35rem; }
    .screen-card > p:not(.screen-kicker):not(.screen-footnote):not(.best-record) { margin-bottom: 12px; font-size: 0.82rem; }
    .primary-game-button { min-height: 45px; padding: 0 17px; font-size: 0.88rem; }
    .upgrade-options { grid-template-columns: 1fr; gap: 7px; margin-top: 12px; }
    .upgrade-button { min-height: 0; grid-template-columns: 26px 1fr; gap: 3px 8px; padding: 10px; }
    .upgrade-button__icon { grid-row: span 2; align-self: center; }
    .upgrade-button strong { font-size: 0.84rem; }
    .upgrade-button span:not(.upgrade-button__icon) { font-size: 0.7rem; }
    .arena-hint { display: none; }
    .game-status-row { align-items: flex-start; padding: 9px 11px; font-size: 0.69rem; }
    .game-status-row p:first-child { max-width: 76%; line-height: 1.5; }
    .how-to-play { margin-top: 30px; }
    .how-grid { grid-template-columns: 1fr; gap: 9px; }
    .how-step { min-height: 0; padding: 13px; }
}

@media (max-width: 390px) {
    .game-hud { gap: 6px; padding-inline: 7px; }
    .hud-stat { min-width: 35px; }
    .hud-stat--hp { min-width: 64px; }
    .pause-button { padding-inline: 6px; }
    .virtual-stick { bottom: 12px; left: 12px; }
    .attack-button { right: 12px; bottom: 12px; }
}

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