/* ============================================================
   COMIC SKIN · ONLINE ROOMS, LOGIN, SQUAD, YOU + PROFILE
   The same cream-paper + black-ink language as the wiki/story
   tiles and NEXT FIGHT banners, so no screen keeps the old
   dark-glass look. Scoped per screen so the fight HUD and the
   rest of the game stay untouched.
   ============================================================ */
#scr-login.comic,#scr-online.comic,#scr-squad-setup.comic,
#scr-you.comic,#scr-profile.comic,#scr-squad.comic{
  background:
    radial-gradient(rgba(20,18,15,.10) 1.1px,transparent 1.3px) 0 0/8px 8px,
    linear-gradient(180deg,#f7efd8,#e9ddbe);
}
#scr-login.comic .modal,
#scr-online.comic .panel,
#scr-squad-setup.comic .panel,
#scr-you.comic .panel,
#scr-profile.comic .profile-card,
#scr-profile.comic .profile-stats > div,
#scr-profile.comic .profile-fav,
#scr-profile.comic .profile-ach,
#scr-profile.comic .profile-friends,
#scr-profile.comic .pf-record,
#scr-profile.comic .pf-friends-list,
#scr-squad.comic .fighter-card,
#scr-squad.comic .sq-syn{
  background:radial-gradient(rgba(20,18,15,.13) 1.1px,transparent 1.3px) 0 0/6px 6px,
    linear-gradient(180deg,#fdf6e3,#f0e3c4);
  border:3px solid #14120f;border-radius:2px;
  box-shadow:5px 5px 0 rgba(20,18,15,.3);
  color:#14120f;
}
#scr-login.comic .modal h3,
#scr-online.comic h2,#scr-squad-setup.comic h2,#scr-you.comic h2,
#scr-profile.comic h2,#scr-squad.comic h2,
#scr-online.comic .ed-lbl,
#scr-squad-setup.comic h3,
#scr-you.comic .ed-lbl{
  font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;
  color:#14120f;text-shadow:1px 1px 0 rgba(255,255,255,.75);
  letter-spacing:.14em;
}
#scr-online.comic .bar,#scr-squad-setup.comic .bar,#scr-you.comic .bar,
#scr-profile.comic .bar,#scr-squad.comic .bar{background:transparent;border-bottom:3px double #14120f}
#scr-online.comic .mode-tag,#scr-squad-setup.comic .mode-tag,#scr-you.comic .mode-tag,
#scr-profile.comic .mode-tag,#scr-squad.comic .mode-tag{
  color:#f7efd8;background:#14120f;border:2px solid #14120f;border-radius:1px;
  font-weight:900;box-shadow:2px 2px 0 rgba(20,18,15,.3);
}
#scr-online.comic .back,#scr-squad-setup.comic .back,#scr-you.comic .back,
#scr-profile.comic .back,#scr-squad.comic .back{
  border:2px solid #14120f;border-radius:1px;color:#14120f;opacity:1;
  background:#fdf6e3;box-shadow:2px 2px 0 rgba(20,18,15,.3);font-weight:900;
}
#scr-online.comic .back:hover,#scr-squad-setup.comic .back:hover,
#scr-you.comic .back:hover,#scr-profile.comic .back:hover,
#scr-squad.comic .back:hover{background:#14120f;color:#f7efd8}
#scr-login.comic .modal .mbtn,
#scr-online.comic .mbtn,
#scr-squad-setup.comic .mbtn,
#scr-you.comic .mbtn,
#scr-profile.comic .mbtn,
#scr-squad.comic .mbtn{
  font-family:'Comic Sans MS','Comic Neue',cursive;font-weight:900;
  border:3px solid #14120f;border-radius:2px;
  box-shadow:3px 3px 0 rgba(20,18,15,.25);color:#14120f;
  background:linear-gradient(180deg,#fdf6e3,#f0e3c4);
}
#scr-login.comic .modal .mbtn:not(.ghost),
#scr-online.comic .mbtn:not(.ghost),
#scr-squad-setup.comic .mbtn:not(.ghost),
#scr-you.comic .mbtn:not(.ghost),
#scr-profile.comic .mbtn:not(.ghost),
#scr-squad.comic .mbtn:not(.ghost){
  background:linear-gradient(180deg,#efc86d,#d99a38);
}
#scr-login.comic .modal .mbtn:hover:not(:disabled),
#scr-online.comic .mbtn:hover:not(:disabled),
#scr-squad-setup.comic .mbtn:hover:not(:disabled),
#scr-you.comic .mbtn:hover:not(:disabled),
#scr-profile.comic .mbtn:hover:not(:disabled),
#scr-squad.comic .mbtn:hover:not(:disabled){
  background:#14120f;color:#f7efd8;transform:translateY(-2px);
  box-shadow:5px 5px 0 rgba(20,18,15,.35);
}
#scr-online.comic .mbtn:disabled,#scr-squad-setup.comic .mbtn:disabled,
#scr-you.comic .mbtn:disabled,#scr-profile.comic .mbtn:disabled,
#scr-squad.comic .mbtn:disabled{opacity:.35}
#scr-online.comic .net-rank{
  font-family:'Comic Sans MS','Comic Neue',cursive;font-size:12.5px;font-weight:900;
  letter-spacing:.16em;color:#14120f;background:#fffaf0;
  border:2px solid #14120f;border-radius:1px;box-shadow:3px 3px 0 rgba(20,18,15,.25);
  padding:7px 18px;text-transform:uppercase;margin:16px auto 0;
}
#scr-online.comic .net-rank b{color:#7c1f17}
#scr-online.comic .net-rank i{color:#3a3226;font-style:italic}
#scr-online.comic .roomcode{
  font-family:'Comic Sans MS','Comic Neue',cursive;color:#14120f;
  text-shadow:2px 2px 0 rgba(255,255,255,.65);
  letter-spacing:.3em;text-indent:.3em;text-align:center;font-size:36px;font-weight:900;
  background:radial-gradient(rgba(20,18,15,.12) 1px,transparent 1.2px) 0 0/6px 6px,#fffaf0;
  border:3px solid #14120f;border-radius:2px;box-shadow:4px 4px 0 rgba(20,18,15,.25);
  padding:12px 8px;
}
#scr-online.comic .roomstate,#scr-online.comic .roomfighter{
  color:#3a3226;font-style:italic;font-size:12.5px;letter-spacing:.06em;
}
#scr-online.comic .roomplayers{color:#14120f}
#scr-online.comic .roomplayers > div{
  background:radial-gradient(rgba(20,18,15,.1) 1px,transparent 1.2px) 0 0/6px 6px,#fffaf0;
  border:2px solid #14120f;border-radius:1px;padding:8px 10px;font-weight:900;
  box-shadow:2px 2px 0 rgba(20,18,15,.22);
}
#scr-online.comic .joinrow input,#scr-online.comic #rm-code,
#scr-squad-setup.comic input,#scr-you.comic .youname,
#scr-profile.comic .profile-name,#scr-profile.comic .profile-discord{
  background:#fffaf0;color:#14120f;border:2px solid #14120f;border-radius:1px;
  font-family:'Comic Sans MS','Comic Neue',cursive;font-weight:700;
}
#scr-online.comic .joinrow input:focus,#scr-online.comic #rm-code:focus,
#scr-squad-setup.comic input:focus,#scr-you.comic .youname:focus,
#scr-profile.comic .profile-name:focus,#scr-profile.comic .profile-discord:focus{
  outline:none;box-shadow:0 0 0 3px rgba(232,176,75,.8);
}
#scr-you.comic .you-style,#scr-you.comic .you-code{color:#14120f}
#scr-you.comic .you-code b{color:#7c1f17}
#scr-squad-setup.comic .setup-choice button{
  background:radial-gradient(rgba(20,18,15,.12) 1px,transparent 1.2px) 0 0/6px 6px,#fdf6e3;
  border:2px solid #14120f;border-radius:1px;color:#14120f;font-weight:900;
  font-family:'Comic Sans MS','Comic Neue',cursive;
  box-shadow:3px 3px 0 rgba(20,18,15,.22);
}
#scr-squad-setup.comic .setup-choice button.on{
  background:linear-gradient(180deg,#efc86d,#d99a38);color:#14120f;
  border-color:#14120f;box-shadow:3px 3px 0 rgba(20,18,15,.3),0 0 0 2px rgba(232,176,75,.5);
}
#scr-squad-setup.comic .setup-summary{
  font-family:'Comic Sans MS','Comic Neue',cursive;font-weight:900;color:#14120f;
  background:#fdf6e3;border:2px solid #14120f;border-radius:1px;
  box-shadow:3px 3px 0 rgba(20,18,15,.25);padding:12px 16px;letter-spacing:.1em;
}
#scr-profile.comic .profile-rank,#scr-profile.comic .pf-ranked{
  color:#14120f;font-weight:900;letter-spacing:.14em;
}
#scr-profile.comic .profile-rankbar{background:#fff;border:2px solid #14120f}
#scr-profile.comic .profile-rankbar i{background:linear-gradient(90deg,#d99a38,#efc86d)}
#scr-profile.comic .pf-stamp{color:#14120f;border:2px solid #14120f;background:#fdf6e3;box-shadow:2px 2px 0 rgba(20,18,15,.3)}
#scr-profile.comic .pstat{
  background:#fdf6e3;border:2px solid #14120f;border-radius:1px;
  box-shadow:2px 2px 0 rgba(20,18,15,.22);color:#14120f;
}
#scr-profile.comic .pstat .pv{color:#7c1f17}
#scr-profile.comic .profile-friends .pf-record,#scr-profile.comic .profile-friends .pf-friends-list{color:#14120f}
#scr-profile.comic .pf-friends-list > div{
  background:#fffaf0;border:2px solid #14120f;border-radius:1px;
  box-shadow:2px 2px 0 rgba(20,18,15,.22);padding:8px 10px;font-weight:900;
}
#scr-squad.comic .sq-board,#scr-squad.comic .sq-syn{
  background:radial-gradient(rgba(20,18,15,.13) 1.1px,transparent 1.3px) 0 0/6px 6px,
    linear-gradient(180deg,#fdf6e3,#f0e3c4);
  border:3px solid #14120f;border-radius:2px;box-shadow:5px 5px 0 rgba(20,18,15,.3);
  color:#14120f;
}
#scr-squad.comic .hint{color:#3a3226}
#scr-squad.comic .selfoot{background:transparent;border-top:3px double #14120f}
#scr-squad.comic #sq-hint{color:#3a3226}
#scr-login.comic .modal-note,#scr-login.comic .lg-err{color:#3a3226}
#scr-login.comic .fld span{color:#3a3226;font-weight:900}
#scr-login.comic .fld input{
  background:#fffaf0;color:#14120f;border:2px solid #14120f;border-radius:1px;
  font-family:'Comic Sans MS','Comic Neue',cursive;font-weight:700;
}
#scr-login.comic .fld input:focus{outline:none;box-shadow:0 0 0 3px rgba(232,176,75,.8)}
#scr-profile.comic .profile-ach,#scr-profile.comic .profile-fav,#scr-profile.comic .profile-friends{
  color:#14120f;
}
#scr-profile.comic .profile-ach b,#scr-profile.comic .profile-fav b,
#scr-profile.comic .profile-friends b{color:#14120f}
#scr-profile.comic .ed-lbl{font-family:'Comic Sans MS','Comic Neue',cursive;color:#14120f}

/* ============================================================
   COMIC SKIN · RESULT (win) + STORY END (editor unlock)
   The same cream-paper + black-ink language. The result panel
   becomes a comic cover: torn-paper sheet, ink rules, halftone,
   comic-font buttons. The story end wears the arc-complete splash
   with the CHARACTER CREATOR stamp as a rubber burst.
   ============================================================ */
