/* The free game, in the day's colours. Its pages are drawn as the days' list is (.sh-top, .sh-body); its game is the
   day's game. The game screen's rules below are the day's (app.css, desktop.css) under the free game's own names:
   the day's are keyed to the day's state on <body>, which stays as the day left it under this layer. The layer's own
   state is on .free: fr-g the game is up, fr-m the map is open, fr-dp the computer's map panel, fr-ds the computer's
   side panel after the answer. */
.free { position: fixed; z-index: 38; inset: 0; display: none; background: var(--field); color: var(--ink); }
.free.on { display: block; }
.desk .free, .free.fr-g { top: calc(var(--top) + var(--safe-top)); }
.free.fr-g { background: var(--field-deep); }

/* ---------- Pages ---------- */
.fr-pg { position: absolute; inset: 0; display: flex; flex-direction: column; }
.fr-g .fr-pg, .fr-game { display: none; }
.fr-g .fr-game { display: block; }
/* Under the computer's header the page needs no room for the notch. */
.desk .fr-pg .sh-top { height: var(--top); padding-top: 0; }
.fr-sub { margin: 4px 0 0; color: var(--ink-muted); }
.fr-l { margin: 20px 0 8px; color: var(--ink-muted); }
.fr-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.fr-seg button { flex: 1 1 auto; min-width: 56px; height: 46px; padding: 0 10px; background: var(--field-deep); color: var(--ink);
                 font: 700 15px/1 var(--label); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.fr-seg button[aria-checked="true"] { background: var(--panel); color: var(--on-panel); }
.fr-seg button:disabled { cursor: default; }
.fr-seg button:disabled:not([aria-checked="true"]) { color: var(--ink-muted); }
.fr-hint { margin: 10px 0 0; color: var(--ink-soft); font-size: 15px; }
.fr-best { min-height: 1.3em; margin: 20px 0 0; color: var(--ink-soft); font: 700 14px/1.3 var(--label); letter-spacing: .04em; }
.fr-go { display: grid; gap: 6px; margin-top: 22px; }
.fr-go .fr-hint { margin: 0 0 6px; }
.fr-pri, .fr-sec { min-width: 0; height: 58px; padding: 0 12px; font: 700 clamp(14px, 4.2vw, 17px)/1.1 var(--label); letter-spacing: .05em;
                   text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; }
.fr-pri { background: var(--panel); color: var(--on-panel); }
.fr-sec { background: var(--field-deep); color: var(--ink); }
.fr-pri:disabled { background: var(--field-deep); color: var(--ink-muted); cursor: default; }
.fr-pri:not(:disabled):active, .fr-sec:not(:disabled):active { transform: scale(.985); }
.fr-link { height: 44px; color: var(--ink-soft); font: 700 13px/1 var(--label); letter-spacing: .1em; text-transform: uppercase; }
.fr-wide { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 8px 0 0; padding: 14px 12px;
           background: var(--panel); color: var(--on-panel); font: 700 16px/1.2 var(--label); letter-spacing: .03em; text-align: start; }
.fr-wide em { font-style: normal; }
.fr-wide.alt { background: var(--field-deep); color: var(--ink); }
.fr-wait { margin: 40px 0 16px; text-align: center; color: var(--ink-soft); }
/* A guest's way to sign in: what an account gives, and the button. */
.fr-in { display: grid; gap: 10px; margin-top: 22px; padding: 14px; background: var(--field-deep); }
.fr-in p { margin: 0; color: var(--ink-soft); }
.fr-in .fr-pri { height: 50px; }

/* The end, and the countdown before a place: one big number. */
.fr-big { display: grid; justify-items: center; gap: 10px; margin: 28px 0 6px; text-align: center; }
.fr-big b { font: 700 76px/.9 var(--display); letter-spacing: .01em; }
.fr-big span { color: var(--ink-muted); }
.fr-count b { font-size: 132px; }
.fr-mid { display: flex; flex-direction: column; justify-content: center; }
/* The countdown and the wait say the place themselves: no line over them in the middle of the page. */
.fr-mid > .fr-sub { display: none; }
.fr-rec { margin: 6px 0 0; text-align: center; color: var(--speed); font: 700 16px/1.3 var(--label); letter-spacing: .04em; }
.fr-final .fr-best { text-align: center; }

/* Lists: the places of a game and a challenge's standing. Yours is the white row. */
.fr-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 2px; }
.fr-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 58px; gap: 8px; align-items: center; min-height: 40px; padding: 6px 10px; background: var(--field-deep); }
.fr-list .n { color: var(--ink-muted); font: 700 13px/1 var(--label); }
.fr-list .w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-list .k { color: var(--ink-muted); font: 700 12px/1 var(--label); letter-spacing: .03em; white-space: nowrap; }
.fr-list b { font: 700 21px/1 var(--display); text-align: end; }
.fr-list em { font-style: normal; font-size: 10px; color: var(--ink-muted); }
.fr-list li.me { background: var(--panel); color: var(--on-panel); }
.fr-list li.me .n, .fr-list li.me .k, .fr-list li.me em { color: var(--on-panel); }
.fr-table li { grid-template-columns: 22px minmax(0, 1fr) 64px; }
.fr-l + .fr-list, .fr-l + .rk { margin-top: 0; }
.fr-list .fr-under { display: block; margin-top: 3px; }

