:root{
  --bone:#e9e3d2;
  --ash:#6a6459;
  --ember:#e5231c;
  --blue:#78b7cf;
  --red:#e34a32;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color:var(--bone);
  background:#000;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#000;overscroll-behavior:none;user-select:none}
button,input{font:inherit}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
#game,#hud{touch-action:none}
.hidden{display:none!important}
.screen{
  position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:18px;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;
  background:rgba(0,0,0,.9);
}
.panel{
  width:min(390px,92vw);padding:27px 23px;text-align:center;border:1px solid #4a463f;
  background:#080808;box-shadow:0 0 0 4px #000,0 24px 80px #000;
}
.hero-select-panel{width:min(780px,95vw);padding:24px}
.asset-toggle{
  width:auto;min-height:28px;margin:8px auto 0;padding:0 9px;color:#9f9687;border-color:#4a463f;
  background:#050505;font-size:6px;letter-spacing:.14em;
}
.asset-credit{display:block;margin:9px auto 0;color:#625d54;font-size:5px;letter-spacing:.12em;text-decoration:none}
.asset-credit:hover{color:#aaa397}
.hero-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.hero-option{
  position:relative;min-height:250px;padding:0;overflow:hidden;text-align:left;border-color:#302e2a;
  background:#050505;
}
.hero-option img{
  display:block;width:100%;height:190px;object-fit:cover;object-position:center 38%;
  filter:saturate(.75) contrast(1.08);opacity:.55;
}
.hero-option>span{display:grid;gap:4px;padding:10px}
.hero-option b{font-size:9px;font-weight:400;letter-spacing:.13em}
.hero-option small{color:#7b766d;font-size:7px;letter-spacing:.1em}
.hero-option em{
  position:absolute;top:8px;right:8px;padding:4px 6px;color:#736e65;background:#050505d9;
  border:1px solid #302e2a;font-size:6px;font-style:normal;letter-spacing:.12em;
}
.hero-option.selected{border-color:var(--bone);box-shadow:inset 0 0 0 1px #000}
.hero-option.selected img{opacity:1;filter:saturate(.9) contrast(1.08)}
.hero-option.selected em{color:#b8d2a5;border-color:#718162}
.hero-option:disabled{opacity:.58;cursor:not-allowed}
.selected-kit{display:grid;grid-template-columns:1fr 2fr;gap:7px 18px;margin-top:15px;text-align:left}
.selected-kit>span{color:var(--ember);font-size:8px;letter-spacing:.14em}
.selected-kit>p{grid-column:2;margin:0;color:#8e887d;font-size:8px;line-height:1.5}
#heroStats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
#heroStats i{height:4px;background:linear-gradient(90deg,var(--bone) var(--v),#25231f var(--v))}
.selected-kit>small{grid-column:1/-1;color:#59554e;font-size:6px;letter-spacing:.15em}
.chosen-hero{
  display:grid;grid-template-columns:50px 1fr auto;gap:10px;align-items:center;margin-bottom:14px;
  padding:7px;border:1px solid #302e2a;text-align:left;background:#050505;
}
.chosen-hero img{width:50px;height:58px;object-fit:cover;object-position:center 30%}
.chosen-hero span{display:grid;gap:4px}
.chosen-hero small{color:#6f6960;font-size:6px;letter-spacing:.14em}
.chosen-hero b{font-size:9px;font-weight:400;letter-spacing:.1em}
.chosen-hero button{width:auto;min-height:30px;padding:0 8px;color:#8b8578;font-size:7px}
.mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0 0 14px}
.mode-picker button{display:grid;gap:4px;place-content:center;min-height:54px;padding:7px;border-color:#302e2a;color:#777168;background:#050505}
.mode-picker button b{font-size:12px;font-weight:400;letter-spacing:.18em}
.mode-picker button small{color:#625d54;font-size:6px;letter-spacing:.08em}
.mode-picker button.selected{border-color:var(--bone);color:var(--bone);box-shadow:inset 0 0 0 1px #000}
.mode-picker button.selected small{color:#b8d2a5}
.eyebrow,label span{color:#6f6960;font-size:8px;letter-spacing:.24em}
h1{margin:15px 0 0;font-size:clamp(28px,10vw,48px);font-weight:400;letter-spacing:.5em;text-indent:.5em}
.subtitle{margin:11px 0 23px;color:#9a2d21;font-size:8px;letter-spacing:.22em}
label{display:grid;gap:7px;text-align:left}
input,button{
  width:100%;min-height:48px;border:1px solid #4a463f;border-radius:0;color:var(--bone);background:#0d0d0c;
}
input{padding:0 12px;text-align:center;text-transform:uppercase;letter-spacing:.16em;user-select:text}
button{padding:0 12px;cursor:pointer;font-weight:400;font-size:10px;letter-spacing:.16em}
button:active{background:var(--bone);color:#000}
button:disabled{opacity:.38}
.primary{margin-top:12px;border-color:var(--bone);background:#080808}
.quiet{min-height:40px;margin-top:10px;color:#8b8578;background:#080808}
.status{min-height:18px;margin:15px 0 10px;color:#aaa397;font-size:9px;line-height:1.6;letter-spacing:.06em}
.status.error{color:#ff765e}
.panel small{display:block;color:#5f5a52;font-size:8px;line-height:1.65;letter-spacing:.05em}
.search-rune{
  width:42px;height:42px;margin:22px auto 18px;border:1px solid #4a463f;transform:rotate(45deg);
  animation:rune 1.8s steps(8,end) infinite;
}
.search-rune::after{content:"";position:absolute;inset:10px;border:1px solid var(--ember)}
@keyframes rune{to{transform:rotate(405deg)}}
.waiting-title{margin:0;font-size:11px;font-weight:400;line-height:1.8;letter-spacing:.2em}

#hud{position:fixed;inset:0;z-index:10;pointer-events:none;font-size:10px;letter-spacing:.12em}
#hud::after{
  content:"";position:absolute;inset:0;z-index:80;opacity:0;pointer-events:none;
  background:radial-gradient(circle,transparent 45%,#c9312444 100%);box-shadow:inset 0 0 28px #e23f2d99;
}
#hud.hit-flash::after{animation:hitFlash .22s steps(3,end)}
@keyframes hitFlash{0%{opacity:1}100%{opacity:0}}
.sound-toggle{
  position:absolute;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));
  z-index:12;width:auto;min-height:28px;padding:0 8px;color:#777168;border-color:#37342f;
  background:#080808cc;font-size:6px;pointer-events:auto;
}
.top{
  position:absolute;top:max(9px,env(safe-area-inset-top));left:50%;display:grid;
  grid-template-columns:minmax(92px,180px) 76px minmax(92px,180px);gap:6px;
  width:min(94vw,505px);transform:translateX(-50%);
}
.crystal,.clock,.player{border:1px solid #4a463f;background:#080808e8;box-shadow:0 3px #000}
.crystal{display:grid;grid-template-columns:1fr auto;gap:4px 7px;padding:6px}
.crystal span{grid-column:1/-1;color:#8b8578;font-size:7px;letter-spacing:.15em}
.red{text-align:right}
.bar{height:7px;overflow:hidden;border:1px solid #3e3a34;background:#171613}
.bar i{display:block;width:100%;height:100%;background:var(--blue);transition:width .12s linear}
.red .bar i{background:var(--red)}
.crystal b{font-size:8px;font-weight:400}
.clock{display:grid;place-items:center;padding:3px;text-align:center}
.clock span,.clock small{max-width:70px;overflow:hidden;color:#706a61;font-size:7px}
.clock b{font-size:13px;font-weight:400}
.roster{position:absolute;top:max(57px,calc(env(safe-area-inset-top) + 48px));left:50%;display:grid;grid-template-columns:1fr 1fr;gap:6px;width:min(94vw,505px);transform:translateX(-50%);color:#817b70;font-size:6px;line-height:1.45;pointer-events:none}
.roster span{overflow:hidden;padding:3px 6px;border:1px solid #302d28;background:#080808c9;white-space:nowrap;text-overflow:ellipsis}.roster .blue-team{color:#78b7cf;text-align:left}.roster .red-team{color:#e06b59;text-align:right}.roster b{color:#b7afa1;font-weight:400}.roster em{color:#d6aa5e;font-style:normal}
.player{
  position:absolute;left:50%;bottom:max(13px,env(safe-area-inset-bottom));
  display:grid;grid-template-columns:auto minmax(130px,220px) auto;gap:9px;align-items:center;
  min-width:min(430px,72vw);padding:8px 10px;transform:translateX(-50%);
}
.player-label{display:grid;gap:2px;text-align:left}
.player-label span{font-size:7px;color:var(--blue)}
.player-label strong{font-size:9px;font-weight:400;color:var(--bone)}
.player-label em{color:#d6aa5e;font-style:normal}
.player-bars{position:relative;display:grid;gap:3px}
.player-life{height:12px;border-color:#6b655b}
.player-life i{background:var(--bone)}
.player-xp{height:3px;overflow:hidden;background:#25211b}
.player-xp i{display:block;width:0;height:100%;background:#d6aa5e;transition:width .18s steps(8,end)}
.player-bars>small{
  position:absolute;right:2px;top:17px;min-height:0;color:#857b68;font-size:5px;letter-spacing:.08em;
  text-shadow:1px 1px #000;
}
.player b{min-width:68px;text-align:right;font-size:10px;font-weight:400}
.talent-panel{
  position:absolute;top:max(68px,calc(env(safe-area-inset-top) + 58px));right:max(14px,env(safe-area-inset-right));left:auto;
  width:min(330px,58vw);
  padding:0;border:1px solid #5b5140;background:#080808f2;box-shadow:0 5px #000;
  pointer-events:auto;
}
.talent-toggle{
  display:grid;grid-template-columns:auto 1fr 18px;gap:8px;align-items:center;min-height:38px;padding:6px 9px;
  border:0;background:#080808;color:var(--bone);text-align:left;
}
.talent-toggle span{color:#d6aa5e;font-size:7px;letter-spacing:.16em}
.talent-toggle b{font-size:9px;font-weight:400}
.talent-toggle strong{font-size:7px;font-weight:400;letter-spacing:.16em;text-align:center}
.talent-toggle i{position:relative;width:14px;height:14px;justify-self:end}
.talent-toggle i::before{
  content:"";position:absolute;left:3px;top:2px;width:6px;height:6px;border-right:1px solid #b8aa91;border-bottom:1px solid #b8aa91;
  transform:rotate(45deg);transition:transform .12s;
}
.talent-panel.open .talent-toggle i::before{top:6px;transform:rotate(225deg)}
.talent-body{display:none;padding:7px 8px 8px;border-top:1px solid #403a31}
.talent-panel.open .talent-body{display:block}
.talent-body>small{display:block;margin:0 2px 7px;color:#8b8578;font-size:6px;letter-spacing:.14em}
.talent-choices{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.talent-choices button{
  display:grid;gap:4px;min-height:48px;padding:7px 9px;text-align:left;border-color:#4f493e;background:#11100e;
}
.talent-choices strong{color:var(--bone);font-size:7px;font-weight:400;letter-spacing:.12em}
.talent-choices small{color:#938b7d;font-size:6px;line-height:1.35;letter-spacing:.03em}
#message{
  position:absolute;top:24%;left:50%;min-width:190px;opacity:0;text-align:center;
  font-size:11px;letter-spacing:.22em;text-shadow:2px 2px #000;transform:translate(-50%,-50%);
  transition:opacity .15s;
}
#message.show{opacity:1}
.combat-banner{
  position:absolute;top:34%;left:50%;display:grid;gap:7px;min-width:260px;opacity:0;
  text-align:center;pointer-events:none;transform:translate(-50%,-50%) scale(.92);
}
.combat-banner strong{font-size:19px;font-weight:400;letter-spacing:.26em;text-shadow:3px 3px #000}
.combat-banner small{color:#aaa397;font-size:7px;letter-spacing:.15em;text-shadow:2px 2px #000}
.combat-banner.show{animation:battleBanner 1.65s steps(8,end)}
@keyframes battleBanner{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}12%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0}}
.tutorial{
  position:absolute;top:max(76px,calc(env(safe-area-inset-top) + 62px));left:max(14px,env(safe-area-inset-left));
  width:min(270px,48vw);padding:11px 12px;border:1px solid #514b42;background:#080808e8;
  box-shadow:0 4px #000;pointer-events:none;
}
.tutorial>div{display:flex;justify-content:space-between;align-items:center}
.tutorial>div>span{color:var(--ember);font-size:6px;letter-spacing:.18em}
.tutorial button{width:auto;min-height:24px;padding:0 6px;color:#756f65;border:0;background:transparent;font-size:6px;pointer-events:auto}
.tutorial strong{display:block;margin-top:8px;font-size:9px;font-weight:400;letter-spacing:.14em}
.tutorial p{min-height:28px;margin:6px 0 9px;color:#aaa397;font-size:7px;line-height:1.55;letter-spacing:.04em}
.tutorial>i{display:block;height:3px;background:#292620}
.tutorial>i>b{display:block;width:0;height:100%;background:var(--ember);transition:width .18s}
#stick{
  --stick-face:122px;--stick-hit:190px;
  position:absolute;left:calc(max(23px,env(safe-area-inset-left)) - 34px);
  bottom:calc(max(23px,env(safe-area-inset-bottom)) - 34px);
  width:var(--stick-hit);height:var(--stick-hit);border-radius:50%;pointer-events:auto;
}
#stick::before{
  content:"";position:absolute;top:50%;left:50%;width:var(--stick-face);height:var(--stick-face);
  border:1px dashed #4a463e;border-radius:50%;background:#11110e52;
  box-shadow:inset 0 0 22px #0006,0 6px 16px #0005;transform:translate(-50%,-50%);
}
#knob{
  position:absolute;top:50%;left:50%;width:42px;height:42px;border:1px solid #8b8578;
  z-index:1;border-radius:50%;background:#191713cc;box-shadow:0 3px 8px #0008;
  transform:translate(-50%,-50%);
}
.interact{
  position:absolute;right:max(33px,calc(env(safe-area-inset-right) + 22px));
  bottom:max(154px,calc(env(safe-area-inset-bottom) + 142px));
  display:grid;place-items:center;width:58px;min-height:58px;padding:0;border-color:#817765;border-radius:50%;
  color:#eee2ca;background:#15120de8;box-shadow:inset 0 0 13px #000,0 4px #000;
  overflow:visible;pointer-events:auto;
}
.interact span{font-size:7px;letter-spacing:.12em}
.interact small{min-height:0;color:#766e61;font-size:6px}
.interact.held{border-color:#fff;background:#2a2117}
.interact #interactKnob{
  position:absolute;top:50%;left:50%;display:none;width:17px;height:17px;border:1px solid #b6844e;
  border-radius:50%;background:#251b12dd;pointer-events:none;transform:translate(-50%,-50%);
}
.interact.targeted #interactKnob{display:block}
.interact.targeted{border-color:#b6844e}
.actions{
  position:absolute;right:max(17px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));
  display:grid;grid-template-columns:66px 74px 90px;gap:9px;align-items:end;pointer-events:auto;
}
.actions.ranged{grid-template-columns:62px 76px 96px}
.actions.ranged::before{
  content:"TAP AUTO · DRAG TO AIM · HOLD TO CHARGE";position:absolute;right:0;bottom:108px;
  width:190px;color:#8b8578;font-size:6px;line-height:1.5;text-align:right;letter-spacing:.09em;
  text-shadow:1px 1px #000;
}
.action{
  position:relative;display:grid;place-items:center;aspect-ratio:1;min-height:0;overflow:visible;border-radius:50%;
  background:#0b0b0ae8;box-shadow:inset 0 0 15px #000,0 4px #000;
}
.action[hidden]{display:none}
.action span{font-size:8px}
.action small{min-height:10px;font-size:8px}
.action.attack{
  --charge:0;width:90px;border-color:var(--bone);
  background:radial-gradient(circle at center,#0b0b0a 0 63%,transparent 65%),conic-gradient(var(--ember) calc(var(--charge)*1turn),#171613 0);
}
.actions.ranged .action.attack{width:96px}
.action.attack #aimKnob{
  position:absolute;top:50%;left:50%;width:21px;height:21px;border:1px solid #8b8578;border-radius:50%;
  background:#1d1b17cc;pointer-events:none;transform:translate(-50%,-50%);
}
.action.skill{
  --cooldown:0;border-color:#706a61;
  background:radial-gradient(circle at center,#0b0b0a 0 66%,transparent 68%),conic-gradient(#706a61 calc(var(--cooldown)*1turn),#171613 0);
}
.action.skill #skillKnob{
  position:absolute;top:50%;left:50%;width:17px;height:17px;border:1px solid #706a61;border-radius:50%;
  background:#1d1b17cc;pointer-events:none;transform:translate(-50%,-50%);
}
.action.skill:not(.targeted) #skillKnob{display:none}
.action.skill.perfect{border-color:#fff2d9;box-shadow:inset 0 0 18px #8b5b25,0 4px #000,0 0 16px #fff2d966}
.action.held{border-color:#fff;background:#1e1d19}
.action.attack.held{background:radial-gradient(circle at center,#1e1d19 0 63%,transparent 65%),conic-gradient(var(--ember) calc(var(--charge)*1turn),#24211c 0)}
.action.attack.charged{border-color:var(--ember);box-shadow:inset 0 0 18px #54180d,0 4px #000,0 0 14px #d64a2c55}
.action.attack.charged::after{
  content:"";position:absolute;inset:-8px;border:1px solid var(--ember);border-radius:50%;
  animation:chargedPulse .65s steps(5,end) infinite;
}
@keyframes chargedPulse{50%{opacity:.2;transform:scale(1.08)}}
.action.cool{opacity:.42}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:16px 0 4px}
.result-stats span{display:grid;gap:6px;padding:9px 4px;border:1px solid #302e2a;background:#050505}
.result-stats small{color:#706a61;font-size:6px;letter-spacing:.08em}
.result-stats b{font-size:12px;font-weight:400}
h2{font-weight:400}

@media(max-width:740px) and (orientation:portrait){
  .hero-select-panel{padding:18px 14px}
  .hero-options{gap:5px}
  .hero-option{min-height:190px}
  .hero-option img{height:132px}
  .hero-option>span{padding:8px 6px}
  .hero-option b{font-size:7px}
  .hero-option small{font-size:5px}
  .selected-kit{grid-template-columns:1fr;margin-top:10px}
  .selected-kit>p{grid-column:1}
  .top{grid-template-columns:1fr 58px 1fr}
  .actions{right:max(10px,env(safe-area-inset-right));grid-template-columns:55px 63px 76px;gap:5px;bottom:max(20px,env(safe-area-inset-bottom))}
  .actions.ranged{grid-template-columns:54px 65px 84px}
  .actions.ranged::before{bottom:96px;width:174px;font-size:5px}
  .action.attack{width:76px}
  .actions.ranged .action.attack{width:84px}
  #stick{
    --stick-face:104px;--stick-hit:176px;
    left:calc(max(16px,env(safe-area-inset-left)) - 36px);
    bottom:calc(max(23px,env(safe-area-inset-bottom)) - 36px);
  }
  .interact{right:max(25px,calc(env(safe-area-inset-right) + 18px));bottom:max(139px,calc(env(safe-area-inset-bottom) + 127px));width:52px;min-height:52px}
  .player{bottom:145px;min-width:min(94vw,410px);grid-template-columns:65px 1fr 65px}
  .talent-panel{top:max(68px,calc(env(safe-area-inset-top) + 58px));right:max(8px,env(safe-area-inset-right));left:auto;width:min(300px,72vw)}
  .tutorial{top:72px;width:min(250px,68vw)}
  .combat-banner{top:29%}
}
@media(max-width:360px) and (orientation:portrait){
  .actions,.actions.ranged{grid-template-columns:47px 57px 76px;gap:4px}
  .action.attack,.actions.ranged .action.attack{width:76px}
  #stick{
    --stick-face:96px;--stick-hit:164px;
    left:calc(max(12px,env(safe-area-inset-left)) - 34px);
    bottom:calc(max(23px,env(safe-area-inset-bottom)) - 34px);
  }
  .interact{right:max(24px,calc(env(safe-area-inset-right) + 16px));bottom:max(137px,calc(env(safe-area-inset-bottom) + 125px));width:48px;min-height:48px}
}
@media(orientation:landscape) and (max-height:640px){
  .screen{display:block;padding:10px 18px calc(14px + env(safe-area-inset-bottom))}
  .screen>.panel{max-width:calc(100vw - 36px);margin:0 auto}
  .hero-select-panel{width:min(920px,96vw);padding:9px 14px}
  .hero-select-panel h1{margin-top:4px;font-size:25px;line-height:1}
  .hero-select-panel .subtitle{margin:4px 0 6px}
  .hero-options{gap:8px;margin-top:5px}
  .hero-option{min-height:174px}
  .hero-option img{height:130px;object-fit:contain;object-position:center bottom;background:radial-gradient(circle at 50% 72%,#171713 0,#050505 58%)}
  .hero-option>span{padding:5px 7px}
  .selected-kit{grid-template-columns:auto minmax(180px,1.6fr) minmax(150px,1fr);gap:7px 14px;align-items:center;margin-top:7px}
  .selected-kit>span{grid-column:1}
  .selected-kit>p{grid-column:2;margin:0}
  #heroStats{grid-column:3}
  .selected-kit>small{display:none}
  .hero-select-panel .primary{min-height:34px;margin-top:7px}
  .asset-toggle{min-height:24px;margin-top:5px}
  .asset-credit{margin-top:5px}
  .player{left:41%;min-width:min(390px,60vw)}
  .talent-panel{top:max(61px,calc(env(safe-area-inset-top) + 51px));right:max(10px,env(safe-area-inset-right));left:auto;width:min(320px,42vw)}
}
@media(max-height:480px){
  .hero-select-panel{width:min(850px,96vw);padding:10px 16px}
  .hero-select-panel h1{margin-top:5px;font-size:25px}
  .hero-select-panel .subtitle{margin:4px 0 7px}
  .hero-options{margin-top:5px}
  .hero-option{min-height:130px}
  .hero-option img{height:88px}
  .hero-option>span{padding:5px 7px}
  .selected-kit{display:none}
  .hero-select-panel .primary{min-height:34px;margin-top:6px}
  .panel{padding:16px 20px}
  h1{font-size:34px}
  .subtitle{margin-bottom:14px}
  #stick{--stick-face:100px;--stick-hit:164px}
  .interact{right:max(23px,calc(env(safe-area-inset-right) + 15px));bottom:max(131px,calc(env(safe-area-inset-bottom) + 119px));width:48px;min-height:48px}
  .actions{grid-template-columns:54px 62px 76px}
  .action.attack{width:76px}
  .player{bottom:7px}
  .tutorial{top:52px;width:250px}
  .talent-panel{top:max(58px,calc(env(safe-area-inset-top) + 48px));right:max(8px,env(safe-area-inset-right));left:auto;width:min(310px,42vw)}
  .talent-choices button{min-height:40px;padding:5px 7px}
  .roster{top:max(53px,calc(env(safe-area-inset-top) + 44px));width:min(76vw,440px);font-size:5px}
}