#scr-result.comic{
  background:
    radial-gradient(rgba(20,18,15,.10) 1.1px,transparent 1.3px) 0 0/8px 8px,
    linear-gradient(180deg,#f7efd8,#e9ddbe);
}
#scr-result.comic .modal.wide{
  background:radial-gradient(rgba(20,18,15,.13) 1.1px,transparent 1.3px) 0 0/6px 6px,
    linear-gradient(180deg,#fdf6e3,#f0e3c4);
  border:4px solid #14120f;border-radius:2px;
  box-shadow:8px 8px 0 rgba(20,18,15,.32),0 22px 60px rgba(0,0,0,.55);
  color:#14120f;
}
#scr-result.comic .winner{
  font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;
  font-weight:900;font-style:italic;letter-spacing:.06em;
  transform:rotate(-2deg) skewX(-3deg);
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:#14120f;filter:none;animation:none;
  text-shadow:2px 2px 0 rgba(255,255,255,.7),4px 4px 0 rgba(20,18,15,.25);
}
#scr-result.comic .res-sub{
  font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;
  color:#3a3226;font-weight:900;letter-spacing:.14em;
}
#scr-result.comic .res-log{color:#3a3226}
#scr-result.comic .res-log b{color:#7c1f17}
#scr-result.comic .res-rank{
  font-family:'Comic Sans MS','Comic Neue',cursive;color:#14120f;font-weight:900;
  letter-spacing:.18em;background:#fffaf0;border:2.5px solid #14120f;border-radius:1px;
  box-shadow:3px 3px 0 rgba(20,18,15,.3);padding:6px 16px;display:inline-block;
  transform:rotate(-1.2deg);margin-top:10px;
}
#scr-result.comic .res-rank .res-rank-plate{
  background:#14120f;color:#f7efd8;padding:2px 10px;border-radius:1px;margin-left:6px;
}
#scr-result.comic .mbtn{
  font-family:'Comic Sans MS','Comic Neue',cursive;font-weight:900;
  border:3px solid #14120f;border-radius:2px;
  box-shadow:3px 3px 0 rgba(20,18,15,.25);color:#14120f;
  background:linear-gradient(180deg,#fdf6e3,#f0e3c4);
}
#scr-result.comic .mbtn:not(.ghost){background:linear-gradient(180deg,#efc86d,#d99a38)}
#scr-result.comic .mbtn:hover:not(:disabled){
  background:#14120f;color:#f7efd8;transform:translateY(-2px);
  box-shadow:5px 5px 0 rgba(20,18,15,.35);
}
#scr-result.comic .mbtn:disabled{opacity:.35}
#scr-result.comic .rc-card{
  background:radial-gradient(rgba(20,18,15,.1) 1px,transparent 1.2px) 0 0/6px 6px,#fdf6e3;
  border:3px solid #14120f;border-radius:2px;box-shadow:5px 5px 0 rgba(20,18,15,.28);
  color:#14120f;
}
#scr-result.comic .rc-card.rc-win{border-color:#14120f;border-top:10px solid #c8382f}
#scr-result.comic .rc-card .rc-avframe{
  border:2.5px solid #14120f;background:#fffaf0;border-radius:2px;
}
#scr-result.comic .rc-card canvas{background:#fffaf0;border-radius:1px}
#scr-result.comic .rc-name{color:#14120f;font-family:'Comic Sans MS','Comic Neue',cursive}
#scr-result.comic .rc-verdict{
  font-family:'Comic Sans MS','Comic Neue',cursive;color:#7c1f17;font-weight:900;
  letter-spacing:.2em;
}
#scr-result.comic .rc-card.rc-win .rc-verdict{color:#c8382f}
#scr-result.comic .rc-rec{color:#3a3226;font-weight:900;letter-spacing:.14em}
#scr-result.comic .rc-disc{color:#3a3226}
#scr-result.comic .rc-verdict-stamp{color:#14120f}
#scr-result.comic .rc-card.rc-win .rc-verdict-stamp{color:#c8382f;text-shadow:2px 2px 0 rgba(255,255,255,.6),3px 3px 0 rgba(20,18,15,.3)}
#scr-result.comic .rc-card:not(.rc-win) .rc-verdict-stamp{color:#14120f;text-shadow:2px 2px 0 rgba(255,255,255,.6)}
#scr-result.comic .rc-card::before,#scr-result.comic .rc-card::after{opacity:.0}
#scr-result.comic .rc-card.rc-win::before{opacity:1}

/* STORY END · the arc-complete splash, comic-paper */
#scr-story-end.comic{
  background:
    radial-gradient(rgba(20,18,15,.10) 1.1px,transparent 1.3px) 0 0/9px 9px,
    linear-gradient(180deg,#f7efd8,#e6d9b8);
}
#scr-story-end.comic .end-kicker{
  font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;
  font-size:13px;font-weight:900;letter-spacing:.4em;color:#f7efd8;background:#14120f;
  padding:5px 18px;border-radius:1px;box-shadow:3px 3px 0 rgba(20,18,15,.3);
  transform:rotate(-1.4deg);text-shadow:none;
}
#scr-story-end.comic .end-title{
  font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;
  font-weight:900;letter-spacing:.08em;color:#14120f;
  text-shadow:2px 2px 0 rgba(255,255,255,.7),4px 4px 0 rgba(200,56,47,.45);
}
#scr-story-end.comic #end-bust{
  border:4px solid #14120f;border-radius:2px;box-shadow:8px 8px 0 rgba(20,18,15,.3);
  transform:rotate(-1deg);background:#fdf6e3;
}
#scr-story-end.comic .end-box{
  background:radial-gradient(rgba(20,18,15,.12) 1.1px,transparent 1.3px) 0 0/7px 7px,
    linear-gradient(180deg,#fdf6e3,#f0e3c4);
  border:3.5px solid #14120f;border-radius:2px;
  box-shadow:7px 7px 0 rgba(20,18,15,.3);
}
#scr-story-end.comic .dlg-speaker{color:#14120f}
#scr-story-end.comic .dlg-speaker .narr{
  color:#f7efd8;background:#14120f;padding:2px 10px;border-radius:1px;
  letter-spacing:.24em;box-shadow:2px 2px 0 rgba(20,18,15,.25);
}
#scr-story-end.comic .dlg-text{color:#241d15}
#scr-story-end.comic .dlg-hint{color:#3a3226;font-weight:900;letter-spacing:.2em}
/* the CHARACTER CREATOR UNLOCKED stamp · comic burst on the paper */
#scr-story-end.comic .end-unlock{
  margin-top:8px;font-family:'Comic Sans MS','Comic Neue',cursive;
  font-size:clamp(15px,2vw,21px);font-weight:900;letter-spacing:.16em;color:#14120f;
  background:
    radial-gradient(rgba(20,18,15,.1) 1px,transparent 1.2px) 0 0/5px 5px,
    repeating-linear-gradient(45deg,#ffd95e 0 12px,#f2b63d 12px 24px);
  border:3px solid #14120f;border-radius:2px;
  box-shadow:5px 5px 0 rgba(20,18,15,.32);padding:12px 26px;text-align:center;
  transform:rotate(-1.6deg);animation:none;
}
#scr-story-end.comic .end-unlock-sub{color:#14120f;font-weight:900;letter-spacing:.18em;font-family:'Comic Sans MS','Comic Neue',cursive}
#scr-story-end.comic .end-unlock-star{color:#14120f;text-shadow:1px 1px 0 rgba(255,255,255,.65)}

/* ============================================================
   CREATION CHAMBER · EDIT FIGHTER + YOU full redesign
   The old flat cream sheets read like paperwork. New language:
   a dark ink "creator's board" with the fighter as the hero —
   paper panels pinned on the dark, an ink header band, poster
   type, stance plaques, comic move cards, and the balance
   verdict as a rubber stamp. Same comic DNA as the wiki/story,
   but composed, layered and immersive instead of uniform.
   ============================================================ */
#scr-editor,#scr-you{
  background:
    radial-gradient(rgba(247,239,216,.045) 1px,transparent 1.3px) 0 0/9px 9px,
    radial-gradient(1100px 520px at 50% 118%,rgba(212,164,80,.10),transparent 62%),
    linear-gradient(180deg,#1c1710 0%,#100d0a 46%,#0a0908 100%);
}
/* giant faint kanji watermark on the board */
#scr-editor::before,#scr-you::before{
  content:"武";position:absolute;right:-1vw;bottom:-8vh;z-index:0;pointer-events:none;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:900;
  font-size:min(58vh,52vw);line-height:1;color:rgba(247,239,216,.028);
  transform:rotate(-8deg);text-shadow:0 0 60px rgba(247,239,216,.05);
}
#scr-editor::after,#scr-you::after{
  content:"創";position:absolute;left:1.5vw;top:13vh;z-index:0;pointer-events:none;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:900;
  font-size:min(26vh,20vw);line-height:1;color:rgba(247,239,216,.022);transform:rotate(9deg);
}
#scr-editor > *,#scr-you > *{position:relative;z-index:1}
/* ink header band — the two screens wear a solid black masthead */
#scr-editor > .bar,#scr-you > .bar{
  position:absolute;top:0;left:0;right:0;height:66px;z-index:6;
  background:linear-gradient(180deg,#221b12,#0d0b09);
  border-bottom:3px double #e8b04b;box-shadow:0 6px 24px rgba(0,0,0,.55);
  padding:0 20px;display:flex;align-items:center;gap:14px;
}
#scr-editor > .bar h2,#scr-you > .bar h2{
  font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;
  color:#f7efd8;letter-spacing:.3em;font-size:19px;margin:0;
  text-shadow:2px 2px 0 rgba(0,0,0,.6),0 0 26px rgba(232,176,75,.25);
}
#scr-editor > .bar .back,#scr-you > .bar .back{
  border:2px solid #e8b04b;color:#f7efd8;background:rgba(247,239,216,.06);
  border-radius:1px;box-shadow:2px 2px 0 rgba(0,0,0,.4);font-weight:900;
}
#scr-editor > .bar .back:hover,#scr-you > .bar .back:hover{background:#e8b04b;color:#14120f}
/* top-right screen buttons get ink circles on the dark band */
#scr-editor ~ #gear-btn,#scr-you ~ #gear-btn,
#scr-editor ~ #about-btn,#scr-you ~ #about-btn,
#scr-editor ~ #grid-btn,#scr-you ~ #grid-btn,
#scr-editor ~ #fs-btn,#scr-you ~ #fs-btn{color:#f7efd8;opacity:.9;border-color:rgba(247,239,216,.25)}

