/* Moon lake — night overlay chrome. Pale text on the dark scene. */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: rgb(5, 7, 15);
  color: rgb(206, 218, 235);
  font-family: Georgia, "Times New Roman", serif;
  overflow: hidden;
}

.scene-shell {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: var(--viewport-height, 100dvh);
  overflow: hidden;
}

.scene-canvas {
  display: block;
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

.scene-canvas:active {
  cursor: grabbing;
}

.scene-canvas:focus-visible {
  outline: 2px solid rgb(170, 195, 230);
  outline-offset: -2px;
}

.scene-title {
  position: absolute;
  z-index: 20;
  top: 22px;
  left: 26px;
  pointer-events: none;
  text-shadow: 0 1px 10px rgba(3, 5, 10, 0.85);
}

.scene-title h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgb(216, 228, 244);
}

.scene-place {
  margin: 4px 0 0;
  font-size: 14px;
  color: rgb(148, 168, 196);
  letter-spacing: 0.04em;
}

.scene-controls {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 24px);
}

.preset-row {
  display: flex;
  gap: 8px;
}

.preset-button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(158, 182, 214, 0.35);
  border-radius: 999px;
  background: rgba(8, 13, 24, 0.72);
  color: rgb(198, 214, 236);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.preset-button:hover {
  background: rgba(16, 26, 44, 0.85);
  border-color: rgba(180, 202, 232, 0.6);
}

.preset-button:active {
  background: rgba(22, 34, 56, 0.9);
}

.preset-button:focus-visible {
  outline: 2px solid rgb(170, 195, 230);
  outline-offset: 2px;
}

.preset-button.is-active {
  background: rgb(198, 214, 236);
  border-color: rgb(198, 214, 236);
  color: rgb(8, 13, 24);
}

.scene-hint {
  margin: 0;
  font-size: 12px;
  color: rgb(140, 160, 188);
  text-shadow: 0 1px 8px rgba(3, 5, 10, 0.8);
}

@media (max-width: 768px) {
  .scene-title {
    top: 14px;
    left: 16px;
  }

  .scene-title h1 {
    font-size: 20px;
  }

  .scene-place {
    font-size: 12px;
  }

  .scene-controls {
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
  }

  .preset-button {
    font-size: 13px;
    padding: 0 14px;
  }
}

@media (max-width: 390px) {
  .preset-row {
    gap: 6px;
  }

  .preset-button {
    min-height: 44px;
    padding: 0 12px;
    font-size: 12.5px;
  }
}

@media (max-width: 340px) {
  .scene-title h1 {
    font-size: 18px;
  }

  .preset-button {
    padding: 0 10px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preset-button {
    transition: none;
  }
}

/* ------------------------------------------------------------- game HUD */
/* Thin pale silver strokes, warm amber accents, dark glass panels. */

.game-ui {
  position: fixed;
  inset: 0;
  z-index: 30;
  opacity: 1;
  pointer-events: none;
  font-family: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.game-ui.is-active {
  opacity: 1;
}



/* ROUND 24 F24-18 (user order, SUPERSEDES the centre-middle order of
   2026-10-05): SET AIM sits MIDDLE RIGHT - right edge, vertically
   centred, slightly inset so the pill never clips or wraps. One rule for
   both viewports (390x844 and 1280x800); pointer-events and the
   phase-scoped visibility are unchanged. */
.game-ui .aim-lock {
  position: fixed;
  left: auto;
  right: 14px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 31;
  pointer-events: auto;
  white-space: nowrap;
}

/* Order C (user): every decorative GUI face graphic is removed - card
   plates with gold double borders and corner diamonds, ribbon plates,
   decorative plaques and glossy overlays. Panels render on a simple flat
   dark backdrop with content text and plain functional buttons only. */

/* ---------------- throw-screen HUD (target-throw-screen) ----------- */
/* The decorative screen frame with corner ornaments and the old title
   plate ornament rules are gone (order C). */
/* Top-right chip stack: WIND (with swirl icon) over ZONE. A fully
   self-contained fixed component: it shares NO box with any other HUD
   rule. (The old shared .game-readout box carried left+bottom fixed
   offsets, column direction and stretch alignment into this row: the
   box resolved nearly full-width and stretched every chip into a
   giant full-screen pill.) Children are content-sized, never
   stretched, never aspect-locked. */
.game-ui .hud-chips {
  position: fixed;
  top: 18px;
  right: 18px;
  left: auto;
  bottom: auto;
  z-index: 33;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  width: max-content;
  max-width: calc(100vw - 230px);
}
.hud-chips span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgb(238, 230, 212);
  padding: 6px 11px;
  border: 1px solid rgba(212, 163, 60, 0.55);
  border-radius: 10px;
  background: rgba(8, 10, 15, 0.6);
}
.hud-chips .game-wind::after {
  content: "";
  width: 12px;
  height: 12px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(238,230,212)' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 8c4-3 8 3 12 0s6 1 6 1'/%3E%3Cpath d='M3 13c4-3 8 3 12 0s6 1 6 1'/%3E%3Cpath d='M4 18c3-2 6 2 9 0'/%3E%3C/svg%3E");
}

.swing-gauge-wrap {
  position: fixed;
  left: 22px;
  top: 108px;
  opacity: 1;
  /* ROUND 28 x2: both cast meters are real click targets (the HIT
     meter's tap stops it and lands the cast), so the panel takes pointer
     events and shows the pointer affordance like the other controls. */
  pointer-events: auto;
  cursor: pointer;
}

.swing-gauge {
  display: block;
  width: min(240px, max(150px, 28vw));
  height: auto;
  aspect-ratio: 240 / 430;
}

.fight-wrap {
  position: fixed;
  right: 52px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 320px;
  background: rgba(8, 10, 15, 0.55);
  border: 2px solid rgba(232, 234, 238, 0.82);
  border-radius: 15px;
  opacity: 1;
}

.fight-wrap.is-visible {
  opacity: 1;
}

.fight-wrap::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 12px;
  bottom: 12px;
  width: 5px;
  background: repeating-linear-gradient(
    to top,
    transparent 0 9px,
    rgba(232, 234, 238, 0.4) 9px 10px
  );
}

