/* 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}

.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{display:flex;align-items:center;justify-content:center;font-size:16px;padding:10px;min-width:55px;height:52px;min-height:52px}
.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}.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:is([aria-label="Drop"],[aria-label="Launch"],[aria-label="Undo"],[aria-label="Retry"],[aria-label="Flag / Reveal"]){font-size:9px}
.control-button.jump-control{font-size:9px;height:auto}
@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%}

/* Inline SVG TAPA GAME mark; no external image file is loaded. */
svg.brand-mark{display:block;width:32px;height:32px;flex:0 0 32px;image-rendering:pixelated}


/* Public descriptions stay readable without changing the arcade controls. */
.section-kicker{color:#b8afcc}

.game-guide{padding:26px 28px;margin:0 0 36px;border:2px solid #493951;background:#1c1725;box-shadow:inset 0 0 0 2px #0c0912,4px 4px #09070f}
.game-guide h2{font-size:14px;color:var(--yellow);text-transform:uppercase;margin:0 0 16px;overflow-wrap:anywhere}
.game-guide h2:not(:first-child){margin-top:28px}
.game-guide p,.game-guide li{font-family:ArcadeText,monospace;font-size:23px;line-height:1.4;color:#c4b6d4}
.game-guide p{margin:0}
.game-guide{margin-top:32px}
.game-guide ul{padding-left:24px;margin:0}
.game-guide li+li{margin-top:8px}
.related-games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.related-games .secondary-button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:14px;overflow-wrap:anywhere}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0;font-family:Pixel,monospace;font-size:8px;line-height:2;text-transform:uppercase}
.breadcrumb .text-button{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
.breadcrumb .text-button,.breadcrumb>span{font-family:inherit;font-size:inherit;line-height:inherit}
#breadcrumb-current,.breadcrumb>[aria-current="page"]{color:#c4b6d4}
body.play-mode .game-guide{display:none}
@media(max-width:640px){.game-guide{padding:22px 18px}.game-guide h2{font-size:11px;line-height:1.8}.game-guide p,.game-guide li{font-size:22px}.related-games{grid-template-columns:1fr;gap:12px}.related-games .secondary-button{font-size:8px;min-height:48px}.game-nav{gap:12px}.game-nav>#game-id{font-size:6px;max-width:100px;text-align:right;flex-shrink:0}.breadcrumb{font-size:7px;gap:8px}}

/* Lobby search: keep the count and search together, with touch-sized controls. */
#hall .section-heading{flex-wrap:wrap;gap:16px}
.lobby-tools{display:flex;align-items:center;gap:16px;min-width:0}
.lobby-tools .machine-count{white-space:nowrap;max-width:none;flex-shrink:0}
.game-search{position:relative;width:220px;min-width:0}
.game-search input{appearance:none;-webkit-appearance:none;display:block;width:100%;min-width:0;height:46px;border:2px solid #675184;border-radius:0;background:#191522;color:var(--text);font-family:ArcadeText,monospace;font-size:22px;line-height:1.2;padding:8px 44px 8px 12px;box-shadow:inset 2px 2px #07070e,3px 3px #07070e}
.game-search input::placeholder{color:#a99bbd;opacity:1}
.game-search input:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-color:var(--purple)}
.game-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.game-search button{position:absolute;right:2px;top:1px;width:44px;height:44px;background:transparent;color:var(--purple);font-family:ArcadeText,monospace;font-size:30px;line-height:1;touch-action:manipulation}
.game-search button:hover{color:var(--lime)}
.game-search-status{margin:-6px 0 16px;color:#b8afcc;font-size:20px}
.game-search-empty{padding:26px 20px;border:2px solid #3f354f;background:#191522;color:#c0afd3;font-size:22px}
@media(max-width:800px){.lobby-tools{width:100%;justify-content:space-between}.game-search{width:240px}}
@media(max-width:640px){.lobby-tools{gap:12px}.lobby-tools .machine-count{font-size:6px;text-align:left}.game-search{flex:1;width:auto}.game-search input{font-size:20px}}
@media(max-width:360px){.lobby-tools{gap:10px}.lobby-tools .machine-count{font-size:5px}.game-search input{font-size:18px;padding-left:10px}}

/* Results and elapsed times stay readable without stretching narrow score panels. */
.score-panel #best-label{display:inline;margin:0}.score-panel strong{overflow-wrap:anywhere;font-size:clamp(15px,2.2vw,27px)}
@media(max-width:640px){.score-panel strong{font-size:clamp(14px,4vw,24px)}}

/* Desktop play uses the full content width, with records and actions below. */
.machine-credit{display:contents}
.game-actions{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-auto-rows:56px;align-items:stretch;gap:12px;min-width:0;max-width:100%}
.game-actions .secondary-button{display:flex;align-items:center;justify-content:center;width:100%;height:56px;min-height:56px;min-width:0;margin:0;padding:8px 10px;font-size:8px;line-height:1.8;text-align:center;white-space:normal;overflow-wrap:anywhere}
.game-details{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px 30px;padding:12px 22px;background:#211a2e;border-top:2px solid #4e3a62}
.game-details>div{min-width:80px;max-width:200px}
.game-details span{display:block;font-family:Pixel,monospace;font-size:8px;line-height:2;color:#b7a5c9;text-transform:uppercase}
.game-details strong{display:block;font-family:Pixel,monospace;font-size:18px;line-height:1.8;font-weight:400;color:var(--yellow);overflow-wrap:anywhere}
.game-details .game-next{display:flex;align-items:center;gap:14px}
.game-details canvas{display:block;width:80px;height:80px;image-rendering:pixelated}
.immersive-machine .game-details{gap:12px 24px;padding:6px 16px}
.immersive-machine .game-details canvas{width:48px;height:48px}
.immersive-machine .game-details strong{font-size:16px}
.machine-credit>span:last-child{margin-left:auto}
.game-about>summary{list-style:none}
.game-about>summary::-webkit-details-marker{display:none}
@media(max-width:640px){.game-about>summary{pointer-events:none}.game-sidebar .game-actions{grid-column:1 / -1;width:100%}}
@media(max-width:480px){.game-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.game-actions #instructions-toggle{grid-column:1 / -1}}
@media(min-width:641px){
  .game-view .play-layout{display:flex;flex-direction:column;gap:0}
  .game-view .game-machine{width:100%;min-width:0;--desktop-play-height:clamp(320px,calc(100dvh - 260px),740px)}
  .game-machine:not(.immersive-machine) .canvas-wrap{
    max-width:none;width:100%;height:var(--desktop-play-height);margin:0;
    display:flex;align-items:center;justify-content:center;
    background:repeating-linear-gradient(0deg,#ae8aff03 0 1px,transparent 1px 4px),#12121c;
  }
  .game-machine:not(.immersive-machine) #game-canvas{
    width:min(100%,calc(var(--desktop-play-height) * .9130434783));height:auto;flex-shrink:0;
  }
  .game-machine:not(.immersive-machine) .canvas-wrap[data-desktop-view]{height:clamp(520px,calc(100dvh - 160px),900px)}
  .game-machine:not(.immersive-machine) .machine-bottom{
    display:flex;align-items:center;flex-wrap:wrap;gap:20px;padding:18px 22px;
    border-top:2px solid #4e3a62;background:#211a2e;
  }
  .machine-bottom .machine-credit{
    display:flex;align-items:center;gap:9px;flex:0 0 100%;order:3;min-width:0;
    margin:0;padding-top:12px;border-top:1px solid #4e3a62;font-size:7px;line-height:1.8;
  }
  .machine-bottom .score-panel{
    display:flex;align-items:center;gap:16px;flex:0 1 auto;order:0;
    min-width:0;max-width:100%;padding:8px 14px;border:2px solid #4b3b5d;
    box-shadow:inset 1px 1px #ffffff08;background:#191522;
  }
  .machine-bottom .score-panel>div{min-width:0;max-width:200px;padding:0;width:auto}
  .machine-bottom .score-panel>div+div{padding:0;border:0}
  .machine-bottom .score-panel span,.machine-bottom .game-details span{margin-bottom:4px;font-size:8px;line-height:2}
  .machine-bottom .score-panel strong,.machine-bottom .game-details strong{display:block;font-size:18px;line-height:1.8;font-weight:400;text-shadow:none}
  .machine-bottom .score-panel small{float:none;display:inline;margin-left:5px;font-family:Pixel,monospace;font-size:8px;line-height:inherit}
  .machine-bottom .game-actions{display:grid;flex:0 1 440px;width:440px;max-width:100%;min-width:0;order:2;margin-left:auto}
  .machine-bottom .game-details{order:1;border:2px solid #4b3b5d;padding:8px 14px;gap:12px 16px;min-width:0;max-width:100%;flex:0 1 auto;background:#191522;box-shadow:inset 1px 1px #ffffff08}
  .machine-bottom .game-details>div{min-width:60px}
  .machine-bottom .score-panel,.machine-bottom .game-details{min-height:76px;align-self:stretch}
  .machine-bottom:has(.game-next) .score-panel,.machine-bottom:has(.game-next) .game-details{min-height:100px}
  .machine-bottom .game-actions .secondary-button{width:100%;height:56px;min-height:56px;padding:8px 10px;font-size:8px}
  .machine-bottom #fullscreen-button{margin-bottom:0}
  .game-view .game-sidebar{display:block;margin-top:20px;min-width:0}
  .game-sidebar .instruction-panel{margin:0;padding:22px 24px}
  #instructions-toggle[aria-expanded="true"]{background:#493257;border-color:var(--purple)}
  .game-about>summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;cursor:pointer}
  .game-about>summary h2{margin:0;min-width:0}
  .game-about>summary::after{content:'+';font-family:Pixel,monospace;font-size:16px;color:var(--purple);flex-shrink:0}
  .game-about[open]>summary::after{content:'−'}
  .game-about-content{padding-top:16px}
  #instructions-toggle:focus-visible,.game-actions button:focus-visible,.game-about>summary:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
}

/* Keep the lobby compatibility note on the right after removing the left motto. */
.hall-bottom{justify-content:flex-end}

/* Crawlable page links share the existing square pixel controls. */
.lobby-pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin:32px 0 18px}
.pixel-tabs{display:flex;align-items:center;flex-wrap:wrap;height:auto;gap:12px}
.lobby-pagination .secondary-button,.pixel-tabs .secondary-button,.pagination-disabled{min-height:44px;min-width:44px;width:auto;padding:12px 16px;display:inline-flex;align-items:center;justify-content:center;font-size:9px;text-decoration:none}
.lobby-pagination [aria-current="page"],.pixel-tabs [aria-current="page"]{background:#584174;border-color:var(--lime);color:var(--lime)}
.pagination-disabled{color:var(--muted);opacity:.5;font-family:Pixel;font-size:9px}
@media(max-width:640px){.hero h1{font-size:clamp(20px,6vw,26px)}.lobby-pagination,.pixel-tabs{gap:8px}.lobby-pagination .secondary-button,.pixel-tabs .secondary-button,.pagination-disabled{font-size:7px;padding:12px 10px}}
/* Keep page numbers compact while preserving reachable links and touch targets. */
.lobby-pagination{height:auto;flex-wrap:nowrap}
.pagination-pages{display:inline-flex;align-items:center;gap:8px}
.lobby-pagination .pagination-pages .secondary-button{padding-inline:8px}
.pagination-ellipsis{display:inline-flex;justify-content:center;width:16px;font-family:ArcadeText,monospace;font-size:24px;color:var(--muted)}
@media(max-width:640px){
  .lobby-pagination{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;max-width:360px;margin-inline:auto}
  .pagination-pages{grid-column:1/-1;grid-row:1;justify-content:center;gap:4px}
  .pagination-previous{grid-column:1;grid-row:2}
  .pagination-next{grid-column:2;grid-row:2}
  .lobby-pagination .pagination-pages .secondary-button{min-width:44px;padding-inline:6px}
}