/* The archive: a row a day, its date over how the world did, the way in or your points at the end. */
.fr-days { display: grid; gap: 2px; margin-top: 16px; }
.fr-day { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n d e" "n s e"; align-items: center; gap: 3px 12px; width: 100%;
          min-height: 58px; padding: 8px 12px; background: var(--field-deep); color: var(--ink); text-align: start; }
.fr-day b { grid-area: n; font: 700 22px/1 var(--display); letter-spacing: .02em; }
.fr-day span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font-size: 15px; }
.fr-day .d { grid-area: d; }
.fr-day .s { grid-area: s; color: var(--ink-muted); font-size: 12px; }
.fr-day em { grid-area: e; font: 700 12px/1 var(--label); font-style: normal; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.fr-day.done em { color: var(--ink-soft); }
.fr-day em i { font: 700 21px/1 var(--display); font-style: normal; color: var(--ink); }
.fr-day.off, .fr-day.off span { color: var(--ink-muted); }
.fr-day.off em { font-family: inherit; font-weight: 400; font-size: 13px; line-height: 1.2; letter-spacing: 0; text-transform: none; white-space: normal; text-align: end; }
.fr-day.mine em { display: grid; justify-items: end; gap: 3px; }
.fr-day em small { font-size: 11px; color: var(--ink-muted); }

/* Challenges: the ones on the free screen, and who made one. */
.fr-chs { display: grid; gap: 2px; }
.fr-ch { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who go" "set go"; gap: 3px 12px; align-items: center; width: 100%;
         padding: 10px 12px; background: var(--field-deep); color: var(--ink); text-align: start; }
.fr-ch b { grid-area: who; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px/1.2 var(--label); letter-spacing: .03em; }
.fr-ch span { grid-area: set; color: var(--ink-muted); font-size: 13px; }
.fr-ch em { grid-area: go; font-style: normal; }
.fr-chby { margin: 14px 0 0; font: 700 19px/1.2 var(--label); letter-spacing: .03em; }

/* A mode's records: your best on its settings and your place on their board, the week's first three. */
.fr-mine { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.fr-mine b { font: 700 56px/.9 var(--display); letter-spacing: .01em; }
.fr-mine span { color: var(--ink-muted); }
.fr-recs .fr-best { min-height: 0; margin-top: 8px; }
.fr-recs .fr-hint { margin-top: 0; }
.fr-recs .fr-in { margin-top: 20px; }
.fr-home .fr-c { display: grid; gap: 2px; }
.fr-home .fr-c .fr-wide { margin: 0; }
.fr-home .fr-c + .fr-d .fr-hint { margin-top: 16px; }

/* The lobby's players. */
.fr-mem { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.fr-mem li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; background: var(--field-deep); }
.fr-mem .av { flex: none; width: 26px; height: 26px; font-size: 12px; outline: 0; background: var(--field-tint); }
.fr-mem li.me .av { background: var(--ink); color: var(--field-deep); }
.fr-mem b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-mem span { font-size: 11px; color: var(--ink-muted); }

/* The places of a finished game, each a way to its answer. */
.fr-places { display: grid; gap: 2px; margin-top: 8px; }
.fr-pl { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 18px; gap: 8px; align-items: center; min-height: 44px; padding: 6px 10px; background: var(--field-deep); color: var(--ink); text-align: start; }
.fr-pl .n { color: var(--ink-muted); font: 700 13px/1 var(--label); }
.fr-pl .w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-pl b { font: 700 19px/1 var(--display); text-align: end; }
.fr-pl em { font-style: normal; color: var(--ink-muted); }

/* A day of the archive: the way in and, beside it, the way in with friends. */
.fr-dr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px; }
.fr-df { padding: 0 12px; background: var(--field-deep); color: var(--ink-soft); font: 700 12px/1.1 var(--label); letter-spacing: .08em; text-transform: uppercase; max-width: 108px; text-wrap: balance; }

/* The question before leaving a game under way: a small box over everything, as the account's dialog is. */
.fr-ask { position: fixed; z-index: 42; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--field-deep);
          background: color-mix(in srgb, var(--field-deep) 86%, transparent);
          padding: calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left)); overflow-y: auto; }
