/* Random Duck Race — the shared look: the game, the Rooms lobby and the
   phone join page all load this first.

   THE CUT-CORNER FRAME. Every panel, card, field and small button has the
   same shape as the big arcade buttons: the top-right and bottom-left
   corners cut at 45°. An element in the list below only sets
     --bg   its fill (a colour or a gradient)
     --bd   its edge colour          --bw   the edge width
     --cut  the corner size          --cut-b  the bottom-left one, if different
   and this rule draws the shape: clip-path for the outline, an inset shadow
   for the straight edges, and two small gradients for the edge along each
   cut. Nothing here needs a pseudo-element, so it works on inputs and on
   scrolling panels too. */
html{touch-action:manipulation}
:root{
  /* how deep every cut corner is, against the sizes written in the CSS
     (one place to make the whole interface sharper or softer) */
  --cut-k:0.6;
  --u-panel:linear-gradient(180deg,rgba(36,30,98,.95),rgba(14,14,46,.97));
  --u-end:rgba(14,14,46,.97);
  --u-well:rgba(4,4,24,.34);
  --u-soft:rgba(255,255,255,.07);
  --u-soft2:rgba(255,255,255,.12);
  --u-soft3:rgba(255,255,255,.18);
  --u-line:rgba(255,255,255,.10);
  --u-edge:rgba(196,178,255,.28);
  --u-dim:rgba(226,224,255,.68);
  --u-faint:rgba(226,224,255,.45);
  --u-violet:#8E5CF0;
  --u-hud:rgba(18,16,54,.92);
  --u-amber:#F1C40F;
}

:where(
  /* setup */
  .cfg, .cfg-card, .home-info, .hi-intro, .hi-card, .hi-col, .hi-links, .cfg-tabs, .cfg-tabs button, .field-icon-btn, .seg, .seg button, .set-tabs, .set-tabs button, .dk-add, .paste-clear,
  #pasteArea, .import-drop, .im-col, .tp-opt, .tp-pics, .tp-opt .tp-tick,
  .history-row, .history-row .h-x, .history-row .h-edit, .history-row .h-name-edit, .start-count-badge,
  #raceNameEditBtn, #raceNameInput, #roomBanner, .rb-pin, .wm-name, .wm-prev,
  /* modals */
  .m-card, .m-x, .set-reset, .m-ico, .share-qr, .share-make, .share-qr-dl, .rw-all, .rw-modes button, .grp, .grp-num, .kb, .kb kbd, .u-input, .u-copy, #embedCopyBtn, .qa-chip, .share-soc,
  .lang-card, .dk-reset, .embed-code-wrap, .emb-prev, .emb-dd-btn, .emb-dd-list, .emb-dd-list button, .pg-dl, .sp-name, .snd-grid button, .snd-tracks button, .rs-preview-wrap, .rs-expand-btn, .rs-style-nav,
  .undo-toast, #undoToastBtn, #undoToastClose, .rep, .fin, .rm-opt, .rm-opt svg, .rm-prev, .rm-self-duck,
  /* in the race */
  #bug, #ladder, #raceCtl, .var-badge, .var-clock, .var-x, .var-home, .var-bar, #volumePopup, #volumeMuteBtn, #musicBtn, .pz, .ch-frame, .ld-track, .ld-fill,
  #navToggle, #signInBtn, #soundBtn, #isSound, #isLang, #isEnv, #langIconBtn, #envToggleBtn, #navMenu, #navMenu a, #navMenu .nav-btn,
  /* rooms */
  .rl-pin, .rl-count, .rl-fbtn, .rl-icon, .rl-p, .rl-p img, .rl-p button, .rl-qr-card,
  .rj-input, .rj-pick, .rj-stand, .rj-watch-btn, .rj-watch-bar button, .rj-tabs, .rj-tabs button, .rj-grid button, .rj-preview, .rj-looks button, .rj-room, .rj-lang, .rj-dice, .rj-pill, .qs-btn, .qs-upload, .sp-tile,
  /* the room screens' language sheet (js/i18n.js) */
  .ip-box, .ip-x, .ip-in, .ip-card,
  .rl-theme-pop, .rl-tp-custom, .rm-step, .rl-more-menu, .rl-mi, .rl-add-duck, .rl-add-go, .rl-host-no, .rl-card-act, .rl-tp-x, .rl-rx button, .rl-chat-off, .rl-chat-off button, .rl-pinned, .rl-m, .rl-chat-in input, .rl-chat-in button, .rj-rx button, .rj-chat, .rj-m, .rj-send, .rj-pinned
){
  --cut:10px; --bw:1px; --bd:transparent; --bg:transparent;
  /* the corner as drawn: --cut scaled by the interface's one dial, --cut-k */
  --ck:calc(var(--cut) * var(--cut-k)); --ckb:calc(var(--cut-b,var(--cut)) * var(--cut-k));
  border:0; border-radius:0;
  clip-path:polygon(0 0,calc(100% - var(--ck)) 0,100% var(--ck),100% 100%,
    var(--ckb) 100%,0 calc(100% - var(--ckb)));
  background:
    linear-gradient(to top right,transparent calc(50% - var(--bw)),var(--bd) calc(50% - var(--bw)),var(--bd) 50%,transparent 50%)
      right top / var(--ck) var(--ck) no-repeat,
    linear-gradient(to top right,transparent 50%,var(--bd) 50%,var(--bd) calc(50% + var(--bw)),transparent calc(50% + var(--bw)))
      left bottom / var(--ckb) var(--ckb) no-repeat,
    var(--bg);
  box-shadow:inset 0 0 0 var(--bw) var(--bd);
}

