/* SAFE TO EDIT: Pre-Beta interface placement and presentation. Gameplay values live in the JS config files. */

.game-notifications {
  position: fixed;
  top: calc(84px + env(safe-area-inset-top));
  left: 50%;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: min(390px, calc(100vw - 24px));
  pointer-events: none;
  transform: translateX(-50%);
}

.game-notification {
  --notice-color: #60f0bd;
  padding: 3px 8px;
  color: var(--notice-color);
  font: 750 13px/1.45 Inter, sans-serif;
  text-align: center;
  text-shadow: 0 2px 4px #000, 0 0 12px rgba(0,0,0,.95);
  animation: game-notification-in .24s ease both;
  transition: opacity .28s ease, transform .28s ease;
}
.game-notification[data-type="gold"] { --notice-color: #f7bf64; }
.game-notification[data-type="xp"] { --notice-color: #70b9ff; }
.game-notification[data-type="pearls"] { --notice-color: #8ce9ff; }
.game-notification[data-type="error"] { --notice-color: #ff7569; }
.game-notification[data-type="success"] { --notice-color: #60f0bd; }
.game-notification.is-leaving { opacity: 0; transform: translateY(-8px) scale(.98); }
.game-notification strong { color:#fff0cc;font-weight:900; }
@keyframes game-notification-in { from { opacity:0;transform:translateY(-10px) scale(.98) } to { opacity:1;transform:none } }

.minimap-history-button {
  position: absolute;
  top: 159px;
  right: calc(100% + 8px);
  width: 39px;
  height: 34px;
  border: 1px solid rgba(218,176,73,.52);
  border-radius: 7px;
  background: linear-gradient(180deg,rgba(74,58,30,.96),rgba(13,23,27,.96));
  color: #ffe1a0;
  box-shadow: 0 9px 24px rgba(0,0,0,.35);
  cursor: pointer;
  font: 850 10px Inter,sans-serif;
}
.minimap-history-button:hover { border-color:#ffe1a0;filter:brightness(1.14) }

.player-history-window { width:min(720px,calc(100vw - 28px));max-height:min(720px,calc(100dvh - 28px));overflow:hidden;border:2px solid rgba(191,139,67,.75);border-radius:10px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 8px),linear-gradient(145deg,#160d08,#24180e 46%,#071216);box-shadow:0 30px 100px rgba(0,0,0,.76),inset 0 0 55px rgba(0,0,0,.64);color:#f4ead7}
.player-history-window>header{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid rgba(218,172,84,.38);background:linear-gradient(#202528,#070909 70%,#2a170c)}.player-history-window header span{color:#60f0bd;font:800 8px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase}.player-history-window h2{margin:4px 0 0;color:#ffe2a0;font:850 25px Georgia,serif;text-transform:uppercase}.player-history-window header button{width:35px;height:35px;border:1px solid rgba(255,214,135,.48);border-radius:6px;background:linear-gradient(#773126,#35120f);color:#ffe5a5;cursor:pointer;font:900 23px/1 sans-serif}.player-history-window>p{margin:0;padding:9px 16px;border-bottom:1px solid rgba(218,172,84,.2);color:#b9aa91;font:650 10px/1.4 Inter,sans-serif}.player-history-list{display:grid;gap:7px;max-height:570px;padding:10px;overflow:auto;scrollbar-color:#896330 #140d08;scrollbar-width:thin}.player-history-entry{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;padding:11px;border:1px solid rgba(216,172,85,.24);border-left:3px solid #60f0bd;border-radius:6px;background:linear-gradient(110deg,rgba(13,22,23,.96),rgba(42,27,14,.82))}.player-history-time{color:#8ce9ff;font:850 11px Inter,sans-serif}.player-history-copy strong,.player-history-copy span{display:block}.player-history-copy strong{color:#fff0cd;font:850 10px Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase}.player-history-copy span{margin-top:3px;color:#d8cbb4;font:650 10px/1.4 Inter,sans-serif}.player-history-rewards{color:#ffe09a;font:800 10px/1.45 Inter,sans-serif;text-align:right;white-space:pre-line}.player-history-empty{display:grid;place-items:center;min-height:240px;color:#9f927c;font:700 11px Inter,sans-serif;text-align:center}

@media(max-width:620px){.game-notifications{top:calc(68px + env(safe-area-inset-top));width:min(330px,calc(100vw - 18px))}.minimap-history-button{top:142px;right:calc(100% + 5px);width:34px;height:30px}.player-history-entry{grid-template-columns:56px 1fr}.player-history-rewards{grid-column:2;text-align:left}}

.site-footer {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  width: min(760px, calc(100vw - 24px));
  padding: 9px 14px;
  border: 1px solid rgba(247, 191, 100, .25);
  border-radius: 10px;
  background: rgba(4, 19, 26, .88);
  color: #a9bfbd;
  font: 700 11px/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

body:has(#landingScreen.is-hidden) .site-footer { display: none; }
.site-footer a { padding: 5px 8px; border-radius: 6px; color: #ffe4a8; text-decoration: none; }
.site-footer .patch-notes-link { border: 1px solid rgba(96, 240, 189, .35); color: #60f0bd; }
.footer-server-status.is-online { color: #60f0bd; }
.footer-server-status.is-offline { color: #ff8f73; }
.footer-server-status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #f7bf64; box-shadow: 0 0 8px currentColor; }
.footer-server-status.is-online::before { background: #60f0bd; }
.footer-server-status.is-offline::before { background: #ef605b; }
.site-footer a:hover { background: rgba(96, 240, 189, .12); }

.mini-side-tools {
  position: absolute;
  top: 42px;
  right: calc(100% + 8px);
  display: grid;
  grid-template-columns: 39px;
  gap: 5px;
}

.mini-side-tools button {
  width: 39px;
  height: 34px;
  padding: 0;
  border-color: rgba(218, 176, 73, .48);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(60, 48, 27, .94), rgba(13, 23, 27, .96));
  color: #ffe1a0;
  cursor: pointer;
  font: 850 10px Inter, sans-serif;
}
.mini-side-tools button:hover { border-color:#ffe1a0;filter:brightness(1.14) }

.minimap-logout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 29px;
  margin-top: 6px;
  border: 1px solid rgba(255, 106, 94, .44);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(92, 30, 28, .8), rgba(30, 15, 17, .92));
  color: #ffd0c9;
  cursor: pointer;
  font: 800 10px/1 Inter, ui-sans-serif, system-ui, sans-serif;
}

.logout-countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  background: radial-gradient(circle, rgba(4, 24, 31, .68), rgba(0, 5, 9, .12) 55%);
  color: #fff2c5;
  pointer-events: none;
  text-shadow: 0 4px 25px #000;
}
.logout-countdown-overlay.is-hidden { display: none; }
.logout-countdown-overlay strong { max-width:min(780px,calc(100vw - 36px));font:950 clamp(20px,4vw,40px)/1.18 Inter,sans-serif;letter-spacing:.08em;text-align:center; }
.logout-countdown-overlay span { color: #60f0bd; font: 950 clamp(84px, 17vw, 190px)/1 Inter, sans-serif; }

.server-panel {
  position: fixed;
  left: 54px;
  bottom: 16px;
  z-index: 8;
  width: min(330px, calc(100vw - 28px));
  border: 1px solid rgba(96, 240, 189, .28);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(5, 18, 24, .92);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  backdrop-filter: blur(14px);
}
.server-panel.is-hidden { display: none; }
.server-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px; color: #ffe4a8; font-size: 11px; text-transform: uppercase; }
.server-panel-head button { width: 27px; height: 23px; border: 1px solid rgba(247,191,100,.3); border-radius: 5px; background: #0a2028; color: #ffe4a8; cursor: pointer; }
.server-panel-tabs { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.server-panel-tabs button { padding: 8px; border: 0; background: rgba(0,0,0,.13); color: #8fa7a6; cursor: pointer; font: 750 10px Inter, sans-serif; }
.server-panel-tabs button.is-active { background: rgba(96,240,189,.1); color: #60f0bd; box-shadow: inset 0 -2px #60f0bd; }
.server-tab-panel { min-height: 78px; }
.server-tab-panel.is-hidden { display: none; }
.server-panel .admin-activity-list,
.server-panel .admin-online-list { max-height: 146px; padding: 8px 10px; overflow: auto; }
.server-panel.is-collapsed .server-panel-tabs,
.server-panel.is-collapsed .server-tab-panel { display: none; }

.mission-list,
.world-ranking-list { display:grid;gap:7px;max-height:min(55vh,460px);margin:12px 0;padding:4px;overflow:auto; }
.mission-list article,
.world-ranking-row { display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid rgba(218,176,73,.25);border-radius:6px;background:rgba(3,15,20,.62);color:#c9d8d4;font:700 11px Inter,sans-serif; }
.mission-list article { grid-template-columns:minmax(0,1fr); }
.mission-list strong,.world-ranking-row strong { color:#ffe1a0; }
.progression-modal { width:min(720px,calc(100vw - 28px)); }
.mission-tabs { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:10px 0; }
.mission-tabs button { min-height:38px;border:1px solid rgba(218,176,73,.3);border-radius:6px;background:#081b23;color:#9cb0ad;cursor:pointer;font:800 11px Inter,sans-serif;text-transform:uppercase; }
.mission-tabs button.is-active { border-color:#60f0bd;background:rgba(96,240,189,.1);color:#7dffd1;box-shadow:inset 0 -2px #60f0bd; }
.mission-tab-panel.is-hidden { display:none; }
.mission-list,.pirate-test-list { display:grid;gap:8px;max-height:min(58vh,520px);margin:10px 0;padding:4px;overflow:auto; }
.mission-list .starter-mission-card { display:block;padding:12px;border-left:3px solid #f7bf64;text-align:left; }
.starter-mission-card header,.pirate-test-card header { display:flex;align-items:flex-start;justify-content:space-between;gap:12px; }
.starter-mission-card header span,.pirate-test-card header em { color:#f7bf64;font:850 9px Inter,sans-serif;text-transform:uppercase; }
.starter-mission-card p { margin:6px 0;color:#aebfbb;font:600 10px/1.45 Inter,sans-serif; }
.starter-mission-card ul,.pirate-test-requirements { display:grid;gap:4px;margin:8px 0;padding:0;list-style:none; }
.starter-mission-card li,.pirate-test-requirements li { display:flex;justify-content:space-between;gap:10px;padding:5px 7px;border-radius:4px;background:rgba(255,255,255,.035);color:#bac9c6;font:700 10px Inter,sans-serif; }
.starter-mission-card li.is-complete,.pirate-test-requirements li.is-ready { color:#7dffd1; }
.starter-mission-card footer { display:grid;grid-template-columns:auto 1fr;gap:9px;padding-top:7px;border-top:1px solid rgba(255,255,255,.07);color:#8ea5a1;font:800 9px Inter,sans-serif;text-transform:uppercase; }
.starter-mission-card footer b { color:#ffe1a0;text-align:right;text-transform:none; }
.starter-mission-card.is-complete { border-color:#60f0bd;opacity:.72; }
.starter-mission-card.is-active { border-color:#8ce9ff; }
.starter-mission-card.is-failed { border-color:#f06f69; }
.mission-start-button { width:100%;min-height:34px;margin-top:10px;border:1px solid #60f0bd;border-radius:5px;background:linear-gradient(#245344,#0d2821);color:#b8ffe5;cursor:pointer;font:900 10px Inter,sans-serif;text-transform:uppercase; }
.mission-start-button:disabled { opacity:.55;cursor:wait; }
.active-mission-tracker { position:fixed;z-index:8;top:190px;left:14px;width:min(285px,calc(100vw - 28px));padding:13px;border:1px solid rgba(247,191,100,.58);border-radius:8px;background:linear-gradient(150deg,rgba(18,35,43,.96),rgba(5,17,25,.94));box-shadow:0 14px 34px rgba(0,0,0,.32);color:#eafff8;pointer-events:auto;transition:width .18s,padding .18s; }
.active-mission-tracker.is-hidden { display:none; }
.active-mission-tracker header { display:flex;align-items:center;justify-content:space-between;gap:10px;color:#f7bf64;font:900 10px Inter,sans-serif;letter-spacing:.11em;text-transform:uppercase; }
.active-mission-tracker header strong { color:#fff1b4;font-size:13px;letter-spacing:.04em; }
.active-mission-tracker header button{display:grid;place-items:center;width:24px;height:24px;padding:0;border:1px solid rgba(247,191,100,.42);border-radius:5px;background:rgba(0,0,0,.25);color:#f7bf64;font-weight:900;cursor:pointer}.active-mission-tracker.is-collapsed{width:154px;padding:9px}.active-mission-tracker.is-collapsed header span{font-size:9px}.active-mission-tracker.is-collapsed header strong,.active-mission-tracker.is-collapsed h2,.active-mission-tracker.is-collapsed p,.active-mission-tracker.is-collapsed ul{display:none}
.active-mission-tracker h2 { margin:8px 0 4px;color:#fff6d8;font:900 15px Inter,sans-serif; }
.active-mission-tracker p { margin:0 0 8px;color:#a9c8c1;font:600 11px/1.4 Inter,sans-serif; }
.active-mission-tracker ul { display:grid;gap:5px;margin:0;padding:0;list-style:none; }
.active-mission-tracker li { display:flex;justify-content:space-between;gap:8px;padding-top:5px;border-top:1px solid rgba(130,177,170,.18);color:#cee5df;font:700 11px Inter,sans-serif; }
.active-mission-tracker li.is-complete { color:#60f0bd; }
@media (max-width:700px) { .active-mission-tracker { top:170px;width:230px; } }
.pirate-test-locked { display:grid;gap:7px;padding:36px 18px;border:1px solid rgba(218,176,73,.28);border-radius:7px;background:rgba(3,15,20,.62);text-align:center; }
.pirate-test-locked strong { color:#ffe1a0;font:900 17px Georgia,serif; }
.pirate-test-locked span { color:#9bada9;font:650 11px/1.5 Inter,sans-serif; }
.pirate-test-locked.is-complete { border-color:rgba(96,240,189,.4); }
@media (max-width:560px) { .mission-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.pirate-test-card { padding:13px;border:1px solid rgba(218,176,73,.3);border-left:3px solid #f7bf64;border-radius:7px;background:linear-gradient(135deg,rgba(15,31,37,.96),rgba(39,25,13,.9)); }
.pirate-test-card header strong,.pirate-test-card header span { display:block; }
.pirate-test-card header strong { color:#ffe1a0;font:900 16px Georgia,serif; }
.pirate-test-card header span { margin-top:4px;color:#aebfbb;font:600 10px/1.4 Inter,sans-serif; }
.pirate-test-xp { margin:11px 0; }
.pirate-test-xp>span { display:flex;justify-content:space-between;margin-bottom:5px;color:#d8e7e3;font:750 10px Inter,sans-serif; }
.pirate-test-xp>span strong { color:#8ce9ff; }
.pirate-test-xp>div { height:13px;padding:2px;border:1px solid rgba(140,233,255,.42);border-radius:7px;background:#041219;overflow:hidden; }
.pirate-test-xp i { display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#238ad5,#8ce9ff);box-shadow:0 0 10px rgba(91,196,255,.75);transition:width .25s ease; }
.pirate-test-reward { display:grid;gap:3px;margin:8px 0;padding:8px;border:1px solid rgba(96,240,189,.18);border-radius:5px;background:rgba(96,240,189,.05); }
.pirate-test-reward span { color:#60f0bd;font:850 10px Inter,sans-serif; }
.pirate-test-reward b { color:#ffe1a0;font:700 10px/1.4 Inter,sans-serif; }
.pirate-test-card button { width:100%;min-height:34px;border:1px solid #60f0bd;border-radius:5px;background:linear-gradient(#245344,#0d2821);color:#b8ffe5;cursor:pointer;font:900 10px Inter,sans-serif;text-transform:uppercase; }
.pirate-test-card button:disabled { border-color:rgba(255,255,255,.13);background:#152126;color:#6f827e;cursor:not-allowed; }
.pirate-test-card.is-complete { border-color:#60f0bd; }
.mission-empty { padding:30px;color:#9bada9;text-align:center; }
.world-ranking-row.is-current { border-color:#60f0bd;background:rgba(96,240,189,.08); }
.world-ranking-position { color:#60f0bd;font-weight:900; }
.world-ranking-xp { color:#8ce9ff;white-space:nowrap; }
.shipyard-world-ranks button { width:100%;margin-top:7px;padding:7px;border:1px solid rgba(96,240,189,.42);border-radius:5px;background:#0a2028;color:#60f0bd;cursor:pointer;font:800 9px Inter,sans-serif;text-transform:uppercase; }

.admin-online-player { display: grid; grid-template-columns: minmax(70px, .7fr) minmax(0, 1.3fr); gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.06); color: #9fb2b1; font-size: 9px; }
.admin-online-player strong { overflow: hidden; color: #eaf8f3; text-overflow: ellipsis; white-space: nowrap; }

.command-panel {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "left" "slots";
  align-items: stretch;
  width: min(900px, calc(100vw - 390px));
  min-width: 620px;
}
.command-panel .panel-left { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.command-panel .panel-slots { grid-area: slots; grid-template-columns: repeat(6, minmax(64px, 1fr)); }
.command-panel .stat-fill { transition: width 220ms ease, background-color 260ms ease, box-shadow 260ms ease; }
.command-panel-toggle { bottom: 105px; }
.shoot-button,
.cancel-attack-button,
.rocket-button,
.repair-button { min-width: 0; }
.cancel-attack-button:disabled { opacity: .42; cursor: default; }

.modal-backdrop { align-items: center; justify-items: center; overflow: auto; padding: 18px; }
.modal-backdrop > .modal,
.modal-backdrop > .shipyard-window { margin: auto; }

.repair-button.is-active { color: #9affc6; box-shadow: inset 0 0 18px rgba(67,255,150,.28), 0 0 14px rgba(67,255,150,.18); }

@media (max-width: 1050px) {
  .command-panel { width: min(760px, calc(100vw - 300px)); min-width: 520px; }
  .command-panel .panel-slots { grid-template-columns: repeat(3, 1fr); }
  .command-panel-toggle { bottom: 156px; }
  .server-panel { width: 250px; }
}

@media (max-width: 760px) {
  .site-footer { flex-wrap: wrap; bottom: 6px; font-size: 9px; }
  .command-panel { left: 8px; right: 8px; width: auto; min-width: 0; grid-template-columns: 1fr; grid-template-areas: "left" "slots"; transform: none; }
  .command-panel .panel-left { grid-template-columns: 1fr; }
  .command-panel.is-collapsed { transform: translateY(calc(100% + 20px)); }
  .command-panel-toggle { bottom: 190px; }
  .server-panel { bottom: 210px; width: min(220px, calc(100vw - 150px)); }
}

/* SAFE TO EDIT: expanded top command bar. Navigation labels/icons can be changed in index.html. */
.game-command-header {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  left: 50%;
  z-index: 9;
  display: grid;
  gap: 7px;
  width: min(1500px, calc(100vw - 24px));
  padding: 7px;
  border: 1px solid rgba(224, 183, 74, .72);
  border-radius: 12px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 209, 73, .08), transparent),
    linear-gradient(180deg, rgba(27, 25, 18, .97), rgba(5, 17, 23, .94));
  box-shadow:
    inset 0 0 0 2px rgba(255, 222, 117, .09),
    0 14px 42px rgba(0, 0, 0, .46);
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
}

body:has(#landingScreen:not(.is-hidden)) .game-command-header {
  visibility: hidden;
}

#landingScreen:not(.is-hidden) ~ .game-command-header {
  visibility: hidden;
}

.command-navigation {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: rgba(218, 176, 73, .68) rgba(3, 10, 14, .7);
  scrollbar-width: thin;
}

.command-navigation-button {
  position: relative;
  display: grid;
  flex: 0 0 94px;
  grid-template-rows: 39px auto;
  place-items: center;
  min-width: 0;
  min-height: 67px;
  padding: 4px 5px 5px;
  border: 2px solid #c9992d;
  border-radius: 9px;
  outline: 1px solid rgba(255, 226, 119, .22);
  outline-offset: -5px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 213, 77, .13), transparent 42%),
    linear-gradient(145deg, #171812, #050908 70%, #252011);
  color: #f7c934;
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, .88),
    inset 0 0 0 1px #5d4217,
    0 3px 0 #4b3513;
  cursor: pointer;
  font: 850 9px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .055em;
  text-transform: uppercase;
  transition: border-color .16s ease, filter .16s ease, transform .16s ease;
}

.command-navigation-button:hover,
.command-navigation-button:focus-visible {
  border-color: #ffe373;
  filter: brightness(1.16);
  transform: translateY(-1px);
}

.command-navigation-button:active {
  transform: translateY(1px);
}

.command-navigation-button.is-logout {
  border-color: #a85b38;
  color: #ffbd73;
}

.command-navigation-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 39px;
  color: #ffd94d;
  font: 900 32px/1 Georgia, "Times New Roman", serif;
  text-shadow:
    0 2px 0 #70500e,
    0 0 8px rgba(255, 216, 70, .46);
}

.command-header-lower-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
}

.game-command-header .resource-strip {
  position: static;
  z-index: auto;
  width: auto;
  min-width: 230px;
  min-height: 43px;
  padding: 4px 12px;
  border-color: rgba(224, 183, 74, .32);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(28, 26, 18, .92), rgba(5, 18, 24, .94));
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .45);
  transform: none;
}

.game-command-header .status {
  min-width: 0;
  padding: 4px 8px;
  overflow-x: auto;
  border-color: rgba(157, 233, 212, .27);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(7, 25, 34, .96), rgba(4, 15, 21, .94));
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .38);
  scrollbar-color: rgba(218, 176, 73, .62) transparent;
  scrollbar-width: thin;
}

.game-command-header .readouts {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: max-content;
  min-width: 100%;
}

.game-command-header .readout {
  display: grid;
  align-content: center;
  min-width: 92px;
  padding: 3px 11px;
  border-top: 0;
  border-left: 1px solid rgba(232, 247, 241, .1);
}

.game-command-header .readout:first-child {
  border-left: 0;
}

.game-command-header .readout.is-coordinate {
  min-width: 112px;
}

.game-command-header .readout.is-destination {
  min-width: 130px;
}

.game-command-header .label {
  margin-bottom: 2px;
  color: #b8a879;
  font-size: 8px;
  letter-spacing: .08em;
}

.game-command-header .value {
  color: #edf9f5;
  font-size: 11px;
  font-weight: 800;
}

.game-notifications,
.combat-banners {
  top: calc(174px + env(safe-area-inset-top));
}

@media (max-width: 900px) {
  .game-command-header {
    top: calc(5px + env(safe-area-inset-top));
    width: calc(100vw - 10px);
    padding: 5px;
  }

  .command-navigation {
    justify-content: flex-start;
  }

  .command-navigation-button {
    flex-basis: 76px;
    grid-template-rows: 32px auto;
    min-height: 57px;
    font-size: 8px;
  }

  .command-navigation-icon {
    height: 32px;
    font-size: 26px;
  }

  .command-header-lower-row {
    grid-template-columns: 1fr;
  }

  .game-command-header .resource-strip {
    justify-content: flex-start;
    min-width: 0;
    min-height: 30px;
    overflow-x: auto;
  }

  .game-command-header .status {
    min-height: 38px;
  }

  .game-command-header .readout {
    min-width: 84px;
    padding-inline: 8px;
  }

  .game-notifications,
  .combat-banners {
    top: calc(164px + env(safe-area-inset-top));
  }
}

/* SAFE TO EDIT: PNG-only navigation bar. Button artwork lives in game/assets/top-bar/. */
.game-command-header {
  width: min(760px, calc(100vw - 24px));
  padding: 6px 10px 8px;
  border-color: rgba(210, 166, 51, .45);
  background: linear-gradient(180deg, rgba(13, 14, 12, .96), rgba(5, 12, 14, .9));
}

.command-navigation {
  gap: 9px;
}

.command-navigation-button {
  flex: 0 0 102px;
  grid-template-rows: 70px auto;
  min-height: 88px;
  padding: 0;
  overflow: visible;
  border: 0;
  outline: 0;
  background: transparent;
  color: #ffe8aa;
  box-shadow: none;
  font: 850 10px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  text-shadow: 0 2px 4px #000;
}

.command-navigation-button img {
  display: block;
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .56));
  transition: filter .16s ease, transform .16s ease;
}

.command-navigation-button:hover,
.command-navigation-button:focus-visible {
  border: 0;
  filter: none;
}

.command-navigation-button:hover img,
.command-navigation-button:focus-visible img {
  filter: drop-shadow(0 0 9px rgba(255, 210, 67, .72)) brightness(1.12);
  transform: translateY(-2px);
}

.command-navigation-button:active img {
  transform: translateY(1px) scale(.98);
}

.game-resource-strip {
  top: calc(116px + env(safe-area-inset-top));
}

#statusPanel[hidden] {
  display: none !important;
}

.settings-modal-actions {
  display: grid;
  gap: 8px;
}

.setting-row select {
  min-width: 126px;
  padding: 8px 30px 8px 10px;
  border: 1px solid rgba(247, 191, 100, .42);
  border-radius: 6px;
  background: #071821;
  color: #fff0c7;
  font: 750 12px Inter, ui-sans-serif, system-ui, sans-serif;
}

.modal-button.is-danger {
  border-color: rgba(255, 106, 94, .5);
  background: linear-gradient(180deg, rgba(92, 30, 28, .82), rgba(30, 15, 17, .94));
  color: #ffd0c9;
}

.game-notifications,
.combat-banners {
  top: calc(160px + env(safe-area-inset-top));
}

@media (max-width: 760px) {
  .game-command-header {
    width: calc(100vw - 10px);
    padding: 4px 5px 6px;
  }

  .command-navigation {
    gap: 4px;
  }

  .command-navigation-button {
    flex-basis: 74px;
    grid-template-rows: 51px auto;
    min-height: 67px;
    font-size: 8px;
  }

  .command-navigation-button img {
    width: 51px;
    height: 51px;
  }

  .game-resource-strip {
    top: calc(85px + env(safe-area-inset-top));
  }

  .game-notifications,
  .combat-banners {
    top: calc(125px + env(safe-area-inset-top));
  }
}

/* SAFE TO EDIT: compact navigation, coordinates, then the currency and Shop row. */
.game-command-header{top:calc(3px + env(safe-area-inset-top));width:min(620px,calc(100vw - 12px));padding:3px 6px 4px;border-radius:5px}.command-navigation{gap:3px}.command-navigation-button{flex:0 0 82px;grid-template-rows:38px auto;min-height:48px;font-size:7px}.command-navigation-button img{width:38px;height:38px}.command-navigation-button .command-navigation-icon{height:38px;font-size:29px}.coordinate-strip{position:fixed;top:calc(59px + env(safe-area-inset-top));left:50%;z-index:8;display:flex;align-items:center;justify-content:center;gap:16px;width:min(620px,calc(100vw - 12px));min-height:25px;padding:4px 10px;border:1px solid rgba(210,166,51,.38);border-top:0;border-radius:0 0 6px 6px;background:rgba(5,14,18,.9);color:#aebeb9;font:700 9px/1 Inter,sans-serif;transform:translateX(-50%);backdrop-filter:blur(10px)}.coordinate-strip b{margin-left:4px;color:#fff0bd;font-size:10px}.game-resource-strip{top:calc(89px + env(safe-area-inset-top))}.game-notifications,.combat-banners{top:calc(125px + env(safe-area-inset-top))}

/* SAFE TO EDIT: currency bar Shop shortcut. */
.resource-shop-button{position:absolute;top:0;bottom:0;left:0;display:inline-flex;align-items:center;justify-content:center;min-width:82px;padding:0 15px;border:0;border-right:1px solid rgba(210,166,51,.52);border-radius:7px 0 0 7px;background:linear-gradient(180deg,rgba(35,48,43,.96),rgba(9,22,25,.96));color:#fff0bd;cursor:pointer;font:900 12px/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.06em;text-decoration:none;text-shadow:0 1px 3px #000;transition:background .15s ease,color .15s ease}.resource-shop-button:hover,.resource-shop-button:focus-visible{background:linear-gradient(180deg,rgba(84,66,25,.98),rgba(28,31,23,.98));color:#fff;outline:1px solid rgba(255,213,92,.72);outline-offset:-2px}.resource-shop-button:active{background:#091417;transform:translateY(1px)}

/* SAFE TO EDIT: fixed 64×64 game-command assets. */
.command-panel{width:min(610px,calc(100vw - 32px));min-width:500px;padding:12px}.command-panel .panel-slots{grid-template-columns:repeat(6,64px);justify-content:center;gap:10px}.command-panel .panel-slots>button,.command-panel .panel-slots>.ammo-select,.command-panel .panel-slots>.ammo-select>.ammo-select-toggle{position:relative;width:64px;height:64px;min-width:64px;min-height:64px;padding:2px}.command-slot-image,.command-panel .ammo-asset-icon{display:block;width:48px!important;height:48px!important;margin:auto;object-fit:contain}.command-panel .slot-key{z-index:2;padding:2px;border-radius:3px;background:rgba(0,0,0,.7);font-size:8px}.command-panel .slot-value{position:absolute;right:2px;bottom:2px;left:2px;margin:0;padding:2px;border-radius:3px;background:rgba(0,0,0,.72);font-size:8px;text-align:center}.command-panel .ammo-select-toggle{position:relative}.command-panel .ammo-menu{right:auto;grid-auto-flow:row;grid-template-columns:1fr;width:230px;padding:5px}.command-panel .ammo-option{position:relative;display:grid;grid-template-columns:54px 1fr;width:218px;height:64px;min-height:64px;padding-right:7px}.command-panel .ammo-option .ammo-asset-icon{grid-column:1;grid-row:1}.command-panel .ammo-option-description{grid-column:2;align-self:center;color:#fff0bd;font:800 11px/1.25 Inter,sans-serif;text-align:left}.command-panel .ammo-option .slot-value{right:7px;bottom:3px;left:61px;text-align:right}.command-panel [hidden]{display:none!important}
.nickname-modal{width:min(480px,calc(100vw - 28px))}.nickname-field{display:grid;gap:7px;margin:16px 0;color:#ffe1a0;font-weight:800}.nickname-field input{padding:12px;border:1px solid rgba(96,240,189,.45);border-radius:6px;background:#071820;color:#fff;font-size:17px}.nickname-setting-row{align-items:center}.nickname-setting-row>span{display:grid;gap:4px}.nickname-setting-row small{color:#9fb8b3;font-size:10px;font-weight:600}.nickname-setting-row button{min-width:90px}
.stat-row.is-xp-progress{position:relative;grid-template-columns:minmax(0,1fr) 28px;min-height:28px}.stat-row.is-xp-progress .stat-label{grid-column:2;grid-row:1;color:#e8f7f1;font-size:12px}.stat-row.is-xp-progress .stat-track{grid-column:1;grid-row:1;height:18px}.stat-row.is-xp-progress .stat-value{position:absolute;top:50%;left:6px;z-index:2;width:calc(100% - 46px);color:#fff;font-size:11px;text-align:center;text-shadow:0 1px 2px #000;transform:translateY(-50%);pointer-events:none}

@media(max-width:600px){.game-command-header{width:calc(100vw - 6px)}.command-navigation-button{flex-basis:67px;grid-template-rows:38px auto;min-height:48px}.command-navigation-button img{width:38px;height:38px}.coordinate-strip{top:calc(59px + env(safe-area-inset-top));width:calc(100vw - 6px);gap:7px;overflow:hidden}.coordinate-strip span{white-space:nowrap}.game-resource-strip{top:calc(89px + env(safe-area-inset-top))}.resource-shop-button{min-width:64px;padding-inline:10px}.command-panel{min-width:0}.command-panel .panel-slots{grid-template-columns:repeat(3,64px)}}

/* SAFE TO EDIT: game-panel visibility control attached to the panel's bottom-left edge. */
.command-panel-toggle,.command-panel-toggle.is-collapsed{left:max(16px,calc(50% - 305px));right:auto;bottom:14px;transform:none}

/* SAFE TO EDIT: the navigation can remain at the top or open as a centered F-key menu. */
.game-command-header[hidden]{display:none!important}
.game-command-header.is-key-menu{top:50%;z-index:40;width:min(620px,calc(100vw - 28px));padding:14px;border-radius:12px;transform:translate(-50%,-50%);box-shadow:0 0 0 100vmax rgba(0,0,0,.58),0 24px 80px rgba(0,0,0,.72)}
.game-command-header.is-key-menu .command-navigation{flex-wrap:wrap;overflow:visible}
.game-command-header.is-key-menu::after{content:"Press [" attr(data-activation-key) "] to close";position:absolute;top:calc(100% + 9px);left:50%;padding:6px 10px;border:1px solid rgba(247,191,100,.42);border-radius:6px;background:rgba(5,14,18,.94);color:#ffe8aa;font:800 10px/1 Inter,sans-serif;transform:translateX(-50%);white-space:nowrap}
body.navigation-key-mode .coordinate-strip{top:calc(3px + env(safe-area-inset-top));border-top:1px solid rgba(210,166,51,.38);border-radius:6px}
body.navigation-key-mode .game-resource-strip{top:calc(34px + env(safe-area-inset-top))}
body.navigation-key-mode .game-notifications,body.navigation-key-mode .combat-banners{top:calc(70px + env(safe-area-inset-top))}

@media(max-width:760px){
  .command-panel-toggle,.command-panel-toggle.is-collapsed{left:8px;right:auto;bottom:calc(8px + env(safe-area-inset-bottom));transform:none}
  .game-command-header.is-key-menu{width:calc(100vw - 18px)}
  body.navigation-key-mode .coordinate-strip{top:calc(3px + env(safe-area-inset-top))}
  body.navigation-key-mode .game-resource-strip{top:calc(34px + env(safe-area-inset-top))}
  body.navigation-key-mode .game-notifications,body.navigation-key-mode .combat-banners{top:calc(70px + env(safe-area-inset-top))}
}