:root{
  --bg:#071824;--panel:#092031;--panel-2:#0a2537;--panel-3:#0c2a3f;--line:#1a4660;--line-2:#286681;
  --text:#f5f9fc;--muted:#91a9bd;--cyan:#20e2f3;--cyan-2:#55dffd;--blue:#2f7ef7;--green:#4ce4a4;
  --yellow:#ffc343;--orange:#ff9354;--red:#ff596b;--shadow:0 28px 80px rgba(0,0,0,.42)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 78% 12%,rgba(31,133,180,.24),transparent 32rem),linear-gradient(180deg,#061725,#071824 55%,#051520)}
body{min-height:100vh}.hidden{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;padding:22px}.app-grid{max-width:1660px;margin:0 auto;display:grid;grid-template-columns:minmax(400px,630px) minmax(0,1fr);gap:16px}
.game-card,.world-card{border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,rgba(10,31,46,.97),rgba(7,23,35,.98));box-shadow:var(--shadow);overflow:hidden}
.game-card{padding:28px 28px 24px;min-height:850px;display:flex;flex-direction:column}
.brand-row{display:flex;align-items:center;justify-content:space-between}
.brand-static{
  display:flex;
  align-items:center;
  width:min(430px,100%);
  pointer-events:none;
  user-select:none;
}
.brand-image-wrap{
  justify-content:flex-start;
  overflow:visible;
}
.orbis-logo-image{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:left center;
  border:0;
  user-select:none;
  -webkit-user-drag:none;
  background:transparent;
  filter:drop-shadow(0 0 10px rgba(18,207,232,.08));
}

