/* ============================================================
   COMIC UI · the main menu, the story conversation screen, every
   pop-up dialog and the PROFILE page, drawn in the wiki's comic
   language: cream paper, halftone dots, 3px black ink, hard
   offset shadows, Comic lettering and black caption chips.
   Loaded after every other sheet, so these rules win.
   ============================================================ */
:root{
  --k-ink:#14120f;
  --k-paper:#fdf6e3;
  --k-paper2:#f0e3c4;
  --k-cream:#f7efd8;
  --k-white:#fffaf0;
  --k-brown:#5a4a2c;
  --k-red:#c8382f;
  --k-red2:#7c1f17;
  --k-gold1:#f2cb70;
  --k-gold2:#d99a38;
  --k-sky:#cfe0ea;
  --k-dots:radial-gradient(rgba(20,18,15,.13) 1.1px,transparent 1.3px) 0 0/6px 6px;
  --k-comic:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;
}

/* ---------- shared pieces ---------- */
/* on an upright phone the page carries the class "portrait", which the old
   fighter-card rule (.portrait canvas: absolute, fill the box) also matches;
   every canvas on these screens keeps its own place */
#scr-menu .profile-chip canvas{position:static;inset:auto;width:44px;height:56px}
#scr-profile .pf-favrow canvas,#scr-profile .av-opt canvas,#scr-profile .avf-prev canvas,#scr-dialogue .dlg-bust canvas{position:static;inset:auto}
.k-chip,.pf-chip{display:inline-block;background:var(--k-ink);color:var(--k-cream);font-size:10px;font-weight:900;
  letter-spacing:.2em;padding:3px 8px;line-height:1.3;text-transform:uppercase}

/* ============================================================
   MAIN MENU · the COMIC look, an option (SETTINGS > MAIN SCREEN).
   The original menu (style.css / v2.css) is the default; these rules
   only apply while the page carries body.menu-comic.
   ============================================================ */
/* the wiki's paper: halftone dots on cream, a soft shade at both edges */
body.menu-comic #scr-menu{background:radial-gradient(rgba(20,18,15,.12) 1.1px,transparent 1.3px) 0 0/8px 8px,
  linear-gradient(90deg,rgba(20,18,15,.055),transparent 12%,transparent 88%,rgba(20,18,15,.055)),
  linear-gradient(180deg,#f7efd8,#eadfc2)}
body.menu-comic #scr-menu .menu-center{gap:22px}
body.menu-comic #scr-menu .menu-title{font-family:var(--k-comic);font-size:68px;font-weight:900;letter-spacing:.1em;line-height:1;
  color:var(--k-paper);-webkit-text-stroke:3px var(--k-ink);paint-order:stroke fill;
  text-shadow:5px 5px 0 var(--k-red),9px 9px 0 rgba(20,18,15,.7);transform:rotate(-2deg);margin-bottom:4px}
body.menu-comic #scr-menu .menu-tabs{margin-top:0;gap:10px}
body.menu-comic #scr-menu .mtab{font-family:var(--k-comic);font-weight:900;font-size:13px;letter-spacing:.24em;padding:8px 24px;
  color:var(--k-ink);background:var(--k-dots),var(--k-paper);border:3px solid var(--k-ink);border-radius:2px;
  box-shadow:3px 3px 0 rgba(20,18,15,.6)}
body.menu-comic #scr-menu .mtab:hover{color:var(--k-ink);background:var(--k-dots),linear-gradient(180deg,var(--k-gold1),var(--k-gold2));transform:translate(-1px,-1px)}
body.menu-comic #scr-menu .mtab.on{color:var(--k-paper);background:var(--k-red);border-color:var(--k-ink);box-shadow:3px 3px 0 rgba(20,18,15,.7)}
body.menu-comic #scr-menu .menu-list{gap:10px;width:min(480px,94vw)}
body.menu-comic #scr-menu .menu-item{position:relative;gap:14px;padding:9px 14px;font-family:var(--k-comic);font-size:17px;font-weight:900;
  letter-spacing:.16em;color:var(--k-ink);background:var(--k-dots),linear-gradient(180deg,#fffaf0,#f6ecd2);
  border:3px solid var(--k-ink);border-radius:2px;box-shadow:4px 4px 0 rgba(20,18,15,.62);
  transition:transform .08s,box-shadow .08s,background .12s}
body.menu-comic #scr-menu .menu-item:nth-child(odd){transform:rotate(-.35deg)}
body.menu-comic #scr-menu .menu-item:nth-child(even){transform:rotate(.35deg)}
body.menu-comic #scr-menu .menu-item .mi-idx{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--k-ink);color:var(--k-cream);font-size:14px;font-weight:900;letter-spacing:0;transform:rotate(-4deg);
  box-shadow:2px 2px 0 rgba(20,18,15,.25)}
body.menu-comic #scr-menu .menu-item .mi-txt{color:var(--k-ink)}
body.menu-comic #scr-menu .menu-item .mi-hint{color:var(--k-brown);font-style:normal;font-weight:900;font-size:10px;letter-spacing:.12em;text-align:right}
body.menu-comic #scr-menu .menu-item:hover,body.menu-comic #scr-menu .menu-item:focus{outline:none;color:var(--k-ink);
  background:var(--k-dots),linear-gradient(180deg,var(--k-gold1),var(--k-gold2));
  transform:translate(-2px,-2px) rotate(0);box-shadow:7px 7px 0 rgba(20,18,15,.66)}
body.menu-comic #scr-menu .menu-item:hover .mi-hint,body.menu-comic #scr-menu .menu-item:focus .mi-hint{color:var(--k-ink)}
body.menu-comic #scr-menu .menu-item:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(20,18,15,.7)}
body.menu-comic #scr-menu .menu-item.hilite{border-color:var(--k-red)}
body.menu-comic #scr-menu .menu-item.hilite .mi-idx{background:var(--k-red);color:var(--k-paper)}
body.menu-comic #scr-menu .menu-item.youbtn{justify-content:center;color:var(--k-paper);background:var(--k-red);border-color:var(--k-ink)}
body.menu-comic #scr-menu .menu-item.youbtn .mi-txt{color:var(--k-paper)}
body.menu-comic #scr-menu .menu-item.youbtn .mi-idx{background:var(--k-paper);color:var(--k-ink)}
body.menu-comic #scr-menu .menu-item.youbtn:hover,body.menu-comic #scr-menu .menu-item.youbtn:focus{color:var(--k-ink);
  background:var(--k-dots),linear-gradient(180deg,var(--k-gold1),var(--k-gold2));box-shadow:7px 7px 0 rgba(20,18,15,.66)}
body.menu-comic #scr-menu .menu-item.youbtn:hover .mi-txt,body.menu-comic #scr-menu .menu-item.youbtn:focus .mi-txt{color:var(--k-ink)}
body.menu-comic #scr-menu .menu-item.story-locked{opacity:1;filter:none;color:#6d6250;
  background:repeating-linear-gradient(45deg,#efe6cf 0 8px,#e6d9b8 8px 16px);border-style:dashed;box-shadow:3px 3px 0 rgba(20,18,15,.35)}
body.menu-comic #scr-menu .menu-item.story-locked .mi-txt{color:#6d6250}
body.menu-comic #scr-menu .menu-item.story-locked .mi-idx{background:#8a7d64;color:var(--k-cream)}
body.menu-comic #scr-menu .menu-list.grid .menu-item{padding:12px 8px}
/* the player chip, top left */
body.menu-comic #scr-menu .profile-chip{background:var(--k-dots),linear-gradient(180deg,var(--k-paper),#efe2c2);border:3px solid var(--k-ink);
  border-radius:2px;box-shadow:4px 4px 0 rgba(20,18,15,.6);padding:7px 12px 7px 7px;color:var(--k-ink)}
body.menu-comic #scr-menu .profile-chip:hover{box-shadow:6px 6px 0 rgba(20,18,15,.65);transform:translate(-1px,-1px);border-color:var(--k-ink)}
body.menu-comic #scr-menu .profile-chip canvas{border:2px solid var(--k-ink);border-radius:0;background:var(--k-sky)}
body.menu-comic #scr-menu .pf-name{font-family:var(--k-comic);font-weight:900;color:var(--k-ink);letter-spacing:.1em}
body.menu-comic #scr-menu .pf-rank{color:var(--k-red2);font-weight:900}
body.menu-comic #scr-menu .profile-chip.create-account-chip{border-style:dashed;padding:11px 16px}
body.menu-comic #scr-menu .profile-chip.create-account-chip .pf-name{color:var(--k-red)}
body.menu-comic #scr-menu .profile-chip.create-account-chip .pf-rank{color:var(--k-brown)}
body.menu-comic #scr-menu .profile-chip.create-account-chip .pf-name{max-width:none}
/* upright phones: a smaller chip that stays clear of the info button */
@media (orientation:portrait){
  body.touch.menu-comic #scr-menu .profile-chip{padding:5px 9px 5px 5px;gap:8px}
  body.touch.menu-comic #scr-menu .profile-chip canvas{width:36px;height:46px}
  body.touch.menu-comic #scr-menu .profile-chip .pf-meta{max-width:min(150px,calc(100vw - 262px))}
  body.touch.menu-comic #scr-menu .profile-chip .pf-name{max-width:100%;font-size:11.5px;letter-spacing:.06em}
  body.touch.menu-comic #scr-menu .profile-chip .pf-rank{max-width:100%;font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.08em}
  body.touch.menu-comic #scr-menu .profile-chip.create-account-chip{padding:9px 12px}
  body.touch.menu-comic #scr-menu .profile-chip.create-account-chip .pf-meta{max-width:140px}
}
/* the patreon credit, bottom left */
body.menu-comic #scr-menu .patreon-credit{background:var(--k-paper);border:3px solid var(--k-ink);box-shadow:3px 3px 0 rgba(20,18,15,.55);
  padding:6px 10px;border-radius:2px;opacity:1}
body.menu-comic #scr-menu .patreon-credit .koro-brand{font-family:var(--k-comic);font-weight:900;color:var(--k-red)}
body.menu-comic #scr-menu .patreon-credit .donations-label,body.menu-comic #scr-menu .patreon-credit .patreon-label{color:var(--k-brown)}
body.menu-comic #scr-menu .patreon-credit:hover .donations-label,body.menu-comic #scr-menu .patreon-credit:hover .patreon-label{color:var(--k-ink)}
body.menu-comic #scr-menu .phone-ctrl-btn{font-family:var(--k-comic);font-weight:900;color:var(--k-ink);background:var(--k-paper);
  border:3px solid var(--k-ink);box-shadow:3px 3px 0 rgba(20,18,15,.55)}
/* the settings, info, grid and fullscreen buttons sit over every screen;
   on the menu's paper they are drawn as ink rings */
body.menu-comic #scr-menu.active ~ #gear-btn,body.menu-comic #scr-menu.active ~ #about-btn,body.menu-comic #scr-menu.active ~ #grid-btn,body.menu-comic #scr-menu.active ~ #style-btn,body.menu-comic #scr-menu.active ~ #fs-btn,
#scr-profile.active ~ #gear-btn,#scr-profile.active ~ #about-btn,#scr-profile.active ~ #fs-btn,
#scr-dialogue.active ~ #gear-btn,#scr-dialogue.active ~ #about-btn,#scr-dialogue.active ~ #fs-btn{
  color:var(--k-ink);background:var(--k-white);border:3px solid var(--k-ink);opacity:1;font-family:'Segoe UI Symbol','DejaVu Sans',sans-serif;
  box-shadow:3px 3px 0 rgba(20,18,15,.35);display:flex;align-items:center;justify-content:center;padding:0}
body.menu-comic #scr-menu.active ~ #gear-btn,body.menu-comic #scr-menu.active ~ #about-btn,#scr-profile.active ~ #gear-btn,#scr-profile.active ~ #about-btn,
#scr-dialogue.active ~ #gear-btn,#scr-dialogue.active ~ #about-btn{width:44px;height:44px;font-size:24px}
body.menu-comic #scr-menu.active ~ #grid-btn,body.menu-comic #scr-menu.active ~ #style-btn{width:38px;height:38px;font-size:17px}
body.menu-comic #scr-menu.active ~ #fs-btn,#scr-profile.active ~ #fs-btn,#scr-dialogue.active ~ #fs-btn{border-radius:2px}
body.menu-comic #scr-menu.active ~ #gear-btn:hover,body.menu-comic #scr-menu.active ~ #about-btn:hover,body.menu-comic #scr-menu.active ~ #grid-btn:hover,body.menu-comic #scr-menu.active ~ #style-btn:hover,body.menu-comic #scr-menu.active ~ #fs-btn:hover,
#scr-profile.active ~ #gear-btn:hover,#scr-profile.active ~ #about-btn:hover,#scr-profile.active ~ #fs-btn:hover,
#scr-dialogue.active ~ #gear-btn:hover,#scr-dialogue.active ~ #about-btn:hover,#scr-dialogue.active ~ #fs-btn:hover{
  background:linear-gradient(180deg,var(--k-gold1),var(--k-gold2))}
