/* Bramble: storybook woodcut. Lichen board, bark panels, parchment ink.
   Colour only comes from the four factions and the four suits. */
:root {
  --bark: #2e251d; --bark-2: #3a2f25; --bark-3: #4a3c2f; --line: #5a4a3a;
  --ink: #f0e6cf; --ink-2: #cdbf9f; --muted: #a8977a;
  --lichen: #c8bf8a; --moss: #5f7244; --chalk: #efe2bd; --clearing: #efe3c2;
  --gold: #e3b45a; --warn: #e48a62; --ok: #9cc27a;
  --badgers: #d9772b; --crows: #4a6fb5; --hedgehogs: #4f9a52; --drifter: #8d8a83;
  --acorn: #c27a2c; --berry: #b23a55; --fern: #4c8a3e; --feather: #5b7299;
  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans: "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  /* the kit's lobby and chat */
  --kit-bg: var(--bark-2); --kit-ink: var(--ink); --kit-muted: var(--muted); --kit-line: var(--line);
  --kit-accent: var(--gold); --kit-on-accent: var(--bark); --kit-font: var(--sans); --kit-display: var(--serif);
  --kit-p0: #d9772b; --kit-p1: #4a6fb5; --kit-p2: #4f9a52; --kit-p3: #8d8a83;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; background: var(--bark); color: var(--ink); font: 17px/1.5 var(--sans); }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--serif); font-weight: 800; line-height: 1.15; margin: 0; }
h2 { font-size: 1.35rem; margin-bottom: 10px; }
h3 { font-size: 1.05rem; margin-bottom: 6px; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.error { color: var(--warn); min-height: 1.4em; margin: 8px 0 0; }
button, input, select { font: inherit; color: var(--ink); background: var(--bark-2); border: 1px solid var(--line); border-radius: 7px; padding: 7px 13px; min-height: 38px; }
button { cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--gold); }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.primary { background: var(--gold); color: var(--bark); border-color: var(--gold); font-weight: 700; }
.primary:hover:not(:disabled) { background: #f0c46c; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; color: var(--muted); margin-top: 12px; font-size: .95rem; }

/* ---------- title ---------- */
#title { max-width: 1180px; margin: 0 auto; padding: 0 16px 60px; }
.hero { position: relative; height: 340px; overflow: hidden; border-radius: 0 0 18px 18px; }
#heroMap { position: absolute; inset: -40px -20px; width: calc(100% + 40px); height: calc(100% + 80px); opacity: .62; filter: saturate(.8); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46,37,29,.1) 20%, rgba(46,37,29,.92) 92%); }
.hero-text { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 1; padding: 0 8px; }
.hero h1 { font-size: clamp(4rem, 13vw, 8.5rem); letter-spacing: -.02em; color: var(--chalk); text-shadow: 0 3px 0 #2e251d, 0 0 30px rgba(0,0,0,.4); line-height: .9; }
.tag { font-family: var(--serif); font-style: italic; font-size: 1.2rem; max-width: 38em; color: var(--ink); margin-top: 10px; }
.title-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-top: 22px; }
.title-grid > .panel:first-child { grid-row: span 2; }
.panel { background: var(--bark-2); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.seat-head { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; color: var(--muted); font-size: .9rem; padding-left: 34px; }
.seats { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.seats li { display: grid; grid-template-columns: 26px 1fr 1fr; gap: 8px; align-items: center; }
.seats .emb { width: 26px; height: 26px; }
#joinForm input { flex: 1; min-width: 120px; text-transform: uppercase; letter-spacing: .12em; }

/* ---------- hand-off ---------- */
#handoff { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.handoff-card { text-align: center; background: var(--bark-2); border: 1px solid var(--line); border-radius: 14px; padding: 34px 28px; max-width: 420px; }
.handoff-card h2 { font-size: 2rem; margin: 12px 0; }
#handoffIcon svg { width: 72px; height: 72px; }

/* ---------- lobby ---------- */
#lobby { margin: 24px auto; width: calc(100% - 32px); }

/* ---------- play: the painted map fills the screen, the HUD floats over it ---------- */
#play { position: fixed; inset: 0; overflow: hidden; background: #3a3a30; }
.stage { position: absolute; inset: 0; }
.stage::before { content: ""; position: absolute; inset: -40px; background: #4b5a3a url("art/map/hollowmere.webp") center / cover; filter: blur(14px) brightness(.55); }
#board { position: relative; display: block; width: 100%; height: 100%; }
.clearing { cursor: default; }
.clearing .hit { fill: transparent; }
.clearing.hot { cursor: pointer; }
.clearing .hot-ring { fill: rgba(255,248,225,.14); stroke: #fff8e1; stroke-width: 5; stroke-dasharray: 14 9; filter: drop-shadow(0 0 6px rgba(255,236,170,.9)); animation: march 1.6s linear infinite; }
@keyframes march { to { stroke-dashoffset: -46; } }
.clearing .slot { fill: rgba(40,28,16,.28); stroke: rgba(255,244,214,.75); stroke-width: 2; stroke-dasharray: 4 3; }
.clearing .plaque rect { fill: rgba(243,230,196,.92); stroke: #5a4630; stroke-width: 1.5; }
.clearing .plaque text { font: 600 15px var(--serif); fill: #2e251d; text-anchor: middle; }
.clearing .wcount { font: 800 13px var(--sans); fill: #1c140d; text-anchor: middle; pointer-events: none; }
.clearing .tcount { font: 700 10px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; }
.clearing.hot:hover .hot-ring, .clearing.hot:focus .hot-ring { fill: rgba(255,248,225,.3); }
.path-last { stroke-width: 8; stroke-linecap: round; opacity: .9; stroke-dasharray: 14 9; }
.forest-hot { fill: rgba(255,240,190,.22); stroke: #fff8e1; stroke-width: 4; stroke-dasharray: 10 7; cursor: pointer; }
.forest-hot:hover { fill: rgba(255,240,190,.4); }
@media (prefers-reduced-motion: reduce) { .clearing .hot-ring { animation: none; } }

/* parchment and wood, shared by the HUD pieces */
.scroll, .pick, .roundbtn, .act, .round, .me-info, .pl-score, .pl-cards {
  background: linear-gradient(180deg, #f6ead0, #e3cf9f); color: #2e251d; border: 2px solid #4a3826;
  box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.35);
}
.hud-top { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: min(780px, calc(100vw - 330px)); z-index: 6; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.scroll { position: relative; border-radius: 4px; padding: 8px 34px; font: 1.06rem/1.35 var(--serif); text-align: center; border-bottom: 4px solid var(--who, #6b5a3f); max-width: 100%; }
.scroll::before, .scroll::after { content: ""; position: absolute; top: -6px; bottom: -6px; width: 16px; border-radius: 8px; background: linear-gradient(90deg, #b99a64, #ead6a6 50%, #a6864f); border: 2px solid #4a3826; }
.scroll::before { left: -10px; } .scroll::after { right: -10px; }
.scroll .emb { vertical-align: -7px; margin-right: 4px; }
.scroll .glyph { vertical-align: -5px; }
.scroll i { color: #6b4f2a; }
.picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-height: 30vh; overflow: auto; padding: 4px; }
.pick { border-radius: 8px; padding: 5px 12px; min-height: 34px; font: 600 .95rem var(--sans); display: inline-flex; align-items: center; gap: 5px; }
.pick:hover { background: #fff6dc; border-color: #2e251d; }
.pick.primary { background: linear-gradient(180deg, #f2c66b, #d99b32); }
.pick.quiet { opacity: .85; font-weight: 500; }
.pick-note { color: var(--ink); background: rgba(46,37,29,.85); border-radius: 8px; padding: 6px 10px; }
.hud-error { background: rgba(120,30,20,.92); color: #fff; padding: 5px 12px; border-radius: 8px; margin: 0; font-size: .95rem; }

.plaques { position: absolute; left: 12px; top: 12px; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; z-index: 5; }
.plaque-btn { position: relative; background: none; border: none; padding: 0; min-height: 0; display: block; width: 64px; height: 64px; }
.plaque-btn .emb { box-shadow: 0 0 0 3px #2e251d, 0 0 0 5px var(--f), 0 6px 12px rgba(0,0,0,.5); }
.plaque-btn.now .emb { box-shadow: 0 0 0 3px #2e251d, 0 0 0 5px var(--gold), 0 0 16px 4px rgba(255,214,120,.8); }
.pl-score { position: absolute; right: -10px; bottom: -4px; min-width: 28px; height: 26px; padding: 0 5px; border-radius: 13px; display: grid; place-items: center; font: 800 .95rem var(--sans); }
.pl-cards { position: absolute; left: -6px; bottom: -6px; height: 22px; padding: 0 5px; border-radius: 11px; display: inline-flex; align-items: center; gap: 2px; font: 700 .78rem var(--sans); }

.corner-buttons { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; align-items: center; z-index: 6; }
.roundbtn { width: 42px; height: 42px; min-height: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; font: 700 1.15rem var(--serif); }
.roundbtn:hover { background: #fff6dc; border-color: #2e251d; }
.round { border-radius: 14px; padding: 3px 10px; font: 600 .9rem var(--serif); margin-right: 4px; }

.me { position: absolute; left: 12px; bottom: 12px; z-index: 5; }
.me-btn { background: none; border: none; padding: 0; display: flex; align-items: flex-end; gap: 0; min-height: 0; }
.me-btn .emb { box-shadow: 0 0 0 4px #2e251d, 0 0 0 7px var(--f), 0 8px 16px rgba(0,0,0,.5); position: relative; z-index: 1; }
.me-btn.now .emb { box-shadow: 0 0 0 4px #2e251d, 0 0 0 7px var(--gold), 0 0 22px 6px rgba(255,214,120,.75); }
.me-info { display: grid; text-align: left; padding: 4px 12px 4px 18px; margin-left: -12px; border-radius: 0 10px 10px 0; font: .88rem/1.25 var(--sans); }
.me-info b { font: 800 1rem var(--serif); }
.me-vp { font-weight: 700; }
.me-extra { display: flex; align-items: center; gap: 3px; }

.hand { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 150px; width: 10px; z-index: 7; }
.card { position: absolute; bottom: -44px; left: 0; width: 138px; height: 200px; margin-left: calc(-69px + var(--i) * 92px);
  transform: rotate(calc(var(--i) * 3deg)) translateY(calc(var(--i) * var(--i) * 2.5px)); transform-origin: 50% 120%;
  border-radius: 10px; background: #f3e9d0; color: var(--bark); border: 2px solid #1f1913; padding: 0; text-align: left;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,.5); font-family: var(--sans); min-height: 0; }
.card .art { position: relative; height: 92px; flex: none; background-color: var(--s); background-position: center; background-size: cover; border-bottom: 3px solid var(--s); }
.card .suit { position: absolute; left: 5px; top: 5px; width: 26px; height: 26px; border-radius: 50%; background: var(--s); display: grid; place-items: center; border: 2px solid #f3e9d0; }
.card .cost { position: absolute; right: 4px; top: 4px; background: rgba(243,233,208,.95); border-radius: 10px; padding: 1px 5px; display: flex; gap: 1px; align-items: center; }
.card .anysuit { font-size: .8rem; color: #6a5a45; }
.card .name { padding: 4px 7px 0; font: 700 .9rem/1.12 var(--serif); }
.card .kind { padding: 0 7px; font-size: .72rem; color: #6a5a45; }
.card .text { padding: 2px 7px 6px; font-size: .72rem; line-height: 1.25; display: none; }
.card.usable { cursor: pointer; }
.card.unusable { filter: saturate(.75); }
.card:hover, .card:focus-visible, .card.sel { z-index: 3; transform: translateY(-74px) scale(1.18); height: 228px; }
.card:hover .text, .card:focus-visible .text, .card.sel .text { display: block; }
.card.sel { outline: 4px solid var(--gold); outline-offset: 1px; }
@media (prefers-reduced-motion: no-preference) { .card { transition: transform .14s, height .14s; } }

.tray { position: absolute; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; align-items: flex-end; gap: 8px; max-width: min(430px, 40vw); z-index: 6; }
.act { width: 64px; height: 64px; min-height: 0; border-radius: 50%; padding: 0; position: relative; display: grid; place-items: center; }
.act .act-ic { display: grid; place-items: center; color: #3a2c1c; }
.act .act-label { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 3px); white-space: nowrap; font: 700 .72rem var(--sans); color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; pointer-events: none; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.act:hover { background: #fff6dc; border-color: #2e251d; transform: translateY(-2px); }
.act.done { width: 90px; height: 90px; background: linear-gradient(180deg, #f2c66b, #d18d26); }
.act.done .act-ic { color: #2e251d; }
.act.back { width: 46px; height: 46px; font: 800 1.2rem var(--sans); color: #6b2a1a; }
.tray .act { margin-bottom: 16px; }

.drawer { position: absolute; left: 0; top: 0; bottom: 0; width: min(440px, 94vw); background: rgba(46,37,29,.97); border-right: 2px solid #1f1913; box-shadow: 8px 0 30px rgba(0,0,0,.5); overflow: auto; padding: 14px 14px 30px; z-index: 20; }
.drawer-close { position: sticky; top: 0; float: right; z-index: 1; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: -1px; }
.tabs button { min-height: 32px; padding: 3px 10px; border-radius: 8px 8px 0 0; border-bottom: none; display: inline-flex; gap: 5px; align-items: center; font-size: .92rem; }
.tabs button[aria-selected="true"] { background: var(--bark-3); border-color: var(--f, var(--gold)); }
.faction-board { background: var(--bark-3); border: 1px solid var(--line); border-radius: 0 10px 10px 10px; padding: 14px; font-size: .95rem; }
.faction-board h3 { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; }
.faction-board .blurb { color: var(--ink-2); font-style: italic; font-family: var(--serif); }
.fb-row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0; color: var(--ink-2); }
.fb-row b { color: var(--ink); }
.track { display: grid; grid-template-columns: 104px repeat(var(--n, 6), 1fr); gap: 3px; align-items: center; margin: 4px 0; font-size: .82rem; }
.track .cell { height: 34px; border-radius: 5px; border: 1px solid var(--line); display: grid; place-items: center; line-height: 1.05; text-align: center; color: var(--ink-2); }
.track .cell.on { background: var(--f); color: #fff; border-color: transparent; }
.track .cell.next { border-color: var(--gold); color: var(--ink); }
.track .cell small { display: block; font-size: .72rem; color: inherit; opacity: .85; }
.edict { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 8px 0; }
.edict .col { background: rgba(0,0,0,.18); border-radius: 7px; padding: 5px; min-height: 70px; }
.edict .col.cur { outline: 2px solid var(--gold); }
.edict .col > div:first-child { font-size: .8rem; color: var(--muted); margin-bottom: 4px; }
.mini { display: flex; align-items: center; gap: 4px; background: var(--s); color: #fff; border-radius: 5px; padding: 1px 5px; margin-bottom: 3px; font-size: .78rem; line-height: 1.3; }
.mini.done { opacity: .45; }
.items { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.item { width: 46px; text-align: center; font-size: .7rem; color: var(--ink-2); }
.item .ic { width: 40px; height: 40px; margin: 0 auto 2px; border-radius: 8px; background: var(--chalk); color: var(--bark); display: grid; place-items: center; border: 2px solid transparent; }
.item.ex .ic { transform: rotate(90deg); opacity: .65; }
.item.dmg .ic { border-color: var(--warn); background: #e9c6b5; }
.rels { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 6px 0; }
.rel-hostile { color: var(--warn); font-weight: 700; }
.quests { display: grid; gap: 4px; margin: 6px 0; }
.quest { border-left: 4px solid var(--s); padding: 2px 8px; background: rgba(0,0,0,.18); border-radius: 4px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.lasting { display: flex; flex-wrap: wrap; gap: 4px; }

.dice { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); background: rgba(46,37,29,.94); border: 2px solid var(--gold); border-radius: 12px; padding: 10px 16px; display: flex; gap: 14px; align-items: center; font-size: .95rem; z-index: 8; }
.die { width: 48px; height: 48px; border-radius: 9px; background: var(--chalk); color: var(--bark); display: grid; place-items: center; font: 800 1.7rem var(--serif); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.die.att { outline: 3px solid var(--a); } .die.def { outline: 3px solid var(--d); }
.banner { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); background: linear-gradient(180deg, #f6ead0, #e3cf9f); color: #2e251d; border: 2px solid #4a3826; padding: 10px 22px; border-radius: 8px; font: 700 1.3rem var(--serif); z-index: 8; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.5); }

/* tall screens (phones): map under the scroll, controls below the map */
#play.portrait .stage { top: 58px; bottom: auto; }
#play.portrait .hud-top { width: calc(100vw - 12px); top: 4px; }
#play.portrait .scroll { font-size: .9rem; padding: 5px 20px; line-height: 1.3; }
#play.portrait .scroll::before, #play.portrait .scroll::after { width: 12px; }
#play.portrait .picker { max-height: 34vh; }
#play.portrait .plaques { top: calc(66px + var(--mapH)); left: 8px; display: flex; gap: 12px; }
#play.portrait .plaque-btn { width: 46px; height: 46px; }
#play.portrait .plaque-btn .emb { width: 46px !important; height: 46px !important; }
#play.portrait .corner-buttons { top: calc(70px + var(--mapH)); right: 8px; }
#play.portrait .round { display: none; }
#play.portrait .roundbtn { width: 36px; height: 36px; font-size: 1rem; }
#play.portrait .me { top: calc(136px + var(--mapH)); bottom: auto; left: 8px; }
#play.portrait .me-btn .emb { width: 58px !important; height: 58px !important; }
#play.portrait .me-info { font-size: .8rem; }
#play.portrait .tray { top: calc(130px + var(--mapH)); bottom: auto; right: 8px; max-width: calc(100vw - 150px); gap: 6px; flex-wrap: wrap; align-items: flex-start; }
#play.portrait .act { width: 48px; height: 48px; margin-bottom: 14px; }
#play.portrait .act .act-ic svg { width: 24px; height: 24px; }
#play.portrait .act.done { width: 62px; height: 62px; }
#play.portrait .act.back { width: 40px; height: 40px; }
#play.portrait .act .act-label { font-size: .62rem; }
#play.portrait .hand { height: 120px; }
#play.portrait .card { width: 108px; height: 160px; bottom: -42px; margin-left: calc(-54px + var(--i) * 62px); }
#play.portrait .card .art { height: 70px; }
#play.portrait .dice { top: calc(20px + var(--mapH) / 2); font-size: .82rem; padding: 8px 10px; gap: 8px; }
#play.portrait .die { width: 38px; height: 38px; font-size: 1.3rem; }
@media (hover: none) { .card:hover:not(.sel) { transform: rotate(calc(var(--i) * 3deg)) translateY(calc(var(--i) * var(--i) * 2.5px)); height: 200px; } .card:hover:not(.sel) .text { display: none; } }
#play.portrait .card.sel { transform: translateY(-120px) scale(1.3); height: 210px; }

.log-drawer { position: fixed; right: 12px; top: 64px; width: min(440px, calc(100vw - 24px)); max-height: 60vh; overflow: auto; background: var(--bark-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; z-index: 20; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.log-drawer ol { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.log-drawer li { padding: 3px 0 3px 10px; border-left: 3px solid var(--f, transparent); margin-bottom: 2px; color: var(--ink-2); }
.log-drawer li.turn { color: var(--ink); font-family: var(--serif); font-weight: 600; margin-top: 6px; }

.rules { max-width: 760px; width: calc(100vw - 32px); max-height: calc(100vh - 40px); background: var(--bark-2); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px; }
.rules::backdrop { background: rgba(20,15,10,.7); }
.rules-close { position: sticky; top: 0; float: right; }
.rules h2 { font-size: 1.7rem; }
.rules h3 { margin-top: 18px; display: flex; gap: 8px; align-items: center; }
.rules p, .rules li { max-width: 68ch; line-height: 1.6; font-family: var(--serif); font-size: 1.02rem; }

.glyph { vertical-align: -3px; flex: none; }
.emb { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--f); flex: none; position: relative; overflow: hidden; }
.emb svg { width: 80%; height: 80%; }
.emb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

@media (max-width: 980px) {
  .title-grid { grid-template-columns: 1fr; }
  .title-grid > .panel:first-child { grid-row: auto; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero { height: 250px; }
  .seats li { grid-template-columns: 22px 1fr; }
  .seats li > :last-child { grid-column: 2; }
  .seat-head { display: none; }
}

/* ---------- Midjourney pictures ---------- */
.powers { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.powers li { background: var(--bark-2); border: 1px solid var(--line); border-top: 4px solid var(--f); border-radius: 12px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.powers img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; display: block; }
.powers div { padding: 10px 12px 12px; }
.powers h3 { display: flex; align-items: center; gap: 6px; font-size: 1.05rem; margin-bottom: 4px; }
.powers p { color: var(--ink-2); font: italic .95rem/1.4 var(--serif); margin: 0; }
@media (max-width: 980px) { .powers { grid-template-columns: repeat(2, 1fr); } }

.fb-portrait { margin: -14px -14px 10px; height: 200px; overflow: hidden; border-bottom: 4px solid var(--f); border-radius: 0 10px 0 0; }
.fb-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }

.handoff-portrait img ~ .emb { display: none; }
.handoff-portrait img { width: 220px; height: 292px; object-fit: cover; border-radius: 12px; border: 3px solid #1f1913; box-shadow: 0 10px 24px rgba(0,0,0,.5); }

.victory { position: absolute; inset: 0; z-index: 30; background: rgba(20,15,10,.72); display: grid; place-items: center; padding: 16px; }
.victory-card { width: min(980px, 100%); background: var(--bark-2); border: 3px solid var(--f, var(--gold)); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.victory-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.victory-text { padding: 14px 20px 18px; text-align: center; }
.victory-text h2 { font-size: clamp(1.4rem, 4vw, 2.2rem); }
.victory-text p { color: var(--ink-2); font-family: var(--serif); }
.victory-text .row { justify-content: center; }
@media (prefers-reduced-motion: no-preference) { .victory-card { animation: rise .5s ease-out; } @keyframes rise { from { transform: translateY(24px) scale(.97); opacity: 0; } } }

/* the guided first game: the step counter, the Next button and the glowing move */
.scroll.tut { border-bottom-color: var(--gold); }
.tut-count { display: inline-block; font: 700 .78rem var(--sans); color: #6b4f2a; background: rgba(107,79,42,.14); border-radius: 9px; padding: 0 7px; margin-right: 4px; vertical-align: 2px; }
.scroll .tut-next { margin: 6px 0 0 8px; padding: 3px 16px; min-height: 30px; vertical-align: middle; }
.tut-glow { box-shadow: 0 0 0 3px #fff3c4, 0 0 18px 6px rgba(255,214,120,.9), 0 3px 0 rgba(0,0,0,.35); }
.card.tut-glow { box-shadow: 0 0 0 3px #fff3c4, 0 0 22px 8px rgba(255,214,120,.9); }
@media (prefers-reduced-motion: no-preference) {
  .tut-glow { animation: tutGlow 1.4s ease-in-out infinite; }
  @keyframes tutGlow { 50% { box-shadow: 0 0 0 3px #fff3c4, 0 0 6px 2px rgba(255,214,120,.5), 0 3px 0 rgba(0,0,0,.35); } }
}
#play.portrait .tut-count { font-size: .7rem; }
#play.portrait .scroll .tut-next { margin-top: 4px; min-height: 28px; padding: 2px 14px; }
/* Early access badge on the title. Remove this rule (and the .early line in index.html) when early access ends. */
.early { display: inline-block; margin: 8px 0 0; padding: 3px 12px; border-radius: 6px; font: 700 .85rem/1.4 var(--sans); letter-spacing: .02em;
  background: linear-gradient(180deg, #f6ead0, #e3cf9f); color: #2e251d; border: 2px solid #4a3826; box-shadow: 0 3px 0 rgba(0,0,0,.35); cursor: help; }
.early span { display: block; font: italic 500 .8rem/1.3 var(--serif); color: #5a4630; max-width: 34em; }
@media (max-width: 560px) { .hero:has(.early) { height: 300px; } }

/* the link back to punatic.org */
.home-link { text-align: center; margin: 18px 0 8px; }
.moregames { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; color: var(--gold); font-weight: 700; text-decoration: none; border: 1px solid var(--line); border-radius: 8px; }
.moregames:hover, .moregames:focus-visible { border-color: var(--gold); background: var(--bark-2); }