/* Beauty Race · gaya aplikasi (admin dulu, layar peserta menyusul).
   Dunia visual mengikuti konsep/index.html: laut teal, daratan hangat, kota berwarna tingkat soal.
   Mode kerja: rapi dan mudah dipindai. Warna aksen hanya untuk aksi utama, pilihan aktif, dan status. */
:root{
  --bg:#eef3f5; --surface:#ffffff; --surface-2:#f6f9fa; --fg:#122029; --muted:#526671; --line:#d5e0e5; --line-strong:#b9c9d1;
  --accent:#0b7285; --accent-ink:#ffffff; --accent-soft:color-mix(in srgb,var(--accent) 12%,var(--surface));
  --easy:#2b8a3e; --mid:#b07d00; --hard:#c92a2a; --warn:#b35c00;
  --road:#8a6430; --ferry:#3651c9; --flight:#7b47bd;
  --shadow-pop:0 12px 32px -8px rgb(18 32 41 / .22), 0 2px 6px rgb(18 32 41 / .08);
  --radius:10px; --radius-lg:14px;
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);   /* gerak di layar: karakter berjalan, baris klasemen pindah */
  --ease-drawer:cubic-bezier(.32,.72,0,1);    /* laci/panel dari bawah */
  --nav-h:0px;
  --sea:#cfe3ec; --shelf:#e2eef3; --land:#eef0e2; --coast:#9fb08c; --land-faded:#e3e9e4; --grid:#a9c4d1; --full:#a7b4ba;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0b1216; --surface:#131c22; --surface-2:#18232a; --fg:#e3ebef; --muted:#97a8b2; --line:#24323a; --line-strong:#33454f;
  --accent:#3bc9db; --accent-ink:#06232a; --accent-soft:color-mix(in srgb,var(--accent) 14%,var(--surface));
  --easy:#51cf66; --mid:#fcc419; --hard:#ff6b6b; --warn:#ffa94d;
  --road:#d2a96c; --ferry:#8399ff; --flight:#bb95f5;
  --shadow-pop:0 16px 36px -10px rgb(0 0 0 / .6), 0 2px 8px rgb(0 0 0 / .35);
  --sea:#0c2231; --shelf:#123247; --land:#232e25; --coast:#4d6343; --land-faded:#18211b; --grid:#25475a; --full:#53636b;
  color-scheme:dark}}
:root[data-theme=dark]{
  --bg:#0b1216; --surface:#131c22; --surface-2:#18232a; --fg:#e3ebef; --muted:#97a8b2; --line:#24323a; --line-strong:#33454f;
  --accent:#3bc9db; --accent-ink:#06232a; --accent-soft:color-mix(in srgb,var(--accent) 14%,var(--surface));
  --easy:#51cf66; --mid:#fcc419; --hard:#ff6b6b; --warn:#ffa94d;
  --road:#d2a96c; --ferry:#8399ff; --flight:#bb95f5;
  --shadow-pop:0 16px 36px -10px rgb(0 0 0 / .6), 0 2px 8px rgb(0 0 0 / .35);
  --sea:#0c2231; --shelf:#123247; --land:#232e25; --coast:#4d6343; --land-faded:#18211b; --grid:#25475a; --full:#53636b;
  color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--fg);font:500 15.5px/1.55 var(--f-body);font-variant-numeric:tabular-nums}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
input,textarea{caret-color:var(--accent)}
*{scrollbar-color:var(--line-strong) transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
h1,h2,h3{margin:0;text-wrap:balance;line-height:1.15}
h1{font:800 1.875rem/1.1 var(--f-display);letter-spacing:-.025em}
h2{font:700 1.125rem/1.25 var(--f-body);letter-spacing:-.01em}
h3{font:700 1rem/1.3 var(--f-body)}
p{margin:0}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.muted{color:var(--muted)}
.small{font-size:.8125rem}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.ok{color:var(--easy);font-weight:700}
.bad{color:var(--hard);font-weight:700}
.warnc{color:var(--warn);font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
code{font:500 .85em var(--f-mono);background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.link{color:var(--accent);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.link:hover{text-decoration:underline;text-underline-offset:3px}

.ic{width:18px;height:18px;flex:none}
.ic-sm{width:15px;height:15px;vertical-align:-2px}
.ic-lg{width:28px;height:28px}
.ic-xl{width:40px;height:40px}
.flip{transform:scaleX(-1)}

/* ---------------------------------------------------------------- appbar & navigasi */
.appbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.appbar-row{display:flex;align-items:center;gap:20px;min-height:60px}
.brand{font:800 1.125rem var(--f-display);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.brand small{font:600 .6875rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-left:6px;vertical-align:2px}
.tabs{display:flex;gap:2px;margin-right:auto}
.tabs a{display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.9375rem;color:var(--muted);transition:background-color .18s,color .18s}
.tabs a:hover{color:var(--fg);background:var(--surface-2)}
.tabs a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
.appbar-end{display:flex;align-items:center;gap:10px;margin-left:auto}
.appbar-end form{margin:0}
.status{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);white-space:nowrap}
.status i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.status-lobi i,.status-hitung_mundur i{background:var(--mid)}
.status-berjalan i{background:var(--easy);position:relative}
/* Cincin denyut lewat transform + opacity (bukan box-shadow) supaya tidak menggambar ulang setiap frame selama lomba. */
.status-berjalan i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--easy);animation:pulse 1.8s var(--ease-out) infinite}
.status-jeda i{background:var(--warn)}
.status-selesai i{background:var(--accent)}
@keyframes pulse{from{transform:scale(1);opacity:.6}to{transform:scale(3);opacity:0}}

@media (max-width:760px){
  :root{--nav-h:64px}
  .appbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface)}
  body.has-nav{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px))}
  .appbar-row{min-height:54px;gap:12px}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;justify-content:space-around;gap:0;background:var(--surface);border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .tabs a{flex:1;flex-direction:column;gap:3px;padding:6px 4px;font-size:.6875rem;border-radius:12px;min-height:50px;justify-content:center}
  .tabs a .ic{width:22px;height:22px}
  .tabs a[aria-current="page"]{background:var(--accent-soft)}
}
/* HP sempit (320–400px): menu bawah boleh menyempit, status lomba di bilah atas tinggal titik warnanya. */
@media (max-width:400px){
  .tabs{padding-left:max(4px,env(safe-area-inset-left,0px));padding-right:max(4px,env(safe-area-inset-right,0px))}
  .tabs a{min-width:0;padding:6px 2px}
  .appbar-row{gap:8px}
  .brand small{display:none}
  .appbar .status{font-size:0;gap:0;padding:0;width:34px;height:34px;justify-content:center}
  .appbar .status i{width:10px;height:10px}
}

/* ---------------------------------------------------------------- halaman */
.page{display:flex;flex-direction:column;gap:22px;padding-block:28px 72px}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pagehead > div:not(.meter){display:flex;flex-direction:column;gap:6px;min-width:0}
.back{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;color:var(--muted);text-decoration:none;margin-bottom:4px}
.back:hover{color:var(--fg)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;display:flex;flex-direction:column;gap:14px;min-width:0}
@media (max-width:520px){.panel{padding:16px}}

/* ---------------------------------------------------------------- tombol */
.btn{--b:var(--line-strong);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border-radius:var(--radius);border:1px solid var(--b);background:var(--surface);color:var(--fg);font:700 .9375rem var(--f-body);text-decoration:none;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;
  transition:background-color .16s,border-color .16s,color .16s,transform .12s var(--ease-out),box-shadow .16s}
.btn:hover{background:var(--surface-2);--b:var(--muted)}
.btn:active{transform:scale(.97)}
.btn.primary{--b:var(--accent);background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 88%,var(--fg))}
.btn.ghost{--b:transparent;background:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-2);color:var(--fg)}
.btn.danger{color:var(--hard)}
.btn.danger:not(.ghost){--b:color-mix(in srgb,var(--hard) 45%,var(--line))}
.btn.danger:hover{background:color-mix(in srgb,var(--hard) 9%,var(--surface))}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn[data-confirming]{background:var(--hard);color:#fff;--b:var(--hard)}
.btn[data-confirming]::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgb(255 255 255 / .55);transform-origin:left;animation:confirmclock 3s linear forwards}
@keyframes confirmclock{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.iconbtn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--radius);border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;text-decoration:none;transition:background-color .16s,color .16s,transform .12s var(--ease-out)}
.iconbtn:hover{background:var(--surface-2);color:var(--fg)}
.iconbtn:active{transform:scale(.94)}
.iconbtn.danger:hover{color:var(--hard);background:color-mix(in srgb,var(--hard) 9%,var(--surface))}
.iconbtn[data-confirming]{background:var(--hard);color:#fff;width:auto;padding:0 10px;font:700 .8125rem var(--f-body)}

/* ---------------------------------------------------------------- formulir */
input[type=text],input[type=password],input[type=number],input[type=search],select,textarea{
  font:500 1rem var(--f-body);color:var(--fg);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);min-height:44px;padding:9px 12px;width:100%;
  transition:border-color .16s,box-shadow .16s,background-color .16s}
textarea{min-height:88px;resize:vertical;line-height:1.5}
select{appearance:none;padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(-45deg,transparent 50%,var(--muted) 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 80%,transparent)}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
input:disabled,input[readonly]{background:var(--surface-2);color:var(--muted)}
[aria-invalid="true"]{border-color:var(--hard)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--hard) 16%,transparent)!important}
input[type=number]{font-family:var(--f-mono);font-weight:600}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;border:0;margin:0;padding:0}
.field > label,.field > legend,.seg > legend{font-weight:700;font-size:.875rem;padding:0}
.field > legend{margin-bottom:8px}
fieldset{min-width:0}
.hint{font-size:.8125rem;color:var(--muted);line-height:1.45}
.hint.inline{font-weight:500;margin-left:6px}
.fielderr{font-size:.8125rem;color:var(--hard);font-weight:700;animation:shake .3s var(--ease-out)}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.unit{display:flex;align-items:stretch;max-width:220px}
.unit input{border-top-right-radius:0;border-bottom-right-radius:0;min-width:0}
.unit span{display:flex;align-items:center;padding:0 12px;border:1px solid var(--line-strong);border-left:0;border-radius:0 var(--radius) var(--radius) 0;background:var(--surface-2);color:var(--muted);font-size:.8125rem;font-weight:600;white-space:nowrap}
.unit:not(:has(span)) input{border-radius:var(--radius)}
.frow{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:flex-start}
.field.narrow{flex:1 1 180px;max-width:260px}

.seg{display:flex;flex-wrap:wrap;gap:6px;border:0;margin:0;padding:0}
.seg legend{width:100%;margin-bottom:6px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--line-strong);font-weight:700;font-size:.9rem;transition:background-color .16s,border-color .16s,color .16s,transform .12s var(--ease-out)}
.seg label:hover span{border-color:var(--muted)}
.seg input:checked + span{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.seg input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.seg label:active span{transform:scale(.97)}
.seg .is-disabled{opacity:.45;cursor:not-allowed}
.lvlpick.lvl-mudah input:checked + span{--c:var(--easy)}
.lvlpick.lvl-sedang input:checked + span{--c:var(--mid)}
.lvlpick.lvl-sulit input:checked + span{--c:var(--hard)}
.lvlpick input:checked + span{background:color-mix(in srgb,var(--c) 14%,var(--surface));border-color:var(--c);color:var(--fg)}
.lvlpick span::before{content:"";width:9px;height:9px;border-radius:50%;margin-right:8px;background:var(--easy)}
.lvlpick.lvl-sedang span::before{background:var(--mid)}
.lvlpick.lvl-sulit span::before{background:var(--hard)}

.toggle{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-weight:700;font-size:.9375rem}
.toggle input{position:absolute;opacity:0}
.toggle i,.switch i{position:relative;width:42px;height:24px;border-radius:999px;background:var(--line-strong);flex:none;transition:background-color .2s}
.toggle i::after,.switch i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .25);transition:transform .22s var(--ease-out)}
.toggle input:checked + i,.switch[aria-checked="true"] i{background:var(--accent)}
.toggle input:checked + i::after,.switch[aria-checked="true"] i::after{transform:translateX(18px)}
.toggle input:focus-visible + i{outline:2px solid var(--accent);outline-offset:2px}
.switch{background:none;border:0;padding:8px 2px;cursor:pointer;display:inline-flex}