.fr-ask-box { display: grid; gap: 12px; width: 100%; max-width: 380px; padding: 22px 20px 20px; background: var(--field); color: var(--ink); }
.fr-ask-box b { font: 700 28px/1.05 var(--display); letter-spacing: .02em; }
.fr-ask-box p { margin: 0; color: var(--ink-soft); font: 400 16px/1.35 var(--text); }
.fr-ask-go { display: grid; gap: 6px; margin-top: 6px; }
.fr-ask-box button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The way in from the day's list. */
.dd.fr-entry { text-decoration: none; color: var(--ink); }

/* ---------- The header in the game: Back, the place where the day's number stands, its clock ---------- */
.fr-hb, .fr-no, .fr-clock { display: none; }
.fr-play .fr-hb { display: grid; place-items: center; flex: none; margin-inline: -8px 2px; }
.fr-play .fr-no { display: inline; }
.fr-play #day { display: none; }
/* The free game's own Back: none in Telegram, whose Back is the only one, and none on a computer's page of the top,
   whose way up is the header. */
.fr-tg #frBack, .fr-tg .fr-hb, .desk .fr-up #frBack { display: none; }
/* Without a Back the page itself takes the focus, for a screen reader to start there: it draws no ring, as the sheet
   and the menu's pages do not. */
#frPage:focus { outline: none; }
.is-free #timer { display: none; }
/* The clock stands where the day's countdown does; on a page it is empty and keeps the header's right side in place. */
.is-free .fr-clock { display: flex; }
.is-free:not(.fr-play) .fr-clock > * { display: none; }
.fr-clock b { font-variant-numeric: tabular-nums; }
/* The seconds apart from the score line before them. */
.fr-clock span:not(:empty) + b { padding-inline-start: 10px; border-inline-start: 1px solid var(--field-tint); }
.fr-clock b:empty { display: none; }
.fr-clock.low b { color: var(--speed); }
/* Under the header, the time left as a line. */
.fr-bar { position: fixed; z-index: 16; left: 0; right: 0; top: calc(var(--top) + var(--safe-top)); height: 3px; pointer-events: none; }
.fr-bar.off { display: none; }
.fr-bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; }
[dir="rtl"] .fr-bar i { transform-origin: 100% 50%; }
.fr-bar.low i { background: var(--speed); }