body.menu-comic #scr-menu.active ~ #grid-btn.on,body.menu-comic #scr-menu.active ~ #style-btn.on{background:var(--k-ink);color:var(--k-cream)}
/* on a phone the CONTROLLER button takes the bottom-right corner of the
   menu, so the fullscreen button steps up above it */
body.menu-comic:has(#scr-menu.active #phone-ctrl-menu:not([hidden])) #fs-btn{bottom:72px}

/* ============================================================
   STORY CONVERSATION (js/story.js StoryDlg)
   ============================================================ */
/* the lights are down: the coming fight's stage shows through under the
   idle loop's dark wash, with a little more shade at the edges */
#scr-dialogue{background:radial-gradient(120% 100% at 50% 40%,rgba(6,4,8,0) 45%,rgba(6,4,8,.45) 100%)}
/* --bw is the portrait width, --bl its distance from the screen edge; the
   speech box takes the width left between the two portraits */
#scr-dialogue{--bw:min(280px,19vw);--bl:clamp(14px,3.5vw,110px)}
#scr-dialogue .dlg-bust{bottom:15vh;width:var(--bw);opacity:1;filter:grayscale(.55);transition:filter .2s,transform .2s,opacity .2s;
  background:none;border:0;border-radius:0;padding:0;overflow:visible;display:block}
#scr-dialogue .dlg-bust.left{left:var(--bl);transform:rotate(-2deg)}
#scr-dialogue .dlg-bust.right{right:var(--bl);transform:rotate(2deg)}
#scr-dialogue .dlg-bust.talk{filter:none;opacity:1}
#scr-dialogue .dlg-bust.left.talk{transform:rotate(-2deg) translateY(-10px)}
#scr-dialogue .dlg-bust.right.talk{transform:rotate(2deg) translateY(-10px)}
#scr-dialogue .dlg-bust.dim{opacity:.6;filter:grayscale(.85) contrast(.9)}
#scr-dialogue .dlg-bust canvas{display:block;width:100%;height:auto;aspect-ratio:4/5;border-radius:0;background:var(--k-sky);
  border:3px solid var(--k-ink);box-shadow:6px 6px 0 rgba(20,18,15,.3)}
#scr-dialogue .dlg-name{display:inline-block;margin:10px 0 0;padding:4px 12px;background:var(--k-ink);
  font-family:var(--k-comic);font-size:17px;font-weight:900;letter-spacing:.06em;transform:rotate(-1deg)}
#scr-dialogue .dlg-bust{text-align:center}
#scr-dialogue .dlg-name b{color:var(--k-cream)}
#scr-dialogue .dlg-title{color:#efe4c8;font-weight:900;font-size:11px;letter-spacing:.14em;margin-top:5px;text-shadow:0 1px 2px rgba(0,0,0,.8)}
#scr-dialogue .dlg-box{width:min(820px,calc(100vw - 2*(var(--bl) + var(--bw) + 34px)));background:var(--k-dots),linear-gradient(180deg,var(--k-paper),var(--k-paper2));
  border:3px solid var(--k-ink);border-radius:2px;box-shadow:8px 8px 0 rgba(20,18,15,.32);padding:30px 32px 18px;color:var(--k-ink)}
/* the speech tail points at whoever is talking */
#scr-dialogue .dlg-box::before,#scr-dialogue .dlg-box::after{content:'';position:absolute;top:38%;display:none;
  border-top:16px solid transparent;border-bottom:16px solid transparent}
#scr-dialogue .dlg-box.from-a::before{display:block;left:-28px;border-right:28px solid var(--k-ink)}
#scr-dialogue .dlg-box.from-a::after{display:block;left:-21px;top:calc(38% + 4px);border-top-width:12px;border-bottom-width:12px;border-right:22px solid var(--k-paper)}
#scr-dialogue .dlg-box.from-b::before{display:block;right:-28px;border-left:28px solid var(--k-ink)}
#scr-dialogue .dlg-box.from-b::after{display:block;right:-21px;top:calc(38% + 4px);border-top-width:12px;border-bottom-width:12px;border-left:22px solid var(--k-paper)}
#scr-dialogue .dlg-speaker{position:absolute;top:-17px;left:22px;margin:0;padding:4px 12px;background:var(--k-ink);
  font-family:var(--k-comic);font-size:14px;font-weight:900;letter-spacing:.18em;color:var(--k-cream);transform:rotate(-1.5deg);
  box-shadow:3px 3px 0 rgba(20,18,15,.25)}
#scr-dialogue .dlg-speaker span{color:var(--k-cream) !important}
#scr-dialogue .dlg-speaker .narr{color:var(--k-ink)}
/* narration sits in a yellow caption box, like a comic's own narrator */
#scr-dialogue .dlg-box.narr{background:var(--k-dots),linear-gradient(180deg,#f8dd8e,#efc86d)}
#scr-dialogue .dlg-box.narr .dlg-speaker{background:var(--k-paper);color:var(--k-ink);border:2px solid var(--k-ink)}
#scr-dialogue .dlg-box.narr .dlg-speaker span{color:var(--k-ink) !important}
#scr-dialogue .dlg-text{font-family:var(--k-comic);font-size:20px;line-height:1.6;min-height:96px;color:var(--k-ink);font-weight:700}
#scr-dialogue .dlg-hint{color:var(--k-brown);font-weight:900;font-size:10px;letter-spacing:.18em;animation:none;opacity:.85}
#scr-dialogue .dlg-skip{font-family:var(--k-comic);font-weight:900;font-size:12px;letter-spacing:.14em;color:var(--k-ink);
  background:var(--k-white);border:3px solid var(--k-ink);border-radius:2px;padding:7px 16px;box-shadow:3px 3px 0 rgba(20,18,15,.35)}
#scr-dialogue .dlg-skip:hover{background:linear-gradient(180deg,var(--k-gold1),var(--k-gold2));border-color:var(--k-ink);transform:translate(-1px,-1px)}
/* the route bar stays between the screen's left edge and the info button;
   on narrow screens it drops under the info and settings buttons instead */
#scr-dialogue .story-route-map{width:min(920px,76vw,calc(100vw - 372px))}
@media (max-width:900px) and (min-height:561px){
  #scr-dialogue .story-route-map{top:calc(70px + env(safe-area-inset-top,0px));width:min(920px,92vw)}
}
/* short screens (a phone held sideways): small portraits in the bottom
   corners, the speech box between them */
@media (max-height:560px){
  #scr-dialogue .story-route-map{width:min(920px,calc(100vw - 380px));min-width:260px;top:12px}
  #scr-dialogue .dlg-stage{padding:0 2vw 4vh}
  #scr-dialogue .dlg-bust{width:min(150px,17vw);bottom:calc(4vh + 44px)}
  #scr-dialogue .dlg-bust.left{left:2vw}
  #scr-dialogue .dlg-bust.right{right:2vw}
  #scr-dialogue .dlg-box{width:min(600px,60vw);padding:22px 18px 10px;box-shadow:5px 5px 0 rgba(20,18,15,.32)}
  #scr-dialogue .dlg-box::before,#scr-dialogue .dlg-box::after{top:30%}
  #scr-dialogue .dlg-speaker{font-size:12px;top:-15px;padding:3px 10px}
  #scr-dialogue .dlg-text{font-size:15.5px;line-height:1.5;min-height:66px}
  #scr-dialogue .dlg-hint{display:none}
  #scr-dialogue .dlg-skips{margin-top:8px}
  #scr-dialogue .dlg-skip{font-size:10.5px;padding:5px 11px;border-width:2px}
  #scr-dialogue .dlg-name{font-size:12px;margin-top:6px;padding:3px 8px}
  #scr-dialogue .dlg-title{display:none}
}
/* narrow screens (a phone held upright): portraits across the top, the
   speech box across the bottom */
@media (max-width:640px) and (min-height:561px){
  #scr-dialogue .story-route-map{top:calc(70px + env(safe-area-inset-top,0px));width:92vw}
  #scr-dialogue .dlg-bust{width:min(170px,34vw);bottom:auto;top:calc(130px + env(safe-area-inset-top,0px))}
  #scr-dialogue .dlg-bust.left{left:5vw}
  #scr-dialogue .dlg-bust.right{right:5vw}
  #scr-dialogue .dlg-box{width:92vw;padding:28px 18px 14px}
  #scr-dialogue .dlg-box::before,#scr-dialogue .dlg-box::after{display:none !important}
  #scr-dialogue .dlg-text{font-size:17px;min-height:84px}
  #scr-dialogue .dlg-name{font-size:14px}
  #scr-dialogue .dlg-title{display:none}
}
/* desktop screens under 1200px tall: a list sized by the window height; under 860px the list
   splits into two columns so every entry stays on screen */
@media (max-height:1200px){
  body.menu-comic:not(.touch) #scr-menu .menu-center{gap:clamp(8px,1.3vh,14px)}
  body.menu-comic:not(.touch) #scr-menu .menu-title{font-size:clamp(44px,5vh,58px)}
  body.menu-comic:not(.touch) #scr-menu .menu-list:not(.grid){gap:clamp(4px,.65vh,8px)}
  body.menu-comic:not(.touch) #scr-menu .menu-list:not(.grid) .menu-item{padding:clamp(3px,.5vh,7px) 12px;font-size:clamp(13.5px,1.55vh,16px)}
  body.menu-comic:not(.touch) #scr-menu .menu-list:not(.grid) .menu-item .mi-idx{width:clamp(23px,2.8vh,28px);height:clamp(23px,2.8vh,28px);font-size:12.5px}
}
@media (max-height:860px){
  body.menu-comic:not(.touch) #scr-menu .menu-center{gap:12px}
  body.menu-comic:not(.touch) #scr-menu .menu-title{font-size:46px;-webkit-text-stroke:2.5px var(--k-ink);text-shadow:4px 4px 0 var(--k-red),7px 7px 0 rgba(20,18,15,.7)}
  body.menu-comic:not(.touch) #scr-menu .menu-list:not(.grid){grid-template-columns:repeat(2,minmax(0,1fr));width:min(780px,94vw);gap:9px 14px}
  body.menu-comic:not(.touch) #scr-menu .menu-list:not(.grid) .menu-item{display:grid;grid-template-columns:27px minmax(0,1fr);column-gap:11px;row-gap:1px;
    align-items:center;align-content:center;min-height:48px;text-align:left}
  body.menu-comic:not(.touch) #scr-menu .menu-list:not(.grid) .menu-item .mi-idx{grid-row:1 / span 2}
  body.menu-comic:not(.touch) #scr-menu .menu-list:not(.grid) .menu-item .mi-txt:last-child{grid-row:1 / span 2}
  body.menu-comic:not(.touch) #scr-menu .menu-list:not(.grid) .menu-item .mi-txt{grid-column:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.menu-comic:not(.touch) #scr-menu .menu-list:not(.grid) .menu-item .mi-hint{grid-column:2;margin:0;text-align:left;font-size:9px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.menu-comic:not(.touch) #scr-menu .menu-list:not(.grid) .menu-item.youbtn{grid-column:1 / -1;justify-self:center;width:min(380px,100%);
    display:flex;justify-content:center}
}
/* the touch menu keeps its compact 3 x 3 grid, in comic dress */
body.touch.menu-comic #scr-menu .menu-center{gap:6px}
body.touch.menu-comic #scr-menu .menu-title{font-size:32px;-webkit-text-stroke:2px var(--k-ink);text-shadow:3px 3px 0 var(--k-red),5px 5px 0 rgba(20,18,15,.6)}
body.touch.menu-comic #scr-menu .menu-list{width:min(560px,94vw);gap:7px;grid-template-columns:repeat(3,1fr)}
body.touch.menu-comic #scr-menu .menu-item{padding:7px 6px;font-size:11.5px;letter-spacing:.08em;gap:6px;justify-content:center;text-align:center;
  border-width:2px;box-shadow:3px 3px 0 rgba(20,18,15,.6)}
body.touch.menu-comic #scr-menu .menu-item .mi-idx{width:22px;height:22px;font-size:11px}
body.touch.menu-comic #scr-menu .menu-item .mi-hint{display:none}
body.touch.menu-comic #scr-menu .mtab{padding:5px 12px;font-size:11px;border-width:2px}
body.touch.menu-comic #scr-menu .menu-list{grid-template-columns:repeat(3,minmax(0,1fr))}
body.touch.menu-comic #scr-menu .menu-item.youbtn{grid-column:2}
/* a phone held upright has the height: the OFFLINE / ONLINE tabs sit under
   the title, as on a computer, instead of floating in the corner */
@media (orientation:portrait){
  body.touch.menu-comic #scr-menu .menu-tabs{position:static;margin:2px 0 4px}
}
/* upright phones: the menu sits in the middle row of a grid whose top row
   keeps clear of the player chip and whose bottom row keeps clear of the
   support credit and the CONTROLLER button */
@media (orientation:portrait){
  body.touch.menu-comic #scr-menu.active{display:grid;grid-template-rows:minmax(calc(78px + env(safe-area-inset-top,0px)),1fr) auto minmax(96px,1.3fr);
    justify-items:center;align-items:start;padding-bottom:0}
  body.touch.menu-comic #scr-menu .menu-center{grid-row:2;padding-top:0}
}
/* narrow phones: the badge sits over the label so three columns fit */
@media (max-width:480px){
  body.touch.menu-comic #scr-menu .menu-item{flex-direction:column;gap:3px;padding:7px 3px;font-size:10.5px;letter-spacing:.05em;line-height:1.15}
  body.touch.menu-comic #scr-menu .menu-item .mi-txt{overflow-wrap:anywhere}
}

