/* ============================================================
   CATamaran — the game
   Depends on css/styles.css for tokens and the button base, and on
   css/styles.css @media (max-width:640px) for the one-screen phone
   layout. Nothing here measures the chrome by hand; see docs/games.md §6.
   ============================================================ */

.game-main { padding-top: calc(var(--header-h) + 56px); padding-bottom: 90px; }
.game-wrap, .game-extra { max-width: 980px; margin: 0 auto; padding: 0 24px; }
.game-head { margin-bottom: 26px; }
.game-head h1 {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.08; letter-spacing: -.025em; margin-bottom: 14px;
  /* styles.css uppercases every h1 on the site. This one title is a pun that
     only works with the case it is written in, so it opts out. The name is
     CATamaran, not CATAMARAN. */
  text-transform: none;
}

.hud{display:flex;align-items:flex-end;gap:22px;margin-bottom:14px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:2px}
.stat span{font-family:var(--font-head);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.stat strong{font-family:var(--font-head);font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.hud-spacer{flex:1}

/* How much of a soaking the cat has left. Green down to amber down to red,
   because it is the one thing on the page that means "you are about to lose"
   and a colour says that faster than a number. */
.balstat{flex:1;min-width:130px;max-width:260px}
.bal .track{height:10px;border-radius:99px;background:var(--bg);border:1px solid var(--border);overflow:hidden;margin-top:6px}
.bal .track i{display:block;height:100%;border-radius:99px;width:100%;
  background:linear-gradient(90deg,#2fbf87,#5fe3a6);transition:width .08s linear}
.bal.mid .track i{background:linear-gradient(90deg,#e0a63d,#ffcf6b)}
.bal.no  .track i{background:linear-gradient(90deg,#e04a5e,#ff6f85)}

.stage-wrap{position:relative}
/* The board is 760x250 and the waves travel across it, so this game is
   landscape by nature. It is the only shape the geometry works in — the
   release line is fixed at a fraction of the width — so there is no portrait
   variant, just a nudge to turn the phone. */
canvas#stage{display:block;width:100%;aspect-ratio:760/250;
  border:1px solid var(--border);border-radius:14px;background:#050912;
  /* A held finger otherwise starts a text selection and a drag preview,
     which hijacks the tap. */
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none}
canvas#stage:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* The intro / game-over panel. Same markup and the same rules as every other
   game — attachBoardUI() finds these by id, so the ids are load-bearing. */
.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:28px;border-radius:14px;
  background:rgba(6,9,18,.9);backdrop-filter:blur(5px);text-align:center;overflow-y:auto}
.overlay[hidden]{display:none}
.overlay h2{font-family:var(--font-head);font-size:clamp(1.3rem,3.6vw,1.9rem);letter-spacing:-.02em;margin-bottom:12px;text-transform:none}
.overlay p{color:var(--text-dim);font-size:.94rem;max-width:48ch;margin:0 auto 14px}
.overlay .final{font-family:var(--font-head);font-size:3.2rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
  background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:4px}
.overlay .final-label{font-family:var(--font-head);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:20px}
.ov-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}

.note{margin-top:26px;padding-left:16px;border-left:2px solid var(--border);color:var(--text-faint);font-size:.88rem;max-width:74ch}
.note b{color:var(--text-dim);font-weight:500}

/* ---- the five wave buttons, which are also the release control ---- */
.pickrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px;
  justify-content:center;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.pick{display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--wc,var(--text));
  padding:7px 12px 5px;border-radius:10px;background:var(--surface);
  border:1.5px solid var(--border);
  transition:border-color .12s,background .12s,transform .1s,box-shadow .12s}
.pick:hover{border-color:var(--border-2)}
.pick:active{transform:translateY(1px)}
.pick em{font-style:normal;font-family:var(--font-mono);font-size:.56rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
/* A tap sends immediately, so there is no selected wave to leave highlighted.
   A button lights in its own colour for a moment to confirm the send went
   out, then drops back. */
.pick.sent{border-color:var(--wc,var(--accent));
  background:color-mix(in srgb,var(--wc,#ffb057) 22%,transparent)}
.pick.sent em{color:var(--wc,var(--accent))}
/* The release cue belongs to the moment, not to any one wave, so it lights
   the whole row. On a phone this is the only "now" cue away from the water. */
.pickrow.armed .pick{border-color:rgba(95,227,166,.8);
  box-shadow:0 0 0 2px rgba(95,227,166,.16)}
.pickrow.armed .pick em{color:#5fe3a6}

.say{font-family:var(--font-head);font-size:.92rem;min-height:2.4em;
  color:var(--text-dim);margin-top:10px;text-align:center}
.say.ok{color:#5fe3a6} .say.no{color:#ff6f85}

/* The wave icons inside the tutorial card. */
.tutwaves{display:flex;flex-wrap:wrap;gap:14px;margin:11px 0 3px;justify-content:center}
.tutwaves span{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.tutwaves em{font-style:normal;font-family:var(--font-mono);font-size:.56rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}

.rotate{display:none;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.11em;
  text-transform:uppercase;color:#ffcf6b;text-align:center;margin-top:8px}

@media (max-width: 640px){
  .game-wrap, .game-extra { padding: 0 12px; }
  .pickrow{gap:6px;margin-top:8px}
  .pick{padding:5px 9px 4px}
  .say{font-size:.8rem;min-height:2.2em;margin-top:6px}
  .balstat{min-width:96px}
  .overlay{padding:16px;border-radius:12px}
  .overlay p{font-size:.84rem;margin-bottom:10px}
  .overlay h2{margin-bottom:8px}
  .tutwaves{gap:10px}
  /* Portrait gives a 3:1 board a very short strip to live in: it is width
     bound at about 14% of the screen. It plays, but sideways is the real
     thing, so say so rather than pretend otherwise. */
  @media (orientation: portrait){
    .rotate{display:block}
    /* And stop the stage box stretching. The shared rule hands the stage
       whatever height is left over, which is right for the nine games whose
       boards are close to square: they fill it. A 3:1 board in portrait is
       width bound at 366x120, so it was sitting in the middle of a 366x488
       bordered panel with 368px of nothing around it, and the overlay
       stretched over the whole empty thing.

       Hugging the canvas alone clipped the overlay instead: it is pinned to
       this box, and 120px does not hold a title, three lines and a row of
       buttons — Start went straight off the bottom. Giving the box a floor
       big enough for the overlay works, but then it is half empty again for
       the whole run, which is the original complaint.

       So: the box hugs the board, and the OVERLAY is allowed out of it. It
       anchors to the top, takes at least the board's height and as much more
       as its content needs, and sits above the wave buttons on its own
       z-index. Nothing is clipped, nothing is empty, and covering the
       controls while it is up is correct anyway — there is no play to do
       until Start is pressed. */
    .game-wrap .stage-wrap{flex:0 0 auto}
    .stage-wrap .overlay{
      inset:auto; top:0; left:0; right:0;
      height:auto; min-height:100%; z-index:5;
    }
  }
}

/* ---- a phone, turned sideways ----
   This is the one that matters for this game, and the shared one-screen rule
   in styles.css does not cover it. That rule keys on `max-width: 640px`; a
   phone in landscape is about 844x390, so it is WIDER than 640 and gets the
   desktop layout instead — which is built for a tall window and drops the wave
   buttons off the bottom of a 390px-tall one. Measured: canvas fine at 67% of
   the screen, controls and verdict both off screen.

   The nine games before this one are all portrait-friendly, so none of them
   ever hit it. Rather than widen the shared rule and move nine games'
   goalposts for the sake of the tenth, CATamaran carries the landscape case
   itself. Same technique as the shared rule: one flex column the height of the
   viewport, everything at its natural height, only the stage flexes. */
@media (orientation: landscape) and (max-height: 600px){
  main.game-main{ padding-top: calc(var(--header-h) + 6px); padding-bottom: 6px; }
  .game-main .game-wrap{
    display:flex; flex-direction:column;
    height: calc(100vh - var(--header-h) - 12px);
    height: calc(100dvh - var(--header-h) - 12px);
    padding: 0 10px; max-width: none;
  }
  .game-wrap > *{ flex: 0 0 auto; }
  /* The title band is pure decoration with 390px of height to spend. */
  .game-wrap .game-head{ display:none; }
  .game-wrap .play{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  .game-wrap .play > *{ flex: 0 0 auto; }
  /* min-height:0 is load-bearing: without it the flex item refuses to shrink
     below its content and the canvas pushes off the bottom. */
  .game-wrap .stage-wrap{
    flex:1 1 auto; min-height:0;
    display:flex; align-items:center; justify-content:center;
  }
  .stage-wrap canvas#stage{ width:auto; height:auto; max-width:100%; max-height:100%; }
  .hud{ gap:14px; margin-bottom:4px; }
  .stat span{ font-size:.52rem; }
  .stat strong{ font-size:.92rem; }
  .balstat{ min-width:90px; }
  .bal .track{ height:8px; margin-top:4px; }
  .pickrow{ margin-top:6px; gap:6px; }
  .pick{ padding:4px 8px 3px; }
  .say{ min-height:1.3em; font-size:.72rem; margin-top:4px; }
  .rotate{ display:none; }
  .overlay{ padding:12px; }
  .overlay h2{ font-size:1.1rem; margin-bottom:6px; }
  .overlay p{ font-size:.78rem; margin-bottom:8px; }
  .overlay .final{ font-size:2.2rem; }
  .overlay .final-label{ margin-bottom:10px; }
}