/* ---------------------------------------------------------------- pemberitahuan */
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));font-size:.9375rem}
.notice .ic{margin-top:2px;color:var(--accent)}
.notice.warn{background:color-mix(in srgb,var(--warn) 10%,var(--surface));border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}
.notice.warn .ic{color:var(--warn)}
.notice.error{background:color-mix(in srgb,var(--hard) 9%,var(--surface));border-color:color-mix(in srgb,var(--hard) 35%,var(--line))}
.notice.error .ic{color:var(--hard)}
.alert{border:1px solid color-mix(in srgb,var(--hard) 45%,var(--line));background:color-mix(in srgb,var(--hard) 8%,var(--surface));border-radius:var(--radius);padding:10px 12px;font-size:.9375rem}

.toasts{position:fixed;top:calc(70px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));z-index:40;display:flex;flex-direction:column;gap:8px;width:min(380px,calc(100vw - 32px));pointer-events:none}
@media (max-width:760px){.toasts{top:auto;bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom,0px));right:16px;left:16px;width:auto}}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:12px 10px 12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-pop);font-size:.9375rem;font-weight:600;
  animation:toastin .32s var(--ease-out)}
.toast .ic{margin-top:2px;color:var(--easy)}
.toast-error .ic{color:var(--hard)}
.toast span{flex:1}
.toast-x{background:none;border:0;color:var(--muted);cursor:pointer;padding:2px;border-radius:6px;display:grid;place-items:center}
.toast-x .ic{color:inherit;margin:0;width:16px;height:16px}
.toast.is-leaving{animation:toastout .2s var(--ease-out) forwards}
@keyframes toastin{from{opacity:0;transform:translateY(-8px) scale(.98);filter:blur(2px)}}
@keyframes toastout{to{opacity:0;transform:translateY(-6px) scale(.98)}}
/* Di HP kabar ada di bawah layar: masuk dan keluar lewat bawah. */
@media (max-width:760px){.toast{animation-name:toastup}.toast.is-leaving{animation-name:toastdown}}
@keyframes toastup{from{opacity:0;transform:translateY(8px) scale(.98);filter:blur(2px)}}
@keyframes toastdown{to{opacity:0;transform:translateY(8px) scale(.98)}}

.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:44px 20px;border:1px dashed var(--line-strong);border-radius:var(--radius-lg);color:var(--fg)}
.empty .ic-xl{color:var(--accent);opacity:.8}
.empty p{max-width:52ch}
.empty.slim{padding:22px}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);white-space:nowrap}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
.badge-masuk::before{background:var(--mid)}
.badge-ready::before,.badge-bermain::before,.badge-imp-siap::before{background:var(--easy)}
.badge-finish::before{background:var(--accent)}
.badge-dikeluarkan::before,.badge-imp-salah::before{background:var(--hard)}
.badge-imp-salah{color:var(--hard)}
.badge-imp-duplikat{color:var(--muted)}

details > summary{list-style:none;cursor:pointer}
details > summary::-webkit-details-marker{display:none}
.more > summary,.danger-zone > summary{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9375rem;color:var(--accent);padding:4px 0;min-height:44px}
.more > summary .ic,.danger-zone > summary .ic{transition:transform .2s var(--ease-out)}
.more[open] > summary .ic:first-child,.danger-zone[open] > summary .ic:first-child{transform:rotate(180deg)}
.more[open] > :not(summary){animation:reveal .26s var(--ease-out)}
@keyframes reveal{from{opacity:0;transform:translateY(-4px)}}
.danger-zone{border-top:1px solid var(--line);padding-top:14px}
.danger-zone > summary{color:var(--muted)}
.danger-zone form,.danger-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:10px}

.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.9375rem}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 .6875rem var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.n{font-family:var(--f-mono);font-weight:600;white-space:nowrap}

@keyframes newrow{from{background-color:color-mix(in srgb,var(--accent) 22%,var(--surface))}}
.is-new{animation:newrow 1.8s var(--ease-out)}

/* ---------------------------------------------------------------- login */
.no-nav .page{min-height:calc(100vh - 60px)}
.auth{max-width:400px;margin:8vh auto 0;display:flex;flex-direction:column;gap:12px;width:100%}
.form{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.form label{font-weight:700;font-size:.875rem;margin-top:6px}
.form .btn{margin-top:12px}

/* ---------------------------------------------------------------- dasbor */
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
.check-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px;border-top:1px solid var(--line)}
.check-item:first-child{border-top:0}
.check-state{width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.is-ok .check-state{background:color-mix(in srgb,var(--easy) 15%,var(--surface));color:var(--easy)}
.is-warn .check-state{background:color-mix(in srgb,var(--warn) 15%,var(--surface));color:var(--warn)}
.check-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.check-body b{font-size:1rem}
@media (max-width:620px){.check-item{grid-template-columns:auto minmax(0,1fr)}.check-item .btn{grid-column:2;justify-self:start;min-height:38px;padding:0 10px;margin-left:-10px}}
.mapcheck > summary .ok,.mapcheck > summary .bad{margin-left:6px}

/* ---------------------------------------------------------------- tim */
.meter{display:grid;grid-template-columns:repeat(20,1fr);gap:4px;width:min(320px,100%)}
.meter i{height:10px;border-radius:3px;background:var(--line);transition:background-color .3s}
.meter i.on{background:var(--c)}
.addrow{display:flex;gap:10px}
.addrow input{flex:1}
@media (max-width:520px){.addrow{flex-direction:column}}
.bulk{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding-top:8px}
.bulk label{font-size:.875rem;color:var(--muted)}
.teamlist{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.team{display:grid;grid-template-columns:auto minmax(160px,1fr) auto auto;gap:6px 14px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);transition:background-color .2s}
.team:first-child{border-top:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.team:last-child{border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.team:hover{background:var(--surface-2)}
.team.is-out{opacity:.55}
@media (max-width:700px){.team{grid-template-columns:auto minmax(0,1fr);}.teammeta,.team .actions{grid-column:2}}
.avatar{flex:none;width:38px;height:38px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font:800 1rem var(--f-display);box-shadow:inset 0 -2px 0 rgb(0 0 0 / .18);transition:transform .16s var(--ease-out)}
.swatch{position:relative}
.swatch > summary{border-radius:50%}
@media (hover:hover) and (pointer:fine){.swatch > summary:hover .avatar{transform:scale(1.06)}.palette button:hover{transform:scale(1.12)}}
.palette{position:absolute;z-index:25;top:calc(100% + 8px);left:0;display:grid;grid-template-columns:repeat(5,30px);gap:8px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);animation:pop .2s var(--ease-out);transform-origin:top left}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(-4px)}}
.palette button{width:30px;height:30px;border-radius:50%;border:2px solid var(--surface);background:var(--c);cursor:pointer;box-shadow:0 0 0 1px var(--line);transition:transform .12s var(--ease-out)}
.palette button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--fg)}
@media (pointer:coarse){.palette{grid-template-columns:repeat(5,38px);gap:6px}.palette button{width:38px;height:38px}}
.rename{display:flex;align-items:center;gap:4px;min-width:0;margin:0}
.rename input{border-color:transparent;background:transparent;font-weight:700;font-size:1rem;min-height:40px;padding:6px 10px;margin-left:-10px}
.rename input:hover{border-color:var(--line-strong);background:var(--surface)}
.rename input:focus{background:var(--surface)}
.rename input[readonly]{background:transparent;border-color:transparent;color:var(--fg);box-shadow:none}
.rename .save{opacity:0;pointer-events:none;transform:scale(.8);transition:opacity .16s,transform .16s var(--ease-out);color:var(--accent)}
.rename.is-dirty .save{opacity:1;pointer-events:auto;transform:none}
.teammeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.teammeta .small{display:inline-flex;align-items:center;gap:5px}
.team .actions{display:flex;gap:2px;justify-content:flex-end}
.team .actions form{margin:0}
@media (max-width:420px){.team .actions .btn span{display:none}.team .actions .btn{padding:0 10px}}

/* ---------------------------------------------------------------- soal */
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:720px){.levels{grid-template-columns:minmax(0,1fr)}}
.level{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.level-head{display:flex;align-items:center;gap:8px}
.level-head b{margin-right:auto}
.level .dot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.level-mudah{--c:var(--easy)} .level-sedang{--c:var(--mid)} .level-sulit{--c:var(--hard)}
.level-num{display:flex;align-items:baseline;gap:6px}
.level-num .num{font-size:1.75rem;font-weight:600;line-height:1}
.level-num small{color:var(--muted);font-size:.8125rem}
.bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:inherit;background:var(--c);transform-origin:left;animation:grow .7s var(--ease-out)}
@keyframes grow{from{transform:scaleX(0)}}

.upload{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:center}
@media (max-width:760px){.upload{grid-template-columns:minmax(0,1fr)}}
.upload-text{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.dropzone{position:relative;display:flex;flex-direction:column;gap:10px;margin:0}
.dropzone input[type=file]{position:absolute;inset:0 0 52px;opacity:0;cursor:pointer;width:100%}
.dropzone label{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 16px;border:1.5px dashed var(--line-strong);border-radius:var(--radius-lg);text-align:center;color:var(--fg);transition:border-color .16s,background-color .16s,transform .16s var(--ease-out)}
.dropzone label .ic{color:var(--accent);margin-bottom:4px}
.dropzone:hover label,.dropzone.is-over label{border-color:var(--accent);background:var(--accent-soft)}
.dropzone.is-over label{transform:scale(1.01)}
.dropzone input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}
.dropzone .filename{color:var(--accent);font-weight:700}
.dropzone .btn{align-self:flex-end}

.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters select{width:auto;min-width:150px;flex:0 1 auto}
.search{position:relative;flex:1 1 260px}
.search .ic{position:absolute;left:12px;top:13px;color:var(--muted);pointer-events:none}
.search input{padding-left:38px}

.qtable td{vertical-align:middle}
.qcell{min-width:280px;max-width:560px}
.qmeta{font-size:.75rem;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:3px}
.qtext{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600}
.lvl{display:inline-flex;align-items:center;gap:5px;color:var(--fg)}
.lvl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.lvl-mudah{--c:var(--easy)} .lvl-sedang{--c:var(--mid)} .lvl-sulit{--c:var(--hard)}
.ans{max-width:220px;font-weight:600}
.rowactions{white-space:nowrap;text-align:right}
.rowactions form{display:inline}
.qtable tr.is-off .qtext,.qtable tr.is-off .ans{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.preview tr.row-salah{background:color-mix(in srgb,var(--hard) 5%,var(--surface))}
.preview tr.row-duplikat{color:var(--muted)}
.errs{margin:6px 0 0;padding-left:18px;color:var(--hard);font-size:.8125rem;font-weight:600}
@media (max-width:720px){
  .qtable thead{display:none}
  .qtable,.qtable tbody,.qtable tr,.qtable td{display:block}
  .qtable tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:2px 8px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .qtable tr:last-child{border-bottom:0}
  .qtable td{border:0;padding:0}
  .qtable .qcell{grid-column:1/-1;min-width:0;max-width:none}
  .qtable td.n::before{content:attr(data-label)}
  .qtable .ans{grid-column:1/-1;font-size:.875rem;color:var(--muted)}
  .preview tr{grid-template-columns:auto auto minmax(0,1fr)}
}
.pager{display:flex;flex-wrap:wrap;gap:4px}
.pager a{min-width:38px;height:38px;display:grid;place-items:center;border-radius:var(--radius);text-decoration:none;font:600 .875rem var(--f-mono);color:var(--muted)}
.pager a:hover{background:var(--surface)}
.pager a[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
.tally{display:flex;flex-wrap:wrap;gap:8px}
.tally-item{display:inline-flex;align-items:baseline;gap:7px;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:.9375rem}
.tally-item b{font-size:1.125rem}
.tally-item.ok b{color:var(--easy)} .tally-item.bad b{color:var(--hard)} .tally-item.dim b{color:var(--muted)}
.importbar{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;position:sticky;top:76px;z-index:5;box-shadow:var(--shadow-pop)}
.importbar-actions{display:flex;gap:8px;margin-left:auto}
@media (max-width:760px){.importbar{top:auto;bottom:calc(var(--nav-h) + 10px + env(safe-area-inset-bottom,0px));order:9}}

.qform{gap:22px;max-width:820px}
.options{gap:8px}
.opt{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px}
.opt input[type=radio]{appearance:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line-strong);margin:0;cursor:pointer;display:grid;place-items:center;transition:border-color .16s}
.opt input[type=radio]::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--easy);transform:scale(.5);opacity:0;transition:transform .2s var(--ease-out),opacity .16s}
.opt input[type=radio]:checked{border-color:var(--easy)}
.opt input[type=radio]:checked::after{transform:scale(1);opacity:1}
.opt:has(input[type=radio]:checked) input[type=text]{border-color:var(--easy);background:color-mix(in srgb,var(--easy) 6%,var(--surface))}
.optletter{font:700 .875rem var(--f-mono);color:var(--muted);width:16px;text-align:center}
.formactions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;border-top:1px solid var(--line);padding-top:16px}
@media (max-width:420px){.formactions{flex-direction:column-reverse;align-items:stretch}.formactions .btn{justify-content:center}}
[data-when-type][hidden]{display:none}

