/* ===================================================================== DUST 화면 스타일 ===================================================================== */ :root { --bg: #10140c; --fg: #f3e9c6; --accent: #ff8a1f; box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } html, body { height: 100%; margin: 0; background: var(--bg); color: var(--fg); font-family: "Malgun Gothic", system-ui, sans-serif; overflow: hidden; touch-action: none; } canvas { display: block; } body > canvas { position: fixed; left: 0; top: 0; width: 100%; height: 100%; } /* ----- 게임 중 정보 (HUD) ----- */ #hud { position: fixed; inset: 0; pointer-events: none; font-size: 13px; text-shadow: 1px 1px 2px #000; } #pos { position: absolute; right: 8px; top: 198px; font-size: 9px; color: #9ff; } #bgm-status { display: none; } /* PC: 미니맵 아래 단축키 안내 (폰은 버튼이 있어서 숨김) */ #pc-keys { position: absolute; right: 8px; top: 212px; width: 170px; font-size: 10px; line-height: 1.5; color: #e8e2c8cc; background: #0007; border-radius: 4px; padding: 3px 6px; box-sizing: border-box; text-align: center; } @media (pointer: coarse) { #pc-keys { display: none; } } /* BGM 안내 문구는 안 보임 (소리 켜기 버튼만) */ #log { position: absolute; left: 8px; bottom: 54px; color: #ff6a3d; font-size: 10px; line-height: 1.35; } /* 헤드샷 표시 (조준선 왼쪽 위) */ /* 저격총 스코프: 동그란 시야 + 가는 십자선 */ #scope-overlay { position: fixed; inset: 0; display: none; pointer-events: none; z-index: 3; background: radial-gradient(circle at 50% 50%, transparent 0, transparent 37vmin, #000 37.4vmin); } #scope-overlay::before { content: ''; position: absolute; left: calc(50% - 37vmin); width: 74vmin; top: 50%; height: 1px; background: #000c; } #scope-overlay::after { content: ''; position: absolute; top: calc(50% - 37vmin); height: 74vmin; left: 50%; width: 1px; background: #000c; } #scope-overlay i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #f22; box-shadow: 0 0 6px #f22; } /* 저격총을 스코프 없이 들었을 때: 대략 어디를 보는지 알려주는 큰 반원 (정확한 조준은 스코프로) */ #sniper-arc { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; display: none; pointer-events: none; opacity: .35; } /* 방어전: 단계 시작 · 성공 큰 글씨 (화면 위) · 수리 중 */ #def-banner { position: fixed; left: 50%; top: 96px; transform: translateX(-50%); display: none; z-index: 6; pointer-events: none; text-align: center; font-size: 30px; font-weight: 800; color: #f0d8ff; text-shadow: 0 0 12px #a040ff, 2px 2px 3px #000; white-space: nowrap; } #def-banner small { font-size: 16px; font-weight: 600; } #def-repair { position: fixed; left: 50%; top: 62%; transform: translateX(-50%); display: none; pointer-events: none; z-index: 5; padding: 4px 12px; background: #000a; border: 1px solid #fc4; border-radius: 12px; color: #ffd75a; font-size: 14px; } #btn-gate { right: 164px; bottom: 200px; font-size: 11px; color: #ffd75a; } #btn-shop { right: 164px; bottom: 244px; font-size: 11px; color: #7fd0ff; } #def-hint { position: fixed; left: 50%; top: 68%; transform: translateX(-50%); display: none; pointer-events: none; z-index: 5; padding: 3px 10px; background: #0008; border-radius: 10px; color: #fff; font-size: 13px; } /* 다음 단계 투표 (화면 위 가운데) */ #def-vote { position: fixed; left: 50%; top: 8px; transform: translateX(-50%); display: none; z-index: 7; pointer-events: auto; cursor: pointer; padding: 6px 18px; font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(#6a2a9a, #3a1050); border: 2px solid #c080ff; border-radius: 10px; box-shadow: 0 0 12px #a050ff; } #def-vote small { display: block; font-size: 11px; font-weight: 400; color: #e0c8ff; } @media (pointer: coarse), (max-height: 500px) { #def-vote { top: 30%; } } #def-vote.on { background: linear-gradient(#2a8a3a, #105020); border-color: #7f7; box-shadow: 0 0 12px #3f3; } /* 보급소 */ #def-shop { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 20; background: #0009; } #def-shop .ds-box { width: min(560px, 94vw); max-height: 90vh; overflow: auto; background: #1b1f24; border: 2px solid #ffd75a; border-radius: 10px; padding: 12px; color: #fff; } #def-shop h2 { margin: 0 0 6px; font-size: 18px; } #def-shop h2 small { font-size: 12px; color: #ffd75a; font-weight: 400; margin-left: 6px; } #def-shop .ds-sec { margin: 8px 0 4px; font-size: 12px; color: #aaa; } #def-shop .ds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } #def-shop .ds-up { position: relative; text-align: left; padding: 6px 44px 6px 8px; background: #2a3038; border: 1px solid #556; border-radius: 6px; color: #fff; cursor: pointer; } #def-shop .ds-up b { display: block; font-size: 13px; } #def-shop .ds-up small { font-size: 11px; color: #bbb; } #def-shop .ds-up i { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 800; color: #ffd75a; } #def-shop .ds-up.poor { opacity: .55; } #def-shop .ds-up.max { opacity: .5; border-color: #7f7; } #def-shop .ds-up.max i { color: #7f7; } #def-shop .ds-close { display: block; margin: 10px auto 0; padding: 6px 20px; } @media (max-width: 500px) { #def-shop .ds-grid { grid-template-columns: 1fr; } } /* 무기 칸 왼쪽 위: 단계 숫자 (단계 색) */ #inv-panel .c .tn { position: absolute; left: 2px; top: 0; font-size: 10px; font-weight: 800; text-shadow: 0 0 2px #000, 1px 1px 0 #000; } .tier-tag { font-size: .9em; text-shadow: 0 0 2px #000, 1px 1px 0 #000; } /* ⚒ 최종무기 강화 */ .forge-btn { color: #ff7a5a !important; border-color: #ff5a3a !important; } .forge .forge-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .forge .forge-list button { display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 4px 8px; background: #2a1e1e; border: 1px solid #644; border-radius: 6px; color: #fff; cursor: pointer; } .forge .forge-list button.on { border-color: #ff3a3a; box-shadow: 0 0 8px #f33; } .forge .forge-list span { font-size: 26px; } .forge .forge-info { padding: 8px; background: #1a1414; border: 1px solid #533; border-radius: 6px; text-align: center; line-height: 1.7; } .forge-bar { display: flex; gap: 2px; justify-content: center; margin: 4px 0; } .forge-bar i { width: 12px; height: 12px; border-radius: 2px; background: #333; border: 1px solid #555; } .forge-bar i.on { background: #ffd75a; border-color: #ffe9a0; box-shadow: 0 0 4px #fc4; } .forge-bar i.mid.on { background: #ff8a3a; } .forge-bar i.hi.on { background: #ff3a5a; box-shadow: 0 0 6px #f36; } .forge-go { margin-top: 6px; font-size: 16px; padding: 6px 22px; } .forge-go[disabled] { opacity: .4; } .forge-ok { color: #ffd75a; font-size: 18px; font-weight: 800; text-shadow: 0 0 8px #fa0; } .forge-fail { color: #f88; font-size: 16px; } /* 장군 별: 빨간 별이 번갈아 반짝 */ .rk-star { animation: rkTwinkle 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .rk-field { animation: rkFieldGlint 3.7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes rkFieldGlint { 0%, 70%, 100% { filter: brightness(1); transform: scale(1); } 82% { filter: drop-shadow(0 0 .7px #d5e3ff88) brightness(1.18); transform: scale(1.02); } } @keyframes rkTwinkle { 0%, 100% { filter: drop-shadow(0 0 .6px #f22) brightness(1); transform: scale(1); } 45% { filter: drop-shadow(0 0 2.5px #ff4a2a) brightness(1.45); transform: scale(1.08); } 55% { filter: drop-shadow(0 0 3px #fff) brightness(1.7); transform: scale(1.1); } } #hs-pop { position: absolute; right: calc(50% + 26px); transform: translateY(-140%); opacity: 0; transition: opacity .25s; pointer-events: none; font-size: 13px; font-weight: 900; color: #ffd75a; text-shadow: 0 0 4px #000, 1px 1px 0 #000; white-space: nowrap; } #hs-pop.kill { font-size: 30px; color: #ff2a1a; text-shadow: 0 0 8px #f00, 0 0 16px #f00a, 1px 1px 0 #000; } #crosshair { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; } /* 그림은 hud.js applyCrosshair (설정에서 모양·색) */ #crosshair svg { display: block; } /* ----- 원작풍 하단 바 (금속 판 느낌) ----- */ #bottom-hud { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; display: flex; gap: 4px; padding: 3px 4px; box-sizing: border-box; background: linear-gradient(#3a3d40, #1d1f21 45%, #141516); border-top: 2px solid #8a8d90; box-shadow: inset 0 1px 0 #c8cbce55, 0 -2px 6px #0008; font-size: 11px; white-space: nowrap; color: #e8e2c8; } .bh-cell { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 6px; min-width: 0; background: linear-gradient(#26292c, #18191b); border: 1px solid #555a5e; border-radius: 3px; box-shadow: inset 0 0 0 1px #000a, inset 0 1px 0 #ffffff14; } .bh-row { display: flex; align-items: center; gap: 5px; } .bh-label { font-size: 9px; font-weight: 700; color: #b8b090; letter-spacing: 1px; width: 26px; } .bh-sub { font-size: 10px; color: #a8a490; overflow: hidden; text-overflow: ellipsis; } .bh-bar { position: relative; flex: 1; height: 12px; background: #0c0d0e; border: 1px solid #50555a; border-radius: 2px; overflow: hidden; } .bh-bar i { position: absolute; inset: 0; transform-origin: left; } .bh-bar span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 12px; font-weight: 700; text-shadow: 1px 1px 1px #000; } .bh-bar.exp i { background: linear-gradient(#5ab0ff, #2a70c0); } .bh-bar.life { height: 15px; } .bh-bar.life span { line-height: 15px; font-size: 11px; } #hp-fill { background: linear-gradient(#5f5, #2a2); } #hp-armor { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#fff, #cfd4da); opacity: .9; box-shadow: 0 0 4px #fff; } /* 왼쪽(레벨·경험치)이 가운데(LIFE)보다 조금 더 넓게 — 남는 폭을 6:5로 나눔 */ .bh-exp { flex: 6 1 0; min-width: 200px; } .bh-exp .bh-bar { height: 15px; } .bh-exp .bh-bar span { line-height: 15px; font-size: 11px; } .bh-life { flex: 5 1 0; min-width: 150px; } .bh-weapon { flex: 0 0 270px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; } #bh-wicon { font-size: 22px; } #weapon-info { font-weight: 700; font-size: 12px; } #bh-ammo { margin-left: auto; min-width: 74px; text-align: center; font-size: 17px; font-weight: 700; color: #fff; background: linear-gradient(#ff9a3a, #e06a10); border: 1px solid #ffc080; border-radius: 3px; padding: 2px 6px; text-shadow: 1px 1px 1px #8a3a00; } #bh-ammo.reloading { background: linear-gradient(#777, #444); border-color: #999; text-shadow: none; } .bh-potion { flex: 0 0 110px; font-size: 11px; align-items: center; text-align: center; } #bh-lv { font-size: 12px; color: #fff; } #bh-exp-text { padding: 0 6px; } #bh-promo { position: absolute; right: 6px; top: 0; bottom: 0; display: none; font-size: 11px; line-height: 15px; font-weight: 900; letter-spacing: .5px; background: linear-gradient(90deg, #ffd75a 0%, #fff 20%, #ffd75a 40%, #ffb020 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 3px #ffb000); animation: promoShine 1.4s linear infinite, promoPulse .7s ease-in-out infinite alternate; } @keyframes promoShine { from { background-position: 100% 0; } to { background-position: -150% 0; } } @keyframes promoPulse { to { filter: drop-shadow(0 0 7px #ffd000); transform: scale(1.06); } } .rk-text { display: inline-block; font-size: 10px; font-weight: 700; line-height: 14px; padding: 0 4px; color: #f0ecd0; background: #3a3f2a; border: 1px solid #a5a878; border-radius: 3px; vertical-align: middle; } #toast { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); display: none; z-index: 6; pointer-events: none; font-size: 24px; font-weight: 700; color: #7f7; text-shadow: 0 0 10px #0f0, 1px 1px 2px #000; } #difficulty-label { position: absolute; right: 8px; top: 6px; width: 170px; height: 20px; line-height: 18px; box-sizing: border-box; text-align: center; font-size: 13px; background: #000a; border: 1px solid #888; border-radius: 4px 4px 0 0; } #minimap { position: absolute; right: 8px; top: 26px; width: 170px; height: 170px; box-sizing: border-box; border: 1px solid #888; border-top: 0; background: #000a; border-radius: 0 0 4px 4px; } /* 난이도 칸 바로 밑에 붙음 */ #ready-hud { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); display: none; background: #000b; border: 2px solid #ffd23a; border-radius: 8px; padding: 6px 16px; font-size: 15px; text-align: center; pointer-events: none; } #ready-hud small { color: #ccc; } #boss-timer { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: none; font-size: 22px; font-weight: 700; color: #f6f; background: #000a; border: 1px solid #f6f; border-radius: 6px; padding: 2px 14px; } #boss-timer.hurry { color: #f44; border-color: #f44; animation: hurry .5s ease-in-out infinite alternate; } @keyframes hurry { to { transform: translateX(-50%) scale(1.12); } } #quest-panel { position: absolute; left: 8px; top: 8px; font-size: 11px; line-height: 1.45; width: 200px; background: #0007; padding: 4px 8px; border-left: 3px solid var(--accent); } /* 지옥 습격: 붉은 화면 테두리 + 위쪽 게이지 */ #hell-vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 120px 30px #c00a, inset 0 0 40px 6px #f20c; } #hell-hud { position: absolute; left: 8px; top: 100px; display: none; width: 200px; height: 18px; box-sizing: border-box; background: #1a0806cc; border: 1px solid #7a2a20; border-radius: 8px; overflow: hidden; pointer-events: none; } #hell-hud i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#ff7a40, #b01808); } #hell-hud span { position: absolute; inset: 0; text-align: center; font-size: 12px; line-height: 18px; font-weight: 700; color: #ffe0d0; text-shadow: 1px 1px 2px #000; white-space: nowrap; } #hell-hud.full { border-color: #f63; box-shadow: 0 0 10px #f428; animation: hellpulse .7s ease-in-out infinite alternate; } #hell-hud.test { pointer-events: auto; cursor: pointer; } /* 테스트 모드: 눌러서 바로 습격 */ #hell-hud.active { height: 24px; border: 2px solid #ff4020; box-shadow: 0 0 16px #f20a; animation: hellpulse .5s ease-in-out infinite alternate; } #hell-hud.active span { font-size: 12px; line-height: 20px; } @keyframes hellpulse { to { box-shadow: 0 0 22px #f40d; } } #party-panel { position: absolute; left: 216px; top: 8px; font-size: 10px; line-height: 1.45; width: auto; max-width: 190px; white-space: nowrap; background: #0007; padding: 4px 8px; border-left: 3px solid #4cf; display: none; } #quest-arrow { position: absolute; left: 50%; top: 46px; transform: translateX(-50%); display: none; text-align: center; color: #fc0; font-weight: 700; text-shadow: 1px 1px 2px #000; } #quest-arrow svg { width: 48px; height: 48px; transform-origin: 50% 50%; } .name-tag { position: absolute; transform: translate(-50%, -100%); font-size: 11px; color: #fff; text-shadow: none; white-space: normal; width: max-content; max-width: min(320px, calc(100vw - 16px)); overflow-wrap: anywhere; padding: 2px 4px; border-radius: 4px; background: transparent; pointer-events: none; } .name-tag::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: var(--tag-link-length, 0px); background: #d7ecff80; transform-origin: 50% 0; transform: rotate(var(--tag-link-rotation, 0rad)); pointer-events: none; } /* 데미지 숫자 (적 체력바 크기 정도의 깔끔한 글씨) */ .dmg-num { position: absolute; transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap; font: 800 13px/1 "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: #fff; letter-spacing: .3px; text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; } .dmg-num.head { color: #ffd84a; font-size: 15px; } .dmg-num.kill { color: #ff2a1a; font-size: 26px; font-weight: 900; letter-spacing: 1px; text-shadow: 0 0 6px #f00, 0 0 12px #f008, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; animation: killPop .5s cubic-bezier(.2,1.8,.4,1); } @keyframes killPop { from { transform: translate(-50%, -100%) scale(.3); } to { transform: translate(-50%, -100%) scale(1); } } .dmg-num.burn { color: #ff9a3a; font-size: 11px; } .ebar { position: absolute; width: 46px; height: 6px; margin: -3px 0 0 -23px; background: #000a; border: 1px solid #000; } .ebar i { display: block; height: 100%; } .ebar .ebar-armor { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: #fffe; box-shadow: 0 0 3px #fff; } /* 조준선 오른쪽: 남은 탄 / 재장전 */ #ammo-cross { position: absolute; transform: translate(0, -50%); text-align: left; pointer-events: none; } #ammo-cross span { font-size: 12px; font-weight: 700; color: #fff; text-shadow: 1px 1px 2px #000, 0 0 4px #000; white-space: pre; line-height: 1.25; } #ammo-cross.low span { color: #fc4; } #ammo-cross.reload span { color: #f86; font-size: 12px; } #ammo-cross .ac-bar { width: 52px; height: 4px; margin: 2px 0 0; background: #0008; border-radius: 2px; overflow: hidden; display: none; } #ammo-cross.reload .ac-bar { display: block; } #ammo-cross .ac-bar i { display: block; height: 100%; width: 0; background: #f86; } #downed-exit, #downed-respawn { display: none; margin: 8px auto 0; pointer-events: auto; background: #000c; color: #fff; border: 1px solid #aaa; border-radius: 6px; padding: 8px 16px; font-size: 14px; cursor: pointer; } #downed-respawn:disabled, #dead-screen [data-d="re"]:disabled { opacity: .55; cursor: wait; } #downed-banner { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); display: none; max-width: 90vw; box-sizing: border-box; text-align: center; font-size: clamp(14px, 2.5vw, 22px); font-weight: 700; color: #f55; background: #000b; border: 2px solid #f55; border-radius: 8px; padding: 6px 16px; animation: hurry .6s ease-in-out infinite alternate; } /* 유탄·수류탄 힘 게이지 (캐릭터 오른쪽, 쏠 때만) */ #charge-gauge { position: absolute; display: none; width: 12px; height: 70px; transform: translate(0, -50%); background: #000a; border: 1px solid #fc8; border-radius: 6px; overflow: hidden; box-shadow: 0 0 6px #f808; } #charge-gauge i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, #3c3, #fd3 55%, #f40); } #charge-gauge span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: #fe8; text-shadow: 1px 1px 2px #000; } #crate-prompt { position: absolute; display: none; transform: translate(-50%, -100%); text-align: center; background: #000b; border: 1px solid #fc3; border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 700; color: #fe8; white-space: nowrap; } #crate-prompt .cp-bar { height: 5px; margin-top: 3px; background: #222; border-radius: 3px; overflow: hidden; } #crate-prompt .cp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #fc3, #f80); } .party-arrow { position: absolute; top: 46%; font-size: 11px; color: #4cf; background: #0008; padding: 2px 8px; border-radius: 10px; display: none; } #bgm-btn { position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%); display: none; z-index: 7; background: #c60; color: #fff; border: 0; border-radius: 16px; padding: 6px 14px; font-size: 13px; } #ytp { position: fixed; left: 50%; bottom: 52px; transform: translateX(-50%); width: 96px; height: 54px; opacity: .5; pointer-events: none; z-index: 2; } /* ----- 전체 화면 창 공통 (선택·장비·스탯·결과·메뉴·사망) ----- */ .overlay { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; background: #000d; overflow: auto; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; } /* 내용이 짧으면 가운데, 길면 위에서부터 스크롤 */ .overlay::before, .overlay::after { content: ''; flex: 1 0 6px; } .overlay h1 { color: var(--accent); margin: 0; } /* ----- 시작 화면: DUST CAMP 대기실 (가운데에 내 병사 3D) ----- */ #select-screen { display: block; overflow: hidden; line-height: 1.35; text-align: left; background: linear-gradient(90deg, #000d 0, #0008 24%, #0000 36%, #0000 64%, #0008 76%, #000d 100%), linear-gradient(#0009, #0000 22%, #0000 75%, #000c); } #select-screen::before, #select-screen::after { content: none; } #select-screen { touch-action: none; } /* 폰: 끌기로 병사 돌리기 (목록만 위아래 스크롤) */ #t-left, #t-right, .t-box { touch-action: pan-y; } #select-screen button { font-family: inherit; cursor: pointer; color: var(--fg); } .t-top { position: absolute; left: 0; right: 0; top: 0; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; } .t-logo { font-size: 32px; font-weight: 900; letter-spacing: 2px; line-height: 1; text-shadow: 0 3px 0 #000, 0 0 18px #000; } .t-logo b { color: #f2ead2; } .t-logo span { color: #ff8a1e; margin-left: 10px; text-shadow: 0 3px 0 #000, 0 0 16px #ff6a0066; } .t-tools { display: flex; align-items: center; gap: 6px; } .t-tools > button { width: 34px; height: 34px; border-radius: 6px; background: #0009; border: 1px solid #fff4; font-size: 16px; padding: 0; } #select-screen .test-btn { color: #8ff; border-color: #0aa8; } #lobby { position: relative; background: #0009; border: 1px solid #fff3; border-radius: 17px; padding: 0 12px; height: 34px; line-height: 34px; font-size: 13px; cursor: default; } #lobby .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4f6; box-shadow: 0 0 6px #4f6; margin-right: 6px; } #lobby .dot.off { background: #888; box-shadow: none; } #lobby .t-who { display: none; position: absolute; right: 0; top: 38px; min-width: 200px; background: #000e; border: 1px solid #fff3; border-radius: 6px; padding: 6px 10px; line-height: 1.6; z-index: 3; } #lobby.open .t-who { display: block; } /* 눌러서 열고 닫기 (폰은 hover 가 없어서) */ #lobby { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } #lobby::after { content: " ▾"; opacity: .6; } #lobby.open::after { content: " ▴"; } #lobby .t-who .me { color: #ffd75a; } #t-left, #t-right { position: absolute; top: 64px; bottom: 36px; overflow-y: auto; } #t-left { left: 12px; width: 230px; } #t-right { right: 12px; width: 250px; display: flex; flex-direction: column; gap: 8px; } .t-h { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #cbb67a; margin: 0 0 6px 2px; } .t-h.test { color: #6ee; margin-top: 10px; letter-spacing: 0; } .t-h small { display: block; color: #8bb; font-weight: 400; letter-spacing: 0; opacity: 1; } .t-card { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 6px; padding: 7px 10px; text-align: left; background: linear-gradient(90deg, #1d2016e6, #11130ecc); border: 1px solid #ffffff1f; border-left: 3px solid #555a44; border-radius: 6px; } .t-card b { display: block; font-size: 15px; } .t-card small { display: block; font-size: 11px; color: #b8b49a; } .t-card.on { border-color: #ffd75a88; border-left-color: #ffd75a; background: linear-gradient(90deg, #3a3212f0, #1d1a0ccc); box-shadow: 0 0 12px #ffd75a33; } .t-card.new { justify-content: center; color: #ffcf8a; border-style: dashed; border-left-width: 1px; font-weight: 700; } .t-card.import { display: block; text-align: center; color: #8fd8ff; border-color: #4ab8ff88; border-left-color: #4ab8ff; animation: launchGlow 1.6s ease-in-out infinite alternate; } .t-card.import small { color: #9bc; } .t-card.mini { display: inline-block; width: auto; margin: 0 4px 4px 0; padding: 4px 10px; font-size: 12px; border-left-width: 1px; } .test-level { display: flex; align-items: center; gap: 8px; color: #a8dddd; font-size: 12px; margin: 5px 0 8px; } .test-level select { background: #13272a; color: #fff; border: 1px solid #4b7779; border-radius: 5px; padding: 5px; } .test-weapons { display: flex; gap: 4px; flex-wrap: wrap; margin: 5px 0; } .test-weapons small { flex-basis: 100%; color: #a8bbbb; font-size: 11px; } .test-weapons button { padding: 5px 8px; font-size: 12px; color: #d4ddd8; background: #16221f; border: 1px solid #697a70; border-radius: 5px; } .test-weapons button.on { color: #aaffee; border-color: #55bda7; background: #173b34; } #t-center { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); text-align: center; width: 340px; pointer-events: none; } #t-plate { pointer-events: auto; } .t-rank { display: inline-flex; align-items: center; gap: 6px; background: #000a; border: 1px solid #ffd75a55; border-radius: 14px; padding: 2px 12px 2px 6px; font-size: 13px; color: #ffd75a; } .t-name { font-size: 28px; font-weight: 900; text-shadow: 0 2px 0 #000, 0 0 12px #000; margin-top: 2px; } #title-nameplate { position:absolute; display:none; align-items:center; justify-content:center; gap:7px; transform:translate(-50%,-100%); pointer-events:none; white-space:nowrap; max-width:calc(100vw - 24px); padding:5px 9px; border:1px solid #b3bca640; border-radius:7px; background:#0b151dd9; color:#f0f3ed; font-size:13px; line-height:20px; box-shadow:0 2px 9px #0005; text-shadow:0 1px 2px #000; } #title-nameplate .tn-rank { display:inline-flex; align-items:center; gap:4px; color:#d8dcbf; font-size:11px; } #title-nameplate b { overflow:hidden; text-overflow:ellipsis; } #title-nameplate small { color:#b8c6cb; font-size:11px; } @media(max-width:700px){ #title-nameplate { font-size:11px; line-height:18px; padding:3px 7px; gap:5px; } #title-nameplate .tn-rank, #title-nameplate small { font-size:10px; } } .t-sub { font-size: 13px; color: #ddd; text-shadow: 0 1px 2px #000; } .t-hint { display: block; margin-top: 4px; font-size: 11px; color: #fff8; } .t-edit { display: flex; gap: 6px; justify-content: center; margin-top: 6px; } #select-screen .t-edit button { background: #000a; border: 1px solid #cbb67a88; color: #f2ead2; border-radius: 6px; padding: 5px 12px; font-size: 13px; } .t-pts { color: #ff9a5a; animation: medicPulse .6s ease-in-out infinite alternate; } #inv-panel, #stat-panel { z-index: 26; } /* 시작 화면 위에도 뜨게 */ #select-screen .t-delchar { display: block; margin: 14px auto 2px; background: none; border: 0; color: #c77; font-size: 11px; text-decoration: underline; opacity: .75; padding: 4px 8px; cursor: pointer; } #select-screen .t-delchar:hover { opacity: 1; color: #f99; } #select-screen .t-del { margin-top: 6px; background: #0007; border: 1px solid #a556; color: #f99; border-radius: 4px; padding: 2px 10px; font-size: 11px; } .t-seg { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid #fff3; } .t-seg button { flex: 1; padding: 8px 0; background: #0009; border: 0; font-size: 14px; font-weight: 700; color: #aaa !important; } .t-seg button.on { background: #3a3212; color: #ffd75a !important; box-shadow: inset 0 -3px 0 #ffd75a; } .t-rooms { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; overflow-y: auto; min-height: 40px; } .t-room { display: block; width: 100%; text-align: left; padding: 7px 10px; background: #000a; border: 1px solid #fff2; border-radius: 6px; } .t-room b { display: block; font-size: 14px; } .t-room small { font-size: 11px; color: #bbb; } .t-room.on { border-color: #6f6; background: #0f2a12e0; box-shadow: 0 0 10px #4f63; } .t-room.new b { color: #ffcf8a; } .t-empty { padding: 10px; background: #0008; border: 1px dashed #fff3; border-radius: 6px; font-size: 12px; color: #ccc; text-align: center; line-height: 1.6; } .t-training { width:100%;padding:12px 0;border:1px solid #82b6a3;border-radius:9px;background:linear-gradient(#294b48,#163731);color:#e2f3e5;font-size:20px;font-weight:800;letter-spacing:2px; } .t-training small {display:block;font-size:11px;letter-spacing:0;font-weight:400;color:#afcbbb;margin-top:3px;} .t-training:hover {background:linear-gradient(#38625c,#20443d);} #training-tools {position:absolute;bottom:72px;left:50%;transform:translateX(-50%);display:flex;gap:6px;pointer-events:auto;} #training-tools button {background:#16312bea;color:#dceadb;border:1px solid #759c84;border-radius:6px;padding:8px 13px;font-weight:700;cursor:pointer;} #training-tools kbd {margin-left:5px;opacity:.7;} #training-panel {display:none;position:fixed;inset:0;z-index:140;background:#060e13b0;backdrop-filter:blur(5px);align-items:center;justify-content:center;padding:16px;pointer-events:auto;} .tr-window {box-sizing:border-box;width:min(760px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:24px;background:linear-gradient(135deg,#263c3e,#122529);border:1px solid #8ba997;border-radius:14px;box-shadow:0 25px 90px #0009;color:#eef1dd;} .tr-window header {display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;} .tr-window header small {font-size:10px;letter-spacing:2px;color:#a8c9b6;}.tr-window h2 {margin:6px 0;font-size:24px;} .tr-window button {cursor:pointer;border:1px solid #648f7f;background:#314f48;color:#e8efd8;padding:9px 14px;border-radius:6px;} .tr-loadout {display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}.tr-loadout label {display:flex;flex-direction:column;gap:6px;font-size:12px;color:#bdd0c2;} .tr-window select {min-width:0;width:100%;color:#edf0da;background:#102a2b;border:1px solid #5d8074;border-radius:5px;padding:9px;font-size:13px;} .tr-gear {display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0;}.tr-gear label {min-width:0;background:#10282b;border:1px solid #46685e;border-radius:7px;padding:10px;}.tr-gear img {width:100%;height:85px;object-fit:contain;}.tr-gear b {display:block;font-size:12px;text-align:center;margin:4px 0 8px;} .tr-areas {display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}.tr-window p {font-size:11px;color:#b4cabb;margin:16px 0;}.tr-window .tr-resume {width:100%;background:#82bfa1;color:#102c25;font-size:15px;font-weight:800;}.tr-dual {display:block;font-size:12px;margin-top:12px;} @media(max-width:600px){.tr-window{padding:16px;}.tr-loadout,.tr-gear{grid-template-columns:repeat(2,1fr);}.tr-areas{grid-template-columns:repeat(2,1fr);}#training-tools{bottom:58px;max-width:95vw;white-space:nowrap;}#training-tools button{font-size:11px;padding:7px 9px;}.t-training{font-size:18px;padding:8px 0;}} .t-launch { width: 100%; padding: 12px 0 8px; border-radius: 10px; border: 2px solid #ffb04a; font-size: 24px; font-weight: 900; letter-spacing: 4px; background: linear-gradient(#ff9a2e, #c4500c); color: #fff !important; text-shadow: 0 2px 0 #7a2a00; box-shadow: 0 4px 0 #6a2500, 0 0 22px #ff7a1a66; animation: launchGlow 1.6s ease-in-out infinite alternate; } .t-launch small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0; opacity: .95; text-shadow: none; } .t-launch:active { transform: translateY(3px); box-shadow: 0 1px 0 #6a2500; } .t-launch.off { filter: grayscale(1) brightness(.6); animation: none; } @keyframes launchGlow { to { box-shadow: 0 4px 0 #6a2500, 0 0 34px #ffa04acc; } } .t-off { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: #ccc; cursor: pointer; padding: 2px 0; } .t-off input { width: 18px; height: 18px; } #net-status { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); font-size: 13px; color: #ffd75a; text-shadow: 0 1px 3px #000; white-space: nowrap; } /* 관리자(테스트) 모드 입구: 오른쪽 아래 구석에 아주 작고 흐리게 */ #select-screen .t-build { position: absolute; right: 4px; bottom: 2px; font-size: 9px; opacity: .22; background: none; border: 0; padding: 2px 4px; color: #ccc; } #select-screen .t-build:hover { opacity: .6; } /* 로그인 화면 (시작 화면 위) */ #login-screen { position: fixed; inset: 0; z-index: 25; display: none; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #1a1d12ee, #050604f8 75%); } .t-box.login { width: min(360px, 92vw); padding: 18px 20px; } .t-box.login .t-logo { font-size: 30px; margin-bottom: 6px; } .t-box.login input { width: 100%; box-sizing: border-box; font-size: 17px; padding: 9px 12px; background: #000; color: #fff; border: 1px solid #888; border-radius: 6px; } .t-box.login .t-go { width: 100%; padding: 11px 0; font-size: 17px; } .lg-opts { display: flex; justify-content: center; gap: 16px; font-size: 13px; color: #ccc; margin: 2px 0; } .lg-opts label { display: flex; align-items: center; gap: 5px; cursor: pointer; } .t-box.login .lg-opts input { width: 17px; height: 17px; padding: 0; } .lg-msg { min-height: 18px; color: #ff8a6a; font-size: 13px; } .lg-switch { background: none; border: 0; color: #9cf; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 4px; font-family: inherit; } .lg-note { display: block; margin-top: 8px; font-size: 11px; color: #999; } #select-screen #t-account { width: auto; padding: 0 10px; font-size: 13px; border-radius: 17px; } /* 보급 상점 */ .t-box.shop { width: min(720px, 96vw); } .shop-dust { color: #ffd75a; margin-bottom: 8px; } .shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; } #select-screen .shop-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; background: linear-gradient(#2a2614, #15130a); border: 1px solid #cbb67a66; border-radius: 8px; } .shop-item .si { font-size: 28px; } .shop-item b { font-size: 14px; } .shop-item small { font-size: 10px; color: #bbb; min-height: 26px; } .shop-item .sp { margin-top: 3px; font-weight: 900; color: #ffd75a; font-size: 13px; } #select-screen .shop-item:active { transform: scale(.96); } .shop-item.poor { filter: grayscale(.8) brightness(.6); } .shop-result { min-height: 40px; margin-top: 8px; } .shop-got { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: shopPop .5s cubic-bezier(.2, 1.6, .4, 1); } .shop-got small { color: #ccc; font-size: 11px; max-width: 520px; } .shop-better { color: #ff6a5a; font-size: 13px; } @keyframes shopPop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* 🛠 관리자 */ .t-box.admin { width: min(640px, 96vw); text-align: left; } .t-box.admin h2 { text-align: center; } .adm-msg { text-align: center; color: #ffd75a; margin: 4px 0; } .adm-list { display: flex; flex-direction: column; gap: 6px; } .adm-user { background: #0009; border: 1px solid #fff2; border-radius: 6px; padding: 6px 8px; } .adm-user.banned { border-color: #f558; background: #2a0c0ccc; } .adm-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .adm-head small { color: #999; } .adm-head .adm-btn { margin-left: auto; } .adm-tag { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #3a3212; color: #ffd75a; } .adm-tag.ban { background: #4a1010; color: #f88; } .adm-row { display: flex; align-items: center; gap: 6px; padding: 3px 0 3px 10px; border-top: 1px solid #ffffff0c; } .adm-row small { color: #aaa; } .adm-row .adm-btn { margin-left: auto; } .adm-trash { margin-top: 4px; color: #aaa; font-size: 12px; } .adm-trash s { color: #888; } #select-screen .adm-btn { padding: 3px 10px; font-size: 12px; border-radius: 5px; background: #222; border: 1px solid #777; } #select-screen .adm-btn.del, #select-screen .adm-btn.ban { color: #f99; border-color: #a55; } #select-screen .adm-btn.unban, #select-screen .adm-btn.restore { color: #8f8; border-color: #5a5; } #select-screen .adm-btn.armed { background: #a22; color: #fff; } /* 🏆 PK 랭킹 */ .t-box.ranking { width: min(640px, 96vw); background: linear-gradient(#1c1a0eef, #0e0d07f2); border-color: #ffd75a77; } .rk-rule { display: block; color: #bbb; margin-bottom: 6px; } .rk-loading { padding: 30px; color: #ccc; } .podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 6px 0 4px; } .pd { width: 150px; text-align: center; } .pd-medal { font-size: 34px; line-height: 1; filter: drop-shadow(0 0 8px #ffd75a88); } .pd1 .pd-medal { font-size: 44px; animation: medalBob 1.6s ease-in-out infinite alternate; } .pd-name { font-weight: 900; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pd small { display: block; color: #999; font-size: 10px; } .pd-score { font-size: 20px; font-weight: 900; color: #ffd75a; text-shadow: 0 0 10px #ffb00066; } .pd-score small { display: inline; font-size: 11px; color: #ccb; margin-left: 2px; } .pd-step { margin-top: 4px; border-radius: 6px 6px 0 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #0008; font-weight: 900; } .pd1 .pd-step { height: 64px; background: linear-gradient(#ffe680, #d4a82a); box-shadow: 0 0 18px #ffd75a66; } .pd2 .pd-step { height: 44px; background: linear-gradient(#f0f0f0, #a8b0b8); } .pd3 .pd-step { height: 30px; background: linear-gradient(#f0b07a, #a8622a); } .pd.me .pd-name { color: #7fd0ff; } @keyframes medalBob { to { transform: translateY(-4px) rotate(-6deg); } } .rk-mine { margin: 6px 0; color: #7fd0ff; } .tier { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 900; color: var(--tc); border: 1px solid var(--tc); background: #0008; box-shadow: 0 0 8px color-mix(in srgb, var(--tc) 40%, transparent); white-space: nowrap; } .pd .tier { margin-top: 3px; } .tier-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; font-size: 11px; font-weight: 700; margin: 2px 0 6px; } .tier-legend small { color: #999; font-weight: 400; } .rk-tabs { display: flex; justify-content: center; gap: 4px; margin-bottom: 6px; } #select-screen .rk-tabs button { padding: 7px 18px; font-size: 14px; font-weight: 700; background: #1a1c14; border: 1px solid #555a44; color: #bbb; border-radius: 6px; } #select-screen .rk-tabs button.on { background: #3a3212; color: #ffd75a; border-color: #ffd75a; } .rk-table { width: 100%; border-collapse: collapse; font-size: 12px; } .rk-table th { color: #cbb67a; font-weight: 700; border-bottom: 1px solid #ffd75a44; padding: 4px; } .rk-table td { padding: 4px; border-bottom: 1px solid #ffffff10; text-align: center; } .rk-table td.rk-who { text-align: left; } .rk-table td.rk-who small { color: #888; } .rk-table td.rk-sc { color: #ffd75a; font-weight: 900; } .rk-table tr.me td { background: #1a3a5acc; } .rk-n { width: 30px; } #t-modal { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: center; padding-bottom: 14px; box-sizing: border-box; background: linear-gradient(#0000 30%, #000a); z-index: 5; } /* 아래쪽에 떠서 위에 병사 미리보기가 보임 */ .t-box { background: #15170fef; border: 1px solid #cbb67a66; border-radius: 10px; padding: 12px 16px; width: min(640px, 94vw); max-height: 92vh; overflow-y: auto; text-align: center; } .t-box h2 { margin: 0 0 8px; color: #ffd75a; font-size: 20px; } .t-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0; } .t-row input { font-size: 16px; padding: 6px 10px; width: 200px; background: #000; color: #fff; border: 1px solid #888; border-radius: 4px; } .t-classes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .t-class { padding: 8px 4px; background: #0009; border: 2px solid #fff2; border-radius: 8px; border-top: 4px solid var(--cc); } .t-class b { display: block; font-size: 14px; } .t-class small { display: block; font-size: 10px; color: #bbb; margin-top: 2px; } .t-class.on { border-color: #ffd75a; background: #3a3212; box-shadow: 0 0 12px #ffd75a55; } .t-go { background: linear-gradient(#ff9a2e, #c4500c); border: 1px solid #ffb04a; border-radius: 6px; padding: 8px 18px; font-size: 15px; font-weight: 700; } .t-x { background: #222; border: 1px solid #777; border-radius: 6px; padding: 8px 14px; } .t-lock { margin: 4px auto 6px; max-width: 420px; } .t-lock button small { display: block; font-size: 11px; font-weight: 400; color: #bbb; } @media (max-height: 500px) { /* 폰 가로 */ .t-top { height: 46px; top: 4px; } /* 화면 맨 위 가장자리는 폰이 터치를 가로챔 → 살짝 아래로 */ #lobby, .t-tools > button { height: 38px; line-height: 38px; } #lobby .t-who { top: 42px; } .t-logo { font-size: 24px; letter-spacing: 3px; } #t-left, #t-right { top: 54px; bottom: 26px; } #t-left { width: 190px; left: 8px; } #t-right { width: 200px; right: 8px; gap: 5px; } .t-card { padding: 5px 8px; margin-bottom: 4px; } .t-card b { font-size: 13px; } .t-name { font-size: 22px; } #t-center { bottom: 16px; width: 260px; } .t-launch { font-size: 20px; padding: 8px 0 6px; } .t-seg button { padding: 6px 0; font-size: 13px; } #net-status { top: 52px; } .t-classes { grid-template-columns: repeat(3, 1fr); } .t-hint { display: none; } } /* 스탯 창: 원작 캐릭터 정보창 느낌 (금속 패널 · 금색 라벨 · 검은 값 칸 · ▲ 버튼) */ #stat-panel { align-items: center; justify-content: center; overflow-y: auto; padding: 8px; box-sizing: border-box; } .sp-win { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(820px, 98vw); padding: 10px; box-sizing: border-box; background: linear-gradient(160deg, #3c4044, #24272a 60%, #1c1e20); border: 2px solid #6f7378; border-radius: 6px; box-shadow: inset 0 0 0 1px #000, inset 0 2px 0 #8a8e93, 0 6px 24px #000c; font-size: 13px; color: #eee; line-height: 1.3; } .sp-left, .sp-right { display: flex; flex-direction: column; gap: 6px; } .sp-top { display: flex; gap: 8px; } .sp-pcol { width: 120px; flex: none; display: flex; flex-direction: column; gap: 3px; } .sp-rank { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 3px; background: linear-gradient(#4a4232, #2e281c); border: 1px solid #7a6a48; border-radius: 3px; color: #ffe08a; font-weight: 800; } .sp-portrait { position: relative; flex: 1; min-height: 150px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #4a5038, #15170f); border: 2px solid #555; box-shadow: inset 0 0 12px #000; border-radius: 4px; } .sp-portrait canvas { width: 100%; height: 100%; object-fit: cover; display: block; } .sp-cls { position: absolute; right: 3px; bottom: 2px; font-size: 20px; filter: drop-shadow(0 1px 2px #000); } .sp-split { display: flex; flex-direction: column; gap: 3px; } .sp-split > div { display: flex; gap: 3px; } .sp-split .sp-v { text-align: left; font-size: 12px; } .sp-split b { color: #9fd0ff; } .sp-split .sp-tot { color: #7f7; } .sp-info, .sp-power { flex: 1; display: flex; flex-direction: column; gap: 3px; } .sp-power { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; } .sp-row { display: flex; gap: 3px; } .sp-k { flex: none; width: 76px; padding: 3px 4px; text-align: center; color: #e6d7a0; font-weight: 700; background: linear-gradient(#4a4232, #2e281c); border: 1px solid #7a6a48; border-radius: 3px; box-shadow: inset 0 1px 0 #8a7a58; } .sp-v { flex: 1; padding: 3px 6px; text-align: right; color: #fff; background: #0c0d0e; border: 1px solid #3a3d40; border-radius: 3px; box-shadow: inset 0 1px 3px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-v small { color: #999; } .sp-title { padding: 3px 8px; text-align: center; font-weight: 800; color: #f0e6c0; letter-spacing: 2px; background: linear-gradient(#5a5e62, #33363a); border: 1px solid #777; border-radius: 3px; text-shadow: 1px 1px 0 #000; } .sp-record { display: flex; flex-direction: column; border: 1px solid #444; border-radius: 3px; overflow: hidden; } .sp-record > div { display: grid; grid-template-columns: 1fr 1.2fr; } .sp-record > div > span { padding: 3px 6px; border-bottom: 1px solid #2a2c2e; background: #111314; } .sp-record > div > span:first-child { color: #e6d7a0; background: #1e1b14; } .sp-record .sp-rh > span { background: #3a3d40 !important; color: #fff !important; font-weight: 700; text-align: center; } .sp-stat { display: grid; grid-template-columns: 76px 1fr 34px; gap: 3px; align-items: center; } .sp-stat .sp-k { width: auto; } .sp-more { grid-column: 1 / -1; display: flex; gap: 3px; align-items: center; margin: 0 0 4px; } .sp-more small { margin-left: auto; color: #aaa; font-size: 11px; } .sp-more button { padding: 1px 8px; font-size: 11px; background: linear-gradient(#55595d, #333638); color: #ddd; border: 1px solid #777; border-radius: 3px; cursor: pointer; } .sp-up { height: 26px; font-size: 14px; color: #fff; background: linear-gradient(#7a7e83, #3b3e42); border: 1px solid #999; border-radius: 3px; box-shadow: inset 0 1px 0 #aaa; cursor: pointer; touch-action: none; } .sp-up:active { background: linear-gradient(#3b3e42, #7a7e83); } .sp-max { text-align: center; color: #7f7; font-size: 11px; font-weight: 700; } .sp-pts { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px; background: linear-gradient(#4a4232, #2e281c); border: 1px solid #7a6a48; border-radius: 3px; color: #e6d7a0; font-weight: 700; } .sp-pts b { min-width: 60px; padding: 2px 8px; text-align: right; font-size: 18px; color: #ffd75a; background: #0c0d0e; border: 1px solid #3a3d40; border-radius: 3px; } .sp-note { padding: 6px; font-size: 11px; color: #ccc; background: #141617; border: 1px solid #333; border-radius: 3px; line-height: 1.6; } .sp-note b { color: #e6d7a0; } #stat-reset { margin-top: 4px; padding: 2px 10px; background: #3a2a1a; color: #fda; border: 1px solid #a86; border-radius: 3px; cursor: pointer; } #stat-close { padding: 6px 20px; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(#5a6a3a, #34401f); border: 1px solid #8a9a5a; border-radius: 4px; cursor: pointer; } @media (max-width: 640px) { .sp-win { grid-template-columns: 1fr; } .sp-pcol { width: 96px; } } /* 계급표 */ #rank-panel { z-index: 31; gap: 8px; overflow-y: auto; padding: 12px 10px 20px; box-sizing: border-box; background: radial-gradient(ellipse at top, #2c3322f2, #0b0d09f5 70%); } #rank-panel h1 { margin: 0; font-size: 24px; letter-spacing: 3px; color: #f0e2a8; text-shadow: 0 2px 0 #000, 0 0 12px #d4af3766; } #rank-panel button { background: #3a3d2a; color: var(--fg); border: 1px solid #a8a070; padding: 6px 26px; cursor: pointer; font-size: 15px; border-radius: 4px; } .rk-now { display: flex; align-items: center; gap: 10px; background: #0007; border: 1px solid #d4af37aa; border-radius: 6px; padding: 6px 14px; text-align: left; line-height: 1.5; } .rk-now b { color: #ffd75a; } .rk-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: min(1100px, 100%); } .rk-group { flex: 0 1 auto; } .rk-list { flex-wrap: nowrap; } .rk-group { background: linear-gradient(#24271dcc, #14160fcc); border: 1px solid #555a44; border-top: 3px solid var(--rc); border-radius: 6px; padding: 6px 8px 8px; text-align: left; } .rk-title { font-weight: 700; color: var(--rc); font-size: 14px; margin-bottom: 5px; } .rk-title small { color: #a8a890; font-weight: 400; font-size: 11px; margin-left: 4px; } .rk-list { display: flex; flex-wrap: wrap; gap: 5px; } .rk-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; width: 76px; padding: 6px 2px 4px; background: #0d0e0b; border: 1px solid #3a3d30; border-radius: 5px; opacity: .78; line-height: 1.25; } .rk-card b { font-size: 13px; color: #eee; } .rk-card small { font-size: 10px; color: #aaa; } .rk-card.done { opacity: 1; } .rk-card .rk-bonus { color: #ff9a5a; font-weight: 700; } .rk-card.me { opacity: 1; border: 2px solid #ffd75a; background: #2e2a12; box-shadow: 0 0 12px #ffd75a88; animation: rkme 1.6s ease-in-out infinite; } .rk-card.me b { color: #ffd75a; } .rk-card i { position: absolute; top: -8px; right: -4px; font-style: normal; font-size: 9px; font-weight: 700; background: #d33; color: #fff; padding: 0 4px; border-radius: 6px; } @media (max-height: 500px) { /* 폰 가로 화면: 작게 */ #rank-panel { gap: 5px; padding-top: 6px; } #rank-panel h1 { font-size: 18px; } .rk-now { padding: 3px 10px; font-size: 13px; } .rk-card { width: 60px; padding: 4px 1px 3px; } .rk-card svg { width: 46px; height: 29px; } .rk-card b { font-size: 12px; } } /* 도감 탭 · 아이템 설명 */ .gd-tabs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; } #rank-panel .gd-tab { padding: 6px 14px; font-size: 14px; background: #1a1c14; border: 1px solid #555a44; color: #bbb; border-radius: 6px 6px 0 0; } #rank-panel .gd-tab.on { background: #3a3212; color: #ffd75a; border-color: #cbb67a; } .gd-sub { display: block; max-width: 700px; color: #ccc; opacity: 1 !important; } .gd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px; width: min(820px, 100%); } .gd-row { display: flex; align-items: center; gap: 10px; text-align: left; background: #0d0e0bcc; border: 1px solid #333; border-radius: 6px; padding: 6px 8px; } .gd-row small { display: block; color: #bbb; font-size: 11px; } .gd-cell { position: relative; width: 46px; height: 46px; flex: 0 0 46px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: #1a1a1a; border: 2px solid #444; box-sizing: border-box; margin: 0 auto; } .gd-cell.gg1 { box-shadow: 0 0 4px 0 var(--gc); } .gd-cell.gg2 { box-shadow: 0 0 7px 1px var(--gc); animation: gl2 3s ease-in-out infinite; } .gd-cell.gg3 { box-shadow: 0 0 10px 2px var(--gc); animation: gl3 2.4s ease-in-out infinite; } .gd-cell.gg4 { box-shadow: 0 0 14px 3px var(--gc); animation: gl4 1.8s ease-in-out infinite; } .gd-cell.gg5 { box-shadow: 0 0 18px 4px var(--gc), inset 0 0 8px var(--gc); animation: gl5 1.3s ease-in-out infinite; } .gd-box { width: min(820px, 100%); box-sizing: border-box; background: #0d0e0bcc; border: 1px solid #444a36; border-radius: 6px; padding: 8px 10px; text-align: left; } .gd-box small { color: #ccc; } .gd-slots, .gd-marks, .gd-weapons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; text-align: center; } .gd-slots > div { width: 66px; } .gd-slots b { display: block; font-size: 12px; } .gd-slots small { font-size: 10px; } .gd-marks > div { width: 150px; } .gd-marks small { display: block; font-size: 11px; margin-top: 4px; } .gd-weapons > div { min-width: 110px; background: #000a; border-radius: 6px; padding: 4px 6px; } .gd-weapons small { display: block; font-size: 11px; } .gd-tiers { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .gd-tiers > div { text-align: center; } .gd-tiers small { font-size: 10px; color: #aaa; } .gd-tier { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #fff8, var(--tc) 45%, #000 120%); box-shadow: 0 0 10px var(--tc); } .gd-tier b { color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; font-size: 15px; } .gd-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 5px; width: min(820px, 100%); } .gd-opts > div { background: #0d0e0bcc; border: 1px solid #333; border-radius: 5px; padding: 5px 8px; text-align: left; } .gd-opts small { display: block; color: #bbb; font-size: 11px; } @keyframes rkme { 50% { box-shadow: 0 0 20px #ffd75acc; } } #inv-panel { line-height: 1.5; } #model-error { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #000d; color: #fff; font-size: 16px; text-align: center; } #model-error b { font-size: 20px; color: #ffd23a; } #model-error button { margin-top: 6px; padding: 10px 22px; font: inherit; font-weight: 800; color: #fff; background: #3a5a2a; border: 1px solid #7f7; border-radius: 8px; cursor: pointer; } /* 가방 페이지 · 잠긴 칸 */ .iv-pages { display: flex; align-items: center; gap: 3px; margin-bottom: 4px; } #inv-panel .iv-pages button { min-width: 26px; padding: 1px 6px; margin: 0; text-align: center; font-size: 12px; } #inv-panel .iv-pages button.on { background: #3a3420; color: #ffd75a; border-color: #cbb67a; } #inv-panel .iv-pages button:disabled { opacity: .3; } .iv-pages small { margin-left: 6px; opacity: .6; font-size: 11px; } #inv-panel .c.lockc { background: repeating-linear-gradient(45deg, #111 0 4px, #191919 4px 8px); border-color: #222; opacity: .6; } /* 무기 조합 결과 고르기 */ #mix-pick { position: fixed; inset: 0; z-index: 61; display: none; align-items: center; justify-content: center; background: #000a; } #mix-pick .mp-box { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 22px; background: linear-gradient(#24221c, #16150f); border: 2px solid #cbb67a; border-radius: 10px; box-shadow: 0 0 30px #000; color: #fff; text-align: center; } #mix-pick .mp-box > b { font-size: 18px; color: #ffd75a; } #mix-pick .mp-box > small { color: #bbb; } #mix-pick .mp-row { display: flex; gap: 10px; margin: 6px 0; } #mix-pick .mp-row button { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 120px; padding: 10px; font-size: 15px; font-weight: 800; color: #fff; background: #222; border: 2px solid #666; border-radius: 8px; cursor: pointer; } #mix-pick .mp-row button span { font-size: 36px; } #mix-pick .mp-row button:hover, #mix-pick .mp-row button.last { border-color: #ffd75a; box-shadow: 0 0 12px #ffd75a88; } #mix-pick .mp-x { padding: 4px 16px; background: #333; color: #ccc; border: 1px solid #666; border-radius: 6px; cursor: pointer; } /* 보스 처치 → 결과창까지 카운트다운 */ #win-wait { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); min-width: 300px; padding: 8px 18px 10px; text-align: center; pointer-events: none; z-index: 7; background: linear-gradient(#3a2a00e6, #1a1200e6); border: 2px solid #ffd23a; border-radius: 10px; box-shadow: 0 0 20px #ffb00066; animation: winIn .5s cubic-bezier(.2, 1.5, .4, 1); overflow: hidden; } #win-wait b { display: block; font-size: 26px; color: #ffe070; text-shadow: 0 0 10px #ff9a00, 2px 2px 0 #000; } #win-wait span { display: block; font-size: 15px; font-weight: 800; color: #fff; } #win-wait small { display: block; font-size: 12px; color: #ddd; margin-top: 2px; } #win-wait i { position: absolute; left: 0; bottom: 0; height: 4px; background: #ffd23a; box-shadow: 0 0 6px #ffd23a; transition: width 1s linear; } @keyframes winIn { from { opacity: 0; transform: translate(-50%, -20px) scale(.8); } } @media (pointer: coarse) { #win-wait { min-width: 220px; top: 14%; } #win-wait b { font-size: 20px; } } /* ✨ 레벨업 · 진급 */ #lvup-pop { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; text-align: center; z-index: 8; } #lvup-pop b { display: block; font-size: 40px; font-weight: 900; font-style: italic; letter-spacing: 3px; color: #fff6c0; text-shadow: 0 0 12px #ffb000, 0 0 28px #ff8000, 3px 3px 0 #6a3a00; } #lvup-pop small { display: block; font-size: 15px; font-weight: 800; color: #ffd23a; text-shadow: 2px 2px 0 #000; } #lvup-pop.rank b { color: #ffe0e0; text-shadow: 0 0 14px #ff3a1a, 0 0 32px #ff6a00, 3px 3px 0 #500; font-size: 46px; } #lvup-pop .lv-rk { filter: drop-shadow(0 0 10px #ffd23a); } #lvup-pop.go { animation: lvPop 1.8s cubic-bezier(.2, 1.4, .4, 1) forwards; } #lvup-pop.rank.go { animation-duration: 2.6s; } @keyframes lvPop { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.4); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 25%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } } @media (pointer: coarse) { #lvup-pop b { font-size: 28px; } } /* 맞은 방향 */ #hurt-dir { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 6; } #hurt-dir i { position: absolute; left: -90px; top: -150px; width: 180px; height: 300px; transform-origin: 50% 50%; animation: hurtFade .9s ease-out forwards; } #hurt-dir i::before { content: ''; position: absolute; left: 30px; right: 30px; top: 0; height: 26px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-top: 6px solid #ff2a1a; filter: drop-shadow(0 0 6px #f00); } @keyframes hurtFade { 0% { opacity: 1; } 100% { opacity: 0; } } /* 체력 낮음 */ #lowhp-vig { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 1; box-shadow: inset 0 0 140px 40px #b00000c0, inset 0 0 50px 10px #ff0000a0; transition: opacity .1s; } /* PK 킬 알림판 */ #kill-feed { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; z-index: 6; } #kill-feed div { padding: 2px 10px; font-size: 13px; background: #000b; border-radius: 4px; border-left: 3px solid #888; white-space: nowrap; transition: opacity .5s; animation: feedIn .25s ease-out; } #kill-feed div.me { border-left-color: #ffd23a; background: #3a2a00cc; } #kill-feed div.dead { border-left-color: #f44; background: #3a0000cc; } #kill-feed b { color: #ffd23a; } #kill-feed s { text-decoration: line-through; color: #f88; } #kill-feed .out { opacity: 0; } @keyframes feedIn { from { opacity: 0; transform: translateY(-8px); } } /* 업데이트 완료 */ #upd-done { position: fixed; left: 50%; top: 12px; transform: translate(-50%, -150%); z-index: 98; max-width: min(520px, 92vw); padding: 10px 16px; background: linear-gradient(#123a16f2, #0a220cf2); border: 2px solid #5f5; border-radius: 10px; box-shadow: 0 0 20px #3f36; color: #eaffea; transition: transform .5s cubic-bezier(.2, 1.3, .4, 1); cursor: pointer; } #upd-done.go { transform: translate(-50%, 0); } #upd-done b { font-size: 16px; color: #8f8; } #upd-done ul { margin: 6px 0 4px; padding-left: 18px; font-size: 13px; line-height: 1.5; } #upd-done small { opacity: .6; font-size: 11px; } /* ⚔ PK 순위판 */ #quest-panel.pkb, .pkb { --pk: #ff5a5a; width: 230px; padding: 0; border-left: 0; background: linear-gradient(#1a0a0ae6, #0c0606e6); border: 1px solid var(--pk); border-radius: 8px; box-shadow: 0 0 12px #000a, 0 0 10px color-mix(in srgb, var(--pk) 40%, transparent); overflow: hidden; } .pkb-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--pk) 45%, #000), transparent); font-size: 12px; } .pkb-head > b { color: #fff; text-shadow: 0 0 6px var(--pk); } .pkb-head span { color: #ddd; font-size: 11px; } .pkb-head span b { color: #ffd23a; } .pkb-me { display: flex; align-items: center; gap: 8px; padding: 4px 8px 0; } .pkb-big b { font-size: 30px; font-weight: 900; line-height: 1; color: #ffd23a; text-shadow: 0 0 10px #ff9a00, 2px 2px 0 #000; } .pkb-big small { color: #ccc; font-size: 12px; margin-left: 2px; } .pkb-st { font-size: 12px; color: #fff; line-height: 1.3; } .pkb-st b { color: #ffd23a; font-size: 14px; } .pkb-pips { display: flex; gap: 2px; padding: 4px 8px 5px; } .pkb-pips i { flex: 1; height: 7px; background: #333; border: 1px solid #555; transform: skewX(-15deg); } .pkb-pips i.on { background: linear-gradient(#ffe070, #ff8a00); border-color: #ffd23a; box-shadow: 0 0 5px #ff9a00; } .pkb-warn { margin: 0 6px 4px; padding: 2px 6px; font-size: 11px; font-weight: 800; color: #fff; background: #a01010; border-radius: 4px; animation: pkWarn .6s ease-in-out infinite alternate; } @keyframes pkWarn { to { background: #ff3a1a; } } .pkb-list { border-top: 1px solid #ffffff22; } .pkb-row { position: relative; display: flex; align-items: center; gap: 4px; padding: 2px 8px 4px; font-size: 11px; color: #ccc; } .pkb-row.me { color: #fff; background: #ffd23a1c; } .pkb-row.me .pkb-n small { color: #ffd23a; font-size: 9px; } .pkb-row.top .pkb-n { color: #ffd23a; font-weight: 800; } .pkb-rk { width: 16px; text-align: center; font-weight: 800; } .pkb-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pkb-k { width: 34px; text-align: right; font-weight: 900; color: #ffd23a; font-size: 13px; } .pkb-d { width: 28px; text-align: right; color: #f88; } .pkb-k small, .pkb-d small { font-size: 9px; font-weight: 400; color: #999; margin-left: 1px; } .pkb-bar { position: absolute; left: 28px; right: 8px; bottom: 1px; height: 2px; background: #ffffff14; } .pkb-bar i { display: block; height: 100%; background: var(--pk); box-shadow: 0 0 4px var(--pk); } .pkb-result { margin: 10px auto; width: 300px; font-size: 14px; } @media (pointer: coarse) { #quest-panel.pkb { width: 190px; } .pkb-big b { font-size: 22px; } } /* 킬 연출 */ #kill-pop { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(.3); opacity: 0; pointer-events: none; text-align: center; z-index: 8; } #kill-pop b { display: block; font-size: 46px; font-weight: 900; color: #fff; letter-spacing: 2px; text-shadow: 0 0 14px #ff6a00, 0 0 30px #ff2a00, 3px 3px 0 #600; white-space: nowrap; } #kill-pop small { display: block; font-size: 16px; font-weight: 800; color: #ffd23a; text-shadow: 2px 2px 0 #000, 0 0 8px #000; } #kill-pop.go { animation: killPop 1.6s cubic-bezier(.2, 1.5, .4, 1) forwards; } #kill-pop.lv2 b { color: #ffe070; font-size: 54px; } #kill-pop.lv3 b { color: #ffb030; font-size: 60px; } #kill-pop.lv4 b, #kill-pop.lv5 b { color: #ff4a2a; font-size: 66px; text-shadow: 0 0 20px #f00, 0 0 40px #f60, 3px 3px 0 #400; } @keyframes killPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(.9); } 20% { transform: translate(-50%, -50%) scale(1.05); } 28%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1); } } @media (pointer: coarse) { #kill-pop b { font-size: 32px !important; } #kill-pop small { font-size: 12px; } } /* 명중 표시 X */ #hitmark { position: absolute; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; pointer-events: none; opacity: 0; z-index: 7; } #hitmark i { position: absolute; left: 50%; top: 50%; width: 9px; height: 2px; margin: -1px 0 0 -4.5px; background: #fff; box-shadow: 0 0 2px #000; } #hitmark i:nth-child(1) { transform: rotate(45deg) translateX(-9px); } #hitmark i:nth-child(2) { transform: rotate(135deg) translateX(-9px); } #hitmark i:nth-child(3) { transform: rotate(225deg) translateX(-9px); } #hitmark i:nth-child(4) { transform: rotate(315deg) translateX(-9px); } #hitmark.head i { background: #ffd23a; } #hitmark.kill i { background: #ff2a2a; width: 12px; height: 3px; } #hitmark.go { animation: hitMark .2s ease-out forwards; } #hitmark.kill.go { animation-duration: .42s; } @keyframes hitMark { 0% { opacity: 1; transform: scale(1.4); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } /* 방어전 훈장 목표 */ .rl-box { margin-top: 4px; padding: 4px 6px; border: 1px solid #ff7aa866; border-radius: 6px; background: #3a102466; } .rl-bar { height: 6px; margin: 3px 0; background: #222; border: 1px solid #ff7aa866; border-radius: 3px; overflow: hidden; } .rl-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a03060, #ff7aa8); box-shadow: 0 0 6px #ff7aa8; } .rl-steps { display: flex; gap: 3px; margin-top: 3px; } .rl-st { flex: 1; text-align: center; font-size: 9px; line-height: 1.2; padding: 1px 0; border: 1px solid #555; border-radius: 3px; color: #888; } .rl-st b { display: block; font-size: 10px; } .rl-st.ok { color: #ffd0e2; border-color: #ff7aa8; background: #ff7aa833; } /* 🎉 이벤트: 대기실 (병사 머리 위) */ #ev-lobby { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); width: min(720px, calc(100% - 520px)); min-width: 250px; pointer-events: none; text-align: center; z-index: 2; animation: evIn .6s cubic-bezier(.2, 1.4, .5, 1); } @keyframes evIn { from { opacity: 0; transform: translate(-50%, -20px) scale(.9); } } #ev-lobby .ev-title { display: inline-block; padding: 3px 18px; margin-bottom: 6px; font-size: 18px; font-weight: 900; color: #fff6c8; letter-spacing: 1px; background: linear-gradient(90deg, transparent, #b8401a 20%, #ff9a2a 50%, #b8401a 80%, transparent); text-shadow: 0 0 8px #ff6a00, 1px 1px 0 #6a2000; animation: evGlow 1.6s ease-in-out infinite; } @keyframes evGlow { 50% { filter: brightness(1.35); text-shadow: 0 0 16px #ffb000, 1px 1px 0 #6a2000; } } #ev-lobby .ev-cards { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } #ev-lobby .ev-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 10px 5px; width: 128px; text-align: center; background: linear-gradient(135deg, #1a1408ee, #2a1e0cee); border: 2px solid var(--ec); border-radius: 10px; box-shadow: 0 0 14px var(--ec), inset 0 0 12px #0008; } #ev-lobby .ev-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, #ffffff40 50%, transparent 60%); background-size: 260% 100%; animation: shine 3s linear infinite; } #ev-lobby .ev-ic { font-size: 24px; filter: drop-shadow(0 0 6px var(--ec)); animation: evBob 1.8s ease-in-out infinite; } @keyframes evBob { 50% { transform: translateY(-3px) scale(1.08); } } #ev-lobby .ev-tx { display: flex; flex-direction: column; align-items: center; line-height: 1.2; } #ev-lobby .ev-tx b { white-space: nowrap; } #ev-lobby .ev-tx b { font-size: 15px; color: #fff; } #ev-lobby .ev-tx b span { color: var(--ec); font-size: 18px; text-shadow: 0 0 6px var(--ec); } #ev-lobby .ev-tx small { font-size: 10px; color: #ccc; } #ev-lobby .ev-tx i { font-style: normal; font-size: 11px; color: var(--ec); } @media (max-width: 760px), (max-height: 500px) { #ev-lobby { width: calc(100% - 440px); min-width: 200px; top: 56px; } #ev-lobby .ev-card { width: 96px; padding: 2px 4px; } #ev-lobby .ev-tx small { display: none; } #ev-lobby .ev-ic { font-size: 20px; } #ev-lobby .ev-title { font-size: 13px; } #ev-lobby .ev-tx b { font-size: 12px; } #ev-lobby .ev-tx b span { font-size: 13px; } } /* 🎉 이벤트: 게임 중 (미니맵 아래 작게) */ #ev-hud { position: fixed; z-index: 5; pointer-events: none; padding: 2px 8px; font-size: 11px; font-weight: 700; line-height: 1.45; text-align: right; background: #000a; border: 1px solid #ffb03088; border-radius: 6px; box-shadow: 0 0 8px #ffb03044; } #ev-hud small { color: #bbb; font-weight: 400; } /* 관리자: 이벤트 */ .adm-ev { margin: 6px 0; padding: 8px; border: 1px solid #ffb03066; border-radius: 8px; background: #2a1e0c88; text-align: left; } .adm-ev-h { font-weight: 800; color: #ffd75a; margin-bottom: 4px; } .adm-ev-h small { color: #bbb; font-weight: 400; font-size: 11px; } .adm-ev-dur { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; font-size: 12px; margin-bottom: 4px; } #select-screen .adm-btn.on { background: #5a4212; color: #ffd75a; border-color: #ffd75a; } .adm-ev-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 3px 4px; border-left: 3px solid #555; margin: 2px 0; font-size: 13px; } .adm-ev-row.on { border-left-color: var(--ec); background: #ffffff10; } .adm-ev-row b { color: var(--ec); font-size: 12px; } .adm-ev-n { min-width: 110px; } .adm-ev-o { margin-left: auto; display: flex; gap: 3px; } /* 새 버전 준비됨 (게임 중에는 나갈 때 적용) */ #update-badge { position: fixed; right: 8px; bottom: 8px; z-index: 40; padding: 6px 12px; background: #1a3a1acc; border: 1px solid #5f5; border-radius: 6px; color: #bfb; font-size: 13px; pointer-events: none; transition: all .5s; } #update-badge.small { font-size: 10px; padding: 2px 6px; opacity: .7; } /* 아케이드 */ .arc-btn { border-color: #3ef !important; background: linear-gradient(#0c3a44, #08222a) !important; } .arc-btn small { color: #9ef; } #arc-hud { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 4px 14px; background: #000b; border: 2px solid #3ef; border-radius: 18px; box-shadow: 0 0 12px #3ef6; font-size: 14px; white-space: nowrap; pointer-events: none; z-index: 5; } #arc-hud b { color: #3ef; } #arc-hud .arc-w { font-weight: 900; font-size: 17px; text-shadow: 0 0 6px currentColor; } #arc-hud .arc-p { display: flex; gap: 3px; } #arc-hud .arc-p i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #3ef; } #arc-hud .arc-p i.on { background: #3ef; box-shadow: 0 0 6px #3ef; } #arc-hud small { color: #ccc; } @media (pointer: coarse) { #arc-hud { top: 40px; font-size: 11px; padding: 2px 10px; } #arc-hud .arc-w { font-size: 13px; } } /* 인벤토리 창 (온라인 게임 느낌): 왼쪽 정보 · 가운데 착용 · 오른쪽 가방 */ .iv-win { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; justify-content: center; padding: 10px; background: linear-gradient(#24221c, #16150f); border: 2px solid #6b5d3c; border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 8px 30px #000a; max-width: 98vw; box-sizing: border-box; } .iv-col { display: flex; flex-direction: column; gap: 5px; text-align: left; } .iv-info { width: 230px; } .iv-head { display: flex; gap: 6px; } .iv-head .sp-portrait { flex: none; width: 92px; height: 124px; min-height: 0; } .iv-head .iv-id { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 12px; } .iv-info .sp-k { width: 64px; font-size: 11px; } .iv-info .sp-v { font-size: 12px; } .iv-info .sp-row { margin-bottom: 2px; } .iv-tot { font-size: 11px; color: #bbb; background: #0c0d0e; border: 1px solid #3a3d40; border-radius: 3px; padding: 4px 6px; max-height: 92px; overflow: auto; } .iv-ttl { font-size: 12px; font-weight: 800; color: #e6d7a0; padding: 2px 6px; background: linear-gradient(90deg, #4a4232, transparent); border-left: 3px solid #cbb67a; } .iv-wallet { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 4px 8px; background: linear-gradient(#2c2618, #15120a); border: 1px solid #8a7440; border-radius: 4px; box-shadow: inset 0 1px 0 #ffe08a33; } .iv-coin { width: 22px; height: 22px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff6c0, #f0c040 40%, #9a6a10); box-shadow: 0 0 6px #ffcc4499, inset 0 -2px 2px #0005; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #6a4300; } .iv-amt { flex: 1; text-align: right; font: 800 16px/1 Consolas, monospace; color: #ffe08a; text-shadow: 0 0 6px #ffb00066; } .iv-cap { font-size: 11px; color: #aaa; white-space: nowrap; } #inv-panel .bt button.tg { position: relative; } #inv-panel .bt button.tg.on { background: #0f3a12; color: #7f7; border-color: #3c3; animation: aeBlink 1s ease-in-out infinite; } @keyframes aeBlink { 50% { box-shadow: 0 0 10px 2px #3f3; background: #1a6a1e; color: #dfd; } } #inv-panel .bt button.warn { border-color: #c44; color: #f99; } #inv-panel .bt button.big { background: linear-gradient(#5a3a10, #3a2408); border-color: #e0a040; color: #ffd75a; font-weight: 800; } #inv-panel .c.box { animation: boxWob 2.4s ease-in-out infinite; } @keyframes boxWob { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-8deg); } 90% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } } .iv-hint { font-size: 11px; opacity: .7; max-width: 540px; } /* ===== 조합 · 해체 연출 ===== */ #fx-overlay { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; background: radial-gradient(circle, #000a, #000e); cursor: pointer; } #fx-overlay .fx-stage { position: relative; width: 320px; height: 360px; display: flex; align-items: center; justify-content: center; } .fx-mat { position: absolute; left: 50%; top: 40%; width: 54px; height: 54px; margin: -27px; display: flex; align-items: center; justify-content: center; font-size: 28px; background: #1a1a1a; border: 2px solid var(--gc); border-radius: 6px; box-shadow: 0 0 12px var(--gc); transform: translate(var(--x), var(--y)); opacity: 0; } #fx-overlay.go .fx-mat { animation: fxGather 1s cubic-bezier(.6, 0, .9, .5) forwards; } @keyframes fxGather { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.6); } 25% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); } 55% { transform: translate(calc(var(--x) * .9), calc(var(--y) * .9)) rotate(-10deg) scale(1); } 100% { opacity: .9; transform: translate(0, 0) rotate(360deg) scale(.3); } } .fx-box { position: absolute; left: 50%; top: 40%; font-size: 80px; margin: -50px 0 0 -45px; filter: drop-shadow(0 0 14px var(--gc)); } #fx-overlay.go .fx-box { animation: fxShake var(--sk) linear forwards; } #fx-overlay.fx-t2.go .fx-box { animation-name: fxShakeBig; } @keyframes fxShake { 0% { transform: none; } 10% { transform: rotate(-8deg); } 20% { transform: rotate(8deg); } 30% { transform: rotate(-10deg); } 40% { transform: rotate(10deg); } 50% { transform: rotate(-12deg) scale(1.05); } 60% { transform: rotate(12deg) scale(1.08); } 70% { transform: rotate(-14deg) scale(1.1); } 80% { transform: rotate(14deg) scale(1.15); } 90% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } } @keyframes fxShakeBig { 0% { transform: none; filter: drop-shadow(0 0 10px #f00); } 8%, 24%, 40%, 56%, 72% { transform: translate(-6px, 2px) rotate(-14deg) scale(1.05); } 16%, 32%, 48%, 64%, 80% { transform: translate(6px, -2px) rotate(14deg) scale(1.1); filter: drop-shadow(0 0 30px #f20) brightness(1.4); } 90% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } } .fx-flash { position: absolute; left: 50%; top: 40%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; background: #fff; box-shadow: 0 0 60px 30px var(--tc); opacity: 0; } #fx-overlay.go .fx-flash { animation: fxFlash .7s ease-out var(--rv) forwards; } @keyframes fxFlash { 0% { opacity: 1; transform: scale(.2); } 30% { opacity: 1; transform: scale(6); } 100% { opacity: 0; transform: scale(14); } } .fx-rays { position: absolute; left: 50%; top: 40%; width: 420px; height: 420px; margin: -210px; border-radius: 50%; opacity: 0; background: repeating-conic-gradient(from 0deg, var(--tc) 0 6deg, transparent 6deg 24deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 68%); mask: radial-gradient(circle, #000 10%, transparent 68%); } #fx-overlay.go .fx-rays { animation: fxRays 6s linear var(--rv) forwards; } #fx-overlay.fx-t0 .fx-rays, #fx-overlay.fx-tf .fx-rays { display: none; } #fx-overlay.fx-t2 .fx-rays { width: 560px; height: 560px; margin: -280px; } @keyframes fxRays { 0% { opacity: 0; transform: rotate(0) scale(.3); } 8% { opacity: .55; transform: rotate(10deg) scale(1); } 100% { opacity: .35; transform: rotate(120deg) scale(1); } } .fx-res { position: absolute; left: 0; right: 0; top: 40%; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: -40px; opacity: 0; text-align: center; } #fx-overlay.go .fx-res { animation: fxPop .55s cubic-bezier(.2, 1.6, .5, 1) var(--rv) forwards; } @keyframes fxPop { 0% { opacity: 0; transform: scale(.2); } 100% { opacity: 1; transform: scale(1); } } .fx-item { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; font-size: 46px; background: #141414; border: 3px solid; border-radius: 10px; box-shadow: 0 0 24px 6px var(--tc), inset 0 0 14px var(--gc); } #fx-overlay.fx-t2 .fx-item { animation: fxRed 0.8s ease-in-out infinite alternate; } @keyframes fxRed { from { box-shadow: 0 0 20px 6px #f22, inset 0 0 14px var(--gc); } to { box-shadow: 0 0 46px 16px #ff3a1a, 0 0 90px 30px #f205, inset 0 0 20px #fff; } } .fx-title { margin-top: 8px; font-size: 26px; font-weight: 900; color: var(--tc); text-shadow: 0 0 10px var(--tc), 2px 2px 0 #000; } #fx-overlay.fx-t2 .fx-title { font-size: 32px; animation: fxRed2 .5s ease-in-out infinite alternate; } @keyframes fxRed2 { to { color: #fff; text-shadow: 0 0 18px #f00, 0 0 30px #f60; } } .fx-name { font-size: 16px; font-weight: 800; text-shadow: 1px 1px 0 #000, 0 0 8px #000; max-width: 92vw; } .fx-sub { font-size: 13px; color: #ddd; } .fx-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 300px; margin-top: 4px; } .fx-more span { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 15px; border: 1px solid; border-radius: 4px; background: #111; box-shadow: 0 0 5px var(--gc); } .fx-tap { margin-top: 8px; font-size: 11px; opacity: .5; } #fx-overlay.fx-tf .fx-item { filter: grayscale(.7) brightness(.7); } #inv-panel h1 { margin: 0 0 6px; } #inv-panel button { background: #222; color: var(--fg); border: 1px solid #666; padding: 4px 10px; cursor: pointer; margin: 2px; text-align: left; } /* 장비창: 무기 칸 · 장비 칸 따로, 가방은 장비/무기 탭 */ #inv-panel .sec { font-size: 12px; font-weight: 700; color: #cbb67a; margin: 4px 0 3px; text-align: left; } .wslot { display: flex; align-items: center; gap: 8px; text-align: left; max-width: 230px; font-size: 13px; line-height: 1.35; } .wslot small { opacity: .7; font-size: 10px; } .tgt { margin: 4px 0 6px; font-size: 12px; text-align: left; } .tgt .tab { padding: 3px 10px; font-size: 12px; } #inv-panel button.mini { padding: 0 6px; font-size: 11px; margin: 0 0 0 6px; } .tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; } #inv-panel .tab { border-radius: 4px 4px 0 0; background: #1a1a1a; color: #999; text-align: center; } #inv-panel .tab.on { background: #3a3420; color: #ffd75a; border-color: #cbb67a; } .tabs small { opacity: .6; margin-left: 6px; } #test-list .test-box { border: 1px dashed #0cc; padding: 4px 10px; margin-top: 4px; background: #002a2a99; } .iv { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; justify-content: center; } .g4 { display: grid; grid-template-columns: repeat(4, 50px); gap: 4px; } .g10 { display: grid; grid-template-columns: repeat(10, 50px); gap: 4px; } .bt { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; max-width: 540px; } /* 인벤토리 칸 (등급이 높을수록 빛남) */ #inv-panel .c { width: 50px; height: 50px; border: 2px solid #444; background: #1a1a1a; font-size: 24px; position: relative; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } #inv-panel .c.e { border-color: #2a2a2a; } #inv-panel .c.sel { outline: 2px solid #6cf; } #inv-panel .c.g1 { box-shadow: 0 0 4px 0 var(--gc); } #inv-panel .c.g2 { box-shadow: 0 0 7px 1px var(--gc); animation: gl2 3s ease-in-out infinite; } #inv-panel .c.g3 { box-shadow: 0 0 10px 2px var(--gc); animation: gl3 2.4s ease-in-out infinite; } #inv-panel .c.g4 { box-shadow: 0 0 14px 3px var(--gc); animation: gl4 1.8s ease-in-out infinite; } #inv-panel .c.g5 { box-shadow: 0 0 18px 4px var(--gc), inset 0 0 8px var(--gc); animation: gl5 1.3s ease-in-out infinite; } #inv-panel .c.g4::after, #inv-panel .c.g5::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%); background-size: 250% 100%; animation: shine 2.6s linear infinite; } #inv-panel .c.g5::after { animation-duration: 1.7s; } @keyframes gl2 { 50% { box-shadow: 0 0 11px 2px var(--gc); } } @keyframes gl3 { 50% { box-shadow: 0 0 16px 3px var(--gc); } } @keyframes gl4 { 50% { box-shadow: 0 0 22px 5px var(--gc); } } @keyframes gl5 { 50% { box-shadow: 0 0 30px 8px var(--gc), inset 0 0 12px var(--gc); } } @keyframes shine { from { background-position: 150% 0; } to { background-position: -50% 0; } } .st { position: absolute; left: 1px; top: -3px; font-size: 14px; color: #ff0; font-style: normal; text-shadow: 0 0 3px #000; } .n { position: absolute; right: 2px; bottom: 0; font-size: 11px; } #tooltip { position: fixed; display: none; pointer-events: none; background: #000e; border: 1px solid #888; padding: 6px 10px; font-size: 13px; text-align: left; z-index: 40; min-width: 170px; line-height: 1.5; } #result-screen { z-index: 14; gap: 8px; } .win-pick { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } #result-screen .win-pick button { min-width: 180px; padding: 10px 14px; font-size: 18px; font-weight: 700; border-radius: 8px; } #result-screen .win-pick button small { display: block; font-size: 11px; font-weight: 400; color: #ccc; margin-top: 2px; } #result-screen .win-pick button.on { border: 2px solid #ffd75a; background: #3a3212; box-shadow: 0 0 12px #ffd75a66; } #dead-screen { z-index: 15; gap: 12px; background: #000; } #dead-screen h1 { color: #e00; font-size: 80px; letter-spacing: 10px; } #dead-screen button, #result-screen button { background: #222; color: var(--fg); border: 1px solid #888; padding: 6px 18px; cursor: pointer; margin: 2px; font-size: 15px; } /* 난이도 선택 팝업 */ #difficulty-picker { z-index: 40; gap: 8px; background: #000e; } .diff-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; width: min(620px, 92vw); margin: 6px 0; } .diff-btn { position: relative; background: #1c1c1c; border: 2px solid #444; border-radius: 6px; padding: 10px 6px; font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; } .diff-btn:hover { border-color: #888; } .diff-btn.current { border: 3px solid #ff0; box-shadow: 0 0 10px #ff06; } .diff-btn.locked { opacity: .45; cursor: not-allowed; } .diff-btn .tag { position: absolute; right: 4px; top: 2px; font-size: 10px; color: #9cf; font-weight: 400; } .diff-btn .tag.now { color: #ff0; } .def-btn { display: block; width: 100%; max-width: 520px; margin: 10px auto 4px; padding: 10px; font-size: 16px; font-weight: 700; color: #f0d8ff; background: linear-gradient(90deg, #3a1450, #5a1a6a); border: 2px solid #b060ff; border-radius: 8px; cursor: pointer; box-shadow: 0 0 12px #8030c0aa; } .def-btn small { display: block; font-size: 11px; font-weight: 400; color: #e0c8ff; margin-top: 3px; } .diff-btn .prog { display: block; font-size: 10px; font-weight: 400; color: #ffe14a; margin-top: 1px; } .diff-btn .adv { display: block; font-size: 11px; font-weight: 700; margin-top: 2px; } .diff-btn.rec { box-shadow: 0 0 0 2px #7f7, 0 0 12px #7f76; } /* 난이도 칸 안 단계 고르기 (1 · 2 · 3) */ .diff-btn .st-pick { display: flex; justify-content: center; gap: 4px; margin-top: 5px; } .diff-btn .st-chip { min-width: 26px; padding: 2px 6px; font-size: 12px; font-weight: 800; color: #ddd; background: #2a2a2a; border: 1px solid #666; border-radius: 4px; cursor: pointer; } .diff-btn .st-chip:hover { border-color: #ffe14a; color: #ffe14a; } .diff-btn .st-chip.now { color: #1a1a00; background: #ffe14a; border-color: #ffe14a; } .diff-btn .st-chip.locked { opacity: .4; cursor: not-allowed; font-weight: 400; } .diff-rec { font-size: 15px; margin: 4px 0; } .diff-rec small { opacity: .75; } .diff-cancel { background: #222; color: var(--fg); border: 1px solid #888; padding: 6px 18px; cursor: pointer; font-size: 14px; } #menu { z-index: 30; gap: 6px; } #menu, #menu * { touch-action: manipulation; } #menu h1 { margin: 0 0 6px; } #menu button { background: #222; color: var(--fg); border: 1px solid #888; padding: 6px 14px; cursor: pointer; margin: 2px; font-size: 14px; } #menu input[type=range] { width: 170px; height: 30px; vertical-align: middle; } .mrow { margin: 4px; } #menu .xh-opt { padding: 3px 5px; line-height: 0; background: #111; } #dev-dialog { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: #000a; z-index: 20; text-align: center; } #dev-dialog > div { background: #111; border: 1px solid #888; padding: 16px 24px; line-height: 1.8; } #update-overlay { position: fixed; inset: 0; z-index: 99; background: #000d; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 20px; text-align: center; } /* ----- 터치 조작 ----- */ #touch { display: none; position: fixed; inset: 0; pointer-events: none; } #touch * { pointer-events: auto; } #joystick { position: absolute; left: 24px; bottom: 56px; width: 130px; height: 130px; border-radius: 50%; background: #fff2; border: 2px solid #fff5; } #knob { position: absolute; left: 35px; top: 35px; width: 60px; height: 60px; border-radius: 50%; background: #fff6; } .tb { position: absolute; min-width: 56px; height: 46px; border-radius: 23px; border: 1px solid #fff8; background: #0008; color: #fff; font-size: 14px; padding: 0 8px; } .tb.on { background: #c60; } .tb.top { top: 8px; min-width: 44px; height: 32px; font-size: 12px; padding: 0 6px; border-radius: 16px; } .tb.small { min-width: 46px; height: 40px; font-size: 12px; padding: 0 4px; border-radius: 20px; } .tb.tiny { top: 128px; min-width: 36px; height: 18px; font-size: 9px; padding: 0 4px; border-radius: 9px; } #btn-auto { left: 20px; } /* top 은 습격 게이지 밑으로 (hell.js) */ #btn-autojump { left: 84px; } /* 위쪽 버튼: ⚙ 장비 스탯 계급 (퀘스트·파티 창 오른쪽) · 전체화면·긴급은 ⚙ 메뉴 안으로 */ #btn-menu { left: 378px; min-width: 30px; } #btn-inv { left: 416px; } #btn-stat { left: 466px; } #btn-rank { left: 516px; } #btn-scope { right: 118px; bottom: 70px; width: 76px; height: 76px; border-radius: 38px; font-size: 13px; line-height: 1.15; background: #1a2a3acc; border-color: #7fd0ff; } #btn-fire { right: 14px; bottom: 58px; width: 92px; height: 92px; border-radius: 46px; font-size: 18px; } /* 발사 버튼 위 한 줄: [포션 병][치료] */ #btn-potion { right: 112px; bottom: 156px; padding: 0; } #btn-potion svg { display: block; margin: 0 auto; } #btn-potion .pn { position: absolute; right: 5px; bottom: 2px; font-size: 10px; font-weight: 700; text-shadow: 1px 1px 1px #000; } #btn-potion .pc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; background: #0009; border-radius: 20px; } #btn-heal { right: 60px; bottom: 156px; } #btn-crouch { right: 36px; bottom: 196px; font-size: 11px; font-weight: 700; color: #9fd0ff; } #btn-crouch.on { background: #1a3a5acc; border-color: #6cf; color: #fff; box-shadow: 0 0 8px #6cf; } #btn-reload { right: 36px; bottom: 160px; font-size: 11px; font-weight: 700; color: #ffd75a; } #btn-medic { right: 164px; bottom: 156px; color: #ff8a8a; font-weight: 700; font-size: 11px; } #btn-medic.cool { opacity: .45; } .party-arrow.medic { color: #fff; background: #c22c; border: 1px solid #f88; animation: medicPulse .4s ease-in-out infinite alternate; } .medic-call { color: #ff5a5a; animation: medicPulse .4s ease-in-out infinite alternate; } @keyframes medicPulse { to { opacity: .45; } } /* ----- 폰 (터치 화면) ----- */ @media (pointer: coarse) { #log { font-size: 5px; max-width: calc(100vw - 12px); } #quest-panel:has(.def-status) { width: 192px; padding: 0; border-radius: 6px; overflow: hidden; } .def-status { padding: 5px 7px; } .def-status > div { white-space: nowrap; } .def-status .def-gates { display: flex; flex-wrap: nowrap; gap: 2px; font-size: 8px !important; } .def-gates > span { margin-right: 0 !important; } .def-gates > span > span { width: 24px !important; } #quest-panel .rl-box { margin: 0; padding: 5px 7px; border: 0; border-top: 1px solid #79425b; border-radius: 0; font-size: 9px; } #quest-panel .rl-box > div { font-size: 9px !important; } #quest-panel .rl-steps { display: flex; gap: 3px; } #quest-panel .rl-st { flex: 1; min-width: 0; padding: 2px 0; font-size: 8px; } #quest-panel .rl-st b { font-size: 10px; } #btn-auto, #btn-autojump { left: auto; top: auto; bottom: 188px; height: 22px; min-width: 54px; } #btn-auto { right: 74px; } #btn-autojump { right: 14px; } #btn-medic, #btn-heal, #btn-reload, #btn-potion { right: 182px; width: 46px; min-width: 46px; height: 40px; } #btn-medic, #btn-heal { bottom: 198px; } #btn-reload { bottom: 148px; } #btn-potion { bottom: 98px; } #btn-crouch { right: 118px; bottom: 58px; } #btn-gate { left: 174px; right: auto; bottom: 58px; } #btn-shop { left: 174px; right: auto; bottom: 108px; } #btn-fire { font-size: 16px; } #quest-panel { font-size: 10px; width: 165px; } #party-panel { font-size: 9px; width: auto; max-width: 160px; white-space: nowrap; overflow: hidden; } /* 위치는 hud.js (퀘스트 창 바로 오른쪽) */ .bh-potion { display: none; } .bh-exp { min-width: 150px; } .bh-life { min-width: 120px; } .bh-weapon { flex-basis: 200px; } #bh-wicon { display: none; } #bh-ammo { min-width: 60px; font-size: 15px; } #minimap { width: 150px; height: 150px; top: 22px; } #difficulty-label { width: 150px; height: 16px; line-height: 14px; font-size: 11px; } #pos { display: none; } /* 폰: 좌표는 숨김 (포션·치료 버튼 자리) */ #ready-hud { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); display: none; background: #000b; border: 2px solid #ffd23a; border-radius: 8px; padding: 6px 16px; font-size: 15px; text-align: center; pointer-events: none; } #ready-hud small { color: #ccc; } #boss-timer { font-size: 16px; top: 46px; } #inv-panel .c { width: 32px; height: 32px; font-size: 16px; } .g10 { grid-template-columns: repeat(10, 32px); } .g4 { grid-template-columns: repeat(4, 32px); } } @media (pointer: coarse) and (max-width: 600px) { #minimap { width: 110px; height: 110px; } #difficulty-label { width: 110px; font-size: 9px; } #party-panel { font-size: 8px; max-width: calc(100vw - 214px); } #btn-menu, #btn-inv, #btn-stat, #btn-rank { left: auto; top: 140px; height: 28px; font-size: 10px; } #btn-menu { right: 80px; } #btn-inv { right: 8px; top: 140px; min-width: 64px; } #btn-stat { right: 72px; top: 174px; } #btn-rank { right: 8px; top: 174px; min-width: 64px; } #btn-shop { bottom: 256px; } } @media (pointer: coarse) and (max-width: 360px) { #joystick { left: 14px; width: 100px; height: 100px; } #knob { left: 20px; top: 20px; } #btn-fire { right: 12px; width: 76px; height: 76px; bottom: 56px; font-size: 13px; } #btn-crouch { right: 96px; bottom: 56px; } #btn-medic, #btn-heal, #btn-reload, #btn-potion { right: 14px; height: 32px; } #btn-medic, #btn-heal { bottom: 238px; } #btn-reload { bottom: 198px; } #btn-potion { bottom: 158px; } #btn-auto, #btn-autojump { right: 72px; min-width: 44px; height: 18px; } #btn-auto { bottom: 228px; } #btn-autojump { bottom: 200px; } #btn-gate, #btn-shop { left: 126px; } #btn-shop { bottom: 108px; } } @media (pointer: coarse) and (max-width: 600px) and (max-height: 500px) { #quest-panel:has(.def-status) { width: 178px; font-size: 8px; } .def-status { padding: 3px 5px; } #quest-panel .rl-box { padding: 3px 5px; font-size: 8px; } #party-panel { font-size: 7px; line-height: 1.1; padding: 2px 5px; } #joystick { left: 14px; width: 100px; height: 100px; } #knob { left: 20px; top: 20px; } #btn-fire { right: 12px; width: 76px; height: 76px; bottom: 56px; font-size: 13px; } #btn-crouch { right: 96px; bottom: 56px; } #btn-medic, #btn-heal, #btn-reload, #btn-potion { right: 14px; top: 134px; bottom: auto; height: 32px; } #btn-reload { top: 174px; } #btn-potion { top: 214px; } #btn-auto, #btn-autojump { right: 72px; top: 134px; bottom: auto; min-width: 44px; height: 18px; } #btn-autojump { top: 158px; } #btn-menu, #btn-inv, #btn-stat, #btn-rank { top: 202px; bottom: auto; right: auto; height: 24px; } #btn-menu { left: 8px; } #btn-inv { left: 46px; min-width: 44px; } #btn-stat { left: 96px; } #btn-rank { left: 146px; min-width: 46px; } } @media (pointer: coarse), (max-height: 500px) { /* 폰: 세 칸을 한 줄로 작게 */ #inv-panel .iv-win { flex-wrap: nowrap; gap: 8px; padding: 6px; } .iv-info { width: 165px; } .iv-info .sp-k { width: 52px; font-size: 10px; padding: 1px 2px; } .iv-info .sp-v, .iv-head .iv-id { font-size: 10px; padding: 1px 4px; } .iv-head .sp-portrait { width: 56px; height: 76px; } .iv-tot { max-height: 60px; font-size: 10px; } .iv-ttl { font-size: 10px; } .iv-col .wslot { max-width: 150px; font-size: 11px; } #inv-panel .c { width: 30px; height: 30px; font-size: 15px; } .g10 { grid-template-columns: repeat(10, 30px); gap: 3px; } .g4 { grid-template-columns: repeat(4, 30px); gap: 3px; } #inv-panel .bt button { padding: 2px 6px; font-size: 11px; } .iv-amt { font-size: 13px; } .iv-hint { display: none; } #fx-overlay .fx-stage { transform: scale(.8); } } /* 이미지 중심 도감. 계급표에는 이 스타일을 적용하지 않는다. */ #rank-panel.catalog { background: #0b1117f5; gap: 18px; padding: 24px max(16px, 4vw); justify-content: flex-start; } #rank-panel.catalog .gd-tabs { flex-shrink: 0; padding: 5px; border: 1px solid #33424c; border-radius: 12px; background: #101a22; } #rank-panel.catalog .gd-tab { border: 0; border-radius: 7px; padding: 10px 24px; background: transparent; color: #9caeb7; } #rank-panel.catalog .gd-tab.on { background: #31483f; color: #d5f3db; box-shadow: inset 0 0 0 1px #75977d; } .cat-page { width: min(1080px, 100%); text-align: left; } .cat-heading { margin: 4px 0 22px; }.cat-heading > span { color: #80938b; font-size: 10px; letter-spacing: 3px; } #rank-panel.catalog h1 { margin-top: 6px; color: #e6eeea; text-shadow: none; letter-spacing: -.6px; font-size: 28px; } #rank-panel.catalog .cat-slots { display: grid; grid-template-columns: repeat(8,1fr); gap: 8px; margin-bottom: 22px; } #rank-panel.catalog .cat-slots button { padding: 6px 4px 10px; background: #141e25; border: 1px solid #2d3a42; border-radius: 9px; color: #a7b6ba; font-size: 12px; } .cat-slots img { display: block; width: 100%; height: 68px; object-fit: contain; border-radius: 5px; } #rank-panel.catalog .selected { border-color: #9ab797; color: #e5f3df; background: #26362e; } .cat-grade-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; } /* 무기 도감: 무기 고르기 + 참고판 단계표 */ .wg-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; } #rank-panel.catalog .wg-pick button { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #152027; border: 1px solid #34464c; border-radius: 10px; color: #dfe8ea; font: inherit; cursor: pointer; } #rank-panel.catalog .wg-pick button span { font-size: 20px; } #rank-panel.catalog .wg-pick button b { font-size: 14px; } #rank-panel.catalog .wg-pick button.selected { background: #2a2a18; border-color: #ffd23a; color: #ffd23a; box-shadow: 0 0 10px #ffd23a33; } .wg-board { background: linear-gradient(#111a20, #0c1216); border: 1px solid #2a3a44; border-radius: 14px; padding: 14px; } .wg-board > header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .wg-board > header small { color: #8fa3ab; letter-spacing: 1px; } .wg-board > header h2 { margin: 2px 0 0; font-size: 22px; color: #fff; } .wg-board > header p { margin: 0; font-size: 12px; color: #9fb0b6; } .wg-board > header p b { color: #ffd23a; } .wg-strip { display: grid; grid-template-columns: repeat(11, minmax(78px, 1fr)); gap: 6px; overflow-x: auto; padding-bottom: 6px; } .wg-strip article { display: flex; flex-direction: column; align-items: center; min-width: 0; background: linear-gradient(#1a252c, #121a1f); border: 1px solid #2c3a42; border-radius: 8px; overflow: hidden; text-align: center; } .wg-strip .wg-tier { width: 100%; padding: 6px 0; font-weight: 900; font-size: 13px; color: #fff; background: #223039; border-bottom: 1px solid #2c3a42; } .wg-strip img { width: 100%; height: auto; aspect-ratio: 200 / 360; object-fit: contain; display: block; background: radial-gradient(ellipse at 50% 45%, #22323b, #121a1f 70%); } .wg-strip .wg-noimg { width: 100%; aspect-ratio: 200 / 360; display: flex; align-items: center; justify-content: center; font-size: 34px; } .wg-strip h3 { margin: 6px 4px 2px; font-size: 12.5px; color: #fff; line-height: 1.25; } .wg-strip p { margin: 0 6px 4px; font-size: 10.5px; color: #9fb0b6; line-height: 1.35; } .wg-strip small { margin: auto 0 6px; font-size: 10.5px; color: #c9b67a; } .wg-strip .wg-final { border-color: #c9a040; box-shadow: inset 0 0 0 1px #c9a04044; } .wg-strip .wg-final .wg-tier { background: linear-gradient(#3a3014, #241e0a); color: #ffd23a; } .wg-strip .wg-final h3 { color: #ffd23a; } @media (max-width: 900px) { .wg-strip { grid-template-columns: repeat(11, 92px); } } .cat-card { min-width: 0; overflow: hidden; background: #141b20; border: 1px solid #29363e; border-radius: 12px; box-shadow: 0 5px 18px #0003; } .cat-card-top { padding: 13px 16px 0; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--accent,#a4b9bd); } .cat-card-top span { border-left: 2px solid var(--accent,#74918a); padding-left: 8px; }.cat-card-top small { color: #52636b; font-size: 10px; letter-spacing: 2px; } .cat-card img { display: block; width: 100%; height: 170px; object-fit: contain; } .cat-card h2 { margin: 0; padding: 0 16px 16px; font-size: 15px; color: #e0e9e5; font-weight: 600; } .cat-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } #rank-panel.catalog .cat-filters button { padding: 8px 16px; border-color: #34464c; border-radius: 20px; background: #152027; font-size: 12px; } .cat-weapons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }.cat-weapons img { height: 150px; } .cat-stage-strip { display: grid; grid-template-columns: repeat(11,1fr); gap: 5px; margin: 24px 0 12px; } #rank-panel.catalog .cat-stage-strip > button { text-align: center; border: 1px solid #ffffff12; border-top: 2px solid var(--accent); padding: 12px 0; background: #172028; border-radius: 5px; cursor: pointer; font: inherit; min-width: 0; } #rank-panel.catalog .cat-stage-strip > button.selected { outline: 2px solid var(--accent); outline-offset: 1px; background: #25343e; } .cat-stage-strip b { color: var(--accent); display: block; font-size: 20px; text-shadow: 0 1px 4px #ffffff26; }.cat-stage-strip small { display: block; font-size: 10px; margin-top: 5px; color: #93a3ab; } .cat-abilities { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }.cat-abilities article { display: flex; flex-direction: column; padding: 20px; gap: 9px; background: #142029; border: 1px solid #2c3f47; border-radius: 10px; } .cat-abilities svg { width: 30px; height: 30px; fill: none; stroke: #a6c5aa; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }.cat-abilities b { font-size: 13px; color: #d9e8e0; }.cat-abilities span { font-size: 11px; color: #8da1a9; } @media(max-width:640px) { #rank-panel.catalog { padding: 12px; gap: 14px; } #rank-panel.catalog .gd-tab { padding: 8px 14px; } #rank-panel.catalog .cat-slots { grid-template-columns: repeat(4,1fr); } .cat-grade-grid,.cat-weapons { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; } .cat-card img { height: 125px; }.cat-stage-strip { grid-template-columns: repeat(6,1fr); }.cat-abilities { grid-template-columns: repeat(2,minmax(0,1fr)); }.cat-card h2 { font-size: 12px; }.cat-card-top { padding: 10px 12px 0; } } /* Portrait lobby: separate the soldier preview from both scrolling lists. */ @media (max-width: 700px) and (min-height: 501px) { #select-screen { --lobby-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); --lobby-menu: 266px; background: linear-gradient(#090c11b0, transparent 28%, transparent 53%, #090c11e0 82%); } #select-screen .t-top { top: env(safe-area-inset-top, 0px); height: 76px; padding: 0 12px; display: block; z-index: 4; } #select-screen .t-top .t-logo { position: absolute; top: 6px; left: 12px; font-size: 25px; letter-spacing: 1px; white-space: nowrap; } #select-screen .t-top .t-logo span { margin-left: 7px; } #select-screen .t-tools { position: absolute; top: 38px; left: 12px; right: 12px; justify-content: flex-end; gap: 7px; } #select-screen .t-tools > button { flex-shrink: 0; width: 34px; height: 34px; } #select-screen #t-account { position: absolute; right: 0; bottom: 41px; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 28px; line-height: 28px; } #select-screen #lobby { margin-right: auto; padding: 0 10px; flex-shrink: 0; font-size: 12px; height: 32px; line-height: 32px; } #select-screen #lobby .t-who { left: 0; right: auto; top: 38px; max-width: calc(100vw - 48px); max-height: 55dvh; overflow-y: auto; touch-action: pan-y; text-align: left; } #select-screen #t-left { top: calc(82px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; bottom: auto; width: auto; max-height: 128px; overflow-y: auto; } #select-screen #t-left > .t-h { font-size: 10px; margin-bottom: 5px; } #select-screen #char-list { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; touch-action: pan-x; scrollbar-width: thin; scrollbar-color: #8a7954 transparent; } #select-screen #char-list .t-card { flex: 0 0 auto; width: auto; min-width: 140px; max-width: 220px; min-height: 54px; margin: 0; box-sizing: border-box; padding: 7px 10px; } #select-screen #char-list .t-card b { font-size: 13px; white-space: nowrap; } #select-screen #char-list .t-card small { font-size: 10px; } #select-screen #char-list .t-card.import { max-width: 210px; } #select-screen #char-list .t-card.import small { white-space: normal; } #select-screen #test-list .t-h { font-size: 10px; margin-top: 3px; } #select-screen #test-list .t-h small { display: none; } #select-screen #test-list .t-card.mini { padding: 3px 8px; font-size: 11px; } #select-screen #t-center { left: 12px; right: 12px; width: auto; transform: none; bottom: calc(var(--lobby-bottom) + var(--lobby-menu) + 12px); padding: 6px 0; } #select-screen #t-plate .t-rank { font-size: 11px; padding: 1px 8px 1px 4px; vertical-align: middle; } #select-screen #t-plate .t-rank svg { width: 20px; height: 24px; } #select-screen #t-plate .t-name { display: inline-block; max-width: 65%; vertical-align: middle; margin: 0 0 0 6px; font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #select-screen #t-plate .t-sub { margin-top: 4px; font-size: 11px; } #select-screen #t-center .t-hint { display: none; } #select-screen #t-center .t-edit { flex-wrap: wrap; gap: 5px; margin-top: 7px; } #select-screen #t-center .t-edit button { padding: 6px 9px; font-size: 12px; } #select-screen #t-center .t-del { font-size: 10px; padding: 2px 9px; margin-top: 5px; } #select-screen #t-right { top: auto; bottom: var(--lobby-bottom); left: 12px; right: 12px; width: auto; height: var(--lobby-menu); box-sizing: border-box; padding: 9px; gap: 6px; overflow: hidden; border: 1px solid #b2a48040; border-radius: 12px; background: linear-gradient(140deg, #1b231eee, #0d1514ee); box-shadow: 0 8px 24px #0006; } #select-screen #t-right > :not(.t-rooms) { flex-shrink: 0; } #select-screen #t-right .t-seg button { padding: 5px 0; font-size: 12px; } #select-screen #t-right .t-rooms { flex-direction: row; overflow-x: auto; overflow-y: hidden; min-height: 72px; touch-action: pan-x; scrollbar-width: thin; scrollbar-color: #8a7954 transparent; } #select-screen #t-right .t-room { flex: 0 0 156px; width: 156px; box-sizing: border-box; padding: 5px 8px; } #select-screen #t-right .t-room > b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #select-screen #t-right .t-room small { font-size: 10px; } #select-screen #t-right .t-room small b { font-size: 10px; } #select-screen #t-right .t-room small span { display: none; } #select-screen #t-right .t-empty { flex: 1; padding: 7px; font-size: 11px; } #select-screen #t-right .t-training { padding: 5px 0; font-size: 16px; letter-spacing: 1px; } #select-screen #t-right .t-training small { margin-top: 0; font-size: 10px; } #select-screen #t-right .t-launch { padding: 6px 0 5px; font-size: 20px; letter-spacing: 3px; } #select-screen #t-right .t-launch small { font-size: 10px; } #select-screen #t-right .t-off { font-size: 11px; padding: 0; } #select-screen #t-right .t-off input { width: 16px; height: 16px; } #select-screen #net-status { top: auto; bottom: 1px; max-width: calc(100% - 80px); overflow: hidden; text-overflow: ellipsis; font-size: 10px; } #select-screen #ev-lobby { top: calc(162px + env(safe-area-inset-top, 0px)); width: calc(100% - 24px); min-width: 0; } #select-screen #ev-lobby .ev-title { display: none; } #select-screen #ev-lobby .ev-cards { flex-wrap: wrap; gap: 4px; } #select-screen #ev-lobby .ev-card { flex: 0 1 auto; min-width: 0; width: auto; flex-direction: row; justify-content: center; padding: 3px 6px; box-shadow: none; border-width: 1px; } #select-screen:has(#test-list:not(:empty)) #ev-lobby { top: calc(215px + env(safe-area-inset-top, 0px)); } #select-screen #ev-lobby .ev-ic { font-size: 14px; } #select-screen #ev-lobby .ev-tx b, #select-screen #ev-lobby .ev-tx b span { font-size: 10px; } #select-screen #ev-lobby .ev-tx small { display: none; } #select-screen #ev-lobby .ev-tx i { font-size: 8px; } } @media (max-width: 700px) and (min-height: 501px) and (max-height: 699px) { #select-screen { --lobby-menu: 198px; --lobby-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } #select-screen #t-right { padding: 7px; gap: 4px; } #select-screen #t-right .t-rooms { min-height: 48px; } #select-screen #t-right .t-room { padding: 3px 7px; } #select-screen #t-right .t-room small br { display: none; } #select-screen #t-right .t-training { padding: 4px 0; font-size: 15px; } #select-screen #t-right .t-training small { display: none; } #select-screen #t-right .t-launch { font-size: 18px; padding: 4px 0; } #select-screen #t-center .t-edit { margin-top: 4px; } #select-screen #t-center .t-edit button { padding: 4px 7px; font-size: 11px; } #select-screen #t-center .t-del { margin-top: 3px; } } /* Portrait inventory: keep the character, worn gear and entire bag on screen. */ @media (max-width: 700px) and (min-height: 501px) { #inv-panel { padding: calc(8px + env(safe-area-inset-top, 0px)) 10px calc(8px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; overflow-x: hidden; } #inv-panel .iv-win { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 600px; gap: 10px; padding: 9px; flex: none; } #inv-panel .iv-col { width: auto; min-width: 0; gap: 5px; } #inv-panel .iv-col:last-child { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid #cbb67a44; } #inv-panel .iv-head { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 5px; } #inv-panel .iv-head .sp-portrait { width: 52px; height: 70px; } #inv-panel .iv-head .iv-id { min-width: 0; padding: 0; } #inv-panel .iv-head .sp-rank { flex-wrap: wrap; gap: 2px; font-size: 10px; } #inv-panel .iv-head .sp-row { display: block; margin: 0; } #inv-panel .iv-head .sp-k { display: none; } #inv-panel .iv-head .sp-v { display: block; text-align: left; padding: 2px 3px; white-space: normal; overflow-wrap: anywhere; font-size: 10px; } #inv-panel .iv-info > .sp-row .sp-k { width: 44px; font-size: 10px; padding: 2px; } #inv-panel .iv-info > .sp-row .sp-v { min-width: 0; font-size: 10px; padding: 2px 3px; } #inv-panel .iv-tot { max-height: 92px; touch-action: pan-y; font-size: 10px; } #inv-panel .iv-ttl { font-size: 11px; } #inv-panel .wslot { max-width: none; min-width: 0; gap: 6px; font-size: 11px; align-items: flex-start; } #inv-panel .wslot > .c { flex: none; } #inv-panel .wslot > div:not(.c) { min-width: 0; overflow-wrap: anywhere; } #inv-panel .wslot small { font-size: 9px; } #inv-panel .tgt { font-size: 10px; } #inv-panel .tgt .tab { padding: 3px 6px; font-size: 10px; } #inv-panel .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } #inv-panel .g10 { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; } #inv-panel .g4 > .c, #inv-panel .g10 > .c { width: 100%; height: auto; aspect-ratio: 1; font-size: clamp(15px, 4.5vw, 23px); } #inv-panel .tabs { gap: 4px; } #inv-panel .tabs .tab { flex: 1; min-width: 0; padding: 7px 2px; margin: 0; font-size: 11px; white-space: nowrap; } #inv-panel .iv-pages { flex-wrap: wrap; gap: 4px; } #inv-panel .iv-pages button { min-width: 30px; height: 28px; } #inv-panel .iv-wallet { flex-wrap: wrap; gap: 6px; padding: 6px; } #inv-panel .iv-amt { font-size: 15px; } #inv-panel .iv-cap { flex: 0 0 100%; text-align: right; font-size: 10px; } #inv-panel .bt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 5px; } #inv-panel .bt button { margin: 0; min-height: 32px; padding: 5px 7px; font-size: 11px; text-align: center; } #inv-panel > [data-x] { flex: none; min-height: 36px; min-width: 120px; text-align: center; } } @media (max-width: 359px) and (min-height: 501px) { #inv-panel .iv-win { padding: 7px; gap: 7px; } #inv-panel .iv-head { grid-template-columns: 42px minmax(0, 1fr); gap: 4px; } #inv-panel .iv-head .sp-portrait { width: 42px; height: 57px; } #inv-panel .g10 { grid-template-columns: repeat(8, minmax(0, 1fr)); } #inv-panel .tabs .tab { font-size: 10px; } } /* The tall portrait stats window must scroll from its first row, not its center. */ #stat-panel { justify-content: flex-start; } #stat-panel .sp-win { flex: none; } @media (max-width: 700px) and (min-height: 501px) { #stat-panel { justify-content: flex-start; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px calc(8px + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; } #stat-panel .sp-win { flex: none; width: 100%; max-width: 600px; grid-template-columns: minmax(0, 1fr); padding: 9px; gap: 12px; } #stat-panel .sp-left, #stat-panel .sp-right, #stat-panel .sp-info { min-width: 0; } #stat-panel .sp-pcol { width: 84px; } #stat-panel .sp-portrait { min-height: 114px; } #stat-panel .sp-rank { font-size: 11px; } #stat-panel .sp-row { min-width: 0; } #stat-panel .sp-k { width: 56px; font-size: 11px; padding: 3px; } #stat-panel .sp-v { min-width: 0; font-size: 11px; padding: 3px 4px; } #stat-panel .sp-info .sp-v { white-space: normal; overflow-wrap: anywhere; } #stat-panel .sp-power { grid-template-columns: repeat(2, minmax(0, 1fr)); } #stat-panel .sp-power .sp-k { width: 48px; } #stat-panel .sp-power .sp-v { white-space: normal; overflow-wrap: anywhere; } #stat-panel .sp-split .sp-v { white-space: normal; font-size: 11px; } #stat-panel .sp-stat { grid-template-columns: 64px minmax(0, 1fr) 34px; } #stat-panel .sp-stat .sp-k { width: auto; } #stat-panel .sp-more { flex-wrap: wrap; gap: 4px; } #stat-panel .sp-more button { min-height: 27px; padding: 3px 10px; } #stat-panel .sp-more small { flex: 1 0 100%; margin-left: 0; text-align: right; } #stat-panel .sp-up { height: 30px; } #stat-panel #stat-close { min-height: 38px; } } /* Keep class names intact on portrait screens; five classes retain equal cards. */ @media (max-width: 700px) and (min-height: 501px) { #t-modal .t-box:has(> .t-classes) { box-sizing: border-box; width: calc(100% - 24px); max-width: 500px; padding: 12px; max-height: calc(100dvh - 28px); } #t-modal .t-classes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; } #t-modal .t-class { grid-column: span 2; min-width: 0; min-height: 77px; padding: 7px 4px; } #t-modal .t-class:nth-child(4) { grid-column: 2 / span 2; } #t-modal .t-class:nth-child(5) { grid-column: 4 / span 2; } #t-modal .t-class b { font-size: 13px; white-space: nowrap; } #t-modal .t-class small { min-height: 28px; font-size: 10px; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; } #t-modal .t-box:has(> .t-classes) .t-row input { min-width: 0; max-width: calc(100% - 55px); box-sizing: border-box; } #t-modal .t-box:has(> .t-classes) .t-row:last-child { gap: 6px; margin-bottom: 0; } #t-modal .t-box:has(> .t-classes) .t-go { padding: 9px 12px; } } /* Training controls occupy their own space above the movement/fire pads. */ @media (pointer: coarse) and (min-height: 501px) { #training-tools { top: 184px; bottom: auto; left: 8px; transform: none; flex-direction: column; align-items: stretch; gap: 6px; } #training-tools button { font-size: 11px; padding: 7px 9px; } #training-tools kbd { display: none; } } @media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) { #training-tools { top: 88px; bottom: auto; left: 50%; transform: translateX(-50%); flex-direction: row; gap: 6px; } #training-tools button { font-size: 11px; padding: 7px 9px; } #training-tools kbd { display: none; } } @media (pointer: coarse) and (max-height: 500px) and (orientation: portrait) { #training-tools { top: 118px; bottom: auto; left: 8px; width: 140px; transform: none; flex-direction: column; gap: 4px; } #training-tools button { font-size: 11px; line-height: 14px; padding: 2px 7px; } #training-tools kbd { display: none; } } /* Include the shop's padding and border when reserving top/bottom space. */ #t-modal .t-box.shop { max-height: min(92vh, calc(100dvh - 54px)); } /* Full room browser replaces the small touch lobby list. */ .t-room-open { width: 100%; flex: none; min-height: 48px; padding: 8px 12px; border: 1px solid #80998b; border-radius: 10px; color: #e7f6e9; background: linear-gradient(125deg,#263c35,#152421); font-size: 17px; font-weight: 700; } .t-room-open small { display: block; margin-top: 3px; font-size: 11px; color: #aabeb2; } #t-modal .room-browser { box-sizing: border-box; width: min(760px,calc(100vw - 24px)); height: min(680px,calc(100dvh - 24px)); max-height: none; padding: 14px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; border-color: #698b80; border-radius: 14px; background: linear-gradient(145deg,#1d2b2b,#0d171c); } .room-browser header, .room-browser footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; } .room-browser h2 { margin: 0; font-size: 22px; color: #e0eee6; } .room-browser header button { width: 32px; height: 32px; border: 1px solid #577369; border-radius: 8px; } #t-modal .room-browser header button, #t-modal .room-browser [data-roomcreate] { background: #253c38; color: #e0eee6; border: 1px solid #64867a; font-family: inherit; } #t-modal .room-browser header button:hover, #t-modal .room-browser [data-roomcreate]:hover { background: #354e47; border-color: #a0bbab; } #t-modal .room-browser header button:active, #t-modal .room-browser [data-roomcreate]:active { background: #1b302d; } .room-browser .t-seg { flex: none; margin: 0; } .room-browser .rb-list { overflow: auto; min-height: 0; flex: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; align-content: start; padding: 1px 3px; } .room-browser .t-room { margin: 0; padding: 12px; min-height: 88px; border-radius: 10px; } .room-browser .t-room b { overflow-wrap: anywhere; } .room-browser .t-room small { margin: 7px 0 4px; } .room-browser .t-room span { display: block; font-size: 11px; color: #98aba7; } .room-browser footer button { padding: 10px 14px; border-radius: 8px; white-space: nowrap; } .room-browser .t-go { margin: 0; font-size: 15px; } .room-browser .t-go:disabled { opacity: .4; } .aura-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: start; } .aura-preview { margin: 0; overflow: hidden; border: 1px solid #34444e; border-radius: 14px; background: #141b20; } .aura-preview > img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; } .aura-preview h2 { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 12px 18px; font-size: 22px; color: #e6eeea; } .aura-preview h2 small { font-size: 12px; color: #92a5b0; } .aura-layers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 0 16px 16px; } .aura-layer { display: grid; grid-template-columns: 12px 1fr; gap: 3px 8px; align-items: center; padding: 10px; border: 1px solid #283841; border-radius: 8px; color: #647782; font-size: 12px; } .aura-layer.active { color: #dce8ed; border-color: var(--aura-color); } .aura-layer small { grid-column: 2; color: #95a7af; font-size: 11px; } .aura-swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--aura-color); } .active .aura-swatch { box-shadow: 0 0 8px var(--aura-color); } .aura-swatch.final { background: linear-gradient(135deg,#ff283e 48%,#0a0c11 52%); border: 1px solid #ad2535; } .aura-ranks { display: grid; gap: 16px; } .aura-ranks h3 { margin: 0 0 8px; font-size: 13px; color: #9aadb6; } .aura-ranks section > div { display: flex; flex-wrap: wrap; gap: 7px; } #rank-panel.catalog .aura-ranks button { flex: 1 0 60px; min-width: 0; max-width: 95px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid #334650; border-radius: 8px; background: #152027; color: #ccd9df; font-size: 12px; } #rank-panel.catalog .aura-ranks button.selected { background: #294036; border-color: #99baa4; color: #ecf7ee; } .aura-ranks button small { color: #8fa6b0; font-size: 10px; } @media (max-width: 640px) { .aura-layout { grid-template-columns: minmax(0,1fr); gap: 18px; } .aura-preview > img { max-height: 310px; } .aura-preview h2 { font-size: 19px; margin-bottom: 12px; } .aura-layers { padding: 0 12px 12px; } .aura-ranks { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } #rank-panel.catalog .aura-ranks button { flex-basis: 48px; max-width: none; padding: 8px 2px; } } @media (pointer: coarse) { #select-screen #t-right { justify-content: safe flex-end; } } @media (pointer: coarse) and (orientation: portrait) { #select-screen #t-right { gap: 7px; } #select-screen #t-right .t-room-open { min-height: 42px; padding: 5px 9px; } .room-browser .rb-list { grid-template-columns: minmax(0,1fr); } .room-browser footer button { padding: 10px; font-size: 13px; } } /* The same stage hue is used for weapons, projectiles and this legend. */ .cat-stage-strip{margin:14px 0 18px;} .cat-stage-strip .cat-pinnacle{--accent:#f33543!important;background:linear-gradient(135deg,#070a0e,#251018);border-color:#f33543;box-shadow:inset 3px 0 #06080c;} /* Screen-facing text has no panel; shared level finish stays legible on mobile. */ #title-nameplate{background:none;border:0;border-radius:0;box-shadow:none;padding:0;flex-wrap:wrap;column-gap:6px;row-gap:0;text-shadow:0 1px 3px #000,1px 0 2px #000,-1px 0 2px #000;max-width:min(390px,45vw);} #title-nameplate .tn-progress{flex-basis:100%;color:#d2dbd9;font-size:10px;line-height:16px;} .rank-insignia{color-scheme:only light;flex:none;isolation:isolate;overflow:visible;} #lobby .t-who .admin-virtual,#lobby .t-who .admin-virtual small{color:#ffe15a;} .level-finish{--lv-color:#fff;display:inline-block;font-weight:800;color:var(--lv-color);background:none;-webkit-text-fill-color:currentColor;text-shadow:none;filter:none;animation:none;white-space:nowrap;} .lv-gold,.lv-gold-spark{--lv-color:#ffe35a;--lv-low:#d8a92c;--lv-light:#fff7c0;} .lv-blue{--lv-color:#58bcff;--lv-low:#287fd0;--lv-light:#d2f4ff;} .lv-orange{--lv-color:#ff9e48;--lv-low:#cc6418;--lv-light:#ffead1;} .lv-red,.lv-final{--lv-color:#ff514a;--lv-low:#a61d25;--lv-light:#ffd9d4;} #title-nameplate{flex-wrap:nowrap;max-width:min(520px,55vw);}#title-nameplate .tn-conq{flex:none;font-size:11px;} #title-welcome{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);max-width:60vw;color:#ffe59a;font-size:14px;font-weight:700;line-height:1.4;text-align:center;text-shadow:0 1px 4px #000,0 0 12px #000;pointer-events:none;opacity:0;transition:opacity .45s;} #title-welcome.on{opacity:1;} @media(max-height:500px){#title-welcome{font-size:12px;}} @media(prefers-reduced-motion:reduce){#title-welcome{transition:none;}} /* Fixed mixed colors; only rank badges and the character aura emit light. */ .lv-final,.lv-conqueror{background-image:linear-gradient(115deg,#ff594f 0%,#e82b36 27%,#080a10 43%,#454953 50%,#090b12 57%,#ff3847 73%,#ff756a 100%);background-size:100% 100%;background-position:0% 50%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .lv-conqueror{--lv-color:#c760ff;background-image:linear-gradient(115deg,#cf7fff 0%,#9450e5 24%,#ed354c 39%,#121018 52%,#43404a 60%,#080911 66%,#fa4051 82%,#bd61ee 100%);} .lobby-settings{width:min(620px,92vw);max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;padding:18px;border:1px solid #7b9a94;border-radius:13px;background:linear-gradient(135deg,#223330,#111b21);color:#eee7cd;box-shadow:0 12px 50px #0009;touch-action:pan-y;} .lobby-settings header,.lobby-settings footer{display:flex;align-items:center;gap:10px;justify-content:space-between;} .lobby-settings h2{margin:3px 0 12px;font-size:22px;}.lobby-settings header small{color:#9dafa9;font-size:10px;letter-spacing:2px;}.lobby-settings button{color:#f6eccc;background:#162221;border:1px solid #648079;border-radius:7px;padding:8px 12px;font-size:13px;min-height:35px;cursor:pointer;} .lobby-settings button.on,.lobby-settings button[aria-pressed=true]{background:#635323;border-color:#e2c863;color:#ffe78b;} .ls-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.ls-grid section{min-width:0;padding:12px;border:1px solid #819d8e40;border-radius:9px;background:#0b171a80;} .ls-audio{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}.ls-grid label{display:grid;grid-template-columns:1fr 42px;align-items:center;gap:5px;font-size:11px;color:#afc0be;}.ls-grid input{grid-row:2;width:100%;height:26px;accent-color:#e4c662;touch-action:pan-x;}.ls-grid output{grid-row:2;text-align:right;color:#eedba0;}.ls-options{display:flex;gap:6px;margin-top:10px;}.ls-options button{flex:1;padding:6px 3px;} .lobby-settings footer{margin-top:14px;flex-wrap:wrap;}.lobby-settings footer small{flex:1;font-size:10px;color:#a6b8b4;}.lobby-settings header>button{align-self:flex-start;} @media(max-height:450px){.lobby-settings{padding:12px;}.lobby-settings h2{font-size:18px;margin-bottom:8px;}.ls-grid{gap:8px;}.ls-grid section{padding:8px;}.lobby-settings footer{margin-top:8px;}} /* A thin static outline keeps the black text readable on dim backgrounds. */ .lv-final{-webkit-text-stroke:.35px #e46767ab;}.lv-conqueror{-webkit-text-stroke:.30px #bba5d5a0;} #t-modal:has(.lobby-settings){align-items:center;padding:12px;background:#0008;} .lobby-settings-open #bgm-btn{display:none!important;} /* Landscape enlistment page keeps the soldier clear of all controls. */ #select-screen.creating{background:linear-gradient(90deg,#071218ed, #101c2399 23%,transparent 38%,transparent 65%,#071218bb 82%,#071218ed),linear-gradient(0deg,#071218e8,transparent 30%,transparent 76%,#071218aa);touch-action:auto;} #select-screen.creating> :not(#recruit-page){display:none!important;} #recruit-page{position:absolute;inset:0;color:#f1eee2;pointer-events:none;font-size:14px;--rp-side:clamp(180px,22vw,320px);--rp-foot:132px;--rp-pad:clamp(18px,3.2vw,52px);--rp-class:#ddcda5;} #recruit-page header{position:absolute;top:max(24px,env(safe-area-inset-top));left:max(var(--rp-pad),env(safe-area-inset-left));right:max(var(--rp-pad),env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:20px;border-bottom:1px solid #c5d1d326;} .rp-brand{display:flex;align-items:center;gap:14px;}.rp-emblem{display:grid;place-items:center;width:45px;height:45px;border:1px solid #d8c49a66;transform:rotate(45deg);color:var(--rp-class);}.rp-emblem svg{width:30px;height:30px;transform:rotate(-45deg);}#recruit-page header small{font-size:9px;font-weight:600;letter-spacing:2.5px;color:#adbfc5;}#recruit-page h1{color:#f1eee2;font-size:25px;margin:6px 0 0;font-weight:700;letter-spacing:-.7px;} .rp-steps{display:flex;align-items:center;gap:14px;font-size:11px;color:#b4c0c1;}.rp-steps b{color:#dac7a1;font-size:10px;margin-right:5px;}.rp-steps i{width:28px;height:1px;background:#bfc9c533;} #recruit-page button,#recruit-page input{pointer-events:auto;box-sizing:border-box;font:inherit;touch-action:manipulation;} #recruit-page button{cursor:pointer;color:#e6e8e0;background:#14232cb5;border:1px solid #c0cfca26;border-radius:3px;min-height:44px;padding:9px 12px;transition:background .18s,border-color .18s;} #recruit-page button:hover{border-color:#d8c69a88;background:#273740d9;}#recruit-page button:active{transform:translateY(1px);}#recruit-page button:focus-visible{outline:2px solid #ebcf96;outline-offset:3px;}#recruit-page .rp-back{min-height:44px;border:0;background:transparent;color:#bfcdd1;padding:9px 0 9px 18px;}.rp-back span{margin-left:5px;font-size:11px;} .recruit-classes{position:absolute;left:max(var(--rp-pad),env(safe-area-inset-left));top:144px;bottom:calc(var(--rp-foot) + 36px);width:var(--rp-side);display:flex;flex-direction:column;gap:10px;pointer-events:auto;touch-action:pan-y;} .rp-section{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#e3d6b9;font-size:10px;font-weight:600;letter-spacing:1.2px;min-height:25px;}.rp-section small{color:#829ba7;font-size:8px;letter-spacing:1px;} #recruit-page .recruit-classes button{display:flex;align-items:center;gap:13px;flex:1;min-height:52px;max-height:84px;text-align:left;border-width:0 0 1px;border-color:#a4b8bd2b;background:linear-gradient(90deg,#13263188,#13263133);position:relative;padding:12px 13px;} .rp-class-icon{flex:none;width:35px;height:35px;color:#a9bac1;}.rp-class-icon svg{width:100%;height:100%;}.rp-class-copy{min-width:0;}.rp-class-copy b{display:block;font-size:18px;font-weight:600;letter-spacing:.4px;}.rp-class-copy small{display:block;margin-top:6px;font-size:10px;color:#a0b4be;white-space:nowrap;}.recruit-classes em{font-style:normal;font-size:10px;letter-spacing:1px;color:#8299a6;margin-left:auto;} #recruit-page .recruit-classes button.on{border-color:#d5c19599;background:linear-gradient(90deg,#dac39627,#d7c8ac08);box-shadow:inset 2px 0 var(--rp-class);}.recruit-classes button.on .rp-class-icon,.recruit-classes button.on em{color:var(--rp-class);}.recruit-classes button.on b{color:#fff3d6;}.rp-left-note{margin:9px 0 0;font-size:10px;color:#91a5ae;line-height:1.5;} .recruit-weapons{position:absolute;right:max(var(--rp-pad),env(safe-area-inset-right));top:148px;width:var(--rp-side);display:flex;flex-direction:column;gap:10px;} .rp-dossier{padding-bottom:25px;margin-bottom:8px;border-bottom:1px solid #bdcecd30;}.rp-dossier>small{display:block;line-height:1.4;font-size:9px;letter-spacing:2px;color:var(--rp-class);}.rp-dossier h2{font-size:42px;font-weight:650;letter-spacing:-2px;margin:10px 0 11px;}.rp-dossier p{font-size:12px;line-height:1.8;color:#b9c6c9;margin:0 0 17px;word-break:keep-all;}.rp-dossier>span{display:block;line-height:1.5;border-left:2px solid var(--rp-class);padding-left:9px;font-size:11px;color:#dfdfcf;} #recruit-page .recruit-weapons button{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;min-height:83px;background:linear-gradient(120deg,#182c3699,#15242bbb);}.recruit-weapons img{width:48%;height:70px;object-fit:contain;filter:drop-shadow(0 4px 4px #0007);mix-blend-mode:screen;}.recruit-weapons button>span{min-width:0;}.recruit-weapons b{display:block;line-height:1.3;font-size:15px;font-weight:600;white-space:nowrap;}.recruit-weapons button small{display:block;line-height:1.4;white-space:nowrap;font-size:9px;margin-top:6px;color:#b0bdc1;}.recruit-weapons button i{font-size:14px;font-style:normal;margin-left:auto;color:#bdb48e;} #recruit-page .recruit-weapons button.on{border-color:#d9c294aa;background:linear-gradient(120deg,#bba57c20,#15242bbb);}.recruit-weapons button.on small{color:#e1cba0;} .rp-scene-caption{position:absolute;left:50%;bottom:calc(var(--rp-foot) + 28px);transform:translateX(-50%);width:40%;text-align:center;text-shadow:0 2px 8px #000;}.rp-scene-caption span{font-size:8px;letter-spacing:2px;color:#c2cacc;display:block;}.rp-scene-caption b{display:block;font-size:11px;font-weight:400;color:#e1ded2;margin-top:6px;} .recruit-form{position:absolute;left:max(var(--rp-pad),env(safe-area-inset-left));right:max(var(--rp-pad),env(safe-area-inset-right));bottom:max(26px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr minmax(200px,1.15fr) minmax(150px,.65fr);align-items:end;column-gap:32px;pointer-events:auto;padding-top:22px;border-top:1px solid #c6cfce33;} .rp-form-intro{align-self:center;}.rp-form-intro small{display:block;font-size:9px;color:#c8b48b;letter-spacing:1.8px;margin-bottom:9px;}.rp-form-intro b{font-size:16px;letter-spacing:-.3px;font-weight:500;}.rp-name-field label{display:flex;justify-content:space-between;margin-bottom:9px;font-size:10px;letter-spacing:.8px;color:#b9c7cc;}.rp-name-field label small{font-size:9px;color:#8ba2ae;}.recruit-form input{width:100%;height:49px;border:1px solid #6a828888;border-radius:3px;background:#10202aa8;color:#f1eee4;padding:10px 15px;font-size:16px!important;outline:none;}.recruit-form input:focus{border-color:#e2c993;box-shadow:0 0 0 1px #e2c99344;}.recruit-form input::placeholder{color:#869da9;font-size:12px;} #recruit-page .recruit-form button{display:flex;justify-content:space-between;align-items:center;height:49px;padding:10px 21px;background:linear-gradient(115deg,#dbc69a,#bba06d);color:#1a2931;border:1px solid #ebd9b3;font-weight:750;letter-spacing:.8px;box-shadow:0 4px 18px #c1a97518;}.recruit-form button b{font-size:21px;line-height:1;font-weight:400;}.recruit-form>small{grid-column:2/-1;min-height:13px;font-size:11px;color:#ffb99f;margin-top:7px;} .enlist-welcome{display:none;position:absolute;top:14%;left:18%;right:18%;text-align:center;text-shadow:0 2px 12px #000;}.enlist-welcome small{display:block;color:#e1c591;font-size:9px;letter-spacing:4px;}.enlist-welcome b{display:block;font-size:22px;font-weight:500;color:#f7efdc;margin-top:13px;} .enlisting header,.enlisting .recruit-classes,.enlisting .recruit-weapons,.enlisting .recruit-form,.enlisting .rp-scene-caption{display:none!important;}.enlisting .enlist-welcome{display:block;}.creating:has(.enlisting){background:linear-gradient(0deg,#061119b0,transparent 40%,transparent 65%,#06111980)!important;} .enlist-loading{display:none;position:absolute;inset:0;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 40%,#233945fa,#0b1820fc 65%);color:#e8e2d5;}.loading .enlist-loading{display:flex;}.rp-load-emblem{width:66px;height:66px;border:1px solid #d0ba8b88;display:grid;place-items:center;color:#d0ba8b;transform:rotate(45deg);margin-bottom:34px;}.rp-load-emblem svg{width:48px;height:48px;transform:rotate(-45deg);}.enlist-loading>small{letter-spacing:3.5px;font-size:9px;color:#b8a883;}.enlist-loading h2{font-size:25px;font-weight:500;letter-spacing:-.6px;margin:16px 0 26px;}.enlist-loading p{font-size:11px;letter-spacing:1px;color:#92a6af;margin-top:15px;}.enlist-line{width:min(300px,50vw);height:2px;background:#d6bb8b;animation:enlistProgress 1.5s ease-out both;transform-origin:left;}@keyframes enlistProgress{from{transform:scaleX(.08);}to{transform:scaleX(1);}} @media(max-height:600px){#recruit-page{--rp-side:clamp(146px,22vw,225px);--rp-foot:87px;--rp-pad:clamp(15px,2.7vw,30px);font-size:12px;}#recruit-page header{top:14px;padding-bottom:12px;}.rp-brand{gap:10px;}.rp-emblem{width:30px;height:30px;}.rp-emblem svg{width:23px;height:23px;}#recruit-page h1{font-size:19px;margin-top:4px;}#recruit-page header small{font-size:7px;letter-spacing:1.7px;}.rp-steps{font-size:9px;gap:8px;}.rp-steps b{font-size:8px;}.rp-steps i{width:15px;}.recruit-classes{top:89px;bottom:calc(var(--rp-foot) + 16px);gap:7px;}.rp-section{min-height:18px;font-size:8px;letter-spacing:.7px;}.rp-section small{font-size:7px;}#recruit-page .recruit-classes button{min-height:41px;max-height:58px;padding:7px 8px;gap:8px;}.rp-class-icon{width:25px;height:25px;}.rp-class-copy b{font-size:14px;}.rp-class-copy small{font-size:8px;margin-top:3px;}.recruit-classes em{font-size:8px;}.rp-left-note{font-size:8px;margin-top:4px;}.recruit-weapons{top:94px;gap:7px;}.rp-dossier{padding-bottom:15px;margin-bottom:4px;}.rp-dossier>small{font-size:7px;letter-spacing:1.4px;}.rp-dossier h2{font-size:29px;letter-spacing:-1px;margin:6px 0 8px;}.rp-dossier p{font-size:10px;line-height:1.6;margin-bottom:10px;}.rp-dossier>span{font-size:9px;}#recruit-page .recruit-weapons button{min-height:63px;padding:6px 8px;gap:5px;}.recruit-weapons img{height:47px;}.recruit-weapons b{font-size:12px;}.recruit-weapons button small{font-size:8px;margin-top:4px;}.rp-scene-caption{bottom:calc(var(--rp-foot) + 13px);}.rp-scene-caption span{font-size:6px;letter-spacing:1.4px;}.rp-scene-caption b{font-size:9px;margin-top:3px;}.recruit-form{bottom:11px;padding-top:12px;column-gap:18px;grid-template-columns:1fr minmax(170px,1.1fr) minmax(116px,.7fr);}.rp-form-intro b{font-size:12px;}.rp-form-intro small{font-size:7px;letter-spacing:1px;margin-bottom:5px;}.rp-name-field label{font-size:8px;margin-bottom:5px;}.rp-name-field label small{font-size:7px;}.recruit-form input,#recruit-page .recruit-form button{height:42px;}.recruit-form input{padding:8px 11px;}#recruit-page .recruit-form button{padding:8px 14px;}.recruit-form>small{min-height:10px;margin-top:4px;font-size:9px;}.enlist-welcome b{font-size:17px;}.enlist-loading h2{font-size:21px;}} @media(max-height:460px){#recruit-page{--rp-side:clamp(145px,22vw,198px);--rp-foot:90px;}#recruit-page header{top:9px;padding-bottom:9px;}.recruit-classes{top:70px;bottom:calc(var(--rp-foot) + 8px);gap:4px;}.recruit-weapons{top:70px;gap:5px;}#recruit-page .recruit-classes button{min-height:32px;max-height:43px;}.rp-left-note{display:none;}.rp-dossier{padding-bottom:8px;margin-bottom:0;}.rp-dossier h2{font-size:24px;line-height:1.12;margin:3px 0 4px;}.rp-dossier p{display:none;}.rp-dossier>span{font-size:8px;}#recruit-page .recruit-weapons button{min-height:46px;padding:5px 8px;}.recruit-weapons img{height:34px;}.recruit-form{bottom:7px;padding-top:8px;}.rp-scene-caption{display:none;}.rp-form-intro b{font-size:11px;}.enlist-loading h2{font-size:18px;}} @media(max-width:750px) and (orientation:landscape){.rp-steps{display:none;}#recruit-page{--rp-side:clamp(135px,22vw,164px);--rp-pad:15px;}.rp-class-copy b{font-size:13px;}.rp-class-copy small{font-size:7px;}#recruit-page .recruit-classes button{gap:6px;}.rp-class-icon{width:22px;height:22px;}.rp-form-intro{display:none;}.recruit-form{left:calc(var(--rp-side) + var(--rp-pad) + 16px);grid-template-columns:minmax(155px,1fr) 115px;column-gap:11px;}.recruit-form>small{grid-column:1/-1;}.rp-name-field label small{display:none;}.rp-scene-caption b{font-size:8px;}.rp-dossier p{font-size:8px;}.recruit-weapons b{font-size:10px;}.recruit-weapons button small{font-size:7px;}} @media(max-height:340px){#recruit-page{--rp-foot:81px;}.recruit-classes{top:64px;gap:2px;}#recruit-page .recruit-weapons button{min-height:43px;}.rp-dossier h2{font-size:21px;}#recruit-page .recruit-classes button{min-height:31px;}.rp-class-copy small{display:none;}.rp-dossier p{display:none;}.recruit-weapons{top:64px;}.rp-dossier{padding-bottom:4px;}.rp-dossier>span{display:none;}.recruit-weapons img{height:30px;}.recruit-form{bottom:4px;}.recruit-form input,#recruit-page .recruit-form button{height:38px;}.rp-scene-caption{display:none;}} /* Actual game models and their visual-work queue. */ html.monster-doc-html{height:auto;min-height:100%;overflow:auto;touch-action:pan-y}.monster-guide-open,#rank-panel .monster-page{touch-action:pan-y} .monster-guide-open #rank-panel{padding-bottom:72px}.monster-guide-open #rank-panel .gd-tabs{position:sticky;top:0;z-index:4}.monster-guide-open #rank-close{position:fixed;right:12px;bottom:12px;z-index:5;min-height:38px;background:#22352e;border-color:#8ea99c;box-shadow:0 3px 15px #0008} .monster-page .cat-heading p{font-size:14px;line-height:1.6;color:#b5c8ca;margin:8px 0}.monster-page .cat-heading small{display:block;color:#94a8ae;font-size:12px} .monster-document-link{display:inline-block;margin-top:10px;color:#a8d9cd;font-size:13px}.monster-filters{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.monster-filters button{font:inherit;font-size:13px;padding:8px 14px;background:#152027;border:1px solid #34464c;border-radius:20px;color:#c4d1d4;cursor:pointer}.monster-filters button.selected{background:#294238;border-color:#9ab797;color:#e5f3df} .monster-section-title{font-size:18px;color:#d9e7e2;margin:20px 0 12px}.monster-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.monster-card{border:1px solid #35464f;background:#172028;border-radius:12px;overflow:hidden;min-width:0;text-align:left}.monster-card-meta{padding:12px 12px 0;display:flex;flex-wrap:wrap;gap:6px;justify-content:space-between;font-size:11px;color:#abbac1}.monster-status{font-weight:600;color:#dfbd72}.monster-status.done{color:#99d8b2}.monster-status.existing{color:#adbfca}.monster-card>img{display:block;width:100%;height:180px;object-fit:contain;background:#172028}.monster-card h2{padding:0 14px;margin:4px 0 7px;font-size:18px;color:#e6f1ec}.monster-card strong{display:block;padding:0 14px;font-size:12px;font-weight:500;color:#a9c0c4}.monster-card p{padding:0 14px 14px;margin:8px 0 0;font-size:12px;line-height:1.65;color:#b0c1c5}.monster-alias{display:block;padding:0 14px 8px;color:#899da5;font-size:11px}.monster-placeholder{height:180px;display:grid;place-items:center;color:#6e848e;background:#11191f;font-size:12px;letter-spacing:1px}.monster-planned-note,.monster-empty{font-size:13px;line-height:1.6;color:#a6b8bf}.monster-empty{grid-column:1/-1;padding:20px;border:1px solid #34464c;border-radius:10px} body.monster-document{position:static;height:auto;min-height:100%;overflow:auto;margin:0;background:#10191f;color:#d6e3e5;font:14px/1.5 system-ui,sans-serif;touch-action:pan-y}.monster-document #monster-document-root{width:min(1120px,100%);margin:0 auto;padding:24px;box-sizing:border-box}.monster-document .cat-page{width:100%;text-align:left}.monster-document h1{font-size:28px;line-height:1.25;color:#e6eeea;margin:8px 0}.monster-document .cat-heading>span{font-size:11px;letter-spacing:2px;color:#8facb8} @media(max-width:900px){.monster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.monster-card>img,.monster-placeholder{height:160px}.monster-document #monster-document-root{padding:16px}} @media(max-width:480px){.monster-grid{grid-template-columns:1fr}.monster-card>img,.monster-placeholder{height:210px}.monster-document h1{font-size:23px}} @media(max-height:500px) and (min-width:600px){.monster-card>img,.monster-placeholder{height:145px}.monster-card h2{font-size:16px}.monster-page .cat-heading h1{font-size:22px}} /* Compact landscape touch lobby: keep labels together and shrink the action group by 20%. */ @media(pointer:coarse) and (orientation:landscape){ #select-screen #t-center .t-edit{flex-wrap:nowrap;gap:4px;align-items:center;} #select-screen #t-center .t-edit button{flex:0 0 auto;white-space:nowrap;padding:4px 7px;font-size:11px;line-height:1.35;border-radius:5px;} #select-screen #t-center .t-edit:has(.forge-btn) button{font-size:10px;padding:4px 5px;} #select-screen #t-center .t-pts{display:inline;white-space:nowrap;margin-left:2px;} #select-screen #t-right{width:200px;gap:6.4px;justify-content:safe flex-end;} #select-screen #t-right>button{box-sizing:border-box;flex:none;border-radius:8px;} #select-screen #t-right .t-room-open{min-height:38.4px;font-size:13.6px;line-height:1.2;padding:6.4px 9.6px;} #select-screen #t-right .t-room-open small{font-size:8.8px;margin-top:2.4px;line-height:1.2;} #select-screen #t-right .t-training{font-size:16px;line-height:1.2;padding:9.6px 0;letter-spacing:1.6px;} #select-screen #t-right .t-training small{font-size:8.8px;line-height:1.2;margin-top:2.4px;} #select-screen #t-right .t-launch{font-size:19.2px;line-height:1.2;padding:9.6px 0 6.4px;letter-spacing:3.2px;} #select-screen #t-right .t-launch small{font-size:9.6px;line-height:1.2;} #select-screen #t-right .t-off{font-size:10.4px;padding:1.6px 0;gap:4.8px;white-space:nowrap;} #select-screen #t-right .t-off input{width:14.4px;height:14.4px;} } @media(pointer:coarse) and (orientation:landscape) and (max-height:500px){ #select-screen #t-right{width:160px;gap:4px;} #select-screen #t-right .t-launch{font-size:16px;padding:6.4px 0 4.8px;} } /* Native badge light works independently of mobile CSS filter compositing. */ /* Touch entry uses the room popup; the shorter action group stays bottom aligned. */ #select-screen #t-right.touch-room-entry{gap:8px;justify-content:safe flex-end;} #select-screen #t-right.touch-room-entry .t-room-open{min-height:48px;padding:10px 12px;font-size:16px;line-height:1.25;} #select-screen #t-right.touch-room-entry .t-training{min-height:42px;padding:8px 10px;font-size:15px;line-height:1.25;} @media(pointer:coarse) and (orientation:landscape) and (max-height:500px){ #select-screen #t-right.touch-room-entry{gap:5px;} #select-screen #t-right.touch-room-entry .t-room-open{min-height:42px;padding:7px 9px;font-size:15px;} #select-screen #t-right.touch-room-entry .t-training{min-height:38px;padding:6px 8px;font-size:14px;} } .rk-native-star-glow{opacity:.28;animation:rkNativeStarGlow 2.4s ease-in-out infinite;pointer-events:none;} .rk-native-field-glow{opacity:.05;animation:rkNativeFieldGlow 3.7s ease-in-out infinite;pointer-events:none;} @keyframes rkNativeStarGlow{0%,100%{opacity:.28;fill:#ff6256}45%{opacity:.72;fill:#ff9185}55%{opacity:1;fill:#fff1dc}} @keyframes rkNativeFieldGlow{0%,70%,100%{opacity:.05}82%{opacity:.36}} .rk-native-star-glint{opacity:0;animation:rkNativeStarGlint 2.4s ease-in-out infinite;pointer-events:none;} @keyframes rkNativeStarGlint{0%,38%,75%,100%{opacity:0}45%{opacity:.12}55%{opacity:.40}} /* 대장 별: 주기 대부분은 조용하고 끝쪽에서만 짧게 번쩍 (주기·시작점은 별마다 다르게 data.js 에서) */ .rk-star.rk-gen{animation-name:rkGenTwinkle;} .rk-native-star-glow.rk-gen{animation-name:rkGenGlow;} .rk-native-star-glint.rk-gen{animation-name:rkGenGlint;} @keyframes rkGenTwinkle{0%,85%,100%{filter:drop-shadow(0 0 .6px #f22) brightness(1);transform:scale(1)}89%{filter:drop-shadow(0 0 2.5px #ff4a2a) brightness(1.45);transform:scale(1.08)}92%{filter:drop-shadow(0 0 3px #fff) brightness(1.7);transform:scale(1.1)}} @keyframes rkGenGlow{0%,85%,100%{opacity:.28;fill:#ff6256}89%{opacity:.72;fill:#ff9185}92%{opacity:1;fill:#fff1dc}} @keyframes rkGenGlint{0%,86%,98%,100%{opacity:0}89%{opacity:.12}92%{opacity:.40}} /* 자기 리스폰은 중앙의 주요 동작, 대기실 이동은 하단의 보조 동작. */ #downed-banner { position: fixed; inset: 0; transform: none; max-width: none; background: none; border: 0; padding: 0; animation: none; pointer-events: none; } #downed-msg { position: absolute; left: 50%; bottom: calc(50% + 72px); transform: translateX(-50%); width: min(600px, 90vw); font-size: clamp(15px, 2.5vw, 22px); } #downed-respawn, #dead-screen [data-d="re"] { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; width: min(420px, 88vw); padding: 20px 14px; font-size: clamp(26px, 4vw, 36px); font-weight: 800; border: 2px solid #ffcf61; border-radius: 10px; background: #352b12; color: #fff1c7; pointer-events: auto; } #dead-screen h1 { position: absolute; top: max(20px, 8vh); font-size: clamp(30px, 5vw, 48px); letter-spacing: 2px; } #dead-msg { position: absolute; bottom: calc(50% + 65px); width: min(600px, 90vw); font-size: clamp(14px, 2vw, 18px); } #downed-exit, #dead-screen [data-d="menu"] { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; max-width: 90vw; z-index: 16; } #downed-exit:disabled, #dead-screen [data-d="menu"]:disabled, #menu [data-mn="home"]:disabled { opacity: .55; cursor: wait; } /* Training damage telemetry: scoped to the practice HUD. */ #quest-panel:has(.tr-analysis){width:304px;box-sizing:border-box;padding:0;border:1px solid #526b73;border-radius:8px;background:linear-gradient(135deg,#14232ef2,#0c1823f2);color:#e6eeed;box-shadow:0 5px 20px #0004;text-shadow:none;overflow:hidden;font-family:system-ui,sans-serif;} .tr-analysis header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #ffffff18;gap:8px;} .tr-analysis header div{display:flex;flex-direction:column;gap:3px;} .tr-analysis header small{font-size:8px;letter-spacing:1.7px;color:#9ab3be;} .tr-analysis header b{font-size:13px;letter-spacing:.2px;} .tr-analysis header em{font-style:normal;font-size:9px;color:#e8c67b;white-space:nowrap;} .tr-analysis header em.idle{color:#9bafb6;} .tr-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#ffffff14;} .tr-metric{background:#14222c;padding:8px 12px;min-width:0;} .tr-metric>span{display:block;font-size:9px;color:#a7bac4;margin-bottom:2px;white-space:nowrap;} .tr-metric>strong{display:block;font-size:17px;line-height:1.3;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;} .tr-metric strong small{font-size:8px;font-weight:400;color:#9eafb8;margin-left:4px;} .tr-metric.primary>strong{color:#87e6ca;} .tr-metric.window{background:#172630;}.tr-metric.window>strong{font-size:14px;color:#ddc486;} .tr-measure-meta{display:flex;justify-content:space-between;gap:7px;padding:7px 12px;font-size:9px;color:#9ab1b9;} .tr-measure-meta b{color:#e4eeea;font-variant-numeric:tabular-nums;} .tr-analysis footer{font-size:8px;color:#a0b3bc;padding:5px 12px 8px;border-top:1px solid #ffffff12;} @media(pointer:coarse){ #quest-panel:has(.tr-analysis){width:224px;max-width:calc(100vw - 130px);} .tr-analysis header{padding:7px 9px;}.tr-analysis header b{font-size:11px;}.tr-analysis header small{font-size:7px;letter-spacing:1px;}.tr-analysis header em{font-size:8px;} .tr-metric{padding:6px 9px;}.tr-metric>span{font-size:8px;}.tr-metric>strong{font-size:14px;}.tr-metric.window>strong{font-size:12px;} .tr-measure-meta{padding:6px 9px;font-size:8px;}.tr-analysis footer{padding:4px 9px 6px;font-size:7px;} } @media(pointer:coarse) and (min-height:501px){body:has(.tr-analysis) #training-tools{top:250px;}} @media(pointer:coarse) and (max-height:500px) and (orientation:landscape){ #quest-panel:has(.tr-analysis){width:250px;max-width:calc(50vw - 32px);} .tr-analysis header{padding:5px 9px;}.tr-metric{padding:4px 9px;}.tr-metric>strong{font-size:12px;}.tr-metric.window>strong{font-size:11px;}.tr-measure-meta{padding:4px 9px;}.tr-analysis footer{padding:3px 9px 5px;} } @media(pointer:coarse) and (max-height:500px) and (orientation:portrait){ #quest-panel:has(.tr-analysis){width:190px;max-width:calc(100vw - 126px);} .tr-analysis header{padding:4px 7px;}.tr-analysis header b{font-size:10px;}.tr-analysis header small{font-size:6px;}.tr-metric{padding:3px 7px;}.tr-metric>span{font-size:7px;}.tr-metric>strong{font-size:12px;}.tr-metric.window>strong{font-size:10px;}.tr-measure-meta{padding:3px 7px;font-size:7px;}.tr-analysis footer{padding:3px 7px;font-size:6px;} .tr-analysis header small,.tr-analysis footer{display:none;} body:has(.tr-analysis) #training-tools{top:166px;width:190px;flex-direction:row;gap:4px;} body:has(.tr-analysis) #training-tools button{font-size:9px;line-height:12px;padding:3px 5px;} } /* Inventory uses compact identity rows; portrait remains in the stats window. */ #inv-panel .iv-head.iv-text-only { display: block; min-width: 0; } #inv-panel .iv-head.iv-text-only .iv-id { width: 100%; min-width: 0; box-sizing: border-box; } #inv-panel .iv-head.iv-text-only .sp-v { min-width: 0; } /* Lv.999: 글자마다 따로 칠해서 9 셋이 모두 첫 번째 9 (검정 · 은빛 · 검정) 와 같게 */ .lv-final.lv-split{background-image:none;-webkit-text-fill-color:currentColor;} .lv-split .lvf{display:inline;background-image:linear-gradient(115deg,#ff594f 0%,#e82b36 27%,#080a10 43%,#454953 50%,#090b12 57%,#ff3847 73%,#ff756a 100%);background-size:2.936em 100%;background-position:0 50%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .lv-split .lvf9{background-position:-1.197em 50%;} /* Compact, non-interactive exit cue; JavaScript finds a free position among top HUD panels. */ #quest-arrow{transform:none;align-items:center;gap:6px;padding:5px 8px;border:1px solid #e6c66088;border-radius:7px;background:#111a20d9;max-width:220px;box-sizing:border-box;pointer-events:none;z-index:8;font-size:12px;line-height:1.2;white-space:nowrap;} #quest-arrow svg{flex:none;width:30px;height:30px;} @media(orientation:landscape) and (max-height:500px){#quest-arrow{gap:4px;padding:4px 6px;max-width:180px;font-size:10px;}#quest-arrow svg{width:24px;height:24px;}} /* Same 46px round satellite controls orbit the fire button; crouch supplies the original gap. */ @media(pointer:coarse){ #touch{--orbit-r:85px;--fire-r:46px;--fire-right:14px;--fire-bottom:58px;} #btn-fire{right:var(--fire-right);bottom:var(--fire-bottom);width:calc(var(--fire-r)*2);height:calc(var(--fire-r)*2);border-radius:50%;} #btn-crouch,#btn-potion,#btn-reload{width:46px;min-width:46px;height:46px;box-sizing:border-box;border-radius:50%;padding:0;font-size:11px;font-weight:700;top:auto;left:auto;} #btn-crouch{right:calc(var(--fire-right) + var(--fire-r) + var(--orbit-r)*.966 - 23px);bottom:calc(var(--fire-bottom) + var(--fire-r) - var(--orbit-r)*.259 - 23px);} #btn-potion{right:calc(var(--fire-right) + var(--fire-r) + var(--orbit-r)*.866 - 23px);bottom:calc(var(--fire-bottom) + var(--fire-r) + var(--orbit-r)*.5 - 23px);} #btn-reload{right:calc(var(--fire-right) + var(--fire-r) + var(--orbit-r)*.259 - 23px);bottom:calc(var(--fire-bottom) + var(--fire-r) + var(--orbit-r)*.966 - 23px);} #btn-medic,#btn-heal{top:auto;left:auto;right:calc(var(--fire-right) + var(--fire-r) + var(--orbit-r) + 40px);bottom:calc(var(--fire-bottom) + var(--fire-r) + 6px);} #btn-auto,#btn-autojump{top:auto;left:auto;bottom:calc(var(--fire-bottom) + var(--fire-r) + var(--orbit-r)*.966 + 31px);} #btn-auto{right:calc(var(--fire-right) + var(--fire-r) + var(--orbit-r) + 28px);} #btn-autojump{right:calc(var(--fire-right) + var(--fire-r) + var(--orbit-r) + 88px);} } @media(pointer:coarse) and (max-width:600px){#touch{--orbit-r:71px;--fire-r:38px;--fire-right:12px;--fire-bottom:56px;}} @media(pointer:coarse) and (orientation:landscape) and (min-width:601px) and (max-height:400px){#minimap{width:min(150px,calc(100dvh - 240px));height:min(150px,calc(100dvh - 240px));}#difficulty-label{width:min(150px,calc(100dvh - 240px));}} /* 정복자 레벨 (금빛 별무리): 금 글자 · 은 숫자 · 둘레에 작은 금빛 별이 하나씩 반짝 */ .level-finish.lv-cq{position:relative;display:inline-block;font-weight:900;-webkit-text-fill-color:initial;overflow:visible;} .lv-cq .cq-gold{background:linear-gradient(180deg,#fff6c8 0%,#f0c35a 38%,#a8721c 52%,#f6d27a 70%,#8a5a12 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .lv-cq .cq-num{background:linear-gradient(180deg,#ffffff,#c9ced6 50%,#6c727c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .lv-cq .cq-tw{position:absolute;width:.32em;height:.32em;background:radial-gradient(#fff,#ffd76a 40%,transparent 70%);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:cqTw 2.8s ease-in-out infinite;pointer-events:none;} @keyframes cqTw{0%,70%,100%{opacity:0;transform:scale(.3) rotate(0)}82%{opacity:1;transform:scale(1) rotate(45deg)}} /* Lv.999 지옥화염 (그림이라 글자 꾸밈은 끔) */ .level-finish.lv-hellwrap{background:none;-webkit-text-stroke:0;-webkit-text-fill-color:initial;display:inline-block;line-height:1;} .lv-hellwrap svg.lv-hell{display:inline-block;pointer-events:none;} /* ⚒ 최종무기 강화 창 (무기 · 모루 · 가방 · 확률) */ .forge.fg{max-width:min(860px,96vw);} .fg-main{display:grid;grid-template-columns:1fr 150px 1.25fr;gap:12px;align-items:stretch;margin:8px 0;} .fg-target{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;background:radial-gradient(circle at 50% 35%,#3a1414,#140a0a 70%);border:1px solid #5a2222;border-radius:10px;transition:box-shadow .3s;} .fg-target .fg-big{height:120px;width:auto;filter:drop-shadow(0 0 10px #ff2a2a66);} .fg-target .fg-name{color:#ff6a5a;font-size:16px;} .fg-target .fg-name span{color:#ffd75a;font-size:20px;} .fg-stat{font-size:12.5px;line-height:1.6;color:#ddd;} .fg-stat .up{color:#7f7;} .fg-stat.gold{color:#ffd75a;} .fg-target.win{animation:fgWin 1.2s ease-out;} .fg-target.lose{animation:fgShake .5s;} @keyframes fgWin{0%{box-shadow:0 0 0 #fc4}30%{box-shadow:0 0 40px #ffd75a,inset 0 0 30px #ffd75a88}100%{box-shadow:0 0 0 #fc4}} @keyframes fgShake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}} .fg-anvil{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1;align-self:center;background:radial-gradient(circle,#2a2020,#0e0a0a 70%);border:2px solid #6a3a2a;box-shadow:inset 0 0 20px #000,0 0 14px #ff5a2a33;} .fg-ring{position:absolute;inset:-6px;border-radius:50%;border:4px solid transparent;} .fg-core{font-size:40px;filter:drop-shadow(0 0 6px #ff7a3a);} .fg-plus{font-weight:900;color:#ffd75a;font-size:15px;text-shadow:0 0 6px #fa0;} .fg-anvil.working{animation:fgHammer .22s infinite;} .fg-anvil.working .fg-core{animation:fgSwing .22s infinite;transform-origin:70% 80%;} .fg-anvil.working .fg-ring{border-top-color:#ffd75a;border-right-color:#ff7a3a;animation:fgSpin .5s linear infinite;box-shadow:0 0 18px #ff7a3a;} @keyframes fgHammer{50%{transform:scale(.96);box-shadow:inset 0 0 26px #ff5a2a88,0 0 28px #ff7a3a99;}} @keyframes fgSwing{0%,100%{transform:rotate(0)}40%{transform:rotate(-35deg)}60%{transform:rotate(10deg)}} @keyframes fgSpin{to{transform:rotate(360deg)}} .fg-anvil.win{animation:fgBurst 1.2s ease-out;border-color:#ffd75a;} .fg-anvil.win .fg-plus{font-size:18px;color:#fff3b0;} .fg-anvil.lose{animation:fgShake .5s;border-color:#a22;filter:grayscale(.5) brightness(.8);} .fg-anvil.lose .fg-plus{color:#f88;} @keyframes fgBurst{0%{box-shadow:0 0 0 #ffd75a}25%{box-shadow:0 0 60px 20px #ffd75a,inset 0 0 40px #fff}100%{box-shadow:0 0 0 #ffd75a}} .fg-spark{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;pointer-events:none;box-shadow:0 0 6px currentColor;} .fg-fly{position:fixed;z-index:9999;height:56px;width:auto;pointer-events:none;filter:drop-shadow(0 0 10px #ff7a3a);} .fg-bag{background:linear-gradient(#2a2416,#17130c);border:2px solid #6a5630;border-radius:12px;padding:8px;box-shadow:inset 0 2px 0 #ffffff14;} .fg-bag-h{font-size:13px;color:#e8d9b0;margin-bottom:6px;} .fg-bag-h b{color:#ffd75a;} .fg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;max-height:220px;overflow:auto;} .fg-slot{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:radial-gradient(circle at 50% 40%,#5a4c3a,#1c1710 75%);border:1px solid #4a3e24;border-radius:6px;padding:2px;color:#ddd;cursor:pointer;overflow:hidden;} .fg-slot .fg-ico{height:115%;width:auto;transform:rotate(-50deg);margin:-14% 0 -20%;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #ff5a3a);} .fg-slot .fg-ico.emoji{font-size:22px;height:auto;} .fg-slot small{font-size:9px;line-height:1;white-space:nowrap;color:#e8c8a0;} .fg-slot .fg-cn{position:absolute;top:1px;right:2px;font-style:normal;font-size:8px;color:#ffb030;} .fg-slot.sel{border-color:#ffd75a;box-shadow:0 0 0 2px #ffd75a88,inset 0 0 10px #ffd75a44;} .fg-slot.lock{opacity:.4;cursor:default;} .fg-slot.empty{cursor:default;background:#0b0a07;border-style:dashed;border-color:#3a3220;} .fg-slot.gone .fg-ico{visibility:hidden;} .fg-odds{display:flex;height:26px;border-radius:13px;overflow:hidden;margin:6px 0 4px;border:1px solid #333;font-size:13px;font-weight:800;} .fg-odds .ok{background:linear-gradient(#3a8a3a,#1e5a1e);display:flex;align-items:center;justify-content:center;color:#eaffea;min-width:64px;} .fg-odds .ng{background:linear-gradient(#8a2a2a,#4a1010);display:flex;align-items:center;justify-content:center;color:#ffe0e0;min-width:64px;} .fg-note{font-size:11.5px;color:#aaa;margin-bottom:4px;} @media (max-width:640px){.fg-main{grid-template-columns:1fr 110px;}.fg-bag{grid-column:1/-1;}.fg-target .fg-big{height:80px;}} .fg-tabs{display:flex;gap:6px;justify-content:center;margin:2px 0 6px;} .fg-tabs button{flex:1;max-width:260px;padding:8px 10px;font-size:15px;font-weight:800;background:#1e1a14;border:1px solid #5a4a30;border-radius:8px;color:#d8c8a8;cursor:pointer;} .fg-tabs button small{display:block;font-size:11px;font-weight:400;color:#aaa;} .fg-tabs button.on{background:#3a2a14;border-color:#ffd75a;color:#ffd75a;box-shadow:0 0 10px #ffd75a44;} .fg-empty{padding:30px 10px;text-align:center;color:#bbb;} .fg-slot .fg-rf{position:absolute;top:1px;left:3px;font-style:normal;font-size:9px;font-weight:800;color:#ffd75a;} .fg-slot .fg-ico.gear{transform:none;height:72%;width:auto;max-width:92%;object-fit:contain;margin:0;filter:drop-shadow(0 0 3px #ffd75a88);} .forge-list .fg-tico{height:34px;width:auto;} .fg-target img.fg-big{height:120px;width:auto;} .forge-list .fg-tico.wpn{height:40px;transform:rotate(-55deg);margin:-6px 0;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #ff5a3a);} /* 폰: 아이템 정보 창 (눌러서 보기 → 버튼으로 장착 · 해제) */ #item-pop{display:none;position:fixed;inset:0;z-index:60;background:#0008;align-items:center;justify-content:center;padding:12px;} #item-pop .ip-box{max-width:min(380px,94vw);max-height:84vh;overflow:auto;background:#14171b;border:2px solid #888;border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.5;color:#eee;} #item-pop .ip-btns{display:flex;gap:8px;margin-top:10px;} #item-pop .ip-btns button{flex:1;padding:11px 8px;font-size:16px;font-weight:800;border-radius:8px;border:1px solid #666;background:#262b30;color:#eee;} #item-pop .ip-btns .go{background:#1f4a1f;border-color:#5c5;color:#dfffdf;} #item-pop .ip-btns .danger{background:#4a1f1f;border-color:#c55;color:#ffdfdf;} /* 고유옵션 이름 배지 (★ [쾌속] 이동속도 +25%) */ .opt-title{display:inline-block;padding:0 5px;margin-right:2px;border:1px solid #ffb04a;border-radius:4px;background:linear-gradient(#4a2e0e,#2a1a08);color:#ffd27a;font-size:.92em;font-weight:800;line-height:1.35;letter-spacing:.02em;} /* 메딕 드론 회복 숫자 */ .dmg-num.heal{color:#5dffb0;} /* 테스트 병사 수치 (정복자 Lv · 장비 강화 · 무기 강화) */ .test-tune{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin:4px 0;font-size:12px;color:#cfe} .test-tune label{display:flex;align-items:center;gap:3px} .test-tune input{width:52px;background:#0d1214;color:#fff;border:1px solid #3a4a50;border-radius:5px;padding:2px 4px;font:inherit} .test-tune small{flex-basis:100%;color:#8aa;font-size:11px} /* Lobby nameplate: SVG font-size 50 at 40-unit scale equals 1.25em; normalize to adjacent text. */ #title-nameplate > .level-finish.lv-hellwrap{font-size:.8em;position:relative;top:.1em;} /* Lv.999 글자 높이를 옆 정복자 글자와 맞춤 */ /* 훈련소 치유 측정 */ .tr-analysis.tr-heal{margin-top:8px;border-color:#2ee8a6aa} .tr-analysis.tr-heal header b{color:#7dffcf} /* 방 참가 확인 창: 화면 가운데 */ #t-modal:has(> .t-join){align-items:center;padding-bottom:0;background:#0009;} #t-modal .t-box.t-join{min-width:min(340px,calc(100vw - 32px));text-align:center;} #t-modal .t-box.t-join .t-row{justify-content:center;} /* ★ 좋은 아이템 획득 카드 (캐릭터 옆) */ .loot-pop{position:absolute;transform:translate(0,-50%);pointer-events:none;z-index:6;--gc:#ffd23a;} .loot-pop .lp-rays{position:absolute;left:46px;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--gc) 70%,transparent) 0 8deg,transparent 8deg 22deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 68%);mask:radial-gradient(circle,#000 18%,transparent 68%);opacity:0;animation:lpRays 2.6s linear forwards;} .loot-pop .lp-card{position:relative;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;min-width:210px;border:2px solid var(--gc);border-radius:12px;background:linear-gradient(135deg,#101820ee,#05080cee);box-shadow:0 0 18px color-mix(in srgb,var(--gc) 70%,transparent),inset 0 0 14px color-mix(in srgb,var(--gc) 30%,transparent);overflow:hidden;transform-origin:20% 50%;animation:lpIn .55s cubic-bezier(.2,1.7,.4,1) both;} .loot-pop .lp-img{flex:none;width:72px;height:72px;border-radius:9px;overflow:hidden;border:1px solid color-mix(in srgb,var(--gc) 60%,transparent);background:#0d141a;display:flex;align-items:center;justify-content:center;} .loot-pop .lp-img img{width:100%;height:100%;object-fit:cover;filter:brightness(1.8) contrast(1.15) drop-shadow(0 0 4px var(--gc));animation:lpImg .7s cubic-bezier(.2,1.8,.4,1) .12s both;} .loot-pop .lp-txt{display:flex;flex-direction:column;gap:2px;white-space:nowrap;} .loot-pop .lp-head{font-size:12px;color:#ffe27a;letter-spacing:.5px;text-shadow:0 0 6px #ffb000;} .loot-pop .lp-name{font-size:17px;font-weight:900;color:var(--gc);text-shadow:0 0 8px color-mix(in srgb,var(--gc) 80%,transparent),0 1px 2px #000;} .loot-pop .lp-txt small{font-size:11px;color:#b8c8cc;} .loot-pop .lp-shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff55 45%,#ffffffaa 50%,#ffffff55 55%,transparent 70%);transform:translateX(-120%);animation:lpShine 1s ease-out .35s forwards;} .loot-pop .lp-sp{position:absolute;width:10px;height:10px;margin:-5px;background:radial-gradient(#fff,var(--gc) 45%,transparent 70%);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:lpSp 1.1s ease-in-out .3s 2;} .loot-pop.out{animation:lpOut .5s ease-in forwards;} @keyframes lpIn{0%{transform:scale(.2);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}} @keyframes lpImg{0%{transform:scale(.5) rotate(-25deg)}100%{transform:scale(1.65) rotate(0)}} @keyframes lpShine{to{transform:translateX(120%)}} @keyframes lpRays{0%{opacity:0;transform:scale(.4) rotate(0)}15%{opacity:1;transform:scale(1) rotate(20deg)}85%{opacity:.8}100%{opacity:0;transform:scale(1.1) rotate(120deg)}} @keyframes lpSp{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.3)}} @keyframes lpOut{to{opacity:0;transform:translate(0,-80%) scale(.92)}} @media(max-width:700px){.loot-pop .lp-card{min-width:170px;padding:6px 10px 6px 6px;gap:7px}.loot-pop .lp-img{width:54px;height:54px}.loot-pop .lp-name{font-size:14px}.loot-pop .lp-rays{left:34px;width:110px;height:110px;margin:-55px 0 0 -55px}} /* 장비 도감 착용 레벨 */ .cat-card .cat-req{display:block;margin-top:2px;color:#b8c6cb;font-size:12px;font-weight:700;} /* 공병 수류탄: 다음 투척까지 차오르는 원 (조준선 오른쪽) */ #ammo-cross .ac-ring { display: none; } #ammo-cross.gren .ac-ring { display: inline-block; width: 18px; height: 18px; margin-right: 4px; vertical-align: middle; border-radius: 50%; --p: 1; background: conic-gradient(#ffd23a calc(var(--p) * 360deg), #0008 0); -webkit-mask: radial-gradient(circle, transparent 50%, #000 53%); mask: radial-gradient(circle, transparent 50%, #000 53%); } #ammo-cross.gren.ready .ac-ring { background: rgba(255,255,255,.62); filter: none; } #ammo-cross.gren span { vertical-align: middle; color: #ffd23a; } /* Compact assembly guidance, placed against the actual HUD panel bounds by hud.js. */ #ready-hud{box-sizing:border-box;max-width:min(420px,calc(100vw - 24px));line-height:1.3;} @media(pointer:coarse){#ready-hud{max-width:min(360px,calc(100vw - 24px));padding:4px 8px;border-width:1px;border-radius:6px;font-size:11px;}#ready-hud small{font-size:10px;}} /* Existing defense round notifications: compact landscape text, no timing/rule changes. */ #def-banner{box-sizing:border-box;max-width:calc(100vw - 24px);} @media(pointer:coarse),(max-height:500px){#def-banner{font-size:18px;line-height:1.2;white-space:normal;text-shadow:0 1px 3px #000,0 0 6px #a040ff;}#def-banner small{font-size:11px;}#def-banner.def-phase-tight{font-size:14px;line-height:1.1;}#def-banner.def-phase-tight small{font-size:10px;}} /* Existing defense repair progress remains visible without covering the soldier. */ #def-repair,#def-hint{box-sizing:border-box;max-width:calc(100vw - 24px);} @media(pointer:coarse),(max-height:500px){#def-repair{max-width:280px;padding:3px 8px;font-size:11px;line-height:1.2;}#def-repair small{font-size:10px;}} /* 🔨 작업실 · 막무기 제작: 재료 칸 3개 (1+1+1) · 만들 막무기 고르기 */ .fg-cslots{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0 2px;} .fg-cslot{width:72px;height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed #6a5630;border-radius:10px;background:#0b0a07;color:#6a5630;font-size:26px;overflow:hidden;padding:2px;} .fg-cslot.on{border-style:solid;border-color:#ffd75a;background:radial-gradient(circle at 50% 40%,#5a4c3a,#1c1710 75%);cursor:pointer;color:#e8c8a0;font-size:10px;box-shadow:0 0 10px #ffd75a44;} .fg-cslot .fg-ico{height:110%;width:auto;transform:rotate(-50deg);margin:-14% 0 -20%;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #ff5a3a);} .fg-cslot .fg-ico.emoji{font-size:24px;height:auto;transform:none;margin:0;} .fg-cslot small{font-size:9px;line-height:1;white-space:nowrap;} .fg-cslot.gone .fg-ico{visibility:hidden;} .fg-cplus{color:#ffd75a;font-size:22px;} .fg-ctype{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:2px 0;} .fg-ctype button{padding:5px 10px;border-radius:7px;border:1px solid #5a2222;background:#1e1010;color:#d8a8a0;font-weight:800;cursor:pointer;} .fg-ctype button.on{border-color:#ff3a3a;color:#ff6a5a;box-shadow:0 0 8px #ff3a3a66;} @media (max-width:640px){.fg-cslot{width:58px;height:58px;}} /* Keep both magazines readable within the existing bottom HUD cell. */ .bh-weapon > div:not(#bh-ammo) { min-width: 0; flex: 1 1 0; overflow: hidden; } .bh-weapon #weapon-info { overflow: hidden; text-overflow: ellipsis; } #bh-ammo.dual { flex-shrink: 0; min-width: 74px; padding: 2px 4px; font-size: 12px; line-height: 1.1; white-space: pre-line; } /* 즉사 회피 (저격 즉사 확률이 높았는데 빗나감): 즉사와 같은 크기 · 노란 글씨 */ #hs-pop.kill.evade { color: #ffd23a; text-shadow: 0 0 8px #fa0, 0 0 16px #fa08, 1px 1px 0 #000; } /* 엄폐물! 데미지 감쇄! — 그 자리에서 위로 떠오르며 3초에 걸쳐 사라짐 */ .cover-pop { position: fixed; transform: translate(-50%, -50%); pointer-events: none; font-size: 12px; font-weight: 900; color: #ffd23a; text-shadow: 0 0 4px #000, 1px 1px 0 #000; white-space: nowrap; z-index: 6; } /* 저격 노줌: 탄이 퍼지는 큰 원 (조준선 둘레) */ /* 야간 작전 */ .night-buff { margin: -2px 0 4px; padding: 2px 6px; border-radius: 4px; background: #1a2448cc; color: #b8c8ff; font-weight: 700; font-size: 12px; } .night-buff small { color: #8ea0d8; font-weight: 400; } .dn-pick { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 6px 0 2px; flex-wrap: wrap; } .dn-pick > span { color: #ccc; font-size: 13px; } .dn-pick button { width: 200px; min-height: 46px; padding: 6px 8px; border-radius: 6px; border: 1px solid #556; background: #1b1f2a; color: #ddd; cursor: pointer; text-align: center; } .dn-pick button small { display: block; font-size: 10px; color: #9ab; margin-top: 2px; } .dn-pick button.on { border-color: #ffd23a; background: #2e2a14; color: #fff; } .dn-pick button[data-dn="night"].on { border-color: #8ea8ff; background: #18204a; } /* 맵 불러오기 화면 */ #map-curtain { position: fixed; inset: 0; z-index: 2147483000; background: #000; display: none; align-items: center; justify-content: center; color: #d8d2c4; pointer-events: all; } #map-curtain div { display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 18px; letter-spacing: .5px; } #map-curtain i { width: 34px; height: 34px; border: 3px solid #ffffff22; border-top-color: #e9c46a; border-radius: 50%; animation: map-spin .8s linear infinite; } @keyframes map-spin { to { transform: rotate(360deg); } } /* 🔁 강화 이식 */ .fg-trans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fg-trans .forge-list { max-height: 150px; overflow: auto; } .fg-tmats { flex-wrap: wrap; } .fg-tmats .fg-cslot { width: 54px; height: 54px; } .fg-warn { color: #ffb030; font-size: 12px; font-weight: 700; margin: 4px 0; } .forge-list { max-height: 260px; overflow: auto; } /* Mobile rifle readying is visual only; shot spread and cadence are unchanged. */ #crosshair svg { overflow: visible; } #crosshair { --xh-gap: 0px; } #crosshair.touch-fire-ready { --xh-gap: 4px; } #crosshair.touch-fire-ready.touch-fire-aiming { --xh-gap: 0px; } #crosshair line { transform: translate(calc(var(--xh-dx, 0) * var(--xh-gap)),calc(var(--xh-dy, 0) * var(--xh-gap))); transition: transform .25s ease-out; } /* Hold-and-drag action menu: original ability handlers remain unchanged. */ #btn-functions{right:110px;bottom:155px;width:58px;min-width:58px;height:58px;border-radius:50%;touch-action:none;font-size:13px;font-weight:700;background:#273943dc;border:2px solid #aac8cf;} #touch>[data-touch-bundled],#btn-functions[data-empty="true"]{display:none!important;} #btn-functions.actions-open{background:#705d27;border-color:#ffe18a;} .touch-action-menu{position:fixed;inset:0;z-index:2000;pointer-events:none;} .touch-action-menu[hidden]{display:none;} .touch-action-bubble,.touch-action-center{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:54px;height:54px;border-radius:50%;border:2px solid #a7c9d0;background:#17252ff5;color:white;font:700 11px/1.3 sans-serif;text-align:center;white-space:pre-line;box-shadow:0 2px 7px #0009;} .touch-action-bubble{animation:touch-action-pop .10s ease-out;} .touch-action-bubble.chosen{background:#ffdc79;color:#17252f;border-color:white;box-shadow:0 0 0 4px #ffdf8655;} .touch-action-bubble[aria-disabled="true"]{opacity:.5;} .touch-action-center{width:44px;height:44px;color:#d5dce2;background:#263039d9;border-color:#62727e;font-size:10px;} @keyframes touch-action-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.65);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}} @media(prefers-reduced-motion:reduce){.touch-action-bubble{animation:none;}} /* Six recruitment choices must not overflow into the name/submit form. */ #recruit-page .recruit-classes{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;min-height:0;} #recruit-page .recruit-classes>.rp-section,#recruit-page .recruit-classes>.rp-left-note{flex-shrink:0;} @media(orientation:landscape) and (max-height:600px){ #recruit-page .recruit-classes{bottom:max(12px,env(safe-area-inset-bottom));gap:4px;} #recruit-page .recruit-classes button{flex:1 0 36px;min-height:36px;max-height:48px;} #recruit-page .recruit-classes .rp-left-note{display:none;} #recruit-page .recruit-form{left:calc(var(--rp-side) + var(--rp-pad) + 16px);grid-template-columns:minmax(0,1fr) 115px;column-gap:11px;} #recruit-page .rp-form-intro{display:none;} #recruit-page .recruit-form>small{grid-column:1/-1;} #recruit-page .rp-name-field,#recruit-page .recruit-form input{min-width:0;width:100%;box-sizing:border-box;} } .ta-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:28px;pointer-events:none}.ta-icon svg{width:32px;height:32px}.ta-badge{position:absolute;right:2px;bottom:1px;border-radius:5px;padding:1px 3px;background:#15232fee;color:#fff;font:700 10px sans-serif}.ta-cooldown{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:#0009;color:#fff;font:700 17px sans-serif}.ta-preview .touch-action-bubble{animation:none} /* Recruitment: compare attainable growth, without changing the created soldier. */ .rp-preview-switch{position:absolute;left:50%;bottom:calc(var(--rp-foot) + 18px);transform:translateX(-50%);text-align:center;pointer-events:auto;white-space:nowrap;} .rp-preview-switch>small{display:block;font-size:9px;letter-spacing:1.2px;color:#c7b58d;margin-bottom:5px;} .rp-preview-switch>div{display:flex;justify-content:center;gap:0;} #recruit-page .rp-preview-switch button{font-size:11px;min-height:30px;padding:6px 12px;border-radius:0;border-color:#b8a77e66;background:#152630dd;} #recruit-page .rp-preview-switch button:first-child{border-radius:4px 0 0 4px;} #recruit-page .rp-preview-switch button:last-child{border-radius:0 4px 4px 0;} #recruit-page .rp-preview-switch button[aria-pressed="true"]{background:#c8b487;color:#14222b;border-color:#e8d7ad;} .rp-preview-switch>span{display:block;color:#bcc7c8;font-size:8px;margin-top:4px;} #recruit-page .rp-scene-caption{display:none;} .enlisting .rp-preview-switch,.enlisting #title-nameplate{display:none!important;} #touch,#touch *, .touch-action-menu,.touch-action-menu *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;} #btn-functions .ta-root-icon{width:62%;height:62%;display:block;margin:auto;pointer-events:none;} @media(max-height:460px){.rp-preview-switch>small{display:none;}.rp-preview-switch{bottom:calc(var(--rp-foot) + 2px);}#recruit-page .rp-preview-switch button{min-height:26px;padding:4px 9px;font-size:10px;}.rp-preview-switch>span{font-size:7px;}} /* Static deployment label: no frame work or input target. */ #game-version{position:fixed;left:max(6px,env(safe-area-inset-left));bottom:max(3px,env(safe-area-inset-bottom));z-index:1700;font:10px/12px ui-monospace,monospace;color:#d8e3df;opacity:.78;text-shadow:0 1px 2px #000;pointer-events:none;user-select:none;-webkit-user-select:none;} #battle-toolbar{position:fixed;display:flex;gap:5px;align-items:center;z-index:22;left:280px;top:8px;max-width:calc(100vw - 16px);touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} #battle-toolbar[hidden]{display:none!important} #battle-toolbar .tb.top{position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;transform-origin:center!important;filter:none!important;width:34px!important;min-width:34px!important;height:34px!important;padding:0!important;border-radius:17px;font-size:17px;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;cursor:pointer} #battle-toolbar-actions{display:none;gap:5px;align-items:center} #battle-toolbar[data-open=true] #battle-toolbar-actions{display:flex} #battle-toolbar[data-open=true] #btn-menu{color:#172027;background:#e7c477;border-color:#fff0c0} #battle-toolbar #btn-view-mode{width:48px!important;min-width:48px!important;font-size:14px} body[data-battle-view=first] [data-local-player-label]{visibility:hidden!important} #battle-toolbar .tb.top{box-sizing:border-box!important} /* Minimap-anchored root; reverse the visible action order and expand left. */ #battle-toolbar{transform-origin:top left;width:34px;max-width:none} #battle-toolbar-actions{position:absolute;right:calc(100% + 5px);top:0;flex-direction:row-reverse;white-space:nowrap} /* Login-only sizing: preserve all in-game/lobby control geometry. */ #login-screen { box-sizing: border-box; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); overflow: auto; touch-action: pan-y; } #login-screen .t-box.login { box-sizing: border-box; flex: 0 1 360px; width: min(360px, 100%); min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; padding: 16px 18px; overflow: auto; overscroll-behavior: contain; } #login-screen .login .t-row { min-width: 0; } #login-screen .login input:not([type="checkbox"]) { flex: 1 1 0; width: 100%; min-width: 0; box-sizing: border-box; } #login-screen .lg-opts { flex-wrap: wrap; gap: 6px 14px; } #login-screen .lg-note { overflow-wrap: anywhere; } @media (max-height: 440px) { #login-screen .t-box.login { padding: 10px 14px; } #login-screen .login .t-logo { font-size: 24px; margin-bottom: 4px; } #login-screen .login h2 { font-size: 17px; margin-bottom: 5px; } #login-screen .login .t-row { margin: 5px 0; } #login-screen .login input:not([type="checkbox"]) { font-size: 16px; padding: 7px 10px; } #login-screen .login .t-go { font-size: 16px; padding: 8px 0; } #login-screen .lg-opts { font-size: 12px; } #login-screen .lg-note { margin-top: 4px; font-size: 10px; } } /* Login and account registration are separate, recognizable screens. */ #login-screen.is-register { background: radial-gradient(ellipse at 25% 15%, #365041, #101e1dfc 65%, #080f10); } #login-screen.is-register .t-box.login { background: linear-gradient(150deg, #223c35, #101c1b); border: 1px solid #82bca0; box-shadow: 0 16px 60px #0008; } #login-screen .lg-mode { color: #b6b09b; font-size: 11px; letter-spacing: .12em; margin: 3px 0 7px; } #login-screen.is-register .lg-mode { color: #a5ebc5; } #login-screen .lg-intro { color: #c5d7ce; font-size: 12px; line-height: 1.5; margin: 0 0 10px; } #login-screen .lg-field { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; text-align: left; font-size: 12px; color: #d8d8cb; } #login-screen.is-register .t-go { background: linear-gradient(#82c09b, #4c8768); color: #081b12; border-color: #b9e8cb; } #login-screen.is-register .lg-switch { color: #b7e4d3; } @media (max-height: 440px) { #login-screen .lg-mode { margin: 1px 0 3px; } #login-screen .lg-intro { margin-bottom: 5px; } #login-screen .lg-field { gap: 2px; font-size: 11px; } }