/* Plonk — cozy, funky geography. */
:root {
  --bg: #1d1240;
  --bg-2: #261656;
  --bg-3: #34207a;
  --panel: #2a1a5e;
  --panel-2: #33216f;
  --panel-3: #3d2a85;
  --line: rgba(255, 255, 255, 0.09);
  --line-hi: rgba(255, 255, 255, 0.18);
  --text: #fff7ec;
  --muted: #c3b5f0;
  --faint: #8d7cc8;
  --yellow: #ffd23f;
  --yellow-d: #d9a400;
  --mint: #3ee6a8;
  --mint-d: #1fb07c;
  --pink: #ff5c8a;
  --pink-d: #d43566;
  --sky: #4cc9f0;
  --orange: #ff9f43;
  --violet: #b388ff;
  --accent: var(--yellow);
  --accent-d: var(--yellow-d);
  --accent-rgb: 255, 210, 63;
  --good: #3ee6a8;
  --bad: #ff5c8a;
  --radius: 22px;
  --radius-sm: 14px;
  --display: 'Bricolage Grotesque', 'Nunito', system-ui, sans-serif;
  --font: 'Nunito', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --t: 1;
  color-scheme: dark;
}
:root[data-theme='sunset'] { --bg: #2a1030; --bg-2: #3a1540; --bg-3: #57204f; --panel: #3d1745; --panel-2: #4a1d52; --panel-3: #5a2563; --muted: #f0b8d4; --faint: #b97aa2; --accent: #ff9f43; --accent-d: #d0701a; --accent-rgb: 255, 159, 67; }
:root[data-theme='ocean'] { --bg: #0b1f3a; --bg-2: #0f2a4d; --bg-3: #154070; --panel: #13325a; --panel-2: #183c69; --panel-3: #1e4a80; --muted: #a9cdef; --faint: #6f97c2; --accent: #4cc9f0; --accent-d: #1f95bd; --accent-rgb: 76, 201, 240; }
:root[data-theme='forest'] { --bg: #102a22; --bg-2: #15362c; --bg-3: #1d4a3b; --panel: #183f33; --panel-2: #1d4a3c; --panel-3: #245847; --muted: #afe3c8; --faint: #6ea88b; --accent: #3ee6a8; --accent-d: #1fb07c; --accent-rgb: 62, 230, 168; }
:root[data-theme='candy'] { --bg: #3a1236; --bg-2: #4a1745; --bg-3: #651f5c; --panel: #511a4b; --panel-2: #5e1f57; --panel-3: #6e2666; --muted: #ffc3ea; --faint: #c47cb0; --accent: #ff8fd0; --accent-d: #d65aa6; --accent-rgb: 255, 143, 208; }
:root[data-theme='night'] { --bg: #0d1024; --bg-2: #141a36; --bg-3: #1d2550; --panel: #171e40; --panel-2: #1d264f; --panel-3: #253061; --muted: #b4c0f0; --faint: #7380b8; --accent: #b388ff; --accent-d: #8455d6; --accent-rgb: 179, 136, 255; }
:root[data-motion='reduced'] { --t: 0; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15.5px; font-weight: 600;
  -webkit-font-smoothing: antialiased; overflow: hidden; transition: background-color 0.6s var(--ease); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
img { -webkit-user-drag: none; }
::selection { background: rgba(var(--accent-rgb), 0.4); color: #1d1240; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
.ico { width: 18px; height: 18px; flex: none; vertical-align: -3px; }

/* ------------------------------------------------------------ backdrop */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(120% 90% at 10% 0%, var(--bg-3), transparent 55%), radial-gradient(90% 80% at 100% 100%, var(--bg-2), transparent 60%), var(--bg); }
.backdrop .topo { position: absolute; inset: -10%; opacity: 0.09; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M-20 80c80-40 160 30 240 0s160-60 240-20 160 40 180 20'/%3E%3Cpath d='M-20 130c90-40 170 40 250 10s150-70 240-30 150 50 170 30'/%3E%3Cpath d='M-20 180c100-50 180 50 260 20s140-80 230-40 150 60 160 40'/%3E%3Cpath d='M120 300c40-60 120-70 170-30s40 110-20 130-170-20-150-100z'/%3E%3Cpath d='M150 305c30-40 90-48 125-20s28 80-15 92-125-14-110-72z'/%3E%3Cpath d='M180 310c20-24 60-30 82-12s18 50-10 58-82-10-72-46z'/%3E%3Cpath d='M-20 430c80-30 150 30 230 10s170-60 250-30 120 40 160 20'/%3E%3Cpath d='M-20 480c90-30 160 40 240 20s170-70 250-40 110 50 150 30'/%3E%3Cpath d='M-20 530c100-40 170 50 250 30s160-80 240-50 110 60 150 40'/%3E%3Cpath d='M420 200c30-30 90-30 110 0s0 80-40 85-90-45-70-85z'/%3E%3Cpath d='M440 210c18-18 55-18 68 0s0 50-25 52-55-28-43-52z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 600px 600px; animation: topo 120s linear infinite; }
@keyframes topo { to { background-position: 600px 600px; } }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.45; animation: blob 26s ease-in-out infinite alternate; }
.blob.b1 { width: 520px; height: 520px; background: var(--pink); left: -160px; top: 20%; opacity: 0.18; }
.blob.b2 { width: 600px; height: 600px; background: var(--accent); right: -200px; top: -200px; opacity: 0.12; animation-delay: -8s; }
.blob.b3 { width: 460px; height: 460px; background: var(--mint); right: 10%; bottom: -220px; opacity: 0.14; animation-delay: -15s; }
@keyframes blob { 50% { transform: translate(60px, -40px) scale(1.1); } 100% { transform: translate(-40px, 50px) scale(0.95); } }
:root[data-motion='reduced'] .blob, :root[data-motion='reduced'] .topo { animation: none; }

/* ------------------------------------------------------------ shell */
#app { position: relative; z-index: 1; height: 100%; }
.topbar { position: absolute; z-index: 30; top: 0; left: 0; right: 0; height: 74px; display: flex; align-items: center; gap: 16px; padding: 0 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg) 60%, transparent) 75%, transparent);
  transition: transform 0.5s var(--ease), opacity 0.4s; }
.topbar.hidden { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.logo { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.logo .pinmark { width: 34px; height: 40px; position: relative; }
.logo .pinmark svg { width: 100%; height: 100%; overflow: visible; }
.logo:hover .pinmark svg { animation: plonk 0.8s var(--bounce); }
@keyframes plonk { 0% { transform: translateY(0); } 30% { transform: translateY(-14px) rotate(-8deg); } 60% { transform: translateY(2px) scaleY(0.88); } 100% { transform: none; } }
.logo .word { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -0.03em; }
.logo .word span { color: var(--accent); }
.nav { display: flex; gap: 4px; margin-left: 14px; padding: 5px; border-radius: 18px; background: rgba(0, 0, 0, 0.18); border: 1px solid var(--line); position: relative; }
.nav a { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 13px; color: var(--muted); font-weight: 800; font-size: 14.5px; transition: color 0.25s; }
.nav a:hover { color: var(--text); }
.nav a.active { color: #1d1240; }
.nav a .ico { width: 16px; height: 16px; }
.nav-pill { position: absolute; z-index: 0; top: 5px; bottom: 5px; border-radius: 13px; background: var(--accent); box-shadow: 0 3px 0 var(--accent-d);
  transition: left 0.5s var(--spring), width 0.5s var(--spring), opacity 0.3s; }
.nav .dot { position: absolute; top: 4px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 2px var(--bg); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.coins { display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line); font-weight: 900; cursor: pointer; }
.coins .c { width: 24px; height: 24px; }
.coins.bump { animation: bump 0.6s var(--spring); }
@keyframes bump { 40% { transform: scale(1.18); } }
.icon-btn { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--line); color: var(--muted); cursor: pointer;
  transition: transform 0.25s var(--spring), background 0.2s, color 0.2s; }
.icon-btn:hover { transform: translateY(-2px) rotate(-3deg); background: var(--panel-2); color: var(--text); }
.icon-btn:active { transform: scale(0.94); }
.me-chip { display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line); cursor: pointer; transition: background 0.2s; }
.me-chip:hover { background: var(--panel-2); }
.me-chip .nm { font-weight: 900; font-size: 14px; line-height: 1.1; }
.me-chip .lv { font-size: 11px; color: var(--accent); font-weight: 900; }

main#view { position: absolute; inset: 0; }
.screen { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 86px 28px 70px; }
.screen.full { padding: 0; overflow: hidden; }
.screen { scrollbar-gutter: stable; overscroll-behavior: contain; }
/* the page content moves, not the scroll container, so the scrollbar never slides out of place */
.screen-enter { animation: scrFade calc(0.45s * var(--t) + 0.01s) var(--ease) both; }
.screen-enter > * { animation: screenIn calc(0.6s * var(--t) + 0.01s) var(--ease) both; }
@keyframes scrFade { from { opacity: 0; } }
.screen-leave { animation: scrOut calc(0.3s * var(--t) + 0.01s) var(--ease) both; pointer-events: none; overflow: hidden; z-index: 0; }
@keyframes scrOut { to { opacity: 0; } }
@keyframes screenIn { from { transform: translateY(26px) scale(0.985); } }
@keyframes screenOut { to { opacity: 0; transform: translateY(-14px) scale(0.99); } }
.wrap { max-width: 1260px; margin: 0 auto; }

.rise { animation: rise calc(0.7s * var(--t) + 0.01s) var(--spring) both; animation-delay: calc(var(--i, 0) * 55ms * var(--t)); }
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(0.97); } }
.pop { animation: pop calc(0.55s * var(--t) + 0.01s) var(--spring) both; animation-delay: calc(var(--i, 0) * 55ms * var(--t)); }
@keyframes pop { from { opacity: 0; transform: scale(0.6); } }
.fade { animation: fadeIn calc(0.5s * var(--t) + 0.01s) var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms * var(--t)); }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
.wiggle:hover { animation: wiggle 0.5s var(--ease); }
@keyframes wiggle { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }

/* ------------------------------------------------------------ type */
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; }
.display { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; }
.display em { font-style: normal; color: var(--accent); position: relative; white-space: nowrap; }
.display em::after { content: ''; position: absolute; left: -2%; right: -2%; bottom: 0.06em; height: 0.22em; background: var(--pink); opacity: 0.55; border-radius: 6px; z-index: -1; transform: rotate(-1.5deg); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: var(--mono); }
.num { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; }
.section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 40px 0 18px; }
.section-title h2 { font-size: 28px; }
.section-title .eyebrow { margin-bottom: 6px; }
.page-title { font-size: clamp(38px, 5vw, 58px); margin-top: 6px; }

/* ------------------------------------------------------------ buttons */
.btn { --c: var(--panel-3); --d: color-mix(in srgb, var(--panel-3) 60%, black); --tc: var(--text);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 22px; border: 0; border-radius: 16px;
  background: var(--c); color: var(--tc); font-weight: 900; font-size: 15.5px; cursor: pointer; user-select: none; white-space: nowrap;
  box-shadow: 0 5px 0 var(--d), 0 10px 22px -10px rgba(0, 0, 0, 0.6); transform: translateY(0);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.2s, background 0.2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--d), 0 14px 26px -10px rgba(0, 0, 0, 0.6); filter: brightness(1.06); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--d), 0 4px 10px -6px rgba(0, 0, 0, 0.6); }
.btn[disabled] { opacity: 0.5; pointer-events: none; filter: grayscale(0.4); }
.btn.primary { --c: var(--accent); --d: var(--accent-d); --tc: #1d1240; }
.btn.mint { --c: var(--mint); --d: var(--mint-d); --tc: #0f2a22; }
.btn.pink { --c: var(--pink); --d: var(--pink-d); --tc: #fff; }
.btn.ghost { --c: rgba(255, 255, 255, 0.07); --d: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1.5px var(--line-hi), 0 4px 0 rgba(0, 0, 0, 0.25); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--line-hi), 0 6px 0 rgba(0, 0, 0, 0.25); }
.btn.big { padding: 17px 32px; font-size: 18px; border-radius: 20px; }
.btn.sm { padding: 8px 14px; font-size: 13.5px; border-radius: 12px; box-shadow: 0 3px 0 var(--d); }
.btn.sm:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--d); }
.btn kbd { font-family: var(--mono); font-size: 11px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.15); }
.btn .shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.btn .shine::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); animation: shine 3.4s ease-in-out infinite; }
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }

/* ------------------------------------------------------------ surfaces */
.card { position: relative; background: var(--panel); border-radius: var(--radius); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22), inset 0 0 0 1px var(--line); }
.card.pad { padding: 22px; }
.card.hover { transition: transform 0.35s var(--spring), box-shadow 0.3s; cursor: pointer; }
.card.hover:hover { transform: translateY(-5px) rotate(-0.4deg); box-shadow: 0 11px 0 rgba(0, 0, 0, 0.22), inset 0 0 0 2px rgba(var(--accent-rgb), 0.55); }
.card.hover:active { transform: translateY(1px); }
.grid { display: grid; gap: 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 900;
  background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }
.chip.dim { background: rgba(255, 255, 255, 0.07); color: var(--muted); }
.chip.mint { background: rgba(62, 230, 168, 0.15); color: var(--mint); }
.chip.pink { background: rgba(255, 92, 138, 0.16); color: var(--pink); }
.chip .ico { width: 14px; height: 14px; }
.divider { height: 2px; background: var(--line); margin: 18px 0; border-radius: 2px; }
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.empty { padding: 38px; text-align: center; color: var(--muted); display: grid; justify-items: center; gap: 12px; }
.empty .big-emoji { font-size: 48px; animation: floaty 3s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-8px) rotate(4deg); } }

/* ------------------------------------------------------------ forms */
.field { display: grid; gap: 8px; }
.field > label, .label { font-size: 12.5px; font-weight: 900; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.input { width: 100%; padding: 13px 15px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); border: 2px solid transparent; outline: none; font-weight: 700;
  transition: border-color 0.2s, background 0.2s; }
.input:focus { border-color: var(--accent); background: rgba(0, 0, 0, 0.32); }
.input::placeholder { color: var(--faint); }
textarea.input { resize: vertical; min-height: 84px; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c3b5f0' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 15px; background: rgba(0, 0, 0, 0.25); flex-wrap: wrap; }
.seg button { padding: 9px 14px; border-radius: 11px; border: 0; background: transparent; color: var(--muted); font-weight: 900; font-size: 13.5px; cursor: pointer;
  transition: color 0.2s, background 0.25s, transform 0.2s var(--spring); display: inline-flex; align-items: center; gap: 6px; }
.seg button:hover { color: var(--text); }
.seg button.on { color: #1d1240; background: var(--accent); box-shadow: 0 3px 0 var(--accent-d); transform: translateY(-1px); }
.seg button[disabled] { opacity: 0.4; cursor: not-allowed; }
.switch { position: relative; width: 52px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: rgba(0, 0, 0, 0.3); cursor: pointer; transition: background 0.3s; }
.switch span::after { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--faint); transition: transform 0.4s var(--spring), background 0.3s; }
.switch input:checked + span { background: rgba(var(--accent-rgb), 0.35); }
.switch input:checked + span::after { transform: translateX(22px); background: var(--accent); }
input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 8px; outline: none;
  background: linear-gradient(90deg, var(--accent) var(--p, 50%), rgba(0, 0, 0, 0.3) var(--p, 50%)); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); cursor: pointer; }
input[type='range']::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); cursor: pointer; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 2px solid var(--line); }
.setting:last-child { border-bottom: 0; }
.setting .t { font-weight: 900; }
.setting .d { color: var(--muted); font-size: 13.5px; margin-top: 3px; font-weight: 600; }
.setting .ctl { flex: none; display: flex; justify-content: flex-end; }
.form-error { color: var(--pink); font-weight: 800; font-size: 14px; min-height: 20px; }

/* ------------------------------------------------------------ avatar */
.avatar { position: relative; display: inline-block; vertical-align: middle; width: var(--s, 44px); height: var(--s, 44px); flex: none; }
.avatar svg, .avatar img { width: 100%; height: 100%; display: block; }
.avatar img { border-radius: var(--ar, 50%); object-fit: cover; }
.avatar .ring { position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; }
.avatar .ring.bronze { box-shadow: 0 0 0 3px #d79a63; }
.avatar .ring.silver { box-shadow: 0 0 0 3px #dfe6ff; }
.avatar .ring.gold { box-shadow: 0 0 0 3px #ffd23f, 0 0 16px rgba(255, 210, 63, 0.6); }
.avatar .ring.rainbow { background: conic-gradient(#ff5c8a, #ffd23f, #3ee6a8, #4cc9f0, #b388ff, #ff5c8a); -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%); mask: radial-gradient(circle, transparent 62%, #000 64%); animation: spin 4s linear infinite; }
.avatar .ring.mythic { background: conic-gradient(from 0deg, #ff5c8a, #b388ff, #4cc9f0, #ff5c8a); -webkit-mask: radial-gradient(circle, transparent 60%, #000 63%); mask: radial-gradient(circle, transparent 60%, #000 63%); animation: spin 2.5s linear infinite; filter: drop-shadow(0 0 8px #ff5c8a); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ modal / toast */
.modal-root { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-scrim { position: absolute; inset: 0; background: rgba(10, 4, 30, 0.6); backdrop-filter: blur(8px); animation: fadeIn 0.3s var(--ease) both; }
.modal { position: relative; width: min(540px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 28px; border-radius: 26px; background: var(--panel);
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 1.5px var(--line-hi), 0 40px 80px -20px rgba(0, 0, 0, 0.7);
  animation: modalIn calc(0.55s * var(--t) + 0.01s) var(--spring) both; }
.modal.wide { width: min(1000px, 100%); }
.modal-root.closing .modal { animation: modalOut 0.22s var(--ease) both; }
.modal-root.closing .modal-scrim { animation: fadeOut 0.22s var(--ease) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(40px) scale(0.9) rotate(-1deg); } }
@keyframes modalOut { to { opacity: 0; transform: translateY(16px) scale(0.96); } }
.modal h2 { font-size: 26px; margin-bottom: 6px; }
.modal-x { position: absolute; top: 16px; right: 16px; z-index: 2; }
#toasts { position: fixed; z-index: 300; top: 18px; left: 50%; transform: translateX(-50%); display: grid; gap: 10px; justify-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px; background: var(--panel-2); max-width: 380px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 1.5px var(--line-hi); font-weight: 800; animation: toastIn 0.55s var(--spring) both; pointer-events: auto; }
.toast.out { animation: toastOut 0.3s var(--ease) both; }
.toast .ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--accent-rgb), 0.18); color: var(--accent); flex: none; }
.toast.ach .ic { background: rgba(62, 230, 168, 0.18); color: var(--mint); }
.toast.bad .ic { background: rgba(255, 92, 138, 0.18); color: var(--pink); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-30px) scale(0.9); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-20px); } }
[data-tip] { position: relative; }
[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); padding: 6px 10px; border-radius: 10px;
  background: #0d0620; color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; pointer-events: none; animation: fadeIn 0.15s both; z-index: 60; }

/* ------------------------------------------------------------ auth */
.auth { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; min-height: calc(100vh - 160px); }
.auth h1 { font-size: clamp(52px, 7vw, 92px); }
.auth .lead { font-size: 19px; color: var(--muted); max-width: 520px; line-height: 1.55; margin: 22px 0; font-weight: 700; }
.auth-card { padding: 30px; }
.auth-card .tabs2 { display: flex; gap: 6px; margin-bottom: 22px; }
.perk { display: flex; gap: 12px; align-items: center; font-weight: 800; }
.perk .b { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; background: rgba(255, 255, 255, 0.07); flex: none; }
.pw-meter { height: 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.3); overflow: hidden; }
.pw-meter i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width 0.4s var(--ease), background 0.3s; }