/* ============================================================
   POP-UP DIALOGS (js/dialog.js) · every mode wears the paper
   ============================================================ */
.dlg.comic{background:rgba(20,18,15,.6)}
.dlg.comic:not(.banner):not(.about):not(.fighter-pick) .dlgbox{width:auto;min-width:min(440px,92vw);max-width:min(760px,94vw);
  transform:none;clip-path:none;padding:30px 32px 26px}
.dlg.comic h3{font-family:var(--k-comic);color:var(--k-ink);text-shadow:1px 1px 0 rgba(255,255,255,.7)}
.dlg.comic .dlg-body{color:#2a2418}
.dlg.comic #dlg-input,.dlg.comic #dlg-area{background:var(--k-white);color:var(--k-ink);border:3px solid var(--k-ink);border-radius:0;
  font-family:var(--k-comic);font-weight:700}
.dlg.comic #dlg-input:focus,.dlg.comic #dlg-area:focus{border-color:var(--k-ink);box-shadow:0 0 0 3px rgba(232,176,75,.8)}
.dlg.comic #dlg-ok,.dlg.comic #dlg-cancel{border:3px solid var(--k-ink);border-radius:2px;font-family:var(--k-comic);font-weight:900;
  box-shadow:3px 3px 0 rgba(20,18,15,.35)}
/* the fighter picker: each tile keeps its full height (portrait, name,
   style) and the grid scrolls, instead of squeezing 70+ tiles into strips */
.dlg.fighter-pick .dlg-grid{grid-auto-rows:max-content;align-content:start}
.dlg.comic.fighter-pick .dlgtile .ds{color:var(--k-brown) !important}
.dlg.comic .dlg-grid button,.dlg.comic .dlg-grid .dg-opt{font-family:var(--k-comic);font-weight:900;color:var(--k-ink);
  background:var(--k-white);border:2px solid var(--k-ink);border-radius:1px;box-shadow:2px 2px 0 rgba(20,18,15,.25)}

/* ============================================================
   PROFILE
   ============================================================ */
#scr-profile.comic{background:var(--k-dots),linear-gradient(180deg,var(--k-cream),#e9ddbe)}
#scr-profile .pf-page{position:absolute;top:78px;left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;
  padding:14px 24px 60px;-webkit-overflow-scrolling:touch;z-index:2}
#scr-profile .pf-wrap{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px;align-items:start}
#scr-profile .pf-side{display:flex;flex-direction:column;gap:18px;min-width:0}
#scr-profile .pf-main{display:flex;flex-direction:column;gap:20px;min-width:0}
#scr-profile .pf-panel,#scr-profile .pf-cover{position:relative;background:var(--k-dots),linear-gradient(180deg,var(--k-paper),#f3e7c9);
  border:3px solid var(--k-ink);border-radius:2px;box-shadow:6px 6px 0 rgba(20,18,15,.28);color:var(--k-ink)}
#scr-profile .pf-panel{padding:16px 18px 18px}
#scr-profile .pf-lbl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;
  font-family:var(--k-comic);font-size:15px;font-weight:900;letter-spacing:.14em;color:var(--k-ink);text-transform:uppercase}
#scr-profile .pf-lbl b{background:var(--k-ink);color:var(--k-cream);padding:4px 11px;transform:rotate(-1deg);display:inline-block;
  box-shadow:3px 3px 0 rgba(20,18,15,.22)}
#scr-profile .pf-lbl em{font-style:normal;font-family:inherit;font-size:11px;letter-spacing:.14em;color:var(--k-brown);font-weight:900}
#scr-profile .pf-empty{font-size:13px;line-height:1.55;color:#3a2f1c;font-weight:700}
/* ---- the fighter card ---- */
#scr-profile .pf-cover{padding:14px 14px 18px;display:flex;flex-direction:column;gap:14px}
#scr-profile .pf-masthead{align-self:flex-start;font-size:10px;font-weight:900;letter-spacing:.3em;color:var(--k-ink);
  background:var(--k-cream);border:2px solid var(--k-ink);padding:3px 8px}
#scr-profile .pf-masthead span{color:var(--k-red)}
#scr-profile .pf-portrait{position:relative;width:100%;aspect-ratio:4/5;border:3px solid var(--k-ink);background:var(--k-sky);
  overflow:hidden;box-shadow:4px 4px 0 rgba(20,18,15,.25)}
#scr-profile .pf-portrait canvas,#scr-profile .pf-portrait img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
#scr-profile .pf-portrait img[hidden]{display:none}
#scr-profile .pf-stamp{position:absolute;top:8px;right:8px;z-index:2;width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  font-size:34px;font-style:normal;font-weight:900;line-height:1;color:var(--k-red2);background:var(--k-paper);border:3px solid var(--k-ink);
  transform:rotate(8deg);box-shadow:3px 3px 0 rgba(20,18,15,.3);text-shadow:none;padding:0}
#scr-profile .pf-avatar-btn{position:absolute;left:50%;bottom:12px;z-index:2;transform:translateX(-50%);white-space:nowrap;cursor:pointer;
  font-family:var(--k-comic);font-weight:900;font-size:12px;letter-spacing:.14em;color:var(--k-ink);
  background:linear-gradient(180deg,var(--k-gold1),var(--k-gold2));border:3px solid var(--k-ink);padding:7px 14px;
  box-shadow:3px 3px 0 rgba(20,18,15,.4)}
#scr-profile .pf-avatar-btn:hover,#scr-profile .pf-avatar-btn:focus{background:var(--k-ink);color:var(--k-cream);outline:none}
#scr-profile .pf-field{display:flex;flex-direction:column;gap:5px}
#scr-profile .pf-field > span{font-size:10px;font-weight:900;letter-spacing:.24em;color:var(--k-ink)}
#scr-profile .pf-field input{width:100%;box-sizing:border-box;background:var(--k-white);border:3px solid var(--k-ink);border-radius:0;
  padding:9px 10px;font-family:var(--k-comic);font-size:21px;font-weight:900;color:var(--k-ink);letter-spacing:.05em;text-align:center}
#scr-profile .pf-field input::placeholder{color:#a3967c}
#scr-profile .pf-field input:focus{outline:none;box-shadow:0 0 0 3px rgba(232,176,75,.85)}
#scr-profile .pf-discordfield input{font-size:15px}
#scr-profile .pf-mastery{display:flex;flex-direction:column;gap:6px}
#scr-profile .pf-mastery-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
#scr-profile .pf-xp{font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--k-brown)}
#scr-profile .pf-mastery-name{font-family:var(--k-comic);font-size:25px;font-weight:900;letter-spacing:.04em;color:var(--k-red2);line-height:1.1}
#scr-profile .pf-mastery-next{font-size:10.5px;font-weight:900;letter-spacing:.12em;color:var(--k-brown)}
#scr-profile .pf-bar{height:12px;border:2px solid var(--k-ink);background:var(--k-white);overflow:hidden}
#scr-profile .pf-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--k-gold2),var(--k-gold1));transition:width .4s}
#scr-profile .pf-bar-big{height:14px}
/* ---- the ranked ladder ---- */
#scr-profile .pf-ranked{margin:0;padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px}
/* REWARDS (owner, 2026-10-13) · every reward and how to get it; the list scrolls */
#scr-profile .pf-rewards{margin:0;padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;min-height:0}
#scr-profile .pf-rewards .pf-lbl{display:flex;justify-content:space-between;align-items:center;gap:8px}
#scr-profile .pf-rewards .pf-lbl b{background:var(--k-ink);color:var(--k-cream);font-size:10px;font-weight:900;letter-spacing:.2em;padding:3px 8px}
#scr-profile .pf-rewards .pf-lbl em{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--k-brown)}
#scr-profile .rw-list{max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;padding-right:4px}
#scr-profile .rw-group{margin:6px 0 1px;font-size:10px;font-weight:900;letter-spacing:.2em;color:var(--k-red2)}
#scr-profile .rw-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border:2px solid var(--k-ink);background:rgba(255,255,255,.4)}
#scr-profile .rw-row.done{background:rgba(217,160,56,.25)}
#scr-profile .rw-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
#scr-profile .rw-txt b{font-size:11.5px;font-weight:900;letter-spacing:.08em;color:var(--k-ink)}
#scr-profile .rw-txt span{font-size:11px;line-height:1.3;color:#4a4234;font-weight:600}
#scr-profile .rw-txt span:empty{display:none}
#scr-profile .rw-row em{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.06em;color:var(--k-ink);white-space:nowrap}
#scr-profile .rw-row.done em{color:#1e7a5c;font-size:15px}
#scr-profile .pf-ranked-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
#scr-profile .pf-ranked-tag{background:var(--k-ink);color:var(--k-cream);font-size:10px;font-weight:900;letter-spacing:.2em;padding:3px 8px}
#scr-profile .pf-ranked-record{font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--k-brown)}
#scr-profile .pf-ranked-name{font-family:var(--k-comic);font-size:21px;font-weight:900;letter-spacing:.06em;color:var(--k-ink)}
#scr-profile .pf-ranked-name em{font-style:normal;font-size:12px;letter-spacing:.18em;color:var(--k-red2);margin-left:6px}
#scr-profile .pf-ranked-bar{height:12px;border:2px solid var(--k-ink);border-radius:0;background:var(--k-white);overflow:hidden}
#scr-profile .pf-ranked-bar i{display:block;height:100%;border-radius:0;background:linear-gradient(90deg,var(--k-red2),var(--k-red))}
#scr-profile .pf-ranked-meta{font-size:10.5px;font-weight:900;letter-spacing:.12em;color:var(--k-brown)}
/* ---- stat tiles ---- */
#scr-profile .pf-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
#scr-profile .pst{position:relative;padding:14px 8px 12px;text-align:center;background:var(--k-dots),linear-gradient(180deg,var(--k-paper),#f3e7c9);
  border:3px solid var(--k-ink);border-radius:2px;box-shadow:5px 5px 0 rgba(20,18,15,.28);color:var(--k-ink)}
#scr-profile .pst:nth-child(odd){transform:rotate(-.8deg)}
#scr-profile .pst:nth-child(even){transform:rotate(.8deg)}
#scr-profile .pst .pv{font-family:var(--k-comic);font-size:36px;font-weight:900;line-height:1;color:var(--k-red2);text-shadow:2px 2px 0 rgba(20,18,15,.12)}
#scr-profile .pst .pk{font-size:10.5px;font-weight:900;letter-spacing:.16em;color:var(--k-ink);margin-top:7px;text-transform:uppercase}
#scr-profile .pst .ps{font-size:10px;font-weight:900;letter-spacing:.1em;color:var(--k-brown);margin-top:2px;min-height:12px}
#scr-profile .pst .pmeter{height:9px;margin:9px 4px 0;border:2px solid var(--k-ink);background:var(--k-white);overflow:hidden}
#scr-profile .pst .pmeter i{display:block;height:100%;width:var(--f,0%);background:linear-gradient(90deg,var(--k-gold2),var(--k-gold1))}
/* ---- favourites + online ---- */
#scr-profile .pf-duo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:start}
#scr-profile .pf-favrow{display:grid;grid-template-columns:30px 58px minmax(0,1fr);gap:12px;align-items:center;margin:12px 0 0}
#scr-profile .pf-idx{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--k-ink);color:var(--k-cream);
  font-family:var(--k-comic);font-size:16px;font-weight:900;transform:rotate(-5deg)}
#scr-profile .pf-favrow canvas{width:58px;height:70px;display:block;border:2px solid var(--k-ink);background:var(--k-sky);box-shadow:3px 3px 0 rgba(20,18,15,.25)}
#scr-profile .pf-favname{font-family:var(--k-comic);font-size:19px;font-weight:900;color:var(--k-ink);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scr-profile .pf-favmeta{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;font-weight:900;letter-spacing:.12em;color:var(--k-brown);margin-top:2px}
#scr-profile .pf-favbar{height:11px;border:2px solid var(--k-ink);background:var(--k-white);margin-top:5px;overflow:hidden}
#scr-profile .pf-favbar i{display:block;height:100%;background:linear-gradient(90deg,var(--k-gold2),var(--k-gold1))}
#scr-profile .pf-online{display:flex;flex-direction:column;gap:16px}
#scr-profile .pf-record{padding:0 0 14px;margin:0;border-bottom:3px dashed rgba(20,18,15,.35)}
#scr-profile .pf-score{display:flex;align-items:baseline;justify-content:center;gap:12px;font-family:var(--k-comic);font-weight:900;font-style:normal;line-height:1}
#scr-profile .pf-score .w{font-size:48px;color:#2f6b2a}
#scr-profile .pf-score .l{font-size:48px;color:var(--k-red)}
#scr-profile .pf-score .lb{font-size:13px;letter-spacing:.2em;color:var(--k-ink)}
#scr-profile .pf-score .slash{font-size:32px;color:var(--k-brown)}
#scr-profile .pf-toggle{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:10px;cursor:pointer;
  font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--k-ink)}
