/* ══════════════════════════════════════════════════════════════════════════
   AQUARIUM ARRANGE — child-friendly decoration editor
   ──────────────────────────────────────────────────────────────────────────
   Pairs with aquarium-arrange.js. Purely additive: loads after every other
   stylesheet and only styles its own injected chrome plus an arrange-mode
   state class on #aquarium.

   Finger-first sizing rules used throughout:
     • every tappable thing is ≥ 56px (dock buttons are 60px, handles 48px)
     • ≥ 12px of dead space between neighbouring buttons
     • no long-press, no double-tap, no drag-precision below ~20px
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 1. THE "ARRANGE" PILL (top-right of the tank) ═══════════════ */

#aquariumArrangeBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 60; /* above decorations (≤20) and the overview toggle (55) */

  display: none; /* JS shows it once there is at least one decoration */
  align-items: center;
  gap: 7px;

  height: 44px;
  padding: 0 16px 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 22px;

  background-color: rgba(9, 16, 40, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(4, 14, 44, 0.35);

  color: #fff;
  font-family: var(--gl-font-display, 'Fredoka', sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, background-color 0.2s ease;
}

#aquariumArrangeBtn.is-visible {
  display: inline-flex;
}

#aquariumArrangeBtn:active {
  transform: scale(0.94);
  background-color: rgba(9, 16, 40, 0.62);
}

#aquariumArrangeBtn .arr-pill-icon {
  font-size: 17px;
  line-height: 1;
}

/* The pill has no job while the Progress overview is over the tank, and it
   would collide with the overview chrome. */
#aquarium.overview-active #aquariumArrangeBtn {
  display: none !important;
}

/* ═══════════════ 1b. COMPOSITING — precautionary ═══════════════════════════
   The plants animate `transform` to sway, which promotes each to its own
   compositing layer; a composited element can paint above a non-composited
   sibling regardless of z-index. Promoting the decorations too puts every
   participant on the same footing.

   Honest status: this was added while chasing a reported layering fault that
   turned out to be neither this nor a bug at all. It has NOT been shown to be
   necessary — it is kept only because WebKit is the engine in play and the
   cost is one hint. Delete it if it ever gets in the way. */
#aquarium .aquarium-decoration,
#aquarium .seaweed,
#aquarium .ribbon-kelp {
  will-change: transform;
}

/* ═══════════════ 2. ARRANGE MODE — tank state ═══════════════ */

/* A soft inner vignette so the chrome reads over any purchased background. */
#aquarium.arrange-mode::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(6, 20, 59, 0.34) 0%, transparent 22%),
    linear-gradient(to top, rgba(6, 20, 59, 0.42) 0%, transparent 26%);
}

/* Fish keep swimming (kids like that) but step back visually so the
   decorations are obviously the thing being edited. */
#aquarium.arrange-mode .aquarium-creature {
  opacity: 0.4 !important;
  transition: opacity 0.3s ease;
}

/* The decorations themselves become touchable. The inline style written by
   aquarium-items.js sets pointer-events:none, hence !important. */
#aquarium.arrange-mode .aquarium-decoration {
  pointer-events: auto !important;
  cursor: grab;
  touch-action: none; /* we own the gestures — no browser pan/zoom */
  -webkit-tap-highlight-color: transparent;
}

/* iOS-homescreen-style jiggle: the universal "you can move me" signal.
   Applied to the wrapper, so it composes with the item's own rotation which
   lives on the container's transform. */
#aquarium.arrange-mode .aquarium-decoration .arr-wobble {
  animation: arrWobble 1.1s ease-in-out infinite;
  transform-origin: 50% 85%;
}

#aquarium.arrange-mode .aquarium-decoration.is-selected .arr-wobble,
#aquarium.arrange-mode .aquarium-decoration.is-dragging .arr-wobble {
  animation: none;
}

@keyframes arrWobble {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}

@media (prefers-reduced-motion: reduce) {
  #aquarium.arrange-mode .aquarium-decoration .arr-wobble {
    animation: none;
  }
}

/* ═══════════════ 3. SELECTION RING + CORNER HANDLES ═══════════════ */

/* The ring is drawn on the container, so it rotates with the item — the
   child sees the box turn as they turn the decoration. */
#aquarium .aquarium-decoration.is-selected::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 3px dashed rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  background: rgba(9, 16, 40, 0.18);
  box-shadow: 0 0 0 2px rgba(6, 20, 59, 0.35), 0 6px 18px rgba(4, 14, 44, 0.3);
  pointer-events: none;
}

#aquarium .aquarium-decoration.is-dragging {
  cursor: grabbing;
  filter: drop-shadow(0 10px 14px rgba(4, 14, 44, 0.45));
}

