/* Výprava do Kácova — projector-first pixel UI (sizes in vw so 1080p and 4K match) */
:root {
  --ink: #1b1420;
  --panel: #1d1724;
  --panel2: #2a2133;
  --cream: #f6efdc;
  --amber: #ffb400;
  --green: #7fd67a;
  --red: #e8492a;
  --title: 'Jersey 10', monospace;
  --body: 'VT323', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0e0b12; overflow: hidden; color: var(--cream); font-family: var(--body); font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'clig' 0; }
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
#game-container { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #0e0b12; }
#game-canvas { display: block; }
body.clean #hint, body.clean #progress { display: none; }

/* pixel frame: stepped corners */
.px-frame, #card, #herald, #toast, .bubble, #overlay-caption {
  border: 0.28vw solid var(--ink);
  box-shadow: 0 0 0 0.28vw #f6efdc22, 0.5vw 0.5vw 0 #00000066;
}

/* ── Card ── */
#card {
  position: fixed; right: 2.2vw; top: 50%; transform: translateY(-50%);
  width: min(36vw, 900px); max-height: 90vh; overflow: hidden;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  padding: 1.5vw 1.8vw 1.6vw; z-index: 20;
  animation: cardIn .28s steps(4) both;
}
#card.hidden { display: none; }
#card.wide { width: min(58vw, 1400px); }
@keyframes cardIn { from { transform: translate(6vw, -50%); opacity: 0; } to { transform: translate(0, -50%); opacity: 1; } }
#card .kicker { font: 1.55vw/1 var(--body); color: var(--amber); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .6vw; }
#card h2 { font: 400 3.3vw/1 var(--title); margin: 0 0 1vw; color: #fff; }
#card p { font: 2.05vw/1.08 var(--body); margin: 0 0 1vw; }
#card .note { font: 1.8vw/1.1 var(--body); color: var(--amber); border-left: .4vw solid var(--amber); padding-left: .8vw; margin-top: .6vw; }
#card .chips { display: flex; flex-wrap: wrap; gap: .6vw; margin: .4vw 0 .8vw; }
#card .chips span { font: 1.9vw/1 var(--body); background: #ffffff14; border: .2vw solid #ffffff40; padding: .35vw .7vw; }
#card .demo { margin-top: 1vw; font: 1.6vw/1 var(--body); color: var(--green); animation: blink 1.2s steps(2) infinite; }
#card .demo span { color: #9fd8ff; }
@keyframes blink { 50% { opacity: .45; } }
#card ul.fleet { list-style: none; padding: 0; margin: 0 0 .6vw; display: grid; gap: .55vw; }
#card ul.fleet li { display: grid; grid-template-columns: 7.5vw 1fr; align-items: center; gap: 1vw; }
#card ul.fleet img { width: 7.5vw; height: 3.6vw; object-fit: contain; object-position: left center; }
#card ul.fleet b { display: block; font: 400 1.9vw/1 var(--title); color: #fff; }
#card ul.fleet span { font: 1.65vw/1 var(--body); color: #e7dcc3; }
#card .party { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1vw 1.4vw; margin: .4vw 0 1vw; }
#card .member { display: grid; grid-template-columns: 6vw 1fr; gap: .8vw; align-items: center; background: #ffffff0d; padding: .5vw; }
#card .member img { width: 6vw; height: auto; }
#card .member b { display: block; font: 400 1.75vw/1 var(--title); color: #fff; }
#card .member .role { display: block; font: 1.35vw/1 var(--body); color: #cfc3aa; }
#card .member .cls { display: block; font: 1.55vw/1 var(--body); color: var(--amber); }
#card .member .stat { display: block; font: 1.4vw/1 var(--body); color: var(--green); }
#card .qr { display: flex; gap: 1.2vw; align-items: center; font: 1.9vw/1.1 var(--body); margin-top: .6vw; }
#card .qr small { color: #cfc3aa; font-size: 1.4vw; }
#card .qrbox { width: 9vw; height: 9vw; background: #fff; color: #000; display: grid; place-items: center; font: 3vw var(--title); }
#card .qrbox img { width: 100%; height: 100%; }

