/* GOKUSOL — Hyperbolic Time Chamber. Fully self-contained, namespaced .htc- .
   Layers on top of the existing site; nothing existing is modified. */

/* ---------- entry point (CTA band injected after #enter) ---------- */
.htc-entry{ position:relative; padding:clamp(70px,12vh,120px) clamp(20px,5vw,40px); text-align:center; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 30%, #14161f, #0a0b10 70%); border-top:1px solid rgba(255,255,255,.06); }
.htc-entry::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 40%, rgba(255,200,120,.10), transparent 70%); pointer-events:none; }
.htc-entry .kick{ font-family:'Oswald',sans-serif; letter-spacing:6px; font-size:13px; color:#ffc23a; }
.htc-entry h2{ font-family:'Anton',sans-serif; font-size:clamp(30px,6vw,60px); line-height:1; letter-spacing:1px; margin:10px auto 6px; max-width:14ch; }
.htc-entry p{ font-family:'Inter',sans-serif; color:#9aa2b6; font-size:15px; max-width:520px; margin:0 auto 22px; }
.htc-enter-btn{ position:relative; font-family:'Anton',sans-serif; font-size:clamp(17px,3.4vw,22px); letter-spacing:1.5px; color:#160a00;
  background:linear-gradient(180deg,#ffe08a,#ff6a1a); border:none; border-radius:12px; padding:16px 34px; cursor:pointer;
  box-shadow:0 12px 34px -10px rgba(255,120,30,.8), inset 0 1px 0 rgba(255,255,255,.5); transition:transform .14s, box-shadow .2s; }
.htc-enter-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -10px rgba(255,120,30,1); }
.htc-enter-btn:active{ transform:translateY(2px); }
.htc-entry .sub{ display:block; margin-top:14px; font-family:'Oswald',sans-serif; letter-spacing:3px; font-size:12px; color:#6f7891; }
.htc-resume-badge{ display:inline-block; margin-left:10px; font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:1px; color:#0a0b10; background:#7fe6ff; border-radius:20px; padding:3px 9px; vertical-align:middle; }

/* small dock button (added to existing fx-dock if present) */
#fx-b-htc svg{ width:22px; height:22px; }

/* ---------- transition veil ---------- */
#htc-veil{ position:fixed; inset:0; z-index:1000; background:#fff; opacity:0; pointer-events:none; transition:opacity .5s ease; }
#htc-veil.show{ opacity:1; }

/* ---------- chamber root ---------- */
#htc-root{ position:fixed; inset:0; z-index:900; display:none; overflow:hidden; color:#2a241c;
  font-family:'Inter',sans-serif; -webkit-user-select:none; user-select:none; touch-action:none; }
#htc-root.open{ display:block; }
#htc-scene{ position:absolute; inset:0; width:100%; height:100%; }
#htc-root .htc-vig{ position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 220px 40px rgba(120,90,60,.18); }

/* ---------- HUD ---------- */
.htc-hud{ position:absolute; top:0; left:0; right:0; z-index:5; display:flex; justify-content:space-between; align-items:flex-start;
  padding:14px clamp(12px,3vw,26px); gap:10px; pointer-events:none; }
.htc-stats{ display:flex; gap:8px; flex-wrap:wrap; }
.htc-chip{ background:rgba(24,18,12,.5); backdrop-filter:blur(6px); border:1px solid rgba(255,210,120,.28); border-radius:10px; padding:7px 12px; min-width:74px; }
.htc-chip .l{ display:block; font-family:'Oswald',sans-serif; letter-spacing:2px; font-size:9px; color:#e9c88a; }
.htc-chip .v{ display:block; font-family:'Anton',sans-serif; font-size:19px; color:#fff6e6; line-height:1.05; letter-spacing:.5px; font-variant-numeric:tabular-nums; text-shadow:0 1px 6px rgba(0,0,0,.4); }
.htc-chip.pl .v{ color:#ffd76a; }
.htc-ratio{ align-self:flex-start; text-align:right; }
.htc-ratio .badge{ display:inline-block; font-family:'Oswald',sans-serif; letter-spacing:1.5px; font-size:11px; color:#160a00; background:linear-gradient(180deg,#ffe08a,#ffb03a); border-radius:20px; padding:6px 12px; box-shadow:0 4px 14px -6px rgba(255,150,40,.8); }
.htc-timebar{ margin-top:8px; width:min(200px,42vw); }
.htc-timebar .row{ display:flex; align-items:center; gap:6px; margin-top:5px; }
.htc-timebar .k{ font-family:'Oswald',sans-serif; letter-spacing:1px; font-size:9px; color:#8a7a5c; width:52px; text-align:right; }
.htc-timebar .track{ flex:1; height:5px; border-radius:4px; background:rgba(120,90,50,.2); overflow:hidden; }
.htc-timebar .track i{ display:block; height:100%; border-radius:4px; }
.htc-timebar .out i{ background:linear-gradient(90deg,#7fd0ff,#3aa0ff); }
.htc-timebar .in i{ background:linear-gradient(90deg,#ffd76a,#ff8a2a); }

/* ---------- training menu ---------- */
.htc-menu{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:0 clamp(12px,3vw,26px) calc(18px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:12px; }
.htc-menu .prompt{ font-family:'Oswald',sans-serif; letter-spacing:4px; font-size:12px; color:#7a6a4c; text-transform:uppercase; text-shadow:0 1px 4px rgba(255,255,255,.6); }
.htc-train{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; width:min(760px,96vw); }
.htc-tbtn{ position:relative; font-family:'Anton',sans-serif; letter-spacing:1px; font-size:clamp(13px,2.4vw,17px); color:#2a1c0e;
  background:linear-gradient(180deg, rgba(255,248,235,.94), rgba(255,232,200,.9)); border:1px solid rgba(200,150,80,.5); border-radius:12px;
  padding:14px 8px 12px; cursor:pointer; overflow:hidden; transition:transform .12s, box-shadow .2s, border-color .2s;
  box-shadow:0 8px 22px -12px rgba(120,80,30,.7); display:flex; flex-direction:column; align-items:center; gap:6px; }
.htc-tbtn:hover{ transform:translateY(-3px); border-color:var(--tc,#ff8a2a); box-shadow:0 16px 30px -14px var(--tc,rgba(255,140,40,.8)); }
.htc-tbtn:active{ transform:translateY(0); }
.htc-tbtn .ic{ width:26px; height:26px; color:var(--tc,#ff7a1a); }
.htc-tbtn .lvl{ font-family:'Oswald',sans-serif; letter-spacing:1px; font-size:10px; color:#8a6a3a; }
.htc-tbtn .bar{ position:absolute; left:0; bottom:0; height:3px; background:var(--tc,#ff8a2a); width:0; transition:width .4s; }
.htc-leave{ font-family:'Oswald',sans-serif; letter-spacing:3px; font-size:13px; color:#5a4c38; background:rgba(255,255,255,.5); border:1px solid rgba(120,90,50,.3);
  border-radius:10px; padding:10px 22px; cursor:pointer; transition:.2s; }
.htc-leave:hover{ color:#160a00; border-color:#ff8a2a; background:rgba(255,255,255,.8); }

/* ---------- mini-game layer ---------- */
#htc-game{ position:absolute; inset:0; z-index:8; display:none; }
#htc-game.on{ display:block; }
.htc-gwrap{ position:absolute; inset:0; }
.htc-gtop{ position:absolute; top:0; left:0; right:0; z-index:3; display:flex; justify-content:space-between; align-items:center; padding:16px clamp(14px,4vw,30px); pointer-events:none; }
.htc-gtitle{ font-family:'Anton',sans-serif; font-size:clamp(18px,4vw,26px); letter-spacing:1px; color:#2a1c0e; text-shadow:0 1px 8px rgba(255,255,255,.7); }
.htc-gtimer{ font-family:'Anton',sans-serif; font-size:22px; color:#ff6a1a; font-variant-numeric:tabular-nums; }
.htc-gscore{ position:absolute; top:52px; left:50%; transform:translateX(-50%); z-index:3; font-family:'Oswald',sans-serif; letter-spacing:2px; font-size:13px; color:#5a4c38; pointer-events:none; }
.htc-gfield{ position:absolute; inset:0; }
.htc-target{ position:absolute; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; will-change:transform; touch-action:none; }
.htc-target .ring{ position:absolute; inset:0; border-radius:50%; border:3px solid var(--tc,#ff7a1a); box-shadow:0 0 20px -2px var(--tc,#ff7a1a), inset 0 0 14px -4px var(--tc,#ff7a1a); }
.htc-target .core{ width:40%; height:40%; border-radius:50%; background:var(--tc,#ff7a1a); box-shadow:0 0 16px var(--tc,#ff7a1a); }
.htc-target .shrink{ position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(255,255,255,.7); }
.htc-target.pop{ animation:htc-pop .28s ease forwards; }
@keyframes htc-pop{ to{ transform:scale(1.7); opacity:0; } }
.htc-orb{ position:absolute; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:radial-gradient(circle at 38% 34%, #fff, #ffcf6a 52%, #ff8a1e);
  box-shadow:0 0 26px #ffb14a; z-index:2; pointer-events:none; }
.htc-zone{ position:absolute; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%; border:3px dashed rgba(200,160,90,.7); box-shadow:0 0 26px -6px rgba(255,180,90,.5); z-index:1; pointer-events:none; }
.htc-zone.in{ border-color:#3ce68c; box-shadow:0 0 30px -4px rgba(60,230,140,.8); }
.htc-cue{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; font-family:'Anton',sans-serif; font-size:clamp(22px,6vw,44px); letter-spacing:1px; pointer-events:none; }
.htc-cue .arrow{ font-size:1.4em; }
.htc-hitzone{ position:absolute; left:50%; bottom:16%; transform:translateX(-50%); z-index:2; display:flex; gap:14px; }
.htc-actbtn{ font-family:'Anton',sans-serif; letter-spacing:1px; font-size:clamp(15px,3.4vw,20px); color:#160a00; border:none; border-radius:12px; padding:16px 24px; cursor:pointer; box-shadow:0 8px 22px -8px rgba(0,0,0,.5); }
.htc-actbtn.dodge{ background:linear-gradient(180deg,#a9e8ff,#3aa0ff); } .htc-actbtn.counter{ background:linear-gradient(180deg,#ffd76a,#ff6a1a); }
.htc-actbtn:active{ transform:translateY(2px); }
.htc-flash{ position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); z-index:4; font-family:'Anton',sans-serif; font-size:clamp(26px,7vw,52px); letter-spacing:1px; opacity:0; pointer-events:none; text-shadow:0 2px 20px rgba(0,0,0,.4); }
.htc-flash.show{ animation:htc-flash .7s ease forwards; }
@keyframes htc-flash{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.6) } 25%{ opacity:1; transform:translate(-50%,-50%) scale(1) } 100%{ opacity:0; transform:translate(-50%,-58%) scale(1.05) } }

/* ---------- session result + completion ---------- */
.htc-overlay2{ position:absolute; inset:0; z-index:12; display:none; align-items:center; justify-content:center; padding:24px;
  background:rgba(255,252,246,.62); backdrop-filter:blur(6px); }
.htc-overlay2.on{ display:flex; }
.htc-card{ width:min(460px,94vw); max-height:92vh; overflow-y:auto; text-align:center; background:linear-gradient(180deg, rgba(24,18,12,.92), rgba(14,10,6,.92)); color:#fff6e6;
  border:1px solid rgba(255,210,120,.4); border-radius:18px; padding:28px 24px; box-shadow:0 40px 90px -30px #000; animation:htc-rise .5s cubic-bezier(.2,.7,.2,1); }
@keyframes htc-rise{ from{ transform:translateY(24px); opacity:0 } }
.htc-card .big{ font-family:'Anton',sans-serif; font-size:clamp(30px,7vw,52px); letter-spacing:1px; color:#ffd76a; text-shadow:0 0 30px rgba(255,180,60,.5); }
.htc-card .sub{ font-family:'Oswald',sans-serif; letter-spacing:3px; font-size:12px; color:#c9b48a; margin-top:4px; }
.htc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0 6px; }
.htc-stat{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:12px; text-align:left; }
.htc-stat .k{ font-family:'Oswald',sans-serif; letter-spacing:2px; font-size:10px; color:#c9b48a; }
.htc-stat .v{ font-family:'Anton',sans-serif; font-size:22px; color:#fff6e6; font-variant-numeric:tabular-nums; }
.htc-stat.wide{ grid-column:1/3; } .htc-stat.hero .v{ color:#ffd76a; font-size:30px; }
.htc-card .cbtns{ display:flex; gap:10px; margin-top:18px; }
.htc-card .cbtns button{ flex:1; font-family:'Anton',sans-serif; letter-spacing:1px; font-size:16px; padding:14px; border-radius:12px; cursor:pointer; border:none; }
.htc-card .cont{ color:#160a00; background:linear-gradient(180deg,#ffe08a,#ff8a1e); }
.htc-card .exit{ color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); }

/* future: choose your trainer (stub) */
.htc-trainer-hook{ position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:5; font-family:'Oswald',sans-serif; letter-spacing:2px; font-size:10px; color:#9a865e; background:rgba(255,255,255,.4); border:1px solid rgba(150,120,70,.3); border-radius:20px; padding:5px 12px; cursor:default; }

@media (max-width:560px){
  .htc-stats{ gap:6px; } .htc-chip{ min-width:60px; padding:6px 9px; } .htc-chip .v{ font-size:16px; }
  .htc-train{ grid-template-columns:repeat(2,1fr); }
  .htc-timebar{ display:none; }
}