.arr-handle {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(9, 16, 40, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(4, 14, 44, 0.45);

  display: none; /* only on the selected item */
  align-items: center;
  justify-content: center;

  color: #fff;
  font-size: 21px;
  line-height: 1;
  z-index: 3;

  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#aquarium .aquarium-decoration.is-selected .arr-handle {
  display: flex;
}

.arr-handle:active {
  background: var(--gl-sun, #FC8008);
  transform: scale(1.08);
}

/* BOTH handles sit on the TOP corners, which looks wrong for a resize grip
   until you remember where decorations live: on the sand, at the very bottom
   of the tank. A bottom-right grip on a starfish resting on the floor lands
   below the tank's overflow edge and can't be touched at all. Top corners are
   always inside the tank and always reachable.

   Sat outside the item's box so they never cover the artwork the child is
   judging. Small decorations end up with handles bigger than themselves —
   that is the right trade on a phone. */
.arr-handle-rotate { top: -38px; right: -38px; }
.arr-handle-scale  { top: -38px; left: -38px; }

/* ═══════════════ 4. THE DOCK — top of the tank, NOT the bottom ═══════════════

   Decorations live on the sand in the bottom fifth of the tank, which is
   exactly where a phone-shaped app wants to put its toolbar. A bottom dock
   made the items underneath it ungrabbable, so the whole panel lives in the
   empty water at the top instead.

   The reach that costs (tap an item at the bottom, press a button at the top)
   is paid back by the direct controls that sit ON the item: drag to move,
   pinch to turn and resize, and the two corner handles. The dock is the
   fallback for a child who can't manage a two-finger gesture, not the primary
   path.                                                                     */

#arrangeDock {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%) translateY(-150%);
  z-index: 62;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;

  max-width: calc(100% - 16px);
  padding: 11px 12px 9px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.3);

  background: rgba(9, 16, 40, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(4, 14, 44, 0.45);

  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

#aquarium.arrange-mode #arrangeDock {
  transform: translateX(-50%) translateY(0);
}

.arr-dock-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* The layer row only earns its space when the selected decoration actually
   overlaps something — see selectionOverlapsAnything(). Collapsing rather than
   display:none keeps the dock's resize legible instead of a jump. */
#arrangeDepthRow {
  overflow: hidden;
  max-height: 62px;
  opacity: 1;
  transition: max-height 0.22s ease, opacity 0.18s ease, margin 0.22s ease;
}

#arrangeDepthRow.is-hidden {
  max-height: 0;
  opacity: 0;
  margin-top: -9px; /* swallow the dock's row gap too */
  pointer-events: none;
}

/* The hint rides inside the panel, so it can never end up over the sand the
   child is trying to touch. */
.arr-dock-hint {
  max-width: 340px;
  padding: 0 4px;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--gl-font-display, 'Fredoka', sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  min-height: 15px;
}

/* While editing, the pill's job is done by the dock's Done button — two exits
   in two corners is one too many. */
#aquarium.arrange-mode #aquariumArrangeBtn {
  display: none !important;
}

.arr-btn {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.14);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;

  color: #fff;
  font-family: var(--gl-font-display, 'Fredoka', sans-serif);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.12s ease, background 0.2s ease, opacity 0.2s ease;
}

/* Never wrap: CJK breaks at any character, so a translated label silently
   wrapped to three lines and spilled out of the button instead of widening it.
   With nowrap an over-long label overflows horizontally, which is visible and
   which the locale test can actually detect. */
.arr-btn .arr-btn-label {
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  opacity: 0.85;
}

.arr-btn:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.3);
}

/* Nothing selected → the per-item buttons are visibly asleep rather than
   gone, so the dock never changes width under the child's finger. */
.arr-btn[disabled] {
  opacity: 0.3;
  pointer-events: none;
}