/* ---------------------------------------------------------------- pengaturan */
.toc{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;position:sticky;top:60px;z-index:4;background:var(--bg);margin-inline:-4px;padding-inline:4px;padding-block:6px}
.toc::-webkit-scrollbar{display:none}
.toc a{flex:none;font-size:.875rem;font-weight:600;color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.toc a:hover{color:var(--fg);border-color:var(--line-strong)}
@media (max-width:760px){.toc{top:54px}}
.settings{display:flex;flex-direction:column;gap:18px}
.sgroup{gap:18px;scroll-margin-top:120px}
.sgroup-head{display:flex;flex-direction:column;gap:4px;max-width:70ch}
.sgroup-body{display:grid;gap:24px}
.sgroup-body.with-aside{grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:start}
@media (max-width:900px){.sgroup-body.with-aside{grid-template-columns:minmax(0,1fr)}}
.sfields{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px 24px;align-content:start}
.sfields > fieldset,.sfields > details,.sfields > .toggle-field{grid-column:1/-1}
.mapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.mapgrid.cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.mapcell{display:flex;flex-direction:column;gap:6px}
.mapcell label{display:flex;flex-direction:column;font-size:.875rem;gap:2px}
.mapcell.card{padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.mapcell.card small{color:var(--muted);font-size:.78rem;font-weight:500;line-height:1.4}
.mapcell .unit{max-width:160px}
.fares{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px 18px}
.fare{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line);font-weight:600;font-size:.9375rem}
.fare > span:first-child{display:inline-flex;align-items:center;gap:6px}
.fare .unit{max-width:150px}
.capgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px 16px;padding-top:10px}
.cap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0;font-weight:600;font-size:.9rem}
.cap span{display:flex;flex-direction:column}
.cap small{font-size:.75rem;color:var(--muted);font-weight:500}
.cap input{width:76px;min-height:38px;padding:6px 8px;text-align:center}
.sim{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px;position:sticky;top:120px}
.sim table{font-size:.875rem;background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;border-collapse:separate;border-spacing:0}
.sim th,.sim td{padding:7px 8px}
.sim th{font-size:.625rem;letter-spacing:.04em;white-space:normal;line-height:1.3}
.sim td{font-family:var(--f-mono);font-weight:600}
.sim td:first-child{font-family:var(--f-body)}
.sim td.changed{animation:tick .5s var(--ease-out)}
@media (max-width:400px){.sim{padding:12px 10px}.sim th,.sim td{padding:6px 5px}.sim table{font-size:.8125rem}}
@keyframes tick{from{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}}
.simverdict{display:flex;gap:8px;align-items:flex-start;font-size:.875rem;font-weight:700}
.simverdict.is-ok{color:var(--easy)} .simverdict.is-warn{color:var(--warn)}
.savebar{position:fixed;left:50%;bottom:calc(16px + var(--nav-h) + env(safe-area-inset-bottom,0px));z-index:35;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;width:min(720px,calc(100vw - 32px));padding:10px 10px 10px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow-pop);font-weight:700;font-size:.9375rem;
  transform:translateX(-50%);animation:barin .34s var(--ease-out)}
.savebar[hidden]{display:none}
.savebar > span{display:inline-flex;align-items:center;gap:8px;color:var(--warn)}
.savebar > div{display:flex;gap:6px;margin-left:auto}
@keyframes barin{from{opacity:0;transform:translate(-50%,24px)}}
.pwform{max-width:760px}
.pwform > div:last-child{grid-column:1/-1}

/* ---------------------------------------------------------------- lobi (admin) */
.btn.big{min-height:52px;padding:0 22px;font-size:1rem;border-radius:12px}
.lobbypanel{gap:12px}
.lobbyhead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.lobbyhead > div{display:flex;flex-direction:column;gap:6px}
.lobbycounts{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--muted);font-weight:600}
.lobbycounts b{color:var(--fg);font-size:1.25rem;margin-right:2px}
.lobbystatus{font-weight:700;transition:color .2s}
.lobbystatus.is-ready{color:var(--easy)}
.lobbylist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
@media (max-width:420px){.lobbylist{grid-template-columns:minmax(0,1fr)}}
.lrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 8px 8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);transition:opacity .25s,border-color .2s,background-color .2s}
.lrow .avatar{width:34px;height:34px;font-size:.9rem;transition:background-color .2s,color .2s,box-shadow .2s}
.lrow-name{display:flex;flex-direction:column;gap:3px;min-width:0}
.lrow-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lrow-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow-name small[data-online="1"]{color:var(--easy);font-weight:700}
.lrow-act .btn{min-height:36px;padding:0 10px;font-size:.8125rem}
.lrow[data-status="ready"],.lrow[data-status="bermain"]{border-color:color-mix(in srgb,var(--easy) 40%,var(--line));background:color-mix(in srgb,var(--easy) 6%,var(--surface))}
.lrow[data-status="dikeluarkan"]{opacity:.5}
.lrow[data-status="belum_masuk"] .avatar,.tchip[data-status="belum_masuk"] .avatar{background:transparent;color:var(--c);box-shadow:inset 0 0 0 2px var(--c)}
.lobbypanel[data-phase="hitung_mundur"],.lobbypanel[data-phase="berjalan"]{border-color:color-mix(in srgb,var(--easy) 40%,var(--line))}

/* ---------------------------------------------------------------- layar peserta */
.team-page{min-height:100dvh}
.login{position:relative;min-height:100dvh;display:grid;place-items:center;overflow:hidden;padding:max(24px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.login-map{position:absolute;left:50%;top:46%;width:max(1100px,150vw);max-width:none;transform:translate(-46%,-50%);opacity:.11;pointer-events:none;user-select:none}
@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])) .login-map{opacity:.16}}
:where(:root[data-theme=dark]) .login-map{opacity:.16}
.login-inner{position:relative;width:min(420px,100%);display:flex;flex-direction:column;gap:26px}
.login-title h1{font:800 clamp(3rem,14vw,4.75rem)/.9 var(--f-display);letter-spacing:-.045em}
.route{display:flex;align-items:center;gap:10px;margin-top:12px;font-weight:700;color:var(--muted)}
.route svg{flex:1;max-width:150px;height:14px;overflow:visible}
.route path{fill:none;stroke:var(--road);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1 6}
.login-card{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 40px -18px rgb(18 32 41 / .25)}
.login-card label{font-weight:700}
.login-card input{min-height:56px;font-size:1.125rem;font-weight:600;border-radius:12px}
.login-card .btn.big{width:100%;min-height:56px;font-size:1.0625rem;margin-top:4px}
.login-card .hint{text-align:center}
.login-title,.login-card{animation:rise .5s var(--ease-out) both}
.login-card{animation-delay:70ms}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}

.playbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));background:var(--surface);border-bottom:1px solid var(--line)}
.conn{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;font-weight:700;color:var(--muted)}
.conn i{width:8px;height:8px;border-radius:50%;background:var(--easy);transition:background-color .2s}
.conn.is-down{color:var(--warn)}
.conn.is-down i{background:var(--warn);animation:blink 1s ease-in-out infinite alternate}
@keyframes blink{to{opacity:.3}}
.play{width:min(600px,100%);margin:0 auto;display:flex;flex-direction:column;gap:20px;padding:20px max(16px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.me{display:flex;align-items:center;gap:14px}
.me h1{font-size:1.5rem}
.me > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.avatar.big{width:64px;height:64px;font-size:1.75rem;box-shadow:inset 0 -3px 0 rgb(0 0 0 / .18)}
.lobby{display:flex;flex-direction:column;gap:18px}

.readybtn{display:flex;align-items:center;gap:16px;width:100%;min-height:88px;padding:16px 20px;border:0;border-radius:20px;background:var(--accent);color:var(--accent-ink);text-align:left;cursor:pointer;font:inherit;
  box-shadow:0 10px 24px -12px color-mix(in srgb,var(--accent) 70%,transparent);transition:background-color .22s,box-shadow .22s,transform .12s var(--ease-out)}
.readybtn:active{transform:scale(.98)}
.readybtn.is-busy{cursor:progress}
.readybtn-icon{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgb(255 255 255 / .2);box-shadow:inset 0 0 0 2px rgb(255 255 255 / .5)}
.readybtn-icon .ic{width:28px;height:28px;stroke-width:3;opacity:0;transform:scale(.9);transition:opacity .2s,transform .22s var(--ease-out)}
.readybtn-text{display:flex;flex-direction:column;gap:2px}
.readybtn-text b{font:800 1.375rem/1.15 var(--f-display);letter-spacing:-.01em}
.readybtn-text small{font-size:.875rem;font-weight:600;opacity:.85}
.readybtn[aria-pressed="true"]{background:var(--easy);box-shadow:0 10px 24px -12px color-mix(in srgb,var(--easy) 70%,transparent)}
.readybtn[aria-pressed="true"] .readybtn-icon{background:#fff}
.readybtn[aria-pressed="true"] .readybtn-icon .ic{opacity:1;transform:none;color:var(--easy)}
@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])) .readybtn[aria-pressed="true"]{color:#06230f}}
:where(:root[data-theme=dark]) .readybtn[aria-pressed="true"]{color:#06230f}

.lobby-progress{display:flex;flex-direction:column;gap:8px}
.lobby-progress p{font-weight:700}
.lobby-progress b.num{font-size:1.125rem}
.segbar{display:grid;grid-template-columns:repeat(var(--n,1),1fr);gap:4px}
.segbar i{height:8px;border-radius:3px;background:var(--line);transition:background-color .3s}
.segbar i.on{background:var(--c)}
.lobby-wait{color:var(--muted);font-size:.9375rem}
.teamgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.tchip{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);
  transition:opacity .25s,border-color .2s,background-color .2s;animation:chipin .32s var(--ease-out) both;animation-delay:calc(var(--i,0) * 40ms)}
@keyframes chipin{from{opacity:0;transform:translateY(6px)}}
.tchip .avatar{width:36px;height:36px;font-size:.95rem;transition:background-color .2s,color .2s,box-shadow .2s}
.tchip-text{display:flex;flex-direction:column;min-width:0}
.tchip-text b{font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tchip-text small{font-size:.75rem;color:var(--muted);font-weight:600}
.tchip-text small em{font-style:normal;color:var(--fg)}
.tchip-check{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--easy);color:#fff;box-shadow:0 0 0 2px var(--bg);
  opacity:0;transform:scale(.9);transition:opacity .2s,transform .2s var(--ease-out)}
.tchip-check .ic{width:13px;height:13px;stroke-width:3.5}
.tchip[data-status="belum_masuk"]{opacity:.55;border-style:dashed}
.tchip[data-status="ready"]{border-color:color-mix(in srgb,var(--easy) 45%,var(--line));background:color-mix(in srgb,var(--easy) 7%,var(--surface))}
.tchip[data-status="ready"] .tchip-text small{color:var(--easy)}
.tchip[data-status="ready"] .tchip-check{opacity:1;transform:none}
.tchip.is-me{border-color:var(--c);box-shadow:0 0 0 1px var(--c)}
.tchip.is-offline .avatar{opacity:.5}

.started{display:flex;flex-direction:column}
.started-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:32px 22px;border-radius:20px;background:var(--surface);border:1px solid var(--line);animation:rise .4s var(--ease-out) both}
.started-card h2{font:800 1.75rem var(--f-display);letter-spacing:-.02em}
.started-balance .num{font-size:2.5rem;font-weight:600}

/* ---------------------------------------------------------------- peta live (assets/js/map.js)
   Garis memakai non-scaling-stroke: tebalnya tetap di layar saat zoom tanpa menghitung ulang gaya setiap frame.
   Titik kota dan karakter diskalakan balik oleh JS, jadi ukurannya juga tetap. */
