:root{
  --bg:#2a1840;--bg2:#1a0f2a;--ink:#fff6e0;--muted:#c9b7e2;
  --yel:#ffd23f;--pink:#ff6fb5;--grn:#9be15d;--brown:#8a5a2b;--card:#3a2358;--line:#5b3b82;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#1a0f2a}
body{margin:0;min-height:100vh;color:var(--ink);font-family:"M PLUS Rounded 1c",system-ui,sans-serif;line-height:1.75;
  background:radial-gradient(circle at 50% -10%,#4b2a74 0,var(--bg) 40%,var(--bg2) 100%) fixed;overflow-x:hidden}
.hero{text-align:center;padding:40px 16px 8px}
.ball{font-size:3.4rem;line-height:1;display:inline-block;animation:puff 2.4s ease-in-out infinite}
@keyframes puff{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(10px) scale(1.15)}}
.eyebrow{margin:6px 0 0;color:var(--muted);font-size:.85rem}
h1{font-family:"Dela Gothic One",sans-serif;font-weight:400;font-size:clamp(2.4rem,10vw,4rem);margin:0;line-height:1.2;
  color:var(--yel);text-shadow:3px 3px 0 var(--pink),6px 6px 0 #0006;letter-spacing:.04em;transform:rotate(-2deg)}
.lead{margin:8px 0 0}
.today{margin:4px 0 18px;color:var(--grn);font-weight:700;font-size:.9rem}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:560px;margin:0 auto}
.tabs button{font:inherit;font-weight:700;font-size:.92rem;border:2px solid var(--yel);background:transparent;color:var(--yel);
  padding:6px 14px;border-radius:12px;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--yel);color:var(--bg);box-shadow:3px 3px 0 var(--pink)}

main{max-width:640px;margin:0 auto;padding:16px}
.panel{background:var(--card);border:3px solid var(--line);border-radius:20px;padding:24px 18px;box-shadow:6px 6px 0 #0005}
h2{font-family:"Dela Gothic One",sans-serif;font-weight:400;text-align:center;margin:0 0 4px;font-size:1.5rem;color:var(--yel)}
.hint{text-align:center;color:var(--muted);font-size:.9rem;margin:0 0 18px}
.form{display:flex;flex-direction:column;align-items:center;gap:14px}
.row{display:flex;gap:12px}
label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted);width:100%;max-width:300px}
.row label{width:auto}
select,input{font:inherit;font-size:1rem;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:#fff6e0;color:#2a1840;min-width:96px}
.btn{font-family:"Dela Gothic One",sans-serif;font-size:1.15rem;border:0;border-radius:14px;padding:10px 36px;cursor:pointer;
  background:var(--pink);color:#fff;box-shadow:4px 4px 0 var(--yel);transition:transform .1s}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--yel)}
.btn.ghost{font-family:inherit;font-weight:700;font-size:.9rem;background:transparent;border:2px solid var(--yel);color:var(--yel);box-shadow:none;padding:6px 16px;text-decoration:none}

.result{margin-top:22px;padding-top:18px;border-top:3px dotted var(--line);animation:boom .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes boom{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.big{text-align:center;font-family:"Dela Gothic One",sans-serif;font-size:clamp(2rem,9vw,3rem);color:var(--yel);line-height:1.2;margin:4px 0;text-shadow:3px 3px 0 var(--pink)}
.sub{text-align:center;margin:0;color:var(--muted)}
.rank{display:block;width:fit-content;margin:6px auto;background:var(--grn);color:#1a0f2a;font-weight:800;border-radius:999px;padding:0 14px}
.stats{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;max-width:340px;margin:16px auto;font-size:.95rem}
.stats dt{color:var(--muted)}
.stats dd{margin:0;font-weight:700}
.msg{background:#fff6e0;color:#2a1840;border-radius:14px;padding:12px 14px;margin:12px 0;font-weight:500}
.msg b{color:#b0306f}
.tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tags span{border:2px dashed var(--yel);border-radius:10px;padding:2px 12px;font-size:.88rem}
.share{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.meter{display:flex;justify-content:center;gap:4px;font-size:1.4rem;margin:6px 0}

.tube-wrap{text-align:center;padding:10px 0}
.tube{width:110px;height:170px;border:0;border-radius:16px 16px 22px 22px;cursor:pointer;
  background:linear-gradient(90deg,#a36c35,#c98a4b 40%,#8a5a2b);box-shadow:5px 5px 0 #0006;color:#fff6e0;
  font-family:"Dela Gothic One",sans-serif;font-size:1.2rem;line-height:1.3}
.tube span{display:inline-block;background:#b0306f;padding:8px 6px;border-radius:6px}
.tube.shake{animation:shake .7s ease}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-18deg)}40%{transform:rotate(16deg)}60%{transform:rotate(-12deg)}80%{transform:rotate(8deg)}}

.urinals{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-width:480px;margin:0 auto;align-items:end}
.urinals button{font:inherit;border:0;background:none;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0;border-radius:10px}
.urinals button:hover,.urinals button:focus-visible{background:#ffffff14}
.urinals svg{width:100%;max-width:56px;height:auto}
.urinals .no{font-weight:800;font-size:.8rem;color:var(--yel)}
.urinals .door{font-size:.72rem;color:var(--muted)}
.urinals button.sel{background:#ffd23f33;outline:2px solid var(--yel)}
.entrance{text-align:left;max-width:480px;margin:6px auto 0;font-size:.78rem;color:var(--muted)}

footer{text-align:center;color:var(--muted);font-size:.8rem;padding:28px 16px 40px}
.copy{opacity:.7}
@media (max-width:420px){.tabs button{padding:5px 10px;font-size:.85rem}.panel{padding:20px 12px}.urinals{gap:2px}}