/* HABB Game Room, 2026-10-22, third pass: the house menu.
   The object is the printed menu of a taproom called Brews & Blues. Cream stock, black ink, one navy ink
   from the crest. Rows with dotted leaders like a draft list. The only pictures are the games' own screens.
   Two families: Zilla Slab (setting, headings) and Oswald (menu heads, buttons). Each game keeps its own
   face for its own name and nothing else. Square plates. No dark mode, no glow, no gradients, no cards. */
@font-face{font-family:'HubOswald';src:url('/fonts/oswald.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Zilla';src:url('/fonts/site-zilla-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Zilla';src:url('/fonts/site-zilla-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Zilla';src:url('/fonts/site-zilla-700.woff2') format('woff2');font-weight:700;font-display:swap}
:root{
  --paper:#f1e9d6; --paper-2:#e8dec6; --ink:#1c1915; --ink-2:#4a4237; --ink-3:#6b6253; --rule:#1c1915;
  --navy:#1d3466; --navy-2:#142548; --stamp:#9a2b1c;
  --label:'HubOswald','Arial Narrow',sans-serif; --read:'Zilla',Rockwell,serif;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--read);font-size:18px;line-height:1.55;min-height:100vh}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--stamp)}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
img{max-width:100%;height:auto}
p,li,h1,h2,h3{text-wrap:pretty}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:9;font-family:var(--label)}
.skip:focus{left:12px}

/* plates: stamped ink, square */
.plate{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:10px 18px;
  font-family:var(--label);font-size:16px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;line-height:1.1;
  color:var(--ink);background:transparent;border:2px solid var(--ink)}
.plate:hover{background:var(--ink);color:var(--paper)}
.plate.go{background:var(--navy);border-color:var(--navy);color:#f6f0e2;font-size:18px;min-height:52px;padding:12px 24px}
.plate.go:hover{background:var(--navy-2);color:#fff}
.plate.go::before{content:"";border-left:.6em solid currentColor;border-top:.36em solid transparent;border-bottom:.36em solid transparent}
.txt{font-size:17px}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1120px;margin:0 auto;padding:14px 16px 10px;border-bottom:3px double var(--rule)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--label);font-size:21px;letter-spacing:.08em;text-transform:uppercase}
.brand img{width:44px;height:44px;flex:0 0 auto}
.top nav{display:flex;gap:18px}
.top nav a{font-family:var(--label);font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:10px 0}
.top nav a:hover{color:var(--stamp)}
.top nav a,.brand{white-space:nowrap}
@media(max-width:480px){.brand{font-size:16px}.brand img{width:36px;height:36px}.top nav{gap:14px}.top nav a{font-size:14px}.top nav .wide{display:none}}
.crumbs{max-width:1120px;margin:0 auto;padding:4px 16px 0;font-size:15px;color:var(--ink-3)}
.crumbs a{color:var(--ink-2);display:inline-block;padding:10px 2px}
main{max-width:1120px;margin:0 auto;padding:0 16px 40px}

/* menu heads: a double rule and a set heading, like a printed list */
.sec{margin-top:40px}
.sec>h2,.h2{font-family:var(--read);font-weight:700;font-size:31px;line-height:1.1;letter-spacing:0;color:var(--ink);
  margin:0 0 6px;padding:0 0 8px;border-bottom:3px double var(--rule)}
.sec p+p{margin-top:12px}
.lede{font-size:21px;line-height:1.45;text-wrap:balance}
.pitch{font-size:21px;line-height:1.45}
.blurb{font-style:italic;color:var(--ink-2);margin:6px 0 4px}

