/* ===========================================================================
   The pre-fight flow: loading -> start -> choose difficulty -> choose glove.

   The original build put gloves, difficulty and start on one panel. The design
   splits them into four steps, so #menu becomes a step machine. Every control
   client.js talks to still exists with the same id / data attribute -- they are
   just distributed across the steps, and the glove picker is driven from a
   carousel that clicks the (now visually hidden) original buttons.
   ========================================================================= */

@font-face{font-family:'AGaramond';src:url('media/agaramond-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'AGaramond';src:url('media/agaramond-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#8f201d;            /* deep brick red -- headings, rules, stamps */
  --ink-deep:#6d1512;       /* selected pill */
  --ink-soft:#432724;       /* unselected pill label */
  --paper:#f8f2e9;          /* stamp face */
}

/* --- the animated aurora, over the WebGL arena ---------------------------
   Both are absolutely positioned inside #stage, so they paint above the canvas
   three.js appends there. The still is the same frame as the video's poster and
   holds the backdrop on its own wherever autoplay is refused -- iOS under Low
   Power Mode -- so the ring is never left showing through. */
#bgStill,#bgVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;transition:opacity .8s ease}
#bgVideo{opacity:0}
#bgVideo.on{opacity:1}

/* --- step machine -------------------------------------------------------- */
#menu{position:absolute;inset:0;left:0;top:0;max-width:none;display:block;z-index:3}
.screen{position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:6vh 5vw;gap:0}
.screen.on{display:flex;animation:screenIn .5s ease both}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --- the SaWaDiKa logotype ----------------------------------------------
   The artwork is a white alpha shape, so it is used as a mask and painted
   with a colour rather than tinted with filters. */
.mark{width:min(46vw,540px);aspect-ratio:1600/396;background:var(--ink);
  -webkit-mask:url('media/swdk-logo.png') center/contain no-repeat;
          mask:url('media/swdk-logo.png') center/contain no-repeat;
  -webkit-mask-image:image-set(url('media/swdk-master.webp') type('image/webp'),
                               url('media/swdk-logo.png')  type('image/png'));
          mask-image:image-set(url('media/swdk-master.webp') type('image/webp'),
                               url('media/swdk-logo.png')  type('image/png'))}
.mark.small{width:min(20vw,190px)}

/* --- 1. loading ----------------------------------------------------------
   Centred lockup with the progress bar under it, and the tuk-tuk driving
   across behind the type. .loadArt does the crossing and its child does the
   bounce, so the two animations are not fighting over transform. */
[data-screen="loading"]{align-items:center;justify-content:center;text-align:center;padding:0}
.loadStack{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
[data-screen="loading"] .lisa{font-size:min(4.45vh,5.6vw);margin:0 0 .1em}
[data-screen="loading"] .mark{width:min(44vh,34vw);opacity:1;animation:none}

/* client.js writes progress into #loadBar, so the track stays in the DOM and is
   simply not drawn -- the crossing tuk-tuk is the loading indicator */
.loadtrack{display:none}
.loadtrack i{display:block;height:100%;width:0;background:var(--ink);
  border-radius:3px;transition:width .3s}
/* the caption is the only place a load failure surfaces, so it stays in the
   DOM but only shows when it has something to report */
.loadWord{display:none;margin-top:1.7vh;font-size:min(1.4vh,2vw);letter-spacing:.18em;
  font-weight:700;color:var(--ink)}
.loadWord.error{display:block}

.loadArt{position:absolute;left:100%;bottom:27%;z-index:3;pointer-events:none;
  height:min(37vh,30vw);aspect-ratio:1602/1402;
  animation:drive 2.5s linear infinite;animation-delay:-.3s}
.loadArt i{display:block;width:100%;height:100%;
  background-repeat:no-repeat;background-position:center bottom;background-size:contain;
  background-image:url('media/tuk-tuk.png');
  background-image:image-set(url('media/tuk-tuk.webp') type('image/webp'),
                             url('media/tuk-tuk.png')  type('image/png'));
  animation:bob .5s ease-in-out infinite alternate}
/* the asset faces left, so it drives right-to-left across the full width */
@keyframes drive{from{transform:translateX(0)}
                 to{transform:translateX(calc(-100vw - 100%))}}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-1.4%)}}