/* ---------- The game: the day's screen ---------- */
.fr-stage { position: fixed; top: calc(var(--top) + var(--safe-top)); left: 0; right: 0; bottom: var(--foot); background: var(--field-deep); }
#frPano { position: absolute; inset: 0; }
.fr-compass { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: var(--tape); background: var(--field-deep); overflow: hidden; cursor: ew-resize; touch-action: none;
              transition: transform .42s var(--ease) .12s, visibility 0s; }
.fr-compass svg { position: absolute; left: 0; top: 0; height: var(--tape); will-change: transform; }
.fr-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); }
.fr-compass::after { content: ""; position: absolute; z-index: 1; left: 50%; bottom: 0; width: 2px; height: 9px; margin-left: -1px; background: var(--ink); }
.fr-m .fr-compass { transform: translateY(100%); visibility: hidden; transition: transform .34s var(--ease), visibility 0s .34s; }
.fr-cred { 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; }
.fr-cred::-webkit-scrollbar { display: none; }
.fr-cred a { color: inherit; text-decoration: none; }

/* The globe's box over the panorama; small in the corner, big when the map is open. */
#frMap { position: fixed; z-index: 10; left: 0; right: 0; bottom: var(--foot); top: calc(var(--top) + var(--safe-top)); background: transparent; pointer-events: none; }
.fr-m #frMap { pointer-events: auto; }
.fr-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); }
.fr-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); }
.fr-call b { padding: 10px 12px; background: var(--panel); color: var(--on-panel); font: 700 22px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.fr-call span { padding: 6px 8px; background: var(--field); color: var(--ink); }
.fr-call span:empty { display: none; }
.fr-call em { display: inline-block; font-style: normal; animation: nudge 1.4s var(--ease) infinite; }
.fr-m .fr-hit, .fr-m .fr-call { visibility: hidden; }
.fr-m .fr-call { opacity: 0; transform: translateX(-10px); }

/* Over the panorama: Skip or Give up, and in a party who has answered. */
.fr-skip, .fr-ribbon { position: fixed; z-index: 16; top: calc(var(--top) + var(--safe-top) + 12px); inset-inline-start: calc(8px + var(--safe-start)); }
.fr-skip { padding: 9px 11px; background: var(--field-deep); color: var(--ink); }
.fr-skip:disabled { color: var(--ink-muted); }
.fr-ribbon { display: none; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 16px); pointer-events: none; }
.fr-ribbon.on { display: flex; }
.fr-ribbon .av { width: 26px; height: 26px; font-size: 12px; outline: 0; background: var(--field-tint); color: var(--ink); }
.fr-ribbon .av.done { background: var(--ink); color: var(--field-deep); }
.fr-ribbon .av.away { background: var(--field-deep); color: var(--ink-muted); outline: 2px dashed var(--field-tint); outline-offset: -2px; }
.fr-ribbon .av.me { box-shadow: inset 0 -3px 0 var(--speed); }
/* A face with a photo is dimmed until the answer is in, then whole with a white ring. */
.fr-ribbon .av.ph { opacity: .5; }
.fr-ribbon .av.ph.done { opacity: 1; box-shadow: 0 0 0 2px var(--ink); }
.fr-ribbon .av.ph.me { border-bottom: 3px solid var(--speed); }
.fr-ribbon .tm { display: flex; align-items: center; gap: 6px; padding-inline-end: 8px; background: var(--field-deep); color: var(--ink); }
.fr-ribbon .tm .av { outline: 0; }
.fr-ribbon .tm b { font: 700 12px/1 var(--label); letter-spacing: .04em; white-space: nowrap; }
.fr-ribbon .tm.me { box-shadow: inset 0 -3px 0 var(--speed); }
.fr-ribbon .tm.me .av { box-shadow: none; }
.fr-m .fr-skip { top: auto; bottom: calc(var(--foot) + 94px); }

