/* ============================================================
   wide.css — ⭐⭐⭐ v0.681 — THE PLAYFIELD OWNS THE MIDDLE OF A BIG SCREEN.
   (Odaroo, 2026-08-06, on a desktop monitor: "whenever we play on a large screen, use the real
   estate smartly… put the Ink Rink in the middle, and anything else — Disc-Ink, all of them.
   Always showcase the middle, and if you have boxes there underneath, the inklet should feel
   that way.")

   ⚠⚠⚠ THE FIELDS WERE NOT "SHOVED LEFT" BY A MARGIN — THEY WERE CENTRED CORRECTLY AND THE THING
   BEING CENTRED WAS THE WRONG THING. Every one of these wraps is `justify-content:center` already,
   but the stats column is a FLEX SIBLING of the playfield, so what gets centred is
   `column + gap + field` as one block. The field then lands exactly HALF THE COLUMN right of the
   screen's true centre, and on a monitor that reads as the whole game sitting off to one side with
   a dead half beside it. MEASURED at 1600x900 and again at 2560x1080, and the offset is the same
   number on both because it is not a function of the screen at all:

     ICE-INK    +64px  = (120px #rinkSide  +  8px gap) / 2
     TETR-INK   +80px  = (150px #tetSide   + 10px gap) / 2
     PANEL-INK  +57px  = (104px #hzSide    + 10px gap) / 2
     LUMEN INK  +40px  = (86px  #lumWrap left inset - 6px right inset) / 2

   So the cure is to stop the column paying for the centring, NOT to nudge anything by hand — a
   hand-typed nudge would be a fifth place that has to be kept in step with four column widths that
   already change with `.ttn-on`, with `@media (min-width:640px)` and with an online match.

   ⚠⚠ IT IS GATED AT 1024px, WHICH IS ABOVE BOTH FOLDS ON PURPOSE. The golden rule tests 375x812
   and 906x832; neither reaches this block, so the phone layout this game is designed around is
   bit-for-bit untouched and cannot regress from anything in this file. The rule exists for the
   screens the fold sizes never described — desktop monitors, where there is room to spare and
   spending it on a lopsided field is the one thing that looks wrong.

   ⚠ WHY ABSOLUTE AND NOT A MIRRORED PADDING. A mirrored `padding-right` would have to name the
   column's width, and that width is written in four places already (82/86 folded, 104/150 at
   >=640, 124 and 184 with `.ttn-on`). Taking the column out of flow means the field is centred on
   the wrap whatever the column happens to measure this frame — the same "one source of truth"
   reasoning as MODE_GATES and forfeitCups(). The column keeps its own vertical placement, which
   is its `margin-top`, unchanged.
   ⚠ There is no overlap risk at these sizes and it is not left to trust: `inkCentreFaults()` in
   js/inktest.js measures both the offset AND the column-vs-field clearance on every sweep, and a
   field that grew wide enough to reach its own stats column fails the build.
   ============================================================ */
@media (min-width:1024px){

  /* TETR-INK, PANEL-INK, ICE-INK — the stats column stops being centring ballast and simply
     stands at the left edge of the wrap. `top:auto` keeps the static position it already had, so
     the `margin-top` that lines each column up under its inklet still decides the height. */
  #tetSide, #hzSide, #rinkSide{
    position:absolute; left:8px; top:auto; z-index:6;
  }
  /* ⚠ AND THE WRAP'S OWN SIDE PADDING HAS TO BE SYMMETRIC OR THE FIELD IS STILL OFF-CENTRE by half
     the difference. #rinkWrap carried `padding-right:10px` alone (v3.58, when the ice was the only
     thing in the row); that is 5px of lean once the column is out of the way. */
  #rinkWrap{ padding-right:0; padding-left:0; }

  /* LUMEN INK has no flex column — its lean is the 86px left inset that clears the inkling and the
     NEXT box against a 6px right one. Matched, so the field is centred and the inklet still has
     its lane. */
  #lumWrap{ padding-left:86px; padding-right:86px; }
}