/* the workbench body clears the band */
#scr-editor .editor-body{padding:90px 26px 34px;gap:22px}
/* in-band target tabs (MY FIGHTERS / YOU! LOOK ONLY) match the band */
#scr-editor > .bar .ed-target{border:1px solid rgba(247,239,216,.28);border-radius:1px;overflow:hidden}
#scr-editor > .bar .ed-target .seg{
  color:rgba(247,239,216,.72);background:rgba(247,239,216,.05);font-weight:900;
  letter-spacing:.16em;font-size:10.5px;padding:9px 16px;border:none;
  font-family:'Comic Sans MS','Comic Neue',cursive;
}
#scr-editor > .bar .ed-target .seg:hover{color:#f7efd8;background:rgba(247,239,216,.12)}
#scr-editor > .bar .ed-target .seg.active{
  color:#14120f;background:linear-gradient(180deg,#f2cb70,#d99a38);
  box-shadow:inset 0 -3px 0 rgba(20,18,15,.25);
}
/* pinned paper panels — slight rotation, tape, screws */
#scr-editor .ed-styles,#scr-editor .ed-main,#scr-editor .ed-preview,
#scr-you .panel{
  background:
    radial-gradient(rgba(20,18,15,.11) 1.1px,transparent 1.3px) 0 0/7px 7px,
    linear-gradient(180deg,#fdf7e4,#efdfc0);
  border:3px solid #14120f;border-radius:2px;
  box-shadow:7px 7px 0 rgba(0,0,0,.42),0 0 0 1px rgba(247,239,216,.06) inset;
  position:relative;
}
#scr-editor .ed-styles{transform:rotate(-.28deg);box-shadow:6px 6px 0 rgba(0,0,0,.42)}
#scr-editor .ed-main{transform:rotate(.12deg)}
#scr-editor .ed-preview{transform:rotate(-.2deg)}
#scr-you .panel{transform:rotate(.12deg)}
/* washi tape over the paper corners */
#scr-editor .ed-styles::before,#scr-editor .ed-preview::before,
#scr-you .panel::before{
  content:"";position:absolute;top:-12px;left:50%;margin-left:-46px;width:92px;height:24px;
  background:linear-gradient(180deg,rgba(232,176,75,.34),rgba(200,160,80,.28));
  border-left:1px dashed rgba(20,18,15,.25);border-right:1px dashed rgba(20,18,15,.25);
  transform:rotate(-1.6deg);box-shadow:0 2px 6px rgba(0,0,0,.25);z-index:5;pointer-events:none;
}
#scr-editor .ed-main::before{
  content:"";position:absolute;top:-10px;right:34px;width:70px;height:20px;
  background:linear-gradient(180deg,rgba(216,120,80,.30),rgba(196,100,70,.24));
  transform:rotate(4deg);z-index:5;pointer-events:none;border-left:1px dashed rgba(20,18,15,.2);border-right:1px dashed rgba(20,18,15,.2);
}
/* corner screws on the panels */
#scr-editor .ed-styles::after,#scr-editor .ed-preview::after,#scr-you .panel::after{
  content:"";position:absolute;top:8px;right:10px;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#8d8575,#3a3326 60%,#171310);
  box-shadow:1px 1px 2px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.4);
}
#scr-editor .ed-main::after{
  content:"";position:absolute;top:8px;left:10px;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#8d8575,#3a3326 60%,#171310);
  box-shadow:1px 1px 2px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.4);
}
/* poster tag / ribbon section labels */
#scr-editor .ed-lbl,#scr-you .ed-lbl{
  background:#14120f;color:#f7efd8;display:inline-block;align-self:flex-start;
  padding:5px 14px 5px 11px;font-size:10.5px;font-weight:900;letter-spacing:.3em;
  margin-bottom:12px;box-shadow:3px 3px 0 rgba(20,18,15,.28);position:relative;z-index:2;
  clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%);
  font-family:'Comic Sans MS','Comic Neue',cursive;
}
/* ---------- EDITOR: identity header ---------- */
#scr-editor .ed-head{
  border-bottom:2px solid #14120f;padding:4px 6px 14px;align-items:flex-start;gap:14px;
}
#scr-editor .ed-head > div:first-child{min-width:0}
#scr-editor .ed-stylename{
  font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;
  font-size:clamp(25px,2.4vw,34px);font-weight:900;letter-spacing:.02em;line-height:1;
  text-shadow:2px 2px 0 rgba(255,255,255,.75),3px 3px 0 rgba(20,18,15,.28);
}
#scr-editor .ed-styledesc{
  color:#4a4234;font-size:11px;margin-top:6px;line-height:1.5;
}
#scr-editor .ed-styledesc b{letter-spacing:.14em}
#scr-editor .ed-styledesc i{font-style:italic;color:#7c1f17}
/* the identity plates (NAME / STYLE) sit side by side on a ruled strip */
#scr-editor .ed-head .fld{display:flex;flex-direction:column;gap:4px;margin-top:10px}
#scr-editor .ed-head .fld > span{
  font-size:9px;font-weight:900;letter-spacing:.26em;color:#6a6150;
}
#scr-editor .ed-head .fld input,#scr-editor .ed-head .fld select{
  background:#fffaf0;color:#14120f;border:2px solid #14120f;border-radius:1px;
  font-weight:800;padding:8px 10px;font-size:14px;min-width:230px;
  box-shadow:3px 3px 0 rgba(20,18,15,.18);
}
#scr-editor .ed-head .fld input:focus,#scr-editor .ed-head .fld select:focus{
  outline:none;box-shadow:3px 3px 0 rgba(20,18,15,.18),0 0 0 3px rgba(232,176,75,.55);
}
/* actions + tabs */
#scr-editor .ed-actions{gap:10px}
#scr-editor .ed-tabs{background:#14120f;border:2px solid #14120f;border-radius:1px;box-shadow:3px 3px 0 rgba(20,18,15,.25)}
#scr-editor .ed-tabs .seg{
  color:#c9bfa6;background:transparent;font-weight:900;letter-spacing:.18em;font-size:11px;
  padding:9px 20px;font-family:'Comic Sans MS','Comic Neue',cursive;transition:none;
}
#scr-editor .ed-tabs .seg.active{
  background:linear-gradient(180deg,#f2cb70,#d99a38);color:#14120f;box-shadow:inset 0 -3px 0 rgba(20,18,15,.25);
}
#scr-editor .ed-btnrow{flex-wrap:wrap;justify-content:flex-end;gap:7px}
#scr-editor .ed-btnrow .mbtn{padding:8px 13px;font-size:10.5px;border-width:2px;border-radius:1px;
  font-family:'Comic Sans MS','Comic Neue',cursive;font-weight:900;letter-spacing:.1em;
  box-shadow:3px 3px 0 rgba(20,18,15,.3);color:#14120f;background:#fff8e6;
}
#scr-editor .ed-btnrow .mbtn.gold{background:linear-gradient(180deg,#f2cb70,#d99a38)}
#scr-editor .ed-btnrow .mbtn:hover{background:#14120f;color:#f7efd8;transform:translate(-1px,-1px)}
/* ---------- EDITOR: move cards ---------- */
#scr-editor .slotgrid{padding:14px 6px 8px;gap:12px;overflow-y:auto}
#scr-editor .dirrow{
  grid-template-columns:88px repeat(4,1fr);gap:10px;align-items:stretch;
  padding-bottom:4px;border-bottom:1px dashed rgba(20,18,15,.28);
}
#scr-editor .dirrow:last-child{border-bottom:none}
#scr-editor .dirrow.cols3{grid-template-columns:88px repeat(3,1fr)}
#scr-editor .dirrow.pair{grid-template-columns:88px 1fr 1fr}
/* stance plaque */
#scr-editor .dirhead{
  justify-content:center;align-items:center;text-align:center;padding:8px 4px;
  background:#14120f;border-radius:1px;box-shadow:3px 3px 0 rgba(20,18,15,.3);
  border-top:3px solid #e8b04b;display:flex;flex-direction:column;gap:2px;align-self:stretch;
}
#scr-editor .dirhead b{color:#e8b04b;font-size:19px;line-height:1.1}
#scr-editor .dirhead span{color:#f7efd8;font-size:9px;letter-spacing:.12em;font-weight:900;writing-mode:horizontal-tb}
#scr-editor .dirhead i{color:rgba(247,239,216,.55);font-size:8px;font-style:normal;letter-spacing:.04em;line-height:1.3;margin-top:2px}
/* cards: cream paper, ink border, category strip on top */
#scr-editor .dirrow .slot{
  position:relative;background:radial-gradient(rgba(20,18,15,.1) 1px,transparent 1.2px) 0 0/6px 6px,#fffaf0;
  border:2px solid #14120f;border-radius:1px;padding:11px 10px 9px;
  box-shadow:4px 4px 0 rgba(20,18,15,.24);display:flex;flex-direction:column;gap:6px;min-height:0;
  border-top:8px solid #c8382f;
}
#scr-editor .slot.cat-kick{border-top-color:#2f9a7b}
#scr-editor .slot.cat-special{border-top-color:#d99a38}
#scr-editor .slot.cat-special::after{
  content:'★';position:absolute;top:-16px;right:-6px;font-size:22px;line-height:1;
  color:#c8382f;transform:rotate(12deg);text-shadow:1px 1px 0 rgba(255,255,255,.7);pointer-events:none;z-index:2;
}
#scr-editor .dirrow.cols4 .slot:nth-child(2n){transform:rotate(.25deg)}
#scr-editor .dirrow.cols4 .slot:nth-child(2n+1){transform:rotate(-.3deg)}
#scr-editor .dirrow .slot:hover,#scr-editor .dirrow .slot:focus-within{
  transform:rotate(0) translateY(-3px);z-index:3;
  box-shadow:6px 6px 0 rgba(20,18,15,.3),0 0 0 2px #e8b04b inset;
}
#scr-editor .slot-top{display:flex;align-items:center;gap:8px}
#scr-editor .keycap{
  min-width:38px;height:30px;padding:0 8px;display:flex;align-items:center;justify-content:center;
  background:#14120f;color:#f7efd8;border-radius:2px;font-weight:900;font-size:12.5px;letter-spacing:.02em;
  box-shadow:0 3px 0 rgba(0,0,0,.5),1px 1px 0 rgba(0,0,0,.4);text-shadow:none;
}
#scr-editor .slot.cat-special .keycap{background:#b02417}
#scr-editor .slot.cat-kick .keycap{background:#16483a}
#scr-editor .slot-cat{
  font-size:8.5px;font-weight:900;letter-spacing:.2em;color:#6a6150;padding-top:1px;
}
#scr-editor .slot.cat-punch .slot-cat{color:#b02417}
#scr-editor .slot.cat-kick .slot-cat{color:#1e6a52}
#scr-editor .slot.cat-special .slot-cat{color:#8a5a05}
#scr-editor .dirrow .slot select{
  width:100%;background:#fff6df;color:#14120f;border:2px solid #14120f;border-radius:1px;
  padding:7px 8px;font-weight:800;font-size:12.5px;box-shadow:inset 2px 2px 0 rgba(20,18,15,.06);
}
#scr-editor .dirrow .slot select:focus{outline:none;box-shadow:0 0 0 3px rgba(232,176,75,.5)}
#scr-editor .slot-stats{display:flex;flex-wrap:wrap;gap:4px 9px;font-size:9.5px;color:#5a5244;letter-spacing:.02em;margin-top:auto}
#scr-editor .slot-stats b{color:#7c1f17;font-weight:900}
#scr-editor .slot-fixed{
  background:rgba(20,18,15,.07);border:2px solid #14120f;color:#14120f;border-radius:1px;
  font-weight:800;font-size:12.5px;padding:8px 10px;
}
#scr-editor .slot-fixed i{font-style:normal;font-weight:900;color:#b02417;font-size:9px;letter-spacing:.16em}
/* LOOK pane rows → comic switches */
#scr-editor .lookgrid{gap:8px 14px;padding:12px 4px 8px}
#scr-editor .lookrow{
  border:2px solid #14120f;border-radius:1px;background:#fffaf0;
  box-shadow:3px 3px 0 rgba(20,18,15,.2);padding:6px 9px;
}
#scr-editor .lookrow .lk{font-weight:900;color:#14120f;letter-spacing:.1em;font-size:10.5px}
#scr-editor .lookrow .arw{
  border:2px solid #14120f;color:#14120f;background:#fdf6e3;border-radius:1px;
  font-weight:900;box-shadow:2px 2px 0 rgba(20,18,15,.18);
}
#scr-editor .lookrow .arw:hover:not(:disabled){background:#14120f;color:#f7efd8}
#scr-editor .lookrow .lv{font-weight:900;color:#b02417}
#scr-editor .tuning{
  border-top:2px dashed rgba(20,18,15,.4);color:#5a5244;padding:9px 4px 0;
  font-weight:800;letter-spacing:.12em;
}
#scr-editor .tuning b{color:#7c1f17}
/* ---------- EDITOR: live stage + verdict ---------- */
#scr-editor .ed-preview{padding:14px 14px 12px}
#scr-editor .ed-preview #ed-canvas{
  width:100%;height:auto;display:block;
  border:3px solid #14120f;border-radius:2px;
  box-shadow:0 0 0 4px rgba(255,255,255,.35),0 0 0 5px #14120f,0 0 42px rgba(232,176,75,.18);
}
#scr-editor .mv-name{
  margin-top:12px;font-family:'Comic Sans MS','Comic Neue',cursive;font-weight:900;
  font-size:16px;color:#14120f;letter-spacing:.03em;text-shadow:1px 1px 0 rgba(255,255,255,.7);
}
#scr-editor .mv-stats{color:#4a4234;font-size:10.5px;line-height:1.7}
#scr-editor .mv-stats b{color:#7c1f17}
/* balance verdict = rubber stamp */
#scr-editor .bal{border-top:3px double rgba(20,18,15,.75);margin-top:13px;padding-top:11px}
#scr-editor .bal-top{color:#3a3226;letter-spacing:.18em;font-weight:900;font-size:9.5px;margin-bottom:4px}
#scr-editor #bal-word{
  font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;
  font-size:19px;font-weight:900;letter-spacing:.14em;padding:2px 12px;
  border:3px solid currentColor;border-radius:3px;transform:rotate(-1.8deg);
  background:#fffaf0;box-shadow:3px 3px 0 rgba(20,18,15,.3);display:inline-block;
}
#scr-editor #bal-word.tone-hot{color:#d0341f}
#scr-editor #bal-word.tone-warm{color:#b97408}
#scr-editor #bal-word.tone-even{color:#1e7a5c}
#scr-editor #bal-word.tone-cool{color:#2566a8}
#scr-editor #bal-word.tone-cold{color:#6a6f86}
#scr-editor .bal-bar{height:12px;border:2px solid #14120f;background:repeating-linear-gradient(90deg,#e7dcc0 0 8px,#fdf6e3 8px 16px);border-radius:1px;box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}
#scr-editor .bal-bar i{height:100%;box-shadow:2px 0 0 rgba(20,18,15,.5)}
#scr-editor .bal-bar u{width:3px;background:#14120f;box-shadow:-1px 0 0 #fff,1px 0 0 #fff}
#scr-editor .bal-num{font-weight:900;color:#14120f;letter-spacing:.1em;font-size:11px}
#scr-editor .bal-mods div{font-size:10px;line-height:1.65;color:#3a3226;font-weight:700;letter-spacing:.02em}
#scr-editor .bal-mods .up{color:#1e7a5c}
#scr-editor .bal-mods .dn{color:#b02417}
#scr-editor .bal-mods .even{color:#6a6150}
/* the gauge in plain words (owner, 2026-10-13): one line on what the number
   means, the changes it makes in a fight, then each bonus the moves earn as
   a small card: its name, what earns it, what it does */
#scr-editor .bal-says{margin:0 0 6px;font-size:11px;line-height:1.4;color:#3a3226;font-weight:600}
#scr-editor .bal h5{margin:8px 0 3px;font-size:9.5px;letter-spacing:.16em;color:#14120f;font-weight:900}
#scr-editor .bal-syn{display:flex;flex-direction:column;gap:5px;margin-top:4px;max-height:none;overflow:visible}
#scr-editor .bal-syn .syn{
  display:block;margin:0;padding:5px 8px;border:2px solid #14120f;border-radius:2px;
  background:#14120f;color:#f7efd8;font-size:10.5px;line-height:1.35;
  box-shadow:2px 2px 0 rgba(20,18,15,.22);
}
#scr-editor .bal-syn .syn b{display:block;color:#f2cb70;font-size:10px;font-weight:900;letter-spacing:.14em;margin:0 0 2px}
#scr-editor .bal-syn .syn span{display:block;color:rgba(247,239,216,.8);font-weight:600}
#scr-editor .bal-syn .syn em{display:block;font-style:normal;font-weight:800;margin-top:2px}
#scr-editor .bal-syn .syn em.up{color:#8fe0b8}
#scr-editor .bal-syn .syn em.dn{color:#ff9d88}
#scr-editor .bal-syn .syn.none{background:transparent;color:#6a6150;border-style:dashed;font-weight:700}
/* roster tiles = mini character posters */
#scr-editor .ed-stylelist{gap:10px;padding:2px;align-content:start}
#scr-editor .ed-tile{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 6px 7px;background:radial-gradient(rgba(20,18,15,.1) 1px,transparent 1.2px) 0 0/6px 6px,#fffaf0;
  border:2px solid #14120f;border-radius:1px;box-shadow:3px 3px 0 rgba(20,18,15,.24);
  font-family:'Comic Sans MS','Comic Neue',cursive;color:#14120f;
}
#scr-editor .ed-tile canvas{width:100%;height:auto;border:2px solid #14120f;border-radius:1px;background:#14120f;display:block}
#scr-editor .ed-tile.on{
  box-shadow:3px 3px 0 rgba(20,18,15,.24),0 0 0 2px #e8b04b inset;
  background:linear-gradient(180deg,#fff3cf,#f2dfae);
}
#scr-editor .ed-tile.on::before{content:'●';position:absolute;top:-9px;left:50%;margin-left:-6px;color:#b02417;font-size:11px;text-shadow:0 0 0 1px #14120f,1px 1px 0 #fff}
#scr-editor .ed-tile .ed-tile-name{font-size:11px;font-weight:900;letter-spacing:.04em;text-align:center;line-height:1.15}
#scr-editor .ed-tile .ed-tile-style{font-size:8.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
#scr-editor .ed-tile.add{
  border-style:dashed;justify-content:center;background:rgba(255,250,240,.6);
}
#scr-editor .ed-tile.add .ed-tile-plus{font-size:30px;font-weight:900;line-height:1;color:#b02417}
#scr-editor .ed-tile.add .ed-tile-name{font-size:9.5px;letter-spacing:.2em}
#scr-editor .ed-hint{color:#3a3226;font-size:10px;letter-spacing:.05em;line-height:1.5;margin-top:10px}
#scr-editor .ed-hint b,#scr-editor .ed-note b{color:#7c1f17}
#scr-editor .ed-note{color:#4a4234;font-size:10px;letter-spacing:.03em;border-top:2px dashed rgba(20,18,15,.3);padding-top:9px;line-height:1.55}
#scr-editor .ed-empty{
  border:3px dashed rgba(20,18,15,.6);background:radial-gradient(rgba(20,18,15,.07) 1px,transparent 1.2px) 0 0/7px 7px,rgba(255,250,240,.5);
}
#scr-editor .ed-empty h4{color:#b02417;font-family:'Comic Sans MS','Comic Neue',cursive}
#scr-editor .ed-empty p{color:#3a3226}
#scr-editor .ed-empty p b{color:#b02417}