/* ------------------------------------------------------------ home */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; min-height: min(560px, calc(100vh - 150px)); }
.hero h1 { font-size: clamp(56px, 7.4vw, 104px); }
.hero .lead { font-size: 19px; color: var(--muted); max-width: 520px; line-height: 1.55; margin: 22px 0 30px; font-weight: 700; }
.globe-wrap { position: relative; aspect-ratio: 1; width: min(560px, 100%); justify-self: center; }
.globe-wrap canvas { width: 100%; height: 100%; display: block; cursor: grab; opacity: 0; transition: opacity 1s var(--ease), transform 1.2s var(--spring); transform: scale(0.85); }
.globe-wrap canvas.ready { opacity: 1; transform: none; }
.globe-wrap canvas.grabbing { cursor: grabbing; }
.globe-markers { position: absolute; inset: 0; pointer-events: none; }
.gmark { position: absolute; left: 0; top: 0; border: 0; padding: 0; background: none; cursor: pointer; width: 54px; height: 54px; margin: -50px 0 0 -27px; transition: opacity .35s; transform-origin: 50% 92%; transition: opacity .3s; }
.gm-art { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 0 rgba(29, 18, 64, .35)) drop-shadow(0 0 6px rgba(255, 255, 255, .35)); transition: transform .35s var(--spring); transform-origin: 50% 92%; pointer-events: none; }
.gmark:hover .gm-art { transform: scale(1.4) translateY(-4px); }
.gm-label i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--rc, #fff); }
.gm-label i.r-mythic { background: #ff5c8a; } .gm-label i.r-legendary { background: #ffb547; } .gm-label i.r-epic { background: #b388ff; } .gm-label i.r-rare { background: #4cc9f0; }
.gm-label { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%) scale(0.8); white-space: nowrap; padding: 4px 9px; border-radius: 9px; background: #1d1240; color: #fff;
  font-weight: 900; font-size: 12px; opacity: 0; transition: opacity 0.2s, transform 0.3s var(--spring); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); pointer-events: none; }
.gmark:hover .gm-label { opacity: 1; transform: translateX(-50%) scale(1); }
.globe-wrap::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(76, 201, 240, 0.35), transparent 70%); filter: blur(30px); z-index: -1; }
.float-card { position: absolute; width: 112px; animation: floaty 5s ease-in-out infinite; z-index: 2; pointer-events: none; }
.sticker { position: absolute; padding: 9px 14px; border-radius: 16px; background: var(--panel-2); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 1.5px var(--line-hi);
  font-weight: 900; font-size: 14px; animation: floaty 6s ease-in-out infinite; transform: rotate(-4deg); }
.stat-strip { display: flex; gap: 34px; margin-top: 34px; }
.stat-strip .n { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; }
.stat-strip .l { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; font-weight: 900; }
.modes { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.mode-card { padding: 22px; min-height: 196px; display: flex; flex-direction: column; overflow: hidden; }
.mode-card .badge { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; color: #1d1240; background: var(--mc, var(--accent));
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); transition: transform 0.4s var(--spring); }
.mode-card .badge .ico { width: 28px; height: 28px; }
.mode-card:hover .badge { transform: rotate(-10deg) scale(1.08); }
.mode-card h3 { font-size: 22px; margin-top: auto; padding-top: 18px; }
.mode-card p { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 6px 0 0; font-weight: 700; }
.mode-card .new { position: absolute; top: 18px; right: 18px; }
.mode-card::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--mc, var(--accent)); opacity: 0.08; transition: transform 0.6s var(--spring); }
.mode-card:hover::after { transform: scale(1.4); }
.game-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.game-row .ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(var(--accent-rgb), 0.16); color: var(--accent); flex: none; }
.game-row .score { margin-left: auto; text-align: right; font-family: var(--display); font-weight: 800; font-size: 19px; }
.free-pack { display: flex; align-items: center; gap: 22px; padding: 22px 26px; overflow: hidden; background: linear-gradient(110deg, var(--panel-2), var(--panel)); }
.free-pack .mini-pack { width: 76px; height: 104px; flex: none; transform: rotate(-8deg); animation: floaty 4s ease-in-out infinite; }

/* ------------------------------------------------------------ play setup */
.setup { display: grid; grid-template-columns: 1fr 390px; gap: 22px; align-items: start; }
.mode-pick { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.mode-pill { padding: 16px; display: grid; gap: 8px; cursor: pointer; transition: transform 0.3s var(--spring), box-shadow 0.25s; }
.mode-pill .badge { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--mc); color: #1d1240; }
.mode-pill b { font-family: var(--display); font-size: 17px; }
.mode-pill small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.mode-pill:hover { transform: translateY(-3px); }
.mode-pill.on { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22), inset 0 0 0 3px var(--mc); transform: translateY(-3px); }
.maps { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.map-card { overflow: hidden; }
.map-card .cover { height: 110px; position: relative; overflow: hidden; background: var(--mcol); }
.map-card .cover canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-card .cover .em { position: absolute; right: 12px; bottom: 6px; font-size: 40px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.25)); transition: transform 0.5s var(--spring); }
.map-card:hover .cover .em { transform: rotate(-12deg) scale(1.2); }
.map-card .body { padding: 13px 16px 16px; }
.map-card h3 { font-size: 17px; }
.map-card p { margin: 5px 0 9px; font-size: 13px; color: var(--muted); line-height: 1.4; font-weight: 700; }
.map-card.selected { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22), inset 0 0 0 3px var(--accent); }
.map-card .check { position: absolute; top: 10px; left: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #1d1240; display: grid; place-items: center;
  transform: scale(0); transition: transform 0.4s var(--spring); z-index: 2; box-shadow: 0 3px 0 var(--accent-d); }
.map-card.selected .check { transform: scale(1); }
.setup-panel { position: sticky; top: 4px; padding: 22px; }
.setup-panel .group { margin-bottom: 18px; }
.setup-panel .group .label { display: block; margin-bottom: 10px; }
.loadout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.slot { aspect-ratio: 5 / 7; border-radius: 14px; border: 2.5px dashed var(--line-hi); display: grid; place-items: center; cursor: pointer; color: var(--faint); font-size: 26px;
  transition: border-color 0.2s, transform 0.3s var(--spring), background 0.2s; position: relative; }
.slot:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px) rotate(-1deg); background: rgba(var(--accent-rgb), 0.06); }
.slot .pcard { --w: 100%; position: absolute; inset: 0; }

/* ------------------------------------------------------------ game */
.game { position: absolute; inset: 0; background: #0d0620; overflow: hidden; }
.pano { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.pano.grabbing { cursor: grabbing; }
.pano.can-walk { cursor: pointer; }
.pano-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pano-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pano-arrow { fill: rgba(255, 255, 255, 0.92); stroke: rgba(29, 18, 64, 0.5); stroke-width: 1.5; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35)); transition: fill 0.2s; }
.pano-arrow:hover { fill: var(--yellow); }
.gsv { position: absolute; inset: 0; }
.gsv .gm-style .gmnoprint a, .gsv .gm-style-cc { opacity: 0.55; }
.gsv a[href^='https://maps.google.com/maps?'], .gsv a[title*='Report'] { display: none !important; }
.nmpz-shield { position: absolute; inset: 0; z-index: 4; cursor: not-allowed; }
.pano-curtain { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, var(--bg-3), var(--bg) 70%);
  transition: opacity 0.7s var(--ease), visibility 0.7s; }
.pano-curtain.off { opacity: 0; visibility: hidden; }
.loader { display: grid; justify-items: center; gap: 16px; }
.loader .bouncer { width: 64px; height: 76px; animation: hop 0.9s var(--ease) infinite; }
.loader .shadow { width: 46px; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); animation: shadow 0.9s var(--ease) infinite; margin-top: -8px; }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1.05, 0.92); } 45% { transform: translateY(-34px) scale(0.96, 1.05); } 55% { transform: translateY(-34px); } }
@keyframes shadow { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(0.6); opacity: 0.25; } }
.loader .bar { width: 220px; height: 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); overflow: hidden; }
.loader .bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width 0.2s; }
.loader .msg { font-family: var(--display); font-weight: 800; font-size: 22px; }
.loader .tip { max-width: 420px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; min-height: 42px; }

.hud { position: absolute; z-index: 6; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-top { top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; pointer-events: none; }
.hud-box { display: flex; align-items: stretch; border-radius: 18px; background: rgba(29, 18, 64, 0.88); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); overflow: hidden; animation: rise 0.6s var(--spring) both; }
.hud-box > div { padding: 9px 17px; border-right: 2px solid rgba(255, 255, 255, 0.07); }
.hud-box > div:last-child { border-right: 0; }
.hud-box .k { font-size: 11px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.hud-box .v { font-family: var(--display); font-weight: 800; font-size: 20px; margin-top: 1px; }
.hud-timer .v { min-width: 58px; }
.hud-timer.warn { background: var(--pink); }
.hud-timer.warn .k, .hud-timer.warn .v { color: #fff; }
.hud-timer.warn .v { animation: pulse 0.8s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.compass { position: absolute; z-index: 6; top: 18px; left: 50%; transform: translateX(-50%); width: 280px; height: 38px; border-radius: 14px; overflow: hidden;
  background: rgba(29, 18, 64, 0.85); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
  -webkit-mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.compass-strip { position: absolute; top: 0; bottom: 0; left: 50%; will-change: transform; }
.compass-strip span { position: absolute; transform: translateX(-50%); font-size: 12px; font-weight: 900; color: var(--muted); }
.compass-strip span.c { font-size: 14px; color: var(--text); }
.compass-strip span.n { color: var(--pink); }
.compass-strip span.t { width: 2px; height: 8px; background: rgba(255, 255, 255, 0.25); top: 0; border-radius: 2px; }
.compass::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 0; margin-left: -6px; border: 6px solid transparent; border-bottom-color: var(--accent); }
.side-tools { position: absolute; z-index: 6; left: 16px; bottom: 22px; display: grid; gap: 8px; }
.side-tools .icon-btn { background: rgba(29, 18, 64, 0.88); width: 46px; height: 46px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); border: 0; }
.side-tools .icon-btn[disabled] { opacity: 0.35; pointer-events: none; }
.side-tools [data-tip]:hover::after { left: calc(100% + 10px); top: 50%; transform: translateY(-50%); }
.hand { position: absolute; z-index: 6; left: 76px; bottom: 22px; display: flex; gap: 10px; align-items: flex-end; }
.hand .pcard { --w: 74px; cursor: pointer; transition: transform 0.35s var(--spring); }
.hand .pcard:hover { transform: translateY(-14px) rotate(-3deg) scale(1.15); z-index: 2; }
.hand .pcard.used { filter: grayscale(0.85) brightness(0.6); }
.hand .ability { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) scale(0.9); width: 220px; padding: 12px; border-radius: 14px; background: rgba(29, 18, 64, 0.95);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.3s var(--spring); font-size: 13px; color: var(--muted); }
.hand .pcard:hover .ability { opacity: 1; transform: translateX(-50%) scale(1); }
.hint-bubble { position: absolute; z-index: 9; left: 50%; top: 76px; transform: translateX(-50%); padding: 14px 20px; border-radius: 18px; background: var(--panel-2); max-width: 520px; text-align: center;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 2px var(--accent); font-weight: 800; animation: pop 0.5s var(--spring) both; }

.guess-dock { --mw: 340px; position: absolute; z-index: 7; right: 18px; bottom: 18px; width: var(--mw); display: grid; gap: 10px; transition: width 0.45s var(--spring); }
.guess-dock.expanded, .guess-dock:hover, .guess-dock.pinned { --mw: min(660px, 52vw); }
.guess-dock .mapbox { isolation: isolate; height: calc(var(--mw) * 0.66); border-radius: 20px; overflow: hidden; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 3px rgba(255, 255, 255, 0.85);
  transition: height 0.45s var(--spring), opacity 0.3s; opacity: 0.85; position: relative; background: #aad3df; }
.guess-dock:hover .mapbox, .guess-dock.expanded .mapbox, .guess-dock.pinned .mapbox { opacity: 1; }
.guess-dock .mapbox .leaflet-container { width: 100%; height: 100%; }
.dock-tools { position: absolute; top: 10px; left: 10px; z-index: 500; display: flex; gap: 6px; opacity: 0; transition: opacity 0.3s; }
.guess-dock:hover .dock-tools, .guess-dock.pinned .dock-tools { opacity: 1; }
.dock-tools button { width: 32px; height: 32px; border-radius: 10px; border: 0; background: #fff; color: #1d1240; cursor: pointer; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.dock-tools button.on { background: var(--accent); }
.guess-btn { width: 100%; }
.streak-hint { position: absolute; z-index: 600; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 7px 14px; border-radius: 12px; background: #1d1240; color: #fff;
  font-weight: 900; font-size: 13.5px; white-space: nowrap; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.credit { position: absolute; z-index: 6; right: 380px; bottom: 6px; font-size: 11px; color: rgba(255, 255, 255, 0.6); text-shadow: 0 1px 3px #000; max-width: 34vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.credit a { color: inherit; text-decoration: underline; }
.pins-left { display: flex; gap: 4px; }
.pins-left i { width: 12px; height: 16px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--accent); display: inline-block; }
.pins-left i.used { background: rgba(255, 255, 255, 0.2); }

/* reveal */
.reveal { position: absolute; inset: 0; z-index: 20; display: block; background: #a8d8f0; animation: fadeIn .6s var(--ease) both; }
@keyframes reveal-in { from { clip-path: circle(0 at 50% 85%); } to { clip-path: circle(150% at 50% 85%); } }
.reveal .rmap { position: absolute; inset: 0; isolation: isolate; z-index: 0; } .reveal .rmap .leaflet-container, .summary .rmap .leaflet-container { background: #a8d8f0; }
.reveal .rmap .leaflet-container { position: absolute; inset: 0; }
.reveal-panel { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; z-index: 2; margin: 0; width: min(760px, calc(100% - 32px)); padding: 24px 28px 26px; border-radius: 28px; background: var(--panel);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 1.5px var(--line-hi); animation: rise 0.8s 0.2s var(--spring) both; text-align: center; }
.reveal-panel .score-big { font-family: var(--display); font-weight: 800; font-size: 66px; line-height: 1; margin-top: 4px; letter-spacing: -0.03em; }
.reveal-panel .score-big small { font-size: 22px; color: var(--muted); font-family: var(--font); letter-spacing: 0; }
.reveal-panel .meta { color: var(--muted); margin-top: 8px; font-weight: 700; }
.reveal-panel .meta b { color: var(--text); }
.scorebar { position: relative; height: 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.3); margin: 18px 0 18px; overflow: hidden; }
.scorebar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--accent), var(--mint)); transition: width 1.5s var(--ease); }
.reveal-panel .actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.fact-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.turf-pop { position: absolute; z-index: 30; left: 50%; top: 18%; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; pointer-events: none; }
.turf-pop .pcard { --w: 150px; animation: turfIn 1.8s var(--spring) both; }
.turf-pop .lbl { font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--mint); text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); animation: pop 0.6s 0.4s var(--spring) both; }
@keyframes turfIn { 0% { opacity: 0; transform: translateY(80px) rotate(-30deg) scale(0.4); } 25% { opacity: 1; transform: translateY(0) rotate(6deg) scale(1.08); } 40% { transform: rotate(-2deg) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px) scale(0.9); } }
.pin { transform: translate(-50%, -100%); }
.pin-skin { width: 40px; height: 52px; position: relative; animation: pinDrop 0.55s var(--bounce) both; }
.pin-skin .head { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); background: var(--panel-3); }
.pin-skin .head img, .pin-skin .head svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.pin-skin::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 0; margin-left: -7px; border: 7px solid transparent; border-top: 12px solid #fff; border-bottom: 0; }
.pin-skin.r-epic .head { border-color: #b388ff; } .pin-skin.r-legendary .head { border-color: #ffb547; box-shadow: 0 0 14px #ffb547, 0 4px 0 rgba(0,0,0,.3); }
.pin-skin.r-mythic .head { border-color: #ff5c8a; box-shadow: 0 0 18px #ff5c8a, 0 4px 0 rgba(0,0,0,.3); }
.pin-skin.r-rare .head { border-color: #4cc9f0; } .pin-skin.r-uncommon .head { border-color: #3ee6a8; }
.pin-flag { width: 40px; height: 50px; animation: pinDrop 0.7s var(--bounce) both; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.3)); }
.pin-flag svg { width: 100%; height: 100%; }
@keyframes pinDrop { from { transform: translateY(-60px) scale(0.5); opacity: 0; } }
.leaflet-marker-icon.plonk-pin { background: none; border: 0; }
.guess-marker { width: 30px; height: 40px; margin: -40px 0 0 -15px; }
.guess-marker svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.3)); animation: pinDrop 0.4s var(--bounce) both; }
.dash-line { stroke-dasharray: 2 10; stroke-linecap: round; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }

/* summary */
.summary { position: absolute; inset: 0; z-index: 25; display: grid; grid-template-columns: 1fr 430px; background: #0d0620; animation: fadeIn 0.5s var(--ease) both; }
.summary .rmap { position: relative; isolation: isolate; z-index: 0; }
.summary .rmap .leaflet-container { position: absolute; inset: 0; }
.summary-side { overflow-y: auto; padding: 30px 28px; background: var(--bg); box-shadow: inset 2px 0 0 var(--line); }
.summary-side .total { font-family: var(--display); font-weight: 800; font-size: 78px; line-height: 1; margin: 6px 0 4px; letter-spacing: -0.04em; }
.round-list { display: grid; gap: 8px; margin: 20px 0; }
.round-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--panel); cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); transition: transform 0.3s var(--spring); }
.round-item:hover { transform: translateX(5px); }
.round-item .n { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 900; background: rgba(var(--accent-rgb), 0.18); color: var(--accent); }
.round-item .d { font-size: 12.5px; color: var(--muted); }
.round-item .s { font-family: var(--display); font-weight: 800; font-size: 18px; }
.reward-box { padding: 16px; border-radius: 18px; background: var(--panel); margin-bottom: 14px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); }
.xp-bar { height: 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); overflow: hidden; margin-top: 10px; }
.xp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--mint)); border-radius: inherit; transition: width 1.4s var(--ease); }

