@font-face { font-family:"Club Sans"; src:url("/games/boring-typing/fonts/NunitoSans.ttf") format("truetype"); font-weight:200 900; font-display:swap; }
:root { --cream:#fff0d5; --muted:#dfc6ad; --gold:#ffc45f; --copper:#dc7767; --ink:#35241e; --glass:rgba(55,34,27,.86); --line:rgba(240,196,128,.55); --sans:"Club Sans",sans-serif; --display:Georgia,"Times New Roman",serif; }
*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
body { color:var(--cream); background:var(--ink); font-family:var(--sans); overscroll-behavior:none; }
button,a { color:inherit; font:inherit; -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
#app { position:fixed; inset:0; touch-action:none; isolation:isolate; }
#view { display:block; width:100%; height:100%; }
#view:focus { outline:none; }
.scene-vignette { position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 -130px 140px -100px rgba(39,21,22,.6); }
/* Copper sunset controls remain separate from the playable court. */
#tools { position:absolute; z-index:4; top:calc(20px + env(safe-area-inset-top,0px)); left:32px; right:32px; display:grid; grid-template-columns:96px 1fr 96px; gap:14px; align-items:center; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid rgba(255,232,193,.3); border-radius:50%; background:rgba(64,40,31,.84); box-shadow:0 4px 16px rgba(50,22,10,.12); text-decoration:none; transition:background .15s,border-color .15s; }
.icon-button:hover { background:rgba(91,55,36,.96); border-color:var(--gold); }
.icon-button img { display:block; width:24px; height:24px; }
#sound[aria-pressed="false"] { opacity:.78; }
.club-brand { text-align:center; color:var(--cream); text-shadow:0 2px 16px rgba(52,22,18,.6); }
.club-brand strong { display:block; font:30px/1.1 var(--display); letter-spacing:.1em; white-space:nowrap; }
.club-brand > span { display:block; margin-top:7px; font-size:11px; font-weight:700; letter-spacing:.2em; }
.header-actions { display:flex; justify-content:flex-end; gap:8px; }
#hud { position:absolute; z-index:2; top:calc(100px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); width:min(740px,calc(100% - 64px)); display:grid; grid-template-columns:1fr 54px 1fr; align-items:center; gap:16px; pointer-events:none; }
.gauge { display:flex; align-items:center; min-width:0; gap:12px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--glass); box-shadow:0 8px 24px rgba(40,19,14,.12); }
.fighter-portrait { display:block; flex:0 0 48px; width:48px; height:58px; object-fit:cover; object-position:50% 28%; border:1px solid var(--line); border-radius:5px; }
.cpu .fighter-portrait { transform:scaleX(-1); }
.fighter-info { flex:1; min-width:0; }
.fighter-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.name { font:19px/1 var(--display); font-weight:700; }
.health-number { font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.health-number small { color:var(--muted); font-size:12px; font-weight:500; }
.bar { height:9px; border:1px solid rgba(255,229,180,.48); border-radius:20px; overflow:hidden; background:rgba(20,12,9,.3); }
.bar > i { display:block; width:100%; height:100%; border-radius:20px; background:var(--gold); transition:width .1s linear; }
.cpu .bar > i { background:var(--copper); }
.fighter-detail { display:block; margin-top:7px; color:var(--muted); font-size:12px; line-height:1; }
.versus { text-align:center; text-shadow:0 2px 10px #432919; }
.versus > span { display:block; font:italic 25px var(--display); }
.versus small { display:block; font-size:11px; font-variant-numeric:tabular-nums; margin-top:7px; }
.arena-caption { position:absolute; top:calc(196px + env(safe-area-inset-top,0px)); left:0; right:0; text-align:center; pointer-events:none; color:var(--cream); font-size:12px; text-shadow:0 1px 10px #39251d; }
#pad { position:absolute; z-index:2; bottom:calc(28px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); width:min(720px,calc(100% - 64px)); display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.movement-control,#swing { min-height:120px; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--glass); box-shadow:0 8px 30px rgba(41,21,17,.2); }
.movement-control { display:flex; align-items:center; gap:20px; }
#stick { position:relative; flex:0 0 84px; width:84px; height:84px; border:2px solid rgba(255,229,184,.62); border-radius:50%; background:rgba(34,24,19,.26); box-shadow:inset 0 0 0 6px rgba(255,229,184,.1); touch-action:none; }
#knob { position:absolute; left:50%; top:50%; width:40px; height:40px; margin:-20px 0 0 -20px; border:2px solid #fff0d5; border-radius:50%; background:#e7d2ad; box-shadow:0 4px 9px rgba(30,15,9,.25); pointer-events:none; }
.control-description { pointer-events:none; }
.control-description strong { display:block; font:18px var(--display); font-weight:700; }
.desktop-control,.touch-control { color:var(--muted); font-size:12px; line-height:1.6; margin-top:7px; }
.touch-control { display:none; white-space:nowrap; }
#swing { --p:0; display:flex; flex-direction:column; justify-content:center; width:100%; color:var(--cream); text-align:left; touch-action:none; }
#swing.on { border-color:#ffe3a0; background:rgba(101,62,28,.93); }
.swing-top { display:flex; gap:10px; align-items:center; }
.swing-top img { width:27px; height:27px; }
.swing-top strong { font-size:17px; font-weight:800; line-height:1.2; }
.charge-track { position:relative; display:block; height:11px; width:100%; margin-top:12px; background:rgba(20,12,9,.34); border:1px solid rgba(255,229,180,.5); border-radius:20px; overflow:hidden; }
.charge-track i { display:block; height:100%; width:calc(var(--p)*100%); background:var(--gold); border-radius:20px; }
.swing-instruction { display:flex; gap:4px; margin-top:7px; color:var(--muted); font-size:12px; line-height:1.5; }
.swing-instruction .desktop-control { margin:0; }
#hint { position:absolute; z-index:2; bottom:calc(166px + env(safe-area-inset-bottom,0px)); left:16px; right:16px; font-size:13px; text-align:center; line-height:1.5; text-shadow:0 1px 6px #35241e; pointer-events:none; transition:opacity .3s; }
#hint.dismissed { opacity:0; }
.touch-hint { display:none; }
/* Original pause, result and share flows retain their IDs and behavior. */
#help-view,#overlay,#share-view { position:absolute; z-index:5; inset:0; padding:max(20px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:center; background:rgba(40,24,23,.7); backdrop-filter:blur(8px); }
.panel { width:min(100%,480px); max-height:100%; overflow-y:auto; padding:32px; border:1px solid var(--line); border-radius:18px; background:#39261f; box-shadow:0 20px 90px #28151999; touch-action:pan-y; }
.panel-topline { display:flex; justify-content:space-between; gap:14px; align-items:center; }
.eyebrow,.panel-edition { margin:0; color:var(--gold); font-size:11px; letter-spacing:.07em; line-height:1.6; }
.panel-edition { color:var(--muted); }
.panel h2 { margin:22px 0 14px; font:38px/1.08 var(--display); letter-spacing:-.025em; }
.panel h2 em { color:var(--gold); }
.panel-intro { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.help-panel dl { margin:24px 0; }
.help-panel dl > div { display:grid; grid-template-columns:90px 1fr; gap:10px; padding:14px 0; border-bottom:1px solid var(--line); }
.help-panel dt { font-size:12px; font-weight:800; line-height:1.7; }
.help-panel dt > span { margin-right:8px; color:var(--gold); }
.help-panel dd { margin:0; font-size:13px; line-height:1.6; color:var(--muted); }
.dlg-btn { display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 16px; border:1px solid var(--line); border-radius:8px; background:rgba(255,230,193,.05); color:var(--cream); font-size:14px; font-weight:700; touch-action:manipulation; }
.dlg-btn:hover { background:rgba(255,230,193,.13); }
.dlg-btn img { display:block; flex:0 0 20px; width:20px; height:20px; }
.dlg-btn.primary { background:#f3cc86; color:var(--ink); border-color:#f3cc86; }
.dlg-btn.primary img { filter:brightness(.25); }
#resume,#share-close { width:100%; }
#resume { justify-content:space-between; }
.credit { display:block; margin-top:20px; color:var(--muted); font-size:11px; line-height:1.6; text-align:center; text-underline-offset:3px; }
.result-panel { text-align:center; width:min(100%,440px); }
.result-emblem { display:block; width:72px; height:86px; object-fit:cover; border:1px solid var(--line); border-radius:12px; margin:20px auto; }
#ttl { margin:0; font:42px/1.1 var(--display); }
#ttl.win { color:var(--gold); }
#sub { margin:16px auto 24px; color:var(--muted); font-size:14px; line-height:1.7; }
#row { display:flex; gap:10px; width:100%; }
#row .dlg-btn { flex:1; }
.result-footer { display:block; margin-top:22px; color:var(--muted); font-size:10px; line-height:1.5; }
#share-view { z-index:6; }
#share-view.hidden { display:none; }
#share-text { padding:16px; margin:22px 0; border:1px solid var(--line); border-radius:8px; font-size:14px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; -webkit-user-select:text; }
@media (max-width:700px) {
  #tools { top:calc(18px + env(safe-area-inset-top,0px)); left:16px; right:16px; grid-template-columns:44px 1fr 96px; gap:8px; }
  .club-brand strong { font-size:20px; letter-spacing:.025em; }
  .club-brand > span { font-size:10px; margin-top:6px; letter-spacing:.11em; }
  #hud { top:calc(88px + env(safe-area-inset-top,0px)); width:calc(100% - 32px); grid-template-columns:1fr 1fr; gap:16px; }
  .gauge { padding:9px; gap:8px; }
  .fighter-portrait { flex-basis:34px; width:34px; height:43px; }
  .fighter-heading { gap:4px; margin-bottom:7px; }
  .name { font-size:14px; }
  .health-number { font-size:12px; }
  .health-number small { display:none; }
  .fighter-detail { font-size:11px; margin-top:6px; }
  .bar { height:7px; }
  .versus { display:none; }
  .arena-caption { top:calc(168px + env(safe-area-inset-top,0px)); font-size:11px; }
  #pad { width:calc(100% - 32px); bottom:calc(20px + env(safe-area-inset-bottom,0px)); gap:10px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .movement-control,#swing { min-height:112px; padding:12px; border-radius:14px; }
  .movement-control { gap:10px; }
  #stick { flex-basis:66px; width:66px; height:66px; }
  #knob { width:34px; height:34px; margin:-17px 0 0 -17px; }
  .control-description strong { font-size:14px; }
  .touch-control { font-size:11px; line-height:1.5; }
  .swing-top { gap:5px; }
  .swing-top img { width:22px; height:22px; }
  .swing-top strong { font-size:13px; }
  .swing-instruction { font-size:11px; }
  #hint { bottom:calc(146px + env(safe-area-inset-bottom,0px)); font-size:12px; }
  .panel { padding:26px; }
  .panel-edition { display:none; }
}
@media (max-width:600px), (pointer:coarse) { .desktop-hint,.desktop-control { display:none; } .touch-hint,.touch-control { display:block; } }
@media (max-width:370px) {
  #tools { left:12px; right:12px; grid-template-columns:44px 1fr 94px; gap:5px; }
  .club-brand strong { font-size:17px; }
  #hud { width:calc(100% - 24px); gap:10px; }
  .gauge { padding:8px; gap:6px; }
  .fighter-portrait { flex-basis:30px; width:30px; height:40px; }
  #pad { width:calc(100% - 24px); gap:8px; }
  .movement-control,#swing { padding:10px; }
  .movement-control { gap:7px; }
  #stick { flex-basis:56px; width:56px; height:56px; }
  .swing-top strong { font-size:12px; }
  .swing-top img { width:18px; height:18px; }
  .panel { padding:24px 20px; }
  .help-panel dl > div { grid-template-columns:78px 1fr; }
}
@media (max-height:520px) and (min-width:601px) {
  #tools { top:calc(10px + env(safe-area-inset-top,0px)); left:18px; right:18px; }
  .club-brand strong { font-size:21px; }
  .club-brand > span { display:none; }
  #hud { top:calc(65px + env(safe-area-inset-top,0px)); width:calc(100% - 36px); grid-template-columns:220px 1fr 220px; }
  .gauge { padding:8px; gap:8px; }
  .fighter-portrait { width:32px; flex-basis:32px; height:38px; }
  .name { font-size:14px; }
  .health-number { font-size:12px; }
  .fighter-detail { display:none; }
  .versus { visibility:hidden; }
  .arena-caption,#hint { display:none; }
  #pad { bottom:12px; width:calc(100% - 36px); display:flex; justify-content:space-between; pointer-events:none; }
  .movement-control,#swing { min-height:80px; width:220px; padding:8px 12px; pointer-events:auto; }
  #stick { width:60px; height:60px; flex-basis:60px; }
  .control-description strong,.swing-top strong { font-size:13px; }
  .charge-track { margin-top:7px; }
  .panel { padding:20px 26px; }
  .panel h2 { font-size:27px; margin:10px 0; }
  .panel h2 br { display:none; }
  .panel-intro { font-size:12px; }
  .help-panel dl { margin:14px 0; }
  .help-panel dl > div { padding:8px 0; }
  .help-panel dd { font-size:12px; }
  .credit { margin-top:12px; }
  .result-emblem { width:48px; height:58px; margin:12px auto; }
  #ttl { font-size:32px; }
  #sub { margin:10px auto 16px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }