/* Post-login NTO character selector — design language from /character/ and the landing.
   Scoped to #screen-chars: gameplay HUD, engine and saves remain untouched. */
#screen-chars{overflow-x:hidden;overflow-y:auto;background:#090708;color:#ead8bf;font-family:"Noto Serif",Georgia,serif}
#screen-chars *{box-sizing:border-box}
#screen-chars button,#screen-chars a{font-family:inherit}
#screen-chars a{color:inherit;text-decoration:none}
#screen-chars button:focus-visible,#screen-chars a:focus-visible{outline:2px solid #e9ba80;outline-offset:4px}
#screen-chars .cs-shell{min-height:100%;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 20%,rgba(92,30,29,.16),transparent 50%),#090708;position:relative}
#screen-chars .cs-shell::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0,rgba(232,191,140,.025) 49.9%,transparent 50.1%),linear-gradient(0deg,transparent 0,rgba(232,191,140,.023) 49.9%,transparent 50.1%);background-size:80px 80px;opacity:.32}
#screen-chars .cs-header{min-height:80px;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:11px clamp(18px,3.2vw,54px);background:rgba(9,7,8,.97);border-bottom:1px solid #58322b}
#screen-chars .cs-wordmark{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;color:#ead4b6;font:900 28px "Barlow Condensed",Impact,sans-serif;letter-spacing:.105em}
#screen-chars .cs-wordmark em{font-style:normal;color:#d13b36}
#screen-chars .cs-mark{font:37px Georgia,serif;color:#c03935}
#screen-chars .cs-header-label{font:600 10px "Cinzel",Georgia,serif;letter-spacing:.19em;color:#a68d7a;white-space:nowrap}
#screen-chars .cs-header-label span{color:#ba463c;padding:0 4px}
#screen-chars .cs-account{display:flex;gap:19px;align-items:center;max-width:50%;min-width:0}
#screen-chars .cs-account>div{display:grid;justify-items:end;min-width:0}
#screen-chars .cs-account small{font:700 9px "Cinzel",serif;letter-spacing:.13em;color:#a58a78}
#screen-chars .cs-account strong{max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:800 17px "Barlow Condensed",sans-serif;letter-spacing:.055em;color:#f4e0c8}
#screen-chars .cs-logout{flex-shrink:0;padding:11px 13px;background:transparent;border:1px solid #623a30;color:#c8a88e;cursor:pointer;font:700 12px "Barlow Condensed",sans-serif;letter-spacing:.12em}
#screen-chars .cs-logout:hover{background:#361a19;border-color:#b15c4a;color:#f7dac0}
#screen-chars .cs-layout{position:relative;z-index:1;flex:1;width:min(100%,1690px);min-height:min(765px,calc(100svh - 126px));margin:0 auto;display:grid;grid-template-columns:minmax(245px,320px) minmax(290px,1fr) minmax(300px,395px);border-left:1px solid #48271f;border-right:1px solid #48271f}
#screen-chars .cs-roster,#screen-chars .cs-details{min-width:0;background:linear-gradient(180deg,rgba(34,18,19,.98),rgba(12,9,10,.98));padding:clamp(26px,2.6vw,42px) clamp(21px,2.3vw,37px)}
#screen-chars .cs-roster{border-right:1px solid #5b352b;display:flex;flex-direction:column}
#screen-chars .cs-details{border-left:1px solid #5b352b;display:flex;flex-direction:column}
#screen-chars .cs-eyebrow{display:flex;align-items:center;gap:12px;margin:0;color:#b8967d;font:700 10px "Cinzel",Georgia,serif;letter-spacing:.11em}
#screen-chars .cs-numeral{display:grid;place-items:center;width:32px;height:32px;border:1px solid #9b4939;background:rgba(80,23,23,.3);color:#d07158;font:21px Georgia,serif}
#screen-chars .cs-roster h1,#screen-chars .cs-details h2{font:900 clamp(46px,4.1vw,67px)/.91 "Barlow Condensed",Impact,sans-serif;letter-spacing:.023em;color:#f1dbc3;margin:31px 0 15px}
#screen-chars .cs-roster h1 em,#screen-chars .cs-details h2 em{font-style:normal;color:#cd423a}
#screen-chars .cs-intro{font:13px/1.9 "Noto Serif",Georgia,serif;color:#b09a86;margin:0 0 12px}
#screen-chars .cs-slots{display:flex;flex-direction:column;gap:10px;margin-top:28px;max-height:52vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#724638 transparent;scrollbar-width:thin}
#screen-chars .cs-slot{position:relative;display:flex;align-items:center;width:100%;min-width:0;text-align:left;gap:10px;min-height:89px;padding:11px 10px;border:1px solid #49332d;background:rgba(24,17,19,.86);color:#e7d5c2;cursor:pointer;transition:background .18s,border-color .18s}
#screen-chars .cs-slot::before{position:absolute;content:"";inset:0 auto 0 0;width:3px;background:transparent}
#screen-chars .cs-slot:hover,#screen-chars .cs-slot.is-selected{background:rgba(91,33,31,.42);border-color:#b6624b}
#screen-chars .cs-slot.is-selected::before{background:#ce4a3b}
#screen-chars .cs-slot .cs-slot-index{flex:0 0 21px;color:#9c7565;font:700 10px "Cinzel",serif}
#screen-chars .cs-slot .cs-slot-avatar{flex:0 0 60px;width:60px;height:60px;display:grid;place-items:center;border:1px solid rgba(178,103,75,.26);background:radial-gradient(circle at 50% 55%,#49302b 0,#1b1417 75%)}
#screen-chars .cs-slot .cs-slot-info{min-width:0;flex:1}
#screen-chars .cs-slot strong{display:block;font:800 21px "Barlow Condensed",sans-serif;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#screen-chars .cs-slot small{display:block;margin-top:5px;color:#a68d7a;font:600 10px "Cinzel",serif;letter-spacing:.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#screen-chars .cs-slot-arrow{color:#bb765a;font:24px Georgia,serif}
#screen-chars .cs-roster-bottom{margin-top:auto;padding-top:22px}
#screen-chars .cs-roster-bottom p{border-top:1px solid #654136;margin:0 0 19px;padding-top:17px;color:#9a7d6b;font:12px "Noto Serif",serif}
#screen-chars .cs-roster-bottom p:first-letter{color:#d14d3e}
#screen-chars .cs-new{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:51px;padding:10px 12px;background:transparent;color:#e8c5a8;border:1px solid #925541;cursor:pointer;font:800 14px "Barlow Condensed",sans-serif;letter-spacing:.13em}
#screen-chars .cs-new:hover{background:#4b2621;color:#f5e1c9}
#screen-chars .cs-new span{font:25px Georgia,serif}
#screen-chars .cs-stage{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;flex-direction:column;justify-content:center;min-height:640px;background:#1b0e11}
#screen-chars .cs-stage-photo{position:absolute;z-index:-3;inset:0;background:linear-gradient(160deg,#3e231d,#1c1315),url("/assets/landing-reference.png") 30% center/cover no-repeat;filter:saturate(.75) contrast(1.06)}
#screen-chars .cs-stage-fade{position:absolute;z-index:-2;inset:0;background:linear-gradient(180deg,rgba(9,6,8,.84) 0,rgba(9,6,8,.29) 27%,rgba(9,6,8,.23) 49%,rgba(9,6,8,.84) 78%,rgba(9,6,8,.98) 100%),linear-gradient(90deg,rgba(10,5,7,.56),transparent 27%,transparent 77%,rgba(9,5,6,.45))}
#screen-chars .cs-stage::after{content:"";position:absolute;inset:14px;border:1px solid rgba(210,143,100,.2);pointer-events:none}
#screen-chars .cs-stage-cap{position:absolute;left:35px;top:34px;right:25px;display:flex;align-items:center;gap:11px;color:#e6bea0;font:700 10px "Cinzel",serif;letter-spacing:.13em}
#screen-chars .cs-stage-cap>span{width:43px;height:43px;display:grid;place-items:center;color:#d36a50;background:#281315a6;border:1px solid #b15d49;font:31px Georgia,serif}
#screen-chars .cs-stage-avatar{position:relative;z-index:1;display:grid;place-items:center;width:min(74%,290px);height:290px;margin-top:-88px;filter:drop-shadow(0 22px 20px #070407d9)}
#screen-chars .cs-stage-avatar .ninja-avatar{image-rendering:pixelated;filter:drop-shadow(0 4px 7px #000b)}
#screen-chars .cs-stage-ground{position:absolute;top:calc(50% + 78px);width:min(40%,200px);height:32px;border-radius:50%;background:radial-gradient(ellipse,rgba(12,6,7,.75),transparent 75%);filter:blur(3px)}
#screen-chars .cs-stage-caption{position:absolute;left:20px;right:20px;bottom:clamp(48px,8vh,83px);text-align:center;text-shadow:0 2px 17px #0b0607}
#screen-chars .cs-stage-caption>p{display:flex;justify-content:center;align-items:center;gap:14px;margin:0;color:#dbb495;font:700 10px "Cinzel",serif;letter-spacing:.15em}
#screen-chars .cs-stage-caption>p span{width:37px;height:1px;background:#b2694d}
#screen-chars .cs-stage-caption h2{font:900 clamp(43px,4.3vw,80px)/.9 "Barlow Condensed",Impact,sans-serif;letter-spacing:.03em;color:#f3dcc5;text-transform:uppercase;overflow-wrap:anywhere;margin:22px 0 10px}
#screen-chars .cs-stage-caption>div{font:700 12px "Cinzel",serif;letter-spacing:.09em;color:#e7af8d}
#screen-chars .cs-details-body{margin:35px 0 23px}
#screen-chars .cs-details-body dl{margin:0}
#screen-chars .cs-details-body dl>div{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:16px 0;border-bottom:1px solid #5b3b30}
#screen-chars .cs-details-body dt{color:#9e8573;font:700 10px "Cinzel",serif;letter-spacing:.1em}
#screen-chars .cs-details-body dd{text-align:right;max-width:65%;margin:0;color:#f2dec5;font:800 20px "Barlow Condensed",sans-serif;letter-spacing:.025em;overflow-wrap:anywhere}
#screen-chars .cs-details-body dd.cs-gold{color:#d6ac72}
#screen-chars .cs-details-body .cs-empty-description{color:#af947d;font:13px/1.8 "Noto Serif",serif}
#screen-chars .cs-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto}
#screen-chars .cs-enter{width:100%;min-height:58px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 23px;color:#f7e5d2;background:linear-gradient(100deg,#681d20,#b62e31 58%,#792222);border:1px solid #d14f43;clip-path:polygon(3% 0,97% 0,100% 17%,97% 100%,3% 100%,0 83%);font:800 17px "Barlow Condensed",sans-serif;letter-spacing:.13em;cursor:pointer}
#screen-chars .cs-enter:hover:not(:disabled){filter:brightness(1.15)}
#screen-chars .cs-enter:disabled{opacity:.45;cursor:not-allowed}
#screen-chars .cs-enter span{font:22px Georgia,serif}
#screen-chars .cs-skin-link{display:block;text-align:center;padding:12px;color:#d8ad8a!important;border:1px solid #725041;font:700 12px "Barlow Condensed",sans-serif!important;letter-spacing:.13em}
#screen-chars .cs-skin-link:hover{border-color:#c1865f;background:#35201c}
#screen-chars .cs-delete{padding:11px;background:none;color:#9e776c;border:1px solid transparent;font:700 12px "Barlow Condensed",sans-serif;letter-spacing:.12em;cursor:pointer}
#screen-chars .cs-delete:hover:not(:disabled){color:#e2a194;border-color:#794038}
#screen-chars .cs-delete:disabled{opacity:.3;cursor:not-allowed}
#screen-chars .cs-details-foot{border-top:1px solid #57382d;margin-top:21px;padding-top:14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#8e7566;font:700 10px "Barlow Condensed",sans-serif;letter-spacing:.07em}
#screen-chars .cs-footer{z-index:1;min-height:45px;padding:13px clamp(22px,3vw,48px);border-top:1px solid #4e2a22;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#8e7465;font:700 10px "Cinzel",serif;letter-spacing:.09em}
#screen-chars .cs-footer a:hover{color:#ecd0b4}
@media(max-width:1100px){
  #screen-chars .cs-layout{grid-template-columns:minmax(220px,285px) minmax(260px,1fr) minmax(265px,325px)}
  #screen-chars .cs-roster,#screen-chars .cs-details{padding:26px 20px}
  #screen-chars .cs-stage-avatar{margin-top:-58px}
}
@media(max-width:860px){
  #screen-chars .cs-layout{grid-template-columns:minmax(245px,38%) minmax(0,1fr)}
  #screen-chars .cs-stage{min-height:580px}
  #screen-chars .cs-details{grid-column:1 / -1;border-left:0;border-top:1px solid #5b352b}
  #screen-chars .cs-details-body{margin:14px 0 24px}
  #screen-chars .cs-details-body dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:25px}
  #screen-chars .cs-details h2{margin:14px 0}
  #screen-chars .cs-header-label{display:none}
}
@media(max-width:600px){
  #screen-chars .cs-header{min-height:69px;padding:10px 16px;flex-wrap:wrap}
  #screen-chars .cs-wordmark{font-size:24px;gap:6px}
  #screen-chars .cs-mark{font-size:28px}
  #screen-chars .cs-account{gap:8px;max-width:60%}
  #screen-chars .cs-account strong{font-size:14px;max-width:120px}
  #screen-chars .cs-logout{font-size:10px;padding:8px}
  #screen-chars .cs-layout{display:flex;flex-direction:column}
  #screen-chars .cs-roster{border-right:0;border-bottom:1px solid #5b352b;padding:23px 18px}
  #screen-chars .cs-roster h1{font-size:51px;margin:20px 0 12px}
  #screen-chars .cs-slots{max-height:none;margin-top:16px}
  #screen-chars .cs-roster-bottom{padding-top:14px}
  #screen-chars .cs-stage{min-height:485px}
  #screen-chars .cs-stage-avatar{margin-top:-5px;height:190px}
  #screen-chars .cs-stage-caption{bottom:36px}
  #screen-chars .cs-stage-caption h2{font-size:45px}
  #screen-chars .cs-stage-cap{left:23px;top:22px}
  #screen-chars .cs-details{padding:25px 19px}
  #screen-chars .cs-details-body dl{grid-template-columns:1fr}
  #screen-chars .cs-footer{flex-wrap:wrap;justify-content:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){#screen-chars *,#screen-chars *::before,#screen-chars *::after{transition:none!important;animation:none!important}}


/* Compact screen layout: the whole selector fits a standard laptop viewport.
   When space is genuinely insufficient (small/mobile), preserve accessibility
   with scrolling instead of clipping controls. */
@media (min-width: 861px) {
  #screen-chars{height:100dvh;overflow:hidden}
  #screen-chars .cs-shell{height:100dvh;min-height:0}
  #screen-chars .cs-header{height:64px;min-height:64px;padding:7px clamp(18px,3vw,48px);flex-shrink:0}
  #screen-chars .cs-wordmark{font-size:24px;gap:8px}
  #screen-chars .cs-mark{font-size:30px}
  #screen-chars .cs-account strong{font-size:15px}
  #screen-chars .cs-logout{font-size:11px;padding:9px 11px}
  #screen-chars .cs-layout{flex:1;min-height:0;height:auto;overflow:hidden;grid-template-columns:minmax(225px,280px) minmax(250px,1fr) minmax(265px,340px)}
  #screen-chars .cs-roster,#screen-chars .cs-details{padding:18px 19px;min-height:0;overflow:hidden}
  #screen-chars .cs-roster h1,#screen-chars .cs-details h2{font-size:44px;margin:15px 0 9px}
  #screen-chars .cs-intro{font-size:11px;line-height:1.5;margin:0 0 7px}
  #screen-chars .cs-eyebrow{font-size:9px;gap:9px}
  #screen-chars .cs-numeral{width:27px;height:27px;font-size:18px}
  #screen-chars .cs-slots{margin-top:14px;gap:7px;max-height:none;flex:1;min-height:0}
  #screen-chars .cs-slot{min-height:67px;padding:7px;gap:7px;flex-shrink:0}
  #screen-chars .cs-slot .cs-slot-avatar{width:46px;height:46px;flex-basis:46px}
  #screen-chars .cs-slot .cs-slot-avatar .ninja-avatar{transform:scale(.77)}
  #screen-chars .cs-slot strong{font-size:18px}
  #screen-chars .cs-slot small{font-size:9px;margin-top:3px}
  #screen-chars .cs-roster-bottom{flex-shrink:0;padding-top:10px}
  #screen-chars .cs-roster-bottom p{padding-top:9px;margin:0 0 9px;font-size:10px}
  #screen-chars .cs-new{min-height:43px;padding:8px;font-size:12px}
  #screen-chars .cs-new span{font-size:20px}
  #screen-chars .cs-stage{height:100%;min-height:0}
  #screen-chars .cs-stage-cap{top:15px;left:20px;right:18px;font-size:9px}
  #screen-chars .cs-stage-cap>span{width:33px;height:33px;font-size:25px}
  #screen-chars .cs-stage-avatar{margin-top:-35px;width:170px;height:170px}
  #screen-chars .cs-stage-ground{top:calc(50% + 43px);width:135px;height:20px}
  #screen-chars .cs-stage-caption{bottom:23px}
  #screen-chars .cs-stage-caption>p{font-size:9px;gap:10px}
  #screen-chars .cs-stage-caption>p span{width:25px}
  #screen-chars .cs-stage-caption h2{font-size:clamp(34px,3.2vw,51px);margin:12px 0 7px}
  #screen-chars .cs-stage-caption>div{font-size:10px}
  #screen-chars .cs-details-body{margin:13px 0;min-height:0;overflow-y:auto;scrollbar-width:thin}
  #screen-chars .cs-details-body dl>div{padding:8px 0}
  #screen-chars .cs-details-body dt{font-size:9px}
  #screen-chars .cs-details-body dd{font-size:16px}
  #screen-chars .cs-actions{flex-shrink:0;gap:7px}
  #screen-chars .cs-enter{min-height:44px;padding:9px 16px;font-size:14px}
  #screen-chars .cs-skin-link{padding:8px;font-size:11px!important}
  #screen-chars .cs-delete{padding:7px;font-size:11px}
  #screen-chars .cs-details-foot{flex-shrink:0;margin-top:9px;padding-top:8px;font-size:9px}
  #screen-chars .cs-footer{flex-shrink:0;height:35px;min-height:35px;padding:7px 22px;font-size:9px}
}
@media (min-width:861px) and (max-height:740px) {
  #screen-chars .cs-header{min-height:54px;height:54px}
  #screen-chars .cs-footer{min-height:28px;height:28px;padding:4px 16px}
  #screen-chars .cs-roster,#screen-chars .cs-details{padding:12px 16px}
  #screen-chars .cs-roster h1,#screen-chars .cs-details h2{font-size:37px;margin:9px 0 5px}
  #screen-chars .cs-intro{font-size:10px;line-height:1.35}
  #screen-chars .cs-slots{margin-top:9px}
  #screen-chars .cs-stage-avatar{margin-top:-15px;height:150px}
  #screen-chars .cs-stage-caption{bottom:15px}
  #screen-chars .cs-stage-caption h2{font-size:35px;margin:7px 0 4px}
  #screen-chars .cs-details-body{margin:8px 0}
  #screen-chars .cs-details-body dl>div{padding:5px 0}
  #screen-chars .cs-details-body dd{font-size:14px}
  #screen-chars .cs-actions{gap:4px}
  #screen-chars .cs-enter{min-height:37px;padding:6px 12px}
  #screen-chars .cs-skin-link{padding:6px}
  #screen-chars .cs-delete{padding:5px}
  #screen-chars .cs-details-foot{margin-top:5px;padding-top:5px;font-size:8px}
}
@media (min-width:861px) and (max-height:525px) {
  #screen-chars{overflow-y:auto}
  #screen-chars .cs-shell{height:auto;min-height:525px}
}