/* creation.css - slot picker, adventure-over confirm, 3-step creation (Nectar). Phone-first, portrait, one thumb.
   Shapes: words and digits only; rounded cards and buttons; selection = filled disc + fill colour; no dashes, rings, ticks, X, chevrons.
   Every tap target >= 44 px; the bottom bar never overlaps the scrolling body (column layout, not fixed overlays). */
#ccRoot { position:fixed; inset:0; z-index:60; display:none; flex-direction:column; box-sizing:border-box;
  background:#081c28; color:#fff6dc; font:16px/1.35 system-ui,sans-serif;
  padding:calc(10px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px)); }
#ccRoot.show { display:flex; }
#ccRoot .ccHead { flex:0 0 auto; padding:2px 2px 8px; }
#ccRoot .ccHead h1 { font-size:22px; line-height:1.2; margin:2px 0 0; font-weight:700; }
#ccRoot .ccStep { font-size:14px; opacity:.8; }
#ccRoot .ccBody { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:2px 2px 8px; }
#ccRoot .ccBtns { flex:0 0 auto; display:flex; gap:10px; padding-top:10px; }
#ccRoot .ccBtns .btn { flex:1 1 0; min-height:56px; border-radius:28px; font-size:18px; font-weight:700; }
#ccRoot .btn { box-sizing:border-box; border-style:solid; touch-action:manipulation; }
#ccRoot .btn.primary { background:#e3b25e; color:#071a26; border-color:#e3b25e; }
#ccRoot .btn.ccQuiet { background:transparent; }
#ccRoot .btn.ccOff { opacity:.55; }
#ccRoot .btn.ccWarn { background:#c8643c; border-color:#c8643c; color:#fff6dc; }

/* cards */
#ccRoot .ccCard { border-radius:18px; background:#123447; padding:12px 14px; margin:0 0 10px; border:0; }
#ccRoot .ccSmall { font-size:13px; opacity:.85; }
#ccRoot .ccRow { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
#ccRoot .ccRow .btn { flex:1 1 auto; min-height:48px; min-width:72px; padding:0 14px; border-radius:24px; font-size:16px; }

/* slot picker: cards sized by content, empty = softly dimmed */
#ccRoot .ccSlotTop { display:flex; align-items:center; gap:12px; min-height:44px; }
#ccRoot .ccSlotNum { flex:0 0 auto; min-width:22px; text-align:center; font-weight:700; font-size:18px; opacity:.75; }   /* plain digit, no badge shape */
#ccRoot .ccSlotName { font-size:18px; font-weight:700; overflow-wrap:anywhere; }
#ccRoot .ccSlotInfo { margin:4px 0 0 34px; }
#ccRoot .ccSlot.ccEmpty { background:#0f2938; padding:6px 14px; }
#ccRoot .ccSlot.ccEmpty .ccSlotName { font-weight:500; opacity:.6; font-size:16px; }
#ccRoot .ccSlot.ccEmpty .ccSlotNum { opacity:.5; }
#ccRoot .ccSlot.ccBroken { background:#2b2a33; }
#ccRoot .ccSlot.ccTap { cursor:pointer; }
#ccRoot .ccSlot.ccTap:active { background:#1d5370; }
#ccRoot .ccInbox { background:#1a3a2c; }
#ccRoot.cc-ask .ccBody { display:flex; flex-direction:column; justify-content:center; }
#ccRoot.cc-ask .ccHead h1 { font-size:24px; }
#ccRoot .ccLine { margin:10px 2px; opacity:.9; }

/* step 1: name */
#ccRoot input#ccName { display:block; width:100%; box-sizing:border-box; min-height:56px; font-size:20px; padding:12px 16px; border-radius:16px; border:0;
  background:#fff6dc; color:#071a26; margin-top:8px; }
#ccRoot .ccErr { min-height:22px; color:#ffc9a8; font-size:15px; }

/* step 2: look */
#ccRoot .ccPreview { position:relative; height:30vh; min-height:150px; max-height:300px; border-radius:22px; background:#0d2a3a; margin-bottom:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:10px; box-sizing:border-box; }
#ccRoot .ccFigure { width:30%; max-width:110px; aspect-ratio:3/5; border-radius:46% 46% 22% 22%; background:currentColor; color:#c99a6a; margin:auto; }
#ccRoot .ccPreviewText { font-size:13px; opacity:.85; text-align:center; }
#ccRoot .ccPartCard { padding:8px 10px 6px; }
#ccRoot .ccPartName { margin:0 4px 2px; }
#ccRoot .ccStrip { display:flex; gap:8px; overflow-x:auto; align-items:center; padding:4px 2px 6px; scroll-snap-type:x proximity; scrollbar-width:none; }
#ccRoot .ccStrip::-webkit-scrollbar { display:none; }
#ccRoot .ccSw { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:6px; box-sizing:border-box; border-radius:999px; border:0;
  background:#2a6280; color:#fff6dc; padding:0 14px; font:600 15px system-ui,sans-serif; scroll-snap-align:start; touch-action:manipulation; }
