/* The arcade floor is a showroom wall of stacked CRTs. Each card is a TV; the bezel says the
   category: beige plastic for classics, gloss black for modern, brushed metal for pinball. */
.cabinet-section { margin:36px; padding:32px; background:radial-gradient(ellipse at 50% 0,#2b2620,#15130f 70%); border-radius:18px; color:#efe6dc; scroll-margin-top:24px; }
.cabinet-section .sec-head h2 { color:#f4ecdf; }
.cabinet-section .rule { background:#3b352d; }
.cab-filters { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 12px; }
.cab-filters[hidden], .cab-card[hidden] { display:none; }
.cab-filters button { border:1px solid #4a4239; border-radius:999px; padding:10px 17px; background:transparent; color:#d4c8b7; font:600 12px var(--font); cursor:pointer; }
.cab-filters button span { margin-left:7px; opacity:.65; }
.cab-filters button[aria-pressed="true"] { background:#f0e6d4; color:#1a1713; border-color:#f0e6d4; }
.cab-filters button:focus-visible { outline:2px solid #f0c27a; outline-offset:3px; }
.cab-status { font:11px var(--mono); color:#9c8f7d; margin:0 0 28px; }
.cabinet-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(219px,1fr)); gap:20px 14px; align-items:start; }
.cab-card { display:block; min-width:0; color:#efe6dc; text-decoration:none; }
.cab-machine { --bezel:linear-gradient(170deg,#e7dfcd,#cfc4ad 60%,#b9ad94); --label:#3b342b;
  display:flex; flex-direction:column; padding:9px 9px 0; border-radius:13px 13px 9px 9px; background:var(--bezel);
  box-shadow:inset 0 2px 0 #ffffff55,inset 0 -3px 0 #0003,0 7px 0 -2px #0b0a08,0 12px 18px #000a; transition:transform .2s; }
.cab-modern .cab-machine { --bezel:linear-gradient(170deg,#3d4146,#1b1d21 55%,#0f1113); --label:#c9ccd0; }

.cab-card:nth-child(3n+1) .cab-machine { transform:rotate(-.8deg); }
.cab-card:nth-child(4n+2) .cab-machine { transform:rotate(.7deg); }
.cab-screen { position:relative; order:1; aspect-ratio:4/3; overflow:hidden; border-radius:12% / 14%; background:#05070a;
  box-shadow:0 0 0 3px #0c0d0f,0 0 0 4px #ffffff22,inset 0 0 16px #000; transition:box-shadow .2s; }
.cab-screen img { width:100%; height:100%; display:block; object-fit:cover; transform:scale(1.03); filter:saturate(.92) brightness(.88); transition:filter .25s; }
/* Frame the tank and bridges, excluding the poster's title, caption and map label. */
.cab-screen img.cab-art-bunker { position:absolute; width:160%; height:160%; max-width:none; right:0; top:-30%; }
.cab-screen::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:repeating-linear-gradient(0deg,#0000 0 2px,#0000001f 2px 3px),radial-gradient(ellipse at 32% 22%,#ffffff1c,#0000 40%),radial-gradient(ellipse at center,#0000 62%,#0007 100%); }
/* Matched pinball covers use the same landscape slot and title row as other cabinets. */
.cab-card.cab-pinball .cab-machine { --label:#e5e9eb; --bezel:linear-gradient(160deg,#42494c,#252b2e); transform:none; border-radius:9px; }
.cab-pinball .cab-screen { aspect-ratio:4/3; border-radius:5px; background:#071017; }
.cab-pinball .cab-screen img { position:absolute; inset:0; object-fit:cover; object-position:center; transform:none; filter:none; }
.cab-pinball .cab-screen::after { content:none; }
.cab-kind { position:absolute; z-index:1; top:9px; left:9px; background:#071017df; padding:4px 7px; border:1px solid #ffffff26; border-radius:4px; color:var(--cab-accent); font:600 9px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.cab-pinball .cab-marquee { height:42px; box-sizing:border-box; padding:10px 2px 11px; }
.cab-pinball .cab-marquee h3 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cab-pinball .cab-marquee::after { content:none; }
.cab-marquee { order:2; display:flex; flex-shrink:0; align-items:center; justify-content:space-between; gap:8px; padding:10px 2px 11px; }
.cab-marquee h3 { flex:1; min-width:0; color:var(--label); font:700 13px/1.35 var(--mono); letter-spacing:.04em; text-transform:uppercase; margin:0; white-space:normal; overflow-wrap:anywhere; }
.cab-marquee::after { content:""; flex:none; width:6px; height:6px; border-radius:50%; background:#4a1d17; box-shadow:inset 0 1px 1px #0008; transition:background .2s,box-shadow .2s; }
.cab-copy { text-align:center; padding-top:12px; }
.cab-copy .hi { color:#a89a87; font-size:10.5px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cab-copy .cab-board { color:var(--cab-accent); margin-top:3px; font-size:11px; }
.cab-copy .cab-board.none, .cab-copy .cab-board .you { color:#a89a87; }
.cab-card:focus-visible { outline:3px solid #f0c27a; outline-offset:6px; border-radius:6px; }
.cab-card:focus-visible .cab-marquee::after { background:var(--cab-accent); box-shadow:0 0 8px var(--cab-accent); }
@media (hover:hover) {
  .cab-card:hover .cab-machine { transform:translateY(-4px) rotate(0); }
  .cab-card:hover .cab-screen img { filter:saturate(1.08) brightness(1.03); animation:crt-on .3s ease-out; }
  .cab-card:hover .cab-screen { box-shadow:0 0 0 3px #0c0d0f,0 0 16px color-mix(in srgb,var(--cab-accent) 45%,transparent),inset 0 0 16px #000; }
  .cab-card.cab-pinball:hover .cab-machine { transform:translateY(-3px); }
  .cab-card.cab-pinball:hover .cab-screen img { animation:none; filter:none; transform:none; }
  .cab-card:hover .cab-marquee::after { background:var(--cab-accent); box-shadow:0 0 8px var(--cab-accent); }
}
@keyframes crt-on { 0% { transform:scale(1.03,.85); filter:brightness(1.5); } 60% { transform:scale(1.03); } }
@media(max-width:760px) {
  .cabinet-section { margin:24px 14px; padding:23px 16px; }
  .cabinet-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px; }
  .cab-machine { padding:6px 6px 0; border-radius:10px 10px 7px 7px; }
  .cab-marquee h3 { font-size:11px; }
  .cab-copy .hi { display:none; }
}
@media(max-width:380px) { .cabinet-section { padding:20px 12px; } .cabinet-grid { gap:14px 8px; } .cab-filters button { padding:9px 12px; } }
@media(prefers-reduced-motion:reduce) { .cab-machine, .cab-screen img { transition:none; animation:none !important; } }

/* Cabinet wisdom: printed "how to play" cards, the kind screwed to a control panel, in a
   carousel that the two arcade buttons cycle through. */
.strategy { margin:0 36px 32px; padding:32px; border-radius:18px; background:radial-gradient(ellipse at 50% 0,#2b2620,#15130f 70%); }
.strategy-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.strategy-head h2 { color:#f4ecdf; }
.wis-nav { display:flex; align-items:center; gap:12px; }
.wis-count { font:11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#9c8f7d; min-width:9.5ch; text-align:right; }
.wis-btn { position:relative; width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer; color:#fff3e8; font:700 18px/1 var(--font);
  background:radial-gradient(circle at 34% 28%,#ff9a7a,#d9402a 52%,#8f2216); box-shadow:0 5px 0 #5a140c,0 7px 10px #0009,inset 0 2px 1px #ffffff55;
  transition:transform .08s,box-shadow .08s; }
.wis-btn::before { content:""; position:absolute; inset:-5px; z-index:-1; border-radius:50%; background:linear-gradient(#3a3e43,#15181c); box-shadow:inset 0 1px 0 #ffffff26; }
.wis-btn span { display:block; transition:transform .2s; }
.wis-btn:active, .wis-btn.is-pressed { transform:translateY(4px); box-shadow:0 1px 0 #5a140c,0 2px 4px #0009,inset 0 2px 1px #ffffff40; }
.wis-btn.is-pressed span { animation:wis-nudge .35s ease-out; }
.wis-btn[data-dir="-1"].is-pressed span { animation-name:wis-nudge-back; }
.wis-btn:focus-visible { outline:2px solid #f0c27a; outline-offset:7px; }
@media (hover:hover) { .wis-btn[data-dir="1"]:hover span { transform:translateX(2px); } .wis-btn[data-dir="-1"]:hover span { transform:translateX(-2px); } }
@keyframes wis-nudge { 40% { transform:translateX(6px); } }
@keyframes wis-nudge-back { 40% { transform:translateX(-6px); } }
.wis-track { --wis-gap:20px; display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2 * var(--wis-gap)) / 3); gap:var(--wis-gap);
  margin:0 -12px; padding:14px 12px 22px; scroll-padding:0 12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; }
.wis-track::-webkit-scrollbar { display:none; }
.wis-track:focus-visible { outline:2px solid #f0c27a; outline-offset:-2px; border-radius:8px; }
.tip { position:relative; display:flex; flex-direction:column; min-width:0; scroll-snap-align:start; border-radius:6px; overflow:hidden; color:#2b261f;
  background:linear-gradient(170deg,#efe8d6,#ddd3bd); box-shadow:inset 0 1px 0 #fff9,inset 0 -2px 0 #0002,0 8px 16px #0009; }
.tip:nth-child(odd) { transform:rotate(-.5deg); }
.tip:nth-child(even) { transform:rotate(.4deg); }
.tip::before, .tip::after { content:""; position:absolute; bottom:9px; width:9px; height:9px; border-radius:50%;
  background:linear-gradient(45deg,#0000 42%,#5e5547 42% 58%,#0000 58%),radial-gradient(circle at 35% 30%,#d9d2c4,#8e8576); box-shadow:0 1px 1px #0005; }
.tip::before { left:9px; }
.tip::after { right:9px; }
.tip-game { display:flex; justify-content:space-between; gap:10px; padding:9px 20px; font:700 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:#15130f; background:var(--cab-accent); box-shadow:inset 0 -2px 0 #0002; }
.tip-game::after { content:"How to play"; flex:none; opacity:.7; }
.tip-body { display:flex; flex-direction:column; flex:1; padding:0 20px 22px; }
.tip h4 { font-size:15px; line-height:1.3; margin:16px 0 8px; color:#1f1b16; }
.tip p { font-size:12.5px; line-height:1.55; color:#4a4237; margin:0 0 14px; }
.tip ul { list-style:none; margin:auto 0 0; padding:8px 0 0; border-top:2px solid #2b261f; }
.tip ul::before { content:attr(data-label); display:block; margin-bottom:3px; font:700 9px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:#2b261f; }
.tip li { display:flex; align-items:baseline; gap:6px; padding:3px 0; font:11px var(--mono); color:#3b342b; }
.tip li::after { content:""; order:1; flex:1; min-width:12px; border-bottom:1px dotted currentColor; opacity:.5; }
.tip li b { order:2; color:#1f1b16; font-weight:600; white-space:nowrap; }
.tip-play { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:6px 11px 6px 8px; border-radius:3px; background:#15130f; color:#ff7a55;
  font:700 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; transition:background .2s,color .2s; }
.tip-play::before { content:""; width:3px; height:12px; border-radius:2px; background:#ff5a36; box-shadow:0 0 6px #ff5a36; }
.tip-play:focus-visible { outline:2px solid #15130f; outline-offset:3px; }
@media (hover:hover) { .tip-play:hover { background:var(--cab-accent); color:#15130f; } .tip-play:hover::before { background:#15130f; box-shadow:none; } }
@media(max-width:1100px) { .wis-track { grid-auto-columns:calc((100% - var(--wis-gap)) / 2); } }
@media(max-width:700px) {
  .strategy { margin:0 14px 24px; padding:23px 16px; }
  .wis-track { --wis-gap:14px; grid-auto-columns:88%; margin:0 -16px; padding:12px 16px 20px; scroll-padding:0 16px; }
  .wis-count { display:none; }
}
@media(prefers-reduced-motion:reduce) { .wis-btn, .wis-btn span { transition:none; animation:none !important; } }

/* Real gameplay covers keep their color and fill the screen without letterboxing. */
.cab-jump-preview .cab-screen img {
  position:absolute; top:0; right:0; bottom:0; left:0;
  object-fit:cover; object-position:center; transform:none; filter:none;
  transition:transform .4s ease;
}
.cab-jump-preview .cab-screen::after { content:none; }
.cab-card.cab-jump-preview:hover .cab-screen img,
.cab-card.cab-jump-preview:focus-visible .cab-screen img { animation:none; filter:none; transform:scale(1.035); }
@media(prefers-reduced-motion:reduce) {
  .cab-card.cab-jump-preview .cab-screen img,
  .cab-card.cab-jump-preview:hover .cab-screen img,
  .cab-card.cab-jump-preview:focus-visible .cab-screen img { transition:none; transform:none; }
}