/* The plates over the open map, as the day's: they exist only there and fade in. */
.fr-ovt, .fr-ovb { 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; }
.fr-ovt { top: calc(var(--top) + var(--safe-top) + 12px); pointer-events: none; }
.fr-ovb { inset-inline-end: calc(8px + var(--safe-end)); bottom: calc(var(--foot) + 82px); }
.fr-m .fr-ovt.on, .fr-m .fr-ovb.on { opacity: 1; visibility: visible; transform: none; }
/* Your points: the number large, the distance and what happened beside it. */
.fr-sc { max-width: min(360px, calc(100vw - 16px)); }
.fr-sc .nums span { color: var(--ink-soft); }
.fr-parts { margin: 8px 0 0; color: var(--ink-muted); font: 500 12px/1.35 var(--text); }
.fr-rank { margin: 8px 0 0; color: var(--ink); font: 700 14px/1.3 var(--label); letter-spacing: .04em; }
/* The ways on besides the strip's: small plates over the place's. */
.fr-pbs { display: flex; flex-wrap: wrap; gap: 4px; }
.fr-pb { color: var(--ink); }
/* A table over the map: the answers to this place, without faces. */
.fr-ovt .rk { min-width: min(320px, calc(100vw - 16px)); margin-top: 4px; padding: 0 8px; background: var(--field-deep); }
.fr-rk.min li { grid-template-columns: 22px minmax(0, 1fr) auto 50px; gap: 8px; padding: 5px 0; font-size: 14px; }
.fr-rk.min li:last-child { border-bottom: 0; }
.fr-rk.min li.me { margin: 0 -8px; padding: 5px 8px; }
.fr-rk .w em { font-style: normal; font-size: 11px; color: var(--ink-muted); }
.fr-rk .ok { font-style: normal; margin-inline-start: 4px; }
.fr-rk li.me .w em { color: var(--field-tint); }
/* Your face in your white row: the letter stays readable on the row's green square. */
.fr-rk li.me .av { color: var(--ink); }
.fr-next { color: var(--ink-soft); }

/* The bottom strip, as the day's: up with the map; one button, two halves once there is a pin. */
.fr-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; }
.fr-m .fr-act { transform: none; visibility: visible; transition: transform .38s var(--ease), grid-template-columns .42s var(--ease), gap .42s var(--ease), visibility 0s; }
.fr-act.on { grid-template-columns: 1fr 1fr; gap: 6px; }
.fr-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; }
.fr-act button:active { transform: scale(.985); }
#frLook { background: var(--field-deep); color: var(--ink); }
#frGo { background: var(--panel); color: var(--on-panel); }
.fr-act:not(.on) #frGo { padding: 0; color: transparent; }
.fr-act.on #frGo { transition: color .15s .3s; }
#frGo:disabled { opacity: .6; cursor: default; }
/* A game opened on its answer has no picture to go back to: the way on alone. */
.fr-act.one { grid-template-columns: 0fr 1fr; gap: 0; }
.fr-act.one #frLook { padding: 0; color: transparent; }

