:root { --u-svh: 1vh; --u-dvh: 1vh; --u-vh: 1vh; --u-vw: 1vw; }
@supports (height: 1svh) { :root { --u-svh: 1svh; } }
@supports (height: 1dvh) { :root { --u-dvh: 1dvh; } }
:root { --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827;
  --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-300: #93c5fd; --blue-400: #60a5fa; --blue-500: #3b82f6; --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-800: #1e40af;
  --blue-100-rgb: 219, 234, 254; --blue-200-rgb: 191, 219, 254; --blue-400-rgb: 96, 165, 250; --blue-50-rgb: 239, 246, 255; --blue-500-rgb: 59, 130, 246; --blue-600-rgb: 37, 99, 235; --blue-700-rgb: 29, 78, 216; --blue-800-rgb: 30, 64, 175; --gray-100-rgb: 243, 244, 246; --gray-200-rgb: 229, 231, 235; --gray-300-rgb: 209, 213, 219; --gray-400-rgb: 156, 163, 175; --gray-50-rgb: 249, 250, 251; --gray-500-rgb: 107, 114, 128; --gray-600-rgb: 75, 85, 99; --gray-700-rgb: 55, 65, 81; --gray-800-rgb: 31, 41, 55; --gray-900-rgb: 17, 24, 39; }