.rmap{position:absolute;inset:0;overflow:hidden;background:var(--sea)}
.rmap-svg{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;-webkit-tap-highlight-color:transparent}
.rmap-svg.is-dragging{cursor:grabbing}
.rmap-svg:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:0}
.rmap .shelf{fill:none;stroke:var(--shelf);stroke-width:9px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rmap .island{fill:var(--land);stroke:var(--coast);stroke-width:.9px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rmap .island.faded{fill:var(--land-faded);stroke:none}
.rmap .grat line{stroke:var(--grid);stroke-width:.8px;stroke-dasharray:2 6;vector-effect:non-scaling-stroke}
.rmap .grat line.eq{stroke-dasharray:6 4}
.rmap .sealbl{fill:color-mix(in srgb,var(--ferry) 55%,var(--sea));font:italic 500 13px var(--f-body);letter-spacing:.06em}
.rmap .isllbl{fill:color-mix(in srgb,var(--fg) 22%,var(--land));font:800 24px var(--f-display);letter-spacing:.28em}
.rmap-svg.z-far .sealbl{display:none}
.rmap .edge{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:stroke-width .2s,opacity .2s}
.rmap .road{stroke:var(--road);stroke-width:2.4px;opacity:.8}
.rmap .ferry{stroke:var(--ferry);stroke-width:2px;stroke-dasharray:7 5;opacity:.85}
.rmap .flight{stroke:var(--flight);stroke-width:2.2px;stroke-dasharray:.5 5.5;display:none}
.rmap .flight.is-next,.rmap .flight.live{display:inline}
.rmap .edge.is-next{stroke-width:4.2px;opacity:1}
.rmap .edge.live{opacity:1}
.rmap .arrow path{fill:var(--ferry)}
.rmap .node text{font:600 12px var(--f-body);fill:var(--fg);paint-order:stroke;stroke:var(--surface);stroke-opacity:.9;stroke-width:3.2px;stroke-linejoin:round;pointer-events:none}
.rmap .node .dot{stroke:var(--surface);stroke-width:2px;transition:fill .3s}
.rmap .d-mudah .dot{fill:var(--easy)} .rmap .d-sedang .dot{fill:var(--mid)} .rmap .d-sulit .dot{fill:var(--hard)}
.rmap .endpoint .dot{fill:var(--accent)} .rmap .endpoint .core{fill:var(--surface)}
.rmap .node .choke{fill:none;stroke:var(--hard);stroke-width:1.4px;stroke-dasharray:2.4 2}
.rmap .node .plane{fill:var(--flight)}
.rmap .node .ring{fill:none;stroke:none}
.rmap .node.is-conq .ring{stroke:var(--me,var(--accent));stroke-width:2px;opacity:.75}
.rmap .node.is-here .ring{stroke:var(--me,var(--accent));stroke-width:2.6px;opacity:1}
.rmap .node.is-next .dot{stroke:var(--fg);stroke-width:2.2px}
.rmap .node.is-next text{font-weight:800}
.rmap .node.is-sel .ring{stroke:var(--fg);stroke-width:2px;stroke-dasharray:3 2.4;opacity:1}
.rmap .node.is-sel text{font-weight:800}
.rmap .node.is-full .dot{fill:var(--full)}
.rmap .node.is-full text{fill:var(--muted)}
.rmap-svg.z-far .node.lv2:not(.is-here):not(.is-next):not(.is-sel) text,
.rmap-svg.z-far .node.lv3:not(.is-here):not(.is-next):not(.is-sel) text,
.rmap-svg.z-mid .node.lv3:not(.is-here):not(.is-next):not(.is-sel) text{display:none}
.rmap .minepath{fill:none;stroke:var(--me,var(--accent));stroke-width:3.6px;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.5}
.rmap .minepath.m-terbang{stroke-dasharray:1 6}
.rmap .minepath.m-lompat{stroke-dasharray:4 5}
.rmap .trail{fill:none;stroke:var(--c);stroke-linecap:round;opacity:.9}
.rmap .burst circle{fill:none;stroke:var(--c);stroke-width:2.5px;transform-box:fill-box;transform-origin:center;animation:burst .7s var(--ease-out) forwards}
.rmap .burst.big circle{stroke-width:3px;animation-duration:1.2s}
@keyframes burst{from{transform:scale(.6);opacity:.9}to{transform:scale(2.6);opacity:0}}
.rmap .av{cursor:pointer}
.rmap .av-pin{fill:var(--c);stroke:var(--surface);stroke-width:2.2px}
.rmap .av.is-me .av-pin{stroke-width:2.8px}
.rmap .av.is-fin .av-pin{stroke:var(--mid)}
.rmap .av-ini{font:800 10px var(--f-display);fill:#fff;text-anchor:middle;pointer-events:none}
.rmap .av.is-me .av-ini{font-size:12.5px}
.rmap .av-ico{fill:#fff}
.rmap .av-tag{font:700 11px var(--f-body);fill:var(--fg);text-anchor:middle;paint-order:stroke;stroke:var(--surface);stroke-width:3.4px;stroke-linejoin:round;pointer-events:none}
.rmap .av.is-me .av-tag{font-size:12px;font-weight:800}
/* Denyut "ini kamu" hanya 3 kali (saat muncul dan setiap tiba di kota). Denyut tanpa henti menggambar ulang seluruh SVG peta setiap frame di HP. */
.rmap .av-halo{fill:var(--c);opacity:0;transform-box:fill-box;transform-origin:center;animation:halo 2.4s var(--ease-out) 3}
@keyframes halo{from{transform:scale(.7);opacity:.45}to{transform:scale(1.55);opacity:0}}

.mapctl{position:absolute;z-index:2;right:max(12px,env(safe-area-inset-right,0px));top:12px;display:flex;flex-direction:column;gap:8px}
.mapbtn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--fg);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 6px 16px -10px rgb(18 32 41 / .45);transition:transform .12s var(--ease-out),background-color .16s}
.mapbtn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.mapbtn:hover{background:var(--surface)}}
.pausebar{position:absolute;z-index:2;left:50%;top:76px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 32px);padding:9px 14px;border-radius:999px;
  background:var(--warn);color:#fff;font-weight:700;font-size:.875rem;box-shadow:var(--shadow-pop);animation:barfall .22s var(--ease-out)}
/* Pita status (jeda, selesai, kabut) turun sedikit saat muncul. Memakai `translate` sendiri supaya tidak bentrok dengan transform posisinya. */
@keyframes barfall{from{opacity:0;translate:0 -8px}}
@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])) .pausebar{color:#2b1600}}
:where(:root[data-theme=dark]) .pausebar{color:#2b1600}

.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8125rem;color:var(--muted);align-items:center}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:11px;height:11px;border-radius:50%;display:inline-block;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);flex:none}

.tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.tabbar button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:700 .875rem var(--f-body);cursor:pointer;transition:background-color .16s,color .16s,box-shadow .16s}
.tabbar button .ic{width:16px;height:16px}
@media (max-width:380px){.tabbar:has(> :nth-child(3)) button .ic{display:none}}
.tabbar button[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgb(18 32 41 / .14)}

.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{--p:var(--muted);display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:700;padding:4px 10px;border-radius:999px;color:var(--fg);background:var(--surface-2);border:1px solid var(--line)}
.pill-mudah{--p:var(--easy)} .pill-sedang{--p:var(--mid)} .pill-sulit,.pill-choke{--p:var(--hard)} .pill-air{--p:var(--flight)} .pill-conq{--p:var(--me,var(--accent))}
.pill:is(.pill-mudah,.pill-sedang,.pill-sulit,.pill-choke,.pill-air,.pill-conq){color:var(--p);background:color-mix(in srgb,var(--p) 10%,var(--surface));border-color:color-mix(in srgb,var(--p) 32%,var(--line))}
.pill .ic-sm{width:13px;height:13px}

/* feed kejadian */
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fi{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.fi:last-child{border-bottom:0}
.fi-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c,var(--accent)) 16%,var(--surface));color:var(--c,var(--accent))}
.fi-ic .ic{width:16px;height:16px}
.fi p{font-size:.9375rem;line-height:1.4;padding-top:4px}
.fi p small{display:block;color:var(--muted);font-size:.8125rem;font-weight:500}
.fi time{font-size:.75rem;color:var(--muted);padding-top:6px}
.fi-finish .fi-ic{background:var(--mid);color:#fff}
.fi-lomba_mulai .fi-ic,.fi-lomba_selesai .fi-ic{background:var(--accent);color:var(--accent-ink)}
.fi.is-secret p{color:var(--muted)}
.fi.is-new{animation:fiin .32s var(--ease-out)}
@keyframes fiin{from{opacity:0;transform:translateY(-6px)}}
.feed-empty{display:none;padding:18px 0;text-align:center}
.is-empty .feed-empty{display:block}

/* klasemen */
.ranks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rk-btn{width:100%;display:grid;grid-template-columns:26px auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 12px 8px 8px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;text-align:left;cursor:pointer;transition:background-color .16s,border-color .16s,transform .12s var(--ease-out)}
.rk-btn:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){.rk-btn:hover{background:var(--surface-2)}}
.rk-n{font-weight:600;color:var(--muted);text-align:center;display:grid;place-items:center}
.rk .avatar{width:34px;height:34px;font-size:.9rem}
.rk-name{display:flex;flex-direction:column;min-width:0}
.rk-name b,.rk-name small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-name small{color:var(--muted);font-size:.8125rem}
.rk-pts{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.rk-pts .num{font-weight:600;font-size:1.0625rem}
.rk-pts small{font-size:.6875rem;color:var(--muted)}
.rk.is-me .rk-btn{border-color:var(--c);box-shadow:0 0 0 1px var(--c)}
.rk.is-fin .rk-n{color:var(--mid)}

/* kartu kota */
.citycard{display:flex;flex-direction:column;gap:12px;padding-top:4px;animation:rise .24s var(--ease-out)}
.cc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cc-head h2{font:800 1.5rem/1.1 var(--f-display);letter-spacing:-.02em}
.cc-head .iconbtn{margin:-6px -8px 0 0;width:44px;height:44px}
.cc-facts{margin:0;display:flex;gap:8px;flex-wrap:wrap}
.cc-facts div{padding:9px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);min-width:120px}
.cc-facts dt{font-size:.75rem;color:var(--muted);font-weight:700}
.cc-facts dd{margin:0;font-weight:600;font-size:1.0625rem}
.cc-facts .is-full{border-color:color-mix(in srgb,var(--hard) 35%,var(--line));background:color-mix(in srgb,var(--hard) 7%,var(--surface))}
.cc-facts .is-full dd{color:var(--hard)}
.cc-teams{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cc-teams li{display:inline-flex;align-items:center;gap:7px;padding:3px 11px 3px 3px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-weight:700;font-size:.875rem}
.cc-teams li.is-me{border-color:var(--c);box-shadow:0 0 0 1px var(--c)}
.cc-teams .avatar{width:26px;height:26px;font-size:.72rem}
.cc-sub{font-size:.8125rem;color:var(--muted);margin-top:2px}
.cc-conns{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cc-conn{width:100%;min-height:52px;display:flex;gap:12px;align-items:center;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;text-align:left;cursor:pointer;transition:background-color .16s,transform .12s var(--ease-out)}
.cc-conn:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){.cc-conn:hover{background:var(--surface-2)}}
.cc-conn > .ic{color:var(--muted)}
.cc-conn span{display:flex;flex-direction:column;min-width:0}
.cc-conn small{color:var(--muted);font-size:.8125rem}

/* layar lomba peserta: peta penuh + HUD + panel bawah */
body.is-race{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.is-race .playbar{position:relative}
body.is-race .play{flex:1;min-height:0;width:100%;max-width:none;padding:0;gap:0}
body.is-race .me{display:none}
.race{position:relative;flex:1;min-height:0}
.race-map{position:absolute;inset:0}
.hud{position:absolute;z-index:2;left:max(12px,env(safe-area-inset-left,0px));top:12px;display:flex;align-items:center;gap:10px;max-width:calc(100% - 92px);padding:5px 16px 5px 5px;border-radius:999px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:0 8px 22px -12px rgb(18 32 41 / .45);color:var(--fg);font:inherit;text-align:left;cursor:pointer;transition:transform .12s var(--ease-out)}
.hud:active{transform:scale(.98)}
.hud .avatar{width:38px;height:38px;flex:none}
.hud-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.hud-text b{font:800 1.0625rem var(--f-display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-text > span{font-size:.8125rem;font-weight:600;color:var(--muted)}
.hud-text .num{color:var(--fg);font-weight:600}
.hud-delta{position:absolute;right:-6px;top:-10px;padding:2px 8px;border-radius:999px;font-size:.8125rem;font-weight:600;color:#fff;opacity:0;pointer-events:none}
.hud-delta.is-up{background:var(--easy)} .hud-delta.is-down{background:var(--hard)}
.hud-delta.is-show{animation:delta 1.6s var(--ease-out) forwards}
@keyframes delta{0%{opacity:0;transform:translateY(6px)}12%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])) .hud-delta{color:#06230f}:where(:root:not([data-theme=light])) .hud-delta.is-down{color:#2b0606}}
:where(:root[data-theme=dark]) .hud-delta{color:#06230f}:where(:root[data-theme=dark]) .hud-delta.is-down{color:#2b0606}

.sheet{position:absolute;z-index:3;left:0;right:0;bottom:0;height:min(74%,580px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;
  box-shadow:0 -12px 32px -16px rgb(18 32 41 / .35);padding-bottom:env(safe-area-inset-bottom,0px);transform:translate3d(0,calc(100% - 130px),0);will-change:transform}
.sheet-grab{flex:none;display:flex;justify-content:center;width:100%;padding:10px 0 8px;border:0;background:none;cursor:grab;touch-action:none;border-radius:22px 22px 0 0}
.sheet-grab i{width:40px;height:5px;border-radius:3px;background:var(--line-strong);transition:background-color .16s,transform .2s var(--ease-out)}
.sheet.is-open .sheet-grab i{transform:scaleX(.8)}
.sheet-head{flex:none;display:flex;flex-direction:column;gap:10px;padding:0 16px 12px;touch-action:none}
.sheet-status{font-weight:700;font-size:.9375rem;cursor:pointer}
.sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 16px 20px;border-top:1px solid var(--line)}
@media (min-width:900px){
  .race-map{right:380px}
  .sheet{left:auto;top:0;width:380px;height:auto;border:0;border-left:1px solid var(--line);border-radius:0;box-shadow:none;transform:none!important}
  .sheet-grab{display:none}
  .sheet-head{padding-top:16px}
  .sheet-status{cursor:default}
}

/* monitor admin */
.page:has(.monitor){max-width:1600px}
.monitor{display:flex;flex-direction:column;gap:14px}
.mon-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;height:max(480px,calc(100dvh - 230px))}
.mon-map{position:relative;min-height:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--sea)}
.mon-side{display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;padding:14px}
.mon-idle{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:12px;align-items:center;width:max-content;max-width:calc(100% - 32px);padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-pop);font-weight:600}
.mon-idle > .ic{color:var(--accent);width:24px;height:24px}
@media (max-width:980px){
  .mon-grid{grid-template-columns:minmax(0,1fr);height:auto}
  .mon-map{height:62vh;min-height:340px}
  .mon-side{overflow:visible}
}

/* ---------------------------------------------------------------- aksi tim (Fase 4): pilihan kota, antrean, Kerja Sambilan
   Bagian intip panel bawah selalu menunjukkan langkah berikutnya, supaya tim tidak perlu mencari di peta. */
.btn.is-busy{pointer-events:none}
.btn.is-busy > *{opacity:0}
.btn.is-busy::before{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ldot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--muted));flex:none;display:inline-block}
.ldot.d-mudah{--c:var(--easy)} .ldot.d-sedang{--c:var(--mid)} .ldot.d-sulit{--c:var(--hard)}

