/* ══════════ TEST YOUR MIGHT — entry card + fullscreen ring ══════════ */

/* ── the card in the coaching section ── */
.ringcard{display:grid;gap:clamp(1rem,3vw,2rem);align-items:center;margin-top:2.5rem;
  grid-template-columns:1fr}
@media(min-width:820px){ .ringcard{grid-template-columns:1.05fr .95fr} }

.ringcard__shot{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  border:1px solid var(--hair);background:#140709}
.ringcard__shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease),filter .6s var(--ease);filter:saturate(.85)}
.ringcard:hover .ringcard__shot img{transform:scale(1.04);filter:saturate(1)}
/* if the still has not been rendered yet, draw something rather than a void */
.ringcard__fallback{display:none}
.ringcard__shot.is-missing img{display:none}
.ringcard__shot.is-missing .ringcard__fallback{display:block;position:absolute;inset:0;
  background:
    radial-gradient(60% 50% at 50% 42%,rgba(255,77,109,.22),transparent 70%),
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(237,242,244,.08) 38px 40px),
    linear-gradient(160deg,#1B0A0E,#0C0507)}

.ringcard__body{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.ringcard__body h3{font-size:clamp(1.5rem,3.2vw,2.2rem);font-weight:400;line-height:1.15}
.ringcard__note{color:var(--ink-dim);font-size:.92rem;line-height:1.55;max-width:34ch}
.ringcard__go{margin-top:.4rem}

body.read .ringcard{display:none}    /* read mode never mentions the game */

/* ── the fullscreen ring ── */
.ring{position:fixed;inset:0;z-index:160;background:#07090C;overflow:hidden}
.ring--nofs{z-index:9000}            /* no Fullscreen API (iPhone): cover anyway */
body.ring-open{overflow:hidden}
.ring__gl{position:absolute;inset:0;width:100%;height:100%;display:block}

/* the gate */
.ring__gate{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  background:#07090C;transition:opacity .7s var(--ease)}
.ring__gate.gone{opacity:0;pointer-events:none}
.ring__gateinner{display:flex;flex-direction:column;align-items:center;gap:.7rem;
  color:var(--w-coaching)}
.ring__drop{width:52px;height:72px}
.ring__pct{font-family:var(--serif);font-size:2.4rem;color:var(--ink);line-height:1}
.ring__pct i{font-family:var(--mono);font-size:.7rem;color:var(--ink-dim);
  font-style:normal;margin-left:.2rem}
.ring__bar{width:min(240px,50vw);height:2px;background:var(--hair);overflow:hidden}
.ring__bar span{display:block;height:100%;width:0;background:var(--w-coaching);
  transition:width .25s linear}
.ring__cap{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim)}

/* the HUD — nothing in it takes the pointer except the leave button */
.ring__hud{position:absolute;inset:0;z-index:2;pointer-events:none}
.ring__leave{pointer-events:auto;position:absolute;top:1.1rem;right:1.2rem;
  font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);background:rgba(10,5,7,.6);backdrop-filter:blur(8px);
  border:1px solid var(--hair);border-radius:100px;padding:.5rem .9rem;cursor:pointer;
  transition:all .3s var(--ease)}
.ring__leave:hover{color:var(--ink);border-color:var(--w-coaching)}

.ring__strikes{position:absolute;top:1.1rem;left:1.2rem;display:flex;gap:.4rem}
.ring__strikes i{width:12px;height:12px;border-radius:50%;border:1px solid var(--hair);
  transition:all .3s var(--ease)}
.ring__strikes i.on{background:var(--w-coaching);border-color:var(--w-coaching);
  box-shadow:0 0 16px color-mix(in srgb,var(--w-coaching) 60%,transparent)}

.ring__level{position:absolute;top:1.2rem;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim)}

/* the code — always visible, each step ticking off as it lands */
.ring__code{position:absolute;left:0;right:0;bottom:5.2rem;display:flex;
  justify-content:center;gap:.7rem}
.ring__code b{font-size:clamp(1.6rem,4vw,2.6rem);line-height:1;color:var(--ink-dim);
  opacity:.35;transition:all .22s var(--ease)}
.ring__code b.now{opacity:1;color:var(--ink);transform:scale(1.15)}
.ring__code b.done{opacity:1;color:var(--w-coaching);
  text-shadow:0 0 20px color-mix(in srgb,var(--w-coaching) 55%,transparent)}

.ring__clock{position:absolute;left:50%;transform:translateX(-50%);bottom:4.1rem;
  width:min(320px,60vw);height:2px;background:var(--hair);overflow:hidden}
.ring__clock span{display:block;height:100%;width:100%;background:var(--w-coaching)}

.ring__say{position:absolute;left:0;right:0;bottom:2.2rem;text-align:center;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);text-shadow:0 2px 18px #000;margin:0}

/* the error flash — a crimson pulse at the frame edge */
.ring__flash{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(120% 100% at 50% 50%,transparent 45%,
    color-mix(in srgb,var(--w-coaching) 65%,transparent) 100%)}
.ring__flash.on{animation:ringflash .5s var(--ease)}
@keyframes ringflash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

/* the ranking panel */
/* Flex with an auto-margined child, NOT grid + place-items:center. A centred
   grid item that grows taller than its container overflows the TOP, and the
   overflowing part cannot be scrolled to — which a ten-row board on a short
   laptop or a landscape phone reaches easily. An auto margin centres the
   same way and still scrolls. */
.ring__panel{position:absolute;inset:0;z-index:5;display:flex;overflow-y:auto;
  background:rgba(6,4,5,.86);backdrop-filter:blur(14px);padding:2rem}
/* One column holds the board AND its buttons so they share a left edge.
   As separate children of a centred parent they were positioned
   independently: every row started at the board's edge while the buttons
   floated centre-page, and the 1.4rem that was meant to tuck them under the
   note became a 174px canyon. */
.ring__panelwrap{max-width:min(560px,90vw);width:100%;margin:auto}
.ring__board{width:100%}
.ring__board h3{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:400;margin-bottom:1.2rem}
.ring__rows{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-direction:column;gap:.3rem}
.ring__rows li{display:grid;grid-template-columns:1.4rem 3rem 1fr auto auto;gap:.7rem;
  align-items:baseline;padding:.55rem .7rem;border:1px solid var(--hair);border-radius:9px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--ink-dim)}