/* ============================================================
   YOU! · the hero card redesign
   ============================================================ */
#scr-you .you-body{padding:92px 26px 22px;gap:22px;grid-template-columns:340px minmax(0,1fr);
  max-width:1240px;width:100%;margin:0 auto;align-content:start;overflow-y:auto}
/* hero card = character poster */
#scr-you .you-card{padding:16px;overflow:hidden}
#scr-you .you-card::before{
  content:"YOU!";position:absolute;top:8px;right:-14px;transform:rotate(6deg);
  font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;font-weight:900;
  font-size:38px;letter-spacing:.06em;color:rgba(200,56,47,.18);pointer-events:none;line-height:1;
}
#scr-you .portrait{
  border:3px solid #14120f;border-radius:2px;
  box-shadow:0 0 0 4px rgba(255,255,255,.4),0 0 0 5px #14120f,0 10px 30px rgba(0,0,0,.35);
  background:#14120f;position:relative;
}
#scr-you .portrait canvas{width:100%;height:auto;display:block}
#scr-you .youname{
  margin-top:14px;width:100%;background:transparent;border:none;border-bottom:3px solid #14120f;
  font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;color:#14120f;
  font-size:clamp(22px,2vw,30px);font-weight:900;text-align:center;letter-spacing:.04em;
  border-radius:0;text-shadow:2px 2px 0 rgba(255,255,255,.75);
}
#scr-you .youname:focus{outline:none;border-bottom-color:#b02417}
#scr-you .you-style{text-align:center;color:#14120f;font-size:11px;letter-spacing:.08em;margin-top:8px;line-height:1.5}
#scr-you .you-style b{color:#b02417;letter-spacing:.2em;font-family:'Comic Sans MS','Comic Neue',cursive}
#scr-you .you-code{
  margin:12px auto 0;display:flex;align-items:center;justify-content:center;gap:8px;
  border:2px dashed #14120f;padding:7px 10px;max-width:220px;
  background:rgba(255,250,240,.6);color:#14120f;font-size:9px;font-weight:900;letter-spacing:.3em;
}
#scr-you .you-code b{color:#b02417;font-family:Consolas,Menlo,monospace;font-size:15px;letter-spacing:.14em}
/* power dials */
#scr-you .bars{margin-top:14px;display:flex;flex-direction:column;gap:7px}
#scr-you .statrow{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:8px}
#scr-you .statrow > span{font-size:8.5px;font-weight:900;letter-spacing:.2em;color:#3a3226}
#scr-you .statbar{
  height:11px;border:2px solid #14120f;border-radius:1px;background:#e7dcc0;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.14);position:relative;overflow:hidden;
}
#scr-you .statbar i{
  display:block;height:100%;background:linear-gradient(90deg,#b02417,#c8382f 55%,#e8644a);
  box-shadow:2px 0 0 rgba(20,18,15,.4);
}
/* the kit scroll */
#scr-you .you-body > .panel:nth-child(2){padding:16px 18px 18px}
#scr-you .you-moves{gap:4px;overflow-y:auto;padding-right:4px}
#scr-you .ydir{
  grid-column:1/-1;justify-self:start;margin:10px 0 3px;background:#14120f;color:#f7efd8;
  font-size:8.5px;font-weight:900;letter-spacing:.24em;padding:4px 14px 4px 10px;border-radius:1px;
  box-shadow:2px 2px 0 rgba(20,18,15,.25);
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%);
}
#scr-you .you-moves > .ydir:first-child{margin-top:2px}
#scr-you .ymv{
  display:flex;align-items:baseline;gap:7px;padding:7px 9px 7px 12px;position:relative;
  background:#fffaf0;border:1.5px solid #14120f;border-radius:1px;
  box-shadow:2px 2px 0 rgba(20,18,15,.16);margin:0;
}
#scr-you .ymv::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:#c8382f;
}
#scr-you .ymv.cat-kick::before{background:#2f9a7b}
#scr-you .ymv.cat-special::before{background:#d99a38}
#scr-you .ymv:hover{transform:translateY(-1px);box-shadow:3px 3px 0 rgba(20,18,15,.22)}
#scr-you .ymv .k{
  min-width:56px;text-align:center;background:#14120f;color:#f7efd8;font-weight:900;
  border:none;border-radius:1px;box-shadow:0 2px 0 rgba(0,0,0,.4);font-size:10px;letter-spacing:.04em;
  padding:3px 6px;flex:none;margin:0;
}
#scr-you .ymv.cat-special .k{background:#b02417}
#scr-you .ymv .n{font-size:12px;font-weight:900;color:#14120f;white-space:nowrap}
#scr-you .ymv .s{font-size:9px;color:#6a6150;font-weight:700;letter-spacing:.03em;margin-left:auto;white-space:nowrap}
/* YOU profile line — clean, no penalty wall (YOU is always rated to its own kit) */
#scr-you .you-prof{
  color:#14120f;font-size:11.5px;line-height:1.7;background:#fffaf0;
  border:2px solid #14120f;border-radius:1px;padding:10px 12px;
  box-shadow:3px 3px 0 rgba(20,18,15,.2);
}
#scr-you .yp-verdict{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
#scr-you .yp-stamp{
  font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;font-size:14px;font-weight:900;
  letter-spacing:.16em;padding:2px 10px;border:2.5px solid #1e7a5c;color:#1e7a5c;border-radius:3px;
  transform:rotate(-1.6deg);background:#fffdf4;
}
#scr-you .yp-stamp.tone-hot{color:#d0341f;border-color:#d0341f}
#scr-you .yp-stamp.tone-warm{color:#b97408;border-color:#b97408}
#scr-you .yp-stamp.tone-cool{color:#2566a8;border-color:#2566a8}
#scr-you .yp-stamp.tone-cold{color:#6a6f86;border-color:#6a6f86}
#scr-you .yp-note{color:#6a6150;font-size:9.5px;font-weight:700;letter-spacing:.06em}
#scr-you .yp-syns{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 2px}
#scr-you .yp-syns i{
  font-style:normal;background:#14120f;color:#f2cb70;padding:3px 9px;font-size:9px;
  font-weight:900;letter-spacing:.14em;border-radius:2px;box-shadow:2px 2px 0 rgba(20,18,15,.2);
}
#scr-you .yp-ga{border-top:2px dashed rgba(20,18,15,.35);margin-top:9px;padding-top:8px;
  display:flex;gap:14px;font-size:10px;font-weight:900;letter-spacing:.14em;color:#3a3226;flex-wrap:wrap}
#scr-you .yp-ga b{color:#b02417}
/* footer */
#scr-you .selfoot{
  background:transparent;border-top:3px double #e8b04b;
  padding:14px 22px 18px;position:relative;z-index:2;
}
#scr-you .selfoot .hint{color:rgba(247,239,216,.65);font-size:11px;letter-spacing:.1em;font-weight:800}
#scr-you .selfoot .selbtns .mbtn{
  border:3px solid #14120f;border-radius:2px;box-shadow:4px 4px 0 rgba(0,0,0,.5);
  font-family:'Comic Sans MS','Comic Neue',cursive;font-weight:900;color:#14120f;
  background:linear-gradient(180deg,#fdf6e3,#efdfc0);padding:11px 20px;font-size:11px;letter-spacing:.14em;
}
#scr-you .selfoot .selbtns .mbtn:not(.ghost){background:linear-gradient(180deg,#f2cb70,#d99a38)}
#scr-you .selfoot .selbtns .mbtn:hover{background:#14120f;color:#f7efd8;transform:translateY(-2px)}
#scr-you .selfoot .selbtns .mbtn:disabled{opacity:.3}
/* keep the comic-screen chrome consistent on the dark board */
#scr-you .ed-note{color:rgba(247,239,216,.7);border-color:rgba(247,239,216,.25)}
@media (max-width:1200px){
  #scr-editor .dirrow{grid-template-columns:72px repeat(4,1fr);gap:7px}
  #scr-editor .dirrow.cols3{grid-template-columns:72px repeat(3,1fr)}
  #scr-editor .dirrow.pair{grid-template-columns:72px 1fr 1fr}
  #scr-editor .dirhead{font-size:.86em}
  #scr-you .you-body{grid-template-columns:280px minmax(0,1fr)}
  #scr-you .ymv .s{display:none}
  #scr-you .ymv .n{white-space:normal}
}

/* ============================================================
   THE DOJO · the online crew (js/dojo.js)
   Same cream-paper + black-ink language as the rest of the comic
   skin: a dossier card on the profile and a sheet that slides over
   whatever screen is up. The tag is the only thing a room needs.
   ============================================================ */