.act{display:flex;flex-direction:column;min-width:0}
.mv-row{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;touch-action:pan-x;margin:0 -16px;padding:2px 16px 3px;scroll-padding-inline:16px}
.mv-row::-webkit-scrollbar{display:none}
.mv-row.is-more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.mv{--m:var(--road);flex:none;scroll-snap-align:start;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;min-width:140px;max-width:210px;min-height:58px;padding:8px 14px 8px 8px;border-radius:14px;
  border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;text-align:left;cursor:pointer;transition:transform .12s var(--ease-out),border-color .16s,background-color .16s,box-shadow .16s,opacity .2s}
.mv.m-kapal{--m:var(--ferry)}
.mv:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.mv:hover{border-color:var(--line-strong);background:var(--surface-2)}}
.mv-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--m) 14%,var(--surface));color:var(--m)}
.mv-txt{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.25}
.mv-txt b{font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-txt small{display:flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;color:var(--muted);white-space:nowrap}
.mv.is-conq .mv-ic{box-shadow:inset 0 0 0 2px var(--me,var(--accent))}
.mv.is-full{--m:var(--full)}
.mv.is-full small{color:var(--warn)}
.mv.is-off{opacity:.55}
.mv.is-sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

.act-card{--k:var(--accent);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 9px 9px 10px;border-radius:14px;border:1px solid color-mix(in srgb,var(--k) 30%,var(--line));background:color-mix(in srgb,var(--k) 7%,var(--surface))}
.act-card.is-queue{--k:var(--warn)} .act-card.is-work{--k:var(--easy)}
.act-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--k) 16%,var(--surface));color:var(--k)}
.act-card > div{display:flex;flex-direction:column;gap:1px;min-width:0}
.act-card b{font-size:.9375rem;line-height:1.25}
.act-card small{font-size:.8125rem;font-weight:500;color:var(--muted);line-height:1.35}
.act-card .btn{min-height:44px;padding:0 14px}
.act-card [data-unqueue][data-armed]{background:var(--hard);color:#fff;--b:var(--hard)}
/* Jam pasir berbalik pelan: tanda antrean masih hidup dan sedang menunggu. */
.is-queue .act-ic .ic{animation:hourglass 3.2s var(--ease-out) infinite}
@keyframes hourglass{0%,72%{transform:none}86%,100%{transform:rotate(180deg)}}

.cc-go{display:flex;flex-direction:column;gap:8px}
.cc-go .btn{width:100%;border-radius:14px}
.cc-go-btn.is-queue{--b:color-mix(in srgb,var(--warn) 55%,var(--line));color:var(--warn);background:color-mix(in srgb,var(--warn) 7%,var(--surface))}
.cc-go-note{display:flex;gap:6px;align-items:flex-start;font-size:.8125rem;line-height:1.45;color:var(--muted)}
.cc-go-note.is-off{color:var(--hard);font-weight:600}
.cc-go-note .ic{margin-top:1px}

/* ---------------------------------------------------------------- layar soal (assets/js/quiz.js)
   Naik dari bawah seperti laci dan menutupi hampir seluruh layar; peta di belakang diredupkan.
   Bar di tepi atas menipis linier mengikuti jam server: teal, oranye di 10 detik terakhir, merah di 5 detik terakhir. */
.quiz{position:fixed;inset:0;z-index:45;display:flex;align-items:flex-end;justify-content:center}
.quiz-scrim{position:absolute;inset:0;background:rgb(6 16 22 / .5);opacity:0;transition:opacity .3s var(--ease-out)}
.quiz.is-open .quiz-scrim{opacity:1}
.quiz-panel{position:relative;width:100%;height:calc(100dvh - 40px - env(safe-area-inset-top,0px));display:flex;flex-direction:column;background:var(--surface);border-radius:24px 24px 0 0;overflow:hidden;
  box-shadow:0 -16px 40px -18px rgb(0 0 0 / .5);padding-bottom:env(safe-area-inset-bottom,0px);transform:translate3d(0,100%,0);transition:transform .24s var(--ease-drawer)}
.quiz.is-open .quiz-panel{transform:none;transition-duration:.42s}
.quiz-bar{flex:none;height:6px;background:color-mix(in srgb,var(--fg) 8%,var(--surface))}
.quiz-bar i{display:block;height:100%;background:var(--accent);transform-origin:left center;will-change:transform}
.quiz.is-low .quiz-bar i{background:var(--warn)}
.quiz.is-crit .quiz-bar i{background:var(--hard)}
.quiz.is-result .quiz-bar{visibility:hidden}
.quiz-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 16px}
.quiz-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}
.quiz-where{min-width:0}
.quiz-where h2{font:800 1.875rem/1.02 var(--f-display);letter-spacing:-.03em;outline:none;overflow-wrap:anywhere}
.quiz-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:9px;font-size:.8125rem;font-weight:600;color:var(--muted)}
.quiz-from{display:inline-flex;align-items:center;gap:5px}
.pill-pts{--p:var(--easy);color:var(--p);background:color-mix(in srgb,var(--p) 10%,var(--surface));border-color:color-mix(in srgb,var(--p) 32%,var(--line))}
.pill-pts .num{font-weight:600}
.quiz.is-result .quiz-scroll{display:flex;flex-direction:column}
.quiz.is-result [data-quiz-body]{flex:1;display:flex;flex-direction:column;justify-content:center;padding-bottom:6vh}
.quiz-clock{flex:none;display:flex;flex-direction:column;align-items:flex-end;line-height:1;padding-top:2px}
.quiz-clock .num{display:inline-block;font-size:2.125rem;font-weight:600;letter-spacing:-.03em;transform-origin:right center;transition:color .3s}
.quiz-clock small{font-size:.6875rem;font-weight:700;color:var(--muted);margin-top:5px}
.quiz.is-low .quiz-clock .num{color:var(--warn)}
.quiz.is-crit .quiz-clock .num{color:var(--hard)}
.quiz.is-paused .quiz-clock .num{color:var(--muted)}
.quiz.is-result .quiz-clock{visibility:hidden}
.quiz-q{font:700 1.3125rem/1.4 var(--f-body);letter-spacing:-.012em;text-wrap:pretty;margin-bottom:20px;overflow-wrap:anywhere}
.qopts{display:flex;flex-direction:column;gap:10px}
.qopt{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;min-height:62px;padding:10px 16px 10px 10px;border-radius:16px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--fg);
  font:600 1.0625rem/1.35 var(--f-body);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .16s,background-color .16s,box-shadow .16s,transform .12s var(--ease-out),opacity .2s}
.qopt:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){.qopt:hover{border-color:var(--muted)}}
.qopt-k{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);font:600 .9375rem var(--f-mono);color:var(--muted);transition:background-color .16s,border-color .16s,color .16s}
.qopt-v{overflow-wrap:anywhere}
.qopt[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.qopt[aria-checked="true"] .qopt-k{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.qopt:disabled{cursor:default;transform:none}
.quiz.is-locked .qopt:not([aria-checked="true"]){opacity:.5}
.quiz .quiz-input{min-height:62px;padding:12px 16px;border-radius:16px;border-width:1.5px;font-size:1.25rem;font-weight:600}
.quiz-foot{flex:none;padding:12px 20px 16px;border-top:1px solid var(--line);background:var(--surface)}
.quiz-foot .btn{width:100%;min-height:58px;border-radius:16px;font-size:1.0625rem}
.btn.is-auto::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:currentColor;opacity:.3;transform-origin:left;animation:confirmclock 1.7s linear forwards}

/* hasil jawaban */
.quiz.is-benar{--k:var(--easy)} .quiz.is-salah{--k:var(--hard)} .quiz.is-habis{--k:var(--warn)}
.qres{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:22px 0 6px}
.qres-mark{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:var(--k);color:var(--accent-ink);box-shadow:0 16px 32px -16px var(--k);animation:markin .36s var(--ease-out) both}
.qres-mark svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.qres-mark :is(path,circle){stroke-dasharray:1;stroke-dashoffset:0;animation:draw .38s .14s var(--ease-out) both}
@keyframes markin{from{opacity:0;transform:scale(.86)}}
@keyframes draw{from{stroke-dashoffset:1}}
.qres-title{font:800 2.125rem/1.05 var(--f-display);letter-spacing:-.03em;margin-top:8px}
.qres-sub{color:var(--muted);font-weight:500;max-width:36ch;text-wrap:pretty}
.qres-sub b{color:var(--fg)}
.qres-ledger{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.qres-ledger li{display:inline-flex;align-items:baseline;gap:6px;padding:8px 14px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-weight:700;font-size:.875rem}
.qres-ledger .num{font-size:1.0625rem;font-weight:600}
.qres-ledger .up{border-color:color-mix(in srgb,var(--easy) 40%,var(--line));background:color-mix(in srgb,var(--easy) 9%,var(--surface))}
.qres-ledger .up .num{color:var(--easy)}
.qpen{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;max-width:440px;margin-top:14px;padding:12px 14px;border-radius:16px;text-align:left;
  background:color-mix(in srgb,var(--hard) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--hard) 30%,var(--line))}
.qpen-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--hard) 16%,var(--surface));color:var(--hard)}
.qpen b{display:block;font-size:.9375rem}
.qpen p{font-size:.8125rem;color:var(--muted)}
.qpen-amt{font-size:1.25rem;font-weight:600;color:var(--hard)}

