:root{
    --cream: #FFF6E8;
    --cream-2: #FCEBCB;
    --ink: #221C14;
    --gold: #F2B93B;
    --gold-deep: #DB962A;
    --coral: #FF6B57;
    --mint: #4FBFA0;
    --crit: #E63946;
    --shadow: rgba(34,28,20,0.18);
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0;padding:0;
    width:100%;height:100%;
    overflow:hidden;
    background:var(--cream);
    font-family:'Nanum Gothic', sans-serif;
    color:var(--ink);
    -webkit-user-select:none;
    user-select:none;
    touch-action:manipulation;
  }
  .stage{
    position:relative;
    width:100%;
    height:100vh;
    min-height:600px;
    display:flex;
    flex-direction:column;
    align-items:center;
    background:
      radial-gradient(circle at 20% 10%, #FFFDF6 0%, transparent 45%),
      radial-gradient(circle at 85% 78%, #FFE9BE 0%, transparent 50%),
      var(--cream);
  }

  /* =========================================================
     OPENING SCREEN
  ==========================================================*/
  .opening{
    position:absolute;
    inset:0;
    z-index:200;
    background:
      radial-gradient(ellipse at 50% 38%, #3a2f4d 0%, #1c1626 55%, #0d0a13 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    overflow:hidden;
    transition:opacity .5s ease, visibility .5s;
  }
  .opening.hidden{ opacity:0; visibility:hidden; pointer-events:none; }

  .rays{
    position:absolute;
    top:-20%;
    left:50%;
    width:220%;
    height:220%;
    transform:translateX(-50%);
    background:conic-gradient(from 0deg,
      rgba(242,185,59,0.10) 0deg, rgba(242,185,59,0) 8deg,
      rgba(242,185,59,0.10) 16deg, rgba(242,185,59,0) 24deg,
      rgba(242,185,59,0.10) 32deg, rgba(242,185,59,0) 40deg,
      rgba(242,185,59,0.10) 48deg, rgba(242,185,59,0) 56deg,
      rgba(242,185,59,0.10) 64deg, rgba(242,185,59,0) 72deg,
      rgba(242,185,59,0.10) 80deg, rgba(242,185,59,0) 88deg,
      rgba(242,185,59,0.10) 96deg, rgba(242,185,59,0) 104deg,
      rgba(242,185,59,0.10) 112deg, rgba(242,185,59,0) 120deg,
      rgba(242,185,59,0.10) 128deg, rgba(242,185,59,0) 136deg,
      rgba(242,185,59,0.10) 144deg, rgba(242,185,59,0) 152deg,
      rgba(242,185,59,0.10) 160deg, rgba(242,185,59,0) 168deg,
      rgba(242,185,59,0.10) 176deg, rgba(242,185,59,0) 184deg,
      rgba(242,185,59,0.10) 192deg, rgba(242,185,59,0) 200deg,
      rgba(242,185,59,0.10) 208deg, rgba(242,185,59,0) 216deg,
      rgba(242,185,59,0.10) 224deg, rgba(242,185,59,0) 232deg,
      rgba(242,185,59,0.10) 240deg, rgba(242,185,59,0) 248deg,
      rgba(242,185,59,0.10) 256deg, rgba(242,185,59,0) 264deg,
      rgba(242,185,59,0.10) 272deg, rgba(242,185,59,0) 280deg,
      rgba(242,185,59,0.10) 288deg, rgba(242,185,59,0) 296deg,
      rgba(242,185,59,0.10) 304deg, rgba(242,185,59,0) 312deg,
      rgba(242,185,59,0.10) 320deg, rgba(242,185,59,0) 328deg,
      rgba(242,185,59,0.10) 336deg, rgba(242,185,59,0) 344deg,
      rgba(242,185,59,0.10) 352deg, rgba(242,185,59,0) 360deg);
    animation: raySpin 40s linear infinite;
    pointer-events:none;
  }
  @keyframes raySpin{ to{ transform:translateX(-50%) rotate(360deg); } }

  .opening-title{
    position:relative;
    z-index:5;
    margin-top:6vh;
    text-align:center;
    padding:0 20px;
  }
  .opening-eyebrow{
    font-family:'Baloo 2', sans-serif;
    font-size:13px;
    letter-spacing:6px;
    color:var(--gold);
    font-weight:700;
    opacity:0.9;
  }
  .opening-title h1{
    font-family:'Black Han Sans', sans-serif;
    font-size:clamp(30px, 9vw, 46px);
    line-height:1.15;
    margin:6px 0 0;
    background:linear-gradient(180deg, #FFE9AE 0%, var(--gold) 55%, var(--crit) 130%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 2px 0 rgba(0,0,0,0.4);
    letter-spacing:1px;
    animation: titleIn .7s cubic-bezier(.2,1.4,.4,1) both;
  }
  @keyframes titleIn{
    0%{ opacity:0; transform:scale(0.7) rotate(-3deg); }
    60%{ opacity:1; transform:scale(1.08) rotate(1deg); }
    100%{ transform:scale(1) rotate(0deg); }
  }
  .opening-tagline{
    margin-top:10px;
    font-size:13px;
    color:#D9CFE8;
    letter-spacing:1px;
  }

  .opening-art{
    position:relative;
    flex:1;
    width:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    z-index:3;
  }
  .opening-art svg{
    height:min(46vh, 380px);
    width:auto;
    filter:drop-shadow(0 0 24px rgba(242,185,59,0.45)) drop-shadow(0 18px 20px rgba(0,0,0,0.55));
  }
  .ground-glow{
    position:absolute;
    bottom:0;
    width:70%;
    height:60px;
    background:radial-gradient(ellipse at center, rgba(242,185,59,0.4) 0%, rgba(242,185,59,0) 72%);
    z-index:2;
  }

  .weapon-select{
    position:relative;
    z-index:5;
    display:flex;
    gap:22px;
    margin:10px 0 6px;
  }
  .ws-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
  }
  .ws-label{
    font-family:'Baloo 2', sans-serif;
    font-size:11px;
    color:var(--gold);
    letter-spacing:1px;
    font-weight:700;
  }
  .ws-btn{
    width:64px;
    height:64px;
    border-radius:16px;
    background:rgba(255,255,255,0.07);
    border:2px solid rgba(242,185,59,0.55);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    padding:8px;
  }
  .ws-btn svg{ width:100%; height:100%; }
  .ws-name{
    font-size:11px;
    color:#EFE6F7;
    font-weight:700;
  }
  .ws-swap{
    font-size:10px;
    color:#B7A9CC;
  }

  .opening-start{
    position:relative;
    z-index:5;
    margin:14px 0 34px;
    font-family:'Black Han Sans', sans-serif;
    font-size:20px;
    letter-spacing:2px;
    color:#2A1710;
    background:linear-gradient(180deg, #FFDD86, var(--gold-deep));
    border:3px solid #7A4A12;
    border-radius:999px;
    padding:13px 40px;
    cursor:pointer;
    box-shadow:0 5px 0 #7A4A12, 0 10px 24px rgba(0,0,0,0.45);
    transition:transform .08s, box-shadow .08s;
  }
  .opening-start:active{
    transform:translateY(5px);
    box-shadow:0 0 0 #7A4A12, 0 4px 10px rgba(0,0,0,0.45);
  }
  .home-link{
    position:absolute;
    top:calc(env(safe-area-inset-top, 0px) + 12px);
    left:14px;
    z-index:8;
    font-size:13px;
    font-weight:800;
    color:rgba(255,246,232,0.75);
    text-decoration:none;
    padding:6px 10px;
    border:1.5px solid rgba(255,246,232,0.25);
    border-radius:999px;
  }
  .opening-create{
    position:relative;
    z-index:5;
    margin:-20px 0 26px;
    font-size:13px;
    font-weight:800;
    color:var(--gold);
    text-decoration:underline;
    text-underline-offset:3px;
    opacity:0.9;
  }

  /* =========================================================
     HUD
  ==========================================================*/
  .hud{
    width:100%;
    max-width:520px;
    padding:14px 18px 6px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    z-index:20;
  }
  .hud-block{ display:flex; flex-direction:column; gap:2px; }
  .hud-label{
    font-family:'Baloo 2', sans-serif;
    font-size:11px;
    letter-spacing:2px;
    color:var(--gold-deep);
    font-weight:700;
  }
  .hud-value{
    font-family:'Baloo 2', sans-serif;
    font-size:28px;
    font-weight:800;
    line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .combo-pill{
    margin-top:4px;
    font-family:'Baloo 2', sans-serif;
    font-size:12px;
    font-weight:700;
    color:#fff;
    background:var(--coral);
    padding:2px 10px;
    border-radius:999px;
    opacity:0;
    transform:scale(0.7);
    transition:opacity .15s, transform .15s;
    white-space:nowrap;
  }
  .combo-pill.show{ opacity:1; transform:scale(1); }

  .bars-wrap{
    width:100%;
    max-width:520px;
    padding:0 18px;
    z-index:20;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .bar-row{ display:flex; align-items:center; gap:8px; }
  .bar-tag{
    font-family:'Baloo 2', sans-serif;
    font-size:10px;
    font-weight:700;
    color:#8a7c65;
    width:38px;
    flex-shrink:0;
  }
  .bar-track{
    flex:1;
    height:9px;
    border-radius:999px;
    background:var(--cream-2);
    border:2px solid var(--ink);
    overflow:hidden;
  }
  .timer-fill{
    height:100%; width:100%;
    background:linear-gradient(90deg, var(--mint), var(--gold));
    transition:width .25s linear;
  }
  .gauge-fill{
    height:100%; width:0%;
    background:linear-gradient(90deg, #FFB199, var(--crit));
    transition:width .18s ease-out;
  }

  .title-row{ margin:4px 0 0; text-align:center; }
  .title-row h2{
    font-family:'Black Han Sans', sans-serif;
    font-size:19px;
    font-weight:400;
    margin:0;
    letter-spacing:0.5px;
  }
  .title-row .tag{ color:var(--coral); }

  /* =========================================================
     CHAR ZONE
  ==========================================================*/
  .char-zone{
    position:relative;
    flex:1;
    width:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding-bottom:14px;
    z-index:5;
    overflow:hidden;
  }
  .spotlight{
    position:absolute;
    left:50%; top:38%;
    width:340px; height:340px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,233,190,0.35) 45%, rgba(255,233,190,0) 72%);
    z-index:0;
  }
  .char-shadow{
    position:absolute;
    bottom:12px;
    width:170px; height:24px;
    background:radial-gradient(ellipse at center, rgba(34,28,20,0.28) 0%, rgba(34,28,20,0) 72%);
    border-radius:50%;
    transition:transform .08s;
    z-index:1;
  }
  .char-wrap{
    position:relative;
    z-index:3;
    transform-origin:50% 100%;
  }
  .char-wrap.dizzy{ animation: dizzySway 1.6s ease-in-out infinite; }
  @keyframes dizzySway{
    0%,100%{ transform:rotate(-2.5deg); }
    50%{ transform:rotate(2.5deg); }
  }
  .char-img{
    height:min(48vh, 420px);
    width:auto;
    display:block;
    pointer-events:none;
    filter:drop-shadow(0 10px 14px var(--shadow));
    transform-origin:50% 100%;
  }
  .char-wrap.dizzy .char-img{ filter:drop-shadow(0 10px 14px var(--shadow)) saturate(0.75) brightness(0.97); }

  .char-wrap.hit-left .char-img{ animation: squishL .18s ease-out; }
  .char-wrap.hit-right .char-img{ animation: squishR .18s ease-out; }
  @keyframes squishL{
    0%{ transform:translateX(0) scale(1,1); }
    30%{ transform:translateX(4%) scale(1.08,0.86) rotate(3deg); }
    100%{ transform:translateX(0) scale(1,1) rotate(0); }
  }
  @keyframes squishR{
    0%{ transform:translateX(0) scale(1,1); }
    30%{ transform:translateX(-4%) scale(1.08,0.86) rotate(-3deg); }
    100%{ transform:translateX(0) scale(1,1) rotate(0); }
  }

  .stage.shake{ animation: screenshake 0.18s ease-out; }
  @keyframes screenshake{
    0%{ transform:translate(0,0); }
    25%{ transform:translate(-4px,3px); }
    50%{ transform:translate(4px,-3px); }
    75%{ transform:translate(-3px,2px); }
    100%{ transform:translate(0,0); }
  }

  .flash{
    position:absolute; inset:0;
    background:#fff;
    opacity:0;
    z-index:60;
    pointer-events:none;
  }
  .flash.pop{ animation: flashPop .18s ease-out; }
  @keyframes flashPop{ 0%{opacity:0.75;} 100%{opacity:0;} }
  .flash.crit{ background:var(--crit); }
  .flash.crit.pop{ animation: flashPop .32s ease-out; }

  /* bruise marks */
  .bruise-layer{ position:absolute; inset:0; z-index:4; pointer-events:none; }
  .bruise{
    position:absolute;
    width:34px; height:24px;
    border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(110,70,150,0.55) 0%, rgba(90,60,140,0.38) 55%, rgba(90,60,140,0) 78%);
    mix-blend-mode:multiply;
    opacity:0;
    transform:scale(0.4) rotate(0deg);
    animation: bruiseIn .28s ease-out forwards;
  }
  @keyframes bruiseIn{
    0%{ opacity:0; transform:scale(0.3) rotate(-10deg); }
    60%{ opacity:0.95; transform:scale(1.15) rotate(4deg); }
    100%{ opacity:0.85; transform:scale(1) rotate(0deg); }
  }

  .dizzy-stars{
    position:absolute;
    top:6%; left:50%;
    width:120px; height:60px;
    transform:translateX(-50%);
    z-index:6;
    display:none;
    pointer-events:none;
  }
  .char-wrap.dizzy .dizzy-stars{ display:block; }
  .dizzy-stars span{
    position:absolute;
    font-size:18px;
    animation: orbit 1.4s linear infinite;
  }
  .dizzy-stars span:nth-child(2){ animation-delay:-0.47s; }
  .dizzy-stars span:nth-child(3){ animation-delay:-0.94s; }
  @keyframes orbit{
    0%{ transform:translate(60px,0) rotate(0deg) scale(0.9); opacity:0.9; }
    50%{ transform:translate(-60px,-6px) rotate(180deg) scale(1.05); opacity:1; }
    100%{ transform:translate(60px,0) rotate(360deg) scale(0.9); opacity:0.9; }
  }

  /* burst text + sparks */
  .burst{
    position:fixed; pointer-events:none;
    font-family:'Black Han Sans', sans-serif;
    font-size:27px;
    color:var(--coral);
    text-shadow:-2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0 3px 0 var(--ink);
    -webkit-text-stroke:1.5px var(--ink);
    z-index:70;
    animation:burstUp .7s ease-out forwards;
  }
  .burst.crit{
    font-size:38px;
    color:var(--crit);
  }
  @keyframes burstUp{
    0%{ opacity:0; transform:translate(-50%,-50%) scale(0.4) rotate(-8deg); }
    18%{ opacity:1; transform:translate(-50%,-72%) scale(1.15) rotate(4deg); }
    100%{ opacity:0; transform:translate(-50%,-150%) scale(1) rotate(4deg); }
  }
  .spark{
    position:fixed; pointer-events:none;
    z-index:69; font-size:16px;
    animation:sparkOut .5s ease-out forwards;
  }
  @keyframes sparkOut{
    0%{ opacity:1; transform:translate(-50%,-50%) scale(0.4) translate(0,0); }
    100%{ opacity:0; transform:translate(-50%,-50%) scale(1) translate(var(--dx), var(--dy)); }
  }

  /* =========================================================
     HAND / WEAPON LAYER
  ==========================================================*/
  .hand-weapon{
    position:absolute;
    bottom:2%;
    width:30%;
    max-width:150px;
    z-index:8;
    transform-origin:50% 100%;
    pointer-events:none;
  }
  .hand-weapon.left{ left:-2%; transform:rotate(-52deg); animation:idleSwayL 2.6s ease-in-out infinite; }
  .hand-weapon.right{ right:-2%; transform:rotate(52deg) scaleX(-1); animation:idleSwayR 2.6s ease-in-out infinite; }
  @keyframes idleSwayL{ 0%,100%{ transform:rotate(-52deg);} 50%{ transform:rotate(-46deg);} }
  @keyframes idleSwayR{ 0%,100%{ transform:rotate(52deg) scaleX(-1);} 50%{ transform:rotate(46deg) scaleX(-1);} }
  .hand-weapon svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 6px 6px rgba(0,0,0,0.25)); }
  .hand-weapon .fist{
    position:absolute;
    bottom:2%;
    left:50%;
    transform:translateX(-50%);
    font-size:22px;
  }
  .hand-weapon.swing-left{ animation:swingLeft .42s cubic-bezier(.25,.7,.3,1); }
  .hand-weapon.swing-right{ animation:swingRight .42s cubic-bezier(.25,.7,.3,1); }
  @keyframes swingLeft{
    0%{ transform:rotate(-52deg); }
    16%{ transform:rotate(-78deg); }
    50%{ transform:rotate(38deg) translateX(10%); }
    75%{ transform:rotate(6deg); }
    100%{ transform:rotate(-52deg); }
  }
  @keyframes swingRight{
    0%{ transform:rotate(52deg) scaleX(-1); }
    16%{ transform:rotate(78deg) scaleX(-1); }
    50%{ transform:rotate(-38deg) scaleX(-1) translateX(-10%); }
    75%{ transform:rotate(-6deg) scaleX(-1); }
    100%{ transform:rotate(52deg) scaleX(-1); }
  }

  /* =========================================================
     CONTROLS
  ==========================================================*/
  .controls{
    width:100%;
    max-width:520px;
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:10px 18px 22px;
    z-index:30;
  }
  .atk-btn{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    background:linear-gradient(180deg, #fff, var(--cream-2));
    border:3px solid var(--ink);
    border-radius:18px;
    padding:8px 6px 10px;
    cursor:pointer;
    box-shadow:0 4px 0 var(--ink);
    transition:transform .06s, box-shadow .06s;
  }
  .atk-btn:active{ transform:translateY(4px); box-shadow:0 0 0 var(--ink); }
  .atk-icon{ width:34px; height:34px; }
  .atk-icon svg{ width:100%; height:100%; }
  .atk-name{ font-family:'Baloo 2', sans-serif; font-size:11px; font-weight:700; color:#6b5c42; }
  .atk-label{ font-family:'Black Han Sans', sans-serif; font-size:15px; }

  /* =========================================================
     END OVERLAY
  ==========================================================*/
  .overlay{
    position:absolute; inset:0;
    background:rgba(255,246,232,0.97);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:10px; z-index:100; padding:24px; text-align:center;
  }
  .overlay.hidden{ display:none; }
  .overlay-emoji{ font-size:50px; }
  .overlay h2{ font-family:'Black Han Sans', sans-serif; font-size:24px; margin:0; }
  .overlay p{ margin:0; font-size:13px; color:#5b5142; max-width:280px; line-height:1.5; }
  .score-big{ font-family:'Baloo 2', sans-serif; font-size:48px; font-weight:800; color:var(--coral); line-height:1; margin:4px 0; }
  .stat-row{ display:flex; gap:16px; margin:2px 0; }
  .stat-chip{ font-family:'Baloo 2', sans-serif; font-size:12px; font-weight:700; color:var(--gold-deep); background:var(--cream-2); border:2px solid var(--ink); padding:4px 10px; border-radius:999px; }
  .btn-main{
    font-family:'Black Han Sans', sans-serif;
    font-size:16px; color:#fff;
    background:var(--coral);
    border:3px solid var(--ink);
    border-radius:999px;
    padding:11px 32px;
    cursor:pointer;
    box-shadow:0 4px 0 var(--ink);
    transition:transform .08s, box-shadow .08s;
    margin-top:4px;
  }
  .btn-main:active{ transform:translateY(4px); box-shadow:0 0 0 var(--ink); }