/* ===========================================================================
 * CHARACTER STUDIO — in the look of the site's flyer theme (flyer-theme.css).
 *
 * Flat flyer-blue panels with a dark outline and a hard offset shadow, the
 * stepped pixel sky with pixel clouds and a grass block for the hero to stand
 * on, and chunky 8-bit "block" buttons (notched dark outline, coloured rim,
 * bevel, a lip the button sinks into when pressed):
 *   red + yellow rim  = the main action (Save & wear)
 *   green             = "on" / chosen (poses, facing, toggles, picked tiles)
 *   yellow "?" block  = where you are (the selected tab)
 *   blue / white      = everything else
 *
 * admin.html loads this file WITHOUT flyer-theme.css, so every flyer token has
 * a fallback and the three faces are declared here as well (same files, same
 * descriptors — on the game page the browser just reuses them).
 * Everything is scoped to the studio and its launch chips.
 * ------------------------------------------------------------------------ */

@font-face{font-family:"Bungee";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/bungee-400.woff2") format("woff2")}
@font-face{font-family:"Atma";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/atma-700.woff2") format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/alegreya-sans-700.woff2") format("woff2")}

:root{
  --cs-sky:var(--fl-sky,#439ed7);
  --cs-ink:var(--fl-ink,#16192b);
  --cs-navy:var(--fl-navy,#10244a);
  --cs-blue:var(--fl-blue,#2459a6);
  --cs-blue-2:var(--fl-blue-2,#3a78c2);
  --cs-blue-hi:var(--fl-blue-hi,#7cb8ec);
  --cs-blue-lo:var(--fl-blue-lo,#173f7d);
  --cs-red:var(--fl-red,#e52629);
  --cs-red-hi:var(--fl-red-hi,#ff6265);
  --cs-red-lo:var(--fl-red-lo,#a8151a);
  --cs-yellow:var(--fl-yellow,#ffd200);
  --cs-yellow-hi:var(--fl-yellow-hi,#fff07a);
  --cs-yellow-lo:var(--fl-yellow-lo,#e09a00);
  --cs-green:var(--fl-green,#1fa64a);
  --cs-green-hi:var(--fl-green-hi,#6ad98a);
  --cs-green-lo:var(--fl-green-lo,#11702f);
  --cs-lime:#b6f05a;
  --cs-lip:var(--fl-lip,rgba(16,36,74,.55));
  --cs-font-heading:"Bungee","Arial Black","Trebuchet MS",sans-serif;
  --cs-font-sub:"Atma","Trebuchet MS",sans-serif;
  --cs-font-body:"Alegreya Sans","Trebuchet MS","Verdana",sans-serif;
}

/* ------------------------------- the window ------------------------------- */

.character-studio{
  --ink:#fff;--muted:#d6e6fa;--line:var(--cs-navy);
  box-sizing:border-box;width:min(1080px,calc(100vw - 40px));max-width:none;height:min(840px,calc(100dvh - 40px));max-height:none;
  margin:auto;padding:0;border:4px solid var(--cs-ink);border-radius:0;background:var(--cs-blue);color:var(--ink);
  box-shadow:10px 10px 0 0 var(--cs-lip);
  font:700 16px/1.4 var(--cs-font-body);overflow:hidden;
}
.character-studio[open]{display:flex;flex-direction:column}
.character-studio::backdrop{background:rgba(16,36,74,.72)}
.character-studio *{box-sizing:border-box}
.character-studio :where(button){font:inherit;cursor:pointer;touch-action:manipulation;color:inherit;letter-spacing:0;text-transform:none;-webkit-tap-highlight-color:transparent}
.character-studio :where(button:disabled){cursor:default}
.character-studio button:focus-visible,.character-studio [tabindex]:focus-visible{outline:3px dashed #fff;outline-offset:6px}
.character-studio .studio-panel:focus-visible{outline-offset:-7px}

/* -------------------------------- 8-bit blocks ------------------------------
 * The flyer button, in variables so each control can pick its colours and a
 * size. The outline is four offset shadows (corner pixels left empty); then
 * the rim, the light bevel (top-left), the dark bevel (bottom-right) and the
 * hard lip. Hover sinks 2px; pressing sinks onto the lip and flips the bevel.
 * :where() keeps the base at one class of specificity, so the colour and size
 * rules below win simply by being more specific.
 * ------------------------------------------------------------------------ */
.character-studio :where(.studio-close,.studio-history>button,.studio-facing>button,.studio-pose,.studio-surprise,.studio-tab,.studio-toggle,.studio-save,.studio-small-button,.studio-reel-nudge,.studio-spin,.studio-step){
  --o:3px;--r:2px;--bv:5px;--lip:7px;--sink:0px;
  --face:#2f6fbe;--rim:var(--cs-blue-hi);--hi:#4f8fd8;--lo:var(--cs-blue-lo);--text:#fff;--shade:rgba(22,25,43,.8);
  --top:var(--hi);--bot:var(--lo);
  position:relative;border:0;border-radius:0;background:var(--face);color:var(--text);
  font-family:var(--cs-font-heading);font-weight:400;line-height:1.15;letter-spacing:.02em;text-shadow:2px 2px 0 var(--shade);
  image-rendering:pixelated;transform:translateY(var(--sink));
  box-shadow:
    0 calc(var(--o)*-1) 0 0 var(--cs-ink),0 var(--o) 0 0 var(--cs-ink),calc(var(--o)*-1) 0 0 0 var(--cs-ink),var(--o) 0 0 0 var(--cs-ink),
    inset 0 0 0 var(--r) var(--rim),inset var(--bv) var(--bv) 0 0 var(--top),inset calc(var(--bv)*-1) calc(var(--bv)*-1) 0 0 var(--bot),
    0 calc(var(--lip) - var(--sink)) 0 0 var(--cs-lip);
  transition:transform 90ms steps(2),box-shadow 90ms steps(2),filter 90ms steps(2);
}
/* white blocks (the site nav links) */
.character-studio :is(.studio-close,.studio-history>button,.studio-tab,.studio-small-button,.studio-reel-nudge,.studio-step){--face:#fff;--rim:#fff;--hi:#fff;--lo:#c4d6ee;--text:var(--cs-navy);--shade:transparent}
/* the main action: red with the yellow rim */
.character-studio .studio-save{--o:4px;--r:4px;--bv:8px;--lip:11px;--face:var(--cs-red);--rim:var(--cs-yellow);--hi:var(--cs-red-hi);--lo:var(--cs-red-lo)}
.character-studio .studio-surprise{--o:4px;--r:3px;--bv:7px;--lip:9px}
@media (hover:hover){
  .character-studio :where(.studio-close,.studio-history>button,.studio-facing>button,.studio-pose,.studio-surprise,.studio-tab,.studio-toggle,.studio-save,.studio-small-button,.studio-reel-nudge,.studio-spin,.studio-step):hover:not(:disabled,[aria-pressed=true],[aria-selected=true]){--sink:2px;filter:brightness(1.08)}
}
/* "on": green, pushed part way in */
.character-studio :where(.studio-facing>button,.studio-pose,.studio-toggle)[aria-pressed=true]{--face:var(--cs-green);--rim:var(--cs-lime);--hi:var(--cs-green-hi);--lo:var(--cs-green-lo);--sink:3px}
/* the selected tab is the yellow ? block */
.character-studio .studio-tab[aria-selected=true]{--face:var(--cs-yellow);--rim:var(--cs-yellow);--hi:var(--cs-yellow-hi);--lo:var(--cs-yellow-lo);--text:var(--cs-navy);--sink:2px;filter:none}
.character-studio :where(.studio-close,.studio-history>button,.studio-facing>button,.studio-pose,.studio-surprise,.studio-tab,.studio-toggle,.studio-save,.studio-small-button,.studio-reel-nudge,.studio-spin,.studio-step):active:not(:disabled){--sink:calc(var(--lip) - var(--o));--top:var(--lo);--bot:var(--hi)}
.character-studio :where(.studio-close,.studio-history>button,.studio-facing>button,.studio-pose,.studio-surprise,.studio-tab,.studio-toggle,.studio-save,.studio-small-button,.studio-reel-nudge,.studio-spin,.studio-step):disabled{opacity:.5;filter:saturate(.35)}

/* --------------------------------- header --------------------------------- */

.studio-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 26px 12px;border-bottom:4px solid var(--cs-navy);background:var(--cs-blue);flex-shrink:0}
.studio-eyebrow{display:block;font-family:var(--cs-font-sub);font-size:15px;line-height:1.2;letter-spacing:.08em;color:var(--cs-yellow);text-shadow:2px 2px 0 var(--cs-navy)}
.studio-header h2{font-family:var(--cs-font-heading);font-weight:400;font-size:30px;line-height:1.1;letter-spacing:.01em;margin:3px 0 4px;color:#fff;text-shadow:3px 3px 0 var(--cs-navy);text-transform:none}
.studio-header h2 span{color:var(--cs-yellow)}
.studio-header p{margin:0;color:var(--muted);font-size:16px;line-height:1.3}
.character-studio .studio-close{--lip:7px;flex-shrink:0;width:46px;height:46px;padding:0;margin:0 4px 8px 0;font-family:var(--cs-font-body);font-size:32px!important;font-weight:700;line-height:1}
@media (hover:hover){.character-studio .studio-close:hover:not(:disabled){--face:var(--cs-yellow-hi);--hi:var(--cs-yellow-hi);--lo:var(--cs-yellow-lo);filter:none}}

/* ----------------------------- the preview side ---------------------------- */

.studio-body{display:grid;grid-template-columns:39% 61%;grid-template-rows:minmax(0,1fr);flex:1;min-height:0}
/* The label and undo/redo sit over the sky like a game HUD (same grid cell
   as the scene), which leaves the hero the whole height of the column. */
.studio-preview{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto auto auto;padding:16px 22px 10px;background:var(--cs-blue-lo);border-right:4px solid var(--cs-navy);min-width:0;min-height:0}
.studio-preview-top{grid-row:1;grid-column:1;align-self:start;position:relative;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:14px 18px 0 16px;pointer-events:none}
.studio-preview-top>*{pointer-events:auto}
.studio-live{margin-top:3px;padding:5px 9px 4px;background:rgba(16,36,74,.86);font-family:var(--cs-font-sub);font-size:14px;line-height:1.2;letter-spacing:.05em;color:#b9ffcb;
  box-shadow:0 -3px 0 0 var(--cs-ink),0 3px 0 0 var(--cs-ink),-3px 0 0 0 var(--cs-ink),3px 0 0 0 var(--cs-ink)}
.studio-history{display:flex;gap:12px;padding:3px 3px 8px}
.character-studio .studio-history button{width:40px;height:36px;padding:0;font-family:"Trebuchet MS",sans-serif;font-size:22px;font-weight:700}

/* The scene: the flyer sky, two pixel clouds and a grass block. */
.studio-scene{
  --ground:42px;--grass:11px;
  position:relative;isolation:isolate;grid-row:1;grid-column:1;min-height:200px;overflow:hidden;margin:0 4px 16px;
  border:4px solid var(--cs-ink);background:var(--cs-sky) url("Graphics/flyer/sky-blocks.png") 30% 40%/cover no-repeat;image-rendering:pixelated;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.18),6px 6px 0 0 var(--cs-lip);
}
.studio-cloud{position:absolute;z-index:0;top:9%;left:-6%;width:46%;max-width:180px;aspect-ratio:640/196;background:url("Graphics/flyer/cloud-large.png") center/contain no-repeat;image-rendering:pixelated;opacity:.95;pointer-events:none}
.studio-cloud.cloud-two{left:auto;right:-8%;top:34%;width:38%;max-width:150px;transform:scaleX(-1);opacity:.85}
/* 7x7 pixel sparkles in place of the text stars */
.studio-spark{position:absolute;z-index:3;left:12%;top:8%;width:21px;height:21px;font-size:0!important;color:transparent;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffd200' d='M3 0h1v2h-1zM2 2h1v1h-1zM4 2h1v1h-1zM0 3h2v1h-2zM5 3h2v1h-2zM2 4h1v1h-1zM4 4h1v1h-1zM3 5h1v2h-1z'/%3E%3Cpath fill='%23fff' d='M3 2h1v1h-1zM2 3h3v1h-3zM3 4h1v1h-1z'/%3E%3C/svg%3E") center/contain no-repeat;
  image-rendering:pixelated;filter:drop-shadow(2px 2px 0 rgba(16,36,74,.45))}
.studio-spark.spark-two{left:auto;right:10%;top:26%;width:14px;height:14px}
/* The grass block: the flyer's grass-and-dirt tile with a dark outline round
   the solid part (the blades along the top stay free). */
.studio-platform{position:absolute;z-index:1;left:50%;bottom:14px;width:min(78%,300px);height:var(--ground);transform:translateX(-50%);
  background:url("Graphics/flyer/grass-tile.png") repeat-x left top/auto 100%;image-rendering:pixelated}
.studio-platform::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:var(--grass);bottom:0;
  box-shadow:0 4px 0 0 var(--cs-ink),-4px 0 0 0 var(--cs-ink),4px 0 0 0 var(--cs-ink),0 12px 0 0 rgba(16,36,74,.35)}
/* The hero keeps its own 96x84 aspect (no letterboxing), so dropping it by
   3/84 of its height puts the feet exactly on the grass line. */
.studio-hero{position:absolute;z-index:2;left:0;right:0;margin:0 auto;bottom:calc(14px + var(--ground) - var(--grass) - 3px);
  width:auto;height:auto;max-width:calc(100% - 12px);max-height:calc(100% - 14px - var(--ground) + var(--grass) - 2px);
  image-rendering:pixelated;translate:0 calc(300% / 84);filter:drop-shadow(4px 0 0 rgba(16,36,74,.22))}
.studio-celebrate .studio-spark{animation:studio-pop .8s steps(6)}
.studio-jumping{animation:studio-hop 1s steps(8) infinite}

.studio-facing{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 3px 10px}
.character-studio .studio-facing button{min-height:40px;padding:8px 12px;font-size:12px}
.studio-facing span{font-family:var(--cs-font-sub);font-size:15px;color:#fff;text-shadow:2px 2px 0 var(--cs-navy);text-align:center}
.studio-poses{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 9px;padding:0 3px}
.character-studio .studio-pose{min-height:42px;padding:6px 2px;font-size:12px!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.character-studio .studio-surprise{width:calc(100% - 8px);margin:18px 4px 12px;min-height:46px;padding:8px 14px;font-size:15px!important}
.studio-preview-hint{text-align:center;font-size:14px;margin:2px 0 0;color:var(--muted)}

/* --------------------------------- wardrobe --------------------------------- */

.studio-wardrobe{min-width:0;min-height:0;display:flex;flex-direction:column}
.studio-tabs{display:flex;flex-wrap:wrap;gap:14px 12px;padding:16px 22px 18px;border-bottom:4px solid var(--cs-navy);background:var(--cs-blue-2);flex-shrink:0}
.character-studio .studio-tab{--lip:6px;min-height:40px;padding:9px 11px 8px;font-size:12px!important;white-space:nowrap}
.studio-tab:is([data-tab=saved],[data-tab=name]){margin-left:auto}
.character-studio .studio-tab:is([data-tab=saved],[data-tab=name],[data-tab=power]):not([aria-selected=true]){--face:#e7fbe9;--rim:#e7fbe9;--hi:#fff;--lo:#9fd8ad;--text:var(--cs-green-lo)}

.studio-panel{padding:22px 24px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--cs-blue-hi) var(--cs-blue-lo);flex:1;min-height:0;container:studio-panel/inline-size}
.studio-panel h3{font-family:var(--cs-font-heading);font-weight:400;font-size:22px;line-height:1.15;letter-spacing:.01em;color:#fff;text-shadow:3px 3px 0 var(--cs-navy);margin:0 0 6px;text-transform:none}
.studio-panel-help{color:var(--muted);font-size:16px;line-height:1.35;margin:0 0 20px}

/* Picture tiles (ideas, options, saved looks): square pixel frames on a
   patch of sky. */
.studio-ideas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.studio-idea{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:6px 6px 10px;
  border:3px solid var(--cs-navy);border-radius:0;background:var(--cs-blue-2);box-shadow:5px 5px 0 0 var(--cs-lip);
  font-family:var(--cs-font-sub)!important;font-size:17px!important;font-weight:700!important;line-height:1.2;color:#fff;text-shadow:2px 2px 0 var(--cs-navy);
  transition:transform 90ms steps(2),box-shadow 90ms steps(2)}
.studio-idea canvas{display:block;width:100%;max-width:none;height:129px;object-fit:contain;image-rendering:pixelated;
  background:var(--cs-sky) url("Graphics/flyer/sky-blocks.png") 40% 45%/260% auto no-repeat;border:3px solid var(--cs-navy);margin-bottom:6px}
.studio-idea:nth-child(2) canvas{background-position:85% 20%}.studio-idea:nth-child(3) canvas{background-position:10% 75%}.studio-idea:nth-child(4) canvas{background-position:70% 85%}
@media (hover:hover){.studio-idea:hover{background:#4c89d2;transform:translate(-2px,-2px);box-shadow:7px 7px 0 0 var(--cs-lip)}}
.studio-idea:active{transform:translate(3px,3px);box-shadow:2px 2px 0 0 var(--cs-lip)}
.studio-tip{border:3px solid var(--cs-navy);border-radius:0;background:var(--cs-blue-lo);box-shadow:inset 3px 3px 0 0 rgba(255,255,255,.1);padding:12px 15px;font-size:15px;line-height:1.45;color:#eef6ff;margin:20px 0 0}

.studio-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:24px}
.studio-option{position:relative;min-width:0;padding:0 0 8px;overflow:hidden;border:3px solid var(--cs-navy);border-radius:0;background:var(--cs-blue-2);box-shadow:4px 4px 0 0 var(--cs-lip);color:#fff;transition:transform 90ms steps(2),box-shadow 90ms steps(2)}
.studio-option-art{position:relative;display:block;height:92px;overflow:hidden;margin:4px 4px 7px;background:#5aaee2;box-shadow:inset 0 -14px 0 0 rgba(36,89,166,.25)}
.studio-option canvas{position:absolute;left:50%;top:0;height:92px;width:110px;max-width:none;object-fit:contain;image-rendering:pixelated;transform:translateX(-50%)}
.studio-option .crop-head canvas{height:184px;width:221px;top:0}
.studio-option .crop-top canvas{height:200px;width:240px;top:-83px}
.studio-option .crop-bottom canvas{height:220px;width:264px;top:-127px}
.studio-option .crop-shoes canvas{height:280px;width:336px;top:-205px}
.studio-option-label{display:block;min-height:16px;padding:0 4px;font-family:var(--cs-font-sub);font-size:15px;line-height:1.15;white-space:normal;text-shadow:2px 2px 0 var(--cs-navy)}
@media (hover:hover){.studio-option:hover{background:#4c89d2;transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--cs-lip)}}
.studio-option:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--cs-lip)}
/* Chosen: the green card of the mode picker, plus a yellow tick block. */
.studio-option[aria-pressed=true]{border-color:var(--cs-ink);background:var(--cs-green);box-shadow:inset 0 0 0 3px var(--cs-lime),4px 4px 0 0 var(--cs-lip)}
.studio-option[aria-pressed=true] .studio-option-art{box-shadow:0 0 0 3px var(--cs-lime),inset 0 -14px 0 0 rgba(17,112,47,.22)}
@media (hover:hover){.studio-option[aria-pressed=true]:hover{background:#27b456;box-shadow:inset 0 0 0 3px var(--cs-lime),6px 6px 0 0 var(--cs-lip)}}
.studio-option[aria-pressed=true]::after{content:"✓";position:absolute;z-index:2;right:6px;top:6px;width:24px;height:24px;line-height:22px;border-radius:0;
  background:var(--cs-yellow);color:var(--cs-navy);font:700 16px/22px "Trebuchet MS",sans-serif;text-shadow:none;
  box-shadow:0 -2px 0 0 var(--cs-ink),0 2px 0 0 var(--cs-ink),-2px 0 0 0 var(--cs-ink),2px 0 0 0 var(--cs-ink),inset -3px -3px 0 0 var(--cs-yellow-lo)}

/* Colour swatches: square paint pots in a notched outline. Chosen = a white
   inner rim and a yellow ring outside the outline, lifted a step. */
.studio-colours{border:0;margin:0 0 22px;padding:0;min-width:0}
.studio-colours legend{padding:0;margin-bottom:12px;font-family:var(--cs-font-sub);font-size:17px;line-height:1.2;color:#fff;text-shadow:2px 2px 0 var(--cs-navy)}
/* Tidy rows of six (eight skin tones: two rows of four); one row of twelve
   once the panel is wide enough. */
.studio-swatch-row{display:grid;grid-template-columns:repeat(6,40px);gap:14px;padding:4px 4px 2px}
.studio-swatch-row:has(>:nth-child(8):last-child){grid-template-columns:repeat(4,40px)}
/* twelve colours plus the current one (after a spark or a surprise roll) */
.studio-swatch-row:has(>:nth-child(13):last-child){grid-template-columns:repeat(7,40px);gap:14px 12px}
@container studio-panel (min-width:600px){
  .studio-swatch-row,.studio-swatch-row:has(>:nth-child(8):last-child){grid-template-columns:repeat(12,38px);gap:13px 12px}
  .studio-swatch-row:has(>:nth-child(13):last-child){grid-template-columns:repeat(13,36px);gap:13px 9px}
}
.studio-swatch{display:grid;place-items:center;width:100%;height:auto;aspect-ratio:1;min-width:36px;min-height:36px;padding:0;border:0;border-radius:0;background:var(--swatch);
  box-shadow:0 -3px 0 0 var(--cs-ink),0 3px 0 0 var(--cs-ink),-3px 0 0 0 var(--cs-ink),3px 0 0 0 var(--cs-ink),inset 3px 3px 0 0 rgba(255,255,255,.28),inset -3px -3px 0 0 rgba(0,0,0,.2),0 7px 0 0 var(--cs-lip);
  transition:transform 90ms steps(2),box-shadow 90ms steps(2)}
@media (hover:hover){.studio-swatch:hover{transform:translateY(-2px)}}
.studio-swatch[aria-pressed=true]{transform:translateY(-3px);
  box-shadow:inset 0 0 0 3px #fff,0 -3px 0 0 var(--cs-ink),0 3px 0 0 var(--cs-ink),-3px 0 0 0 var(--cs-ink),3px 0 0 0 var(--cs-ink),0 -6px 0 0 var(--cs-yellow),0 6px 0 0 var(--cs-yellow),-6px 0 0 0 var(--cs-yellow),6px 0 0 0 var(--cs-yellow),0 10px 0 0 var(--cs-lip)}
.studio-swatch span{font:700 18px/1 "Trebuchet MS",sans-serif;color:#fff;text-shadow:2px 0 0 var(--cs-ink),-2px 0 0 var(--cs-ink),0 2px 0 var(--cs-ink),0 -2px 0 var(--cs-ink)}
.character-studio .studio-swatch:focus-visible{outline-offset:9px}
.studio-details{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;padding:4px}
.character-studio .studio-toggle{min-height:44px;padding:11px 16px;font-size:13px}
.studio-toggle[aria-pressed=true]::before{content:"✓ ";font-family:"Trebuchet MS",sans-serif;font-weight:700}

/* --------------------------------- footer --------------------------------- */

.studio-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 26px 10px;background:var(--cs-navy);border-top:4px solid var(--cs-ink);flex-shrink:0}
.studio-status{margin:0;font-family:var(--cs-font-sub);font-size:17px;line-height:1.25;color:#b9ffcb}
.studio-error{color:#ffb0a4}
.studio-save-hint{display:block;margin-top:3px;font-size:15px;line-height:1.3;color:#c6d9f2}
.character-studio .studio-save{flex-shrink:0;min-width:170px;min-height:50px;margin:4px 6px 12px 0;padding:12px 22px;font-size:16px!important;white-space:nowrap}

/* ------------------------------- saved looks ------------------------------- */

.studio-saved-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.studio-saved-card{min-width:0;overflow:visible;padding:6px 6px 12px;text-align:center;border:3px solid var(--cs-navy);border-radius:0;background:var(--cs-blue-2);box-shadow:5px 5px 0 0 var(--cs-lip)}
.studio-saved-card canvas{display:block;width:100%;height:135px;object-fit:contain;image-rendering:pixelated;margin-bottom:8px;
  background:var(--cs-sky) url("Graphics/flyer/sky-blocks.png") 30% 40%/240% auto no-repeat;border:3px solid var(--cs-navy)}
.studio-saved-card b{font-family:var(--cs-font-sub);font-size:16px;font-weight:700;color:#fff;text-shadow:2px 2px 0 var(--cs-navy)}
.studio-saved-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 12px;margin-top:12px;padding:0 4px}
.character-studio .studio-small-button{--lip:6px;min-height:40px;padding:8px 10px;font-size:11px!important}
.character-studio .studio-small-button:not(.studio-delete):first-child{--face:var(--cs-green);--rim:var(--cs-lime);--hi:var(--cs-green-hi);--lo:var(--cs-green-lo);--text:#fff;--shade:rgba(22,25,43,.8)}
.character-studio .studio-delete{--text:var(--cs-red-lo)}

/* ------------------------- my hero: name + power ------------------------- *
 * Player studio only (.studio-player). The name is built on two word reels —
 * the same slot machine as the Join page's nickname — and the power is one of
 * four cards. The preview carries the hero's name tag and a power badge.
 * ------------------------------------------------------------------------ */

/* The power badge rides in the scene, under the name tag. */
.studio-power-badge{position:absolute;z-index:4;left:50%;bottom:calc(14px + (var(--ground) - var(--grass) - 30px) / 2);translate:-50% 0;display:flex;align-items:center;gap:7px;max-width:min(calc(78% - 12px),288px);height:30px;padding:3px 10px 3px 4px;border:0;border-radius:0;cursor:pointer;
  background:rgba(16,36,74,.9);color:#fff;font-family:var(--cs-font-heading);font-size:12px;line-height:1.1;letter-spacing:.02em;text-shadow:2px 2px 0 var(--cs-ink);
  box-shadow:0 -3px 0 0 var(--cs-ink),0 3px 0 0 var(--cs-ink),-3px 0 0 0 var(--cs-ink),3px 0 0 0 var(--cs-ink),inset 0 0 0 2px rgba(255,255,255,.14),4px 6px 0 0 var(--cs-lip);
  transition:transform 90ms steps(2)}
@media (hover:hover){.studio-power-badge:hover{transform:translateY(-2px)}}
.studio-power-badge .studio-power-icon{flex:0 0 auto;width:22px;height:22px;image-rendering:pixelated}
.studio-power-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-power-q{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;background:var(--cs-yellow);color:var(--cs-navy);font-size:15px;text-shadow:none;
  box-shadow:inset -3px -3px 0 0 var(--cs-yellow-lo)}
.studio-power-missing{animation:studio-nudge 1.6s steps(2) infinite}
.studio-power-missing .studio-power-label{color:var(--cs-yellow)}

/* The tiny power demo: the preview strikes the pose and the power's icon
   does its thing beside the hero. */
.studio-power-fx{position:absolute;z-index:3;left:calc(50% - 22px);bottom:45%;width:44px;height:44px;opacity:0;pointer-events:none;
  background:center/contain no-repeat;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 rgba(16,36,74,.45))}
.studio-power-fx.studio-fx-play{animation:studio-fx-rise 1.1s steps(8) 2 forwards}
.studio-power-fx[data-fx=hayden]{left:58%;bottom:42%}
.studio-power-fx[data-fx=hayden].studio-fx-play{animation-name:studio-fx-zap}
.studio-power-fx[data-fx=amal]{bottom:44px}
.studio-power-fx[data-fx=classic]{bottom:52%}
.studio-power-fx[data-fx=sarah]{bottom:38px}
.studio-power-fx[data-fx=sarah].studio-fx-play{animation-name:studio-fx-burn}
@keyframes studio-fx-zap{0%{opacity:0;transform:translateX(-20px)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(120px)}}
@keyframes studio-fx-rise{0%{opacity:0;transform:translateY(20px) scale(.7)}25%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateY(-90px) scale(1.15)}}
@keyframes studio-fx-burn{0%,100%{opacity:0;transform:scaleY(.6)}20%,80%{opacity:1;transform:scaleY(1.15)}50%{opacity:1;transform:scaleY(.85)}}
@keyframes studio-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* A returning player's old wardrobe looks, above the sparks. */
.studio-ideas.studio-past{margin-bottom:26px}

/* Welcome card (auto-opened "Create your hero!" visit). */
.studio-intro{margin:0 0 24px;padding:16px 18px 18px;border:3px solid var(--cs-ink);background:var(--cs-yellow);color:var(--cs-navy);
  box-shadow:inset 0 0 0 3px var(--cs-yellow-hi),inset -6px -6px 0 0 var(--cs-yellow-lo),6px 6px 0 0 var(--cs-lip)}
.studio-intro h3{color:var(--cs-navy)!important;text-shadow:2px 2px 0 rgba(255,255,255,.55)!important}
.studio-intro .studio-panel-help{color:var(--cs-navy);margin-bottom:14px}
.studio-steps{display:flex;flex-wrap:wrap;gap:14px 14px;margin:0 0 18px;padding:4px 4px 0;list-style:none}
.character-studio .studio-step{--lip:6px;display:flex;align-items:center;gap:8px;min-height:42px;padding:6px 12px 6px 6px;font-size:12px!important}
.studio-step b{display:grid;place-items:center;width:26px;height:26px;background:var(--cs-red);color:#fff;font-size:13px;text-shadow:1px 1px 0 var(--cs-red-lo);box-shadow:inset -3px -3px 0 0 var(--cs-red-lo)}
.character-studio .studio-later{--face:var(--cs-navy);--rim:var(--cs-blue-lo);--hi:var(--cs-blue);--lo:#0a1733;--text:#fff;--shade:rgba(0,0,0,.6);font-size:11px!important}

/* The name reels: two word wheels and a Spin block. */
.studio-reels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:14px 16px;align-items:center;margin:0 0 12px;padding:4px}
.studio-reel{display:grid;gap:9px;min-width:0}
.character-studio .studio-reel-nudge{--lip:5px;--bv:4px;min-height:32px;padding:2px 0;font-family:"Trebuchet MS",sans-serif;font-size:14px;font-weight:700}
.studio-reel-window{position:relative;height:132px;overflow:hidden;border:3px solid var(--cs-ink);
  background:linear-gradient(rgba(255,210,0,.2),rgba(255,210,0,.2)) 0 44px/100% 44px no-repeat,var(--cs-navy);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.1),inset 0 44px 0 0 rgba(0,0,0,.25),inset 0 -44px 0 0 rgba(0,0,0,.25),4px 4px 0 0 var(--cs-lip)}
/* The payline: a yellow pixel rule above and below the chosen word. */
.studio-reel-window::before{content:"";position:absolute;z-index:2;left:0;right:0;top:41px;height:50px;pointer-events:none;
  box-shadow:inset 0 3px 0 0 var(--cs-yellow),inset 0 -3px 0 0 var(--cs-yellow)}
.studio-reel-strip{margin:0;padding:0;list-style:none;will-change:transform}
.studio-reel-strip li{display:flex;align-items:center;justify-content:center;height:44px;padding:0 6px;overflow:hidden;white-space:nowrap;
  font-family:var(--cs-font-heading);font-size:15px;letter-spacing:.03em;text-transform:uppercase;color:#fff;text-shadow:2px 2px 0 var(--cs-ink)}
.character-studio .studio-spin{--o:4px;--r:3px;--bv:6px;--lip:9px;--face:var(--cs-green);--rim:var(--cs-lime);--hi:var(--cs-green-hi);--lo:var(--cs-green-lo);
  align-self:center;min-height:52px;padding:10px 18px;font-size:15px!important;white-space:nowrap}
.studio-spin-dice{font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-size:20px;text-shadow:none}
.character-studio .studio-next{--face:var(--cs-green);--rim:var(--cs-lime);--hi:var(--cs-green-hi);--lo:var(--cs-green-lo);--text:#fff;--shade:rgba(22,25,43,.8);font-size:12px!important;padding:10px 14px}
.studio-name-result{margin:6px 0 26px;font-family:var(--cs-font-sub);font-size:17px;color:#fff;text-shadow:2px 2px 0 var(--cs-navy)}
.studio-name-result strong{font-family:var(--cs-font-heading);font-weight:400;font-size:19px;letter-spacing:.02em;color:var(--cs-yellow);text-shadow:2px 2px 0 var(--cs-navy)}

/* The four powers: picture cards, chosen = the green card + yellow tick. */
.studio-powers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:10px}
.studio-power{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:start;min-width:0;padding:12px 14px 14px 12px;text-align:left;
  border:3px solid var(--cs-navy);border-radius:0;background:var(--cs-blue-2);box-shadow:5px 5px 0 0 var(--cs-lip);color:#fff;
  transition:transform 90ms steps(2),box-shadow 90ms steps(2)}
.studio-power-art{width:52px;height:52px;padding:6px;background:var(--cs-sky) url("Graphics/flyer/sky-blocks.png") 40% 45%/400% auto no-repeat;border:3px solid var(--cs-navy);image-rendering:pixelated}
.studio-power-text{display:grid;gap:4px;min-width:0}
.studio-power-name{padding-right:26px;font-family:var(--cs-font-heading);font-size:15px;line-height:1.15;letter-spacing:.02em;color:#fff;text-shadow:2px 2px 0 var(--cs-navy)}
.studio-power-desc{font-family:var(--cs-font-body);font-size:15px;line-height:1.3;color:#e6f0ff}
.studio-power-move{font-family:var(--cs-font-sub);font-size:14px;line-height:1.2;color:var(--cs-yellow);text-shadow:1px 1px 0 var(--cs-navy)}
.studio-power-keys{display:inline-block;white-space:nowrap;letter-spacing:.04em}
@media (hover:hover){.studio-power:hover{background:#4c89d2;transform:translate(-2px,-2px);box-shadow:7px 7px 0 0 var(--cs-lip)}}
.studio-power:active{transform:translate(3px,3px);box-shadow:2px 2px 0 0 var(--cs-lip)}
.studio-power[aria-pressed=true]{border-color:var(--cs-ink);background:var(--cs-green);box-shadow:inset 0 0 0 3px var(--cs-lime),5px 5px 0 0 var(--cs-lip)}
@media (hover:hover){.studio-power[aria-pressed=true]:hover{background:#27b456;box-shadow:inset 0 0 0 3px var(--cs-lime),7px 7px 0 0 var(--cs-lip)}}
.studio-power[aria-pressed=true] .studio-power-desc{color:#fff}
.studio-power[aria-pressed=true] .studio-power-art{border-color:var(--cs-ink);box-shadow:0 0 0 3px var(--cs-lime)}
.studio-power[aria-pressed=true]::after{content:"✓";position:absolute;z-index:2;right:8px;top:8px;width:24px;height:24px;line-height:22px;text-align:center;
  background:var(--cs-yellow);color:var(--cs-navy);font:700 16px/22px "Trebuchet MS",sans-serif;text-shadow:none;
  box-shadow:0 -2px 0 0 var(--cs-ink),0 2px 0 0 var(--cs-ink),-2px 0 0 0 var(--cs-ink),2px 0 0 0 var(--cs-ink),inset -3px -3px 0 0 var(--cs-yellow-lo)}
.character-studio .studio-power:focus-visible{outline-offset:5px}
@container studio-panel (max-width:520px){.studio-powers{grid-template-columns:minmax(0,1fr);gap:14px}}
@container studio-panel (max-width:420px){
  .studio-reels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .character-studio .studio-spin{grid-column:1/-1;min-height:46px}
}

/* The game page's hero panel: the power's icon in the note line. */
.costume-power-icon{width:20px;height:20px;vertical-align:-4px;image-rendering:pixelated}

/* ------------------- launch chips (index.html #costume-wrap) ------------------- */

.studio-launch-look{position:relative;width:76px;min-width:65px;height:78px;padding:0;margin:3px 4px 7px 3px;overflow:hidden;cursor:pointer;
  border:3px solid var(--cs-navy);border-radius:0;background:var(--cs-sky) url("Graphics/flyer/sky-blocks.png") 30% 40%/300% auto no-repeat;
  box-shadow:4px 4px 0 0 var(--cs-lip);image-rendering:pixelated;transition:transform 90ms steps(2),box-shadow 90ms steps(2)}
.studio-launch-look canvas{display:block;width:84px;height:70px;margin:2px 0 0 -7px;image-rendering:pixelated;object-fit:contain}
@media (hover:hover){.studio-launch-look:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--cs-lip)}}
.studio-launch-look:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--cs-lip)}
.studio-launch-look[aria-pressed=true]{border-color:var(--cs-ink);box-shadow:inset 0 0 0 3px var(--cs-yellow),0 0 0 3px var(--cs-yellow),4px 4px 0 3px var(--cs-lip)}
.studio-launch-look[aria-pressed=true]::after{content:"✓";position:absolute;right:3px;top:3px;width:18px;height:18px;background:var(--cs-yellow);color:var(--cs-navy);font:700 13px/18px "Trebuchet MS",sans-serif;text-align:center;box-shadow:0 0 0 2px var(--cs-ink)}
.studio-launch-look:focus-visible,.studio-return-hero:focus-visible{outline:3px dashed #fff;outline-offset:5px}
.studio-return-hero{align-self:center;min-height:44px;margin:3px 4px 9px;padding:9px 12px;cursor:pointer;border:0;border-radius:0;background:#fff;color:var(--cs-navy);
  font-family:var(--cs-font-sub);font-size:15px;font-weight:700;line-height:1.15;
  box-shadow:0 -3px 0 0 var(--cs-ink),0 3px 0 0 var(--cs-ink),-3px 0 0 0 var(--cs-ink),3px 0 0 0 var(--cs-ink),inset -3px -3px 0 0 #c4d6ee,0 7px 0 0 var(--cs-lip);
  transition:transform 90ms steps(2),background 90ms steps(2)}
@media (hover:hover){.studio-return-hero:hover:not(:disabled){background:var(--cs-yellow-hi);transform:translateY(2px)}}
.studio-return-hero:disabled{opacity:.55;cursor:default}
/* The launch button is a flyer block button already; styles.css's older
   green lip (an id rule) flattens it, so put the green "go" block back. */
#costume-wrap #costume-open{--btn-face:var(--cs-green);--btn-rim:var(--cs-lime);--btn-hi:var(--cs-green-hi);--btn-lo:var(--cs-green-lo);margin:4px 0 16px;
  box-shadow:0 -4px 0 0 var(--cs-ink),0 4px 0 0 var(--cs-ink),-4px 0 0 0 var(--cs-ink),4px 0 0 0 var(--cs-ink),inset 0 0 0 4px var(--btn-rim),inset 8px 8px 0 0 var(--btn-hi),inset -8px -8px 0 0 var(--btn-lo),0 12px 0 0 var(--cs-lip)}
#costume-wrap #costume-open:hover{box-shadow:0 -4px 0 0 var(--cs-ink),0 4px 0 0 var(--cs-ink),-4px 0 0 0 var(--cs-ink),4px 0 0 0 var(--cs-ink),inset 0 0 0 4px var(--btn-rim),inset 8px 8px 0 0 var(--btn-hi),inset -8px -8px 0 0 var(--btn-lo),0 10px 0 0 var(--cs-lip)}
#costume-wrap #costume-open:active{box-shadow:0 -4px 0 0 var(--cs-ink),0 4px 0 0 var(--cs-ink),-4px 0 0 0 var(--cs-ink),4px 0 0 0 var(--cs-ink),inset 0 0 0 4px var(--btn-rim),inset -8px -8px 0 0 var(--btn-hi),inset 8px 8px 0 0 var(--btn-lo),0 4px 0 0 var(--cs-lip)}

@keyframes studio-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-24px)}}
@keyframes studio-pop{0%{transform:scale(.6) rotate(0)}55%{transform:scale(1.7) rotate(90deg)}100%{transform:scale(1) rotate(180deg)}}

/* ------------------------------ tablets (≤760) ------------------------------ */

@media (max-width:760px){
  .character-studio{width:calc(100vw - 16px);height:calc(100dvh - 16px);box-shadow:5px 5px 0 0 var(--cs-lip)}
  .studio-header{padding:12px 18px}
  .studio-header h2{font-size:23px}
  .studio-header p{font-size:15px}
  .studio-body{grid-template-columns:36% 64%}
  .studio-preview{padding:12px 10px}
  .studio-tabs{gap:12px 10px;padding:12px 14px 14px}
  .character-studio .studio-tab{padding:8px 8px 7px;font-size:11px!important}
  .studio-panel{padding:16px}
  .studio-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .studio-facing span{display:none}
  .studio-history{gap:9px}
  .character-studio .studio-history button{width:34px;height:36px}
  .studio-live{display:none}
  .studio-preview-top{justify-content:flex-end}
  .studio-poses{grid-template-columns:repeat(3,minmax(0,1fr))}
  .studio-scene{--ground:38px;--grass:10px}
  .studio-footer{padding:12px 17px}
  .studio-save-hint{max-width:240px}
  .studio-ideas{gap:12px}
  .studio-idea canvas{height:110px}
  .studio-idea{font-size:15px!important}
  .character-studio .studio-save{min-width:136px;padding:10px 15px}
}

/* ------------------------------- phones (≤540) ------------------------------- */

@media (max-width:540px){
  .character-studio{width:100vw;height:100dvh;border:0;box-shadow:none}
  .studio-header{padding:8px 12px 8px 15px;border-bottom-width:3px}
  .studio-header h2{font-size:19px;margin:1px 0}
  .studio-eyebrow{font-size:12px}
  .studio-header p{display:none}
  .character-studio .studio-close{width:40px;height:40px;font-size:28px!important;margin-bottom:6px}
  .studio-body{display:flex;flex-direction:column}
  .studio-preview{display:grid;grid-template-columns:44% minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:0 12px;padding:8px 14px 8px 8px;border-right:0;border-bottom:3px solid var(--cs-navy);height:218px;min-height:218px;flex-shrink:0;position:relative}
  .studio-preview-top{grid-column:2;grid-row:1;align-self:start;align-items:center;position:relative;z-index:3;padding:0;margin:0}
  .studio-live{display:block;margin:0;padding:0;background:none;box-shadow:none;font-size:12px;letter-spacing:.02em;white-space:nowrap;text-shadow:2px 2px 0 var(--cs-navy)}
  .studio-preview-top{justify-content:space-between}
  .studio-history{gap:9px;padding:3px 3px 6px}
  .character-studio .studio-history button{width:34px;height:32px;font-size:19px}
  .studio-scene{--ground:30px;--grass:8px;grid-column:1;grid-row:1/5;flex:none;min-height:0;height:200px;width:100%;margin:0;border-width:3px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),4px 4px 0 0 var(--cs-lip)}
  .studio-platform{bottom:10px;width:84%}
  .studio-hero{bottom:calc(10px + var(--ground) - var(--grass) - 2px);max-height:calc(100% - 10px - var(--ground) + var(--grass) - 4px)}
  .studio-cloud{width:56%}
  .studio-cloud.cloud-two{width:44%}
  .studio-spark{width:15px;height:15px}
  .studio-spark.spark-two{width:11px;height:11px}
  .studio-facing{grid-column:2;grid-row:2;margin:4px 3px 8px;gap:8px}
  .character-studio .studio-facing button{--lip:5px;flex:1;min-height:30px;padding:2px 6px;font-family:var(--cs-font-sub);font-size:14px;letter-spacing:0}
  .studio-poses{grid-column:2;grid-row:3;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px 7px;padding:0 3px}
  .studio-pose:nth-child(-n+3){grid-column:span 2}
  .studio-pose:nth-child(n+4){grid-column:span 3}
  .character-studio .studio-pose{--lip:5px;font-family:var(--cs-font-sub);font-size:14px!important;min-height:30px;padding:2px 1px;letter-spacing:0}
  .character-studio .studio-surprise{--lip:7px;--bv:5px;grid-column:2;grid-row:4;width:calc(100% - 6px);margin:12px 3px 6px;min-height:36px;padding:4px 6px;font-size:11px!important}
  .studio-preview-hint{display:none}
  .studio-wardrobe{flex:1}
  .studio-tabs{flex-wrap:nowrap;gap:10px;overflow-x:auto;scrollbar-width:none;padding:10px 12px 14px;min-height:60px;border-bottom-width:3px}
  .studio-tabs::-webkit-scrollbar{display:none}
  .studio-tabs::after{content:"";flex:0 0 2px}
  .character-studio .studio-tab{--lip:5px;flex-shrink:0;min-height:36px;padding:8px 10px 7px;font-size:11px!important}
  .studio-tab:is([data-tab=saved],[data-tab=name]){margin-left:0}
  .studio-panel{padding:14px 16px}
  .studio-panel h3{font-size:18px}
  .studio-panel-help{font-size:15px;margin-bottom:14px}
  .studio-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .studio-option-art{height:76px}
  .studio-option-label{font-size:13px}
  .studio-option .crop-head canvas{height:158px;width:190px}
  .studio-option .crop-top canvas{height:180px;width:216px;top:-76px}
  .studio-option .crop-bottom canvas{height:190px;width:228px;top:-110px}
  .studio-option .crop-shoes canvas{height:244px;width:293px;top:-179px}
  .studio-option[aria-pressed=true]::after{width:20px;height:20px;font-size:13px;line-height:18px;right:5px;top:5px}
  .studio-ideas{gap:12px}
  .studio-idea canvas{height:104px}
  .studio-saved-grid{gap:12px}
  .studio-saved-card canvas{height:112px}
  .studio-saved-actions{gap:12px 9px}
  .character-studio .studio-small-button{padding:8px 7px;font-size:10px!important}
  .studio-footer{padding:9px 12px 10px;gap:10px;align-items:center;border-top-width:3px}
  .studio-status{font-size:14px;line-height:1.25}
  .studio-save-hint{display:none}
  .character-studio .studio-save{--lip:9px;--bv:6px;--r:3px;font-size:13px!important;min-height:44px;min-width:124px;padding:9px 12px;margin:4px 4px 8px 0}
  .studio-colours{margin-bottom:18px}
  .studio-swatch-row{grid-template-columns:repeat(6,minmax(0,42px));gap:14px}
  .studio-swatch-row:has(>:nth-child(8):last-child){grid-template-columns:repeat(4,minmax(0,42px))}
  .studio-swatch-row:has(>:nth-child(13):last-child){grid-template-columns:repeat(7,minmax(0,42px));gap:14px 11px}
}

@media (max-width:359px){.studio-live{display:none}.studio-preview-top{justify-content:flex-end}}

/* ------------------------ short landscape (phones) ------------------------ */

@media (max-height:580px) and (min-width:541px){
  .character-studio{height:calc(100dvh - 12px);box-shadow:5px 5px 0 0 var(--cs-lip)}
  .studio-header{padding:8px 18px;border-bottom-width:3px}
  .studio-header p,.studio-eyebrow,.studio-preview-hint{display:none}
  .studio-header h2{font-size:20px;margin:0}
  .character-studio .studio-close{width:38px;height:38px;font-size:26px!important;margin-bottom:6px}
  /* scene on the left, the controls in a column beside it */
  .studio-preview{display:grid;grid-template-columns:minmax(0,1fr) 134px;grid-template-rows:auto auto minmax(0,1fr) auto;gap:0 10px;padding:8px 10px 6px 8px}
  .studio-preview-top{grid-column:2;grid-row:1;flex-direction:column;align-items:stretch;gap:2px;padding:0;margin:0}
  .studio-live{display:none}
  .studio-history{justify-content:space-between;gap:8px;padding:3px 3px 6px}
  .character-studio .studio-history button{width:auto;flex:1;height:30px;font-size:18px}
  .studio-scene{--ground:28px;--grass:8px;grid-column:1;grid-row:1/5;min-height:0;margin:0;border-width:3px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),4px 4px 0 0 var(--cs-lip)}
  .studio-platform{bottom:8px;width:84%}
  .studio-hero{bottom:calc(8px + var(--ground) - var(--grass) - 2px);max-height:calc(100% - 8px - var(--ground) + var(--grass) - 4px)}
  .studio-facing{grid-column:2;grid-row:2;margin:6px 3px 8px;gap:8px}
  .studio-facing span{display:none}
  .character-studio .studio-facing button{--lip:5px;flex:1;min-height:28px;padding:1px 3px;font-family:var(--cs-font-sub);font-size:13px;letter-spacing:0}
  .studio-poses{grid-column:2;grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:9px 8px;overflow:visible}
  .studio-pose:last-child{grid-column:span 2}
  .character-studio .studio-pose{--lip:5px;font-family:var(--cs-font-sub);font-size:13px!important;min-height:26px;padding:1px}
  .character-studio .studio-surprise{--lip:6px;--bv:5px;--o:3px;grid-column:2;grid-row:4;width:calc(100% - 6px);margin:6px 3px 6px;min-height:32px;padding:2px 2px;font-family:var(--cs-font-sub);font-size:13px!important;letter-spacing:0;white-space:nowrap}
  .studio-tabs{flex-wrap:nowrap;gap:10px;overflow-x:auto;scrollbar-width:none;padding:9px 12px 12px;border-bottom-width:3px}
  .studio-tabs::-webkit-scrollbar{display:none}
  .studio-tabs::after{content:"";flex:0 0 2px}
  .studio-tab{flex-shrink:0}
  .character-studio .studio-tab{--lip:5px;min-height:30px;padding:6px 7px 5px;font-size:10px!important}
  .studio-panel{padding:12px 14px}
  .studio-panel h3{font-size:18px}
  .studio-panel-help{font-size:14px;margin-bottom:12px}
  .studio-footer{padding:7px 18px 8px;border-top-width:3px}
  .studio-status{font-size:15px}
  .studio-save-hint{font-size:13px}
  .character-studio .studio-save{--lip:8px;--bv:6px;--r:3px;min-height:38px;padding:7px 16px;font-size:13px!important;margin:3px 4px 7px 0}
}

/* Windows high contrast drops box-shadows: put real borders and a visible
   chosen state back. */
@media (forced-colors:active){
  .character-studio :where(.studio-close,.studio-history>button,.studio-facing>button,.studio-pose,.studio-surprise,.studio-tab,.studio-toggle,.studio-save,.studio-small-button,.studio-reel-nudge,.studio-spin,.studio-step),
  .studio-swatch,.studio-launch-look,.studio-return-hero{border:2px solid ButtonText}
  .character-studio :is([aria-pressed=true],[aria-selected=true]),.studio-launch-look[aria-pressed=true]{outline:3px solid Highlight;outline-offset:2px}
  .studio-swatch{forced-color-adjust:none}
}

@media (prefers-reduced-motion:reduce){
  .character-studio *,.studio-launch-look,.studio-return-hero,#costume-wrap #costume-open{animation:none!important;transition:none!important}
}

/* ---------------------- my hero: small screens ---------------------- */
@media (max-width:540px){
  .studio-power-badge{bottom:calc(10px + (var(--ground) - var(--grass) - 24px) / 2);height:24px;padding:2px 7px 2px 2px;gap:5px;font-size:10px}
  .studio-power-badge .studio-power-icon,.studio-power-q{width:18px;height:18px}
  .studio-power-q{font-size:12px}
  .studio-intro{padding:12px 13px 14px;margin-bottom:18px}
  .studio-steps{gap:12px 10px;margin-bottom:14px}
  .character-studio .studio-step{min-height:36px;padding:4px 9px 4px 4px;font-size:11px!important}
  .studio-step b{width:22px;height:22px;font-size:12px}
  .studio-reels{gap:12px 12px}
  .studio-reel-strip li{font-size:13px;padding:0 3px}
  .studio-name-result{font-size:15px;margin-bottom:20px}
  .studio-name-result strong{font-size:16px}
  .studio-power{grid-template-columns:44px minmax(0,1fr);gap:10px;padding:10px 12px 12px 10px}
  .studio-power-art{width:44px;height:44px;padding:5px}
  .studio-power-name{font-size:14px}
  .studio-power-desc{font-size:14px}
}
@media (max-height:580px) and (min-width:541px){
  /* The scene is narrow here: the badge is the icon alone (the footer line
     names the power), and the reels drop to 34px rows to fit the panel. */
  .studio-power-badge{bottom:calc(8px + (var(--ground) - var(--grass) - 22px) / 2);height:22px;padding:2px;gap:0;font-size:10px}
  .studio-power-badge .studio-power-label{display:none}
  .studio-reels{gap:10px 14px}
  .character-studio .studio-reel-nudge{min-height:26px;font-size:12px}
  .studio-reel{gap:7px}
  .studio-reel-window{height:102px;background-position:0 34px;background-size:100% 34px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.1),inset 0 34px 0 0 rgba(0,0,0,.25),inset 0 -34px 0 0 rgba(0,0,0,.25),4px 4px 0 0 var(--cs-lip)}
  .studio-reel-window::before{top:31px;height:40px}
  .studio-reel-strip li{height:34px;font-size:13px}
  .character-studio .studio-spin{min-height:42px;padding:6px 12px;font-size:13px!important}
  .studio-name-result{margin-bottom:16px}
  .studio-power-badge .studio-power-icon,.studio-power-q{width:17px;height:17px}
  .studio-power-q{font-size:11px}
}