.target-page { background: radial-gradient(ellipse at 50% 5%, #31503a66, transparent 58%), var(--bg); }
.target-game { width: min(100%, 1040px); min-height: calc(100svh - 70px); margin: auto; padding: calc(var(--header) + 22px) 20px 56px; }
.target-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 13px; }
.target-back:hover { color: var(--gold); }
.target-shell { margin-top: 12px; }
.target-heading { text-align: center; margin: 12px auto 28px; max-width: 620px; }
.target-eyebrow { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 3px; }
.target-heading h1 { margin: 8px 0 10px; font: 400 clamp(38px, 6vw, 62px)/1.1 Georgia, serif; }
.target-heading p { color: var(--muted); font-size: 14px; }
.target-panel { position: relative; overflow: hidden; min-height: 490px; padding: clamp(18px, 3vw, 30px); border: 1px solid #dfbd6155; border-radius: 28px; background: radial-gradient(circle at 50% 25%, #2d493476, transparent 60%), linear-gradient(145deg, #1b3226, #0d1d15); box-shadow: 0 28px 80px #0005, inset 0 1px #ffffff17; }
.game-state { min-height: 430px; }
.game-intro, .game-summary, .game-countdown, .game-round-end { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.game-emblem { display: grid; place-items: center; width: 112px; height: 112px; margin-bottom: 24px; border: 1px solid #dfbd6188; border-radius: 50%; box-shadow: 0 0 0 10px #dfbd610c, 0 0 0 11px #dfbd6125; color: var(--gold); font-size: 76px; line-height: 1; }
.game-intro h2, .game-summary h2 { margin: 12px 0; font: 400 clamp(30px, 4vw, 46px)/1.12 Georgia, serif; }
.game-intro p:not(.target-eyebrow), .game-summary p:not(.target-eyebrow) { max-width: 490px; color: var(--muted); }
.game-intro .btn, .game-summary .btn { margin-top: 28px; }
.prize-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(100%, 650px); margin: 16px 0 22px; text-align: left; }
.prize-card { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 142px; padding: 22px; border: 1px solid #dfbd6177; border-radius: 18px; background: linear-gradient(145deg, #33503a, #152a1e); box-shadow: inset 0 1px #ffffff1c; }
.prize-card-top { background: linear-gradient(145deg, #5b4b25, #213121); border-color: var(--gold); }
.prize-card strong { color: var(--gold); font: 700 clamp(25px, 3vw, 34px)/1 Georgia, serif; }
.prize-card small { font: 700 10px Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.prize-card span { font-size: 14px; }
.prize-card b { color: #ffe7a1; }
.game-countdown p:last-child { margin-top: 16px; color: var(--muted); }
.countdown-number { color: var(--gold); font: 700 clamp(120px, 23vw, 240px)/1 Georgia, serif; font-variant-numeric: tabular-nums; text-shadow: 0 0 55px #dfbd6155; }
.game-round-end h2 { margin: 18px 0 8px; color: var(--gold); font: 400 clamp(40px, 7vw, 76px)/1.1 Georgia, serif; }
.game-round-end p:last-child { color: var(--muted); font-size: 17px; }
.game-round-end strong { color: var(--text); }
.target-page.game-locked, html.game-locked { overflow: hidden; overscroll-behavior: none; }
.target-page.game-locked { touch-action: none; }
.target-panel.is-immersive { position: fixed; inset: 0; z-index: 100; display: flex; align-items: stretch; justify-content: center; width: 100%; height: 100dvh; min-height: 0; padding: clamp(12px, 2.5vh, 28px); border: 0; border-radius: 0; }
.target-panel.is-immersive .game-state { width: min(100%, 1000px); min-height: 0; }
.target-panel.is-immersive #gamePlay { display: flex; flex-direction: column; }
.target-panel.is-immersive .game-arena { flex: 1; height: auto; min-height: 0; touch-action: none; }
.game-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.game-hud > div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 12px; border: 1px solid #dfbd6133; border-radius: 12px; background: #0b191366; }
.game-hud span { color: var(--muted); font-size: 10px; letter-spacing: 2px; }
.game-hud strong { color: var(--gold); font-size: clamp(17px, 3vw, 24px); font-variant-numeric: tabular-nums; }
.game-time-track { height: 4px; overflow: hidden; border-radius: 4px; background: #ffffff18; }
.game-time-track > div { width: 100%; height: 100%; background: var(--gold); }
.game-hint { margin: 12px 0; text-align: center; color: var(--muted); font-size: 12px; }
.game-arena { position: relative; height: clamp(270px, 42vw, 440px); overflow: hidden; border: 1px solid #dfbd6152; border-radius: 18px; background: radial-gradient(circle at 50% 40%, #2a4833, #13281d 65%, #0c1c14); cursor: crosshair; touch-action: manipulation; }
.game-arena::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .24; background: linear-gradient(90deg, transparent calc(50% - .5px), #dfbd61 50%, transparent calc(50% + .5px)), linear-gradient(transparent calc(50% - .5px), #dfbd61 50%, transparent calc(50% + .5px)); }
.game-target { position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; width: clamp(66px, 10vw, 94px); height: clamp(66px, 10vw, 94px); padding: 5px; overflow: hidden; border: 4px solid var(--gold); border-radius: 50%; background: #294734; box-shadow: 0 0 0 5px #0b1913, 0 8px 22px #0009; color: #fff; font: 700 30px Georgia, serif; user-select: none; touch-action: manipulation; will-change: transform; }
.game-target:hover { border-color: #fff0c4; }
.game-target:active { filter: brightness(1.4); }
.game-target.is-hidden { opacity: 0; pointer-events: none; }
.game-target img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.game-target span { z-index: 1; text-shadow: 0 1px 8px #000; pointer-events: none; }
.game-target:has(img:not([hidden])) span { display: none; }
.hit-feedback { position: absolute; z-index: 2; color: #fff0bd; font-weight: 900; font-size: 22px; text-shadow: 0 2px 8px #000; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); }
.hit-feedback.show { animation: hit-pop .6s ease-out both; }
@keyframes hit-pop { from { opacity: 1; transform: translate(-50%, -30%) scale(.75); } to { opacity: 0; transform: translate(-50%, -130%) scale(1.2); } }
.final-score { display: block; color: var(--gold); font: 700 clamp(54px, 9vw, 90px)/1 Georgia, serif; font-variant-numeric: tabular-nums; margin: 6px 0 20px; }
.game-summary .prize-message { max-width: 540px; padding: 15px 20px; border: 1px solid var(--gold); border-radius: 14px; background: #dfbd6120; color: #f6df9c!important; font: 600 clamp(18px, 3vw, 23px)/1.4 Georgia, serif; }
.game-summary #resultMessage { margin-top: 12px; font-size: 14px; }
.game-note { margin-top: 15px; text-align: center; color: var(--muted); font-size: 11px; }
@media (max-width: 600px) { .target-game { padding-inline: 14px; } .target-panel { padding: 16px; min-height: 420px; } .game-state { min-height: 388px; } .game-intro, .game-summary { padding: 12px; } .prize-grid { grid-template-columns: 1fr; gap: 10px; } .prize-card { min-height: 105px; padding: 16px; } .game-hud { gap: 5px; } .game-hud > div { padding: 7px 4px; } .game-arena { height: min(48svh, 360px); min-height: 260px; } .target-panel.is-immersive .game-arena { height: auto; min-height: 0; } .game-target { width: 68px; height: 68px; } }
@media (max-height: 450px) { .target-panel.is-immersive .game-hud { margin-bottom: 6px; } .target-panel.is-immersive .game-hint { margin: 5px 0; } .target-panel.is-immersive .game-target { width: 56px; height: 56px; } }
@media (prefers-reduced-motion: reduce) { .hit-feedback.show { animation: none; opacity: 1; } }