/* ============ VOXEL BOXING — UI ============ */
:root{
  --gold:#e8b64c; --gold-dim:#9a7a34; --red:#d84343; --bg:#07070c;
  --panel:rgba(10,10,18,.86); --line:rgba(232,182,76,.35);
  --ink:#f2ead8; --dim:#9b93a6;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);}
body{font-family:"Avenir Next","Trebuchet MS",Verdana,system-ui,sans-serif;color:var(--ink);
  user-select:none;-webkit-user-select:none;touch-action:none;}
#app{position:fixed;inset:0;}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;}
.hidden{display:none !important;}

button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input{font-family:inherit;}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  background:radial-gradient(ellipse at 50% 30%, rgba(20,14,30,.55), rgba(5,5,10,.92) 75%);}
.screen.trans{background:rgba(4,4,8,.55);backdrop-filter:blur(3px);}
.scr-head{font-size:clamp(20px,3.4vw,30px);letter-spacing:.22em;color:var(--gold);
  text-transform:uppercase;text-shadow:0 2px 0 #000;}
.menu-col{display:flex;flex-direction:column;gap:10px;min-width:min(420px,86vw);}
.mbtn{padding:13px 26px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--ink);background:linear-gradient(180deg,#1b1626,#120f1c);
  border:1px solid var(--line);border-left:4px solid var(--gold-dim);text-align:left;
  transition:transform .08s ease,border-color .12s,background .12s;}
.mbtn:hover:not(:disabled){border-color:var(--gold);border-left-color:var(--gold);transform:translateX(4px);background:#221a33;}
.mbtn:active:not(:disabled){transform:translateX(4px) scale(.99);}
.mbtn.primary{border-left-color:var(--gold);color:#ffe9b0;}
.mbtn.danger{border-left-color:var(--red);}
.mbtn:disabled{opacity:.38;cursor:default;}
.icon-btn{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:45;
  width:44px;height:44px;font-size:17px;color:var(--ink);background:var(--panel);border:1px solid var(--line);}

/* title */
#screen-title{justify-content:flex-end;padding-bottom:7vh;gap:24px;}
.title-art{text-align:center;margin-bottom:auto;padding-top:11vh;}
#title-logo{font-size:clamp(42px,9vw,96px);font-weight:800;letter-spacing:.04em;line-height:.95;color:#fff;
  text-shadow:0 4px 0 #6d1010, 0 8px 0 #2a0808, 0 14px 28px rgba(0,0,0,.8);}
#title-logo .tl-a{color:var(--red);}
#title-logo .tl-b{color:var(--gold);}
#title-tag{margin-top:14px;font-size:clamp(11px,1.8vw,15px);letter-spacing:.5em;color:var(--dim);text-transform:uppercase;}
#title-foot{font-size:11px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;text-align:center;}

/* select / ladder */
#ladder-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:94vw;}
.ladder-card{width:118px;padding:10px 8px;background:var(--panel);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .12s,transform .1s;}
.ladder-card:hover{transform:translateY(-3px);}
.ladder-card.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);}
.ladder-card.locked{opacity:.42;filter:grayscale(.7);}
.ladder-card canvas{width:64px;height:64px;image-rendering:pixelated;}
.lad-name{font-size:11px;font-weight:800;letter-spacing:.06em;text-align:center;}
.lad-rec{font-size:10px;color:var(--dim);}
.lad-tag{font-size:9px;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;text-align:center;min-height:11px;}
#select-detail{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--panel);
  border:1px solid var(--line);padding:14px 22px;max-width:min(560px,94vw);}
#sel-name{font-size:20px;font-weight:800;letter-spacing:.1em;color:var(--gold);}
#sel-meta{font-size:12px;color:var(--dim);letter-spacing:.08em;}
#sel-scout{font-size:12.5px;line-height:1.55;text-align:center;color:var(--ink);}

/* creator */
#creator{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;background:var(--panel);
  border:1px solid var(--line);padding:18px 22px;max-width:94vw;}