:root {
  --bg: var(--gray-100); --card: #fff; --ink: var(--gray-800); --muted: var(--gray-500);
  --accent: var(--blue-600); --glow: #ffd36b; --line: var(--gray-200); --online: #22c55e; /* (--online: the green dot of somebody who is there now) */
}
* { box-sizing: border-box; }
:root { accent-color: var(--blue-600); }
:where(:focus-visible) { outline: 3px solid rgba(var(--blue-500-rgb), .55); outline-offset: 2px; }
:where(textarea, input:not([type=checkbox], [type=radio], [type=range], [type=file]), select):where(:focus-visible) { outline: 2px solid var(--blue-500); outline-offset: -2px; }
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font: 18px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1, h2 { margin: 0 0 8px; }
button { font: inherit; border: 0; border-radius: 16px; padding: 14px 18px; min-height: 52px;
  background: var(--accent); color: #fff; cursor: pointer; }
button:disabled { opacity: .5; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.screen { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 8px; }
.ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast { position: fixed; left: 0; right: 0; bottom: calc(28px + env(safe-area-inset-bottom) + var(--toast-up, 0px)); z-index: 70; box-sizing: border-box; width: max-content; max-width: calc(100% - 48px);
  margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px; border-radius: 26px; background: rgba(var(--gray-900-rgb), .92);
  color: #fff; font-weight: 600; font-size: 16px; line-height: 1.3; text-align: center; box-shadow: 0 8px 24px rgba(var(--gray-900-rgb), .25); pointer-events: none;
  animation: toast-in .2s ease-out; }
.toast.toast-over { bottom: calc(var(--toast-b) + var(--toast-up, 0px)); }
.toast.toast-done { padding-left: 12px; }
.toast-tick { flex: none; display: grid; place-items: center; width: 28px; height: 28px; box-sizing: border-box; border: 2px solid #4ade80; border-radius: 50%; color: #4ade80; }
.toast-tick .ico { width: 18px; height: 18px; stroke-width: 2.5; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
.games-head { display: flex; align-items: center; gap: 6px; padding: 6px 2px 2px; }
.games-head h2 { margin: 0; font-size: 26px; color: var(--gray-700); flex: 1; min-width: 0; }
.games-back { flex: none; width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--gray-600); display: flex; align-items: center; justify-content: center; box-shadow: none; }
.games-head.root { padding-left: 4px; }
:root { --oth-x: radial-gradient(circle at 35% 30%, #f07a6e, #c62d22); --oth-o: radial-gradient(circle at 35% 30%, #ffe27a, #e2ac14); }
.arena-body { padding: 4px 0 20px; }
.ar-hero { position: relative; height: 170px; border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, var(--blue-500), var(--blue-800)); }
.ar-hero.ar-pick { height: 214px; }
.ar-hero-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: none; border: 0; border-radius: 0; touch-action: auto; }
.ar-hchips { position: absolute; left: 14px; top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ar-hchips span { background: rgba(var(--gray-900-rgb), .35); color: #fff; font-weight: 800; font-size: 12.5px; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.ar-pick .ar-hchips { left: auto; right: 12px; top: 12px; align-items: flex-end; }
.ar-oarrow { position: absolute; z-index: 1; top: 84px; width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--blue-700); font-weight: 900; font-size: 22px; line-height: 1; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
.ar-oarrow.prev { left: 8px; }
.ar-oarrow.next { left: 146px; }
.ar-oname { position: absolute; left: 0; bottom: 10px; width: 190px; display: flex; flex-direction: column; align-items: center; color: #fff; pointer-events: none; }
.ar-oname b { display: inline-block; background: #fff; color: var(--gray-800); border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 850; }
.ar-oname.lock b { background: var(--gray-800); color: #fff; }
.ar-oname small { display: block; margin-top: 3px; font-size: 12px; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.ar-odots { display: flex; justify-content: center; gap: 5px; margin-top: 5px; }
.ar-odots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.ar-odots i.on { background: #fff; }
.ar-lvt { margin-top: 14px; font-weight: 800; font-size: 15px; color: var(--gray-700); }
.ar-lvs { display: flex; gap: 8px; margin-top: 8px; }
.ar-lv { flex: 1; min-height: 0; padding: 9px 0; border-radius: 14px; border: 2px solid var(--gray-200); background: #fff; color: var(--gray-700); font-weight: 800; font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ar-lv small { font-weight: 600; font-size: 11px; color: var(--gray-500); }
.ar-lv.on { border-color: var(--blue-600); background: var(--blue-50); color: var(--blue-700); }
.ar-isles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ar-isle { display: flex; flex-direction: column; align-items: stretch; padding: 0; min-height: 0; border-radius: 16px; overflow: hidden; background: #fff; border: 2px solid var(--gray-200); color: var(--gray-800); font-weight: 800; font-size: 14px; }
.ar-isle-pic, .ar-isle-pic svg { display: block; width: 100%; height: auto; }
.ar-isle b { display: flex; align-items: center; justify-content: center; gap: 4px; height: 32px; }
.ar-isle.on { border-color: var(--blue-600); box-shadow: 0 0 0 2px var(--blue-600); }
.ar-isle.on b { background: var(--blue-600); color: #fff; }
.ar-isle.on b::after { content: ''; width: 11px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translateY(-2px) rotate(-45deg); margin-left: 4px; }
.ar-isle:disabled { opacity: .55; }
.ar-lv:disabled { opacity: 1; color: var(--gray-400); background: var(--gray-50); }
@media (max-width: 360px) { .ar-lvs { gap: 6px; } .ar-lv { font-size: 13px; padding: 9px 3px; } .ar-lv small { font-size: 10.5px; } }
.ar-go { display: block; width: 100%; margin-top: 12px; border-radius: 16px; padding: 14px 0; font-weight: 850; font-size: 18px; background: var(--blue-600); color: #fff; box-shadow: 0 6px 16px rgba(var(--blue-600-rgb), .35); }
.ar-fam { display: block; margin: 14px auto 0; min-height: 0; padding: 4px 8px; background: none; border: 0; font-weight: 700; font-size: 14px; color: var(--gray-500); }
.ar-nums { margin-top: 12px; background: #fff; border: 1px solid var(--gray-200); border-radius: 18px; overflow: hidden; }
.ar-nums-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.ar-nums-row > div { text-align: center; padding: 10px 4px 8px; border-left: 1px solid var(--gray-100); min-width: 0; }
.ar-nums-row > div:first-child { border-left: 0; }
.ar-nums-row b { display: block; font-size: 20px; font-weight: 850; color: var(--gray-800); line-height: 1.15; }
.ar-nums-row small { font-size: 11.5px; font-weight: 700; color: var(--gray-500); }
.ar-nums-lead { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 0; padding: 10px 14px; border: 0; border-top: 1px solid var(--gray-100); border-radius: 0; background: var(--blue-50); font-weight: 800; color: var(--blue-700); font-size: 14.5px; text-align: left; }
.ar-nums-lead > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-nums-go { flex: none; }
.ar-today { margin-top: 12px; background: #fff; border: 1px solid var(--gray-200); border-radius: 18px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; }
.ar-today-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--blue-50); display: flex; align-items: center; justify-content: center; font-size: 24px; flex: none; }
.ar-today-tx { flex: 1; min-width: 0; }
.ar-today-tx small { display: block; font-size: 12px; font-weight: 800; color: var(--blue-600); letter-spacing: .02em; text-transform: uppercase; }
.ar-today-tx b { display: block; font-size: 16.5px; font-weight: 850; color: var(--gray-800); margin: 1px 0 4px; }
.ar-today-who { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gray-500); font-weight: 600; min-width: 0; }
.ar-today-who > span { min-width: 0; }
.ar-today-who .ab-face { width: 22px; height: 22px; font-size: 11px; border: 2px solid #fff; box-sizing: border-box; margin-left: -8px; }
.ar-today-who .ab-face:first-child { margin-left: 0; }
.ar-today-star { flex: none; text-align: center; font-weight: 850; color: var(--blue-700); font-size: 13px; }
.ar-today-star i { display: block; font-style: normal; font-size: 22px; }
.ar-today.done { border: 2px solid #86efac; background: #f0fdf4; }
.ar-today.done .ar-today-ic { background: #dcfce7; }
.ar-today.done .ar-today-tx small { color: #15803d; }
.ar-bcard { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 0; margin: 0 0 12px; padding: 12px 14px; border: 0; border-radius: 18px; background: var(--blue-600); color: #fff; box-shadow: 0 6px 16px rgba(var(--blue-600-rgb), .3); text-align: start; }
.ar-bcard.off { background: #fff; color: var(--gray-700); border: 1px solid var(--gray-200); box-shadow: none; }
.ar-bic { flex: none; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; }
.ar-bcard.off .ar-bic { background: var(--blue-50); color: var(--blue-600); }
.ar-bic .ico { width: 24px; height: 24px; }
.ar-btx { flex: 1; min-width: 0; }
.ar-btx b { display: block; font-size: 15.5px; font-weight: 850; }
.ar-btx small { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; font-weight: 650; opacity: .95; min-width: 0; }
.ar-bcard.off .ar-btx small { color: var(--gray-500); }
.ar-bfaces { display: flex; flex: none; }
.ar-bfaces .ab-face { width: 24px; height: 24px; font-size: 11px; border: 2px solid #fff; box-sizing: border-box; margin-left: -8px; }
.ar-bfaces .ab-face:first-child { margin-left: 0; }
.ar-bgo { flex: none; background: #fff; color: var(--blue-700); font-weight: 850; font-size: 14px; border-radius: 999px; padding: 8px 16px; }
.ar-bcard.watch .ar-bgo { background: #16a34a; color: #fff; }
.ar-againbox { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: #dcfce7; color: #166534; border-radius: 14px; padding: 8px 8px 8px 10px; text-align: left; }
.ar-againbox .ab-face { width: 28px; height: 28px; font-size: 12px; flex: none; }
.ar-againbox span { flex: 1; min-width: 0; font-size: 14px; }
.ar-againbox b { display: block; font-weight: 850; }
.ar-againbox small { display: block; font-size: 12px; font-weight: 700; color: #15803d; }
.ar-againgo { flex: none; min-height: 0; border: 0; border-radius: 999px; background: #16a34a; color: #fff; font-weight: 850; font-size: 14px; padding: 8px 18px; }
.ar-fam-go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; min-height: 0; border-radius: 16px; padding: 12px 0; font-weight: 850; font-size: 16px; background: #fff; color: var(--blue-700); border: 2px solid var(--blue-600); }
.ar-fam-go .ico { width: 22px; height: 22px; }
.fb-body { padding-top: 4px; }
.fb-head { border-radius: 20px; background: linear-gradient(160deg, var(--blue-500), var(--blue-800)); color: #fff; padding: 16px; display: flex; align-items: center; gap: 12px; }
.fb-hic { flex: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; }
.fb-hic .ico { width: 26px; height: 26px; }
.fb-htx { flex: 1; min-width: 0; }
.fb-htx b { display: block; font-size: 19px; font-weight: 850; }
.fb-htx small { display: block; font-size: 13px; opacity: .9; font-weight: 650; margin-top: 2px; }
.fb-time { flex: none; text-align: center; background: rgba(255, 255, 255, .16); border-radius: 14px; padding: 6px 10px; max-width: 110px; }
.fb-time b { display: block; font-size: 20px; }
.fb-time small { display: block; font-size: 11px; font-weight: 700; }
.fb-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.fb-mode { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 8px; border-radius: 999px; background: #fff; border: 1.5px solid var(--gray-200); color: var(--gray-800); font-weight: 800; font-size: 14px; white-space: nowrap; min-height: 0; min-width: 0; }
.fb-mode .ico { width: 19px; height: 19px; color: var(--gray-500); flex: none; }
.fb-mode.on { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.fb-mode.on .ico { color: #fff; }
.fb-mode:disabled { opacity: .55; }
@media (max-width: 379px) { .fb-mode { font-size: 13px; padding: 0 6px; gap: 4px; } .fb-mode .ico { width: 16px; height: 16px; } }
@media (max-width: 345px) { .fb-mode .ico { display: none; } }
.fb-modenote { margin: 8px 2px 0; font-size: 13px; font-weight: 600; color: var(--gray-600); text-align: center; }
.fb-team { margin-top: 10px; background: #fff; border-radius: 18px; overflow: hidden; border: 2px solid var(--tc); --tc: var(--blue-600); }
.fb-team.team1 { --tc: #16a34a; }
.fb-thead { display: flex; justify-content: space-between; padding: 7px 14px; background: var(--tc); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.fb-team .fb-row:nth-child(2) { border-top: 0; }
.fb-swap { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--gray-300); background: #fff; color: var(--gray-600); display: grid; place-items: center; padding: 0; min-height: 0; flex: none; }
.fb-swap .ico { width: 18px; height: 18px; }
.fb-list { margin-top: 12px; background: #fff; border: 1px solid var(--gray-200); border-radius: 18px; overflow: hidden; }
.fb-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--gray-100); }
.fb-row:first-child { border-top: 0; }
.fb-row.me { background: var(--blue-50); }
.fb-who { flex: 1; min-width: 0; }
.fb-who b { display: block; font-size: 15px; color: var(--gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-who small { font-size: 12.5px; color: var(--gray-500); }
.fb-pill { flex: none; font-size: 12.5px; font-weight: 800; border-radius: 999px; padding: 4px 10px; }
.fb-pill.in { background: #dcfce7; color: #166534; }
.fb-pill.wait { background: var(--gray-100); color: var(--gray-500); }
.fb-robots { margin-top: 10px; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--gray-600); }
.fb-level { margin-top: 12px; text-align: center; font-weight: 800; font-size: 14.5px; color: var(--gray-700); }
.ar-go:disabled { background: var(--gray-300); box-shadow: none; opacity: 1; }
.fb-leave { display: block; margin: 8px auto 0; min-height: 0; background: none; border: 0; box-shadow: none; color: var(--gray-500); font-weight: 750; font-size: 15px; }
.fb-note { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--gray-500); }
.ar-score { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 8px; background: var(--blue-50); border-radius: 14px; padding: 7px 12px; font-weight: 800; font-size: 14px; color: var(--blue-800); }
.ar-score .ab-face { width: 24px; height: 24px; font-size: 11px; }
.ar-score big { font-size: 20px; font-weight: 900; color: var(--blue-700); letter-spacing: .02em; }
.ar-score small { color: var(--gray-500); font-weight: 700; font-size: 12px; }
.ar-famline { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; font-size: 13px; color: var(--gray-600); background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 12px; padding: 6px 10px; }
.ar-famline .me b { color: var(--blue-700); }
.ar-howt { margin-top: 14px; font-weight: 800; font-size: 15px; color: var(--gray-700); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ar-howt small { font-weight: 700; font-size: 12.5px; color: var(--gray-400); }
.ar-how { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.ar-howtip { min-height: 0; background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; padding: 9px 2px 7px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--gray-600); }
.ar-howtip i { display: block; font-style: normal; font-size: 22px; margin-bottom: 3px; }
.ab-face { width: 40px; height: 40px; border-radius: 50%; flex: none; border: 0; box-shadow: none; object-fit: cover; }
.ab-face.big { width: 56px; height: 56px; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .15); }
.ab-initial { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 850; font-size: 17px; }
.ab-initial.big { font-size: 22px; }
.ar-later { display: inline-block; font-size: 11px; font-weight: 800; background: var(--gray-200); color: var(--gray-600); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 2px; }
.ar-play { position: fixed; inset: 0; z-index: 95; overflow: hidden; background: var(--blue-500); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; color: #fff;
  --il: env(safe-area-inset-left, 0px); --ir: env(safe-area-inset-right, 0px); --it: env(safe-area-inset-top, 0px); --ib: env(safe-area-inset-bottom, 0px); }
.ar-play.ar-turned { inset: auto; top: 0; left: 0; width: calc(100 * var(--u-dvh)); height: calc(100 * var(--u-vw)); transform-origin: 0 0; transform: translateX(calc(100 * var(--u-vw))) rotate(90deg);
  --il: env(safe-area-inset-top, 0px); --ir: env(safe-area-inset-bottom, 0px); --it: env(safe-area-inset-right, 0px); --ib: env(safe-area-inset-left, 0px); }
.ar-play.ar-zoomed { inset: auto; left: var(--ar-x); top: var(--ar-y); width: var(--ar-w); height: var(--ar-h); }
.ar-play.ar-turned.ar-zoomed { left: var(--ar-x); top: var(--ar-y); width: var(--ar-h); height: var(--ar-w); transform: translateX(var(--ar-w)) rotate(90deg); }
.ar-probe { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0 0 var(--ib) var(--il); visibility: hidden; pointer-events: none; }
.ar-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: none; border: 0; border-radius: 0; }
.ar-pause { position: absolute; z-index: 3; left: calc(12px + var(--il)); top: calc(10px + var(--it)); width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%; background: rgba(var(--gray-900-rgb), .72); color: #fff; font-size: 15px; font-weight: 900; }
.ar-health { position: absolute; z-index: 3; left: calc(58px + var(--il)); top: calc(10px + var(--it)); width: 150px; box-sizing: border-box; background: rgba(var(--gray-900-rgb), .72); border-radius: 14px; padding: 6px 10px; font-size: 12px; font-weight: 700; pointer-events: none; }
.ar-hrow { display: flex; align-items: center; gap: 5px; line-height: 1.2; }
.ar-bar { height: 7px; border-radius: 5px; background: rgba(255, 255, 255, .22); overflow: hidden; margin: 3px 0 5px; }
.ar-bar:last-child { margin-bottom: 0; }
.ar-bar i { display: block; height: 100%; width: 100%; border-radius: 5px; background: #22c55e; transition: width .15s; }
.ar-bar.sh i { background: var(--blue-400); }
.ar-famcard { position: absolute; z-index: 3; left: calc(58px + var(--il)); top: calc(84px + var(--it)); display: flex; gap: 10px; background: rgba(var(--gray-900-rgb), .72); border-radius: 14px; padding: 6px 12px 8px 9px; font-size: 12px; font-weight: 800; white-space: nowrap; pointer-events: none; }
.ar-famcard:empty { display: none; }
.ar-fg { display: flex; flex-direction: column; gap: 4px; }
.ar-fg + .ar-fg { border-left: 1px solid rgba(255, 255, 255, .2); padding-left: 10px; }
.ar-flab { font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; line-height: 1.2; color: #86efac; }
.ar-fg.out .ar-flab { color: var(--gray-300); }
.ar-fcols { display: flex; gap: 10px; }
.ar-fcol { display: flex; flex-direction: column; gap: 4px; }
.ar-fp { position: relative; display: flex; align-items: center; gap: 6px; }
.ar-fp b { font-weight: 800; max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
.ar-fp .ab-face { width: 22px; height: 22px; font-size: 11px; border: 2px solid #22c55e; box-sizing: border-box; }
.ar-fp.out { color: var(--gray-300); }
.ar-fp.out .ab-face { filter: grayscale(1); opacity: .55; border-color: var(--gray-400); }
.ar-fp em { position: absolute; left: 13px; top: -6px; font-style: normal; font-size: 11px; }
.ar-fhelp { font-size: 10.5px; font-weight: 800; color: #86efac; }
.ar-fp.team0 .ab-face { border-color: var(--blue-500); }
.ar-fp.team1 .ab-face { border-color: #22c55e; }
.ar-fp.out.team0 .ab-face, .ar-fp.out.team1 .ab-face { border-color: var(--gray-400); }
.ar-fhouse { font-size: 10.5px; font-weight: 800; color: var(--blue-300); max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.ar-fp.out .ar-fhouse { color: var(--gray-400); }
.ar-play.ar-watchonly :is(.ar-zone, .ar-joy, .ar-btn, .ar-health, .ar-pause, .ar-pill, .ar-hint, .ar-gun, .ar-kart, .ar-place, .ar-warn) { display: none; }
.ar-play.ar-watchonly .ar-famcard { left: calc(12px + var(--il)); top: calc(58px + var(--it)); }
.ar-play.ar-watchonly .ar-tap { cursor: default; }
.ar-watchbar { position: absolute; z-index: 4; left: 50%; top: calc(10px + var(--it)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: rgba(var(--gray-900-rgb), .72); border-radius: 999px; padding: 4px 6px; font-weight: 800; font-size: 14px; white-space: nowrap; }
.ar-watchbar b { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.ar-wbtn { width: 30px; height: 30px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; }
.ar-wbtn svg { width: 18px; height: 18px; }
.ar-wface .ab-face { width: 24px; height: 24px; font-size: 12px; border: 2px solid #22c55e; box-sizing: border-box; }
.ar-wleave { position: absolute; z-index: 4; left: calc(12px + var(--il)); top: calc(10px + var(--it)); display: flex; align-items: center; gap: 6px; height: 38px; min-height: 0; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: rgba(var(--gray-900-rgb), .72); color: #fff; font-weight: 800; font-size: 13px; }
.ar-wleave svg { width: 16px; height: 16px; }
.ar-wnote { position: absolute; z-index: 3; left: 50%; bottom: calc(18px + var(--ib)); transform: translateX(-50%); background: rgba(var(--gray-900-rgb), .72); border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: 13.5px; white-space: nowrap; pointer-events: none; }
.ar-play.ar-landing :is(.ar-watchbar, .ar-wnote) { display: none; }
.ar-pill { position: absolute; z-index: 3; left: 50%; top: calc(10px + var(--it)); transform: translateX(-50%); display: flex; align-items: center; gap: 7px; background: rgba(var(--gray-900-rgb), .72); border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: 13px; white-space: nowrap; pointer-events: none; }
.ar-pill i { font-style: normal; opacity: .6; }
.ar-pill .ar-glow { display: inline-block; color: #fde047; text-shadow: 0 0 10px rgba(250, 204, 21, .9); animation: ar-glow .45s ease-out; }
@keyframes ar-glow { from { transform: scale(1.35); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ar-pill .ar-glow { animation: none; } }
.ar-mini { position: absolute; z-index: 3; right: calc(12px + var(--ir)); top: calc(10px + var(--it)); width: var(--ar-mini, 140px); height: var(--ar-mini, 140px); min-height: 0; padding: 0; border: 3px solid rgba(255, 255, 255, .9); border-radius: 16px; background: #4f9a58; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); overflow: hidden; touch-action: none; }
.ar-mini canvas, .ar-bigpanel canvas { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; background: none; touch-action: none; }
.ar-closes { position: absolute; z-index: 3; right: calc(12px + var(--ir)); top: calc(var(--ar-mini, 140px) + 24px + var(--it)); width: calc(var(--ar-mini, 140px) + 6px); text-align: center; background: rgba(var(--gray-900-rgb), .72); border-radius: 999px; padding: 4px 0; font-weight: 800; font-size: 11.5px; pointer-events: none; }
.ar-bigmap { position: absolute; z-index: 5; inset: 0; display: none; background: rgba(var(--gray-900-rgb), .42); pointer-events: none; }
.ar-bigmap.show { display: block; }
.ar-bigpanel { position: absolute; left: 50%; top: calc(6px + var(--it)); transform: translateX(-50%); background: #fff; color: var(--gray-800); border-radius: 18px; padding: 7px 9px 5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); text-align: center; pointer-events: auto; touch-action: none; cursor: pointer; }
.ar-bigpanel b { display: block; font-size: 14px; font-weight: 800; line-height: 1.2; }
.ar-bigpanel canvas { width: auto; height: auto; margin: 5px 0 3px; border-radius: 14px; }
.ar-bigpanel small { display: block; font-size: 11px; font-weight: 700; color: var(--gray-500); line-height: 1.2; }
.ar-zone { position: absolute; z-index: 2; left: 0; bottom: 0; width: 46%; height: 72%; }
.ar-joy { position: absolute; z-index: 2; left: 0; top: 0; width: 112px; height: 112px; box-sizing: border-box; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .75); background: rgba(var(--gray-900-rgb), .28); pointer-events: none; opacity: .75; }
.ar-joy.on { opacity: 1; }
.ar-joy i { position: absolute; left: 31px; top: 31px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
.ar-btn { position: absolute; z-index: 3; min-height: 0; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 5px 14px rgba(0, 0, 0, .35); color: #fff; overflow: hidden; touch-action: none; }
.ar-btn span { position: relative; z-index: 1; line-height: 1; }
.ar-btn.fire { right: calc(26px + var(--ir)); bottom: calc(24px + var(--ib)); width: 86px; height: 86px; background: radial-gradient(circle at 35% 30%, #fb7185, #e11d48 60%, #be123c); font-size: 34px; }
.ar-btn.fire.down { transform: scale(.93); filter: brightness(1.12); }
.ar-btn.fire .ar-gunart { display: block; width: 68px; height: auto; margin-left: 4px; pointer-events: none; }
.ar-gun { position: absolute; z-index: 3; right: calc(20px + var(--ir)); bottom: calc(116px + var(--ib)); display: none; background: rgba(var(--gray-900-rgb), .78); border-radius: 999px; padding: 4px 10px; font-weight: 800; font-size: 12.5px; white-space: nowrap; pointer-events: none; }
.ar-gun.show { display: block; }
.ar-play.ar-landing .ar-gun, .ar-play.ar-falling .ar-gun { display: none; }
.ar-kart { position: absolute; z-index: 3; right: calc(178px + var(--ir)); bottom: calc(98px + var(--ib)); display: none; align-items: center; gap: 4px; min-height: 0; padding: 4px 16px 4px 6px; border-radius: 999px; border: 3px solid rgba(255, 255, 255, .9); background: #16a34a; color: #fff; font-weight: 900; font-size: 16px; box-shadow: 0 5px 14px rgba(0, 0, 0, .35); touch-action: none; animation: arkart .9s ease-in-out infinite alternate; }
.ar-kart.show { display: flex; }
.ar-kart.used { transform: scale(.93); }
.ar-kart .ar-kartart { display: block; width: 46px; height: auto; pointer-events: none; }
.ar-play.ar-driving .ar-kart { background: var(--blue-600); animation: none; }
.ar-play.ar-driving :is(.ar-btn.dash, .ar-btn.wall) { display: none; }
@keyframes arkart { to { transform: scale(1.06); } }
.ar-btn.dash { right: calc(124px + var(--ir)); bottom: calc(20px + var(--ib)); width: 56px; height: 56px; background: var(--blue-600); font-size: 24px; }
.ar-btn.wall { right: calc(110px + var(--ir)); bottom: calc(94px + var(--ib)); width: 56px; height: 56px; background: var(--gray-600); font-size: 24px; }
.ar-btn.wait::after { content: ''; position: absolute; inset: 0; background: conic-gradient(rgba(var(--gray-900-rgb), .62) calc(var(--cd, 0) * 360deg), transparent 0); }
.ar-btn.used { transform: scale(.92); }
.ar-count { position: absolute; z-index: 4; inset: 0; display: none; place-items: center; font-size: 84px; font-weight: 900; text-shadow: 0 4px 18px rgba(0, 0, 0, .45); pointer-events: none; }
.ar-count.show { display: grid; }
.ar-hint { position: absolute; z-index: 3; left: 50%; bottom: calc(26px + var(--ib)); transform: translateX(-50%); background: rgba(var(--gray-900-rgb), .72); border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: 14px; white-space: nowrap; pointer-events: none; transition: opacity .6s; }
.ar-play.ar-nohint .ar-hint { opacity: 0; }
.ar-warn { position: absolute; z-index: 3; left: 50%; top: calc(56px + var(--it)); transform: translateX(-50%); display: none; background: rgba(147, 51, 234, .9); border-radius: 999px; padding: 6px 14px; font-weight: 900; font-size: 14px; white-space: nowrap; pointer-events: none; animation: arpulse .8s infinite alternate; }
.ar-warn.show { display: block; }
.ar-tap { position: absolute; z-index: 4; inset: 0; display: none; cursor: crosshair; }
.ar-land { position: absolute; z-index: 5; left: 50%; top: calc(12px + var(--it)); transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 6px; background: rgba(var(--gray-900-rgb), .72); border-radius: 18px; padding: 8px 16px 9px; font-size: 15px; white-space: nowrap; pointer-events: none; }
.ar-landbar { display: block; width: 150px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.ar-landbar i { display: block; height: 100%; width: 100%; background: #fff; border-radius: 3px; }
.ar-play.ar-landing .ar-tap { display: block; }
.ar-play.ar-landing .ar-land { display: flex; }
.ar-play.ar-landing :is(.ar-zone, .ar-joy, .ar-health, .ar-famcard, .ar-pill, .ar-mini, .ar-closes, .ar-btn, .ar-hint, .ar-warn, .ar-place) { display: none; }
.ar-chute { position: absolute; z-index: 3; left: 50%; bottom: calc(22px + var(--ib)); transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 6px; background: rgba(var(--gray-900-rgb), .72); border-radius: 18px; padding: 8px 16px 9px; font-size: 15px; white-space: nowrap; pointer-events: none; }
.ar-play.ar-falling .ar-chute { display: flex; }
.ar-play.ar-falling :is(.ar-hint, .ar-btn.dash, .ar-btn.wall) { display: none; }
.ar-play.ar-falling .ar-btn.fire { opacity: .45; }
.ar-place { position: absolute; z-index: 3; left: 50%; top: calc(52px + var(--it)); transform: translateX(-50%); background: rgba(var(--gray-900-rgb), .72); border-radius: 999px; padding: 6px 14px; font-weight: 900; font-size: 15px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .4s; }
.ar-place.show { opacity: 1; }
@keyframes arpulse { to { transform: translateX(-50%) scale(1.06); } }
.ar-ouch { position: absolute; z-index: 1; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(239, 68, 68, .55)); }
.ar-end { position: absolute; z-index: 6; inset: 0; display: none; place-items: center; background: rgba(var(--gray-900-rgb), .45); padding: calc(10px + var(--it)) calc(12px + var(--ir)) calc(10px + var(--ib)) calc(12px + var(--il)); }
.ar-end.show { display: grid; }
.ar-card { width: min(610px, 100%); max-height: 100%; overflow: auto; box-sizing: border-box; background: #fff; color: var(--gray-800); border-radius: 26px; padding: 16px 22px 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.ar-card.ar-small { width: min(300px, 100%); display: flex; flex-direction: column; gap: 12px; text-align: center; padding: 20px; }
.ar-ctop { display: flex; align-items: center; gap: 12px; }
.ar-cbig { font-size: 40px; line-height: 1; }
.ar-ctitle { display: block; font-size: 24px; font-weight: 900; line-height: 1.1; }
.ar-csub { color: var(--gray-500); font-size: 14px; margin-top: 2px; }
.ar-cmid { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.ar-face { position: relative; flex: none; width: 104px; height: 104px; border-radius: 20px; background: var(--blue-50); display: grid; place-items: center; }
.ar-card .ar-face > :first-child { width: 58px; height: 58px; margin: 0; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--blue-600), 0 6px 14px rgba(0, 0, 0, .25); }
.ar-card .ar-face > span:first-child { display: grid; place-items: center; background: linear-gradient(160deg, var(--blue-300), var(--blue-600)); color: #fff; font-weight: 900; font-size: 24px; }
.ar-face.won > :first-child { margin-top: 18px; }
.ar-face.out > :first-child { filter: grayscale(.7); opacity: .8; }
.ar-face i { position: absolute; font-style: normal; line-height: 1; }
.ar-face.won i { left: 50%; top: 6px; transform: translateX(-50%); font-size: 26px; }
.ar-face.out i { right: 8px; top: 6px; font-size: 22px; }
.ar-cright { flex: 1; min-width: 0; }
.ar-stats { display: flex; gap: 8px; }
.ar-stats div { flex: 1; text-align: center; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 14px; padding: 8px 0; font-size: 12.5px; color: var(--gray-500); }
.ar-stats b { display: block; font-size: 19px; color: var(--gray-800); }
.ar-open { margin-top: 10px; background: var(--blue-50); color: var(--blue-700); border-radius: 12px; padding: 8px; font-weight: 800; font-size: 14px; text-align: center; }
.ar-open.ar-todayline { background: #dcfce7; color: #166534; }
.ar-tip { margin-top: 10px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 12px; padding: 8px 10px; font-size: 13.5px; color: var(--gray-600); }
.ar-cbtns { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.ar-card.ar-small .ar-cbtns { flex-direction: column; align-items: stretch; margin-top: 0; }
.ar-cbtn { min-height: 0; border-radius: 16px; padding: 12px 10px; font-weight: 850; font-size: 16px; white-space: nowrap; }
.ar-cbtn.blue { flex: 1.25; background: var(--blue-600); color: #fff; box-shadow: 0 6px 16px rgba(var(--blue-600-rgb), .35); }
.ar-cbtn.line { flex: 1; background: #fff; color: var(--gray-700); border: 2px solid var(--gray-200); }
.ar-cbtn.text { flex: none; width: 76px; background: none; color: var(--gray-500); font-weight: 700; }
.ar-card.ar-small .ar-cbtn.text { width: auto; }
@media (max-height: 340px) { .ar-face { width: 84px; height: 84px; } .ar-cmid { margin-top: 8px; } .ar-cbtns { margin-top: 10px; } .ar-cbtn { padding: 10px; } }
@media (prefers-reduced-motion: reduce) { .ar-warn, .ar-kart { animation: none; } .ar-bar i { transition: none; } }
.toast.toast-with-undo { gap: 14px; padding: 8px 8px 8px 20px; }
.toast-undo { pointer-events: auto; flex: none; min-height: 0; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #4ade80; font-size: 16px; font-weight: 700; }
@media (min-width: 700px) and (min-height: 600px) { .fb-row .ab-face { width: 48px; height: 48px; font-size: 20px; } .fb-who b { font-size: 17px; } .sheet > *, .toast, .unwrap-stage, .prof-head, .draw-tray, .draw-modes, .watch-sheet, .mm-bar, .mm-times { max-width: 728px; } .games-head h2 { font-size: 30px; } }