*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{background:#0d0810;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;overflow:hidden;font-family:Arial,Helvetica,'Segoe UI',Roboto,sans-serif;color:#fff;}
#wrap{display:flex;flex-direction:column;align-items:center;}
#cBox{border:2px solid #e83a1a;box-shadow:0 0 28px rgba(232,58,26,.55);transform-origin:top center;line-height:0;}
#c{display:block;cursor:crosshair;}

/* ── Control bar — NO transform, natural width ── */
#bar{
  width:100%;max-width:900px;
  display:flex;gap:0;
  background:linear-gradient(180deg,#1a0e26,#0e0918);
  border:2px solid #e83a1a;border-top:none;
}

.panel{display:flex;flex-direction:column;padding:8px 10px 10px;gap:6px;flex:1;}
.panel.p1bg{background:linear-gradient(135deg,rgba(180,20,20,.18),transparent);}
.panel.p2bg{background:linear-gradient(135deg,rgba(20,60,180,.18),transparent);}

/* phead — MUST have explicit color so text isn't invisible */
.phead{
  font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  color:#ffcc88;           /* warm gold — clearly visible */
  padding-bottom:5px;
  border-bottom:1px solid rgba(255,180,60,.25);
  display:flex;align-items:center;gap:6px;
}
.phead .badge{font-size:14px;font-weight:bold;padding:2px 9px;border-radius:4px;letter-spacing:1px;}
.badge.red {background:#bb1818;color:#ffe8e8;}
.badge.blue{background:#1838bb;color:#e8eeff;}
.badge.ai  {background:#554400;color:#ffdd66;}

/* Attack button grid */
.atks{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.ak{
  border-radius:8px;border:2px solid;cursor:pointer;
  font-family:inherit;font-weight:bold;
  color:#fff;                  /* white main label */
  padding:9px 4px 7px;
  text-align:center;line-height:1.1;
  outline:none;touch-action:none;
  font-size:15px;
  text-shadow:0 1px 4px rgba(0,0,0,.95);  /* shadow so text pops */
  font-weight:600;
}
.ak sub{
  font-size:11px;
  color:#fff;
  display:block;margin-top:3px;
  font-weight:normal;
  letter-spacing:.3px;
  opacity:0.92;
}
.ak.pressed,.ak:active{filter:brightness(1.8);transform:scale(.88);}

/* P1 colours */
#p1 .ak.jab {background:#5a0808;border-color:#dd2222;}
#p1 .ak.crs {background:#5a2800;border-color:#dd7700;}
#p1 .ak.upr {background:#380660;border-color:#aa22ee;}
#p1 .ak.blk {background:#08104a;border-color:#2255dd;}

/* P2 colours */
#p2 .ak.jab {background:#07104a;border-color:#2244dd;}
#p2 .ak.crs {background:#074428;border-color:#22aa55;}
#p2 .ak.upr {background:#443200;border-color:#cc9900;}
#p2 .ak.blk {background:#280848;border-color:#9922bb;}

/* Move buttons */
.movrow{display:flex;gap:5px;justify-content:center;align-items:center;}
.mvbtn{
  border-radius:7px;border:2px solid #3355cc;
  background:#18182a;color:#fff;
  font-family:inherit;font-weight:bold;font-size:18px;
  padding:6px 0;width:52px;cursor:pointer;touch-action:none;outline:none;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.mvbtn.pressed,.mvbtn:active{filter:brightness(1.8);transform:scale(.9);}

/* Info text */
.info{font-size:11px;color:#ccbbaa;line-height:1.7;}
.info b{color:#ffbb66;}
.info em{color:#aaddff;font-style:normal;}
.kbhint{font-size:11px;color:#99aacc;flex:1;text-align:center;line-height:1.4;}

/* Divider */
.dvd{width:1px;background:rgba(255,120,40,.3);margin:4px 0;}

/* AI panel */
#aipanel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 14px;min-width:170px;}
#aipanel .phead{justify-content:center;width:100%;}
.ainame{color:#ffdd44;font-size:20px;letter-spacing:1px;text-shadow:0 0 12px rgba(255,200,0,.5);}
.aisub{color:#bbaa88;font-size:12px;}
#diffBtn{
  background:#2a1c00;border:2px solid #cc9900;
  color:#ffdd44;font-family:inherit;font-size:12px;font-weight:bold;
  padding:7px 16px;border-radius:6px;cursor:pointer;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
#diffBtn:hover{background:#3d2800;}

/* ── Top toolbar ── */
#topbar{
  width:100%;max-width:900px;
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,#1a0810,#0e0816,#1a0810);
  border:2px solid #e83a1a;border-bottom:none;
  padding:5px 12px;
}
.tb-title{color:#ffcc00;font-size:13px;font-weight:bold;letter-spacing:3px;text-shadow:0 0 10px rgba(255,180,0,.6);}
#topbtns{display:flex;gap:6px;}
.tbtn{
  background:rgba(255,80,30,.12);border:1.5px solid rgba(255,100,40,.5);
  color:#ffcc88;font-size:17px;width:36px;height:36px;
  border-radius:7px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,transform .08s;
  font-family:inherit;
}
.tbtn:hover{background:rgba(255,80,30,.3);}
.tbtn:active{transform:scale(.88);}
.tbtn.muted{color:#666;border-color:rgba(100,100,100,.4);}