/* maply theme per Asterfield rules: single field colour, white mark, no shadows, rounded corners or transparency. */
:root {
  --field: #245A3C; --field-deep: #1A412B; --field-tint: #59826B;
  --ink: #FFFFFF; --ink-soft: #D8E1DC; --ink-muted: #B5C7BD;
  --panel: #FFFFFF; --on-panel: #245A3C; --speed: #F2C14E;
  /* Insets for the notch and Telegram buttons. In a fullscreen Mini App, "Close" and "⋯" sit on top of the page:
     their height comes from Telegram in --tg-content-safe-area-inset-top. Outside Telegram these variables are absent, so env() remains. */
  --safe-top: max(env(safe-area-inset-top), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --safe-bottom: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
  /* Sideways, a notched phone hides the screen's edges too. Start and end follow the text: in Arabic the start is right. */
  --safe-left: max(env(safe-area-inset-left), var(--tg-safe-area-inset-left, 0px));
  --safe-right: max(env(safe-area-inset-right), var(--tg-safe-area-inset-right, 0px));
  --safe-start: var(--safe-left); --safe-end: var(--safe-right);
  --top: 52px; --mini: 136px; --foot: calc(18px + var(--safe-bottom)); --tape: 38px;
  --ease: cubic-bezier(.2, .9, .25, 1);
  --display: "DIN Condensed", "Sofia Sans Extra Condensed", sans-serif;
  --label: "DIN Alternate", "Sofia Sans", sans-serif;
  --text: "Sofia Sans", system-ui, sans-serif;
}
html[dir="rtl"] { --safe-start: var(--safe-right); --safe-end: var(--safe-left); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--field); color: var(--ink); overscroll-behavior: none; }
body { position: fixed; inset: 0; overflow: hidden; font: 400 16px/1.35 var(--text); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; border: 0; border-radius: 0; background: none; padding: 0; cursor: pointer; }
.up { font: 700 13px/1 var(--label); letter-spacing: .1em; text-transform: uppercase; }

/* Header */
.top { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: calc(var(--top) + var(--safe-top));
       padding: var(--safe-top) calc(16px + var(--safe-right)) 0 calc(16px + var(--safe-left)); display: flex; align-items: center; justify-content: space-between; background: var(--field); }
.logo { display: flex; align-items: baseline; gap: 8px; }
.logo b { font: 700 32px/1 var(--display); }
.logo span { color: var(--ink-muted); }
/* Inside a Telegram window with a title bar that already says "maply": a lower header, the day in the timer's type. */
html.framed { --top: 44px; }
.framed .logo b { display: none; }
.framed .logo span { font: 700 26px/1 var(--display); letter-spacing: .02em; color: var(--ink-muted); }
.timer { display: flex; align-items: baseline; gap: 8px; }
.timer span { color: var(--ink-muted); }
.timer b { font: 700 26px/1 var(--display); letter-spacing: .02em; }
/* Result: below the header is the day's table. One row per player: rank, avatar, name, a score bar on a 0–5,000 scale,
   points and kilometres. The bar is split into parts: grey for kilometres, white for bonuses, gold for speed; in your own row
   dashed outlines also show the bonuses you missed. */
.prog { position: absolute; left: 0; right: 0; top: 100%; padding: 4px calc(12px + var(--safe-right)) 8px calc(12px + var(--safe-left)); background: var(--field-deep);
        transform: scaleY(0); transform-origin: 50% 0; visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; }
/* Folded away it is out of the tab order and the screen reader's reach too. */
.is-reveal.is-map .prog { transform: none; visibility: visible; transition: transform .3s var(--ease), visibility 0s; }
/* The name column grows with the screen, so names keep more than six letters; every row has the same columns, so the
   bars start in one line. */
.lb { --nw: clamp(44px, 18vw, 110px); }
.lb.all { --nw: clamp(44px, calc(36vw - 56px), 180px); }
.lb .r { height: 26px; overflow: hidden; display: grid; grid-template-columns: 20px 18px var(--nw) 1fr 46px 54px; gap: 7px; align-items: center;
         font: 700 11px/1 var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
         transition: height .3s var(--ease), margin .3s var(--ease), opacity .2s; }
