:root{
  --od:#4b5320; --od-dark:#353b16; --od-light:#626b2e;
  --rubber:#1b1c18; --amber:#ffb000; --lcd0:#0f380f; --lcd3:#9bbc0f;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,240,200,.10), transparent 55%),
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.75) 100%),
    radial-gradient(circle at 20% 30%, #3a3f22 0 8%, transparent 9%),
    radial-gradient(circle at 70% 60%, #2a2c18 0 10%, transparent 11%),
    radial-gradient(circle at 40% 80%, #423a26 0 7%, transparent 8%),
    radial-gradient(circle at 85% 15%, #2f3a1d 0 9%, transparent 10%),
    #1e2113;
  background-size:100% 100%,100% 100%,220px 220px,260px 260px,180px 180px,240px 240px,auto;
  color:#d8d2b0; font-family:'Special Elite',monospace; overflow-x:hidden;
}
.stencil{font-family:'Black Ops One',cursive;letter-spacing:.08em}
.stencil2{font-family:'Stardos Stencil',cursive}

.device{
  position:relative; width:min(440px,94vw); padding:22px 22px 26px;
  border-radius:26px 26px 70px 26px;
  background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.03) 0 2px,transparent 2px 5px),
    linear-gradient(160deg,var(--od-light),var(--od) 40%,var(--od-dark));
  box-shadow:
    0 0 0 10px var(--rubber),
    0 0 0 12px #000,
    inset 0 2px 0 rgba(255,255,255,.15), inset 0 -6px 12px rgba(0,0,0,.5),
    0 40px 80px rgba(0,0,0,.7);
  animation:drop .9s cubic-bezier(.2,1.3,.4,1) both;
  user-select:none;
}
@keyframes drop{from{transform:translateY(-60px) rotate(-3deg);opacity:0}to{transform:none;opacity:1}}
.device::before{ /* ribbed rubber look */
  content:"";position:absolute;inset:-10px;border-radius:32px 32px 78px 32px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 6px);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:10px;
}
.screw{position:absolute;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#9a9a88,#3a3a30);box-shadow:inset 0 0 0 2px #222}
.screw::after{content:"";position:absolute;left:3px;right:3px;top:7px;height:2px;background:#222;transform:rotate(30deg)}

.bezel{
  background:linear-gradient(#2d2f2a,#1e1f1b); border-radius:12px 12px 40px 12px;
  padding:14px 18px 18px; box-shadow:inset 0 4px 14px #000, 0 2px 0 rgba(255,255,255,.1);
}
.lcdwrap{position:relative;border-radius:4px;overflow:hidden;background:var(--lcd0);
  box-shadow:0 0 0 3px #111, inset 0 0 20px #000}
.lcdwrap canvas{display:block;width:100%;image-rendering:pixelated;image-rendering:crisp-edges;
  filter:drop-shadow(0 0 6px rgba(155,188,15,.25))}
.lcdwrap::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px);z-index:2}
.ballistic{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(125deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 25%,transparent 40%,transparent 80%,rgba(255,255,255,.06));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}

.led{width:10px;height:10px;border-radius:50%;background:#330;box-shadow:inset 0 1px 2px #000}
.led.red.on{background:#ff2a1a;box-shadow:0 0 10px #ff2a1a,0 0 2px #fff inset}
.led.amber.on{background:var(--amber);box-shadow:0 0 10px var(--amber);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}

.cavity{width:132px;height:132px;border-radius:50%;
  background:radial-gradient(circle,#1d1f14 55%,#2a2e18 70%,var(--od-dark));
  box-shadow:inset 0 10px 20px #000, 0 2px 0 rgba(255,255,255,.12);display:grid;place-items:center}
.dpad{position:relative;width:96px;height:96px}
.dpad button{position:absolute;background:linear-gradient(#2c2c2c,#111);border:none;
  box-shadow:0 4px 0 #000;transition:transform .05s, box-shadow .05s}
.dpad button:active,.dpad button.on{transform:translateY(3px);box-shadow:0 1px 0 #000}
.dpad .u,.dpad .d{left:32px;width:32px;height:34px}
.dpad .l,.dpad .r{top:32px;width:34px;height:32px}
.dpad .u{top:0;border-radius:4px 4px 0 0}.dpad .d{bottom:0;border-radius:0 0 4px 4px}
.dpad .l{left:0;border-radius:4px 0 0 4px}.dpad .r{right:0;border-radius:0 4px 4px 0}
.dpad .c{position:absolute;left:32px;top:32px;width:32px;height:32px;background:#161616}

.bigbtn{width:66px;height:66px;border-radius:50%;border:none;
  background:radial-gradient(circle at 35% 30%,#a8324a,#6b1428 70%);
  box-shadow:0 6px 0 #2a0610, 0 0 0 6px #232519, 0 8px 12px rgba(0,0,0,.6);
  color:#f3d6c8;font-family:'Black Ops One';font-size:22px;transition:transform .05s,box-shadow .05s}
.bigbtn:active,.bigbtn.on{transform:translateY(5px);box-shadow:0 1px 0 #2a0610,0 0 0 6px #232519}
.pill{width:58px;height:18px;border-radius:9px;border:none;background:linear-gradient(#3a3a36,#1a1a18);
  box-shadow:0 3px 0 #000;transform:rotate(-25deg);transition:transform .05s}
.pill:active,.pill.on{transform:rotate(-25deg) translateY(3px);box-shadow:0 0 0 #000}

.grille{width:110px;height:70px;border-radius:10px;padding:6px;
  background:#242616;box-shadow:inset 0 3px 8px #000, 0 0 0 3px #1b1c18}
.grille div{width:100%;height:100%;border-radius:6px;
  background:radial-gradient(circle,#050505 40%,transparent 45%) 0 0/8px 7px, #3b4020}

.door{transform-origin:top center;transition:transform .45s cubic-bezier(.3,1.5,.5,1);transform-style:preserve-3d}
.door.open{transform:perspective(500px) rotateX(-110deg)}
.cart{cursor:pointer;transition:transform .15s}
.cart:hover{transform:translateY(-4px) rotate(-2deg)}

.collar{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.collar.locked{transform:rotate(90deg)}

.guard{transform-origin:bottom center;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.guard.up{transform:perspective(200px) rotateX(75deg)}

.manila{background:
  repeating-linear-gradient(0deg,transparent 0 23px,rgba(120,90,40,.18) 23px 24px),
  linear-gradient(#e2cf9c,#d4bd82); color:#2b2414;
  box-shadow:0 20px 40px rgba(0,0,0,.6);border-radius:4px}
.clip{width:90px;height:22px;margin:-12px auto 0;border-radius:4px;
  background:linear-gradient(#bbb,#666);box-shadow:0 3px 4px rgba(0,0,0,.5)}
.logbox::-webkit-scrollbar{width:6px}.logbox::-webkit-scrollbar-thumb{background:#8a7545}
button{cursor:pointer;touch-action:manipulation}