:root{
  --sky-top: #7ad6ff;
  --sky-bottom: #effdff;
  --grass: #74d165;
  --grass-dark: #4ca745;
  --sun: #ffd34d;
  --card: #fffaf1;
  --panel: #ffe9c9;
  --card-ink: #2f1d17;
  --muted: #705d55;
  --line: #f4b669;
  --p1: #ff7a4c;
  --p1-deep: #eb5d2b;
  --p2: #57b8ff;
  --p2-deep: #2d8cdf;
  --danger: #ff5976;
  --good: #5fcf7a;
  --shadow: #5c2d16;
  --deep-shadow: rgba(92, 45, 22, 0.25);
}

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

body{
  background: linear-gradient(180deg, var(--sky-top) 0%, #9fe5ff 28%, var(--sky-bottom) 100%);
  color: var(--card-ink);
  font-family: 'Baloo 2', sans-serif;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 18px;
  position:relative;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:120px;
  background:linear-gradient(180deg, rgba(116,209,101,0.15), var(--grass) 45%, var(--grass-dark));
  z-index:0;
}

.sky-decor{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.sun{
  position:absolute;
  top:44px;
  right:12%;
  width:110px;
  height:110px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff9bc 0%, #ffd34d 38%, #f9b925 100%);
  box-shadow:0 0 30px rgba(255, 210, 77, 0.8);
}

.cloud{
  position:absolute;
  height:42px;
  border-radius:999px;
  background:rgba(255,255,255,0.78);
  box-shadow: 30px 12px 0 rgba(255,255,255,0.35), 60px 0 0 rgba(255,255,255,0.42);
  animation: floatCloud 14s ease-in-out infinite alternate;
}

.cloud::before,
.cloud::after{
  content:"";
  position:absolute;
  background:rgba(255,255,255,0.75);
  border-radius:50%;
}

.cloud::before{ width:36px; height:36px; left:18px; top:-16px; }
.cloud::after{ width:52px; height:52px; right:18px; top:-24px; }

.cloud-1{ width:120px; top:70px; left:10%;}
.cloud-2{ width:150px; top:110px; right:14%; animation-delay:1s; }
.cloud-3{ width:110px; top:180px; left:26%; animation-delay:2s; }

@keyframes floatCloud {
  0% { transform: translateX(-8px); }
  100% { transform: translateX(12px); }
}

.app{
  position:relative;
  z-index:1;
  width:min(100%, 640px);
}

.screen{display:none; animation:rise .45s ease;}
.screen.active{display:block;}

@keyframes rise{
  from{opacity:0; transform:translateY(14px) scale(.98);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

.brand{text-align:center; margin-bottom:28px; position:relative;}
.brand .mark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 18px;
  border:3px solid var(--shadow);
  border-radius:999px;
  background:linear-gradient(180deg, #ffd777, #ffb23c);
  color:var(--card-ink);
  box-shadow:0 8px 0 rgba(92,45,22,0.22);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:800;
  margin-bottom:10px;
}
.brand .mark::before,.brand .mark::after{content:""; width:22px; height:1px; background:var(--shadow);}
.brand h1{
  font-family:'Bungee', sans-serif;
  font-size:46px;
  letter-spacing:1px;
  line-height:1;
  color:var(--card-ink);
  text-shadow: 0 4px 0 rgba(255,255,255,0.45);
}
.brand h1 span{
  background:linear-gradient(90deg, var(--p1), var(--p2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
}
.brand p.tag{
  color:var(--muted);
  font-size:16px;
  margin-top:8px;
  font-weight:600;
}

.card{
  position:relative;
  background:linear-gradient(180deg, #fffdf8 0%, var(--card) 100%);
  border:3px solid var(--shadow);
  border-radius:24px 24px 18px 18px;
  box-shadow: 0 12px 0 rgba(92,45,22,0.18);
  padding:28px 24px;
}

.card::before{
  content:"";
  position:absolute;
  inset:10px auto auto 10px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(255, 153, 0, 0.15);
}

.card h2{
  font-family:'Bungee', sans-serif;
  font-size:24px;
  margin-bottom:8px;
  color:var(--card-ink);
  letter-spacing:1px;
}
.card .sub{color:var(--muted); font-size:15px; margin-bottom:22px; line-height:1.5;}

label{
  display:block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--muted);
  margin-bottom:8px;
  margin-top:18px;
  font-weight:800;
}
label:first-of-type{margin-top:0;}
input[type="text"],input[type="password"],input[type="number"]{
  width:100%;
  background:linear-gradient(180deg, #fffefc, #fff5e6);
  border:3px solid #f1c480;
  border-radius:12px;
  padding:14px 16px;
  font-family:'Baloo 2', sans-serif;
  font-size:18px;
  color:var(--card-ink);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.7);
}
input:focus{
  border-color:var(--focus, var(--p1));
  box-shadow:0 0 0 4px var(--focus-ring, rgba(255,122,76,0.15));
  transform:translateY(-1px);
}
input::placeholder{color:#9a7e72;}
input[type="number"]{font-family:'JetBrains Mono', monospace; font-size:26px; letter-spacing:1px;}

.error{color:var(--danger); font-size:13px; margin-top:8px; min-height:18px; font-weight:700;}
button{
  font-family:'Bungee', sans-serif;
  cursor:pointer;
  border:none;
  outline:none;
  letter-spacing:0.5px;
}
.btn{
  width:100%;
  padding:15px 18px;
  border-radius:14px;
  font-size:16px;
  margin-top:24px;
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
  border:3px solid var(--shadow);
  box-shadow:0 8px 0 rgba(92,45,22,0.18);
}
.btn:active{transform:translateY(3px); box-shadow:0 4px 0 rgba(92,45,22,0.18);}
.btn:hover{filter:brightness(1.04);}
.btn-primary{
  background:linear-gradient(180deg, #ffd85a 0%, #ff9b3d 36%, var(--p1) 100%);
  color:#3c1a0e;
}
.btn-primary.turn-p2{
  background:linear-gradient(180deg, #9be1ff 0%, #65c1ff 45%, var(--p2) 100%);
  color:#0d2c4d;
}
.btn-ghost{
  background:linear-gradient(180deg, #fffaf0 0%, #ffe4bf 100%);
  color:var(--card-ink);
}

.names-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.names-grid .field.p1 input:focus{--focus:var(--p1); --focus-ring:rgba(255,122,76,0.18);}
.names-grid .field.p2 input:focus{--focus:var(--p2); --focus-ring:rgba(87,184,255,0.18);}

.pass-screen{text-align:center; padding:46px 32px;}
.pass-screen .icon{
  width:80px;
  height:80px;
  margin:0 auto 20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  border:3px solid var(--shadow);
  background:linear-gradient(180deg, #ffd9a3, #ffc166);
  box-shadow:0 8px 0 rgba(92,45,22,0.18);
}
.pass-screen h2{font-size:24px; margin-bottom:8px; font-family:'Bungee', sans-serif; line-height:1.2;}
.pass-screen p{color:var(--muted); font-size:15px; line-height:1.6; max-width:360px; margin:0 auto;}
.pass-screen .name-tag{font-family:'Bungee', sans-serif; font-weight:400;}

.secret-visibility{display:flex; align-items:center; gap:8px; margin-top:10px;}
.secret-visibility button{
  background:none;
  color:var(--muted);
  font-size:12px;
  text-decoration:underline;
  padding:2px 0;
  font-family:'Baloo 2', sans-serif;
}
.secret-visibility button:hover{color:var(--card-ink);}

.vs-bar{display:flex; align-items:center; gap:12px; margin-bottom:22px;}
.player-chip{
  flex:1;
  background:linear-gradient(180deg, #fffefc 0%, #ffe5b7 100%);
  border:3px solid #e5b669;
  border-radius:16px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  opacity:.62;
  transition:opacity .2s ease, border-color .2s ease, transform .2s ease;
  box-shadow:0 6px 0 rgba(92,45,22,0.12);
}
.player-chip.active{
  opacity:1;
  transform:translateY(-2px);
}
.player-chip.p1.active{border-color:var(--p1-deep);}
.player-chip.p2.active{border-color:var(--p2-deep);}
.player-chip .dot{width:12px; height:12px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 3px rgba(255,255,255,0.85);}
.player-chip.p1 .dot{background:var(--p1);}
.player-chip.p2 .dot{background:var(--p2);}
.player-chip .info{overflow:hidden;}
.player-chip .info .nm{font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.player-chip .info .ct{font-size:12px; color:var(--muted);}
.vs-x{
  font-family:'Bungee', sans-serif;
  color:var(--muted);
  font-size:14px;
  letter-spacing:1px;
}

.turn-banner{text-align:center; padding:8px 0 20px;}
.turn-banner .who{font-family:'Bungee', sans-serif; font-size:24px; line-height:1.2; letter-spacing:1px;}
.turn-banner .who.p1{color:var(--p1-deep);}
.turn-banner .who.p2{color:var(--p2-deep);}
.turn-banner .what{color:var(--muted); font-size:15px; margin-top:4px; font-weight:600;}
.feedback{
  display:none;
  text-align:center;
  border-radius:14px;
  padding:14px 12px;
  margin-top:18px;
  font-family:'Bungee', sans-serif;
  font-size:15px;
  letter-spacing:0.5px;
  border:3px solid var(--shadow);
}
.feedback.show{display:block; animation:rise .3s ease;}
.feedback.higher{background:rgba(87,184,255,0.18); color:var(--p2-deep);}
.feedback.lower{background:rgba(255,122,76,0.12); color:var(--p1-deep);}

.win-screen{text-align:center; padding:20px 18px 16px;}
.win-screen .trophy{
  display:inline-flex;
  width:88px;
  height:88px;
  align-items:center;
  justify-content:center;
  font-size:48px;
  background:linear-gradient(180deg, #ffe57d, #ffca48);
  border:3px solid var(--shadow);
  border-radius:50%;
  box-shadow:0 8px 0 rgba(92,45,22,0.18);
  margin-bottom:14px;
}
.win-screen .win-name{font-family:'Bungee',sans-serif; font-size:30px; margin-bottom:6px; letter-spacing:1px;}
.win-screen .win-name.p1{color:var(--p1-deep);}
.win-screen .win-name.p2{color:var(--p2-deep);}
.win-screen .win-sub{color:var(--muted); font-size:15px; margin-bottom:26px; font-weight:600;}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:10px;}
.stat-card{
  background:linear-gradient(180deg, #fffefe 0%, #fff0d1 100%);
  border:3px solid rgba(92,45,22,0.18);
  border-radius:14px;
  padding:16px;
  text-align:left;
}
.stat-card .h{font-size:11px; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:1px; font-weight:800;}
.stat-card .row{display:flex; justify-content:space-between; font-size:14px; margin-top:4px; color:var(--card-ink); font-weight:700;}
.stat-card .row b{font-family:'JetBrains Mono', monospace; font-size:13px;}
.stat-card.p1{border-color:rgba(255,122,76,0.55);}
.stat-card.p2{border-color:rgba(87,184,255,0.55);}
.btn-row{display:flex; gap:12px; margin-top:20px;}
.btn-row .btn{margin-top:0;}
footer.note{
  text-align:center;
  color:#66524d;
  font-size:12px;
  margin-top:22px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:800;
}

@media (max-width:480px){
  .brand h1{font-size:36px;}
  .card{padding:22px 18px;}
  .names-grid{grid-template-columns:1fr;}
  .btn-row{flex-direction:column;}
}
@media (prefers-reduced-motion:reduce){
  .screen,.feedback,.cloud{animation:none !important;}
}