.ring__rows li.won{border-color:color-mix(in srgb,var(--w-coaching) 50%,transparent)}
.ring__rows b{color:var(--ink-dim)}
.ring__who{color:var(--ink);letter-spacing:.16em}
.ring__got{color:var(--w-coaching);text-transform:uppercase}
.ring__when{opacity:.6}
.ring__boardnote{font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);margin:0}
.ring__panelbtns{display:flex;gap:.8rem;margin-top:1.4rem;flex-wrap:wrap}

@media(max-width:620px){
  .ring__rows li{grid-template-columns:1.2rem 2.6rem 1fr;row-gap:.2rem}
  .ring__bank,.ring__when{grid-column:2/-1}
}

/* the detail control — shown only when the calibration could not
   confidently separate two tiers (see pickTier in js/ring-quality.js) */
.ring__tier{pointer-events:auto;position:absolute;bottom:1.1rem;right:1.2rem;
  display:flex;align-items:center;gap:.3rem;
  background:rgba(10,5,7,.6);backdrop-filter:blur(8px);
  border:1px solid var(--hair);border-radius:100px;padding:.35rem .5rem}
.ring__tier span{font-family:var(--mono);font-size:.5rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);padding:0 .35rem}
.ring__tier button{font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim);background:none;border:0;
  padding:.3rem .5rem;border-radius:100px;cursor:pointer;transition:all .25s var(--ease)}
.ring__tier button:hover{color:var(--ink)}
.ring__tier button.on{color:var(--base);background:var(--w-coaching)}

/* the one-time sound offer — leaves on its own if ignored */
.ring__sound{pointer-events:auto;position:absolute;top:1.1rem;left:50%;
  transform:translateX(-50%) translateY(2.2rem);
  font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);background:rgba(10,5,7,.6);backdrop-filter:blur(8px);
  border:1px solid var(--hair);border-radius:100px;padding:.45rem .9rem;cursor:pointer;
  transition:opacity .9s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.ring__sound:hover{color:var(--ink);border-color:var(--w-coaching)}
.ring__sound span{color:var(--w-coaching);margin-right:.3rem}
.ring__sound.fading{opacity:0}