@media (min-width:900px){
  .quiz{align-items:center;padding:32px}
  .quiz-panel{width:min(620px,100%);height:auto;max-height:calc(100dvh - 64px);border-radius:24px;box-shadow:var(--shadow-pop);opacity:0;transform:translate3d(0,18px,0) scale(.98);
    transition:transform .2s var(--ease-out),opacity .2s var(--ease-out)}
  .quiz.is-open .quiz-panel{opacity:1;transform:none;transition-duration:.3s}
  .quiz-scroll{padding:22px 26px 18px}
  .quiz-foot{padding:14px 26px 20px}
}
@media (prefers-reduced-motion:reduce){
  /* Layar soal cukup memudar; bar waktu digeser per langkah oleh quiz.js. */
  .quiz-panel{transform:none!important;opacity:0;transition:opacity .2s ease!important}
  .quiz.is-open .quiz-panel{opacity:1}
  .quiz-scrim{transition:opacity .2s ease!important}
}

/* ---------------------------------------------------------------- hukuman (Fase 6): roda, kartu, kabut
   Warna mengikuti jenis kartu: Waktu biru kapal, Rute oranye, Posisi ungu, Poin merah, Pandangan abu, Soal teal.
   Roda hanya animasi; kartunya diputuskan server. Gerak: ancang-ancang mundur, lalu melambat panjang sampai berhenti. */
:root{--fogc:rgb(233 237 236 / .74)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--fogc:rgb(64 78 86 / .66)}}
:root[data-theme=dark]{--fogc:rgb(64 78 86 / .66)}
.k-waktu{--k:var(--ferry)} .k-rute{--k:var(--warn)} .k-posisi{--k:var(--flight)} .k-poin{--k:var(--hard)}
.k-pandangan{--k:color-mix(in srgb,var(--fg) 58%,var(--surface))} .k-soal{--k:var(--accent)}
.btn.is-auto::after{animation-duration:var(--auto,1.7s)}

.qres.is-compact{gap:6px;padding:2px 0 0}
.qres.is-compact .qres-mark{width:56px;height:56px}
.qres.is-compact .qres-mark svg{width:30px;height:30px}
.qres.is-compact .qres-title{font-size:1.625rem;margin-top:2px}
.qres.is-bare{padding:0}
.quiz.is-result [data-quiz-body]{justify-content:safe center}
.pill-macet{--p:var(--warn);color:var(--p);background:color-mix(in srgb,var(--p) 10%,var(--surface));border-color:color-mix(in srgb,var(--p) 32%,var(--line))}

.qwheel{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}
.qwheel-label{font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.qwheel-disc{width:min(290px,72vw,38dvh);aspect-ratio:1;margin-top:4px}
.qwheel-name{font:800 1.375rem/1.15 var(--f-display);letter-spacing:-.02em;min-height:1.2em;text-align:center}
.wheel{position:relative}
.wheel::before{content:"";position:absolute;inset:5%;border-radius:50%;box-shadow:0 18px 36px -14px rgb(0 0 0 / .45)}
.wheel svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wh-disc{will-change:transform}
.wh-seg{fill:var(--k);stroke:var(--surface);stroke-width:1.4;transition:opacity .35s ease}
.wh-seg.alt{fill:color-mix(in srgb,var(--k) 80%,#000)}
.wh-ic{color:#fff;pointer-events:none}
.wh-rim{fill:none;stroke:var(--fg);stroke-width:7}
.wh-peg{fill:var(--surface)}
.wh-hub{fill:var(--surface);stroke:var(--fg);stroke-width:5}
.wh-hub-dot{fill:var(--fg)}
.wh-ptr{fill:var(--fg);stroke:var(--surface);stroke-width:2.5;stroke-linejoin:round;transform-box:fill-box;transform-origin:50% 10%}
.wheel.has-win .wh-seg:not(.is-win){opacity:.3}
@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])) .wh-seg{fill:color-mix(in srgb,var(--k) 72%,#000)}:where(:root:not([data-theme=light])) .wh-seg.alt{fill:color-mix(in srgb,var(--k) 56%,#000)}}
:where(:root[data-theme=dark]) .wh-seg{fill:color-mix(in srgb,var(--k) 72%,#000)}:where(:root[data-theme=dark]) .wh-seg.alt{fill:color-mix(in srgb,var(--k) 56%,#000)}

.pcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;width:100%;max-width:400px;margin:14px auto 0;padding:22px 20px 20px;border-radius:22px;
  background:color-mix(in srgb,var(--k) 8%,var(--surface));border:1.5px solid color-mix(in srgb,var(--k) 35%,var(--line));animation:pcardin .34s var(--ease-out) both}
.pcard-ic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--k);color:#fff;margin-bottom:6px;box-shadow:0 14px 26px -14px var(--k)}
.pcard-ic .ic{width:32px;height:32px}
.pcard-kind{font-size:.6875rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--k)}
.pcard-name{font:800 1.75rem/1.05 var(--f-display);letter-spacing:-.03em}
.pcard-eff{font-weight:500;max-width:34ch;text-wrap:pretty}
.pcard-left{font-size:.875rem;font-weight:600;color:var(--muted)}
.pcard-left .num{color:var(--fg);font-weight:600}
.pcard-amt{font-size:1.5rem;font-weight:600;color:var(--k)}
@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])) .pcard-ic{color:#0b1216}}
:where(:root[data-theme=dark]) .pcard-ic{color:#0b1216}
@keyframes pcardin{from{opacity:0;transform:translateY(10px) scale(.96)}}

/* panel bawah: hukuman yang sedang berlaku */
.pen-row{list-style:none;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 8px;padding:0 16px}
.pen-row::-webkit-scrollbar{display:none}
.pchip{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 9px;border-radius:999px;font-size:.8125rem;font-weight:700;white-space:nowrap;
  color:var(--k);background:color-mix(in srgb,var(--k) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--k) 30%,var(--line));animation:chipin .28s var(--ease-out) both}
.pchip .num{font-weight:600;color:var(--fg)}
.act-card.is-ban{--k:var(--ferry)} .act-card.is-check{--k:var(--accent)}
.act-cd{font:600 1.5rem/1 var(--f-mono);color:var(--k);padding-right:8px}
/* Ban bergoyang pelan: tanda tim sedang menunggu, bukan macet karena error. */
.is-ban .act-ic .ic{animation:wobble 2.4s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
.mv.is-must{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn)}
.mv-txt em{font-style:normal;font-weight:800;color:var(--warn)}
.cc-go-note.is-must{color:var(--warn);font-weight:600}

/* peta: kota tertutup longsor dan kota wajib Jalan Memutar */
.rmap .node .lockx{display:none;fill:none;stroke:var(--surface);stroke-width:1.8px;stroke-linecap:round}
.rmap .node.is-locked .lockx{display:inline}
.rmap .node.is-locked .dot{fill:color-mix(in srgb,var(--fg) 70%,var(--surface))}
.rmap .node.is-locked text{fill:var(--muted);text-decoration:line-through}
.rmap .node.is-must .ring{stroke:var(--warn);stroke-width:2.6px;stroke-dasharray:3.2 2.4;opacity:1;transform-box:fill-box;transform-origin:center;animation:mustspin 7s linear infinite}
@keyframes mustspin{to{transform:rotate(360deg)}}

/* Kabut Asap: lapisan kabut bergeser pelan di atas peta yang buram. */
.fog{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s .9s}
.race-map.is-fog .fog{opacity:1;visibility:visible;transition:opacity .9s ease}
.fog i{position:absolute;inset:-40%;background:radial-gradient(closest-side at 30% 35%,var(--fogc),transparent),radial-gradient(closest-side at 72% 62%,var(--fogc),transparent);animation:fogdrift 22s ease-in-out infinite alternate}
.fog i:nth-child(2){animation-duration:31s;animation-direction:alternate-reverse;opacity:.85}
.fog i:nth-child(3){inset:-60%;animation-duration:43s;opacity:.6}
@keyframes fogdrift{from{transform:translate3d(-7%,-3%,0)}to{transform:translate3d(7%,4%,0)}}
.race-map .rmap-svg{transition:opacity .9s ease}
/* Tanpa filter: blur pada SVG peta membuat zoom dan roda turun ke ±5 fps di HP lambat. */
.race-map.is-fog .rmap-svg{opacity:.72}
.pausebar.fogbar{max-width:calc(100% - 150px);background:color-mix(in srgb,var(--fg) 82%,var(--surface));color:var(--surface);line-height:1.3}
.fogbar .num{opacity:.8}

/* monitor admin: tab Hukuman */
.mon-pen{display:flex;flex-direction:column;gap:10px}
.pen-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pen-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.pen-item b{font-size:.9375rem}
.pen-item .pen-row{margin:6px 0 4px;padding:0;flex-wrap:wrap}
.pen-item small{display:block;color:var(--muted);font-size:.8125rem;line-height:1.45}
.pen-test{display:flex;flex-direction:column;gap:10px;margin-top:10px;padding-top:14px;border-top:1px solid var(--line)}
.pen-test .field > span{font-weight:700;font-size:.875rem}
.pen-test .btn{align-self:flex-start}

/* ---------------------------------------------------------------- hitung mundur */
.cd{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;background:var(--accent);color:var(--accent-ink);animation:cdin .3s var(--ease-out)}
.cd-stage{position:relative;width:min(70vw,58vh,420px);aspect-ratio:1}
.cd-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.cd-ring circle{fill:none;stroke:currentColor;stroke-width:5}
.cd-track{opacity:.2}
.cd-prog{stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.cd-prog.is-run{animation:cdring 1s linear forwards}
.cd-num{position:absolute;inset:0;display:grid;place-items:center;font:800 min(44vw,36vh,260px)/1 var(--f-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.cd-num.is-in{animation:cdnum .5s var(--ease-out) both}
.cd-label{font-weight:800;font-size:1.125rem;letter-spacing:.02em;opacity:.9}
.cd.is-wait .cd-prog{opacity:0}
.cd.is-wait .cd-label{animation:breathe 1.1s ease-in-out infinite alternate}
.cd.is-go .cd-num{font-size:min(20vw,16vh,140px);animation:cdgo .55s var(--ease-out) both}
.cd.is-go .cd-ring{animation:cdburst .8s var(--ease-out) forwards}
.cd.is-leaving{animation:cdout .35s var(--ease-out) forwards}
@keyframes cdin{from{opacity:0}}
@keyframes cdout{to{opacity:0}}
@keyframes cdring{to{stroke-dashoffset:100}}
@keyframes cdnum{from{opacity:0;transform:scale(.9);filter:blur(8px)}}
@keyframes cdgo{from{opacity:0;transform:scale(.92)}}
@keyframes cdburst{to{opacity:0;transform:rotate(-90deg) scale(1.3)}}
@keyframes breathe{from{opacity:.45}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  /* Hitung mundur tetap terbaca: angka berganti dengan memudar, tanpa gerak atau blur. */
  .cd-num.is-in,.cd.is-go .cd-num{animation:cdfade .25s ease both!important;animation-duration:.25s!important}
  .cd-prog.is-run{animation:none!important}
}
@keyframes cdfade{from{opacity:0}}

/* ---------------------------------------------------------------- akhir lomba (Fase 7) */
/* Menu admin: 6 tab. Bilah bawah HP memakai label pendek; layar tanggung tanpa ikon supaya muat satu baris. */
.tabs .t-short{display:none}
@media (min-width:761px) and (max-width:1060px){.tabs a{padding:8px 10px}.tabs a > .ic{display:none}}
@media (max-width:760px){.tabs .t-long{display:none}.tabs .t-short{display:inline}}

/* Kontrol lomba di Dasbor dan Monitor */
.lobbyhead > div.lobbyhead-end{flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:520px){.lobbyhead > div.lobbyhead-end,.pagehead > div.mon-head-end{width:100%;justify-content:flex-start}.lobbyhead-end .racectl{width:100%}}
/* Pita jeda di HP: rata kiri di bawah HUD, tidak menutupi tombol peta di kanan. */
@media (max-width:520px){.race-map .pausebar:not(.fogbar){left:16px;transform:none;max-width:calc(100% - 92px)}}
.racectl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn.is-busy{opacity:.6;pointer-events:none}
.mon-head{align-items:center}
.pagehead > div.mon-head-end{flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap}
.pausebar.endbar{background:var(--accent);color:var(--accent-ink)}

/* Laporan admin */
:root{--gold:#b07d00;--silver:#6b7b86;--bronze:#a4572a}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--gold:#fcc419;--silver:#a9b8c2;--bronze:#e0915c}}
:root[data-theme=dark]{--gold:#fcc419;--silver:#a9b8c2;--bronze:#e0915c}
.rep-head{align-items:center}
.rep-head .badge{margin-left:6px;vertical-align:1px}
.pagehead > div.rep-actions,.pagehead > div.racectl{display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap}
.rep-actions form{margin:0}
.rep-ranks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:860px){.rep-ranks{grid-template-columns:minmax(0,1fr)}}
.rep-rank-head{display:flex;flex-direction:column;gap:4px}
.rep-rank-head h2{display:flex;align-items:center;gap:8px}
.rep-rank-head h2 .ic{color:var(--accent)}
.podlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pl{display:grid;grid-template-columns:32px auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line)}
.pl:last-child{border-bottom:0}
.pl-n{font-weight:600;color:var(--muted);text-align:center;display:grid;place-items:center}
.pl.is-p1 .pl-n{color:var(--gold)} .pl.is-p2 .pl-n{color:var(--silver)} .pl.is-p3 .pl-n{color:var(--bronze)}
.pl.is-top .pl-n{font-size:1.125rem}
.pl .avatar{width:36px;height:36px;font-size:.95rem}
.pl.is-p1{padding:14px 10px;margin:0 -6px 4px;border:0;border-radius:12px;background:color-mix(in srgb,var(--gold) 10%,var(--surface))}
.pl.is-p1 .avatar{width:46px;height:46px;font-size:1.25rem}
.pl.is-p1 .pl-name b{font:800 1.25rem/1.15 var(--f-display);letter-spacing:-.02em}
.pl-name{display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none}
.pl-name b,.pl-name small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-name small{color:var(--muted);font-size:.8125rem}
.pl-name:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.pl-val{font-weight:600;white-space:nowrap;color:var(--muted);font-size:.875rem}
.pl-val .num{font-size:1.0625rem;color:var(--fg)}
.pl.is-p1 .pl-val .num{font-size:1.25rem}
.pl.is-out .avatar{opacity:.55}
@media (max-width:400px){.pl{grid-template-columns:24px auto minmax(0,1fr) auto;gap:8px}.pl.is-p1 .avatar{width:38px;height:38px;font-size:1.05rem}.pl.is-p1 .pl-name b{font-size:1.0625rem}.pl.is-p1 .pl-val .num{font-size:1.0625rem}}

.rep-teams{display:flex;flex-direction:column;gap:10px}
.rep{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);scroll-margin-top:84px}
.rep > summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;list-style:none;border-radius:inherit}
.rep > summary::-webkit-details-marker{display:none}
@media (hover:hover) and (pointer:fine){.rep > summary:hover{background:var(--surface-2)}}
.rep[open] > summary{border-bottom:1px solid var(--line);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.rep-name{display:flex;flex-direction:column;min-width:0}
.rep-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-name small{display:flex;flex-wrap:wrap;gap:2px 10px;color:var(--muted);font-size:.8125rem}
.rep-bal{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.rep-bal .num{font-weight:600;font-size:1.125rem}
.rep-bal small{font-size:.6875rem;color:var(--muted)}
.rep-chev{color:var(--muted);transition:transform .2s var(--ease-out)}
.rep[open] .rep-chev{transform:rotate(180deg)}
.rep-body{display:flex;flex-direction:column;gap:18px;padding:16px;animation:reveal .26s var(--ease-out)}
.rep-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin:0}
.rep-stats > div{padding:9px 12px;border-radius:var(--radius);background:var(--surface-2)}
.rep-stats dt{font-size:.75rem;color:var(--muted);font-weight:600}
.rep-stats dd{margin:0;font-size:1.125rem;font-weight:600}
.rep-stats dd small{font-size:.8125rem;color:var(--muted)}
.rep-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px}
@media (max-width:760px){.rep-cols{grid-template-columns:minmax(0,1fr)}}
.rep-sec{display:flex;flex-direction:column;gap:8px;min-width:0}
.rep-sec h3{font-size:.9375rem;display:flex;align-items:baseline;gap:8px}
.rep-sec h3 small{font-weight:600;font-size:.8125rem}
.rep-ledger{font-size:.9375rem}
.rep-ledger td,.rep-ledger th{padding:7px 0;border-bottom:1px solid var(--line);background:none}
.rep-ledger td small{display:block;color:var(--muted);font-size:.75rem}
.rep-ledger td.n{text-align:right}
.rep-ledger tfoot th{font:700 .9375rem var(--f-body);letter-spacing:0;text-transform:none;color:var(--fg);border-bottom:0;border-top:2px solid var(--line-strong)}
.rep-ledger tfoot td{border-bottom:0;border-top:2px solid var(--line-strong);font-size:1.0625rem}
.route{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 4px;align-items:center}
.route li{display:inline-flex;align-items:center;gap:4px;font-size:.875rem;font-weight:600}
.route li:not(:first-child)::before{content:"";width:10px;height:1px;background:var(--line-strong);margin-right:2px}
.route li .ic{color:var(--road)}
.route li:has(use[href="#i-ship"]) .ic{color:var(--ferry)}
.route li:has(use[href="#i-plane"]) .ic{color:var(--flight)}
.route li.is-back,.route li.is-back .ic{color:var(--flight)}
.route li:last-child span{padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,var(--surface));color:var(--fg)}
.rep-pens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rep-pens li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 10px;border-radius:var(--radius);background:color-mix(in srgb,var(--k) 7%,var(--surface))}
.rep-pen-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:color-mix(in srgb,var(--k) 16%,var(--surface));color:var(--k)}
.rep-pen-ic .ic{width:17px;height:17px}
.rep-pens b{font-size:.9375rem}
.rep-pens small{display:block;color:var(--muted);font-size:.8125rem}
.rep-fix{padding-top:14px;border-top:1px solid var(--line)}
.rep-fixrow{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;align-items:baseline;margin:0;font-size:.9375rem}
.rep-fixrow .num{font-weight:600}
.fixform{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.fixform .unit{max-width:180px}
.fixform .fixnote{flex:1 1 260px}
.fixform .field > span{font-weight:700;font-size:.875rem}

/* Layar hasil di HP peserta */
.results{display:flex;flex-direction:column;gap:16px}
.res-wait{gap:10px;padding:30px 22px 26px}
.res-flag{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--accent-soft);color:var(--accent);margin-bottom:4px}
.res-mine{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;margin:8px 0 2px}
.res-mine > div{padding:12px;border-radius:12px;background:var(--surface-2);display:flex;flex-direction:column;gap:2px}
.res-mine dt{font-size:.75rem;color:var(--muted);font-weight:600}
.res-mine dd{margin:0;font-weight:600}
.res-mine dd b{font-size:1.25rem}
.res-waiting{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 0;text-align:left;font-weight:700;font-size:.9375rem;color:var(--muted)}
.dots{display:inline-flex;gap:4px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:dot 1.4s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.18s} .dots i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.res{display:flex;flex-direction:column;gap:16px}
.res-head{text-align:center;display:flex;flex-direction:column;gap:4px}
.res-head h2{font:800 clamp(1.75rem,8vw,2.5rem)/1.05 var(--f-display);letter-spacing:-.03em}
.res-head p{font-size:.9375rem;max-width:36ch;margin:0 auto}
.res-tabs{width:min(320px,100%);margin:0 auto}

