body.fortress-active{background-color:#000;}.fortress-overlay{background-color:#000 !important;position:absolute;top:0;left:0;width:100%;height:100%;z-index:50;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:Arial,sans-serif;color:#fff}.fortress-overlay.hidden{display:none}.fortress-overlay canvas{width:100%;height:100%;object-fit:contain;box-shadow:0 0 60px rgba(0,0,0,0.5)}.fortress-hud,.fortress-controls,.fortress-lobby{position:absolute;z-index:2}.fortress-hud{top:20px;left:20px;right:20px;display:flex;align-items:start;justify-content:space-between;gap:10px;text-shadow:0 2px 5px #000}.f-turn{font-size:18px;text-align:center}.f-turn strong{font-size:28px;color:#ffe168}.f-wind{font-size:17px}.f-hp{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.f-hp span{padding:5px 8px;border-left:4px solid var(--c);background:#0008;border-radius:4px;font-size:12px}.fortress-controls{pointer-events:none}.f-ctrl-bar{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:30px;background:rgba(0,0,0,0.5);padding:8px 25px;border-radius:20px;color:#fff;font-size:13px;align-items:center;pointer-events:auto;z-index:25}.f-ctrl-bar label{display:flex;align-items:center;gap:10px;font-weight:bold}.f-ctrl-bar input{margin:0;height:6px}.f-ctrl-bar .f-angle{width:120px;accent-color:#8276ff}.f-ctrl-bar .f-power{width:200px;accent-color:#ff4757}.f-angle-v{display:inline-block;width:30px}.f-power-v{display:inline-block;width:35px}.f-left-bar{position:absolute;bottom:15px;left:15px;display:flex;gap:10px;pointer-events:auto;z-index:25}.f-right-bar{position:absolute;bottom:15px;right:15px;display:flex;gap:10px;pointer-events:auto;z-index:25}.f-left-bar button{display:none;padding:6px 12px;background:#f39c12;border:none;border-radius:6px;color:#fff;font-weight:bold;cursor:pointer;font-size:12px;opacity:0.85}.f-right-bar button{padding:6px 12px;background:#5e50db;border:none;border-radius:6px;color:#fff;font-weight:bold;cursor:pointer;font-size:12px;opacity:0.85}.f-right-bar .f-surrender{background:#a63d4f}.f-mpad{display:none;position:absolute;bottom:70px;left:0;width:100%;justify-content:space-between;padding:0 30px;box-sizing:border-box;pointer-events:none;z-index:30;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;touch-action:none}.f-dpad{display:grid;grid-template-columns:50px 50px 50px;grid-template-rows:50px 50px 50px;gap:5px;pointer-events:auto}.f-dpad button{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;touch-action:none;background:rgba(255,255,255,0.2);border:2px solid rgba(255,255,255,0.4);border-radius:10px;color:white;font-weight:bold;font-size:20px}.f-fire-btn-wrap{display:flex;align-items:flex-end;pointer-events:auto;margin-right:22px;padding-bottom:16px;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;touch-action:none}.f-fire-btn-wrap button{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;touch-action:none;width:80px;height:80px;border-radius:50%;background:rgba(255,50,50,0.5);border:3px solid rgba(255,100,100,0.8);color:white;font-weight:bold;font-size:16px}.fortress-lobby button{border:0;border-radius:7px;padding:9px 13px;color:#fff;background:#5e50db;font-weight:bold;cursor:pointer}.fortress-lobby .f-leave{background:#a63d4f}.fortress-lobby{display:flex;flex-direction:column;align-items:center;text-align:center;width:min(440px,90%);padding:30px;border:1px solid #8276ff;border-radius:16px;background:#10152dea;box-shadow:0 10px 60px #000;max-height:90%;overflow-y:auto}.fortress-lobby h2{margin:0;color:#ffe168}.fortress-lobby p{color:#c8cae6;font-size:13px}.fortress-player-list{width:100%;margin:10px 0;max-height:40vh;overflow-y:auto}.fortress-lobby-player{display:flex;gap:8px;align-items:center;border-left:4px solid;padding:9px;background:#ffffff0d;margin:5px 0;text-align:left}.fortress-lobby-player span{width:12px;height:12px;border-radius:50%}.fortress-lobby-player em{margin-left:auto;font-size:12px;color:#7dff9b;font-style:normal}.fortress-lobby .f-ready{margin-bottom:8px;background:#287e5a}@media(max-width:850px), (orientation: landscape) and (max-height: 500px){.fortress-hud{top:8px;left:8px;right:8px}.f-hp{max-width:45%}.f-ctrl-bar{bottom:8px;gap:10px;padding:5px 12px}.f-ctrl-bar label{display:flex;flex-direction:column;font-size:11px;gap:2px;white-space:nowrap}.f-ctrl-bar .f-angle{width:60px}.f-ctrl-bar .f-power{width:80px}.f-left-bar{bottom:8px;left:8px}.f-right-bar{bottom:8px;right:8px}.f-left-bar button, .f-right-bar button{padding:6px 8px;font-size:11px}.fortress-lobby{padding:10px;max-height:100%;width:100%;border:none;border-radius:0;box-sizing:border-box}.fortress-lobby h2{font-size:16px;margin-bottom:5px}.fortress-lobby p{font-size:11px;margin-bottom:5px}.fortress-player-list{margin:5px 0;max-height:50vh}.fortress-lobby-player{padding:6px;font-size:13px}.fortress-lobby-player em{font-size:10px}.f-fs-btn{top:5px;right:5px;padding:8px 12px;font-size:14px;font-weight:bold}.f-mpad{bottom:5px;padding:0 15px;align-items:flex-end;}.f-left-bar{bottom:55px;left:auto;right:110px;z-index:35}.f-left-bar button{display:none !important;width:60px;height:60px;border-radius:50%;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.2;font-size:10px !important;box-shadow:0 0 10px rgba(0,0,0,0.5)}.f-fire-btn-wrap{align-items:center;margin-right:42px;padding-bottom:44px}}

@keyframes turnPulse { 0% { box-shadow: 0 0 5px 0px rgba(255, 235, 59, 0.1); border-color: rgba(255,235,59, 0.3); } 50% { box-shadow: 0 0 15px 5px rgba(255, 235, 59, 0.6); border-color: rgba(255,235,59, 1); } 100% { box-shadow: 0 0 5px 0px rgba(255, 235, 59, 0.1); border-color: rgba(255,235,59, 0.3); } } .f-current-turn-hp { animation: turnPulse 1.2s infinite; border: 1px solid rgba(255,235,59, 0.8); border-radius: 8px; background: rgba(255,255,255,0.15); }
.fortress-fullscreen { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; max-width: 100% !important; max-height: 100% !important; z-index: 99999 !important; background: rgba(0, 0, 0, 0.9) !important; }
.f-fs-btn { position: absolute; top: 10px; right: 10px; z-index: 10; background: rgba(0,0,0,0.5); color: #fff; border: 1px solid #fff; border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 12px; }




/* ─────────────────────────────────────────────────────────────────────────
   HUD 시각 품질 업그레이드 (2026-07)

   🚫 backdrop-filter / filter 금지 (성능 회귀로 제거된 이력 있음)
   HUD는 매 프레임 다시 그려지는 캔버스 **위에** 떠 있다. 여기에 backdrop-filter를
   걸면 컴포지터가 프레임마다 배경 영역을 스냅샷 떠서 블러를 다시 계산해야 하고,
   체력 칩(.f-hp span)은 인원수만큼 있으므로 요소 9개 이상에 대해 이 작업이 반복된다.
   실제로 PC에서도 눈에 띄게 프레임이 떨어졌다. JS 드로우 비용은 0.2~0.5ms로 멀쩡했고
   범인은 전적으로 컴포지터 쪽이었음 — 유리질 느낌은 반투명 그라디언트로만 낼 것.

   ⚠️ 색·테두리·그림자·타이포만 건드린다. position/display/width 등 레이아웃 속성은
   위쪽 모바일 미디어쿼리가 잡고 있으므로 덮어쓰지 말 것.
   ───────────────────────────────────────────────────────────────────────── */
.fortress-hud { text-shadow: 0 2px 6px rgba(0,0,0,.85); }

/* 턴 표시 */
.f-turn {
  background: linear-gradient(180deg, rgba(18,22,42,.86), rgba(10,12,26,.78));
  border: 1px solid rgba(255,225,104,.30);
  border-radius: 12px;
  padding: 7px 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
  letter-spacing: .2px;
}
.f-turn strong { color: #ffd54a; text-shadow: 0 2px 4px rgba(0,0,0,.7); }

/* 풍향/풍속 */
.f-wind {
  background: linear-gradient(180deg, rgba(18,22,42,.82), rgba(10,12,26,.74));
  border: 1px solid rgba(160,180,255,.24);
  border-radius: 12px;
  padding: 7px 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
}

/* 플레이어 체력 칩 — 좌측 컬러 바가 은은하게 발광 */
.f-hp span {
  background: linear-gradient(180deg, rgba(16,20,38,.88), rgba(8,10,22,.80));
  border-radius: 8px;
  border-left-width: 5px;
  padding: 6px 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07),
              -3px 0 10px -4px var(--c);
  font-weight: 700;
  letter-spacing: .2px;
}

/* 현재 턴 하이라이트 */
@keyframes turnPulse {
  0%,100% { box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 0 0 0 rgba(255,213,74,.35);
            border-color: rgba(255,213,74,.55); }
  50%     { box-shadow: 0 4px 18px rgba(0,0,0,.5), 0 0 20px 5px rgba(255,213,74,.45);
            border-color: rgba(255,224,120,1); }
}
.f-current-turn-hp {
  border: 1px solid rgba(255,213,74,.8);
  background: linear-gradient(180deg, rgba(52,44,16,.88), rgba(26,21,8,.80));
}

/* 하단 조작 바 */
.f-ctrl-bar {
  background: linear-gradient(180deg, rgba(16,20,40,.88), rgba(8,10,22,.80));
  border: 1px solid rgba(140,150,220,.24);
  border-radius: 22px;
  box-shadow: 0 10px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.09);
}
.f-ctrl-bar input { cursor: pointer; }

/* 버튼 공통 — 입체 그라디언트 + 호버/액티브 반응 */
.f-left-bar button, .f-right-bar button, .fortress-lobby button {
  background-image: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0));
  box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .10s ease, box-shadow .10s ease;
  opacity: 1;
}
.f-left-bar button:hover, .f-right-bar button:hover, .fortress-lobby button:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.f-left-bar button:active, .f-right-bar button:active, .fortress-lobby button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 2px 5px rgba(0,0,0,.3);
}

/* 모바일 D-패드 / 발사 버튼 */
.f-dpad button {
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.10));
  box-shadow: 0 4px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.32);
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.f-dpad button:active { background: rgba(255,255,255,.42); transform: scale(.94); }
.f-fire-btn-wrap button {
  background: radial-gradient(circle at 50% 32%, rgba(255,130,120,.95), rgba(200,30,40,.85));
  box-shadow: 0 8px 22px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.35);
  text-shadow: 0 2px 5px rgba(0,0,0,.65);
  letter-spacing: .5px;
}
.f-fire-btn-wrap button:active { transform: scale(.93); }

/* 로비 패널 */
.fortress-lobby {
  background: linear-gradient(180deg, rgba(20,26,52,.96), rgba(10,13,30,.97));
  border: 1px solid rgba(130,118,255,.45);
  box-shadow: 0 18px 70px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07);
}
.fortress-lobby-player {
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}