/* ============ Blaster Kid World — chunky, kid-friendly UI ============ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;800&display=swap');

:root{
  --ink:#101a3a;
  --paper:#fdf7ec;
  --blue:#1f5cd8;
  --blue-2:#33a7e8;
  --red:#e0263c;
  --gold:#ffcc22;
  --green:#3ddc6b;
  --purple:#a45bff;
  --shadow: 0 8px 0 rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; overflow:hidden; background:#05081c; }
body{
  font-family:'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  color:#fff; -webkit-font-smoothing:antialiased;
  touch-action:none; user-select:none;
}

#game{ position:fixed; inset:0; width:100%; height:100%; display:block; }

#ui{ position:fixed; inset:0; pointer-events:none; }

.screen{
  position:absolute; inset:0;
  display:none; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:22px; padding:28px 28px 60px; pointer-events:auto;
  overflow-y:auto; overscroll-behavior:contain;
  background:
    radial-gradient(1200px 700px at 50% 35%, rgba(40,70,180,.35), transparent 70%),
    rgba(5,8,28,.86);
  backdrop-filter: blur(6px);
  animation: pop .25s ease-out;
}
.screen[data-active]{ display:flex; }
/* Centre the content when it fits, but let it scroll from the top when it
   does not — plain justify-content:center would push the top out of reach. */
.screen > :first-child{ margin-top:auto; }
.screen > :last-child{ margin-bottom:auto; }
.screen.dim{ background: rgba(5,8,28,.72); }

@keyframes pop{ from{ opacity:0; transform:scale(.97);} to{opacity:1; transform:none;} }

.logo{ width:min(88vw, 1100px); height:auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,.6)); }