/* Podium: kiri juara 2, tengah juara 1, kanan juara 3. Balok tumbuh dari bawah (clip-path), lalu tim muncul di atasnya. */
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:8px;min-height:300px;padding-top:8px}
.podium:has(.pod:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));width:min(380px,100%);margin:0 auto}
.podium:has(.pod:only-child){grid-template-columns:minmax(0,1fr);width:min(200px,100%);margin:0 auto}
.pod{display:flex;flex-direction:column;align-items:center;min-width:0}
.pod-who{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 2px 10px;text-align:center;min-width:0;max-width:100%}
.pod-who .avatar{width:48px;height:48px;font-size:1.3rem;box-shadow:inset 0 -3px 0 rgb(0 0 0 / .18),0 0 0 3px var(--bg)}
.pod-1 .pod-who .avatar{width:64px;height:64px;font-size:1.75rem}
.pod-who b{font-size:.9375rem;line-height:1.2;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.pod-1 .pod-who b{font:800 1.125rem/1.15 var(--f-display);letter-spacing:-.01em}
.pod-who small{color:var(--muted);font-size:.8125rem;font-weight:600}
.pod-who small .num{color:var(--fg);font-size:.9375rem}
.pod-crown{color:var(--gold);margin-bottom:2px}
.pod-crown .ic{width:30px;height:30px}
.pod-you{font-size:.6875rem;font-weight:800;letter-spacing:.02em;padding:2px 8px;border-radius:999px;background:var(--c);color:#fff}
.pod-block{width:100%;display:grid;place-items:start center;padding-top:10px;border-radius:12px 12px 4px 4px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 88%,#fff) 0%,var(--c) 40%,color-mix(in srgb,var(--c) 78%,#000) 100%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .28),0 12px 24px -16px var(--c)}
.pod-1 .pod-block{height:150px} .pod-2 .pod-block{height:108px} .pod-3 .pod-block{height:78px}
.pod-n{font:800 2.75rem/1 var(--f-display);color:#fff;text-shadow:0 2px 0 rgb(0 0 0 / .18)}
.pod-1 .pod-n{font-size:3.5rem}
.pod.is-me .pod-block{outline:3px solid var(--c);outline-offset:3px}

/* Pengumuman pertama: juara 3 (0s), juara 2 (.5s), juara 1 (1,1s, lebih lama). Ganti tab: versi singkat. */
.podium.is-big .pod-block{animation:podgrow .7s var(--ease-out) both;animation-delay:calc(var(--s) * .45s + var(--s) * var(--s) * .05s)}
.podium.is-big .pod-1 .pod-block{animation-duration:.9s}
.podium.is-big .pod-who{animation:podwho .5s var(--ease-out) both;animation-delay:calc(var(--s) * .45s + var(--s) * var(--s) * .05s + .45s)}
.podium.is-big .pod-1 .pod-crown{animation:podcrown .6s var(--ease-out) both;animation-delay:1.7s}
.podium.is-quick .pod-block{animation:podgrow .42s var(--ease-out) both;animation-delay:calc(var(--s) * 60ms)}
.podium.is-quick .pod-who{animation:podwho .32s var(--ease-out) both;animation-delay:calc(var(--s) * 60ms + .16s)}
@keyframes podgrow{from{clip-path:inset(100% 0 0 0 round 12px 12px 4px 4px)}to{clip-path:inset(0 0 0 0 round 12px 12px 4px 4px)}}
@keyframes podwho{from{opacity:0;transform:translateY(14px) scale(.96)}}
@keyframes podcrown{from{opacity:0;transform:translateY(8px) scale(.6) rotate(-12deg)}}

.res-me{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px 16px;margin:0;padding:12px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.res-me-t{font-weight:700;font-size:.9375rem}
.res-me-k{display:flex;flex-direction:column;align-items:center;line-height:1}
.res-me-k small{font-size:.6875rem;color:var(--muted);font-weight:700;margin-bottom:3px}
.res-me-k b{font:800 1.75rem/1 var(--f-display)}
.res.is-big .res-me{animation:rise .5s var(--ease-out) both;animation-delay:2.1s}

.res-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rl{display:grid;grid-template-columns:28px auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.rl .avatar{width:34px;height:34px;font-size:.9rem}
.rl-n{text-align:center;font-weight:600;color:var(--muted)}
.rl.is-top .rl-n{color:var(--gold)}
.rl-name{display:flex;flex-direction:column;min-width:0}
.rl-name b,.rl-name small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-name small{color:var(--muted);font-size:.8125rem}
.rl-val{white-space:nowrap;font-weight:600;font-size:.875rem;color:var(--muted)}
.rl-val .num{color:var(--fg);font-size:1.0625rem}
.rl.is-me{border-color:var(--c);box-shadow:0 0 0 1px var(--c)}
.res.is-big .rl{animation:rise .4s var(--ease-out) both;animation-delay:calc(2.2s + var(--i) * 45ms)}

.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;width:8px;height:12px;border-radius:2px}

@media (prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.6}}

/* ---------------------------------------------------------------- bandara (Fase 5)
   Pesawat selalu ungu (--flight). Tiket dibeli dengan dua ketukan, lalu panel bawah berubah jadi boarding pass:
   rute dengan pesawat kecil yang maju sesuai sisa waktu boarding, dan sobekan tiket berisi hitung mundur. */
:root{--flight-ink:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--flight-ink:#1a0f2b}}
:root[data-theme=dark]{--flight-ink:#1a0f2b}
.mv.m-terbang{--m:var(--flight)}
.cc-go-btn.is-fly{--b:var(--flight);background:var(--flight);color:var(--flight-ink)}
@media (hover:hover) and (pointer:fine){.cc-go-btn.is-fly:hover{background:color-mix(in srgb,var(--flight) 88%,var(--fg))}}
.cc-go-btn.is-fly[data-armed]{background:color-mix(in srgb,var(--flight) 72%,var(--fg));--b:transparent}
.cc-go-btn.is-fly[data-armed]::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgb(255 255 255 / .55);transform-origin:left;animation:confirmclock 3s linear forwards}
.cc-conn.is-air > .ic{color:var(--flight)}
.k-bandara{--k:var(--flight)}

.act-card.is-board{--k:var(--flight);position:relative;overflow:hidden;padding-right:0;gap:12px}
.bp-track{position:relative;display:block;height:16px;margin:3px 0 2px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--k) 45%,transparent) 55%,transparent 0) 0 50%/7px 2px repeat-x}
.bp-track::before,.bp-track::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--k)}
.bp-track::before{left:0} .bp-track::after{right:0;background:var(--surface);box-shadow:inset 0 0 0 2px var(--k)}
.bp-fly{position:absolute;left:0;top:50%;z-index:1;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;color:var(--k);
  background:color-mix(in srgb,var(--k) 7%,var(--surface));transform:translate(0,-50%);transition:transform .5s linear;will-change:transform}
