/* The showcase: one machine on the desk, four tapes beside it.
   Tokens and components (paper, label, note, btn, toggles, head) come from ../assets/site.css. */

.sc-hero .wrap{display:flex;flex-direction:column;gap:var(--s-5)}
.sc-hero .kicker{margin-bottom:calc(-1 * var(--s-2))}
.sc-hero .lede{max-width:40em}

/* the player: the monitor, and what's in it */
.player-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--s-7);align-items:start}
.stage,.now{min-width:0}
.sc-crt canvas{display:block;width:100%;height:auto;aspect-ratio:768/592;border-radius:16px/20px;background:#000;cursor:pointer}
.sc-crt canvas:focus{outline:3px solid var(--yel);outline-offset:3px}
.sc-start{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);font:30px/1 var(--mono);letter-spacing:1px;
  padding:12px 22px;background:var(--glass);color:var(--ph);border:2px solid var(--ph-dim);border-radius:var(--r);cursor:pointer}
.sc-start:hover{border-color:var(--ph)}

.now{display:flex;flex-direction:column;gap:var(--s-4)}
.now h2{font-size:var(--fs-h2)}
.now .label{margin-bottom:calc(-1 * var(--s-2))}
.keys{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2) var(--s-4);margin:var(--s-2) 0 0;align-items:center}
.keys dt{display:flex;gap:6px;flex-wrap:wrap}
.keys dd{margin:0;font:var(--fs-mono)/1.2 var(--mono);color:var(--muted);letter-spacing:.5px}
kbd{display:inline-block;min-width:34px;text-align:center;font:var(--fs-label)/1 var(--mono);padding:6px 8px 5px;
  background:var(--paper);color:var(--paper-ink);border:2px solid var(--paper-edge);border-bottom-width:4px;border-radius:5px}
.now-actions{display:flex;gap:var(--s-3) var(--s-5);align-items:center;flex-wrap:wrap;margin-top:var(--s-2);padding-top:var(--s-4);border-top:2px solid var(--rule)}
.toggle{font:var(--fs-mono)/1 var(--mono);color:var(--muted);display:flex;gap:var(--s-2);align-items:center;cursor:pointer}
.toggle input{width:16px;height:16px;margin:0;accent-color:var(--red)}
.source summary{font:var(--fs-label)/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;color:var(--link);padding-block:var(--s-1)}
.source pre{max-height:420px;overflow:auto;background:var(--glass);color:var(--ph);font:16px/1.35 var(--mono);
  padding:14px 16px;border-radius:var(--r);margin:var(--s-3) 0 0;white-space:pre;tab-size:8}

/* the source, highlighted by unc-lang.js (the Machine Room's tokenizer): phosphor on glass */
.source{position:relative}
.source-opts{display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center;margin:var(--s-3) 0 0;font:var(--fs-label)/1.2 var(--mono);color:var(--muted)}
.source-opts[hidden]{display:none}
.source pre.hl{color:#c8f5d0;padding-left:8px}
.source pre.hl .ul-cy{display:inline-block;width:3ch;margin-right:1.5ch;text-align:right;color:#3f8f52;user-select:none;-webkit-user-select:none}
.source pre.no-cy .ul-cy{display:none}
.source pre.no-cy{padding-left:16px}
.source .ul-mnemonic{color:#8dffa0}
.source .ul-directive,.source .ul-paste{color:#f08a6e}
.source .ul-labeldef,.source .ul-constdef{color:#e9c04e}
.source .ul-localdef,.source .ul-local{color:#d9b96a}
.source .ul-hw{color:#6fd0c0}
.source .ul-number,.source .ul-pc{color:#f0b070}
.source .ul-string,.source .ul-char{color:#d4adf0}
.source .ul-function{color:#9ab8f5}
.source .ul-register{color:#b5f0a0}
.source .ul-operator,.source .ul-bracket,.source .ul-punct{color:#6fbf80}
.source .ul-comment{color:#5fa86e}
.source .ul-invalid{color:#ff9b85}
.source pre.hl [data-t]:not([data-t=comment]):not([data-t=operator]):not([data-t=punct]):not([data-t=bracket]){cursor:help}
.source-tip{position:absolute;z-index:5;max-width:min(440px,100%);background:#0b1a0f;color:#c8f5d0;border:1px solid #3f8f52;
  border-radius:4px;padding:8px 10px;font:17px/1.25 var(--mono);box-shadow:0 10px 24px rgba(0,0,0,.45);pointer-events:none}
.source-tip p{margin:0 0 4px}
.source-tip .ul-h b{color:#8dffa0;margin-right:6px}
.source-tip code{font:inherit;color:#e9c04e}
.source-tip .ul-flags,.source-tip .ul-dim{color:#7fbf8c}
.source-tip .ul-kind{color:#6fd0c0}
.source-tip .ul-here{color:#e9c04e}
.source-tip table{border-collapse:collapse;margin-top:4px}
.source-tip th{font-weight:400;color:#7fbf8c;text-align:left;padding:0 12px 0 0}
.source-tip td{padding:0 12px 0 0;white-space:nowrap}
.source-tip td.ul-n{text-align:right}
.source-tip tr.ul-cur td{color:#8dffa0}

/* on-screen keys for touch screens; direction keys sit as on a keyboard */
.pad{display:none;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:var(--s-4);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.pad button{font:26px/1 var(--mono);min-width:64px;min-height:56px;padding:0 14px;background:var(--paper);color:var(--paper-ink);
  border:2px solid var(--paper-edge);border-bottom-width:5px;border-radius:8px;cursor:pointer}
.pad button.wide{min-width:150px}
.pad button:active,.pad button.down{transform:translateY(2px);border-bottom-width:3px}
@media (pointer:coarse){.pad{display:flex}}
.cluster{display:inline-grid;grid-template-columns:repeat(3,auto);gap:4px;vertical-align:middle;margin-right:6px}
.cluster .gap{visibility:hidden;display:block}
.keys .cluster .gap{min-width:34px}
.pad .cluster{gap:8px}
.pad .cluster .gap{min-width:64px;min-height:56px}

/* the games: paper cards with the screen on top (built by showcase.js) */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
.card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card .shot{aspect-ratio:384/296;background:var(--glass);display:grid;place-items:center;overflow:hidden}
.card .shot img{width:100%;height:100%;object-fit:cover}
.card .shot span{font:26px var(--mono);color:var(--ph)}
.card .body{padding:var(--s-5) var(--s-6) var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);flex:1}
.card .tag{font:var(--fs-label)/1.2 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--paper-muted)}
.card h3{font-size:40px}
.card p{font-size:var(--fs-small)}
.card .twist{font-style:italic}
.card .play{margin-top:auto;align-self:flex-start}
.card.active{outline:4px solid var(--yel);outline-offset:4px}

/* how they're made */
.made-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.note-card{display:flex;flex-direction:column;gap:var(--s-3)}
.note-card h3{font-size:var(--fs-h3)}
.note-card p{font-size:var(--fs-small)}

@media (max-width:900px){
  .player-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  .cards,.made-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .card .body{padding:var(--s-4) var(--s-5) var(--s-5)}
  .card h3{font-size:34px}
}