.arr-btn-done {
  width: auto;
  min-width: 90px;
  height: 50px;
  border-radius: 25px;
  padding: 0 18px;
  border-color: transparent;
  background: linear-gradient(180deg, var(--gl-sun-hi, #FFA547), var(--gl-sun, #FC8008));
  box-shadow: 0 4px 0 var(--gl-sun-edge, #C95F00);
  font-size: 17px;
  font-weight: 700;
}

.arr-btn-done:active {
  box-shadow: 0 1px 0 var(--gl-sun-edge, #C95F00);
  transform: translateY(3px) scale(0.98);
}

/* Icons inside a round button (Back / Front use SVG, not a glyph). */
.arr-btn svg {
  display: block;
  pointer-events: none;
}

/* ── Depth meter ───────────────────────────────────────────────────────────
   Sits between Back and Front. A one-step depth change is often invisible —
   the neighbour may not overlap the item at all — which reads to a child as
   a dead button. The dot moves on every single press, so the tap always has
   a visible result even when the tank doesn't change. */
.arr-depth-meter {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 2px;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}

.arr-depth-meter.is-active { opacity: 1; }

.arr-depth-end {
  /* Same reason as .arr-btn-label: Japanese "うしろ" wrapped to two lines
     beside the track. Anything too long now overflows visibly instead. */
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--gl-font-display, 'Fredoka', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* The track is a real slider: drag the handle, or tap anywhere on it to jump.
   It reads as one, so it had better behave as one — a tester's first instinct
   was to drag the handle rather than tap the buttons at the ends, and they
   were right. Padded vertically so the grab area is finger-sized (28px) while
   the drawn track stays a hairline. */
.arr-depth-track {
  position: relative;
  width: 112px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 2px rgba(4, 14, 44, 0.4);

  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* Invisible finger-sized hit area around the hairline track. */
.arr-depth-track::after {
  content: "";
  position: absolute;
  inset: -14px -10px;
}

.arr-depth-track:active { cursor: grabbing; }

.arr-depth-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(4, 14, 44, 0.55);
  transition: left 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2), transform 0.12s ease;
  pointer-events: none; /* the track owns the gesture */
}

.arr-depth-track:active .arr-depth-dot {
  transform: scale(1.15);
}

/* Row 3 holds session controls (undo / tidy / done) — wider and shorter than
   the round transform buttons so the rows never read as one long menu. */
.arr-btn-secondary {
  width: auto;
  min-width: 84px;
  height: 50px;
  border-radius: 25px;
  padding: 0 16px;
  flex-direction: row;
  gap: 7px;
  font-size: 19px;
}

.arr-btn-secondary .arr-btn-label {
  font-size: 13px;
  opacity: 1;
}

/* ═══════════════ 6. FLOOR GUIDE (shown while dragging) ═══════════════ */

#arrangeFloorGuide {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  z-index: 24;
  border-top: 3px dashed rgba(255, 255, 255, 0.55);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

#arrangeFloorGuide.is-visible { opacity: 1; }
#arrangeFloorGuide.is-snapped {
  border-top-color: var(--gl-sun-hi, #FFA547);
  opacity: 1;
}

/* ═══════════════ 7. SMALL SCREENS ═══════════════ */

@media (max-width: 400px) {
  #arrangeDock { padding: 9px 9px 8px; }
  .arr-dock-row { gap: 7px; }
  .arr-btn { width: 52px; height: 52px; font-size: 21px; }
  /* width:auto must be RE-ASSERTED here. Both media blocks sit after the base
     rules, so their `.arr-btn { width: … }` was overriding
     `.arr-btn-secondary { width: auto }` and pinning Undo/Done to the round
     button's width — which only showed up once a translation was longer than
     the English: German "Rückgängig" spilled straight out of a 52px button. */
  .arr-btn-secondary { width: auto; min-width: 74px; height: 46px; padding: 0 12px; }
  .arr-btn-done { width: auto; min-width: 82px; height: 46px; padding: 0 14px; font-size: 16px; }
  .arr-dock-hint { font-size: 11.5px; }
  .arr-depth-track { width: 92px; }
}

/* Short window: the tank has a 400px min-height, so on a small phone in
   landscape a three-row dock would eat most of the water. Compress it rather
   than let it crowd the sand the child is working on. */
@media (max-height: 620px) {
  #arrangeDock { gap: 6px; padding: 8px 10px 7px; }
  .arr-dock-row { gap: 8px; }
  .arr-btn { width: 48px; height: 48px; font-size: 20px; }
  .arr-btn .arr-btn-label { font-size: 9px; }
  .arr-btn svg { width: 21px; height: 21px; }
  .arr-btn-secondary { width: auto; min-width: 72px; height: 42px; font-size: 17px; }
  .arr-btn-done { width: auto; min-width: 80px; height: 42px; font-size: 15px; }
  .arr-depth-track { width: 92px; height: 5px; }
  .arr-dock-hint { font-size: 11px; min-height: 13px; }
}

/* Fullscreen: clear the notch. */
#aquarium:fullscreen #arrangeDock,
#aquarium:-webkit-full-screen #arrangeDock,
#aquarium.aquarium-fullscreen #arrangeDock {
  top: calc(14px + env(safe-area-inset-top, 0px));
}

#aquarium:fullscreen #aquariumArrangeBtn,
#aquarium:-webkit-full-screen #aquariumArrangeBtn,
#aquarium.aquarium-fullscreen #aquariumArrangeBtn {
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
}