/* style.css */
/* iOS Safari: 동적 뷰포트(주소창 표시 시에도 화면에 맞춤) + safe area(노치/홈인디케이터) */
html, body {
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }
/* iOS Safari 자동 글자 확대 방지 (온도 등 폰트 크기/글씨체 일치) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: #000;
  color: rgba(255,255,255,.92);
  /* Galmuri11: 11px 그리드 설계 — 작은 화면(논리 320px 폭)에서 도트 느낌 유지 */
  font-family: Galmuri11, Galmuri9, ui-monospace, monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  text-rendering: geometricPrecision;
}

#app {
  min-height: 100%;
  min-height: 100dvh;
}

/* ── Loading Overlay: 밤하늘의 새우 별자리. 진행에 따라 선이 그어지고 별이 켜지며, 끝나면 금빛이 된다. ── */
.loading-overlay,
.scene-loading-visible {
  background:
    radial-gradient(1.2px 1.2px at 12% 16%, #ffffffcc 50%, transparent 52%),
    radial-gradient(1px 1px at 27% 74%, #ffffffa0 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 83% 22%, #fff3d0d0 50%, transparent 52%),
    radial-gradient(1px 1px at 68% 84%, #ffffff90 50%, transparent 52%),
    radial-gradient(1px 1px at 91% 58%, #ffffffa0 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 6% 48%, #d8f0ffb0 50%, transparent 52%),
    radial-gradient(1px 1px at 44% 9%, #ffffff80 50%, transparent 52%),
    radial-gradient(1px 1px at 57% 93%, #ffffff70 50%, transparent 52%),
    radial-gradient(ellipse 70% 45% at 50% 40%, #1d4a5a66 0%, transparent 70%),
    radial-gradient(ellipse at 50% 35%, #12293a 0%, #0a1624 48%, #050a12 100%);
}
.loading-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10000;
  overflow: hidden;
}
/* 반짝이는 별 한 겹(움직임 줄이기에서는 멈춘다) */
.loading-overlay::before, .scene-loading-visible::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1.6px 1.6px at 19% 31%, #fff 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 76% 41%, #fff6dc 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 35% 88%, #e2f4ff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 88% 79%, #fff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 61% 12%, #fff 50%, transparent 52%);
  animation: loading-twinkle 3.6s ease-in-out infinite alternate;
}
@keyframes loading-twinkle { from { opacity: .25; } to { opacity: 1; } }
.loading-overlay.hidden { display: none; }
.loading-overlay.press-to-start, .scene-loading.press-to-start { cursor: pointer; }
.press-to-start:focus { outline: none; }
.press-to-start:focus-visible .loading-text { text-decoration: underline; text-underline-offset: 4px; }
.loading-brand {
  --loading-fill: 0%;
  --loading-unfilled: 100%;
  --loading-p: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  text-align: center;
  pointer-events: none;
}
.loading-icon {
  position: relative;
  width: clamp(176px, 62vw, 248px);
  aspect-ratio: 1;
}
.loading-constellation { display: block; width: 100%; height: 100%; overflow: visible; }
.lc-chart { transform-origin: 100px 100px; animation: loading-chart-turn 120s linear infinite; }
@keyframes loading-chart-turn { to { transform: rotate(360deg); } }
.lc-ring { fill: none; stroke: #cfe6ff; stroke-opacity: .16; stroke-width: .6; }
.lc-ring-dash { stroke-dasharray: 1 5; stroke-opacity: .26; }
.lc-lines path {
  fill: none;
  stroke: #bfe3ff;
  stroke-opacity: .6;
  stroke-width: .9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--loading-p));
  transition: stroke-dashoffset 420ms linear, stroke 600ms ease, stroke-opacity 600ms ease;
}
.lc-lines .lc-faint { stroke-opacity: .3; stroke-width: .7; }
.lc-stars circle {
  fill: #f4fbff;
  opacity: clamp(.16, calc((var(--loading-p) - var(--at)) * 12 + .16), 1);
  filter: drop-shadow(0 0 2.5px #bfe3ffcc);
  transform-box: fill-box;
  transform-origin: center;
  animation: loading-star 2.6s ease-in-out var(--d) infinite alternate;
  transition: opacity 420ms linear, fill 600ms ease;
}
@keyframes loading-star { from { transform: scale(.82); } to { transform: scale(1.12); } }
.loading-brand[data-loading-progress="1"] .lc-lines path { stroke: #f2d78f; stroke-opacity: .85; stroke-dashoffset: 0; }
.loading-brand[data-loading-progress="1"] .lc-lines .lc-faint { stroke-opacity: .5; }
.loading-brand[data-loading-progress="1"] .lc-stars circle { fill: #fff6dc; opacity: 1; filter: drop-shadow(0 0 4px #f7d98acc); }
.loading-brand[data-loading-progress="1"] .lc-ring { stroke: #f2d78f; stroke-opacity: .3; }
.loading-title {
  margin-top: 22px;
  font: 600 19px/1.2 var(--ui-font-display, Georgia, serif);
  letter-spacing: .5em;
  padding-left: .5em;
  color: #f1dfae;
  background: linear-gradient(180deg, #fff6dc 0%, #e7c77d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px #e7c77d40);
}
.loading-tagline {
  margin-top: 8px;
  color: #9db9c8;
  font: 10px/1 var(--ui-font-body, sans-serif);
  letter-spacing: .42em;
  padding-left: .42em;
  opacity: .8;
}
.loading-text {
  margin-top: 22px;
  min-height: 24px;
  color: #8fa9b8;
  font: 12px/1.6 var(--ui-font-body, sans-serif);
  letter-spacing: .06em;
}
.loading-text:empty { display: none; }
.press-to-start .loading-text {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #f1dfae;
  letter-spacing: .14em;
  animation: loading-breathe 2.4s ease-in-out infinite alternate;
}
.press-to-start .loading-text::before,
.press-to-start .loading-text::after {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e7c77d);
}
.press-to-start .loading-text::after { transform: scaleX(-1); }
@keyframes loading-breathe { from { opacity: .55; } to { opacity: 1; } }
.loading-activity-held :is(#app, .tank-scale-wrapper),
.loading-activity-held :is(#app, .tank-scale-wrapper) *,
.loading-activity-held :is(#app, .tank-scale-wrapper) *::before,
.loading-activity-held :is(#app, .tank-scale-wrapper) *::after {
  animation-play-state: paused !important;
}
@media (max-height: 440px) {
  .loading-icon { width: 140px; }
  .loading-title { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-overlay::before, .scene-loading-visible::before, .lc-chart, .lc-stars circle, .press-to-start .loading-text { animation: none; }
  .lc-lines path, .lc-stars circle { transition: none; }
}

/* ── Login Overlay ── */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #060c14 0%, #081522 40%, #0a1a2a 100%);
}

.login-overlay.hidden {
  display: none;
}

.login-card {
  position: relative;
  z-index: 2;
  width: min(88%, 280px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.login-icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 4px;
}

.login-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: normal;
  color: #9fd7ef;
  line-height: 1.6;
}

.login-btn {
  width: 100%;
  padding: 10px 0;
  border-radius: 0;
  border: 3px solid #000;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.4),
              inset -2px -2px 0 rgba(0, 0, 0, 0.35),
              3px 3px 0 rgba(0, 0, 0, 0.55);
  font-family: Galmuri11, ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 80ms, box-shadow 80ms;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  image-rendering: pixelated;
}

.login-btn:active {
  transform: translate(3px, 3px);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.4),
              inset -2px -2px 0 rgba(0, 0, 0, 0.35);
}

/* 애플·구글 로그인 로고 */
.login-btn-apple::before,
.login-btn-google::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: auto;
}
.login-btn-apple::before {
  width: 18px;
  height: 18px;
  background-image: url("assets/login/apple-logo.svg");
}
.login-btn-google::before {
  width: 18px;
  height: 18px;
  background-image: url("assets/login/google-logo.svg");
}

.login-btn-google {
  background: #f3f6fa;
  color: #26303a;
}

.login-btn-apple {
  background: #f5f5f5;
  color: #111;
}

.login-btn-guest {
  background: #10161e;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
}

/* ── Web Notice (웹 접속 안내) ── */
.web-notice {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(3, 8, 14, 0.78);
}

.web-notice.hidden {
  display: none;
}

.web-notice-card {
  width: min(100%, 340px);
  box-sizing: border-box;
  padding: 20px 18px 16px;
  background: #0c1824;
  border: 3px solid #000;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.12), 3px 3px 0 rgba(0, 0, 0, 0.55);
  font-family: Galmuri11, ui-monospace, monospace;
  color: #e0f0ff;
  text-align: center;
}

.web-notice-title {
  margin: 0 0 12px;
  font-size: 14px;
  color: #9fd7ef;
}

.web-notice-body {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-line;
  word-break: keep-all;
}

.web-notice-btn {
  background: #2a6f97;
  color: #fff;
}

/* ── Login Consent (게임 약관 · 개인정보 처리방침 2열) ── */
.login-consent {
  display: flex;
  gap: 8px;
  margin: 4px 0 4px;
  text-align: left;
}

.consent-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.consent-title {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  color: #9fd7ef;
  line-height: 1.3;
  text-align: center;
}

.consent-scroll {
  height: 104px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 7px;
  background: rgba(8, 16, 26, 0.7);
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.08),
              inset -2px -2px 0 rgba(0, 0, 0, 0.45);
  font-size: 9px;
  line-height: 1.55;
  color: rgba(220, 235, 250, 0.78);
}

.consent-scroll p {
  margin: 0 0 7px;
}

.consent-scroll p:last-child {
  margin-bottom: 0;
}

.consent-scroll strong {
  color: #bfe6f5;
}

.consent-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  color: rgba(220, 235, 250, 0.8);
  cursor: pointer;
}

.consent-checkbox {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #2ea6cf;
  cursor: pointer;
}

.login-btn-locked {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Login Language Toggle Button ── */
.login-lang-btn {
  position: absolute;
  top: max(14px, env(safe-area-inset-top, 14px));
  right: 14px;
  z-index: 10;
  padding: 3px 7px;
  background: rgba(15, 28, 48, 0.72);
  border: 1px solid rgba(90, 170, 210, 0.32);
  color: rgba(190, 225, 255, 0.88);
  font-family: inherit;
  font-size: 10px;
  line-height: 1.4;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 120ms;
}

.login-lang-btn:active {
  opacity: 0.68;
}

/* ── Login Aquarium Background ── */
.login-aquarium {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* 320px 고정 너비 기준 — JS에서 translateX(-50%) scale(vw/320) 로 화면 폭에 맞춤 */
.login-aquarium-inner {
  position: absolute;
  top: 0;
  left: 50%;
  width: 320px;
  height: 640px;
  transform-origin: top center;
}

.login-ripple {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  max-width: 100%;
  height: 240px;
  pointer-events: none;
  background-image: url('./assets/tank-bg-ripple.png');
  background-size: 320px 3840px;
  background-position: 0 0;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  opacity: 0.42;
  animation: login-ripple-anim 2.4s steps(16, end) infinite;
}

@keyframes login-ripple-anim {
  from { background-position: 0 0; }
  to   { background-position: 0 -3840px; }
}

.login-rays {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% -10%, rgba(0, 198, 255, 0.10) 0%, transparent 55%);
  pointer-events: none;
}

.login-bubble-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.login-bubble {
  position: absolute;
  pointer-events: none;
  bottom: -20px;
  animation: login-bubble-rise var(--d) linear infinite;
}

.login-bubble img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

@keyframes login-bubble-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.55; }
  100% { transform: translateY(-100vh) translateX(var(--sway)); opacity: 0; }
}

.login-plant-layer {
  position: absolute;
  bottom: 48px;
  left: 0;
  right: 0;
  height: 160px;
  pointer-events: none;
}

.login-plant {
  position: absolute;
  bottom: 0;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  width: auto;
}

.login-plant:nth-child(1) {
  left: 8%;
  height: 130px;
  filter: blur(2px);
  opacity: 0.82;
}

.login-plant:nth-child(2) {
  left: 50%;
  transform: translateX(-50%);
  height: 110px;
  filter: blur(1.5px);
  opacity: 0.88;
}

.login-plant:nth-child(3) {
  right: 9%;
  height: 140px;
  filter: blur(1px);
  opacity: 0.94;
}

.login-gravel-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  pointer-events: none;
}

.login-gravel-underlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg, rgba(38,52,66,0.88) 0%, rgba(26,37,47,0.96) 58%, rgba(20,30,40,0.98) 100%);
  clip-path: polygon(
    0% 30%, 7% 26%, 14% 31%, 22% 25%, 31% 32%, 40% 27%, 50% 33%,
    60% 28%, 70% 34%, 80% 29%, 89% 35%, 100% 30%,
    100% 100%, 0% 100%
  );
}

.login-gravel {
  position: absolute;
  border-radius: 50%;
  filter: brightness(0.7);
  z-index: 2;
  pointer-events: none;
}