/* One Win2000 app window on a Frutiger Aero desktop: 3D grill on the left, amber telemetry on the right, glossy control deck under the grill. */
:root{
  --face:#d4d0c8;
  --raised:inset -1px -1px #404040, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #e8e6e0;
  --sunken:inset 1px 1px #808080, inset -1px -1px #fff, inset 2px 2px #404040, inset -2px -2px #e8e6e0;
  --lcd:#ffb22e;
  --vfd:#5cf2ff;
  --title-a:#0a246a;
  --title-b:#a6caf0;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{font:12px/1.3 Tahoma,"MS Sans Serif",Verdana,sans-serif;color:#000;background:#2f8fd8;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit}

/* ---------- Frutiger Aero wallpaper ---------- */
#wallpaper{position:fixed;inset:0 0 calc(30px + env(safe-area-inset-bottom,0px)) 0;overflow:hidden;
  background:
    radial-gradient(ellipse 45% 35% at 82% 6%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 140% 42% at 25% 118%,#b6f06a 0%,#5cc02c 40%,#2f8a17 68%,rgba(47,138,23,0) 69%),
    radial-gradient(ellipse 100% 36% at 100% 122%,#8fe35a 0%,#46a823 55%,rgba(70,168,35,0) 56%),
    linear-gradient(180deg,#0b62b8 0%,#3c9fe8 38%,#9fd8ff 72%,#e6f7ff 100%)}
#wallpaper::before{content:"";position:absolute;inset:-50%;
  background:repeating-conic-gradient(from 0deg at 66% 28%,rgba(255,255,255,.13) 0 5deg,rgba(255,255,255,0) 5deg 16deg);
  -webkit-mask-image:radial-gradient(circle at 66% 28%,#000 0,transparent 40%);mask-image:radial-gradient(circle at 66% 28%,#000 0,transparent 40%);
  transform-origin:66% 28%;animation:spin 90s linear infinite}
.bubble{position:absolute;bottom:-140px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 7%,rgba(255,255,255,.35) 14%,rgba(190,240,255,.10) 45%,rgba(255,255,255,.35) 68%,rgba(255,255,255,.75) 71%,rgba(255,255,255,0) 73%);
  animation:rise linear infinite}
.bubble.k{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 7%,rgba(255,140,140,.5) 16%,rgba(220,30,40,.35) 50%,rgba(255,170,170,.6) 70%,rgba(255,255,255,0) 73%)}
.bubble.m{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 7%,rgba(255,240,140,.5) 16%,rgba(240,190,0,.35) 50%,rgba(255,240,160,.6) 70%,rgba(255,255,255,0) 73%)}
@keyframes rise{from{transform:translate(0,0)}to{transform:translate(var(--drift),calc(-100vh - 280px))}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes hue{to{filter:hue-rotate(360deg) saturate(1.6)}}
body[data-heat="2"] #wallpaper{animation:hue 10s linear infinite}
body[data-heat="3"] #wallpaper{animation:hue 4s linear infinite}
body[data-heat="4"] #wallpaper{animation:hue 1.6s linear infinite}
body[data-heat="5"] #wallpaper{animation:hue .6s linear infinite}
body[data-method="dog"] #wallpaper{filter:saturate(.55) sepia(.3)}

/* ---------- desktop ---------- */
#desk{position:fixed;inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) calc(30px + env(safe-area-inset-bottom,0px)) env(safe-area-inset-left,0px)}
#icons{position:absolute;left:10px;top:10px;display:grid;gap:10px;z-index:1}
.icon{width:80px;text-align:center;color:#fff;background:none;border:0;padding:2px;cursor:pointer}
.icon .g{font-size:32px;display:block;line-height:1.1;filter:drop-shadow(1px 2px 1px rgba(0,0,0,.35))}
.icon span{display:inline-block;padding:0 2px;text-shadow:1px 1px 1px #000;overflow-wrap:anywhere}
.icon:focus{outline:none}
.icon:focus span{background:var(--title-a);outline:1px dotted #fff}

/* ---------- Win2000 window ---------- */
.window{position:absolute;inset:0;margin:auto;z-index:2;width:min(1100px,calc(100% - 32px));height:min(720px,calc(100% - 32px));
  background:var(--face);padding:3px;display:flex;flex-direction:column;
  box-shadow:var(--raised),10px 14px 40px rgba(0,30,80,.45)}
.window.max{width:100%;height:100%}
.window.shake{animation:shake .4s linear}
@keyframes shake{20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
body[data-heat="5"] .window:not(.shake){animation:wobble .18s ease-in-out infinite alternate}
@keyframes wobble{from{transform:rotate(-.45deg)}to{transform:rotate(.45deg) translateY(1px)}}
.titlebar{height:22px;flex:none;display:flex;align-items:center;gap:4px;padding:0 2px 0 4px;color:#fff;font-weight:bold;
  background:linear-gradient(90deg,var(--title-a),#3a6ea5 55%,var(--title-b))}
.titlebar .ti{font-size:13px}
.titlebar .tt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbtns{display:flex;gap:2px}
.tbtn{width:18px;height:16px;padding:0;border:0;background:var(--face);box-shadow:var(--raised);color:#000;font:bold 10px/1 Tahoma,sans-serif;display:grid;place-items:center;cursor:pointer}
.tbtn:active{box-shadow:var(--sunken)}
.tbtn.x{margin-left:2px}
.menubar{display:flex;flex:none;padding:2px 0}
.menubar button{background:none;border:0;padding:2px 7px;cursor:pointer}
.menubar button:hover,.menubar button:focus-visible{background:var(--title-a);color:#fff;outline:none}

.content{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 290px;grid-template-rows:minmax(0,1fr) auto;gap:6px;padding:4px 4px 6px}
.viewport{grid-column:1;grid-row:1;position:relative;min-width:0;min-height:0;box-shadow:var(--sunken);background:#000}
.stage{position:absolute;inset:2px;overflow:hidden;background:radial-gradient(circle at 50% 38%,#2b5f8f 0%,#12304f 50%,#060f1c 100%)}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--glow,0);transition:opacity .8s;
  background:radial-gradient(ellipse 85% 60% at 50% 88%,rgba(255,110,20,.95),rgba(255,40,0,.3) 45%,rgba(255,0,0,0) 72%)}
body[data-method="boil"] .stage::before{background:radial-gradient(ellipse 90% 70% at 50% 30%,rgba(230,245,255,.75),rgba(160,210,255,.25) 50%,rgba(255,255,255,0) 75%)}
.stage::after{content:"";position:absolute;inset:-60%;opacity:0;transition:opacity .8s;pointer-events:none;mix-blend-mode:screen;
  background:conic-gradient(#ff220055,#ffcc0055,#ff006655,#ff880055,#ff220055);animation:spin 3s linear infinite}
body[data-heat="4"] .stage::after{opacity:.45}
body[data-heat="5"] .stage::after{opacity:.9}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer;z-index:1}
.flash{position:absolute;inset:0;z-index:3;background:#fff;opacity:0;pointer-events:none}
.flash.go{animation:flash .6s ease-out}
@keyframes flash{from{opacity:.95}to{opacity:0}}
.osd{position:absolute;z-index:2;left:8px;top:6px;font:17px/1.05 VT323,"Lucida Console",monospace;color:#ffe2b0;text-shadow:0 0 4px #ff7a00;pointer-events:none}
.osd.r{left:auto;right:8px;text-align:right}
.osd.b{top:auto;bottom:6px}
.osd.err{left:0;right:0;top:40%;text-align:center;color:#ffb0b0;text-shadow:0 0 4px #f00}

.side{grid-column:2;grid-row:1 / 3;display:flex;flex-direction:column;gap:6px;min-height:0;min-width:0;overflow:auto;padding:1px}
fieldset{margin:0;padding:4px 8px 8px;border:1px solid #808080;box-shadow:1px 1px 0 #fff,inset 1px 1px 0 #fff;min-width:0}
legend{padding:0 3px}
.lcd{position:relative;overflow:hidden;background:#140b02;box-shadow:var(--sunken);padding:7px 10px 5px;
  font:21px/1.12 VT323,"Lucida Console",monospace;color:var(--lcd);text-shadow:0 0 6px rgba(255,178,46,.65)}
.lcd::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px)}
.lcd .row{display:flex;justify-content:space-between;gap:8px;white-space:nowrap}
.lcd .k{opacity:.72}
.lcd .v{display:inline-block}
.st-1{color:#ffe08a}.st-2{color:#ffc04d}.st-3{color:#ff8a3d}
.st-4{color:#ff4b4b;animation:blink .5s steps(2) infinite}
.st-dog{color:#c8f0ff}
@keyframes blink{50%{opacity:.2}}
body[data-heat="5"] .lcd .v{animation:jit .09s steps(2) infinite}
body[data-heat="5"] .lcd .v.st-4{animation:jit .09s steps(2) infinite,blink .5s steps(2) infinite}
@keyframes jit{50%{transform:translate(1px,-1px)}}

.meter{display:flex;gap:3px;padding:3px;box-shadow:var(--sunken);background:#fff}
.meter i{flex:1;height:16px;background:#e4e2dc;box-shadow:inset 1px 1px #aaa}
.meter i.on{background:linear-gradient(#ffd8a0,#ff8a2a 50%,#e0560a 51%,#ffa04e)}
.meter i.on.boil{background:linear-gradient(#bfe8ff,#3aa6ec 50%,#0e72c4 51%,#5ec0ff)}
.meter i.on.hot{background:linear-gradient(#ffb0a0,#f0442a 50%,#c21d0a 51%,#ff6a4e)}
.scopewrap{padding:2px;box-shadow:var(--sunken);background:#120800}
#scope{display:block;width:100%;height:50px}
.vfd{background:#001418;box-shadow:var(--sunken);padding:6px 8px;height:100px;overflow:hidden;font:20px/1.1 VT323,"Lucida Console",monospace;color:var(--vfd);text-shadow:0 0 6px rgba(92,242,255,.8);letter-spacing:1px;word-break:break-word}
.checks{display:flex;gap:16px;padding:2px 4px}
.checks label{display:flex;align-items:center;gap:4px;cursor:pointer}
.checks input{accent-color:var(--title-a);margin:0}

/* ---------- control deck: glossy Aero buttons ---------- */
.deck{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.deck fieldset{display:flex;flex-wrap:wrap;gap:6px;padding:3px 6px 7px;flex:1 1 auto}
.deck fieldset .gb{flex:1 1 0;min-width:max-content}
.deck .ops{flex:1 1 230px}
.gb{--t:#ffd0a0;--m1:#ff8a2a;--m2:#e0560a;--b:#ff9a4a;--bd:#8a3300;--fg:#fff;--ts:rgba(80,20,0,.6);
  position:relative;overflow:hidden;min-width:0;border:1px solid var(--bd);border-radius:999px;padding:8px 10px 7px;cursor:pointer;
  font:bold 13px Tahoma,sans-serif;color:var(--fg);text-shadow:0 1px 2px var(--ts);white-space:nowrap;
  background:linear-gradient(180deg,var(--t) 0%,var(--m1) 46%,var(--m2) 54%,var(--b) 100%);
  box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 -3px 7px rgba(255,255,255,.45),inset 0 1px 0 rgba(255,255,255,.6)}
.gb::before{content:"";position:absolute;left:10%;right:10%;top:2px;height:46%;border-radius:999px;pointer-events:none;background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.12))}
.gb:hover{filter:brightness(1.08) saturate(1.15)}
.gb:active{transform:translateY(1px) scale(.97)}
.gb:focus-visible{outline:1px dotted #000;outline-offset:2px}
.gb.off{filter:grayscale(.8) brightness(.95)}
.gb .sub{display:block;font-size:10px;font-weight:normal;opacity:.92;margin-top:1px;overflow:hidden;text-overflow:ellipsis}
.gb.boil{--t:#a8e0ff;--m1:#3aa6ec;--m2:#0e72c4;--b:#46b4ff;--bd:#0b4f8a;--ts:rgba(0,20,60,.6)}
.gb.chill{--t:#ffffff;--m1:#c8f2ff;--m2:#84d4f2;--b:#dcf7ff;--bd:#3b8db0;--fg:#0b3b57;--ts:rgba(255,255,255,.7)}
.gb.ketchup{--t:#ff9a9a;--m1:#e8202a;--m2:#b80d16;--b:#ff4a4a;--bd:#6a0006}
.gb.mustard{--t:#fff3a0;--m1:#ffd21a;--m2:#e8b000;--b:#ffe04a;--bd:#8a6a00;--fg:#3a2a00;--ts:rgba(255,255,255,.6)}
.gb.relish{--t:#c8f59a;--m1:#4cbf2a;--m2:#2e9612;--b:#79e04e;--bd:#1d6b0b;--ts:rgba(0,40,0,.6)}
.gb.onion{--t:#ffffff;--m1:#f3ecd8;--m2:#dcd0b0;--b:#fbf6ea;--bd:#9a8a60;--fg:#4a3a10;--ts:rgba(255,255,255,.7)}
.gb.foot{--t:#e6c8ff;--m1:#a05ae0;--m2:#7a2fc0;--b:#b98aff;--bd:#4a1580;--ts:rgba(40,0,80,.6)}
.gb.new{--t:#ffc8f0;--m1:#ff4fb8;--m2:#e0198f;--b:#ff7ad0;--bd:#80004a;--ts:rgba(80,0,40,.6);font-size:15px}

.statusbar{flex:none;display:flex;gap:2px}
.statusbar div{box-shadow:inset 1px 1px #808080,inset -1px -1px #fff;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.statusbar div:first-child{flex:1}

/* ---------- taskbar ---------- */
#taskbar{position:fixed;left:0;right:0;bottom:0;height:calc(30px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;align-items:center;gap:4px;
  padding:2px max(3px,env(safe-area-inset-right,0px)) calc(2px + env(safe-area-inset-bottom,0px)) max(3px,env(safe-area-inset-left,0px));background:var(--face);box-shadow:inset 0 1px #fff,inset 0 2px #e8e6e0}
.start{height:22px;flex:none;display:flex;align-items:center;gap:4px;padding:0 7px 0 4px;border:0;background:var(--face);box-shadow:var(--raised);font-weight:bold;cursor:pointer}
.start:active{box-shadow:var(--sunken)}
.sep{width:2px;height:22px;flex:none;box-shadow:inset 1px 0 #808080,inset -1px 0 #fff}
.ql{flex:none;letter-spacing:4px;padding:0 2px}
.task{height:22px;min-width:0;flex:0 1 220px;display:flex;align-items:center;gap:4px;padding:0 6px;border:0;font-weight:bold;text-align:left;
  background:repeating-conic-gradient(#fff 0 25%,#d4d0c8 0 50%) 0 0/2px 2px;box-shadow:var(--sunken);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray{margin-left:auto;height:22px;flex:none;display:flex;align-items:center;gap:6px;padding:0 8px;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}

/* ---------- dialogs ---------- */
.overlay{position:fixed;inset:0;z-index:50;display:none;place-items:center;padding:16px}
.overlay.show{display:grid}
#boot{background:rgba(0,40,90,.35);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#notice{background:rgba(0,0,0,.12)}
.dialog{width:min(450px,100%);background:var(--face);padding:3px;box-shadow:var(--raised),6px 8px 30px rgba(0,0,0,.45)}
.dialog .body{display:flex;gap:14px;padding:14px 12px 8px;align-items:flex-start}
.dialog .big{font-size:44px;line-height:1}
.dialog p{margin:0 0 6px}
.acts{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:6px 8px 10px}
.btn{min-width:88px;height:24px;padding:0 12px;border:0;background:var(--face);box-shadow:var(--raised);cursor:pointer}
.btn:active{box-shadow:var(--sunken)}
.btn:focus-visible{outline:1px dotted #000;outline-offset:-5px}
.progress{height:18px;box-shadow:var(--sunken);padding:2px;background:#fff;margin-top:8px}
.progress i{display:block;height:100%;width:0;transition:width .85s steps(12);background:repeating-linear-gradient(90deg,var(--title-a) 0 10px,transparent 10px 12px)}
.tri{width:0;height:0;flex:none;border-left:26px solid transparent;border-right:26px solid transparent;border-bottom:46px solid #f2c200;position:relative;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.tri::after{content:"!";position:absolute;left:-5px;top:12px;font:bold 28px/1 Tahoma,sans-serif;color:#000}

#warn{background:rgba(160,0,0,.35);animation:redpulse .45s steps(2) infinite}
@keyframes redpulse{50%{background:rgba(255,0,0,.55)}}
#warn .dialog{width:min(620px,100%);box-shadow:var(--raised),0 0 0 4px #f00,0 0 70px 14px rgba(255,0,0,.85);animation:throb .45s ease-in-out infinite alternate}
#warn .titlebar{background:linear-gradient(90deg,#7a0000,#ff2a2a)}
#warn h1{margin:0 0 8px;font:bold clamp(22px,5vw,38px)/1.05 Tahoma,sans-serif;color:#e00000;text-transform:uppercase;text-shadow:1px 1px 0 #600;text-wrap:balance}
#warn .stop{width:72px;height:72px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font:bold 44px/1 Tahoma,sans-serif;
  background:radial-gradient(circle at 35% 30%,#ff8a8a,#e00000 55%,#8a0000);box-shadow:0 2px 6px rgba(0,0,0,.4)}
#warn p{font-size:14px}
@keyframes throb{to{transform:scale(1.03)}}
.riskbar{height:22px;box-shadow:var(--sunken);background:#fff;padding:2px;margin:10px 0 4px}
.riskbar i{display:block;height:100%;width:0;transition:width .4s;background:repeating-linear-gradient(45deg,#e00000 0 10px,#ff5a5a 10px 20px)}

/* brand loyalty check (the Pickle Simulator Pro icon) */
#loyal{background:rgba(0,0,0,.18)}
#loyal .lh{font:bold 16px/1.2 Tahoma,sans-serif;margin:0 0 8px}
a.btn{display:inline-grid;place-items:center;color:#000;text-decoration:none}

/* ---------- reduced motion: keep the hot dog spinning, drop the flashing ---------- */
@media (prefers-reduced-motion:reduce){
  #wallpaper,#wallpaper::before,.bubble,.stage::after,#warn,#warn .dialog,.window,.lcd .v,.st-4,.flash.go{animation:none!important}
}

/* ---------- small or short screens ---------- */
@media (max-width:760px),(max-height:500px){
  .osd.r{top:44px}
  #icons{display:none}
  .window{width:calc(100% - 32px);height:calc(100% - 16px)}
  .content{display:flex;flex-direction:column;overflow:auto}
  .viewport{flex:none;height:min(44vh,380px)}
  .deck,.side{flex:none}
  .side{overflow:visible}
  .ql,.menubar button:nth-child(n+4){display:none}
}