/* ============================================================
   surume — CSS variables (used by JavaScript via var(--*))
   and styles for JS-generated DOM elements (map, units, sprites)
   ============================================================ */

:root {
  --sea:      #15333c;
  --sea-lit:  #21505a;
  --paper:    #e9ecea;
  --paper-2:  #dde4e1;
  --sumi:     #232b2c;
  --accent:   #d99a3c;
  --line:     #ccd4d0;
  --muted:    #7d8a86;
  --squid:    #41514f;
  --squid-sea:#cfe0dc;
  --sea-line: #ffffff1a;
  --sea-dot:  #ffffff26;

  --ui:       'DotGothic16', 'Courier New', monospace;
  --body:     'Noto Sans JP', system-ui, sans-serif;
  --bodysize: 15px;
  --r:        3px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
#root, body > .app { height: 100%; }
body {
  font-family: var(--body);
  color: var(--sumi);
  background: #d7dcd9;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.px { image-rendering: pixelated; }

/* App container — needs container-type/name for Tailwind @[920px]: queries */
.app {
  height: 100%;
  margin: 0 auto;
  background: var(--paper);
  container-type: inline-size;
  container-name: app;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0 0 1px var(--line);
}

/* =============== MAP (JS-rendered) ========================= */
.map {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--sea);
  border: 1.5px solid #0c2429;
  border-radius: var(--r);
  overflow: hidden;
  display: grid;
  cursor: crosshair;
}
.map-cell { position: relative; }
.map-cell.void {
  background: #0d2329;
  box-shadow: inset 0 0 0 0.5px #ffffff08;
}
.map-cell.clickable:hover::after {
  content: '';
  position: absolute; inset: 14%;
  border: 1.5px solid #ffffff55;
  border-radius: 2px;
}

.range {
  position: absolute;
  background: var(--sea-lit);
  pointer-events: none;
  box-shadow: inset 0 0 0 1.5px #ffffff44;
}

.unit {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 3;
}
.unit.faded { opacity: .32; }
.unit.bob { animation: bob 3.2s ease-in-out infinite; }
.unit.bob.v1 { animation-duration: 3.8s; }
.unit.bob.v2 { animation-duration: 2.9s; }

.unit-self { z-index: 5; }
.unit-name {
  position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  font-family: var(--ui); font-size: 9px; color: #fff;
  white-space: nowrap; margin-top: 1px; opacity: .85;
  text-shadow: 0 1px 2px #000a;
}
.unit.faded .unit-name { display: none; }

.facing {
  position: absolute; width: 3px; height: 3px; background: var(--accent);
  image-rendering: pixelated;
}

.landmark {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 2;
  opacity: 0.5;
  animation: drift 8s ease-in-out infinite;
}
.landmark:nth-child(odd) { animation-duration: 11s; }
.landmark:nth-child(3n)  { animation-duration: 7s; }


/* =============== MOBILE TAB SWITCHER ======================= */
.mobile-tab { color: var(--muted); }
[data-mobile-tab="log"]  .mobile-tab[data-tab="log"],
[data-mobile-tab="map"]  .mobile-tab[data-tab="map"] {
  color: var(--sumi);
  border-bottom-color: var(--accent);
}
.tab-badge {
  font-size: 11px; color: var(--paper); background: var(--accent);
  border-radius: 8px; padding: 0 6px; line-height: 16px;
  min-width: 16px; text-align: center;
}
@container app (max-width: 919px) {
  [data-mobile-tab="map"] .col-log { display: none; }
  [data-mobile-tab="log"] .col-map { display: none; }
}

/* =============== MAP HINT / KEY ========================== */
.map-hint {
  font-family: var(--ui); font-size: 10px; color: var(--muted);
  margin-top: 9px; display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; line-height: 1.5;
}
.key {
  display: inline-block; border: 1px solid var(--line); border-radius: 2px;
  padding: 0 4px; color: var(--sumi); background: var(--paper-2);
}

/* =============== KEYFRAMES ================================ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .msg.enter { animation: none; }
}

@keyframes bob {
  0%,100% { transform: translateY(-1px); }
  50%     { transform: translateY(2px); }
}
@keyframes drift {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(1.5px); }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* =============== SCROLLBARS =============================== */
.tl-scroll::-webkit-scrollbar,
.feed-scroll::-webkit-scrollbar { width: 9px; }
.tl-scroll::-webkit-scrollbar-thumb,
.feed-scroll::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 9px; border: 3px solid var(--paper);
}

/* =============== DARK MODE ================================ */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --paper:    #161e21;
    --paper-2:  #1c2a2f;
    --sumi:     #e0e8e5;
    --line:     #263035;
    --muted:    #6b8080;
    --squid-sea:#1a3038;
  }
  :root:not(.theme-light) body { background: #0f1618; }
  :root:not(.theme-light) .map-cell.void { background: #091518; }
}

:root.theme-dark {
  --paper:    #161e21;
  --paper-2:  #1c2a2f;
  --sumi:     #e0e8e5;
  --line:     #263035;
  --muted:    #6b8080;
  --squid-sea:#1a3038;
}
:root.theme-dark body { background: #0f1618; }
:root.theme-dark .map-cell.void { background: #091518; }