:root {

--bg-deep:  #060d2e;

--ocean:    #1a3a70;

--bg-dark:  #0d0f1a;

--bg-panel: #111428;

--blue:     #3b6ef8;

--blue-lt:  #5b8fff;

--blue-glow:rgba(91,143,255,.3);

--yellow:   #ffe135;

--text:     #d0d8f0;

--dim:      #8899bb;

--muted:    #5a6285;

--correct:  #22d17a;

--wrong:    #f04060;

--border:   rgba(91,143,255,.18);

--pill:     100px;

--edu-bg:       #0f1117;

--edu-bg-card:  #161a24;

--edu-bg-panel: #1c2030;

--edu-accent:   #3b6ef8;

--edu-border:   rgba(91,143,255,.12);

}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

html, body {

width:100%; height:100%;

background: var(--bg-dark);

font-family: 'Nunito', sans-serif;

color: var(--text);

overflow: hidden;

}

button { cursor:pointer; border:none; outline:none; font-family:inherit; }

input, select { outline:none; font-family:inherit; }

.screen {

position:absolute; inset:0;

display:none; flex-direction:column;

align-items:center;

overflow-y:auto; overflow-x:hidden;

}

.screen.active { display:flex; }

#s-title { background:var(--bg-deep); overflow:hidden; align-items:stretch; }

.title-wrap {
width:100%; flex:1;
display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
position:relative; overflow:hidden; background:var(--bg-deep);
min-height:100dvh; min-height:100vh;
padding:108px 24px 36px;
box-sizing:border-box;
}

.title-inner { display:contents; }

.blob-tl {
position:absolute; top:-60px; left:-60px;
width:280px; height:280px; background:rgba(80,120,255,.10); border-radius:50%;
}

.blob-br {
position:absolute; bottom:-40px; right:-40px;
width:240px; height:240px; background:rgba(255,220,0,.06); border-radius:50%;
}

.bg-star {
position:absolute; border-radius:50%; background:#fff;
animation:twinkle var(--d,3s) ease-in-out infinite;
animation-delay:var(--delay,0s);
}

@keyframes twinkle { 0%,100%{opacity:0} 50%{opacity:var(--op,.6)} }

.globe-wrap {
position:relative; z-index:2;
width:500px; height:500px;
display:flex; align-items:center; justify-content:center;
margin-bottom:24px;
}
.globe-wrap svg { display:block; }

.wordmark {
font-family:'Nunito',sans-serif; font-weight:900;
font-size:78px; color:#fff;
letter-spacing:.16em; text-transform:uppercase;
line-height:1;
text-shadow:0 4px 0 rgba(0,0,40,.5), 0 0 24px rgba(0,0,40,.6);
margin:0; z-index:3;
}
.globe-wrap .wordmark {
position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
}

.tagline {
font-family:'Nunito',sans-serif; font-weight:700;
font-size:11px; color:rgba(120,160,255,.55);
letter-spacing:.22em; text-transform:uppercase;
margin:24px 0 0; z-index:2;
}

/* Scoped to #s-title so the chunky shadow + sizing don't leak to other screens */
#s-title .btn-yellow {
margin-top:56px;
padding:20px 60px;
font-size:22px;
letter-spacing:.02em;
box-shadow:0 8px 0 #c49a00, 0 14px 32px rgba(255,225,53,.4);
z-index:2;
}
#s-title .btn-yellow:active {
transform:translateY(5px);
box-shadow:0 3px 0 #c49a00, 0 8px 18px rgba(255,225,53,.35);
}

/* Shorter viewports: scale globe + gaps so MAPOLIS + button stay on-screen */
@media (max-height:720px) {
  .globe-wrap { width:340px; height:340px; margin-bottom:16px; }
  .wordmark { font-size:64px; }
  .tagline { margin-top:16px; }
  #s-title .btn-yellow { margin-top:40px; padding:16px 48px; font-size:19px; }
  .title-wrap { padding-top:72px; }
}
@media (max-height:600px) {
  .globe-wrap { width:280px; height:280px; margin-bottom:12px; }
  .wordmark { font-size:52px; }
  .tagline { margin-top:12px; font-size:10px; }
  #s-title .btn-yellow { margin-top:28px; padding:13px 40px; font-size:16px; }
  .title-wrap { padding-top:48px; }
}

.title-credits-btn {
  position:absolute; bottom:22px; left:20px; z-index:3;
  background:none; border:none; cursor:pointer;
  font-family:'Nunito',sans-serif; font-size:10px; font-weight:700;
  color:rgba(120,160,255,.45); letter-spacing:.06em;
  padding:4px 0; transition:color .2s;
}
.title-credits-btn:hover, .title-credits-btn:active { color:rgba(120,160,255,.8); }

.title-privacy-btn {
  position:absolute; bottom:22px; right:20px; z-index:3;
  background:none; border:none; cursor:pointer;
  font-family:'Nunito',sans-serif; font-size:10px; font-weight:700;
  color:rgba(120,160,255,.45); letter-spacing:.06em;
  padding:4px 0; transition:color .2s;
}
.title-privacy-btn:hover, .title-privacy-btn:active { color:rgba(120,160,255,.8); }

#s-credits { background:var(--bg-deep); }
.credits-scroll {
  width:100%; max-width:480px; padding:20px 20px 48px;
  overflow-y:auto; flex:1; -webkit-overflow-scrolling:touch;
}

.credits-back {
  width:40px; height:40px; border-radius:50%;
  background:var(--bg-panel); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; color:var(--text); flex-shrink:0;
  margin-bottom:20px;
}
.credits-back:active { opacity:.6; }

.credits-page-title {
  font-family:'Fredoka One',sans-serif; font-size:26px; color:#fff;
  margin-bottom:4px; line-height:1.2;
}
.credits-page-sub {
  font-size:11px; color:var(--dim); margin-bottom:20px; line-height:1.5;
}

/* Section label — tiny uppercase dim label like profile-section-hdr */
.credits-heading {
  font-size:9px; color:var(--dim); text-transform:uppercase;
  letter-spacing:.12em; font-weight:800;
  margin:20px 0 8px; padding:0 2px;
}
.credits-heading:first-of-type { margin-top:4px; }

/* Named sub-section within a heading — e.g. "Map & Geographic Data" */
.credits-subheading {
  font-family:'Nunito',sans-serif; font-weight:900; font-size:13px;
  color:#fff; margin:16px 0 6px; display:flex; align-items:center;
  gap:8px; flex-wrap:wrap;
}

.credits-body {
  font-size:12.5px; line-height:1.65; color:var(--dim); margin:0 0 6px;
}
.credits-body a { color:var(--blue-lt); text-decoration:none; }

/* Individual attribution row */
.credits-item {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:8px; padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:12px; color:var(--dim); line-height:1.5;
}
.credits-item:last-child { border-bottom:none; }
.credits-item strong { color:rgba(255,255,255,.85); font-weight:800; }

/* Badge — license tag / compliance status */
.credits-license {
  flex-shrink:0; font-size:9px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; white-space:nowrap;
  color:var(--blue-lt); background:rgba(91,143,255,.1);
  border:1px solid rgba(91,143,255,.2);
  padding:2px 7px; border-radius:100px;
}

/* Panel card — replaces old standards-card */
.credits-standards-card {
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:14px; padding:14px 16px; margin:8px 0;
}
.credits-std-name {
  font-family:'Nunito',sans-serif; font-size:13px; font-weight:900;
  color:#fff; margin-bottom:4px;
}
.credits-std-desc {
  font-size:11.5px; color:var(--dim); line-height:1.6;
}

/* Commit/principle row — icon + text in a panel */
.credits-commit-row {
  display:flex; gap:12px; align-items:flex-start;
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; margin:6px 0;
}
.credits-commit-icon { font-size:1rem; flex-shrink:0; margin-top:1px; }
.credits-commit-title {
  font-size:12.5px; font-weight:900; color:#fff; margin-bottom:2px;
}
.credits-commit-desc { font-size:11.5px; color:var(--dim); line-height:1.5; }

/* stat-card style reused inline for rights items */
.credits-right-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0;
}
.credits-right-card {
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:12px; padding:12px;
}
.credits-right-lbl {
  font-size:8px; color:var(--yellow); text-transform:uppercase;
  letter-spacing:.12em; font-weight:800; margin-bottom:4px;
}
.credits-right-desc { font-size:11px; color:var(--dim); line-height:1.5; }

.btn-yellow {

background:var(--yellow); color:var(--bg-deep);

font-family:'Nunito',sans-serif; font-weight:900; font-size:15px;

padding:13px 36px; border-radius:var(--pill);

box-shadow:0 5px 0 rgba(180,140,0,.5),0 0 24px rgba(255,220,0,.2);

text-transform:uppercase; letter-spacing:.06em;

transition:transform .1s,box-shadow .1s; border:none; cursor:pointer; margin-top:20px;

}

.btn-yellow:active { transform:translateY(3px); box-shadow:0 2px 0 rgba(180,140,0,.5); }

