:root {
  --shell: #c9c5bb; --shell-dark: #a9a59b; --bezel: #5d5f6b; --ink: #2c2a6b; --btn: #9b2257; --dpad: #26262b;
  --lcd: #e0f8d0; --lcd-dark: #081820; --px: 3px;
}
html, body {
  margin: 0; height: 100%; min-height: 100dvh; background: #1c1b20; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
  font-family: "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
}
#shell {
  position: relative; box-sizing: border-box; margin: 0 auto; height: 100%; max-width: 560px;
  background: var(--shell); border-radius: 0 0 64px 0;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow: inset -6px -6px 0 var(--shell-dark);
}
#bezel {
  position: relative; background: var(--bezel); border-radius: 10px 10px 40px 10px;
  padding: 18px 26px 26px; display: flex; flex-direction: column; align-items: center;
}
#led { position: absolute; left: 10px; top: 44%; width: 8px; height: 8px; border-radius: 50%; background: #e02f2f; box-shadow: 0 0 6px #ff4a4a; }
#lcd { position: relative; line-height: 0; background: var(--lcd); box-shadow: 0 0 0 2px #2d2e36; }
#lcd::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to right, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px var(--px)),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px var(--px));
}
#screen { display: block; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
#bezlabel { position: absolute; bottom: 7px; left: 0; right: 0; text-align: center; color: #b9bbc7; font-size: 9px; letter-spacing: 2px; font-style: italic; }
#brand { color: var(--ink); margin: 10px 0 4px; align-self: flex-start; padding-left: 8px; font-size: 22px; font-style: italic; letter-spacing: 1px; }
#brand b { font-weight: 900; }
#brand span { font-size: 13px; font-weight: 700; letter-spacing: 2px; }

#controls { position: relative; flex: 1; width: 100%; max-width: 420px; min-height: 190px; }
#dpad { position: absolute; left: 6%; top: 18%; width: 120px; height: 120px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); }
.dp { background: var(--dpad); border: 0; padding: 0; margin: 0; position: relative; }
.dp.up { grid-area: 1 / 2; border-radius: 5px 5px 0 0; }
.dp.left { grid-area: 2 / 1; border-radius: 5px 0 0 5px; }
.dp.mid { grid-area: 2 / 2; }
.dp.right { grid-area: 2 / 3; border-radius: 0 5px 5px 0; }
.dp.down { grid-area: 3 / 2; border-radius: 0 0 5px 5px; }
.dp::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border: 6px solid transparent; transform: translate(-50%, -50%); }
.dp.up::after { border-bottom-color: #55555d; margin-top: -3px; }
.dp.down::after { border-top-color: #55555d; margin-top: 3px; }
.dp.left::after { border-right-color: #55555d; margin-left: -3px; }
.dp.right::after { border-left-color: #55555d; margin-left: 3px; }
.dp.mid::after { border: 0; width: 16px; height: 16px; border-radius: 50%; background: #303036; }
button.held { filter: brightness(1.6); }
#ab { position: absolute; right: 4%; top: 14%; width: 160px; height: 110px; transform: rotate(-25deg); }
.rbw { position: absolute; display: flex; flex-direction: column; align-items: center; color: var(--ink); font-weight: 700; font-size: 15px; letter-spacing: 1px; }
.rbw.b { left: 0; top: 30px; }
.rbw.a { right: 0; top: 4px; }
.rb { width: 62px; height: 62px; border-radius: 50%; border: 0; background: var(--btn); box-shadow: 0 3px 0 #6c1438; padding: 0; }
.rb.held { transform: translateY(2px); box-shadow: 0 1px 0 #6c1438; }
#ss { position: absolute; left: 0; right: 0; bottom: 6%; display: flex; justify-content: center; gap: 22px; }
.pw { display: flex; flex-direction: column; align-items: center; transform: rotate(-25deg); color: var(--ink); font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.pill { width: 54px; height: 14px; border-radius: 8px; border: 0; background: #87858d; box-shadow: 0 2px 0 #5e5c63; padding: 0; margin-bottom: 4px; }
.pill.held { background: #a8a6ad; }
#keys { display: none; color: #6b6870; font-size: 10px; letter-spacing: 1px; margin-top: 4px; text-align: center; }
body:not(.touch) #keys { display: block; }

/* landscape: the screen in the middle, d-pad left, A/B right, like the later handhelds */
body.land #shell { max-width: none; border-radius: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); justify-content: center; }
body.land #bezel { padding: 10px 18px 20px; }
body.land #brand { display: none; }
body.land #controls { position: absolute; inset: 0; max-width: none; pointer-events: none; }
body.land #controls button { pointer-events: auto; }
body.land #dpad { left: calc(18px + env(safe-area-inset-left)); top: auto; bottom: 22%; }
body.land #ab { right: calc(4px + env(safe-area-inset-right)); top: auto; bottom: 24%; }
body.land #ss { bottom: 6px; left: auto; right: calc(30px + env(safe-area-inset-right)); justify-content: flex-end; }
body.land #keys { position: absolute; bottom: 6px; left: 0; right: 0; }
@media (max-height: 640px) and (orientation: portrait) {
  #controls { min-height: 160px; }
  #dpad { width: 104px; height: 104px; }
  .rb { width: 54px; height: 54px; }
}

/* measures the notch and home-bar insets for the sizing code */
#safe { position: fixed; inset: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

/* phones: touch first. No shell at all: the screen fills the phone and is the controller (tap tiles, tap the
   table, tap the pause tab top right). */
body.bare { background: var(--screen-bg, #1c1410); }
body.bare #controls, body.bare #keys, body.bare #brand, body.bare #bezlabel, body.bare #led { display: none; }
body.bare #shell { max-width: none; background: var(--screen-bg, #1c1410); border-radius: 0; box-shadow: none; justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body.bare #bezel { background: none; padding: 0; border-radius: 0; }
body.bare #lcd { box-shadow: none; background: none; }
body.bare #lcd::after { display: none; }

/* text boxes for a name and a table code, laid over the boxes the game draws (positioned from js) */
.fbin { position: fixed; display: none; z-index: 10; box-sizing: border-box; margin: 0; padding: 0 6px;
  font: bold 16px/1 "Courier New", monospace; letter-spacing: 2px; text-transform: uppercase;
  background: #fff6dc; color: #20161a; border: 2px solid #20161a; border-radius: 0; outline: none;
  user-select: text; -webkit-user-select: text; touch-action: manipulation; }
.fbin:focus { background: #ffffff; border-color: #c4492f; }
.fbin::placeholder { color: #b8a888; }