/* /games (games.html, src/games.js). Shared parts (header, .viewbar, .sheet, .btn) come from styles.css. */
.gm-h1{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0}
.gm-top{margin-top:6px}
.gm-top .viewnote{margin:0}
.gm-limits{margin:0 0 0 auto; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.gm-limits b{color:var(--ink); font-weight:600}
@media (max-width:760px){ .gm-limits{margin:0; width:100%} }

.gm-chip{display:inline-flex; align-self:flex-start; font:600 11.5px var(--body); color:var(--muted); background:var(--shade); border-radius:999px; padding:4px 10px}
.gm-chip.ok{color:#fff; background:var(--gain)}
.gm-sub{color:var(--muted); font-size:14px; margin:6px 0 0; max-width:62ch}
.gm-sub b{font-weight:700}
.gm-fine{font-size:12.5px; color:var(--muted); margin:12px 0 0}
.gm-msg{margin:10px 0 0; font-size:13.5px; font-weight:600; color:var(--gain); text-align:center}
.gm-msg.err{color:var(--loss)}
.gm-next{font-size:13px; color:var(--muted); margin:14px 2px 0; max-width:80ch}
.gain{color:var(--gain)} .loss{color:var(--loss)}

/* The two games */
.gm-cards{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:14px}
.gm-card{padding:18px; display:flex; flex-direction:column; gap:8px}
.gm-card h2{font-family:var(--display); font-size:24px; letter-spacing:-.02em; margin:0}
.gm-card p{margin:0; font-size:14px; color:var(--muted); max-width:56ch}
.gm-card .btn{margin-top:auto; align-self:flex-start; min-width:120px; justify-content:center}
.gm-card .btn:disabled{opacity:1; background:var(--shade); border-color:var(--crease); color:var(--muted); cursor:default}
.gm-runnote{color:var(--accent-ink) !important; font-weight:600}
.gm-art{height:96px; border-radius:12px; background:var(--paper); border:1px solid var(--crease); margin-bottom:4px; position:relative; display:flex; align-items:center; justify-content:center; gap:6px; overflow:hidden}
.gm-art-meter{background:linear-gradient(90deg, var(--gain-soft), #fbecd0 60%, var(--loss-soft))}
.gm-art-meter i{position:absolute; left:16px; right:16px; top:50%; height:12px; margin-top:-6px; border-radius:6px; background:linear-gradient(90deg, var(--gain), #d29a3a 60%, var(--loss))}
.gm-art-meter b{position:absolute; z-index:1; left:72%; top:50%; margin-top:-22px; width:6px; height:44px; border-radius:3px; background:var(--ink); box-shadow:0 0 0 3px var(--sheet)}
@media (max-width:760px){ .gm-cards{grid-template-columns:1fr} .gm-art{height:76px} }

/* The Run's ladder */
.gm-ladder{display:flex; gap:6px; flex-wrap:wrap}
.gm-ladder span{padding:8px 10px; border-radius:10px; background:var(--shade); font:700 12.5px var(--body); color:var(--muted); font-variant-numeric:tabular-nums; min-width:46px; text-align:center}
.gm-ladder span.done{background:var(--gain-soft); color:var(--gain)}
.gm-ladder span.now{background:var(--ink); color:#fff}
.gm-art.gm-ladder{flex-wrap:nowrap}
.gm-ladder-live{margin:14px 0 0}
.gm-ladder-live span{flex:1}

/* Setup */
.gm-setup, .gm-live{padding:18px 20px; margin-top:14px; max-width:720px}
.gm-setup-h{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.gm-setup-h h2, .gm-live-h h2, .gm-cleared h2{font-family:var(--display); font-size:26px; letter-spacing:-.02em; margin:0}
.gm-back{font:600 13.5px var(--body); color:var(--accent-ink); background:none; border:0; padding:8px 0; cursor:pointer; min-height:40px}
.gm-form{display:grid; gap:14px; margin:18px 0}
.gm-form > div{display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:10px}
.gm-k{font:600 13px var(--body); color:var(--muted)}
.gm-pick{display:flex; flex-wrap:wrap; gap:6px}
.gm-pick button{font:600 14px var(--body); color:var(--ink); background:var(--sheet); border:1px solid var(--crease); border-radius:999px; padding:8px 14px; min-height:42px; cursor:pointer; display:inline-flex; gap:8px; align-items:baseline; font-variant-numeric:tabular-nums}
.gm-pick button span{font-weight:500; font-size:13px; color:var(--muted)}
.gm-pick button[aria-pressed="true"]{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent-ink)}
.gm-pick button:disabled{opacity:.45; cursor:default}
.gm-go{width:100%; justify-content:center; min-height:52px; font-size:16px}
.gm-go:disabled{opacity:1; background:var(--shade); border-color:var(--crease); color:var(--muted); cursor:default}
@media (max-width:520px){ .gm-form > div{grid-template-columns:1fr; gap:6px} }

/* Playing */
.gm-live-h{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap}
.gm-live-h h2{margin-top:8px}
.gm-live-h h2 span{font-size:16px; color:var(--muted); font-weight:600; letter-spacing:0}
.gm-nerve{text-align:right; display:grid}
.gm-nerve span{font-size:12.5px; color:var(--muted)}
.gm-nerve b{font-family:var(--display); font-size:44px; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.gm-meter{margin:22px 0 4px}
.gm-bar{position:relative; height:16px; border-radius:8px; background:linear-gradient(90deg, var(--gain), #d29a3a 55%, var(--loss))}
.gm-bar i{position:absolute; top:-12px; width:6px; height:40px; margin-left:-3px; border-radius:3px; transition:left .25s}
.gm-mark{background:var(--ink); box-shadow:0 0 0 3px var(--sheet)}
.gm-ghost{background:color-mix(in srgb, var(--ink) 30%, transparent)}
.gm-ends{display:flex; justify-content:space-between; margin-top:16px; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.gm-stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:16px 0}
.gm-stats div{background:var(--paper); border:1px solid var(--crease); border-radius:12px; padding:10px 12px; min-width:0}
.gm-stats dt{font-size:12px; color:var(--muted)}
.gm-stats dd{margin:2px 0 0; font-weight:700; font-size:16px; font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){ .gm-bar i{transition:none} }
@media (max-width:520px){ .gm-stats{grid-template-columns:1fr 1fr} .gm-stats div:first-child{grid-column:1 / -1} .gm-nerve b{font-size:36px} }
.gm-cleared h2{margin-top:10px}
.gm-row2{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px}
.gm-row2 .btn{justify-content:center; min-height:46px}

/* Leaderboards */
.gm-board{padding:18px 20px; margin-top:14px; max-width:860px}
.gm-board-h{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.gm-board-h h2{font-family:var(--display); font-size:24px; letter-spacing:-.02em; margin:0}
.gm-subtabs{display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--shade)}
.gm-subtabs button{font:600 13.5px var(--body); border:0; background:none; color:var(--muted); padding:8px 14px; border-radius:999px; min-height:38px; cursor:pointer}
.gm-subtabs button[aria-selected="true"]{background:var(--sheet); color:var(--ink); box-shadow:0 2px 8px -4px color-mix(in srgb, var(--ink) 40%, transparent)}
.gm-rows{list-style:none; margin:12px 0 0; padding:0}
.gm-rows li{display:grid; grid-template-columns:36px minmax(0,1fr) auto 64px; gap:10px; align-items:center; padding:11px 6px; border-top:1px solid var(--crease); font-variant-numeric:tabular-nums}
.gm-rows .rk{font:600 13px var(--data); color:var(--muted)}
.gm-rows .nm{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gm-rows .nm small{font-weight:500; color:var(--muted); font-size:12px}
.gm-rows .wh{font-size:12.5px; color:var(--muted)}
.gm-rows .sc{text-align:right; font-family:var(--display); font-size:19px}
.gm-rows .sc span{font:500 12px var(--body); color:var(--muted); margin-left:3px}
.gm-rows li.you{background:var(--accent-soft); border-radius:10px; border-top-color:transparent}
.gm-rows li.gm-empty{display:block; color:var(--muted); font-size:14px; padding:18px 6px}
@media (max-width:520px){ .gm-rows li{grid-template-columns:28px minmax(0,1fr) 56px} .gm-rows .wh{grid-column:2; grid-row:2; margin-top:-6px} .gm-rows .sc{grid-row:1 / span 2; grid-column:3} }
.gm-optin{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; padding:12px 14px; border-radius:12px; background:var(--paper); border:1px solid var(--crease); font-size:13.5px}
.gm-optin > span, .gm-optin label{flex:1 1 200px; margin:0; font:inherit; color:var(--ink); text-transform:none; letter-spacing:0}
.gm-optin input{flex:1 1 160px; height:40px; border-radius:10px; border:1px solid var(--crease); padding:0 12px; font:500 14px var(--body); background:var(--sheet); min-width:0; width:auto}
.gm-optin .btn{min-height:40px; justify-content:center}

/* Result: a centred card on wide screens, a bottom sheet on phones */
.gm-result{width:min(560px, 100vw - 32px); max-height:calc(100dvh - 32px); padding:22px; border:1px solid var(--crease); border-radius:22px; color:var(--ink); background:var(--sheet)}
.gm-result::backdrop{background:color-mix(in srgb, var(--ink) 30%, transparent)}
.gm-res-h{display:flex; justify-content:space-between; align-items:center; gap:10px}
.gm-res-h h2{font-family:var(--display); font-size:30px; letter-spacing:-.03em; margin:0}
.gm-share-img{margin:14px 0 0; border-radius:14px; overflow:hidden; border:1px solid var(--crease); background:var(--paper); aspect-ratio:1200 / 630}
.gm-share-img img{display:block; width:100%; height:auto}
.gm-xbtn{display:flex; justify-content:center; align-items:center; gap:10px; width:100%; min-height:52px; border-radius:14px; background:#0f1419; color:#fff; font:700 16px var(--body); margin-top:14px; text-decoration:none}
.gm-xbtn:hover{background:#000}
.gm-xbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.gm-xbtn svg{width:18px; height:18px; fill:#fff}
@media (max-width:600px){
  .gm-result{width:100vw; max-width:100vw; margin:auto 0 0; border-radius:22px 22px 0 0; padding:16px 16px calc(18px + env(safe-area-inset-bottom)); max-height:92dvh}
}
.gamespage #msg:empty{display:none}
@media (max-width:520px){
  .gm-live-h{display:grid; gap:10px}
  .gm-nerve{text-align:left; display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--paper); border:1px solid var(--crease); border-radius:12px; padding:8px 12px}
}
@media (max-width:520px){ .gm-live-h{grid-template-columns:minmax(0,1fr)} }
.gm-msg#cardsmsg{text-align:left; color:var(--muted); font-weight:500}

/* Open rooms */
.gm-rooms{padding:16px 18px; margin-top:14px}
.gm-sec-h{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.gm-sec-h h2{font-family:var(--display); font-size:22px; letter-spacing:-.02em; margin:0}
.gm-sec-btns{display:flex; gap:8px; flex-wrap:wrap}
.gm-roomlist{list-style:none; margin:10px 0 0; padding:0}
.gm-roomlist li{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:14px; align-items:center; padding:12px 6px; border-top:1px solid var(--crease)}
.gm-roomlist li.me{background:var(--accent-soft); border-radius:12px; border-top-color:transparent}
.gm-roomlist li div span{display:block; font-size:12.5px; color:var(--muted)}
.gm-roomlist .gm-seats{text-align:right; font-variant-numeric:tabular-nums}
.gm-roomlist .gm-seats span{display:block; font-size:12px; color:var(--muted)}
.gm-roomlist .btn{min-width:84px; justify-content:center; padding:9px 18px}
.gm-roomlist li.gm-empty{display:block; color:var(--muted); font-size:14px; padding:14px 6px}
.gm-dot{width:10px; height:10px; border-radius:50%; background:var(--crease)}
.gm-dot.live{background:var(--gain); box-shadow:0 0 0 4px color-mix(in srgb, var(--gain) 20%, transparent)}
@media (max-width:560px){ .gm-roomlist li{grid-template-columns:auto minmax(0,1fr) auto} .gm-roomlist .gm-seats{display:none} }

/* Card art for rooms */
.gm-art-duel{gap:14px; font-family:var(--display)}
.gm-art-duel b{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff; font-size:14px}
.gm-art-duel b:last-child{background:var(--sheet); color:var(--muted); border:2px dashed var(--crease)}
.gm-art-duel span{color:var(--muted); font-size:14px}
.gm-art-lobby{gap:8px}
.gm-art-lobby i{width:24px; height:24px; border-radius:50%; background:var(--accent)}
.gm-art-lobby i.o{background:none; border:2px dashed var(--crease)}

/* Bulls vs Bears and PAPER */
.gm-cards-2 .gm-card{gap:6px}
.gm-sidebar{height:14px; border-radius:7px; background:var(--loss); overflow:hidden; margin:6px 0 2px}
.gm-sidebar i{display:block; height:100%; width:50%; background:var(--gain); border-radius:7px 0 0 7px; transition:width .4s}
.gm-sides p b{color:var(--ink)}
.gm-paper-n b{font-family:var(--display); font-size:30px; letter-spacing:-.03em; color:var(--ink); margin-right:4px}

/* A room */
.gm-room{padding:18px 20px; margin-top:14px; max-width:720px}
.gm-room-h{display:flex; justify-content:space-between; align-items:center; gap:10px}
.gm-room h2{font-family:var(--display); font-size:28px; letter-spacing:-.02em; margin:4px 0 0}
.gm-chip.live{color:#fff; background:var(--gain)}
.gm-seatgrid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin:16px 0}
.gm-seatgrid span{border-radius:12px; padding:12px 6px; text-align:center; font:600 13.5px var(--body); background:var(--paper); border:1px solid var(--crease); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gm-seatgrid small{display:block; font-weight:500; color:var(--muted); font-size:12px}
.gm-seatgrid .you{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 40%, var(--crease))}
.gm-seatgrid .o{border-style:dashed; color:var(--muted); font-weight:500; display:grid; place-items:center}
.gm-signed{margin:4px 0 0; padding:12px 14px; border-radius:12px; background:var(--gain-soft); color:#1f5a3c; font-size:13.5px}
.gm-wide{width:100%; justify-content:center; margin-top:10px; min-height:46px}
.gm-room .gm-row2 a.btn{text-decoration:none}
.gm-rank{list-style:none; margin:14px 0; padding:0}
.gm-rank li{display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 6px; border-top:1px solid var(--crease); font-variant-numeric:tabular-nums}
.gm-rank .n{font:600 13px var(--data); color:var(--muted)}
.gm-rank div span{display:block; font-size:12.5px; color:var(--muted)}
.gm-rank .s{text-align:right; font-family:var(--display); font-size:19px}
.gm-rank li.me{background:var(--accent-soft); border-radius:10px; border-top-color:transparent}
@media (max-width:520px){ .gm-seatgrid{grid-template-columns:repeat(2, minmax(0,1fr))} }

/* How games work */
.gm-faq{margin-top:28px; max-width:760px}
.gm-faq h2{font-family:var(--display); font-size:22px; letter-spacing:-.02em; margin:0 0 6px}
.gm-faq details{border-top:1px solid var(--crease); padding:4px 0}
.gm-faq details:last-child{border-bottom:1px solid var(--crease)}
.gm-faq summary{cursor:pointer; font-weight:600; padding:10px 0; min-height:44px; display:flex; align-items:center; list-style:none}
.gm-faq summary::-webkit-details-marker{display:none}
.gm-faq summary::after{content:"+"; margin-left:auto; color:var(--muted); font-weight:500; font-size:18px}
.gm-faq details[open] summary::after{content:"−"}
.gm-faq p{margin:0 0 12px; color:var(--muted); font-size:14px; max-width:68ch}

/* Hero art: full-bleed at the top of each card. The art leaves its left third empty, so crops favour the right. */
.gm-hero{display:block; width:calc(100% + 36px); max-width:none; height:auto; aspect-ratio:16 / 7.5; object-fit:cover; object-position:72% 55%;
  margin:-18px -18px 6px; border-radius:var(--round) var(--round) 0 0; background:var(--paper); border-bottom:1px solid var(--crease)}
.gm-cards-2{grid-template-columns:repeat(3, minmax(0,1fr))}
.gm-cards-2 .gm-hero{aspect-ratio:16 / 8}
.gm-crews .btn{margin-top:auto; align-self:flex-start; text-decoration:none}
@media (max-width:980px){ .gm-cards-2{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:760px){ .gm-cards-2{grid-template-columns:1fr} .gm-hero{aspect-ratio:16 / 8} }

.gm-chips{display:flex; gap:6px; flex-wrap:wrap}

/* A game's page: the game's art and rules on the left, playing on the right, on the same grid as the cards */
.gm-page{margin-top:14px}
.gm-page-top{display:flex; align-items:center; margin:0 0 12px}
.gm-backbtn{display:inline-flex; align-items:center; gap:8px; font:600 14px var(--body); color:var(--ink); background:var(--sheet); border:1px solid var(--crease);
  border-radius:999px; padding:9px 18px 9px 14px; min-height:44px; cursor:pointer; box-shadow:0 4px 14px -12px color-mix(in srgb, var(--ink) 60%, transparent)}
.gm-backbtn span{font-size:16px; line-height:1; transition:transform .15s}
.gm-backbtn:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--crease)); color:var(--accent-ink)}
.gm-backbtn:hover span{transform:translateX(-2px)}
.gm-backbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.gm-page-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:16px; align-items:start}
.gm-page-art{padding:0; overflow:hidden; position:sticky; top:16px}
.gm-page-art img{display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; object-position:70% 50%; border-bottom:1px solid var(--crease); background:var(--paper)}
.gm-page-intro{padding:18px 20px 20px; display:grid; gap:8px}
.gm-page-intro .gm-chip{justify-self:start}
.gm-page-intro h2{font-family:var(--display); font-size:30px; letter-spacing:-.03em; margin:0}
.gm-page-intro p{margin:0; color:var(--muted); font-size:14.5px}
.gm-facts{margin:8px 0 0; display:grid; gap:0}
.gm-facts div{display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; padding:9px 0; border-top:1px solid var(--crease); font-size:13.5px}
.gm-facts dt{color:var(--muted)}
.gm-facts dd{margin:0}
.gm-page-main{display:grid; gap:16px; min-width:0}
.gm-page-main > .sheet{margin-top:0; max-width:none}
.gm-panel-h{font-family:var(--display); font-size:21px; letter-spacing:-.02em; margin:0}
.gm-openlist{margin:0 0 18px; padding-bottom:16px; border-bottom:1px solid var(--crease)}
.gm-openlist .gm-roomlist{margin-top:8px}
.gm-openlist .gm-roomlist li:first-child{border-top:0}
.gm-room-h{display:flex; justify-content:space-between; align-items:center; gap:10px}
.gm-room-h h2{margin:0}
@media (max-width:900px){
  .gm-page-grid{grid-template-columns:1fr}
  .gm-page-art{position:static}
  .gm-page-art img{aspect-ratio:16 / 7}
  .gm-facts{display:none}
}
@media (prefers-reduced-motion:reduce){ .gm-backbtn span{transition:none} }