.btn-primary {

width:100%; padding:15px; background:var(--yellow); color:var(--bg-deep);

font-weight:900; font-size:15px; letter-spacing:.06em; text-transform:uppercase;

border-radius:var(--pill); box-shadow:0 5px 0 rgba(180,140,0,.5);

transition:transform .1s,box-shadow .1s; border:none; cursor:pointer;

}

.btn-primary:active { transform:translateY(3px); box-shadow:0 2px 0 rgba(180,140,0,.5); }

.btn-sec {

width:100%; padding:13px; background:transparent; color:var(--dim);

font-weight:700; font-size:13px; border:1px solid var(--border);

border-radius:var(--pill); cursor:pointer;

}

.back-btn {

width:40px; height:40px; border-radius:50%;

background:var(--bg-panel); border:1px solid var(--border);

display:flex; align-items:center; justify-content:center;

font-size:18px; cursor:pointer; color:var(--text); flex-shrink:0;

}

#s-profiles { background:var(--bg-dark); padding:20px; gap:0; }

.prof-header {

width:100%; display:flex; align-items:center; justify-content:space-between;

padding:16px 4px 24px;

}

.prof-header h1 { font-family:'Nunito',sans-serif; font-weight:900; font-size:26px; color:#fff; }

.sm-logo {

display:none;

}

.sm-logo img { width:100%; height:100%; object-fit:cover; }

.prof-grid {

width:100%; display:grid; grid-template-columns:1fr 1fr;

gap:14px; padding-bottom:24px;

}

.prof-card {

background:linear-gradient(135deg,rgba(30,40,80,.7),rgba(20,28,60,.9));
border:1.5px solid rgba(91,143,255,.15); border-radius:22px;

padding:22px 14px; display:flex; flex-direction:column; align-items:center;

gap:10px; cursor:pointer; transition:all .25s ease;

}

.prof-card:hover { border-color:var(--blue-lt); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.prof-card:active { transform:scale(.97); }

.prof-card.new-card { border:2px dashed rgba(91,143,255,.2); background:rgba(20,28,60,.4); }

.ava-circle {

width:72px; height:72px; border-radius:50%;

background:linear-gradient(135deg,#1a2050,#2a3a80);

border:3px solid var(--blue); display:flex; align-items:center;

justify-content:center; font-size:36px;

}

.new-plus {

width:72px; height:72px; border-radius:50%;

border:2px dashed var(--muted); display:flex; align-items:center;

justify-content:center; font-size:32px; color:var(--muted);

}

.prof-card h3 { font-weight:800; font-size:15px; color:#fff; text-align:center; }

.prof-stats { font-size:11px; color:var(--dim); text-align:center; line-height:1.6; }

#s-create { background:var(--bg-dark); padding:20px; gap:14px; }

.create-head { width:100%; display:flex; align-items:center; gap:12px; padding:8px 0 4px; }

.create-head h2 { font-family:'Nunito',sans-serif; font-weight:900; font-size:22px; color:#fff; }

.field-lbl {

font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;

color:var(--dim); margin-bottom:4px;

}

.field-in {

width:100%; padding:13px 15px; background:var(--bg-panel);

border:1px solid var(--border); border-radius:12px;

color:#fff; font-size:15px; font-weight:700; transition:border-color .2s;

}

.field-in:focus { border-color:var(--blue-lt); }

#s-setup { background:var(--bg-dark); overflow-y:auto; -webkit-overflow-scrolling:touch; }
#setup-controls { width:100%; }
#setup-map-container { width:100%; }

.setup-topbar {

position:absolute; top:0; left:0; right:0;

display:flex; align-items:center; justify-content:space-between;

padding:12px 16px;

background:linear-gradient(to bottom,rgba(6,13,46,.97) 60%,transparent);

z-index:10;

}

.setup-title-row { display:flex; align-items:center; gap:8px; }

.setup-star {
  font-size:22px; line-height:1; animation:spin 8s linear infinite;
  filter:drop-shadow(0 2px 8px rgba(255,230,0,.6));
}

.setup-title { font-family:'Nunito',sans-serif; font-weight:900; font-size:20px; color:#fff; letter-spacing:.02em; }

.setup-ava-btn {

width:48px; height:48px; border-radius:50%;

background:var(--bg-panel); border:2px solid var(--blue);

display:flex; align-items:center; justify-content:center;

font-size:26px; cursor:pointer;

}

.setup-hero-ava {
  width:100px; height:100px; border-radius:50%;
  background:linear-gradient(135deg,#1a2050,#2a3a80);
  border:3px solid var(--blue); margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;
  font-size:52px; cursor:pointer;
  box-shadow:0 4px 20px rgba(59,110,248,.3);
  transition:transform .2s; position:relative; z-index:2;
}
.setup-hero-ava:active { transform:scale(.95); }
.setup-hero-ava img { width:100%; height:100%; border-radius:50%; }

.setup-hero {
  position:relative; overflow:hidden; border-radius:22px;
  background:linear-gradient(135deg, var(--bg-deep) 0%, rgba(20,28,60,.95) 100%);
  border:1px solid rgba(91,143,255,.12);
  padding:28px 16px 20px; margin-bottom:8px;
}
.setup-hero .bg-star { position:absolute; border-radius:50%; background:#fff;
  animation:twinkle var(--d,3s) ease-in-out infinite; animation-delay:var(--delay,0s);
}
.hero-blob-l {
  position:absolute; top:-20px; left:-20px; width:100px; height:100px;
  background:rgba(80,120,255,.1); border-radius:50%; pointer-events:none;
}
.hero-blob-r {
  position:absolute; bottom:-15px; right:-15px; width:80px; height:80px;
  background:rgba(255,220,0,.06); border-radius:50%; pointer-events:none;
}
.setup-hero-content { position:relative; z-index:2; text-align:center; }
.setup-hero-brand {
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.setup-hero-star {
  font-size:18px; animation:spin 8s linear infinite;
  filter:drop-shadow(0 2px 6px rgba(255,230,0,.6));
}
.setup-hero-label {
  font-family:'Nunito',sans-serif; font-weight:900; font-size:16px;
  color:rgba(160,190,255,.85); letter-spacing:.08em; text-transform:uppercase;
}
.setup-hero-rank {
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em;
  padding:4px 14px; border-radius:var(--pill); margin-top:6px;
  background:rgba(0,0,0,.3); border:1px solid;
}

.sec-title {

font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;

color:var(--dim); margin-bottom:8px;

}

.toggle-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.tog {

background:rgba(20,28,60,.6); border:1.5px solid rgba(91,143,255,.12); border-radius:14px;

padding:12px; display:flex; align-items:center; gap:9px;

cursor:pointer; transition:all .25s ease;

}

.tog:active { transform:scale(.97); }

.tog.on { border-color:var(--blue-lt); background:rgba(59,110,248,.18); box-shadow:0 0 12px rgba(59,110,248,.1); }

.tog-icon { font-size:22px; }

.tog-lbl { font-size:12px; font-weight:700; color:var(--text); }

.tog-sw {

margin-left:auto; width:30px; height:17px; border-radius:9px;

background:var(--muted); position:relative; transition:background .2s; flex-shrink:0;

}

.tog-sw::after {

content:''; position:absolute; top:2px; left:2px;

width:13px; height:13px; border-radius:50%; background:#fff; transition:transform .2s;

}

.tog.on .tog-sw { background:var(--blue); }

.tog.on .tog-sw::after { transform:translateX(13px); }

.subcat-wrap { padding:4px 0 8px 0; }
.subcat-label { font-size:11px; font-weight:800; color:var(--dim); margin-bottom:6px; display:flex; align-items:center; gap:6px; cursor:pointer; }
.subcat-label .tog-icon { font-size:14px; }
.subcat-chips { display:flex; flex-wrap:wrap; gap:6px; }
.subcat-chip {
  padding:5px 10px; background:rgba(17,20,40,.6); border:1px solid var(--border);
  border-radius:var(--pill); font-size:11px; font-weight:700; color:var(--dim);
  cursor:pointer; transition:all .15s; user-select:none;
}
.subcat-chip.on { border-color:var(--blue-lt); color:var(--text); background:rgba(59,110,248,.15); }

.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }

.chip {

padding:6px 12px; background:var(--bg-panel); border:1px solid var(--border);

border-radius:var(--pill); font-size:11px; font-weight:700;

color:var(--dim); cursor:pointer; transition:all .2s;

}

.chip.on { background:rgba(59,110,248,.25); border-color:var(--blue-lt); color:var(--blue-lt); }

.diff-row { display:flex; gap:6px; margin-bottom:14px; }

.diff-btn {

flex:1; padding:10px 2px; background:rgba(20,28,60,.6);

border:1.5px solid rgba(91,143,255,.12); border-radius:12px;

font-size:10px; font-weight:800; color:var(--dim); cursor:pointer;

text-transform:uppercase; letter-spacing:.04em; transition:all .25s ease;

}
.diff-btn:active { transform:scale(.95); }

.diff-btn.on { background:rgba(59,110,248,.3); border-color:var(--blue-lt); color:#fff; box-shadow:0 0 10px rgba(59,110,248,.15); }

.summary {

background:var(--bg-panel); border:1px solid var(--border);

border-radius:18px; padding:13px; font-size:12px; line-height:1.9; color:var(--dim);

}

.summary strong { color:var(--text); }

.map-wrap { position:relative; width:100%; flex:1; min-height:200px; overflow:hidden; background:var(--ocean); }
.map-wrap svg { display:block; width:100%; height:100%; }
.map-wrap .country-path { fill:#1a2450; stroke:#2a3a6e; stroke-width:.5px; cursor:pointer; transition:fill .15s; }
.map-wrap .country-path:hover { fill:#243068; }
.map-wrap .country-path.country-in-play { fill:rgba(100,190,80,.22); stroke:rgba(100,190,80,.40); stroke-width:.6px; }
.map-wrap .country-path.country-in-play:hover { fill:rgba(100,190,80,.38); }
.map-wrap .country-path.country-greyed { fill:rgba(180,140,0,.12); stroke:rgba(180,140,0,.18); stroke-width:.3px; cursor:default; pointer-events:none; }
.map-wrap .lake-path { fill:#13305c; stroke:#13305c; stroke-width:.3px; pointer-events:none; transition: fill 0.15s; }

@keyframes lake-flash-show {
  0%, 100% { fill: #13305c; stroke: #13305c; }
  50% { fill: #2266bb; stroke: #55aaff; }
}
@keyframes lake-flash-correct {
  0%, 100% { fill: #13305c; stroke: #13305c; }
  50% { fill: #157a4a; stroke: #22d17a; }
}
@keyframes lake-flash-wrong {
  0%, 100% { fill: #13305c; stroke: #13305c; }
  50% { fill: #7a1535; stroke: #f04060; }
}
.lake-path.lake-flash-show    { animation: lake-flash-show .8s ease-in-out infinite !important; }
.lake-path.lake-flash-correct { animation: lake-flash-correct .6s ease-in-out 3 !important; }
.lake-path.lake-flash-wrong   { animation: lake-flash-wrong .8s ease-in-out infinite !important; }
.map-wrap .river-path { fill:none; stroke:#4fc3f7; stroke-width:1.4px; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; opacity:.85; }
.map-wrap .hint-city-dot { fill:#ffd66e; stroke:rgba(6,13,46,.75); stroke-width:.4px; pointer-events:none; opacity:.85; }
.map-wrap .hint-heritage-dot { fill:#b86bff; stroke:rgba(6,13,46,.75); stroke-width:.4px; pointer-events:none; opacity:.85; }
.map-wrap .hint-mountain-chevron { fill:none; stroke:#2f270f; stroke-width:1px; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; opacity:.18; }
.map-wrap .graticule { fill:none; stroke:rgba(91,143,255,.08); stroke-width:.4px; }
.map-wrap .sphere { fill:none; stroke:rgba(91,143,255,.12); stroke-width:.6px; }

.sub-header {
  display:flex; align-items:center; gap:10px; padding:12px 16px; width:100%;
}
.sub-back {
  width:32px; height:32px; border-radius:50%; background:var(--bg-panel);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:16px; color:var(--dim); transition:all .2s;
}
.sub-back:hover { border-color:var(--blue-lt); color:var(--text); }
.sub-title { font-family:'Nunito',sans-serif; font-weight:900; font-size:18px; color:#fff; letter-spacing:.02em; }

.setup-panel {
  width:100%; padding:14px 16px 32px; display:flex; flex-direction:column; gap:14px;
}

.snap-slider-wrap { padding:4px 0; }
.snap-slider {
  -webkit-appearance:none; appearance:none; width:100%; height:6px;
  background:var(--bg-panel); border:1px solid var(--border); border-radius:3px; outline:none;
}
.snap-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--wrong); border:2px solid #fff; cursor:pointer;
}
.snap-slider::-moz-range-thumb {
  width:20px; height:20px; border-radius:50%;
  background:var(--wrong); border:2px solid #fff; cursor:pointer;
}
.snap-label {
  display:flex; justify-content:space-between; font-size:9px; color:var(--dim);
  margin-top:4px; font-weight:700; letter-spacing:.03em;
}
.snap-label span.active { color:var(--wrong); }

.mode-row { display:flex; gap:8px; }
.mode-btn {
  flex:1; padding:11px 8px; background:rgba(20,28,60,.6);
  border:1.5px solid rgba(91,143,255,.12); border-radius:12px;
  font-size:11px; font-weight:800; color:var(--dim); cursor:pointer;
  text-align:center; transition:all .25s ease;
}
.mode-btn:active { transform:scale(.95); }
.mode-btn.on { background:rgba(59,110,248,.22); border-color:var(--blue-lt); color:#fff; box-shadow:0 0 10px rgba(59,110,248,.12); }

.dur-row { display:flex; gap:8px; flex-wrap:wrap; }
.dur-chip {
  padding:8px 16px; background:rgba(20,28,60,.6); border:1.5px solid rgba(91,143,255,.12);
  border-radius:var(--pill); font-size:11px; font-weight:800;
  color:var(--dim); cursor:pointer; transition:all .25s ease;
}
.dur-chip:active { transform:scale(.95); }
.dur-chip.on { background:rgba(59,110,248,.25); border-color:var(--blue-lt); color:var(--blue-lt); box-shadow:0 0 10px rgba(59,110,248,.1); }

.opt-toggle {
  display:flex; align-items:center; gap:10px; padding:6px 0; cursor:pointer;
}
.opt-toggle .opt-lbl { font-size:11px; font-weight:700; color:var(--dim); }
.mini-sw {
  width:34px; height:18px; border-radius:9px; background:var(--muted);
  position:relative; transition:background .2s; flex-shrink:0;
}
.mini-sw::after {
  content:''; position:absolute; top:2px; left:2px;
  width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .2s;
}
.mini-sw.on { background:var(--blue); }
.mini-sw.on::after { transform:translateX(16px); }

.start-btn {
  width:100%; padding:16px; border-radius:16px; font-size:16px; font-weight:900;
  font-family:'Nunito',sans-serif; letter-spacing:.04em; text-align:center;
  transition:all .25s ease; border:none;
}
.start-btn.ready { background:var(--yellow); color:#1a1a2e; cursor:pointer; box-shadow:0 4px 0 rgba(180,140,0,.5),0 0 20px rgba(255,220,0,.15); }
.start-btn.ready:hover { filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 6px 0 rgba(180,140,0,.5),0 0 28px rgba(255,220,0,.2); }
.start-btn.ready:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(180,140,0,.5); }
.start-btn.disabled { background:rgba(20,28,60,.6); color:var(--muted); cursor:not-allowed; }

#s-game { background:var(--bg-dark); position:relative; overflow:hidden; }
#game-map-container { flex:1; min-height:0; overflow:hidden; }

@media (orientation:portrait) {
  #s-game.active { position:fixed; inset:0; z-index:100; }
  #s-game .game-topbar {
    position:relative; z-index:10;
    background:rgba(6,13,46,.45);
  }
  #s-game #game-map-container {
    flex:1; min-height:0; width:100%;
  }
  #s-game #game-map-container .map-wrap {
    width:100%; height:100%;
  }
  #s-game #game-map-container .map-wrap svg {
    width:100%; height:100%;
  }
}

@media (orientation:landscape) {
  #s-game.active {
    position:fixed; inset:0; z-index:100;
  }
  #s-game .game-topbar {
    position:absolute; top:0; left:0; right:0; z-index:10;
    background:linear-gradient(to bottom,rgba(6,13,46,.45) 60%,transparent);
  }
  #s-game #game-map-container {
    position:absolute; inset:0;
  }
  #s-game #game-map-container .map-wrap {
    width:100%; height:100%;
  }
  #s-game #game-map-container .map-wrap svg {
    width:100%; height:100%;
  }
}

.game-topbar {

position:absolute; top:0; left:0; right:0;

display:flex; align-items:center; gap:8px; padding:10px 12px;

background:linear-gradient(to bottom,rgba(6,13,46,.45) 60%,transparent);

z-index:10; pointer-events:none;

}

.game-topbar > * { pointer-events:auto; }

.q-card {

flex:1; background:rgba(17,20,40,.45); border:1px solid rgba(42,58,110,.35);

border-radius:13px; padding:9px 13px;

}

.q-cat {

font-size:8px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;

color:var(--blue-lt); margin-bottom:2px; display:inline;

}

.q-count { font-size:8px; font-weight:700; color:var(--dim); float:right; margin-top:1px; letter-spacing:.05em; }
.q-back { display:none; float:right; margin-top:-1px; margin-right:6px; font-size:11px; font-weight:700; color:var(--blue-lt); cursor:pointer; opacity:.7; transition:opacity .15s; padding:0 3px; }
.q-back:hover { opacity:1; }

.q-text { font-size:14px; font-weight:800; color:#fff; line-height:1.3; }

.score-box { text-align:center; flex-shrink:0; }

.score-num { font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:#ffe135; display:flex; align-items:center; justify-content:center; gap:3px; }

.score-lbl { font-size:7px; color:var(--dim); text-transform:uppercase; letter-spacing:.1em; }

.quit-btn {

width:34px; height:34px; border-radius:50%;

background:rgba(240,64,96,.15); border:1px solid rgba(240,64,96,.3);

color:var(--wrong); font-size:15px;

display:flex; align-items:center; justify-content:center; cursor:pointer;

}

.snd-btn {
width:34px; height:34px; border-radius:50%;
background:rgba(79,195,247,.15); border:1px solid rgba(79,195,247,.3);
color:#4fc3f7; font-size:15px;
display:flex; align-items:center; justify-content:center; cursor:pointer;
flex-shrink:0; transition: opacity .2s;
}
.snd-btn.muted { opacity:.4; }

.prog-bar {

position:absolute; top:0; left:0; right:0; height:3px;

background:rgba(255,255,255,.08); z-index:20;

}

.prog-fill {

height:100%; background:linear-gradient(to right,var(--blue),var(--yellow));

transition:width .4s ease; width:0%;

}

.fb-overlay {

position:absolute; inset:0; z-index:15; pointer-events:none;

display:flex; flex-direction:column; align-items:center;

justify-content:flex-end; padding-bottom:28px;

}

.fb-panel {

background:rgba(17,20,40,.97); border:1px solid var(--border);

border-radius:22px; padding:15px 18px; width:calc(100% - 28px);

display:flex; align-items:center; gap:12px;

transform:translateY(140px); transition:transform .4s cubic-bezier(.34,1.56,.64,1);

pointer-events:all;

}

.fb-panel.show { transform:translateY(0); }

.fb-ava {

width:52px; height:52px; border-radius:50%;

background:linear-gradient(135deg,#1a2050,#2a3a80);

border:3px solid var(--blue); display:flex; align-items:center;

justify-content:center; font-size:26px; flex-shrink:0;

}

.fb-ava.ok { border-color:var(--correct); }

.fb-ava.no { border-color:var(--wrong); }

.fb-body { flex:1; }

.fb-verdict { font-size:22px; font-weight:900; margin-bottom:3px; }

.fb-verdict.ok { color:var(--correct); }

.fb-verdict.no { color:var(--wrong); }

.fb-detail { font-size:11px; color:var(--dim); line-height:1.5; }

.fb-next {

padding:9px 14px; background:var(--yellow); color:var(--bg-deep);

font-weight:900; font-size:12px; border-radius:var(--pill);

box-shadow:0 3px 0 rgba(180,140,0,.5); border:none; cursor:pointer; white-space:nowrap;

}

#s-results { background:var(--bg-dark); padding:24px 20px; gap:16px; overflow-y:auto; }

.ring-wrap {

width:130px; height:130px; margin:0 auto; position:relative;

display:flex; align-items:center; justify-content:center;

}

.ring-wrap svg { position:absolute; inset:0; width:100%; height:100%; }

.ring-text { text-align:center; }

.ring-pct { font-family:'Fredoka One',sans-serif; font-size:34px; color:#fff; display:block; }

.ring-sub { font-size:10px; color:var(--dim); }

.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; }

.stat-card {

background:var(--bg-panel); border:1px solid var(--border);

border-radius:14px; padding:14px 10px; text-align:center;

}

.stat-val { font-family:'Space Mono',monospace; font-size:22px; color:#fff; }

.stat-lbl { font-size:8px; color:var(--dim); text-transform:uppercase; letter-spacing:.1em; margin-top:2px; }

#s-profile { background:var(--bg-dark); padding:20px; gap:14px; overflow-y:auto; }
#s-store { background:var(--bg-dark); padding:20px; gap:14px; overflow-y:auto; }

.rank-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }

.rank-card {

background:var(--bg-panel); border:1px solid var(--border);

border-radius:14px; padding:13px; text-align:center;

}

.rank-lbl { font-size:8px; text-transform:uppercase; letter-spacing:.1em; color:var(--dim); margin-bottom:3px; }

.rank-val { font-family:'Fredoka One',sans-serif; font-size:22px; color:var(--yellow); }

.rank-sub { font-size:8px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; margin-top:2px; }

.profile-section-hdr { font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:.12em; margin:14px 0 6px; padding:0 2px; }

.wlt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px 4px; align-items:center; justify-items:center; margin-top:2px; }
.wlt-h { font-size:7px; color:var(--dim); font-weight:800; letter-spacing:.05em; }
.wlt-v { font-family:'Space Mono',monospace; font-size:14px; font-weight:700; color:#fff; line-height:1.1; }

.profile-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
.profile-hero-card { background:var(--bg-panel); border:1px solid var(--border); border-radius:16px; padding:12px; text-align:center; }
.profile-hero-lbl { font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:.12em; margin-bottom:4px; }
.profile-hero-val { font-family:'Space Mono',monospace; font-size:28px; font-weight:700; line-height:1.05; }

#s-leaderboard { background:var(--bg-dark); padding:20px; gap:14px; overflow-y:auto; }

.lb-tab-row { display:flex; gap:6px; width:100%; }

.lb-tab {
background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--pill);
padding:10px 0; flex:1; text-align:center; font-size:13px; font-weight:700;
color:var(--dim); transition:all .2s;
}

.lb-tab.active { background:var(--blue); border-color:var(--blue); color:#fff; }

.lb-offline-banner {
background:rgba(255,159,67,.12); border:1px solid rgba(255,159,67,.3);
border-radius:10px; padding:8px 12px; font-size:11px; color:#ff9f43;
text-align:center; width:100%;
}

.lb-row {
display:flex; align-items:center; gap:10px; padding:10px 12px;
background:var(--bg-panel); border:1px solid var(--border); border-radius:14px;
width:100%;
}

.lb-row.lb-me { border-color:var(--blue); background:rgba(59,110,248,.08); }

.lb-rank {
font-family:'Space Mono',monospace; font-size:14px; font-weight:700;
color:var(--dim); min-width:28px; text-align:right;
}

.lb-rank.gold   { color:#ffe135; }
.lb-rank.silver { color:#c0c0c0; }
.lb-rank.bronze { color:#cd7f32; }

.lb-ava {
width:34px; height:34px; border-radius:50%; background:var(--bg-deep);
display:flex; align-items:center; justify-content:center; font-size:18px;
flex-shrink:0; overflow:hidden;
}

.lb-ava img { width:100%; height:100%; border-radius:50%; }

.lb-info { flex:1; min-width:0; }

.lb-handle { font-size:13px; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.lb-sub { font-size:10px; color:var(--dim); margin-top:1px; }

.lb-cr {
font-family:'Space Mono',monospace; font-size:15px; font-weight:700;
text-align:right; min-width:50px;
}

.lb-nav-btn {
display:flex; align-items:center; justify-content:center; gap:8px;
background:var(--bg-panel); border:1px solid var(--border); border-radius:14px;
padding:14px; width:100%; margin-top:4px; font-size:14px; font-weight:700;
color:var(--yellow); cursor:pointer; transition:border-color .2s;
}

.lb-nav-btn:hover { border-color:var(--yellow); }

.toast {

position:fixed; bottom:22px; left:50%;

transform:translateX(-50%) translateY(80px);

background:var(--bg-panel); border:1px solid var(--border);

border-radius:var(--pill); padding:9px 20px;

font-size:13px; font-weight:700; color:#fff; white-space:nowrap;

z-index:9999; transition:transform .3s cubic-bezier(.34,1.56,.64,1);

pointer-events:none;

}

.toast.show { transform:translateX(-50%) translateY(0); }

.conf {

position:fixed; top:-10px; width:8px; height:8px;

border-radius:2px; animation:fall linear forwards;

z-index:9000; pointer-events:none;

}

@keyframes fall {

0% { transform:translateY(0) rotate(0); opacity:1; }

100% { transform:translateY(100vh) rotate(720deg); opacity:0; }

}

.offline-bar {

position:fixed; top:0; left:0; right:0;

background:rgba(240,64,96,.9); color:#fff;

font-size:11px; font-weight:700; text-align:center;

padding:4px 0; z-index:10000;

transform:translateY(-100%); transition:transform .3s ease;

}

.offline-bar.show { transform:translateY(0); }

.edu-screen {

background: var(--edu-bg);

}

.edu-screen .edu-topbar {

width:100%; display:flex; align-items:center; gap:12px;

padding:16px 20px 12px; border-bottom:1px solid var(--edu-border);

}

.edu-screen .edu-logo {

width:44px; height:44px; border-radius:10px; overflow:hidden; border:2px solid rgba(91,143,255,.35); box-shadow:0 0 12px rgba(91,143,255,.2); display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(91,143,255,.18), rgba(91,143,255,.06));

}

.edu-screen .edu-logo img { width:150%; height:150%; object-fit:cover; object-position:center; margin:-25% 0 0 -25%; image-rendering:auto; }

.edu-screen .edu-logo .edu-logo-text { font-family:'Fredoka One', sans-serif; font-size:15px; font-weight:700; color:rgba(255,255,255,.9); letter-spacing:0.5px; }

.edu-screen .edu-brand {

display:flex; flex-direction:column;

}

.edu-screen .edu-brand-name {

font-family:'Nunito',sans-serif; font-weight:900; font-size:18px; color:#fff;

letter-spacing:.02em;

}

.edu-screen .edu-brand-sub {

font-size:9px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;

color:var(--edu-accent); margin-top:-2px;

}

.edu-screen .edu-back {

width:36px; height:36px; border-radius:8px;

background:var(--edu-bg-card); border:1px solid var(--edu-border);

display:flex; align-items:center; justify-content:center;

font-size:16px; cursor:pointer; color:var(--text); flex-shrink:0;

}

.edu-screen .edu-card {

background:var(--edu-bg-card); border:1px solid var(--edu-border);

border-radius:12px; padding:16px; margin-bottom:12px;

}

.edu-screen .edu-card h3 {

font-size:14px; font-weight:800; color:#fff; margin-bottom:8px;

}

.edu-screen .edu-btn {

padding:11px 20px; background:var(--edu-accent); color:#fff;

font-weight:800; font-size:13px; border-radius:8px;

border:none; cursor:pointer; transition:opacity .2s;

}

.edu-screen .edu-btn:hover { opacity:.85; }

.edu-screen .edu-stat-val {

font-family:'Space Mono',monospace; font-size:20px; color:#fff;

}

.edu-screen .edu-stat-lbl {

font-size:8px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; margin-top:2px;

}

.edu-screen .edu-content { padding:16px 20px; overflow-y:auto; flex:1; }

.edu-screen .edu-stats-row {
display:flex; gap:10px; margin-bottom:14px;
}

.edu-screen .edu-stat-card {
flex:1; background:var(--edu-bg-card); border:1px solid var(--edu-border);
border-radius:10px; padding:12px; text-align:center;
}

.edu-screen .edu-nav-card {
background:var(--edu-bg-card); border:1px solid var(--edu-border);
border-radius:12px; padding:14px 16px; margin-bottom:10px;
display:flex; align-items:center; gap:12px; cursor:pointer;
transition:border-color .2s;
}
.edu-screen .edu-nav-card:hover { border-color:var(--edu-accent); }

.edu-screen .edu-nav-icon {
width:36px; height:36px; border-radius:8px; background:rgba(59,110,248,.12);
display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
}

.edu-screen .edu-nav-text { flex:1; }
.edu-screen .edu-nav-title { font-weight:800; font-size:13px; color:#fff; }
.edu-screen .edu-nav-desc { font-size:10px; color:var(--dim); margin-top:1px; }

.edu-screen .edu-link-code {
font-family:'Space Mono',monospace; font-size:28px; font-weight:700;
letter-spacing:.2em; color:var(--edu-accent); text-align:center;
padding:14px; background:var(--edu-bg-panel); border:2px dashed var(--edu-border);
border-radius:12px; margin:10px 0;
}

.edu-screen .edu-student-row {
display:flex; align-items:center; gap:10px; padding:10px 0;
border-bottom:1px solid var(--edu-border); cursor:pointer;
}
.edu-screen .edu-student-row:last-child { border-bottom:none; }

.edu-screen .edu-student-ava {
width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0;
background:var(--edu-bg-panel); display:flex; align-items:center; justify-content:center;
font-size:18px;
}
.edu-screen .edu-student-ava img { width:100%; height:100%; object-fit:cover; }

.edu-screen .edu-student-info { flex:1; min-width:0; }
.edu-screen .edu-student-handle { font-weight:700; font-size:13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.edu-screen .edu-student-meta { font-size:10px; color:var(--dim); }

.edu-screen .edu-student-cr { font-family:'Space Mono',monospace; font-size:14px; font-weight:700; color:var(--edu-accent); text-align:right; flex-shrink:0; }

.edu-screen .edu-search-input {
width:100%; padding:10px 14px; background:var(--edu-bg-card); border:1px solid var(--edu-border);
border-radius:8px; color:#fff; font-size:13px; font-family:inherit;
}
.edu-screen .edu-search-input::placeholder { color:var(--dim); }

.edu-screen .edu-empty {
text-align:center; padding:40px 20px; color:var(--dim); font-size:13px;
}

.edu-screen .edu-badge {
display:inline-block; background:var(--edu-accent); color:#fff; font-size:8px;
font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:2px 6px;
border-radius:4px; margin-left:6px; vertical-align:middle;
}

.edu-screen .msg-convo-row {
display:flex; align-items:center; gap:10px; padding:12px 0;
border-bottom:1px solid var(--edu-border); cursor:pointer;
}
.edu-screen .msg-convo-row:last-child { border-bottom:none; }
.edu-screen .msg-convo-ava {
width:40px; height:40px; border-radius:50%; overflow:hidden; flex-shrink:0;
background:var(--edu-bg-panel); display:flex; align-items:center; justify-content:center;
font-size:20px; position:relative;
}
.edu-screen .msg-convo-ava img { width:100%; height:100%; object-fit:cover; }
.edu-screen .msg-convo-info { flex:1; min-width:0; }
.edu-screen .msg-convo-name { font-weight:700; font-size:13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.edu-screen .msg-convo-preview { font-size:11px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.edu-screen .msg-convo-time { font-size:9px; color:var(--dim); text-align:right; flex-shrink:0; min-width:50px; }
.edu-screen .msg-unread-dot {
width:8px; height:8px; border-radius:50%; background:var(--edu-accent);
position:absolute; top:0; right:0; box-shadow:0 0 6px rgba(59,110,248,.5);
}
.edu-screen .msg-bubble {
max-width:80%; padding:10px 14px; border-radius:14px; font-size:13px;
line-height:1.4; word-wrap:break-word; margin-bottom:6px;
}
.edu-screen .msg-bubble-sent {
background:var(--edu-accent); color:#fff; margin-left:auto; border-bottom-right-radius:4px;
}
.edu-screen .msg-bubble-recv {
background:var(--edu-bg-card); color:#fff; border:1px solid var(--edu-border); border-bottom-left-radius:4px;
}
.edu-screen .msg-bubble-time {
font-size:9px; color:var(--dim); margin-top:2px;
}
.edu-screen .msg-compose-bar {
display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--edu-border);
background:var(--edu-bg); position:sticky; bottom:0;
}
.edu-screen .msg-compose-input {
flex:1; padding:10px 14px; background:var(--edu-bg-card); border:1px solid var(--edu-border);
border-radius:20px; color:#fff; font-size:13px; font-family:inherit; resize:none;
min-height:20px; max-height:80px; line-height:1.4;
}
.edu-screen .msg-compose-input::placeholder { color:var(--dim); }
.edu-screen .msg-send-btn {
width:40px; height:40px; border-radius:50%; background:var(--edu-accent);
border:none; color:#fff; font-size:16px; cursor:pointer; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
}
.edu-screen .msg-send-btn:disabled { opacity:.4; cursor:default; }
.msg-template-picker {
display:flex; flex-wrap:wrap; gap:8px; padding:4px 0; width:100%;
max-height:160px; overflow-y:auto;
}
.msg-template-btn {
flex:1 1 calc(50% - 8px); min-width:0; padding:10px 12px;
background:var(--bg-panel, #1a2332); border:1px solid var(--border, #2a3a50);
border-radius:16px; color:#fff; font-size:12px; font-weight:600;
font-family:inherit; cursor:pointer; text-align:center; line-height:1.3;
transition:background .12s, transform .08s;
}
.msg-template-btn:hover { background:var(--edu-accent, #4fc3f7); border-color:var(--edu-accent, #4fc3f7); }
.msg-template-btn:active { transform:scale(.97); }
.edu-screen .msg-recipient-chip {
display:inline-flex; align-items:center; gap:4px; padding:5px 10px;
background:var(--edu-bg-card); border:1px solid var(--edu-border); border-radius:16px;
font-size:11px; color:#fff; cursor:pointer; margin:3px;
}
.edu-screen .msg-recipient-chip.selected {
background:var(--edu-accent); border-color:var(--edu-accent);
}
.edu-screen .msg-recipient-chip .chip-remove {
font-size:10px; color:rgba(255,255,255,.5); margin-left:2px;
}
.edu-screen .msg-date-sep {
text-align:center; font-size:9px; color:var(--dim); margin:12px 0 8px;
text-transform:uppercase; letter-spacing:.08em;
}
.msg-inbox-overlay {
position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999;
background:var(--edu-bg); display:flex; flex-direction:column;
}
.msg-inbox-overlay .msg-inbox-topbar {
display:flex; align-items:center; gap:12px; padding:16px 20px 12px;
border-bottom:1px solid var(--edu-border);
}
.msg-inbox-overlay .msg-inbox-back {
width:36px; height:36px; border-radius:8px;
background:var(--bg-panel); border:1px solid var(--border);
display:flex; align-items:center; justify-content:center;
font-size:16px; cursor:pointer; color:var(--text); flex-shrink:0;
}
.msg-inbox-overlay .msg-inbox-body {
flex:1; overflow-y:auto; padding:16px 20px;
}

.edu-screen .comp-form-group { margin-bottom:14px; }
.edu-screen .comp-form-group label {
  display:block; font-size:10px; color:var(--dim); text-transform:uppercase;
  letter-spacing:.1em; margin-bottom:5px; font-weight:700;
}
.edu-screen .comp-input {
  width:100%; padding:10px 12px; background:var(--edu-bg-panel); border:1px solid var(--edu-border);
  border-radius:8px; color:#fff; font-size:13px; font-family:inherit;
}
.edu-screen .comp-input::placeholder { color:var(--dim); }
.edu-screen .comp-row { display:flex; gap:8px; flex-wrap:wrap; }
.edu-screen .comp-chip {
  padding:7px 14px; background:var(--edu-bg-panel); border:1px solid var(--edu-border);
  border-radius:20px; font-size:11px; font-weight:700; color:var(--dim); cursor:pointer;
  transition: all .15s;
}
.edu-screen .comp-chip.on { background:var(--edu-accent); color:#fff; border-color:var(--edu-accent); }
.edu-screen .comp-item {
  background:var(--edu-bg-card); border:1px solid var(--edu-border); border-radius:12px;
  padding:14px; margin-bottom:10px; cursor:pointer; transition: border-color .15s;
}
.edu-screen .comp-item:hover { border-color:var(--edu-accent); }
.edu-screen .comp-item .comp-name {
  font-weight:800; font-size:14px; color:#fff; margin-bottom:4px;
}
.edu-screen .comp-item .comp-meta { font-size:10px; color:var(--dim); }
.edu-screen .comp-status {
  display:inline-block; padding:2px 8px; border-radius:10px; font-size:9px;
  font-weight:800; text-transform:uppercase; letter-spacing:.06em;
}
.edu-screen .comp-status.active { background:var(--correct); color:#060d2e; }
.edu-screen .comp-status.upcoming { background:var(--yellow); color:#060d2e; }
.edu-screen .comp-status.ended { background:var(--edu-bg-panel); color:var(--dim); }
.comp-banner {
  background: linear-gradient(135deg, rgba(59,110,248,.15), rgba(34,209,122,.1));
  border:1px solid var(--correct); border-radius:12px; padding:12px 16px;
  margin-bottom:12px; cursor:pointer; transition: transform .12s;
}
.comp-banner:active { transform:scale(.98); }
.comp-banner .comp-banner-title {
  font-weight:800; font-size:13px; color:var(--correct);
  display:flex; align-items:center; gap:6px;
}
.comp-banner .comp-banner-sub { font-size:10px; color:var(--dim); margin-top:3px; }
.cc-item { padding:10px 0; border-bottom:1px solid var(--edu-border); }
.cc-item:last-child { border-bottom:none; }
.edu-screen .comp-lb-row {
  display:flex; align-items:center; gap:10px; padding:10px 0;
  border-bottom:1px solid var(--edu-border);
}
.edu-screen .comp-lb-row:last-child { border-bottom:none; }
.edu-screen .comp-lb-rank {
  width:28px; text-align:center; font-family:'Space Mono',monospace;
  font-weight:700; font-size:14px; color:var(--edu-accent); flex-shrink:0;
}
.edu-screen .comp-lb-info { flex:1; min-width:0; }
.edu-screen .comp-lb-name { font-weight:700; font-size:13px; color:#fff; }
.edu-screen .comp-lb-stats { font-size:10px; color:var(--dim); }
.edu-screen .comp-lb-score {
  font-family:'Space Mono',monospace; font-size:15px; font-weight:700;
  color:var(--yellow); text-align:right; flex-shrink:0;
}

.join-class-field {
margin-top:10px; padding:12px; background:var(--bg-panel); border:1px solid var(--border);
border-radius:14px;
}

.join-class-field label {
font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.1em;
display:block; margin-bottom:6px;
}

.join-class-field .join-row {
display:flex; gap:8px;
}

.join-class-field input {
flex:1; padding:8px 10px; background:var(--bg-deep); border:1px solid var(--border);
border-radius:8px; color:#fff; font-size:13px; font-family:'Space Mono',monospace;
letter-spacing:.1em; text-transform:uppercase;
}

.join-class-field button {
padding:8px 14px; background:var(--blue); color:#fff; font-weight:700;
font-size:12px; border-radius:8px;
}

.map-svg { display:block; width:100%; height:100%; }

.country-path {

fill:rgba(59,110,248,.12); stroke:rgba(91,143,255,.25); stroke-width:.5;

cursor:pointer; transition:fill .15s;

}

.country-path:hover { fill:rgba(59,110,248,.25); }

.country-path.country-in-play { fill:rgba(100,190,80,.22); stroke:rgba(100,190,80,.40); stroke-width:.6; }
.country-path.country-in-play:hover { fill:rgba(100,190,80,.38); }
.country-path.country-greyed { fill:rgba(180,140,0,.12); stroke:rgba(180,140,0,.18); stroke-width:.3; cursor:default; pointer-events:none; }

.ocean-bg { fill:var(--ocean); }

.ocean-bg.game { fill:#b8d4e8; }

@keyframes hl-pulse {

0%, 100% { opacity:.7; }

50% { opacity:1; }

}

.hl-pulse { animation:hl-pulse .8s ease-in-out infinite; }

@keyframes cel-pulse {

0%, 100% { opacity:.6; }

50% { opacity:.95; }

}

.cel-pulse { animation:cel-pulse .6s ease-in-out 2; }

@keyframes h2h-flash {

0% { opacity:0; }

18% { opacity:1; }

100% { opacity:.18; }

}

.h2h-flash { animation:h2h-flash .45s ease-out forwards; }

::-webkit-scrollbar { width:4px; }

::-webkit-scrollbar-track { background:transparent; }

::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

#s-avatar { background:var(--bg-deep); overflow:hidden; }

#avatar-builder-root { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; }

#avatar-builder-root .app{width:100%;max-width:460px;display:flex;flex-direction:column;height:100%;z-index:1;background:rgba(10,25,47,.3)}

#avatar-builder-root .prev{flex:0 0 25%;display:flex;justify-content:center;align-items:center;padding:16px;position:relative}

#avatar-builder-root .abox{width:164px;height:164px;border-radius:28px;background:rgba(255,255,255,.05);overflow:hidden;display:flex;align-items:center;justify-content:center}

#avatar-builder-root #av{width:100%;height:100%;object-fit:contain}

#avatar-builder-root .ch{padding:14px 14px 6px;flex-shrink:0;overflow:visible}

#avatar-builder-root .pw{padding:0}

#avatar-builder-root .pal{display:flex;gap:12px;overflow-x:auto;padding:16px 8px;scrollbar-width:none}

#avatar-builder-root .pal::-webkit-scrollbar,

#avatar-builder-root .tabs::-webkit-scrollbar,

#avatar-builder-root .gs::-webkit-scrollbar{display:none}

#avatar-builder-root .sw{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;flex-shrink:0;transition:transform .15s,box-shadow .15s}

#avatar-builder-root .sw.on{transform:scale(1.1);border-color:#1cb0f6;box-shadow:0 0 10px #1cb0f6}

#avatar-builder-root .tabs{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}

#avatar-builder-root .tab{padding:10px 16px;border:1px solid rgba(255,255,255,.15);border-radius:14px;font-weight:700;cursor:pointer;white-space:nowrap;color:#94a3b8;background:rgba(255,255,255,.05);user-select:none;transition:.15s}

#avatar-builder-root .tab.on{color:#1cb0f6;border-color:#1cb0f6;background:rgba(28,176,246,.15)}

#avatar-builder-root .gs{flex-grow:1;overflow-y:auto;padding:14px;scrollbar-width:none}

#avatar-builder-root .og{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

#avatar-builder-root .cd{aspect-ratio:1;border:2px solid transparent;border-radius:20px;cursor:pointer;background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:.15s}

#avatar-builder-root .cd:hover{transform:translateY(-1px);background:rgba(255,255,255,.06)}

#avatar-builder-root .cd.on{border-color:#1cb0f6;background:rgba(28,176,246,.1)}

#avatar-builder-root .cd img{width:88%;height:88%;object-fit:contain;pointer-events:none}

#avatar-builder-root .cw{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}

#avatar-builder-root .cw .cd{width:100%}

#avatar-builder-root .cw .lbl{font-size:.58rem;font-weight:700;color:rgba(255,255,255,.45);text-align:center;letter-spacing:.2px}

#avatar-builder-root .cw .cd.on~.lbl{color:rgba(28,176,246,.75)}

#avatar-builder-root .ft{padding:14px;flex-shrink:0;display:flex;gap:10px}

#avatar-builder-root .btn{flex:1;padding:16px;border:none;border-radius:18px;font-size:1rem;font-weight:800;cursor:pointer}

#avatar-builder-root .bf{background:var(--yellow);color:#855d00;box-shadow:0 5px 0 #b38b00}

#avatar-builder-root .br{background:rgba(255,255,255,.08);color:#fff;border:none}

#avatar-builder-root .btn:active{transform:translateY(2px)}

.screen { opacity:0; transition:opacity .25s ease; }
.screen.active { opacity:1; }
.screen.screen-enter { animation:screenIn .3s ease forwards; }
@keyframes screenIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

.ns-spinner {
  width:36px; height:36px; border:3px solid rgba(91,143,255,.2);
  border-top-color:var(--blue-lt); border-radius:50%;
  animation:ns-spin .7s linear infinite; margin:0 auto;
}
@keyframes ns-spin { to{transform:rotate(360deg)} }

.ns-loading-overlay {
  position:absolute; inset:0; z-index:20;
  background:rgba(6,13,46,.85); display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.ns-loading-overlay .ns-loading-text {
  font-size:13px; font-weight:700; color:var(--dim);
  letter-spacing:.04em;
}

.ripple-wrap { position:relative; overflow:hidden; }
.ripple-circle {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.18); transform:scale(0);
  animation:rippleOut .5s ease-out forwards; pointer-events:none;
}
@keyframes rippleOut { to{transform:scale(2.5);opacity:0} }

.streak-burst {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:48px; font-weight:900; color:var(--yellow);
  text-shadow:0 0 20px rgba(255,225,53,.6),0 0 40px rgba(255,150,0,.3);
  z-index:9500; pointer-events:none;
  animation:burstIn .8s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes burstIn {
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  40%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-60%) scale(1)}
}

.rank-up-banner {
  position:fixed; top:0; left:0; right:0;
  padding:14px 20px; text-align:center; z-index:9600;
  font-weight:900; font-size:15px; letter-spacing:.03em;
  transform:translateY(-100%);
  animation:rankSlide 3s cubic-bezier(.34,1.56,.64,1) forwards;
  pointer-events:none;
}
@keyframes rankSlide {
  0%{transform:translateY(-100%)}
  15%{transform:translateY(0)}
  85%{transform:translateY(0)}
  100%{transform:translateY(-100%)}
}

.star-pop {
  position:absolute; pointer-events:none; z-index:100;
  font-size:28px; filter:drop-shadow(0 0 6px rgba(255,225,53,.7));
  animation:starFly 1.2s ease-out forwards;
}
@keyframes starFly {
  0%{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
  50%{opacity:1;transform:translateY(-20px) scale(1.3) rotate(180deg)}
  100%{opacity:0;transform:translateY(-50px) scale(.6) rotate(360deg)}
}
.star-burst {
  animation:starBurst .5s ease-out forwards;
}
@keyframes starBurst {
  0%{transform:scale(1)}
  40%{transform:scale(1.5)}
  100%{transform:scale(1)}
}

.ns-error-card {
  background:rgba(240,64,96,.12); border:1px solid rgba(240,64,96,.3);
  border-radius:16px; padding:16px 20px; text-align:center;
  max-width:320px; margin:20px auto;
}
.ns-error-card .err-icon { font-size:28px; margin-bottom:6px; }
.ns-error-card .err-msg { font-size:13px; font-weight:700; color:var(--wrong); margin-bottom:8px; }
.ns-error-card .err-retry {
  background:var(--wrong); color:#fff; border:none; border-radius:var(--pill);
  padding:8px 20px; font-weight:800; font-size:12px; cursor:pointer;
}

button, .btn-yellow, .btn-primary, .btn-sec, .back-btn, .quit-btn,
.cat-row, .diff-btn, .mode-btn, .fb-next, [data-go] {
  touch-action:manipulation;
}

.btn-yellow:active, .btn-primary:active { transition-duration:.04s; }

.screen { -webkit-overflow-scrolling:touch; }

#admin-impersonate-bar { flex-shrink: 0; }
body.impersonating .screen { padding-bottom: 54px !important; }

#s-admin { background: var(--bg-deep); padding: 0; overflow: hidden; }
#s-admin.active { display: flex; flex-direction: column; }
#admin-root { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.admin-header {
  padding: 16px 18px 10px;
  border-bottom: 1px solid rgba(91,143,255,.12);
  flex-shrink: 0;
}

.admin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(91,143,255,.12);
  flex-shrink: 0;
}

.admin-tab {
  flex: 1;
  padding: 11px 8px;
  background: transparent;
  color: var(--dim);
  font-size: 13px;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.admin-tab.active {
  color: #fff;
  border-bottom-color: #3b6ef8;
}

.admin-content {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  -webkit-overflow-scrolling: touch;
}

.admin-prof-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-prof-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  -webkit-tap-highlight-color: transparent;
}

.admin-prof-row:active {
  background: rgba(59,110,248,.12);
  border-color: rgba(91,143,255,.4);
}

#admin-trigger { cursor: default; }

.nsg-modal-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.78); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; animation:nsgFadeIn .25s ease;
}
@keyframes nsgFadeIn { from{opacity:0} to{opacity:1} }
.nsg-modal {
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:18px; padding:24px 22px; max-width:400px; width:100%;
  max-height:85vh; overflow-y:auto; position:relative;
}
.nsg-modal h3 {
  font-family:'Fredoka One',sans-serif; font-size:20px; color:#fff;
  margin-bottom:14px; text-align:center;
}
.nsg-modal p, .nsg-modal .nsg-body {
  font-size:13px; color:var(--text); line-height:1.6; margin-bottom:10px;
}
.nsg-modal textarea {
  width:100%; min-height:100px; background:var(--bg-deep); color:var(--text);
  border:1px solid var(--border); border-radius:12px; padding:12px;
  font-family:'Nunito',sans-serif; font-size:13px; resize:vertical;
}
.nsg-modal textarea:focus { border-color:var(--blue); }
.nsg-modal .nsg-btn-primary {
  display:block; width:100%; margin-top:14px; padding:13px;
  background:var(--yellow); color:#111; font-family:'Fredoka One',sans-serif;
  font-size:15px; border-radius:var(--pill); border:none; cursor:pointer;
}
.nsg-modal .nsg-btn-secondary {
  display:block; width:100%; margin-top:8px; padding:11px;
  background:var(--bg-deep); color:var(--text); font-weight:700;
  font-size:13px; border:1px solid var(--border); border-radius:var(--pill); cursor:pointer;
}
.nsg-note-card {
  background:var(--bg-deep); border:1px solid var(--border); border-radius:12px;
  padding:12px; margin-bottom:10px;
}
.nsg-note-card .nsg-note-meta {
  font-size:10px; color:var(--dim); margin-bottom:6px;
}
.nsg-note-card .nsg-note-msg {
  font-size:13px; color:var(--text); line-height:1.5;
}
.nsg-note-card .nsg-note-reply {
  margin-top:10px; padding:10px; background:rgba(59,110,248,.08);
  border-left:3px solid var(--blue); border-radius:0 8px 8px 0;
}
.nsg-note-card .nsg-note-reply .nsg-reply-label {
  font-size:9px; color:var(--blue-lt); text-transform:uppercase;
  letter-spacing:.1em; font-weight:700; margin-bottom:3px;
}
.nsg-note-card .nsg-note-reply .nsg-reply-text {
  font-size:12px; color:var(--text); line-height:1.5;
}
.nsg-unread-dot {
  display:inline-block; width:8px; height:8px; background:var(--wrong);
  border-radius:50%; margin-left:6px; vertical-align:middle;
}
.nsg-note-count {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--blue); color:#fff; font-size:10px; font-weight:800;
  min-width:18px; height:18px; border-radius:9px; padding:0 5px;
  margin-left:6px;
}




#s-h2h-queue.active{position:fixed;inset:0;z-index:100;background:#060d2e;display:flex;align-items:center;justify-content:center}
#h2h-queue-root .frame{width:100%;max-width:390px;min-height:100vh;background:#060d2e;display:flex;flex-direction:column;align-items:center;padding:48px 24px 36px;position:relative;overflow:hidden;color:#e8f4ff}
#h2h-queue-root .stars{position:absolute;inset:0;pointer-events:none;z-index:0}
#h2h-queue-root .q-title{font-size:28px;font-weight:500;letter-spacing:0.5px;margin:6px 0 6px;text-align:center;z-index:2;min-height:38px;font-family:-apple-system,system-ui,sans-serif;white-space:nowrap;display:flex;align-items:baseline;justify-content:center;gap:0}
#h2h-queue-root .q-title .qt-base{display:inline-block}
#h2h-queue-root .q-title .qt-dot{display:inline-block;width:.32em;text-align:left;opacity:0;animation:h2hQDot 1.4s ease-in-out infinite}
#h2h-queue-root .q-title .qt-dot:nth-child(3){animation-delay:.2s}
#h2h-queue-root .q-title .qt-dot:nth-child(4){animation-delay:.4s}
@keyframes h2hQDot{0%,80%,100%{opacity:0}40%{opacity:1}}
#h2h-queue-root .q-sub{font-size:14px;color:#a8c8e0;margin:0 0 28px;text-align:center;z-index:2}
#h2h-queue-root .globe-wrap{position:relative;width:280px;height:280px;z-index:2;display:flex;align-items:center;justify-content:center}
#h2h-queue-root .ring{position:absolute;inset:-16px;border-radius:50%;border:1px solid rgba(142,218,118,0.30);animation:h2hpulse 3s ease-in-out infinite}
#h2h-queue-root .ring2{position:absolute;inset:-30px;border-radius:50%;border:1px solid rgba(142,218,118,0.15);animation:h2hpulse 3s ease-in-out infinite;animation-delay:0.5s}
@keyframes h2hpulse{0%,100%{transform:scale(1);opacity:0.45}50%{transform:scale(1.05);opacity:0.9}}
#h2h-queue-root .q-stats{display:flex;gap:44px;margin-top:32px;z-index:2;align-items:center}
#h2h-queue-root .q-stat{text-align:center}
#h2h-queue-root .q-stat-num{font-size:28px;font-weight:500;color:#8eda76;line-height:1}
#h2h-queue-root .q-stat-lbl{font-size:11px;color:#a8c8e0;text-transform:uppercase;letter-spacing:1.3px;margin-top:8px}
#h2h-queue-root .q-divider{width:1px;height:36px;background:rgba(255,255,255,0.18)}
#h2h-queue-root .q-back{margin-top:32px;background:transparent;border:1px solid rgba(255,255,255,0.3);color:#cfe3f5;padding:12px 32px;border-radius:999px;font-size:13px;cursor:pointer;z-index:2;font-weight:500;font-family:inherit}
#h2h-queue-root .q-back:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.5)}
#h2h-queue-root .q-foot{margin-top:16px;font-size:10px;color:#6a8ebf;letter-spacing:1px;text-transform:uppercase;z-index:2}


#s-h2h-results.active{position:fixed;inset:0;z-index:100;background:#0a0a0a;overflow-y:auto}
#h2h-results-root{min-height:100vh;background:linear-gradient(180deg,#0f1f4a 0%,#0a1530 100%);color:#e8f4ff;font-family:-apple-system,system-ui,sans-serif;display:flex;flex-direction:column;padding:36px 20px 28px;box-sizing:border-box}
#h2h-results-root *{box-sizing:border-box}
#h2h-results-root .headline{font-size:30px;font-weight:800;color:#fff;text-align:center;letter-spacing:-.5px;min-height:38px;margin-bottom:18px}
#h2h-results-root .headline.tie{color:#ffe135}
#h2h-results-root .headline.empty{visibility:hidden}
#h2h-results-root .avarow{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:14px}
#h2h-results-root .avaslot{display:flex;flex-direction:column;align-items:center;gap:6px}
#h2h-results-root .ava{border-radius:50%;background:#2a3a6a;overflow:hidden;display:flex;align-items:center;justify-content:center}
#h2h-results-root .ava.winner{width:88px;height:88px}
#h2h-results-root .ava.loser{width:72px;height:72px}
#h2h-results-root .ava.tie-you{width:80px;height:80px}
#h2h-results-root .ava.tie-opp{width:80px;height:80px}
#h2h-results-root .uname{font-size:12px;font-weight:700;color:#fff}
#h2h-results-root .you-tag{font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8eda76}
#h2h-results-root .opp-tag{font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#ff6b6b}
#h2h-results-root .scorerow{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:14px}
#h2h-results-root .scorenum{font-family:"Space Mono",monospace;font-size:34px;font-weight:700;line-height:1}
#h2h-results-root .scorenum.you{color:#8eda76}
#h2h-results-root .scorenum.opp{color:#ff6b6b}
#h2h-results-root .scoredash{font-size:18px;color:#8899bb;font-weight:300}
#h2h-results-root .stats{background:rgba(17,20,40,.55);border:1px solid rgba(42,58,110,.5);border-radius:12px;padding:11px 14px;margin-top:auto;margin-bottom:0;max-width:340px;width:100%;align-self:center}
#h2h-results-root .statrow{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:7px 0}
#h2h-results-root .statrow + .statrow{border-top:1px solid rgba(255,255,255,.06)}
#h2h-results-root .statlbl{font-size:8px;color:#8899bb;text-transform:uppercase;letter-spacing:.12em;text-align:center;font-weight:700;white-space:nowrap}
#h2h-results-root .statval{font-size:14px;font-weight:700;color:#fff;font-family:"Space Mono",monospace;white-space:nowrap}
#h2h-results-root .statval.left{text-align:left}
#h2h-results-root .statval.right{text-align:right}
#h2h-results-root .delta-pos{color:#4ade80;font-size:12px;font-weight:700;margin-left:3px}
#h2h-results-root .delta-neg{color:#f04060;font-size:12px;font-weight:700;margin-left:3px}
#h2h-results-root .delta-flat{color:#8899bb;font-size:12px;font-weight:700;margin-left:3px}
#h2h-results-root .wlt{display:inline-grid;grid-template-columns:repeat(3,22px);gap:2px;text-align:center}
#h2h-results-root .wlt.right{margin-left:auto}
#h2h-results-root .wlthdr{font-size:7px;color:#8899bb;font-weight:800;letter-spacing:.05em}
#h2h-results-root .wltval{font-size:13px;color:#fff;font-weight:700;font-family:"Space Mono",monospace}
#h2h-results-root .btnrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px;max-width:340px;width:100%;align-self:center}
#h2h-results-root .btn{padding:11px 8px;border-radius:11px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border:1px solid rgba(91,143,255,.4);background:rgba(17,20,40,.6);color:#cfe3f5;cursor:pointer;font-family:inherit;transition:all .2s}
#h2h-results-root .btn:hover{background:rgba(17,20,40,.85);border-color:rgba(91,143,255,.7)}
#h2h-results-root .btn.rematch-you{background:rgba(74,222,128,.18);border-color:#4ade80;color:#bff7d0}
#h2h-results-root .btn.rematch-opp{background:rgba(74,222,128,.18);border-color:#4ade80;color:#bff7d0;animation:h2hRematchPulse 1.4s ease-in-out infinite}
@keyframes h2hRematchPulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}50%{box-shadow:0 0 0 8px rgba(74,222,128,0)}}
  /* Stars-earned badge — shows the ⭐ total banked this match. */
#h2h-results-root .stars-earned {display:flex;align-items:center;justify-content:center;gap:8px;margin:14px auto 6px;padding:10px 22px;background:linear-gradient(135deg,rgba(255,215,53,.18),rgba(255,180,53,.12));border:1px solid rgba(255,215,53,.45);border-radius:999px;width:fit-content;font-size:17px;font-weight:800;color:#ffe135;letter-spacing:.02em;animation:h2hStarsIn .6s ease-out .35s both,h2hStarsGlow 2.4s ease-in-out .9s infinite}
#h2h-results-root .stars-earned .sb-plus{color:#fff}
#h2h-results-root .stars-earned .sb-star{font-size:19px;filter:drop-shadow(0 0 6px rgba(255,215,53,.7))}
#h2h-results-root .stars-earned.zero{opacity:.55;color:#a8c8e0;border-color:rgba(168,200,224,.25);background:rgba(168,200,224,.06)}
#h2h-results-root .stars-earned.zero .sb-plus,#h2h-results-root .stars-earned.zero .sb-star{color:#a8c8e0;filter:none}
@keyframes h2hStarsIn{0%{opacity:0;transform:translateY(8px) scale(.92)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes h2hStarsGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,215,53,0)}50%{box-shadow:0 0 18px 2px rgba(255,215,53,.35)}}

#globe-picker-root{position:relative;min-height:100vh;background:#060d2e;color:#e8f4ff;display:flex;flex-direction:column;align-items:center;padding:48px 24px 36px;overflow:hidden;font-family:-apple-system,system-ui,sans-serif}
#globe-picker-root .gp-stars{position:absolute;inset:0;pointer-events:none;z-index:0}
#globe-picker-root .gp-back{position:absolute;top:16px;left:16px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:#cfe3f5;font-size:20px;cursor:pointer;z-index:5}
#globe-picker-root .gp-back:hover{background:rgba(255,255,255,.12)}
#globe-picker-root .gp-ava{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;z-index:5}
#globe-picker-root .gp-ava:hover{background:rgba(255,255,255,.12)}
#globe-picker-root .gp-title{font-size:26px;font-weight:500;letter-spacing:.5px;margin:6px 0 4px;text-align:center;z-index:2;color:#fff}
#globe-picker-root .gp-sub{font-size:13px;color:#a8c8e0;margin:0 0 22px;text-align:center;z-index:2}
#globe-picker-root .gp-globe-wrap{position:relative;width:300px;height:300px;z-index:2;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
#globe-picker-root .gp-globe-wrap:active{cursor:grabbing}
#globe-picker-root .gp-flash{position:absolute;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(255,213,79,.55),transparent 70%);animation:gpFlash .6s ease-out forwards}
@keyframes gpFlash{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}
#globe-picker-root .gp-actions{display:flex;gap:14px;margin-top:26px;z-index:2}
#globe-picker-root .gp-btn{padding:13px 22px;background:rgba(255,255,255,.06);border:1px solid rgba(142,218,118,.45);color:#e8f4ff;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;font-family:inherit;transition:all .2s ease}
#globe-picker-root .gp-btn:hover{background:rgba(142,218,118,.12);border-color:rgba(142,218,118,.7)}
#globe-picker-root .gp-btn .gp-btn-ico{font-size:18px}
#globe-picker-root .gp-lb{margin-top:18px;background:transparent;border:1px solid rgba(255,255,255,.22);color:#cfe3f5;padding:11px 26px;border-radius:999px;font-size:12px;cursor:pointer;z-index:2;font-weight:500;font-family:inherit}
#globe-picker-root .gp-lb:hover{background:rgba(255,255,255,.08)}
#globe-picker-root .gp-foot{margin-top:14px;font-size:10px;color:#6a8ebf;letter-spacing:1px;text-transform:uppercase;z-index:2}