/* ============================================================
   決斷之海 1942 — classic tactical HUD for campaign battles
   Full-map command layout, formation strip, mini-map, portrait.
   ============================================================ */
.classic-only { display: none !important; }

.game-screen.classic-hud { background: #02090b; }
.game-screen.classic-hud .game-main { grid-template-columns: minmax(0, 1fr); }
.game-screen.classic-hud .map-hud-left { display: none; }
.game-screen.classic-hud .map-legend { left: 16px; bottom: 14px; }
.game-screen.classic-hud .tac-objectives.classic-only { display: flex !important; }
.game-screen.classic-hud .command-bar .classic-only { display: contents !important; }
.game-screen.classic-hud .command-bar {
  flex-basis: 150px;
  height: 150px;
  display: grid;
  grid-template-columns: 186px 198px minmax(260px, 1fr) 154px auto;
  grid-auto-rows: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(18, 31, 32, .99), rgba(5, 13, 15, .995)),
    repeating-linear-gradient(90deg, transparent 0 51px, rgba(255,255,255,.015) 51px 52px);
  border-top: 1px solid rgba(174, 198, 185, .18);
  box-shadow: 0 -10px 28px rgba(0,0,0,.35);
}
.game-screen.classic-hud .command-bar::before {
  content: "";
  position: absolute;
  left: 18px; right: 18px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(208,177,108,.35), transparent);
}
.game-screen.classic-hud .command-hint,
.game-screen.classic-hud .selection-summary { display: none; }
.game-screen.classic-hud .command-actions {
  padding: 13px 16px;
  border-left: 1px solid rgba(174,198,185,.13);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 7px;
  min-width: 150px;
}
.game-screen.classic-hud .command-actions #btn-next-ship { display: none; }
.game-screen.classic-hud .command-actions .btn {
  min-width: 0;
  min-height: 38px;
  width: 100%;
  font-size: 10px;
  letter-spacing: .1em;
}
.game-screen.classic-hud .command-actions .end-turn-btn { min-width: 0 !important; min-height: 46px; }
.game-screen.classic-hud .command-actions .end-turn-btn small { font-size: 8px; }