.bp-fly .ic{transform:rotate(45deg)}
.bp-delay{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-weight:700;color:var(--warn)}
/* Sobekan tiket: garis putus-putus dengan dua lekukan setengah lingkaran di atas dan bawah. */
.bp-stub{--s:var(--k);position:relative;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:78px;
  margin:-9px 0;padding:0 12px 0 14px;border-left:2px dashed color-mix(in srgb,var(--s) 35%,var(--line));background:color-mix(in srgb,var(--s) 6%,transparent)}
.bp-stub::before,.bp-stub::after{content:"";position:absolute;left:-9px;width:16px;height:16px;border-radius:50%;background:var(--surface);
  border:1px solid color-mix(in srgb,var(--k) 30%,var(--line))}
.bp-stub::before{top:-9px} .bp-stub::after{bottom:-9px}
.bp-stub .num{font:600 1.375rem/1 var(--f-mono);color:var(--s);transition:opacity .2s}
.bp-lbl{font-size:.6875rem!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.is-delay .bp-stub{--s:var(--warn)}
.is-go .bp-stub .num{opacity:.35}
.is-go .bp-lbl{color:var(--k)}
.act-card.is-board.is-enter{animation:pcardin .26s var(--ease-out)}
/* Delay baru diberitahukan: sobekan tiket bergoyang dua kali, tulisan delay muncul. */
.is-delay-new .bp-stub{animation:shake .32s ease-in-out 2}
.is-delay-new .bp-delay{animation:pop .24s var(--ease-out)}

/* Peta: rute tiket yang sudah dibeli menyala, titiknya mengalir ke arah tujuan selama boarding. */
.rmap .flight.is-booked{display:inline;stroke-width:3.6px;opacity:1;stroke-dasharray:1 6;animation:bpmarch 1s linear infinite}
@keyframes bpmarch{to{stroke-dashoffset:-7}}

@media (prefers-reduced-motion:reduce){
  .rmap .flight.is-booked{animation:none}
  .bp-fly{transition:none}
  .act-card.is-board.is-enter,.is-delay-new .bp-stub,.is-delay-new .bp-delay{animation:none}
}

/* ---------------------------------------------------------------- setengah jalan (Fase 8)
   Karakter tim lain yang sedang menjawab soal menunggu di tengah jalan dengan cincin yang berdenyut. */
.rmap .av-wait{fill:none;stroke:var(--c);stroke-width:2px;opacity:0;pointer-events:none;transform-box:fill-box;transform-origin:center}
.rmap .av.is-wait .av-wait{animation:avwait 1.5s var(--ease-out) infinite}
@keyframes avwait{from{transform:scale(.75);opacity:.75}to{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.rmap .av.is-wait .av-wait{animation:none;opacity:.6}}

/* ---------------------------------------------------------------- layar proyektor (Fase 8, admin/layar.php)
   Dilihat dari jauh tanpa disentuh. Panel memakai zoom (--z) sesuai lebar layar, peta memakai pembesar sendiri (opsi ui). */
.scr-page{--z:1;height:100vh;height:100dvh;overflow:hidden}
@media (min-width:1500px){.scr-page{--z:1.18}}
@media (min-width:1800px){.scr-page{--z:1.4}}
@media (min-width:2400px){.scr-page{--z:1.8}}
@media (min-width:3200px){.scr-page{--z:2.4}}
.scr{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);gap:calc(12px * var(--z));padding:calc(12px * var(--z)) calc(16px * var(--z))}
.scr.is-idle,.scr.is-idle *{cursor:none!important}
.scr-bar{zoom:var(--z);display:flex;align-items:center;gap:22px;min-height:50px}
.scr-brand{display:flex;align-items:center;gap:18px;min-width:0}
.scr-brand .brand{font-size:1.625rem}
.scr-route{margin:0}
.scr-route svg{width:110px;flex:none}
.scr-stats{margin-left:auto;display:flex;align-items:center;gap:22px}
.scr-stat{display:flex;align-items:baseline;gap:6px;color:var(--muted);font-weight:600}
.scr-stat b{font-size:1.5rem;font-weight:600;color:var(--fg)}
.scr-clock{display:flex;align-items:center;gap:9px;padding:5px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.scr-clock .ic{color:var(--accent)}
.scr-clock b{font-size:1.625rem;font-weight:600;min-width:4.3ch;text-align:right}
.scr-bar .status{font-size:.9375rem;padding:7px 14px}
.scr-tools{display:flex;gap:4px;transition:opacity .3s}
.scr.is-idle .scr-tools{opacity:0;pointer-events:none}

/* lobi */
.scr-lobby{zoom:var(--z);position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:center;padding:0 28px;min-height:0;overflow:hidden}
.scr-lobby::before{content:"";position:absolute;inset:-10% -5%;background:url(../map/indonesia.svg) center/contain no-repeat;opacity:.09;pointer-events:none}
:where(:root[data-theme=dark]) .scr-lobby::before{opacity:.14}
@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])) .scr-lobby::before{opacity:.14}}
.scr-join{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.scr-join h1{font:800 3.25rem/1.02 var(--f-display);letter-spacing:-.03em;max-width:12ch}
.scr-url{padding:12px 22px;border-radius:16px;background:var(--accent);color:var(--accent-ink);font-size:2.125rem;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere;box-shadow:var(--shadow-pop)}
.scr-join p.muted{font-size:1.125rem;max-width:34ch}
.scr-join p.muted b{color:var(--fg)}
.scr-lobby-teams{position:relative;display:flex;flex-direction:column;gap:16px;min-height:0;max-height:100%;padding:20px 0}
.scr-lobby-teams .lobby-progress p{font-size:1.125rem}
.scr-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.scr-grid .tchip .avatar{width:40px;height:40px;font-size:1.05rem}
.scr-grid .tchip-text b{font-size:1rem}

/* lomba */
.scr-race{display:grid;grid-template-columns:minmax(0,1fr) calc(360px * var(--z));gap:calc(12px * var(--z));min-height:0}
.scr-map{position:relative;min-height:0;border-radius:calc(18px * var(--z));overflow:hidden;border:1px solid var(--line);isolation:isolate}
.scr-map .rmap-svg{cursor:default}
.scr-map .pausebar{zoom:var(--z);top:16px;font-size:1rem;padding:10px 18px}
.scr-side{zoom:calc(var(--z) * .85);display:flex;flex-direction:column;gap:10px;min-height:0}
.scr-box{display:flex;flex-direction:column;min-height:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 12px 8px}
.scr-box h2{display:flex;align-items:center;gap:8px;font-size:1rem;margin:0 4px 10px}
.scr-box h2 .ic{color:var(--accent)}
.scr-rank{flex:1 1 auto}
.scr-rank .rk-btn{padding:6px 10px 6px 6px}
.scr-rank .rk-name{line-height:1.3}
.scr-rank .rk .avatar{width:30px;height:30px;font-size:.85rem}
.scr-rank .ranks{flex:1;min-height:0;overflow:hidden;gap:5px;scroll-behavior:smooth}
.scr-rank .ranks.is-over{mask-image:linear-gradient(#000 calc(100% - 36px),transparent);-webkit-mask-image:linear-gradient(#000 calc(100% - 36px),transparent)}
.scr-rank .ranks.is-over.is-end{mask-image:linear-gradient(transparent,#000 36px);-webkit-mask-image:linear-gradient(transparent,#000 36px)}
.scr .rk-btn{cursor:default}
.scr .rk-btn:active{transform:none}
.scr-rank .ranks:has(> :nth-child(9)) .rk-btn{padding:2px 10px 2px 6px;gap:8px}
.scr-rank .ranks:has(> :nth-child(9)) .rk .avatar{width:26px;height:26px;font-size:.75rem}
.scr-feed{flex:0 0 auto}
.scr-feed .feed{min-height:0;overflow:hidden}
.scr-feed .fi{padding:8px 0}
.scr-feed .fi:nth-child(n+3){opacity:.62}
.scr-feed .fi:nth-child(n+4){display:none}
.scr-feed .feed-empty{padding:10px 0}

/* sorotan: tim finish */
.scr-spot{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none;zoom:var(--z)}
.spot{display:flex;align-items:center;gap:20px;padding:20px 34px 20px 20px;border-radius:24px;background:var(--surface);border:2px solid var(--c);box-shadow:var(--shadow-pop),0 0 0 8px color-mix(in srgb,var(--c) 18%,transparent);
  animation:spotin .55s var(--ease-out) both}
.spot .avatar{width:84px;height:84px;font-size:2.5rem;box-shadow:inset 0 -4px 0 rgb(0 0 0 / .18)}
.spot b{display:block;font:800 2.5rem/1.05 var(--f-display);letter-spacing:-.025em}
.spot div > span{display:flex;align-items:center;gap:8px;margin-top:6px;color:var(--muted);font-weight:700;font-size:1.125rem}
.spot div > span .ic{color:var(--gold,var(--mid))}
.spot.is-leaving{animation:spotout .32s var(--ease-out) both}
@keyframes spotin{from{opacity:0;transform:translateY(12px) scale(.94);filter:blur(6px)}}
@keyframes spotout{to{opacity:0;transform:scale(.97)}}

/* hasil: dua podium berdampingan */
.scr-res{zoom:var(--z);display:flex;flex-direction:column;gap:16px;min-height:0;overflow:hidden}
.scr-res-head{text-align:center;display:flex;flex-direction:column;gap:4px}
.scr-res-head h1{font:800 2.75rem/1.05 var(--f-display);letter-spacing:-.03em}
.scr-res-cols{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.scr-res-col{min-height:0;overflow:hidden;gap:12px;padding:16px 20px 0;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.scr-res-col > h2{display:flex;align-items:center;justify-content:center;gap:8px;font-size:1.25rem}
.scr-res-col > h2 .ic{color:var(--accent)}
.scr-res-col .podium{min-height:270px}
.scr-res-col .res-list{flex:1;min-height:0;overflow:hidden;mask-image:linear-gradient(#000 calc(100% - 40px),transparent);-webkit-mask-image:linear-gradient(#000 calc(100% - 40px),transparent)}

.scr-lost{position:fixed;z-index:70;left:50%;bottom:24px;transform:translateX(-50%);zoom:var(--z);display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;
  background:var(--surface);border:1px solid color-mix(in srgb,var(--hard) 40%,var(--line));box-shadow:var(--shadow-pop);font-weight:600}
.scr-lost .ic{color:var(--hard)}

@media (max-width:1000px){
  .scr-race{grid-template-columns:minmax(0,1fr) 300px}
  .scr-lobby{grid-template-columns:minmax(0,1fr);align-content:start;overflow:auto;gap:24px;padding:12px 4px}
  .scr-join h1{font-size:2.25rem}
  .scr-url{font-size:1.5rem}
  .scr-res-cols{grid-template-columns:minmax(0,1fr);overflow:auto}
}
@media (prefers-reduced-motion:reduce){
  .spot,.spot.is-leaving{animation:none}
}
.scr-map .rmap .road{stroke-width:3px}
.scr-map .rmap .ferry{stroke-width:2.6px}
.scr-map .rmap .edge.live{stroke-width:4px}