@import url('ui-fonts.css?v=0.35.0');
/* Dressing room (src/character-creator.js). Game-shell look shared with the trade screen and rankings: Lilita One titles,
   Nunito UI, chunky 2-3px borders with solid drop shadows, lime / pink / gold / cyan accents on the navy gradient. */
.character-room{--lime:#baff38;--lime-ink:#163626;--pink:#ff93ce;--gold:#ffe16b;--cyan:#7de7ff;--card:#16224a;--edge:#3d5591;--deep:#0f1a3d;--muted:#c0cfe9;--dim:#8ea3cf;
 color:#fff;background:linear-gradient(160deg,#2c4079 0%,#232a5e 55%,#1f2350 100%);font:15px/1.35 Nunito,sans-serif;box-sizing:border-box;color-scheme:dark;padding:0;margin:0 auto;width:100%;max-width:1280px;display:flex;flex-direction:column}
.character-room *{box-sizing:border-box}.character-room [hidden]{display:none!important}
dialog.character-room{width:min(1180px,calc(100% - 32px));height:min(820px,calc(100dvh - 32px));max-height:none;border:3px solid #87a9ec;border-radius:26px;box-shadow:0 12px 0 #0e1b40aa,0 30px 90px #000a;overflow:hidden}
dialog.character-room:not([open]){display:none}
dialog.character-room::backdrop{background:#071022bb;backdrop-filter:blur(6px)}
.character-room button{font-family:Nunito,sans-serif;cursor:pointer;touch-action:manipulation;min-height:0}
.character-room :is(button,a,input):focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cr-heading{flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;background:#253a73f2;border-bottom:2px solid #5e79b8}
.cr-heading p{margin:0;font:1000 12px Nunito,sans-serif;letter-spacing:.08em;color:#ffb4df}
.cr-heading h1{margin:2px 0 0;font:28px/1.1 'Lilita One',Launch,sans-serif;color:var(--gold);text-shadow:0 3px 0 #0e1b40}
.cr-close{width:44px;height:44px;padding:0;border-radius:50%;border:2px solid #87a9ec;background:#1a2b5c;color:#fff;font:1000 24px/1 Nunito,sans-serif;box-shadow:0 3px 0 #0e1b40;display:grid;place-items:center}
.cr-home{color:var(--lime);font:1000 13px Nunito,sans-serif;text-decoration:none}
.cr-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.cr-stage{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;border-right:2px solid #3d5591}
.cr-canvas{flex:1;min-height:260px;position:relative;overflow:hidden}
.cr-canvas canvas{display:block;width:100%!important;height:100%!important}
.cr-stage-caption{position:absolute;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.cr-stage-caption span{padding:5px 12px;border-radius:999px;background:#0f1a3dcc;font:900 13px Nunito,sans-serif;color:var(--gold)}
.cr-stage-caption button{pointer-events:auto;padding:6px 12px;border-radius:10px;border:2px solid var(--edge);background:#1a2b5c;color:var(--muted);font:900 12px Nunito,sans-serif;box-shadow:0 3px 0 #0e1b40}
.cr-moves{flex:none;display:flex;gap:6px;padding:10px 12px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#5873b3 transparent;background:#16224acc;border-top:2px solid #3d5591}
.cr-moves button{flex:none;padding:7px 11px;border-radius:12px;border:2px solid var(--edge);background:var(--card);color:var(--muted);font:900 13px Nunito,sans-serif;box-shadow:0 3px 0 #0e1b40;white-space:nowrap}
.cr-moves button[aria-pressed=true]{background:var(--lime);color:var(--lime-ink);border-color:#1d3a24;box-shadow:0 3px 0 #386446}
.cr-controls{min-width:0;min-height:0;display:flex;flex-direction:column}
.cr-tabs{flex:none;display:flex;gap:6px;padding:12px 14px;overflow-x:auto;scrollbar-width:none;border-bottom:2px solid #3d5591}
.cr-tabs::-webkit-scrollbar{display:none}
.cr-tabs button{flex:none;padding:8px 13px;border-radius:12px;border:2px solid var(--edge);background:#1a2b5c;color:var(--muted);font:1000 13px Nunito,sans-serif;box-shadow:0 3px 0 #0e1b40}
.cr-tabs button[aria-pressed=true]{background:var(--pink);color:#2b1030;border-color:#ffc5e6;box-shadow:0 3px 0 #763e72}
.cr-panels{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 18px;scrollbar-width:thin;scrollbar-color:#5873b3 transparent}
.cr-panels h2{margin:14px 0 8px;font:18px/1.2 'Lilita One',Launch,sans-serif;color:#fff}
.cr-panels h2:first-child{margin-top:0}
.cr-lead{margin:0 0 10px;color:var(--muted);font-weight:700;font-size:14px}
.cr-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.cr-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:84px;padding:10px 6px;border-radius:16px;border:2px solid var(--edge);background:var(--card);color:var(--muted);font:900 12px/1.15 Nunito,sans-serif;text-align:center;box-shadow:0 4px 0 #0e1b40}
.cr-card:active,.cr-preset:active,.cr-moves button:active,.cr-tabs button:active{transform:translateY(2px)}
.cr-card[aria-pressed=true]{background:var(--pink);color:#2b1030;border-color:#ffc5e6;box-shadow:0 4px 0 #763e72}
.cr-icon{font-size:28px;line-height:1}
.cr-new{position:absolute;top:-6px;left:-4px;padding:2px 6px;border-radius:7px;background:#ff68bc;color:#fff;font:1000 9px/1.2 Nunito,sans-serif;font-style:normal;letter-spacing:.06em;border:2px solid #142044}
.cr-lock{position:absolute;top:-8px;right:-6px;width:24px;height:24px;border-radius:50%;background:var(--gold);border:2px solid #142044;display:grid;place-items:center;font-size:12px;font-style:normal}
.cr-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cr-preset{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 12px;border-radius:16px;border:2px solid var(--edge);background:var(--card);color:#fff;text-align:left;box-shadow:0 4px 0 #0e1b40}
.cr-preset-icon{grid-row:1/3;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--preset,#53edff);color:#142044;border:2px solid #142044}
.cr-preset strong{font:16px/1.1 'Lilita One',Launch,sans-serif}
.cr-preset small{color:var(--dim);font:800 11px/1.2 Nunito,sans-serif}
.cr-preset[aria-pressed=true]{border-color:var(--gold);box-shadow:0 4px 0 #8b7424}
.cr-shuffle{margin-top:12px;width:100%;padding:12px;border-radius:14px;border:2px solid #1d3a24;background:var(--lime);color:var(--lime-ink);font:1000 15px Nunito,sans-serif;box-shadow:0 4px 0 #386446}
.cr-sliders,.cr-colours{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px 14px}
.cr-sliders label,.cr-colours label{display:flex;flex-direction:column;gap:4px;font:900 12px Nunito,sans-serif;color:var(--muted)}
.cr-colours label{flex-direction:row;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:12px;background:var(--deep)}
.cr-sliders input{accent-color:var(--lime);width:100%}
.cr-colours input{width:44px;height:30px;border:2px solid #142044;border-radius:8px;background:none;padding:0}
.cr-swatches{display:flex;flex-wrap:wrap;gap:8px}
.cr-swatch{width:44px;height:44px;border-radius:12px;border:3px solid #142044;box-shadow:0 3px 0 #0e1b40;padding:0}
.cr-swatch.round{border-radius:50%;width:38px;height:38px}
.cr-swatch[aria-pressed=true]{outline:3px solid var(--gold);outline-offset:2px}
.cr-wheel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cr-wheel-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:76px;border-radius:50%/40%;border:3px dashed var(--edge);background:var(--deep);color:var(--muted);font:900 11px Nunito,sans-serif}
.cr-wheel-slot:has(.cr-icon){border-style:solid;background:#7de7ff;color:#173352;border-color:#142044;box-shadow:0 4px 0 #184971}
.cr-wheel-slot[aria-pressed=true]{outline:3px solid var(--gold);outline-offset:3px}
.cr-wheel-slot kbd{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:#142044;color:#fff;font:1000 11px/20px Nunito,sans-serif;text-align:center}
.cr-empty{color:var(--dim)}
.cr-name{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;font:900 12px Nunito,sans-serif;color:var(--muted)}
.cr-name input{padding:10px 12px;border-radius:12px;border:2px solid #7891c5;background:#13224c;color:#fff;font:800 15px Nunito,sans-serif}
.cr-slots{display:grid;gap:6px}
.cr-slots>div{display:grid;grid-template-columns:1fr auto;gap:6px}
.cr-slots button{padding:10px 12px;border-radius:12px;border:2px solid var(--edge);background:var(--card);color:#fff;font:900 13px Nunito,sans-serif;text-align:left;box-shadow:0 3px 0 #0e1b40}
.cr-slots button:last-child{background:#4967ab;text-align:center}
.cr-slots button:disabled{opacity:.5}
.cr-footer{flex:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));background:#1b2757;border-top:2px solid #5e79b8}
.cr-footer>div{min-width:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cr-footer p{margin:0;color:var(--muted);font:800 13px Nunito,sans-serif}
.cr-footer p[data-kind=lock]{color:var(--gold)}
.cr-footer p[data-kind=ok]{color:var(--lime)}
.cr-text{border:0;background:none;color:var(--dim);font:900 12px Nunito,sans-serif;text-decoration:underline;padding:4px}
.cr-primary{flex:none;padding:13px 22px;border-radius:14px;border:2px solid #1d3a24;background:var(--lime);color:var(--lime-ink);font:1000 16px Nunito,sans-serif;box-shadow:0 4px 0 #386446}
.cr-primary:disabled{opacity:.6}
/* Standalone page (character.html) fills the window. */
.character-room:not(dialog){min-height:100dvh}
@media (max-width:760px),(pointer:coarse) and (max-height:520px){
 dialog.character-room{width:100%;max-width:none;height:100dvh;border:0;border-radius:0}
 .cr-heading{padding:10px 14px}.cr-heading h1{font-size:22px}
 .cr-layout{grid-template-columns:1fr;grid-template-rows:minmax(220px,38dvh) 1fr}
 .cr-stage{border-right:0;border-bottom:2px solid #3d5591}
 .cr-canvas{min-height:0}
 .cr-moves{padding:8px 10px}
 .cr-tabs{padding:10px 12px}
 .cr-cards{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
 .cr-card{min-height:76px}
 .cr-footer{padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}
 .cr-footer p{font-size:12px}
 .cr-primary{padding:12px 16px;font-size:15px}
}
@media (orientation:landscape) and (max-height:520px){.cr-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:1fr}.cr-stage{border-right:2px solid #3d5591;border-bottom:0}}