/* ADV's website and Developer Kit, drawn like the console itself: its greys, chunky bevelled
   edges with stepped corners, ADV's own 3x5 lettering (pixelfont.js), pixel icons, an LCD spec
   sheet in the aux screen's greens, and carts with grip ridges and rainbow stripes */
:root {
  --black: #000000; --body: #242424; --edge: #494949; --shell: #6d6d6d; --lit: #929292;
  --pale: #b6b6b6; --label: #dbdbdb; --white: #ffffff;
  --red: #ff004d; --orange: #ff7a1c; --yellow: #ffe14d; --green: #2fa84f; --cyan: #3ee6e6; --wine: #9c1a3a;
  --lcd0: #9bbc0f; --lcd1: #8bac0f; --lcd2: #306230; --lcd3: #0f380f;
  --px: 4px;                          /* one chunky pixel */
  --case: var(--body); --case-lit: var(--shell); --case-dark: var(--black); --case-ink: var(--label);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; color: var(--label); }
body { background: var(--black) url(bg.png); font: 16px/1.7 "Silkscreen", ui-monospace, monospace; -webkit-font-smoothing: none; }
a { color: var(--yellow); text-underline-offset: 3px; }
img { image-rendering: pixelated; image-rendering: crisp-edges; }
#screen { position: absolute; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; display: none; }
[data-px] canvas { display: block; image-rendering: pixelated; }
#message { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
           padding: 16px; background: var(--black); z-index: 4; }
#drop { position: fixed; inset: 0; border: 8px dashed var(--yellow); display: none; pointer-events: none; z-index: 6; }
.phone .pc-only, .pc .phone-only { display: none !important; }

/* stepped (pixel) corners, and a bevel lit from the top-left */
.pixel-box { clip-path: polygon(0 var(--px), var(--px) var(--px), var(--px) 0, calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px),
                                100% var(--px), 100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)),
                                calc(100% - var(--px)) 100%, var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px))); }
.bevel { box-shadow: inset var(--px) var(--px) 0 var(--case-lit), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 var(--case-dark); }

/* the top of the page: a strip of console casing with the logo, the stripes and the way around */
header.top { position: sticky; top: 0; z-index: 3; background: var(--case);
             box-shadow: inset 0 var(--px) 0 var(--case-lit), 0 var(--px) 0 var(--edge), 0 calc(2 * var(--px)) 0 var(--black); }
header.top .inner { display: flex; align-items: center; gap: 22px; max-width: 1240px; margin: 0 auto; padding: 14px 16px; }
header.top .logo { width: 120px; height: 40px; }
header.top .say { color: var(--lit); }
header.top nav { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
header.top nav a { color: var(--case-ink); text-decoration: none; padding: 8px 10px; }
header.top nav a:hover { background: var(--edge); }
header.top .zx { width: 80px; height: 32px; }

main { max-width: 1240px; margin: 0 auto; padding: 30px 16px 40px; }
section { margin: 0 0 56px; scroll-margin-top: 110px; }
#stage { position: relative; width: 100%; }
.hint { display: flex; justify-content: center; margin: 16px 0 0; color: var(--lit); }

/* section headings: a pixel icon and ADV's lettering, over a dotted seam */
h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding-bottom: 14px; color: var(--white); font-weight: normal;
     background: repeating-linear-gradient(90deg, var(--edge) 0 8px, transparent 8px 16px) bottom / 100% var(--px) no-repeat; }
h2 img { width: 36px; height: 36px; }
h3 { margin: 30px 0 12px; color: var(--yellow); font-weight: normal; }
section p { color: var(--pale); max-width: 860px; margin: 0 0 14px; }

/* a panel of console casing */
.panel { background: var(--body); padding: 22px 26px; }

/* the spec sheet: on a green LCD, like the console's aux screen */
.lcd { background: var(--lcd2); padding: 12px; max-width: 860px; }
.lcd-glass { background: var(--lcd0); padding: 20px 24px; box-shadow: inset 0 var(--px) 0 var(--lcd1); }
.lcd-row { display: grid; grid-template-columns: 170px 1fr; gap: 6px 18px; align-items: center; padding: 7px 0; color: var(--lcd3);
           background: repeating-linear-gradient(90deg, var(--lcd1) 0 4px, transparent 4px 8px) bottom / 100% 2px no-repeat; }