/* game page: name in the game's face, the words, play; then the real screen */
.gtop{display:grid;grid-template-columns:1fr;gap:18px;padding-top:18px}
@media(min-width:900px){.gtop{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:34px;align-items:start}}
.gtitle{font-weight:400;font-size:clamp(44px,8vw,76px);line-height:1;color:var(--ink);overflow-wrap:anywhere;margin-bottom:12px}
.gtitle.upper{text-transform:uppercase}
.gtext .ctas{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:18px 0 12px}
.chips{display:flex;flex-wrap:wrap;padding:0;list-style:none;font-style:italic;color:var(--ink-2);font-size:17px}
.chips li:not(:last-child)::after{content:"\00b7";padding:0 .5em;font-style:normal}
.screen{position:relative;display:block;background:#000;border:1px solid var(--ink)}
.screen img{display:block;width:100%;height:auto}
.screen .go{position:absolute;left:10px;bottom:10px;font-family:var(--label);font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--navy);color:#f6f0e2;padding:7px 12px}
.screen:hover .go{background:var(--stamp)}
.notice{margin:22px 0 0;padding:10px 14px;border:2px solid var(--stamp);color:var(--ink);font-size:16px}
.cols{display:grid;grid-template-columns:1fr;gap:0 48px}
@media(min-width:900px){.cols{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.steps{list-style:none;padding:0;counter-reset:s;margin-top:12px}
.steps li{counter-increment:s;display:grid;grid-template-columns:42px 1fr;gap:10px;margin:0 0 12px}
.steps li::before{content:counter(s) ".";font-family:var(--read);font-weight:700;font-size:26px;line-height:1.1;color:var(--navy);text-align:right}
.feat{list-style:none;padding:0;margin-top:6px}
.feat li{padding:9px 0;border-bottom:1px dotted var(--ink-3)}
.keys{display:grid;gap:4px;margin-top:8px}
.keys .row{padding:8px 0;border-bottom:1px dotted var(--ink-3)}
.label{display:block;font-family:var(--read);font-weight:700;font-size:17px;color:var(--ink);margin-bottom:2px}
.keys .row p{font-size:17px;line-height:1.9}
.keys .row.plain p{line-height:1.55}
kbd,.act{display:inline-block;min-width:1.9em;padding:.1em .45em;margin:0 .08em;font-family:var(--label);font-size:15px;line-height:1.3;text-align:center;
  color:var(--ink);background:#fbf7ee;border:1.5px solid var(--ink);border-bottom-width:3px;vertical-align:.08em}
.act{letter-spacing:.03em}
.facts{width:100%;border-collapse:collapse;font-size:17px;margin-top:6px}
.facts th{font-family:var(--read);font-weight:700;font-size:17px;color:var(--ink);text-align:left;padding:9px 12px 9px 0;vertical-align:top;white-space:nowrap}
.facts td,.facts th{border-bottom:1px dotted var(--ink-3)}
.facts td{padding:9px 0}
.shots{list-style:none;padding:0;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 6px 10px 0}
.shots li{flex:0 0 84%;scroll-snap-align:start;margin:0}
.shots li.tall{flex-basis:46%}
.shots figure{margin:0}
.shots a{display:block;border:1px solid var(--ink);background:#000}
.shots img{display:block;width:100%;height:auto}
.shots li.tall img{max-height:620px;width:auto;margin:0 auto}
.shots figcaption{font-size:15px;font-style:italic;color:var(--ink-2);padding:6px 2px 0;line-height:1.35}
@media(min-width:760px){.shots{display:grid;grid-template-columns:repeat(2,1fr);overflow:visible}.shots li.tall{grid-row:span 2}}
.again{margin-top:40px;padding:18px 0;border-top:3px double var(--rule);border-bottom:3px double var(--rule);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.again p{font-size:20px}

/* the list: one row per game, with a dotted leader to the price */
.tiles{list-style:none;padding:0;display:grid;grid-template-columns:1fr;gap:0 40px}
@media(min-width:900px){.tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.tiles.one{grid-template-columns:1fr}
.tile{display:grid;grid-template-columns:170px 1fr;gap:14px;padding:16px 0;border-bottom:1px dotted var(--ink-3);align-items:start}

.tile:not(.big) .screen .go{display:none}
.tn{display:flex;align-items:baseline;gap:8px;font-family:var(--read);font-weight:700;font-size:23px;line-height:1.1;margin:0;text-transform:uppercase;letter-spacing:.02em}
.tn a{color:var(--ink);text-decoration:none}
.tn a:hover{color:var(--stamp)}
.tn .lead{flex:1;border-bottom:2px dotted var(--ink-2);transform:translateY(-.25em);min-width:20px}
.tn .pr{font-family:var(--label);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.tile .rs{font-style:italic;color:var(--ink-2);font-size:16px;margin-top:3px}
.tile .rd{font-size:16px;line-height:1.45;margin-top:6px}
.tile .tl{font-size:16px;margin-top:8px}
.tile .tl .plate.go{min-height:44px;padding:8px 14px;font-size:15px;margin-right:12px}
@media(max-width:520px){.tile{grid-template-columns:120px 1fr;gap:12px;padding:14px 0}.tn{font-size:20px}.tile .rd{display:none}.tn .pr{font-size:13px}
  .tile:not(.big) .screen .go{display:block;left:5px;bottom:5px;font-size:12px;padding:4px 7px}
  .tile:not(.big) .tl .plate.go,.tile:not(.big) .tl .itch{display:none}.tile .tl{margin-top:4px}}
.tile.more{grid-template-columns:1fr}
.tile.big{grid-template-columns:1fr;gap:16px;border-bottom:0}
@media(min-width:900px){.tile.big{grid-template-columns:1.4fr 1fr;gap:32px}}
.tile.big .tn{font-size:clamp(34px,6vw,54px)}
.tile.big .rd{display:block;font-size:19px}

.tile.big .screen .go{left:12px;bottom:12px;font-size:16px;padding:8px 14px}

/* plain pages */
.intro{padding:20px 0 6px}
.intro h1{font-family:var(--read);font-weight:700;font-size:clamp(38px,7vw,60px);line-height:1.05;margin-bottom:10px;color:var(--ink)}
.intro .lede{max-width:36em}
.studio{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center}
.studio .roundel{width:120px;height:120px}
@media(min-width:760px){.studio{grid-template-columns:180px 1fr}.studio .roundel{width:180px;height:180px}}
.jump{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px;margin-top:16px;padding-bottom:6px}
.jump .plate{flex:0 0 auto;white-space:nowrap;min-height:44px;padding:8px 14px;font-size:15px}
.foot{border-top:3px double var(--rule);max-width:1120px;margin:30px auto 0;padding:16px 16px 34px;color:var(--ink-2);font-size:15px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 22px;margin-bottom:6px}
#copyNote{opacity:0;transition:opacity .3s;color:var(--navy)}
.foot nav a{display:inline-block;padding:10px 2px;font-family:var(--label);font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.foot nav a:hover{color:var(--stamp)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* menu lines: name, dotted leader, what it is; one line under */
.menu{list-style:none;padding:0;display:grid;grid-template-columns:1fr;gap:0 44px;margin-top:4px}
@media(min-width:900px){.menu.two{grid-template-columns:1fr 1fr}}
.mline{padding:11px 0 12px;border-bottom:1px dotted var(--ink-3)}
.ml{display:flex;align-items:baseline;gap:8px}
.mn{font-family:var(--read);font-weight:700;font-size:21px;line-height:1.2;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.mn:hover{color:var(--stamp)}
.ml .lead,.tn .lead{flex:1;border-bottom:2px dotted var(--ink-3);transform:translateY(-.3em);min-width:18px}
.mr{font-style:italic;font-size:16px;color:var(--ink-2);text-align:right;white-space:nowrap}
.md{font-size:16px;line-height:1.45;color:var(--ink);margin-top:2px}
.pl{font-family:var(--label);font-size:15px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;margin-left:4px}
.pl::before{content:"";display:inline-block;border-left:.55em solid currentColor;border-top:.33em solid transparent;border-bottom:.33em solid transparent;margin-right:.35em;vertical-align:.02em}
@media(max-width:520px){.mn{font-size:18px}.mr{font-size:14px;white-space:normal;max-width:45%}}
.all{margin-top:12px;font-size:17px}
.again{justify-content:flex-start}

.tn .mr{text-transform:none;font-family:var(--read);font-weight:400;font-style:italic;font-size:15px;letter-spacing:0;white-space:normal;text-align:right;max-width:48%}

/* cards: the game's own screen, its name, one line */
.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px 20px;margin-top:14px}
.cards.three{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.cards.two{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{display:flex;flex-direction:column;background:#f8f2e4;border:1px solid var(--ink)}
.card .screen{border:0;border-bottom:1px solid var(--ink)}
.card .screen img{aspect-ratio:16/9;object-fit:cover}
.card .screen .go{display:block;left:8px;bottom:8px;font-size:13px;padding:5px 9px}
.card .cb{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px;flex:1}
.card h3{font-family:var(--read);font-weight:700;font-size:21px;line-height:1.15;text-transform:uppercase;letter-spacing:.02em}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--stamp);text-decoration:underline}
.card .cg{font-style:italic;font-size:15px;color:var(--ink-2)}
.card .cd{font-size:16px;line-height:1.42;margin-top:4px}
.card:hover{background:#fbf7ee}
@media(max-width:520px){.cards,.cards.two,.cards.three{grid-template-columns:1fr 1fr;gap:14px 10px}.card .cd{display:none}.card h3{font-size:16px}
  .card .cb{padding:8px 9px 10px}.card .cg{font-size:13px;line-height:1.3}.card .screen .go{font-size:11px;padding:3px 6px;left:5px;bottom:5px}}
@media(max-width:520px){.cards.three{grid-template-columns:1fr 1fr 1fr;gap:8px}.cards.three .cg{display:none}.cards.three h3{font-size:14px}.cards.three .screen .go{display:none}}

/* game faces, used by tiles; a face downloads only when a tile on the page uses it */
@font-face{font-family:'DT Shrikhand';src:url('/fonts/shrikhand.woff2') format('woff2');font-display:swap}
@font-face{font-family:'DT Josefin';src:url('/fonts/josefin-sb.woff2') format('woff2');font-display:swap}
@font-face{font-family:'VT BlackOps';src:url('/fonts/blackops.woff2') format('woff2');font-display:swap}
@font-face{font-family:'HL Fell';src:url('/fonts/imfell-sc.woff2') format('woff2');font-display:swap}
@font-face{font-family:'U112 Bangers';src:url('/fonts/u112-bangers.woff2') format('woff2');font-display:swap}
@font-face{font-family:'U112 Patrick';src:url('/fonts/u112-patrick.woff2') format('woff2');font-display:swap}
@font-face{font-family:'LK Alfa';src:url('/fonts/alfaslab.woff2') format('woff2');font-display:swap}
@font-face{font-family:'LK Mono';src:url('/fonts/spacemono-b.woff2') format('woff2');font-display:swap}
@font-face{font-family:'TK Cinzel';src:url('/fonts/cinzel-b.woff2') format('woff2');font-display:swap}
@font-face{font-family:'CH Pix';src:url('/fonts/curbhound-pix.woff2') format('woff2');font-display:swap}
@font-face{font-family:'TD Yatra';src:url('/fonts/yatra.woff2') format('woff2');font-display:swap}
@font-face{font-family:'TD Mukta';src:url('/fonts/mukta.woff2') format('woff2');font-display:swap}
@font-face{font-family:'CR Bulb';src:url('/fonts/cr89-bulb.woff2') format('woff2');font-display:swap}
@font-face{font-family:'CR Pix';src:url('/fonts/cr89-pix.woff2') format('woff2');font-display:swap}
@font-face{font-family:'DR Cabin';src:url('/fonts/cabin-cb.woff2') format('woff2');font-display:swap}
@font-face{font-family:'CS Bevan';src:url('/fonts/bevan.woff2') format('woff2');font-display:swap}
@font-face{font-family:'KF OldStd';src:url('/fonts/kf-oldstandard-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'KF OldStd';src:url('/fonts/kf-oldstandard-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'CK Sketch';src:url('/fonts/ck-cabinsketch.woff2') format('woff2');font-display:swap}
@font-face{font-family:'CK Mono';src:url('/fonts/ck-plexmono-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'L44 Ultra';src:url('/fonts/l44-ultra.woff2') format('woff2');font-display:swap}
@font-face{font-family:'L44 Caslon';src:url('/fonts/l44-caslon-400.woff2') format('woff2');font-display:swap}
@font-face{font-family:'LFB Pirata';src:url('/fonts/pirata.woff2') format('woff2');font-display:swap}