/* ==========================================================================
   MARKLING — THE LABYRINTH, page dress
   The canvas does the real drawing; this file frames it, and styles the
   dispute screen (a DOM dialog, so it stays focusable and readable).
   Reuses the pixel font and the tomb-card colour world from style.css.
   ========================================================================== */

.lab-stage{position:relative;max-width:920px;margin:0 auto}
.lab-stage canvas{width:100%;max-width:880px;height:auto;display:block;margin:0 auto;
  border:4px solid #1B5566;border-radius:6px;background:#04202B;
  image-rendering:pixelated;cursor:pointer;outline-offset:4px;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.lab-stage canvas:focus-visible{outline:3px solid #5FD4C8}

/* d-pad, labyrinth flavour: a cross plus ARGUE */
.lab-pad{display:none;justify-content:center;align-items:center;gap:8px;padding:12px}
.lab-pad .lab-cross{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,56px);gap:6px}
.lab-pad button{min-width:56px;min-height:56px;border-radius:12px;border:2px solid #1B5566;
  background:#0A3542;color:#5FD4C8;font-size:1.25rem;cursor:pointer;
  touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.lab-pad button:active{background:#14424F}
.lab-pad [data-lab="ArrowUp"]{grid-column:2;grid-row:1}
.lab-pad [data-lab="ArrowLeft"]{grid-column:1;grid-row:2}
.lab-pad [data-lab="ArrowDown"]{grid-column:2;grid-row:2}
.lab-pad [data-lab="ArrowRight"]{grid-column:3;grid-row:2}
.lab-pad .lab-talk{font-family:'Press Start 2P',monospace;font-size:.55rem;padding:0 16px;min-height:118px}
@media (pointer:coarse){.lab-pad{display:flex}}

/* the HUD line under the canvas: counter + sound toggle */
.lab-count-line{font-family:'Press Start 2P',monospace;font-size:.6rem;color:#6FA3AD;
  text-align:center;margin:10px 0 0;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.lab-sound{font-family:'Press Start 2P',monospace;font-size:.55rem;color:#5FD4C8;
  background:#0A3542;border:2px solid #1B5566;border-radius:8px;padding:8px 12px;cursor:pointer;min-height:34px}
.lab-sound:hover,.lab-sound:focus-visible{border-color:#5FD4C8}

/* ---------------------------------------------------- the dispute screen */
/* padding-top clears the sticky nav (its live height is --lab-top, set by
   labyrinth.js), so the close button is never trapped under the bar on a
   small phone. */
#lab-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(2,10,16,.82);z-index:60;
  padding:calc(var(--lab-top,64px) + 8px) 14px 14px}
#lab-modal.open{display:flex}
#lab-modal .lab-card{background:#062A36;border:4px solid #5FD4C8;border-radius:4px;
  max-width:760px;width:100%;margin:auto;padding:0;color:#e7dcf5;
  box-shadow:0 0 60px rgba(95,212,200,.45);position:relative;
  max-height:calc(100vh - var(--lab-top,64px) - 22px);
  max-height:calc(100dvh - var(--lab-top,64px) - 22px);overflow:auto}
#lab-modal .close-x{position:absolute;top:2px;right:4px;min-width:44px;min-height:44px;z-index:2;
  display:grid;place-items:center;line-height:1;border-radius:8px;background:rgba(6,42,54,.7);
  border:none;color:#6FA3AD;font-size:1.4rem;cursor:pointer}
#lab-modal .close-x:hover{color:#5FD4C8}

.lab-scenewrap{position:relative;background:#04202B;border-bottom:4px solid #1B5566}
.lab-scenewrap canvas{width:100%;height:auto;display:block;image-rendering:pixelated}
.lab-bar{position:absolute;display:flex;flex-direction:column;gap:4px;
  font-family:'Press Start 2P',monospace;font-size:.5rem;color:#C2DEE2;
  background:rgba(4,16,28,.72);padding:8px 10px;border-radius:6px}
/* The duck - the player - reads from the top left, where a reader starts;
   the opponent answers from the bottom right. */
.lab-bar-duck{top:10px;left:10px}
.lab-bar-foe{bottom:10px;right:10px;align-items:flex-end}
.lab-bar .lab-bar-sub{color:#6FA3AD}
.lab-pips{display:flex;gap:3px}
.lab-pips span{width:16px;height:9px;background:#5FD4C8;border-radius:1px}
.lab-pips span.lost{background:#14424F}

.lab-panel{padding:18px 20px 20px;border-top:none}
.lab-round{font-family:'Press Start 2P',monospace;font-size:.5rem;color:#6FA3AD;margin-bottom:10px}
.lab-claim{font-family:'Press Start 2P',monospace;font-size:.68rem;line-height:1.9;color:#E9EFF7;
  border:2px solid #1B5566;border-radius:6px;padding:14px;background:#04202B}
.lab-claim .lab-speaker{color:#5FD4C8;display:block;margin-bottom:8px}
.lab-why{font-size:.88rem;line-height:1.6;color:#C2DEE2;margin:12px 0 0;min-height:1em}
.lab-why b{color:#E8B04B}
.lab-why .why-win{color:#5FD4C8}
.lab-why .why-lose{color:#E8886F}
.lab-answers{display:grid;gap:8px;margin-top:14px}
/* The group takes focus when a round opens (see showRound), so a keyboard
   reader lands on the options without any single one being ringed. It is a
   programmatic target only - no visible outline, nothing to read as a hint. */
.lab-answers:focus{outline:none}
.lab-answers button{text-align:left;font-family:'Press Start 2P',monospace;font-size:.58rem;
  line-height:1.8;padding:12px 14px;border-radius:6px;cursor:pointer;min-height:44px;
  background:#0A3542;border:2px solid #1B5566;color:#C2DEE2}
.lab-answers button:hover:not(:disabled),.lab-answers button:focus-visible{border-color:#5FD4C8;color:#E9EFF7}
.lab-answers button:disabled{opacity:.45;cursor:default}
.lab-answers button.picked-win{border-color:#5FD4C8;color:#5FD4C8;opacity:1}
.lab-answers button.picked-weak{border-color:#E8B04B;color:#E8B04B;opacity:1}
.lab-answers button.picked-lose{border-color:#E8886F;color:#E8886F;opacity:1}
.lab-answers .lab-continue{text-align:center;background:#14424F;color:#5FD4C8}

/* the 20-second bar in the centre chamber (never under reduced motion) */
.lab-timerwrap{height:8px;background:#04202B;border:2px solid #1B5566;border-radius:4px;margin-top:10px}
.lab-timer{height:100%;background:#E8B04B;border-radius:2px;transition:width .1s linear}

/* PRECEDENT / settle cards share the panel */
.lab-verdict{font-family:'Press Start 2P',monospace;font-size:.8rem;margin:6px 0 12px}
.lab-verdict.won{color:#5FD4C8;text-shadow:0 0 12px rgba(95,212,200,.6)}
.lab-verdict.settled{color:#E8B04B}
.lab-precedent{font-size:.92rem;line-height:1.65;color:#C2DEE2;border-top:1px dashed #14424F;padding-top:12px}

/* the plain-text half below the game */

@media (prefers-reduced-motion:reduce){
  .lab-timer{transition:none}
}

/* ==========================================================================
   THE VICTORY SCREEN
   Shown once, when the thirteenth dispute is won. The water rite from the
   homepage plays on its own canvas behind a card; the duck congratulates
   from the bottom-right corner, where he lives on every other page. Nothing
   here is stored: the name goes on a certificate drawn in the browser and is
   forgotten the moment the tab closes.
   ========================================================================== */
.lab-win{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;
  padding:24px;background:#03151d}
.lab-win[hidden]{display:none}
.lab-win-water{position:absolute;inset:0;width:100%;height:100%;display:block}
.lab-win-card{position:relative;z-index:1;max-width:640px;width:100%;text-align:center;
  background:rgba(4,22,31,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(95,212,200,.35);border-radius:14px;padding:32px 26px 26px;
  max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto}
.lab-win-eyebrow{font-size:.56rem;letter-spacing:.18em;color:#9BC0C6;margin:0 0 14px}
.lab-win-title{font-size:clamp(1.5rem,5.5vw,2.6rem);color:#5FD4C8;
  text-shadow:0 0 22px rgba(95,212,200,.55);margin:0 0 16px;line-height:1.25}
.lab-win-slogan{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(1rem,2.6vw,1.3rem);
  color:#E9EFF7;margin:0 0 26px}
.lab-win-cert{border-top:1px solid rgba(95,212,200,.2);border-bottom:1px solid rgba(95,212,200,.2);
  padding:18px 0;margin-bottom:20px}
.lab-win-cert label{display:block;font-size:.8rem;color:#9BC0C6;margin-bottom:10px}
.lab-win-cert label span{opacity:.7}
.lab-win-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.lab-win-row input{flex:1 1 200px;max-width:280px;min-height:44px;padding:10px 12px;
  background:rgba(3,21,29,.8);border:1px solid rgba(95,212,200,.35);border-radius:8px;
  color:#E9EFF7;font-size:16px;font-family:inherit}
.lab-win-row input:focus-visible{outline:2px solid #5FD4C8;outline-offset:2px}
.lab-win-btn{min-height:44px;padding:10px 18px;border:1px solid #5FD4C8;border-radius:8px;
  background:#14424F;color:#5FD4C8;font:700 .78rem 'Bricolage Grotesque',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.lab-win-btn:hover,.lab-win-btn:focus-visible{background:#5FD4C8;color:#04202B}
.lab-win-cta{font-size:.9rem;color:#9BC0C6;margin:0 0 20px;line-height:2}
.lab-win-cta a{color:#5FD4C8;text-decoration:underline;text-underline-offset:3px}
.lab-win-close{min-height:44px;padding:8px 16px;background:none;border:1px solid rgba(95,212,200,.3);
  border-radius:8px;color:#9BC0C6;font:600 .72rem 'Bricolage Grotesque',sans-serif;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.lab-win-close:hover,.lab-win-close:focus-visible{color:#E9EFF7;border-color:#5FD4C8}
.lab-win-duck{position:absolute;right:44px;bottom:0;z-index:2;transform:translateY(105%);
  transition:transform .6s cubic-bezier(.34,1.3,.64,1);cursor:pointer}
.lab-win-duck.up{transform:translateY(0)}
.lab-win-duck canvas{display:block;image-rendering:pixelated}
.lab-win-bubble{position:absolute;bottom:100px;right:0;transform:scale(0);transform-origin:bottom right;
  background:var(--card,#0B2A35);border:1px solid rgba(95,212,200,.35);border-radius:8px;
  border-bottom-right-radius:0;padding:9px 13px;font-size:.78rem;color:#E9EFF7;white-space:nowrap}
.lab-win-duck.up .lab-win-bubble.show{transform:scale(1);transition:transform .25s cubic-bezier(.34,1.4,.64,1)}
@media (max-width:700px){
  .lab-win-duck{right:10px}
  .lab-win-duck canvas{width:66px;height:70px}
  .lab-win-bubble{bottom:76px;white-space:normal;max-width:200px}
  .lab-win-card{padding:24px 18px 20px}
}
@media (prefers-reduced-motion:reduce){
  .lab-win-duck{transition:none;transform:none}
  .lab-win-duck.up .lab-win-bubble.show{transition:none}
}

/* The caveat, moved off the top of the page. A reader who has just arrived
   wants to know what the game is; the small print about jurisdictions belongs
   after they have played it, in the size small print is set in. */
.lab-footnote{max-width:640px;margin:18px auto 0;text-align:center;
  font-size:.76rem;line-height:1.6;color:#7FA6AE}
.lab-footnote b{color:#9BC0C6}

/* ==========================================================================
   FULL-SCREEN MODE
   The first click or tap on the maze promotes it to a fixed overlay that
   fills the viewport below the sticky nav - the nav stays visible and
   clickable on top, exactly as everywhere else on the site. Deliberately a
   CSS overlay rather than the Fullscreen API: iOS Safari has no element
   fullscreen at all, and the native kind would swallow the nav. --lab-top is
   the nav's live height, kept fresh by labyrinth.js on scroll and resize;
   the canvas is sized in JS to the largest 88:46 box that fits. Exit: the
   EXIT chip, Escape, or the phone's back button (a history entry is pushed
   on entry, so back closes the overlay instead of leaving the page).
   ========================================================================== */
:root{--lab-top:64px}
body.lab-fs{overflow:hidden}
body.lab-fs .lab-stage{position:fixed;left:0;right:0;top:var(--lab-top,64px);bottom:0;z-index:50;
  max-width:none;margin:0;background:#03151d;
  display:flex;align-items:center;justify-content:center;
  padding:10px calc(10px + env(safe-area-inset-right,0px))
          calc(10px + env(safe-area-inset-bottom,0px))
          calc(10px + env(safe-area-inset-left,0px));
  touch-action:none;overscroll-behavior:contain}
body.lab-fs .lab-stage canvas{max-width:none;margin:0}

.lab-fs-exit{position:fixed;z-index:55;top:calc(var(--lab-top,64px) + 10px);
  right:calc(10px + env(safe-area-inset-right,0px));
  min-height:44px;min-width:44px;padding:10px 14px;
  font-family:'Press Start 2P',monospace;font-size:.55rem;letter-spacing:.04em;
  color:#5FD4C8;background:rgba(6,42,54,.88);border:2px solid #1B5566;border-radius:8px;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.lab-fs-exit:hover,.lab-fs-exit:focus-visible{border-color:#5FD4C8;color:#E9EFF7}
.lab-fs-exit[hidden]{display:none}

/* On touch devices the d-pad rides on top of the overlay: cross on the left
   thumb, ARGUE on the right, translucent so the maze reads through it. The
   stage reserves the strip so the duck is never hidden under a button. */
@media (pointer:coarse){
  body.lab-fs .lab-stage{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  body.lab-fs .lab-pad{position:fixed;left:0;right:0;bottom:0;z-index:52;
    justify-content:space-between;align-items:flex-end;
    padding:8px calc(16px + env(safe-area-inset-right,0px))
            calc(10px + env(safe-area-inset-bottom,0px))
            calc(16px + env(safe-area-inset-left,0px));
    background:linear-gradient(180deg,rgba(3,21,29,0),rgba(3,21,29,.72))}
  body.lab-fs .lab-pad button{background:rgba(10,53,66,.82)}
  body.lab-fs .lab-pad .lab-talk{min-height:100px}
  /* Landscape phone: height is the scarce resource, so the pad stops
     reserving a strip and floats over the lower corners instead - the
     usual mobile-game arrangement, thumbs where thumbs already are. */
  @media (orientation:landscape){
    body.lab-fs .lab-stage{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
    body.lab-fs .lab-pad{background:none;pointer-events:none}
    body.lab-fs .lab-pad button{pointer-events:auto;opacity:.85}
    body.lab-fs .lab-pad .lab-talk{min-height:84px}
  }
}