:root{color-scheme:dark;--bg: #0d0d0c;--surface: #151514;--surface-2: #1d1d1b;--line: #30302d;--line-strong: #555147;--text: #f3f1eb;--muted: #aaa59a;--accent: #d2b071;--accent-dark: #2c2619;--shadow: 0 18px 42px rgba(0, 0, 0, .42)}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg) url(/assets/background-wNZZ0QkQ.jpg) center / cover fixed no-repeat;color:var(--text)}button{font:inherit}.game-shell{width:100vw;min-height:100vh;min-height:100dvh;margin:0;padding:0;display:grid;grid-template-columns:clamp(140px,11vw,200px) minmax(0,1fr) clamp(140px,11vw,200px);grid-template-rows:minmax(0,1fr);gap:0 18px}.site-header{grid-column:1 / -1;display:grid;place-items:center;position:relative;z-index:2;pointer-events:none}.eyebrow,.brief-label{margin:0;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.site-header .eyebrow{align-self:center}h1,h2,p{margin:0}h1{text-align:center;font-size:clamp(2.35rem,5.2vw,4.75rem);line-height:.9;font-weight:900;letter-spacing:.12em;transform:translateY(14px)}h2{color:var(--muted);font-size:.72rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.scoreboard{display:grid;grid-template-columns:1fr 1fr;gap:8px}.scoreboard span{min-width:0;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);text-align:right}.scoreboard strong,.scoreboard small{display:block}.scoreboard strong{font-size:1.05rem;line-height:1.1}.scoreboard small{color:var(--muted);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase}.tools-rail{grid-column:1;grid-row:1;align-self:center;justify-self:center;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.2vh,28px);padding:clamp(16px,3.2vh,34px) clamp(10px,1.4vw,22px);border-radius:clamp(20px,3.6vh,32px);max-height:calc(100dvh - 32px);isolation:isolate;background:linear-gradient(135deg,#f6f7f8,#d6d9dc 16%,#a6a9ac 38%,#84878a,#a8abae 66%,#d8dbde 86%,#eef0f2);box-shadow:0 22px 44px #00000080,0 8px 16px #00000052,0 1px #ffffff80,inset 0 0 0 1px #00000040,inset 0 2px #fffffff2,inset 0 -2px #00000073,inset 2px 0 2px #ffffff80,inset -2px 0 2px #00000047}.tools-rail:before{content:"";position:absolute;top:12px;right:8px;bottom:12px;left:8px;border-radius:22px;background:linear-gradient(168deg,transparent 18%,rgba(255,255,255,.22) 38%,rgba(255,255,255,.05) 52%,transparent 78%),repeating-linear-gradient(90deg,rgba(0,0,0,.025) 0px,rgba(0,0,0,.025) 1px,transparent 1px,transparent 3px),linear-gradient(180deg,#8e9194,#a4a7aa 22%,#b6b9bc 48%,#a0a3a6 76%,#909396);box-shadow:inset 0 5px 10px #0000008c,inset 0 -3px 6px #ffffff38,inset 0 0 0 1px #0000004d,inset 1px 0 2px #00000059,inset -1px 0 2px #00000059;pointer-events:none;z-index:0}.tools-rail>*{position:relative;z-index:1}.studio{grid-column:2;grid-row:1;min-width:0;display:grid;align-items:end;justify-items:center}.rotate-arrow{position:absolute;top:50%;width:clamp(94px,calc(7vw + 30px),140px);aspect-ratio:1;background:transparent;border:0;padding:0;cursor:pointer;z-index:5;transform:translateY(-50%);transition:transform .18s ease,filter .18s ease;outline:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}.rotate-arrow-prev{left:1.5%}.rotate-arrow-next{right:1.5%}.rotate-arrow img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.rotate-arrow-prev img{transform:scaleX(-1)}.rotate-arrow:hover{transform:translateY(-50%) scale(1.08);filter:drop-shadow(0 10px 20px rgba(0,0,0,.6)) brightness(1.08)}.rotate-arrow:active{transform:translateY(-50%) scale(.94)}.rotate-arrow:focus-visible{filter:drop-shadow(0 0 10px rgba(210,176,113,.6))}.stage-wrap{position:relative;width:min(100%,139.2dvh);border:0;border-radius:4px;overflow:hidden;background:transparent;box-shadow:none;touch-action:none}#gameCanvas{width:100%;aspect-ratio:692 / 497;cursor:none;display:block}.credit{position:fixed;bottom:14px;left:18px;z-index:10;color:#ff0;text-decoration:underline;font-family:Courier New,Courier,monospace;font-size:.9rem;font-weight:400;background:transparent;border:0;padding:0;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none}.credit span{color:inherit;font-weight:400}.credit:hover{color:#fff066}.brand-logo{position:fixed;bottom:18px;right:20px;z-index:10;width:clamp(200px,22vw,360px);height:auto;pointer-events:none;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}.boombox{position:fixed;top:18px;right:18px;z-index:10;width:clamp(110px,13vw,200px);background:transparent;border:0;padding:0;cursor:pointer;filter:drop-shadow(0 8px 16px rgba(0,0,0,.55));transform-origin:50% 80%;transition:filter .18s ease}.boombox img{width:100%;height:auto;display:block;pointer-events:none;-webkit-user-select:none;user-select:none}.boombox:hover{filter:drop-shadow(0 12px 22px rgba(0,0,0,.65)) brightness(1.08)}.boombox.is-playing{animation:boombox-bass .46s cubic-bezier(.32,0,.18,1) infinite}.boombox-youtube-player{position:fixed;left:-220px;bottom:-140px;width:200px;height:113px;border:0;opacity:0;pointer-events:none}@keyframes boombox-idle{0%,to{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-3px) rotate(1.5deg)}}@keyframes boombox-bass{0%{transform:translateY(0) scale(1) rotate(0)}8%{transform:translateY(7px) scale(1.13,.84) rotate(-1deg)}22%{transform:translateY(-6px) scale(.92,1.1) rotate(1deg)}32%{transform:translateY(0) scale(1.02,.99) rotate(0)}50%{transform:translateY(0) scale(1) rotate(0)}58%{transform:translateY(6px) scale(1.11,.86) rotate(1.5deg)}72%{transform:translateY(-5px) scale(.94,1.08) rotate(-1deg)}82%{transform:translateY(0) scale(1.02,.99) rotate(0)}to{transform:translateY(0) scale(1) rotate(0)}}.tool-cursor{position:absolute;width:54px;height:54px;pointer-events:none;opacity:0;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}.panel{padding:10px}.tools-panel{display:grid;gap:10px}.tool-grid{display:grid;grid-template-columns:1fr;gap:8px}.tool-button{display:block;padding:0;border:0;background:transparent;cursor:pointer;opacity:.7;transition:opacity .15s ease,transform .15s ease}.tool-button:hover{opacity:1}.tool-button img{display:block;width:clamp(44px,6.6vh,92px);height:clamp(44px,6.6vh,92px);object-fit:contain;pointer-events:none}.tool-button.is-active{opacity:1;transform:scale(1.08)}.finish-panel{display:grid;gap:10px}.action-row{display:grid;grid-template-columns:42px 42px minmax(0,1fr);gap:8px}.icon-action,.primary-action{min-height:42px}.icon-action{display:grid;place-items:center}.primary-action{color:#17140e;background:var(--accent);border-color:var(--accent);font-weight:850}.brief{padding:10px 12px;display:grid;gap:12px}.brief p{color:var(--muted);font-size:.9rem;line-height:1.35}meter{width:100%;height:12px}meter::-webkit-meter-bar{border:1px solid var(--line);border-radius:999px;background:#0b0b0a}meter::-webkit-meter-optimum-value{border-radius:999px;background:var(--accent)}.result-text{min-height:38px}@media (max-width: 930px){html,body{width:100%;height:100%;overflow:hidden}.game-shell{position:relative;display:block;width:100vw;height:100vh;height:100dvh;min-height:100svh;overflow:hidden}.studio{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:flex-end;justify-content:center;min-width:0;overflow:hidden}.stage-wrap{flex:0 0 auto;width:min(140vw,139.2dvh);max-width:none;min-width:0;transform:translateY(clamp(-110px,-15dvh,-72px))}.tools-rail{position:fixed;left:50%;right:auto;top:auto;bottom:calc(max(8px,env(safe-area-inset-bottom)) + clamp(28px,7dvh,48px));z-index:12;flex-direction:row;justify-content:center;gap:clamp(11px,3vw,18px);width:min(calc(100vw - 16px),520px);max-height:none;padding:12px clamp(14px,4vw,22px);border-radius:24px;transform:translate(-50%)}.tools-rail:before{top:8px;right:10px;bottom:8px;left:10px;border-radius:18px}.tool-button img{width:clamp(36px,11vw,54px);height:clamp(36px,11vw,54px)}.rotate-arrow{position:fixed;top:52%;width:clamp(56px,17vw,82px)}.rotate-arrow-prev{left:8px}.rotate-arrow-next{right:8px}.brand-logo{top:max(8px,env(safe-area-inset-top));right:auto;bottom:auto;left:50%;width:clamp(132px,38vw,190px);transform:translate(-50%)}.boombox{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));width:clamp(70px,22vw,108px)}.credit{bottom:calc(max(8px,env(safe-area-inset-bottom)) + clamp(108px,20dvh,132px));left:max(10px,env(safe-area-inset-left));max-width:calc(100vw - 20px);font-size:clamp(.68rem,3.2vw,.8rem);text-shadow:0 2px 4px rgba(0,0,0,.8)}}