/* ---------- The pages on a computer: the mode's settings, the lobby and the archive as wide as the shell's pages ---------- */
.desk .fr-pg.wide :is(.sh-top, .sh-body) { padding-left: max(24px, calc(50% - var(--page) / 2)); padding-right: max(24px, calc(50% - var(--page) / 2)); }
.desk :is(.fr-home, .fr-lobby) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap); align-items: start; align-content: start; }
.desk :is(.fr-home, .fr-lobby) > .fr-sub { grid-column: 1 / -1; }
/* The settings on the left; what the mode is and its records on the right, each a plate. */
.desk .fr-home { grid-template-areas: "c c" "a d" "a r"; grid-template-rows: auto auto 1fr; row-gap: 16px; }
.desk .fr-home .fr-c { grid-area: c; }
.desk .fr-home .fr-a { grid-area: a; }
.desk .fr-home .fr-d { grid-area: d; }
.desk .fr-home .fr-r { grid-area: r; }
.desk .fr-home :is(.fr-d, .fr-r) { padding: 24px; background: var(--field-deep); }
.desk .fr-home .fr-d .fr-hint { margin: 0; }
.desk .fr-home .fr-r > .fr-l:first-child, .desk .fr-home .fr-a > .fr-l:first-child { margin-top: 0; }
.desk .fr-home .fr-r .fr-in { margin: 0; padding: 0; background: none; }
.desk .fr-home .fr-r .fr-in + .fr-l { margin-top: 24px; }
.desk .fr-home .fr-r .fr-ch { background: var(--field); }
.desk .fr-home .fr-go { display: flex; }
.desk .fr-home .fr-go > * { flex: 1; }
/* The lobby: its settings on the left, the players beside them. */
.desk .fr-lobby { grid-template-areas: "s s" "a r"; }
.desk .fr-lobby > .fr-sub { grid-area: s; }
.desk .fr-lobby .fr-a { grid-area: a; }
.desk .fr-lobby .fr-r { grid-area: r; }
/* The archive: a grid of days. */
.desk .fr-arch > .fr-hint { max-width: 720px; }
.desk .fr-days { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.desk .fr-day { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n e" "d d" "s s"; align-items: start; align-content: start; row-gap: 8px;
                min-height: 124px; padding: 18px; }
.desk .fr-dr { grid-template-columns: 1fr; }
.desk .fr-df { max-width: none; height: 40px; }
.desk .fr-day b { font-size: 30px; }
.desk .fr-day .s { white-space: normal; }

/* ---------- The game on a computer ---------- */
.desk .fr-stage { bottom: 0; }
.desk .fr-compass { top: 12px; bottom: auto; left: 50%; right: auto; width: 480px; margin-left: -240px; }
.desk .fr-compass, .desk .fr-m .fr-compass { transform: none; visibility: visible; transition: none; }
.desk .fr-skip, .desk .fr-m .fr-skip { top: calc(var(--top) + var(--safe-top) + 12px); bottom: auto; inset-inline-start: calc(24px + var(--safe-start)); }
.desk .fr-ribbon { inset-inline-start: calc(24px + var(--safe-start)); }
.desk .fr-cred { left: calc(24px + var(--safe-left)); right: auto; bottom: 24px; height: auto; min-height: 28px; padding: 6px 10px; max-width: calc(100vw - var(--pw-now) - 96px);
                 flex-wrap: wrap; row-gap: 3px; justify-content: flex-start; white-space: normal; line-height: 1.3; overflow: visible; }
/* The map is a panel in the bottom right corner: folded, only the globe shows through the clip. */
.desk .fr-dp #frMap { top: auto; left: auto; right: calc(24px + var(--safe-right)); bottom: 24px; width: var(--pw-now); height: var(--ph-now);
                      background-color: var(--field) !important;
                      clip-path: circle(calc(var(--mini) / 2 - 2px) at calc(100% - var(--mini) / 2) calc(100% - var(--mini) / 2)); transition: clip-path .38s var(--ease); }
.desk .fr-dp.fr-m #frMap { clip-path: circle(150% at calc(100% - var(--mini) / 2) calc(100% - var(--mini) / 2)); }
.desk .fr-dp .fr-hit { right: calc(24px + var(--safe-right)); bottom: 24px; }
.desk .fr-dp .fr-call { right: calc(24px + var(--safe-right) + var(--mini) + 14px); bottom: calc(24px + var(--mini) / 2 - 31px); }
.desk .fr-dp .maplibregl-canvas-container.maplibregl-interactive { cursor: crosshair; }
/* The answer's bar over the panel's bottom: dimmed until there is a pin. */
.desk .fr-dp .fr-act { left: auto; right: calc(24px + var(--safe-right)); bottom: 24px; width: var(--pw-now); height: var(--bar); padding: 0; background: none;
                       grid-template-columns: 1fr; gap: 0; transform: none; opacity: 0; transition: opacity .2s, visibility 0s .2s; }
