/* 생존 도전 화면을 게임답게(11/13 교수님: "박스 모양이 너무 클로드가 디자인한 느낌", "가로로 보이게", "오래 터치하면 전체가 선택되는 느낌").
   1) 길게 눌러도 글자 선택·확대 메뉴가 뜨지 않게  2) 납작한 테두리 상자 대신 눌리는 느낌의 게임 버튼·게이지
   3) 휴대폰을 가로로 들면 게임만 화면 가득. 색은 retro-ui.css의 남색·크림·금색을 그대로 쓴다. 깜빡임·번쩍임 없음. */

/* ---------- 1) 길게 눌러도 선택되지 않게 ---------- */
#sound-dialog.survival-focus,#sound-dialog.survival-focus *:not(input):not(textarea),#survival,#survival *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#survival,#survival *,#sound-dialog.survival-focus button{-webkit-tap-highlight-color:transparent}
#survival-canvas{-webkit-user-drag:none}

/* ---------- 2) 게임다운 모양 ---------- */
:root{--hud-ink:#0b1512;--hud-cream:#fff8dc;--hud-gold:#ffd84d;--hud-navy:#2f55b5;--hud-navy2:#4f7de6}
/* 위 상태 줄: 어두운 상자 대신 그림 위에 얹힌 글자와 게이지 */
#survival .survival-top button{pointer-events:auto}
#survival .survival-top{pointer-events:none;background:linear-gradient(#0b151299,#0b151255 55%,#0b151200);border-bottom:0;padding-bottom:10px;text-shadow:0 1px 0 var(--hud-ink),1px 0 0 var(--hud-ink),0 -1px 0 var(--hud-ink),-1px 0 0 var(--hud-ink)}
#sound-dialog #survival .survival-meter label{color:var(--hud-gold);font-weight:700;letter-spacing:.02em}
#sound-dialog #survival .survival-meter label span,#sound-dialog #survival .survival-meter label b{color:var(--hud-cream)}
#survival .survival-meter progress{height:11px;border:2px solid var(--hud-ink);border-radius:6px;box-shadow:0 0 0 1.5px var(--hud-cream);background:#132220;overflow:hidden}
#survival .survival-meter progress::-webkit-progress-bar{background:#132220;border-radius:4px}
#survival #survival-hp::-webkit-progress-value{background:linear-gradient(#ff8f7a,#e2523f 55%,#b93a2c);border-radius:4px}
#survival #survival-xp::-webkit-progress-value{background:linear-gradient(#b9e6ff,#6fb7e6 55%,#3f8fc8);border-radius:4px}
#survival #survival-hp::-moz-progress-bar{background:#e2523f}#survival #survival-xp::-moz-progress-bar{background:#6fb7e6}
#survival-clock,#survival-kills{font-weight:700;color:var(--hud-cream)}
#survival-place{color:var(--hud-gold);font-weight:700}

/* 버튼: 둥근 모서리 + 아래 그림자(누르면 내려감) */
#survival .survival-top button,#survival .survival-dpad button,#survival .survival-card,#survival .survival-diff,
#sound-dialog.survival-focus .sound-heading-actions .btn,#sound-dialog.survival-focus .battle-mode-picker button,#sound-dialog.survival-focus #game-rest-open,
#sound-dialog.survival-focus.sound-live .sound-playback-controls .btn{
 border:2px solid var(--hud-ink);border-radius:10px;background:linear-gradient(var(--hud-navy2),var(--hud-navy));color:var(--hud-cream);font-weight:700;
 box-shadow:inset 0 0 0 1.5px #f6ecc855,0 3px 0 var(--hud-ink);text-shadow:0 1px 0 var(--hud-ink);transition:transform .05s}
#survival .survival-top button:active,#survival .survival-card:active,#survival .survival-diff:active,
#sound-dialog.survival-focus .sound-heading-actions .btn:active,#sound-dialog.survival-focus .battle-mode-picker button:active,#sound-dialog.survival-focus #game-rest-open:active,
#sound-dialog.survival-focus.sound-live .sound-playback-controls .btn:active{transform:translateY(2px);box-shadow:inset 0 0 0 1.5px #f6ecc855,0 1px 0 var(--hud-ink)}
#sound-dialog.survival-focus .battle-mode-picker button[aria-pressed="true"],#sound-dialog.survival-focus #survival-expand[aria-pressed="true"]{background:linear-gradient(#ffe08a,#e9b949);color:#2a1d05;text-shadow:none;box-shadow:inset 0 0 0 1.5px #fff6d6aa,0 3px 0 var(--hud-ink)}
#survival #survival-quit{background:linear-gradient(#e0705f,#b8443a)}
#survival .survival-top button:disabled{opacity:.55}

/* 방향 버튼: 동그란 반투명 패드(화면 누르기가 기본이라 뒤로 물러난 모양) */
#survival .survival-dpad{gap:5px}
#survival .survival-dpad button{border-radius:50%;background:#0b151299;border:2px solid #f6ecc8b3;box-shadow:0 2px 0 #0b1512aa;color:var(--hud-cream);font-size:15px}
#survival .survival-dpad button[aria-pressed="true"]{background:#e9b949;color:#2a1d05;border-color:#fff6d6}
@media (pointer:coarse){#survival .survival-dpad{opacity:.78}}

/* 레벨업 카드: 두꺼운 카드 + 금색 강조 */
#survival .survival-card,#survival .survival-diff{border-radius:12px;text-align:left}
#survival .survival-card b,#survival .survival-diff b{color:var(--hud-gold)}
#survival .survival-card:hover,#survival .survival-card:focus-visible,#survival .survival-diff:hover{background:linear-gradient(#6a94f2,#3a63c6)}
/* 무기·직업 표시: 작은 알약 */
#survival-weapons span{border-radius:999px;border:1.5px solid var(--hud-ink);box-shadow:0 0 0 1px #f6ecc866;background:#0b1512c7;padding:2px 8px}
#survival-status{border-radius:999px;border:1.5px solid #f6ecc866;background:#0b1512d9}
/* 소리 크기 레일: 반투명 */
#scene-volume-arrows{border-radius:16px}
#scene-volume-arrows button{border-radius:12px;box-shadow:0 3px 0 var(--hud-ink)}

/* 레벨업·무기 고르기 카드는 화면 맨 아래에(교수님 11/13: "화면 한가운데라 게임을 가려"). 방향 버튼이 없어져 아래가 비었다.
   왼쪽 아래 무기 표시 줄 바로 위에 놓고, 마법사의 큰 마법 버튼이 있으면 그 위로 올린다. 상태 한마디도 같이 내린다. */
#sound-dialog #survival #survival-choose{bottom:36px}
#sound-dialog #survival.has-cast #survival-choose{bottom:72px}
#sound-dialog #survival #survival-status,#sound-dialog.survival-focus #survival #survival-status{bottom:40px}
#sound-dialog #survival.choosing #survival-status{display:none}
@media (max-height:540px){#sound-dialog #survival #survival-choose{bottom:max(34px,env(safe-area-inset-bottom))}}

/* 가로 화면에서만 보이는 추가 버튼과 돌리기 안내 */
#survival-rest-open,#survival-menu,#survival-sound-open{display:none}
#survival-rotate-hint{position:absolute;z-index:6;left:50%;top:64%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 28px);padding:8px 14px;border-radius:999px;border:2px solid var(--hud-ink);box-shadow:inset 0 0 0 1.5px #fff6d6aa,0 3px 0 var(--hud-ink);background:#fff3c9;color:#2a1d05;font-size:14px;font-weight:700;text-align:center;word-break:keep-all;pointer-events:none}
#survival-rotate-hint[hidden]{display:none}

/* ---------- 3) 휴대폰·태블릿: 판이 진행 중이면 게임만 화면 가득(세로·가로 모두, 교수님 11/13 "진짜 게임처럼 전체 화면") ---------- */
@media (pointer:coarse) and (max-width:940px){
 #sound-dialog.survival-focus:has(#survival .survival-top:not([hidden])) #battle-field{position:fixed;inset:0;z-index:60;width:100vw;height:100vh;height:100dvh;min-height:0;max-height:none;margin:0;border:0;border-radius:0}
 #sound-dialog.survival-focus #survival .survival-top{gap:8px;padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 10px max(10px,env(safe-area-inset-left))}
 #sound-dialog.survival-focus #survival .survival-run-actions{gap:8px}
 #sound-dialog.survival-focus #survival .survival-top button{min-height:44px;min-width:46px;font-size:12px;padding:4px 9px}
 #sound-dialog.survival-focus:has(#survival .survival-top:not([hidden])) :is(#survival-rest-open,#survival-menu,#survival-sound-open){display:inline-block}
 #sound-dialog.survival-focus #survival-weapons{left:max(8px,env(safe-area-inset-left))}
 #sound-dialog.survival-focus #survival #survival-choose{bottom:max(36px,env(safe-area-inset-bottom))}
}
@media (pointer:coarse) and (max-width:940px) and (orientation:landscape){
 #sound-dialog.survival-focus #survival .survival-top{flex-wrap:nowrap}
 #sound-dialog.survival-focus #survival .survival-meter{min-width:80px;flex:0 1 110px}
 #sound-dialog.survival-focus #survival-place{max-width:120px}
 #sound-dialog.survival-focus #survival .survival-run-actions{gap:6px}
 #sound-dialog.survival-focus #survival .survival-top button{min-width:44px;padding:4px 7px}
 #survival-rotate-hint{display:none!important}
}
@media (pointer:coarse) and (max-width:940px) and (orientation:portrait){
 #sound-dialog.survival-focus #survival .survival-run-actions{margin-left:0;width:100%;justify-content:flex-end}
}

/* ---------- 4) 더 밝고 선명하게(교수님 11/13 "다른 게임보다 훨씬 어두운 느낌"). 깜빡임 없이 그림 전체의 채도·밝기만 올린다. ---------- */
#survival-canvas{filter:saturate(1.32) brightness(1.13) contrast(1.03)}