#scr-profile .pf-toggle input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:42px;height:22px;margin:0;
  border-radius:12px;background:var(--k-white);border:2px solid var(--k-ink);box-shadow:none;cursor:pointer}
#scr-profile .pf-toggle input::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--k-ink);transition:left .15s}
#scr-profile .pf-toggle input:checked{background:#3fbf5a;border-color:var(--k-ink);box-shadow:none}
#scr-profile .pf-toggle input:checked::after{left:22px;background:var(--k-ink)}
#scr-profile .pf-toggle input:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(232,176,75,.85)}
/* leftovers from the old dark profile sheet */
#scr-profile .pf-lbl::before{display:none}
#scr-profile.comic .pf-online .pf-record{background:none;border:0;border-bottom:3px dashed rgba(20,18,15,.35);border-radius:0;box-shadow:none;color:var(--k-ink)}
#scr-profile .pf-friend{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-top:8px;background:var(--k-white);
  border:2px solid var(--k-ink);box-shadow:2px 2px 0 rgba(20,18,15,.22)}
#scr-profile .pf-friend .dot{width:12px;height:12px;border-radius:50%;flex:none;border:2px solid var(--k-ink);background:#b8ad98}
#scr-profile .pf-friend .dot.on{background:#3fbf5a}
#scr-profile .pf-friend .nm{font-family:var(--k-comic);font-size:15px;font-weight:900;color:var(--k-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scr-profile .pf-friend .st{margin-left:auto;font-size:9.5px;font-weight:900;letter-spacing:.14em;color:var(--k-brown)}
#scr-profile .pf-friend .st.on{color:#2f6b2a}
/* ---- achievements ---- */
#scr-profile .pf-achgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
#scr-profile .pf-achv{position:relative;display:flex;gap:12px;align-items:center;padding:10px 12px;background:var(--k-white);
  border:2px solid var(--k-ink);box-shadow:3px 3px 0 rgba(20,18,15,.22);min-width:0}
#scr-profile .pf-achv .ag{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:900;
  color:var(--k-ink);background:linear-gradient(180deg,var(--k-gold1),var(--k-gold2));border:2px solid var(--k-ink);transform:rotate(-4deg)}
#scr-profile .pf-achv .an{font-family:var(--k-comic);font-size:14.5px;font-weight:900;letter-spacing:.05em;color:var(--k-ink);line-height:1.2}
#scr-profile .pf-achv .ad{font-size:12px;line-height:1.35;color:#4a3c22;margin-top:2px;font-weight:700}
#scr-profile .pf-achv.locked{background:repeating-linear-gradient(45deg,#f3ead2 0 8px,#ece0c2 8px 16px);border-style:dashed;box-shadow:none}
#scr-profile .pf-achv.locked .ag{background:#d9cfb8;color:#8a7d64;transform:none}
#scr-profile .pf-achv.locked .an{color:#6d6250}
#scr-profile .pf-achv .anew{position:absolute;top:-10px;right:-6px;background:var(--k-red);color:#fff;font-family:var(--k-comic);font-size:10px;
  font-weight:900;letter-spacing:.12em;padding:2px 7px;border:2px solid var(--k-ink);transform:rotate(6deg)}
/* ---- the dojo panel keeps its own inner styles (comic-online.css) ---- */
#scr-profile .profile-dojo{padding:16px 18px 18px;gap:9px}
#scr-profile .profile-dojo .dojo-empty{font-size:13px}
#scr-profile .profile-dojo .dojo-btn{align-self:flex-start;font-size:12px;padding:9px 16px}
/* ---- the header ---- */
#scr-profile.comic .bar{justify-content:center}
#scr-profile .pf-signout{align-self:stretch;font-family:var(--k-comic);font-weight:900;font-size:12px;letter-spacing:.2em;padding:9px 14px;
  cursor:pointer;color:var(--k-ink);background:var(--k-white);border:3px dashed var(--k-ink);box-shadow:none}
#scr-profile .pf-signout:hover,#scr-profile .pf-signout:focus{outline:none;border-style:solid;background:var(--k-red);color:var(--k-paper)}
#scr-profile .pf-signout[hidden]{display:none}
/* ---- sizes ---- */
@media (max-width:1180px){
  #scr-profile .pf-wrap{grid-template-columns:260px minmax(0,1fr)}
  #scr-profile .pf-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  #scr-profile .pf-duo{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  #scr-profile .pf-wrap{grid-template-columns:220px minmax(0,1fr);gap:16px}
  #scr-profile .pf-page{padding:10px 14px 50px}
  #scr-profile .pf-cover{padding:10px 10px 14px;gap:10px}
  #scr-profile .pf-field input{font-size:17px}
  #scr-profile .pf-mastery-name{font-size:20px}
  #scr-profile .pf-stamp{width:44px;height:44px;font-size:26px}
  #scr-profile .pf-avatar-btn{font-size:10.5px;padding:5px 9px}
}
@media (max-width:640px){
  #scr-profile .pf-wrap{grid-template-columns:minmax(0,1fr)}
  #scr-profile .pf-side{max-width:440px;width:100%;margin:0 auto}
  /* the header keeps to the left, clear of the info and settings buttons */
  #scr-profile.comic .bar{justify-content:flex-start;align-self:stretch;width:auto;padding-left:62px}
  #scr-profile .pf-bgdot{top:14px;left:14px}
  #scr-profile.comic .bar .mode-tag{display:none}
  /* the card lies on its side: the picture on the left, name and mastery beside it */
  #scr-profile .pf-cover{display:grid;grid-template-columns:136px minmax(0,1fr);grid-template-areas:"mast mast" "pic name" "pic mastery";
    gap:10px 12px;align-items:start}
  #scr-profile .pf-masthead{grid-area:mast}
  #scr-profile .pf-portrait{grid-area:pic}
  #scr-profile .pf-namefield{grid-area:name}
  #scr-profile .pf-mastery{grid-area:mastery}
  #scr-profile .pf-field input{font-size:16px;padding:7px 6px}
  #scr-profile .pf-mastery-name{font-size:18px}
  #scr-profile .pf-stamp{width:30px;height:30px;font-size:18px;top:5px;right:5px;border-width:2px}
  #scr-profile .pf-avatar-btn{bottom:6px;font-size:9.5px;letter-spacing:.06em;padding:4px 6px;border-width:2px}
}
/* a phone held sideways is short: the page starts right under the header */
@media (max-height:560px){
  #scr-profile .pf-page{top:62px}
}
@media (max-width:520px){
  #scr-profile .pf-page{padding:10px 14px 140px}
  #scr-profile .pf-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #scr-profile .pst .pv{font-size:28px}
  #scr-profile .pf-achgrid{grid-template-columns:minmax(0,1fr)}
  #scr-profile .pf-score .w,#scr-profile .pf-score .l{font-size:40px}
}

/* ---- the background colour (the circle, top left) ----
   --pf-bg is set from js (UI.profileBg); the halftone dots stay on top */
#scr-profile.comic.pf-tinted{background:var(--k-dots),linear-gradient(180deg,var(--pf-bg),var(--pf-bg2))}
#scr-profile .pf-bgdot{position:absolute;top:18px;left:18px;z-index:5;width:34px;height:34px;padding:0;border-radius:50%;cursor:pointer;
  background:var(--pf-bg,#f7efd8);border:3px solid var(--k-ink);box-shadow:2px 2px 0 rgba(20,18,15,.35);transition:transform .1s}
#scr-profile .pf-bgdot:hover,#scr-profile .pf-bgdot:focus-visible{transform:scale(1.12);outline:none}
#scr-profile .pf-bgdot:active{transform:scale(.94)}
/* a dark colour: the ink on the page itself turns light (panels keep their paper) */
#scr-profile.pf-dark .bar h2{color:#f7efd8;text-shadow:none}
#scr-profile.pf-dark.comic .bar{border-bottom-color:#f7efd8}
#scr-profile.pf-dark .pf-discordfield > span{color:#f7efd8}
#scr-profile.pf-dark .pf-bgdot{border-color:#f7efd8}

/* ---- ONE SCREEN. On a screen 900px wide or more, the whole page fits
   without scrolling: the dojo sits beside the favourites and the online
   record, achievements take four short columns, and js (UI.fitProfile)
   shrinks the lot when the window is still too short. Upright phones
   keep the scrolling page. ---- */
@media (min-width:900px){
  #scr-profile .pf-page{overflow:hidden;padding:12px 22px 14px}
  #scr-profile .pf-wrap{max-width:1560px;grid-template-columns:280px minmax(0,1fr);gap:20px}
  #scr-profile .pf-side{gap:12px}
  #scr-profile .pf-cover{padding:10px 12px 12px;gap:9px}
  #scr-profile .pf-field input{font-size:19px;padding:7px 10px}
  #scr-profile .pf-discordfield input{font-size:14px;padding:6px 10px}
  #scr-profile .pf-mastery-name{font-size:23px}
  #scr-profile .pf-ranked{padding:11px 14px 12px;gap:6px}
  #scr-profile .pf-signout{padding:7px 12px}
  #scr-profile .pf-main{display:grid;gap:16px;align-items:stretch;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"stats stats" "fav online" "ach ach" "dojo dojo" "acct acct"}
  #scr-profile .pf-duo{display:contents}
  #scr-profile .pf-stats{grid-area:stats;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
  #scr-profile .pf-fav{grid-area:fav}
  #scr-profile .pf-online{grid-area:online}
  #scr-profile .pf-ach{grid-area:ach}
  #scr-profile .profile-dojo{grid-area:dojo}
  #scr-profile .pf-panel{padding:12px 16px 14px}
  #scr-profile .pf-lbl{margin-bottom:8px}
  #scr-profile .pst{padding:10px 6px 9px}
  #scr-profile .pst .pv{font-size:30px}
  #scr-profile .pst .pk{margin-top:5px}
  #scr-profile .pst .pmeter{margin-top:7px}
  #scr-profile .pf-favrow{grid-template-columns:28px 46px minmax(0,1fr);gap:10px;margin-top:8px}
  #scr-profile .pf-favrow canvas{width:46px;height:56px}
  #scr-profile .pf-favname{font-size:17px}
  #scr-profile .pf-online{gap:10px}
  #scr-profile .pf-record{padding-bottom:10px}
  #scr-profile .pf-score .w,#scr-profile .pf-score .l{font-size:40px}
  #scr-profile .pf-achgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px}
  #scr-profile .pf-achv{padding:7px 10px;gap:10px}
  #scr-profile .pf-achv .ag{width:36px;height:36px;font-size:20px}
  #scr-profile .pf-achv .an{font-size:13px}
  #scr-profile .pf-achv .ad{font-size:11px;line-height:1.3}
  #scr-profile .profile-dojo{padding:12px 16px 14px}
}
/* wide enough: favourites, the online record and the dojo share one row */
@media (min-width:1180px){
  #scr-profile .pf-main{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"stats stats stats" "fav online dojo" "ach ach ach" "acct acct acct"}
}

/* ---- the ACCOUNT panel · username, password, Google, sign out. It sits
   under the achievements across the full width, where the page used to
   end in empty space. ---- */
#scr-profile .pf-account{grid-area:acct}
#scr-profile .pf-acct-out{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
#scr-profile .pf-acct-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 14px;align-items:stretch}
#scr-profile .pf-acct-in[hidden],#scr-profile .pf-acct-out[hidden]{display:none}
#scr-profile .pf-acct-cell{display:flex;flex-direction:column;gap:7px;min-width:0;padding:10px 12px;background:var(--k-white);
  border:2px solid var(--k-ink);box-shadow:3px 3px 0 rgba(20,18,15,.22)}
#scr-profile .pf-acct-k{font-size:10.5px;font-weight:900;letter-spacing:.16em;color:var(--k-brown)}
#scr-profile .pf-acct-v{font-family:var(--k-comic);font-size:18px;font-weight:900;color:var(--k-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scr-profile .pf-acct-note{margin:0;font-size:12px;line-height:1.45;font-weight:700;color:#4a3c22}
#scr-profile .pf-acct-btn{align-self:flex-start;margin-top:auto;font-family:var(--k-comic);font-weight:900;font-size:11.5px;letter-spacing:.14em;
  padding:7px 12px;cursor:pointer;color:var(--k-ink);background:linear-gradient(180deg,var(--k-gold1),var(--k-gold2));
  border:3px solid var(--k-ink);box-shadow:2px 2px 0 rgba(20,18,15,.3)}
#scr-profile .pf-acct-btn:hover,#scr-profile .pf-acct-btn:focus{outline:none;background:var(--k-ink);color:var(--k-cream)}
#scr-profile .pf-acct-out .pf-acct-btn{margin-top:0}
#scr-profile .pf-acct-end{justify-content:space-between}
#scr-profile .pf-account .pf-google{margin-top:auto}
#scr-profile .pf-account .pf-signout{align-self:stretch;margin-top:auto}
@media (max-width:1180px){#scr-profile .pf-acct-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){#scr-profile .pf-acct-in{grid-template-columns:minmax(0,1fr)}}

/* ---- the avatar picker ---- */
#scr-profile .av-picker{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(20,18,15,.55);padding:16px}
#scr-profile .av-picker[hidden]{display:none}
#scr-profile .av-sheet{width:min(940px,96vw);max-height:min(88vh,860px);display:flex;flex-direction:column;
  background:var(--k-dots),linear-gradient(180deg,var(--k-paper),var(--k-paper2));border:3px solid var(--k-ink);
  box-shadow:10px 10px 0 rgba(20,18,15,.4);color:var(--k-ink)}