#ccRoot .ccSw.ccOn { background:#e3b25e; color:#071a26; }
#ccRoot .ccDot { display:inline-block; flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:currentColor; }
#ccRoot .ccRandomRow .btn { flex:0 1 auto; min-width:140px; }
/* colour swatches carry their colour (sizes still vary) */
#ccRoot .ccSw.ccC-sand { background:#d9b98a; color:#2a1d0c; } #ccRoot .ccSw.ccC-kelp { background:#4f7a4a; } #ccRoot .ccSw.ccC-ember { background:#b4522f; }
#ccRoot .ccSw.ccC-tide { background:#2d6f8e; } #ccRoot .ccSw.ccC-ash { background:#8a8a86; color:#141414; } #ccRoot .ccSw.ccC-coral { background:#e07f6b; color:#2a0f08; }
#ccRoot .ccSw.ccC-dusk { background:#5b4a7a; } #ccRoot .ccSw.ccC-pearl { background:#ece4d6; color:#2a2418; }
#ccRoot .ccSw[class*="ccC-"].ccOn { font-weight:800; }   /* chosen colour: the filled disc inside, no ring */
#ccRoot .ccFigure.ccC-sand { color:#d9b98a; } #ccRoot .ccFigure.ccC-kelp { color:#4f7a4a; } #ccRoot .ccFigure.ccC-ember { color:#b4522f; } #ccRoot .ccFigure.ccC-tide { color:#2d6f8e; }
#ccRoot .ccFigure.ccC-ash { color:#8a8a86; } #ccRoot .ccFigure.ccC-coral { color:#e07f6b; } #ccRoot .ccFigure.ccC-dusk { color:#5b4a7a; } #ccRoot .ccFigure.ccC-pearl { color:#ece4d6; }

/* step 3: race */
#ccRoot .ccRace { display:flex; gap:12px; align-items:flex-start; min-height:76px; cursor:pointer; }
#ccRoot .ccRace.ccSel { background:#1d5370; }
#ccRoot .ccRace.ccSel .ccRaceName { color:#ffd98a; }
#ccRoot .ccPortrait { flex:0 0 auto; width:56px; height:56px; background:transparent; display:block; }
#ccRoot .ccRaceText { flex:1 1 auto; min-width:0; }
#ccRoot .ccRaceName { display:flex; align-items:center; gap:8px; font-size:18px; font-weight:700; margin-bottom:2px; }
#ccRoot .ccTrait { margin-top:4px; }
#ccRoot .ccRace.ccLocked { background:#0f2938; }
#ccRoot .ccRace.ccLocked .ccPortrait { filter:none; opacity:1; }   /* B3: the art's {locked} look replaces the CSS dimming */
#ccRoot .ccRace.ccLocked .ccRaceName, #ccRoot .ccRace.ccLocked .ccSmall { opacity:.7; }
#ccRoot .ccRace .ccLockText { opacity:1; color:#ffd98a; margin-top:6px; }
#ccRoot .ccRace .ccPath { opacity:1; margin-top:6px; padding:8px 10px; border-radius:12px; background:#163a4d; }
@media (min-width:600px) { #ccRoot { padding-left:max(12px, calc(50vw - 280px)); padding-right:max(12px, calc(50vw - 280px)); } }

/* step 4: Calling (class, starting weapon, skill points). Filled disc + fill for selection; digits as rounded tabs; no rings or signs. */
#ccRoot .ccSecHead { margin:2px 4px 6px; }
#ccRoot .ccClass { min-height:64px; cursor:pointer; }
#ccRoot .ccClass.ccSel { background:#1d5370; }
#ccRoot .ccClass.ccSel .ccRaceName { color:#ffd98a; }
#ccRoot .ccWeapons { display:flex; flex-wrap:wrap; gap:8px; padding:4px 0 2px; }
#ccRoot .ccWeapon { flex:1 1 92px; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; box-sizing:border-box;
  border:0; border-radius:20px; background:#2a6280; color:#fff6dc; padding:6px 10px; font:600 16px system-ui,sans-serif; touch-action:manipulation; }
#ccRoot .ccWeapon.ccOn { background:#e3b25e; color:#071a26; }
#ccRoot .ccWName { display:inline-flex; align-items:center; gap:6px; }
#ccRoot .ccRecTag { font-size:12px; font-weight:700; padding:1px 8px; border-radius:10px; background:#163a4d; color:#ffd98a; }
#ccRoot .ccWeapon.ccOn .ccRecTag { background:#071a26; color:#ffd98a; }
#ccRoot .ccPtsRow { display:flex; align-items:center; gap:6px; margin:6px 0; }
#ccRoot .ccPtsName { flex:1 1 auto; min-width:64px; font-weight:700; }
#ccRoot .ccPt { flex:0 0 auto; width:48px; height:48px; border:0; border-radius:16px; background:#2a6280; color:#fff6dc; font:700 17px system-ui,sans-serif; touch-action:manipulation; }
#ccRoot .ccPt.ccOn { background:#e3b25e; color:#071a26; }
#ccRoot .ccPt.ccOff { opacity:.4; }

/* B3 playtest fixes (Nectar 2026-10-27) */
#ccRoot canvas.ccFigure { display:block; height:calc(100% - 26px); width:auto; aspect-ratio:160/180; aspect-ratio:auto; border-radius:0; background:transparent; margin:6px auto 0; max-width:none; }
#ccRoot .ccLockText.ccPath { opacity:1; font-weight:600; }
#ccRoot .ccNameLock { background:#1d4a62; font-size:15px; line-height:1.35; }
#ccRoot .ccWeapon.ccOff, #ccRoot .ccWeapon[disabled] { opacity:.45; }
#ccRoot .ccOverridden { opacity:.75; }