/* ── loading placeholders for duck images ──
   Until the picture has loaded (.sk-ok), the card itself shimmers: a soft
   light sweeps across it, then the picture fades in.
   .sk on a tile: the whole tile shimmers.
   .sk-i on an image itself: the image's own box shimmers. */
.sk { position: relative; }
.sk::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.04) 70%) 0 0 / 250% 100%;
  animation: skSweep 1.3s linear infinite; transition: opacity .3s; }
.sk.sk-ok::after { opacity: 0; animation: none; }
.sk img { opacity: 0; transform: scale(.94); transition: opacity .35s ease-out, transform .35s cubic-bezier(.2,.9,.3,1.3); }
.sk.sk-ok img { opacity: 1; transform: none; }
@keyframes skSweep { from { background-position: 125% 0; } to { background-position: -125% 0; } }
.sk-i:not(.sk-ok) { border-radius: 10px;
  background: linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.05) 70%) 0 0 / 250% 100%;
  animation: skSweep 1.3s linear infinite; }
.sk-i.sk-ok { animation: skIn .35s ease-out; }
@keyframes skIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sk::after, .sk-i:not(.sk-ok) { animation: none; } }

/* Devanagari and Thai join their letters and marks: spacing them out (the
   small capitals-style labels) pulls the words apart, so no extra spacing */
html:lang(hi) *, html:lang(th) * { letter-spacing: normal !important; }

/* The language sheet of the room screens (js/i18n.js openPicker): the
   setup's Language modal, drawn here because the join page has no game.css. */
