/* Knowledge Express: the look of a vintage railway travel poster.
   Navy night sky, cream poster cards, tomato and mustard accents, chunky slab title. One fixed look (not themed). */
:root {
  --navy: #22344f; --navy2: #1a2840; --ink: #2b2118; --cream: #f6ecd2; --paper: #fbf5e6; --sand: #e8c98a;
  --mustard: #e9a83a; --tomato: #d1452f; --teal: #2e7d7a; --sky: #a9d3df; --leaf: #4f8a4b; --brick: #9c3b2a; --muted: #6b5a48;
  --display: "Alfa Slab One", "Rockwell", Georgia, serif;
  --body: "Lexend", "Trebuchet MS", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--navy); color: var(--ink); font-family: var(--body); font-size: 17px; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
[hidden] { display: none !important; }
#app { min-height: 100%; display: flex; flex-direction: column; }
svg.art { width: 100%; height: 100%; display: block; }

/* ---------- shared bits ---------- */
.topbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); color: var(--cream); }
.topbar .iconbtn { margin-left: auto; }
.iconbtn { width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(246, 236, 210, .35); background: transparent; color: var(--cream); display: grid; place-items: center; padding: 8px; flex: none; }
.iconbtn svg { width: 100%; height: 100%; }
.alllink { color: var(--cream); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--mustard); padding-bottom: 1px; }
.langbtn, .ghost { background: transparent; border: 2px solid currentColor; border-radius: 999px; padding: 6px 14px; font-weight: 700; }
.langbtn { color: var(--cream); }
.card { background: var(--paper); border-radius: 18px; padding: 22px; box-shadow: 0 6px 0 rgba(0, 0, 0, .25); }
.row { display: flex; gap: 12px; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.col { display: grid; gap: 10px; }
.big { border: 0; border-radius: 14px; padding: 13px 22px; font-weight: 700; font-size: 1.05em; background: var(--cream); color: var(--navy); box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.big:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.big.primary { background: var(--tomato); color: #fff; }
.big:disabled { opacity: .45; cursor: default; }
.link { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; color: inherit; font-weight: 700; }
.note { background: #fff4d6; border-left: 4px solid var(--mustard); padding: 8px 12px; border-radius: 6px; font-size: .92em; }
.testnote { color: var(--tomato); font-weight: 700; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; text-wrap: balance; margin: 0; }

/* ---------- home ---------- */
.home { flex: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; padding: 0 16px 18px; max-width: 1100px; width: 100%; margin: 0 auto; align-items: stretch; }
.poster { position: relative; overflow: hidden; border-radius: 22px; background: #f2c879; min-height: 320px; display: flex; flex-direction: column; padding: 26px 24px; isolation: isolate; }
.poster .sun { position: absolute; width: 40%; aspect-ratio: 1; border-radius: 50%; background: #f7e3a6; right: 7%; top: 10%; z-index: -3; }
.poster .skyline { position: absolute; left: 3%; right: 3%; bottom: 27%; height: 36%; display: flex; align-items: flex-end; justify-content: space-between; z-index: -2; }
.poster .lmk { flex: 1; height: 100%; display: grid; align-items: end; }
.poster .lmk:nth-child(3) { height: 125%; } .poster .lmk:nth-child(2), .poster .lmk:nth-child(5) { height: 92%; } .poster .lmk:nth-child(1), .poster .lmk:nth-child(6) { height: 70%; }
.poster .lmk svg { width: 100%; height: 100%; }
.poster .hills { position: absolute; inset: auto 0 0 0; height: 32%; z-index: -1; background: var(--teal);
  clip-path: polygon(0 30%, 12% 12%, 26% 26%, 40% 6%, 55% 22%, 70% 4%, 84% 18%, 100% 8%, 100% 100%, 0 100%); }
.poster .hills::after { content: ""; position: absolute; inset: 45% 0 0 0; background: var(--leaf); clip-path: polygon(0 25%, 20% 0, 45% 30%, 70% 5%, 100% 28%, 100% 100%, 0 100%); }
.poster .rails { position: absolute; left: 0; right: 0; bottom: 16%; height: 8px; border-top: 3px solid var(--ink); background: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 15px); }
.poster .engine { position: absolute; width: 96px; bottom: 6px; left: 6%; animation: chug 10s ease-in-out infinite alternate; }
.poster .engine svg { width: 100%; display: block; }
@keyframes chug { to { left: 70%; } }
.title { color: var(--cream); font-size: clamp(42px, 6.6vw, 80px); line-height: .92; display: grid; text-shadow: 4px 4px 0 var(--tomato), 7px 7px 0 var(--navy); }
.title span:last-child { color: var(--navy); text-shadow: 4px 4px 0 var(--cream); }
.tag { color: var(--navy); font-weight: 700; margin: 12px 0 0; font-size: 1.1em; }
.howto { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .95em; }
.howto li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; line-height: 1.35; }
.howto li .n { font-style: normal; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: var(--cream); display: grid; place-items: center; font-family: var(--display); font-weight: 400; }
.stats { margin: auto 0 0; color: var(--muted); font-size: .95em; }
.panel { background: var(--paper); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.who { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 1.05em; }
.pick { font-size: 1.35em; color: var(--navy); }
.bands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.band { border: 3px solid transparent; border-radius: 16px; padding: 14px 8px; display: grid; gap: 4px; text-align: center; color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .2); }
.band.b1 { background: var(--teal); } .band.b2 { background: var(--brick); } .band.b3 { background: var(--navy); }
.band .bname { font-weight: 700; line-height: 1.15; }
.band .bage { font-size: .88em; opacity: .9; }
.band.on { border-color: var(--mustard); box-shadow: 0 0 0 3px var(--mustard), 0 4px 0 rgba(0, 0, 0, .2); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.actions .big { padding: 16px 12px; }
.actions.small .ghost { color: var(--navy); padding: 10px; }

/* ---------- name box and modals ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(15, 22, 36, .72); display: grid; place-items: center; padding: 16px; }
.modal .card { width: min(440px, 100%); }
.namebox { display: grid; gap: 10px; }
.namebox label { font-family: var(--display); font-size: 1.3em; color: var(--navy); }
.namebox input { font: inherit; font-size: 1.2em; padding: 12px; border-radius: 12px; border: 2px solid var(--sand); background: #fff; }
.err { color: var(--tomato); min-height: 1.2em; font-size: .92em; }
.recent { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .9em; color: var(--muted); }
.recent span { width: 100%; }
.chip { border: 2px solid var(--teal); color: var(--teal); background: #fff; border-radius: 999px; padding: 5px 12px; font-weight: 700; }
.phone .card { text-align: center; display: grid; gap: 10px; justify-items: center; }
.phone .ring { width: 64px; height: 64px; color: var(--teal); animation: ring 1s ease-in-out infinite; }
@keyframes ring { 50% { transform: rotate(-12deg); } }
.phone .count { font-family: var(--display); font-size: 3em; margin: 0; color: var(--tomato); }

/* ---------- daily intro ---------- */
.intro { flex: 1; display: grid; place-items: center; padding: 16px; }
.intro .card { max-width: 480px; display: grid; gap: 8px; }
.intro .date { color: var(--muted); font-weight: 700; }

/* ---------- play ---------- */
#app.play-screen { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.hud { display: flex; align-items: center; gap: 14px; padding: 10px 16px 6px; padding-top: max(10px, env(safe-area-inset-top)); color: var(--cream); }
.hearts { display: flex; gap: 3px; }
.hearts .h { width: 26px; height: 26px; color: rgba(246, 236, 210, .25); }
.hearts .h.on { color: var(--tomato); }
.where { display: grid; line-height: 1.1; min-width: 0; }
.where .st { font-size: .8em; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.where .city { font-family: var(--display); font-size: 1.2em; color: var(--mustard); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score { margin-left: auto; text-align: right; line-height: 1.1; display: grid; }
.score span { font-size: .75em; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.score b { font-size: 1.25em; font-variant-numeric: tabular-nums; }
.clock { height: 8px; margin: 0 16px; background: rgba(246, 236, 210, .18); border-radius: 4px; overflow: hidden; }
.clock i { display: block; height: 100%; width: 100%; background: var(--mustard); transition: width .1s linear; }
.clock.low i { background: var(--tomato); }
.play { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; gap: 16px; padding: 10px 16px; max-width: 1100px; width: 100%; margin: 0 auto; align-items: center; }
.play.withpic { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.picwrap { background: var(--paper); border-radius: 18px; padding: 14px; aspect-ratio: 1; max-height: 100%; width: 100%; display: grid; place-items: center; box-shadow: 0 5px 0 rgba(0, 0, 0, .25); min-height: 0; }
.picwrap.flag { aspect-ratio: 3 / 2; }
.picwrap canvas { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.qa { display: grid; gap: 14px; min-width: 0; }
.play:not(.withpic):not(.ismap) .qa { max-width: 860px; width: 100%; margin: 0 auto; }
.qcat { justify-self: start; align-self: flex-start; font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 4px 12px; border-radius: 999px; background: var(--mustard); color: var(--ink); }
.qcat.c-animals, .qcat.c-nature { background: #8db27a; } .qcat.c-europe, .qcat.c-flags { background: #6fb3c9; } .qcat.c-space { background: #b8a3d6; }
.qcat.c-body, .qcat.c-food { background: #e98a8a; } .qcat.c-history, .qcat.c-art { background: var(--sand); } .qcat.c-sport, .qcat.c-inventions { background: var(--mustard); }
.qtext { color: var(--cream); font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; line-height: 1.25; text-wrap: balance; }
.band1 .qtext { font-size: clamp(22px, 3vw, 34px); }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.answers.n3 { grid-template-columns: 1fr; }
.answers.two { grid-template-columns: 1fr 1fr; }
.ans { position: relative; display: flex; align-items: center; gap: 12px; text-align: left; background: var(--cream); border: 0; border-radius: 14px; padding: 14px 16px; min-height: 60px; box-shadow: 0 4px 0 rgba(0, 0, 0, .28); font-weight: 700; font-size: 1.05em; overflow: hidden; }
.band1 .ans { font-size: 1.2em; min-height: 66px; }
.ans .key { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--navy); color: var(--cream); display: grid; place-items: center; font-size: .85em; }
.ans .txt { position: relative; z-index: 1; }
.ans.sel { background: var(--mustard); }
.ans.good { background: #9fd18c; }
.ans.badc { background: #f0a090; }
.ans.zapped { opacity: .25; text-decoration: line-through; }
.ans.voted::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: rgba(46, 125, 122, .28); }
.ans .pct { margin-left: auto; position: relative; z-index: 1; color: var(--teal); }
.answers.order .ans { justify-content: center; }
.answers.order .ans.placed { opacity: .35; }
.slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.slots li { border: 2px dashed rgba(246, 236, 210, .5); border-radius: 12px; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; color: var(--cream); }
.slots li span { font-family: var(--display); color: var(--mustard); }
.slots li.full { border-style: solid; border-color: var(--mustard); }
.hint { color: var(--cream); opacity: .85; margin: 0; font-size: .95em; }
.play { overflow: hidden; }
.play.ismap { display: flex; flex-direction: column; align-items: stretch; }
.play.ismap .qa { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.mapwrap { flex: 1; min-height: 0; background: #bfdfe6; border: 6px solid var(--paper); border-radius: 16px; display: flex; overflow: hidden; }
.mapwrap .eumap { width: 100%; height: 100%; overflow: visible; }
.eumap .sea { fill: #bfdfe6; }
.eumap .ct { fill: #e3d6b4; stroke: #fbf5e6; stroke-width: 1.2; }
.eumap.pick .ct.tap { fill: var(--sand); cursor: pointer; }
.eumap.pick .ct.tap:hover { fill: #f2c879; }
.eumap .ct.sel { fill: var(--mustard) !important; }
.eumap .ct.good { fill: #6fb35a !important; }
.eumap .ct.badc { fill: var(--tomato) !important; }
.lifelines { display: flex; gap: 8px; justify-content: center; padding: 6px 16px; flex-wrap: wrap; }
.life { display: flex; align-items: center; gap: 6px; border: 2px solid rgba(246, 236, 210, .5); background: rgba(246, 236, 210, .08); color: var(--cream); border-radius: 999px; padding: 6px 12px 6px 8px; font-weight: 700; font-size: .85em; }
.life svg { width: 20px; height: 20px; }
.life.used, .life:disabled { opacity: .3; cursor: default; }
.bet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: var(--navy2); box-shadow: 0 -6px 18px rgba(0, 0, 0, .35); animation: up .18s ease-out; }
@keyframes up { from { transform: translateY(100%); } }
.bet .lh { color: var(--cream); font-weight: 700; width: 100%; text-align: center; font-size: .9em; opacity: .85; }
.bet .b { border: 0; border-radius: 14px; padding: 10px 18px; min-width: 120px; display: grid; justify-items: center; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); color: #fff; }
.bet .b b { font-size: 1.1em; } .bet .b small { opacity: .9; }
.bet .sure { background: var(--leaf); } .bet .think { background: var(--teal); } .bet .guess { background: #6b6f78; }
.bet .b:disabled { opacity: .35; }
.strip { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 6px 16px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); color: var(--cream); font-size: .8em; }
.strip .jn { opacity: .75; white-space: nowrap; }
.strip .dots, .strip { flex-wrap: nowrap; }
.strip .dots { display: flex; gap: 5px; align-items: center; }
.strip i { width: 9px; height: 9px; border-radius: 50%; background: rgba(246, 236, 210, .25); display: block; }
.strip i.grand { width: 13px; height: 13px; border: 2px solid var(--mustard); background: transparent; }
.strip i.past { background: var(--mustard); }
.strip i.now { background: var(--tomato); box-shadow: 0 0 0 3px rgba(209, 69, 47, .35); animation: arrive .6s ease-out; }
@keyframes arrive { from { transform: translateX(-14px) scale(.6); } 60% { transform: translateX(2px) scale(1.25); } }
.toast { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 30; background: var(--ink); color: var(--cream); padding: 10px 16px; border-radius: 12px; font-weight: 700; max-width: 90vw; text-align: center; }

/* ---------- feedback ---------- */
.feedback { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(15, 22, 36, .45); padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.fbcard { width: min(760px, 100%); background: var(--paper); border-radius: 20px; padding: 18px 20px; box-shadow: 0 -4px 24px rgba(0, 0, 0, .3); animation: up .2s ease-out; display: grid; gap: 12px; max-height: 92vh; overflow: auto; }
.feedback.ok .res h3 { color: var(--leaf); } .feedback.no .res h3 { color: var(--tomato); }
.res h3 { font-size: 1.8em; }
.res p { margin: 4px 0 0; }
.gain { font-weight: 700; color: var(--teal); }
.fact { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 14px; padding: 12px; border: 2px solid var(--sand); }
.fact h4 { margin: 0 0 4px; font-family: var(--display); font-weight: 400; color: var(--navy); }
.fact p { margin: 0; line-height: 1.4; }
.fpic { width: 84px; flex: none; aspect-ratio: 1; }
.src { display: inline-block; margin-top: 6px; font-size: .85em; color: var(--muted); }
.newcard { font-family: var(--body); font-size: .7em; font-weight: 700; background: var(--mustard); color: var(--ink); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.fbcard .row { justify-content: space-between; margin-top: 0; }

/* ---------- travelling ---------- */
.travel { position: fixed; inset: 0; z-index: 45; background: rgba(15, 22, 36, .82); display: grid; place-items: center; padding: 16px; cursor: pointer; }
.tcard { position: relative; width: min(900px, 100%); background: var(--paper); border-radius: 20px; padding: 10px; box-shadow: 0 8px 0 rgba(0, 0, 0, .3); }
.eumap.trip { width: 100%; max-height: 72vh; display: block; border-radius: 12px; }
.eumap .rt { fill: none; stroke: var(--navy); stroke-width: 3; stroke-dasharray: 8 6; opacity: .45; }
.eumap .rtdone { fill: none; stroke: var(--tomato); stroke-width: 4; }
.eumap .st { fill: var(--paper); stroke: var(--navy); stroke-width: 2; }
.eumap .gs { fill: var(--mustard); stroke: var(--navy); stroke-width: 2.5; }
.eumap .past { fill: var(--tomato); }
.tlabel { position: absolute; left: 22px; bottom: 22px; background: var(--navy); color: var(--cream); border-radius: 14px; padding: 10px 16px; display: grid; gap: 2px; }
.tlabel span { font-size: .8em; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.tlabel b { font-family: var(--display); font-weight: 400; font-size: 1.6em; color: var(--mustard); }
.tlabel .lm { width: 70px; height: 70px; background: var(--paper); border-radius: 10px; margin-top: 6px; padding: 4px; }
.banner { position: fixed; inset: 0; z-index: 46; display: grid; place-items: center; background: rgba(15, 22, 36, .6); cursor: pointer; padding: 16px; }
.bcard { background: var(--tomato); color: #fff; padding: 24px 40px; border-radius: 18px; text-align: center; box-shadow: 0 8px 0 rgba(0, 0, 0, .3); animation: pop .35s cubic-bezier(.2, 1.6, .5, 1); }
.banner.gold .bcard { background: var(--mustard); color: var(--ink); }
.bcard h2 { font-size: clamp(28px, 5vw, 48px); }
.bcard p { margin: 6px 0 0; font-weight: 700; font-size: 1.3em; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* ---------- end, scores, album ---------- */
.over, .scores, .album { flex: 1; padding: 0 16px 24px; max-width: 900px; width: 100%; margin: 0 auto; display: grid; gap: 16px; align-content: start; }
.over { grid-template-columns: 1fr 1fr; }
.result { text-align: center; display: grid; gap: 6px; align-content: start; }
.result h1 { color: var(--navy); font-size: 2em; }
.result.won h1 { color: var(--tomato); }
.big-score { font-family: var(--display); font-size: 3.2em; color: var(--tomato); margin: 0; font-variant-numeric: tabular-nums; }
.result p { margin: 0; }
.result .cards { color: var(--teal); font-weight: 700; }
.boardcard h2 { color: var(--navy); font-size: 1.2em; margin-bottom: 8px; }
.board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.board li { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; background: #fff; font-variant-numeric: tabular-nums; }
.board li.me { background: #fff1c9; outline: 2px solid var(--mustard); }
.board .pos { font-family: var(--display); color: var(--muted); }
.board .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .st { color: var(--muted); font-size: .85em; }
.board .st:not(:empty)::after { content: " ●"; color: var(--mustard); }
.board .sc { font-weight: 700; }
.board .empty { color: var(--muted); }
.scores h1, .album h1 { color: var(--cream); font-size: 2em; }
.backbtn { color: var(--cream); }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { border: 2px solid rgba(246, 236, 210, .5); background: transparent; color: var(--cream); border-radius: 999px; padding: 7px 14px; font-weight: 700; }
.tab.on { background: var(--mustard); color: var(--ink); border-color: var(--mustard); }
.album .sub { color: var(--cream); margin: -8px 0 0; opacity: .85; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cat { position: relative; background: var(--paper); border: 0; border-radius: 16px; padding: 12px; display: grid; gap: 4px; justify-items: center; overflow: hidden; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.cat .cpic { width: 70px; height: 70px; }
.cat span { color: var(--muted); font-size: .9em; font-variant-numeric: tabular-nums; }
.cat i { position: absolute; left: 0; bottom: 0; height: 6px; width: var(--w); background: var(--mustard); }
.fcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.fcard { background: var(--paper); border-radius: 14px; padding: 10px; display: grid; gap: 6px; align-content: start; font-size: .92em; line-height: 1.35; }
.fcard .fpic { width: 64px; }
.fcard p { margin: 0; }
.fcard.locked { background: rgba(246, 236, 210, .12); place-items: center; min-height: 110px; }
.fcard.locked span { font-family: var(--display); font-size: 2em; color: rgba(246, 236, 210, .4); }

/* ---------- smaller screens ---------- */
@media (max-width: 760px) {
  .home { grid-template-columns: 1fr; }
  .poster { min-height: 220px; }
  .over { grid-template-columns: 1fr; }
  .play.withpic { grid-template-columns: 1fr; }
  .picwrap { max-width: 220px; margin: 0 auto; }
  .picwrap.flag { max-width: 260px; }
  .answers { grid-template-columns: 1fr; }
  .answers.two { grid-template-columns: 1fr 1fr; }
  .life span { display: none; }
  .life { padding: 8px; }
  .strip .jn { display: none; }
}
/* phones held sideways: very little height */
@media (max-height: 520px) {
  body { font-size: 15px; }
  .hud { padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 2px; }
  .hearts .h { width: 20px; height: 20px; }
  .play { padding-block: 4px; gap: 12px; }
  .play.withpic { grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); }
  .picwrap { max-height: 52vh; padding: 8px; aspect-ratio: auto; height: 52vh; }
  .qtext, .band1 .qtext { font-size: 19px; }
  .ans, .band1 .ans { min-height: 44px; padding: 8px 12px; font-size: 1em; }
  .answers { grid-template-columns: 1fr 1fr; gap: 8px; }
  .answers.n3 { grid-template-columns: 1fr 1fr 1fr; }
  .lifelines { padding: 2px 16px; }
  .life span { display: none; }
  .life { padding: 6px; }
  .strip { padding-block: 2px 6px; }
  .bet { padding-block: 6px; }
  .bet .lh { display: none; }
  .bet .b { padding: 6px 14px; }
  .play.ismap .qa { gap: 6px; }
  .play.ismap .qcat { display: none; }
  .home { grid-template-columns: 1fr 1fr; }
  .poster { min-height: 0; }
  .title { font-size: 44px; }
  .panel { padding: 14px; gap: 10px; }
  .band { padding: 8px 6px; }
  .actions .big { padding: 10px; }
  .eumap.trip { max-height: 80vh; }
  .fbcard { padding: 12px 16px; gap: 8px 16px; grid-template-columns: minmax(150px, .7fr) 1.3fr; align-items: center; }
  .fbcard .row { grid-column: 1 / -1; }
  .qcat { display: none; }
  .res h3 { font-size: 1.4em; }
  .fpic { width: 60px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 760px) { .poster { min-height: 260px; } .poster .engine { width: 72px; } }
@media (max-height: 520px) { .poster .tag { font-size: .95em; } .howto { display: none; } }