.lcd-row:last-child { background: none; }
.lcd-row span:first-child { color: var(--lcd2); }

/* my word: a paper note, like a cart's label */
.note-card { background: var(--label); color: var(--body); padding: 26px 30px 22px; max-width: 860px; position: relative; }
.note-card p { color: var(--body); margin: 0 0 6px; }
.note-card a { color: var(--wine); }
.note-card .sign { margin-top: 18px; color: var(--wine); }
.note-card .stripe { height: 10px; margin: 22px -30px -22px; }

/* buttons: chunky console buttons, lit top-left, shaded bottom-right; they press in */
.btn { display: inline-block; font: inherit; color: var(--white); background: var(--edge); border: 0; padding: 12px 18px;
       cursor: pointer; text-decoration: none;
       box-shadow: inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 var(--body), inset var(--px) var(--px) 0 var(--shell); }
.btn:hover { background: var(--shell); }
.btn:active { box-shadow: inset var(--px) var(--px) 0 var(--body), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 var(--shell); }
.btn.loud { background: var(--yellow); color: var(--black);
            box-shadow: inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 var(--orange), inset var(--px) var(--px) 0 var(--white); }
.btn.loud:hover { background: #fff27a; }

/* downloads, as cartridges: grip ridges, a paper label, the rainbow stripe. They pop up when
   you point at them, like carts in the drawer */
.carts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.cart { position: relative; display: block; padding: 34px 16px 20px; background: var(--shell); color: var(--black);
        text-decoration: none; transition: transform 0.12s steps(3);
        box-shadow: inset 0 var(--px) 0 var(--lit), inset var(--px) 0 0 var(--lit),
                    inset calc(-1 * var(--px)) 0 0 var(--edge), inset 0 calc(-1 * var(--px)) 0 var(--edge); }
.cart:hover, .cart:focus-visible { transform: translateY(-12px); }
.cart::before { content: ''; position: absolute; top: 10px; left: 26px; right: 26px; height: 14px;
                background: repeating-linear-gradient(to bottom, var(--edge) 0 var(--px), transparent var(--px) 8px); }
.cart.dev { background: var(--label); box-shadow: inset 0 var(--px) 0 var(--white), inset var(--px) 0 0 var(--white),
            inset calc(-1 * var(--px)) 0 0 var(--lit), inset 0 calc(-1 * var(--px)) 0 var(--lit); }
.cart.dev::before { background: repeating-linear-gradient(to bottom, var(--lit) 0 var(--px), transparent var(--px) 8px); }
.cart .label { background: var(--label); padding: 16px 14px 0; }
/* dev carts: a window onto the bare circuit board inside, and jumper wires trailing out of the bottom */
.cart.dev .board { height: 56px; margin-bottom: 12px; image-rendering: pixelated;
                   background: url(devcart-board.png) left center / 160px 56px repeat-x;
                   box-shadow: inset 0 0 0 var(--px) var(--lit), inset 0 0 0 calc(2 * var(--px)) var(--black); }
.cart.dev::after { content: ''; position: absolute; right: 22px; top: 100%; width: 78px; height: 120px;
                   background: url(devcart-wires.png) 0 0 / 78px 120px no-repeat; image-rendering: pixelated; pointer-events: none; }
.carts { padding-bottom: 110px; }
.cart.dev .label { background: var(--white); }
.cart .label b { display: block; color: var(--black); margin-bottom: 12px; }
.cart .label p { margin: 0 0 8px; color: var(--body); font-size: 16px; }
.cart .label small { display: block; color: var(--shell); font-size: 16px; margin-bottom: 14px; line-height: 1.5; }
.cart .cart-icon { float: right; width: 40px; height: 40px; margin: -4px -2px 0 8px; image-rendering: auto; }
.cart .tag { display: inline-block; background: var(--yellow); color: var(--black); padding: 0 6px; margin-bottom: 10px; }
.stripe { height: 12px; margin: 0 -14px;
          background: linear-gradient(90deg, var(--red) 0 25%, var(--yellow) 25% 50%, var(--green) 50% 75%, var(--cyan) 75%); }

footer { border-top: var(--px) solid var(--edge); background: var(--body); }
footer .inner { max-width: 1240px; margin: 0 auto; padding: 18px 16px; display: flex; gap: 18px; align-items: center; color: var(--lit); }
footer .zx { width: 60px; height: 24px; margin-left: auto; }

/* the phone: the handheld fills the screen, with a little bar underneath */
.phone, .phone body { overflow: hidden; height: 100%; }
.phone #stage { position: fixed; inset: 0 0 44px 0; }
.phone main { padding: 0; }
#bar { position: fixed; left: 0; right: 0; bottom: 0; height: 44px; display: flex; gap: 10px; align-items: center;
       justify-content: center; background: var(--body); box-shadow: inset 0 var(--px) 0 var(--edge); }