.fight-fish {
  position: absolute;
  left: 4px;
  right: 4px;
  z-index: 2;
  border: 0;
  border-radius: 0;
  background: rgba(244, 165, 45, 0.6);
  box-shadow: none;
}

.fight-pad {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 0;
  transform: none;
  border-radius: 0;
  background: rgba(220, 230, 238, 0.78);
  box-shadow: 0 -2px 0 rgb(250, 251, 252);
}

.fight-wrap.is-in-target .fight-pad {
  background: rgba(255, 199, 91, 0.85);
}

.reel-help {
  display: block;
  position: absolute;
  top: calc(100% + 86px);
  right: -24px;
  width: 145px;
  text-align: right;
  color: rgb(220, 230, 238);
  font-size: 12px;
  line-height: 1.5;
}

.fight-caption {
  position: absolute;
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(226, 229, 234, 0.85);
}

.fight-progress {
  position: fixed;
  right: 44px;
  top: calc(50% + 214px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgb(242, 201, 76);
  opacity: 1;
}

/* ------------------------------------------------------------- catch card */

/* The one sound control (ROUND 34 item 1): small and quiet in the
   top-left corner, clear of the swing gauge below and the chips
   opposite. */
.sound-toggle {
  position: fixed;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(226, 229, 234, 0.85);
  background: rgba(10, 12, 17, 0.72);
  border: 1px solid rgba(226, 229, 234, 0.28);
  border-radius: 6px;
  pointer-events: auto;
  cursor: pointer;
  z-index: 40;
}

.catch-card {
  /* ROUND 34 item 4 (user: the sign must be dead center, "flush against
     the left edge" is the defect): the whole plate centers on the
     viewport's exact horizontal middle at every viewport (390x844 and
     1280x800). The vertical placement is COMPOSED with the 3D fish
     display held above it (item 3): the box centers itself on 58% of
     the viewport height so the fish + label + sign read as one block
     centered on the screen. */
  position: fixed;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: min(300px, 84vw);
  min-width: 0;
  padding: 12px 14px 12px;
  background: rgb(10, 12, 17);
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  text-align: left;
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 700px) {
  .catch-card {
    left: 50%;
    top: 58%;
    width: min(340px, 30vw);
  }
}

.card-kicker {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgb(242, 201, 76);
  width: max-content;
}

.card-name {
  margin-top: 12px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(245, 246, 248);
}

.card-weight {
  margin-top: 2px;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgb(242, 201, 76);
}

.card-best {
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(226, 229, 234, 0.6);
}

.card-journal {
  margin-top: 14px;
}

.journal-title {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(226, 229, 234, 0.75);
  width: max-content;
}

.journal-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.journal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 246, 248, 0.88);
}

.journal-row .journal-name {
  flex: 1;
}