h2{
  font-size:clamp(34px,5vw,60px); margin:0; letter-spacing:1px;
  text-shadow: 0 5px 0 rgba(0,0,0,.45);
}
.tagline{
  margin:0; font-size:clamp(16px,2.1vw,26px); color:#cfe3ff; text-align:center;
  text-shadow:0 3px 0 rgba(0,0,0,.4);
}
.mini{ margin:0; font-size:15px; color:#8fa4d6; min-height:20px; }
.tip{
  max-width:820px; text-align:center; font-size:clamp(15px,1.7vw,21px);
  color:#ffe9a8; background:rgba(255,204,34,.10);
  border:3px dashed rgba(255,204,34,.5); border-radius:18px; padding:14px 20px; margin:0;
}

.btnrow{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.btnrow.col{ flex-direction:column; align-items:stretch; min-width:min(92vw,460px); }

button.big{
  font-family:inherit; font-weight:800; cursor:pointer;
  font-size:clamp(18px,2.2vw,26px); letter-spacing:.5px;
  color:#0d1330; background:linear-gradient(#ffd84d,#f7a91b);
  border:4px solid #0d1330; border-radius:20px;
  padding:16px 28px; box-shadow:var(--shadow);
  transition: transform .08s ease, filter .12s ease;
}
button.big:hover{ transform:translateY(-3px) scale(1.02); filter:brightness(1.07); }
button.big:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.4); }
button.big.alt{ background:linear-gradient(#3fdcc8,#0f8f83); color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.25); }
button.big.ghost{ background:linear-gradient(#4a5580,#2b3358); color:#fff; }

.keys{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px; max-width:1000px; width:100%;
}
.k{
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.07); border:3px solid rgba(255,255,255,.16);
  border-radius:16px; padding:12px 16px;
}
.k b{
  background:#fff; color:#0d1330; border-radius:10px; padding:4px 12px;
  font-size:18px; min-width:88px; text-align:center; box-shadow:0 4px 0 #97a4c9;
}
.k span{ font-size:18px; color:#dfe8ff; }

/* While a friend flow is running, the three big choices step aside so the
   code (and its countdown) always fits on one screen. */
#screen-mp.busy > h2,
#screen-mp.busy > .btnrow.col{ display:none; }

/* A device that cannot do peer-to-peer says so plainly rather than
   offering a button that will not work. */
button.big.unavailable{
  background:linear-gradient(#525b7d,#39415f); color:#c3cbe4;
  font-size:clamp(14px,1.6vw,19px);
}
button.big.unavailable:hover{ transform:none; filter:none; }

/* ---------- your hero: name pickers + suit preview ---------- */
.hero{
  display:flex; align-items:center; gap:clamp(14px,3vw,38px);
  background:rgba(255,255,255,.06); border:4px solid rgba(255,255,255,.18);
  border-radius:26px; padding:14px clamp(16px,3vw,30px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
#hero-preview{
  width:clamp(110px,13vw,168px); height:auto;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));
}
.hero-right{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.hero-label{
  margin:0; font-size:15px; letter-spacing:3px; color:#9fb2e0;
}
.pickers{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.picker{
  display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.35); border:3px solid rgba(255,255,255,.22);
  border-radius:16px; padding:4px 6px;
}
.picker b{
  min-width:108px; text-align:center;
  font-size:clamp(18px,2.1vw,25px); color:#fff;
  text-shadow:0 3px 0 rgba(0,0,0,.4);
}
.picker.narrow b{ min-width:56px; }
button.pk{
  font-family:inherit; font-weight:800; cursor:pointer;
  width:38px; height:38px; font-size:17px; line-height:1;
  color:#0d1330; background:linear-gradient(#ffd84d,#f7a91b);
  border:3px solid #0d1330; border-radius:12px;
  transition:transform .08s ease, filter .12s ease;
}
button.pk:hover{ filter:brightness(1.1); transform:scale(1.08); }
button.pk:active{ transform:scale(.94); }
button.big.small{ font-size:clamp(14px,1.5vw,18px); padding:10px 18px; border-radius:16px; }

@media (max-width: 640px){
  .hero{ flex-direction:column; }
}

/* ---------- multiplayer panel ---------- */
#mp-panel{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.code{
  font-size:clamp(44px,8vw,88px); font-weight:800; letter-spacing:14px;
  color:#fff; background:rgba(0,0,0,.4); border:5px solid var(--gold);
  border-radius:22px; padding:10px 26px 10px 40px;
  text-shadow:0 0 24px rgba(255,204,34,.8);
}
.timer{ font-size:26px; color:#ffd84d; }
.bar{ width:min(80vw,520px); height:18px; background:rgba(255,255,255,.15); border-radius:99px; overflow:hidden; border:3px solid rgba(255,255,255,.25); }
.bar > i{ display:block; height:100%; background:linear-gradient(90deg,#3ddc6b,#ffd84d,#e0263c); transition:width .5s linear; }
input.codein{
  font-family:inherit; font-weight:800; font-size:46px; letter-spacing:16px;
  width:min(90vw,420px); text-align:center; padding:12px 0 12px 16px;
  border-radius:20px; border:5px solid var(--blue-2); background:rgba(0,0,0,.45); color:#fff;
}
input.codein:focus{ outline:none; border-color:var(--gold); }
.status{ font-size:20px; color:#bcd0ff; text-align:center; max-width:620px; }
.dots::after{ content:''; animation:dots 1.2s steps(4,end) infinite; }
@keyframes dots{ 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }

/* Only ever seen by a visitor with JavaScript switched off, and by crawlers
   that do not run it. Plain, readable, no game chrome. */
.noscript{
  position:relative; z-index:5; max-width:760px;
  margin:0 auto; padding:8vh 24px; color:#dfe8ff;
}
.noscript h1{ font-size:clamp(32px,6vw,56px); margin:0 0 18px; }
.noscript p{ font-size:17px; line-height:1.6; color:#c3cfe9; }
.noscript small{ color:#8fa4d6; }

/* ---------- the 404 page ---------- */
.screen.notfound{ position:fixed; }
.screen.notfound a.big{
  display:inline-block; text-decoration:none; line-height:1;
}

/* The title screen carries the most content of any screen, so it packs a
   little tighter to stay within one viewport height on a laptop. */
#screen-title{ gap:17px; }

/* ---------- the small print on the title screen ---------- */
.sitefoot{
  max-width:760px; text-align:center; margin:0;
  font-size:13px; line-height:1.55; color:#7f92c4;
}
.sitefoot b{ color:#9fb2e0; font-weight:600; }

/* ---------- the small credit link, always in the corner ---------- */
.builtby{
  position:fixed; right:10px; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); z-index:20;
  font:600 12px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing:.2px;
  color:#b9c6e8; text-decoration:none;
  background:rgba(5,8,28,.62); border:1px solid rgba(255,255,255,.16);
  border-radius:999px; padding:7px 11px; opacity:.78;
  transition:opacity .15s ease, color .15s ease;
}
.builtby:hover, .builtby:focus-visible{ opacity:1; color:#ffd84d; }
.builtby:focus-visible{ outline:2px solid #ffd84d; outline-offset:2px; }

/* ---------- on-screen buttons (touch screens, during play only) ---------- */
#touch{ display:none; }
body.touch.playing #touch{ display:block; }
body.touch.playing .builtby{ display:none; }
.tb{
  position:fixed; z-index:15; display:flex; align-items:center; justify-content:center;
  width:60px; height:60px; border-radius:50%;
  font:800 15px/1 'Baloo 2', system-ui, sans-serif; letter-spacing:.5px; color:#fff;
  background:rgba(13,19,48,.46); border:3px solid rgba(255,255,255,.42);
  text-shadow:0 2px 0 rgba(0,0,0,.5);
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.tb.on{ background:rgba(47,211,192,.55); border-color:#ffd84d; }
:root{ --tb-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
@media (orientation: portrait){ :root{ --tb-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
.pad-l{ left:12px;  bottom:calc(var(--tb-bottom) + 34px); }
.pad-r{ left:120px; bottom:calc(var(--tb-bottom) + 34px); }
.pad-u{ left:66px;  bottom:calc(var(--tb-bottom) + 88px); }
.pad-d{ left:66px;  bottom:calc(var(--tb-bottom) - 20px); }
.act-jump{ right:12px;  bottom:calc(var(--tb-bottom) + 6px); width:76px; height:76px; font-size:17px; }
.act-fire{ right:96px;  bottom:calc(var(--tb-bottom) - 10px); width:68px; height:68px; }
.act-kick{ right:28px;  bottom:calc(var(--tb-bottom) + 92px); }
.act-dash{ right:100px; bottom:calc(var(--tb-bottom) + 68px); }
.act-swap{ right:168px; bottom:calc(var(--tb-bottom) + 14px); width:50px; height:50px; font-size:22px; }
.act-pause{ right:12px; top:calc(112px + env(safe-area-inset-top, 0px));
  width:48px; height:48px; font-size:16px; }

/* ---------- toasts / banners ---------- */
#toasts{
  position:absolute; top:0; left:0; right:0;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding-top:16px; pointer-events:none;
}
.toast{
  font-size:clamp(18px,2.4vw,30px); font-weight:800;
  padding:12px 26px; border-radius:999px; border:4px solid #0d1330;
  background:linear-gradient(#fff2b8,#ffcc22); color:#161c3d;
  box-shadow:var(--shadow); animation: toastIn .35s cubic-bezier(.2,1.4,.4,1);
  white-space:nowrap;
}
.toast.blue{ background:linear-gradient(#bfe6ff,#33a7e8); color:#06214a; }
.toast.red{ background:linear-gradient(#ffc0c8,#e0263c); color:#fff; }
.toast.rainbow{
  background:linear-gradient(90deg,#ff5b5b,#ffcc22,#3ddc6b,#33a7e8,#a45bff);
  color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.35);
}
@keyframes toastIn{ from{ transform:translateY(-40px) scale(.8); opacity:0 } to{ transform:none; opacity:1 } }
.toast.out{ animation: toastOut .4s ease-in forwards; }
@keyframes toastOut{ to{ transform:translateY(-30px) scale(.9); opacity:0 } }