#scr-profile .av-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:3px solid var(--k-ink)}
#scr-profile .av-head b{font-family:var(--k-comic);font-size:20px;font-weight:900;letter-spacing:.06em}
#scr-profile .av-close{margin-left:auto;width:40px;height:40px;flex:none;border:3px solid var(--k-ink);background:var(--k-white);color:var(--k-ink);
  font-size:17px;font-weight:900;cursor:pointer;box-shadow:2px 2px 0 rgba(20,18,15,.3)}
#scr-profile .av-close:hover{background:var(--k-ink);color:var(--k-cream)}
#scr-profile .av-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px 0}
#scr-profile .av-tab{font-family:var(--k-comic);font-weight:900;font-size:12px;letter-spacing:.12em;padding:7px 12px;cursor:pointer;
  color:var(--k-ink);background:var(--k-white);border:3px solid var(--k-ink);box-shadow:2px 2px 0 rgba(20,18,15,.25)}
#scr-profile .av-tab.on{background:var(--k-ink);color:var(--k-cream)}
#scr-profile .av-body{padding:14px 16px 18px;overflow-y:auto;min-height:0}
#scr-profile .av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}
#scr-profile .av-opt{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px;cursor:pointer;background:var(--k-white);
  border:2px solid var(--k-ink);box-shadow:2px 2px 0 rgba(20,18,15,.22);font-family:var(--k-comic);font-size:11.5px;font-weight:900;
  color:var(--k-ink);transition:transform .08s}
#scr-profile .av-opt canvas{width:100%;height:auto;aspect-ratio:4/5;display:block;border:2px solid var(--k-ink);background:var(--k-sky)}
#scr-profile .av-opt span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scr-profile .av-opt:hover,#scr-profile .av-opt:focus{transform:translateY(-3px);outline:none;box-shadow:4px 4px 0 rgba(20,18,15,.3)}
#scr-profile .av-opt.sel{background:linear-gradient(180deg,var(--k-gold1),var(--k-gold2))}
#scr-profile .av-upload{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto 1fr;gap:6px 20px;align-items:start}
#scr-profile .av-upload .av-preview{grid-row:1 / span 2}
#scr-profile .av-upload .av-note{grid-column:2;grid-row:1}
#scr-profile .av-actions{grid-column:2;grid-row:2}
#scr-profile .av-preview{width:220px;aspect-ratio:4/5;border:3px solid var(--k-ink);background:var(--k-sky);display:flex;align-items:center;
  justify-content:center;overflow:hidden;box-shadow:4px 4px 0 rgba(20,18,15,.25);font-family:var(--k-comic);font-weight:900;color:var(--k-brown)}
#scr-profile .av-preview img{width:100%;height:100%;object-fit:cover;display:block}
#scr-profile .av-note{font-size:13.5px;line-height:1.55;color:#3a2f1c;font-weight:700;margin:0 0 10px}
#scr-profile .av-btn{font-family:var(--k-comic);font-weight:900;font-size:13px;letter-spacing:.12em;padding:10px 16px;margin:6px 10px 0 0;cursor:pointer;
  color:var(--k-ink);background:linear-gradient(180deg,var(--k-gold1),var(--k-gold2));border:3px solid var(--k-ink);box-shadow:3px 3px 0 rgba(20,18,15,.3)}
#scr-profile .av-btn.ghost{background:var(--k-white)}
#scr-profile .av-btn:hover{background:var(--k-ink);color:var(--k-cream)}
#scr-profile .av-err{color:var(--k-red);font-weight:900;font-size:12.5px;margin-top:10px;min-height:16px}
/* ---- the face editor (MAKE A FACE) ---- */
#scr-profile .av-face{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;align-items:start}
#scr-profile .avf-prev{position:sticky;top:0}
#scr-profile .avf-prev canvas{display:block;width:240px;height:300px;border:3px solid var(--k-ink);box-shadow:5px 5px 0 rgba(20,18,15,.3);background:var(--k-sky)}
#scr-profile .avf-ctrls{display:flex;flex-direction:column;gap:9px;min-width:0}
#scr-profile .avf-row{display:grid;grid-template-columns:120px 40px 76px 40px;align-items:center;gap:8px}
#scr-profile .avf-swrow{grid-template-columns:120px minmax(0,1fr)}
#scr-profile .avf-lbl{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--k-ink)}
#scr-profile .avf-step{height:34px;cursor:pointer;font-size:14px;font-weight:900;color:var(--k-ink);background:var(--k-white);
  border:3px solid var(--k-ink);box-shadow:2px 2px 0 rgba(20,18,15,.25)}
#scr-profile .avf-step:hover,#scr-profile .avf-step:focus-visible{background:var(--k-ink);color:var(--k-cream);outline:none}
#scr-profile .avf-val{text-align:center;font-family:var(--k-comic);font-size:15px;font-weight:900;color:var(--k-ink)}
#scr-profile .avf-sw{display:flex;flex-wrap:wrap;gap:6px}
#scr-profile .avf-dot{width:24px;height:24px;padding:0;border-radius:50%;cursor:pointer;border:2px solid var(--k-ink);
  box-shadow:1px 1px 0 rgba(20,18,15,.3);transition:transform .08s}
#scr-profile .avf-dot:hover,#scr-profile .avf-dot:focus-visible{transform:scale(1.15);outline:none}
#scr-profile .avf-dot.on{box-shadow:0 0 0 3px var(--k-paper),0 0 0 6px var(--k-ink);transform:scale(1.05)}
#scr-profile .avf-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
#scr-profile .avf-actions .av-btn{margin:0 10px 0 0}
@media (max-width:600px){
  #scr-profile .av-face{grid-template-columns:minmax(0,1fr);gap:14px}
  #scr-profile .avf-prev{position:sticky;top:-14px;z-index:3;justify-self:stretch;display:flex;justify-content:center;padding:6px 0 10px;
    background:linear-gradient(180deg,var(--k-paper) 85%,rgba(253,246,227,0))}
  #scr-profile .avf-prev canvas{width:150px;height:188px}
  #scr-profile .avf-row{grid-template-columns:96px 36px minmax(0,1fr) 36px}
  #scr-profile .avf-swrow{grid-template-columns:minmax(0,1fr)}
  #scr-profile .avf-dot{width:26px;height:26px}
}

/* phones: the sheet starts under the info and settings buttons; a small
   preview with the buttons beside it, the note underneath */
@media (max-width:600px){
  #scr-profile .av-picker{padding:calc(68px + env(safe-area-inset-top,0px)) 10px 12px;align-items:flex-start}
  #scr-profile .av-sheet{max-height:100%}
  #scr-profile .av-upload{grid-template-columns:116px minmax(0,1fr);grid-template-rows:auto auto;gap:12px 14px}
  #scr-profile .av-upload .av-preview{grid-row:1;width:116px;font-size:11px;text-align:center}
  #scr-profile .av-actions{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:stretch;gap:8px}
  #scr-profile .av-actions .av-btn{margin:0;font-size:11.5px;padding:9px 8px}
  #scr-profile .av-upload .av-note{grid-column:1 / -1;grid-row:2;font-size:12.5px;margin:0}
  #scr-profile .av-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
}

/* ===================== MOVELIST · ONE SCREEN =====================
   The fighter's card on top, six small cards of moves, and the COMBO LAB
   beside them. Everything fits a 1080p screen without scrolling. */
