/* Science Island · shared look for the home, map and Champions pages */
:root{
  --navy:#1f3d57; --ink:#3a5c75; --card:rgba(255,250,240,.95); --paper:#fff8ea;
  --primary:#23799f; --primary-d:#1b6182; --mint:#bfe8d6; --mint-d:#8fd3b8;
  --coral:#e2603f; --ok:#2e9e6b; --gold:#f2b134; --line:#cfe3ee; --sky:#8fd3ee;
  --radius:22px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{font-family:"Nunito","Cairo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--navy);
  background:linear-gradient(#c9eef9,#9ad9f0 55%,#86cfec);-webkit-tap-highlight-color:transparent;overflow-x:hidden}
.ar{font-family:"Cairo","Nunito",system-ui,sans-serif}
.app{max-width:1060px;margin:0 auto;padding:12px 16px 28px;display:flex;flex-direction:column;gap:12px}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#fff3c4,#9fdcc4);display:grid;place-items:center;font-size:22px;box-shadow:0 4px 12px rgba(31,61,87,.18)}
.brand h1{margin:0;font-size:24px;font-weight:900}
.brand p{margin:0;font-size:13px;font-weight:800;color:var(--ink)}
.hud{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill{background:var(--card);border-radius:999px;padding:8px 14px;font-weight:800;font-size:14px;box-shadow:0 3px 10px rgba(31,61,87,.12);white-space:nowrap;color:var(--navy);text-decoration:none}
.pill b{font-size:17px}
.icon{width:40px;height:40px;border-radius:50%;border:0;background:var(--card);color:var(--navy);font-size:18px;font-weight:900;cursor:pointer;box-shadow:0 3px 10px rgba(31,61,87,.12);display:grid;place-items:center;text-decoration:none}
.icon[aria-pressed="true"]{opacity:.55;text-decoration:line-through}
.card{background:var(--card);border-radius:var(--radius);box-shadow:0 8px 28px rgba(31,61,87,.14);padding:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:900;font-size:18px;border:0;border-radius:16px;padding:12px 20px;min-height:52px;cursor:pointer;
  background:var(--mint);color:var(--navy);box-shadow:0 4px 0 var(--mint-d);text-decoration:none;transition:transform .08s}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--mint-d)}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 4px 0 var(--primary-d)}
.btn.big{font-size:22px;padding:14px 34px}
.btn:disabled{opacity:.5;cursor:default}
.btn:focus-visible,.pill:focus-visible,.icon:focus-visible{outline:3px solid #f7b267;outline-offset:2px}
.coach{display:flex;align-items:flex-end;gap:12px}
.coach img{height:150px;width:auto;flex:none}
.bubble{position:relative;background:#fff;border:3px solid var(--line);border-radius:20px;padding:12px 14px;font-weight:800;font-size:17px;line-height:1.45;flex:1;min-width:0}
.xpbar{height:10px;border-radius:99px;background:#dbe9f0;overflow:hidden;min-width:90px}
.xpbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f7c948,#f2994a)}
.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:rgba(143,211,238,.45);backdrop-filter:blur(4px)}
.panel{background:var(--paper);border-radius:28px;padding:22px 26px;max-width:480px;width:100%;text-align:center;box-shadow:0 14px 40px rgba(31,61,87,.25)}
.panel h2{margin:6px 0 4px;font-size:30px;font-weight:900}
.panel p{margin:6px 0 14px;font-weight:700;font-size:17px;line-height:1.45}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.soon{font-size:12px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;background:#ffe9b8;color:#8a5a00;border-radius:99px;padding:3px 9px}
/* pop-ups always fit the visible screen (iPhone bars included): the panel scrolls inside itself
   and its buttons stay pinned at the bottom, so they can always be reached */
.overlay{display:flex;align-items:center;justify-content:center;overscroll-behavior:contain;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.panel{max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.panel .btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.panel .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:sticky;bottom:-22px;z-index:1;
  margin:0 -26px -22px;padding:14px 26px 22px;background:linear-gradient(rgba(255,248,234,0),#fff8ea 12px)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:820px){
  .app{padding:8px 12px 18px;gap:10px}
  .brand h1{font-size:20px}
  .logo{width:36px;height:36px;font-size:19px}
  .pill{padding:6px 11px;font-size:13px}
  .icon{width:36px;height:36px;font-size:16px}
  .coach img{height:88px}
  .bubble{font-size:15px;padding:10px 12px}
}