:root { --display:"Luckiest Guy", system-ui, sans-serif; --mono:"Space Mono", monospace; }
body.jon40 { overflow-x:hidden; overflow-y:auto; }
#partyStage {
  position:relative; min-height:100dvh; overflow:hidden; isolation:isolate; padding:78px 18px 44px;
  background:#101022; color:#f9fff3; font-family:var(--display); letter-spacing:.02em; touch-action:manipulation;
}
.slime-bg, .pattern { position:absolute; inset:0; z-index:-2; pointer-events:none; }
.slime-bg {
  background:
    linear-gradient(180deg, rgba(8,8,26,.26) 0%, rgba(8,8,26,.42) 46%, rgba(8,8,26,.82) 100%),
    radial-gradient(ellipse at 50% 16%, rgba(0,240,255,.3), transparent 38%),
    url("./assets/ballpark-bg.jpg?v=20260611a") center / cover no-repeat,
    linear-gradient(135deg, #101022 0%, #201053 48%, #081822 100%);
}
.pattern {
  z-index:-1; opacity:.5;
  background:
    repeating-linear-gradient(115deg, transparent 0 20px, rgba(255,255,255,.08) 21px 24px),
    radial-gradient(circle at 50% 48%, rgba(255,140,0,.36), transparent 36%);
  mask-image:linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}
.hero-panel { width:min(920px,100%); margin:0 auto; text-align:center; text-shadow:0 5px 0 #151228, 0 0 28px rgba(0,240,255,.75); }
.kicker { display:inline-block; padding:7px 14px; border:3px solid #a5ff00; border-radius:999px; color:#a5ff00; background:rgba(16,16,34,.58); box-shadow:0 0 20px rgba(165,255,0,.45); font-size:clamp(13px,2vw,18px); }
h1 { margin-top:12px; font-size:clamp(54px,12vw,138px); line-height:.82; color:#ffec00; -webkit-text-stroke:2px #17142a; transform:rotate(-2deg); }
.sub { margin-top:16px; color:#fff; font-family:var(--mono); font-size:clamp(14px,2.2vw,22px); text-shadow:0 0 14px #00f0ff; }
#audio {
  position:absolute; right:14px; bottom:44px; z-index:70; display:flex; align-items:center; gap:10px;
  background:rgba(20,10,30,.62); border:2px solid #6a3fb0; border-radius:999px; padding:6px 14px;
  backdrop-filter:blur(3px); box-shadow:0 0 14px rgba(120,70,200,.5);
}
#audioBtn {
  cursor:pointer; font-family:var(--display); font-size:clamp(15px,2.4vmin,22px); letter-spacing:1px;
  color:#ffd9a0; background:none; border:none; padding:0;
}
#audioBtn:hover { color:#fff; }
#vol { width:clamp(70px,15vw,130px); accent-color:#46e070; cursor:pointer; }
#audio.no-volume-control #vol { display:none; }
@media (hover:none) and (pointer:coarse) {
  #vol { display:none; }
}
#countdown {
  width:min(880px,100%); margin:26px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.cell { min-height:86px; display:grid; place-items:center; padding:10px; border:4px solid #00f0ff; border-radius:8px; background:rgba(7,10,28,.72); box-shadow:0 0 18px rgba(0,240,255,.55), inset 0 0 18px rgba(255,92,232,.18); transform:skew(-4deg); }
.cell b { font-family:var(--mono); color:#a5ff00; font-size:clamp(28px,7vw,62px); line-height:.9; text-shadow:0 0 14px #a5ff00; }
.cell span { color:#ff8a00; text-transform:uppercase; font-size:clamp(12px,2vw,18px); }
#clubhouse { width:min(760px,100%); margin:24px auto 0; display:grid; gap:14px; }
.score-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.score-strip div { padding:12px; background:rgba(255,92,232,.18); border:3px solid #ff5ce8; border-radius:8px; text-align:center; box-shadow:0 0 18px rgba(255,92,232,.34); }
.score-strip span { display:block; color:#00f0ff; font-size:13px; }
.score-strip b { font-family:var(--mono); color:#fff; font-size:clamp(22px,5vw,38px); }
#suggestions {
  width:min(760px,100%); margin:18px auto 0; display:grid; gap:12px; padding:14px;
  border:3px solid #ff8a00; border-radius:8px; background:rgba(7,10,28,.74);
  box-shadow:0 0 22px rgba(255,138,0,.34), inset 0 0 18px rgba(0,240,255,.12);
}
.suggest-head { display:flex; align-items:end; justify-content:space-between; gap:12px; }
.suggest-head h2 { color:#ffec00; font-size:clamp(24px,4.8vw,42px); line-height:.95; text-shadow:0 0 14px rgba(255,236,0,.45); }
#suggestionStatus { color:#00f0ff; font-family:var(--mono); font-size:12px; white-space:nowrap; }
#suggestionForm { display:grid; grid-template-columns:minmax(120px,.48fr) minmax(240px,1fr); gap:8px; align-items:end; }
#suggestionForm label { color:#a5ff00; font-family:var(--mono); font-size:12px; grid-row:1; }
#suggestionName, #suggestionText {
  width:100%; min-width:0; border:3px solid #00f0ff; border-radius:8px; padding:10px 12px;
  color:#101022; background:#fff; font:800 15px system-ui,sans-serif;
}
#suggestionName { grid-column:1; }
#suggestionText { grid-column:2; resize:vertical; min-height:88px; }
#suggestionForm button {
  grid-column:1 / -1; min-height:52px; border-radius:8px; padding:12px 18px; color:#111228; background:#ffec00;
  box-shadow:0 7px 0 #715e00, 0 0 22px rgba(255,236,0,.5); font-size:clamp(20px,4vw,32px);
}
#suggestionForm button:active { transform:translateY(4px); box-shadow:0 3px 0 #715e00, 0 0 22px rgba(255,236,0,.5); }
#suggestionList { list-style:none; display:grid; gap:8px; padding:0; margin:0; max-height:280px; overflow:auto; }
#suggestionList li { display:grid; gap:4px; padding:10px 12px; border:2px solid rgba(255,92,232,.72); border-radius:8px; background:rgba(255,92,232,.13); }
#suggestionList p { color:#fff; font-family:var(--mono); font-size:14px; line-height:1.35; letter-spacing:0; }
#suggestionList span { color:#ff8a00; font-family:var(--mono); font-size:12px; justify-self:end; }
button { cursor:pointer; border:0; font-family:var(--display); letter-spacing:.04em; }
#gameOpen, #startRound, #swing, #gameStart {
  min-height:52px; border-radius:8px; padding:12px 18px; color:#111228; background:#a5ff00;
  box-shadow:0 7px 0 #305600, 0 0 22px rgba(165,255,0,.5); font-size:clamp(20px,4vw,32px);
}
#gameOpen:active, #startRound:active, #swing:active, #gameStart:active { transform:translateY(4px); box-shadow:0 3px 0 #305600, 0 0 22px rgba(165,255,0,.5); }
#swing { background:#ffec00; box-shadow:0 7px 0 #715e00, 0 0 22px rgba(255,236,0,.5); }
#swing:disabled { opacity:.45; cursor:not-allowed; transform:none; }
#gamePanel {
  position:fixed; inset:64px 14px 30px; z-index:60; display:none; grid-template-rows:auto minmax(230px,1fr) auto auto; gap:12px;
  width:min(980px,calc(100vw - 28px)); margin:0 auto; padding:12px; background:rgba(10,10,28,.92); border:4px solid #00f0ff; border-radius:10px;
  box-shadow:0 0 34px rgba(0,240,255,.5); backdrop-filter:blur(6px); overflow:auto;
}
#gamePanel.open { display:grid; }
.game-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.game-head b { color:#ffec00; font-size:clamp(22px,4vw,34px); text-shadow:0 0 15px rgba(255,236,0,.65); }
.game-head span { display:block; font-family:var(--mono); color:#dff; font-size:12px; letter-spacing:0; }
#gameClose { width:38px; height:38px; border-radius:50%; color:#fff; background:#ff5ce8; font:800 18px/1 system-ui,sans-serif; box-shadow:0 0 18px rgba(255,92,232,.55); }
#field {
  position:relative; overflow:hidden; min-height:230px; border:3px solid #a5ff00; border-radius:8px;
  background:
    linear-gradient(180deg, rgba(7,9,24,.05), rgba(7,9,24,.22) 52%, rgba(7,9,24,.35)),
    url("./assets/game-field-bg.jpg?v=20260611a") center / cover no-repeat,
    linear-gradient(180deg, #16315a 0%, #102448 45%, #173a28 46%, #0b2418 100%);
}
.target { position:absolute; display:grid; place-items:center; width:68px; height:48px; border:3px solid #fff; border-radius:8px; color:#101022; background:#00f0ff; font-size:22px; box-shadow:0 0 18px currentColor; z-index:2; }
.target.flash { animation:targetFlash .48s ease-out; }
.t-out { top:56%; background:#ff5a5a; color:#fff; }
.t-out.left { left:8%; } .t-out.right { right:8%; }
.t-100 { top:43%; left:21%; } .t-100.right { left:auto; right:21%; }
.t-250 { top:31%; left:35%; background:#ff8a00; }
.t-250.right { left:auto; right:35%; }
.t-500 { top:20%; left:50%; transform:translateX(-50%); background:#a5ff00; }
#field.playing .t-out.left { animation:outLeftMove 1.65s ease-in-out infinite alternate; }
#field.playing .t-out.right { animation:outRightMove 1.55s ease-in-out infinite alternate; }
#field.playing .t-100:not(.right) { animation:singleLeftMove 1.22s ease-in-out infinite alternate; }
#field.playing .t-100.right { animation:singleRightMove 1.28s ease-in-out infinite alternate; }
#field.playing .t-250:not(.right) { animation:wallLeftMove 1.05s ease-in-out infinite alternate; }
#field.playing .t-250.right { animation:wallRightMove 1.12s ease-in-out infinite alternate; }
#field.playing .t-500 { animation:upperDeckMove .92s ease-in-out infinite alternate; }
@keyframes outLeftMove { 0%{left:5%;top:52%} 100%{left:13%;top:61%} }
@keyframes outRightMove { 0%{right:5%;top:61%} 100%{right:13%;top:52%} }
@keyframes singleLeftMove { 0%{left:14%;top:38%} 100%{left:28%;top:50%} }
@keyframes singleRightMove { 0%{right:14%;top:50%} 100%{right:28%;top:38%} }
@keyframes wallLeftMove { 0%{left:28%;top:25%} 100%{left:41%;top:37%} }
@keyframes wallRightMove { 0%{right:28%;top:37%} 100%{right:41%;top:25%} }
@keyframes upperDeckMove { 0%{left:43%;top:14%} 100%{left:57%;top:25%} }
#flyBall {
  position:absolute; left:0; top:0; z-index:4; opacity:0; pointer-events:none; font-size:clamp(22px,4vw,36px);
  transform:translate(var(--sx,50%), var(--sy,90%)) translate(-50%,-50%);
  filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 14px #00f0ff);
}
#flyBall.fly { animation:ballFlight .78s cubic-bezier(.12,.72,.18,1) forwards; }
#flyBall.out { filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 14px #ff5a5a); }
#flyBall.hit { filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #a5ff00); }
@keyframes ballFlight {
  0% { opacity:1; transform:translate(var(--sx), var(--sy)) translate(-50%,-50%) scale(1.35) rotate(0deg); }
  45% { opacity:1; transform:translate(var(--mx), var(--my)) translate(-50%,-50%) scale(.9) rotate(420deg); }
  100% { opacity:0; transform:translate(var(--ex), var(--ey)) translate(-50%,-50%) scale(.55) rotate(780deg); }
}
@keyframes targetFlash { 0%,100%{transform:scale(1)} 45%{transform:scale(1.22); box-shadow:0 0 28px #fff, 0 0 44px currentColor} }
#strikeHud { position:absolute; left:14px; bottom:14px; z-index:5; min-width:112px; padding:8px 10px; border:3px solid #ffec00; border-radius:8px; color:#fff; background:rgba(16,16,34,.82); font-family:var(--mono); font-size:13px; text-transform:uppercase; box-shadow:0 0 18px rgba(255,236,0,.35); }
#strikeHud span { display:block; color:#ffec00; font-size:10px; line-height:1; }
#strikeHud b { margin-right:2px; color:#a5ff00; font-size:24px; line-height:1; text-shadow:0 0 12px rgba(165,255,0,.7); }
#hitResult { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); min-width:min(360px,90%); max-width:calc(100% - 180px); padding:10px 14px; border-radius:999px; text-align:center; color:#fff; background:rgba(16,16,34,.78); border:3px solid #ffec00; font-size:clamp(20px,4vw,34px); text-shadow:0 0 14px #ff5ce8; }
#pitchTrack { position:relative; height:64px; border:3px solid #ff5ce8; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; }
#pitchTrack .zone { position:absolute; left:45%; top:0; bottom:0; width:10%; background:rgba(165,255,0,.3); border-inline:3px solid #a5ff00; }
#ball { position:absolute; left:0; top:50%; transform:translate(-50%,-50%); font-size:36px; filter:drop-shadow(0 0 10px #fff); }
#ball.pitching { animation:pitchMove var(--pitch-duration, .98s) linear infinite; }
@keyframes pitchMove { from{left:3%} to{left:97%} }
#timingFeedback { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:8px 12px; border:3px solid #00f0ff; border-radius:8px; color:#fff; background:rgba(0,240,255,.12); font-family:var(--mono); }
#timingFeedback span { color:#00f0ff; font-size:12px; text-transform:uppercase; }
#timingFeedback b { color:#ffec00; font-size:clamp(18px,3vw,26px); text-shadow:0 0 14px rgba(255,236,0,.6); }
#timingFeedback b[data-grade="perfect"] { color:#a5ff00; text-shadow:0 0 16px rgba(165,255,0,.75); }
#timingFeedback b[data-grade="good"] { color:#00f0ff; text-shadow:0 0 16px rgba(0,240,255,.7); }
#timingFeedback b[data-grade="close"] { color:#ffec00; }
#timingFeedback b[data-grade="miss"] { color:#ff5a5a; text-shadow:0 0 16px rgba(255,90,90,.72); }
#timingFeedback small { color:#dff; font-size:12px; text-align:right; }
.controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#leaderboard { border:3px solid #ff8a00; border-radius:8px; overflow:hidden; background:rgba(255,138,0,.12); }
#leaderboard.hidden { display:none; }
.board-head { display:flex; justify-content:space-between; padding:8px 10px; color:#ffec00; border-bottom:2px solid rgba(255,138,0,.55); }
#scoreList { list-style-position:inside; padding:8px 10px; display:grid; gap:4px; font-family:var(--mono); color:#fff; font-size:13px; }
#scoreList li { display:grid; grid-template-columns:1fr auto; gap:8px; }
#scoreEntry { position:fixed; inset:0; z-index:80; display:none; place-items:center; padding:20px; background:rgba(9,7,24,.72); backdrop-filter:blur(5px); }
#scoreEntry.open { display:grid; }
#scoreForm { width:min(380px,92vw); display:grid; gap:10px; padding:18px; border-radius:10px; background:#14142e; border:4px solid #00f0ff; box-shadow:0 0 30px rgba(0,240,255,.45); text-align:center; }
#scoreForm h2 { color:#ffec00; font-size:42px; }
#scoreForm p, #scoreForm label { color:#fff; font-family:var(--mono); font-size:14px; }
#playerName { width:100%; padding:12px 14px; border-radius:999px; border:3px solid #ff5ce8; background:#fff; color:#101022; font:800 18px system-ui,sans-serif; text-align:center; }
.score-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.score-actions button { padding:10px 14px; border-radius:999px; color:#101022; background:#a5ff00; }
@media (max-width:640px) {
  #partyStage { padding:76px 12px 72px; }
  #partyStage.game-mode #audio { display:none; }
  #vol { display:none; }
  h1 { font-size:clamp(52px,17vw,86px); }
  #countdown { grid-template-columns:repeat(2,1fr); gap:8px; margin-top:20px; }
  .cell { min-height:72px; }
  #clubhouse { margin-top:16px; }
  #suggestions { margin-top:14px; padding:12px; }
  .suggest-head { align-items:start; }
  #suggestionForm { grid-template-columns:1fr; }
  #suggestionForm label, #suggestionName, #suggestionText, #suggestionForm button { grid-column:1; grid-row:auto; }
  #suggestionForm button { align-self:auto; }
  .score-strip { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .score-strip div { padding:8px 5px; }
  #gamePanel { inset:58px 8px 26px; width:calc(100vw - 16px); grid-template-rows:auto minmax(220px,1fr) auto auto; }
  .target { width:52px; height:40px; font-size:17px; }
  .t-out.left { left:6%; } .t-out.right { right:6%; }
  .t-100 { left:13%; } .t-100.right { right:13%; }
  .t-250 { left:30%; } .t-250.right { right:30%; }
  #strikeHud { left:10px; bottom:10px; min-width:92px; padding:7px 8px; font-size:11px; }
  #strikeHud b { font-size:21px; }
  #hitResult { left:calc(50% + 42px); bottom:10px; min-width:0; width:calc(100% - 140px); max-width:none; padding:8px 9px; font-size:clamp(17px,5vw,24px); }
  #timingFeedback { grid-template-columns:auto 1fr auto; gap:7px; padding:7px 9px; }
  #timingFeedback span, #timingFeedback small { font-size:10px; }
  .controls { grid-template-columns:1fr; }
}