#movelist-grid.comic.detail{width:min(1640px,97vw);gap:14px;padding:14px 16px 30px}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-top{display:flex;align-items:center;gap:18px;width:100%;padding:10px 16px;
  background:var(--k-dots),linear-gradient(180deg,#fdf6e3,#f1e3c2);border:3px solid var(--k-ink);box-shadow:5px 5px 0 rgba(20,18,15,.32)}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-top canvas{width:78px;aspect-ratio:4/5;border:3px solid var(--k-ink);background:#fdf6e3;box-shadow:3px 3px 0 rgba(20,18,15,.3);flex:0 0 auto}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-name{font-family:var(--k-comic);font-size:34px;font-weight:900;line-height:1;color:var(--k-ink);text-shadow:2px 2px 0 rgba(20,18,15,.18)}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-style{display:inline-block;margin-top:7px;padding:3px 10px;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:#f7efd8;background:var(--k-ink);border-left:6px solid var(--sc,#e8b04b)}
/* TRU and AO · their extra controls under the style line (owner, 2026-10-16) */
#movelist-grid .mx-extra{margin-top:6px;font-size:11px;font-weight:900;letter-spacing:.12em;color:#14120f;opacity:.85}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-acts{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-acts .mbtn{font-family:var(--k-comic);font-weight:900;letter-spacing:.12em;color:var(--k-ink);background:#fdf6e3;
  border:3px solid var(--k-ink);border-radius:0;box-shadow:3px 3px 0 rgba(20,18,15,.35);padding:10px 16px;font-size:13px}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-acts .mbtn.gold{background:linear-gradient(180deg,#efc86d,#d99a38)}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-acts .mbtn:hover,:is(#movelist-grid.comic,#pz-moves-panel) .mx-acts .mbtn:focus{background:var(--k-ink);color:#f7efd8;transform:translate(-1px,-1px)}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-body{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;width:100%;align-items:start}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-moves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-card,:is(#movelist-grid.comic,#pz-moves-panel) .mx-lab{background:var(--k-dots),#fdf6e3;border:3px solid var(--k-ink);box-shadow:4px 4px 0 rgba(20,18,15,.3);padding:8px 10px 6px}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-card h4,:is(#movelist-grid.comic,#pz-moves-panel) .mx-lab h4{display:inline-block;margin:0 0 4px;padding:3px 10px;font-family:var(--k-comic);font-size:13px;font-weight:900;
  letter-spacing:.16em;color:#f7efd8;background:var(--k-ink)}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:5px 0;border-top:1px dashed rgba(20,18,15,.28)}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-card h4 + .mx-row{border-top:0}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-key{font-family:var(--k-comic);font-weight:900;font-size:12px;color:var(--k-ink);white-space:nowrap}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-key kbd,:is(#movelist-grid.comic,#pz-moves-panel) .mx-ckeys kbd{display:inline-block;min-width:22px;padding:1px 5px;text-align:center;font-family:var(--k-comic);font-size:12px;font-weight:900;
  color:#f7efd8;background:linear-gradient(180deg,rgba(var(--acc-rgb,232,176,75),.95),rgba(var(--acc-rgb,232,176,75),.6));border:2px solid var(--k-ink);border-radius:2px;
  box-shadow:1px 1px 0 rgba(20,18,15,.45);text-shadow:0 1px 1px rgba(0,0,0,.5)}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-mv{min-width:0}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-mv b{display:block;font-family:var(--k-comic);font-size:14px;font-weight:900;color:var(--k-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-mv i{display:block;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.04em;color:#5c513c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-row.gold b{color:#7c1f17}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-go{width:28px;height:28px;padding:0;font-size:11px;color:var(--k-ink);background:linear-gradient(180deg,#efc86d,#d99a38);
  border:2px solid var(--k-ink);border-radius:0;box-shadow:2px 2px 0 rgba(20,18,15,.35);cursor:pointer}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-go:hover,:is(#movelist-grid.comic,#pz-moves-panel) .mx-go:focus{background:var(--k-ink);color:#f7efd8}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-lab{position:sticky;top:0;border-color:var(--k-ink);background:var(--k-dots),linear-gradient(180deg,#fbe7b4,#f3d58e)}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-lab h4{background:#7c1f17}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-lab-prog{margin:2px 0 4px;font-size:11px;font-weight:900;letter-spacing:.08em;color:#7c1f17}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-lab-prog.done{color:#1f5f2a}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-combo.done{background:#eef6e3}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-tick{color:#1f7a32;font-size:12px;margin-right:3px}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-lab-note{margin:2px 0 6px;font-size:11.5px;line-height:1.45;font-weight:700;color:#3a3226}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-combo{display:grid;grid-template-columns:62px minmax(0,1fr) auto 26px;align-items:center;gap:8px;width:100%;margin-top:7px;padding:7px 8px;text-align:left;
  background:#fdf6e3;border:2px solid var(--k-ink);box-shadow:3px 3px 0 rgba(20,18,15,.3);cursor:pointer;font:inherit;color:var(--k-ink)}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-combo:hover,:is(#movelist-grid.comic,#pz-moves-panel) .mx-combo:focus{transform:translate(-1px,-1px);box-shadow:5px 5px 0 rgba(20,18,15,.35);background:#fff8e6}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-stars{font-size:10.5px;letter-spacing:1px;color:#c8382f;white-space:nowrap}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-ckeys{font-family:var(--k-comic);font-size:12px;font-weight:900;line-height:1.9}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-ckeys kbd{font-size:11px;padding:0 4px;min-width:18px}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-cdmg{font-size:11px;font-weight:900;letter-spacing:.06em;white-space:nowrap}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-cgo{display:flex;align-items:center;justify-content:center;width:26px;height:26px;font-size:11px;background:linear-gradient(180deg,#efc86d,#d99a38);border:2px solid var(--k-ink)}
@media (max-width:1300px){
  :is(#movelist-grid.comic,#pz-moves-panel) .mx-body{grid-template-columns:1fr}
  :is(#movelist-grid.comic,#pz-moves-panel) .mx-lab{position:static}
}
@media (max-width:900px){ :is(#movelist-grid.comic,#pz-moves-panel) .mx-moves{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  :is(#movelist-grid.comic,#pz-moves-panel) .mx-moves{grid-template-columns:1fr}
  :is(#movelist-grid.comic,#pz-moves-panel) .mx-top{flex-wrap:wrap}
  :is(#movelist-grid.comic,#pz-moves-panel) .mx-acts{margin-left:0;width:100%;justify-content:flex-start}
  :is(#movelist-grid.comic,#pz-moves-panel) .mx-name{font-size:26px}
}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-acts .mbtn{width:auto;margin:0}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-step{white-space:nowrap}
:is(#movelist-grid.comic,#pz-moves-panel) .mx-sep{margin:0 5px;color:#7c1f17;font-weight:900}
/* the ⓘ and ⚙ buttons sit over the top-right corner of every screen · keep
   each screen's own header tags clear of them */
@media (min-width:700px){ .screen:not(#scr-profile) > header.bar{padding-right:200px} }
@media (min-width:1301px) and (max-width:1500px){ :is(#movelist-grid.comic,#pz-moves-panel) .mx-body{grid-template-columns:minmax(0,1fr) 330px} }
@media (max-height:820px) and (min-width:1301px){
  #movelist-grid.comic.detail{gap:10px;padding-top:8px}
  :is(#movelist-grid.comic,#pz-moves-panel) .mx-top{padding:6px 14px}
  :is(#movelist-grid.comic,#pz-moves-panel) .mx-top canvas{width:56px}
  :is(#movelist-grid.comic,#pz-moves-panel) .mx-name{font-size:28px}
  :is(#movelist-grid.comic,#pz-moves-panel) .mx-row{padding:3px 0}
  :is(#movelist-grid.comic,#pz-moves-panel) .mx-combo{margin-top:5px;padding:5px 7px}
}

/* ===================== FIGHTER SELECT · DARK COMIC =====================
   Same night colours, drawn like a comic: cream ink borders, hard black
   offset shadows, a faint halftone on the backdrop and comic lettering. */
#scr-select{background:
    radial-gradient(rgba(243,236,225,.06) 1.1px,transparent 1.4px) 0 0/7px 7px,
    radial-gradient(95% 62% at 50% 118%, rgba(150,70,22,.34), transparent 62%),
    radial-gradient(72% 52% at 12% -12%, rgba(28,64,128,.20), transparent 56%),
    radial-gradient(72% 52% at 88% -12%, rgba(130,28,64,.16), transparent 56%),
    linear-gradient(180deg, #0b0710, #08070a 55%, #0a0708)}
#scr-select .bar h2{font-family:var(--k-comic);font-weight:900;letter-spacing:.16em;color:#f7efd8;text-shadow:3px 3px 0 #000,0 0 22px rgba(232,176,75,.3)}
#scr-select .bar .back{border:3px solid #f3e7c8;border-radius:2px;box-shadow:3px 3px 0 #000;background:#17121a;color:#f7efd8}
#scr-select .fighter-card{border:3px solid #f3e7c8;border-radius:2px;box-shadow:7px 7px 0 #000;
  background:radial-gradient(rgba(243,236,225,.05) 1.1px,transparent 1.4px) 0 0/6px 6px,linear-gradient(180deg,rgba(26,19,28,.96),rgba(12,9,14,.98))}
#scr-select .fighter-card .portrait{border:3px solid #0a080b;border-radius:0;outline:2px solid rgba(243,236,225,.55)}
#scr-select .fighter-card .sname b{font-family:var(--k-comic);font-size:26px;font-weight:900;letter-spacing:.02em;text-shadow:2px 2px 0 #000}
#scr-select .grid .tile.char,#scr-select .grid .tile.rnd{border:3px solid #f3e7c8;border-radius:2px;box-shadow:5px 5px 0 #000;overflow:hidden}
#scr-select .grid .tile.char:hover,#scr-select .grid .tile.rnd:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #000;border-color:rgba(var(--acc-rgb,232,176,75),1)}
#scr-select .grid .tile.char.h1{border-color:var(--p1);box-shadow:0 0 0 3px var(--p1),7px 7px 0 #000;outline:none;transform:translate(-2px,-2px)}
#scr-select .grid .tile.char.h2{border-color:var(--p2);box-shadow:0 0 0 3px var(--p2),7px 7px 0 #000;outline:none}
#scr-select .grid .tile.char.h1.h2{box-shadow:0 0 0 3px var(--p1),0 0 0 6px var(--p2),7px 7px 0 #000}
#scr-select .grid .tile.char .cn{font-family:var(--k-comic);font-size:15px;font-weight:900;letter-spacing:.04em;color:#f7efd8;
  background:#0a080b;border-top:3px solid #f3e7c8;padding:5px 4px 2px}
#scr-select .grid .tile.char .cs{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;background:#0a080b}
#scr-select .selfoot{border-top:3px solid #f3e7c8;background:radial-gradient(rgba(243,236,225,.05) 1.1px,transparent 1.4px) 0 0/6px 6px,#0d0b10}
#scr-select .selfoot .hint{font-family:var(--k-comic);font-weight:700;letter-spacing:.04em}
#scr-select .selbtns .mbtn{font-family:var(--k-comic);font-weight:900;letter-spacing:.14em;color:#f7efd8;background:#17121a;
  border:3px solid #f3e7c8;border-radius:2px;box-shadow:4px 4px 0 #000}
#scr-select .selbtns .mbtn:hover:not(:disabled),#scr-select .selbtns .mbtn:focus{background:linear-gradient(180deg,#efc86d,#d99a38);color:#14120f;
  transform:translate(-1px,-1px);box-shadow:5px 5px 0 #000;outline:3px solid #fff;outline-offset:3px}
#scr-select .selbtns .mbtn#btn-fight{border:3px solid #f3e7c8;border-radius:2px;box-shadow:4px 4px 0 #000;font-family:var(--k-comic)}
#scr-select .selbtns .mbtn#btn-fight:focus{outline:3px solid #fff;outline-offset:3px}
#scr-select .selfoot .pad-hint{color:var(--gold);font-weight:900;margin-left:10px}

/* ===================== SQUAD PICKER · TILES THAT FIT =====================
   The tiles used to take their height from their width (aspect-ratio) while
   the grid sized each row from the content, so every row slid under the
   next and hid the names. The portrait now sets its own height and the tile
   is exactly portrait + name + style. */
#scr-squad #sq-grid{grid-auto-rows:max-content!important;align-items:start;gap:14px}
#scr-squad #sq-grid .tile.char,#scr-squad #sq-grid .tile.rnd{aspect-ratio:auto;min-height:0;height:auto;display:flex;flex-direction:column;overflow:hidden}
#scr-squad #sq-grid .tile.char canvas.face{flex:0 0 auto;width:100%;height:auto;aspect-ratio:16/11;min-height:0}
#scr-squad #sq-grid .tile.char .cn{padding:5px 4px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:3px solid #14120f}
/* upright phones carry body.portrait, whose old `.portrait canvas` rule
   floats every canvas · the squad portraits stay in the tile */
#scr-squad #sq-grid .tile.char canvas.face{position:static;inset:auto}
/* phones · the two team boards side by side on top, the grid under them */
@media (max-width:760px){
  #scr-squad .sq-body{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"b1 b2" "g g";gap:8px;padding:56px 8px 6px}
  #scr-squad #sq-board-1{grid-area:b1;max-height:170px;overflow-y:auto}
  #scr-squad #sq-board-2{grid-area:b2;max-height:170px;overflow-y:auto}
  #scr-squad #sq-grid{grid-area:g;overflow-y:auto;grid-template-columns:repeat(3,minmax(0,1fr))}
}
body.touch #scr-squad .sq-body{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"b1 b2" "g g";gap:8px}
body.touch #scr-squad #sq-board-1{grid-area:b1;max-height:170px;overflow-y:auto}
body.touch #scr-squad #sq-board-2{grid-area:b2;max-height:170px;overflow-y:auto}
body.touch #scr-squad #sq-grid{grid-area:g;overflow-y:auto}
@media (max-width:760px){
  #scr-squad .selfoot{height:auto;flex-wrap:wrap;padding:6px 8px;gap:6px}
  #scr-squad .selfoot .hint{display:none}
  #scr-squad .selfoot .selbtns{flex-wrap:wrap;justify-content:center;gap:6px;width:100%}
  #scr-squad .selfoot .selbtns .mbtn{padding:8px 10px;font-size:11px}
}

/* ===================== SQUAD SETUP · ROOM TO BREATHE ===================== */
#scr-squad-setup .online-body{max-width:min(1400px,96vw)!important;padding:84px 26px 24px!important}
#scr-squad-setup .online-body .panel.squad-setup-panel{grid-template-columns:230px 1fr;gap:26px 30px!important;padding:38px 46px!important}
#scr-squad-setup .squad-setup-panel h3{font-size:14px}
#scr-squad-setup .setup-choice{gap:14px!important}
#scr-squad-setup .setup-choice button{min-height:76px!important;font-size:14px!important}
#scr-squad-setup .setup-footer{grid-template-columns:1fr auto minmax(280px,1.3fr);gap:18px;margin-top:14px}
#scr-squad-setup .setup-random{min-height:76px;margin:0;padding:0 26px;font-family:var(--k-comic);font-weight:900;letter-spacing:.14em;color:#14120f;
  background:#fdf6e3;border:3px solid #14120f;border-radius:2px;box-shadow:4px 4px 0 rgba(20,18,15,.35)}
#scr-squad-setup .setup-random:hover,#scr-squad-setup .setup-random:focus{background:#14120f;color:#f7efd8;transform:translate(-1px,-1px)}
#scr-squad-setup .setup-next{min-height:76px!important}
@media (max-height:820px){
  #scr-squad-setup .online-body{padding-top:70px!important}
  #scr-squad-setup .online-body .panel.squad-setup-panel{gap:16px 26px!important;padding:24px 34px!important}
  #scr-squad-setup .setup-choice button,#scr-squad-setup .setup-random,#scr-squad-setup .setup-next{min-height:60px!important}
}
/* RELAY · TAG TEAM / NO TAG belongs to the RELAY tile: a shorter row tucked
   under GAME MODE, so the panel with CONTROL EVERY RELAY FIGHTER still fits
   a 900-tall window */
@media (min-width:761px) and (min-height:821px){
  #scr-squad-setup #sq-tag{margin-top:-12px}
  #scr-squad-setup #sq-tag button{min-height:48px!important}
}
@media (max-width:760px){
  #scr-squad-setup .online-body .panel.squad-setup-panel{grid-template-columns:1fr;padding:18px 14px!important;gap:12px!important}
  #scr-squad-setup .setup-footer{grid-template-columns:1fr}
  #scr-squad-setup .setup-choice button,#scr-squad-setup .setup-random,#scr-squad-setup .setup-next{min-height:56px!important}
}
@media (max-width:760px){
  #scr-squad-setup .online-body{padding:64px 10px 16px!important;max-width:100%!important;grid-template-columns:minmax(0,1fr)!important;display:grid!important}
  #scr-squad-setup .online-body .panel.squad-setup-panel{min-width:0;width:100%;box-sizing:border-box}
  #scr-squad-setup .setup-choice{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #scr-squad-setup .setup-choice button{white-space:normal;letter-spacing:.06em!important;font-size:12px!important;min-width:0}
}
@media (max-width:760px){ .online-body{grid-template-columns:minmax(0,1fr)!important} }

/* ===================== REPLAY CENTER · A COMIC GALLERY =====================
   A slim toolbar (favourites filter, clear all) over a grid of replay cards,
   the pager under them. The screen used to lay out sideways, so the two
   buttons filled a whole column and the cards ran off the right edge. */
#scr-replay{flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;padding:84px 0 20px!important;overflow-y:auto}
#scr-replay .rep-tools{flex:0 0 auto!important;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;
  width:min(1240px,94vw);height:auto!important;margin:0 0 14px!important;padding:0}
#scr-replay .rep-tools .mbtn{flex:0 0 auto;width:auto!important;height:auto!important;min-height:0!important;margin:0;padding:9px 16px;font-family:var(--k-comic);font-weight:900;
  font-size:12px;letter-spacing:.12em;color:var(--k-ink);background:#fdf6e3;border:3px solid var(--k-ink);border-radius:2px;box-shadow:3px 3px 0 rgba(20,18,15,.3)}
#scr-replay .rep-tools .mbtn.on{background:linear-gradient(180deg,#efc86d,#d99a38)}
#scr-replay .rep-tools .mbtn.rep-danger{color:#7c1f17}
#scr-replay .rep-tools .mbtn:hover,#scr-replay .rep-tools .mbtn:focus{background:var(--k-ink);color:#f7efd8}
#replay-list.comic{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;align-content:start;
  width:min(1240px,94vw)!important;flex:0 0 auto!important;padding:2px 6px 10px!important;overflow:visible}
#replay-list.comic .rep-hint{grid-column:1 / -1;text-align:center;font-family:var(--k-comic);font-weight:900;font-size:11px;letter-spacing:.16em;color:#3a3226}
#replay-list.comic .rep-card{display:flex;flex-direction:column;gap:6px;width:auto!important;height:auto!important;aspect-ratio:auto!important;padding:10px;
  background:var(--k-dots),#fdf6e3;border:3px solid var(--k-ink);border-radius:2px;box-shadow:5px 5px 0 rgba(20,18,15,.3);color:var(--k-ink);transition:transform .12s,box-shadow .12s}
#replay-list.comic .rep-card:hover,#replay-list.comic .rep-card:focus{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(20,18,15,.35);outline:none}
#replay-list.comic .rep-card:focus{box-shadow:8px 8px 0 rgba(20,18,15,.35),0 0 0 4px #c8402f}
#replay-list.comic .rep-card.rep-faved{background:var(--k-dots),linear-gradient(180deg,#fbe7b4,#f3d58e)}
#replay-list.comic .rep-thumb{width:100%;height:auto;aspect-ratio:16/10;border:3px solid var(--k-ink);border-radius:0;position:static}
#replay-list.comic .rep-title{font-family:var(--k-comic);font-size:17px;font-weight:900;color:var(--k-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#replay-list.comic .rep-title .rep-vs{color:#c8402f;font-size:13px}
#replay-list.comic .rep-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#replay-list.comic .rep-mode{color:#f7efd8;background:var(--k-ink);border:0;padding:3px 8px}
#replay-list.comic .rep-faved-tag{color:var(--k-ink);background:linear-gradient(180deg,#efc86d,#d99a38)}
#replay-list.comic .rep-time{color:#5c513c;font-weight:800;font-size:11px;margin-left:auto}
#replay-list.comic .rep-fav{position:absolute;top:16px;right:16px;z-index:2;width:34px;height:34px;padding:0;font-size:17px;color:var(--k-ink);
  background:#fdf6e3;border:3px solid var(--k-ink);border-radius:2px;box-shadow:2px 2px 0 rgba(20,18,15,.35);cursor:pointer}
#replay-list.comic .rep-fav.on{background:linear-gradient(180deg,#efc86d,#d99a38)}
#replay-list.comic .sp-empty{grid-column:1 / -1}
#scr-replay .rep-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
#scr-replay .rep-pager[hidden]{display:none}
#scr-replay .rep-pager .mbtn{width:auto;font-family:var(--k-comic);font-weight:900;letter-spacing:.12em;color:var(--k-ink);background:#fdf6e3;border:3px solid var(--k-ink);border-radius:2px;box-shadow:3px 3px 0 rgba(20,18,15,.3)}
#scr-replay .rep-page{font-family:var(--k-comic);font-weight:900;color:var(--k-ink)}
@media (max-width:640px){
  #replay-list.comic{grid-template-columns:1fr}
  #scr-replay .rep-tools{flex-wrap:wrap;justify-content:center}
}

/* ===================== PAUSE · THE COMIC PANEL =====================
   The pause menu is drawn like the rest of the game: a paper panel in ink
   over the dimmed match, comic buttons in two columns, RESUME on top. */
#scr-pause{background:rgba(4,3,5,.74)}
#scr-pause .modal.comic-pause{display:grid;grid-template-columns:1fr;gap:9px;width:min(420px,92vw);padding:26px 30px 30px;
  background:var(--k-dots),linear-gradient(180deg,#fdf6e3,#f1e3c2);border:4px solid var(--k-ink);border-radius:2px;box-shadow:10px 10px 0 rgba(0,0,0,.55);color:var(--k-ink)}
#scr-pause .modal.comic-pause[hidden]{display:none}
#scr-pause .comic-pause:before,#scr-pause .comic-pause:after{border-color:var(--k-ink)}
#scr-pause .comic-pause h3{grid-column:1 / -1;margin:0 0 8px;text-align:center;font-family:var(--k-comic);font-size:34px;font-weight:900;letter-spacing:.22em;
  color:var(--k-ink);text-shadow:3px 3px 0 rgba(20,18,15,.15)}
#scr-pause .comic-pause .mbtn{width:100%;margin:0;padding:12px 10px;font-family:var(--k-comic);font-weight:900;font-size:13px;letter-spacing:.14em;
  color:var(--k-ink);background:#fdf6e3;border:3px solid var(--k-ink);border-radius:2px;box-shadow:3px 3px 0 rgba(20,18,15,.3);text-shadow:none}
#scr-pause .comic-pause .mbtn:hover:not(:disabled),#scr-pause .comic-pause .mbtn:focus{background:var(--k-ink);color:#f7efd8;transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 rgba(20,18,15,.35);outline:none}
#scr-pause .comic-pause #pz-resume{grid-column:1 / -1;font-size:16px;padding:14px;background:linear-gradient(180deg,#efc86d,#d99a38)}
#scr-pause .comic-pause .mbtn.lab{background:linear-gradient(180deg,#fbe7b4,#f0d088)}
#scr-pause .comic-pause .mbtn.swap{background:#d6efe3}
#scr-pause .comic-pause [data-go="menu"]{color:#7c1f17}
#scr-pause .comic-pause .mbtn.lab:focus,#scr-pause .comic-pause .mbtn.swap:focus,#scr-pause .comic-pause #pz-resume:focus{background:var(--k-ink);color:#f7efd8}
@media (max-width:520px){ #scr-pause .modal.comic-pause{grid-template-columns:1fr;padding:20px 16px} }

/* PAUSE · MOVELIST panel · the six move cards and the combos, read-only */
#scr-pause .pz-moves{display:flex;flex-direction:column;gap:12px;width:min(1500px,96vw);max-height:92vh;overflow-y:auto;padding:14px 16px 18px;
  background:var(--k-dots),#f7ecd2;border:4px solid var(--k-ink);border-radius:2px;box-shadow:10px 10px 0 rgba(0,0,0,.55)}
#scr-pause .pz-moves[hidden]{display:none}
#scr-pause .pz-moves-head{display:flex;align-items:center;gap:14px}
#scr-pause .pz-moves-head b{font-family:var(--k-comic);font-size:24px;font-weight:900;color:var(--k-ink)}
#scr-pause .pz-moves-tabs{display:flex;gap:6px}
#scr-pause .pz-mtab,#scr-pause .pz-mclose{font-family:var(--k-comic);font-weight:900;letter-spacing:.12em;padding:7px 14px;color:var(--k-ink);background:#fdf6e3;
  border:3px solid var(--k-ink);border-radius:2px;box-shadow:2px 2px 0 rgba(20,18,15,.3);cursor:pointer}
#scr-pause .pz-mtab.on{background:linear-gradient(180deg,#efc86d,#d99a38)}
#scr-pause .pz-mclose{margin-left:auto}
#scr-pause .pz-mtab:focus,#scr-pause .pz-mclose:focus,#scr-pause .pz-mtab:hover,#scr-pause .pz-mclose:hover{background:var(--k-ink);color:#f7efd8;outline:none}
#scr-pause .pz-moves-body{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:start}
#pz-moves-panel .mx-go,#pz-moves-panel .mx-cgo{display:none}
#pz-moves-panel .mx-row{grid-template-columns:auto minmax(0,1fr)}
#pz-moves-panel .mx-combo{pointer-events:none;grid-template-columns:62px minmax(0,1fr) auto}
#pz-moves-panel .mx-lab{position:static}
@media (max-width:1100px){ #scr-pause .pz-moves-body{grid-template-columns:1fr} }

/* ===================== WIKI · THE BOOKS ON A FIGHTER'S PAGE ===================== */
.wk-book{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.wk-facts{display:flex;flex-wrap:wrap;gap:10px}
.wk-fact{display:flex;flex-direction:column;gap:2px;padding:8px 14px;background:var(--k-dots),#fdf6e3;border:3px solid var(--k-ink);box-shadow:3px 3px 0 rgba(20,18,15,.28)}
.wk-fact span{font-size:10px;font-weight:900;letter-spacing:.2em;color:#7c1f17}
.wk-fact b{font-family:var(--k-comic);font-size:15px;color:var(--k-ink)}
.wk-sec{background:var(--k-dots),#fdf6e3;border:3px solid var(--k-ink);box-shadow:4px 4px 0 rgba(20,18,15,.28);padding:12px 16px 14px}
.wk-sec-h{display:inline-block;margin:0 0 10px;padding:3px 10px;font-family:var(--k-comic);font-size:13px;font-weight:900;letter-spacing:.16em;color:#f7efd8;background:var(--k-ink)}
.wk-quote{margin:0 0 10px;padding:8px 12px 8px 16px;border-left:5px solid #c8402f;background:#fff8e6;font-family:var(--k-comic);font-size:16px;font-weight:700;line-height:1.5;color:var(--k-ink)}
.wk-quote cite{display:block;margin-top:4px;font-style:normal;font-family:inherit;font-size:10.5px;font-weight:900;letter-spacing:.18em;color:#7c1f17}
.wk-people{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wk-pchips{display:flex;flex-wrap:wrap;gap:8px}
.wk-pchip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-family:var(--k-comic);font-weight:900;font-size:13px;color:var(--k-ink);
  background:#fdf6e3;border:2px solid var(--k-ink);border-radius:2px;box-shadow:2px 2px 0 rgba(20,18,15,.3);cursor:pointer}
.wk-pchip b{font-size:11px;color:#7c1f17}
.wk-pchip:hover:not(:disabled),.wk-pchip:focus{background:var(--k-ink);color:#f7efd8}
.wk-pchip:hover b,.wk-pchip:focus b{color:#efc86d}
.wk-tl{display:flex;flex-direction:column;gap:10px}
.wk-sea-head{margin:8px 0 2px;font-family:var(--k-comic);font-size:15px;font-weight:900;letter-spacing:.14em;color:#7c1f17;border-bottom:3px double var(--k-ink);padding-bottom:4px}
.wk-ch{padding:8px 12px;background:#fff8e6;border:2px solid var(--k-ink);box-shadow:2px 2px 0 rgba(20,18,15,.22)}
.wk-ch-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wk-ch-k{font-size:10.5px;font-weight:900;letter-spacing:.16em;color:#f7efd8;background:#7c1f17;padding:2px 7px}
.wk-ch-t{font-family:var(--k-comic);font-size:16px;font-weight:900;color:var(--k-ink)}
.wk-ch-what{margin:6px 0 2px;font-size:14px;line-height:1.55;color:#2a2418}
.wk-fight{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin-top:6px;padding:6px 8px;border-left:5px solid #2f7a52;background:rgba(47,122,82,.07)}
.wk-fight.lost{border-left-color:#c8402f;background:rgba(200,64,47,.07)}
.wk-res{grid-row:1 / span 2;align-self:start;font-size:10.5px;font-weight:900;letter-spacing:.14em;padding:2px 6px;color:#f7efd8;background:#2f7a52}
.wk-fight.lost .wk-res{background:#c8402f}
.wk-fvs{font-family:var(--k-comic);font-weight:900;font-size:14px;color:var(--k-ink)}
.wk-fvs i{font-style:normal;font-weight:700;color:#5c513c}
.wk-fnote{font-size:13px;line-height:1.5;color:#2a2418}
.wk-later{margin-top:10px;font-family:var(--k-comic);font-weight:900;font-size:13px;color:#7c1f17}
@media (max-width:640px){ .wk-people{grid-template-columns:1fr} .wk-quote{font-size:14px} }

/* ===================== MOVELIST PAGE (owner, 2026-10-05) =====================
   The page wears the fighter's main clothes colour (--acc-rgb, set from the
   fighter's body colour), there is no COMBO LAB column, and the six cards fill
   the screen: STANDING, FORWARD, BACK and SPECIALS across the top, AIR (two
   columns) and ULTRA · GRAB · SUPER across the bottom. Rows grow with the
   screen, so a tall screen gets bigger text instead of an empty bottom. */
#scr-movelist.ml-detail{background:radial-gradient(rgba(20,18,15,.16) 1.1px,transparent 1.3px) 0 0/8px 8px,
    linear-gradient(180deg,rgba(var(--acc-rgb,232,176,75),1),rgba(var(--acc-rgb,232,176,75),.72)),#14120f}
#scr-movelist.ml-detail > .bar{background:rgba(20,18,15,.9)}
#scr-movelist.ml-detail #movelist-grid.comic.detail{background:none;border-color:transparent;box-shadow:none;
  width:min(2400px,97vw);padding:10px 4px 16px;gap:14px}
#movelist-grid.comic.detail .mx-body{display:flex;flex-direction:column;align-items:stretch;flex:1;min-height:0;width:100%}
#movelist-grid.comic.detail .mx-moves{flex:1;min-height:0}
@media (min-width:1001px){
  #movelist-grid.comic.detail .mx-moves{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:minmax(min-content,4fr) minmax(min-content,3fr);
    grid-template-areas:"st fw bk sp" "air air big big";gap:14px;align-items:stretch}
  #movelist-grid.comic.detail .mx-standing{grid-area:st}
  #movelist-grid.comic.detail .mx-forward{grid-area:fw}
  #movelist-grid.comic.detail .mx-back{grid-area:bk}
  #movelist-grid.comic.detail .mx-specials{grid-area:sp}
  #movelist-grid.comic.detail .mx-air{grid-area:air}
  #movelist-grid.comic.detail .mx-big{grid-area:big}
  #movelist-grid.comic.detail .mx-card{display:flex;flex-direction:column;min-height:0;padding:10px 14px 8px}
  #movelist-grid.comic.detail .mx-card .mx-row{flex:1;padding:4px 0}
  /* AIR: six moves in two columns of three */
  #movelist-grid.comic.detail .mx-air{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto repeat(3,1fr);grid-auto-flow:column;column-gap:22px}
  #movelist-grid.comic.detail .mx-air h4{grid-row:1;grid-column:1 / -1;justify-self:start}
  #movelist-grid.comic.detail .mx-air .mx-row:nth-of-type(4){border-top:0}
  #movelist-grid.comic.detail .mx-mv b{font-size:clamp(14px,calc(1.5vh + 6px),30px);white-space:normal;line-height:1.15}
  #movelist-grid.comic.detail .mx-mv i{font-size:clamp(10.5px,calc(.75vh + 5px),17px);white-space:normal;margin-top:3px}
  #movelist-grid.comic.detail .mx-key{font-size:clamp(12px,calc(1vh + 6px),21px)}
  #movelist-grid.comic.detail .mx-key kbd{font-size:clamp(12px,calc(1vh + 6px),21px);min-width:clamp(22px,2.9vh,40px);
    background:linear-gradient(180deg,rgba(var(--key-rgb,232,176,75),.95),rgba(var(--key-rgb,232,176,75),.62))}
  #movelist-grid.comic.detail .mx-card h4{font-size:clamp(13px,calc(.9vh + 7px),22px)}
  #movelist-grid.comic.detail .mx-go{width:clamp(28px,3.8vh,52px);height:clamp(28px,3.8vh,52px);font-size:clamp(11px,1.5vh,20px)}
}

/* ===================== TRAINING SETUP · THE COMIC PANEL =====================
   The training setup wears the same paper-and-ink panel as the pause menu:
   cream paper, halftone dots, ink borders, comic buttons. The YOU slot sits
   on gold and the CPU slot on jade so the two sides read at a glance. */
#scr-train-swap .modal.comic-tswap{display:flex;flex-direction:column;gap:9px;width:min(420px,92vw);padding:26px 30px 30px;
  background:var(--k-dots),linear-gradient(180deg,#fdf6e3,#f1e3c2);border:4px solid var(--k-ink);border-radius:2px;
  box-shadow:10px 10px 0 rgba(0,0,0,.55);color:var(--k-ink);text-align:center}
#scr-train-swap .modal.comic-tswap[hidden]{display:none}
#scr-train-swap .comic-tswap h3{margin:0 0 8px;font-family:var(--k-comic);font-size:30px;font-weight:900;letter-spacing:.18em;
  color:var(--k-ink);text-shadow:3px 3px 0 rgba(20,18,15,.15)}
#scr-train-swap .comic-tswap .mbtn{width:100%;margin:0;padding:12px 10px;font-family:var(--k-comic);font-weight:900;font-size:13px;
  letter-spacing:.14em;color:var(--k-ink);background:#fdf6e3;border:3px solid var(--k-ink);border-radius:2px;
  box-shadow:3px 3px 0 rgba(20,18,15,.3);text-shadow:none}
#scr-train-swap .comic-tswap .mbtn:hover:not(:disabled),#scr-train-swap .comic-tswap .mbtn:focus{background:var(--k-ink);
  color:#f7efd8;transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(20,18,15,.35);outline:none}
#scr-train-swap .comic-tswap .ts-slots{display:flex;gap:10px;width:100%}
#scr-train-swap .comic-tswap .ts-slot{flex:1;display:flex;flex-direction:column;gap:5px;align-items:center}
#scr-train-swap .comic-tswap #ts-slot0{background:linear-gradient(180deg,#efc86d,#d99a38)}
#scr-train-swap .comic-tswap #ts-slot1{background:#d6efe3}
#scr-train-swap .comic-tswap .ts-slot small{font-size:10px;font-weight:900;letter-spacing:2px;opacity:.7}
#scr-train-swap .comic-tswap .ts-slot .ts-name{font-size:17px;font-weight:900}
#scr-train-swap .comic-tswap .ts-hint{font-size:10px;font-weight:900;letter-spacing:2px;text-align:center;margin-top:2px;color:#4a4234}

/* ============================================================
   KORO'S CAMERA (js/director.js) · a narrated line is a film shot:
   black bars top and bottom, the line as a subtitle in the bottom bar,
   the people acting it out on the map between them. The bars slide in
   for a shot and out for a speech line (the comic box comes back).
   ============================================================ */
#scr-dialogue::before,#scr-dialogue::after{content:'';position:absolute;left:0;right:0;height:0;background:#060508;
  pointer-events:none;z-index:1;transition:height .35s ease}
#scr-dialogue::before{top:0}
#scr-dialogue::after{bottom:0}
#scr-dialogue.cine::before{height:8vh}
#scr-dialogue.cine::after{height:19vh}
#scr-dialogue .dlg-stage{z-index:2}
#scr-dialogue.cine .dlg-box{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(1240px,94vw);height:19vh;
  background:none !important;border:0 !important;box-shadow:none !important;padding:2.2vh 150px 0 !important;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;color:#f4ead2}
#scr-dialogue.cine .dlg-box::before,#scr-dialogue.cine .dlg-box::after{display:none !important}
#scr-dialogue.cine .dlg-speaker{position:static;transform:none;background:none !important;border:0 !important;box-shadow:none;
  padding:0;margin:0 0 .9vh;font-size:11px;letter-spacing:.34em;color:#e8b04b}
#scr-dialogue.cine .dlg-speaker .narr,#scr-dialogue.cine .dlg-speaker span{color:#e8b04b !important}
#scr-dialogue.cine .dlg-text{color:#f4ead2;text-align:center;font-size:clamp(15px,2.4vh,23px);line-height:1.42;min-height:0;
  font-weight:700;text-shadow:0 2px 0 #000;max-width:1000px}
#scr-dialogue.cine .dlg-hint{position:absolute;left:0;bottom:2.2vh;width:140px;text-align:left;color:rgba(244,234,210,.38);
  font-size:9.5px;letter-spacing:.16em;line-height:1.5}
#scr-dialogue.cine .dlg-skips{position:absolute;right:0;top:2.2vh;display:flex;flex-direction:column;gap:8px;margin:0}
#scr-dialogue.cine .dlg-skip{background:rgba(244,234,210,.06);color:#f4ead2;border:2px solid rgba(244,234,210,.5);box-shadow:none;
  font-size:10.5px;padding:5px 10px}
#scr-dialogue.cine .dlg-skip:hover{background:#e8b04b;color:#14120f;border-color:#e8b04b}
/* the shot has played out: a NEXT mark under the line says it waits for you */
#scr-dialogue.cine .dlg-text::after{content:'';display:inline-block;margin-left:10px;width:0;height:0;vertical-align:middle;
  border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid #e8b04b;opacity:0;transition:opacity .2s}
#scr-dialogue.cine.cine-ready .dlg-text::after{opacity:1;animation:cineNext 1s ease-in-out infinite}
@keyframes cineNext{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
/* a chapter's title card has no subtitle */
#scr-dialogue.cine-card .dlg-text,#scr-dialogue.cine-card .dlg-speaker{visibility:hidden}
#scr-dialogue.cine .dlg-stamp{opacity:0}
/* the people a speaker names who are not on screen, in panels over the box */
#scr-dialogue .dlg-mention{position:absolute;left:50%;bottom:calc(9vh + 232px);transform:translateX(-50%);display:flex;gap:16px;
  pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;z-index:3}
#scr-dialogue .dlg-mention.on{opacity:1;transform:translateX(-50%) translateY(-4px)}
#scr-dialogue.cine .dlg-mention{opacity:0}
#scr-dialogue .dm-card{background:var(--k-paper);border:3px solid var(--k-ink);box-shadow:5px 5px 0 rgba(20,18,15,.32);
  padding:6px 6px 4px;transform:rotate(-2deg);text-align:center}
#scr-dialogue .dm-card:nth-child(2){transform:rotate(2deg)}
#scr-dialogue .dm-card canvas{display:block;width:104px;height:118px;background:var(--k-sky);border:2px solid var(--k-ink)}
#scr-dialogue .dm-name{font-family:var(--k-comic);font-weight:900;font-size:13px;color:var(--k-ink);margin-top:4px;letter-spacing:.06em}
@media (max-height:560px){
  #scr-dialogue.cine::after{height:24vh}
  #scr-dialogue.cine .dlg-box{height:24vh;padding:1.6vh 120px 0 !important}
  #scr-dialogue.cine .dlg-text{font-size:14px}
  #scr-dialogue .dlg-mention{bottom:calc(4vh + 170px)}
  #scr-dialogue .dm-card canvas{width:70px;height:80px}
}
@media (max-width:640px) and (min-height:561px){
  #scr-dialogue.cine .dlg-box{padding:1.8vh 12px 0 !important;width:100vw}
  #scr-dialogue.cine .dlg-skips{top:auto;bottom:1.4vh;right:12px;flex-direction:row}
  #scr-dialogue.cine .dlg-hint{display:none}
  #scr-dialogue .dlg-mention{bottom:auto;top:calc(130px + 34vw + 40px)}
}
#scr-dialogue.cine .dlg-speaker{opacity:1;visibility:visible;font-weight:900;text-shadow:0 1px 0 #000}
#scr-dialogue.cine.cine-long .dlg-text{font-size:clamp(14px,2.1vh,20px);line-height:1.36}
#scr-dialogue.cine.cine-xlong .dlg-text{font-size:clamp(13px,1.85vh,18px);line-height:1.32}
#scr-dialogue.cine .dlg-box.narr .dlg-speaker span.narr,#scr-dialogue.cine .dlg-box .dlg-speaker span{color:#e8b04b !important}
/* EVERYONE IN THE TALK (owner, 2026-10-17: "just put everybody thats a part of
   the conversation, and light up whoever is speaking") · a talk of three or more
   speakers (story.js StoryDlg.castFor): a card for each, the road's side on the
   left and the rest on the right, in the room the two big cards use. The one
   talking is lit and lifted, with a gold name tag; the rest dim. */
#scr-dialogue .dlg-cast{position:absolute;bottom:15vh;width:calc(var(--bw) + 24px);display:flex;flex-wrap:wrap-reverse;align-items:flex-end;gap:12px 10px;z-index:1}
#scr-dialogue .dlg-cast.left{left:var(--bl);justify-content:flex-start}
#scr-dialogue .dlg-cast.right{right:var(--bl);justify-content:flex-end}
#scr-dialogue .dlg-cast .dlg-bust.mini{position:relative;left:auto;right:auto;bottom:auto;width:calc((100% - 10px) / 2);transform:none}
#scr-dialogue .dlg-cast[data-n="1"] .dlg-bust.mini{width:72%}
#scr-dialogue .dlg-cast[data-n="5"] .dlg-bust.mini,#scr-dialogue .dlg-cast[data-n="6"] .dlg-bust.mini{width:calc((100% - 20px) / 3)}
#scr-dialogue .dlg-cast .dlg-bust.mini.talk{transform:translateY(-8px);z-index:1}
#scr-dialogue .dlg-cast .dlg-bust.mini canvas{border-width:2px;box-shadow:4px 4px 0 rgba(20,18,15,.3)}
#scr-dialogue .dlg-cast .dlg-bust.mini .dlg-name{font-size:13px;padding:3px 8px;margin-top:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#scr-dialogue .dlg-cast .dlg-bust.mini.talk .dlg-name{background:#e8b04b}
#scr-dialogue .dlg-cast .dlg-bust.mini.talk .dlg-name b{color:var(--k-ink)}
@media (max-height:560px){
  #scr-dialogue .dlg-cast{width:calc(min(150px,17vw) + 16px);bottom:calc(4vh + 44px)}
  #scr-dialogue .dlg-cast.left{left:2vw}
  #scr-dialogue .dlg-cast.right{right:2vw}
  #scr-dialogue .dlg-cast .dlg-bust.mini .dlg-name{font-size:10px;padding:2px 5px;margin-top:4px}
}
@media (max-width:640px) and (min-height:561px){
  #scr-dialogue .dlg-cast{width:44vw;bottom:auto;top:calc(130px + env(safe-area-inset-top,0px));flex-wrap:wrap}
  #scr-dialogue .dlg-cast.left{left:3vw}
  #scr-dialogue .dlg-cast.right{right:3vw}
}