*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#dde7f0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:#1d2433;touch-action:none;user-select:none;-webkit-user-select:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
button{font:inherit;cursor:pointer;border:0}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none}
#hud button{pointer-events:auto}
#topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top))}
#title{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;text-shadow:0 1px 0 #fff}
#title b{font-size:20px}#title span{font-size:14px;font-weight:600;color:#39506b}
.ib{width:46px;height:46px;border-radius:50%;background:#fff;color:#1d2433;box-shadow:0 3px 0 #9fb6cc,0 6px 14px rgba(0,0,0,.15);display:grid;place-items:center}
.ib svg{width:26px;height:26px}
#mute.off .wave{display:none}#mute.off{opacity:.6}
#progress{position:absolute;top:66px;left:50%;transform:translateX(-50%);width:min(60vw,320px);height:10px;background:rgba(255,255,255,.7);border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.15)}
#bar{display:block;height:100%;width:0;background:linear-gradient(90deg,#35c46a,#9ad02a);transition:width .4s}
#card{position:absolute;right:12px;top:92px;width:150px;background:#fff;border-radius:18px;padding:8px 8px 10px;text-align:center;box-shadow:0 4px 0 #9fb6cc,0 10px 24px rgba(0,0,0,.15);pointer-events:none}
#cardpic{width:134px;height:134px;display:block;margin:0 auto;background:radial-gradient(circle at 50% 40%,#f6fbff,#dbe9f5);border-radius:12px}
#cardlabel{font-weight:800;font-size:16px;margin-top:6px;text-transform:capitalize}
.cardhint{font-size:12px;color:#5b7291}
#hintbox{position:absolute;left:50%;top:92px;transform:translateX(-50%);background:#fff3bf;color:#5a4300;border:2px solid #ffd23a;padding:8px 14px;border-radius:14px;font-weight:700;font-size:15px;max-width:min(80vw,420px);text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.12)}
#toast{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);background:rgba(29,36,51,.9);color:#fff;padding:10px 16px;border-radius:14px;font-weight:600;font-size:15px;max-width:min(86vw,460px);text-align:center}
#actions{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:14px;padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.big{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:92px;padding:10px 14px;border-radius:18px;background:#fff;color:#1d2433;font-weight:800;font-size:14px;box-shadow:0 4px 0 #9fb6cc,0 8px 18px rgba(0,0,0,.15);transition:transform .1s}
.big svg{width:30px;height:30px}
.big:active{transform:translateY(3px);box-shadow:0 1px 0 #9fb6cc}
.big.dim{opacity:.45}
#rotate{background:#ffd23a;box-shadow:0 4px 0 #c99f00,0 8px 18px rgba(0,0,0,.15)}
#hint{background:#bfe6ff}

/* palette (free build) */
#palette{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.94);border-top:3px solid #9fb6cc;padding:6px 8px;padding-bottom:max(6px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px}
#colors{display:flex;gap:6px;overflow-x:auto;padding:2px}
.cbtn{width:30px;height:30px;flex:0 0 30px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #9fb6cc}
.cbtn.sel{box-shadow:0 0 0 3px #1d2433}
#parts{display:flex;gap:6px;overflow-x:auto;padding:2px}
.pbtn{flex:0 0 auto;width:74px;background:#f3f8fc;border-radius:12px;padding:3px;display:flex;flex-direction:column;align-items:center;font-size:10px;font-weight:700;color:#39506b;border:2px solid transparent}
.pbtn img{width:56px;height:56px}
.pbtn.sel{border-color:#1d2433;background:#fff}
#ptools{display:flex;gap:8px;justify-content:center}
#ptools button{padding:8px 14px;border-radius:12px;background:#e6eef6;font-weight:700}
#ptools .primary{background:#35c46a;color:#fff}
#palette ~ #hud #actions{bottom:170px}
body:has(#palette:not(.hidden)) #actions{bottom:168px}
body:has(#palette:not(.hidden)) #toast{bottom:230px}

/* overlays */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(221,231,240,.8);backdrop-filter:blur(6px);overflow:auto;padding:16px}
.panel{background:#fff;border-radius:26px;padding:22px 22px 18px;width:min(720px,100%);box-shadow:0 10px 40px rgba(0,0,0,.2);text-align:center;max-height:100%;overflow:auto}
.panel.small{width:min(440px,100%)}
h1{margin:0 0 6px;font-size:30px;letter-spacing:.3px;display:flex;align-items:center;justify-content:center;gap:12px}
h2{margin:18px 0 8px;font-size:20px}
.sub{margin:0 0 16px;color:#5b7291;font-size:15px}
.logo{display:inline-flex;gap:3px}.logo i{width:14px;height:20px;border-radius:3px;background:#d82a2a;position:relative;display:inline-block}.logo i:nth-child(2){background:#2068d6;margin-top:-6px}.logo i:nth-child(3){background:#f7c62a}
.logo i::before{content:"";position:absolute;top:-5px;left:3px;width:8px;height:6px;border-radius:2px 2px 0 0;background:inherit;filter:brightness(1.15)}
.setgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.setcard{position:relative;border-radius:18px;padding:14px 8px 12px;color:#fff;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 5px 0 rgba(0,0,0,.18),0 8px 18px rgba(0,0,0,.15);transition:transform .1s;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.setcard:active{transform:translateY(3px)}
.setcard .em,.freecard .em,.myrow .em{font-size:40px;line-height:1}
.setcard b{font-size:17px}.setcard small{font-size:12px;opacity:.9}
.star{position:absolute;top:6px;right:9px;color:#ffd23a;font-style:normal;font-size:22px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.freecard{margin-top:14px;width:100%;border-radius:18px;padding:12px 14px;background:linear-gradient(135deg,#a66bff,#3d8bff);color:#fff;display:flex;align-items:center;gap:14px;text-align:left;box-shadow:0 5px 0 rgba(0,0,0,.18)}
.freecard b{font-size:18px;display:block}.freecard small{font-size:13px;opacity:.95}
.myrow{display:flex;align-items:center;gap:10px;background:#f3f8fc;border-radius:14px;padding:8px 10px;margin-bottom:8px;text-align:left}
.myrow b{flex:1;font-size:15px}.myrow small{color:#5b7291}
.myrow button,.row button,.coderow button{padding:9px 14px;border-radius:12px;background:#e6eef6;font-weight:700}
.primary{background:#35c46a!important;color:#fff}
.ghostb{background:transparent!important;color:#5b7291}
.coderow{display:flex;gap:8px;margin-top:14px}
.coderow input,#dlgname,#codetext{flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:2px solid #cfdcea;font:inherit;font-size:14px}
.emojiin{width:58px;text-align:center;padding:10px 6px;border-radius:12px;border:2px solid #cfdcea;font:inherit;font-size:20px}
#codetext{width:100%;margin:6px 0 10px;font-size:12px}
.row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.foot{color:#5b7291;font-size:13px;margin:16px 0 0}.foot.small{font-size:11px;margin-top:6px}
.stars{font-size:46px;color:#ffd23a;text-shadow:0 2px 0 #c99f00}
.stars span{display:inline-block;animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
.stars span:nth-child(2){animation-delay:.15s}.stars span:nth-child(3){animation-delay:.3s}
@keyframes pop{from{transform:scale(0) rotate(-30deg)}to{transform:scale(1)}}
#win{background:transparent;backdrop-filter:none;align-items:flex-end;padding-bottom:max(20px,env(safe-area-inset-bottom))}
#win .panel{pointer-events:auto}
#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@media (max-width:600px){#card{width:112px;right:8px;top:86px}#cardpic{width:96px;height:96px}#cardlabel{font-size:13px}.cardhint{display:none}.big{min-width:78px;padding:8px 10px;font-size:12px}#title b{font-size:16px}h1{font-size:24px}.panel{padding:16px 14px}}

/* town */
#townhud{position:fixed;inset:0;pointer-events:none}
#townhud button{pointer-events:auto}
#tactions{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:12px;padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
#tdrive{background:#35c46a;color:#fff;box-shadow:0 4px 0 #1f8a47,0 8px 18px rgba(0,0,0,.15)}
#tdrive.on{background:#1d2433;box-shadow:0 4px 0 #000}
#tturn{background:#ffd23a;box-shadow:0 4px 0 #c99f00,0 8px 18px rgba(0,0,0,.15)}
#dpad{position:absolute;right:14px;bottom:110px;display:flex;flex-direction:column;align-items:center;gap:6px}
.padrow{display:flex;gap:6px}
#dpad button{width:58px;height:58px;border-radius:16px;background:rgba(255,255,255,.92);font-size:22px;color:#1d2433;box-shadow:0 4px 0 #9fb6cc;touch-action:none;user-select:none}
#dpad button:active{transform:translateY(3px);box-shadow:0 1px 0 #9fb6cc;background:#bfe6ff}
#shelf{position:absolute;left:50%;top:84px;transform:translateX(-50%);width:min(560px,94vw);max-height:60vh;overflow:auto;background:#fff;border-radius:20px;padding:12px;box-shadow:0 10px 40px rgba(0,0,0,.25);pointer-events:auto}
.shelfhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
#shelflist{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.shelfbtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:14px;background:#f3f8fc;font-weight:700;font-size:13px;color:#1d2433}
.shelfbtn .em{font-size:34px;line-height:1}.shelfbtn small{font-size:10px;color:#5b7291;font-weight:600}
.shelfbtn.locked{opacity:.55}
.shelfnote{grid-column:1/-1;color:#5b7291;font-size:14px;padding:8px}
.towncard{background:linear-gradient(135deg,#2fa84a,#2068d6);margin-top:4px}
.towncard>span:last-child{display:flex;flex-direction:column}
h2.cat{font-size:16px;color:#5b7291;text-align:left;margin:16px 0 8px;text-transform:uppercase;letter-spacing:.6px}

#power{background:#35c46a;color:#fff;box-shadow:0 4px 0 #1f8a47,0 8px 18px rgba(0,0,0,.15)}
#power.on,#tpower.on{background:#1d2433;color:#fff;box-shadow:0 4px 0 #000}
#tpower{background:#35c46a;color:#fff;box-shadow:0 4px 0 #1f8a47,0 8px 18px rgba(0,0,0,.15)}
.logo.beams i{width:6px;height:24px;border-radius:2px;background:#d82a2a}.logo.beams i:nth-child(2){width:14px;height:14px;background:#f7c62a;margin-top:5px}.logo.beams i:nth-child(3){width:6px;background:#2068d6}.logo.beams i::before{display:none}
.towncard{background:linear-gradient(135deg,#3f4752,#2068d6)}

/* Power Lab + shared world */
#labpanel{position:absolute;right:10px;top:78px;width:276px;background:rgba(22,30,44,.92);color:#e8eef7;border-radius:16px;padding:8px 10px 10px;box-shadow:0 8px 30px rgba(0,0,0,.35);pointer-events:auto;font:600 12px system-ui,sans-serif;max-height:calc(100vh - 170px);overflow:auto}
#labpanel .lhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}#labpanel .lhead button{background:#33415a;color:#fff;border:0;border-radius:8px;padding:2px 9px;font-size:15px}
#labpanel.min .lbody{display:none}
#labpanel.hidden,#wbar.hidden,.hidden.lonlylab,#ltrackrow.hidden{display:none}
.dials{display:flex;gap:2px;justify-content:space-between}.dial{flex:1;min-width:0}.dial svg{width:100%;height:auto;display:block}
.ginfo{display:flex;flex-direction:column;gap:2px;margin:2px 2px 6px;font-weight:600}.ginfo b{color:#6dff9a}.ginfo .sub{color:#9fb0c4;font-weight:500}
.lrow{display:flex;align-items:center;gap:6px;margin:3px 0}.lrow input[type=range]{flex:1;min-width:0}.lrow span:first-child{min-width:34px;color:#9fb0c4}.lrow span:last-child{min-width:42px;text-align:right}
.lenv{color:#9fb0c4;font-weight:500;margin-top:4px}
#wbar{position:absolute;left:50%;top:70px;transform:translateX(-50%);display:flex;gap:6px;align-items:center;background:rgba(22,30,44,.88);color:#fff;border-radius:18px;padding:5px 10px;font:600 12px system-ui,sans-serif;pointer-events:auto;white-space:nowrap}
#wbar button{background:#33415a;color:#fff;border:0;border-radius:10px;padding:4px 9px;font:600 12px system-ui,sans-serif}
@media (max-width:700px){#labpanel{top:auto;bottom:86px;right:8px;width:min(300px,calc(100vw - 16px));max-height:46vh}#wbar{font-size:11px;top:64px}}