:root{--bg:#090708;--panel:#100b0c;--line:rgba(201,126,93,.24);--text:#ead8bf;--muted:#a89481;--red:#bc2a2e;--gold:#d7ab78;--soft:#f3dec4;color-scheme:dark;font-family:'Noto Serif',Georgia,serif;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body{min-height:100%;margin:0;background:#090708;color:var(--text);overflow-x:hidden}
button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}a{color:inherit;text-decoration:none}
[hidden]{display:none!important}::selection{background:#98272b;color:#fff}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #ecbf85;outline-offset:3px}
.skip{position:absolute;left:10px;top:-60px;padding:10px 14px;background:#edc7a0;color:#100708;z-index:20}.skip:focus{top:10px}
.character-page{position:relative;min-height:100svh;display:grid;grid-template-rows:77px 1fr 43px;background:radial-gradient(ellipse at 49% 23%,rgba(101,33,33,.17),transparent 47%),#090708}
.character-page:before{position:fixed;inset:0;pointer-events:none;content:"";opacity:.25;background-image:linear-gradient(90deg,transparent 0%,rgba(232,191,140,.028) 49.9%,transparent 50.1%),linear-gradient(0deg,transparent 0%,rgba(232,191,140,.023) 49.9%,transparent 50.1%);background-size:80px 80px}
.topbar{z-index:5;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 clamp(23px,3.2vw,56px);background:rgba(9,7,8,.96);border-bottom:1px solid #58322b}
.wordmark{display:flex;align-items:center;gap:11px;font:900 26px 'Barlow Condensed',Impact,sans-serif;letter-spacing:.105em;color:#e9d5b7;white-space:nowrap}.wordmark em{font-style:normal;color:#c62f34}.wordmark-symbol{font:37px Georgia,serif;color:#bf3636}
.topbar-center{display:flex;align-items:center;gap:17px;color:#a28a75;letter-spacing:.28em;font:600 10px 'Cinzel',Georgia,serif;white-space:nowrap}.topbar-dash{width:43px;height:1px;background:#684035}
.back-link{color:#d0af90;font:700 12px 'Barlow Condensed',sans-serif;letter-spacing:.17em;white-space:nowrap;transition:color .2s}.back-link:hover{color:#f6ddbd}.back-link span{font-size:22px;vertical-align:middle;margin-right:7px}
.character-main{z-index:1;width:min(100%,1690px);margin:auto;display:grid;grid-template-columns:minmax(230px,290px) minmax(390px,1fr) minmax(344px,410px);min-height:min(764px,calc(100svh - 120px));border-inline:1px solid #41211d}
.roster-panel,.detail-panel{position:relative;background:linear-gradient(180deg,rgba(29,16,17,.97),rgba(12,9,10,.99));padding:clamp(25px,3vw,46px) clamp(20px,2.3vw,38px);min-width:0}
.roster-panel{border-right:1px solid #583026;display:flex;flex-direction:column}
.side-title{display:flex;align-items:center;gap:11px;font:700 10px 'Cinzel',serif;letter-spacing:.11em;color:#ba8e77;white-space:nowrap}
.chapter-num{display:inline-grid;place-items:center;width:31px;height:31px;border:1px solid #924339;background:rgba(82,24,26,.34);font:20px Georgia,serif;color:#cf6c56}
.roster-panel h1,.detail-panel h2{font:900 clamp(44px,4vw,64px)/.9 'Barlow Condensed',Impact,sans-serif;letter-spacing:.026em;margin:33px 0 16px;color:#f1dfc8}.roster-panel h1 em,.detail-panel h2 em{font-style:normal;color:#d0413a}
.roster-subtitle,.detail-subtitle{margin:0;font:13px/1.9 'Noto Serif',Georgia,serif;color:#a9917d}
.slot-list{margin-top:38px;display:flex;flex-direction:column;gap:10px}
.slot{position:relative;display:flex;align-items:center;gap:13px;text-align:left;padding:15px 11px;min-height:80px;width:100%;border:1px solid #493027;background:rgba(25,18,19,.76);color:#e9d6c1;transition:background .18s,border-color .18s}
.slot:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background .18s}
.slot:hover,.slot.is-selected{background:rgba(80,29,29,.32);border-color:#a65543}
.slot.is-selected:before{background:#d24136}
.slot-index{width:33px;flex:0 0 33px;color:#976c5d;font:600 12px 'Cinzel',serif;text-align:center}
.slot-info{flex:1;min-width:0}.slot-info strong,.slot-info small{display:block}.slot-info strong{font:800 21px 'Barlow Condensed',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.045em}.slot-info small{color:#9c8575;font:600 10px 'Cinzel',serif;letter-spacing:.08em;margin-top:5px}
.slot-empty .slot-info strong{color:#a79585}.slot-empty .slot-info small{color:#78665d}.slot-arrow{font:20px Georgia,serif;color:#b65d49}
.side-footnote{margin:19px 0 0;color:#87756a;font:11px/1.6 'Noto Serif',serif}.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#ac573f;vertical-align:middle;margin-right:9px}
.roster-rule{height:1px;width:100%;background:linear-gradient(90deg,transparent,#774639,transparent);margin-top:auto;margin-bottom:20px}
.ghost-action{display:flex;align-items:center;gap:12px;justify-content:center;background:transparent;border:1px solid #845140;padding:14px 8px;color:#e3b793;font:700 12px 'Barlow Condensed',sans-serif;letter-spacing:.13em;transition:background .2s,color .2s}.ghost-action:hover:not(:disabled){background:#4b211e;color:#fbe2c4}.ghost-action span{font:24px Georgia,serif}
.character-stage{position:relative;overflow:hidden;isolation:isolate;min-height:650px;background:#160a0d;border-right:1px solid #5a302a}
.stage-art{position:absolute;inset:0;z-index:-3;background-image:url('/assets/landing-reference.png');background-size:auto 100%;background-repeat:no-repeat;background-position:left center;filter:saturate(.8) contrast(1.08)}
.stage-vignette{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(10,6,8,.82) 0%,transparent 20%,transparent 40%,rgba(7,5,7,.52) 67%,rgba(8,5,7,.98) 100%),linear-gradient(90deg,rgba(11,7,9,.62),transparent 28%,transparent 75%,rgba(11,8,8,.4))}
.character-stage:after{content:"";position:absolute;inset:15px;border:1px solid rgba(213,155,116,.19);pointer-events:none}
.stage-top{position:absolute;left:clamp(21px,3vw,45px);top:35px;right:25px;display:flex;align-items:center;gap:11px}.stage-stamp{display:grid;place-items:center;width:45px;height:45px;border:1px solid #bd6a56;font:30px Georgia,serif;color:#d16e51;background:#28121495}.stage-overline{font:600 10px 'Cinzel',serif;letter-spacing:.16em;color:#ebc8a4}
.stage-bottom{position:absolute;bottom:clamp(36px,6vh,66px);left:clamp(28px,3.5vw,58px);right:clamp(28px,3.5vw,58px);text-align:center;text-shadow:0 2px 15px #080507}
.stage-rank{display:flex;justify-content:center;align-items:center;gap:15px;font:700 10px 'Cinzel',serif;letter-spacing:.22em;color:#dcb999}.stage-rank span{height:1px;width:39px;background:#ad6b55}
.stage-bottom h2{font:900 clamp(46px,5.1vw,82px)/.88 'Barlow Condensed',sans-serif;letter-spacing:.035em;color:#f3ddc2;margin:17px auto;text-transform:uppercase;max-width:520px;overflow-wrap:anywhere}
.stage-class{font:700 13px 'Cinzel',serif;letter-spacing:.12em;color:#e8a084}.stage-disclaimer{margin:27px 0 0;color:#b39881;font:10px 'Noto Serif',serif;opacity:.7}
.detail-panel{display:flex;flex-direction:column}.detail-panel h2{margin-top:29px}.detail-content{flex:1}
.field-label{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#d5a986;font:700 11px 'Cinzel',serif;letter-spacing:.1em;margin:24px 0 11px}.field-label span{font:600 10px 'Barlow Condensed',sans-serif;color:#845f53;letter-spacing:.12em}
#character-name{width:100%;height:51px;padding:0 16px;color:#f2dec4;border:1px solid #695043;border-radius:0;outline:none;background:rgba(8,7,9,.85);font:600 17px 'Noto Serif',serif;transition:border-color .2s}
#character-name:focus{border-color:#d59b6b}#character-name::placeholder{color:#75665e;font-size:13px;font-weight:400}
.field-help{margin:8px 0 0;color:#8a796d;font:10px/1.6 'Noto Serif',serif}
.paths{margin:21px 0 0;padding:0;border:0}.paths legend{float:left;width:100%;margin:0 0 12px}.paths:after{content:"";display:block;clear:both}
.path-option{position:relative;display:flex;align-items:center;gap:16px;width:100%;min-height:66px;border:1px solid #49332d;background:rgba(27,17,17,.65);padding:9px 15px;margin:0 0 8px;cursor:pointer;transition:border-color .18s,background .18s}
.path-option:hover,.path-option:has(input:checked){border-color:#ae5946;background:#431d1d85}
.path-option input{position:absolute;inset:0;opacity:0;cursor:pointer}.path-option:has(input:focus-visible){outline:2px solid #efbd86;outline-offset:2px}
.path-mark{font:32px Georgia,serif;color:#b5594a;width:38px;text-align:center}.path-option strong{display:block;color:#eed7bc;font:800 20px 'Barlow Condensed',sans-serif;letter-spacing:.08em}.path-option small{display:block;color:#ad8976;font:600 10px 'Cinzel',serif;letter-spacing:.09em;margin-top:2px}
.path-check{margin-left:auto;display:block;width:15px;height:15px;border:1px solid #765448;border-radius:50%;box-shadow:inset 0 0 0 4px #201314}.path-option:has(input:checked) .path-check{background:#df614b;border-color:#e8a077}
.journey-note{display:flex;gap:15px;align-items:flex-start;margin:20px 0 23px;padding:17px 0;border-top:1px solid #6c4536;border-bottom:1px solid #6c4536}.journey-seal{font:41px Georgia,serif;color:#b64f3f;line-height:1}.journey-note strong{display:block;font:700 11px 'Cinzel',serif;letter-spacing:.09em;color:#e4bc95}.journey-note p{font:11px/1.8 'Noto Serif',serif;color:#9f8c7d;margin:7px 0 0}
.primary-action{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 25px;min-height:58px;color:#f7e4ca;background:linear-gradient(98deg,#651c1e,#b52c31 58%,#7c2421);border:1px solid #d24a3e;font:800 16px 'Barlow Condensed',sans-serif;letter-spacing:.16em;clip-path:polygon(3% 0,97% 0,100% 16%,97% 100%,3% 100%,0 84%);transition:filter .2s}
.primary-action:hover{filter:brightness(1.15)}.primary-action span{font:21px Georgia,serif}.form-error{font:12px/1.6 'Noto Serif',serif;color:#f3a28a}
.character-meta{margin:38px 0 12px}.character-meta>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:1px solid #53362f;padding:16px 0}.character-meta dt{color:#a48673;font:700 10px 'Cinzel',serif;letter-spacing:.09em}.character-meta dd{margin:0;text-align:right;color:#f1ddc1;font:700 17px 'Barlow Condensed',sans-serif;letter-spacing:.05em;overflow-wrap:anywhere}
.secondary-action{width:100%;margin-top:14px;padding:12px;color:#9c796d;background:transparent;border:1px solid transparent;font:700 12px 'Barlow Condensed',sans-serif;letter-spacing:.1em}.secondary-action:hover{border-color:#743a34;color:#d7a194}
.detail-footer{display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px;color:#7e6b5f;font:700 10px 'Barlow Condensed',sans-serif;letter-spacing:.12em;border-top:1px solid #53352b}
.bottom-bar{z-index:1;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:0 clamp(24px,3.2vw,56px);background:#080708;border-top:1px solid #583228;color:#968173;font:700 10px 'Barlow Condensed',sans-serif;letter-spacing:.17em}.bottom-bar b{color:#b63834}.bottom-bar span:last-child span{color:#e0af8b}
.toast{position:fixed;right:24px;bottom:64px;z-index:10;width:min(390px,calc(100vw - 32px));padding:18px 22px;background:#2a1214;border:1px solid #af5141;box-shadow:0 10px 40px #000a;color:#f1d7bc;font:13px/1.65 'Noto Serif',serif}
.delete-dialog{width:min(420px,calc(100vw - 32px));padding:32px;border:1px solid #b05f4d;background:#160e0f;color:#edd4b8;box-shadow:0 20px 100px #000d}.delete-dialog::backdrop{background:#030203c9}.delete-dialog h2{margin:0 0 15px;font:900 36px 'Barlow Condensed',sans-serif}.delete-dialog p{font:12px/1.8 'Noto Serif',serif;color:#baa696}.dialog-actions{display:flex;gap:12px;margin-top:25px}.dialog-actions button{padding:12px 17px;flex:1;background:#251619;border:1px solid #69483a;color:#ead2b5;font:800 13px 'Barlow Condensed',sans-serif;letter-spacing:.1em}.dialog-actions button:last-child{background:#8b242b;border-color:#bd4743}
@media(min-width:1680px){.character-main{min-height:min(850px,calc(100svh - 120px))}}
@media(max-width:1170px){.topbar-center{display:none}.character-main{grid-template-columns:220px minmax(330px,1fr) 342px}.roster-panel,.detail-panel{padding:29px 20px}.slot-list{margin-top:27px}.roster-panel h1,.detail-panel h2{font-size:48px}.character-stage{min-height:660px}}
@media(max-width:920px){.character-page{display:block}.topbar{height:69px}.character-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,1fr)}.roster-panel{grid-column:1/-1;order:0;border-right:none;border-bottom:1px solid #563126;min-height:0}.roster-panel h1{font-size:48px;margin:20px 0 9px}.roster-subtitle{max-width:620px}.slot-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:20px}.slot{min-width:0}.roster-rule,.side-footnote{display:none}.ghost-action{max-width:300px;margin-top:18px}.character-stage{order:1;min-height:760px}.detail-panel{order:2;min-height:760px}.bottom-bar{padding:15px 24px;flex-wrap:wrap;gap:8px}.bottom-bar span:last-child{display:none}}
@media(max-width:650px){.topbar{padding:0 18px}.wordmark{font-size:23px}.wordmark-symbol{font-size:30px}.back-link{font-size:10px}.back-link span{margin-right:2px}.character-main{display:flex;flex-direction:column}.roster-panel{padding:23px 19px}.roster-panel h1{font-size:43px;margin:16px 0 8px}.roster-subtitle{font-size:12px}.slot-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.slot{min-height:76px;display:flex;flex-direction:column;align-items:flex-start;padding:10px 8px;gap:2px}.slot-index{width:auto;flex:none;font-size:10px}.slot-info strong{font-size:16px}.slot-info small{font-size:9px}.slot-arrow{display:none}.ghost-action{margin-top:14px}.character-stage{min-height:460px;max-height:520px}.stage-art{background-size:auto 100%;background-position:0 center}.stage-bottom h2{font-size:49px}.stage-bottom{bottom:29px}.stage-disclaimer{margin-top:17px}.detail-panel{min-height:0;padding:32px 22px 27px}.detail-panel h2{font-size:51px}.detail-footer{margin-top:28px}.bottom-bar{font-size:9px}.bottom-bar span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Keep character-slot labels from expanding the mobile layout. */
@media(max-width:650px){
  .slot-info{width:100%;max-width:100%;min-width:0;overflow:hidden}
  .slot-info strong,.slot-info small{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}


/* Desktop character creator: fit the entire three-panel composition into one
   viewport. The mobile/tablet layout is intentionally untouched. */
@media (min-width:921px){
  html,body{height:100%;overflow:hidden}
  .character-page{
    height:100vh;height:100svh;min-height:0;overflow:hidden;
    grid-template-rows:clamp(60px,7.5svh,77px) minmax(0,1fr) clamp(30px,4.5svh,43px);
  }
  .character-main{
    height:100%;min-height:0;max-height:100%;align-self:stretch;
    overflow:hidden;grid-template-rows:minmax(0,1fr);
  }
  .roster-panel,.detail-panel,.character-stage{
    height:100%;min-height:0;max-height:100%;overflow:hidden;
  }
  .roster-panel,.detail-panel{
    padding:clamp(12px,2svh,24px) clamp(18px,2.2vw,32px) clamp(11px,1.6svh,20px);
  }
  .roster-panel h1,.detail-panel h2{
    font-size:clamp(37px,5.7svh,56px);
    line-height:.91;
    margin:clamp(12px,2svh,22px) 0 clamp(8px,1.2svh,13px);
  }
  .roster-subtitle,.detail-subtitle{font-size:clamp(10px,1.38svh,12px);line-height:1.6}
  .side-title{font-size:10px}
  .chapter-num{height:clamp(25px,3.7svh,31px);width:clamp(25px,3.7svh,31px);font-size:19px}
  .slot-list{margin-top:clamp(11px,2.2svh,25px);gap:clamp(5px,.85svh,9px)}
  .slot{min-height:clamp(50px,7.1svh,68px);height:clamp(50px,7.1svh,68px);padding:8px 9px;gap:9px}
  .slot-info strong{font-size:clamp(16px,2.3svh,19px)}
  .slot-info small{font-size:9px;margin-top:3px}
  .side-footnote{margin-top:clamp(8px,1.4svh,15px);font-size:10px}
  .roster-rule{margin-bottom:clamp(10px,1.5svh,17px)}
  .ghost-action{height:clamp(38px,5.4svh,48px);min-height:0;padding:6px 8px;font-size:11px}
  .detail-panel{display:flex;flex-direction:column}
  .detail-content{min-height:0;flex:1 1 auto}
  .field-label{margin:clamp(11px,1.6svh,17px) 0 clamp(5px,.8svh,8px);font-size:10px}
  #character-name{height:clamp(38px,5.2svh,46px);padding:0 12px;font-size:15px}
  .field-help{margin-top:4px;font-size:9px;line-height:1.4}
  .paths{margin:clamp(10px,1.3svh,15px) 0 0}
  .paths legend{margin:0 0 clamp(6px,.8svh,9px)}
  .path-option{
    min-height:clamp(46px,6.5svh,59px);
    padding:5px 11px;
    gap:clamp(8px,1.2vw,14px);
    margin:0 0 clamp(4px,.65svh,7px);
  }
  .path-mark{font-size:clamp(25px,3.2svh,30px);width:30px}
  .path-option strong{font-size:clamp(16px,2.3svh,19px)}
  .path-option small{font-size:9px;margin-top:1px}
  .journey-note{
    gap:11px;margin:clamp(8px,1.3svh,14px) 0;
    padding:clamp(8px,1.3svh,13px) 0;
  }
  .journey-seal{font-size:clamp(27px,3.6svh,34px)}
  .journey-note strong{font-size:10px}
  .journey-note p{margin-top:4px;font-size:10px;line-height:1.45}
  .primary-action{min-height:clamp(43px,5.8svh,53px);padding:10px 17px;font-size:15px}
  .detail-footer{padding-top:clamp(7px,1svh,11px);font-size:9px;margin-top:auto}
  .stage-top{top:clamp(15px,2.7svh,25px)}
  .stage-stamp{width:clamp(33px,4.8svh,43px);height:clamp(33px,4.8svh,43px);font-size:25px}
  .stage-bottom{bottom:clamp(18px,3svh,32px)}
  .stage-bottom h2{font-size:clamp(40px,6.2svh,65px);margin:10px auto}
  .stage-class{font-size:clamp(10px,1.5svh,12px)}
  .stage-disclaimer{margin-top:12px;font-size:9px}
  .character-meta{margin:clamp(16px,3svh,29px) 0 12px}
  .character-meta>div{padding:clamp(9px,1.8svh,16px) 0}
  .secondary-action{margin-top:8px;padding:9px}
  .bottom-bar{height:100%;min-height:0;overflow:hidden;font-size:10px}
}
/* Keep all fields and the CTA on-screen even in shorter desktop windows. */
@media (min-width:921px) and (max-height:750px){
  .character-page{grid-template-rows:55px minmax(0,1fr) 29px}
  .roster-panel,.detail-panel{padding-top:10px;padding-bottom:9px}
  .roster-panel h1,.detail-panel h2{font-size:clamp(33px,5.2svh,41px);margin:8px 0 6px}
  .roster-subtitle,.detail-subtitle{font-size:10px;line-height:1.4}
  .slot-list{margin-top:10px;gap:5px}
  .slot{height:46px;min-height:46px;padding:5px 7px}
  .slot-info strong{font-size:16px}.slot-info small{font-size:8px}
  .side-footnote{margin-top:7px}
  .roster-rule{margin-bottom:7px}
  .ghost-action{height:36px}
  .side-title{font-size:9px}
  .field-label{margin:8px 0 5px}
  #character-name{height:36px}
  .field-help{font-size:9px}
  .paths{margin-top:8px}
  .paths legend{margin-bottom:5px}
  .path-option{min-height:42px;padding:4px 10px;margin-bottom:4px}
  .path-mark{font-size:24px}.path-option strong{font-size:16px}
  .journey-note{margin:8px 0;padding:7px 0}
  .journey-seal{font-size:25px}
  .journey-note strong,.journey-note p{font-size:9px}
  .journey-note p{line-height:1.35}
  .primary-action{min-height:40px;padding:8px 14px}
  .detail-footer{padding-top:6px}
  .stage-bottom h2{font-size:clamp(36px,5.6svh,45px)}
}


/* Actual RPGJS character sprites, not a zoomed crop of the landing hero. */
.character-stage{
  background:radial-gradient(ellipse at 50% 43%,#35191a 0%,#1b1013 40%,#090709 85%);
}
.character-stage .stage-art{
  background-image:none!important;
  background:radial-gradient(ellipse at 50% 48%,rgba(155,45,40,.24),transparent 55%),repeating-linear-gradient(90deg,transparent 0 62px,rgba(217,144,105,.033) 63px 64px);
  filter:none;
}
.character-stage .stage-vignette{
  background:linear-gradient(180deg,rgba(10,7,9,.42),transparent 23%,transparent 63%,rgba(8,5,7,.93) 100%);
}
.character-stage .player-preview{
  position:absolute;
  inset:clamp(64px,10svh,92px) 22px clamp(191px,25svh,242px);
  display:flex;justify-content:center;align-items:center;flex-direction:column;
  isolation:isolate;pointer-events:none;
}
.character-stage .player-preview-caption{
  position:absolute;top:0;left:0;right:0;text-align:center;
  color:#c2a58a;font:600 9px 'Cinzel',Georgia,serif;letter-spacing:.17em;
}
.character-stage .player-preview-caption span{font-size:9px;color:#876958;margin-left:9px}
.character-stage .player-aura{
  position:absolute;z-index:-1;width:min(290px,75%);aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(182,57,43,.18),rgba(132,32,34,.10) 44%,transparent 73%);
  border:1px solid rgba(205,91,64,.09);
}
.character-stage .player-sprite{
  --player-size:clamp(150px,25svh,245px);
  position:relative;z-index:2;
  width:var(--player-size);height:var(--player-size);flex:0 0 auto;
  background-repeat:no-repeat;
  background-size:800% 400%;
  background-position:14.285714% 0;
  image-rendering:pixelated;
  filter:drop-shadow(0 9px 4px #03020399);
  transition:filter .18s ease;
}
.character-stage .player-sprite.is-male{background-image:url('/character/assets/ninja-player-male.png')}
.character-stage .player-sprite.is-female{background-image:url('/character/assets/ninja-player-female.png')}
.character-stage .player-sprite.is-walking{animation:character-walk-preview .85s steps(7,end) infinite}
@keyframes character-walk-preview{from{background-position-x:0}to{background-position-x:100%}}
.character-stage .player-ground{
  position:absolute;z-index:0;bottom:clamp(21px,3svh,39px);
  width:clamp(140px,19svh,200px);height:18px;
  border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.72),rgba(10,5,5,.32) 60%,transparent);
}
.character-stage .preview-movement{
  pointer-events:auto;position:absolute;bottom:clamp(40px,5.3svh,53px);
  border:1px solid rgba(165,108,84,.48);background:rgba(10,7,8,.77);color:#d0b29a;
  padding:7px 13px;min-height:29px;letter-spacing:.13em;
  font:700 10px 'Barlow Condensed',sans-serif;transition:border-color .16s,background .16s;
}
.character-stage .preview-movement span{font-size:9px;margin-right:7px}
.character-stage .preview-movement:hover,.character-stage .preview-movement[aria-pressed="true"]{border-color:#c96950;background:#512321;color:#f4d7b6}
.character-stage .gender-preview{
  position:absolute;bottom:clamp(162px,22svh,206px);left:50%;transform:translateX(-50%);
  display:grid;grid-template-columns:1fr 1fr;gap:6px;width:min(294px,78%);z-index:4;
  padding:4px;border:1px solid #714333;background:rgba(7,5,7,.89);
}
.character-stage .gender-choice{
  color:#b8a18e;border:1px solid transparent;background:transparent;
  font:700 12px 'Barlow Condensed',sans-serif;letter-spacing:.15em;
  min-height:36px;padding:8px;white-space:nowrap;transition:border-color .16s,background .16s;
}
.character-stage .gender-choice:hover{color:#f1d9c1}
.character-stage .gender-choice.is-active{color:#f1dbbc;background:#662327;border-color:#a94d40}
.character-stage .gender-locked{
  position:absolute;bottom:clamp(171px,23svh,214px);left:10%;width:80%;z-index:4;
  text-align:center;font:700 11px 'Cinzel',Georgia,serif;letter-spacing:.16em;color:#d7ab91;
}
.character-stage .stage-bottom{bottom:clamp(17px,3svh,35px)}
.character-stage .stage-bottom h2{font-size:clamp(37px,5svh,56px);line-height:.92;margin:9px auto}
.character-stage .stage-rank{font-size:9px}
.character-stage .stage-class{font-size:clamp(9px,1.45svh,12px)}
.character-stage .stage-disclaimer{margin-top:10px}
@media(min-width:921px) and (max-height:750px){
  .character-stage .player-preview{inset:60px 18px 173px}
  .character-stage .player-sprite{--player-size:clamp(137px,23svh,170px)}
  .character-stage .gender-preview{bottom:149px}
  .character-stage .gender-locked{bottom:161px}
  .character-stage .stage-bottom{bottom:16px}
  .character-stage .stage-bottom h2{font-size:clamp(31px,4.7svh,38px)}
  .character-stage .stage-disclaimer{margin-top:5px}
}
@media(max-width:920px){
  .character-stage .player-preview{inset:72px 15px 205px}
  .character-stage .player-sprite{--player-size:clamp(150px,22svh,235px)}
  .character-stage .gender-preview{bottom:164px}
  .character-stage .gender-locked{bottom:174px}
  .character-stage .stage-bottom h2{font-size:clamp(35px,6vw,49px)}
}
@media(prefers-reduced-motion:reduce){
  .character-stage .player-sprite.is-walking{animation:none;background-position:14.285714% 0}
}

/* Character preview shortcut to the external Ninja Idle encyclopedia. */
.topbar-actions{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
@media(max-width:650px){.topbar-actions{gap:10px}.topbar-actions .back-link{font-size:10px}}


/* Browser-only account journey preview: compact and contained in the desktop layout. */
.flow-shortcuts{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px;margin-top:10px;padding-top:9px;border-top:1px solid #493028}
.flow-shortcuts a{display:inline-block;padding:5px 6px;text-decoration:none;color:#a78874;border-bottom:1px solid transparent;font:700 10px 'Barlow Condensed',sans-serif;letter-spacing:.07em}
.flow-shortcuts a:hover{color:#f1c5a4}
.flow-shortcuts a.is-current{color:#f1c19a;border-bottom-color:#d86d4f}
.handoff-dialog{text-align:center;width:min(465px,calc(100vw - 30px))}
.handoff-seal{display:grid;place-items:center;margin:0 auto 17px;width:60px;height:60px;border:1px solid #a85c48;background:#46211d;color:#dd9471;font:35px Georgia,serif}
.handoff-dialog h2{font-size:41px;line-height:.95;letter-spacing:.03em}
.handoff-dialog>p{font-size:13px;line-height:1.8}
.handoff-dialog .handoff-warning{margin:17px 0 0;padding:12px;border-left:2px solid #a75140;background:#291819;color:#bfa692;text-align:left;font-size:11px;line-height:1.75}
.handoff-actions{display:flex;align-items:center;gap:9px;margin-top:24px}
.handoff-actions button,.handoff-actions a{display:flex;align-items:center;justify-content:center;text-decoration:none;min-height:44px;flex:1;padding:9px 12px;border:1px solid #855141;background:#281719;color:#edceb0;font:800 12px 'Barlow Condensed',sans-serif;letter-spacing:.08em}
.handoff-actions button:hover,.handoff-actions a:hover{background:#552423;border-color:#c87053}
.handoff-actions a{background:#80252a;border-color:#ac3f3b}
@media(min-width:921px) and (max-height:750px){
 .flow-shortcuts{margin-top:5px;padding-top:5px}
 .flow-shortcuts a{padding:2px 4px;font-size:9px}
}
@media(max-width:650px){.flow-shortcuts{gap:10px}.handoff-actions{flex-direction:column}.handoff-actions button,.handoff-actions a{width:100%}}

/* Keep compact character header usable with Wiki, Ranking and Journal. */
@media(max-width:820px){.topbar-actions{gap:12px}}
@media(max-width:650px){.topbar-actions a[href="/wiki/"],.topbar-actions a[href="/ranking/"]{display:none}}