.i18n-pick, .i18n-pick *{box-sizing:border-box}
.i18n-pick{position:fixed;inset:0;z-index:2147483500;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;
  background:rgba(6,5,24,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:ipFade .2s ease-out;
  font-family:Nunito,system-ui,sans-serif;color:#fff}
.i18n-pick[hidden]{display:none}
.i18n-pick .ip-box{--cut:24px;--bg:var(--u-panel);--bd:var(--u-edge);position:relative;width:min(430px,100%);max-height:calc(100dvh - 40px);
  overflow-y:auto;margin:auto;padding:24px 26px 26px;animation:ipPop .34s cubic-bezier(.2,.9,.3,1.15)}
@keyframes ipFade{from{opacity:0}to{opacity:1}}
@keyframes ipPop{from{transform:translateY(14px) scale(.97)}to{transform:none}}
.i18n-pick .ip-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.i18n-pick h2{margin:0;font:900 24px/1.15 Nunito,system-ui,sans-serif;color:#fff}
.i18n-pick .ip-x{--cut:9px;--bg:var(--u-soft2);flex:none;width:40px;height:40px;padding:0;cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;transition:transform .15s}
.i18n-pick .ip-x svg{width:12px;height:16px}
.i18n-pick .ip-x:hover{--bg:#E74C3C;transform:translateY(-1px)}
.i18n-pick .ip-search{position:relative;display:block;margin-bottom:16px}
.i18n-pick .ip-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--u-faint);pointer-events:none}
.i18n-pick .ip-in{--cut:10px;--bw:2px;--bd:var(--u-line);--bg:rgba(0,0,0,.32);display:block;width:100%;height:50px;margin:0;outline:none;
  color:#fff;font:800 16px Nunito,system-ui,sans-serif;padding:0 14px 0 42px;-webkit-appearance:none;appearance:none}
.i18n-pick .ip-in::placeholder{color:var(--u-faint)}
.i18n-pick .ip-in:focus{--bd:var(--u-amber)}
/* a fixed height, so the sheet never shrinks under the keyboard while typing */
.i18n-pick .ip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;height:min(330px,46vh);overflow-y:auto;align-content:start;padding-right:2px}
.i18n-pick .ip-sec{grid-column:1/-1;margin:6px 0 0;font:800 11px Nunito,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--u-dim)}
.i18n-pick .ip-sec:first-child{margin-top:0}
.i18n-pick .ip-card{--cut:10px;--bw:2px;--bg:var(--u-soft);display:flex;align-items:center;gap:10px;width:100%;min-width:0;margin:0;padding:13px 14px;
  color:#fff;cursor:pointer;font:800 16px Nunito,system-ui,sans-serif;text-align:left}
.i18n-pick .ip-card:hover{--bg:var(--u-soft2)}
.i18n-pick .ip-card span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.i18n-pick .ip-check{flex:none;opacity:0;color:var(--u-amber)}
.i18n-pick .ip-card[aria-pressed="true"]{--bd:var(--u-amber);--bg:rgba(241,196,15,.12)}
.i18n-pick .ip-card[aria-pressed="true"] .ip-check{opacity:1}
.i18n-pick .ip-empty{grid-column:1/-1;margin:0;padding:24px 8px;text-align:center;font:700 14px Nunito,system-ui,sans-serif;color:var(--u-faint)}
@media (prefers-reduced-motion:reduce){.i18n-pick,.i18n-pick .ip-box{animation:none}}
/* on a computer: wider, three columns, a taller list (as the game's #langPanel) */
@media (min-width:861px){
  .i18n-pick .ip-box{width:min(760px,100%);padding:32px 34px 30px}
  .i18n-pick .ip-hd{margin-bottom:18px}
  .i18n-pick .ip-search{margin-bottom:20px}
  .i18n-pick .ip-in{height:52px;font-size:16px}
  .i18n-pick .ip-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;height:min(470px,58vh);padding-right:6px}
  .i18n-pick .ip-sec{margin:14px 0 2px}
  .i18n-pick .ip-sec:first-child{margin-top:0}
  .i18n-pick .ip-card{padding:15px 16px}
}

/* The home page's offer of the browser's language (js/i18n.js suggest) */
.lang-hint{position:fixed;z-index:2147483400;left:50%;top:max(14px,env(safe-area-inset-top));transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:8px 8px 8px 14px;border-radius:14px;
  background:rgba(20,16,58,.97);box-shadow:0 14px 34px rgba(0,0,0,.45),inset 0 0 0 1px rgba(196,178,255,.32);
  color:#fff;font:800 14px/1.3 Nunito,system-ui,sans-serif;animation:langHintIn .3s cubic-bezier(.2,.9,.3,1.2)}
.lang-hint.out{opacity:0;transform:translate(-50%,-12px);transition:opacity .22s,transform .25s}
/* the time left before the bar goes by itself */
.lang-hint{overflow:hidden}
.lang-hint-time{position:absolute;left:0;bottom:0;height:3px;width:100%;background:#F1C40F;transform-origin:left;
  animation:langHintTime 12s linear forwards}
.lang-hint:hover .lang-hint-time,.lang-hint:focus-within .lang-hint-time{animation-play-state:paused}
@keyframes langHintTime{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes langHintIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translateX(-50%)}}
.lang-hint svg{flex:none;color:#F1C40F}
.lang-hint span{min-width:0}
.lang-hint button{flex:none;border:0;cursor:pointer;font:900 13px Nunito,system-ui,sans-serif}
.lang-hint .lang-hint-go{padding:8px 12px;border-radius:9px;background:#F1C40F;color:#2C1F0A}
.lang-hint .lang-hint-go:hover{background:#FFD84A}
.lang-hint .lang-hint-x{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.1);color:#fff;font-size:18px;line-height:1}
.lang-hint .lang-hint-x:hover{background:rgba(255,255,255,.2)}
@media (max-width:520px){.lang-hint{left:12px;right:12px;transform:none;flex-wrap:wrap}.lang-hint span{flex:1 1 60%}
  .lang-hint.out{transform:translateY(-12px)}@keyframes langHintIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}}
@media (prefers-reduced-motion:reduce){.lang-hint{animation:none}}