/* Emberbound — login + character select.
 * Ported from mockups/login-mockup.html. Everything here is pure CSS (no art) except the
 * hero sprite; tokens/classes (.nw .btn .shine .slotcell …) come from theme.css.
 * Own classes are prefixed au- / cs- / cc- ; the scene styles hang off #loginScene. */

/* ---------------------------------------------------------------- screens */
.screen{position:absolute;inset:0;z-index:5;opacity:0;visibility:hidden;
  transition:opacity .5s ease}
.screen.on{opacity:1;visibility:visible}
#authRoot,#selectRoot{position:absolute;inset:0}

/* ---------------------------------------------------------------- scene */
/* Shared atmospheric backdrop behind both auth and select. Hidden once in game. */
#loginScene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#loginScene .sky{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 12%, #c9a6d8 0%, #8a6a8e 16%, transparent 46%),
    radial-gradient(140% 120% at 20% 0%, #3b2f5a 0%, transparent 55%),
    linear-gradient(#241a3a 0%, #3a2e52 34%, #6b5170 60%, #9c7a72 78%, #b89475 100%)}
#loginScene .sun{position:absolute;top:6%;left:76%;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,#fff6e0 0%,#ffe6b0aa 32%,transparent 68%);
  filter:blur(2px);opacity:.9;animation:pulseSun 9s ease-in-out infinite}
@keyframes pulseSun{50%{opacity:.7;transform:scale(1.05)}}
/* far mountain / treeline silhouettes — clip-path, no images */
#loginScene .ridge{position:absolute;left:-2%;right:-2%;bottom:0;opacity:.9}
#loginScene .ridge.r1{bottom:34%;height:180px;
  background:linear-gradient(#5a4a68 0,#4a3c58 100%);
  clip-path:polygon(0 60%,8% 40%,18% 55%,28% 30%,40% 52%,52% 34%,63% 55%,74% 38%,85% 56%,95% 42%,100% 58%,100% 100%,0 100%);
  opacity:.5}
#loginScene .ridge.r2{bottom:22%;height:220px;
  background:linear-gradient(#2f2740 0,#241d34 100%);
  clip-path:polygon(0 55%,10% 42%,15% 58%,24% 36%,33% 60%,44% 40%,55% 62%,66% 44%,77% 64%,88% 46%,96% 60%,100% 50%,100% 100%,0 100%);
  opacity:.8}
#loginScene .wall{position:absolute;left:0;right:0;bottom:33%;height:66px;
  background:
    repeating-linear-gradient(90deg,#2a2a2a 0 34px,#1f1f1f 34px 36px),
    linear-gradient(#4a463f,#2e2b26);
  opacity:.35;filter:blur(.4px)}
#loginScene .ground{position:absolute;left:0;right:0;bottom:0;height:40%;
  background:linear-gradient(#1c2417 0%,#141a12 60%,#0c100b 100%)}
#loginScene .ground:before{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 50% 120%, #3a5a2e55, transparent 60%)}
#loginScene .vig{position:absolute;inset:0;
  background:radial-gradient(120% 100% at 50% 40%, transparent 45%, #05060bcc 100%)}
#loginScene .motes{position:absolute;inset:0;overflow:hidden}
#loginScene .mote{position:absolute;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,#ffe9b0,#ffcf6b00);opacity:0;
  animation:float linear infinite}
@keyframes float{
  0%{transform:translateY(20px) scale(.6);opacity:0}
  10%{opacity:.9}
  90%{opacity:.7}
  100%{transform:translateY(-120px) scale(1.1);opacity:0}}

/* ---------------------------------------------------------------- auth screen */
.au-wrap{position:absolute;inset:0;display:grid;place-items:center;overflow:auto;padding:24px 0}
.au-brand{position:absolute;top:8%;left:0;right:0;text-align:center;pointer-events:none}
.au-brand .mk{display:block;font-size:34px;color:var(--acc);
  filter:drop-shadow(0 0 16px var(--acc));animation:sigil 6s ease-in-out infinite}
@keyframes sigil{50%{filter:drop-shadow(0 0 26px var(--acc));transform:scale(1.06)}}
.au-brand h1{margin:6px 0 2px;font-size:40px;letter-spacing:8px;font-weight:600;
  text-shadow:0 2px 20px #000}
.au-brand .tag{font-size:12px;letter-spacing:5px;color:var(--gold);text-transform:uppercase}

.au-card{width:390px;max-width:92vw;border:1px solid var(--line2);border-radius:16px;
  background:linear-gradient(180deg,#121834f2,#0b0f20f7);backdrop-filter:blur(12px);
  box-shadow:0 30px 80px -20px #000,0 0 0 1px #ffffff0a inset,0 1px 0 #ffffff14 inset;
  padding:26px 28px 30px;position:relative;overflow:hidden;margin-top:9vh}
.au-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);opacity:.7}

.au-tabs{display:flex;gap:6px;background:#0007;border:1px solid var(--line);
  border-radius:10px;padding:4px;margin-bottom:22px}
.au-tab{flex:1;text-align:center;padding:9px 0;border-radius:7px;font-size:13px;
  letter-spacing:.5px;color:var(--dim);border:0;background:transparent;cursor:pointer;
  transition:.15s}
.au-tab.sel{color:#fff;background:linear-gradient(180deg,#2a2350,#1c1740);
  box-shadow:0 0 0 1px var(--acc) inset,0 6px 18px -8px var(--acc)}

.au-fld{margin-bottom:15px}
.au-fld label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:1px;
  color:var(--faint);margin-bottom:6px}
.au-box{display:flex;align-items:center;gap:9px;border:1px solid var(--line2);
  border-radius:10px;background:#0a0e1cd0;padding:0 12px;transition:.15s}
.au-box:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px #b98cff22}
.au-box .ic{font-size:15px;color:var(--faint);width:18px;text-align:center}
.au-box input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  padding:12px 0;font-size:14px;outline:none}
.au-box input::placeholder{color:#556}
.au-peek{border:0;background:transparent;color:var(--faint);font-size:15px;padding:4px;
  cursor:pointer}
.au-peek:hover{color:var(--ink)}
.au-peek.on{color:var(--acc)}

.au-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;
  margin:2px 0 20px}
.au-chk{display:flex;align-items:center;gap:7px;color:var(--dim);cursor:pointer}
.au-chk input{accent-color:var(--acc);width:15px;height:15px}
.au-link{color:var(--acc);text-decoration:none}
.au-link:hover{color:var(--acc2);text-decoration:underline}

/* inline error slot — real validation / server failures land here */
.au-err{display:none;margin:0 0 14px;padding:9px 11px;border-radius:9px;font-size:12px;
  border:1px solid #5a2630;background:#25141a;color:#f0a0ad}
.au-err.on{display:block}

.au-go{width:100%;border-radius:11px;padding:14px;font-size:14px;letter-spacing:1.5px;
  text-transform:uppercase;font-weight:600}
.au-go[disabled] .shine,.au-go[disabled]::after{display:none}

.au-div{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:11px;
  margin:20px 0 14px}
.au-div:before,.au-div:after{content:"";flex:1;height:1px;background:var(--line)}
.au-social{display:flex;gap:10px}
.au-social button{flex:1;border:1px solid var(--line2);border-radius:10px;background:#0b0f1e;
  padding:11px;font-size:13px;color:var(--dim);display:flex;align-items:center;
  justify-content:center;gap:8px;cursor:pointer;transition:.15s}
.au-social button:hover{border-color:var(--acc);color:var(--ink)}

.au-foot{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:11px;
  color:#5a627e}
.au-foot a{color:var(--faint);text-decoration:none;margin:0 8px}
.au-foot a:hover{color:var(--ink)}

/* mode switch is pure CSS */
.au-reg-only{display:none}
.au-card.mode-register .au-reg-only{display:block}
.au-card.mode-register .au-log-only{display:none}
.au-card.mode-register .au-row.au-reg-only{display:flex;justify-content:flex-start}

/* ---------------------------------------------------------------- select screen */
/* The left column is 464px because the roster panel artwork is 436px wide and must render at
   NATIVE width (see skin-sheet.css) — 357 + the column's 2x14px padding. Squeezing it is what
   would squash the frame's gem corners. */
.cs-grid{position:absolute;inset:0;display:grid;grid-template-columns:385px 1fr 332px}
.cs-logout{position:absolute;top:14px;left:16px;z-index:9;font-size:12px;
  border:1px solid var(--line2);background:var(--panel);backdrop-filter:blur(6px);
  color:var(--dim);border-radius:8px;padding:7px 12px;cursor:pointer;transition:.15s}
.cs-logout:hover{color:var(--ink);border-color:var(--acc)}

.cs-left{padding:56px 14px 16px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.cs-hdr{font-size:14px;letter-spacing:3px;text-transform:uppercase;text-align:center;
  padding:12px;color:var(--gold);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#161c34ee,#0d1226)}
.cs-panel{overflow:hidden;backdrop-filter:blur(8px)}
.cs-server{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:12px;
  color:var(--dim);border-bottom:1px solid var(--line)}
.cs-server .sig{color:#7fd07f}
.cs-server .cnt{margin-left:auto;color:var(--ink)}
.cs-server .ico{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;
  border:1px solid var(--line2);font-size:12px;cursor:pointer;transition:.15s}
.cs-server .ico:hover{border-color:var(--acc);color:var(--ink)}

.cs-roster{padding:8px;display:flex;flex-direction:column;gap:8px}
.cs-card{display:flex;align-items:center;gap:11px;padding:10px;border-radius:10px;
  border:1px solid var(--line);background:#0b0f1e;cursor:pointer;position:relative;
  transition:.15s}
.cs-card:hover{border-color:var(--line2);background:#10162b}
.cs-card.sel{border-color:var(--acc);background:linear-gradient(180deg,#1c1c44,#141535);
  box-shadow:0 0 0 1px var(--acc) inset,0 8px 22px -12px var(--acc)}
.cs-card.sel:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:3px;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.cs-lvl{width:44px;height:44px;flex:none;display:grid;place-items:center;font-weight:700;
  font-size:15px;position:relative}
.cs-lvl svg{position:absolute;inset:0}
.cs-lvl span{position:relative;z-index:1;text-shadow:0 1px 2px #000}
.cs-info{min-width:0}
.cs-info .nm{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.cs-info .cls{font-size:11px;color:var(--dim);display:flex;align-items:center;gap:5px}
.cs-info .cls .dot{width:7px;height:7px;border-radius:50%;background:var(--el,#888);
  box-shadow:0 0 6px var(--el,#888)}
.cs-card .more{margin-left:auto;color:var(--faint);align-self:flex-start;font-size:16px;
  line-height:1;padding:2px 6px;border-radius:6px;border:0;background:transparent;
  cursor:pointer}
.cs-card .more:hover{color:var(--ink);background:#ffffff12}

.cs-create{display:flex;align-items:center;gap:10px;padding:14px 12px;border-radius:10px;
  border:1px dashed var(--line2);color:var(--dim);background:#0a0e1c88;cursor:pointer;
  transition:.15s;text-align:left;width:100%}
.cs-create:hover{border-color:var(--acc);color:var(--ink);background:#10162b}
.cs-create .plus{width:26px;height:26px;flex:none;display:grid;place-items:center;
  border-radius:50%;border:1px solid currentColor;font-size:16px}

/* --- center: hero stage --- */
.cs-hero-col{position:relative;display:grid;place-items:end center;overflow:hidden}
.cs-heroname{position:absolute;top:0;left:0;right:0;padding:24px 12px 34px;text-align:center;
  pointer-events:none;z-index:2;
  background:radial-gradient(80% 130% at 50% -10%, #05060bcc, transparent 70%)}
.cs-heroname .n{font-size:30px;letter-spacing:2px;font-weight:600;
  text-shadow:0 2px 4px #000,0 4px 22px #000}
.cs-heroname .s{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);
  margin-top:3px}
.cs-heroname .s b{color:var(--ink);font-weight:600}

.cs-stage{position:relative;width:100%;height:100%;display:grid;place-items:end center}
/* The stage sits at 24%, not 11%: the base character sprite is 112px cells at 2x (was 64px), so the
   whole composition had to climb to keep the character's feet clear of the PLAY banner. */
.cs-platform{position:absolute;bottom:24%;left:50%;transform:translateX(-50%);
  width:340px;height:110px}
.cs-platform .disc{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(50% 60% at 50% 45%, #b98cff33, transparent 72%);filter:blur(2px)}
.cs-platform .ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:300px;height:96px;border-radius:50%;border:1px solid #b98cff55;
  box-shadow:0 0 30px -6px #b98cff66,0 0 0 1px #ffffff08 inset}
.cs-platform .ring.r2{width:210px;height:66px;border-color:#dcc4ff44;
  animation:spinGlow 8s linear infinite}
@keyframes spinGlow{50%{box-shadow:0 0 22px -4px #dcc4ff88}}

/* Anchored with `bottom`, like the platform above — NOT margin-bottom: a margin percentage
   resolves against the container's WIDTH while `bottom:24%` resolves against its height, so
   the wider the window got, the higher the hero floated off his own platform. +40px puts
   the sprite's feet just in front of the ellipse's centre line. */
.cs-hero{position:absolute;z-index:2;left:50%;margin:0 0 0 -56px;bottom:calc(24% + 40px);
  animation:idle 4.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* sword_base_character_idle.png is a 9x4 sheet of 112px cells; the window shows row N / frame 0.
   --z is whole numbers only (auth.js setZoom): a fractional scale resamples the sprite's
   pixels unevenly, which is what made this preview look soft. */
.cs-sprite{width:112px;height:112px;overflow:hidden;position:relative;
  transform:scale(var(--z,2)) scaleX(var(--flip,1));transform-origin:50% 100%;
  filter:drop-shadow(0 8px 8px #000a) drop-shadow(0 0 10px var(--wg,#b98cff88))}
.cs-sprite img{position:absolute;left:0;top:0;image-rendering:pixelated;
  max-width:none;display:block}
/* fallback when the sprite sheet cannot be loaded */
.cs-sprite.fallback{display:grid;place-items:center;font-size:40px;overflow:visible}

.cs-rotate{position:absolute;bottom:calc(24% - 42px);left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:3}
.cs-rotate button{width:40px;height:34px;border:1px solid var(--line2);border-radius:9px;
  background:var(--panel);backdrop-filter:blur(6px);color:var(--dim);font-size:15px;
  display:grid;place-items:center;cursor:pointer;transition:.15s}
.cs-rotate button:hover{color:var(--ink);border-color:var(--acc);
  box-shadow:0 0 14px -4px var(--acc)}
.cs-zoom{position:absolute;top:14px;right:14px;display:flex;gap:8px;
  z-index:3}
.cs-zoom button{width:34px;height:30px;border:1px solid var(--line2);border-radius:8px;
  background:var(--panel);backdrop-filter:blur(6px);color:var(--dim);font-size:14px;
  display:grid;place-items:center;cursor:pointer;transition:.15s}
.cs-zoom button:hover{color:var(--ink);border-color:var(--acc)}

.cs-play-wrap{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:8px}
.cs-play{width:300px;padding:16px;border:0;border-radius:13px;font-size:17px;letter-spacing:4px;
  text-transform:uppercase;font-weight:700;color:#1a1206;
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  box-shadow:0 14px 34px -10px var(--gold),0 0 0 1px #6b551f inset,0 2px 0 #fff6 inset;
  position:relative;overflow:hidden;cursor:pointer;transition:.15s}
.cs-play:hover{filter:brightness(1.08);transform:translateY(-2px)}
.cs-play:active{transform:translateY(0)}
.cs-play:disabled{opacity:.5;filter:grayscale(.5);cursor:not-allowed;transform:none}
.cs-play-sub{font-size:11px;color:var(--dim);letter-spacing:1px}
.cs-play-sub b{color:var(--gold)}

/* --- right column --- */
.cs-right{padding:16px 14px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.cs-ann-body{padding:13px}
.cs-ann-item{margin-bottom:14px}
.cs-ann-item .k{font-size:11px;letter-spacing:1px;color:var(--gold);text-transform:uppercase;
  margin-bottom:5px}
.cs-ann-item .d{font-size:12px;color:#c3ccdf;line-height:1.5}
.cs-ann-btn{display:block;width:100%;text-align:center;padding:11px;font-size:12px;
  letter-spacing:1px;color:var(--gold);border:1px solid #4a3d22;border-radius:9px;
  background:linear-gradient(180deg,#221a0e,#171106);text-transform:uppercase;margin-top:6px;
  cursor:pointer;transition:.15s}
.cs-ann-btn:hover{filter:brightness(1.25);border-color:var(--gold)}

.cs-equip{padding:12px;backdrop-filter:blur(8px)}
.cs-equip .eh{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--faint);
  margin-bottom:10px;display:flex;justify-content:space-between}
.cs-equip .eh .gs{color:var(--gold)}
.cs-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cs-islot{font-size:20px}
.cs-islot .qr{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 1px var(--q,transparent) inset,0 0 12px -4px var(--q,transparent)}
.cs-islot .nm{position:absolute;bottom:-4px;left:50%;transform:translate(-50%,100%);
  font-size:9px;color:var(--dim);white-space:nowrap;opacity:0;transition:.15s;
  pointer-events:none;background:#0b0f19;padding:2px 6px;border-radius:5px;z-index:3}
.cs-islot:hover .nm{opacity:1}

/* ---------------------------------------------------------------- modals */
.cs-modal{position:absolute;inset:0;z-index:20;display:grid;place-items:center;
  background:#04060cc4;backdrop-filter:blur(3px);padding:20px;overflow:auto}
.cs-modal.hidden{display:none!important}
.cs-modal .box{width:560px;max-width:94vw;padding:20px 22px}
.cs-modal .box.sm{width:380px}
.cs-modal h2{margin:0 0 4px;font-size:18px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold)}
.cs-modal .sub{color:var(--dim);font-size:12px;margin-bottom:16px}
.cs-modal .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

/* starting-weapon cards — the stance tag is the real information */
.cc-weaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px;margin-bottom:4px}
.cc-weap{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;
  border-radius:9px;border:1px solid var(--line);background:#0b0f1e;cursor:pointer;transition:.13s}
.cc-weap:hover{border-color:var(--line2);background:#10162b}
.cc-weap.sel{border-color:var(--gold);background:#241d10;box-shadow:0 0 0 1px var(--gold) inset}
.cc-weap .wi{font-size:19px;line-height:1.2}
.cc-weap .wn{font-size:11.5px;font-weight:700;color:var(--ink)}
.cc-weap .ws{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.cc-weap.st-melee.sel .ws{color:#e0956b}
.cc-weap.st-ranged.sel .ws{color:#7fe0a0}
.cc-weap.st-magic.sel .ws{color:#c07fe0}
.cc-weap.locked,.cc-weap:disabled{opacity:.38;filter:grayscale(1);cursor:not-allowed}
.cc-weap.locked:hover,.cc-weap:disabled:hover{border-color:var(--line);background:#0b0f1e}

/* class picker (the three starting archetypes) */
.cc-classes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:4px}
.cc-class{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 11px;text-align:left;
  border-radius:10px;border:1px solid var(--line);background:#0b0f1e;cursor:pointer;transition:.13s}
.cc-class:hover{border-color:var(--line2);background:#10162b}
.cc-class.sel{border-color:var(--gold);background:#241d10;box-shadow:0 0 0 1px var(--gold) inset}
.cc-class .ci{font-size:20px;line-height:1.1}
.cc-class .cn{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:.02em}
.cc-class .cb{font-size:10.5px;color:var(--faint);line-height:1.35}
.cc-class.sel .cb{color:var(--dim)}

/* background cards — same family as the weapon cards, plus the "write your own" textarea */
.cc-bgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px;margin-bottom:4px}
.cc-bg{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;
  border-radius:9px;border:1px solid var(--line);background:#0b0f1e;cursor:pointer;transition:.13s}
.cc-bg:hover{border-color:var(--line2);background:#10162b}
.cc-bg.sel{border-color:var(--gold);background:#241d10;box-shadow:0 0 0 1px var(--gold) inset}
.cc-bg .wi{font-size:19px;line-height:1.2}
.cc-bg .wn{font-size:11px;font-weight:700;color:var(--ink);text-align:center}
.cc-bg-custom.hidden{display:none}
.cc-bg-custom textarea{width:100%;margin-top:6px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);
  background:#0b0f1e;color:var(--ink);font:inherit;font-size:12.5px;line-height:1.45;resize:vertical;min-height:56px}
.cc-bg-custom textarea:focus{outline:none;border-color:var(--gold)}
.cc-bg-custom .cc-count{text-align:right;margin-top:3px}

.cc-sex{display:flex;gap:8px;margin-bottom:6px}
.cc-sex button{flex:1}
.cc-sex button.sel{border-color:var(--gold);background:#241d10;color:var(--gold2)}
.cc-hint{font-size:11px;color:var(--faint);margin-top:6px}

/* Drop the announcements column before the roster column has to give up its native width —
   the panel art is the one thing on this screen that cannot be narrowed without distorting. */
@media (max-width:1240px){
  .cs-grid{grid-template-columns:385px 1fr}
  .cs-right{display:none}
}

/* character creation: appearance editor -------------------------------- */
.cc-appear{display:flex;gap:12px;align-items:flex-start}
.cc-prev{display:flex;flex-direction:column;gap:6px;align-items:center;flex:0 0 auto}
#ccPrevCv{width:128px;height:128px;image-rendering:pixelated;background:
  radial-gradient(circle at 50% 40%,#1d2440,#0a0e1a);border:1px solid var(--line2);border-radius:10px}
.cc-rot{display:flex;gap:6px}
.cc-rand{display:flex;flex-direction:column;gap:4px}
.cc-opts{flex:1;min-width:0;max-height:300px;overflow-y:auto;display:flex;flex-direction:column;
  gap:4px;padding-right:6px}
.cc-row{display:flex;align-items:center;gap:6px}
.cc-lab{width:86px;flex:0 0 auto;font-size:10.5px;color:var(--faint);text-transform:uppercase;
  letter-spacing:.06em}
.cc-val{flex:1;min-width:0;text-align:center;font-size:11.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.cc-val i{color:var(--faint);font-style:normal;font-size:9.5px;margin-left:4px}
.cc-arrow{width:24px;height:22px;background:#0c1120;border:1px solid var(--line);border-radius:5px;
  color:var(--gold2);cursor:pointer;font-size:10px;padding:0}
.cc-arrow:hover{border-color:var(--gold)}
.cc-swatches{display:flex;flex-wrap:wrap;gap:3px;flex:1}
.cc-sw{width:16px;height:16px;border-radius:4px;border:1px solid #0006;cursor:pointer;padding:0}
.cc-sw.sel{outline:2px solid var(--gold);outline-offset:1px}
#csCreate .box{width:min(680px,92vw)}

/* ---- UI icon art on the auth / character-creation screens (ui/icons.js) ---------
 * The cards keep their emoji as the <img> alt text, so a missing PNG degrades to the
 * glyph and these rules simply do not apply. */
/* image-rendering:auto, not pixelated — see the note in hud.css: these are 64px sprites drawn
 * small, and nearest-neighbour downscaling shreds thin strokes. Card icons sit at 30/28px
 * rather than 24 so the illustration is legible; it is the card's only visual. */
img.uic{image-rendering:auto!important;object-fit:contain;flex:0 0 auto;vertical-align:middle}
.cc-class .ci img.uic{width:30px;height:30px;display:block}
.cc-weap .wi img.uic,
.cc-bg .wi img.uic{width:28px;height:28px;display:block}
.au-box .ic img.uic{width:17px;height:17px;display:block;opacity:.8}
.au-peek img.uic{width:17px;height:17px;display:block;opacity:.75}
.au-peek:hover img.uic,.au-peek.on img.uic{opacity:1}
#ccRandom img.uic{width:15px;height:15px;margin-right:2px}
.cs-islot img.uic{width:76%;height:76%}