/* ==========================================================================
   KORO · THE DOJO, THE PICK SCREEN AND THE 15 POINTS (owner, 2026-10-18)
   Loaded after every other sheet, so this is the last word on the select
   screen and the editor.
   ========================================================================== */

/* ---------- THE DOJO · "the background like you're more in a dojo" ---------- */
body .screen.pick#scr-select{background:#14120f}
body .screen.pick#scr-select .pick-dojo{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
body .screen.pick#scr-select .pick-dojo i{position:absolute;display:block}
/* the sun · a warm disc high on the far wall, breathing */
body .screen.pick#scr-select .pick-dojo .sun{
  left:50%;top:-16vh;width:64vh;height:64vh;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,190,.95) 0%,rgba(247,203,120,.55) 38%,rgba(247,203,120,0) 70%);
  animation:dojoSun 9s ease-in-out infinite}
@keyframes dojoSun{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}
/* the paper wall · cream panels and dark timber framing, shoji grid over it */
body .screen.pick#scr-select .pick-dojo .wall{
  inset:0 0 24%;background:
    repeating-linear-gradient(90deg,transparent 0 23.8%,rgba(20,18,15,.16) 23.8% 24.4%),
    repeating-linear-gradient(0deg,transparent 0 33%,rgba(20,18,15,.16) 33% 34%),
    repeating-linear-gradient(90deg,rgba(20,18,15,.05) 0 2px,transparent 2px 7.7%),
    linear-gradient(180deg,#f3e8cb 0%,#efe0bd 60%,#e3d0a6 100%)}
/* the floor · wide boards running to the wall, darker at the bottom */
body .screen.pick#scr-select .pick-dojo .floor{
  left:0;right:0;bottom:0;height:24%;background:
    repeating-linear-gradient(90deg,rgba(20,18,15,.20) 0 2px,transparent 2px 11%),
    linear-gradient(180deg,#b99a63 0%,#a07f4c 55%,#7d6038 100%)}
/* the ring · a red circle drawn on the floor */
body .screen.pick#scr-select .pick-dojo .ring{
  left:50%;bottom:5.5%;width:min(52vw,900px);height:16%;transform:translateX(-50%);
  border:4px solid rgba(168,48,35,.55);border-radius:50%;
  box-shadow:0 0 0 2px rgba(247,239,216,.18) inset,0 0 40px rgba(200,64,47,.22);
  animation:dojoRing 7s ease-in-out infinite}
@keyframes dojoRing{0%,100%{opacity:.85}50%{opacity:1;box-shadow:0 0 0 2px rgba(247,239,216,.28) inset,0 0 60px rgba(200,64,47,.34)}}
/* the header and panels sit on the room, not under it */
body .screen.pick#scr-select > .bar,
body .screen.pick#scr-select > .select-body,
body .screen.pick#scr-select > .selfoot{position:relative;z-index:1}

/* ---------- THE CARDS · ink boards with the fighter's colour, not pastel ---------- */
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char{
  background:linear-gradient(180deg,#1d1913,#100e0b);border:3px solid #14120f;
  box-shadow:5px 5px 0 rgba(20,18,15,.45),0 0 0 1px rgba(247,239,216,.10) inset;
  animation:tileIn .34s cubic-bezier(.2,.9,.3,1.18) both}
@keyframes tileIn{0%{opacity:0;transform:translateY(14px) scale(.96)}100%{opacity:1;transform:none}}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char::before{
  content:'';position:absolute;left:0;right:0;top:0;height:5px;z-index:3;
  background:rgb(var(--acc-rgb,232,176,75))}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char canvas.face{
  background:#100e0b;border-bottom:3px solid #14120f}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char .cn{
  color:#f7efd8;background:linear-gradient(180deg,#1d1913,#100e0b);text-shadow:0 1px 0 #000}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char .cs{
  background:#14120f;color:rgb(var(--acc-rgb,232,176,75))}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char:hover{
  transform:translate(-2px,-4px);box-shadow:8px 9px 0 rgba(20,18,15,.5),0 0 0 1px rgba(247,239,216,.16) inset}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char.h1{animation:h1Pulse 1.6s ease-in-out infinite}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char.h2{box-shadow:0 0 0 4px #c8402f,7px 7px 0 rgba(20,18,15,.45)}
@keyframes h1Pulse{0%,100%{box-shadow:0 0 0 4px #e8b04b,6px 6px 0 rgba(20,18,15,.45)}
  50%{box-shadow:0 0 0 4px #e8b04b,0 0 16px 4px rgba(232,176,75,.45),6px 6px 0 rgba(20,18,15,.45)}}

/* ---------- THE FIGHTER CARD · a taller, fuller body ---------- */
body .screen.pick#scr-select .fighter-card{animation:cardIn .4s cubic-bezier(.2,.9,.3,1.1) both}
body .screen.pick#scr-select #card-p2{animation-delay:.08s}
@keyframes cardIn{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
body .screen.pick#scr-select .fighter-card .portrait{
  background:#100e0b;aspect-ratio:3/4;min-height:clamp(220px,34vh,420px)}

/* ---------- motion off when the player asks for it ---------- */
@media (prefers-reduced-motion: reduce){
  body .screen.pick#scr-select .pick-dojo .sun,
  body .screen.pick#scr-select .pick-dojo .ring,
  body .screen.pick#scr-select .fighter-card,
  body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char,
  body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char.h1{animation:none!important}
}

/* ==========================================================================
   EDITOR · PICK A FIGHTER TO EDIT, THE 15 POINTS AND THE MOVE TEMPERATURE
   The MY FIGHTERS sidebar is gone: the editor opens on a pick screen of your
   fighters, the editing page shows one fighter, and a panel of 54 points
   over the six categories (15 a stat, 9 the average) picks its fighting type.
   The move cards read damage in red,
   speed in blue, and a heavy-slow move redder than a quick-chainable one.
   ========================================================================== */
#scr-editor .ed-pickwrap{flex:1;display:none;flex-direction:row;gap:18px;min-height:0;
  margin:0 18px 18px;padding:16px 18px;border:3px solid #14120f;border-radius:2px;
  background:radial-gradient(rgba(20,18,15,.14) 1.1px,transparent 1.3px) 0 0/8px 8px,linear-gradient(180deg,#f7efd8,#eadfc2);
  box-shadow:6px 6px 0 rgba(20,18,15,.3)}
#scr-editor.picking .ed-pickwrap{display:flex}

/* ---------- THE DOJO STAGE · the fighter stands on the left while you pick
   (owner, 2026-10-18: "id like this screen more animated and the background
   like you're more in a dojo, with a full body of the fighter on the left") -- */
#scr-editor .ed-dojostage{position:relative;flex:0 0 clamp(240px,26vw,360px);overflow:hidden;
  border:3px solid #14120f;border-radius:2px;box-shadow:5px 5px 0 rgba(20,18,15,.32);
  background:linear-gradient(180deg,#2b2118 0%,#3a2c1f 46%,#201811 47%,#100c08 100%)}
/* the paper wall behind: shoji panes and a beam of light that breathes */
#scr-editor .ed-dojoglow{position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,rgba(255,244,214,.07) 0 2px,transparent 2px 25%),
    repeating-linear-gradient(0deg,rgba(255,244,214,.06) 0 2px,transparent 2px 25%),
    radial-gradient(70% 55% at 50% 26%,rgba(255,220,150,.34),transparent 68%);
  animation:edDojoBreathe 6.5s ease-in-out infinite}
@keyframes edDojoBreathe{0%,100%{opacity:.82}50%{opacity:1}}
/* the wooden floor: boards running toward you, and a tatami edge */
#scr-editor .ed-dojofloor{position:absolute;left:-6%;right:-6%;bottom:0;height:44%;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.32) 0 2px,transparent 2px 26px),
    linear-gradient(180deg,#4a3626,#241a12);
  box-shadow:inset 0 12px 24px rgba(0,0,0,.55)}
#scr-editor .ed-dojostage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#scr-editor .ed-dojoplate{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;background:linear-gradient(180deg,transparent,rgba(8,6,4,.88))}
#scr-editor .ed-dojoplate b{font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;font-size:22px;font-weight:900;
  letter-spacing:.06em;color:#f7efd8;text-shadow:0 2px 0 rgba(0,0,0,.6)}
#scr-editor .ed-dojoplate span{font-size:11px;font-weight:900;letter-spacing:.2em;color:#e8b04b}
#scr-editor .ed-dojohint{position:absolute;top:8px;left:10px;right:10px;font-size:9.5px;letter-spacing:.14em;
  color:rgba(247,239,216,.42)}
#scr-editor .ed-pickrail{flex:1 1 auto;display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0}
#scr-editor.picking .editor-body{display:none}
#scr-editor .ed-pickhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:3px double #14120f;padding-bottom:8px}
#scr-editor .ed-pickhead b{font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;font-size:19px;font-weight:900;letter-spacing:.18em;color:#14120f}
#scr-editor .ed-pickhead span{font-size:12px;color:#5a4f3c}
#scr-editor .ed-pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,230px));gap:16px;
  align-content:start;justify-content:start;overflow-y:auto;min-height:0;padding:2px}
#scr-editor .ed-picknote{font-size:11px;color:#3a3226}
/* the pick tiles are the roster cards, in the dojo's ink */
#scr-editor .ed-tile{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;
  border:3px solid #14120f;border-radius:2px;background:#100e0b;box-shadow:4px 4px 0 rgba(20,18,15,.35);
  transition:transform .12s,box-shadow .12s;cursor:pointer}
#scr-editor .ed-tile:hover{transform:translate(-2px,-3px);box-shadow:6px 7px 0 rgba(20,18,15,.4)}
#scr-editor .ed-tile canvas{width:100%;aspect-ratio:4/3;background:#100e0b;border:0;border-bottom:2px solid #14120f;border-radius:0}
#scr-editor .ed-tile .ed-tile-name{padding:6px 8px 2px;color:#f7efd8;font-size:12px;font-weight:900;letter-spacing:.04em}
#scr-editor .ed-tile .ed-tile-style{padding:0 8px 6px;font-size:9.5px;letter-spacing:.14em}
#scr-editor .ed-tile.on{outline:3px solid #e8b04b;outline-offset:-3px}
#scr-editor .ed-tile.add{justify-content:center;align-items:center;min-height:120px;border-style:dashed;
  border-color:rgba(200,64,47,.6);background:rgba(200,64,47,.06)}
#scr-editor .ed-tile.add .ed-tile-plus{font-size:34px;font-weight:900;color:#c8402f;line-height:1}
#scr-editor .ed-tile.add .ed-tile-name{color:#c8402f;font-size:10px;letter-spacing:.16em;padding:2px 8px 8px}

/* ---------- YOU!'s sidebar only exists in YOU! mode ---------- */
#scr-editor:not(.you-mode) .ed-styles{display:none}
#scr-editor:not(.you-mode) .editor-body{grid-template-columns:minmax(0,1fr) clamp(300px,24vw,430px)}
#scr-editor #ed-change{white-space:nowrap}

/* ---------- THE EDITING PAGE SCROLLS AS ONE BOARD (owner, 2026-10-18: "i
   dont like how scrolling doesnt move the entire second panel so i can see
   the full moves") · the three panels take the height their content needs and
   the whole board scrolls, so scrolling moves the middle panel entire and
   every move row is reachable. Nothing scrolls inside a panel any more: the
   move grid used to be the only flexible thing in the column, so it was
   squeezed to about one row tall and kept its own little scrollbar while the
   page around it stayed put. The PICK screen is untouched — it still fits the
   window with its own scrolling grid. */
#scr-editor:not(.picking){align-items:flex-start;overflow-y:auto;overflow-x:hidden}
#scr-editor:not(.picking) .editor-body{align-items:start;min-height:0}
#scr-editor:not(.picking) .ed-styles,
#scr-editor:not(.picking) .ed-main,
#scr-editor:not(.picking) .ed-preview{max-height:none;min-height:0}
/* the move list is never squeezed: it grows with its rows and lets the board
   scroll instead of scrolling by itself */
#scr-editor:not(.picking) .slotgrid{flex:1 0 auto;min-height:0;overflow:visible}
/* the preview column keeps a real body to stand the figure in */
#scr-editor:not(.picking) .ed-preview{min-height:min(68vh,600px)}

/* ---------- THE 15 POINTS ---------- */
#scr-editor .ed-build{display:flex;flex-direction:column;gap:8px;margin:2px 0 4px;padding:10px 12px;
  border:3px solid #14120f;border-radius:2px;background:rgba(255,255,255,.38);box-shadow:4px 4px 0 rgba(20,18,15,.22)}
#scr-editor .ed-build[hidden]{display:none}
#scr-editor .eb-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #14120f;padding-bottom:4px}
#scr-editor .eb-head span{font-family:'Comic Sans MS','Comic Neue',cursive;font-weight:900;font-size:13px;letter-spacing:.2em;color:#14120f}
#scr-editor .eb-head b{font-size:11px;letter-spacing:.1em;color:#c8402f}
#scr-editor .eb-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:4px 16px}
#scr-editor .eb-row{display:grid;grid-template-columns:104px 20px minmax(0,1fr) 20px;align-items:center;gap:7px}
#scr-editor .eb-k{font-size:12px;font-weight:900;letter-spacing:.1em;color:#14120f;white-space:nowrap}
#scr-editor .eb-k b{color:#c8402f;font-size:16px;margin-left:4px}
#scr-editor .eb-k i{font-style:normal;color:#5a4f3c;font-size:10px}
/* THE BAR (owner, 2026-10-18: "id rather stat points be shown with a bar
   instead of little grills") · a filled track with the 12-point mark that
   takes a type sitting on it */
#scr-editor .eb-bar{position:relative;display:block;height:16px;border:2px solid #14120f;border-radius:3px;
  background:#fff8e6;overflow:hidden;box-shadow:inset 0 1px 0 rgba(20,18,15,.15)}
#scr-editor .eb-bar i{display:block;height:100%;background:linear-gradient(90deg,#c8402f,#e8b04b);
  border-right:2px solid rgba(20,18,15,.45);transition:width .12s ease}
#scr-editor .eb-bar u{position:absolute;top:-1px;bottom:-1px;width:2px;background:#14120f;opacity:.55}
#scr-editor .eb-arw{width:20px;height:20px}
#scr-editor .eb-arw{width:18px;height:18px;padding:0;border:2px solid #14120f;background:#fff8e6;color:#14120f;font-size:8px;line-height:1;border-radius:2px;cursor:pointer}
#scr-editor .eb-arw:disabled{opacity:.28;cursor:default}
#scr-editor .eb-arw:not(:disabled):hover{background:#f5c542}
/* YOU!'s own copy of the bar (main.js renderYouBuild) */
.ybuild .yb-bar{position:relative;display:block;height:14px;border:2px solid #14120f;border-radius:3px;background:#fff8e6;overflow:hidden}
.ybuild .yb-bar i{display:block;height:100%;background:linear-gradient(90deg,#c8402f,#e8b04b)}
.ybuild .yb-bar u{position:absolute;top:-1px;bottom:-1px;width:2px;background:#14120f;opacity:.55}
#scr-editor .eb-type{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding-top:6px;border-top:2px dashed rgba(20,18,15,.35)}
#scr-editor .eb-type b{font-family:'Comic Sans MS','Comic Neue',cursive;font-size:14px;letter-spacing:.08em;color:#14120f;background:#f7efd8;border:2px solid #14120f;padding:1px 8px;box-shadow:2px 2px 0 rgba(20,18,15,.25)}
#scr-editor .eb-type span{font-size:11px;color:#3a3226;flex:1 1 240px}
#scr-editor .eb-type i{font-size:10.5px;color:#b02417;flex-basis:100%}
/* THE TRAITS · 6 points on the grab, 7 on the air grab, instead of a stat
   (owner, 2026-10-18) */
#scr-editor .eb-trait{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding-top:6px;border-top:2px dashed rgba(20,18,15,.35)}
#scr-editor .eb-grap,#scr-editor .eb-airgr{padding:5px 10px;border:2px solid #14120f;background:#fff8e6;color:#14120f;font-weight:900;
  font-size:10px;letter-spacing:.12em;border-radius:2px;cursor:pointer;box-shadow:2px 2px 0 rgba(20,18,15,.25)}
#scr-editor .eb-grap:hover,#scr-editor .eb-airgr:hover{background:#f5c542}
#scr-editor .eb-grap.on,#scr-editor .eb-airgr.on{background:#14120f;color:#fdf6e3}
#scr-editor .eb-grap.on:hover,#scr-editor .eb-airgr.on:hover{background:#3a3226}
#scr-editor .eb-trait i{font-size:10.5px;color:#3a3226;flex:1 1 200px}
#scr-editor .eb-acts{display:flex;gap:8px;flex-wrap:wrap}
#scr-editor .eb-acts button{padding:5px 10px;border:2px solid #14120f;background:#fff8e6;color:#14120f;font-weight:900;
  font-size:10px;letter-spacing:.12em;border-radius:2px;cursor:pointer;box-shadow:2px 2px 0 rgba(20,18,15,.25)}
#scr-editor .eb-acts button:hover{background:#f5c542}

/* ---------- THE MOVE TEMPERATURE · damage red, speed blue ---------- */
#scr-editor .slot-stats{position:relative;display:flex;flex-wrap:wrap;gap:4px 9px;padding-top:9px}
#scr-editor .slot-stats .temp-line{position:absolute;left:0;right:0;top:0;height:5px;border:1px solid rgba(20,18,15,.55);
  background:linear-gradient(90deg,#2f6fd0 0%,#2f9e6a 50%,#c8382f 100%);border-radius:2px}
#scr-editor .slot-stats .temp-line u{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;
  border:2px solid #fdf6e3;box-shadow:0 0 0 1.5px #14120f;transform:translate(-50%,-50%)}
#scr-editor .slot-stats .sv{font-size:10.5px;letter-spacing:.02em;color:#4a4234;white-space:nowrap}
#scr-editor .slot-stats .sv b{font-weight:900}
#scr-editor .slot-stats .sv-dmg b{color:#c8382f}
#scr-editor .slot-stats .sv-spd b{color:#2f6fd0}
#scr-editor .slot-stats .sv:not(.sv-dmg):not(.sv-spd) b{color:#7c1f17}

/* RANDOM NAME · sits beside the NAME field */
#scr-editor .ed-dice{display:inline-flex;align-items:center;gap:6px;align-self:end;padding:8px 12px;border:2px solid #14120f;
  background:#fff8e6;color:#14120f;font-weight:900;font-size:11px;letter-spacing:.12em;border-radius:2px;cursor:pointer;
  box-shadow:3px 3px 0 rgba(20,18,15,.25);white-space:nowrap}
#scr-editor .ed-dice:hover{background:#f5c542}
#scr-editor .ed-dice span{font-size:15px;line-height:1}

/* THE AIR ROW is simply absent below AERIAL 11 (owner, 2026-10-18: "aerial
   attacks unlock at 11, if you dont have it unlocked just dont even show
   it"), so the locked plate and its note are gone from the sheet. */