/* Folded, the table keeps your row alone; the others close up into it. */
.lb.min .r:not(.keep) { height: 0; margin-top: 0; margin-bottom: 0; opacity: 0; }
/* A rank that skips ahead: a dashed line says there are rows between. */
.lb .r.skip { border-top: 1px dashed var(--field-tint); }
.lb.all .r { height: 32px; content-visibility: auto; contain-intrinsic-size: auto 32px; }
.lb.all .bar { background: var(--field-deep); }
.lb .r em { font-style: normal; color: var(--ink-muted); text-align: center; font-size: 10px; letter-spacing: 0; }
/* The face, with the group's mark at its corner for the players of this chat. */
.lb .fc { position: relative; width: 18px; height: 18px; }
.lb .gi { position: absolute; inset-inline-end: -6px; bottom: -5px; width: 12px; height: 12px; display: grid; place-items: center;
          background: var(--field-deep); border-radius: 50%; color: var(--ink-soft); }
.lb .gi svg { width: 9px; height: 9px; fill: currentColor; }
.lb .r > span:nth-of-type(1) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Your row stands out: a lighter band with a white edge, bigger points; the others' bars and points are muted. */
.lb .r.me { height: 30px; margin: 2px -8px; padding: 0 8px; background: var(--field); box-shadow: inset 3px 0 0 var(--ink); color: var(--ink); }
[dir="rtl"] .lb .r.me { box-shadow: inset -3px 0 0 var(--ink); }
.lb .r.me > span:nth-of-type(1) { font-size: 12px; }
/* In your band the empty rest of the bar is darker than the band, so the bar reads as a whole. */
.lb .r.me .bar { background: var(--field-deep); }
.lb .r.me .s { font-size: 21px; }
.lb .r:not(.me) .bar i { opacity: .5; }
.lb .r:not(.me) .s { font-size: 16px; color: var(--ink-soft); }
.lb .r em.m1 { color: var(--speed); }
.lb .r em.m2 { color: var(--ink); }
.lb .r em.m3 { color: #D9925B; }
.lb .hit { height: 100%; display: flex; align-items: center; cursor: default; }
.lb .bar { width: 100%; height: 8px; display: flex; gap: 1px; background: var(--field); }
.lb .bar i.lit { outline: 2px solid var(--ink); outline-offset: 1px; }
/* Under the table: "N more" opens every answer in a sheet; (i) opens how the points add up; the chevron folds the table. */
.prog .foot { display: flex; align-items: center; gap: 2px; min-height: 24px; }
.prog .none { padding-inline-start: 17px; font: 700 10px/1.4 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.prog .info, .prog .fold { width: 28px; height: 24px; display: grid; place-items: center; color: var(--ink-muted); }
.prog .info { margin-inline-start: auto; }
.prog .info i { width: 13px; height: 13px; display: grid; place-items: center; border: 1.2px solid currentColor; border-radius: 50%;
                font: italic 700 9px/1 var(--text); }
.prog .info[aria-expanded="true"] { color: var(--ink); }
.prog .fold svg { transition: transform .3s var(--ease); }
.prog .fold[aria-expanded="false"] svg { transform: rotate(180deg); }
/* How the points add up: a small card hanging from the (i), over the map, not pushing the table. */
.prog .rules { position: absolute; z-index: 3; top: calc(100% - 6px); inset-inline-end: 10px; width: min(264px, calc(100% - 20px)); padding: 9px 11px 3px;
               background: var(--panel); color: var(--on-panel); font: 500 12px/1.35 var(--text); box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
               animation: row-in .2s var(--ease) both; }
/* The corner points at the (i): showRules measures where it stands. */
.prog .rules::before { content: ""; position: absolute; top: -5px; inset-inline-end: var(--notch, 39px); border: solid transparent; border-width: 0 5px 5px; border-bottom-color: var(--panel); }
.prog .rules p { display: flex; gap: 7px; margin: 0 0 6px; }
/* The bonuses are white in the bars: here too, with an edge so they show on the white card. */
.prog .rules i { flex: none; width: 8px; height: 8px; margin-top: 4px; background: var(--panel); outline: 1px solid var(--on-panel); outline-offset: -1px; }
.prog .rules i.km { background: var(--ink-muted); outline: 0; }
.prog .rules i.sp { background: var(--speed); outline: 0; }
.prog .rules .gi { flex: none; width: 12px; height: 12px; margin-top: 2px; display: grid; place-items: center; background: var(--field-deep);
                   border-radius: 50%; color: var(--ink-soft); }
.prog .rules .gi svg { width: 9px; height: 9px; fill: currentColor; }
.prog .rules i.if { background: none; outline: 1px dashed currentColor; outline-offset: -1px; }
.prog .rules b { font-weight: 700; }
.prog .more { display: block; height: 24px; padding: 0; padding-inline-start: 17px; text-align: start; font: 700 10px/1 var(--label); letter-spacing: .1em;
            text-transform: uppercase; color: var(--ink-muted); }
.tip { position: absolute; z-index: 2; padding: 4px 6px; background: var(--panel); color: var(--on-panel); max-width: calc(100% - 8px); pointer-events: none;
       font: 700 10px/1.25 var(--label); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity .12s; }
.tip.on { opacity: 1; }
.lb .bar i { flex: none; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease) var(--d); }
[dir="rtl"] .lb .bar i { transform-origin: 100% 50%; }
.lb .bar i.km { background: var(--ink-muted); }
.lb .bar i.sp { background: var(--speed); }
.lb .bar i.if { background: none; outline: 1px dashed var(--ink-muted); outline-offset: -1px; transform: none; opacity: 0; transition: opacity .3s var(--d); }
.is-reveal .lb .bar i { transform: none; }
.is-reveal .lb .bar i.if { opacity: 1; }
.lb .s { font: 700 18px/1 var(--display); text-align: end; color: var(--ink); }
.lb .k { text-align: end; font-size: 10px; color: var(--ink-muted); white-space: nowrap; }
.sub { color: var(--ink-soft); }
/* Avatar: a square with a letter until there is a Telegram photo. A field-coloured ring separates neighbours in a stack. */
.av { width: 18px; height: 18px; display: grid; place-items: center; background: var(--field-deep); color: var(--ink); outline: 2px solid var(--field);
      font: 700 10px/1 var(--label); letter-spacing: 0; text-transform: uppercase; font-style: normal; }
.av.me { background: var(--ink); color: var(--field-deep); }
.av.ph img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Before the reveal the others are a question mark: no face, no name. */
.av.anon { background: var(--field-tint); color: var(--ink); }
.lb .r.anon span:not(.hit):not(.bar):not(.k) { color: var(--ink-muted); letter-spacing: .2em; }
/* An answer that came in while you watch slides in, and its bar grows. */
.lb .r.new { animation: row-in .5s var(--ease) both; }
.lb .r.new .bar i { animation: bar-in .6s var(--ease) .15s both; }
@keyframes row-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes bar-in { from { transform: scaleX(0); } to { transform: none; } }
.friend.new .g { animation: pop .45s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
/* The live plate: the place in the world so far. */
.pl.lv { display: grid; gap: 6px; }
.pl.lv span { font: 600 14px/1.25 var(--text); color: var(--ink); }

/* Fullscreen panorama */
.stage { position: fixed; top: calc(var(--top) + var(--safe-top)); left: 0; right: 0; bottom: var(--foot); background: var(--field-deep); }
#pano { position: absolute; inset: 0; }
.pnlm-container { background: var(--field-deep) !important; font-family: var(--text) !important; }
.pnlm-load-box, .pnlm-about-msg, .pnlm-ui .pnlm-orientation-button { display: none !important; }
/* Photo credits and map attribution share one strip at the bottom, always visible. License labels are not hidden under sheets or buttons. */
.credits { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; height: var(--foot);
           padding: 0 calc(8px + var(--safe-right)) var(--safe-bottom) calc(8px + var(--safe-left));
           display: flex; align-items: center; justify-content: safe center; gap: 5px; background: var(--field-deep); color: var(--ink-muted);
           font: 500 9.5px/1 var(--text); letter-spacing: 0; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.credits::-webkit-scrollbar { display: none; }
.credits a { color: inherit; text-decoration: none; }

/* Compass: a heading tape at the bottom above the credits, like in an aircraft cockpit: the cardinal directions slide under a fixed mark.
   North is a white tile with a field-coloured letter, like a system button. Tap turns the view to north. */
.compass { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: var(--tape); background: var(--field-deep); overflow: hidden; }
.compass svg { position: absolute; left: 0; top: 0; height: var(--tape); will-change: transform; }
.compass::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 0; width: 10px; height: 10px; margin-left: -5px;
                   background: var(--ink); transform: translateY(-5px) rotate(45deg); }
.compass::after { content: ""; position: absolute; z-index: 1; left: 50%; bottom: 0; width: 2px; height: 9px; margin-left: -1px; background: var(--ink); }
.compass { cursor: ew-resize; touch-action: none; }
/* Two chips side by side; in a language where they do not fit, the second goes under the first. */
.hint { position: absolute; left: 50%; top: 12px; z-index: 3; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  width: max-content; max-width: calc(100% - 24px); transition: opacity .4s; pointer-events: none; }
.hint i { font-style: normal; padding: 9px 11px; background: var(--field); white-space: nowrap; }
.hint.gone { opacity: 0; }

/* Loading */
.loader { position: fixed; inset: 0; z-index: 50; background: var(--field); display: grid; place-items: center; transition: opacity .35s, visibility .35s; }
.loader.gone { opacity: 0; visibility: hidden; }
.loader div { display: grid; justify-items: center; gap: 10px; padding: 0 32px; max-width: 360px; text-align: center; line-height: 1.4; }
.loader canvas { width: min(68vw, 280px, 40vh); aspect-ratio: 1; }
.loader { cursor: default; }
.loader .mark { font: 700 44px/1 var(--display); margin-top: -6px; }
.loader .up { min-height: 1.4em; color: var(--ink-muted); }

/* Map: a transparent canvas over the panorama. The globe has no background: in photo mode it is small in the corner,
   on tap it flies to the centre and grows. The canvas never resizes; only the camera moves. */
#map { position: fixed; z-index: 10; left: 0; right: 0; bottom: var(--foot); top: calc(var(--top) + var(--safe-top)); background: transparent; pointer-events: none; }
.is-map #map { pointer-events: auto; }
.is-map .hint { visibility: hidden; }
/* On entering the globe, the tape slides down behind the credits row; on return to the photo it slides back
   with a short delay, once the globe is already returning to the corner. */
.compass { transition: transform .42s var(--ease) .12s, visibility 0s; }
.is-map .compass { transform: translateY(100%); visibility: hidden; transition: transform .34s var(--ease), visibility 0s .34s; }

/* Mini globe and the caption with an arrow */
.globe-hit { position: fixed; z-index: 12; right: calc(12px + var(--safe-right)); bottom: calc(var(--foot) + var(--tape) + 16px); width: var(--mini); height: var(--mini); }
.call { position: fixed; z-index: 12; right: calc(var(--mini) + 22px + var(--safe-right)); bottom: calc(var(--foot) + var(--tape) + 16px + var(--mini) / 2 - 31px);
        display: grid; justify-items: right; gap: 4px; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
.call b { padding: 10px 12px; background: var(--panel); color: var(--on-panel); font: 700 22px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.call span { padding: 6px 8px; background: var(--field); color: var(--ink); }
.call em { display: inline-block; font-style: normal; animation: nudge 1.4s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateX(5px); } }
.is-map .globe-hit, .is-map .call { visibility: hidden; }
.is-map .call { opacity: 0; transform: translateX(-10px); }

/* Waiting and result are separate plates over the map. Nothing slides in from the bottom:
   the plates exist only in map mode and simply fade in; in photo mode they are absent entirely. */
.ov-top, .ov-bot { position: fixed; z-index: 15; inset-inline-start: calc(8px + var(--safe-start)); display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
                   opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease), visibility .3s; }
.ov-top { top: calc(var(--top) + var(--safe-top) + 12px); pointer-events: none; }
.ov-bot { inset-inline-end: calc(8px + var(--safe-end)); bottom: calc(var(--foot) + 82px); }
.is-map .ov-top.on, .is-map .ov-bot.on { opacity: 1; visibility: visible; transform: none; }
/* Plates are darker than water, otherwise they blend into it over the sea. */
.pl { padding: 8px 10px; background: var(--field-deep); }
.pl.w { background: var(--panel); color: var(--on-panel); }
/* The site's way to Telegram: a plate like the others, but a link. */
.tgl { text-decoration: none; font-weight: 500; }

/* Bottom strip of the map: slides up when the globe is open (the compass slides down meanwhile).
   Until there is a pin, a single "Look again" button. With a pin it smoothly splits:
   "Look" on the left, white "Final answer" on the right (in the result, "Forward to a chat"). The halves are equal. */
.act { position: fixed; z-index: 25; left: 0; right: 0; bottom: var(--foot); padding: 12px calc(16px + var(--safe-right)) 12px calc(16px + var(--safe-left)); background: var(--field);
       display: grid; grid-template-columns: 1fr 0fr; gap: 0;
       transform: translateY(110%); visibility: hidden;
       transition: transform .38s var(--ease), grid-template-columns .42s var(--ease), gap .42s var(--ease), visibility 0s .38s; }
.is-map .act { transform: none; visibility: visible; transition: transform .38s var(--ease), grid-template-columns .42s var(--ease), gap .42s var(--ease), visibility 0s; }
.act.on { grid-template-columns: 1fr 1fr; gap: 6px; }
/* A long label takes two lines rather than lose its end: "In einen Chat weiterleiten", "Vidarebefordra till en chatt". */
.act button { min-width: 0; overflow: hidden; height: 58px; padding: 0 4px; font: 700 clamp(13px, 4.2vw, 17px)/1.1 var(--label); letter-spacing: .05em;
              text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; }
.act button:active { transform: scale(.985); }
#look { background: var(--field-deep); color: var(--ink); }
#go { background: var(--panel); color: var(--on-panel); }
/* Folded to nothing, the second button keeps no edge; while it opens its label waits, so the letters do not stand in a
   column in the narrow strip. */
.act:not(.on) #go { padding: 0; color: transparent; }
.act.on #go { transition: color .15s .3s; }
/* The card takes a few seconds to draw: the button waits, dimmed, and ignores taps. */
.act button.busy { opacity: .6; pointer-events: none; }

.toast { position: fixed; z-index: 40; left: 16px; right: 16px; top: calc(var(--top) + var(--safe-top) + 88px); padding: 12px 14px; background: var(--panel); color: var(--on-panel);
         font: 700 15px/1.25 var(--label); letter-spacing: .02em; transform: translateY(-14px); opacity: 0; transition: transform .3s var(--ease), opacity .3s; pointer-events: none; }
.toast.on { transform: none; opacity: 1; }

/* Pin and markers */
/* The marker element is the wrapper: MapLibre moves it by its transform, so only the svg inside drops. */
.pinm { width: 38px; height: 45px; }
.pin { width: 38px; height: 45px; display: block; transform-origin: 50% 100%; animation: drop .36s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes drop { from { transform: translateY(-34px) scaleY(1.15); opacity: 0; } to { transform: none; opacity: 1; } }
.target { width: 30px; height: 30px; display: block; }
/* A zero-size friend marker sits exactly at its point; the dot, label and leader line are laid out by layoutMarks(). */
.friend { width: 0; height: 0; }
.friend .g { position: absolute; left: 0; top: 0; }
.friend i { position: absolute; left: -9px; top: -9px; outline-color: var(--ink); }
/* A group of answers too close to tell apart: the best one's spot, a count instead of a face, a tap zooms in. */
.friend.hid { display: none; }
/* On the back of the globe: hidden until the globe turns it round. */
.friend.far, .target.far { visibility: hidden; }
.friend.grp .g { cursor: pointer; }
.friend i.grp { width: 22px; height: 22px; left: -11px; top: -11px; border-radius: 50%; background: var(--ink); color: var(--field-deep);
                outline: 3px solid rgba(255, 255, 255, .35); font: 700 11px/1 var(--label); }
/* A face needs a little more room than a letter to be told apart. */
.friend i.ph { width: 22px; height: 22px; left: -11px; top: -11px; }
.friend b { position: absolute; left: 0; top: 0; max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            font: 700 10px/1 var(--label); letter-spacing: .08em; text-transform: uppercase;
            padding: 3px 4px; background: var(--field-deep); outline: 1.5px solid var(--ink); transition: transform .22s var(--ease); }
.friend s { position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--field-deep); transform-origin: 0 50%;
            transition: width .22s var(--ease), transform .22s var(--ease); }
/* The mini globe in the corner shows only your own pin: friends' labels and the target turn into a mess there. */
.globe.small .friend, .globe.small .target { visibility: hidden; }

/* States: waiting and result */
.nums { display: flex; align-items: flex-end; gap: 10px; }
.nums b { font: 700 58px/.8 var(--display); }
.nums .up { color: var(--ink-soft); line-height: 1.25; }
/* Result: a single place plate above the buttons. Tap shows a fact about the place; the cross collapses it into a small tab. */
.place { display: flex; align-items: flex-start; max-width: min(360px, calc(100vw - 16px)); background: var(--field-deep); }
.place .t { flex: 1; min-width: 0; padding: 8px 10px; text-align: start; line-height: 1.25; color: var(--ink); }
.place .x { flex: none; width: 36px; align-self: stretch; display: grid; place-items: start center; padding-top: 10px; color: var(--ink-soft); }
.place p { margin: 6px 0 0; color: var(--ink-soft); font: 400 14px/1.4 var(--text); text-transform: none; letter-spacing: 0; user-select: text; }
.place p:empty { display: none; }
.place.min .t, .place.min .x { display: none; }
.place .tab { display: none; padding: 8px 10px; color: var(--ink-soft); }
.place.min .tab { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips span { padding: 8px 10px; background: var(--field-deep); }
.chips .me { background: var(--panel); color: var(--on-panel); }
.chips .no { color: var(--ink-muted); }
.demo { padding: 8px 10px; background: var(--field-deep); color: var(--ink-muted); text-decoration: underline; font: 500 12px/1 var(--text); }
.hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) { .compass, .ov-top, .ov-bot, .call, .call em, .act, .toast, .pin, .prog, .lb .bar i, .lb .r.new, .friend.new .g { transition: none !important; animation: none !important; } }

/* Days: the home page over everything but the toast. A list of days, newest first; a closed day opens its ranking.
   Avatars carry a small badge for where the player came from: Telegram or the site. */
/* It switches in and out at once, as the menu's pages do: the days and the profile are pages, not a drawer. */
.sheet { position: fixed; z-index: 38; inset: 0; display: flex; flex-direction: column; background: var(--field); visibility: hidden; }
.sheet.on { visibility: visible; }
.sh-top { flex: none; display: flex; align-items: center; gap: 12px; height: calc(var(--top) + var(--safe-top));
         padding: var(--safe-top) calc(16px + var(--safe-right)) 0 calc(16px + var(--safe-left)); }
.sh-top b { font: 700 26px/1 var(--display); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-b { width: 32px; height: 32px; font: 400 22px/1 var(--text); color: var(--ink-soft); }
/* In Telegram its own Back is the sheet's, a step inside as well as the way out (app.js, sheetBack), as it is the free
   game's: two backs on one screen would be one too many. */
.tgback .sh-b { display: none; }
.sheet:focus { outline: none; }
/* The day's clock and its table belong to the day's own screen: over a sheet, a page of the menu or the free game
   they have nothing to say. Hidden, they keep their place, so the header's items stay where they are. */
:is(.is-sheet, .is-page, .is-free) :is(#timer, #prog) { visibility: hidden; }
.sh-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px calc(16px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(16px + var(--safe-left)); user-select: text; -webkit-user-select: text; }
.sh-wait, .sh-sub { color: var(--ink-soft); margin: 8px 0 12px; }
.sh-name { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 16px; color: var(--ink-muted); }
.sh-name input { font: 400 17px/1.2 var(--text); padding: 10px 12px; border: 0; background: var(--panel); color: var(--on-panel); }
.dd { display: block; position: relative; width: 100%; text-align: start; margin: 0 0 8px; padding: 12px; padding-inline-end: 36px; background: var(--field-deep); }
.dd .up { color: var(--ink-muted); }
.dd b { display: block; margin: 6px 0 2px; font: 700 22px/1.1 var(--display); letter-spacing: .02em; }
.dd p { margin: 4px 0 0; color: var(--ink-soft); }
.dd p.me { color: var(--ink); font-weight: 700; }
.dd em { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--ink-muted); }
.dd.open { padding-inline-end: 12px; }
.dd.busy { opacity: .6; }
.rk { list-style: none; margin: 0; padding: 0; }
.rk li { display: grid; grid-template-columns: 34px 30px 1fr auto 56px; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--field-tint); }
.rk li.me { background: var(--ink); color: var(--field-deep); }
.rk .n { font: 700 18px/1 var(--display); text-align: end; }
.rk .a { position: relative; width: 26px; height: 26px; }
.rk .a .av { width: 26px; height: 26px; font: 700 15px/1 var(--display); outline: 0; }
.rk li.me .av { background: var(--field); }
.rk .w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk .w em { font-style: normal; color: var(--field-tint); }
.rk .k { color: var(--ink-muted); font-size: 14px; }
.rk li.me .k { color: var(--field-tint); }
.rk b { text-align: end; font: 700 18px/1 var(--display); }
.src { width: 12px; height: 12px; vertical-align: -2px; }
.rk .src { position: absolute; inset-inline-end: -4px; bottom: -4px; }
.sh-legend { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; color: var(--ink-muted); font-size: 14px; }
.sh-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sh-legend span + span { margin-inline-start: 8px; }