/* R54 Creation Studio (Claude, 2026-10-22). Built from the Lab's own components (kcard, kbtn, kchip, ktile, kbar, panel, btn, list), so
   Version 1 Classic, Version 2, Version 3 "Holo Night" and Version 4 "Sky Day" restyle them; only layout and the few new pieces live here. */
.c54 { display: flex; flex-direction: column; gap: calc(14px * var(--k, 1)); min-width: 0; }
.c54 .kcard, .c54 .panel { min-width: 0; }
.c54 .row { flex-wrap: wrap; }
.c54-field { display: flex; flex-direction: column; gap: 4px; font-weight: 700; margin: 6px 0; min-width: 0; }
.c54-field input, .c54-field select { min-height: 46px; font: inherit; padding: 6px 10px; border-radius: 12px; max-width: 100%; box-sizing: border-box; }
.c54-ta { width: 100%; box-sizing: border-box; min-height: 120px; font: inherit; line-height: 1.5; padding: 10px; border-radius: 14px; resize: vertical; }
.c54-how { margin-top: 10px; opacity: .85; }
.c54-starters .kchip { white-space: normal; text-align: left; }
.c54-suggest { margin-top: 10px; }
.c54-card { margin: 0 0 calc(14px * var(--k, 1)); }
.c54-homechip { margin: 12px 0; }
.c54-from { font-weight: 800; font-size: 1.1em; margin: 0; }
.c54-fcount { margin-left: 4px; }
/* the story maker's pages */
.c54-pages { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.c54-page { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 18px; border: 2px solid var(--line, #6a86c8); background: color-mix(in srgb, var(--panel, #10204a) 80%, transparent); min-width: 0; }
.c54-pic .cr-scene { width: 100%; border-radius: 14px; }
.c54-pagebody { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.c54-pagebody textarea { width: 100%; box-sizing: border-box; font: inherit; border-radius: 12px; padding: 8px; }
.c54-actions, .c54-after { gap: 10px; margin: 8px 0; }
/* the story player */
.c54-player { display: flex; flex-direction: column; gap: 10px; }
.c54-stage { position: relative; width: 100%; border-radius: 18px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.c54-stage canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: pointer; }
.c54-cap { position: absolute; left: 4%; right: 4%; bottom: 4%; margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(8, 18, 48, .76); color: #fff; font-weight: 700; font-size: clamp(14px, 2.6vw, 24px); line-height: 1.35; text-align: center; max-height: 46%; overflow: auto; }
.c54-bar { align-items: center; gap: 10px; }
.c54-count { font-weight: 800; }
.c54-toggles { gap: 8px; }
.c54-video { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.c54-prog { width: min(100%, 420px); }
.c54-vid { width: 100%; max-width: 720px; border-radius: 14px; background: #000; }
/* the drawing pad */
.c54-draw { display: flex; flex-direction: column; gap: 10px; }
.c54-padwrap { width: 100%; max-width: 640px; }
.c54-pad { width: 100%; aspect-ratio: 4 / 3; background: #fff; border-radius: 14px; border: 2px solid var(--line, #6a86c8); touch-action: none; cursor: crosshair; display: block; }
.c54-colors { gap: 6px; }
/* lists of things a child made */
.c54-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.c54-list { margin: 6px 0 10px; padding-left: 20px; }
.c54-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin: 8px 0; }
.c54-thumbs figure { margin: 0; text-align: center; min-width: 0; }
.c54-thumbs img { width: 100%; height: auto; max-height: 120px; object-fit: contain; }
.c54-thumbs figcaption { font-weight: 700; font-size: .9em; }
.c54-carcard.on { outline: 3px solid var(--gold, #ffc84a); border-radius: 12px; }
.c54-carname { font-weight: 800; font-size: 1.2em; margin: 4px 0; }
.c54-garage .r53-garage-preview img, .c54-rbprev img { width: min(100%, 520px); height: auto; display: block; margin: 0 auto; }
.c54-rbprev img { width: min(100%, 260px); }
/* the roller coaster */
.c54-coaster { display: flex; flex-direction: column; gap: 10px; }
.c54-levels { gap: 6px; align-items: center; }
.c54-goal { font-weight: 800; }
.c54-costage { position: relative; width: 100%; border-radius: 18px; overflow: hidden; border: 2px solid var(--line, #6a86c8); }
.c54-costage canvas { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; touch-action: manipulation; cursor: pointer; }
.c54-meters { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .9); color: #14204a; font-size: 13px; font-weight: 700; }
.c54-meters span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.c54-meters b { font-size: 1.2em; white-space: nowrap; }
.c54-meters i { display: block; height: 8px; border-radius: 4px; background: #2f8fff; width: 0; transition: width .1s linear; }
.c54-meters span + span i { background: #ff8a3d; }
.c54-co-msg { min-height: 1.5em; font-weight: 700; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.c54-tower { align-items: center; gap: 8px; }
.c54-palette { display: flex; flex-wrap: wrap; gap: 8px; }
.c54-piece { min-height: 48px; }
.c54-track { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.c54-track li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: 12px; border: 2px solid var(--line, #6a86c8); }
.c54-learn summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; }
/* robot quest */
.c54-qgrid { width: min(100%, 440px); }
.c54-qcell.lit { background: #6a5a12 !important; }
.c54-qbot { width: 86%; height: auto; transition: transform .2s; }
.c54-qn { width: 30px; height: 30px; font-size: 13px; }
/* grown-ups' editor */
.c54-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; max-width: 100%; }
.c54-strip .bk-th { flex: 0 0 auto; }
.c54-edit { align-items: start; }
.c54-gstage { max-width: 100%; }
.c54-file { position: relative; cursor: pointer; }
.c54-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px; border-radius: 12px; border: 1px solid var(--line, #6a86c8); }
.c54-check input { width: 22px; height: 22px; }
@media (max-width: 640px) { .c54-meters { font-size: 12px; } .c54-bar .kbtn { min-width: 52px; } }
/* Version 4 "Sky Day": light cards — keep the canvases readable */
html[data-look="v4"] .c54-page { background: #fff; }
html[data-look="v4"] .c54-cap { background: rgba(11, 47, 122, .82); }
/* The Lab's dialogs sit above the bottom tab bar of the new app shell (r54-shell.css, z-index 9500) — on a phone a dialog is a bottom sheet
   and its buttons were under the bar (reported to the app-shell work; remove when the shell does this itself). */
html.r54-tabs .overlay { z-index: 9600; }