/* ── Speech bubbles ── */
#bubbles, #tags { position: fixed; inset: 0; pointer-events: none; z-index: 15; }
.bubble {
  position: absolute; left: 0; top: 0; max-width: 30vw;
  background: #fffaf0; color: var(--ink); font: 2vw/1.05 var(--body);
  padding: .6vw .9vw; opacity: 0; transition: opacity .15s steps(3);
}
.bubble.on { opacity: 1; }
.bubble::after {
  content: ''; position: absolute; left: calc(var(--tail, 50%) - .7vw); bottom: -1.2vw;
  border: .7vw solid transparent; border-top: .9vw solid var(--ink);
}

/* ── Tags over the world ── */
.tag {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: 400 1.35vw/1 var(--title); color: #fff; background: #1b1420e6;
  border: .18vw solid var(--amber); padding: .3vw .5vw; animation: tagIn .3s steps(3) both;
}
.tag.vip { border-color: #e3b64a; color: #ffe38a; }
.tag.cabin { border-color: #ffcf7a; color: #ffe9b8; font-size: 1.3vw; }
.tag.agent { border-color: #d97757; color: #ffd9c9; }
@keyframes tagIn { from { opacity: 0; transform: translateY(-.5vw); } }

/* ── Herald + toast ── */
#herald {
  position: fixed; left: 50%; top: 2vh; transform: translate(-50%, -160%); z-index: 25;
  display: flex; gap: 1vw; align-items: center; background: #f3e2b3; color: #3a1a10;
  padding: .6vw 1.2vw .6vw .6vw; max-width: 64vw; transition: transform .35s steps(5);
}
#herald.on { transform: translate(-50%, 0); }
#herald img { width: 4.2vw; background: #e9d29a; }
#herald b { display: block; font: 400 1.5vw/1 var(--title); color: #8a1f1a; letter-spacing: .06em; }
#herald span { font: 1.95vw/1.05 var(--body); }
#toast {
  position: fixed; right: 2vw; top: 2vh; z-index: 26; max-width: 34vw;
  background: #0f3f7a; color: #e8f2ff; padding: .7vw 1vw; transform: translateX(130%); transition: transform .3s steps(5);
}
#toast.on { transform: none; }
#toast b { display: block; font: 400 1.5vw/1 var(--title); color: #ffd23f; margin-bottom: .3vw; }
#toast span { font: 1.75vw/1.05 var(--body); }

/* ── Overlay (suite) ── */
#overlay { position: fixed; inset: 0; background: #0e0b12f2; z-index: 30; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.4vh; }
#overlay.on { display: flex; animation: fadeIn .3s steps(4); }
#overlay-canvas { height: 76vh; aspect-ratio: 16 / 9; }
#overlay-caption { background: var(--panel); padding: .8vw 1.4vw; text-align: center; }
#overlay-caption h2 { font: 400 3vw/1 var(--title); margin: 0 0 .4vw; color: #ffe38a; }
#overlay-caption p { font: 1.9vw/1 var(--body); margin: 0; }
@keyframes fadeIn { from { opacity: 0; } }

/* ── Credits ── */
#credits { position: fixed; inset: 0; z-index: 40; display: none; background: linear-gradient(#0e0b12ee, #0e0b12cc 30%, #0e0b12cc 70%, #0e0b12ee); overflow: hidden; }
#credits.on { display: block; }
#credits .roll { position: absolute; left: 0; right: 0; top: 100%; text-align: center; animation: roll 38s linear forwards; }
#credits h3 { font: 400 3.6vw/1.1 var(--title); color: #ffe38a; margin: 1vw 0; }
#credits p { font: 2.1vw/1.35 var(--body); margin: 0; }
#credits p span { color: #cfc3aa; margin-right: 1vw; }
#credits p b { color: #fff; font-weight: normal; }
@keyframes roll { to { transform: translateY(calc(-100% - 100vh)); } }


/* ── Hint, progress, prompt ── */
#hint { position: fixed; left: 1.2vw; bottom: 1vh; z-index: 12; font: 1.05vw var(--body); color: #ffffff66; text-shadow: 1px 1px 0 #000; }
#hint b { color: #ffffffaa; font-weight: normal; }
#progress { position: fixed; left: 50%; bottom: 1.2vh; transform: translateX(-50%); z-index: 12; display: flex; gap: .5vw; }
#progress i { width: .8vw; height: .8vw; background: #ffffff33; box-shadow: 0 0 0 .15vw #1b142099; }
#progress i.done { background: var(--amber); }
#progress i.now { background: #fff; }
#prompt { position: fixed; left: 0; top: 0; z-index: 16; display: none; font: 400 1.5vw var(--title); background: var(--amber); color: var(--ink); padding: .3vw .6vw; }
#prompt.on { display: block; animation: blink 1s steps(2) infinite; }

/* touch: joystick only in touch mode; bigger UI on phones */
#virtual-joystick { display: none !important; }
body.touch #virtual-joystick { display: block !important; }
@media (orientation: portrait) {
  #card, #card.wide { width: 92vw; right: 4vw; top: auto; bottom: 3vh; transform: none; animation: none; max-height: 55vh; overflow-y: auto; }
  #card h2 { font-size: 6vw; } #card p, #card .note { font-size: 5vw; } #card .kicker { font-size: 3.6vw; }
  #card ul.fleet b { font-size: 3.8vw; } #card ul.fleet span { font-size: 4.2vw; } #card ul.fleet li { grid-template-columns: 18vw 1fr; } #card ul.fleet img { width: 18vw; height: 9vw; }
  #card .party { grid-template-columns: 1fr 1fr; } #card .member b { font-size: 3.4vw; } #card .member .role, #card .member .cls, #card .member .stat { font-size: 3.6vw; } #card .member { grid-template-columns: 12vw 1fr; } #card .member img { width: 12vw; }
  .bubble { font-size: 4.6vw; max-width: 70vw; }
  #herald { max-width: 94vw; } #herald span { font-size: 4.4vw; } #herald b { font-size: 3vw; } #herald img { width: 10vw; }
  #hint { display: none; } .tag { font-size: 2.6vw; } #prompt { font-size: 3.4vw; }
}

/* ── Screens: title, join (presenter), pick (visitor) ── */
#screen { position: fixed; inset: 0; z-index: 50; display: none; overflow-y: auto; text-align: center;
  background: radial-gradient(ellipse at center, #0e0b1266 0%, #0e0b12e6 75%); }
#screen.on { display: flex; flex-direction: column; align-items: center; justify-content: center; }
#screen .logo { height: 4.4vw; margin-bottom: 1vw; }
#screen h1 { font: 400 10vw/0.9 var(--title); margin: 1vw 0; color: #fff; text-shadow: .5vw .5vw 0 #c25a3c, 1vw 1vw 0 #1b1420; }
#screen h2 { font: 400 3.4vw/1 var(--title); color: #fff; margin: 0 0 1.2vw; }
#screen .t0 { font: 1.6vw var(--body); color: #cfc3aa; letter-spacing: .08em; }
#screen .t2 { font: 400 3.2vw var(--title); color: var(--amber); }
#screen button { font: 400 2vw var(--title); cursor: pointer; border: .25vw solid var(--ink); }
#screen button.go { margin-top: 2vw; background: var(--amber); color: var(--ink); padding: .7vw 2.2vw; box-shadow: .4vw .4vw 0 #00000088; }
#screen.title button.go { animation: blink 1.2s steps(2) infinite; }
#screen button.alt { margin-top: 1vw; background: transparent; color: #cfc3aa; border-color: #cfc3aa55; font: 1.6vw var(--body); padding: .3vw 1.2vw; }
/* join */
.joinbox { display: grid; grid-template-columns: 26vw 36vw 26vw; gap: 2.2vw; align-items: start; text-align: left; }
.joinbox .col { background: #1d1724e6; border: .28vw solid var(--ink); box-shadow: 0 0 0 .28vw #f6efdc22; padding: 1.4vw; }
.joinbox .qr img, .joinbox .qr .ph { width: 100%; aspect-ratio: 1; display: grid; place-items: center; background: #fff; color: #000; font: 3vw var(--title); image-rendering: pixelated; }
.joinbox .qr .ph small { font: 1.2vw var(--body); }
.joinbox .url { font: 1.7vw var(--body); color: var(--amber); margin-top: .8vw; word-break: break-all; }
.joinbox .count { font: 1.9vw var(--body); margin-top: .4vw; }
.joinbox .count b { color: var(--green); font-weight: normal; font-size: 2.6vw; }
.joinbox .how ul { margin: 0; padding-left: 1.3vw; }
.joinbox .how li { font: 1.75vw/1.12 var(--body); margin-bottom: .7vw; }
.joinbox .how li b { color: var(--amber); font-weight: normal; }
.joinbox .names { margin-top: .6vw; display: flex; flex-wrap: wrap; gap: .4vw; }
.joinbox .names span { font: 1.3vw var(--body); background: #ffffff14; padding: .1vw .5vw; animation: tagIn .3s steps(3); }
.joinbox h3 { font: 400 2.2vw/1 var(--title); color: var(--amber); margin: 0 0 .5vw; }
.joinbox ol { margin: 0 0 1.2vw; padding: 0; list-style: none; counter-reset: r; }
.joinbox ol li { counter-increment: r; display: grid; grid-template-columns: 2vw 1fr auto; gap: .4vw; font: 1.6vw/1.2 var(--body); }
.joinbox ol li::before { content: counter(r) "."; color: #8f8570; }
.joinbox ol li span { display: none; }
.joinbox ol li i { font-style: normal; color: var(--green); }
.joinbox ol li.empty { display: block; color: #8f8570; }
.joinbox ol li.empty::before { content: ""; }
#screen .hint { margin-top: 1.6vw; font: 2vw var(--body); animation: blink 1.2s steps(2) infinite; }
/* pick */
#screen.pick { justify-content: flex-start; padding: 3vh 2vw 4vh; }
#screen .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1vw; width: min(80vw, 1100px); }
#screen .grid .co { display: flex; flex-direction: column; align-items: center; gap: .5vw; background: #1d1724; color: #fff; padding: .8vw; font: 400 1.5vw var(--title); }
#screen .grid .co .lg { width: 100%; height: 4.4vw; background: #fff; display: flex; align-items: center; justify-content: center; padding: .4vw; overflow: hidden; box-sizing: border-box; }
#screen .grid .co .lg.dark { background: #00173c; }
#screen .grid .co .lg img { width: 100%; height: 100%; object-fit: contain; display: block; }
#screen .grid .co small { font: 1.2vw var(--body); color: var(--amber); }
#screen .grid.people { grid-template-columns: repeat(3, 1fr); }
#screen .grid .co .pp { height: 9vw; }
#screen img.big { height: 26vh; margin: 1vw 0; }
#screen .who b { display: block; font: 400 3vw var(--title); }
#screen .who span { font: 2vw var(--body); color: var(--amber); }
#screen label.name { display: block; margin-top: 1vw; font: 2vw var(--body); }
#screen label.name input { display: block; margin: .4vw auto 0; font: 2.2vw var(--body); padding: .3vw .8vw; width: 22vw; border: .25vw solid var(--ink); background: #f6efdc; color: var(--ink); text-align: center; }

/* ── Visitor HUD + action button ── */
#hud { position: fixed; left: 1vw; top: 1vh; z-index: 14; display: none; gap: .8vw; }
#hud.on { display: flex; }
#hud > div { background: #1d1724e0; border: .2vw solid var(--ink); padding: .3vw .7vw; font: 1.4vw/1.15 var(--body); }
#hud .me b { font: 400 1.6vw var(--title); margin-right: .5vw; }
#hud .me span { color: #cfc3aa; margin-right: .5vw; }
#hud .me i { font-style: normal; color: var(--green); }
#hud .build span { display: block; color: #ffd9c9; }
#hud .build em { display: block; height: .5vw; background: #ffffff22; margin: .2vw 0; position: relative; }
#hud .build em::after { content: ""; position: absolute; inset: 0; width: var(--p); background: #d97757; }
#hud .build small { color: #8f8570; }
#action { position: fixed; right: 5vw; bottom: 6vh; z-index: 30; display: none; font: 400 5vw var(--title); background: var(--amber); color: var(--ink); border: .6vw solid var(--ink); padding: 2vw 4vw; box-shadow: 1vw 1vw 0 #00000088; }
#action.on { display: block; }

/* ── Minigame overlay ── */
#game { position: fixed; inset: 0; z-index: 45; display: none; background: #0e0b12cc; align-items: center; justify-content: center; }
#game.on { display: flex; }
#game .gcard { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: .28vw solid var(--ink); box-shadow: 0 0 0 .28vw #f6efdc22; padding: 1.6vw 2vw; width: min(46vw, 900px); text-align: center; }
#game .kicker { font: 1.5vw var(--body); color: var(--amber); text-transform: uppercase; letter-spacing: .08em; }
#game h2 { font: 400 3.4vw/1 var(--title); margin: .4vw 0 .6vw; }
#game .sub, #game .q { font: 2vw/1.1 var(--body); margin: 0 0 1vw; }
#game canvas { height: 38vh; image-rendering: pixelated; background: #1d1724; }
#game canvas#gf-cv { height: auto; width: 100%; max-width: 64vh; }
#game canvas#tn-cv { height: 50vh; }
#game .res { font: 1.9vw var(--body); color: var(--green); margin: .6vw 0; }
#game button { font: 400 2vw var(--title); cursor: pointer; border: .25vw solid var(--ink); }
#game button.hold { background: var(--amber); color: var(--ink); padding: 1vw 3vw; user-select: none; -webkit-user-select: none; touch-action: none; }
#game button.alt { display: block; margin: 1vw auto 0; background: transparent; color: #cfc3aa; border-color: #cfc3aa55; font: 1.5vw var(--body); }
#game .opts { display: grid; grid-template-columns: 1fr 1fr; gap: .8vw; }
#game .opt { background: #2a2133; color: #fff; padding: 1vw; font: 2vw var(--body) !important; }
#game .opt.good { background: #2f6b3a; }
#game .opt.bad { background: #8a2a2a; }
#game .opt.dim { opacity: .5; }

/* card extras */
#card ol.board { list-style: none; padding: 0; margin: .4vw 0 .8vw; }
#card ol.board li { display: grid; grid-template-columns: 3vw 1fr auto; gap: .6vw; font: 1.9vw/1.25 var(--body); }
#card ol.board li b { color: var(--amber); font-weight: normal; }
#card ol.board li i { font-style: normal; color: var(--green); }
#card .motto { margin: 1vw 0; padding: .8vw; background: #8f8b86; color: #3a3734; text-align: center; font: 400 3vw/1 var(--title); letter-spacing: .1em; border-radius: 3vw 3vw .3vw .3vw; }

@media (orientation: portrait) {
  #screen .logo { height: 10vw; } #screen h1 { font-size: 20vw; } #screen h2 { font-size: 8vw; } #screen .t0 { font-size: 3.6vw; } #screen .t2 { font-size: 7vw; }
  #screen button { font-size: 6vw; } #screen button.alt { font-size: 4.4vw; }
  #screen .grid { grid-template-columns: repeat(2, 1fr); width: 92vw; gap: 2.4vw; } #screen .grid .co { font-size: 4.6vw; padding: 2vw; } #screen .grid .co .lg { height: 12vw; }
  #screen .grid.people { grid-template-columns: repeat(2, 1fr); } #screen .grid .co .pp { height: 24vw; } #screen .grid .co small { font-size: 3.6vw; }
  #screen label.name { font-size: 5vw; } #screen label.name input { font-size: 6vw; width: 70vw; } #screen .who b { font-size: 8vw; } #screen .who span { font-size: 5vw; }
  #hud { left: 2vw; right: 2vw; top: 1vh; flex-direction: column; gap: 1vw; } #hud > div { font-size: 3.8vw; } #hud .me b { font-size: 4.6vw; } #hud .build em { height: 1.4vw; }
  #game .gcard { width: 94vw; padding: 4vw; } #game h2 { font-size: 9vw; } #game .kicker { font-size: 3.6vw; } #game .sub, #game .q { font-size: 5vw; } #game .res { font-size: 5vw; }
  #game button { font-size: 6vw; } #game button.alt { font-size: 4.4vw; } #game .opt { font-size: 5vw !important; padding: 3vw; } #game canvas { height: 34vh; } #game canvas#gf-cv { height: auto; width: 100%; } #game canvas#tn-cv { height: 46vh; }
  #toast { max-width: 92vw; right: 4vw; top: auto; bottom: 22vh; } #toast span { font-size: 4.4vw; } #toast b { font-size: 3.6vw; }
  #herald { top: auto; bottom: 3vh; transform: translate(-50%, 160%); max-width: 94vw; width: 94vw; } #herald.on { transform: translate(-50%, 0); }
  #screen .grid .co .lg { height: 14vw; padding: 1.4vw; }
  .joinbox { grid-template-columns: 1fr; }
}

/* ── landmark minigames ── */
#game .facade { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2vw 1.6vw; padding: 1.6vw 2.4vw 4vw; margin: 0 auto 1vw; width: 70%;
  background: #e9b9b4; border-top: 1.2vw solid #566172; box-shadow: inset 0 -.6vw 0 #d49c97; }
#game .win { aspect-ratio: 3 / 4; background: #3e4a5e; border: .5vw solid #fbf4ee !important; cursor: pointer; padding: 0; }
#game .win.on { background: #ffd86b; box-shadow: 0 0 2vw #ffd86b; }
#game .facade .gate { position: absolute; left: 50%; bottom: 0; width: 12%; height: 3.4vw; transform: translateX(-50%); background: #3a2b24; border-radius: 3vw 3vw 0 0; }
#game .pair { display: flex; gap: 1.2vw; justify-content: center; }
#game .swirl { display: flex; justify-content: center; gap: .5vw; margin: 1.2vw 0 1.4vw; min-height: 4.4vw; }
#game .swirl span { display: inline-block; font: 400 3.8vw/1 var(--title); color: #ffb400; background: #0b0d10; padding: .2vw .6vw; border: .15vw solid #39ff6a55; }
@media (orientation: portrait) {
  #game .facade { width: 92%; gap: 3vw 3vw; padding: 4vw 5vw 10vw; } #game .facade .gate { height: 8vw; }
  #game .swirl span { font-size: 7vw; padding: .6vw 1.4vw; } #game .swirl { gap: 1vw; flex-wrap: wrap; }
  #game .pair button { flex: 1; padding: 5vw 2vw; }
}

/* ── join screen: the hacked leaderboard ── */
.joinbox .lb h3.glitch { color: #39ff6a; text-shadow: .2vw 0 #ff3ea5, -.2vw 0 #3ad1ff; }
.joinbox ol li.hack { color: #39ff6a; } .joinbox ol li.hack i { color: #39ff6a; }
.joinbox ol li.hack::before { content: '#'; color: #ff3ea5; }
.joinbox ol li b { font-weight: normal; }

/* ── minigame counter + list ── */
#hud .games { font: 400 1.5vw var(--title); background: var(--amber); color: var(--ink); border: .2vw solid var(--ink); padding: .2vw .7vw; cursor: pointer; }
#gamelist { position: fixed; left: 1vw; top: 6vh; z-index: 16; display: none; background: #1d1724f2; border: .28vw solid var(--ink); box-shadow: 0 0 0 .28vw #f6efdc22; padding: 1vw 1.4vw; width: min(34vw, 700px); }
#gamelist.on { display: block; }
#gamelist h3 { font: 400 2.2vw/1 var(--title); color: var(--amber); margin: 0 0 .6vw; }
#gamelist ul { list-style: none; margin: 0; padding: 0; }
#gamelist li { display: grid; grid-template-columns: 1fr auto; gap: 0 .8vw; padding: .3vw 0; border-bottom: .1vw solid #ffffff14; font: 1.5vw/1.1 var(--body); }
#gamelist li b { font: 400 1.6vw var(--title); color: #fff; } #gamelist li span { grid-column: 1; color: #cfc3aa; } #gamelist li i { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; color: #8f8570; }
#gamelist li.done b { color: var(--green); } #gamelist li.done i { color: var(--green); }
#gamelist small { display: block; margin-top: .6vw; font: 1.2vw var(--body); color: #8f8570; }
#game-canvas { transition: transform .12s linear; }
@media (orientation: portrait) {
  #hud .games { font-size: 4.2vw; padding: 1vw 2vw; }
  #gamelist { left: 2vw; right: 2vw; top: 17vh; width: auto; padding: 3vw 4vw; }
  #gamelist h3 { font-size: 6vw; } #gamelist li { font-size: 4vw; } #gamelist li b { font-size: 4.6vw; } #gamelist small { font-size: 3.4vw; }
}

/* sidekick choice, board letters, quiz leaderboard */
#screen .kick { display: flex; gap: .6vw; justify-content: center; align-items: center; margin: .6vw 0; font: 1.8vw var(--body); flex-wrap: wrap; }
#screen .kick .sk { display: flex; flex-direction: column; align-items: center; gap: .2vw; background: #1d1724; color: #cfc3aa; padding: .4vw .6vw; font: 1.3vw var(--body); border: .25vw solid transparent; }
#screen .kick .sk img { height: 3.4vw; }
#screen .kick .sk.on { border-color: var(--amber); color: #fff; background: #2a2133; }
#game .swirl span.fix { color: #39ff6a; border-color: #39ff6a; }
#game .swirl span.gl { color: #ff4fd8; border-color: #ff4fd855; text-shadow: .15vw 0 #3ad1ff, -.15vw 0 #ff3a3a; animation: gl .18s steps(2) infinite; }
@keyframes gl { 50% { opacity: .7; text-shadow: -.15vw 0 #3ad1ff, .15vw 0 #ff3a3a; } }
#game ol.qboard { list-style: none; counter-reset: q; margin: .4vw auto 1vw; padding: 0; width: 70%; text-align: left; }
#game ol.qboard li { counter-increment: q; display: grid; grid-template-columns: 2.4vw 1fr auto; font: 1.8vw/1.3 var(--body); }
#game ol.qboard li::before { content: counter(q) '.'; color: #8f8570; }
#game ol.qboard li b { font-weight: normal; } #game ol.qboard li i { font-style: normal; color: var(--green); }
.joinbox ol#join-quiz li { grid-template-columns: 2vw 1fr auto; }
@media (orientation: portrait) {
  #screen .kick { font-size: 4.4vw; gap: 1.6vw; } #screen .kick .sk { font-size: 3.4vw; padding: 1vw 1.4vw; } #screen .kick .sk img { height: 9vw; }
  #game ol.qboard { width: 92%; } #game ol.qboard li { font-size: 4.6vw; grid-template-columns: 7vw 1fr auto; }
}

/* ── minimap ── */
#minimap { position: fixed; right: 1vw; bottom: 1.6vh; z-index: 13; display: none; width: 17vw; image-rendering: pixelated; border: .25vw solid var(--ink); box-shadow: 0 0 0 .25vw #f6efdc22, .4vw .4vw 0 #00000066; cursor: pointer; }
#minimap.on { display: block; }
#minimap.big { width: 42vw; }
@media (orientation: portrait) {
  #minimap { width: 40vw; right: 2vw; bottom: auto; top: 16vh; border-width: .8vw; }
  #minimap.big { width: 94vw; }
}

/* ── bojovka: a dark maze ── */
#game .gcard.bojovka.dark { background: #050409; width: min(94vw, 118vh); padding: 1vw 1.4vw; }
#game .bj-wrap { position: relative; }
#game canvas#bj-cv { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; image-rendering: auto; background: #050409; }
#bj-q { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
#bj-q.on { display: flex; }
#game .bj-card { background: rgba(8, 6, 14, .94); border: .25vw solid var(--c); box-shadow: 0 0 2.4vw var(--c); padding: 1.2vw 1.6vw; width: 82%; }
#game .bj-card .bj-f { font: 400 3.4vw/1 var(--title); color: var(--c); text-shadow: 0 0 1vw var(--c); margin-bottom: .6vw; }
#game .bj-card p { font: 2.1vw/1.1 var(--body); margin: 0 0 1vw; }
#game .bj-card .opt small { opacity: .45; margin-right: .4vw; }
@media (orientation: portrait) {
  #game .gcard.bojovka.dark { width: 98vw; padding: 2vw; }
  #game .bj-card { width: 94%; padding: 3vw; } #game .bj-card .bj-f { font-size: 8vw; } #game .bj-card p { font-size: 4.6vw; }
}