@font-face{font-family:"Yeseva One";font-style:normal;font-weight:400;font-display:swap;src:url("../../assets/fonts/yeseva-one.woff2") format("woff2")}
@font-face{font-family:"Alegreya";font-style:normal;font-weight:400 900;font-display:swap;src:url("../../assets/fonts/alegreya.woff2") format("woff2")}
@font-face{font-family:"Alegreya";font-style:italic;font-weight:400 900;font-display:swap;src:url("../../assets/fonts/alegreya-italic.woff2") format("woff2")}
:root{--edge:transparent;--gold:#e9b95a;--wine:#5a1330;--led:#ff6a1f}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:#0e7c7b}
body.jh{overflow:hidden;overscroll-behavior:none}
.jh-desk{bottom:calc(var(--k98-bar) + env(safe-area-inset-bottom));display:flex;align-items:stretch;justify-content:center;padding-bottom:6px}
.jh-window{width:min(1560px,100%);height:100%;max-height:1100px;position:relative;margin:0 auto}
/* the player whose ball it is owns the window's edge */
.jh-window::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:25;box-shadow:inset 0 0 0 6px var(--edge);transition:box-shadow .4s}
.jh-window .k98-title{margin:0;font-size:inherit}
.jh-home{min-width:0;min-height:0;height:calc(var(--k98-title-h) - 6px);padding:0 8px 0 4px;gap:5px;font-size:.92em;flex:none}
.jh-home img{width:16px;height:16px}
.jh-body{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;flex-direction:column;padding:0}
.screen{display:none}
.screen.active{display:flex}
.jh-mh{list-style:none;margin:6px 8px 2px;font-size:.8em;color:var(--k98-dim);text-transform:uppercase;letter-spacing:.06em}
.k98-pop{max-height:min(70dvh,560px);overflow:auto}
@media (max-width:640px),(max-height:520px){
  .jh-desk{padding:0}
  .jh-window{max-height:none}
  .jh-long{display:none}
}
@media (max-height:520px){.k98-taskbar{display:none}.jh-desk{bottom:0}}
/* ---------------- setup ---------------- */
#setup{flex-direction:column;overflow-y:auto;overflow-x:hidden;padding:6px 14px 90px;-webkit-overflow-scrolling:touch}
.jh-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;align-items:center;margin:8px 0 4px}
.jh-marquee{background:#0b0716;padding:6px;box-shadow:inset 1px 1px var(--k98-shade),inset -1px -1px var(--k98-hi),inset 2px 2px var(--k98-dark)}
.jh-marquee svg{display:block;width:100%;height:auto}
.jh-eyebrow{margin:0;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:#4a2a10;font-weight:700}
.jh-word{margin:.05em 0 0;font-family:"Yeseva One",Georgia,serif;font-weight:400;font-size:clamp(2.6rem,7vw,4.4rem);line-height:1;color:var(--wine);letter-spacing:.02em;text-shadow:1px 1px 0 #fff}
.jh-mean{margin:.2em 0 0;font-family:Alegreya,Georgia,serif;font-style:italic;font-size:1.2rem;color:#3a2a1a}
.jh-lede{margin:.7em 0 0;font-size:1.05rem;max-width:44ch}
.jh-lede b{color:var(--wine)}
@media (max-width:720px){.jh-hero{grid-template-columns:1fr}.jh-marquee{max-width:420px;width:100%;justify-self:center}.jh-intro{text-align:center}.jh-lede{margin-left:auto;margin-right:auto}}
.jh-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.jh-seg button,.jh-ways button,.jh-levels button{font:inherit;color:#000;text-align:left;background:var(--k98-face);border:0;cursor:pointer;padding:10px 12px;min-height:56px;display:flex;flex-direction:column;gap:2px;
  box-shadow:inset -1px -1px var(--k98-dark),inset 1px 1px var(--k98-hi),inset -2px -2px var(--k98-shade),inset 2px 2px var(--k98-lite)}
.jh-seg b,.jh-ways b,.jh-levels b{font-size:1.05rem}
.jh-seg small{font-size:.9rem;color:#333}
.jh-seg [aria-checked="true"],.jh-ways [aria-checked="true"],.jh-levels [aria-checked="true"]{background:#fff;box-shadow:inset 1px 1px var(--k98-dark),inset -1px -1px var(--k98-hi),inset 2px 2px var(--k98-shade),inset -2px -2px var(--k98-lite),0 0 0 2px var(--k98-sel)}
.jh-seg button:focus-visible,.jh-ways button:focus-visible,.jh-levels button:focus-visible{outline:1px dotted #000;outline-offset:-6px}
.jh-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.jh-ways span,.jh-levels span{font-size:.95rem;color:#222}
.jh-levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.jh-levels i{font-style:normal;font:700 .85rem var(--k98-font);color:#fff;background:var(--k98-sel);width:22px;height:22px;display:grid;place-items:center}
.jh-levels .pb{font-style:normal;font-size:.88rem;color:#0a5a0a;margin-top:auto}
@media (max-width:900px){.jh-levels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.jh-seg,.jh-ways{grid-template-columns:1fr}.jh-levels{grid-template-columns:1fr}}
.jh-sub{margin-top:12px}
.jh-count{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.jh-names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.jh-names label{display:flex;align-items:center;gap:8px}
.jh-names i{width:16px;height:16px;flex:none;box-shadow:0 0 0 1px #000}
.jh-names input{width:100%;min-width:0}
.jh-inset{padding:12px}
@media (max-width:480px){.jh-names{grid-template-columns:1fr}}
.jh-note{font-size:.95rem;color:#222;margin:10px 0 0}
.jh-online{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.jh-online p{margin:0 0 8px}
.jh-field{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.jh-field input{flex:1;min-width:0}
.jh-code{text-transform:uppercase;letter-spacing:.3em;font-weight:700;max-width:180px}
.jh-warn{color:#8a0000;min-height:1.3em;margin:6px 0 0!important}
@media (max-width:640px){.jh-online{grid-template-columns:1fr}}
.jh-grooveline{margin:12px 0 0;font-size:.95rem;color:#222}
.jh-go{display:flex;justify-content:center;margin-top:18px}
.jh-play{min-width:220px;min-height:60px;font-size:1.35rem;font-weight:700;letter-spacing:.04em}
.jh-best{text-align:center;margin:10px 0 0;font-size:1rem}
.jh-rules h2{font-size:1.05rem;margin:0 0 4px}
.jh-rules p{margin:0;font-size:1rem}
.jh-rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
@media (max-width:720px){.jh-rule-grid{grid-template-columns:1fr}}
.jh-keys-h{margin-top:16px!important}
.jh-keys{margin:0;padding-left:1.2em}
.jh-keys li{margin:3px 0}
kbd{font:700 .92rem var(--k98-font);background:#fff;padding:1px 6px;box-shadow:inset -1px -1px var(--k98-shade),inset 1px 1px var(--k98-hi),0 0 0 1px #777}
.jh-maker{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px;padding:14px;background:#1a1010;color:#eee;font-size:.95rem;text-align:center}
.jh-maker img{height:40px;width:auto}
.jh-noscript{margin:14px 0 0;padding:10px;background:#ffffe1;box-shadow:0 0 0 1px #000}

/* ---------------- play ---------------- */
#play{flex:1;min-height:0;gap:3px;background:var(--k98-face)}
.jh-tablebox{position:relative;flex:1;min-width:0;min-height:0;background:#07060c;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  box-shadow:inset 1px 1px var(--k98-shade),inset -1px -1px var(--k98-hi),inset 2px 2px var(--k98-dark)}
.jh-tablebox canvas{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);display:block}
.jh-plunge{position:absolute;right:2px;bottom:2px;width:34%;height:42%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;pointer-events:none;
  background:linear-gradient(180deg,rgba(233,185,90,0),rgba(233,185,90,.18));border-top:2px dashed rgba(233,185,90,.55);border-left:2px dashed rgba(233,185,90,.55)}
.jh-plunge span{font-size:1rem;font-weight:700;color:#ffe6a8;text-shadow:0 1px 3px #000;animation:jhblink 1.1s steps(2,end) infinite}
@keyframes jhblink{50%{opacity:.35}}
.jh-banner{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-family:"Yeseva One",Georgia,serif;font-size:clamp(1.6rem,6vw,3rem);color:#ffe6a8;text-shadow:0 0 18px rgba(255,160,60,.9),0 3px 0 #5a1330;pointer-events:none;opacity:0;transition:opacity .25s;white-space:nowrap;text-align:center}
.jh-banner.on{opacity:1}
.jh-side{flex:0 0 clamp(210px,25%,330px);display:flex;flex-direction:column;gap:6px;min-height:0;padding:4px}
.jh-mq{background:linear-gradient(160deg,#2a1350,#5a1330);color:#ffe6a8;text-align:center;padding:10px 6px 8px;box-shadow:inset 1px 1px var(--k98-shade),inset -1px -1px var(--k98-hi),inset 2px 2px var(--k98-dark)}
.jh-mq span{display:block;font-family:"Yeseva One",Georgia,serif;font-size:1.7rem;line-height:1;letter-spacing:.04em;text-shadow:0 0 12px rgba(255,160,60,.7)}
.jh-mq small{font-family:Alegreya,Georgia,serif;font-style:italic;font-size:.95rem;color:#f4e7c9}
.jh-led{position:relative;flex:0 1 auto;aspect-ratio:1/1.1;min-height:150px;background:#0b0302;box-shadow:inset 1px 1px var(--k98-shade),inset -1px -1px var(--k98-hi),inset 2px 2px var(--k98-dark)}
.jh-led canvas{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);display:block}
.jh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jh-side-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.jh-side-btns .k98-btn{min-width:0;padding:6px 4px;font-size:.95rem}
.jh-rail{display:flex;flex-direction:column;gap:3px}
.jh-rail:empty{display:none}
.jh-rail .pl{display:flex;align-items:center;gap:6px;padding:3px 6px;background:#fff;font-size:.95rem;box-shadow:inset 1px 1px var(--k98-shade),inset -1px -1px var(--k98-hi)}
.jh-rail .pl i{width:12px;height:12px;flex:none;background:var(--c);box-shadow:0 0 0 1px #000}
.jh-rail .pl b{margin-left:auto;font-variant-numeric:tabular-nums}
.jh-rail .pl small{color:#444;font-size:.82rem}
.jh-rail .pl.me{outline:2px solid var(--c);outline-offset:-2px}
.jh-rail .pl.out{opacity:.55}
.jh-rail .k98-btn{min-height:40px}

.jh-art{flex:1 1 0;min-height:0;overflow:hidden;box-shadow:inset 1px 1px var(--k98-shade),inset -1px -1px var(--k98-hi),inset 2px 2px var(--k98-dark)}
.jh-art svg{display:block;width:100%;height:100%}
/* portrait: the LED on top, compact; the table fills the rest, its lower half the flipper zones */
@media (max-aspect-ratio:4/5){
  #play{flex-direction:column}
  .jh-side{order:-1;flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:4px;padding:3px}
  .jh-mq,.jh-art{display:none}
  .jh-led{aspect-ratio:auto}
  .jh-rail{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
  .jh-rail .pl{flex:1 1 40%;min-width:0}
  .jh-led{min-height:0;height:clamp(72px,11dvh,110px);grid-column:1}
  .jh-side-btns{grid-column:2;grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr);gap:3px}
  .jh-side-btns .k98-btn{min-height:0;height:100%;padding:2px 10px}
  .jh-plunge{width:40%;height:34%}
}
/* short landscape screens (phones on their side): thin chrome, no status bar */
@media (max-height:520px){
  
  .k98-menu{min-height:32px}
  .k98-status{display:none}
  .jh-side{flex-basis:clamp(180px,27%,260px)}
  .jh-mq{padding:4px}
  .jh-mq span{font-size:1.2rem}
  .jh-mq small{display:none}
  .jh-led{min-height:90px;flex:1;aspect-ratio:auto}
  .jh-art{display:none}
}
body.in-game{overscroll-behavior:none}


/* phones and touch screens: nothing to read under 16px */
@media (pointer:coarse),(max-width:899px){
  .jh-eyebrow,.jh-seg small,.jh-ways span,.jh-levels span,.jh-levels .pb,.jh-grooveline,.jh-note,.jh-maker,.jh-rules p,.jh-rail .pl,.jh-rail .pl small,kbd{font-size:1rem}
}

/* ---------------- dialogs ---------------- */
.jh-big{font:700 2.4rem/1 var(--k98-font);text-align:center;margin:4px 0 10px;font-variant-numeric:tabular-nums;color:var(--wine)}
.jh-table{width:100%;border-collapse:collapse;background:#fff;box-shadow:inset 1px 1px var(--k98-shade),inset -1px -1px var(--k98-hi);font-variant-numeric:tabular-nums}
.jh-table td,.jh-table th{padding:5px 8px;text-align:left;font-size:1rem}
.jh-table th{background:var(--k98-face);font-size:.9rem}
.jh-table td.n{text-align:right}
.jh-table tr.me td{background:#000080;color:#fff}
.jh-table i{display:inline-block;width:11px;height:11px;margin-right:6px;background:var(--c);box-shadow:0 0 0 1px #000;vertical-align:-1px}
.jh-initials{display:flex;gap:10px;justify-content:center;margin:10px 0}
.jh-initials .col{display:flex;flex-direction:column;align-items:center;gap:4px}
.jh-initials .col .k98-btn{min-width:52px;min-height:44px;padding:2px}
.jh-initials input{width:52px;height:56px;text-align:center;font:700 1.8rem var(--k98-font);text-transform:uppercase;padding:0}
.jh-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:6px;margin:10px 0 6px;min-height:170px}
.jh-podium .step{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;min-width:0}
.jh-podium .nm{font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:5px}
.jh-podium .nm i{width:12px;height:12px;flex:none;box-shadow:0 0 0 1px #000}
.jh-podium .block{width:100%;display:grid;place-items:center;font:700 1.6rem var(--k98-font);color:#fff;background:var(--k98-title-a);
  box-shadow:inset -1px -1px var(--k98-dark),inset 1px 1px var(--k98-title-b)}
.jh-podium .p1 .block{height:92px;background:linear-gradient(#caa04a,#8a6a1c)}
.jh-podium .p2 .block{height:64px}
.jh-podium .p3 .block{height:44px}
.jh-pass{text-align:center}
.jh-pass .who{font-family:"Yeseva One",Georgia,serif;font-size:2.4rem;line-height:1.1;margin:4px 0 8px;color:var(--c,#000)}
.jh-help dl{margin:0}
.jh-help dt{font-weight:700;margin-top:8px}
.jh-help dd{margin:2px 0 0 0}
.jh-help ul{margin:0 0 8px;padding-left:1.2em}
.jh-dlg-lobby{padding:0}
.jh-dlg-lobby .nsmr-lobby{box-shadow:none;border-radius:0}
.jh-result-line{text-align:center}