/* ------------------------------------------------------------ profile */
.profile-head { position: relative; border-radius: 30px; overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; padding: 28px; box-shadow: 0 8px 0 rgba(0, 0, 0, 0.25); }
.profile-head .banner { position: absolute; inset: 0; }
.profile-head .banner canvas { width: 100%; height: 100%; display: block; }
.profile-head .banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--bg) 92%, transparent)); }
.profile-id { position: relative; display: flex; align-items: flex-end; gap: 22px; width: 100%; flex-wrap: wrap; }
.profile-id h1 { font-size: 44px; }
.profile-id .title { color: var(--accent); font-weight: 900; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
.profile-id .bio { color: var(--muted); max-width: 560px; margin-top: 6px; font-weight: 700; }
.profile-id .actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.level-ring { position: relative; width: 96px; height: 96px; }
.level-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.level-ring .num { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-family: var(--display); font-weight: 800; font-size: 36px; line-height: 1; }
.level-ring .num small { display: block; font-family: var(--font); font-size: 10px; color: var(--muted); letter-spacing: 0.12em; font-weight: 900; }
.tabs { display: flex; gap: 6px; margin: 24px 0; flex-wrap: wrap; }
.tabs button { padding: 11px 18px; border: 0; border-radius: 14px; background: rgba(0, 0, 0, 0.2); color: var(--muted); font-weight: 900; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.3s var(--spring); }
.tabs button:hover { color: var(--text); transform: translateY(-2px); }
.tabs button.on { background: var(--accent); color: #1d1240; box-shadow: 0 4px 0 var(--accent-d); }
.stats { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); }
.stat { padding: 18px; }
.stat .n { font-family: var(--display); font-weight: 800; font-size: 38px; line-height: 1; }
.stat .l { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 8px; font-weight: 900; }
.stat .ic { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
.ach-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ach { display: flex; gap: 14px; padding: 16px; align-items: center; }
.ach .medal { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; flex: none; background: rgba(0, 0, 0, 0.25); color: var(--faint); }
.ach .medal .ico { width: 26px; height: 26px; }
.ach.done .medal { background: var(--mint); color: #0f2a22; box-shadow: 0 4px 0 var(--mint-d); }
.ach .name { font-weight: 900; }
.ach .desc { font-size: 13px; color: var(--muted); margin-top: 2px; font-weight: 700; }
.ach .prog { height: 7px; border-radius: 7px; background: rgba(0, 0, 0, 0.3); margin-top: 8px; overflow: hidden; }
.ach .prog i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.ach:not(.done) { opacity: 0.8; }
.chart { width: 100%; display: block; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .grid-l { stroke: var(--line); stroke-width: 1.5; }
.chart text { fill: var(--faint); font-size: 11px; font-weight: 800; }
.chart .dot { fill: var(--bg); stroke: var(--accent); stroke-width: 3; }
.draw { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); animation: drawIn 1.6s var(--ease) forwards; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }
.mastery-map { isolation: isolate; height: 360px; border-radius: 18px; overflow: hidden; }
.mastery-map .leaflet-container { height: 100%; }
.country-list { display: grid; gap: 6px; max-height: 360px; overflow: auto; padding-right: 6px; }
.country-row { display: grid; grid-template-columns: 28px 1fr 60px 70px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; font-size: 13.5px; }
.country-row:nth-child(odd) { background: rgba(0, 0, 0, 0.15); }
.country-row .flag { font-size: 20px; }
.country-row .meter { height: 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.3); overflow: hidden; margin-top: 4px; }
.country-row .meter i { display: block; height: 100%; background: var(--mint); }
.hist { display: flex; align-items: flex-end; gap: 7px; height: 140px; }
.hist .b { flex: 1; border-radius: 8px 8px 3px 3px; background: var(--accent); transform-origin: bottom; animation: grow 0.9s var(--spring) both; animation-delay: calc(var(--i) * 50ms); position: relative; }
.hist .b span { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--faint); white-space: nowrap; }
@keyframes grow { from { transform: scaleY(0); } }

/* customize */
.custom { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }
.preview-card { position: sticky; top: 4px; overflow: hidden; }
.preview-card .pv-banner { height: 140px; }
.preview-card .pv-banner canvas { width: 100%; height: 100%; display: block; }
.preview-card .pv-body { padding: 0 22px 22px; margin-top: -48px; position: relative; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 40px; height: 40px; border-radius: 14px; cursor: pointer; transition: transform 0.3s var(--spring); position: relative; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.swatch:hover { transform: scale(1.12) rotate(-6deg); }
.swatch.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent); }
.option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.opt { aspect-ratio: 1; border-radius: 18px; background: rgba(0, 0, 0, 0.2); display: grid; place-items: center; cursor: pointer; padding: 9px; transition: transform 0.3s var(--spring), box-shadow 0.2s; position: relative; }
.opt:hover { transform: translateY(-3px) rotate(-2deg); }
.opt.on { box-shadow: inset 0 0 0 3px var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.opt.locked { opacity: 0.4; cursor: not-allowed; }
.opt .lock { position: absolute; bottom: 6px; right: 8px; font-size: 10.5px; color: var(--muted); font-weight: 900; }
.opt svg { width: 100%; height: 100%; }
.opt.wide { aspect-ratio: 2.2; padding: 0; overflow: hidden; }
.opt.wide canvas { width: 100%; height: 100%; display: block; }
.opt-label { position: absolute; left: 10px; bottom: 7px; font-size: 12px; font-weight: 900; text-shadow: 0 1px 4px #000; }
.title-list { display: flex; flex-wrap: wrap; gap: 8px; }
.title-pill { padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.2); cursor: pointer; font-weight: 900; transition: transform 0.3s var(--spring); }
.title-pill:hover { transform: translateY(-2px); }
.title-pill.on { background: var(--accent); color: #1d1240; }
.title-pill.locked { opacity: 0.35; cursor: not-allowed; }
.theme-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.theme-card { padding: 12px; border-radius: 18px; cursor: pointer; background: rgba(0, 0, 0, 0.2); transition: transform 0.3s var(--spring); }
.theme-card:hover { transform: translateY(-3px); }
.theme-card.on { box-shadow: inset 0 0 0 3px var(--accent); }
.theme-card .sw { height: 50px; border-radius: 12px; margin-bottom: 8px; position: relative; overflow: hidden; }
.theme-card .nm { font-weight: 900; font-size: 13.5px; }

/* ------------------------------------------------------------ multiplayer */
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.code-input { font-family: var(--display); font-size: 32px; letter-spacing: 0.35em; text-transform: uppercase; text-align: center; padding: 14px; font-weight: 800; }
.room-code { font-family: var(--display); font-size: 52px; letter-spacing: 0.2em; font-weight: 800; color: var(--accent); cursor: pointer; text-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); }
.lobby { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; }
.players { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.player-card { display: flex; align-items: center; gap: 12px; padding: 14px; }
.player-card .host { color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: 0.1em; }
.player-card.off { opacity: 0.45; }
.player-card .rdy { margin-left: auto; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.player-card .rdy.on { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.player-card.slot { box-shadow: inset 0 0 0 2.5px var(--line-hi); background: transparent; color: var(--faint); justify-content: center; min-height: 78px; border-style: dashed; }
.chat { display: flex; flex-direction: column; height: 360px; }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 10px; }
.chat-msg { font-size: 14px; line-height: 1.4; animation: rise 0.4s var(--spring) both; font-weight: 700; }
.chat-msg b { color: var(--accent); }
.chat-msg.sys { color: var(--faint); font-style: italic; font-size: 13px; }
.chat-msg.emote { font-size: 28px; }
.emotes { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.emotes button { border: 0; background: rgba(0, 0, 0, 0.2); border-radius: 12px; padding: 4px 8px; cursor: pointer; font-size: 19px; transition: transform 0.25s var(--spring); }
.emotes button:hover { transform: scale(1.25) rotate(-8deg); }
.float-emote { position: absolute; z-index: 40; font-size: 44px; pointer-events: none; animation: emoteUp 2.6s var(--ease) forwards; text-align: center; }
@keyframes emoteUp { 0% { opacity: 0; transform: translateY(30px) scale(0.4); } 15% { opacity: 1; transform: translateY(0) scale(1.2); } 100% { opacity: 0; transform: translateY(-170px) scale(1); } }
.mp-board { position: absolute; z-index: 6; top: 84px; left: 16px; width: 250px; display: grid; gap: 6px; }
.mp-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(29, 18, 64, 0.88); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); font-size: 13.5px; font-weight: 800; }
.mp-row .sc { margin-left: auto; font-family: var(--display); }
.mp-row .gd { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.mp-row .gd.on { background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.duel-bar { position: absolute; z-index: 6; top: 70px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; }
.hp { width: 260px; }
.hp .nm { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 14px; margin-bottom: 6px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.hp.right .nm { justify-content: flex-end; }
.hp .track { height: 16px; border-radius: 16px; background: rgba(29, 18, 64, 0.88); overflow: hidden; position: relative; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.hp .track i { position: absolute; inset: 3px auto 3px 3px; background: linear-gradient(90deg, var(--pink), var(--accent) 55%, var(--mint)); border-radius: inherit; transition: width 1.1s var(--ease); }
.hp.right .track i { left: auto; right: 3px; background: linear-gradient(270deg, var(--pink), var(--accent) 55%, var(--mint)); }
.hp .track b { position: absolute; inset: 3px auto 3px 3px; background: rgba(255, 255, 255, 0.55); border-radius: inherit; transition: width 1.6s 0.5s var(--ease); }
.hp.right .track b { left: auto; right: 3px; }
.hp .val { font-family: var(--display); font-weight: 800; font-size: 14px; margin-top: 4px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.hp.right .val { text-align: right; }
.vs { font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--accent); text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
.round-intro { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(13, 6, 32, 0.7); backdrop-filter: blur(6px); animation: fadeIn 0.3s both; }
.round-intro .ri { text-align: center; animation: pop 0.6s var(--spring) both; }
.round-intro .ri h2 { font-size: 100px; letter-spacing: -0.04em; text-shadow: 0 8px 0 rgba(0, 0, 0, 0.3); }
.round-intro .ri .count { font-size: 22px; color: var(--muted); font-weight: 900; }
.damage-float { font-family: var(--display); font-weight: 800; font-size: 50px; color: var(--pink); animation: pop 0.6s var(--spring) both; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin: 22px 0; }
.podium .p { display: grid; justify-items: center; gap: 8px; }
.podium .p .block { width: 110px; border-radius: 16px 16px 6px 6px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 42px;
  background: var(--panel-3); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); transform-origin: bottom; animation: grow 0.9s var(--spring) both; }
.podium .p:nth-child(2) .block { background: var(--accent); color: #1d1240; }
.podium .p:nth-child(1) .block { animation-delay: 0.2s; }
.podium .p:nth-child(3) .block { animation-delay: 0.35s; }

/* leaderboard */
.lb { display: grid; gap: 8px; }
.lb-row { display: grid; grid-template-columns: 44px 46px 1fr repeat(4, 110px); align-items: center; gap: 12px; padding: 12px 16px; }
.lb-row .rk { font-family: var(--display); font-weight: 800; font-size: 26px; text-align: center; }
.lb-row.top1 .rk { color: var(--accent); }
.lb-row .v { font-family: var(--display); font-weight: 800; text-align: right; }

/* settings */
.settings-layout { display: grid; grid-template-columns: 230px 1fr; gap: 22px; align-items: start; }
.settings-nav { position: sticky; top: 4px; display: grid; gap: 4px; padding: 10px; }
.settings-nav button { text-align: left; padding: 11px 14px; border-radius: 13px; border: 0; background: none; color: var(--muted); font-weight: 900; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.settings-nav button.on, .settings-nav button:hover { background: rgba(var(--accent-rgb), 0.14); color: var(--text); }

/* leaflet polish */
.leaflet-container { font-family: var(--font); background: #aad3df; }
.leaflet-control-attribution { font-size: 10px !important; background: rgba(255, 255, 255, 0.75) !important; }
.leaflet-bar { border: 0 !important; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25) !important; border-radius: 12px !important; overflow: hidden; }
.leaflet-bar a { color: #1d1240 !important; font-weight: 900; }
.leaflet-tooltip.plonk-tip { background: #1d1240; color: #fff; border: 0; border-radius: 10px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); font-family: var(--font); font-weight: 800; }
.leaflet-tooltip.plonk-tip::before { display: none; }

/* bursts */
.burst-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 250; }

@media (max-width: 1600px) { .nav a span { display: none; } .nav a { padding: 10px 14px; } .nav a .ico { width: 18px; height: 18px; } }
@media (max-width: 1100px) {
  .setup, .lobby, .custom, .mp-grid, .settings-layout, .auth, .hero { grid-template-columns: 1fr; }
  .summary { grid-template-columns: 1fr; grid-template-rows: 45vh 1fr; }
  .lb-row { grid-template-columns: 36px 42px 1fr 100px; }
  .lb-row .hide-sm { display: none; }
  .nav a span { display: none; }
}
@media (max-width: 700px) {
  .screen { padding: 78px 16px 70px; }
  .topbar { padding: 0 14px; gap: 8px; }
  .nav { display: none; }
  .guess-dock { --mw: calc(100vw - 36px) !important; }
  .guess-dock .mapbox { height: 0; opacity: 0; }
  .guess-dock.expanded .mapbox { height: 50vh; opacity: 1; }
  .compass { width: 170px; }
}

/* ------------------------------------------------------------ battle arena */
.arena { position: relative; display: grid; gap: 8px; }
.arena-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bot-face { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: var(--panel-2); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); }
.score-pips { display: flex; align-items: center; gap: 14px; font-size: 26px; }
.score-pips span { display: flex; gap: 6px; }
.score-pips i { width: 16px; height: 16px; border-radius: 50%; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 2px var(--line-hi); transition: background 0.4s, transform 0.4s var(--spring); }
.score-pips .me i.on { background: var(--mint); transform: scale(1.2); }
.score-pips .ai i.on { background: var(--pink); transform: scale(1.2); }
.ai-hand { display: flex; justify-content: center; gap: 0; height: 104px; }
.ai-hand .pcard { margin: 0 -14px; transition: transform 0.4s var(--spring); }
.table { position: relative; display: grid; justify-items: center; align-content: center; gap: 10px; padding: 14px; border-radius: 30px;
  background: radial-gradient(70% 90% at 50% 50%, color-mix(in srgb, var(--mint) 18%, var(--panel)), var(--panel) 70%); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.06), 0 6px 0 rgba(0, 0, 0, 0.2); min-height: 0; }
.turf { font-weight: 800; padding: 8px 16px; border-radius: 999px; background: rgba(0, 0, 0, 0.25); }
.duel-slots { position: relative; display: flex; align-items: center; gap: 30px; min-height: 246px; }
.dslot { width: 170px; height: 238px; border-radius: 16px; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.08); display: grid; place-items: center; transition: transform 0.5s var(--spring), filter 0.4s; }
.dslot.won { transform: scale(1.08); filter: drop-shadow(0 0 30px var(--mint)); }
.dslot.lost { transform: scale(0.92) rotate(-3deg); filter: grayscale(0.8) brightness(0.6); animation: shakeX 0.4s; }
@keyframes shakeX { 25% { translate: -8px; } 75% { translate: 8px; } }
.enter-up { animation: enterUp 0.6s var(--spring) both; }
.enter-down { animation: enterDown 0.6s var(--spring) both; }
@keyframes enterUp { from { transform: translateY(260px) scale(0.6) rotate(-10deg); opacity: 0; } }
@keyframes enterDown { from { transform: translateY(-260px) scale(0.6) rotate(10deg); opacity: 0; } }
.vs-badge { font-family: var(--display); font-weight: 800; font-size: 34px; color: var(--accent); text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); }
.stat-duel { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 18px; background: #1d1240;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35); animation: pop 0.4s var(--spring) both; z-index: 5; }
.stat-duel span { font-weight: 900; color: var(--muted); }
.stat-duel .sd { display: flex; align-items: center; gap: 8px; width: 170px; }
.stat-duel .sd.ai { flex-direction: row-reverse; }
.stat-duel .sd i { position: relative; flex: 1; height: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.stat-duel .sd i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--mint); border-radius: inherit; transition: width 1s var(--ease); }
.stat-duel .sd.ai i::after { left: auto; right: 0; background: var(--pink); }
.stat-duel .sd b { width: 34px; text-align: center; font-size: 20px; }
.prompt { font-family: var(--display); font-weight: 800; font-size: 22px; text-align: center; min-height: 30px; }
.stat-pick { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.stat-btn { flex-direction: column; gap: 2px; padding: 10px 16px; font-size: 12.5px; animation: pop 0.4s var(--spring) both; }
.stat-btn .num { font-size: 24px; }
.my-hand { display: flex; justify-content: center; padding: 30px 0 10px; min-height: 210px; }
.hand-card { position: relative; margin: 0 -10px; cursor: pointer; transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 4deg)) translateY(calc(max(var(--i) - (var(--n) - 1) / 2, (var(--n) - 1) / 2 - var(--i)) * 6px));
  transition: transform 0.35s var(--spring), margin 0.3s; animation: rise 0.5s var(--spring) both; animation-delay: calc(var(--i) * 70ms); }
.hand-card:hover { transform: translateY(-26px) scale(1.06); z-index: 3; margin: 0 6px; }
.hand-card.picked { transform: translateY(-40px) scale(1.1); z-index: 4; margin: 0 10px; }
.hand-card.picked .pcard { filter: drop-shadow(0 0 22px var(--accent)); }
.hand-card.leaving { opacity: 0; transform: translateY(-120px) scale(0.6); transition: all 0.4s var(--ease); }
.hand-card .turf-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 9px; border-radius: 9px; background: var(--mint); color: #0f2a22;
  font-size: 11px; font-weight: 900; box-shadow: 0 3px 0 var(--mint-d); z-index: 5; }
.battle-end { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(13, 6, 32, 0.75); backdrop-filter: blur(6px); animation: fadeIn 0.4s both; }
.battle-end .be-card { text-align: center; padding: 34px 44px; border-radius: 30px; background: var(--panel); box-shadow: 0 10px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 3px var(--accent); }
.battle-end.lost .be-card { box-shadow: 0 10px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 3px var(--pink); }

/* ------------------------------------------------------------ store & pass */
.pass-hero { padding: 28px; overflow: hidden; display: grid; align-content: start; gap: 8px; background: linear-gradient(135deg, #ffd23f, #ff9f43 60%, #ff8fd0) !important; color: #1d1240; }
.item-tile { display: grid; justify-items: center; gap: 10px; text-align: center; }
.item-prev { height: 140px; display: grid; place-items: center; }
.gem-tile { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; }
.gem-pile { display: flex; gap: 2px; height: 50px; align-items: end; }
.gem-pile .gem { width: 34px; height: 34px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.3)); }
.gem-pile .gem:nth-child(even) { transform: translateY(-10px) rotate(12deg); }
.pass-banner { position: relative; overflow: hidden; border-radius: 32px; padding: 36px 40px; background: linear-gradient(120deg, #ffd23f, #ff9f43 55%, #ff8fd0); box-shadow: 0 8px 0 rgba(0, 0, 0, 0.25); }
.pass-banner::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 30px, rgba(255, 255, 255, 0.15) 30px 34px); animation: foil 20s linear infinite; background-size: 300% 300%; }
.pass-crown { position: absolute; right: 50px; top: 50%; transform: translateY(-50%) rotate(12deg); font-size: 150px; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.2)); animation: floaty 4s ease-in-out infinite; }
.track { display: flex; gap: 10px; overflow-x: auto; padding: 10px 4px 20px; scroll-snap-type: x proximity; }
.tr-col { flex: none; width: 132px; display: grid; gap: 8px; scroll-snap-align: center; }
.tr-tier { text-align: center; font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--muted); }
.tr-col.current .tr-tier { color: var(--accent); }
.tr-cell { height: 150px; border-radius: 18px; background: var(--panel); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); display: grid; justify-items: center; align-content: center; gap: 6px; padding: 10px; text-align: center; opacity: 0.55; }
.tr-cell.premium { background: linear-gradient(180deg, #4a3410, var(--panel)); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 2px rgba(255, 210, 63, 0.4); }
.tr-cell.reached { opacity: 1; }
.tr-cell.claimed { opacity: 0.6; }
.tr-col.current .tr-cell { box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 3px var(--accent); }
.tr-ico { font-size: 34px; }
.tr-lbl { font-size: 12.5px; font-weight: 800; line-height: 1.25; }
.pass-badge { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, #ffd23f, #ff8fd0); color: #1d1240; font-size: 12px; vertical-align: 1px; }
.avatar .ring.sprout { box-shadow: 0 0 0 3px #3ee6a8, 0 0 0 6px rgba(62, 230, 168, 0.3); }
.avatar .ring.pass { background: conic-gradient(#ffd23f, #ff8fd0, #ffd23f); -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%); mask: radial-gradient(circle, transparent 62%, #000 64%); animation: spin 3s linear infinite; filter: drop-shadow(0 0 6px #ffd23f); }
:root[data-theme='retro'] { --bg: #2b1d12; --bg-2: #3a2818; --bg-3: #5a3d22; --panel: #3d2a19; --panel-2: #4a331f; --panel-3: #5a3e26; --muted: #e9cfa5; --faint: #b0926a; --accent: #e8b04a; --accent-d: #b07f22; --accent-rgb: 232, 176, 74; }
:root[data-theme='royal'] { --bg: #120830; --bg-2: #1c0d48; --bg-3: #2e1670; --panel: #231055; --panel-2: #2c1468; --panel-3: #38197e; --muted: #d6c8ff; --faint: #9984d8; --accent: #ffd23f; --accent-d: #c99a00; --accent-rgb: 255, 210, 63; }

.tiles-multiply { mix-blend-mode: multiply; }
.leaflet-container { background: #b9d9e8; }

/* ---------------------------------------------------------------- characters */
.char { display: block; overflow: visible; }
.char.bust { overflow: hidden; }
.char * { transform-box: view-box; }
.char .c-all { transform-origin: 80px 212px; }
.char .c-head { transform-origin: 80px 112px; animation: c-head 5s ease-in-out infinite; }
.char .c-body { transform-origin: 80px 200px; animation: c-breathe 3.2s ease-in-out infinite; }
.char .c-eyes { transform-origin: 80px 76px; animation: c-blink 5s infinite; }
.char .c-armL { transform-origin: 46px 122px; }
.char .c-armR { transform-origin: 114px 122px; }
.char .c-shadow { transform-origin: 80px 212px; transform-box: view-box; }
.char.flip { transform: scaleX(-1); }
@keyframes c-head { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg) translateY(1px); } }
@keyframes c-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.025); } }
@keyframes c-blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
.char.pose-wave .c-armR { animation: c-wave 1.6s ease-in-out infinite; }
@keyframes c-wave { 0%, 100% { transform: rotate(-150deg); } 50% { transform: rotate(-115deg); } }
.char.pose-cheer .c-all { animation: c-jump .9s cubic-bezier(.3, 0, .4, 1) infinite; }
.char.pose-cheer .c-shadow { animation: c-shadowjump .9s cubic-bezier(.3, 0, .4, 1) infinite; }
.char.pose-cheer .c-armL { animation: c-cheerL .9s ease-in-out infinite; }
.char.pose-cheer .c-armR { animation: c-cheerR .9s ease-in-out infinite; }
@keyframes c-jump { 0%, 100% { transform: translateY(0) scaleY(.96); } 45% { transform: translateY(-16px) scaleY(1.03); } }
@keyframes c-shadowjump { 0%, 100% { transform: scale(1); opacity: .18; } 45% { transform: scale(.7); opacity: .1; } }
@keyframes c-cheerL { 0%, 100% { transform: rotate(140deg); } 50% { transform: rotate(160deg); } }
@keyframes c-cheerR { 0%, 100% { transform: rotate(-140deg); } 50% { transform: rotate(-160deg); } }
.char.pose-sad .c-head { animation: none; transform: rotate(-6deg) translateY(4px); }
.char.pose-sad .c-armL { transform: rotate(8deg); } .char.pose-sad .c-armR { transform: rotate(-8deg); }
.char.pose-think .c-armR { transform: rotate(-24deg); }
.char.pose-think .c-eyes { transform: translate(2px, -2px); animation: none; }
.char.pose-think .c-head { animation: c-think 3s ease-in-out infinite; }
@keyframes c-think { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(8deg); } }
.char.pose-ready .c-armL { animation: c-ready 1.4s ease-in-out infinite; } .char.pose-ready .c-armR { animation: c-ready 1.4s ease-in-out infinite reverse; }
@keyframes c-ready { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } }
[data-motion="reduced"] .char * { animation: none !important; }
.char-portrait { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--bg) 60%, #fff), var(--bg)); overflow: hidden; }
.char-portrait .char { width: 118%; margin: 6% 0 0 -9%; }
.char-portrait .char .c-head, .char-portrait .char .c-body { animation-duration: 6s; }
.av-char { display: block; width: 100%; height: 100%; overflow: hidden; }
.avatar .char-portrait .char, .char-portrait .char { height: auto; }

/* ---------------------------------------------------------------- customize v2 */
.preview-card .pv-banner { position: relative; height: 150px; }
.pv-stage { height: 210px; margin-top: -150px; position: relative; display: flex; justify-content: center; pointer-events: none; }
.pv-stage .char { height: 210px; width: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.pv-stage.boing { animation: boing .6s var(--spring); }
@keyframes boing { 0% { transform: scale(.8, 1.1); } 40% { transform: scale(1.08, .94); } 100% { transform: none; } }
.preview-card .pv-body { margin-top: 6px; }
.pv-motto { font-family: var(--display); font-size: 18px; color: var(--pacc, var(--accent)); margin: 10px 0 0; font-weight: 800; }
.cz-sec { margin-bottom: 16px; animation: rise .45s var(--spring) both; }
.cz-sec h3 { margin-bottom: 12px; }
.cz-sec .field + .field { margin-top: 14px; }
.cz-note { margin: -6px 0 14px; font-size: 13.5px; }
.part-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.part { position: relative; border: 0; border-radius: 16px; background: rgba(0, 0, 0, .22); padding: 6px 4px 6px; cursor: pointer; color: var(--muted); font-weight: 800; font-size: 11.5px;
  transition: transform .25s var(--spring), background .2s, box-shadow .2s; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.part .char { width: 70px; height: 70px; }
.part .char * { animation: none !important; }
.part:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .08); color: var(--text); }
.part.on { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 0 0 0 2.5px var(--accent); color: var(--text); }
.part.locked { opacity: .55; }
.part .lk { position: absolute; top: 4px; right: 4px; font-style: normal; font-size: 10px; background: #1d1240; border-radius: 8px; padding: 1px 5px; }
.widget-list { display: grid; gap: 6px; }
.widget-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; background: rgba(0, 0, 0, .18); opacity: .65; }
.widget-row.on { opacity: 1; background: rgba(255, 255, 255, .06); }
.widget-row .tgl { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--muted); background: transparent; color: #1d1240; display: grid; place-items: center; cursor: pointer; padding: 0; }
.widget-row.on .tgl { background: var(--accent); border-color: var(--accent); }
.widget-row .tgl .ico { width: 16px; height: 16px; }
.btn.icon-only { padding: 6px; }
.pv-sticker { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pv-sticker::before, .pv-sticker::after { position: absolute; inset: -40px 0 0; font-size: 18px; letter-spacing: 34px; line-height: 46px; word-break: break-all; opacity: .9; animation: stk-fall 7s linear infinite; }
.pv-sticker::after { animation-delay: -3.5s; left: 22px; }
.stk-sparkles::before, .stk-sparkles::after { content: '✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨'; }
.stk-hearts::before, .stk-hearts::after { content: '💖 💕 💖 💕 💖 💕 💖 💕 💖 💕 💖 💕'; }
.stk-stars::before, .stk-stars::after { content: '⭐ 🌟 ⭐ 🌟 ⭐ 🌟 ⭐ 🌟 ⭐ 🌟 ⭐ 🌟'; }
.stk-confetti::before, .stk-confetti::after { content: '🎉 🎊 🎉 🎊 🎉 🎊 🎉 🎊 🎉 🎊 🎉 🎊'; }
.stk-leaves::before, .stk-leaves::after { content: '🍃 🍂 🍃 🍂 🍃 🍂 🍃 🍂 🍃 🍂 🍃 🍂'; }
.stk-snow::before, .stk-snow::after { content: '❄️ ❄️ ❄️ ❄️ ❄️ ❄️ ❄️ ❄️ ❄️ ❄️ ❄️ ❄️'; }
@keyframes stk-fall { from { transform: translateY(-50%); } to { transform: translateY(10%); } }

/* ---------------------------------------------------------------- pocket packs */
.pocket { display: flex; align-items: center; gap: 22px; padding: 18px 24px; position: relative; overflow: hidden; }
.pocket .mini-pack { position: relative; }
.pocket.ready { box-shadow: 0 6px 0 rgba(0, 0, 0, .22), inset 0 0 0 3px var(--accent); }
.pocket.ready .mini-pack { animation: pk-wiggle 2.4s ease-in-out infinite; }
@keyframes pk-wiggle { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-6deg) scale(1.05); } 82% { transform: rotate(5deg) scale(1.05); } 88% { transform: rotate(-3deg); } }
.pk-badge { position: absolute; top: -6px; right: -8px; min-width: 26px; height: 26px; border-radius: 13px; background: #ff5c8a; color: #fff; font-weight: 900; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); animation: pop .5s var(--spring); }
.pk-meter { display: flex; align-items: center; gap: 12px; margin-top: 10px; max-width: 420px; }
.pk-pips { display: flex; gap: 5px; }
.pk-pips i { width: 14px; height: 14px; border-radius: 5px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); }
.pk-pips i.on { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.pk-bar { flex: 1; height: 10px; border-radius: 6px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.pk-bar b { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #4cc9f0, #3ee6a8); transition: width 1s linear; }
.pk-meter .mono { font-weight: 800; min-width: 44px; text-align: right; }

/* ---------------------------------------------------------------- home hero character + live feed */
.hero-char { position: absolute; left: -17%; bottom: 6%; width: 32%; z-index: 400; display: block; text-decoration: none; color: inherit; animation: hc-in .9s .4s var(--spring) both; }
.hero-char .char { width: 100%; height: auto; filter: drop-shadow(0 10px 12px rgba(10, 4, 30, .45)); transition: transform .4s var(--spring); }
.hero-char:hover .char { transform: translateY(-6px) rotate(-2deg); }
@keyframes hc-in { from { opacity: 0; transform: translate(-30px, 30px) scale(.7); } }
.hc-bubble { position: absolute; left: 62%; top: -2%; white-space: nowrap; background: #fff; color: #1d1240; font-weight: 900; font-size: 14px; padding: 8px 13px; border-radius: 14px 14px 14px 4px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25); transform-origin: 0 100%; opacity: 0; width: max-content; max-width: 260px; white-space: normal; line-height: 1.35; pointer-events: none; }
.hc-bubble.show { animation: hc-bubble 7s ease-in-out both; }
@keyframes hc-bubble { 0% { opacity: 0; transform: scale(.4); } 6%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } }
.hc-plate { display: flex; align-items: center; gap: 8px; margin: -6px auto 0; width: max-content; background: var(--panel); border-radius: 14px; padding: 5px 12px 5px 5px; box-shadow: 0 4px 0 rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 210, 63, .5); font-size: 14px; }
.hc-lv { width: 26px; height: 26px; border-radius: 9px; background: var(--accent); color: #1d1240; display: grid; place-items: center; font-weight: 900; font-size: 13px; }
.gping { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.gp-pin { position: absolute; left: -17px; top: -46px; width: 34px; height: 34px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
  animation: gp-drop .6s cubic-bezier(.3, 1.6, .5, 1) both; background: #ffd23f; }
.gp-pin .char-portrait { transform: rotate(45deg) scale(1.25); }
.gp-ring { position: absolute; left: -16px; top: -6px; width: 32px; height: 12px; border-radius: 50%; border: 2.5px solid #fff; animation: gp-ring 1.2s .25s ease-out both; }
.gp-tag { position: absolute; left: 22px; top: -44px; white-space: nowrap; font-size: 11.5px; font-weight: 800; color: #fff; background: rgba(29, 18, 64, .85); padding: 3px 8px; border-radius: 8px; animation: gp-tag .5s .3s var(--spring) both; }
@keyframes gp-drop { 0% { opacity: 0; transform: translateY(-40px) rotate(-45deg) scale(.4); } 100% { opacity: 1; transform: rotate(-45deg); } }
@keyframes gp-ring { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes gp-tag { from { opacity: 0; transform: translateX(-8px); } }
.gping.out .gp-pin { animation: gp-out .6s ease-in forwards; } .gping.out .gp-tag { animation: gp-fade .4s ease-in forwards; }
@keyframes gp-out { to { opacity: 0; transform: translateY(-14px) rotate(-45deg) scale(.5); } }
@keyframes gp-fade { to { opacity: 0; } }
.globe-ticker { position: absolute; right: 2%; bottom: 1%; display: flex; align-items: center; gap: 9px; max-width: 70%; font-size: 13px; padding: 8px 14px; border-radius: 14px; background: rgba(20, 10, 50, .72); backdrop-filter: blur(6px); z-index: 401; }
.globe-ticker:empty { display: none; }
.globe-ticker.lv-bump { animation: lv-flash .5s var(--spring); }
@keyframes lv-flash { from { transform: translateY(6px); opacity: .4; } }
.lv-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff5c8a; box-shadow: 0 0 0 0 #ff5c8a; animation: lv-dot 1.6s infinite; flex: none; }
@keyframes lv-dot { 0% { box-shadow: 0 0 0 0 rgba(255, 92, 138, .7); } 100% { box-shadow: 0 0 0 10px rgba(255, 92, 138, 0); } }
.lv-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1000px) { .hero-char { left: -4%; width: 30%; } }

/* ---------------------------------------------------------------- academy */
.academy-hero { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: center; margin-top: 6px; }
.academy-char { position: relative; height: 270px; display: flex; justify-content: center; }
.academy-char .char { height: 100%; width: auto; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .35)); }
.ac-board { position: absolute; right: -6px; top: 24px; width: 70px; height: 70px; border-radius: 50%; background: #bfe8ff; border: 3px solid #2b1d4a; display: grid; place-items: center; text-align: center;
  font-weight: 900; color: #2b1d4a; line-height: 1; font-size: 14px; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); animation: float 4s ease-in-out infinite; }
.ac-board span { color: #ffb547; font-size: 26px; }
.quiz-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.quiz-tile { text-align: left; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.quiz-tile .badge { width: 46px; height: 46px; border-radius: 14px; background: var(--accent); color: #1d1240; display: grid; place-items: center; box-shadow: 0 4px 0 var(--accent-d); transition: transform .35s var(--spring); }
.quiz-tile:hover .badge { transform: rotate(-8deg) scale(1.1); }
.quiz-tile h3 { margin: 6px 0 0; font-size: 19px; } .quiz-tile p { margin: 0; color: var(--muted); font-size: 13.5px; font-weight: 700; flex: 1; }
.qt-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 12px; font-weight: 800; color: var(--faint); }
.qt-go { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .08); display: grid; place-items: center; transition: background .2s, transform .3s var(--spring); }
.quiz-tile:hover .qt-go { background: var(--accent); color: #1d1240; transform: scale(1.12); }
.lesson-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.lesson-tile { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; text-align: left; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 18px; }
.lesson-tile h3 { margin: 2px 0 4px; font-size: 18px; } .lesson-tile p { margin: 0; color: var(--muted); font-size: 13.5px; font-weight: 700; }
.lt-ico { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, #4cc9f0, #3ee6a8); color: #1d1240; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.lt-ico.big { width: 64px; height: 64px; border-radius: 20px; } .lt-ico.big .ico { width: 32px; height: 32px; }
.lt-state { font-weight: 900; font-size: 12px; color: var(--accent); background: rgba(255, 210, 63, .14); border-radius: 10px; padding: 4px 8px; }
.lesson-tile.done .lt-state { color: #1d1240; background: #3ee6a8; }
.lesson-tile.done .lt-ico { background: linear-gradient(135deg, #3ee6a8, #9bde3a); }
.lesson-head { display: flex; gap: 18px; align-items: center; } .lesson-head h2 { margin: 2px 0; font-size: 30px; } .lesson-head p { margin: 0; }
.lesson-art { display: flex; gap: 24px; justify-content: center; margin: 18px 0 4px; }
.lesson-points { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: lp; display: grid; gap: 10px; }
.lesson-points li { counter-increment: lp; position: relative; padding: 12px 14px 12px 50px; border-radius: 14px; background: rgba(0, 0, 0, .2); font-weight: 700; line-height: 1.5; animation: rise .5s calc(var(--i) * 70ms) var(--spring) both; }
.lesson-points li::before { content: counter(lp); position: absolute; left: 12px; top: 11px; width: 26px; height: 26px; border-radius: 9px; background: var(--accent); color: #1d1240; font-weight: 900; display: grid; place-items: center; font-size: 13px; }
.lesson-example { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 210, 63, .12); box-shadow: inset 0 0 0 2px rgba(255, 210, 63, .4); display: flex; gap: 10px; align-items: center; font-weight: 800; }
.cont-card .tip-list { margin-top: 10px; }
.tip-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tip-list li { position: relative; padding-left: 26px; font-weight: 700; line-height: 1.5; }
.tip-list li::before { content: '📍'; position: absolute; left: 0; top: 0; font-size: 15px; }
.country-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 16px; gap: 10px; }
.country-tile { display: flex; align-items: center; gap: 12px; text-align: left; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 10px 12px; }
.ct-flag { width: 46px; height: 32px; border-radius: 6px; overflow: hidden; flex: none; box-shadow: 0 2px 0 rgba(0, 0, 0, .3); background: rgba(0, 0, 0, .2); }
.flag-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-meta { display: flex; gap: 8px; font-size: 11.5px; font-weight: 800; color: var(--faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drive { font-weight: 900; } .drive.L { color: #ff8fd0; } .drive.R { color: #4cc9f0; }
.chip.drive.L { background: rgba(255, 143, 208, .16); } .chip.drive.R { background: rgba(76, 201, 240, .16); }
.cg-head { display: flex; gap: 20px; align-items: center; } .cg-head > .flag-img { width: 120px; height: auto; border-radius: 10px; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
.cg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.cg-card { position: relative; border: 0; padding: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; background: #000; }
.cg-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.cg-card:hover img { transform: scale(1.08); }
.cg-card span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); color: #fff; font-weight: 800; font-size: 13px; text-align: left; }
.sun-art, .road-art { margin: 0; text-align: center; font-weight: 900; font-size: 14px; }
.sun-art svg, .road-art svg { width: 150px; height: 150px; display: block; margin: 0 auto 8px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .25)); }
.sun-art small, .road-art small { color: var(--muted); font-weight: 700; }
.sun-g { animation: sun-pulse 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sun-pulse { 50% { transform: scale(1.12); } }
.quiz-modal { max-width: 760px !important; }
.quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-right: 40px; }
.quiz-dots { display: flex; gap: 6px; } .quiz-dots i { width: 22px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .14); transition: background .3s, transform .3s var(--spring); }
.quiz-dots i.cur { background: var(--accent); transform: scaleY(1.4); } .quiz-dots i.ok { background: #3ee6a8; } .quiz-dots i.bad { background: #ff5c8a; }
.q-card { margin-top: 18px; animation: q-in .45s var(--spring); }
@keyframes q-in { from { opacity: 0; transform: translateX(40px) scale(.97); } }
.q-prompt { display: flex; justify-content: center; }
.qp-photo { width: 100%; height: 300px; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 0 rgba(0, 0, 0, .3); background: #000; }
.qp-photo img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 12s ease-out both; }
@keyframes kenburns { from { transform: scale(1.12); } }
.qp-flag img { width: 260px; border-radius: 10px; box-shadow: 0 6px 0 rgba(0, 0, 0, .3); animation: flag-wave 3s ease-in-out infinite; transform-origin: left center; }
@keyframes flag-wave { 50% { transform: perspective(400px) rotateY(-8deg) skewY(-1deg); } }
.qp-text { font-family: var(--mono); font-size: 54px; font-weight: 800; padding: 20px 40px; border-radius: 18px; background: #fff; color: #1d1240; box-shadow: 0 6px 0 rgba(0, 0, 0, .3); }
.street-sign { padding: 10px; border-radius: 14px; background: #1f6f4a; box-shadow: 0 6px 0 rgba(0, 0, 0, .35); margin: 20px 0; animation: sign-swing 3s ease-in-out infinite; transform-origin: 50% -40px; }
.street-sign span { display: block; padding: 18px 34px; border: 4px solid #fff; border-radius: 9px; color: #fff; font-size: 40px; font-weight: 800; font-family: 'Noto Sans', system-ui, sans-serif; white-space: nowrap; }
@keyframes sign-swing { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.q-text { text-align: center; font-size: 26px; margin: 18px 0 14px; }
.q-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-choice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 0; background: rgba(255, 255, 255, .07); color: var(--text); font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; text-align: left;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3); transition: transform .25s var(--spring), background .2s; animation: rise .4s calc(var(--i) * 60ms) var(--spring) both; }
.q-choice:hover:not(:disabled) { transform: translateY(-3px); background: rgba(255, 255, 255, .12); }
.q-key { width: 28px; height: 28px; border-radius: 9px; background: rgba(0, 0, 0, .3); display: grid; place-items: center; font-size: 13px; flex: none; }
.q-choice.right { background: #3ee6a8; color: #1d1240; animation: q-right .5s var(--spring); } .q-choice.right .q-key { background: rgba(0, 0, 0, .15); }
.q-choice.wrong { background: #ff5c8a; color: #fff; animation: shake .4s; }
.q-choice:disabled { cursor: default; }
@keyframes q-right { 40% { transform: scale(1.06); } }
.q-explain { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-weight: 700; line-height: 1.45; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--spring); }
.q-explain.in { opacity: 1; transform: none; } .q-explain .btn { margin-left: auto; flex: none; }
.q-explain .ok { color: #3ee6a8; font-weight: 900; } .q-explain .bad { color: #ff8fa3; font-weight: 900; }
.q-end { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; padding: 10px 0; animation: q-in .5s var(--spring); }
.q-end-char .char { width: 100%; height: auto; }
@media (max-width: 760px) { .academy-hero { grid-template-columns: 1fr; } .academy-char { display: none; } .q-choices { grid-template-columns: 1fr; } .q-end { grid-template-columns: 1fr; } }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------------------------------------------------------------- clans */
.clan-badge { position: relative; display: inline-grid; place-items: center; width: var(--s); height: calc(var(--s) * 1.1); flex: none; vertical-align: middle; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3)); }
.clan-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cb-ico { position: relative; color: #2b1d4a; margin-top: -8%; } .cb-ico .ico { width: calc(var(--s) * .44); height: calc(var(--s) * .44); stroke-width: 2.4; }
.clan-tag { font-weight: 900; color: var(--cc); font-size: .85em; letter-spacing: .02em; }
.clans-hero { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: center; margin-top: 6px; }
.clans-art { position: relative; height: 200px; }
.ca-badge { position: absolute; top: calc(30px + var(--k) * 20px); left: calc(var(--k) * 90px); animation: float 4s calc(var(--k) * -1.3s) ease-in-out infinite; transform: rotate(calc((var(--k) - 1) * 10deg)); }
.clan-table { padding: 6px; }
.clan-row, .member-row { display: grid; grid-template-columns: 40px auto 1fr auto auto auto auto; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; color: inherit; text-decoration: none; transition: background .2s, transform .3s var(--spring); }
.member-row { grid-template-columns: 40px auto 1fr auto auto auto auto; }
.clan-row:hover, .member-row:hover { background: rgba(255, 255, 255, .05); }
.clan-row:hover { transform: translateX(4px); }
.member-row.me { background: rgba(255, 210, 63, .1); box-shadow: inset 0 0 0 2px rgba(255, 210, 63, .35); }
.member-row a { color: inherit; text-decoration: none; }
.cr-rank { font-weight: 900; font-size: 18px; text-align: center; color: var(--faint); } .cr-rank.top { font-size: 24px; }
.cr-desc { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-stat { display: flex; flex-direction: column; align-items: flex-end; min-width: 64px; font-size: 13px; color: var(--muted); }
.cr-stat b { font-size: 18px; color: var(--text); font-family: var(--display); } .cr-stat small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.cr-stat.wide { min-width: 110px; }
.role { font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 7px; margin-left: 4px; }
.role.leader { background: var(--accent); color: #1d1240; } .role.officer { background: rgba(76, 201, 240, .2); color: #4cc9f0; }
.member-acts { gap: 4px; } .member-acts .btn { padding: 6px; }
.clan-banner { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; padding: 28px; margin-top: 14px; border-radius: 26px; overflow: hidden;
  background: radial-gradient(circle at 12% 40%, color-mix(in srgb, var(--cc) 40%, transparent), transparent 55%), var(--panel); box-shadow: 0 6px 0 rgba(0, 0, 0, .25), inset 0 0 0 3px color-mix(in srgb, var(--cc) 60%, transparent); }
.clan-banner::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255, 255, 255, .025) 22px 44px); pointer-events: none; }
.cbn-badge { animation: badge-in .8s var(--spring) both; } .cbn-badge .clan-badge { filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .3)) drop-shadow(0 0 30px color-mix(in srgb, var(--cc) 60%, transparent)); }
@keyframes badge-in { from { transform: scale(.3) rotate(-30deg); opacity: 0; } }
.cbn-actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.clan-podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: end; max-width: 720px; margin: 26px auto 0; }
.cp-spot { display: flex; flex-direction: column; align-items: center; color: inherit; text-decoration: none; animation: rise .6s calc(var(--k) * 120ms + 200ms) var(--spring) both; }
.cp-char { width: 70%; } .cp-spot.p1 .cp-char { width: 82%; }
.cp-char .char { width: 100%; height: auto; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .3)); }
.cp-block { width: 100%; margin-top: -10px; border-radius: 16px 16px 6px 6px; background: var(--panel); box-shadow: 0 5px 0 rgba(0, 0, 0, .25); display: flex; flex-direction: column; align-items: center; padding: 14px 8px; gap: 2px; }
.cp-spot.p1 .cp-block { min-height: 120px; background: linear-gradient(var(--accent), var(--accent-d)); color: #1d1240; } .cp-spot.p2 .cp-block { min-height: 90px; } .cp-spot.p3 .cp-block { min-height: 70px; }
.cp-medal { font-size: 26px; } .cp-block small { font-weight: 800; opacity: .75; }
.clan-form .cf-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; } .cf-name { font-family: var(--display); font-size: 22px; font-weight: 800; }
.cf-preview .clan-badge { animation: badge-in .5s var(--spring); }
.cf-emblems { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.cf-emblems button { aspect-ratio: 1; border: 0; border-radius: 12px; background: rgba(0, 0, 0, .25); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: transform .25s var(--spring); }
.cf-emblems button:hover { transform: scale(1.1); color: var(--text); } .cf-emblems button.on { background: var(--accent); color: #1d1240; }
@media (max-width: 900px) { .clans-hero { grid-template-columns: 1fr; } .clans-art { display: none; } .clan-banner { grid-template-columns: 1fr; } .clan-row, .member-row { grid-template-columns: 34px auto 1fr auto; } .cr-stat.wide, .clan-row .chip { display: none; } }
.chip svg.c, .chip svg.gem, .faint svg.c, p svg.c, .btn svg.c, .btn svg.gem { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }

/* ---------------------------------------------------------------- intros */
.intro { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: #1a0f3d; overflow: hidden; cursor: pointer; animation: intro-in .45s var(--ease) both; }
.intro.out { animation: intro-out .45s var(--ease) forwards; }
@keyframes intro-in { from { clip-path: circle(0 at 50% 50%); } to { clip-path: circle(150% at 50% 50%); } }
@keyframes intro-out { to { opacity: 0; transform: scale(1.06); } }
.intro-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--mc, #ffd23f) 45%, #2a1866), #140a33 70%); }
.intro-bg.vs { background: linear-gradient(100deg, #4cc9f0 0 49.6%, #1d1240 49.6% 50.4%, #ff5c8a 50.4%); }
.intro-bg.vs::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 20%, rgba(20, 10, 50, .7)); }
.intro-bg.calm { --mc: #6c8cff; }
.intro-bg i { position: absolute; left: 50%; top: 55%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, .07) 0 8deg, transparent 8deg 22deg); animation: spin 40s linear infinite; }
.intro-bg i:nth-child(2) { width: 60vmax; height: 60vmax; margin: -30vmax 0 0 -30vmax; background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 65%); animation: pulse-soft 2.4s ease-in-out infinite; }
.intro-bg i:nth-child(3) { background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(0, 0, 0, .35)); animation: none; }
@keyframes pulse-soft { 50% { transform: scale(1.15); opacity: .7; } }
.intro-skip { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 13px; color: rgba(255, 255, 255, .55); }
.intro-solo { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 50px; align-items: center; max-width: 1100px; padding: 0 40px; }
.ip { display: flex; flex-direction: column; align-items: center; }
.ip-char { width: min(32vh, 300px); animation: ip-in .8s var(--spring) both; }
.ip-char.big { width: min(42vh, 360px); }
.ip-char .char { width: 100%; height: auto; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .45)); }
@keyframes ip-in { from { opacity: 0; transform: translateY(80px) scale(.6); } }
.ip-plate { display: flex; align-items: center; gap: 10px; margin-top: -8px; padding: 8px 18px 8px 8px; border-radius: 18px; background: rgba(20, 10, 50, .85); box-shadow: 0 5px 0 rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 210, 63, .6);
  font-size: 20px; animation: ip-in .7s .2s var(--spring) both; }
.ip-plate small { display: block; font-size: 12px; font-weight: 800; color: var(--muted); }
.ip-lv { width: 40px; height: 40px; border-radius: 13px; background: var(--accent); color: #1d1240; font-weight: 900; display: grid; place-items: center; font-size: 18px; box-shadow: 0 3px 0 var(--accent-d); }
.intro-info { animation: info-in .7s .15s var(--spring) both; }
.intro-info h1 { font-size: clamp(56px, 9vw, 120px); margin: 4px 0; line-height: .95; text-shadow: 0 6px 0 rgba(0, 0, 0, .25); }
.intro-info p { font-weight: 800; color: var(--muted); font-size: 18px; margin: 0; }
@keyframes info-in { from { opacity: 0; transform: translateX(60px); } }
.cd { font-family: var(--display); font-weight: 900; font-size: 120px; line-height: 1; height: 130px; margin-top: 16px; color: #fff; text-shadow: 0 8px 0 rgba(0, 0, 0, .3); }
.cd.tick { animation: cd-pop .7s var(--spring) both; }
.cd.go { color: var(--accent); animation: cd-go .6s var(--spring) both; }
@keyframes cd-pop { 0% { transform: scale(2.4); opacity: 0; } 30% { transform: scale(.9); opacity: 1; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity: .9; } }
@keyframes cd-go { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.25) rotate(4deg); opacity: 1; } 100% { transform: scale(1.1); } }
.vs-row { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; width: min(1200px, 96vw); }
.vs-row .ip.left { animation: vs-left .8s var(--spring) both; } .vs-row .ip.right { animation: vs-right .8s var(--spring) both; }
@keyframes vs-left { from { transform: translateX(-60vw); } } @keyframes vs-right { from { transform: translateX(60vw); } }
.vs-mid { text-align: center; color: #fff; }
.vs-bolt { font-family: var(--display); font-size: clamp(80px, 12vw, 160px); font-weight: 900; color: #ffd23f; -webkit-text-stroke: 6px #1d1240; paint-order: stroke; text-shadow: 0 10px 0 rgba(0, 0, 0, .35);
  animation: vs-slam .7s .5s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes vs-slam { from { transform: scale(4) rotate(-20deg); opacity: 0; } }
.vs-mid .cd { font-size: 72px; height: 80px; }
.lineup-head { position: absolute; top: 8vh; left: 0; right: 0; text-align: center; animation: info-in .6s var(--spring) both; }
.lineup-head h1 { font-size: clamp(48px, 7vw, 96px); margin: 0; }
.lineup { position: relative; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; width: min(1300px, 96vw); margin-top: 6vh; }
.lu { width: min(15vw, 170px); animation: ip-in .7s calc(var(--k) * 120ms) var(--spring) both; }
.lu .ip-char { width: 100%; } .lu .ip-plate { font-size: 14px; padding: 5px 10px 5px 5px; } .lu .ip-lv { width: 28px; height: 28px; font-size: 13px; }
.lineup-cd { position: absolute; bottom: 10vh; left: 0; right: 0; text-align: center; } .lineup-cd .cd { font-size: 90px; }
.intro.intro-round { background: transparent; pointer-events: none; animation: none; }
.round-splash { position: relative; text-align: center; color: #fff; }
.rs-band { position: absolute; left: -60vw; right: -60vw; top: 50%; height: 150px; margin-top: -75px; background: linear-gradient(90deg, transparent, rgba(29, 18, 64, .92) 20%, rgba(29, 18, 64, .92) 80%, transparent);
  animation: rs-band 1.5s var(--ease) both; }
.round-splash h1 { position: relative; font-size: clamp(60px, 9vw, 110px); margin: 0; letter-spacing: .02em; animation: rs-text 1.5s var(--spring) both; text-shadow: 0 6px 0 rgba(0, 0, 0, .3); }
.round-splash p { position: relative; margin: 0; font-weight: 900; color: var(--accent); animation: rs-text 1.5s .06s var(--spring) both; }
@keyframes rs-band { 0% { transform: scaleY(0); } 20%, 80% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes rs-text { 0% { transform: translateX(-40vw) skewX(-20deg); opacity: 0; } 25% { transform: translateX(0) skewX(0); opacity: 1; } 75% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(40vw) skewX(20deg); opacity: 0; } }
.finish-wrap { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; color: #fff; }
.fin-score { font-size: clamp(64px, 10vw, 130px); margin: 0; } .fin-score small { font-size: .35em; color: var(--muted); }
.finish-wrap p { font-weight: 800; font-size: 18px; color: var(--muted); }
@media (max-width: 760px) { .intro-solo, .finish-wrap { grid-template-columns: 1fr; text-align: center; gap: 10px; } .vs-row { grid-template-columns: 1fr; } }
.bot-face { overflow: hidden; } .bot-face .char-portrait { border-radius: inherit; }
.about { margin: 14px 0; } .about-skel { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .08); margin: 8px 0; animation: pulse-soft 1.4s ease-in-out infinite; } .about-skel.short { width: 60%; }
.about.in { animation: rise .45s var(--spring); }
.about-text { margin: 0; line-height: 1.6; font-size: 14.5px; color: var(--text); opacity: .92; max-height: 9.6em; overflow: auto; }
.about-tip { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(62, 230, 168, .1); box-shadow: inset 0 0 0 2px rgba(62, 230, 168, .35); font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.about-tip .ico { flex: none; color: #3ee6a8; } .about-tip a { color: #3ee6a8; font-weight: 900; }
.about-credit { margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--faint); } .about-credit a { color: inherit; text-decoration: underline; }

/* ---------------------------------------------------------------- profile v2 */
.profile-head.v2 { min-height: 380px; box-shadow: 0 8px 0 rgba(0, 0, 0, .25), inset 0 0 0 3px color-mix(in srgb, var(--pacc) 55%, transparent); }
.ph-char { position: absolute; right: 6%; bottom: 52px; height: 300px; z-index: 1; animation: hc-in .9s .2s var(--spring) both; }
.ph-char .char { height: 100%; width: auto; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .4)); }
.ph-motto { position: absolute; right: calc(6% + 230px); top: 34px; max-width: 340px; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: #fff; color: #1d1240; font-family: var(--display);
  font-weight: 800; font-size: 19px; box-shadow: 0 5px 0 rgba(0, 0, 0, .25); z-index: 2; animation: pop .6s .7s var(--spring) both; }
.ph-fav { position: absolute; left: 24px; top: 20px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 14px; background: rgba(20, 10, 50, .7); font-weight: 800; font-size: 13px; backdrop-filter: blur(6px); }
.ph-fav .flag-img { width: 34px; height: 24px; border-radius: 5px; }
.profile-head.v2 .profile-id { position: relative; z-index: 2; width: 100%; padding-right: 240px; }
.profile-head.v2 .title { color: var(--pacc); }
.widgets { display: grid; gap: 16px; margin-top: 22px; }
.widget { animation: rise .5s var(--spring) both; }
.widget-clan { display: flex; align-items: center; gap: 18px; padding: 16px 20px; color: inherit; text-decoration: none; box-shadow: 0 6px 0 rgba(0, 0, 0, .22), inset 0 0 0 2px color-mix(in srgb, var(--cc) 50%, transparent); }
.widget-clan h3 { margin: 2px 0 0; } .widget-clan > .ico:last-child { margin-left: auto; }
.widget-strip { display: flex; align-items: center; gap: 26px; padding: 16px 22px; flex-wrap: wrap; }
.widget-strip > span:first-child, .widget-strip > .ico:first-child { color: var(--accent); }
.widget-strip b { font-family: var(--display); font-size: 22px; margin-right: 4px; }
.ach-mini { display: flex; gap: 6px; } .ach-mini .am { width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .07); display: grid; place-items: center; font-size: 20px; animation: pop .5s var(--spring) both; }
@media (max-width: 900px) { .ph-char, .ph-motto { display: none; } .profile-head.v2 .profile-id { padding-right: 0; } }
.ach-mini .am { color: var(--accent); }
.legal .tabs a { padding: 11px 18px; border-radius: 14px; background: rgba(0, 0, 0, .2); color: var(--muted); font-weight: 900; text-decoration: none; }
.legal .tabs a.on { background: var(--accent); color: #1d1240; }
.legal-body { max-width: 860px; line-height: 1.7; } .legal-body h3 { margin: 22px 0 6px; } .legal-body p, .legal-body li { font-weight: 600; color: var(--text); opacity: .9; }
.legal-body a { color: var(--accent); } .lg-note { padding: 10px 14px; border-radius: 12px; background: rgba(255, 210, 63, .12); font-size: 13.5px; }
.check-line { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.45; cursor: pointer; }
.check-line input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; } .check-line a { color: var(--accent); }
.usd { font-size: .78em; opacity: .7; font-weight: 800; margin-left: 2px; }
.gplane { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events: none; transition: opacity .25s; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)); }
.gplane svg { width: 100%; height: 100%; display: block; }
.gtrail { position: absolute; left: 0; top: 0; width: 3.5px; height: 3.5px; margin: -1.75px 0 0 -1.75px; border-radius: 50%; background: #fff; pointer-events: none; }
.map-style-tag { position: absolute; left: 50%; top: 12px; z-index: 900; transform: translateX(-50%) scale(.8); padding: 6px 14px; border-radius: 12px; background: rgba(29, 18, 64, .9); color: #fff; font-weight: 900; font-size: 13px; opacity: 0; pointer-events: none; }
.map-style-tag.show { animation: style-tag 1.4s var(--spring) both; }
@keyframes style-tag { 0% { opacity: 0; transform: translateX(-50%) scale(.6); } 15%, 75% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) scale(.9); } }
/* in-game chat */
.game-chat { position: absolute; left: 18px; bottom: 96px; z-index: 30; width: min(380px, 60vw); pointer-events: none; }
.gc-feed { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.gc-msg { max-width: 100%; padding: 6px 11px; border-radius: 12px 12px 12px 4px; background: rgba(20, 10, 50, .78); backdrop-filter: blur(6px); color: #fff; font-size: 14px; font-weight: 700;
  animation: gc-in .35s var(--spring) both; transition: opacity 1s; word-break: break-word; }
.gc-msg b { color: var(--accent); margin-right: 4px; } .gc-msg.me b { color: #3ee6a8; } .gc-msg.sys { font-style: italic; opacity: .8; }
.gc-msg.old { opacity: 0; } .game-chat.open .gc-msg.old { opacity: .85; }
@keyframes gc-in { from { opacity: 0; transform: translateX(-20px) scale(.9); } }
.game-chat input { display: none; margin-top: 8px; pointer-events: auto; background: rgba(20, 10, 50, .92); }
.game-chat.open input { display: block; animation: gc-in .25s var(--spring); }
.gc-hint { margin-top: 6px; font-size: 11.5px; font-weight: 800; color: rgba(255, 255, 255, .55); display: flex; gap: 6px; align-items: center; } .gc-hint .ico { width: 13px; height: 13px; }
.game-chat.open .gc-hint { display: none; }

/* ---------------------------------------------------------------- rank badges */
.rank-badge { position: relative; display: inline-block; width: var(--s); height: var(--s); flex: none; vertical-align: middle; }
.rank-badge svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); }
.rank-badge.anim svg { animation: rb-float 4s ease-in-out infinite; }
.rank-badge.anim .rb-shine { animation: rb-shine 3.2s ease-in-out infinite; }
.rank-badge.anim .rb-rays { transform-origin: 60px 64px; transform-box: view-box; animation: spin 16s linear infinite; }
.rank-badge.anim .rb-wing { transform-origin: 60px 70px; transform-box: view-box; animation: rb-wing 2.8s ease-in-out infinite; }
.rank-badge.anim .rb-halo { transform-origin: 60px 64px; transform-box: view-box; animation: spin 24s linear infinite reverse; }
.rank-badge.anim .rb-crown { transform-origin: 60px 20px; transform-box: view-box; animation: rb-crown 3s ease-in-out infinite; }
.rank-badge.anim.r-diamond svg, .rank-badge.anim.r-master svg, .rank-badge.anim.r-grandmaster svg, .rank-badge.anim.r-legend svg { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)) drop-shadow(0 0 14px var(--rg)); }
.rank-badge.anim.r-legend svg { animation: rb-float 4s ease-in-out infinite, rb-legend 3s ease-in-out infinite; }
@keyframes rb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
@keyframes rb-shine { 0%, 55% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(200px) skewX(-20deg); } }
@keyframes rb-wing { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.9) translateY(3px); } }
@keyframes rb-crown { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-2px); } }
@keyframes rb-legend { 0%, 100% { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)) drop-shadow(0 0 14px #ffb547); } 50% { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)) drop-shadow(0 0 30px #fff1c4); } }
.rb-spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px var(--rg); opacity: 0; animation: rb-spark 2.4s ease-in-out infinite; }
.rb-spark:nth-of-type(1) { left: 12%; top: 20%; } .rb-spark:nth-of-type(2) { right: 10%; top: 38%; animation-delay: .8s; } .rb-spark:nth-of-type(3) { left: 30%; bottom: 8%; animation-delay: 1.6s; }
@keyframes rb-spark { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.2); } }
.rank-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 10px; font-weight: 900; font-size: 12.5px; color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, transparent); }
[data-motion="reduced"] .rank-badge * { animation: none !important; }

