:root{--bg:#fffdf8;--line:#29303d;--soft:#e6e0d6;--text:#29303d;--muted:#6b6459;--accent:#ff6b5e;--accent2:#2ec4b6;--good:#3ec98c;--bad:#e04c3f;--radius:14px}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{font-family:'Nunito',system-ui,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}
button{font-family:inherit;cursor:pointer}
#app{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;display:flex;flex-direction:column}
/* The bar sizes itself off the viewport instead of stepping once at 680px.
   A hard 54px height plus buttons that were free to wrap is what broke it:
   "Topo of the day" went to two lines and stuck 10px out of the bar on an
   iPad, "New game" did the same on a phone, and the language select was the
   only flexible item left so it absorbed every overflow and squeezed to 0px
   wide. Now nothing wraps inside a button, they all share one min-height so
   they line up, and the bar may wrap to a second row rather than overflow. */
#topbar{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(5px,1.4vw,12px);padding:clamp(5px,1.1vw,8px) clamp(8px,1.8vw,14px);background:#fff;border-bottom:2px solid var(--line);z-index:600;flex:0 0 auto;min-height:clamp(46px,7vw,54px)}
#topbar .brand{font-weight:800;letter-spacing:.3px;font-size:clamp(15px,2.4vw,18px);display:flex;align-items:center;gap:clamp(5px,1vw,8px);font-family:'Baloo 2',cursive;flex:0 0 auto}
#topbar .brand svg{width:clamp(24px,3.4vw,30px);height:clamp(24px,3.4vw,30px)}
#topbar .brand .dot{width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--line)}
#topbar .spacer{flex:1}
.tbtn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;min-height:clamp(32px,4.4vw,36px);background:#fff;color:var(--text);border:2px solid var(--line);padding:clamp(4px,1vw,7px) clamp(8px,1.5vw,13px);border-radius:11px 5px 11px 5px;font-size:clamp(11.5px,1.5vw,13px);line-height:1.15;font-weight:800;box-shadow:2px 2px 0 var(--soft);transition:transform .12s,box-shadow .12s}
#topbar #langBar{flex:0 1 auto;min-width:0}
.tbtn:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--soft)}
.tbtn.primary{background:var(--accent);color:#fff;border-color:var(--line);box-shadow:2px 2px 0 var(--line)}
.tbtn.primary:hover{box-shadow:1px 1px 0 var(--line)}
/* Shown on the results screen after a trial run (see endGame/S.trial) — a
   free, unranked run played while logged out, nudging into an account so
   the next one actually counts. */
.trialPrompt{margin-top:14px;padding:14px 16px;border:2px solid var(--line);border-radius:14px 6px 14px 6px;background:#fdece7}
.trialPrompt .tt{font-weight:800;margin-bottom:6px}
.trialPrompt .td{color:var(--muted);margin-bottom:10px;font-weight:600}
#stage{position:relative;flex:1 1 auto;min-height:0}
#map{position:absolute;inset:0;background:#eef2e6;z-index:1}
.leaflet-container{background:#eef2e6}
/* One gutter formula for everything floating over the map, so the HUD, the
   result card and the photo panels all line up on the same left/right edge at
   every width. */
#hud{position:absolute;top:clamp(6px,1.4vw,10px);left:50%;transform:translateX(-50%);z-index:550;width:min(720px,calc(100vw - clamp(20px,4vw,28px)));display:none;flex-direction:column;gap:clamp(5px,1.1vw,8px)}
.hudrow{display:flex;flex-wrap:wrap;gap:clamp(5px,1.1vw,8px);align-items:stretch}
.card{background:#fff;border:2px solid var(--line);border-radius:12px 5px 12px 5px;box-shadow:3px 3px 0 #ffe3ad}
#targetCard{flex:1 1 0;min-width:0;padding:clamp(6px,1.3vw,9px) clamp(10px,2vw,16px);display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;min-height:clamp(50px,7.5vw,64px)}
#targetCard .lbl{font-size:clamp(9px,1.4vw,10px);text-transform:uppercase;letter-spacing:1px;color:#a39d92;font-weight:800;line-height:1.25}
/* The place name is the one thing on this screen that has to stay readable at
   arm's length, so it scales with the width it is given rather than dropping
   to a fixed 19px on every phone. */
#targetCard .name{font-size:clamp(17px,4.6vw,24px);font-weight:800;line-height:1.14;margin-top:1px;font-family:'Baloo 2',cursive;user-select:none;-webkit-user-select:none;overflow-wrap:anywhere}
#targetCard .meta{font-size:clamp(10.5px,1.8vw,12px);color:var(--accent2);margin-top:2px;font-weight:800}
.statbox{padding:clamp(5px,1.1vw,8px) clamp(6px,1.3vw,10px);min-width:clamp(52px,8vw,72px);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
/* World Wonders only: a collapsible photo + short blurb, closed by default and
   remembered across rounds/sessions (see wonderInfoExpanded()) so it never
   gets in the way of players who just want to click and go. */
#wonderInfo{display:none;padding:8px 12px}
#wonderInfoToggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;padding:2px 0;cursor:pointer;font:inherit;color:inherit;font-weight:800;font-size:12.5px}
#wonderInfoBody{display:none;margin-top:8px}
/* bigger than before on purpose — the panel is collapsible (see
   wonderInfoExpanded), so a larger photo costs nothing when collapsed and is
   actually worth looking at once expanded */
#wonderInfoImg{display:block;width:100%;max-height:340px;object-fit:cover;border-radius:10px 4px 10px 4px;border:2px solid var(--line);background:#f1ede4}
#wonderInfoCredit{display:block;margin-top:8px;font-size:11px;color:var(--muted);text-decoration:none}
#wonderInfoCredit:hover{text-decoration:underline}
/* Vacation mode's photo is shown BEFORE the guess, not after, so unlike
   #wonderInfo it has no toggle: the picture is half the clue. It is capped
   well below the wonder panel's 340px because it shares the screen with a map
   the player still has to aim at, and it shrinks further once the viewport is
   short enough that the two would fight. */
/* Deliberately shorter than the wonder panel's 340px. That one is collapsed by
   default and opened on demand, so it can afford the room; this one is always
   up, and every pixel it takes is a pixel the map fit pads away — 170px cost
   roughly a third of the playable map once padding was accounted for. The
   credit sits inline with nothing else so the card stays one photo tall. */
/* Narrower than the HUD row above it on purpose. At the full 700px a 124px-tall
   photo is a 5:1 slit, and a cathedral facade cropped to a slit stops being a
   clue; 420px brings it back to roughly 3:1, which still reads as a building. */
#vacPhoto{display:none;padding:6px 8px;width:min(420px,94vw);margin-left:auto;margin-right:auto}
#vacPhotoImg{display:block;width:100%;height:150px;object-fit:cover;border-radius:10px 4px 10px 4px;border:2px solid var(--line);background:#f1ede4}
#vacPhotoCredit{display:block;margin-top:4px;font-size:10.5px;color:var(--muted);text-decoration:none}
#vacPhotoCredit:hover{text-decoration:underline}
@media (max-height:760px){#vacPhotoImg{height:120px}}
@media (max-height:620px){#vacPhotoImg{height:86px}}
/* Below this the photo and a usable map cannot both fit; the map wins, and the
   result still shows the article link. */
@media (max-height:520px){#vacPhoto{display:none !important}}
.statbox .k{font-size:clamp(9px,1.4vw,10px);text-transform:uppercase;letter-spacing:.5px;color:#a39d92;font-weight:800;line-height:1.25}
/* A long player name used to push the other three cards into a corner, so it
   truncates instead of setting the width of the row. */
.statbox .v{font-size:clamp(14px,2.6vw,18px);font-weight:800;margin-top:2px;font-family:'Baloo 2',cursive;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#timerWrap{height:10px;background:#fff;border-radius:999px;overflow:hidden;display:none}
#timerBar{height:100%;width:100%;background:#ffc233;transition:width .12s linear}
#result{position:absolute;left:50%;bottom:calc(clamp(10px,2vw,14px) + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:560;width:min(640px,calc(100vw - clamp(20px,4vw,28px)));padding:clamp(11px,2.2vw,14px) clamp(13px,2.6vw,18px);display:none;flex-direction:column;gap:clamp(6px,1.2vw,8px)}
#result .head{display:flex;align-items:center;gap:10px}
#result .badge{font-weight:800;padding:4px 12px;border-radius:999px;font-size:13px;border:2px solid var(--line)}
#result .badge.good{background:var(--good);color:#fff}
#result .badge.bad{background:var(--bad);color:#fff}
#result .pts{margin-left:auto;font-size:22px;font-weight:800;color:var(--accent);font-family:'Baloo 2',cursive}
#result .info{font-size:clamp(12px,1.9vw,13px);color:var(--muted);line-height:1.4;font-weight:600}
#result .info b{color:var(--text)}
/* Post-guess Wikipedia fact: the blurb text itself lives inside #resInfo
   (appended there so it reads as one sentence with the feedback message);
   this is just the optional thumbnail + link underneath. Hidden unless a
   place actually has data (most countries besides NL don't yet). */
#resFact{display:none;align-items:center;gap:8px;margin-top:-2px}
#resFactImg{display:none;width:44px;height:44px;object-fit:cover;border-radius:8px 3px 8px 3px;border:2px solid var(--line);flex:0 0 auto}
/* Vacation mode's type/UNESCO/near-town line. It sits beside the link rather
   than in #resInfo because the description now owns that space, and a category
   list is small print next to a sentence that actually says something. */
#resFactMeta{display:none;font-size:11.5px;font-weight:700;color:var(--muted)}
#resFactMeta:not(:empty)+#resFactLink{margin-left:auto}
#resFactLink{font-size:12px;font-weight:800;color:var(--accent2);text-decoration:none}
#resFactLink:hover{text-decoration:underline}
.resbtns{display:flex;gap:8px;justify-content:flex-end;align-items:center}
#nextBtn{background:var(--accent);color:#fff;border:2px solid var(--line);padding:9px 22px;border-radius:12px 5px 12px 5px;font-weight:800;font-size:15px;box-shadow:3px 3px 0 var(--line);transition:transform .12s,box-shadow .12s}
#nextBtn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
#againBtn{background:#fff;color:var(--text);border:2px solid var(--line);padding:9px 16px;border-radius:12px 5px 12px 5px;font-weight:800;font-size:14px;box-shadow:3px 3px 0 var(--soft);transition:transform .12s,box-shadow .12s}
#againBtn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--soft)}
/* dialogs start under the top bar (--tb-h, set by solo.js), so the logo and
   Menu, the way home, are never covered */
.overlay{position:absolute;inset:0;top:var(--tb-h,0px);z-index:700;background:rgba(41,48,61,.45);display:none;align-items:center;justify-content:center;padding:16px}
.overlay.show{display:flex}
.sheet{background:#fff;border:2px solid var(--line);border-radius:18px 8px 20px 8px;width:min(560px,96vw);max-height:92vh;overflow:auto;box-shadow:6px 6px 0 var(--line)}
.sheet h2{margin:0;padding:18px 22px 6px;font-size:22px;font-family:'Baloo 2',cursive}
.sheet .sub{padding:0 22px 14px;color:var(--muted);font-size:13px;margin:0;font-weight:600}
.sheet .body{padding:4px 22px 18px}
.daily-card-preview{display:none;padding:0 22px 10px}
.daily-card-preview.show{display:block}
.sheet .foot{padding:14px 22px 20px;display:flex;gap:10px;justify-content:flex-end;border-top:2px dashed var(--soft)}
.introSheet h2{display:flex;align-items:center;gap:9px}
.introStepTag{font-size:11px;font-weight:800;color:var(--muted);background:var(--bg);border:2px solid var(--soft);border-radius:999px;padding:2px 9px;letter-spacing:.02em}
.introArt{width:88px;height:88px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:6px auto 18px;border:2px solid var(--line);box-shadow:3px 3px 0 var(--line)}
.introArt svg{width:40px;height:40px}
.introDots{display:flex;gap:7px;justify-content:center;margin:2px 0 16px}
.introDot{transition:width .18s,background .18s}
.field{margin:14px 0}
.field > label{display:block;font-weight:800;font-size:14px;margin-bottom:7px}
.field .hint{color:var(--muted);font-weight:600;font-size:12px}
.hsSteps{margin:8px 0 0;padding-left:20px;font-size:14px;font-weight:600;line-height:1.45}
.hsSteps li{margin:3px 0}
.hsSteps .hsShare{vertical-align:-3px;color:#0a84ff}
.rangewrap{display:flex;align-items:center;gap:12px}
input[type=range]{flex:1;accent-color:var(--accent)}
.rangeval{min-width:42px;text-align:center;font-weight:800;background:#fffdf8;border:2px solid var(--line);border-radius:8px 4px 8px 4px;padding:4px 6px;font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{user-select:none;padding:9px 14px;border-radius:999px;border:2px solid var(--soft);background:#fff;font-size:13px;font-weight:800;color:var(--muted);cursor:pointer}
.chip.on{background:#ffc233;color:var(--text);border-color:var(--line);box-shadow:2px 2px 0 var(--line)}
/* World Wonders category picker: one row per kind, chip on the left with a
   short "what's in here" description to its right — stacked, not wrapped
   inline like .chips, since the description needs room to breathe */
.chipRows{display:flex;flex-direction:column;gap:10px}
.chipRow{display:flex;align-items:center;gap:12px;cursor:pointer}
.chipRow .chip{flex:0 0 auto;min-width:104px;text-align:center}
.chipRow .chipRowDesc{flex:1;font-size:12.5px;font-weight:600;color:var(--muted)}
.seg{display:flex;border:2px solid var(--line);border-radius:11px 5px 11px 5px;overflow:hidden}
.seg button{flex:1;background:#fff;color:var(--muted);border:none;padding:10px 6px;font-size:13px;font-weight:800}
.seg button.on{background:var(--accent2);color:#fff}
.seg.amber button.on{background:var(--accent);color:#fff}
select,input[type=text]{width:100%;background:#fffdf8;color:var(--text);border:2px solid var(--line);border-radius:10px 5px 10px 5px;padding:10px;font-size:14px;font-family:inherit;font-weight:600}
.players{display:flex;flex-direction:column;gap:8px}
.playerRow{display:flex;gap:8px}
.playerRow input{flex:1}
.playerRow button{background:#fff;border:2px solid var(--line);color:var(--bad);border-radius:10px 5px 10px 5px;width:42px;font-size:18px;font-weight:800}
.addP{background:transparent;border:2px dashed var(--soft);color:var(--accent);border-radius:10px 5px 10px 5px;padding:9px;font-weight:800;font-size:13px;width:100%}
.avpick{background:#fff;border:2px solid var(--line);border-radius:10px 5px 10px 5px;width:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:center;padding:2px;box-shadow:2px 2px 0 var(--soft)}
.avpick:hover{box-shadow:1px 1px 0 var(--soft);transform:translate(1px,1px)}
.av-marker{filter:drop-shadow(2px 3px 0 rgba(41,48,61,.25))}
/* hover preview of the player's Dot — light, no looping animation (idle mood) */
.av-hover{pointer-events:none;filter:drop-shadow(1px 2px 0 rgba(41,48,61,.22))}
.av-hover svg{animation:avpop .18s ease-out}
.av-marker svg{animation:avpop .4s ease-out;transform-origin:50% 100%}
.av-marker.av-settled svg{animation:none}
/* provinces play as diamonds instead of round dots, so the map itself hints
   you're guessing a region, not a point */
.dot-prov-icon{background:transparent;border:none;display:flex;align-items:center;justify-content:center}
.dot-prov-icon .dot-diamond{display:block;box-sizing:border-box;border-radius:3px;border:1.4px solid #29303d;transform:rotate(45deg);transition:width .12s,height .12s}
@keyframes avpop{0%{transform:scale(.3)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:2px dashed var(--soft)}
th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
td.r,th.r{text-align:right}
.rank1{color:#e0a812;font-weight:800}
.rank2{color:#8f887c;font-weight:800}
.rank3{color:#ff9f45;font-weight:800}
.empty{color:var(--muted);text-align:center;padding:26px 10px;font-weight:600}
.pill{display:inline-block;background:#fff;border:2px solid var(--soft);border-radius:999px;padding:2px 10px;font-size:11px;color:var(--muted);margin:2px 4px 2px 0;font-weight:800}
.avatarWrap{position:relative;display:inline-flex;flex:0 0 auto}
.avatarWrap .customSkinBadge{position:absolute;top:-4px;right:-4px;font-size:12px;line-height:1;filter:drop-shadow(0 0 2px rgba(255,255,255,.9))}
.finalScore{font-size:40px;font-weight:800;color:var(--accent);text-align:center;margin:6px 0;font-family:'Baloo 2',cursive}
.winner{text-align:center;color:var(--text);font-weight:800;margin-bottom:8px}
.leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.8);color:#6b6459}
.leaflet-control-attribution a{color:#6b6459}
#miniToast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(20px);z-index:900;background:#29303d;color:#fff;border:2px solid #29303d;border-radius:12px 5px 12px 5px;padding:9px 16px;font-size:13px;font-weight:800;box-shadow:3px 3px 0 rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:92vw;text-align:center}
#miniToast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Sizes are fluid (clamp) above; what is left here is the handful of things
   that cannot be interpolated, and each breakpoint is the width at which that
   particular label or layout measurably stopped fitting. */
/* On a phone you zoom by pinching, and the +/- buttons in the top-left corner
   only peeked out from under the HUD as a small grey square. */
@media (max-width:560px) and (pointer:coarse){ .leaflet-control-zoom{display:none} }
/* Under ~560px four cards in one row leave the place name a slit. So on a
   phone the HUD is one low bar: the place name (and its category) on the
   left, round and score as plain text on the right. "Click the dot of" is
   dropped (the how-to before the game already said it) and so is the player
   card when you play alone; in a hot-seat game it sits next to round. The
   stats are grid cells laid over the card, and the card's right padding
   keeps a long name clear of them. */
@media (max-width:560px){
  .hudrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;column-gap:0}
  #targetCard{grid-area:1/1/2/-1;min-height:0;padding:4px 112px 5px 12px;align-items:flex-start;text-align:left}
  /* hot-seat: the name says whose turn it is without a "Player" label */
  #hud.multi #targetCard{padding-right:172px}
  #hud.multi #targetCard .name{font-size:clamp(16px,4.8vw,22px)}
  #hud.multi .hudrow .statbox:first-child{padding-top:10px}
  #hud.multi .hudrow .statbox:first-child .k{display:none}
  #targetCard .lbl{display:none}
  #targetCard .name{font-size:clamp(18px,5.4vw,22px);line-height:1.12;margin-top:0}
  #targetCard .meta{font-size:10.5px;margin-top:0;line-height:1.2}
  .hudrow .statbox{grid-row:1;align-self:center;z-index:1;background:none;border:0;box-shadow:none;border-radius:0;min-width:0;padding:0 12px 0 0}
  .hudrow .statbox:first-child{grid-column:2;display:none;max-width:62px}
  #hud.multi .hudrow .statbox:first-child{display:flex}
  .hudrow .statbox:nth-child(3){grid-column:3}
  .hudrow .statbox:nth-child(4){grid-column:4}
  .hudrow .statbox .k{font-size:8px;letter-spacing:.4px;line-height:1.2}
  .hudrow .statbox .v{font-size:14px;line-height:1.1;margin-top:0}
}

/* 900px: these two labels are the first to wrap inside their button. */
@media (max-width:900px){
  #btnDaily .lbl,#btnLeader .lbl{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
/* 700px: the language select is ~110px of a bar that no longer has 110px to
   spare, so on phones it lives in Settings instead (see #langBarSettings). */
@media (max-width:700px){
  #topbar #langBar{display:none}
}
@media (max-width:680px){
  #topbar .brand span.t{display:none}
  .resbtns button{flex:1;text-align:center;padding:12px}
}
/* 560px: the last label to go, leaving the arrow, which reads as "back". */
@media (max-width:560px){
  #btnMenu .lbl{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
/* Under 360px the smiley is the difference between one row and two. */
@media (max-width:359px){ #topbar .brand svg{width:22px;height:22px} }
/* Landscape on a phone: ~390px of height for a bar, a HUD and a map you still
   have to aim at. Everything chrome-like gives back what it can. */
@media (max-height:520px){
  #topbar{min-height:42px;padding-top:4px;padding-bottom:4px}
  .tbtn{min-height:30px}
  #hud{top:6px}
  #targetCard{min-height:42px;padding-top:4px;padding-bottom:4px}
  #targetCard .name{font-size:clamp(16px,3.2vw,20px)}
  #result{padding-top:10px;padding-bottom:10px}
}
/* iOS/Safari zooms the whole page in whenever you focus a form control whose
   font-size is under 16px, and that zoom persists across navigation — so
   tapping a search/code field and then moving to the next page left you
   stuck zoomed in until you pinched out by hand. 16px on phones avoids the
   auto-zoom entirely, without blocking deliberate pinch-zoom the way
   user-scalable=no would. !important because some fields carry inline or
   JS-injected sizes. */
@media(max-width:760px){input,select,textarea{font-size:16px!important}}
/* ranked: the board itself, right under the score, with Dottie above it.
   No card, no frame around the board, no capitals (as on the hub and the mode
   screen); every number is in the board and nowhere else. The row that is you
   is a soft sun band, never a colour a Dot can be. */
.rcGood{text-align:center;color:var(--muted);font-weight:800;margin:-4px 0 12px}
.rankCard{margin:4px 0 14px;text-align:left}
.rcHead{display:flex;align-items:center;gap:12px;margin-bottom:12px;min-height:64px}
.rcDottie{flex:0 0 auto;width:60px}
.rcDottie svg{display:block;width:60px;height:auto;overflow:visible;animation:rcBob 2.4s ease-in-out infinite;transform-origin:50% 90%}
.rcDottie.hop svg{animation:rcHop .6s cubic-bezier(.3,1.6,.5,1) 2,rcBob 2.4s ease-in-out 1.2s infinite}
.rcSay{flex:1;min-width:0}
.rcBubble{position:relative;display:inline-block;max-width:100%;background:#fff;border:2px solid #29303d;border-radius:10px;padding:7px 12px;font-weight:900;font-size:13.5px;line-height:1.25;color:#f2705f;animation:rcIn .3s ease-out;transform-origin:0 50%}
.rcBubble:after{content:'';position:absolute;right:100%;top:50%;margin-top:-8px;border:8px solid transparent;border-right-color:#29303d}
.rcCap{font-size:13px;font-weight:800;color:#6b6459;margin:0 0 4px 12px}
.rcList{position:relative;display:flex;flex-direction:column;margin-bottom:6px}
.rcRow{display:grid;grid-template-columns:34px 32px 1fr auto;align-items:center;gap:8px;height:44px;padding:0 12px;border-top:1.5px dashed #e6e0d6;background:#fff;position:relative;font-weight:700;color:#29303d}
.rcRow:first-child{border-top-color:transparent}
.rcRow .rcR{font:800 17px/1 'Baloo 2','Nunito',sans-serif;color:#6b6459}
.rcRow .rcName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcRow .rcS{font:800 17px/1 'Baloo 2','Nunito',sans-serif}
.rcRow.me{background:#ffe7a8;border-top-color:transparent;border-radius:12px 5px 12px 5px;z-index:2;font-weight:900}
.rcRow.me+.rcRow{border-top-color:transparent}
.rcRow.me .rcR{color:#29303d}
.rcRow.run{color:#6b6459;z-index:3}
.rcRow.run .rcName{font-style:italic}
.rcRow.run .rcAv{opacity:.55}
.rcRow.gap{height:26px;border-top-color:transparent}
.rcRow.gap+.rcRow{border-top-color:transparent}
.rcList.rising.go .rcRow{transition:transform 1.3s cubic-bezier(.2,.8,.2,1),opacity .6s}
.rcList.rising.go .rcRow.me{box-shadow:0 8px 18px rgba(41,48,61,.22)}
.rcFull{background:none;border:0;padding:6px 12px;font:900 13px 'Nunito',sans-serif;color:#29303d;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@keyframes rcBob{50%{translate:0 -4px}}
@keyframes rcHop{40%{transform:translateY(-14px) rotate(-6deg)}}
@keyframes rcIn{from{opacity:0;transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){.rcDottie svg,.rcDottie.hop svg,.rcBubble{animation:none}}