/* Powder Lab phone-first UI theme. Warm alchemist workbench, CSS-only DOM overlays. */
@font-face{font-family:'Berkshire Swash';src:url('../fonts/BerkshireSwash-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Faculty Glyphic';src:url('../fonts/FacultyGlyphic-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{
  --pl-bg:#22150f; --pl-bg-2:#3a2417; --pl-panel:#5b3924; --pl-panel-2:#71482d; --pl-panel-edge:#c89455;
  --pl-cloth:#b48a5a; --pl-cloth-dark:#7a5438; --pl-mica:#f3ddb4; --pl-ink:#fff5da; --pl-muted:#d9c59d;
  --pl-amber:#f2b45f; --pl-amber-2:#ffd996; --pl-red:#c94a3a; --pl-green:#6e9a4d; --pl-shadow:rgba(20,10,6,.72);
  --pl-focus:#ffdf8c; --pl-disabled:#80644e; --pl-radius:18px; --pl-safe-top:env(safe-area-inset-top,0px);
  --pl-safe-right:env(safe-area-inset-right,0px); --pl-safe-bottom:env(safe-area-inset-bottom,0px); --pl-safe-left:env(safe-area-inset-left,0px);
  --pl-ad-bottom:0px;
  --pl-font-display:'Berkshire Swash',Georgia,'Times New Roman',serif;
  --pl-font-ui:'Faculty Glyphic',Georgia,'Times New Roman',serif;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 28% 8%,#6d4326 0,#2d1b12 40%,#140d0a 100%);font-family:var(--pl-font-ui);color:var(--pl-ink)}
#app,#ui_root{position:fixed;inset:0;min-height:100svh} #ui_root{pointer-events:none} #game_canvas{position:fixed;inset:0;width:100vw;height:100svh;display:block;background:#26160f;touch-action:none}
.canvas-wrap{position:fixed;inset:0;overflow:hidden;background:linear-gradient(#2f1d13,#1d120d)}
.screen,.modal{position:fixed;inset:0;padding:calc(18px + var(--pl-safe-top)) calc(14px + var(--pl-safe-right)) calc(18px + var(--pl-safe-bottom) + var(--pl-ad-bottom)) calc(14px + var(--pl-safe-left));display:none;align-items:center;justify-content:center;z-index:20}.screen.is-active,.modal.is-active{display:flex;pointer-events:auto}.hud[hidden]{display:none}.hud{position:fixed;left:calc(10px + var(--pl-safe-left));right:calc(10px + var(--pl-safe-right));top:calc(8px + var(--pl-safe-top));height:84px;display:flex;gap:8px;align-items:flex-start;justify-content:space-between;z-index:12;pointer-events:none}.hud .hud-left,.hud .hud-right{display:flex;gap:8px;align-items:flex-start;pointer-events:auto}.hud-note{font:400 14px/1.2 var(--pl-font-ui);color:#ffe9b4;background:rgba(55,31,18,.72);border:1px solid rgba(232,174,93,.45);border-radius:999px;padding:6px 9px;box-shadow:0 4px 10px rgba(0,0,0,.25)}.hud-counter,.hud-action{width:62px;display:grid;grid-template-rows:15px 44px 18px;gap:2px;justify-items:center;align-items:center;text-shadow:0 1px 0 #3d2011;white-space:nowrap}.hud-label{font:400 11px/1 var(--pl-font-ui);color:#ffd48a}.hud-foot{width:100%;height:18px}.hud-stat{width:62px;height:44px;display:grid;place-items:center;color:#ffe9b4;background:rgba(55,31,18,.78);border:1px solid rgba(232,174,93,.55);border-radius:14px;padding:0 5px 4px;box-shadow:0 4px 10px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,230,170,.18)}.hud-stat b{font:400 31px/.9 var(--pl-font-display);color:#fff0c6}
.pl-backdrop{background:radial-gradient(circle at 22% 10%,rgba(255,189,91,.20),transparent 24%),linear-gradient(180deg,rgba(31,18,12,.92),rgba(14,9,7,.97));}.pl-panel{width:min(92vw,520px);max-height:88svh;overflow:auto;padding:22px;border-radius:var(--pl-radius);background:linear-gradient(160deg,rgba(117,74,43,.96),rgba(65,39,25,.97));border:2px solid var(--pl-panel-edge);box-shadow:0 18px 44px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,222,164,.22),inset 0 -10px 18px rgba(35,16,8,.25)}
.pl-title{margin:0 0 8px;text-align:center;font-family:var(--pl-font-display);font-size:clamp(34px,10vw,56px);line-height:.95;letter-spacing:0;color:#ffe5aa;text-shadow:0 3px 0 #6b351e,0 0 18px rgba(255,191,93,.35)}.pl-subtitle{margin:0 auto 18px;max-width:32ch;text-align:center;color:var(--pl-muted);font:400 16px/1.3 var(--pl-font-ui)}.screen-stack{display:flex;flex-direction:column;gap:12px}.pl-row{display:flex;gap:10px;align-items:center;justify-content:space-between}.pl-kicker{font:400 18px/1 var(--pl-font-display);letter-spacing:0;color:#ffd48a}.pl-copy{font:400 20px/1.2 var(--pl-font-display);color:#f5e3bf}.pack-title{display:flex;align-items:baseline;gap:8px}.pack-title-number{color:#ffd48a;text-shadow:0 1px 0 #3d2011}.pl-meter{height:12px;border-radius:999px;background:#2c1a12;border:1px solid #ba824d;overflow:hidden}.pl-meter>i{display:block;height:100%;width:50%;background:linear-gradient(90deg,#d6813f,#ffd179);box-shadow:0 0 10px rgba(255,201,108,.5)}
.pl-button,button.pl-button{min-height:44px;min-width:44px;border:2px solid #e2aa64;border-radius:16px;padding:10px 16px;background:linear-gradient(#9d673b,#6e4126);color:#fff3d0;font:400 18px/1.15 var(--pl-font-ui);letter-spacing:0;text-shadow:0 1px 0 #3d2011;box-shadow:0 6px 0 #3b2116,0 10px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,235,178,.4);cursor:pointer;touch-action:manipulation}.pl-button.primary{background:linear-gradient(#f0b65f,#b66b31);border-color:#ffe0a0;color:#2d160b;text-shadow:0 1px 0 rgba(255,245,210,.55)}.pl-button.secondary{background:linear-gradient(#81644a,#543829);border-color:#cfa06a}.pl-button.icon{width:48px;padding:8px;border-radius:15px}.pl-button:active,.pl-button.is-pressed{transform:translateY(3px) scale(.97);box-shadow:0 3px 0 #3b2116,0 5px 11px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,235,178,.3)}.pl-button:focus-visible{outline:3px solid var(--pl-focus);outline-offset:3px}.pl-button[disabled],.pl-button.is-disabled{filter:saturate(.55);background:linear-gradient(#79634f,#4d3b30);border-color:#8b735f;color:#c4ad90;cursor:not-allowed;transform:none;box-shadow:0 3px 0 #2e211a,inset 0 1px 0 rgba(255,255,255,.13)}
.undo-button{display:grid;place-items:center;padding:8px}.undo-glyph{font-size:24px;line-height:1;transform:translateY(-1px)}.undo-badge{min-width:28px;height:18px;display:grid;place-items:center;padding:0 5px;border-radius:7px;border:1px solid rgba(255,230,170,.72);background:rgba(50,28,17,.9);color:#ffe9b4;font:400 11px/1 var(--pl-font-ui);text-shadow:0 1px 0 #3d2011;box-shadow:0 3px 7px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,230,170,.18)}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;padding:10px 0;border-bottom:1px solid rgba(255,222,160,.18);font:400 17px/1.25 var(--pl-font-ui)}.settings-row>span{display:flex;flex-direction:column;gap:2px}.settings-row small{font:400 12px/1.2 var(--pl-font-ui);color:var(--pl-muted)}.quality-row{align-items:center}.toggle{position:relative;width:62px;height:34px;flex:0 0 auto;border-radius:999px;border:2px solid #d39a5d;background:#3b2418;box-shadow:inset 0 3px 8px rgba(0,0,0,.45)}.toggle input{position:absolute;opacity:0}.toggle i{position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:50%;background:linear-gradient(#ffe2a4,#c98a48);box-shadow:0 2px 4px rgba(0,0,0,.45);transition:transform .16s ease}.toggle input:checked+i{transform:translateX(28px);background:linear-gradient(#fff2bf,#f3b95f)}.slider{appearance:none;width:150px;height:28px;background:transparent}.slider::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:#2f1d14;border:1px solid #bd8955}.slider::-webkit-slider-thumb{appearance:none;margin-top:-8px;width:26px;height:26px;border-radius:50%;background:linear-gradient(#ffe8a8,#d88b3e);border:2px solid #fff0bf;box-shadow:0 2px 6px #000}.slider::-moz-range-track{height:10px;border-radius:999px;background:#2f1d14;border:1px solid #bd8955}.slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#e9a650;border:2px solid #fff0bf}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.level-tile{position:relative;aspect-ratio:1;border-radius:14px;border:1px solid #c9955d;background:linear-gradient(#7f5235,#4b2d1e);display:flex;align-items:center;justify-content:center;color:#ffe6b0;font-family:var(--pl-font-display);font-weight:400;text-shadow:0 2px 0 #3d2011}.level-tile.completed{border-color:#dfb777}.level-tile.awarded{border-color:#ffe0a0;background:linear-gradient(145deg,#f2bf62 0%,#c88734 45%,#6f3a1c 100%);box-shadow:inset 0 1px 0 rgba(255,244,200,.38),inset 0 -9px 15px rgba(79,34,12,.26),0 0 13px rgba(255,205,88,.2)}.level-tile.awarded .level-number{color:#ffe6b0;text-shadow:0 2px 0 #3d2011}.level-tile.locked{background:linear-gradient(#3b2d25,#1d1511);border-color:#5e4b3d;color:#7f6b58;text-shadow:0 1px 0 #130d0a;filter:saturate(.45);cursor:not-allowed}.level-number{font-size:clamp(29px,9.5vw,48px);line-height:1;transform:translateY(-.08em)}.level-award{position:absolute;top:5px;right:6px;width:15px;height:15px;display:grid;place-items:center;font:400 15px/1 var(--pl-font-display);text-shadow:0 0 8px rgba(255,204,94,.6)}.level-award.earned{color:#ffd66e}.level-tile.awarded .level-award.earned{color:#fff0a8;text-shadow:0 0 8px rgba(255,224,124,.65)}.level-award.empty{color:rgba(255,230,176,.48)}.level-tile.locked .level-award.empty{color:rgba(150,128,104,.5);text-shadow:none}.stars{display:flex;gap:4px;justify-content:center;font-size:34px;color:#ffd66e;text-shadow:0 0 10px rgba(255,204,94,.55)}.stars .empty{color:rgba(255,230,176,.45)}.success-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:12px;border-radius:14px;background:rgba(44,25,16,.48);border:1px solid rgba(231,171,95,.45);text-align:center}.stat-card b{font-family:var(--pl-font-display);font-size:26px}.scrim{background:rgba(13,8,6,.62)}
.settings-links,.debug-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.settings-links{padding-top:6px}.account-entry{display:flex;align-items:center;justify-content:center;gap:8px}.account-topbar{position:absolute;top:calc(12px + var(--pl-safe-top));right:calc(12px + var(--pl-safe-right));z-index:2;max-width:min(44vw,210px);min-height:42px;padding:9px 13px;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-card,.profile-editor-preview{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid rgba(231,171,95,.45);border-radius:14px;background:rgba(44,25,16,.48)}.account-card b{display:block;color:#fff0c6;font:400 20px/1.1 var(--pl-font-ui)}.account-card small{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis;color:var(--pl-muted);font:400 13px/1.2 var(--pl-font-ui)}.account-copy{text-align:center}.profile-avatar{width:66px;height:66px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;border:2px solid #e2aa64;background:linear-gradient(#7f5235,#4b2d1e);box-shadow:0 5px 12px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,235,178,.36);font:400 32px/1 var(--pl-font-display);overflow:hidden}.profile-avatar.large{width:78px;height:78px;font-size:38px}.profile-avatar.tiny{width:26px;height:26px;font-size:15px;border-width:1px;display:inline-grid}.profile-avatar img{width:100%;height:100%;object-fit:cover}.form-input{width:100%;min-height:44px;border:2px solid #d39a5d;border-radius:12px;background:#2f1d14;color:#fff5da;padding:9px 12px;font:400 17px/1.2 var(--pl-font-ui);outline:none}.form-input:focus{border-color:var(--pl-focus);box-shadow:0 0 0 3px rgba(255,223,140,.16)}.email-code-row{display:grid;grid-template-columns:1fr auto;gap:8px}.emoji-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.emoji-choice,.rate-star{min-height:44px;border:1px solid #d39a5d;border-radius:12px;background:rgba(47,29,20,.86);color:#fff0c6;font:400 25px/1 var(--pl-font-display);box-shadow:inset 0 1px 0 rgba(255,235,178,.18)}.rate-bar{display:flex;justify-content:center;gap:8px}.rate-star{width:48px;height:48px;color:#ffd66e;font-size:32px}.rate-star.selected{background:linear-gradient(#f0b65f,#8e4e22);color:#fff7ce}.modal-status{min-height:20px;margin:0;text-align:center;color:var(--pl-muted);font:400 14px/1.3 var(--pl-font-ui)}.modal-status.ok{color:#c9f0a4}.modal-status.error{color:#ffb2a4}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.debug-panel .pl-panel,.debug-panel{max-width:560px}
[data-screen='success'].pl-backdrop{background:radial-gradient(circle at 22% 10%,rgba(255,189,91,.14),transparent 24%),linear-gradient(180deg,rgba(31,18,12,.55),rgba(14,9,7,.78))}
/* menu reveals the canvas room + its decorative hanging jars with no darkening overlay; the panel keeps its own opaque background for legibility */
[data-screen='menu'].pl-backdrop{background:none}
.tutorial-tip{position:fixed;left:50%;bottom:calc(26px + var(--pl-safe-bottom) + var(--pl-ad-bottom));transform:translateX(-50%);max-width:min(86vw,440px);text-align:center;font:400 15px/1.4 var(--pl-font-ui);color:#ffe9b4;background:rgba(55,31,18,.85);border:1px solid rgba(232,174,93,.5);border-radius:14px;padding:10px 16px;z-index:12;pointer-events:none;box-shadow:0 6px 16px rgba(0,0,0,.35);animation:plFade .3s ease both}.tutorial-tip[hidden]{display:none}.stuck-banner{position:fixed;left:50%;bottom:calc(84px + var(--pl-safe-bottom) + var(--pl-ad-bottom));transform:translateX(-50%);max-width:min(88vw,460px);text-align:center;font:400 15px/1.4 var(--pl-font-ui);color:#ffd9c4;background:rgba(74,28,16,.92);border:1px solid rgba(235,128,84,.55);border-radius:14px;padding:12px 16px;z-index:13;pointer-events:auto;box-shadow:0 6px 18px rgba(0,0,0,.45);animation:plFade .3s ease both}.stuck-banner[hidden]{display:none}.stuck-banner .stuck-actions{display:inline-flex;gap:8px;margin-left:10px;vertical-align:middle}.pl-button.mini{padding:6px 12px;font-size:16px;border-radius:10px;min-height:0}
[data-screen='gameover']{display:none!important}.boot-error,#boot_error{position:fixed;inset:auto 10px 10px 10px;z-index:9999;padding:12px;border-radius:12px;background:#6b1f1f;color:#fff;border:2px solid #ffaaaa;font:700 13px system-ui,sans-serif}.motion-token{--lift-ms:100ms;--travel-ms:150ms;--tilt-ms:80ms;--stream-ms:180ms;--settle-ms:100ms;--return-ms:140ms;--max-grains:280;--max-particles:360;--max-tweens:24}.select-glow-token{animation:plGlowPulse .9s ease-in-out infinite}@keyframes plGlowPulse{0%,100%{filter:drop-shadow(0 0 2px rgba(255,203,116,.45))}50%{filter:drop-shadow(0 0 8px rgba(255,219,140,.7))}}@keyframes plStarReveal{0%{transform:scale(.4) rotate(-15deg);opacity:0}70%{transform:scale(1.18) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}.star-reveal{animation:plStarReveal .22s cubic-bezier(.2,1.4,.4,1) both}.screen.fade-in{animation:plFade .2s ease both}@keyframes plFade{from{opacity:0}to{opacity:1}}
@media (max-width:360px){.pl-panel{padding:16px;border-radius:15px}.pl-title{font-size:32px}.pl-button{font-size:14px;padding:9px 12px}.account-topbar{top:calc(8px + var(--pl-safe-top));right:calc(8px + var(--pl-safe-right));max-width:48vw;min-height:38px;padding:8px 10px;font-size:14px}.hud{left:calc(6px + var(--pl-safe-left));right:calc(6px + var(--pl-safe-right));gap:6px;height:80px}.hud .hud-right{gap:5px}.hud-counter,.hud-action{width:48px;grid-template-rows:13px 42px 17px}.hud-label{font-size:10px}.hud-stat{width:48px;height:42px}.hud-stat b{font-size:28px}.undo-badge{height:17px;min-width:26px;font-size:11px}.level-grid{grid-template-columns:repeat(4,1fr)}.slider{width:118px}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.motion-token{--lift-ms:80ms;--travel-ms:75ms;--tilt-ms:40ms;--stream-ms:160ms;--settle-ms:80ms;--return-ms:70ms;--max-grains:60}.select-glow-token{animation:none;filter:drop-shadow(0 0 5px rgba(255,203,116,.55))}}