/* ---------------------------------------------------------------- ranked */
.ranked-hero { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; padding: 30px 36px; margin-top: 8px; border-radius: 30px; overflow: hidden;
  background: radial-gradient(circle at 16% 50%, color-mix(in srgb, var(--rc) 38%, transparent), transparent 55%), var(--panel); box-shadow: 0 8px 0 rgba(0, 0, 0, .25), inset 0 0 0 3px color-mix(in srgb, var(--rc) 55%, transparent); }
.ranked-hero::after { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 16% 50%, rgba(255, 255, 255, .035) 0 10deg, transparent 10deg 24deg); animation: spin 60s linear infinite; pointer-events: none; transform-origin: 16% 50%; }
.rh-badge { position: relative; z-index: 1; animation: badge-in .9s var(--spring) both; }
.rh-info { position: relative; z-index: 1; }
.season-pill { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 12px; background: rgba(255, 210, 63, .14); color: var(--accent); font-weight: 900; font-size: 13px; }
.rh-title { font-size: clamp(46px, 6vw, 84px); margin: 6px 0 4px; color: var(--rc); text-shadow: 0 6px 0 rgba(0, 0, 0, .25); }
.rh-sub { font-weight: 700; margin: 0 0 14px; font-size: 16px; }
.rh-bar { height: 14px; border-radius: 8px; background: rgba(0, 0, 0, .35); overflow: hidden; max-width: 520px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .3); }
.rh-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc, #ffd23f) 70%, #fff), var(--rc, #ffd23f)); box-shadow: 0 0 14px var(--rc, #ffd23f); transition: width 1.2s var(--ease); }
.rh-next { margin-top: 8px; font-weight: 800; font-size: 13.5px; }
.season-clock { margin-top: 18px; display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 14px; background: rgba(0, 0, 0, .25); font-weight: 700; font-size: 14px; }
.season-clock b { font-family: var(--mono); color: var(--accent); font-size: 16px; }
.ranked-modes { grid-template-columns: 1fr 1fr; margin-top: 20px; }
.rmode { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 22px; align-items: start; }
.rmode h2 { margin: 4px 0 8px; font-size: 24px; } .rmode p { font-weight: 700; font-size: 14px; margin: 0 0 16px; }
.rm-art { font-size: 50px; width: 80px; height: 80px; border-radius: 22px; background: rgba(255, 255, 255, .06); display: grid; place-items: center; animation: float 4s ease-in-out infinite; }
.rmode.duel { box-shadow: 0 6px 0 rgba(0, 0, 0, .22), inset 0 0 0 2px rgba(255, 92, 138, .4); }
.ladder { display: flex; gap: 10px; overflow-x: auto; padding: 16px 4px 10px; }
.rung { position: relative; flex: 1 0 120px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 18px; background: var(--panel); box-shadow: 0 4px 0 rgba(0, 0, 0, .2); animation: rise .5s calc(var(--i) * 60ms) var(--spring) both; opacity: .72; }
.rung b { color: var(--rc); } .rung small { font-weight: 800; color: var(--faint); }
.rung.passed { opacity: 1; } .rung.me { opacity: 1; box-shadow: 0 4px 0 rgba(0, 0, 0, .2), inset 0 0 0 3px var(--rc), 0 0 30px color-mix(in srgb, var(--rc) 40%, transparent); transform: translateY(-6px); }
.rung .you { position: absolute; top: -10px; padding: 2px 8px; border-radius: 8px; background: var(--rc); color: #1d1240; font-weight: 900; font-size: 11px; }
.rewards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rw { display: flex; gap: 12px; padding: 14px; align-items: flex-start; position: relative; animation: rise .5s calc(var(--i) * 50ms) var(--spring) both; }
.rw ul { margin: 6px 0 0; padding-left: 16px; font-size: 12.5px; font-weight: 700; color: var(--muted); } .rw-line { font-weight: 800; font-size: 13.5px; margin-top: 2px; }
.rw.peak { box-shadow: 0 6px 0 rgba(0, 0, 0, .22), inset 0 0 0 3px var(--rc); } .rw .chip { position: absolute; top: 10px; right: 10px; }
.rw.next { background: repeating-linear-gradient(-45deg, var(--panel) 0 14px, color-mix(in srgb, var(--panel) 80%, #000) 14px 28px); }
.rw-q { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-family: var(--display); font-size: 34px; font-weight: 900; background: rgba(255, 255, 255, .08); color: var(--accent); animation: q-pulse 2s ease-in-out infinite; }
@keyframes q-pulse { 50% { transform: scale(1.1) rotate(-6deg); box-shadow: 0 0 20px rgba(255, 210, 63, .4); } }
.lb-ranked { padding: 6px; } .lbr-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; color: inherit; text-decoration: none; transition: background .2s; }
.lbr-row:hover { background: rgba(255, 255, 255, .05); } .lbr-row.me { background: rgba(255, 210, 63, .1); }
.lbr-pos { width: 30px; text-align: center; font-weight: 900; color: var(--faint); } .lbr-pos.top { font-size: 22px; }
.lbr-r { display: flex; flex-direction: column; align-items: flex-end; } .lbr-r small { font-size: 11px; font-weight: 800; color: var(--faint); }
.rr-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; } .rr-row:last-child { border: 0; }
.rr-d { margin-left: auto; font-family: var(--mono); } .rr-d.up { color: #3ee6a8; } .rr-d.down { color: #ff8fa3; }
.queue { text-align: center; padding: 10px; }
.radar { position: relative; width: 200px; height: 200px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(62, 230, 168, .12), transparent 70%); }
.radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(62, 230, 168, .4); animation: radar-ping 2.4s ease-out infinite; }
.radar i:nth-child(2) { animation-delay: .8s; } .radar i:nth-child(3) { animation-delay: 1.6s; }
.radar .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(62, 230, 168, .45), transparent 25%); animation: spin 2s linear infinite; }
@keyframes radar-ping { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.05); opacity: 0; } }
.q-time { font-size: 30px; font-weight: 800; margin: 6px 0 16px; }
.match-found { font-family: var(--display); font-size: 48px; font-weight: 900; color: var(--accent); padding: 60px 0; animation: cd-go .6s var(--spring) both; }
.rank-wrap { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 50px; align-items: center; color: #fff; max-width: 1000px; }
.rk-badge { animation: ip-in .8s var(--spring) both; } .rk-badge.swap { animation: rk-swap .9s var(--spring) both; }
@keyframes rk-swap { 0% { transform: scale(1); } 30% { transform: scale(.2) rotate(-90deg); filter: brightness(3); } 100% { transform: scale(1); filter: none; } }
.rk-label { font-size: clamp(54px, 8vw, 104px); margin: 4px 0; }
.rk-rating { display: flex; align-items: baseline; gap: 16px; font-size: 54px; font-weight: 900; } .rk-rating .num { font-family: var(--display); }
.rk-delta { font-family: var(--mono); font-size: 30px; padding: 2px 12px; border-radius: 12px; } .rk-delta.up { color: #3ee6a8; background: rgba(62, 230, 168, .14); } .rk-delta.down { color: #ff8fa3; background: rgba(255, 92, 138, .14); }
.intro-rank .rh-bar { margin: 14px 0; max-width: 460px; }
.intro-rank.ranked-up .rk-info .eyebrow { font-size: 22px; color: #ffd23f; animation: cd-go .6s var(--spring) both; }
@media (max-width: 900px) { .ranked-hero, .ranked-modes, .rank-wrap { grid-template-columns: 1fr; } }
/* pvp battles */
.pvp-grid { grid-template-columns: 380px 1fr; gap: 18px; align-items: start; }
.pvp-lists { display: grid; gap: 14px; } .pvp-lists h3 { margin-bottom: 8px; }
.pvp-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .pvp-row:last-child { border: 0; }
.pvp-face { width: 46px; height: 46px; border-radius: 14px; overflow: hidden; flex: none; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.pot { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 210, 63, .12); font-weight: 800; animation: pop .4s var(--spring); }
.pvp-res { font-family: var(--mono); } .pvp-res.up { color: #3ee6a8; } .pvp-res.down { color: #ff8fa3; }
.turn-clock { font-family: var(--mono); font-weight: 800; padding: 4px 10px; border-radius: 10px; background: rgba(0, 0, 0, .25); } .turn-clock:empty { display: none; }
.turn-clock.warn { color: #ff8fa3; animation: shake .5s; }
.dots { display: inline-flex; gap: 3px; vertical-align: middle; } .dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: dots 1.2s infinite; } .dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dots { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.mode-pill .badge { overflow: hidden; } .mode-pill .badge .char-portrait { border-radius: inherit; }
@media (max-width: 900px) { .pvp-grid { grid-template-columns: 1fr; } }
.season-chip { padding-left: 4px; text-decoration: none; color: var(--accent); background: rgba(255, 210, 63, .12); }
.ranked-cta { display: flex; align-items: center; gap: 18px; padding: 14px 20px; margin-bottom: 18px; color: inherit; text-decoration: none; box-shadow: 0 6px 0 rgba(0, 0, 0, .22), inset 0 0 0 2px color-mix(in srgb, var(--rc) 50%, transparent);
  background: radial-gradient(circle at 5% 50%, color-mix(in srgb, var(--rc) 25%, transparent), transparent 40%), var(--panel); transition: transform .3s var(--spring); }
.ranked-cta:hover { transform: translateY(-3px); } .ranked-cta h3 { margin: 2px 0; } .ranked-cta small { color: var(--muted); font-weight: 700; } .ranked-cta .btn { margin-left: auto; }
/* premium character animations */
.char .c-flame { transform-origin: 80px 70px; animation: c-flame .5s ease-in-out infinite alternate; }
@keyframes c-flame { from { transform: scaleY(1) skewX(-2deg); } to { transform: scaleY(1.08) skewX(2deg); } }
.char .c-visor { animation: c-visor 1.6s ease-in-out infinite alternate; }
@keyframes c-visor { from { transform: translateX(0); } to { transform: translateX(50px); } }
.char .c-halo { transform-origin: 80px 6px; animation: c-halo 2.6s ease-in-out infinite; }
@keyframes c-halo { 50% { transform: translateY(-4px) scaleX(1.05); } }
.char .c-jet { transform-origin: 80px 156px; animation: c-jet .18s linear infinite alternate; }
@keyframes c-jet { from { transform: scaleY(.8); opacity: .85; } to { transform: scaleY(1.2); opacity: 1; } }
.char .c-wings { transform-origin: 80px 130px; animation: c-wings 1.4s ease-in-out infinite; }
@keyframes c-wings { 50% { transform: scaleX(1.12) translateY(-3px); } }
.char .c-pet { transform-origin: 125px 110px; animation: c-pet 2.2s ease-in-out infinite; }
@keyframes c-pet { 50% { transform: translateY(-6px) rotate(-4deg); } }
.char .c-cape { transform-origin: 80px 116px; animation: c-cape 2.4s ease-in-out infinite; }
@keyframes c-cape { 50% { transform: skewX(4deg) scaleX(1.04); } }

.avatar .ring.fire { background: conic-gradient(#ff3b2a, #ff9f43, #ffd23f, #ff9f43, #ff3b2a); -webkit-mask: radial-gradient(circle, transparent 60%, #000 63%); mask: radial-gradient(circle, transparent 60%, #000 63%); animation: spin 1.6s linear infinite; filter: drop-shadow(0 0 8px #ff7a2a); }
.avatar .ring.diamond { background: conic-gradient(#c9e6ff, #6cb8ff, #fff, #b388ff, #c9e6ff); -webkit-mask: radial-gradient(circle, transparent 60%, #000 64%); mask: radial-gradient(circle, transparent 60%, #000 64%); animation: spin 5s linear infinite; filter: drop-shadow(0 0 10px #c9e6ff); }
/* style shop */
.style-hero { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: center; padding: 22px 28px; border-radius: 26px; background: linear-gradient(110deg, #3a1a6a, var(--panel) 60%); box-shadow: 0 6px 0 rgba(0, 0, 0, .22), inset 0 0 0 3px rgba(255, 143, 208, .5); }
.sh-char .char { width: 100%; height: auto; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .35)); }
.style-prev { width: 120px; height: 120px; display: grid; place-items: center; } .style-prev .char { width: 100%; height: 100%; }
.style-tile { cursor: pointer; position: relative; } .style-tile:hover .style-prev { transform: scale(1.08) rotate(-2deg); } .style-prev { transition: transform .35s var(--spring); }
.item-tag { position: absolute; top: 10px; right: 10px; font-size: 10.5px; }
.banner-prev { width: 170px; height: 80px; border-radius: 14px; display: block; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
.try-on { text-align: center; } .try-stage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; padding: 16px; border-radius: 20px; background: radial-gradient(circle at 50% 70%, rgba(255, 210, 63, .18), transparent 70%), rgba(0, 0, 0, .2); }
.try-stage .char { width: 100%; height: auto; }
.char .c-flag { transform-origin: 120px 60px; animation: c-flag 1.8s ease-in-out infinite; }
@keyframes c-flag { 50% { transform: skewY(-6deg) scaleX(.92); } }

/* soft cloud layer drifting around the home globe (never blocks clicks) */
.globe-clouds { position: absolute; inset: -4%; pointer-events: none; z-index: 350; }
.globe-clouds i { position: absolute; width: 34%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,.18) 60%, transparent);
  filter: blur(6px); top: calc(8% + var(--k) * 15%); left: -30%; animation: gcloud calc(46s + var(--k) * 9s) linear infinite; animation-delay: calc(var(--k) * -11s); opacity: .55; }
.globe-clouds i:nth-child(even) { height: 10%; width: 26%; opacity: .4; }
@keyframes gcloud { from { transform: translateX(0); } to { transform: translateX(420%); } }
[data-motion="reduced"] .globe-clouds { display: none; }

/* ---------------------------------------------------------------- end-of-game scene */
.result-scene { position: fixed; inset: 0; z-index: 2500; display: grid; grid-template-columns: 1fr minmax(560px, 52%) 1fr; overflow: hidden; animation: reveal-in .8s cubic-bezier(.2,.8,.2,1) both;
  background: radial-gradient(120% 90% at 10% 0%, var(--bg-3), transparent 55%), radial-gradient(90% 80% at 100% 100%, var(--bg-2), transparent 60%), var(--bg); }
.result-scene.out { animation: intro-out .45s var(--ease) forwards; }
.rsc-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .rsc-bg .blob { position: absolute; border-radius: 50%; filter: blur(90px); }
.rsc-left { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; }
.rsc-head { text-align: center; animation: rise .6s .3s var(--spring) both; } .rsc-head h1 { font-size: clamp(48px, 6vw, 86px); margin: 4px 0; } .rsc-head p { color: var(--muted); font-weight: 800; margin: 0; }
.rsc-stage { display: flex; align-items: flex-end; justify-content: center; gap: 4vw; margin-top: 18px; }
.rs-fig { display: flex; flex-direction: column; align-items: center; animation: ip-in .9s .2s var(--spring) both; position: relative; }
.rs-fig .char { width: min(44vh, 320px); height: auto; filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .35)); }
.rs-fig.right { animation-delay: .45s; } .rs-fig.lost .char { filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .35)) saturate(.7) brightness(.9); }
.rs-emote { position: absolute; top: 2%; right: 4%; font-size: 40px; animation: float 2.4s ease-in-out infinite; z-index: 2; }
.rsc-vs { align-self: center; font-family: var(--display); font-size: 70px; font-weight: 900; color: #ffd23f; -webkit-text-stroke: 5px #1d1240; paint-order: stroke; animation: vs-slam .7s .6s cubic-bezier(.2, 1.8, .4, 1) both; }
.rsc-panel { position: relative; display: flex; flex-direction: column; margin: 18px 18px 18px 0; border-radius: 24px; overflow: hidden; background: var(--panel); box-shadow: 0 8px 0 rgba(0,0,0,.25), inset 0 0 0 2px var(--line-hi);
  animation: panel-slide .7s .4s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes panel-slide { from { opacity: 0; transform: translateX(80px); } }
.rsc-tab { padding: 12px 18px; font-weight: 900; display: flex; gap: 8px; align-items: center; background: rgba(0,0,0,.2); }
.rsc-details { position: relative; flex: 1; min-height: 0; }
.rsc-details .summary { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: 42% 1fr; animation: none; background: transparent; }
.rsc-details .summary-side { box-shadow: none; padding: 18px 20px; background: transparent; }
.rsc-details .summary-side .total { font-size: 46px; }
@media (max-width: 900px) { .result-scene { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; } .rsc-panel { margin: 0 12px 12px; min-height: 70vh; } .rs-fig .char { width: 26vh; } }
.break-even { margin: -6px 0 14px; padding: 8px 12px; border-radius: 12px; background: rgba(255,92,138,.12); font-weight: 800; font-size: 13.5px; display: flex; gap: 8px; align-items: center; }

/* legendary forms */
.char .fx-aura { transform-box: fill-box; transform-origin: center; animation: fx-aura 3s ease-in-out infinite; filter: blur(14px); }
@keyframes fx-aura { 50% { opacity: .35; transform: scale(1.06); } }
.char .fx-smoke { transform-box: fill-box; transform-origin: center; animation: fx-smoke 3.6s var(--d) ease-out infinite both; }
@keyframes fx-smoke { 0% { opacity: 0; transform: translateY(0) scale(.6); } 30% { opacity: .55; } 100% { opacity: 0; transform: translateY(-70px) scale(1.6); } }
.char .fx-ember { animation: fx-ember 2.6s var(--d) linear infinite both; }
@keyframes fx-ember { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -120px); } }
.char .fx-snow { animation: fx-snow 4s var(--d) linear infinite both; }
@keyframes fx-snow { from { opacity: 0; transform: translateY(0) rotate(0); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(150px) rotate(180deg); } }
.char .fx-bolt { opacity: 0; animation: fx-bolt 2.2s steps(1) infinite; } .char .fx-bolt.b2 { animation-delay: 1.1s; }
@keyframes fx-bolt { 0%, 8% { opacity: 1; } 9%, 100% { opacity: 0; } }
.char .fx-glint { transform-box: fill-box; transform-origin: center; animation: rb-spark 2.2s var(--d) ease-in-out infinite both; }
.char .form-neon { filter: drop-shadow(0 0 4px #ff3bd4) drop-shadow(0 0 2px #3ef0ff); }
.char .form-inferno .c-head { filter: drop-shadow(0 0 6px #ff7a2a); }
.char .form-shadow { filter: drop-shadow(0 0 8px #6a4cff); }
.banner-credit { position: absolute; right: 12px; top: 10px; z-index: 3; font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.75); background: rgba(0,0,0,.35); padding: 2px 8px; border-radius: 8px; }

/* P-pin skins */
.ppin { overflow: visible; display: block; }
.ppin.pp-hue { animation: pp-hue 4s linear infinite; } @keyframes pp-hue { to { filter: hue-rotate(360deg); } }
.ppin.pp-flicker .pp-glow { animation: pp-flick .35s ease-in-out infinite alternate; } @keyframes pp-flick { from { opacity: .3; } to { opacity: .7; stroke-width: 10; } }
.ppin.pp-pulse .pp-glow { animation: pp-pulse 2s ease-in-out infinite; } @keyframes pp-pulse { 50% { opacity: .75; stroke-width: 11; } }
.ppin.pp-zap .pp-bolt { animation: fx-bolt 1.4s steps(1) infinite; } .ppin.pp-zap .pp-glow { animation: pp-flick .2s steps(2) infinite alternate; }
.ppin.pp-shine { animation: pp-shine 2.6s ease-in-out infinite; } @keyframes pp-shine { 50% { filter: brightness(1.35) drop-shadow(0 0 6px #fff); } }

/* player pins: P pin + explorer/rank tag */
.ppm { position: absolute; left: 0; top: 0; }
.ppm-pin { position: absolute; left: -17px; top: -38px; width: 34px; height: 41px; animation: pinDrop .45s var(--bounce) both; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.ppm-pin .ppin { width: 100%; height: 100%; }
.ppm-tag { position: absolute; left: -15px; top: -70px; display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.3);
  animation: ppm-tag .45s .15s var(--spring) both; transform-origin: 50% 100%; }
.ppm-face { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: block; background: #4cc9f0; }
.ppm-face img, .ppm-face .char-portrait { width: 100%; height: 100%; object-fit: cover; display: block; }
.ppm-rank { display: block; margin-right: 2px; }
.ppm-tag.r-legendary { box-shadow: 0 0 10px #ffb547, 0 3px 0 rgba(0,0,0,.3); } .ppm-tag.r-mythic { box-shadow: 0 0 12px #ff5c8a, 0 3px 0 rgba(0,0,0,.3); }
@keyframes ppm-tag { from { opacity: 0; transform: scale(.3); } }
.ppm-ring { position: absolute; left: -9px; top: -4px; width: 18px; height: 7px; border-radius: 50%; border: 2px solid #fff; opacity: 0; }
.ppm.locked .ppm-tag { box-shadow: 0 0 0 2.5px var(--accent), 0 3px 0 rgba(0,0,0,.3); }
.ppm.locked .ppm-ring { animation: gp-ring 1s ease-out both; }
/* the answer flag */
.tflag { position: absolute; left: -12px; top: -60px; width: 56px; height: 64px; animation: tf-in .7s cubic-bezier(.3, 1.7, .5, 1) both; transform-origin: 12px 61px; }
.tflag svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.tf-cloth { transform-origin: 13px 18px; transform-box: view-box; animation: tf-wave 1.6s ease-in-out infinite; }
@keyframes tf-wave { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-5deg) scaleX(.94); } }
@keyframes tf-in { 0% { transform: translateY(-60px) scale(.4); opacity: 0; } 60% { transform: translateY(0) scale(1.1, .9); opacity: 1; } 100% { transform: none; } }
.tf-ripple { position: absolute; left: 0; top: 54px; width: 24px; height: 10px; border-radius: 50%; border: 2.5px solid #d9402c; animation: tf-ripple 2.2s .4s ease-out infinite both; }
.tf-ripple.r2 { animation-delay: 1.5s; }
@keyframes tf-ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }
.leaflet-overlay-pane .dash-line { animation: dash-march 1.2s linear infinite; }
@keyframes dash-march { to { stroke-dashoffset: -20; } }

.reveal-panel.waiting { opacity: 0; transform: translateY(120px); pointer-events: none; }
.reveal-panel.in { animation: panel-in .8s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(80px) scale(.92) rotateX(18deg); } }
.reveal-panel.in .score-big { animation: score-pop .6s .3s var(--spring) both; } @keyframes score-pop { from { opacity: 0; transform: scale(.6); } }
.reveal-panel .scorebar i { transition-delay: .9s; }
.giss { position: absolute; left: 0; top: 0; width: 46px; height: 24px; margin: -12px 0 0 -23px; pointer-events: none; filter: drop-shadow(0 0 6px rgba(159,181,255,.8)); transition: opacity .3s; }
.giss svg { width: 100%; height: 100%; display: block; }
.globe-clouds { display: none; }

/* creatures: their rig sits a little higher than the human one */
.char.creature .c-head { transform-origin: 80px 96px; }
.char.creature .c-armL { transform-origin: 50px 106px; } .char.creature .c-armR { transform-origin: 110px 106px; }
.char.creature .c-eyes { transform-origin: 80px 70px; }
.char.creature .fx-core { animation: pp-shine 1.6s ease-in-out infinite; }
.char.cr-shadow .c-body { animation: c-float 3s ease-in-out infinite; } .char.cr-storm .c-all { animation: c-float 2.4s ease-in-out infinite; }
@keyframes c-float { 50% { transform: translateY(-5px); } }
.char.cr-inferno .c-head { animation: c-flame .45s ease-in-out infinite alternate, c-head 5s ease-in-out infinite; }

.ppm.plant .ppm-pin { animation: pin-plant .5s cubic-bezier(.3, 1.8, .5, 1) both; } .ppm.plant .ppm-tag { animation: ppm-tag .45s .08s var(--spring) both; }
.ppm.plant .ppm-ring { animation: gp-ring .8s ease-out both; }
@keyframes pin-plant { 0% { transform: translateY(-26px) scale(.6, 1.3); } 55% { transform: translateY(0) scale(1.25, .75); } 80% { transform: scale(.92, 1.1); } 100% { transform: none; } }
.ppm-tag::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-top-color: #fff; border-bottom: 0; }
.km-label { position: absolute; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))); white-space: nowrap; padding: 4px 10px; border-radius: 10px; background: #1d1240; color: #fff; font-weight: 900; font-size: 13px; box-shadow: 0 3px 0 rgba(0,0,0,.3), inset 0 0 0 2px var(--c); animation: km-pop .45s var(--spring) both; }
@keyframes km-pop { from { opacity: 0; scale: .6; } }

.rsc-side { position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6vh; }
.rsc-side .rs-fig .char { width: min(32vh, 230px); }
.rsc-center { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 22px 0; }
.rsc-center .rsc-head h1 { font-size: clamp(38px, 4.4vw, 64px); }
.rsc-center .rsc-panel { flex: 1; margin: 14px 0 0; }
.rsc-details .summary { grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr; }
.rsc-details .summary-side > .row:last-child { justify-content: center; position: sticky; bottom: 0; padding: 12px 0 4px; background: linear-gradient(transparent, var(--panel) 30%); }
@media (max-width: 1100px) { .result-scene { grid-template-columns: 1fr; overflow-y: auto; } .rsc-side { display: none; } .rsc-details .summary { grid-template-columns: 1fr; grid-template-rows: 40% 1fr; } .rsc-center { padding: 14px; min-height: 100vh; } }
.pv-sticker::before, .pv-sticker::after { content: none !important; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* distance ribbon */
.leaflet-overlay-pane .ribbon { filter: drop-shadow(0 0 4px rgba(255, 210, 63, .55)); }
.leaflet-overlay-pane .ribbon-shine { animation: ribbon-shine 1.4s linear infinite; }
@keyframes ribbon-shine { to { stroke-dashoffset: -52; } }
.spool { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 3px solid #1d1240; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.spool i { position: absolute; inset: 3px; border-radius: 50%; background: repeating-conic-gradient(#fff6 0 30deg, transparent 30deg 60deg); animation: spin .5s linear infinite; }
.spool.done { animation: spool-done .6s ease-in forwards; }
@keyframes spool-done { 40% { transform: scale(1.5); } 100% { transform: scale(0); opacity: 0; } }
.gorbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 290; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; }
.verify-strip { margin: 4px 0 10px; padding: 10px 16px; border-radius: 14px; background: rgba(255,210,63,.12); box-shadow: inset 0 0 0 2px rgba(255,210,63,.35); font-weight: 800; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.account-card { max-width: 520px; margin: 60px auto; text-align: center; } .account-card .btn { margin-top: 14px; }
.map-section { margin-bottom: 22px; } .ms-title { margin: 2px 0 10px; }
.map-card.community { box-shadow: 0 6px 0 rgba(0,0,0,.22), inset 0 0 0 2px rgba(255,143,208,.35); }
.cm-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; font-weight: 800; }
.cm-like { border: 0; border-radius: 10px; padding: 3px 9px; background: rgba(255,255,255,.08); color: var(--text); font: inherit; cursor: pointer; } .cm-like.on { background: #ff5c8a; color: #fff; }
.cm-preview { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(0,0,0,.25); font-weight: 700; }

/* Alpha: the shop is coming soon */
.soon-hero { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: center; padding: 24px 28px; margin-bottom: 20px; border-radius: 26px; overflow: hidden;
  background: repeating-linear-gradient(135deg, rgba(255, 210, 63, .07) 0 18px, transparent 18px 36px), linear-gradient(110deg, #2a1660, var(--panel) 70%);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .22), inset 0 0 0 3px rgba(255, 210, 63, .55); }
.soon-hero h2 { font-size: 30px; margin: 6px 0 8px; }
.soon-hero p { margin: 0 0 6px; font-weight: 700; max-width: 680px; }
.soon-lock { width: 96px; height: 96px; border-radius: 28px; display: grid; place-items: center; background: #ffd23f; color: #1d1240; box-shadow: 0 5px 0 #b8860b; animation: soonBob 3s ease-in-out infinite; }
.soon-lock svg { width: 46px; height: 46px; }
.soon-stamp { display: inline-block; padding: 5px 14px; border-radius: 10px; background: #ff5c8a; color: #fff; font-family: var(--display, inherit); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; transform: rotate(-2deg); box-shadow: 0 3px 0 #b02a55; }
@keyframes soonBob { 50% { transform: translateY(-5px) rotate(-3deg); } }
@media (max-width: 640px) { .soon-hero { grid-template-columns: 1fr; justify-items: start; } .soon-lock { width: 72px; height: 72px; } }
.btn[aria-disabled="true"] { opacity: .65; pointer-events: none; }
.alpha-tag { margin-left: 8px; padding: 3px 8px; border-radius: 8px; background: #ff5c8a; color: #fff; font-weight: 900; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-4deg) translateY(-6px); box-shadow: 0 2px 0 #b02a55; align-self: center; }
/* new creature forms: their little worlds */
.char .fx-bubble { animation: fx-bubble 3.4s var(--d) ease-in infinite both; }
@keyframes fx-bubble { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(4px, -150px); } }
.char .fx-leaf { transform-box: fill-box; transform-origin: center; animation: fx-leaf 4.4s var(--d) ease-in-out infinite both; }
@keyframes fx-leaf { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-18px, 150px) rotate(320deg); } }
.char .fx-twinkle { animation: rb-spark 2s var(--d) ease-in-out infinite both; transform-box: fill-box; transform-origin: center; }
.char .fx-ring { transform-box: fill-box; transform-origin: center; animation: fx-ring 6s linear infinite; }
@keyframes fx-ring { 50% { opacity: .55; } }
.char .fx-crest { transform-box: fill-box; transform-origin: 50% 100%; animation: fx-crest 1.2s ease-in-out infinite; }
@keyframes fx-crest { 50% { transform: scaleY(1.08) skewX(-3deg); } }
.char .fx-sand { animation: fx-sand 2.8s var(--d) linear infinite both; }
@keyframes fx-sand { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(40px, -60px); } }
.char .fx-swirl { stroke-dasharray: 6 5; animation: fx-swirl 1.4s linear infinite; }
@keyframes fx-swirl { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce) { .char .fx-bubble, .char .fx-leaf, .char .fx-sand, .char .fx-crest, .char .fx-swirl { animation: none; } }
.bd-none { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; color: var(--faint, #9a8fc0); background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, transparent 10px 20px); }
.profile-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.profile-backdrop canvas { width: 100%; height: 100%; display: block; opacity: .85; filter: saturate(1.1); }
.profile-backdrop::after { content: "";  position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 10, 45, .15), rgba(20, 10, 45, .55) 75%); }

/* ---------------------------------------------------------------- Plonkle */
.pk-no { color: var(--accent); }
.pk-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.pk-view { position: relative; overflow: hidden; padding: 0; aspect-ratio: 16 / 10; }
.pk-pano { position: absolute; inset: 0; }
.pk-pano canvas { width: 100%; height: 100%; display: block; }
.pk-stage { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 6px; align-items: center; padding: 8px 12px; border-radius: 14px; background: rgba(20, 10, 45, .75); font-weight: 800; font-size: 13px; }
.pk-stage i { width: 22px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.pk-stage i.on { background: var(--accent); }
.pk-stage span { margin-left: 6px; }
.pk-rows { display: grid; gap: 8px; margin-bottom: 14px; }
.pk-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--panel-2); font-weight: 800; min-height: 46px; }
.pk-row.empty { opacity: .45; } .pk-row.empty span { color: var(--faint); }
.pk-row.win { background: linear-gradient(90deg, rgba(62, 230, 168, .35), var(--panel-2)); }
.pk-row em { font-style: normal; color: var(--muted); }
.pk-form { display: flex; gap: 8px; } .pk-form .input { flex: 1; }
.pk-answer { text-align: center; margin-top: 8px; } .pk-answer h2 { font-size: 30px; margin: 6px 0 12px; }
@media (max-width: 860px) { .pk-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Expeditions */
.ex-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 22px 26px; margin: 6px 0 18px; border-radius: 26px;
  background: linear-gradient(110deg, #3a2a10, var(--panel) 65%); box-shadow: 0 6px 0 rgba(0, 0, 0, .22), inset 0 0 0 3px rgba(255, 210, 63, .45); }
.ex-emoji { font-size: 64px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); }
.ex-progress { text-align: center; font-weight: 900; font-size: 18px; } .ex-progress b { font-size: 44px; color: var(--accent); }
.ex-progress span { display: block; font-size: 12px; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
.ex-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
.ex-map { padding: 0; overflow: hidden; height: 520px; } #exMap { height: 100%; }
.ex-stops { display: grid; gap: 10px; }
.ex-stop { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; }
.ex-stop.locked { opacity: .5; } .ex-stop.today { box-shadow: 0 6px 0 rgba(0, 0, 0, .22), inset 0 0 0 2px var(--accent); }
.ex-stop.done { background: linear-gradient(90deg, rgba(62, 230, 168, .16), var(--panel)); }
.ex-day { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--panel-2); font-weight: 900; line-height: 1; }
.ex-day span { font-size: 11px; color: var(--faint); text-transform: uppercase; } .ex-day b { font-size: 20px; }
.ex-body .faint { font-size: 12.5px; font-weight: 700; margin-top: 3px; }
.ex-pin span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ffd23f; color: #1d1240; font-weight: 900; box-shadow: 0 3px 0 #b8860b; }
@media (max-width: 900px) { .ex-grid { grid-template-columns: 1fr; } .ex-map { height: 320px; } .ex-hero { grid-template-columns: 1fr; text-align: center; } }

/* ---------------------------------------------------------------- Postcards */
.pc-canvas { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); margin-top: 10px; transform: rotate(-.6deg); }
.pc-opts { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; margin-top: 14px; } .pc-opts label { font-weight: 800; color: var(--muted); }
.pcd-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; margin: 6px 0 18px; }
.pcd-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
.pcd-map { padding: 0; overflow: hidden; height: 380px; } #pcdMap { height: 100%; }
.pcd-row { display: grid; grid-template-columns: 26px auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.pcd-row em { font-style: normal; color: var(--muted); font-weight: 800; }
@media (max-width: 800px) { .pcd-hero, .pcd-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Travel Atlas */
.at-count { text-align: center; font-weight: 900; font-size: 18px; } .at-count b { font-size: 46px; color: var(--accent); }
.at-count span { display: block; font-size: 12px; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
.at-map { position: relative; padding: 0; overflow: hidden; height: 460px; margin-bottom: 18px; } #atMap { height: 100%; }
.at-legend { position: absolute; left: 12px; bottom: 12px; z-index: 500; display: flex; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-radius: 12px; background: rgba(20, 10, 45, .82); font-weight: 800; font-size: 12.5px; }
.at-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.at-regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.at-region { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; } .at-emoji { font-size: 38px; text-align: center; }
.at-region.done { box-shadow: 0 6px 0 rgba(0, 0, 0, .22), inset 0 0 0 2px var(--mint); }
.at-region .faint { font-size: 12.5px; font-weight: 700; margin-top: 4px; }
.streak-pill { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #ff9f43; color: #2b1006; font-size: 13px; font-weight: 900; }
.rituals { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ritual { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; padding: 16px; color: var(--text); text-decoration: none; box-shadow: 0 6px 0 rgba(0, 0, 0, .22), inset 0 0 0 2px color-mix(in srgb, var(--mc) 55%, transparent); }
.ritual .r-emoji { font-size: 40px; text-align: center; } .ritual h3 { margin: 0 0 4px; font-size: 18px; } .ritual p { margin: 0; font-size: 13px; color: var(--muted); font-weight: 700; }
.cup { margin-bottom: 18px; box-shadow: 0 6px 0 rgba(0, 0, 0, .22), inset 0 0 0 2px rgba(255, 210, 63, .5); }
.cup-head { display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: center; } .cup-icon { font-size: 48px; text-align: center; }
.cup-table { display: grid; gap: 6px; margin-top: 14px; }
.cup-row { display: grid; grid-template-columns: 34px 34px auto auto 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--panel-2); color: var(--text); text-decoration: none; }
.cup-row em { font-style: normal; text-align: right; font-weight: 900; color: var(--accent); }
.trophy-chip { background: rgba(255, 210, 63, .18); color: #ffd23f; }

/* ---------------------------------------------------------------- Duel powers */
.powers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.power-pick { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 12px; border-radius: 16px; border: 0; cursor: pointer; background: var(--panel-2); color: var(--text); font: inherit; box-shadow: inset 0 0 0 2px transparent; transition: transform .15s; }
.power-pick:hover:not(:disabled) { transform: translateY(-2px); } .power-pick.on { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); }
.power-pick:disabled { opacity: .45; cursor: not-allowed; } .power-pick .ico { width: 26px; height: 26px; color: var(--accent); }
.power-pick small { color: var(--muted); font-weight: 700; font-size: 12px; } .power-pick em { font-style: normal; font-size: 11.5px; color: var(--faint); font-weight: 800; }
.power-btn { margin-left: 6px; background: linear-gradient(135deg, #ff5c8a, #b388ff) !important; color: #fff !important; animation: pw-ready 1.6s ease-in-out infinite; }
.power-btn:disabled { animation: none; opacity: .35; filter: grayscale(1); }
@keyframes pw-ready { 50% { box-shadow: 0 0 0 6px rgba(255, 92, 138, .25); } }
/* effects on the rival's screen */
.pw-fog #dock::after { content: ''; position: absolute; inset: 0; z-index: 900; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 30% 40%, rgba(230, 236, 245, .97), rgba(200, 210, 225, .94) 60%, rgba(180, 190, 210, .92)); animation: pw-fogin .6s ease-out, pw-fogdrift 4s ease-in-out infinite alternate; }
@keyframes pw-fogin { from { opacity: 0; } } @keyframes pw-fogdrift { to { background-position: 40px 10px; filter: blur(2px); } }
.pw-jam #compassStrip { animation: pw-spin .35s linear infinite; } .pw-jam #compass { filter: hue-rotate(160deg) saturate(2); }
@keyframes pw-spin { 0% { transform: translateX(-120px); } 50% { transform: translateX(140px); } 100% { transform: translateX(-120px); } }
.pw-sand #pano { filter: blur(7px) sepia(.8) saturate(1.4) brightness(1.05); transition: filter .5s; }
@media (max-width: 760px) { .powers { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Spectating */
.live-now { margin-bottom: 18px; } .live-list { display: grid; gap: 8px; margin-top: 10px; }
.live-game { display: grid; grid-template-columns: 14px auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--panel-2); color: var(--text); text-decoration: none; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 0 0 rgba(255, 59, 92, .7); animation: live-pulse 1.4s infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 9px rgba(255, 59, 92, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 92, 0); } }
.w-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.w-map { position: relative; padding: 0; overflow: hidden; height: 560px; } #wMap { height: 100%; }
.w-status { position: absolute; left: 12px; top: 12px; z-index: 600; padding: 8px 12px; border-radius: 12px; background: rgba(20, 10, 45, .85); font-weight: 800; font-size: 13px; }
.w-float { position: absolute; inset: 0; pointer-events: none; z-index: 700; overflow: hidden; }
.w-emoji { position: absolute; bottom: 10px; font-size: 40px; text-align: center; animation: w-up 2.6s ease-out forwards; } .w-emoji small { display: block; font-size: 11px; font-weight: 800; }
@keyframes w-up { to { transform: translateY(-420px); opacity: 0; } }
.w-players { display: grid; gap: 8px; margin-top: 8px; } .w-player { display: grid; grid-template-columns: 10px auto 1fr auto; gap: 10px; align-items: center; }
.w-player .dot { width: 10px; height: 10px; border-radius: 50%; } .w-player em { font-style: normal; font-weight: 800; color: var(--muted); }
.w-reacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .w-reacts button { font-size: 24px; width: 46px; height: 46px; border-radius: 14px; border: 0; background: var(--panel-2); cursor: pointer; }
.w-reacts button:active { transform: scale(.9); }
.w-hist { display: grid; gap: 6px; margin-top: 8px; max-height: 220px; overflow: auto; } .w-h { font-size: 13px; } .w-h span { display: block; color: var(--muted); font-size: 12px; }
@media (max-width: 900px) { .w-grid { grid-template-columns: 1fr; } .w-map { height: 360px; } }

/* ---------------------------------------------------------------- accessibility: text size and high contrast */
html, body { font-size: calc(15.5px * var(--text-scale, 1)); }
:root[data-contrast='high'] { --muted: #f4efff; --faint: #d9d0ff; }
:root[data-contrast='high'] .card, :root[data-contrast='high'] .hud-box, :root[data-contrast='high'] .modal { outline: 2px solid rgba(255, 255, 255, .55); outline-offset: -2px; backdrop-filter: none; }
:root[data-contrast='high'] .btn, :root[data-contrast='high'] .chip, :root[data-contrast='high'] .seg button { outline: 2px solid currentColor; outline-offset: -2px; }
:root[data-contrast='high'] .pk-row, :root[data-contrast='high'] .ritual p { color: #fff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- Dev mode (admin) */
.dev-switch { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; background: rgba(255, 92, 138, .14); color: #ff8fb0; font-weight: 900; font-size: 12px; letter-spacing: .1em; cursor: pointer; }
.dev-switch input { appearance: none; width: 30px; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, .2); position: relative; cursor: pointer; margin: 0; transition: background .2s; }
.dev-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; }
.dev-switch input:checked { background: #ff5c8a; } .dev-switch input:checked::after { transform: translateX(12px); }
.dev-panel { position: fixed; top: 76px; right: 16px; bottom: 16px; width: min(560px, calc(100vw - 32px)); z-index: 9000; display: flex; flex-direction: column; gap: 10px; padding: 16px;
  border-radius: 22px; background: var(--panel); box-shadow: 0 18px 50px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 92, 138, .55); }
.dp-head { display: flex; justify-content: space-between; align-items: start; } .dp-head h2 { margin: 2px 0; }
.dp-tools { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.dp-list { flex: 1; overflow: auto; display: grid; gap: 6px; align-content: start; }
.dp-row { display: grid; grid-template-columns: 10px auto 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: var(--panel-2); }
.dp-row.banned { opacity: .75; box-shadow: inset 0 0 0 2px rgba(255, 92, 138, .5); }
.dp-who { min-width: 0; } .dp-who .faint { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.dp-acts { grid-column: 2 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.dp-dot { width: 10px; height: 10px; border-radius: 50%; background: #666; } .dp-dot.on { background: #3ee68a; box-shadow: 0 0 8px #3ee68a; }
.dp-log { font-size: 12px; } .dp-log summary { cursor: pointer; font-weight: 800; color: var(--muted); }

/* ---------------------------------------------------------------- sign-in options and two-factor */
.google-btn { width: 100%; justify-content: center; gap: 10px; background: #fff !important; color: #1f1f1f !important; box-shadow: 0 4px 0 #c9c4d8 !important; font-weight: 800; }
.or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--faint); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .15); }
.tf-code { font-family: var(--mono, monospace); font-size: 22px; letter-spacing: .25em; text-align: center; }
.tf-setup { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; margin-top: 10px; }
.tf-qr { padding: 10px; border-radius: 16px; background: #fff; line-height: 0; }
.tf-key { display: inline-block; margin-top: 4px; padding: 6px 10px; border-radius: 8px; background: var(--panel-2); font-size: 14px; letter-spacing: .08em; user-select: all; }
.tf-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .tf-codes code { padding: 8px; border-radius: 10px; background: var(--panel-2); text-align: center; font-size: 15px; letter-spacing: .08em; user-select: all; }
@media (max-width: 640px) { .tf-setup { grid-template-columns: 1fr; justify-items: center; } }

/* ---------------------------------------------------------------- last seconds of a round: stress */
.hurry::after { content: ''; position: fixed; inset: 0; z-index: 400; pointer-events: none;
  box-shadow: inset 0 0 120px 30px rgba(255, 40, 60, .38); animation: hurry-beat 1s ease-in-out infinite; }
.panic::after { box-shadow: inset 0 0 160px 50px rgba(255, 30, 50, .55); animation-duration: .5s; }
@keyframes hurry-beat { 0%, 100% { opacity: .35; } 15% { opacity: 1; } 40% { opacity: .55; } }
.hud-box.warn, #timerBox.warn { animation: timer-pulse 1s ease-in-out infinite; }
.panic #timerBox, .panic .hud-box.warn { animation-duration: .5s; }
@keyframes timer-pulse { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.08); color: #ff5c7a; } }
[data-motion='reduced'] .hurry::after { animation: none; opacity: .6; }

.km-anchor { z-index: 1000 !important; }
.mult { display: inline-block; padding: 1px 6px; border-radius: 8px; background: linear-gradient(135deg, #ff9f43, #ff5c8a); color: #fff; font-weight: 900; font-size: 11px; vertical-align: 1px; }
.hp-custom { width: 110px; margin-left: 8px; }

/* ---------------------------------------------------------------- invite friends */
.ref-banner { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin-bottom: 14px; border-radius: 16px; background: linear-gradient(110deg, rgba(255, 210, 63, .2), var(--panel-2)); box-shadow: inset 0 0 0 2px rgba(255, 210, 63, .5); }
.ref-banner .faint { font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.invite-card { margin-bottom: 18px; box-shadow: 0 6px 0 rgba(0, 0, 0, .22), inset 0 0 0 2px rgba(255, 210, 63, .45); }
.ic-head { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; } .ic-emoji { font-size: 42px; text-align: center; }
.ic-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.ic-slot { position: relative; overflow: hidden; display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--panel-2); font-size: 13px; }
.ic-slot span { color: var(--muted); font-weight: 800; font-size: 12px; } .ic-slot.empty { place-items: center; opacity: .55; border: 2px dashed rgba(255, 255, 255, .15); background: none; }
.ic-slot i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); } .ic-slot.paid { box-shadow: inset 0 0 0 2px var(--mint); } .ic-slot.paid span { color: var(--mint); }
@media (max-width: 700px) { .ic-slots { grid-template-columns: repeat(2, 1fr); } }
.cz-bottom { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding: 14px; border-radius: 18px; background: var(--panel); box-shadow: 0 6px 0 rgba(0, 0, 0, .22); position: sticky; bottom: 12px; z-index: 50; }

/* ---------------------------------------------------------------- photo carousels (play modes, packs, academy) */
.map-card { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease; will-change: transform; }
.map-card:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(0, 0, 0, .35), 0 6px 0 rgba(0, 0, 0, .22); }
.map-card .cover { height: 150px; background: #1d1240; }
.cv { position: absolute; inset: 0; overflow: hidden; }
.cv-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease; }
.cv-slide.on { opacity: 1; }
.cv-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 6s ease-out; }
.map-card:hover .cv-slide.on img, .pack-art:hover .cv-slide.on img { transform: scale(1.12); }
.cv-slide figcaption { position: absolute; left: 10px; bottom: 8px; z-index: 3; padding: 3px 8px; border-radius: 8px; background: rgba(20, 10, 45, .7); color: #fff; font-size: 11.5px; font-weight: 800;
  opacity: 0; transform: translateY(4px); transition: opacity .5s ease .25s, transform .5s ease .25s; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-slide.on figcaption { opacity: 1; transform: none; }
.cv-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .12), transparent 40%, rgba(15, 8, 35, .55)); }
.cv-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 48%, transparent 62%); transform: translateX(-120%); }
.map-card:hover .cv-shine { transition: transform 1.1s ease; transform: translateX(120%); }
.cv-arrow { position: absolute; top: 50%; z-index: 4; width: 30px; height: 30px; margin-top: -15px; border: 0; border-radius: 50%; background: rgba(20, 10, 45, .7); color: #fff; font-size: 20px; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity .35s ease, transform .35s ease, background .2s; }
.cv-arrow.l { left: 8px; transform: translateX(-6px); } .cv-arrow.r { right: 8px; transform: translateX(6px); }
.map-card:hover .cv-arrow, .cv:focus-within .cv-arrow { opacity: 1; transform: none; }
.cv-arrow:hover { background: var(--accent); color: #1d1240; }
.cv-dots { position: absolute; right: 10px; top: 10px; z-index: 3; display: flex; gap: 4px; }
.cv-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: background .3s, transform .3s; } .cv-dots i.on { background: #fff; transform: scale(1.3); }
.cv .em { position: absolute; right: 12px; bottom: 6px; z-index: 3; font-size: 36px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.map-card:hover .cv .em { transform: rotate(-10deg) scale(1.18); }
.cv-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 48px; background: var(--mcol); }
[data-motion='reduced'] .cv-slide img, [data-motion='reduced'] .map-card { transition: none; }
.map-card .check { z-index: 6; }

/* game mode cards: a soft colour wash and glow that eases in, never snaps */
.mode-card, .mode-pill { position: relative; transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease; }
.mode-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(120% 90% at 90% 0%, color-mix(in srgb, var(--mc, var(--accent)) 30%, transparent), transparent 60%); }
.mode-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .12) 50%, transparent 65%); transform: translateX(-120%); }
.mode-card:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(0, 0, 0, .35), 0 0 0 2px color-mix(in srgb, var(--mc, var(--accent)) 60%, transparent); }
.mode-card:hover::before { opacity: 1; } .mode-card:hover::after { transition: transform 1s ease; transform: translateX(120%); }
.mode-card .badge { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), box-shadow .5s ease; }
.mode-card:hover .badge { box-shadow: 0 0 22px color-mix(in srgb, var(--mc, var(--accent)) 70%, transparent); }
.mode-card.on, .mode-card.selected { box-shadow: 0 6px 0 rgba(0, 0, 0, .22), inset 0 0 0 3px var(--mc, var(--accent)); }
[data-motion='reduced'] .mode-card, [data-motion='reduced'] .mode-card::after { transition: none; }

/* ---------------------------------------------------------------- ranked loot bundles */
.rewards-grid.bundles { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.rw.bundle { display: block; padding: 0; overflow: hidden; transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease; }
.rw.bundle:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(0, 0, 0, .35), 0 0 0 2px color-mix(in srgb, var(--rc) 70%, transparent); }
.bd-head { position: relative; display: grid; justify-items: center; gap: 4px; padding: 16px 12px 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 30%, transparent), transparent); }
.bd-head b { color: var(--rc); font-size: 17px; } .bd-head .chip { position: absolute; top: 10px; right: 10px; }
.bd-glow { position: absolute; top: 4px; left: 50%; width: 110px; height: 110px; margin-left: -55px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 55%, transparent), transparent 70%);
  animation: bd-pulse 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes bd-pulse { 50% { transform: scale(1.15); opacity: .6; } }
.bd-loot { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; padding: 10px 12px 14px; }
.loot { display: grid; justify-items: center; gap: 4px; text-align: center; animation: loot-in .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 60ms + var(--k) * 70ms); }
@keyframes loot-in { from { opacity: 0; transform: translateY(8px) scale(.85); } }
.loot-art { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--k) * 40ms); }
.rw.bundle:hover .loot-art { transform: translateY(-5px); }
.loot-art { height: 48px; display: grid; place-items: center; }
.loot small { font-size: 11px; font-weight: 800; color: var(--muted); line-height: 1.2; }
.coin-pile { display: flex; align-items: flex-end; gap: 1px; height: 44px; }
.cp-stack { display: flex; flex-direction: column-reverse; }
.cp-stack i { display: block; width: 20px; height: 9px; margin-top: -2px; } .cp-stack i svg { width: 20px; height: 20px; margin-top: -6px; filter: drop-shadow(0 1px 0 #8a6a10); }
.loot-ring { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--rc); box-shadow: 0 0 14px var(--rc), inset 0 0 8px var(--rc); background: rgba(255, 255, 255, .08); animation: ring-spin 4s linear infinite; }
@keyframes ring-spin { 50% { box-shadow: 0 0 22px var(--rc), inset 0 0 12px var(--rc); } }
.loot-pack { transform: scale(.9); } .loot-pin { width: 30px; height: 40px; } .loot-pin svg { width: 100%; height: 100%; }
.loot-card { width: 32px; height: 44px; border-radius: 6px; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.loot-card.prism { background: linear-gradient(135deg, #9bdcff, #ff9ccf, #ffe08a, #9bdcff); background-size: 300% 300%; animation: prism 3s linear infinite; }
@keyframes prism { to { background-position: 300% 0; } }
.loot-ribbon { padding: 3px 8px; border-radius: 6px; background: linear-gradient(90deg, #b8862b, #ffe08a, #b8862b); color: #1a1306; font-size: 10px; font-weight: 900; white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.loot-emoji { font-size: 32px; }
.mpf { display: grid; grid-template-columns: 10px auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--panel-2); transition: background .3s; }
.mpf .faint { font-size: 12px; font-weight: 700; } .mpf-dot { width: 9px; height: 9px; border-radius: 50%; background: #5a5470; } .mpf.on .mpf-dot { background: #3ee68a; box-shadow: 0 0 8px #3ee68a; }
.mpf:not(.on) { opacity: .75; }
.stake-input { position: relative; display: inline-flex; align-items: center; } .stake-input svg.c { position: absolute; left: 10px; width: 18px; height: 18px; pointer-events: none; }
.stake-input .input { width: 140px; padding-left: 36px; }
.seg button svg.c { width: 14px; height: 14px; vertical-align: -2px; }
label svg.c { width: 16px; height: 16px; vertical-align: -3px; }

/* ---------------------------------------------------------------- academy: region banner and visual quiz tiles */
.region-banner { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: center; margin-bottom: 14px; padding: 12px; border-radius: 22px; background: var(--panel); box-shadow: 0 6px 0 rgba(0, 0, 0, .22); }
.rb-photo { position: relative; height: 130px; border-radius: 16px; overflow: hidden; } .rb-text h3 { font-size: 24px; margin: 2px 0 4px; } .rb-text p { margin: 0; font-weight: 700; }
.quiz-tile { position: relative; overflow: hidden; padding-top: 0 !important; transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease; }
.quiz-tile:hover { transform: translateY(-6px); }
.qt-art { position: relative; height: 96px; margin: 0 -18px 12px; overflow: hidden; background: linear-gradient(135deg, #2a1a6a, #4a2a8a); }
.quiz-tile .badge { position: relative; margin-top: -34px; z-index: 3; box-shadow: 0 0 0 4px var(--panel); }
.qt-art.flags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px; }
.qt-art.flags .flag-img { width: 100%; height: 36px; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 0 rgba(0, 0, 0, .3); transition: transform .4s ease; }
.quiz-tile:hover .qt-art.flags .flag-img:nth-child(odd) { transform: rotate(-4deg) scale(1.05); } .quiz-tile:hover .qt-art.flags .flag-img:nth-child(even) { transform: rotate(4deg) scale(1.05); }
.qt-art.sign, .qt-art.domains { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px; background: linear-gradient(135deg, #0f5132, #198754); }
.qt-art.sign span { padding: 6px 10px; border-radius: 6px; background: #1e7b4a; border: 2px solid #fff; color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); transform: rotate(calc((var(--k) - 1) * 3deg)); }
.qt-art.domains { background: linear-gradient(135deg, #1d3a6a, #2a5aa0); } .qt-art.domains span { padding: 6px 12px; border-radius: 999px; background: #fff; color: #1d3a6a; font-family: var(--mono, monospace); font-weight: 900; font-size: 16px; transform: translateY(calc((var(--k) - 1) * 4px)); }
.qt-art.art { display: grid; place-items: center; background: linear-gradient(180deg, #7ec8f0, #cfeaff); } .qt-art.art svg { height: 88px; width: auto; }
.qt-art.photo .cv-arrow { display: none; }
@media (max-width: 700px) { .region-banner { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- clans: banners, form, cup trophy, showcase */
.clans-hero { margin-bottom: 26px; }
.cup { margin-top: 8px; }
.clan-banner { background: var(--clan-bg, var(--panel)); }
.clan-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 10, 45, .9), rgba(20, 10, 45, .55) 55%, rgba(20, 10, 45, .2)); pointer-events: none; }
.clan-banner > * { position: relative; z-index: 1; }
.clan-motto { font-style: italic; font-weight: 800; color: #fff6d0; margin: -2px 0 8px; opacity: .9; }
.cup-head .cup-icon { position: relative; width: 84px; height: 92px; display: block; }
.cup-trophy { width: 84px; height: 92px; filter: drop-shadow(0 0 14px rgba(255, 210, 63, .7)); animation: trophy-float 3.4s ease-in-out infinite; }
@keyframes trophy-float { 50% { transform: translateY(-5px) rotate(-3deg); } }
.cup-trophy .tr-gleam { animation: trophy-gleam 3.2s ease-in-out infinite; }
@keyframes trophy-gleam { 0%, 55% { transform: skewX(-18deg) translateX(0); } 100% { transform: skewX(-18deg) translateX(200px); } }
.tr-spark { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; background: radial-gradient(circle, #fff, rgba(255, 240, 180, 0) 70%); border-radius: 50%; animation: rb-spark 2.1s var(--d, 0s) ease-in-out infinite both; }
.cr-act { display: flex; align-items: center; justify-content: flex-end; min-width: 120px; }
.cf-banner .cfb { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 18px; overflow: hidden; min-height: 116px; transition: background .4s ease; }
.cfb > * { position: relative; z-index: 1; } .cfb-shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(20, 10, 45, .85), rgba(20, 10, 45, .2)); }
.cf-name { font-family: var(--display); font-size: 24px; font-weight: 800; } .cf-motto { font-style: italic; font-weight: 800; color: #fff6d0; margin: 2px 0 6px; }
.cf-presets { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; } .cf-presets .faint { font-weight: 800; font-size: 12.5px; }
.cf-preset { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 0; border-radius: 14px; color: #fff; cursor: pointer; box-shadow: inset 0 0 0 999px rgba(20, 10, 45, .55), 0 3px 0 rgba(0, 0, 0, .3); font: inherit; font-weight: 800; transition: transform .25s ease; }
.cf-preset:hover { transform: translateY(-2px); }
.cf-patterns { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.cf-patterns button { display: grid; gap: 4px; padding: 4px; border: 0; border-radius: 12px; background: var(--panel-2); color: var(--muted); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; box-shadow: inset 0 0 0 2px transparent; }
.cf-patterns button.on { box-shadow: inset 0 0 0 2px var(--accent); color: var(--text); } .cf-patterns i { display: block; height: 34px; border-radius: 8px; }
.cf-privacy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cf-privacy button { display: grid; gap: 2px; text-align: left; padding: 10px; border: 0; border-radius: 14px; background: var(--panel-2); color: var(--text); cursor: pointer; font: inherit; box-shadow: inset 0 0 0 2px transparent; }
.cf-privacy button.on { box-shadow: inset 0 0 0 2px var(--accent); } .cf-privacy small { color: var(--muted); font-weight: 700; font-size: 11.5px; }
.clan-invite { margin: 18px 0; }
.clan-showcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; justify-items: center; margin-bottom: 18px; }
.cs-item { display: grid; justify-items: center; gap: 6px; animation: loot-in .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i) * 70ms); } .cs-item b { font-size: 13px; }
.cs-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; margin-top: 12px; } .cs-pick button { border: 0; background: none; cursor: pointer; padding: 0; }
@media (max-width: 700px) { .cf-privacy { grid-template-columns: 1fr; } }
.soon-hero { grid-template-columns: 96px 1fr 190px; }
.store-char { position: relative; height: 210px; margin: -24px 0 -24px; } .store-char .char { height: 100%; width: auto; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .35)); }
.sc-bubble { position: absolute; top: 8px; right: 70%; z-index: 2; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: #fff; color: #1d1240; font-weight: 800; font-size: 12.5px; white-space: nowrap;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25); animation: bubble-in .6s cubic-bezier(.34, 1.56, .64, 1) .4s both; }
@keyframes bubble-in { from { opacity: 0; transform: scale(.6) translateY(8px); } }
@media (max-width: 860px) { .soon-hero { grid-template-columns: 1fr; } .store-char { display: none; } }
#pot svg.c, .faint svg.c, .pvp-res svg.c, p svg.c, span svg.c:not(.coins svg) { width: 1.1em; height: 1.1em; vertical-align: -0.18em; }
.cup-head { grid-template-columns: 96px 1fr; }
.cf-emblems { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)) !important; gap: 6px !important; }
.cf-emblems button { height: 44px !important; aspect-ratio: auto !important; }

.site-foot { position: relative; z-index: 1; padding: 22px 16px 28px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--faint); }
.site-foot nav { margin-top: 6px; } .site-foot a { color: var(--muted); }
body.fullscreen .site-foot, .game-active .site-foot { display: none; }
.site-foot.hidden { display: none; }

.app-ready .site-foot.static { display: none; } /* once the app runs, each page carries its own footer at the bottom */
.page-foot { margin-top: 40px; }