:root{
  --gb-lightest:#9bbc0f;
  --gb-light:#8bac0f;
  --gb-dark:#306230;
  --gb-darkest:#0f380f;
  --shell:#c8c4bd;
  --shell-dark:#a8a49d;
  --shell-shadow:#7d7a73;
  --accent:#8b1a4f;
  --accent-light:#b62766;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{
  font-family:'IBM Plex Mono',monospace;
  background:
    radial-gradient(circle at 20% 10%, #2a3a2a 0%, transparent 50%),
    radial-gradient(circle at 80% 90%, #1a2a3a 0%, transparent 50%),
    #14181c;
  color:#d7dbd0;
  min-height:100vh;
  padding:16px;
  display:flex;flex-direction:column;align-items:center;
}
#header{text-align:center;margin:8px 0 20px;}
#header h1{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(16px,4vw,28px);
  color:var(--gb-lightest);
  text-shadow:3px 3px 0 var(--gb-darkest);
  letter-spacing:1px;
}
.subtitle{margin-top:12px;font-size:12px;color:#8a9080;}
.subtitle em{color:var(--gb-light);}

main{width:100%;max-width:440px;display:flex;flex-direction:column;gap:16px;}

/* ROM zone */
.rom-zone{
  border:3px dashed var(--gb-dark);
  border-radius:14px;
  padding:22px 16px;
  text-align:center;
  cursor:pointer;
  background:rgba(48,98,48,0.12);
  transition:all .15s;
}
.rom-zone:hover,.rom-zone.drag{
  border-color:var(--gb-lightest);
  background:rgba(155,188,15,0.14);
  transform:translateY(-2px);
}
.rom-icon{font-size:34px;margin-bottom:8px;}
.rom-title{font-weight:600;color:var(--gb-lightest);font-size:13px;}
.rom-hint{font-size:11px;color:#7a8070;margin-top:6px;}

.rom-info{
  background:#1c221c;border:1px solid var(--gb-dark);border-radius:10px;
  padding:12px 14px;font-size:12px;
}
.ri-row{color:var(--gb-lightest);margin-bottom:8px;word-break:break-all;}
.ri-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;}
.ri-grid span:nth-child(odd){color:#7a8070;}
.ri-grid span:nth-child(even){color:#c8ccc0;}

/* Console shell */
.console{
  background:linear-gradient(160deg,var(--shell) 0%,var(--shell-dark) 100%);
  border-radius:14px 14px 44px 14px;
  padding:18px 20px 26px;
  box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -4px 8px var(--shell-shadow);
}
.console-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.brand{font-size:9px;color:#4a4a55;letter-spacing:1px;font-style:italic;}
.power{font-size:9px;color:#4a4a55;display:flex;align-items:center;gap:5px;}
.led{width:8px;height:8px;border-radius:50%;background:#5a2530;box-shadow:inset 0 0 2px #000;}
.led.on{background:#ff3355;box-shadow:0 0 8px #ff3355;}

.bezel{
  background:#4b4f5b;border-radius:10px 10px 26px 10px;
  padding:20px 34px;position:relative;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.6);
}
#canvas{
  display:block;width:100%;height:auto;
  image-rendering:pixelated;image-rendering:crisp-edges;
  border-radius:3px;
  aspect-ratio:160/144;
  background:var(--gb-lightest);
}
.boot-msg{
  position:absolute;inset:20px 34px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'Press Start 2P',monospace;font-size:10px;
  color:var(--gb-darkest);text-align:center;line-height:1.8;
  pointer-events:none;background:var(--gb-lightest);border-radius:3px;
}
.boot-msg span{font-size:7px;color:var(--gb-dark);}

.dpad-label{text-align:right;margin:10px 4px 4px;}
.nintendo{font-family:'Press Start 2P',monospace;font-size:11px;color:#39335f;font-style:italic;}
.tm{font-size:6px;vertical-align:super;}

/* pad area */
.pad-area{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:0 6px;}
.dpad{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px);}
.dbtn{
  background:#2b2b33;color:#666;border:none;font-size:11px;cursor:pointer;
  box-shadow:0 3px 0 #0e0e12;transition:all .05s;
}
.dbtn:active,.dbtn.pressed{transform:translateY(2px);box-shadow:0 1px 0 #0e0e12;color:#999;}
.dbtn.up{grid-area:1/2;border-radius:6px 6px 0 0;}
.dbtn.left{grid-area:2/1;border-radius:6px 0 0 6px;}
.dbtn.center{grid-area:2/2;background:#2b2b33;box-shadow:none;cursor:default;}
.dbtn.right{grid-area:2/3;border-radius:0 6px 6px 0;}
.dbtn.down{grid-area:3/2;border-radius:0 0 6px 6px;}

.ab{display:flex;gap:16px;transform:rotate(-20deg);}
.rbtn{
  width:46px;height:46px;border-radius:50%;border:none;
  background:radial-gradient(circle at 35% 30%,var(--accent-light),var(--accent));
  color:#ffd7e6;font-family:'Press Start 2P',monospace;font-size:12px;
  cursor:pointer;box-shadow:0 4px 0 #4a0d29;transition:all .05s;
}
.rbtn:active,.rbtn.pressed{transform:translateY(3px);box-shadow:0 1px 0 #4a0d29;}

.startsel{display:flex;gap:22px;justify-content:center;margin-top:18px;}
.pill{
  background:#5a5560;color:#2b2b33;border:none;
  padding:6px 16px;border-radius:20px;transform:rotate(-20deg);
  font-size:8px;font-weight:600;letter-spacing:1px;cursor:pointer;
  box-shadow:0 3px 0 #35323a;transition:all .05s;
}
.pill:active,.pill.pressed{transform:rotate(-20deg) translateY(2px);box-shadow:0 1px 0 #35323a;}

/* Control panel */
.panel{
  background:#1c221c;border:1px solid var(--gb-dark);border-radius:12px;
  padding:16px;display:flex;flex-direction:column;gap:14px;
}
.panel-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.pbtn{
  flex:1;min-width:80px;background:var(--gb-dark);color:var(--gb-lightest);
  border:none;padding:11px 8px;border-radius:8px;font-family:'IBM Plex Mono',monospace;
  font-size:12px;font-weight:600;cursor:pointer;transition:all .12s;
}
.pbtn:hover{background:var(--gb-darkest);color:#fff;}
.pbtn.active{background:var(--gb-lightest);color:var(--gb-darkest);box-shadow:0 0 10px rgba(155,188,15,.5);}
.slider-row{flex-direction:column;align-items:stretch;gap:8px;}
.slider-row label{font-size:12px;color:#9aa090;}
.slider-row span{color:var(--gb-lightest);font-weight:600;}
input[type=range]{width:100%;accent-color:var(--gb-light);height:6px;}
.stats{font-size:12px;justify-content:space-between;color:#8a9080;}
.stats b{color:var(--gb-lightest);}
.stat-status{padding:2px 10px;border-radius:12px;background:#333;color:#aaa;font-size:11px;}
.stat-status.ok{background:var(--gb-dark);color:var(--gb-lightest);}
.stat-status.err{background:#5a1a1a;color:#ff8888;}
.kbd-hint{font-size:10px;color:#666d5d;line-height:1.6;text-align:center;}

/* Footer */
#footer{margin-top:26px;text-align:center;font-size:11px;color:#5a6055;line-height:1.8;}
#footer a{color:var(--gb-light);text-decoration:none;border-bottom:1px dotted var(--gb-dark);}
#footer a:hover{color:var(--gb-lightest);}

/* CRT overlay */
body.crt .bezel::after{
  content:'';position:absolute;inset:20px 34px;pointer-events:none;border-radius:3px;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0px,rgba(0,0,0,.14) 1px,transparent 2px,transparent 3px);
  animation:flick 0.15s infinite;
}
@keyframes flick{0%,100%{opacity:.6;}50%{opacity:.75;}}

@media(max-width:400px){
  .dpad{grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,30px);}
  .rbtn{width:42px;height:42px;}
}