/* --- 2. start ------------------------------------------------------------ */
.lisa{font-family:'AGaramond',Georgia,serif;font-weight:600;color:var(--ink);
  font-size:clamp(19px,2.3vw,31px);letter-spacing:.62em;margin-bottom:.55em}
.tagline{font-family:'DM Sans',sans-serif;font-weight:700;color:var(--ink);
  font-size:clamp(10px,1.05vw,14px);letter-spacing:.13em;margin:26px 0 0;max-width:none}

/* --- 3. difficulty / 4. glove headings ----------------------------------- */
#menu .display{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-style:italic;
  color:var(--ink);font-size:clamp(38px,5.4vw,74px);letter-spacing:-.5px;line-height:1;
  margin:0 0 clamp(40px,7vh,92px);text-transform:uppercase}

/* segmented pill -- the original [data-level] buttons, restyled */
#menu .difficulty{display:flex;align-items:stretch;gap:0;padding:6px;width:auto;max-width:92vw;
  background:#ffffff6b;border:1px solid #ffffff8a;border-radius:999px;
  box-shadow:0 10px 34px #4a173612;backdrop-filter:blur(6px)}
#menu .difficulty button{border:none;background:transparent;border-radius:999px;
  padding:15px clamp(20px,3.4vw,52px);font-family:'DM Sans',sans-serif;font-weight:700;
  font-size:clamp(10px,1.05vw,13px);letter-spacing:.14em;color:var(--ink-soft);
  transition:background .18s,color .18s}
#menu .difficulty button:hover{color:var(--ink)}
#menu .difficulty button.selected{background:var(--ink-deep);color:#fff6f0}
#difficultyDescription{font-family:'DM Sans',sans-serif;text-wrap:balance;font-size:clamp(13px,1.15vw,17px);
  line-height:1.7;color:#4d2b28;margin-top:clamp(24px,3.6vh,40px);max-width:42ch;min-height:2.6em}

/* --- 4/5. glove carousel ------------------------------------------------- */
.carousel{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,64px)}
.carousel .arrow{border:none;background:transparent;padding:14px;line-height:0;
  color:var(--ink);opacity:.85;transition:opacity .18s,transform .18s}
.carousel .arrow:hover{opacity:1;transform:scale(1.12)}
.carousel .arrow svg{display:block;width:clamp(20px,2vw,28px);height:auto}
#glovePreview{display:block;width:clamp(210px,26vw,340px);aspect-ratio:1;touch-action:none;cursor:grab}
#glovePreview:active{cursor:grabbing}
.gloveName{font-family:'DM Sans',sans-serif;font-weight:700;color:var(--ink);
  font-size:clamp(12px,1.3vw,17px);letter-spacing:.13em;margin-top:10px}
#gloveStatus{font-family:'DM Sans',sans-serif;font-size:clamp(12px,1.15vw,15px);
  color:#5b332e;margin-top:4px;min-height:1.5em;opacity:.8}
#retryGloves{margin-top:8px;border:1px solid #8f201d66;background:transparent;color:var(--ink);
  border-radius:999px;padding:8px 16px;font-size:9px;letter-spacing:1.6px;font-weight:700}

