/* 포탄 대작전 화면 (밝은 파스텔, 휴대폰 세로·가로·PC) */
:root { --ink: #2f3550; --muted: #7a809c; --line: #ece8f4; --pink: #ff7aa2; --violet: #8b7cf6; --sky: #dff3ff; --gold: #f5a524; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; background: var(--sky); color: var(--ink); word-break: keep-all; overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; }

/* ---------- 첫 화면 ---------- */
#home { overflow-y: auto; background: linear-gradient(#8fd3ff 0%, #d8f1ff 45%, #fff9ec 100%); padding: env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 20px); }
.sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sky .sun { position: absolute; right: 8%; top: 60px; width: 70px; height: 70px; border-radius: 50%; background: #fff6b8; box-shadow: 0 0 0 14px rgba(255, 246, 184, .35), 0 0 0 30px rgba(255, 246, 184, .15); }
.sky .cl { position: absolute; width: 110px; height: 34px; border-radius: 40px; background: #fff; opacity: .9; animation: drift 40s linear infinite; }
.sky .cl::before, .sky .cl::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.sky .cl::before { width: 50px; height: 50px; left: 18px; top: -24px; }
.sky .cl::after { width: 38px; height: 38px; left: 56px; top: -16px; }
.sky .c1 { top: 120px; left: -120px; }
.sky .c2 { top: 220px; left: -120px; animation-delay: -14s; transform: scale(.7); animation-duration: 55s; }
.sky .c3 { top: 40px; left: -120px; animation-delay: -30s; animation-duration: 48s; }
@keyframes drift { to { left: 110%; } }
.top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; max-width: 760px; margin: 0 auto; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .92); font-size: 18px; cursor: pointer; box-shadow: 0 4px 14px rgba(60, 50, 110, .12); display: grid; place-items: center; padding: 0; }
.hero { position: relative; z-index: 1; text-align: center; padding: 4px 16px 0; max-width: 520px; margin: 0 auto; }
.logo { margin: 6px 0 4px; font-size: clamp(38px, 11vw, 56px); font-weight: 900; letter-spacing: -2px; color: #fff; -webkit-text-stroke: 2px #3b3f58; paint-order: stroke fill; text-shadow: 0 5px 0 #3b3f58, 0 10px 18px rgba(59, 63, 88, .25); }
.logo { background: none; }
.tag { margin: 6px 0 0; font-weight: 800; color: #3d4566; line-height: 1.5; font-size: 15px; }
.hero-art { width: 100%; max-width: 420px; display: block; margin: 4px auto -6px; }
.hero-art .tank-a { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(70px, 72px); } }
.menu { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; padding: 0 16px; display: grid; gap: 10px; }
.card { background: #fff; border: 1.5px solid var(--line); border-radius: 22px; box-shadow: 0 10px 30px rgba(60, 80, 140, .12); padding: 14px; text-align: left; }
.card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.card-h b { display: block; font-size: 19px; }
.card small { color: var(--muted); font-weight: 700; font-size: 12.5px; }
.ic { font-size: 28px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: #f3f0ff; flex: none; }
.friends { background: linear-gradient(135deg, #fff, #fff4f8); }
.row { display: flex; gap: 8px; }
.row .btn { flex: 1; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card.mini { display: grid; gap: 2px; justify-items: start; cursor: pointer; transition: transform .1s; }
.card.mini:active, .btn:active, .cbtn:active, .fire:active { transform: scale(.96); }
.card.mini b { font-size: 16px; margin-top: 6px; }
.btn { border: 0; border-radius: 16px; padding: 14px 12px; font-weight: 900; font-size: 16.5px; cursor: pointer; }
.btn.primary { color: #fff; background: linear-gradient(135deg, #ff8fb8, #8b7cf6); box-shadow: 0 6px 16px rgba(139, 124, 246, .32); }
.btn.ghost { background: #fff; color: var(--violet); border: 1.5px solid var(--line); }
.btn.gold { color: #5a3a00; background: linear-gradient(135deg, #ffe08a, #ffc24b); }
.loadout { margin: 2px 0 0; text-align: center; font-size: 12.5px; color: #59607e; font-weight: 700; line-height: 1.6; }
.loadout span { display: inline-block; padding: 2px 8px; margin: 2px; border-radius: 99px; background: rgba(255, 255, 255, .8); border: 1px solid var(--line); }
@media (min-width: 900px) and (min-height: 640px) {
  .hero { padding-top: 10px; }
  .menu { max-width: 560px; }
}
/* 가로로 낮은 화면: 두 칸으로 */
@media (orientation: landscape) and (max-height: 560px) {
  #home { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; align-content: start; }
  .top { grid-column: 1 / -1; max-width: none; width: 100%; padding: 8px 14px 0; }
  .hero { align-self: start; }
  .logo { font-size: 40px; }
  .hero-art { max-width: 320px; }
  .menu { padding-top: 6px; }
}

/* ---------- 게임 화면 ---------- */
#play { background: #8fd3ff; touch-action: none; user-select: none; -webkit-user-select: none; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hud-top { position: absolute; left: 0; right: 0; top: 0; padding: calc(env(safe-area-inset-top) + 8px) 10px 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.turn { justify-self: start; display: flex; align-items: center; gap: 7px; padding: 6px 6px 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 14px rgba(60, 50, 110, .16); font-size: 14.5px; max-width: 100%; min-width: 0; border: 2px solid var(--pc, #fff); }
.turn .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--pc, #ccc); flex: none; }
.turn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; background: conic-gradient(var(--pc, #8b7cf6) calc(var(--k, 1) * 360deg), #d9d6e8 0); position: relative; font-size: 13px; }
.timer::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #3b3f58; z-index: 0; }
.timer { isolation: isolate; }
.timer.low::before { background: #e0567a; }
.timer span { position: relative; z-index: 1; }
.wind { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; justify-items: center; padding: 5px 12px; border-radius: 16px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 14px rgba(60, 50, 110, .16); min-width: 92px; }
.wind small { grid-column: 1 / -1; font-size: 10.5px; font-weight: 800; color: var(--muted); line-height: 1.1; }
.wind .arrow { display: block; width: 44px; height: 16px; position: relative; }
.wind .arrow i { position: absolute; top: 50%; height: 6px; margin-top: -3px; background: #5fb8ff; border-radius: 3px; }
.wind .arrow i::after { content: ''; position: absolute; top: -5px; border: 8px solid transparent; }
.wind .arrow.r i { left: 0; }
.wind .arrow.r i::after { right: -12px; border-left: 10px solid #5fb8ff; border-right: 0; }
.wind .arrow.l i { right: 0; }
.wind .arrow.l i::after { left: -12px; border-right: 10px solid #5fb8ff; border-left: 0; }
.wind b { font-size: 17px; font-weight: 900; min-width: 18px; }
.wind.none b { display: none; }
.wind.none .arrow { grid-column: 1 / -1; width: auto; font-size: 11px; font-weight: 800; color: var(--muted); height: auto; }
.hud-btns { justify-self: end; display: flex; gap: 6px; }
.hud-btns .icon-btn { width: 38px; height: 38px; font-size: 16px; }
.icon-btn.on { background: #ffe9a8; }
.players { position: absolute; left: 10px; right: 10px; top: calc(env(safe-area-inset-top) + 56px); display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }
.pchip { display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 99px; background: rgba(255, 255, 255, .86); font-size: 12px; font-weight: 800; box-shadow: 0 2px 8px rgba(60, 50, 110, .1); border: 2px solid transparent; transition: transform .2s; }
.pchip .n { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--pc); font-size: 11px; }
.pchip .hp { width: 34px; height: 5px; border-radius: 3px; background: #e6e3ef; overflow: hidden; }
.pchip .hp i { display: block; height: 100%; background: #4fd17d; }
.pchip.cur { border-color: var(--pc); transform: scale(1.08); background: #fff; }
.pchip.dead { opacity: .45; text-decoration: line-through; }
.pchip .nm { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banner { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); padding: 14px 26px; border-radius: 22px; background: rgba(255, 255, 255, .95); font-size: 24px; font-weight: 900; box-shadow: 0 14px 40px rgba(60, 50, 110, .25); border: 3px solid var(--pc, #8b7cf6); text-align: center; pointer-events: none; animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); white-space: nowrap; }
.banner small { display: block; font-size: 13px; color: var(--muted); font-weight: 800; margin-top: 2px; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
.hint { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 96px); transform: translateX(-50%); padding: 8px 14px; border-radius: 14px; background: rgba(47, 53, 80, .82); color: #fff; font-size: 13.5px; font-weight: 700; pointer-events: none; white-space: nowrap; }
.ctrl { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px calc(env(safe-area-inset-bottom) + 10px); display: flex; align-items: center; gap: 8px; justify-content: center; pointer-events: none; }
.ctrl > * { pointer-events: auto; }
.move { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cbtn { width: 54px; height: 50px; border-radius: 16px; border: 0; background: rgba(255, 255, 255, .95); font-size: 20px; color: var(--ink); box-shadow: 0 4px 12px rgba(60, 50, 110, .18); cursor: pointer; touch-action: none; }
.cbtn.held { background: #ffe9a8; }
.fuel { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .7); overflow: hidden; }
.fuel i { display: block; height: 100%; background: linear-gradient(90deg, #ffbf47, #ff8a3d); width: 100%; }
.weapon { display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; height: 58px; border-radius: 16px; border: 0; background: rgba(255, 255, 255, .95); box-shadow: 0 4px 12px rgba(60, 50, 110, .18); cursor: pointer; min-width: 0; text-align: left; }
.weapon svg { width: 44px; height: 32px; flex: none; }
.wtxt { display: grid; line-height: 1.15; }
.wtxt b { font-size: 14px; white-space: nowrap; }
.wtxt small { font-size: 11.5px; color: var(--muted); font-weight: 800; }
.aimtxt { display: grid; gap: 2px; padding: 6px 10px; border-radius: 14px; background: rgba(255, 255, 255, .88); font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.aimtxt b { color: var(--ink); font-size: 15px; }
.fire { width: 92px; height: 66px; border-radius: 22px; border: 0; color: #fff; font-weight: 900; font-size: 19px; background: radial-gradient(circle at 35% 30%, #ffb07a, #ff5c5c); box-shadow: 0 6px 0 #c23a3a, 0 10px 22px rgba(255, 92, 92, .35); cursor: pointer; }
.fire:active { box-shadow: 0 2px 0 #c23a3a; transform: translateY(4px); }
.wait { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 16px); transform: translateX(-50%); padding: 9px 16px; border-radius: 14px; background: rgba(255, 255, 255, .92); font-weight: 800; font-size: 14px; box-shadow: 0 4px 14px rgba(60, 50, 110, .16); white-space: nowrap; pointer-events: none; }
.wpick { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 88px); transform: translateX(-50%); width: min(360px, calc(100% - 20px)); padding: 10px; border-radius: 20px; background: #fff; box-shadow: 0 16px 50px rgba(60, 50, 110, .3); display: grid; gap: 6px; }
.wpick h4 { margin: 2px 4px 4px; font-size: 14px; color: var(--muted); }
.wopt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; text-align: left; }
.wopt svg { width: 50px; height: 36px; flex: none; }
.wopt b { display: block; font-size: 15px; }
.wopt small { color: var(--muted); font-size: 12px; font-weight: 700; }
.wopt .cnt { margin-left: auto; font-weight: 900; font-size: 14px; color: var(--violet); white-space: nowrap; }
.wopt.on { border-color: var(--violet); background: #f6f3ff; }
.wopt:disabled { opacity: .4; }
/* 휴대폰 세로: 아래 줄 정리 */
@media (max-width: 480px) {
  .ctrl { gap: 6px; padding-left: 6px; padding-right: 6px; flex-wrap: wrap; }
  .aimtxt { position: absolute; right: 8px; bottom: calc(env(safe-area-inset-bottom) + 86px); grid-auto-flow: column; gap: 10px; }
  .cbtn { width: 50px; }
  .weapon { flex: 1; max-width: 150px; }
  .fire { width: 84px; }
  .wind { min-width: 80px; padding: 5px 8px; }
  .turn { font-size: 13px; padding-left: 9px; }
  .hint { bottom: calc(env(safe-area-inset-bottom) + 122px); }
}
/* 가로로 낮은 화면 */
@media (max-height: 460px) {
  .players { top: calc(env(safe-area-inset-top) + 52px); }
  .cbtn { height: 44px; }
  .weapon { height: 50px; }
  .fire { height: 56px; }
}

/* ---------- 창 안 (게임 쪽) ---------- */
.seg-l { display: grid; gap: 6px; margin: 10px 0; font-size: 13px; font-weight: 800; color: var(--muted); }
.howto { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.howto li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 9px 11px; border-radius: 14px; background: #faf9fd; border: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.howto li span { font-size: 22px; text-align: center; }
.keys { margin-top: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.7; text-align: center; }
.keys kbd { display: inline-block; padding: 0 6px; border-radius: 6px; border: 1px solid #d6d2e6; background: #fff; font: inherit; font-weight: 800; color: var(--ink); }
.result { text-align: center; }
.result h2 { margin: 4px 0; font-size: 30px; }
.result .crown { font-size: 48px; line-height: 1; }
.rank { display: grid; gap: 6px; margin: 12px 0; text-align: left; }
.rank div { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 14px; background: #faf9fd; border: 1px solid var(--line); border-left: 5px solid var(--pc); font-weight: 800; }
.rank em { font-style: normal; width: 34px; color: var(--muted); }
.rank .me { background: #fff7e0; }
.gain { display: inline-flex; gap: 14px; padding: 10px 16px; border-radius: 16px; background: #fff6d6; font-weight: 900; color: #8a6200; }
.science { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: #e9f6ff; color: #2c5a85; font-size: 13px; line-height: 1.55; text-align: left; }