/* Shared pixel UI: display lettering, terminal copy, and tactile arcade controls. */
@font-face{font-family:ArcadeText;src:url('./assets/arcade-text.ttf') format('truetype');font-display:swap}
body{font-family:ArcadeText,monospace;font-size:22px;line-height:1.4}
button{border-radius:0}
h1,h2,h3{font-family:Pixel,monospace;font-weight:400;line-height:1.7}
.nav-link{font-family:Pixel,monospace;font-size:9px;text-transform:uppercase;line-height:1.8}
.sound-button{font-family:Pixel,monospace;font-size:7px;box-shadow:inset 2px 2px #ffffff0d,3px 3px #07070e;min-height:42px}
.hero p{font-size:26px;letter-spacing:1px;color:#dcd1ed;line-height:1.3}
.hero-tag{font-size:19px;line-height:1.3;padding:5px 11px}
.section-heading h2{font-size:17px;text-transform:uppercase;letter-spacing:0;line-height:1.7}
.small-cross{font-family:monospace}
.card-heading h3{font-size:13px;letter-spacing:0;line-height:1.7;text-transform:uppercase}
.card-heading h3[style]{font-size:11px!important}
.card-heading{align-items:flex-start}
.card-body{padding:22px 20px 18px}
.card-body p{font-size:22px;line-height:1.3;min-height:57px;color:#b8afcc;margin:13px 0 18px}
.card-footer{font-size:17px;line-height:1.4;color:#958aa8}
.card-footer span:last-child{font-family:Pixel,monospace;font-size:7px;line-height:2.2}
.game-card{border:2px solid #3f354f;box-shadow:inset 0 0 0 2px #0c0a13,4px 4px #08070d}
.game-card:hover{box-shadow:inset 0 0 0 2px #0c0a13,4px 4px #08070d,0 0 20px #ae8aff0a}
.card-screen{background:#14111c}
.card-screen:before{content:'';position:absolute;left:5px;top:5px;right:5px;bottom:5px;border:1px solid #b08cff16;pointer-events:none;z-index:1}
.hall-bottom{font-size:20px}
.footer{font-size:19px}
.game-nav .text-button{font-family:Pixel,monospace;font-size:8px;text-transform:uppercase;line-height:2}
.game-heading{position:relative;padding:24px 28px 19px;min-height:140px;border:2px solid #7d5f9e;background:repeating-linear-gradient(0deg,#00000012 0 1px,transparent 1px 4px),linear-gradient(100deg,#332343,#211a31);box-shadow:inset 0 0 0 4px #100e19,inset 0 0 0 5px #7d5f9e44,5px 5px #07070d;margin:8px 0 28px}
.game-heading:before{content:'';position:absolute;top:12px;left:15px;right:15px;height:4px;background:repeating-linear-gradient(90deg,#d6b5fb 0 4px,transparent 4px 28px,#f7d875 28px 32px,transparent 32px 56px);opacity:.8}
.game-heading h1{font-size:26px;color:var(--yellow);text-shadow:3px 3px #7251a5;letter-spacing:0;margin:12px 0 0;text-transform:uppercase}
.game-heading .eyebrow{color:#c4addd;font-size:8px;letter-spacing:1px}
.free-tag{background:#191624;border:1px solid #d5f88b65;box-shadow:2px 2px #0a0911;font-size:8px;white-space:nowrap}
.game-machine{border:2px solid #675084;box-shadow:inset 0 0 0 2px #100d18,5px 5px #07070d}
.machine-top{padding:9px 20px;background:#211a2e;border-bottom:2px solid #4d3d61;min-height:51px;gap:16px}
.machine-top .pixel{font-family:ArcadeText,monospace;font-size:21px;line-height:1.1;color:#c5aadf;max-width:75%}
.text-button{font-family:Pixel,monospace;font-size:8px;line-height:2;text-transform:uppercase}
.machine-top .text-button{flex-shrink:0;font-size:8px;color:#c3acd8;padding:8px;border:1px solid #644d7c;background:#2c223b;box-shadow:2px 2px #0b0811}
.machine-top .text-button:disabled{opacity:.4}
.game-overlay{backdrop-filter:none;background:#100c19eb;line-height:1.5;border:8px solid #21192c;box-shadow:inset 0 0 0 1px #6c548244}
.game-overlay h2{font-size:20px;text-transform:uppercase;color:var(--yellow);text-shadow:2px 2px #71518e;margin:24px 0 15px;line-height:1.7}
.game-overlay p{font-family:ArcadeText,monospace;font-size:23px;color:#c0afd3;line-height:1.35;margin-bottom:25px;max-width:300px}
.primary-button,.secondary-button,.control-button{font-family:Pixel,monospace;font-size:9px;text-transform:uppercase;line-height:1.8;letter-spacing:0;border-width:2px;border-style:solid;position:relative;transition:background .12s,transform .12s,box-shadow .12s;min-height:50px}
.primary-button{padding:16px 26px;border-color:#e5ffb0 #8ca855 #8ca855 #e5ffb0;box-shadow:inset 2px 2px #f5ffd04d,inset -2px -2px #72933866,4px 4px #628137;font-weight:400}
.primary-button:hover{background:#e3ffa1;box-shadow:inset 2px 2px #ffffff66,inset -2px -2px #72933866,4px 4px #628137,0 0 22px #d5f88b1a}
.primary-button:active{transform:translate(3px,3px);box-shadow:inset 2px 2px #76984466,1px 1px #628137}
.secondary-button,.control-button{border-color:#9d7db9 #473653 #473653 #9d7db9;background:#32233f;box-shadow:inset 2px 2px #e0b4ff12,inset -2px -2px #120d1c88,3px 3px #0b0811;color:#e2cef7}
.secondary-button:hover,.control-button:hover{background:#493257;border-color:#c2a0e0 #755588 #755588 #c2a0e0}
.secondary-button:active,.control-button:active{transform:translate(2px,2px);box-shadow:inset 2px 2px #140b2155,1px 1px #0b0811;background:#513864}
.control-button{font-size:16px;padding:10px;min-width:55px}
.control-button:last-child{font-size:11px}
.jump-control,.jump-control:last-child{font-size:9px;line-height:2;padding:14px 10px;width:88%;min-height:57px}
.touch-controls{padding:16px;background:#1d1729;border-top:2px solid #4e3a62;gap:12px}
.score-panel,.instruction-panel{border:2px solid #493951;background:#1c1725;box-shadow:inset 0 0 0 2px #0c0912,4px 4px #09070f}
.score-panel>div{padding:23px 22px}
.score-panel>div+div{border-color:#493951}
.score-panel span{font-family:Pixel,monospace;font-size:8px;line-height:2.2;color:#b7a5c9;margin-bottom:15px;text-transform:uppercase}
.score-panel small{font-family:ArcadeText,monospace;font-size:17px;line-height:1.2;color:#9683ac}
.score-panel strong{font-size:27px;text-shadow:2px 2px #6e532f}
.score-panel>div+div strong{text-shadow:2px 2px #4a335e}
.instruction-panel{margin:24px 0;padding:23px 22px}
.instruction-panel .eyebrow{font-size:7px;color:#9479ad}
.instruction-panel h3{font-size:12px;text-transform:uppercase;margin:12px 0 16px;color:#e6d8f2}
.instruction-panel p{font-family:ArcadeText,monospace;font-size:23px;line-height:1.3;color:#c4b6d4;margin:0 0 18px}
.keyboard-hint{font-family:ArcadeText,monospace;font-size:20px;line-height:1.35;background:#130f1c;border:1px solid #635075;border-left:3px solid var(--purple);padding:11px;color:#dfc6f3}
.game-tip{font-family:ArcadeText,monospace;font-size:20px;line-height:1.3;color:#a590b6}
.records-view h1{font-size:27px;text-transform:uppercase;color:var(--yellow);text-shadow:2px 2px #7251a5}
.records-view>p{font-size:24px;color:#baaacd}
.record-row{border:2px solid #493951;font-size:24px;background:#1c1725;box-shadow:3px 3px #09070f}
.record-row>div{line-height:1.3}.record-row small{font-size:17px}.record-row button{font-family:Pixel,monospace;font-size:8px;text-transform:uppercase;min-height:44px;padding:8px;color:var(--lime)}
@media(max-width:900px){.game-heading h1{font-size:22px}.game-heading{padding:24px 22px 19px}.card-heading h3{font-size:11px}.card-body p{font-size:21px}.instruction-panel{padding:20px 16px}.instruction-panel h3{font-size:10px}.score-panel span{font-size:7px}.score-panel small{float:none;display:inline-block;margin-left:5px}}
@media(max-width:640px){body{font-size:22px}.header-inner{gap:21px}.nav-link{font-size:7px}nav{gap:16px}.sound-button{padding:7px 10px}.hero p{font-size:25px}.hero-tag{font-size:17px}.hero-bottom{gap:12px}.section-heading{align-items:flex-end}.section-heading h2{font-size:12px}.machine-count{font-size:5px;line-height:1.8;max-width:102px;text-align:right}.small-cross{font-size:14px;margin-left:6px}.card-body{padding:16px 12px 13px}.card-heading h3{font-size:10px;line-height:1.8}.card-heading h3[style]{font-size:9px!important}.card-body p{font-size:21px;line-height:1.25;min-height:80px;margin:11px 0 16px}.card-footer{font-size:16px}.card-footer span:last-child{font-size:6px}.hall-bottom{font-size:20px;text-align:center}.footer{font-size:17px;gap:16px}.game-heading{min-height:126px;padding:28px 18px 17px;gap:12px;align-items:flex-start;margin:4px 0 20px}.game-heading h1{font-size:18px;line-height:1.6;max-width:240px}.game-heading .eyebrow{font-size:6px;letter-spacing:0}.game-heading .free-tag{font-size:6px;padding:8px 6px;margin-top:15px}.game-nav .text-button{font-size:7px}.machine-top{padding:10px 12px;gap:10px;min-height:47px}.machine-top .pixel{font-size:19px;max-width:75%}.machine-top .text-button{font-size:6px;padding:7px}.game-overlay{border-width:5px;padding:18px}.game-overlay h2{font-size:17px;line-height:1.7}.game-overlay p{font-size:23px;max-width:270px}.touch-controls{padding:14px 12px;gap:10px}.control-button{min-width:48px;min-height:48px;padding:9px}.control-button:last-child{font-size:10px}.jump-control,.jump-control:last-child{font-size:8px;padding:14px 8px;width:95%}.score-panel>div{padding:18px 14px}.score-panel span{font-size:7px;margin-bottom:12px}.score-panel strong{font-size:24px}.game-sidebar{gap:20px}.instruction-panel{margin:0;padding:21px 18px}.instruction-panel h3{font-size:12px}.instruction-panel p{font-size:23px}.keyboard-hint{font-size:20px}.game-tip{font-size:18px}.secondary-button{font-size:8px}.record-row{font-size:22px}.records-view h1{font-size:23px}}
@media(max-width:360px){.header-inner{gap:12px;padding:0 12px}.header-inner .brand{font-size:7px}nav{gap:12px}.nav-link{font-size:6px}.section-heading h2{font-size:10px}.machine-count{font-size:4px;max-width:85px}.card-heading h3{font-size:9px}.card-body{padding:14px 10px}.card-body p{font-size:20px;min-height:95px}.card-footer{font-size:15px}.game-heading h1{font-size:16px;max-width:182px}.score-panel span{font-size:6px}.jump-control,.jump-control:last-child{font-size:7px}.hero-tag{font-size:17px}}
/* Direction controls share a size; only word labels use smaller lettering. */
.control-button:last-child{font-size:16px}
.control-button[aria-label="Drop"]{font-size:9px}
.control-button.jump-control{font-size:9px}
@media(max-width:640px){.control-button.jump-control{font-size:8px}}
@media(max-width:360px){.control-button.jump-control{font-size:7px}}

/* The lobby leads directly from the marquee to game selection. */
#hall .section-heading{margin-top:35px}
@media(max-width:640px){#hall .section-heading{margin-top:28px}}

/* Preview scenes and card screens share one ratio on desktop and mobile. */
.card-screen{height:auto;aspect-ratio:3 / 2;box-sizing:content-box}
.card-screen canvas{display:block;width:100%;height:100%}