.profile-dojo{
  background:radial-gradient(rgba(20,18,15,.13) 1.1px,transparent 1.3px) 0 0/6px 6px,
    linear-gradient(180deg,#fdf6e3,#f0e3c4);
  border:3px solid #14120f;border-radius:2px;box-shadow:5px 5px 0 rgba(20,18,15,.3);
  color:#14120f;padding:12px 13px;display:flex;flex-direction:column;gap:7px;
}
.profile-dojo .dojo-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.profile-dojo .dojo-tag,.dojo-sheet-head span{
  font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;font-weight:900;
  font-size:12px;letter-spacing:.2em;color:#14120f;
  background:linear-gradient(180deg,#f2cb70,#d99a38);border:2px solid #14120f;
  padding:2px 7px;border-radius:2px;transform:rotate(-1.2deg);
}
.profile-dojo .dojo-count{font-size:10px;letter-spacing:.14em;font-weight:900;color:#5a4a2c}
.profile-dojo .dojo-name{font-family:'Comic Sans MS','Comic Neue',cursive;font-size:17px;font-weight:900}
.profile-dojo .dojo-name em{font-style:normal;font-size:12px;letter-spacing:.1em;color:#8a6a22}
.profile-dojo .dojo-loc{font-size:11px;letter-spacing:.12em;font-weight:800;color:#4a3c22}
.profile-dojo .dojo-motto{font-size:11px;line-height:1.45;color:#3a2f1c}
.profile-dojo .dojo-empty{font-size:11px;line-height:1.5;color:#3a2f1c}
.profile-dojo .dojo-btn{
  border:3px solid #14120f;border-radius:2px;box-shadow:4px 4px 0 rgba(0,0,0,.35);
  font-family:'Comic Sans MS','Comic Neue',cursive;font-weight:900;color:#14120f;
  background:linear-gradient(180deg,#f2cb70,#d99a38);padding:8px 12px;font-size:11px;
  letter-spacing:.14em;cursor:pointer;margin-top:2px;
}
.profile-dojo .dojo-btn:hover{background:#14120f;color:#f7efd8;transform:translateY(-2px)}

/* the tag a room paints next to a name */
.dojo-chip{
  font-family:'Comic Sans MS','Comic Neue',cursive;font-weight:900;font-size:10px;
  letter-spacing:.1em;color:#14120f;background:linear-gradient(180deg,#f2cb70,#d99a38);
  border:2px solid #14120f;border-radius:2px;padding:1px 5px;margin-left:5px;
  box-shadow:2px 2px 0 rgba(0,0,0,.35);vertical-align:middle;
}

/* the sheet */
.dojo-panel{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;
  background:rgba(12,10,8,.72);backdrop-filter:blur(2px)}
.dojo-panel[hidden]{display:none}
.dojo-sheet{
  width:min(1040px,94vw);max-height:88vh;overflow:auto;padding:16px 18px 20px;
  background:radial-gradient(rgba(20,18,15,.13) 1.1px,transparent 1.3px) 0 0/6px 6px,
    linear-gradient(180deg,#fdf6e3,#f0e3c4);
  border:4px solid #14120f;border-radius:2px;box-shadow:10px 10px 0 rgba(0,0,0,.45);color:#14120f;
}
.dojo-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dojo-x{border:2px solid #14120f;background:#f2cb70;color:#14120f;font-weight:900;
  font-family:'Comic Sans MS','Comic Neue',cursive;border-radius:2px;padding:2px 9px;cursor:pointer}
.dojo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px}
.dojo-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.dojo-col-wide{grid-column:1 / -1}
.dojo-lbl{font-family:'Comic Sans MS','Comic Neue',cursive;font-weight:900;font-size:11px;
  letter-spacing:.14em;color:#4a3c22;margin-top:4px}
.dojo-in{font-family:inherit;font-size:13px;color:#14120f;background:#fffaf0;
  border:3px solid #14120f;border-radius:2px;padding:7px 9px;box-shadow:3px 3px 0 rgba(20,18,15,.25)}
.dojo-in-tag{letter-spacing:.24em;font-weight:900;text-transform:uppercase}
.dojo-in.dojo-bad{border-color:#c8382f;background:#ffefe6}
.dojo-count2{font-size:11px;font-weight:900;letter-spacing:.12em;color:#5a4a2c;margin-top:6px}
.dojo-btn{border:3px solid #14120f;border-radius:2px;box-shadow:4px 4px 0 rgba(0,0,0,.35);
  font-family:'Comic Sans MS','Comic Neue',cursive;font-weight:900;color:#14120f;
  background:linear-gradient(180deg,#f2cb70,#d99a38);padding:9px 14px;font-size:11px;
  letter-spacing:.14em;cursor:pointer}
.dojo-btn:hover{background:#14120f;color:#f7efd8;transform:translateY(-2px)}
.dojo-danger{background:linear-gradient(180deg,#e7a396,#c9563f)}
.dojo-members{display:flex;flex-direction:column;gap:4px;max-height:38vh;overflow:auto}
.dojo-mem{display:flex;align-items:center;gap:8px;background:#fffaf0;border:2px solid #14120f;
  border-radius:2px;padding:5px 8px}
.dojo-mem-empty{font-size:11px;line-height:1.5;color:#3a2f1c}
.dojo-han{font-style:normal;font-weight:900;font-family:'Comic Sans MS','Comic Neue',cursive;
  background:#14120f;color:#f7efd8;border-radius:2px;padding:1px 6px;font-size:11px}
.dojo-mem-name{flex:1;font-size:12px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dojo-drop{border:2px solid #14120f;background:#f0e3c4;border-radius:2px;cursor:pointer;font-weight:900;padding:1px 7px}
.dojo-pool{display:flex;flex-wrap:wrap;gap:5px;max-height:26vh;overflow:auto}
.dojo-add{display:flex;flex-direction:column;gap:1px;align-items:flex-start;cursor:pointer;
  border:2px solid #14120f;border-radius:2px;background:#fffaf0;padding:4px 8px;color:#14120f}
.dojo-add b{font-size:12px;font-weight:900}
.dojo-add i{font-style:normal;font-size:9px;letter-spacing:.12em;color:#6a5a38}
.dojo-add:hover{background:#14120f;color:#f7efd8}
.dojo-add:hover b{color:#f7efd8}
.dojo-add:hover i{color:#f2cb70}
.dojo-add.is-full{opacity:.4;cursor:not-allowed}
.dojo-none{font-size:11px;color:#4a3c22}
@media (max-width:1000px){.dojo-grid{grid-template-columns:minmax(0,1fr)}}

/* the founding sheet: one line of plain talk, three fields, one button */
.dojo-lede{font-size:12px;line-height:1.5;color:#3a2f1c;margin:0 0 10px;max-width:60ch}
.dojo-go{margin-top:12px;width:100%}
.dojo-sheet-body{min-height:80px}
.dojo-sheet .dojo-in{width:100%}
.dojo-sheet .dojo-lbl{display:block}

/* ---- crews inside the house · allies & rivals · the dojo book ---- */
.profile-dojo .dojo-crew-line{font-size:11px;font-weight:900;letter-spacing:.1em;color:#7a4a12}
.dojo-crew-line{font-size:11px;font-weight:900;letter-spacing:.1em;color:#7a4a12;margin-top:2px}
.dojo-chip-crew{background:linear-gradient(180deg,#9fd7c8,#3f9c86)}
.dojo-assign{font-family:inherit;font-size:10px;font-weight:800;color:#14120f;background:#fffaf0;
  border:2px solid #14120f;border-radius:2px;padding:2px 4px;max-width:150px}
.dojo-mem-crew{font-size:10px;font-weight:900;letter-spacing:.08em;color:#2c6a58;
  background:#cdeee4;border:2px solid #14120f;border-radius:2px;padding:0 4px}
.dojo-mem.dojio-crew,.dojo-mem.dojo-crew{flex-wrap:wrap}
.dojo-mem.dojo-rel.is-ally{border-left:8px solid #3f9c86}
.dojo-mem.dojo-rel.is-rival{border-left:8px solid #c9563f}
.dojo-relrow{display:flex;gap:6px;flex-wrap:wrap}
.dojo-relrow .dojo-btn{flex:1;min-width:110px}
.dojo-banner.on{background:#14120f;color:#f2cb70}
.dojo-ta{width:100%;resize:vertical;font-family:inherit;font-size:12px;line-height:1.4}
.dojo-members.dojo-book{max-height:34vh}
.dojo-han-found{background:#d99a38}
.dojo-han-crew{background:#3f9c86}
.dojo-han-ally{background:#2c6a58}
.dojo-han-rival{background:#c9563f}
.dojo-han-member{background:#5a4a2c}
.dojo-add.dojo-read{background:#14120f;color:#f2cb70}
.dojo-add.dojo-read b{color:#f2cb70}
.dojo-add.dojo-read i{color:#f7efd8}
.dojo-book-sheet{width:min(760px,92vw)}

/* SQUAD SETUP · ONE SCREEN. Every choice, the summary and the ENTER button
   fit in the window without scrolling: the label sits left of its choices,
   the tiles are short, the four team sizes share one row, and the button
   lives in a footer row instead of being pinned over the CONTROL choices. */
#scr-squad-setup .online-body{max-width:min(1180px,96vw)!important;padding:64px 20px 16px!important}
#scr-squad-setup .online-body .panel.squad-setup-panel{
  display:grid!important;grid-template-columns:190px 1fr;align-items:center;
  gap:14px 22px!important;padding:24px 32px!important;justify-content:stretch!important;
}
#scr-squad-setup .squad-setup-panel h3{grid-column:1;margin:0!important;font-size:12px;letter-spacing:.22em}
#scr-squad-setup .squad-setup-panel h3::after{display:none}
#scr-squad-setup .squad-setup-panel > .setup-choice{grid-column:2}
#scr-squad-setup .setup-choice{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:10px!important}
#scr-squad-setup .setup-choice[hidden]{display:none!important}
#scr-squad-setup .setup-choice button{min-height:58px!important;padding:12px 10px!important;font-size:13px!important;letter-spacing:.12em!important}
#scr-squad-setup .setup-choice button::before{top:5px;left:8px;font-size:9px}
#scr-squad-setup .setup-choice button::after{bottom:6px}
#scr-squad-setup .setup-choice button:hover:not(:disabled){transform:translateY(-2px)}
/* the MIDDLE FIGHT row brings its own label: it spans both columns and lines
   its label and choices up with the rows above */
#scr-squad-setup #sq-side:not([hidden]){display:contents!important}
#scr-squad-setup #sq-side > h3{grid-column:1}
#scr-squad-setup #sq-side > .setup-choice{grid-column:2}
#scr-squad-setup .setup-summary span{color:#14120f!important;font-size:13px;letter-spacing:.12em;text-align:center}
#scr-squad-setup .setup-footer{grid-column:1 / -1;display:grid;grid-template-columns:1fr minmax(260px,1.3fr);gap:14px;align-items:stretch;margin-top:6px}
#scr-squad-setup .setup-summary{margin:0;padding:10px 14px!important}
#scr-squad-setup .setup-next{position:static!important;min-height:58px!important;margin:0}
@media (max-width:760px){
  #scr-squad-setup .online-body .panel.squad-setup-panel{grid-template-columns:1fr;padding:18px 14px!important}
  #scr-squad-setup .squad-setup-panel h3,#scr-squad-setup .squad-setup-panel > .setup-choice,
  #scr-squad-setup #sq-side > h3,#scr-squad-setup #sq-side > .setup-choice{grid-column:1}
  #scr-squad-setup .setup-choice{grid-template-columns:repeat(2,1fr)!important}
  #scr-squad-setup .setup-footer{grid-template-columns:1fr}
}

/* ============================================================
   THE ONLINE SCREENS IN THE WIKI AND STORY LOOK (owner, 2026-10-17)
   ROOM / QUICK MATCH / SQUAD MATCH / DOJO ROOM / DOJO SQUAD (#scr-online),
   YOU! ONLINE (#scr-youonline) and the DOJO (#scr-dojo). The top of each
   screen is a window onto the live fight behind it (main.js keeps the demo
   running); the players stand there as picture cards. Everything below
   sits on the wiki's dotted paper. No rule here sets display on a #scr-*
   id: screens are shown only by .screen.active (style.css).
   ============================================================ */
#scr-online.comic,#scr-youonline,#scr-dojo{flex-direction:column;background:transparent;overflow:hidden}
#scr-youonline .yo-body,#scr-dojo .dj-body{flex:1;min-height:0;margin-top:64px;display:flex;flex-direction:column;overflow:hidden}

/* ---------- the window onto the live fight ---------- */
.on-hero{position:relative;flex:none;border-bottom:4px solid #14120f;box-shadow:0 6px 0 rgba(20,18,15,.25);
  background:linear-gradient(180deg,rgba(12,9,14,.08) 0%,rgba(12,9,14,.22) 60%,rgba(12,9,14,.55) 100%)}
.on-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:16px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(20,18,15,.0) 0 18px,rgba(20,18,15,.18) 18px 20px)}

/* ---------- picture cards (the wiki's people cards) ---------- */
.on-pol{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:4px;width:150px;padding:6px 6px 8px;color:#14120f;
  background:linear-gradient(180deg,#fdf6e3,#f0e3c4);border:3px solid #14120f;box-shadow:5px 5px 0 rgba(20,18,15,.38);
  transform:rotate(var(--rot,0deg));transition:transform .12s,box-shadow .12s;font-family:var(--k-comic)}
.on-pol:hover{transform:translateY(-3px) rotate(0)}
.on-pol canvas{width:100%;aspect-ratio:1/1;border:2px solid #14120f;background:#cfe0ea;display:block}
.on-pol.me{background:linear-gradient(180deg,#fff3cf,#f2dfae);box-shadow:5px 5px 0 #c8382f}
.on-pol-name{font-size:15px;font-weight:900;line-height:1.1;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.on-pol-name em{font-style:normal;font-size:10px;color:#7c1f17;letter-spacing:.06em}
.on-pol-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:0}
.on-pol-row:empty{display:none}
.on-pol-sub{font-size:9.5px;font-weight:900;letter-spacing:.08em;color:#5a4f3c;line-height:1.3}
.on-pol.ask canvas{background:#14120f}
.on-pol.ask .on-pol-name{font-size:22px;text-align:center;color:#7c1f17}
.on-pol.ask .on-pol-sub{text-align:center}
.on-pol.ask{border-style:dashed;background:linear-gradient(180deg,rgba(253,246,227,.92),rgba(240,227,196,.92))}
.on-spin{position:absolute;left:50%;top:calc(6px + 69px);width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;pointer-events:none;
  border:5px dashed #f2cb70;border-left-color:transparent;border-bottom-color:transparent;animation:on-spin 1.1s linear infinite}
@keyframes on-spin{to{transform:rotate(360deg)}}
.on-pol.spin canvas{animation:on-pulse 1.6s ease-in-out infinite}
@keyframes on-pulse{50%{filter:brightness(1.35)}}
.on-stamp{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%) rotate(-12deg);font-style:normal;font-weight:900;font-size:19px;letter-spacing:.12em;
  color:#c8382f;border:4px solid #c8382f;padding:2px 10px;background:rgba(253,246,227,.88);font-family:var(--k-comic);pointer-events:none;
  box-shadow:0 0 0 2px rgba(253,246,227,.6)}
.on-stamp.pick{color:#2f6f9a;border-color:#2f6f9a;font-size:15px}
.on-pol .rp-friend-btn{margin:2px 0 0;font-family:var(--k-comic);font-size:10px;font-weight:900;letter-spacing:.08em;padding:4px 6px;cursor:pointer;
  color:#14120f;background:linear-gradient(180deg,#f2cb70,#d99a38);border:2px solid #14120f;border-radius:1px;box-shadow:2px 2px 0 rgba(20,18,15,.3)}
.on-pol .rp-friend-btn:hover:not(:disabled){background:#14120f;color:#f7efd8}
.on-pol .rp-friend{margin-top:2px;font-size:10px;font-weight:900;letter-spacing:.1em;color:#6a6150;text-align:center}
.on-pol .rp-friend.on{color:#2f7a52}

/* VS · the comic burst between the two sides */
.on-vs{flex:none;align-self:center;display:flex;align-items:center;justify-content:center;width:84px;height:84px;margin:0 6px;font-style:normal;
  font-family:var(--k-comic);font-weight:900;font-size:30px;letter-spacing:.04em;color:#14120f;background:#f2cb70;transform:rotate(-8deg);
  clip-path:polygon(50% 0,61% 22%,85% 10%,77% 36%,100% 46%,77% 58%,88% 84%,61% 74%,50% 100%,39% 74%,12% 86%,23% 58%,0 46%,23% 36%,14% 10%,39% 22%);
  filter:drop-shadow(3px 3px 0 #14120f)}
.on-duel{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:nowrap}
.on-team{display:flex;gap:12px;align-items:flex-end}
.on-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.on-duel.searching .on-team:last-child .on-pol{opacity:.94}

/* the rank plates · NOVICE to SENSEI in their metal */
.on-rank{display:inline-flex;align-items:center;gap:4px;font-family:var(--k-comic);font-weight:900;font-size:9.5px;letter-spacing:.1em;line-height:1;
  color:#14120f;background:var(--rk,#c9884f);border:2px solid #14120f;padding:3px 6px;border-radius:1px;box-shadow:2px 2px 0 rgba(20,18,15,.3);white-space:nowrap}
.on-rank i{font-style:normal;opacity:.7;font-size:8px}
.on-rank em{font-style:normal;background:#14120f;color:#f7efd8;padding:2px 4px;margin-left:2px}
.on-rank.r3{color:#f7efd8}
.on-dot{position:absolute;top:10px;right:10px;width:13px;height:13px;border-radius:50%;background:#a49b88;border:2px solid #14120f;z-index:2}
.on-dot.on{background:#3fd08a;box-shadow:0 0 0 3px rgba(63,208,138,.35)}

/* the dojo tag on a card: gold is yours, green an ally, red a rival */
.dojo-chip.is-mine{background:linear-gradient(180deg,#f2cb70,#d99a38)}
.dojo-chip.is-ally{background:linear-gradient(180deg,#9fe0b8,#2f9a64);color:#08130c}
.dojo-chip.is-rival{background:linear-gradient(180deg,#f2a08f,#c8382f);color:#fff7ef}
.dojo-chip{background:#fffaf0}
.dojo-chip.none{background:#e6dcc4;color:#6a6150;border-style:dashed;box-shadow:none}
.on-pol .dojo-chip{margin-left:0}

/* friends with their faces and online dots */
.on-friends{display:flex;flex-direction:column;gap:7px;overflow-y:auto;min-height:0;padding:2px 6px 6px 2px}
.on-friend{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:9px;align-items:center;
  padding:6px 8px;background:var(--k-dots),#fffaf0;border:2px solid #14120f;box-shadow:3px 3px 0 rgba(20,18,15,.22);font-family:var(--k-comic);color:#14120f}
.on-friend canvas{grid-row:1 / span 2;width:42px;height:42px;border-radius:50%;border:2px solid #14120f;background:#cfe0ea}
.on-friend .on-dot{top:auto;bottom:5px;left:38px;right:auto;width:11px;height:11px}
.on-friend b{font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.on-friend > b{grid-column:2;grid-row:1}
.on-friend > .dojo-chip{grid-column:2;grid-row:1;justify-self:end;margin:0}
.on-friend > span{grid-column:2;grid-row:2;font-size:9.5px;font-weight:900;letter-spacing:.12em;color:#6a6150}
.on-friend.online > span{color:#2f7a52}
.on-friend > button{grid-column:3;grid-row:1 / span 2}
.on-friend:not(.online){opacity:.72}

/* comic buttons shared by the new screens */
.dj-btn{font-family:var(--k-comic);font-weight:900;font-size:11px;letter-spacing:.12em;color:#14120f;cursor:pointer;padding:8px 13px;white-space:nowrap;
  background:linear-gradient(180deg,#fdf6e3,#efdfc0);border:3px solid #14120f;border-radius:2px;box-shadow:3px 3px 0 rgba(20,18,15,.35);transition:transform .08s}
.dj-btn.go{background:linear-gradient(180deg,#f2cb70,#d99a38)}
.dj-btn.ally{background:linear-gradient(180deg,#9fe0b8,#3f9c86)}
.dj-btn.rival,.dj-btn.bad{background:linear-gradient(180deg,#f2a08f,#c8382f);color:#fff7ef}
.dj-btn.on{background:#14120f;color:#f2cb70}
.dj-btn.big{font-size:15px;padding:13px 18px}
.dj-btn:hover:not(:disabled),.dj-btn:focus-visible{background:#14120f;color:#f7efd8;transform:translate(-1px,-1px);outline:none}
.dj-btn:disabled{opacity:.45;cursor:not-allowed}
.dj-mini{font-family:var(--k-comic);font-weight:900;font-size:9px;letter-spacing:.08em;padding:3px 5px;cursor:pointer;color:#14120f;
  background:#fffaf0;border:2px solid #14120f;border-radius:1px}
.dj-mini.bad{background:#f2a08f}
.dj-mini:hover{background:#14120f;color:#f7efd8}
.dj-x{font-family:var(--k-comic);font-weight:900;font-size:12px;cursor:pointer;color:#14120f;background:#fffaf0;border:2px solid #14120f;border-radius:1px;padding:1px 7px}
.dj-x:hover{background:#c8382f;color:#fff}
.dj-sec-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.dj-sec-h b{font-family:var(--k-comic);font-size:15px;font-weight:900;letter-spacing:.14em;color:#f7efd8;background:#14120f;padding:4px 12px;
  transform:rotate(-1.2deg);box-shadow:3px 3px 0 #c8382f}
.dj-sec-h span{font-size:11px;font-weight:800;color:#5a4f3c;font-style:italic}
.dj-sec-h.big b{font-size:19px}
.dj-none{margin:6px 2px;font-size:12.5px;line-height:1.45;font-style:italic;color:#5a4f3c}
.dj-hint{margin:4px 0 10px;font-size:12px;line-height:1.45;color:#3a3226;max-width:72ch}
.dj-k{display:block;font-family:var(--k-comic);font-size:10px;font-weight:900;letter-spacing:.18em;color:#5a4a2c;margin-bottom:3px}

/* ============ ROOM / QUICK MATCH / SQUAD / DOJO ROOM / DOJO SQUAD ============ */
#scr-online .bar{z-index:5}
#scr-online .bar .net-rank{margin:0 0 0 auto;padding:0;border:0;background:none;box-shadow:none;display:flex;align-items:center;gap:6px;max-width:none}
#scr-online .bar .net-rank .on-k{font-family:var(--k-comic);font-size:10px;letter-spacing:.18em;color:#7c1f17}
#scr-online .bar .net-rank .on-rank{font-size:11px;padding:4px 8px}
#scr-online .bar .net-rank .on-streak{font-style:normal;font-size:10px;font-weight:900;letter-spacing:.1em;color:#c8382f}
#scr-online .bar #net-tag{margin-right:190px}
#scr-online .on-stage{margin-top:64px;min-height:300px;height:clamp(300px,42vh,400px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:14px 18px 22px}
#scr-online #room-players{display:flex;justify-content:center;align-items:center;margin:0;min-height:0;flex-direction:row;gap:0}
#scr-online .on-status{display:flex;align-items:center;gap:10px;z-index:1}
#scr-online .on-status b{font-family:var(--k-comic);font-style:normal;font-weight:900;font-size:13px;letter-spacing:.08em;color:#f7efd8;background:#14120f;
  padding:6px 14px;border:2px solid #f2cb70;box-shadow:3px 3px 0 rgba(20,18,15,.5);transform:rotate(-.6deg)}
#scr-online .on-status span:empty{display:none}
#scr-online .on-status span{font-family:var(--k-comic);font-weight:900;font-size:15px;color:#14120f;background:#f2cb70;border:2px solid #14120f;padding:4px 10px;box-shadow:3px 3px 0 #14120f}
#scr-online .on-duel.dojo,#scr-online .on-duel.party{gap:16px}
#scr-online .dj-banner.stage{transform:rotate(-2deg) scale(.86);transform-origin:center}

#scr-online .online-body.on-sheet{flex:1;min-height:0;max-width:none;width:100%;margin:0;padding:16px 22px 14px;display:grid;
  grid-template-columns:minmax(260px,340px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:14px 18px;align-content:stretch;
  background:radial-gradient(rgba(20,18,15,.12) 1.1px,transparent 1.3px) 0 0/8px 8px,linear-gradient(180deg,#f7efd8,#eadfc2);overflow:hidden}
#scr-online .on-sheet .panel{min-height:0;overflow-y:auto;padding:12px 14px;transform:rotate(-.25deg)}
#scr-online .on-sheet .panel.on-friendsbox{transform:rotate(.2deg);display:flex;flex-direction:column}
#scr-online .room-friends{margin:0;display:flex;flex-direction:column;min-height:0;flex:1}
#scr-online .room-friends:empty{display:none}
#scr-online .on-ticket .roomcode{font-size:30px;padding:8px 6px}
#scr-online .on-ticket .joinrow{margin:8px 0 0}
#scr-online .on-ticket .joinrow .mbtn{flex:1;margin:0;font-size:11px;padding:9px 8px}
#scr-online .on-ticket #rm-code{min-width:0;letter-spacing:.24em;text-transform:uppercase}
#scr-online .on-actions{grid-column:1 / -1;display:flex;gap:14px;align-items:stretch}
#scr-online .on-actions .mbtn{margin:0;min-height:54px;font-size:15px;letter-spacing:.16em}
#scr-online .on-actions #rm-ready,#scr-online .on-actions #rm-search{flex:2}
#scr-online .on-actions #rm-leave{flex:1}
#scr-online #rm-search[hidden],#scr-online #rm-ready[hidden]{display:none}
/* a search: no room code; a dojo room or squad: members come in from the DOJO */
#scr-online[data-mode="search"] .on-ticket,#scr-online[data-mode="party"] .on-ticket,#scr-online[data-mode="dojoroom"] .on-ticket{display:none}
#scr-online[data-mode="search"] .online-body.on-sheet,#scr-online[data-mode="party"] .online-body.on-sheet,
#scr-online[data-mode="dojoroom"] .online-body.on-sheet{grid-template-columns:minmax(0,1fr)}
#scr-online[data-mode="party"] #rm-ready{display:none}
#scr-online[data-mode="search"] .on-stage{background:linear-gradient(180deg,rgba(12,9,14,.12) 0%,rgba(40,10,10,.35) 100%)}
@media (max-width:860px){
  #scr-online .online-body.on-sheet{grid-template-columns:minmax(0,1fr);overflow-y:auto}
  #scr-online .on-sheet .panel{overflow:visible}
  #scr-online .bar #net-tag{display:none}
  .on-pol{width:116px}
}
@media (max-height:620px){
  #scr-online .on-stage{height:auto;min-height:0;padding:8px 12px 12px;gap:8px}
  .on-pol{width:104px;padding:4px 4px 6px}
  .on-pol-name{font-size:12px}
  .on-vs{width:58px;height:58px;font-size:20px}
  #scr-online .online-body.on-sheet{padding:10px 14px}
  #scr-online .on-actions .mbtn{min-height:42px}
}

/* ============ YOU! ONLINE ============ */
#scr-youonline .yo-hero{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;padding:16px 28px 22px;
  height:clamp(290px,40vh,380px)}
.yo-me{justify-self:start;width:210px;--rot:-1.5deg}
.yo-me canvas{aspect-ratio:1/1}
.yo-me .on-pol-name{font-size:19px}
.yo-me-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.yo-rec{font-family:var(--k-comic);font-weight:900;font-size:11px;letter-spacing:.1em;color:#14120f;background:#fffaf0;border:2px solid #14120f;padding:2px 6px}
.yo-fighter{position:relative;justify-self:center;align-self:stretch;width:clamp(240px,26vw,360px);display:flex;align-items:flex-end;justify-content:center}
.yo-fighter canvas{width:100%;height:112%;display:block;position:absolute;left:0;bottom:0}
.yo-fname{position:absolute;bottom:4px;left:50%;transform:translateX(-50%) rotate(-2deg);font-family:var(--k-comic);font-weight:900;font-size:clamp(20px,2.2vw,32px);
  letter-spacing:.06em;color:#fdf6e3;-webkit-text-stroke:2px #14120f;paint-order:stroke fill;text-shadow:4px 4px 0 #14120f;white-space:nowrap}
.yo-nofighter{align-self:center;max-width:260px;text-align:center;font-family:var(--k-comic);font-weight:900;font-size:14px;line-height:1.4;color:#14120f;
  background:#f2cb70;border:3px solid #14120f;padding:12px 14px;box-shadow:5px 5px 0 #14120f;transform:rotate(-1deg)}
.yo-ladder{justify-self:end;display:flex;flex-direction:column;gap:5px;width:230px;padding:10px 12px;background:var(--k-dots),#fdf6e3;border:3px solid #14120f;
  box-shadow:5px 5px 0 rgba(20,18,15,.4);transform:rotate(1deg)}
.yo-ladder-h{font-family:var(--k-comic);font-weight:900;font-size:12px;letter-spacing:.2em;color:#f7efd8;background:#14120f;padding:3px 8px;align-self:flex-start;box-shadow:2px 2px 0 #c8382f}
.yo-ladder-f{font-size:10px;font-weight:800;color:#5a4f3c;font-style:italic}
.yo-rung{position:relative;display:flex;align-items:center;gap:6px;padding:4px 8px;border:2px solid #14120f;background:var(--rk);font-family:var(--k-comic);color:#14120f;overflow:hidden}
.yo-rung b{font-size:12px;font-weight:900;letter-spacing:.1em;position:relative;z-index:1}
.yo-rung i{font-style:normal;font-size:9px;font-weight:900;letter-spacing:.12em;opacity:.7;position:relative;z-index:1}
.yo-rung.past{opacity:.55}
.yo-rung:not(.me):not(.past){opacity:.82;filter:saturate(.7)}
.yo-rung.me{transform:translateX(-8px) scale(1.04);box-shadow:4px 4px 0 #c8382f}
.yo-rung .yo-you{margin-left:auto;font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:.08em;background:#14120f;color:#f2cb70;padding:2px 5px;position:relative;z-index:1}
.yo-rung u{position:absolute;left:0;bottom:0;height:4px;background:#c8382f}
.yo-rung:nth-child(5) b,.yo-rung:nth-child(5) i{color:#f7efd8}

#scr-youonline .yo-sheet{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:18px;padding:18px 24px 16px;overflow:hidden;
  background:radial-gradient(rgba(20,18,15,.12) 1.1px,transparent 1.3px) 0 0/8px 8px,linear-gradient(180deg,#f7efd8,#eadfc2)}
.yo-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-content:start;min-height:0;overflow-y:auto;padding:4px 8px 10px 4px}
.yo-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:8px 8px 12px;cursor:pointer;color:#14120f;outline:none;
  background:linear-gradient(180deg,#fdf6e3,#f0e3c4);border:3px solid #14120f;box-shadow:5px 5px 0 rgba(20,18,15,.35);transition:transform .12s,box-shadow .12s}
.yo-card:nth-child(odd){transform:rotate(-.8deg)}
.yo-card:nth-child(even){transform:rotate(.7deg)}
.yo-card:hover,.yo-card:focus{transform:translateY(-5px) rotate(0);box-shadow:8px 8px 0 #c8382f}
.yo-pic{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;aspect-ratio:4/3;border:2px solid #14120f;overflow:hidden;
  background:radial-gradient(rgba(20,18,15,.14) 1px,transparent 1.2px) 0 0/6px 6px,#cfe0ea}
.yo-pic-room{background:radial-gradient(rgba(20,18,15,.14) 1px,transparent 1.2px) 0 0/6px 6px,#f2cb70}
.yo-pic-quick{background:radial-gradient(rgba(20,18,15,.14) 1px,transparent 1.2px) 0 0/6px 6px,#e98a6b}
.yo-pic-squad{background:radial-gradient(rgba(20,18,15,.14) 1px,transparent 1.2px) 0 0/6px 6px,#8fc7a8}
.yo-pic-dojo{background:radial-gradient(rgba(20,18,15,.14) 1px,transparent 1.2px) 0 0/6px 6px,#b8a4d8}
.yo-pic canvas{width:38%;aspect-ratio:1/1;border:2px solid #14120f;background:#cfe0ea;box-shadow:3px 3px 0 rgba(20,18,15,.4)}
.yo-pic canvas:first-child{transform:rotate(-4deg)}
.yo-pic canvas:last-child{transform:rotate(4deg)}
.yo-pic .yo-vs{font-style:normal;font-family:var(--k-comic);font-weight:900;font-size:18px;color:#14120f;background:#fdf6e3;border:2px solid #14120f;padding:2px 6px;transform:rotate(-8deg);z-index:1}
.yo-team{display:flex;flex-direction:column;gap:4px;width:30%;align-items:center}
.yo-team canvas{width:78%;transform:none!important}
.yo-title{font-family:var(--k-comic);font-size:20px;font-weight:900;letter-spacing:.1em}
.yo-line{font-size:12px;line-height:1.35;color:#3a3226}
.yo-sizes{display:flex;gap:8px}
.yo-sizes .dj-btn{flex:1;font-size:13px}
.yo-side{display:flex;flex-direction:column;min-height:0;padding:12px;background:var(--k-dots),#fdf6e3;border:3px solid #14120f;box-shadow:5px 5px 0 rgba(20,18,15,.3);transform:rotate(.4deg)}
.yo-side .dj-btn{align-self:flex-start;margin-top:6px}
@media (max-width:1250px){.yo-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.yo-pic{aspect-ratio:16/9}}
@media (max-width:860px){
  #scr-youonline .yo-hero{grid-template-columns:auto minmax(0,1fr);height:auto;padding:12px}
  .yo-fighter{display:none}
  .yo-ladder{width:auto}
  #scr-youonline .yo-sheet{grid-template-columns:minmax(0,1fr);overflow-y:auto}
}
@media (max-height:620px){
  #scr-youonline .yo-hero{height:auto;padding:8px 16px 12px}
  .yo-me{width:150px}
  .yo-ladder{width:200px;gap:3px;padding:6px 8px}
}

/* ============ THE DOJO ============ */
.dj-band{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;padding:14px 26px 20px;min-height:250px}
.dj-info{min-width:0;display:flex;flex-direction:column;gap:6px;padding:12px 16px;background:var(--k-dots),rgba(253,246,227,.94);border:3px solid #14120f;
  box-shadow:5px 5px 0 rgba(20,18,15,.4);transform:rotate(-.4deg);max-width:640px}
.dj-name{font-family:var(--k-comic);font-weight:900;font-size:clamp(22px,2.4vw,34px);letter-spacing:.04em;line-height:1.05;color:#14120f;text-shadow:2px 2px 0 #f2cb70}
.dj-sub{font-size:11px;font-weight:900;letter-spacing:.12em;color:#5a4a2c}
.dj-motto{font-size:13px;font-style:italic;color:#3a3226}
.dj-lede{margin:0;font-size:13px;line-height:1.45;color:#3a3226}
.dj-wait{margin:0;font-size:12px;font-weight:900;color:#c8382f}
.dj-bars{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.dj-bar{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:8px}
.dj-lv{font-family:var(--k-comic);font-size:10.5px;font-weight:900;letter-spacing:.14em;color:#f7efd8;background:#14120f;padding:3px 6px;text-align:center}
.dj-meter{height:13px;border:2px solid #14120f;background:#e7dcc0;box-shadow:inset 0 2px 3px rgba(0,0,0,.14);overflow:hidden}
.dj-meter i{display:block;height:100%;background:linear-gradient(90deg,#c8382f,#e8644a)}
.dj-bar.goal .dj-meter i{background:linear-gradient(90deg,#2f8a57,#5fc98f)}
.dj-bar.done .dj-lv{background:#2f8a57}
.dj-bar b{font-size:11px;font-weight:900;letter-spacing:.06em;color:#14120f;white-space:nowrap}
.dj-facts{display:flex;flex-wrap:wrap;gap:6px}
.dj-facts span{font-size:10px;font-weight:900;letter-spacing:.1em;color:#14120f;background:#fffaf0;border:2px solid #14120f;padding:2px 7px}
.dj-facts span.war,.dj-facts span.rival{background:#f2a08f}
.dj-facts span.ally{background:#9fe0b8}
.dj-go{display:flex;flex-direction:column;gap:10px;align-self:center}
.dj-play{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:210px;padding:10px 14px;cursor:pointer;text-align:left;
  font-family:var(--k-comic);color:#14120f;background:linear-gradient(180deg,#f2cb70,#d99a38);border:3px solid #14120f;box-shadow:5px 5px 0 #14120f;transform:rotate(1deg)}
.dj-play.squad{background:linear-gradient(180deg,#9fe0b8,#3f9c86);transform:rotate(-1deg);cursor:default}
.dj-play b{font-size:17px;font-weight:900;letter-spacing:.12em}
.dj-play span{font-size:9.5px;font-weight:900;letter-spacing:.12em;opacity:.8}
button.dj-play:hover,button.dj-play:focus-visible{transform:translate(-2px,-3px) rotate(0);box-shadow:7px 8px 0 #14120f;outline:none}
.dj-faces{display:flex;gap:3px;margin-top:4px;font-style:normal}
.dj-faces canvas{width:24px;height:24px;border-radius:50%;border:2px solid #14120f;background:#cfe0ea}
.dj-sq{display:flex;gap:8px;margin-top:6px}
.dj-sq .dj-btn{padding:6px 12px;font-size:12px}

/* the banner: a cloth on a rod, in the dojo's colour, with its emblem and tag */
.dj-banner{--bn:#c8382f;--bi:#fdf6e3;position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  width:120px;height:170px;padding-top:18px;gap:6px;color:var(--bi);font-family:var(--k-comic)}
.dj-banner::before{content:'';position:absolute;inset:10px 6px 0;background:var(--bn);border:3px solid #14120f;z-index:0;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);box-shadow:none}
.dj-banner::after{content:'';position:absolute;inset:10px 6px 0;z-index:0;pointer-events:none;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 30%,transparent 70%,rgba(0,0,0,.2))}
.dj-bn-rod{position:absolute;top:4px;left:-4px;right:-4px;height:9px;background:linear-gradient(180deg,#7a5a32,#3a2a18);border:2px solid #14120f;border-radius:5px;z-index:2}
.dj-bn-em{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;margin-top:10px;
  font-family:"Yu Mincho","Hiragino Mincho ProN","MS Mincho",serif;font-size:38px;font-weight:900;line-height:1;color:var(--bi);
  background:rgba(255,255,255,.14);border:3px solid var(--bi)}
.dj-bn-tag{position:relative;z-index:1;font-size:17px;font-weight:900;letter-spacing:.08em;color:var(--bi)}
.dj-bn-stars{position:relative;z-index:1;font-style:normal;font-size:12px;color:#f2cb70;-webkit-text-stroke:1px #14120f;letter-spacing:1px}
.dj-bn-badge{position:absolute;z-index:3;top:-6px;right:-14px;text-decoration:none;font-size:10px;font-weight:900;letter-spacing:.06em;color:#14120f;
  background:#f2cb70;border:2px solid #14120f;padding:2px 5px;transform:rotate(10deg);box-shadow:2px 2px 0 #14120f}
.dj-banner.big{width:150px;height:210px;transform:rotate(-2deg);filter:drop-shadow(6px 6px 0 rgba(20,18,15,.45))}
.dj-banner.big .dj-bn-em{width:76px;height:76px;font-size:48px}
.dj-banner.big .dj-bn-tag{font-size:21px}
.dj-banner.mini{width:46px;height:64px;padding-top:9px;gap:2px}
.dj-banner.mini::before,.dj-banner.mini::after{inset:6px 3px 0;border-width:2px}
.dj-banner.mini .dj-bn-rod{height:6px;top:2px;left:-2px;right:-2px;border-width:1px}
.dj-banner.mini .dj-bn-em{width:24px;height:24px;font-size:15px;border-width:2px;margin-top:4px}
.dj-banner.mini .dj-bn-tag{font-size:8px;letter-spacing:.02em;max-width:40px;overflow:hidden}
.dj-banner.mini .dj-bn-stars,.dj-banner.mini .dj-bn-badge{display:none}
.dj-banner.card{width:42%;height:92%;padding-top:12px}
.dj-banner.card .dj-bn-em{width:46px;height:46px;font-size:28px}
.dj-banner.war{width:120px;height:170px}
.dj-banner-empty::before{background:repeating-linear-gradient(45deg,rgba(20,18,15,.08) 0 8px,rgba(253,246,227,.9) 8px 16px);border-style:dashed}
.dj-banner-empty{--bi:#5a4a2c}

.dj-sheet{flex:1;min-height:0;display:flex;flex-direction:column;
  background:radial-gradient(rgba(20,18,15,.12) 1.1px,transparent 1.3px) 0 0/8px 8px,linear-gradient(180deg,#f7efd8,#eadfc2)}
.dj-tabs{flex:none;display:flex;flex-wrap:wrap;gap:8px;padding:14px 24px 4px}
.dj-tab{font-family:var(--k-comic);font-weight:900;font-size:12px;letter-spacing:.14em;color:#f7efd8;background:#14120f;border:2px solid #3a342a;border-radius:8px;
  padding:7px 16px;cursor:pointer;transition:transform .08s}
.dj-tab.on{background:#c8382f;border-color:#e8b04a;color:#fff7ef;box-shadow:0 0 0 2px rgba(232,176,74,.35)}
.dj-tab:hover,.dj-tab:focus-visible{transform:translateY(-2px);outline:none}
.dj-badge{display:inline-block;min-width:16px;margin-left:4px;padding:1px 4px;font-style:normal;font-size:10px;line-height:14px;text-align:center;color:#14120f;background:#f2cb70;border-radius:8px}
.dj-flash{margin:6px 24px 0;padding:7px 12px;font-family:var(--k-comic);font-weight:900;font-size:12.5px;letter-spacing:.04em;border:2px solid #14120f;box-shadow:3px 3px 0 rgba(20,18,15,.25)}
.dj-flash.ok{background:#bfe9cf;color:#0e3a24}
.dj-flash.bad{background:#f7c6b9;color:#5a120c}
.dj-flash[hidden]{display:none}
.dj-panel{flex:1;min-height:0;overflow-y:auto;padding:12px 24px 34px}
.dj-row{margin:0 0 14px;padding:10px 12px;background:var(--k-dots),#fdf6e3;border:3px solid #14120f;box-shadow:4px 4px 0 rgba(20,18,15,.28)}
.dj-field{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dj-field .dj-k{flex-basis:100%}
.dj-field input,.dj-field select,.dj-form input,.dj-write input,.dj-write textarea,.dj-sheet select{font-family:var(--k-comic);font-weight:700;font-size:13px;color:#14120f;background:#fffaf0;
  border:2px solid #14120f;border-radius:1px;padding:7px 9px;min-width:0}
.dj-field input{flex:1;max-width:280px}
.dj-field input:focus,.dj-form input:focus,.dj-write input:focus,.dj-write textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(232,176,75,.7)}
.dj-quick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.dj-quick .dj-k{flex-basis:100%;margin:0}
.on-fchip{display:inline-flex;align-items:center;gap:6px;font-family:var(--k-comic);font-weight:900;font-size:12px;color:#14120f;background:#fffaf0;border:2px solid #14120f;
  padding:3px 8px 3px 3px;cursor:pointer;box-shadow:2px 2px 0 rgba(20,18,15,.25)}
.on-fchip canvas{width:24px;height:24px;border-radius:50%;border:2px solid #14120f;background:#cfe0ea}
.on-fchip em{font-style:normal;font-size:9px;letter-spacing:.1em;color:#7c1f17}
.on-fchip:hover{background:#14120f;color:#f7efd8}
.dj-pend{font-size:11px;font-weight:900;letter-spacing:.06em;color:#5a4a2c;background:#efe4c8;border:2px dashed #14120f;padding:2px 7px}
.dj-reqs{display:flex;flex-direction:column;gap:6px}
.dj-req{display:flex;align-items:center;gap:8px}
.dj-req canvas{width:34px;height:34px;border-radius:50%;border:2px solid #14120f;background:#cfe0ea}
.dj-req b{flex:1;font-family:var(--k-comic);font-size:14px}

.dj-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:18px 14px;padding:6px 4px}
.dj-mgrid.small{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px 10px}
.dj-mem{width:auto}
.dj-mem:not(.online) canvas{filter:grayscale(.55) brightness(.92)}
.dj-role{position:absolute;top:-10px;left:-8px;z-index:3;font-style:normal;font-family:var(--k-comic);font-weight:900;font-size:10px;letter-spacing:.12em;
  padding:3px 7px;border:2px solid #14120f;transform:rotate(-6deg);box-shadow:2px 2px 0 #14120f}
.dj-role.head{background:#c8382f;color:#fff7ef}
.dj-role.officer{background:#f2cb70;color:#14120f}
.dj-acts{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}

.dj-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.dj-sec{margin:0 0 16px}
.dj-drow{display:flex;align-items:center;gap:12px;margin:0 0 8px;padding:6px 10px;cursor:pointer;background:var(--k-dots),#fffaf0;border:2px solid #14120f;
  border-left:10px solid #8a8170;box-shadow:3px 3px 0 rgba(20,18,15,.25);transition:transform .1s}
.dj-drow:hover{transform:translateX(3px)}
.dj-drow.ally{border-left-color:#2f9a64}
.dj-drow.rival{border-left-color:#c8382f}
.dj-drow-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dj-drow-txt b{font-family:var(--k-comic);font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dj-drow-txt span{font-size:10px;font-weight:900;letter-spacing:.1em;color:#5a4f3c}
.dj-res{font-family:var(--k-comic);font-weight:900;font-size:12px;letter-spacing:.1em;padding:3px 8px;border:2px solid #14120f;background:#efe4c8}
.dj-res.won{background:#9fe0b8}
.dj-res.lost{background:#f2a08f}
.dj-by{font-size:10px;font-weight:900;letter-spacing:.1em;color:#5a4f3c}
.dj-linkbox .dj-field input{max-width:120px;letter-spacing:.2em;text-transform:uppercase}

.dj-war{display:flex;align-items:center;justify-content:center;gap:26px;margin:0 0 16px;padding:16px;border:3px solid #14120f;box-shadow:5px 5px 0 rgba(20,18,15,.3);
  background:repeating-linear-gradient(-45deg,rgba(200,56,47,.08) 0 14px,transparent 14px 28px),#fdf6e3}
.dj-war.off{flex-direction:column;align-items:flex-start;gap:6px}
.dj-war.off b{font-family:var(--k-comic);font-size:18px;letter-spacing:.12em}
.dj-war.off span{font-size:12.5px;line-height:1.45;color:#3a3226;max-width:70ch}
.dj-score{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--k-comic);text-align:center}
.dj-score b{font-size:54px;font-weight:900;line-height:1;color:#14120f;text-shadow:3px 3px 0 #f2cb70}
.dj-score{display:grid;grid-template-columns:auto auto auto;align-items:center;column-gap:10px}
.dj-score i{font-style:normal;font-size:40px;font-weight:900}
.dj-score span,.dj-score em{grid-column:1 / -1}
.dj-score span{font-size:12px;font-weight:900;letter-spacing:.14em;color:#c8382f}
.dj-score em{font-style:normal;font-size:11px;color:#3a3226;max-width:280px;line-height:1.4}

.dj-write{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.dj-write .dj-k{grid-column:1 / -1;margin:0}
.dj-write textarea{grid-column:1;resize:vertical;line-height:1.4}
.dj-write input{grid-column:1}
.dj-write .dj-btn{grid-column:2;grid-row:2 / span 2;align-self:stretch}
.dj-hist{display:flex;flex-direction:column;gap:8px;max-width:900px}
.dj-h{position:relative;display:flex;align-items:flex-start;gap:12px;padding:8px 12px;background:var(--k-dots),#fffaf0;border:2px solid #14120f;
  box-shadow:3px 3px 0 rgba(20,18,15,.22);transform:rotate(var(--rot,0deg))}
.dj-h-stamp{flex:none;display:flex;align-items:center;justify-content:center;min-width:46px;height:30px;padding:0 6px;font-style:normal;font-family:var(--k-comic);
  font-weight:900;font-size:11px;letter-spacing:.08em;color:#f7efd8;background:#5a4a2c;border:2px solid #14120f;transform:rotate(-4deg)}
.dj-h.k-win .dj-h-stamp,.dj-h.k-goal .dj-h-stamp,.dj-h.k-badge .dj-h-stamp,.dj-h.k-level .dj-h-stamp{background:#2f8a57}
.dj-h.k-loss .dj-h-stamp,.dj-h.k-rival .dj-h-stamp,.dj-h.k-kick .dj-h-stamp{background:#c8382f}
.dj-h.k-war .dj-h-stamp{background:#14120f;color:#f2cb70}
.dj-h.k-note .dj-h-stamp,.dj-h.k-found .dj-h-stamp{background:#f2cb70;color:#14120f}
.dj-h.k-ally .dj-h-stamp,.dj-h.k-join .dj-h-stamp{background:#3f9c86}
.dj-h-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dj-h-txt b{font-family:var(--k-comic);font-size:13px;letter-spacing:.08em}
.dj-h-txt span{font-size:13px;line-height:1.4;color:#241d15}
.dj-h-txt em{font-style:normal;font-size:10px;font-weight:900;letter-spacing:.1em;color:#7a6a4a}
.dj-hist.small .dj-h{transform:none;padding:5px 8px}

.dj-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 18px}
.dj-lvl{position:relative;display:flex;flex-direction:column;gap:4px;padding:10px 10px 12px;background:#e6dcc4;border:3px solid #14120f;color:#5a4f3c;
  box-shadow:3px 3px 0 rgba(20,18,15,.2);filter:grayscale(.4)}
.dj-lvl.have{background:var(--k-dots),#fdf6e3;color:#14120f;filter:none}
.dj-lvl.cur{box-shadow:5px 5px 0 #c8382f;transform:translateY(-3px)}
.dj-lvl-n{position:absolute;top:-12px;right:-8px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-style:normal;font-family:var(--k-comic);
  font-weight:900;font-size:16px;color:#f7efd8;background:#14120f;border-radius:50%;border:2px solid #f2cb70}
.dj-lvl b{font-family:var(--k-comic);font-size:13px;letter-spacing:.08em}
.dj-lvl span{font-size:11px;line-height:1.35}
.dj-lvl em{font-style:normal;margin-top:auto;font-size:9.5px;font-weight:900;letter-spacing:.12em}
.dj-lvl u{position:absolute;bottom:6px;right:8px;text-decoration:none;font-weight:900;color:#2f8a57;font-size:16px}
.dj-sw{display:flex;gap:4px}
.dj-sw i{width:18px;height:18px;border:2px solid #14120f}

.dj-ladder{display:flex;flex-direction:column;gap:6px;max-width:820px}
.dj-lrow{display:flex;align-items:center;gap:12px;padding:5px 12px;cursor:pointer;background:var(--k-dots),#fffaf0;border:2px solid #14120f;box-shadow:3px 3px 0 rgba(20,18,15,.2)}
.dj-lrow.top{border-left:10px solid #f2cb70}
.dj-lrow.is-mine{background:linear-gradient(90deg,#fff3cf,#fdf6e3);box-shadow:4px 4px 0 #c8382f}
.dj-lrow.is-ally{border-right:8px solid #2f9a64}
.dj-lrow.is-rival{border-right:8px solid #c8382f}
.dj-place{font-style:normal;font-family:var(--k-comic);font-weight:900;font-size:22px;min-width:34px;text-align:center}
.dj-sxp{font-family:var(--k-comic);font-size:15px;white-space:nowrap}

.dj-btnrow{display:flex;flex-wrap:wrap;gap:8px}
.dj-crew{display:flex;align-items:center;gap:10px;margin:0 0 6px;padding:5px 10px;background:#fffaf0;border:2px solid #14120f}
.dj-crew i{font-style:normal;font-weight:900;color:#2c6a58}
.dj-crew b{font-family:var(--k-comic)}
.dj-crew span{flex:1;font-size:11px;color:#5a4f3c}
.dj-sec .dj-field{margin-top:8px}
.dj-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;margin:0 0 10px}
.dj-form label{display:flex;flex-direction:column}
.dj-form .wide{grid-column:1 / -1}
.dj-form input.tag,.dj-form input#dj-f-tag{letter-spacing:.24em;text-transform:uppercase}
.dj-swatches,.dj-emblems{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.dj-swatch{width:36px;height:36px;cursor:pointer;background:var(--sw);border:3px solid #14120f;border-radius:2px;box-shadow:2px 2px 0 rgba(20,18,15,.3);
  font-family:var(--k-comic);font-weight:900;font-size:12px;color:#fff;text-shadow:1px 1px 0 #14120f}
.dj-swatch.on{outline:3px solid #f2cb70;outline-offset:2px;transform:translateY(-2px)}
.dj-swatch.locked{opacity:.45;cursor:not-allowed;background:linear-gradient(135deg,var(--sw) 50%,#14120f 50%)}
.dj-emb{width:40px;height:40px;cursor:pointer;font-family:"Yu Mincho","Hiragino Mincho ProN","MS Mincho",serif;font-size:22px;font-weight:900;color:#14120f;background:#fffaf0;
  border:2px solid #14120f;border-radius:50%;box-shadow:2px 2px 0 rgba(20,18,15,.3)}
.dj-emb.on{background:#14120f;color:#f2cb70}
.dj-foundform{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start;max-width:980px}
.dj-foundform .dj-banner.preview{margin-top:8px}
.dj-sec.bye{margin-top:22px;padding-top:12px;border-top:3px dashed rgba(20,18,15,.35)}
.dj-found{margin-top:4px}
.dj-rel{font-style:normal;font-size:11px;letter-spacing:.12em;padding:2px 7px;border:2px solid #14120f;vertical-align:middle}
.dj-rel.mine{background:#f2cb70}.dj-rel.ally{background:#9fe0b8}.dj-rel.rival{background:#f2a08f}

/* another dojo's page, over the dojo screen */
.dj-page{position:absolute;inset:64px 0 0;z-index:20;display:flex;align-items:flex-start;justify-content:center;padding:22px 16px;overflow-y:auto;
  background:rgba(12,10,8,.55);backdrop-filter:blur(2px)}
.dj-page[hidden]{display:none}
.dj-pagebox{position:relative;width:min(980px,96vw);padding:18px 20px 22px;background:var(--k-dots),#fdf6e3;border:4px solid #14120f;
  box-shadow:10px 10px 0 rgba(0,0,0,.45);border-top:12px solid var(--bn,#c8382f)}
.dj-pagebox .dj-x.close{position:absolute;top:10px;right:10px}
.dj-pagehead{display:flex;gap:22px;align-items:flex-start;margin:0 0 16px}
.dj-pagehead .dj-info{transform:none;box-shadow:none;border-width:2px;flex:1}
.dj-pagebox .dj-mgrid{margin-bottom:12px}

/* the profile's dojo corner */
.pf-dojo-row{display:flex;align-items:center;gap:12px}

/* THE DOJO IN A FIGHT · the call at the start of a rivals' or a war fight */
.dj-call{position:absolute;left:50%;top:24%;z-index:40;transform:translate(-50%,-50%) rotate(-3deg);display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 30px 16px;background:#14120f;border:4px solid #f2cb70;box-shadow:8px 8px 0 #c8382f;pointer-events:none;animation:dj-call-in .45s cubic-bezier(.2,1.6,.4,1)}
.dj-call b{font-family:var(--k-comic);font-size:clamp(28px,4.4vw,56px);font-weight:900;letter-spacing:.12em;color:#f2cb70;text-shadow:3px 3px 0 #c8382f}
.dj-call span{font-family:var(--k-comic);font-size:clamp(16px,2vw,24px);font-weight:900;letter-spacing:.1em;color:#f7efd8}
.dj-call span i{font-style:normal;color:#c8382f;margin:0 8px}
.dj-call span.small{font-size:clamp(11px,1.2vw,14px);letter-spacing:.14em}
.dj-call.out{opacity:0;transition:opacity .6s}
@keyframes dj-call-in{from{transform:translate(-50%,-50%) rotate(-3deg) scale(.3);opacity:0}}

@media (max-width:1100px){
  .dj-band{grid-template-columns:auto minmax(0,1fr)}
  .dj-go{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
  .dj-levels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dj-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  #scr-dojo .dj-body{overflow-y:auto}
  .dj-band{grid-template-columns:minmax(0,1fr);padding:10px 12px 14px}
  .dj-banner.big{display:none}
  .dj-sheet{flex:none}
  .dj-panel{overflow:visible}
  .dj-form{grid-template-columns:minmax(0,1fr)}
  .dj-foundform{grid-template-columns:minmax(0,1fr)}
  .dj-tabs{padding:10px 12px 2px}
  .dj-panel{padding:10px 12px 24px}
}
@media (max-height:620px){
  .dj-band{min-height:0;padding:8px 18px 12px}
  .dj-banner.big{width:110px;height:150px}
  .dj-banner.big .dj-bn-em{width:54px;height:54px;font-size:32px}
}

/* ---- the new sheets are inked (the body's own colour is the dark theme's light text) ---- */
#scr-dojo .dj-sheet,#scr-dojo .dj-band,.dj-page,#scr-youonline .yo-sheet,#scr-youonline .yo-hero,#scr-online .on-sheet,#scr-online .on-stage{color:#14120f}
/* the old room rows' paper box does not wrap the new picture cards */
#scr-online.comic .roomplayers > div{background:none;border:0;box-shadow:none;padding:0;font-weight:inherit}
#scr-online.comic .on-status .roomstate{color:#f7efd8;font-style:normal;font-size:13px;letter-spacing:.06em}
#scr-online .on-ticket .roomcode{font-size:26px;letter-spacing:.14em;text-indent:.14em;white-space:nowrap;overflow:hidden}
#scr-online .online-body.on-sheet{grid-template-columns:minmax(300px,380px) minmax(0,1fr)}
#scr-online .on-ticket .joinrow .mbtn{font-size:10.5px;letter-spacing:.1em;white-space:nowrap}
/* friends as a wall of face cards, the way the wiki shows people */
.on-friends{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));align-content:start;gap:9px}
.yo-side .on-friends{grid-template-columns:minmax(0,1fr)}
.dj-field input::placeholder,.dj-form input::placeholder,.dj-write input::placeholder,.dj-write textarea::placeholder,#scr-online #rm-code::placeholder{color:#a89c84}
/* an empty banner: a dashed cloth with a question mark */
.dj-banner-empty::before{background:repeating-linear-gradient(45deg,rgba(20,18,15,.06) 0 8px,rgba(253,246,227,.94) 8px 16px)}
.dj-banner-empty .dj-bn-tag{font-size:12px;letter-spacing:.06em;max-width:84%;text-align:center;line-height:1.1}
.dj-banner.big.dj-banner-empty .dj-bn-tag{font-size:14px}
/* the ladder: dark rung, light letters; the YOU chip on one line */
.yo-rung.r3 b,.yo-rung.r3 i{color:#f7efd8}
.yo-rung:nth-child(5) b,.yo-rung:nth-child(5) i{color:inherit}
.yo-rung .yo-you{white-space:nowrap}
.dj-btn.asked{background:#e6dcc4;color:#6a6150;border-style:dashed}
/* Dojo.cardTags · a player's dojo tag and rank plate side by side on any online card */
.on-tags{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}
.on-tags:empty{display:none}
.on-tags .dojo-chip{margin-left:0}