/* Little Sketcher — walnut, paper, brass and ink. Shared by both studios. */
:root{--ink:#342b24;--muted:#786856;--wood:#795439;--wood-dark:#503723;--paper:#fffaf0;--cream:#f1e7d7;--line:#d7c5ac;--accent:#ad653e;--olive:#687155;font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:#e9decc}
body{color:var(--ink);background:repeating-linear-gradient(3deg,#76523706 0px,#76523706 1px,transparent 1px,transparent 8px),repeating-linear-gradient(91deg,#fff4 0px,transparent 2px,transparent 120px),linear-gradient(110deg,#e9ddc9,#f4ebdd 48%,#e7d8c1);background-attachment:fixed}
header{background:transparent;border-color:var(--line)}header a,.brand,.brand-wordmark,.brand-wordmark>span{color:var(--wood-dark)}.brand-wordmark small,.eyebrow,small,.pill,.badge{color:var(--muted)}.brand-icon svg rect{fill:var(--wood)}.brand-icon svg path[fill="#FFE17A"]{fill:#eac987}.brand-icon svg path[stroke="#96E3CB"]{stroke:#b9c394}.brand-icon{filter:drop-shadow(0 3px 2px #50372322)}
h1,h2{color:var(--ink);letter-spacing:-.04em}h1{font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:clamp(27px,3.2vw,42px)}h1 em{color:var(--accent);font-family:inherit}p,#status,.under-note,footer,.recognition-bar p,.object-heading span,#behavior-description{color:var(--muted)}.pill,.badge{background:#eee2cc;border-color:var(--line)}
.workspace,.studio{background:var(--paper);border:1px solid #bca182;border-radius:18px;box-shadow:0 5px 0 #cab598,0 18px 45px #49362113}.topbar,.toolbar,.drawing-controls{background:linear-gradient(180deg,#fffaf1,#f5ebdc);border-color:var(--line)}aside{background:#eee3d1;border-color:var(--line)}.recognition-bar,.selection-bar,.object-panel{background:#eadeca;border-color:var(--line)}.paper,#stage{background-color:var(--paper)}.paper.night{background-color:#252624}.map-head,.segment-actions{color:var(--muted)}#map{background:#ede2cf}
button,.quiet,.header-actions .quiet,.auto-play,.tool,.icon-button,.selection-bar button,.object-actions button,.behavior-options button,.asset button,.segment-actions button{font-family:inherit;background:linear-gradient(#fffcf6,#f1e6d5);color:var(--ink);border:1px solid var(--line);border-radius:9px;box-shadow:0 2px 0 #bda88c33;transition:background .15s,box-shadow .15s;}
button:hover:not(:disabled){background:#ebdbc3;filter:none;border-color:#af8d67}button:active:not(:disabled){box-shadow:none;transform:translateY(1px)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ab6f3c;outline-offset:3px}button:disabled{opacity:.42;cursor:default}
button.primary,.play,.recognize,#create,#add-asset,#publish-share,#import-share,.selection-bar #apply-role{background:linear-gradient(170deg,#896044,#62422f);color:#fff9eb;border-color:#533725;box-shadow:0 3px 0 #402b1d30}.active,button.selected,.pencil-sizes button.selected,.auto-play[aria-pressed=true],.tabs .active,.behavior-options button.selected{background:#e2cba8;color:#4a3222;border-color:#a78054}.asset{background:#fffbf3;border-color:var(--line)}.asset canvas{background:#f4ecdf}.asset small{letter-spacing:0}
input:not([type=color]):not([type=range]):not([type=checkbox]),select,textarea,.object-fields input,.selection-bar select{font:inherit;color:var(--ink);background:#fffcf5;border:1px solid #c8b496;border-radius:8px;padding:8px 10px;box-shadow:inset 0 1px 3px #4c32110a}select{cursor:pointer;min-height:36px}input[type=range],input[type=checkbox]{accent-color:var(--wood)}dialog{background:#fff9ef;color:var(--ink);border:1px solid #b99e7d;border-radius:18px;box-shadow:0 24px 90px #30231740}dialog::backdrop{background:#30271e66;backdrop-filter:blur(4px)}.creation-tabs button[aria-selected=true]{background:#ddc5a0;border-color:#a88459;color:#4d3523}#pad{background:#fffdf7;border-color:var(--line)}.walkthrough-toggle{background:#f7eddd;border-color:var(--line);color:var(--ink)}.walkthrough-toggle input{accent-color:var(--wood)}#hud,.goal-score{background:#fff8ebdf;color:var(--wood-dark);border:1px solid var(--line);font-variant-numeric:tabular-nums}
#labels .object-label>button,#labels .object-actions button,.object-label{background:#fff5e2;color:#654931;border-color:#c9af87}#labels .object-actions{background:#fff7e8;border-color:#c9af87}#labels .resize-handle{background:#80613e;box-shadow:0 0 0 1px #80613e}.paper-label,.paper-corner{color:#847058}#empty h2{color:#76573a}#empty button{background:#e8d7bc;color:#503723}.touch button,body.playing .touch button[data-key=jump],body.playing .touch button[data-key=shoot]{background:#ecddc5;border-color:#baa17e;color:#4a3321}.touch button:active{background:#795439;color:white}#finish{background:#fff7e8;border-color:#bca182}#cloud-status{font-size:11px;color:#665439;max-width:220px}.swatch{box-shadow:none}
/* Play always occupies the viewport, even where Safari denies native fullscreen. */
.game-fullscreen{position:fixed!important;inset:0;z-index:2000;width:100%;height:100vh;height:100dvh;background:var(--paper);display:flex!important;flex-direction:column;padding:0;overflow:hidden}
.game-fullscreen .toolbar,.game-fullscreen .map-head,.game-fullscreen .segment-toolbar,.game-fullscreen .segment-actions,.game-fullscreen #map{display:none!important}
body.playing .game-fullscreen #stage{flex:1;min-height:0;max-height:none;height:auto;width:100%}.game-fullscreen .touch{flex:none;position:relative!important;margin:0;padding:10px max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));min-height:76px;background:#eee1cc!important;border-top:1px solid var(--line)}.game-fullscreen .touch button{min-height:52px;min-width:16%;touch-action:none}
.game-screen-bar{display:none}.game-fullscreen .game-screen-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));background:repeating-linear-gradient(2deg,#ffffff05 0 2px,transparent 2px 9px),#65462f;color:#fff5e3}.game-screen-bar span{font-size:12px;letter-spacing:1px}.game-screen-bar button{min-width:48px;min-height:42px}
.paper.scene-fullscreen{height:100vh!important;height:100dvh!important;background-color:var(--paper)}.paper.scene-fullscreen #exit-fullscreen{right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));min-width:48px;min-height:48px;background:#f6e7cc;color:#503723;border-color:#a88960}.sketch-screen-controls{display:none}.scene-fullscreen .sketch-screen-controls{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:12;display:flex;gap:8px;padding:8px;border:1px solid #bca182;border-radius:14px;background:#f1e3cded;box-shadow:0 5px 24px #35251020;white-space:nowrap}.sketch-screen-controls button{min-height:48px;touch-action:manipulation}.scene-fullscreen #play-hint{top:auto;bottom:96px;left:12px;right:12px;text-align:center}.paper.scene-fullscreen.night{background-color:#252624}
@media(max-width:700px){.header-actions{gap:7px}.game-screen-bar span{font-size:10px}.game-fullscreen .touch{gap:5px}.game-fullscreen .touch button{font-size:12px;padding:8px 4px}.scene-fullscreen .sketch-screen-controls{gap:5px;padding:6px}.sketch-screen-controls button{padding:8px 10px;font-size:13px}}

button.swatch,button.swatch.active,button.swatch:hover:not(:disabled){background:var(--color);border:3px solid #fffaf0;border-radius:50%}.swatch.active{outline-color:#5b4129;box-shadow:0 0 0 5px #e5d2b5}.paper.scene-fullscreen #play-hint{transform:none;width:auto;max-width:none}#exit-fullscreen,#screen-game-exit{font-size:25px!important;line-height:1}#sound-volume{accent-color:#795439!important}

/* Stable: illustrated category tiles and tidy action strips. */
#tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:18px 0}#tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:76px;padding:10px 3px;background:#fffaf080;border:1px solid transparent;box-shadow:none;border-radius:14px;font-size:10px;font-weight:650;letter-spacing:.01em}#tabs button.active{background:#694b34;color:#fff4df;border-color:#694b34;box-shadow:0 5px 12px #54382120}#tabs button:hover:not(.active){background:#e6d5b9;border-color:#c8ad87}.stable-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none}.stable-icon svg{display:block;width:100%;height:100%}#tabs .stable-icon{width:27px;height:27px}#create{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;font-size:13px;border-radius:12px}#stable{max-height:470px}.asset{padding:12px;border:1px solid #d8c7af;border-radius:16px;margin-bottom:12px;box-shadow:0 4px 14px #54382108}.asset>canvas:first-child{height:126px;border-radius:10px;background:radial-gradient(#c8b18a44 .8px,transparent .8px),#f5eddf;background-size:12px 12px}.asset>strong{font-size:14px;line-height:1.35;margin:12px 2px;letter-spacing:-.02em}.stable-card-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:7px 0 0;border-top:1px solid #e6d9c5}.stable-card-actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin:0;min-height:56px;border:0;box-shadow:none;background:transparent;border-radius:10px;font-size:10px;font-weight:650}.stable-card-actions button:first-child{color:#76502e;background:#ead8b9}.stable-card-actions button:hover{background:#e5d4b8}.stable-extras{margin-top:10px;border-top:1px solid #e6d9c5;padding-top:9px;font-size:12px}.stable-extras summary{cursor:pointer;color:#817055;padding:4px;list-style:none;display:flex;justify-content:space-between}.stable-extras summary:after{content:'＋'}.stable-extras[open] summary:after{content:'−'}.stable-extras button{display:flex;align-items:center;gap:8px;width:100%;justify-content:center;min-height:40px;margin:8px 0}.asset select{width:100%;font-size:12px;margin-top:7px}.stable-extras small{font-size:10px;line-height:1.5}aside h2{font-family:Georgia,serif;font-size:24px;font-weight:500}aside h2 span{color:#98754b}@media(max-width:700px){#tabs{grid-template-columns:repeat(6,minmax(0,1fr))}#tabs button{min-height:65px;font-size:9px}#tabs .stable-icon{width:24px;height:24px}}

/* Visible drawing choices share the same selected treatment. */
.draw-toggle-group{display:inline-flex;gap:3px;padding:3px;border:1px solid #cdbfa5;border-radius:12px;background:#e8dfcc;align-items:center}
.toolbar .draw-toggle-group button{display:inline-flex;align-items:center;gap:6px;min-height:38px;border:0;box-shadow:none;background:transparent;padding:8px 10px}
.toolbar .draw-toggle-group button.active{background:#654b35;color:#fff6df;box-shadow:0 2px 5px #45332124}
.toolbar .draw-toggle-group .stable-icon{width:20px;height:20px}
.draw-color{display:flex;align-items:center;gap:6px;font-size:12px;padding:4px 7px}
.draw-color input{width:34px;height:34px;padding:2px;border-radius:8px}

#labels .resize-handle{width:28px;height:28px;touch-action:none}#labels .resize-width{cursor:ew-resize;border-radius:9px}#labels .resize-height{cursor:ns-resize;border-radius:9px}

.level-row{flex-wrap:wrap;gap:8px}.level-row>input{flex:1;min-width:150px;padding:10px;border:1px solid #bca17e;border-radius:8px;background:#fffaf0;color:#503723}.level-row button{display:inline-flex;align-items:center;gap:5px}.level-row .stable-icon{width:16px;height:16px}

.level-row .level-trash{color:#a33e32;min-height:40px;min-width:40px;justify-content:center}.level-row .level-trash:hover{background:#f8e4dd;border-color:#bd776b}

.pad-view-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.pad-view-tools button{font-size:12px;padding:8px}.pad-view-tools [hidden]{display:none}

/* Compact end-of-level card, including fullscreen and tablet layouts. */
#finish{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 32px);height:auto;padding:24px 28px;border-radius:18px;z-index:10}
#finish h2{font-size:clamp(20px,3vw,28px);margin:0 0 16px;max-width:420px}
#finish button{min-height:44px;margin:3px}
#finish-hint{font-size:12px;margin:12px 0 0;color:#795e45}

.monster-health-setting{display:flex;align-items:center;gap:7px;margin:10px 0;font-size:12px}.monster-health-setting span{flex:1}.monster-health-setting button{min-width:32px;min-height:32px;margin:0}.monster-health-setting output{min-width:18px;text-align:center;font-weight:700}

#leaderboard{min-width:240px;margin-top:16px;text-align:left;font-size:13px}#leaderboard h3{font-size:14px;margin:0 0 8px}#leaderboard ol{margin:0;padding-left:25px}#leaderboard li{padding:5px 0;border-bottom:1px solid #d8c9b4}#leaderboard li strong{float:right;margin-left:24px}#finish{max-height:calc(100% - 24px);overflow:auto}