/*MC 2026-10-10 map size. In-game layout for the play page, loaded after style.css, fx2.css and shop2.css so these rules
  win over the older layered ones. Problem: on phones and tablets in portrait the map was the part of the table that gave
  way (style.css "the map is the part that gives way", 2026-10-09), so every log line, the endgame alert strip and each
  extra rival badge row took height straight out of it. The svg kept its shape inside a shrinking box, so the world got
  narrower round by round with empty bands left and right: 330x157 at round 1 down to 149x71 by the endgame at 360x740,
  285 down to 149 wide at 390x660 (Telegram). On a 768 iPad 738 down to 602 wide.
  Now: the map is a fixed box, full table width at the map's own shape (1000x475), sized once from the screen and never
  from what's above or below it. The log is a fixed two line ticker (newest first, one line each, cut with an ellipsis),
  rival tiles keep one badge row that's always reserved, the endgame alert floats on the bottom edge of the map (the
  south seas, the emptiest band of the map) the way it floats on desktop, and if a short screen still can't fit the
  table the game scrolls with Claim / Play stuck to the bottom instead of the map shrinking. */

/* ---------- phones and tablets in portrait (one column) ---------- */
@media (max-width:899px){
  .game.has-map{justify-content:flex-start}
  /* the board is only as tall as its header plus the map; it never grows or gives way */
  .has-map .g-board,body.g-focus .has-map .g-board{flex:0 0 auto;min-height:0;display:block}
  /* full width at the map's shape. Phones on their side cap the width from the screen height (a fixed size for the
     whole game too, since it only reads the viewport) so the hand still fits under it */
  .has-map .g-map,body.g-focus .has-map .g-map{position:relative;display:block;flex:none;min-height:0;height:auto;
    width:min(100%,max(300px,calc((100dvh - 200px) * 2.1053)));aspect-ratio:1000/475;margin:0 auto}
  .has-map .g-map-svg,body.g-focus .has-map .g-map-svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;min-height:0;margin:0}

  /* art band for the hand cards (see the hand below), two line log */
  .game.has-map{--gc-art:clamp(28px,calc(100dvh - 490px - (100vw - 30px) * .475 - env(safe-area-inset-bottom,0px)),96px)}
  /* log: a fixed ticker of the two newest lines. Height never changes as lines come and go */
  .game:not(.is-watch) .g-log,body.g-focus .game:not(.is-watch) .g-log{flex:0 0 auto;display:grid;grid-auto-rows:26px;gap:4px;align-content:start;
    height:56px;min-height:0;max-height:none;overflow:hidden}
  .game:not(.is-watch) .g-log li{display:block;height:26px;line-height:26px;padding:0 10px;border-radius:9px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .game:not(.is-watch) .g-log li i{display:inline-block;width:7px;height:7px;vertical-align:middle;margin:-2px 0 0;margin-inline-end:8px}
  .game:not(.is-watch) .g-log li:nth-child(n+3){display:none}
  /* short screens (Telegram on most phones, small iPhones) keep the newest line only */
  @media (max-height:739px){
    .game:not(.is-watch) .g-log,body.g-focus .game:not(.is-watch) .g-log{height:26px}
    .game:not(.is-watch) .g-log li:nth-child(n+2){display:none}
    .game.has-map{--gc-art:clamp(28px,calc(100dvh - 460px - (100vw - 30px) * .475 - env(safe-area-inset-bottom,0px)),96px)}
  }
  /* tall phones have room for a third line */
  @media (min-height:820px){
    .game:not(.is-watch) .g-log,body.g-focus .game:not(.is-watch) .g-log{height:86px}
    .game:not(.is-watch) .g-log li:nth-child(3){display:block}
    .game.has-map{--gc-art:clamp(28px,calc(100dvh - 520px - (100vw - 30px) * .475 - env(safe-area-inset-bottom,0px)),96px)}
  }

  /* rival tiles: one badge row, always there, so a "Skips next" or "Bunker" badge can't make the tile taller */
  .g-rival{padding-top:6px;padding-bottom:6px}
  .g-rival .g-badges,.g-rival .g-badges:empty{display:flex;flex-wrap:nowrap;overflow:hidden;height:17px;max-height:none;min-width:0;align-items:center}
  .g-rival .g-badges .gb{flex:none;line-height:1.2}
  /* with one row, what's happening this game (Bunker, Skips next, Truce...) comes before who they are (Holder, Player, Bot) */
  .g-rival .g-badges :is(.gb-holder,.gb-human,.gb-bot){order:2}

  /* map header bar: a fixed height, so a second line in "8 unclaimed 21 destroyed" doesn't move the map */
  .has-map .g-board .g-me{box-sizing:border-box;height:40px;display:flex;align-items:center}

  /* endgame alert on the map's bottom edge. pointer-events off so the land under it still answers taps */
  .has-map .g-map > .g-alert{position:absolute;left:6px;right:6px;bottom:6px;top:auto;z-index:2;margin:0;width:auto;max-width:none;transform:none;
    padding:4px 9px;border-radius:9px;font-size:11px;line-height:1.3;text-align:center;pointer-events:none;
    background:rgba(52,36,8,.8);box-shadow:0 6px 18px -8px rgba(0,0,0,.7)}
  .has-map .g-map > .g-alert.lv-hot{background:rgba(66,14,30,.82)}

  /* the round / turn row keeps one height whether or not "N Regions left" shows under the round, and however long
     the turn label is */
  .game.has-map .g-top{height:32px}
  /* "Koi Ronin is thinking" goes to two lines in a live match and pushed everything under it down 4px. The pill keeps
     its two lines and spills a few px past the row (no ellipsis: overflow:hidden would clip the turn glow) */
  .game.has-map .g-top{align-items:center}
  .game.has-map .g-turn{line-height:1.15}

  /* hand: every card is one fixed height (a short name, a long name, the picked card), so the hand row never changes
     height either. The art band takes what the screen has left after the rest of the table: up to 96px on a tall
     phone, down to 28px on a short one (Telegram on a small iPhone). The rest of the table is 486px plus the map (490 below leaves 4px for a rival name in a taller font, Persian)
     (its width x .475) with the two line log, 30px less or more with one or three lines. It reads only the screen
     size, so it's set once for the whole game. The value itself is set with the log above, as the two go together. */
  .game.has-map .gc{height:calc(var(--gc-art) + 118px);min-height:0}
  .game.has-map .gc-art{height:var(--gc-art);flex:none}
  .game.has-map .gc b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .game.has-map .gc .gc-t{-webkit-line-clamp:3}
  /* the picked card is the one being read: its art band drops to a strip so the whole name and up to six lines of
     text fit in the same height (no card, so no row, changes height when you pick one). On a short screen a long text
     scrolls inside the picked card rather than being cut. */
  /*MC 2026-10-11 the strip looked broken on a real phone (owner's screenshots: the picture cut to a sliver over a big
     empty card). The picked card now keeps its full picture like every other card; only its text gets the extra room,
     scrolling inside the card if it's long */
  .game.has-map .gc.sel .gc-art{height:var(--gc-art)}
  .game.has-map .gc.sel b{-webkit-line-clamp:2}
  .game.has-map .gc.sel .gc-body{flex:1 1 auto;min-height:0}
  .game.has-map .gc.sel .gc-t{display:block;-webkit-line-clamp:none;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}

  /* Claim / Play: one fixed height. "Claim a Region (best move)" took three lines at 360 wide and made the row 59px
     instead of 44, so the hand and buttons moved whenever the label changed. Up to three lines fit in 48px now */
  .game.has-map .g-actions .btn{height:48px;min-height:0;padding:2px 8px;font-size:13.5px;line-height:1.08;overflow:hidden}

  /* Claim / Play stay on screen: stuck to the bottom of the full screen game if the table is taller than the screen */
  body.g-focus .game.has-map .g-actions{position:sticky;bottom:0;z-index:6;margin-top:auto}
  body.g-focus .game.has-map .g-actions .btn-line{background-color:rgba(14,10,34,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  /* very short screens (an iPhone SE in Telegram is about 375x590): the "Your hand" label goes (the count is still on
     each card back in the rivals' tiles, and the hand itself is right there) and the gaps tighten, so the hand and the
     buttons still fit under a full size map. Cards show two lines of their text here (the picked card scrolls) */
  @media (max-height:659px){
    .game.has-map{gap:6px}
    .game.has-map:not(.is-watch) .g-hand-head{display:none}
    .game.has-map{--gc-art:clamp(22px,calc(100dvh - 408px - (100vw - 30px) * .475 - env(safe-area-inset-bottom,0px)),96px)}
    .game.has-map .gc{height:calc(var(--gc-art) + 104px)}
    .game.has-map .gc .gc-t{-webkit-line-clamp:2}
  }
  /* shorter still (a phone on its side): the table scrolls and the buttons stay stuck to the bottom, with a backing so
     the cards scrolling under them don't show through */
  @media (max-height:589px){
    body.g-focus .game.has-map .g-actions{background:rgba(12,8,30,.94);box-shadow:0 0 0 8px rgba(12,8,30,.94);border-radius:14px}
  }
  /* the game on the page (full screen off) grows to fit the table rather than clipping the hand */
  body:not(.g-focus) .game.has-map:not(.g-ov){height:auto;max-height:none}
}

/* phones: a rival's name, rank and tier emblems on one line. The title pill (FOUNDER...) wrapped onto its own row in a
   live match and made those tiles 111px against 86, which came out of the hand on a short screen. The title still shows
   on their profile, on tablets and desktop. */
@media (max-width:760px){
  .g-rival .g-rn{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;min-width:0}
  .g-rival .g-rn > b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .g-rival .g-rn > :not(b){flex:none}
  .g-rival .g-rn > .g-title{display:none}
  /*MC 2026-10-11 the Rank pill took half this line and cut names to "M...". The Rank and tier now show in the badge
     row under it (a copy play.js puts there), so the name has the whole line, and a long one wraps to a second line
     instead of ending in "..." (tried smaller badges first: a 360px phone still showed 4 or 5 letters). */
  .g-rival .g-rn > .rank-b,.g-rival .g-rn > .tier-b,.g-rival .g-rn > .sk-b{display:none}   /*MC 2026-10-15 the Seeker badge too */
  .g-rival .g-rn{white-space:normal}
  .g-rival .g-rn > b{flex:1 1 100%;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
  .g-rival .g-badges .g-rkm{display:contents}
  .g-rival .g-badges .g-rkm .rank-b,.g-rival .g-badges .g-rkm .sk-b{font-size:8.5px;padding:0 5px;margin:0}
  .g-rival .g-badges .g-rkm .tier-b img{width:16px;height:16px}
  /* the "thinking" dots sat on the badge row's right end, over "Player" now that the row is always there. They go in
     the gap between the avatar and the Regions count instead */
  .g-rival .g-dots{top:14px;bottom:auto;right:auto;left:50%;transform:translateX(-30%)}
}

/* ---------- desktop: the alert sits in the map now (see play.js), placed where release q floated it ---------- */
@media (min-width:900px){
  .has-map .g-map{position:relative}
  .has-map .g-map > .g-alert{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:calc(100% - 28px);max-width:640px;margin:0;z-index:2}
}

/* desktop: the map takes the height the hand leaves, and the hand was as tall as its tallest card, so drawing a card with
   a two line name or a long text (Nuclear Chain Reaction) took up to 70px from the map: 622 down to 583 wide at 1366x900
   in a live match. Every card now keeps room for a two line name and four lines of text, so the hand is one height all
   game. Only Nuclear Chain Reaction needs a fifth line; it gets an ellipsis and its full text on hover (title). */
@media (min-width:900px){
  .game.has-map .gc b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.3em}
  .game.has-map .gc .gc-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;min-height:5.6em}
  /* that room cost the map ~17px of height (658 to 621 wide at 1366x900, 345 to 311 at 1280x720), so the art band is a
     little wider than it was (2:1 to 5:2, 13:6 to 3:1 on short screens) to give it back */
  .game.has-map .gc-art{aspect-ratio:5/2}
}
@media (min-width:900px) and (max-height:800px){ .game.has-map .gc-art{aspect-ratio:3/1} }

/*MC 2026-10-11 game audit fixes (audit/game.md, 2026-10-11). Everything below is new; nothing above was changed. */

/*MC 2026-10-11 #1 the "Who's the target?" sheet sat under the Claim / Play bar on phones (the bar was made sticky today
  with z-index 6, the sheet had 5 from style.css), so Cancel was hidden behind the buttons and a tap on it replayed the
  card. The sheet is above the bar now on every screen, and in the full screen game on a phone or tablet it's pinned to
  the bottom of the screen with room for the home bar, so it can't scroll away with a table that's taller than the
  screen. It covers the bar while it's open; Cancel or a target closes it. Tried hiding the bar while the sheet is up:
  the sheet then jumped by the bar's height on short screens. */
.game > .g-targets{z-index:7}
@media (max-width:899px){
  body.g-focus .game > .g-targets{position:fixed;left:0;right:0;bottom:0;max-height:calc(100% - 24px);overflow-y:auto;overscroll-behavior:contain;
    padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .game > .g-targets .g-cancel{min-height:44px}
}

/*MC 2026-10-11 #8 Telegram size (390x660) and other phones 660-739px tall: every card picture was a 29px strip. Room
  comes from two places, the map keeps its size: the "Your hand 7" label row goes (as it already did under 660px; the
  card count is on screen in each rival's chip and the hand is right there), and card text shows two lines instead of
  three (the picked card scrolls its whole text, as before). The art band formula's 460px drops by those 30 + 15px.
  Measured at 390x660: art 29 -> 74px, card 147 -> 177px, map 360x171 unchanged. */
@media (max-width:899px) and (max-height:739px) and (min-height:660px){
  .game.has-map:not(.is-watch) .g-hand-head{display:none}
  .game.has-map{--gc-art:clamp(28px,calc(100dvh - 415px - (100vw - 30px) * .475 - env(safe-area-inset-bottom,0px)),96px)}
  .game.has-map .gc{height:calc(var(--gc-art) + 103px)}
  .game.has-map .gc .gc-t{-webkit-line-clamp:2}
}
/*MC 2026-10-11 #8 under 660px (an iPhone SE in Telegram is about 375x590) the band was 22px. Rival tiles lose a few px of
  padding and avatar, the map header bar is 34px instead of 40, and the card's text box loses 4px of padding: 22px more
  for the picture. The two rows inside a rival tile (name, badges) keep their heights. */
@media (max-width:899px) and (max-height:659px){
  .game.has-map .g-rival{padding-top:3px;padding-bottom:3px;row-gap:1px}
  .game.has-map .g-rival .g-av{width:26px;height:26px}
  .has-map .g-board .g-me{height:34px}
  .game.has-map .gc-body{padding-top:6px;padding-bottom:6px}
  .game.has-map .gc{height:calc(var(--gc-art) + 98px)}
  .game.has-map{--gc-art:clamp(22px,calc(100dvh - 386px - (100vw - 30px) * .475 - env(safe-area-inset-bottom,0px)),96px)}
}

/*MC 2026-10-11 #16 tall phones (820px and up) left about 70px empty between the hand and the buttons, because the art
  band stopped at 96px. It can grow to 140px there now; the formula is the same, only the cap moved. Phones only: an
  iPad (768x1024) has taller rival tiles and the table started to scroll with 140. */
@media (max-width:599px) and (min-height:820px){
  .game.has-map{--gc-art:clamp(28px,calc(100dvh - 520px - (100vw - 30px) * .475 - env(safe-area-inset-bottom,0px)),140px)}
}
/*MC 2026-10-11 #16 the map header ("28 unclaimed 0 destroyed") wrapped "destroyed" onto a second line at 390 in some
  languages. The counts stay on one line and "Your Regions" (or a replay's "Name's Regions") gives way with an ellipsis.
  Only while you have no status badges (Bunker, Skips next...): with those in the row too, one line pushed "destroyed"
  out of the header at 360 wide, so the counts may wrap then, as before. */
@media (max-width:760px){
  .has-map .g-board .g-me-head:has(#g-my-status:empty) #g-deck{white-space:nowrap;flex:none}
  .has-map .g-board .g-me-head{min-width:0}
  .has-map .g-board :is(.g-me-lab,.g-me-lab-w){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
}
@media (max-width:400px){ .has-map .g-board #g-deck{font-size:9.5px} }

/*MC 2026-10-11 #12 1280x720 laptops (page, not full screen): the map drew 360x171 inside a 752x223 box because the hand's
  cards were 207px tall. On desktop screens up to 760px tall the art band is a fixed 40px and card text is cut at three
  lines (hover still shows all of it, the picked card's text is in its title too): about 36px more for the map. */
@media (min-width:900px) and (max-height:760px){
  .game.has-map .gc-art{aspect-ratio:auto;height:40px;flex:none}
  .game.has-map .gc .gc-t{-webkit-line-clamp:3;min-height:4.2em}
}

/*MC 2026-10-11 #15 the endgame alert floats over the bottom of the map on phones and hid Patagonia, southern Africa and
  south Australia. It shows in full when it changes, then fades back after a few seconds (play.js adds .dim) so the
  land under it can be seen; it's still there, just faint. */
@media (max-width:899px){
  .has-map .g-map > .g-alert{transition:opacity .6s ease}
  .has-map .g-map > .g-alert.dim{opacity:.32}
}

/*MC 2026-10-11 #9 lag. While a card flash is up the whole table is blurred behind it, and an animated table under that
  blur makes the browser redo the blur every frame; the table's motion stops for the second the flash is up. Your turn
  aura and the hand's card finishes stop while it's not your turn (the aura is invisible then anyway and the cards are
  disabled). In-game buttons and the flash lose their backdrop blur on an animated table (a slightly darker solid
  background instead), for the same reason. */
.game.tbx:has(> .g-flash:not([hidden])) > .tbfx > i,
.game.tbx:has(> .g-intro) > .tbfx > i{animation-play-state:paused}
.game:not(.my-turn) .g-hand-wrap > .tu-fx,.game:not(.my-turn) .g-hand-wrap > .tu-fx *,.game:not(.my-turn) .g-hand-wrap > .tu-fx::before{animation-play-state:paused}
.game:not(.my-turn) #g-hand .cf::after,.game:not(.my-turn) #g-hand .cf::before{animation-play-state:paused}
.game.tbx .g-flash{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(14,9,36,.74)}
.game.tbx .btn-line{-webkit-backdrop-filter:none;backdrop-filter:none}
.game.tbx .g-actions .btn-line{background-color:rgba(14,10,34,.88)}

/*MC 2026-10-11 #17 the Storm and Rain tables' streaks showed through every see-through panel, across log text and rival
  names: those panels get a darker backing on an animated table. The turn aura frame started on the "Your hand" label;
  it starts under it now (and at the hand's top where the label is hidden). */
.game.tbx .g-rival,.game.tbx .g-log li{background-color:rgba(18,12,40,.82)}
.g-hand-wrap.has-tu > .tu-fx{top:20px}
@media (max-width:899px) and (max-height:739px){ .game.has-map .g-hand-wrap.has-tu > .tu-fx{top:-4px} }

/*MC 2026-10-11 #20 small tap targets on phones: the 32px tool icons answer a tap 6px above and below and 1px to the sides (a 34x44 hit area)
  (the gap between them is 5px, so neighbours don't overlap), and "Connect X" on the results gets a taller hit area. */
@media (max-width:760px){
  .g-tool::after{inset:-7px -2px}
  .g-x-hint a{display:inline-block;padding:10px 4px;margin:-10px -4px}
}

/*MC 2026-10-11 the big round banner ("Endgame: 8 Regions left") is one line at 28px and ran 14px past the table at 360
  wide, which gave the full screen game a sideways scroll for a second (found by qa2/ml/measure.py while checking #8) */
@media (max-width:420px){ .g-banner{font-size:24px;max-width:calc(100% - 20px);white-space:normal;text-align:center} }

/*MC 2026-10-11 game improvements (audit/game.md "Improvements"). Everything below is new; nothing above was changed.
  Nothing here takes room in the layout: every new piece is absolutely placed, an outline, a shadow or a colour, so the
  map, the tiles and the hand keep the sizes the layout fixes above. */

/*MC 2026-10-11 target picking on the map (improvement 1): while the "Who's the target?" sheet is up the table dims and
  each rival you can hit pulses (their tile here, their land through .g-map-svg.picking in style.css); a tap on either
  picks them. play.js puts the seats you can pick on #g-rivals[data-pick]. With reduced motion the ring stays, still. */
.game.g-picking .g-log,.game.g-picking .g-board .g-me{opacity:.4;transition:opacity .25s}
.game.g-picking .g-rival{opacity:.42}
#g-rivals[data-pick~="1"] > #g-riv-1,#g-rivals[data-pick~="2"] > #g-riv-2,#g-rivals[data-pick~="3"] > #g-riv-3{opacity:1;cursor:pointer;
  border-color:rgba(255,255,255,.95);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 24px -4px rgba(255,93,115,.85);animation:pickTile 1.1s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent}
#g-rivals[data-pick~="1"] > #g-riv-1:active,#g-rivals[data-pick~="2"] > #g-riv-2:active,#g-rivals[data-pick~="3"] > #g-riv-3:active{background-color:rgba(255,93,115,.28)}
@keyframes pickTile{50%{box-shadow:0 0 0 2px rgba(255,255,255,.45),0 0 10px -6px rgba(255,93,115,.5)}}
.g-map-svg.picking .mp-r.pickable{cursor:pointer}

/*MC 2026-10-11 preview before you commit (improvement 2): ghost Region changes by each seat's count ("+2", "-1", "?" for
  random) and the land at risk glowing on the map (#g-map svg[data-pvl] lists the seats that would lose). Dashed, so it
  reads as "would", not "did". */
.g-rival .g-rc{position:relative}
/* under 900px the count's box stretched across the tile (its text sits at the end), which put the ghost over the
   avatar; the box hugs the number now, in the same place */
@media (max-width:899px){ .g-rival .g-rc{justify-self:end} }
.g-pv{position:absolute;top:50%;inset-inline-end:calc(100% + 4px);transform:translateY(-50%);z-index:3;pointer-events:none;
  padding:1px 6px;border-radius:99px;border:1.5px dashed currentColor;background:rgba(14,9,36,.88);
  font:800 13px/1.25 "Bricolage Grotesque",sans-serif;font-style:normal;white-space:nowrap;animation:pvBreathe 1.6s ease-in-out infinite}
.g-pv.up{color:var(--mint)}
.g-pv.dn{color:#ff8a9a}
.g-pv.rnd{color:var(--sun)}
@keyframes pvBreathe{50%{opacity:.62}}
/* yours sits right of your count, where "Your Regions" is: the label steps aside (visibility only, nothing moves) while
   the ghost shows. Tried over the avatar first: unreadable on the avatar's ring and tick. */
.g-pv-me{position:absolute;top:50%;inset-inline-start:calc(100% + 6px);z-index:3;pointer-events:none}
.g-me-head.pv-on > .g-me-lab{visibility:hidden}
.g-pv-me .g-pv{position:static;display:inline-block;transform:translateY(-50%)}
.g-pv-me:empty{display:none}
.g-map-svg[data-pvl~="0"] .mp-r.o0,.g-map-svg[data-pvl~="1"] .mp-r.o1,.g-map-svg[data-pvl~="2"] .mp-r.o2,.g-map-svg[data-pvl~="3"] .mp-r.o3{
  stroke:#ff8a9a;stroke-width:2.6;stroke-dasharray:5 3;animation:none}
/* still, not pulsing: an infinite fill animation on 20-30 Regions repainted the map every frame for as long as a card
   stayed picked (measured on a 4x throttled phone: the first tap on Zombie Apocalypse took 400ms against 260) */

/*MC 2026-10-11 hand feel on phones (improvement 4). The hand already snapped to each card's start edge, while play.js
  scrolls a picked or new card to the middle, so the two pulled against each other and the card came to rest off centre.
  Cards snap to the middle now, the same place play.js puts them. A newly drawn card lands with a small spring (the same
  freshIn animation, new keyframes). Reduced motion stops both, as before (style.css). */
@media (max-width:899px){ .g-hand > .gc{scroll-snap-align:center} }
@keyframes freshIn{0%{opacity:0;transform:translateY(22px) scale(.88) rotate(-2.5deg)}55%{opacity:1;transform:translateY(-6px) scale(1.035) rotate(.6deg)}
  80%{transform:translateY(1.5px) scale(.995) rotate(0deg)}100%{opacity:1;transform:none}}

/*MC 2026-10-11 stakes in the last rounds (improvement 6): at "Last N Regions" the endgame alert carries a mini scoreboard
  (Regions, then cards, since ties go to cards) and the table gets a faint red edge. The tint is a layer behind the
  table's content (isolation, as animated tables already do) and doesn't move, so it costs nothing per frame. */
.game.g-final{isolation:isolate}
.game.g-final::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(ellipse at 50% 45%,transparent 50%,rgba(255,61,96,.17) 100%);box-shadow:inset 0 0 0 1px rgba(255,93,115,.32)}
.g-alert .g-sb{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;margin-top:5px}
.g-sb-p{display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 5px;border-radius:99px;background:rgba(10,6,30,.6);
  border:1px solid rgba(255,255,255,.14);font:600 11px/1.25 "Inter",sans-serif;color:#fff;white-space:nowrap}
.g-sb-p > i{flex:none;width:8px;height:8px;border-radius:50%}
.g-sb-n{max-width:8em;overflow:hidden;text-overflow:ellipsis}
.g-sb-p > b{font:800 13px/1 "Bricolage Grotesque",sans-serif}
.g-sb-c{color:rgba(255,255,255,.72);font-size:10px}
.g-sb-p.lead{border-color:var(--sun);box-shadow:0 0 0 1px rgba(255,209,102,.45)}
.g-sb-p.me{background:rgba(255,255,255,.14)}
/* phones: the colour dot says who it is (the same colour as their tile and land); "You" keeps its name */
@media (max-width:760px){
  .g-alert .g-sb{gap:3px 4px;margin-top:3px}
  .g-sb-p{padding:1px 6px 1px 4px;gap:3px}
  .g-sb-p:not(.me) .g-sb-n{display:none}
  .g-sb-c{font-size:9.5px}
}
/* 380px and under (360 phones): four chips fit one row only without "You" too; yours is the lighter chip with your
   colour, the same red as your count */
@media (max-width:380px){
  .g-sb-p.me .g-sb-n{display:none}
  .g-sb-p{padding:1px 5px 1px 4px}
  .g-sb-c{font-size:9px}
}

/*MC 2026-10-11 bot personality (improvement 7): a short line under the bot's tile after a big play (play.js talk()),
  in a speech bubble with the bot's colour as its ring. Above the tile (.up) when under it would reach the hand. */
/* z-index 7: over the table, under the next card flash (8) and the round banner (9) */
.g-taunt{position:absolute;z-index:7;width:max-content;box-sizing:border-box;transform:translateX(-50%);padding:7px 12px;border-radius:14px;
  background:#fff;color:#1a1342;font:700 12.5px/1.3 "Inter",sans-serif;text-align:center;pointer-events:none;
  box-shadow:0 0 0 2px var(--tc,#fff),0 12px 26px -10px rgba(0,0,0,.7);animation:tauntIn 2.9s cubic-bezier(.2,1,.3,1) forwards}
.g-taunt::before{content:"";position:absolute;left:calc(50% + var(--tx,0px));top:-5px;width:10px;height:10px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.g-taunt.up::before{top:auto;bottom:-5px}
/* a hit bot's face: pops on its avatar, inside its tile (play.js botOuch) */
.g-ouch{position:absolute;z-index:7;font-size:26px;line-height:1;transform:translate(-50%,-50%);pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));animation:ouchPop 1.6s cubic-bezier(.2,1,.3,1) forwards}
@keyframes ouchPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}14%{opacity:1;transform:translate(-50%,-62%) scale(1.25)}24%{transform:translate(-50%,-58%) scale(1)}
  80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(.95)}}
@keyframes tauntIn{0%{opacity:0;transform:translate(-50%,6px) scale(.85)}10%{opacity:1;transform:translate(-50%,0) scale(1.04)}16%{transform:translate(-50%,0) scale(1)}
  86%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-5px)}}

/*MC 2026-10-11 the phone copy of a rival's Rank and tier (see the 760px block) stays hidden on bigger screens */
.g-rkm{display:none}

/*MC 2026-10-15 the map header sits above the map: a holder's avatar with its aura ring and seal is taller than the
  40px bar, and the 3D map panel under it painted over the bottom of the avatar */
.has-map .g-board .g-me{position:relative;z-index:6;overflow:visible}
.has-map .g-board .g-me-head{position:relative;z-index:6}