.journal-row .journal-weight {
  color: rgb(242, 201, 76);
  font-variant-numeric: tabular-nums;
}

.journal-row.is-current {
  color: rgb(245, 246, 248);
}


.card-reel {
  margin-top: 16px;
  min-height: 38px;
  min-width: 110px;
  padding: 6px 20px;
  border: 1px solid rgba(232, 234, 238, 0.55);
  border-radius: 999px;
  background: transparent;
  color: rgb(245, 246, 248);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}

.card-reel:hover {
  border-color: rgb(242, 201, 76);
  color: rgb(242, 201, 76);
}

.card-reel:focus-visible {
  outline: 2px solid rgb(242, 201, 76);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .swing-gauge-wrap {
    left: 8px;
    top: 96px;
  }
  .swing-gauge {
    width: min(176px, 46vw);
    height: auto;
    aspect-ratio: 240 / 430;
  }
  .fight-wrap {
    right: 26px;
    width: 26px;
    height: 210px;
  }
  .fight-progress {
    right: 18px;
    top: calc(50% + 160px);
    font-size: 12px;
  }
  .catch-card {
    top: 58%;
    min-width: 0;
    padding: 10px 12px;
  }
  .card-name {
    font-size: 18px;
  }
  .card-weight {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-ui,
  .swing-gauge-wrap,
  .fight-wrap,
  .fight-progress,
  .catch-card,
  .card-reel {
    transition: none;
  }
}

/* ----------------------------------------------------------- start screen */
/* The entry screen is the user's exact image (941 x 1672), shown whole
   and unmodified (contain fit). The top-9 rows and the PLAY tap area sit
   on the image's own empty slots; nothing else is layered on it. */
.start-screen {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(2, 4, 8);
}

.start-frame {
  position: relative;
  width: min(100vw, calc(100vh * 941 / 1672));
  width: min(100vw, calc(100dvh * 941 / 1672));
  aspect-ratio: 941 / 1672;
}

.start-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.start-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.start-row {
  position: absolute;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8%;
  /* The gold rank numbers' line IS the writing baseline: the row box is
     raised by the font ascent so the text BASELINE lands on the measured
     slot line (name and weight share that one baseline with the number,
     nothing floats above-left). */
  transform: translateY(-0.8375em);
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(min(100vw, calc(100dvh * 941 / 1672)) * 0.0276);
  line-height: 1;
  color: rgb(232, 210, 150);
  white-space: nowrap;
}

.start-row-kg {
  color: rgb(232, 210, 150);
  font-variant-numeric: tabular-nums;
}

.start-play {
  position: absolute;
  left: 31.88%;
  top: 63.70%;
  width: 37.73%;
  height: 10.17%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.start-play:focus-visible {
  outline: 2px solid rgb(232, 210, 150);
  outline-offset: 2px;
}

/* P0b catch label: name and weight as clean text under the flying fish. */
.catch-fish-label {
  position: fixed;
  left: 50%;
  top: 60%;
  transform: translate(-50%, 0);
  z-index: 31;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  font-family: Georgia, "Times New Roman", serif;
}

.catch-fish-label.is-visible {
  opacity: 1;
}

.catch-fish-name {
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(245, 246, 248);
  text-shadow: 0 1px 4px rgb(2, 4, 8), 0 0 2px rgb(2, 4, 8);
}

.catch-fish-kg {
  margin-top: 2px;
  font-size: 22px;
  color: rgb(242, 201, 76);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgb(2, 4, 8), 0 0 2px rgb(2, 4, 8);
}

/* -------------------------------------------------------------- aim lock */
/* The Set aim action is a BIG primary button at the middle-right edge,
   vertically centered and thumb-reachable in portrait — a large round-rect
   in the concept pill language (dark glass, thin pale-silver stroke, warm
   amber accent on label and press). Prominent while aiming; it hides once
   the aim is set and the flow moves to hold-to-cast. */

.aim-lock {
  display: block;
  pointer-events: auto;
  position: fixed;
  right: calc(14px + env(safe-area-inset-right, 0px));
  top: 82%;
  min-height: 64px;
  width: clamp(140px, 36vw, 168px);
  padding: 16px 18px;
  border: 1px solid rgba(212, 163, 60, 0.85);
  border-radius: 999px;
  /* The target pill is SOLID black: the rod passing behind it must not
     read through the button's middle. */
  background: rgb(6, 8, 13);
  color: rgb(232, 198, 122);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  z-index: 32;
  transition: border-color 140ms ease, color 140ms ease;
}

/* Visible from the first frame (standing GUI rule); is-visible now only
   marks aim mode for emphasis styling. */

.aim-lock:hover {
  border-color: rgb(242, 201, 76);
  color: rgb(242, 201, 76);
}

.aim-lock:focus-visible {
  outline: 2px solid rgb(242, 201, 76);
  outline-offset: 2px;
}

.aim-lock.is-confirm {
  border-color: rgb(242, 201, 76);
  color: rgb(242, 201, 76);
}

/* ------------------------------------------------ catch card layout */
.catch-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 30px 34px 26px;
  box-sizing: border-box;
}
.card-kicker {
  align-self: flex-start;
  padding: 0 4px 0 12px;
}
.card-journal {
  background-image: none;
  width: 100%;
  aspect-ratio: auto;
  margin: 6px 0 0;
  overflow: visible;
}
.journal-title {
  padding: 0 4px;
}
.journal-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 4px;
}
.journal-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.journal-name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.journal-weight {
  flex: 0 0 auto;
  border: 0 !important;
  padding-left: 12px;
}
.card-reel-plain {
  background-image: none;
  border: 1px solid rgba(212, 163, 60, 0.8);
  border-radius: 18px;
  color: rgb(238, 178, 72);
  background-color: rgba(10, 12, 18, 0.55);
}
.card-reel {
  align-self: center;
  margin: 14px 24px 4px;
  min-height: 40px;
  padding: 8px 22px;
}
/* The prompt sits in the bottom hint bar and the chips sit top-right:
   they can never collide, so no fixed-offset lift is needed here. */