#creator-left{display:flex;flex-direction:column;gap:11px;min-width:min(300px,88vw);}
#creator label{display:flex;flex-direction:column;gap:5px;font-size:11px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;}
#creator input[type=text]{background:#14101f;border:1px solid var(--line);color:var(--ink);
  padding:8px 10px;font-size:15px;letter-spacing:.05em;outline:none;}
#creator input[type=text]:focus{border-color:var(--gold);}
.row2{display:flex;gap:16px;flex-wrap:wrap;}
.swatches{display:flex;gap:6px;flex-wrap:wrap;}
.sw{width:26px;height:26px;border:2px solid rgba(255,255,255,.15);cursor:pointer;}
.sw.sel{border-color:#fff;outline:2px solid var(--gold);}
.seg{display:flex;gap:6px;flex-wrap:wrap;}
.seg button{padding:7px 12px;font-size:11px;letter-spacing:.1em;border:1px solid var(--line);color:var(--dim);text-transform:uppercase;}
.seg button.sel{border-color:var(--gold);color:#ffe9b0;background:#241b36;}
#creator-right{min-width:min(300px,88vw);display:flex;flex-direction:column;gap:10px;}
.stat-head{font-size:11px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;}
.stat-row{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:10px;}
.stat-row .sname{font-size:12px;letter-spacing:.14em;text-transform:uppercase;}
.stat-pips{display:flex;gap:4px;cursor:pointer;}
.pip{width:16px;height:20px;background:#241d33;border:1px solid rgba(255,255,255,.08);}
.pip.on{background:var(--gold);}
.stat-btns{display:flex;gap:4px;}
.stat-btns button{width:26px;height:26px;border:1px solid var(--line);color:var(--ink);font-size:15px;line-height:1;}
.stat-btns button:hover{border-color:var(--gold);}
#stat-note{font-size:11.5px;color:var(--dim);line-height:1.5;}

/* settings + controls */
#settings-list,#controls-grid{display:flex;flex-direction:column;gap:10px;background:var(--panel);
  border:1px solid var(--line);padding:18px 22px;width:min(640px,94vw);max-height:62vh;overflow-y:auto;}
.set-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;}
.set-row .lab{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;}
.set-row .sub{font-size:10.5px;color:var(--dim);letter-spacing:.04em;text-transform:none;display:block;margin-top:2px;}
.set-seg{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;}
.set-seg button{padding:6px 11px;font-size:11px;border:1px solid var(--line);color:var(--dim);}
.set-seg button.sel{border-color:var(--gold);color:#ffe9b0;background:#241b36;}
input[type=range]{accent-color:var(--gold);width:170px;}
.ctl-group{border-top:1px dashed rgba(255,255,255,.12);padding-top:8px;}
.ctl-group h4{font-size:11px;letter-spacing:.22em;color:var(--gold);margin-bottom:6px;text-transform:uppercase;}
.ctl-line{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;padding:2.5px 0;}
.ctl-line b{color:#ffe9b0;font-weight:700;white-space:nowrap;}
.key-chip{display:inline-block;min-width:26px;text-align:center;padding:4px 7px;background:#241b36;
  border:1px solid var(--line);border-bottom-width:3px;font-size:12px;font-weight:800;color:#ffe9b0;}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:20;}
.hud-card{position:absolute;top:max(12px,env(safe-area-inset-top));width:min(300px,36vw);
  background:var(--panel);border:1px solid var(--line);padding:9px 12px 10px;}
#hud-topleft{left:max(12px,env(safe-area-inset-left));}
#hud-topright{right:calc(max(12px,env(safe-area-inset-right)) + 52px);text-align:right;}
.hud-name{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar{position:relative;height:11px;background:#191225;border:1px solid rgba(255,255,255,.09);margin-top:4px;overflow:hidden;}
.bar.hp{height:14px;}
.bar .fill{position:absolute;inset:0;width:100%;transform-origin:left center;transition:transform .18s ease;}
#hud-topright .bar .fill{transform-origin:right center;}
.bar.hp .fill{background:linear-gradient(180deg,#7fdc6a,#3da23c);}
.bar.st .fill{background:linear-gradient(180deg,#ffd95e,#cf9a25);}
.bar.body .fill{background:linear-gradient(180deg,#ff9c6b,#c25b31);}
.bar.will{height:22px;margin-top:8px;}
.bar.will .fill{background:linear-gradient(180deg,#ffe9b0,var(--gold));transition:transform .07s linear;}
.hud-tags{margin-top:5px;font-size:9.5px;letter-spacing:.14em;color:#ffb0a0;text-transform:uppercase;min-height:12px;}
#hud-topcenter{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  text-align:center;background:var(--panel);border:1px solid var(--line);padding:6px 20px 8px;min-width:130px;}
#hud-round{font-size:11px;letter-spacing:.3em;color:var(--gold);}
#hud-clock{font-size:26px;font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums;}
#hud-clock.warn{color:var(--red);animation:pulse .5s infinite alternate;}
@keyframes pulse{from{opacity:1}to{opacity:.45}}
#hud-score{font-size:10px;color:var(--dim);letter-spacing:.1em;}
#hud-hint{position:absolute;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 118px);left:50%;transform:translateX(-50%);
  font-size:13px;letter-spacing:.1em;background:rgba(8,8,14,.78);border:1px solid var(--line);
  padding:8px 18px;color:#ffe9b0;text-align:center;max-width:88vw;}
#combo-pop{position:absolute;top:32%;left:50%;transform:translate(-50%,0) scale(1);font-weight:800;
  font-size:22px;letter-spacing:.12em;color:#ffe9b0;text-shadow:0 2px 0 #000;pointer-events:none;
  animation:comboPop .8s ease forwards;}
@keyframes comboPop{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}18%{opacity:1;transform:translate(-50%,0) scale(1.08)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-16px) scale(1)}}

/* announcements */
#announce{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%) scale(1);z-index:30;
  font-size:clamp(26px,6vw,58px);font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-align:center;
  color:#fff;text-shadow:0 4px 0 #6d1010,0 9px 26px rgba(0,0,0,.85);pointer-events:none;max-width:94vw;
  animation:annIn .38s cubic-bezier(.2,1.6,.4,1);}
@keyframes annIn{from{opacity:0;transform:translate(-50%,-50%) scale(1.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
#count-big{position:absolute;top:26%;left:50%;transform:translate(-50%,-50%);z-index:31;font-size:clamp(90px,20vw,190px);
  font-weight:800;color:var(--red);text-shadow:0 6px 0 #400,0 14px 40px #000;pointer-events:none;
  animation:cnt .9s ease-out forwards;}
@keyframes cnt{0%{opacity:0;transform:translate(-50%,-50%) scale(2)}25%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}

/* get-up minigame */
#getup{position:absolute;bottom:22%;left:50%;transform:translateX(-50%);z-index:32;text-align:center;
  background:rgba(60,8,8,.82);border:2px solid var(--red);padding:16px 30px;min-width:min(340px,86vw);
  pointer-events:none;}
#getup-title{font-size:22px;font-weight:800;letter-spacing:.2em;color:#fff;text-shadow:0 2px 0 #000;}
#getup-keys{margin:12px 0 4px;display:flex;gap:12px;justify-content:center;}
#gu-k0.hit,#gu-k1.hit{background:var(--gold);color:#201400;transform:scale(1.15);}
#getup-sub{font-size:11px;color:#ffcaca;letter-spacing:.1em;margin-top:6px;}

/* corner break */
#corner{position:absolute;inset:0;z-index:33;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;background:rgba(5,5,10,.72);backdrop-filter:blur(2px);padding:16px;}
#corner-title{font-size:clamp(20px,4vw,32px);letter-spacing:.28em;color:var(--gold);text-transform:uppercase;}
#corner-coach{font-style:italic;color:var(--ink);font-size:14px;text-align:center;max-width:520px;}
#corner-cards{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.corner-card{width:200px;padding:16px;background:var(--panel);border:1px solid var(--line);text-align:center;
  transition:border-color .12s, transform .1s;}
.corner-card:hover{border-color:var(--gold);transform:translateY(-4px);}
.corner-card h4{font-size:15px;letter-spacing:.14em;color:#ffe9b0;text-transform:uppercase;margin-bottom:8px;}
.corner-card p{font-size:11.5px;color:var(--dim);line-height:1.5;}
.corner-card .cost{display:block;margin-top:8px;font-size:10px;color:#e08a8a;letter-spacing:.1em;text-transform:uppercase;}
#corner-timer{font-size:11px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;}

/* subtitles */
#subtitles{position:absolute;left:50%;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 12px);transform:translateX(-50%);
  z-index:29;background:rgba(4,4,8,.82);border:1px solid var(--line);padding:8px 18px;font-size:14px;
  letter-spacing:.04em;color:#fff;text-align:center;max-width:min(720px,92vw);font-style:italic;
  pointer-events:none;}
#subtitles b{color:var(--gold);font-style:normal;}

/* fx overlays */
#vignette{position:absolute;inset:0;pointer-events:none;z-index:15;
  box-shadow:inset 0 0 140px 40px rgba(0,0,0,.55);transition:box-shadow .4s;}
#tunnel{position:absolute;inset:0;pointer-events:none;z-index:16;opacity:0;transition:opacity .5s;
  background:radial-gradient(ellipse at 50% 52%, transparent 34%, rgba(10,0,0,.9) 100%);}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:17;}
.lb{position:absolute;left:0;right:0;height:11vh;background:#000;z-index:26;transition:transform .45s ease;
  pointer-events:none;}
#letterbox-top{top:0;transform:translateY(-100%);}
#letterbox-bot{bottom:0;transform:translateY(100%);}
.lb.on{transform:translateY(0);}
#replay-tag{position:absolute;top:max(18px,env(safe-area-inset-top)+54px);left:50%;transform:translateX(-50%);
  z-index:27;font-size:13px;letter-spacing:.4em;color:var(--red);font-weight:800;text-transform:uppercase;
  pointer-events:none;animation:pulse .6s infinite alternate;}

/* ---------- touch controls ---------- */
#touch{position:absolute;inset:0;z-index:25;pointer-events:none;}
#touch-stick-zone{position:absolute;left:0;bottom:0;width:32%;height:54%;pointer-events:auto;}
#touch-stick-base{position:absolute;width:118px;height:118px;border-radius:50%;border:2px solid rgba(255,255,255,.22);
  background:rgba(20,20,34,.4);display:none;}
#touch-stick-nub{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(232,182,76,.55);
  border:2px solid rgba(255,255,255,.4);left:31px;top:31px;}
.touch-label{position:absolute;left:20px;bottom:20px;font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.4);text-transform:uppercase;}
#touch-actions{position:absolute;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:7px;pointer-events:auto;align-items:flex-end;}
.trow{display:flex;gap:7px;}
.tbtn{pointer-events:auto;width:66px;height:52px;background:rgba(18,16,30,.72);border:1.5px solid var(--line);
  color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.06em;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;}
.tbtn small{font-size:8px;color:var(--dim);letter-spacing:.04em;font-weight:600;}
.tbtn:active,.tbtn.press{background:rgba(232,182,76,.4);border-color:var(--gold);}
.tbtn.punch{height:58px;font-size:12px;}
.tbtn.p-jab{border-bottom:3px solid #6fd06f;}
.tbtn.p-cross{border-bottom:3px solid #e05555;}
.tbtn.p-hook{border-bottom:3px solid #e0a53c;}
.tbtn.p-upper{border-bottom:3px solid #7f7fe8;}
.tbtn.bodychip.on{background:rgba(255,156,107,.45);border-color:#ffb08a;}
.tbtn.slip{width:74px;}

/* gym overlay: panel floats over live 3D without eating gameplay clicks */
#screen-gym{background:none !important;backdrop-filter:none;pointer-events:none;}
#screen-gym #gym-panel,#screen-gym #gym-toast{pointer-events:auto;}

/* gym */
#gym-panel{position:absolute;top:calc(max(14px,env(safe-area-inset-top)) + 64px);right:max(14px,env(safe-area-inset-right));
  width:min(320px,84vw);background:var(--panel);border:1px solid var(--line);padding:16px;z-index:28;
  display:flex;flex-direction:column;gap:9px;}
#gym-drill-title{font-size:16px;font-weight:800;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;}
#gym-drill-desc{font-size:12.5px;line-height:1.55;color:var(--ink);}
#gym-progress{font-size:12px;color:#9fe89f;letter-spacing:.1em;min-height:16px;}
#gym-toast{position:absolute;top:30%;left:50%;transform:translateX(-50%);z-index:34;background:rgba(20,40,16,.9);
  border:2px solid #6fd06f;padding:14px 34px;font-size:22px;font-weight:800;letter-spacing:.14em;color:#cfffbf;
  text-transform:uppercase;animation:annIn .3s cubic-bezier(.2,1.6,.4,1);}

/* post fight */
#pf-verdict{font-size:clamp(30px,7vw,64px);font-weight:800;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;
  text-shadow:0 4px 0 #402, 0 10px 30px #000;text-align:center;}
#pf-sub{font-size:15px;color:var(--ink);letter-spacing:.08em;text-align:center;}
#pf-columns{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:flex-start;max-width:96vw;}
.pf-card{background:var(--panel);border:1px solid var(--line);padding:14px 18px;min-width:min(330px,92vw);}
.pf-card h3{font-size:12px;letter-spacing:.24em;color:var(--gold);margin-bottom:10px;text-transform:uppercase;}
.score-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.score-table td,.score-table th{padding:4px 8px;border-bottom:1px solid rgba(255,255,255,.08);text-align:center;}
.score-table th{color:var(--dim);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;}
.score-table td:first-child,.score-table th:first-child{text-align:left;}
.win-col{color:#9fe89f;font-weight:800;}
.lose-col{color:#e8a0a0;}
.stat-line{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;padding:3px 0;font-size:12.5px;}
.stat-line .mid{text-align:center;color:var(--dim);font-size:10px;letter-spacing:.14em;text-transform:uppercase;}
.stat-bar{height:8px;background:#191225;position:relative;overflow:hidden;display:flex;}
.stat-bar>div{height:100%;}
.sb-l{background:#7fd0ff;order:0;transform-origin:right;float:right;}
.sb-r{background:#ffb08a;}
.acc-line{font-size:10.5px;color:var(--dim);text-align:center;}

/* loading */
#loading-txt{font-size:14px;letter-spacing:.4em;color:var(--gold);text-transform:uppercase;animation:pulse .8s infinite alternate;}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .hud-card{width:29vw;padding:4px 6px 5px;}
  #hud-topleft{left:max(6px,env(safe-area-inset-left));}
  #hud-topright{right:max(6px,env(safe-area-inset-right));}
  .hud-name{font-size:8.5px;margin-bottom:3px;}
  .hud-tags{font-size:7.5px;margin-top:3px;min-height:9px;}
  .bar{height:6px;} .bar.hp{height:8px;margin-top:3px;}
  #hud-topcenter{top:max(6px,env(safe-area-inset-top));padding:3px 7px 4px;min-width:0;
    max-width:30vw;left:50%;}
  #hud-round{font-size:7.5px;letter-spacing:.18em;white-space:nowrap;}
  #hud-clock{font-size:15px;}
  #hud-score{font-size:8px;}
  .tbtn{width:56px;height:46px;font-size:10px;}
  .tbtn.punch{height:50px;width:58px;}
  .tbtn.slip{width:62px;}
  #getup{padding:12px 18px;}
  #corner-cards{gap:8px;}
  .corner-card{width:150px;padding:12px;}
  #hud-hint{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 178px);font-size:11px;padding:6px 12px;}
  #title-logo{text-shadow:0 3px 0 #6d1010,0 6px 0 #2a0808,0 10px 20px rgba(0,0,0,.8);}
}
@media (max-height:480px){
  .trow{gap:5px;} .tbtn{height:40px;} .tbtn.punch{height:44px;}
}