#bar .btn { padding: 6px 12px; }

/* the Developer Kit: the same, in the dev kit's off-white casing */
.devkit { --case: var(--label); --case-lit: var(--white); --case-dark: var(--lit); --case-ink: var(--body); }
.devkit header.top .say { color: var(--body); }
.devkit header.top nav a:hover { background: var(--pale); }
.devkit .badge { background: var(--yellow); color: var(--black); padding: 4px 8px; box-shadow: inset 0 0 0 2px var(--orange); }
.toolbar { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 22px 0 8px; }
#note { visibility: hidden; text-align: center; color: var(--yellow); min-height: 1.7em; }
dialog { background: var(--body); color: var(--label); border: 0; padding: 26px 28px; max-width: 560px;
         box-shadow: inset 0 0 0 var(--px) var(--yellow), inset 0 0 0 calc(2 * var(--px)) var(--black); }
dialog::backdrop { background: rgba(0, 0, 0, 0.8); }
dialog h2 { background: none; padding: 0; margin-bottom: 18px; }
dialog label { display: block; margin: 12px 0 4px; color: var(--lit); }
dialog input, dialog textarea { width: 100%; font: inherit; background: var(--black); color: var(--white); padding: 8px;
                                border: 0; box-shadow: inset 0 0 0 var(--px) var(--edge); outline: none; }
dialog input:focus, dialog textarea:focus { box-shadow: inset 0 0 0 var(--px) var(--yellow); }
dialog .check { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
dialog .check input { width: 20px; height: 20px; accent-color: var(--yellow); box-shadow: none; }
dialog .check label { margin: 0; }
dialog .buttons { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }
dialog .status { margin-top: 14px; color: var(--yellow); min-height: 1.6em; }
dialog small { color: var(--lit); }

/* the indie web page: code to copy, the 88x31 on show, and ADV Lite running next to its code */
.indieweb .badge { background: var(--cyan); color: var(--black); padding: 4px 8px; box-shadow: inset 0 0 0 2px var(--green); }
.showcase { display: inline-block; background: var(--body); padding: 22px 26px; margin: 0 0 18px; }
.showcase img { display: block; }
.snippet { display: flex; gap: 12px; align-items: stretch; max-width: 860px; }
.snippet textarea { flex: 1; font: 13px/1.5 ui-monospace, Consolas, monospace; background: var(--black); color: var(--lcd0); padding: 10px 12px;
                    border: 0; box-shadow: inset 0 0 0 var(--px) var(--edge); resize: none; }
.snippet textarea:focus { outline: none; box-shadow: inset 0 0 0 var(--px) var(--yellow); }
.lite-row { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.lite-preview { border: 0; background: var(--black); box-shadow: 0 0 0 var(--px) var(--edge), 0 0 0 calc(2 * var(--px)) var(--black); max-width: 100%; }
.lite-how { flex: 1; min-width: 280px; }
.lite-how h3:first-child { margin-top: 0; }
.tick { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; cursor: pointer; }
.tick input { margin-top: 3px; accent-color: var(--yellow, #ffe14d); }

@media (max-width: 900px) { header.top .say, header.top .zx { display: none; } .lcd-row { grid-template-columns: 1fr; } }

/* ADV 1.0: the trailer and what's new */
.trailer { display: block; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; margin: 0 auto 20px; background: var(--black);
           box-shadow: 0 0 0 var(--px) var(--edge), 0 0 0 calc(2 * var(--px)) var(--black); }
.news { max-width: 960px; margin: 0 auto; padding-left: 20px; }
.news li { margin: 8px 0; }