.tac-objectives {
  position: absolute;
  z-index: 7;
  top: 14px;
  left: 16px;
  width: min(330px, 45%);
  padding: 9px 12px 10px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(2, 10, 12, .72), rgba(2, 10, 12, .15));
  border-left: 2px solid rgba(125, 217, 139, .5);
  text-shadow: 0 2px 5px rgba(0,0,0,.85);
}
.tac-objectives .sector-kicker { color: #a9e5b4; opacity: .8; }
.tac-objectives ul { list-style: none; margin-top: 5px; }
.tac-objectives li { display: flex; align-items: center; gap: 6px; font-size: 9px; line-height: 1.55; color: rgba(236, 239, 220, .86); letter-spacing: .02em; }
.tac-objectives li span { width: 4px; height: 4px; background: #7fd794; transform: rotate(45deg); flex: 0 0 auto; }
.tac-objectives li b { margin-left: auto; font-family: Georgia, serif; font-weight: 400; color: #e4d5a8; font-size: 9px; }
.tac-objectives li.done span { background: #d6c180; }
.tac-objectives li.done { color: rgba(221, 214, 180, .7); }
.tac-objectives li.tac-mission-heading {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.3;
  color: #f4eedf;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.tac-objectives li.tac-objective-turn { display: block; margin-top: 5px; font-size: 7px; letter-spacing: .12em; color: rgba(165, 190, 177, .55); }

.tac-mini-wrap {
  padding: 12px 10px 10px;
  border-right: 1px solid rgba(174,198,185,.12);
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.tac-mini-wrap canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 196 / 108;
  border: 1px solid rgba(174, 198, 185, .2);
  box-shadow: inset 0 0 12px rgba(0,0,0,.4);
  background: #06171c;
}
.tac-mini-wrap > span { font-family: Georgia, var(--serif); font-size: 6px; letter-spacing: .18em; color: rgba(190, 210, 198, .4); text-transform: uppercase; }
.tac-flagship {
  border-right: 1px solid rgba(174,198,185,.12);
  padding: 12px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.tac-portrait {
  width: 90px;
  height: 72px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: rgba(227, 231, 209, .85);
  background:
    linear-gradient(140deg, rgba(41, 63, 61, .6), rgba(4, 15, 17, .45)),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(185,215,200,.04) 15px 16px),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(185,215,200,.04) 15px 16px);
  border: 1px solid rgba(184, 202, 188, .18);
}
.tac-portrait svg { width: 82px; height: 54px; filter: drop-shadow(0 4px 5px rgba(0,0,0,.35)); }
.tac-portrait.has-photo { overflow: hidden; }
.tac-portrait.has-photo img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.72) contrast(1.04); }
.tac-flagship-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tac-flagship-copy span { font-size: 6px; letter-spacing: .17em; color: #b09a64; }
.tac-flagship-copy strong { font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: .08em; color: #e7e4d3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tac-flagship-copy small { font-size: 7px; color: #7f9690; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tac-formation-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(174,198,185,.12);
  padding: 9px 11px 8px;
}
.tac-formation-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 4px; }
.tac-formation-head span { font-size: 7px; letter-spacing: .16em; color: #b29b66; }
.tac-formation-head b { font-size: 6px; letter-spacing: .06em; color: #67807a; font-weight: 400; }
.tac-formation {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
  padding-bottom: 1px;
  scrollbar-width: thin;
  scrollbar-color: rgba(199,168,103,.2) transparent;
}
.tac-formation::-webkit-scrollbar { height: 3px; }
.tac-formation::-webkit-scrollbar-thumb { background: rgba(199,168,103,.2); }
.tac-ship-chip {
  flex: 0 0 98px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(174,198,185,.12);
  background: rgba(255,255,255,.018);
  text-align: left;
  transition: background .18s, border-color .18s;
}
.tac-ship-chip:hover { border-color: rgba(199,168,103,.32); background: rgba(199,168,103,.05); }
.tac-ship-chip.is-selected { border-color: rgba(222,188,112,.55); background: rgba(199,168,103,.08); }
.tac-ship-chip.is-sunk { opacity: .3; filter: grayscale(1); }
.tac-ship-icon { width: 36px; height: 28px; flex: 0 0 auto; color: #c0c9b7; display: grid; place-items: center; }
.tac-ship-icon svg { width: 35px; height: 25px; }
.tac-ship-chip.is-selected .tac-ship-icon { color: #e5cf98; }
.tac-ship-copy { flex: 1; min-width: 0; position: relative; padding-bottom: 4px; }
.tac-ship-copy b { display: block; font-family: var(--serif); font-size: 10px; font-weight: 600; color: #dce1d1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tac-ship-copy small { display: block; font-size: 6px; color: #6c827c; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tac-ship-copy > i { display: block; height: 2px; position: absolute; left: 0; bottom: 0; background: #75b895; max-width: 100%; }
.tac-dial-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 9px;
  min-width: 0;
}
.tac-dial { width: 86px; height: 86px; position: relative; color: rgba(211, 183, 112, .6); display: grid; place-items: center; }
.tac-dial svg { width: 76px; height: 76px; }
.tac-dial > span {
  position: absolute;
  font-family: Georgia, serif;
  font-size: 20px;
  color: #d9d0b3;
  font-weight: 500;
}
.tac-console-links { display: flex; gap: 1px; width: 100%; border: 1px solid rgba(174,198,185,.13); }
.tac-console-links button { flex: 1; padding: 4px 2px; color: #94a8a0; font-size: 7px; letter-spacing: .04em; }
.tac-console-links button + button { border-left: 1px solid rgba(174,198,185,.1); }
.tac-console-links button:hover { color: #e5d6ac; background: rgba(199,168,103,.07); }

/* side drawers on wide screens for the classic HUD */
@media (min-width: 1101px) {
  .game-screen.classic-hud .side-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 380px;
    z-index: 45;
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
    box-shadow: 18px 0 50px rgba(0,0,0,.42);
  }
  .game-screen.classic-hud .fleet-panel { left: 0; transform: translateX(-105%); border-right: 1px solid var(--line); }
  .game-screen.classic-hud .intel-panel { right: 0; left: auto; transform: translateX(105%); border-left: 1px solid var(--line); box-shadow: -18px 0 50px rgba(0,0,0,.42); }
  .game-screen.classic-hud.show-fleet .fleet-panel,
  .game-screen.classic-hud.show-intel .intel-panel { transform: translateX(0); }
  .game-screen.classic-hud .panel-close { display: block; }
  .game-screen.classic-hud .sheet-backdrop {
    position: absolute;
    inset: 0;
    z-index: 40;
    background: rgba(1,7,9,.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
  }
  .game-screen.classic-hud.show-fleet .sheet-backdrop,
  .game-screen.classic-hud.show-intel .sheet-backdrop { opacity: 1; pointer-events: auto; }
  .game-screen.classic-hud .mobile-panel-nav { display: none; }
}

@media (max-width: 1100px) {
  .game-screen.classic-hud .command-bar {
    flex-basis: 124px;
    height: 124px;
    grid-template-columns: 150px 170px minmax(200px, 1fr) 130px auto;
  }
  .game-screen.classic-hud .tac-mini-wrap { padding: 9px 7px; }
  .game-screen.classic-hud .tac-flagship { padding: 9px 7px; gap: 5px; }
  .tac-portrait { width: 70px; height: 58px; }
  .tac-portrait svg { width: 64px; height: 44px; }
  .tac-flagship-copy strong { font-size: 14px; }
  .game-screen.classic-hud .command-actions { min-width: 124px; padding: 9px 10px; }
  .tac-dial { width: 70px; height: 70px; }
  .tac-dial svg { width: 62px; height: 62px; }
  .tac-dial > span { font-size: 17px; }
  .tac-console-links { display: none; }
  .game-screen.classic-hud .command-actions .end-turn-btn { min-height: 39px; }
}
@media (max-width: 900px) {
  .game-screen.classic-hud .command-bar {
    flex-basis: 108px;
    height: 108px;
    grid-template-columns: 135px minmax(0, 1fr) 110px auto;
  }
  .game-screen.classic-hud .tac-mini-wrap { display: none !important; }
  .tac-objectives { width: min(300px, 60%); padding: 7px 9px; }
  .tac-objectives li.tac-mission-heading { font-size: 15px; }
}
@media (max-width: 760px) {
  .game-screen.classic-hud .tac-objectives.classic-only { display: flex !important; top: 9px; left: 9px; width: min(260px, 70%); }
  .tac-objectives { padding: 6px 8px; border-left-width: 1px; }
  .tac-objectives li { font-size: 8px; }
  .tac-objectives li.tac-mission-heading { font-size: 14px; }
  .tac-objectives li.tac-objective-turn { display: none; }
  .game-screen.classic-hud .command-bar {
    flex-basis: 90px;
    height: 90px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 8px;
  }
  .game-screen.classic-hud .tac-flagship,
  .game-screen.classic-hud .tac-dial-wrap { display: none !important; }
  .game-screen.classic-hud .tac-formation-wrap { padding: 7px 4px 5px; border-right: 0; }
  .tac-formation { gap: 3px; }
  .tac-ship-chip { flex-basis: 89px; padding: 4px; }
  .tac-ship-icon { width: 31px; }
  .tac-ship-icon svg { width: 29px; height: 22px; }
  .tac-ship-copy b { font-size: 9px; }
  .game-screen.classic-hud .command-actions {
    min-width: 98px;
    padding: 7px 0 7px 7px;
    justify-content: center;
  }
  .game-screen.classic-hud .command-actions .end-turn-btn { min-height: 38px; font-size: 9px; }
  .game-screen.classic-hud .map-legend { display: none; }
  .game-screen.classic-hud .tac-mini-wrap,
  .game-screen.classic-hud .tac-dial-wrap,
  .game-screen.classic-hud .tac-flagship { display: none !important; }
}

.game-screen.campaign-battle #game-back { visibility: hidden; }

.game-screen.classic-hud .tac-console-links button { font-size: 8px; padding: 5px 2px; color: #b4c4ba; }
.game-screen.classic-hud .tac-console-links { border-color: rgba(199,168,103,.25); background: rgba(4,14,16,.4); }

.tac-advisor {
  position: absolute;
  z-index: 7;
  top: 52px;
  right: 16px;
  width: min(292px, 34%);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 9px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(5, 17, 19, .84), rgba(5, 17, 19, .48));
  border: 1px solid rgba(183, 204, 189, .14);
  border-right: 2px solid rgba(199,168,103,.35);
  backdrop-filter: blur(4px);
}
.tac-advisor-portrait {
  width: 35px; height: 43px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(199,168,103,.25);
  background: rgba(17,31,31,.7);
  display: grid;
  place-items: center;
}
.tac-advisor-portrait svg { width: 38px; height: 49px; margin-top: 5px; }
.tac-advisor-portrait img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.78) contrast(1.04); }
.tac-advisor-copy { min-width: 0; }
.tac-advisor-copy span { display: block; font-size: 6px; letter-spacing: .14em; color: #b9a569; margin-bottom: 3px; }
.tac-advisor-copy p { color: rgba(224, 229, 212, .78); font-family: var(--serif); font-size: 9px; line-height: 1.6; letter-spacing: .02em; }
.tac-advisor-copy.is-speaking p { animation: advisorLine .5s ease both; }
@keyframes advisorLine { from { opacity: .2; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.tac-objectives li.tac-battle-time {
  display: block;
  font-family: Georgia, serif;
  font-size: 7px;
  letter-spacing: .09em;
  color: rgba(205, 188, 145, .58);
  margin-bottom: 3px;
}
@media (max-width: 900px) {
  .tac-advisor { top: 46px; right: 10px; width: 235px; padding: 6px 7px; }
  .tac-advisor-portrait { width: 28px; height: 35px; }
  .tac-advisor-portrait svg { width: 31px; height: 41px; }
  .tac-advisor-copy p { font-size: 8px; }
}
@media (max-width: 760px) {
  .tac-advisor { display: none !important; }
}

.game-screen.classic-hud .tac-advisor.classic-only { display: flex !important; }

@media (max-width: 360px) {
  .game-screen.classic-hud .tac-advisor.classic-only { display: none !important; }
  .tac-objectives { width: 84% !important; }
}