.desk .fr-dp.fr-m .fr-act { opacity: 1; visibility: visible; transition: opacity .2s .12s, visibility 0s; }
.desk .fr-dp #frLook { display: none; }
.desk .fr-dp .fr-act #frGo { height: var(--bar); padding: 0 12px; color: var(--on-panel); font-size: 16px; transition: none; }
.desk .fr-dp .fr-act #frGo:disabled { opacity: 1; background: var(--field-deep); color: var(--ink-muted); }
/* After the answer: the map in the main area, the result in the side panel. */
.fr-ds .fr-stage { right: var(--side); }
.fr-ds #frMap { top: calc(var(--top) + var(--safe-top)); left: 0; right: var(--side); bottom: 0; }
.fr-ds .fr-hit { right: calc(var(--side) + 24px); bottom: 24px; }
.fr-ds .fr-call { right: calc(var(--side) + 24px + var(--mini) + 14px); bottom: calc(24px + var(--mini) / 2 - 31px); }
.fr-ds .fr-cred { max-width: calc(100vw - var(--side) - var(--mini) - 96px); }
.fr-ds.fr-m .fr-cred { max-width: calc(100vw - var(--side) - 48px); }
.fr-ds.fr-m .fr-compass { visibility: hidden; }
.fr-ds .fr-act, .desk .fr-ovt, .desk .fr-ovb { display: none; }
/* The side panel is the day's (.side): its place, score and plates take the day's look, in the day's order: the place,
   the score, what this game adds, the buttons at the bottom. Shown only here. */
.free .fr-side { display: none; }
.free .fr-side > * { order: 3; }
.free .fr-side > .place { order: 1; }
.free .fr-side > .score { order: 2; }
.free .fr-side > .fr-sbtns { order: 9; }
.free.fr-ds .fr-side { position: fixed; z-index: 20; top: calc(var(--top) + var(--safe-top)); right: 0; bottom: 0; width: var(--side);
                       display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
                       background: var(--field-deep); user-select: text; -webkit-user-select: text; }
.fr-side .fr-snote { margin: 10px 0 0; color: var(--ink); font: 700 14px/1.3 var(--label); letter-spacing: .04em; }
.fr-side .score.on + .pl, .fr-side .fr-rank { margin: 0; padding: 14px 24px 0; }
.fr-side .rk { margin: 20px 16px 0; }
.fr-side .rk li { padding: 8px; }
.fr-side .fr-l { margin: 24px 24px 8px; }
.fr-side .fr-next { padding: 16px 24px 0; }
.fr-sbtns { position: sticky; bottom: 0; z-index: 3; display: grid; gap: 8px; margin-top: auto; padding: 16px 24px; background: var(--field-deep); }
.fr-sbtns:empty { display: none; }
.fr-sbtns button { height: 52px; font-size: 15px; }
.fr-sbtns .fr-sec { background: var(--field); }

@media (hover: hover) {
  .desk .fr-home .fr-r .fr-ch:hover { background: var(--field-tint); }
  .fr-seg button:not(:disabled):not([aria-checked="true"]):hover, .fr-sec:not(:disabled):hover, .fr-wide.alt:hover, .fr-day:not(.off):hover, .fr-ch:hover, .fr-skip:hover, .fr-pb:hover, #frLook:hover { background: var(--field-tint); }
  .fr-pri:not(:disabled):hover, .fr-wide:not(.alt):hover, #frGo:not(:disabled):hover { background: var(--ink-soft); }
  .fr-sbtns .fr-sec:hover { background: var(--field-tint); }
  .fr-link:hover, .fr-hb:hover { color: var(--ink); }
  .fr-pl:hover, .fr-df:hover { background: var(--field-tint); }
}
@media (prefers-reduced-motion: reduce) { .fr-compass, .fr-ovt, .fr-ovb, .fr-call, .fr-call em, .fr-act, .desk #frMap { transition: none !important; animation: none !important; } }