/* --- the torn-paper stamp button ---------------------------------------- */
.stamp{position:relative;font-family:'AGaramond',Georgia,serif;font-weight:700;
  color:var(--ink);background:rgba(255,250,243,.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid rgba(255,255,255,.5);
  font-size:clamp(15px,1.75vw,24px);letter-spacing:.055em;padding:.42em 1.05em .34em;
  transform:rotate(-2.4deg);transition:transform .2s,box-shadow .3s,background .2s}
.stamp:hover{transform:rotate(-2.4deg) translateY(-3px);background:rgba(255,250,243,.45)}
.stamp:disabled{opacity:.45;transform:rotate(-2.4deg)}
.stamp.glow{box-shadow:inset 0 1px 0 #ffffff8c,0 6px 22px #6d151233;animation:stampGlow 2.6s ease-in-out infinite}
.stamp.glow:disabled{animation:none}
@keyframes stampGlow{
  0%,100%{box-shadow:inset 0 1px 0 #ffffff8c,0 0 14px 2px #ffcf9440,0 8px 26px #6d151230}
  50%    {box-shadow:inset 0 1px 0 #ffffff8c,0 0 30px 8px #ffd9a67a,0 8px 26px #6d151230}
}
[data-screen="start"] .stamp{margin-top:30px}
[data-screen="difficulty"] .stamp{margin-top:clamp(30px,5vh,60px)}
[data-screen="glove"] .stamp{margin-top:22px}

/* --- 6. the controls card ------------------------------------------------
   The keys were only ever shown in the footer once the bout had already
   started, and on a phone the gestures were a hint that flashed by. Both are
   spelled out here, on the last step before the first punch. touch.js decides
   which list belongs to this device is a media query rather than a snapshot
   taken at load, so it stays right if the window changes under it. */
.legend{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,auto);gap:10px clamp(18px,3vw,44px);justify-content:center}
.legend.touch{display:none}
@media (hover:none) and (pointer:coarse){
  .legend.keys{display:none}
  /* one gesture per row, the two halves in true columns rather than each row
     setting its own gutter off the length of its own label */
  .legend.touch{display:grid;grid-template-columns:auto auto;gap:14px 16px}
  .legend.touch li{display:contents}
  .legend.touch .cap{min-width:0}
}

.legend li{display:flex;align-items:center;gap:12px;text-align:left}
.legend .cap{display:flex;gap:5px;flex:0 0 auto;min-width:clamp(74px,7.5vw,104px);
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:clamp(9px,.85vw,11px);
  letter-spacing:.13em;color:var(--ink-soft)}
.legend kbd{font-family:'DM Sans',sans-serif;font-weight:700;font-size:clamp(9px,.85vw,11px);
  letter-spacing:.1em;color:var(--ink);background:#ffffff7a;border:1px solid #ffffff9c;
  border-radius:5px;padding:6px 9px;min-width:1.6em;text-align:center;
  box-shadow:0 2px 0 #6d151220}
.legend b{font-family:'DM Sans',sans-serif;font-weight:700;color:var(--ink);
  font-size:clamp(11px,1.05vw,14px);letter-spacing:.11em}
.legendNote{font-family:'DM Sans',sans-serif;text-wrap:balance;color:#4d2b28;opacity:.85;
  font-size:clamp(12px,1.1vw,15px);line-height:1.7;max-width:44ch;
  margin:clamp(24px,3.4vh,40px) 0 0}
[data-screen="controls"] .stamp{margin-top:clamp(24px,4vh,44px)}
[data-screen="controls"] .display{margin-bottom:clamp(30px,5vh,64px)}

/* --- small print + settings on the start screen -------------------------- */
#menu .menufoot{position:absolute;left:clamp(20px,4vw,58px);bottom:clamp(18px,3.5vh,34px);
  display:flex;gap:20px;font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:1.3px;
  font-weight:600;color:var(--ink);opacity:.7;margin:0}
.startSettings{position:absolute;left:clamp(20px,4vw,58px);
  bottom:calc(clamp(18px,3.5vh,34px) + 26px);
  display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.startSettings .speechToggle{border:1px solid #8f201d3d;background:#ffffff42;color:var(--ink);
  border-radius:999px;padding:7px 15px;font-family:'DM Sans',sans-serif;font-size:8px;
  font-weight:700;letter-spacing:1.5px}
.startSettings .speechToggle[aria-pressed="true"]{background:var(--ink-deep);color:#fff6f0;border-color:transparent}
.startSettings small,.startSettings .speechNotice{display:none}

/* the original picker still drives client.js -- keep it reachable, not visible */
.visuallyHidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* the in-game HUD owns the screen once the bout starts */
body.playing #bgVideo,body.playing #bgStill{opacity:0}

@media(max-width:700px){
  .mark{width:min(74vw,420px)}
  .display{font-size:clamp(32px,10vw,48px)}
  #menu .difficulty{padding:5px}
  #menu .difficulty button{padding:13px 16px;font-size:10px;letter-spacing:.1em}
  #difficultyDescription{font-size:11px;margin-top:18px;padding:0 6vw}
  .carousel{gap:10px}
  #glovePreview{width:min(52vw,250px)}
  #menu .menufoot{gap:12px;font-size:7px}
  .startSettings{gap:6px}
}
@media(prefers-reduced-motion:reduce){
  .screen.on{animation:none}
  .stamp.glow{animation:none;box-shadow:inset 0 1px 0 #ffffff8c,0 0 16px 3px #ffcf9450,0 8px 26px #6d151230}
  .loadArt{animation:none;left:auto;right:4vw}
  .loadArt i{animation:none}
}

/* style.css pins #menu to a corner for the old single-panel layout; the flow
   is full-bleed at every width */
@media(max-width:700px){
  #menu{inset:0;left:0;top:0;bottom:0;max-width:none}
}

/* --- the menu flow owns the whole screen --------------------------------
   The old layout was a side panel, so the ring HUD could sit alongside it.
   These screens are full-bleed, so the game chrome stays out of the way until
   the bout starts -- except the music toggle, which belongs on the menu too. */
body:not(.playing) header,
body:not(.playing) #hud,
body:not(.playing) #wordCard,
body:not(.playing) #cue,
body:not(.playing) #combo{display:none!important}
body:not(.playing) footer{background:none;pointer-events:none;padding-bottom:clamp(18px,3.5vh,34px)}
body:not(.playing) footer > :not(.music){display:none!important}
body:not(.playing) footer .music{pointer-events:auto;margin-left:auto}
.screen:focus{outline:none}

/* ===========================================================================
   START SCREEN — frame 1041-722.

   Left aligned at every size, and locked to the viewport height so nothing
   scrolls. Type is sized in vh, not vw: measured against the frame, LISA is 38%
   of viewport height and the logotype 75%, and those hold across window shapes
   where the width-based equivalents (21% vs 38%) do not. Each one is capped in
   vw so a short, wide window cannot push the column off the right edge.
   ========================================================================= */
[data-screen="start"]{align-items:stretch;justify-content:flex-start;text-align:left;padding:0}
.frame16{position:relative;width:100%;height:100%;overflow:hidden}

.startCopy{position:absolute;left:6.5vw;top:43%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:flex-start}

/* the tuk-tuk begins where the copy column ends and runs off the right edge,
   so a narrower window simply shows less of it */
.startArt{position:absolute;z-index:1;pointer-events:none;
  left:min(calc(6.5vw + 72vh),70vw);bottom:-7vh;height:100vh;width:auto;
  aspect-ratio:1602/1402;
  background-repeat:no-repeat;background-position:left bottom;background-size:contain;
  background-image:url('media/tuk-tuk.png');
  background-image:image-set(url('media/tuk-tuk.webp') type('image/webp'),
                             url('media/tuk-tuk.png')  type('image/png'))}

[data-screen="start"] .lisa{font-size:min(7.6vh,9vw);margin:0 0 .1em}
[data-screen="start"] .mark{width:min(75vh,84vw)}
[data-screen="start"] .tagline{font-size:min(2.2vh,3.3vw);margin:1.5em 0 0}
[data-screen="start"] .stamp{margin-top:min(4.2vh,6vw);font-size:min(3.5vh,5.2vw)}

.startFoot{position:absolute;left:6.5vw;bottom:4vh;z-index:3;text-align:left}
.marks{display:flex;align-items:baseline;gap:.8em;margin-bottom:.7em}
.rca{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;font-style:italic;
  color:var(--ink);font-size:min(2vh,3vw);letter-spacing:-.03em}
.lloud{font-family:'AGaramond',Georgia,serif;font-weight:600;color:var(--ink);
  font-size:min(1.5vh,2.2vw);letter-spacing:.42em}
.finePrint{font-family:'DM Sans',sans-serif;font-size:min(1.2vh,1.8vw);line-height:1.5;
  color:var(--ink);opacity:.85;margin:0;max-width:min(86vw,760px)}


@media(max-width:700px){
  [data-screen="start"] .lisa{font-size:min(5.4vh,8.5vw)}
  [data-screen="start"] .mark{width:min(52vh,86vw)}
  [data-screen="start"] .tagline{font-size:min(1.8vh,3.1vw)}
  [data-screen="start"] .stamp{font-size:min(2.8vh,4.8vw)}
  .startArt{left:auto;right:-8vw;bottom:15vh;height:34vh}
  .startCopy{top:36%}
  .finePrint{font-size:9px}
  #menu .menufoot{margin-top:22px}
}

/* iOS paints a centred play button and its own controls over any video it has
   not started -- on a backdrop that has no business being interactive */
#bgVideo::-webkit-media-controls,
#bgVideo::-webkit-media-controls-panel,
#bgVideo::-webkit-media-controls-start-playback-button,
#bgVideo::-webkit-media-controls-play-button,
#bgVideo::-webkit-media-controls-overlay-play-button{
  display:none!important;-webkit-appearance:none;appearance:none;opacity:0}