/* ROUND 24 F24-20 (user order of 18:53): the nickname entry is a NAME
   GRAPHICS BACKPLATE - the same backplate style and framing as the
   splash page / toplist panel: one flat dark plate with a thin gold
   border, gold Georgia serif text (the toplist rows' treatment),
   containing the name input field and the OK button (OK supersedes the
   earlier DONE label). Plain presentation, no ornament. */
.fish-moment {
  position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);
  color:#e2f1f4;font:600 clamp(28px,5vw,54px)/1.15 Georgia,serif;
  text-align:center;pointer-events:none;
}
.fish-guide-open,.escape-recast,.fish-guide button {
  border:0;background:none;color:#eed296;font:16px/1.4 Georgia,serif;
  min-height:44px;padding:10px 16px;cursor:pointer;pointer-events:auto;
}
.fish-guide-open {position:absolute;top:52px;left:8px;}
.escape-recast {position:absolute;top:53%;left:50%;transform:translateX(-50%);}
.fish-guide {position:absolute;left:50%;top:48%;transform:translateX(-50%);width:min(520px,85vw);text-align:center;pointer-events:auto;}
.fish-guide h2 {color:#e1edf0;font:28px/1.2 Georgia,serif;margin:0 0 12px;}
.fish-guide p {color:#bbcbd2;font:16px/1.5 Georgia,serif;}
.fish-guide button:focus-visible,.fish-guide-open:focus-visible,.escape-recast:focus-visible {outline:2px solid #eed296;outline-offset:3px;}
.fish-guide[hidden],.fish-guide-open[hidden],.fish-moment[hidden],.escape-recast[hidden] {display:none;}
.nick-prompt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(0, 0, 0, 0.94);
  z-index: 5;
}
.nick-prompt[hidden] {
  display: none;
}
.nick-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px 34px;
  background: none;
  border: 0;
  min-width: 260px;
}
.nick-label {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: rgb(232, 210, 150);
}
.nick-input {
  width: 220px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border: 0;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
}
.nick-done {
  background: none;
  border: 0;
  color: rgb(232, 210, 150);
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  padding: 6px 22px;
}
.nick-input:focus-visible,.nick-done:focus-visible,.score-retry:focus-visible {
  outline:2px solid #e8d296;outline-offset:4px;
}
.nick-label,.score-status,.entry-error {white-space:pre-wrap;overflow-wrap:anywhere;max-width:80vw;}
.entry-error {position:absolute;bottom:10%;left:10%;color:#ffe5ca;max-height:24vh;overflow:auto;}
.score-status {font:12px/1.4 sans-serif;max-height:18vh;overflow:auto;}
.score-retry {color:#e8d296;background:none;border:0;padding:10px;font:inherit;cursor:pointer;}
.start-row-name {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.start-row-kg {flex:none;}

@media (prefers-reduced-motion: reduce) {
  .aim-lock {
    transition: none;
  }
}