.play-mode-switch{
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px;
  border:1px solid #183e55;
  border-radius:15px;
  background:rgba(8,28,42,.78);
}
.mode-btn,.new-training-btn{
  height:38px;
  border-radius:11px;
  border:1px solid transparent;
  padding:0 14px;
  background:transparent;
  color:#7897aa;
  font-size:10px;
  font-weight:950;
  letter-spacing:.10em;
  transition:.16s ease;
}
.mode-btn:hover,.new-training-btn:hover{color:#d7e8ef;background:#0c2638}
.mode-btn.active{
  color:#03131d;
  background:linear-gradient(135deg,#5ee8f5,#1bd0df);
  box-shadow:0 8px 22px rgba(27,208,223,.12);
}
.new-training-btn{
  margin-left:auto;
  color:#8fe8f2;
  border-color:#235a73;
}

.intro-block{margin-top:18px}.section-kicker{color:var(--cyan-2);font-size:10px;font-weight:950;letter-spacing:.2em;margin-bottom:10px}.intro-block h1{margin:0;font-size:44px;line-height:1.06;letter-spacing:-.045em}.intro-copy{margin:12px 0 0;max-width:510px;color:#a5bdd0;font-size:15px;line-height:1.55}
.guess-block{margin-top:26px}.search-wrap{position:relative}.search-wrap input{width:100%;height:64px;border:1px solid #3e86aa;border-radius:18px;background:#0a2233;color:white;padding:0 170px 0 56px;outline:none;font-size:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.015),0 0 0 0 rgba(32,226,243,0);transition:.18s}.search-wrap input:focus{border-color:#78eaff;box-shadow:0 0 0 3px rgba(32,226,243,.09),0 10px 38px rgba(0,0,0,.18)}.search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:24px;height:24px;color:#89b6d6}.search-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.guess-btn{position:absolute;right:0;top:0;height:64px;min-width:154px;border:0;border-radius:18px;background:linear-gradient(135deg,#38e6f2,#14cedf);color:#03121b;font-weight:950;letter-spacing:.05em;display:flex;align-items:center;justify-content:center;gap:14px;box-shadow:0 10px 30px rgba(18,212,231,.16);transition:.18s}.guess-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}.guess-btn .arrow{font-size:28px;line-height:.7}.input-note{margin:10px 0 0;color:#7592a7;font-size:12px}.suggestions{position:absolute;left:0;right:0;top:70px;z-index:80;max-height:300px;overflow:auto;border:1px solid #2b5d77;border-radius:17px;background:#0a2233;padding:7px;box-shadow:0 24px 60px rgba(0,0,0,.45)}.suggestion{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;border-radius:11px;background:transparent;color:#f2f8fb;padding:11px 12px;text-align:left}.suggestion:hover,.suggestion.active{background:#0f2a3e}.suggestion strong{font-size:14px}.suggestion span{color:#7695aa;font-size:11px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.stat-card{min-height:116px;border:1px solid #1c4a64;border-radius:17px;background:linear-gradient(180deg,rgba(12,37,54,.92),rgba(8,27,41,.92));padding:18px 16px;display:flex;align-items:flex-start;gap:12px}.stat-icon{width:29px;height:29px;color:var(--cyan);line-height:1;display:grid;place-items:center;flex:0 0 auto}.stat-card>div{min-width:0}.stat-label{display:block;color:#9bb3c5;font-size:10px;font-weight:900;letter-spacing:.13em;margin-bottom:7px}.stat-card strong{font-size:26px;line-height:1}.status-live{color:var(--cyan);font-size:20px}.status-countdown{display:block;margin-top:7px;color:#7697aa;font-size:10px;font-weight:800;letter-spacing:.025em;white-space:nowrap}
.guess-list-card{margin-top:18px;border:1px solid #18455f;border-radius:18px;background:rgba(8,27,41,.76);overflow:hidden;flex:1;min-height:285px}.list-title-row{height:56px;padding:0 18px;display:flex;align-items:center;border-bottom:1px solid #174258}.list-title{display:flex;align-items:center;gap:10px;color:#adc3d1;font-size:11px;font-weight:900;letter-spacing:.11em}.list-icon{width:19px;height:19px;color:var(--cyan);display:grid;place-items:center}.feed{padding:0 18px 6px;max-height:360px;overflow:auto}.feed-row{display:grid;grid-template-columns:minmax(0,1fr) 96px 116px;gap:14px;align-items:center;min-height:58px;border-bottom:1px solid rgba(30,73,95,.58)}.feed-row:last-child{border-bottom:0}.feed-country{display:flex;align-items:center;gap:11px;min-width:0}
.flag{
  width:24px;height:18px;flex:0 0 24px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:4px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(162,198,218,.18);
  background:#0d2130;
}
.flag-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.flag-fallback{
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  color:#dceaf1;
} 
.country-name{font-size:13px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feed-distance{color:#bbcfda;font-size:12px;text-align:right}.badge{justify-self:end;min-width:104px;height:34px;padding:0 13px;border-radius:999px;border:1px solid currentColor;display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:950;letter-spacing:.04em;background:rgba(255,255,255,.025)}.badge.warmer{color:#ffc73f;background:rgba(255,176,24,.1)}.badge.colder{color:#40bfff;background:rgba(26,142,217,.1)}.badge.hot{color:#ff6271;background:rgba(211,47,67,.13)}.badge.same{color:#b5c7d1}.badge.start{color:#9bb3c5}.badge.right{color:#57e6aa;background:rgba(39,205,136,.12)}
.world-card{padding:0;min-height:850px;display:flex;flex-direction:column}.main-nav{height:88px;padding:16px 18px;display:flex;align-items:center;justify-content:center;gap:10px;border-bottom:1px solid #15384d;background:rgba(8,28,42,.78)}.nav-btn{height:52px;padding:0 20px;border:1px solid #1d526f;border-radius:18px;background:#09202f;color:#a9bfd0;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:900;letter-spacing:.1em;transition:.18s}.nav-btn:hover{border-color:#3b86a7;color:#d8e8ef}.nav-btn.active{color:#19e3f1;border-color:#19d7eb;box-shadow:0 0 0 1px rgba(25,215,235,.25),0 0 24px rgba(23,223,240,.18);background:linear-gradient(180deg,rgba(10,46,58,.86),rgba(5,27,38,.9))}.nav-ico{width:19px;height:19px;display:grid;place-items:center;line-height:1;flex:0 0 auto}.nav-separator{width:1px;height:34px;background:#244b60;margin:0 4px}.language-btn{padding:0 17px;color:#d9e7ee}.map-stage{position:relative;flex:1;min-height:760px;margin:0;background:#03121e}.map{position:absolute;inset:0}.maplibregl-map{font:inherit}.maplibregl-canvas{outline:none}.maplibregl-ctrl-bottom-right{right:18px;bottom:18px}.maplibregl-ctrl-group{border-radius:16px;overflow:hidden;background:#071927;border:1px solid #1f5875;box-shadow:0 10px 30px rgba(0,0,0,.32)}.maplibregl-ctrl-group button{width:44px;height:44px;background-color:#071927}.maplibregl-ctrl-group button+button{border-top:1px solid #1f5875}.maplibregl-ctrl-attrib{font-size:9px;background:rgba(4,15,25,.74);color:#7e96a8}.maplibregl-ctrl-attrib a{color:#a4bbc9}
.loading,.map-error{position:absolute;inset:0;z-index:30;display:grid;place-content:center;justify-items:center;gap:12px;background:#04111d;color:#8fa9bb}.spinner{width:30px;height:30px;border:2px solid #24546c;border-top-color:#27dff0;border-radius:50%;animation:spin .8s linear infinite}.map-error strong{color:#edf6fa;font-size:19px}.map-error span{font-size:12px}@keyframes spin{to{transform:rotate(360deg)}}

.feature-overlay{
  position:absolute;
  inset:0;
  z-index:40;
  overflow:auto;
  background:
    radial-gradient(circle at 86% 10%,rgba(26,113,151,.16),transparent 28rem),
    linear-gradient(180deg,#08202f,#061724);
}
.dashboard-content{
  min-height:100%;
  padding:34px 36px 42px;
  color:var(--text);
}
.dashboard-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}
.dashboard-kicker{
  color:var(--cyan);
  font-size:10px;
  font-weight:950;
  letter-spacing:.18em;
  margin-bottom:8px;
}
.dashboard-title{
  margin:0;
  font-size:36px;
  letter-spacing:-.04em;
}
.dashboard-subtitle{
  margin:10px 0 0;
  color:#8fa9ba;
  max-width:650px;
  font-size:14px;
  line-height:1.55;
}
.dashboard-chip{
  border:1px solid #1c526d;
  border-radius:999px;
  padding:10px 14px;
  color:#a8c1cf;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  white-space:nowrap;
  background:#092234;
}
.dash-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
}
.dash-card{
  border:1px solid #19465f;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(12,37,54,.94),rgba(8,27,41,.95));
  padding:17px;
  min-height:104px;
}
.dash-card-label{
  color:#829daf;
  font-size:9px;
  font-weight:950;
  letter-spacing:.14em;
}
.dash-card-value{
  display:block;
  margin-top:8px;
  font-size:28px;
  line-height:1;
}
.dash-card-note{
  display:block;
  margin-top:7px;
  color:#68879b;
  font-size:11px;
}
.dashboard-panel{
  border:1px solid #19465f;
  border-radius:20px;
  background:rgba(8,29,43,.86);
  overflow:hidden;
  margin-top:14px;
}
.panel-head{
  padding:17px 19px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  border-bottom:1px solid #173f55;
}
.panel-head h3{
  margin:0;
  font-size:14px;
  letter-spacing:.02em;
}
.panel-head span{
  color:#7895a7;
  font-size:11px;
}
.rank-rules{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:16px 18px;
}
.rule-card{
  border:1px solid #173b51;
  border-radius:14px;
  padding:13px;
  background:#092131;
}
.rule-card strong{display:block;font-size:12px;margin-bottom:5px}
.rule-card span{font-size:11px;color:#7f9bab;line-height:1.45}
.rank-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.rank-table th{
  color:#6d8ca0;
  font-size:9px;
  letter-spacing:.12em;
  text-align:left;
  padding:12px 18px;
  border-bottom:1px solid #173c51;
}
.rank-table td{
  padding:14px 18px;
  border-bottom:1px solid rgba(23,60,81,.66);
}
.rank-table tr:last-child td{border-bottom:0}
.rank-you{background:rgba(31,210,230,.055)}
.rank-empty{
  padding:34px 20px;
  text-align:center;
  color:#7996a7;
}
.rank-empty strong{
  display:block;
  color:#dce9ef;
  font-size:14px;
  margin-bottom:6px;
}
.distribution{
  padding:17px 18px 20px;
}
.dist-row{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 34px;
  align-items:center;
  gap:10px;
  margin:9px 0;
}
.dist-label,.dist-count{
  font-size:11px;
  color:#90a9b8;
}
.dist-track{
  height:12px;
  border-radius:999px;
  background:#071827;
  overflow:hidden;
  border:1px solid #173d52;
}
.dist-fill{
  height:100%;
  min-width:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#15cbdd,#5de6f5);
}
.history-list{padding:4px 18px 10px}
.history-row{
  display:grid;
  grid-template-columns:110px minmax(0,1fr) 90px 90px;
  gap:12px;
  padding:13px 0;
  align-items:center;
  border-bottom:1px solid rgba(25,64,84,.7);
  font-size:12px;
}
.history-row:last-child{border-bottom:0}
.history-date{color:#7896a8}
.history-country{font-weight:850}
.history-number{text-align:right;color:#b5cad5}
.profile-hero{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:20px;
}
.profile-avatar{
  width:76px;height:76px;
  border-radius:22px;
  display:grid;place-items:center;
  color:#04121c;
  font-size:31px;font-weight:950;
  background:linear-gradient(135deg,#64eaf6,#17cbdc);
  box-shadow:0 12px 35px rgba(22,204,221,.16);
}
.profile-name-row{display:flex;gap:8px;align-items:center}
.profile-name-input{
  height:44px;
  flex:1;
  max-width:360px;
  border:1px solid #285a73;
  border-radius:12px;
  background:#092234;
  color:white;
  padding:0 13px;
  outline:none;
}
.profile-save{
  height:44px;
  border:0;border-radius:12px;
  padding:0 16px;
  background:#1bd2e3;
  color:#03141d;
  font-weight:950;
  font-size:10px;
  letter-spacing:.08em;
}


.friend-box{
  padding:24px 20px;
  display:grid;
  place-items:center;
  text-align:center;
  min-height:240px;
}
.friend-box .big-icon{width:44px;height:44px;color:var(--cyan);margin-bottom:14px}
.friend-box h3{margin:0 0 8px}
.friend-box p{margin:0;max-width:500px;color:#809dab;line-height:1.55;font-size:12px}
.backend-pill{
  display:inline-flex;
  margin-top:14px;
  padding:8px 11px;
  border:1px solid #24566e;
  border-radius:999px;
  color:#8cb3c5;
  font-size:9px;
  font-weight:900;
  letter-spacing:.10em;
}



.toast{position:fixed;left:50%;bottom:26px;z-index:100;transform:translate(-50%,18px);opacity:0;pointer-events:none;border-radius:999px;background:#f4f9fb;color:#03121c;padding:11px 16px;font-size:11px;font-weight:950;box-shadow:0 18px 50px rgba(0,0,0,.4);transition:.16s}.toast.show{opacity:1;transform:translate(-50%,0)}




.search-wrap.round-locked input{opacity:.58;cursor:not-allowed}
.search-wrap.round-locked .guess-btn{opacity:.5;cursor:not-allowed;transform:none}



.feed:empty{min-height:20px}
.championship-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px 18px 18px}
.champion-card{min-height:112px;border:1px solid #1b4a62;border-radius:16px;padding:15px;background:linear-gradient(180deg,rgba(9,31,47,.94),rgba(5,20,32,.94))}
.champion-card .crown{width:27px;height:27px;color:#ffe073;line-height:1;margin-bottom:10px;display:grid;place-items:center}
.champion-card .champ-label{display:block;color:#7d9cad;font-size:9px;font-weight:950;letter-spacing:.13em}
.champion-card .champ-value{display:block;margin-top:7px;font-size:25px;line-height:1}
.champion-card .champ-note{display:block;margin-top:7px;color:#68879a;font-size:10px;line-height:1.4}
.competition-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 18px}
.period-card{border:1px solid #19465f;border-radius:18px;background:linear-gradient(180deg,rgba(8,29,45,.93),rgba(5,20,32,.95));padding:17px}
.period-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.period-name{font-size:10px;font-weight:950;letter-spacing:.12em;color:#8da7b7}
.period-icon{width:23px;height:23px;color:#ffe073;display:grid;place-items:center}
.period-value{display:block;margin-top:10px;font-size:23px}
.period-note{display:block;margin-top:7px;color:#708fa1;font-size:10px;line-height:1.45}
.period-progress{margin-top:11px;height:5px;border-radius:99px;background:#071827;overflow:hidden}
.period-progress>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#19cddd,#5ce8f4)}
.archive-list{padding:5px 18px 12px}
.archive-row{display:grid;grid-template-columns:110px 130px minmax(0,1fr);gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(25,64,84,.7);font-size:12px}
.archive-row:last-child{border-bottom:0}
.archive-type{color:#ffe073;font-size:10px;font-weight:950;letter-spacing:.08em}
.archive-period{color:#7897a9}
.archive-title{font-weight:850}
.future-note{padding:20px 18px;color:#7997a8;font-size:11px;line-height:1.55}



.ui-svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stat-icon .ui-svg{stroke-width:1.7}
.nav-btn.active .ui-svg{filter:drop-shadow(0 0 6px rgba(26,224,240,.26))}
.icon-box{width:28px;height:28px;display:grid;place-items:center;color:var(--cyan)}
.icon-box.gold{color:#ffd76a}
.icon-box.muted{color:#89a8ba}
.icon-box .ui-svg{stroke-width:1.75}

.history-country{display:flex;align-items:center;gap:9px;min-width:0}
.history-country .flag{width:22px;height:16px;flex:0 0 22px;border-radius:3px}

.rank-tabs{
  display:flex;
  gap:8px;
  margin:0 0 18px;
  padding:5px;
  border:1px solid #173f55;
  border-radius:15px;
  background:rgba(4,18,29,.7);
  width:max-content;
  max-width:100%;
}
.rank-tab{
  height:40px;
  padding:0 18px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:#7896a8;
  font-size:10px;
  font-weight:950;
  letter-spacing:.11em;
}
.rank-tab:hover{color:#dbe9ef;background:#0a2334}
.rank-tab.active{
  color:#03131d;
  background:linear-gradient(135deg,#60e9f5,#1bd1e1);
}
.rank-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.rank-summary .dash-card{min-height:96px}
.rank-section-note{
  padding:12px 18px 15px;
  color:#7694a6;
  font-size:10px;
  line-height:1.5;
  border-top:1px solid rgba(23,63,85,.65);
}
.rank-table-wrap{overflow:auto}
.rank-table.compact th,.rank-table.compact td{padding-top:12px;padding-bottom:12px}
.rank-table.compact th:nth-child(1),.rank-table.compact td:nth-child(1){width:54px}
.rank-table.compact th:nth-child(n+3),.rank-table.compact td:nth-child(n+3){text-align:right}
.rank-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 19px;
}
.rank-hero-main{min-width:0}
.rank-hero-kicker{color:#7d9bab;font-size:9px;font-weight:950;letter-spacing:.13em}
.rank-hero-value{display:block;margin-top:7px;font-size:26px}
.rank-hero-note{display:block;margin-top:6px;color:#6f8fa2;font-size:10px}
.rank-hero-icon{width:38px;height:38px;color:#5ee7f3}


.badge-icon{width:14px;height:14px;display:grid;place-items:center}
.badge-icon .ui-svg{stroke-width:2}


/* ==========================================================
   CLEAN RESET MOBILE PLAY
   One viewport: globe on top, play controls + guesses below.
   No whole-page scrolling while playing.
   ========================================================== */







/* ==========================================================
   CLEAN RESET R2 — MOBILE VIEWPORT FIX
   ========================================================== */


/* Short phones */


/* Landscape phones */



/* ==========================================================
   CLEAN RESET R3 — MOBILE TYPING FOCUS
   ========================================================== */


/* Very short screen + keyboard: strip it down even further. */



/* ==========================================================
   CLEAN RESET R4 — MINIMAL MOBILE PLAY
   ========================================================== */


/* Short phones get a little more room for the globe and a smaller history strip. */


/* Landscape: keep it functional without trying to show too much. */




/* ==========================================================
   R5 MOBILE TAB ISOLATION
   Guess history belongs only to PLAY.
   ========================================================== */



/* ==========================================================
   R6 — ACTUAL MOBILE TAB ISOLATION FIX
   ========================================================== */



/* R7: slightly brighter result badges to match stronger map colors */
.badge.cold{
  border-color:rgba(255,224,130,.82);
  color:#ffd56a;
  background:rgba(255,214,106,.10);
}
.badge.warmer{
  border-color:rgba(255,196,73,.95);
  color:#ffcb59;
  background:rgba(255,203,89,.12);
}
.badge.hot{
  border-color:rgba(255,118,96,.95);
  color:#ff8268;
  background:rgba(255,130,104,.12);
}


/* ==========================================================
   R8 — WELCOME BACK / ORBIS IDENTITY
   ========================================================== */
.welcome-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:18px;
}
.welcome-modal.hidden{display:none}
.welcome-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,8,14,.78);
  backdrop-filter:blur(12px);
}
.welcome-card{
  position:relative;
  z-index:1;
  width:min(520px,100%);
  max-height:92dvh;
  overflow:auto;
  padding:27px;
  border:1px solid #1e536c;
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 0%,rgba(27,207,223,.12),transparent 245px),
    linear-gradient(180deg,#0b2638,#071b29);
  box-shadow:0 34px 100px rgba(0,0,0,.54);
}
.welcome-close{
  position:absolute;
  top:13px;
  right:13px;
  width:34px;
  height:34px;
  border:1px solid #214b61;
  border-radius:50%;
  background:#061723;
  color:#7697a8;
  font-size:20px;
}
.welcome-logo{
  display:block;
  width:min(315px,78%);
  height:auto;
  margin:2px auto 22px;
}
.welcome-kicker{
  color:#46dfea;
  text-align:center;
  font-size:8px;
  font-weight:950;
  letter-spacing:.17em;
}
.welcome-card h1{
  margin:8px 0 6px;
  text-align:center;
  font-size:30px;
  letter-spacing:-.035em;
}
.welcome-copy{
  max-width:380px;
  margin:0 auto 20px;
  color:#819cab;
  text-align:center;
  font-size:11px;
  line-height:1.55;
}
.welcome-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.welcome-stat,
.welcome-winner{
  border:1px solid #183f53;
  background:rgba(10,32,47,.88);
}
.welcome-stat{
  min-height:92px;
  padding:14px 15px;
  border-radius:16px;
}
.welcome-stat-label{
  display:block;
  color:#6e90a2;
  font-size:7.5px;
  font-weight:950;
  letter-spacing:.12em;
}
.welcome-stat strong{
  display:block;
  margin-top:8px;
  color:#f5f9fb;
  font-size:17px;
}
.welcome-stat small,
.welcome-winner small{
  display:block;
  margin-top:5px;
  color:#6d8999;
  font-size:9px;
  line-height:1.45;
}
.welcome-winner{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:12px;
  align-items:center;
  margin-top:10px;
  padding:13px 15px;
  border-radius:16px;
}
.welcome-winner-mark{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:8px;
  border:1px solid rgba(75,228,239,.23);
  border-radius:12px;
  background:rgba(75,228,239,.08);
  color:#4be4ef;
}
.welcome-winner strong{
  display:block;
  margin-top:5px;
  font-size:12px;
}
.welcome-congrats{
  margin-top:10px;
  padding:12px 14px;
  border:1px solid rgba(94,225,168,.30);
  border-radius:14px;
  background:rgba(55,203,142,.08);
  text-align:center;
}
.welcome-congrats.hidden{display:none}
.welcome-congrats strong{
  display:block;
  color:#6ce3b4;
  font-size:10px;
  letter-spacing:.13em;
}
.welcome-congrats span{
  display:block;
  margin-top:4px;
  color:#9fc5b5;
  font-size:9px;
}
.welcome-start{
  width:100%;
  height:51px;
  margin-top:15px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,#55e8f4,#1bcfdf);
  color:#03131b;
  font-size:10px;
  font-weight:950;
  letter-spacing:.10em;
}
body.welcome-open{overflow:hidden}

.mobile-nav-logo{display:none}






/* ==========================================================
   R11 ONLINE / AUTH / PLAYER ROUTES
   ========================================================== */

.auth-modal,
.route-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:16px;
}
.auth-modal.hidden,
.route-modal.hidden{display:none}

.auth-backdrop,
.route-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,8,14,.82);
  backdrop-filter:blur(12px);
}

.auth-card,
.route-card{
  position:relative;
  z-index:1;
  width:min(470px,100%);
  max-height:94dvh;
  overflow:auto;
  border:1px solid #1d536d;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 0%,rgba(27,207,223,.12),transparent 240px),
    linear-gradient(180deg,#0b2638,#071b29);
  box-shadow:0 36px 110px rgba(0,0,0,.58);
}

.auth-card{
  padding:26px;
}

.auth-logo{
  display:block;
  width:min(285px,76%);
  margin:0 auto 20px;
}

.auth-kicker,
.route-kicker{
  color:#47dfe9;
  font-size:8px;
  font-weight:950;
  letter-spacing:.16em;
  text-align:center;
}

.auth-card h1{
  margin:8px 0 6px;
  text-align:center;
  font-size:29px;
}

.auth-copy{
  margin:0 auto 19px;
  color:#829dab;
  text-align:center;
  font-size:11px;
  line-height:1.5;
}

.auth-label{
  display:block;
  margin:12px 2px 6px;
  color:#6e90a2;
  font-size:7.5px;
  font-weight:950;
  letter-spacing:.11em;
}

.auth-input{
  width:100%;
  height:50px;
  padding:0 14px;
  border:1px solid #214d63;
  border-radius:13px;
  outline:none;
  background:#092334;
  color:#f4f8fa;
  font:inherit;
  font-size:16px;
}
.auth-input:focus{
  border-color:#36d7e4;
  box-shadow:0 0 0 3px rgba(54,215,228,.10);
}
.auth-pin{
  letter-spacing:.22em;
  font-weight:900;
}

.auth-message{
  min-height:18px;
  margin:10px 2px 2px;
  color:#80a4b5;
  font-size:9px;
}
.auth-message.error{color:#ff8b79}

.auth-primary,
.auth-secondary{
  width:100%;
  height:49px;
  margin-top:9px;
  border-radius:13px;
  font-size:9px;
  font-weight:950;
  letter-spacing:.10em;
}
.auth-primary{
  border:0;
  background:linear-gradient(135deg,#55e8f4,#1bcfdf);
  color:#03131b;
}
.auth-secondary{
  border:1px solid #24546b;
  background:#0a2738;
  color:#b5d0db;
}

.auth-note{
  margin:13px 4px 0;
  color:#577687;
  font-size:8px;
  line-height:1.45;
  text-align:center;
}

body.auth-open,
body.welcome-open{overflow:hidden}

.route-card{
  width:min(650px,100%);
  padding:24px;
}
.route-close{
  position:absolute;
  top:12px;
  right:12px;
  width:34px;
  height:34px;
  border:1px solid #214b61;
  border-radius:50%;
  background:#061723;
  color:#7595a7;
  font-size:20px;
}
.route-card h2{
  margin:8px 0 3px;
  text-align:center;
  font-size:25px;
}
.route-subtitle{
  margin:0 0 18px;
  text-align:center;
  color:#7897a8;
  font-size:10px;
}
.route-path{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.route-step{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) 92px 112px;
  align-items:center;
  gap:11px;
  min-height:52px;
  padding:7px 9px;
  border:1px solid #173e52;
  border-radius:12px;
  background:rgba(9,30,44,.88);
}
.route-step.correct{
  border-color:rgba(76,228,164,.45);
  background:rgba(48,187,127,.08);
}
.route-number{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid #245064;
  border-radius:50%;
  color:#83a7b8;
  font-size:9px;
  font-weight:900;
}
.route-country{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.route-country strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
}
.route-distance{
  min-width:0;
  color:#a3bbc7;
  text-align:right;
  font-size:9px;
  white-space:nowrap;
}
.route-step .badge{
  width:100%;
  min-width:0;
  max-width:112px;
  padding-left:9px;
  padding-right:9px;
}

.route-error{
  padding:20px;
  border:1px solid #563743;
  border-radius:12px;
  color:#e6a0a8;
  text-align:center;
  font-size:10px;
}

.rank-player-btn{
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}
.rank-player-btn:not(:disabled):hover{
  color:#54e5f0;
  text-decoration:underline;
  text-underline-offset:3px;
}
.rank-player-btn:disabled{
  cursor:default;
  opacity:.72;
}
.rank-route-row{cursor:pointer}

.online-loading{
  min-height:180px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:12px;
  color:#7898aa;
  font-size:10px;
}

.friend-add-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
}
.friend-list-online{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.friend-row-online{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid #183e52;
  border-radius:12px;
  background:rgba(5,22,34,.72);
}
.profile-avatar.small{
  width:36px;
  height:36px;
  font-size:12px;
}
.friend-main{
  min-width:0;
}
.friend-main strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
}
.friend-main small{
  display:block;
  margin-top:3px;
  color:#6e8ea0;
  font-size:8px;
}
.friend-remove,
.profile-logout{
  height:34px;
  padding:0 10px;
  border:1px solid #4b3840;
  border-radius:9px;
  background:#15151c;
  color:#d8969c;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}





/* ============================================================
   ORBIS R11.5 ADMIN
   ============================================================ */
.admin-panel{
  margin-top:14px;
  border-color:rgba(61,217,198,.28);
  background:linear-gradient(180deg,rgba(9,33,47,.92),rgba(7,25,37,.92));
}
.admin-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.admin-panel-head h3{
  margin:3px 0 4px;
  font-size:18px;
  color:#f2fbff;
}
.admin-panel-head p{
  margin:0;
  max-width:630px;
  font-size:9px;
  line-height:1.45;
  color:#87a7b7;
}
.admin-badge,
.admin-mini-badge,
.admin-you{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(61,217,198,.4);
  background:rgba(61,217,198,.08);
  color:#70e5d5;
  border-radius:999px;
  font-weight:950;
  letter-spacing:.1em;
}
.admin-badge{
  min-height:29px;
  padding:0 11px;
  font-size:7px;
}
.admin-mini-badge,
.admin-you{
  margin-left:5px;
  padding:3px 6px;
  font-size:6px;
  vertical-align:middle;
}
.admin-you{
  border-color:rgba(111,178,255,.34);
  background:rgba(111,178,255,.08);
  color:#a9d4ff;
}
.admin-danger-zone{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:13px;
  border:1px solid rgba(255,190,73,.25);
  background:rgba(255,190,73,.055);
  border-radius:14px;
  margin-bottom:10px;
}
.admin-danger-zone strong{
  display:block;
  font-size:9px;
  letter-spacing:.08em;
  color:#f1d38e;
}
.admin-danger-zone small{
  display:block;
  margin-top:4px;
  max-width:650px;
  color:#98aeb8;
  font-size:8px;
  line-height:1.4;
}
.admin-block-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  margin-bottom:14px;
}
.admin-btn{
  min-height:34px;
  padding:0 11px;
  border:1px solid rgba(115,162,187,.28);
  border-radius:9px;
  background:#0c1f2b;
  color:#c9dce6;
  font-size:7px;
  font-weight:950;
  letter-spacing:.075em;
  white-space:nowrap;
  cursor:pointer;
}
.admin-btn:hover{border-color:rgba(123,194,230,.48);background:#102938}
.admin-btn:disabled{opacity:.45;cursor:wait}
.admin-btn-accent{
  border-color:rgba(255,190,73,.42);
  color:#ffd778;
  background:rgba(255,190,73,.08);
}
.admin-btn-danger{
  border-color:rgba(224,105,115,.34);
  color:#f1a4ab;
  background:rgba(164,55,67,.09);
}
.admin-panel-body{
  border-top:1px solid rgba(109,167,195,.13);
  padding-top:12px;
}
.admin-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 1px 7px;
  color:#6fe1d3;
  font-size:7px;
  font-weight:950;
  letter-spacing:.11em;
}
.admin-section-head small{
  min-width:22px;
  text-align:center;
  padding:3px 6px;
  border-radius:999px;
  background:#0c2331;
  color:#8ba8b6;
  font-size:7px;
}
.admin-section-spaced{margin-top:16px}
.admin-player-list,
.admin-blocked-list{
  display:grid;
  gap:6px;
}
.admin-player-row,
.admin-blocked-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:8px 9px 8px 11px;
  border:1px solid rgba(113,163,188,.15);
  border-radius:11px;
  background:rgba(5,19,28,.44);
}
.admin-player-main,
.admin-blocked-row>div{min-width:0}
.admin-player-main strong,
.admin-blocked-row strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  color:#e9f6fb;
}
.admin-player-main small,
.admin-blocked-row small{
  display:block;
  margin-top:3px;
  color:#6f8f9f;
  font-size:7px;
}
.admin-player-actions{
  display:flex;
  align-items:center;
  gap:6px;
}




/* ==========================================================
   R11.6 — DISTANCE / TERRITORY INFO
   ========================================================== */
.guess-help-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}
.guess-help-row .input-note{margin:0}
.distance-info-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:#7da8bd;
  padding:3px 0;
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
  transition:.16s ease;
}
.distance-info-btn:hover{color:#58e4ef}
.distance-info-dot{
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border:1px solid #34708b;
  border-radius:50%;
  color:#57dfe9;
  font-size:10px;
  font-weight:950;
  font-family:Georgia,serif;
  text-transform:none;
  letter-spacing:0;
}

.distance-info-modal{
  position:fixed;
  inset:0;
  z-index:1300;
  display:grid;
  place-items:center;
  padding:16px;
}
.distance-info-modal.hidden{display:none}
.distance-info-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,8,14,.80);
  backdrop-filter:blur(12px);
}
.distance-info-card{
  position:relative;
  z-index:1;
  width:min(540px,100%);
  max-height:92dvh;
  overflow:auto;
  padding:26px;
  border:1px solid #235b73;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 0%,rgba(40,216,230,.12),transparent 240px),
    linear-gradient(180deg,#0d2a3d,#081d2c);
  box-shadow:0 34px 100px rgba(0,0,0,.52);
}
.distance-info-close{
  position:absolute;
  top:13px;
  right:13px;
  width:34px;
  height:34px;
  border:1px solid #2a5c72;
  border-radius:50%;
  background:#071a27;
  color:#87a8b8;
  font-size:20px;
}
.distance-info-kicker{
  color:#4ce1eb;
  font-size:8px;
  font-weight:950;
  letter-spacing:.18em;
  margin-bottom:8px;
}
.distance-info-card h2{
  margin:0;
  padding-right:40px;
  font-size:27px;
  letter-spacing:-.035em;
}
.distance-info-intro{
  margin:9px 0 18px;
  color:#9bb5c4;
  font-size:12px;
  line-height:1.55;
  max-width:450px;
}
.distance-rule-list{
  display:grid;
  gap:9px;
}
.distance-rule-item{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  align-items:start;
  padding:13px 14px;
  border:1px solid #1d4c63;
  border-radius:15px;
  background:rgba(5,23,35,.58);
}
.distance-rule-number{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid rgba(74,224,235,.28);
  border-radius:11px;
  color:#53dce7;
  font-size:9px;
  font-weight:950;
  letter-spacing:.08em;
}
.distance-rule-item strong{
  display:block;
  margin:1px 0 4px;
  color:#eaf5fa;
  font-size:12px;
}
.distance-rule-item p{
  margin:0;
  color:#89a7b8;
  font-size:10.5px;
  line-height:1.5;
}
.distance-info-footnote{
  margin:14px 2px 0;
  color:#69889a;
  font-size:9px;
  line-height:1.45;
}
body.distance-info-open{overflow:hidden}



.hidden{display:none!important}