/* Base */
:root{ --brand:#004aad; --paneBg: rgba(255,255,255,0.5); }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; overflow:hidden; background:linear-gradient(90deg,#b3e5fc,#f8bbd0); font-family:Poppins,system-ui,sans-serif; -webkit-tap-highlight-color:transparent; text-align:center; }

/* Intro */
#introScreen{ position:fixed; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; padding:2vh 2vw; background:linear-gradient(90deg,#b3e5fc,#f8bbd0); z-index:5; }
#introScreen h1{ color:var(--brand); font-size:clamp(20px,3.2vw,42px); margin:6px 0; }
#introScreen p{ color:var(--brand); font-size:clamp(14px,2vw,22px); margin:2px 0 10px; }
#playerName{ width:min(28vw,420px); max-width:90vw; padding:14px 16px; font-size:clamp(14px,1.6vw,20px); border:2px solid var(--brand); border-radius:12px; text-align:center; background:#fff; }
.logoGlow{ animation:logoGlow 3s ease-in-out infinite; max-width:200px; }
@keyframes logoGlow{ 0%{filter:drop-shadow(0 0 0 #fff);} 50%{filter:drop-shadow(0 0 25px #ffd700) brightness(1.2);} 100%{filter:drop-shadow(0 0 0 #fff);} }
.intro-buttons{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
#startBtn,#viewScoresBtn{ padding:14px 22px; border:none; border-radius:12px; cursor:pointer; font-size:clamp(14px,1.6vw,20px); box-shadow:0 6px 14px rgba(0,0,0,.15); transition:transform .1s, opacity .2s; }
#startBtn{ background:var(--brand); color:#fff; opacity:.6; }
#startBtn.enabled{ opacity:1; }
#viewScoresBtn{ background:#ffcc33; color:#333; font-weight:700; }
#startBtn:active,#viewScoresBtn:active{ transform:scale(.98); }
#powered{ margin-top:6px; color:var(--brand); font-weight:700; font-size:clamp(12px,1.5vw,18px); }

/* Layout */
.landscape-grid{ position:fixed; inset:0; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:start; gap:2vw; padding:2vh 2vw; }
.pane h3{ color:var(--brand); font-size:clamp(14px,1.8vw,24px); margin:6px 0 10px; }
.pane .frame,.board,.pool-grid{ background:var(--paneBg); border:3px solid #fff; border-radius:16px; box-shadow:0 8px 20px rgba(0,0,0,.2); }
.frame,.board,.pool-grid{ width:100%; aspect-ratio:2/3; overflow:visible; position:relative; }
.reference .frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:14px; }

/* Grids */
.board{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(4,1fr); }
.pool-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(4,1fr); gap:0; }
.drop-zone,.piece-slot{ outline:1px dashed rgba(0,0,0,.15); position:relative; }

/* Pieces */
.piece{ position:absolute; inset:0; border-radius:10px; box-shadow:0 6px 12px rgba(0,0,0,.18); touch-action:none; background:transparent; }
.piece img{ width:100%; height:100%; display:block; border-radius:inherit; }
#dragLayer{ position:fixed; inset:0; pointer-events:none; z-index:50; }

/* Timer */
#timer{ position:fixed; left:50%; transform:translateX(-50%); bottom:1.2vh; color:var(--brand); font-weight:700; font-size:clamp(14px,2vw,28px); background:rgba(255,255,255,.7); padding:.3rem .8rem; border-radius:12px; border:2px solid #fff; }

/* Win Popup */
.overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1rem; z-index:20; background:linear-gradient(90deg,#b3e5fc,#f8bbd0); }
.popup-card{ background:#ffffffcc; border-radius:16px; padding:1rem 1.5rem; text-align:center; border:3px solid #fff; box-shadow:0 8px 16px rgba(0,0,0,.2); color:var(--brand); font-size:clamp(16px,2.2vw,28px); font-weight:800; }
#restartBtn{ margin-top:.5rem; padding:.8rem 1.6rem; border:none; border-radius:12px; background:var(--brand); color:#fff; font-size:clamp(14px,1.6vw,20px); cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.15); }

/* Fireworks */
#fireworks{ position:fixed; inset:0; pointer-events:none; }

/* Scores */
.scores-ovl{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); z-index:30; }
.scoreCard{ width:min(90vw,520px); max-height:80vh; background:linear-gradient(270deg,#ffeb99,#b3e5fc,#ffb6c1); background-size:600% 600%; animation:gradientShift 8s ease infinite; border-radius:22px; padding:1rem; border:3px solid #fff; color:var(--brand); text-align:center; box-shadow:0 10px 24px rgba(0,0,0,.25); display:flex; flex-direction:column; gap:.6rem; }
@keyframes gradientShift{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
.scoreCard h2{ font-size:clamp(18px,2.2vw,28px); margin:.2rem 0 .4rem; font-weight:900; }
.scoreList{ overflow:auto; flex:1 1 auto; padding:.5rem; border-radius:12px; background:rgba(255,255,255,.75); }
.score-item{ background:#fff; border-radius:12px; padding:.6rem .8rem; margin:.4rem 0; font-weight:700; display:flex; justify-content:space-between; align-items:center; box-shadow:0 4px 10px rgba(0,0,0,.12); animation:slideUp .35s ease both; }
.score-item:nth-child(odd){ background:#fff7e0; }
@keyframes slideUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
#closeScoresBtn{ align-self:center; padding:.8rem 1.4rem; border:none; border-radius:12px; background:var(--brand); color:#fff; font-size:clamp(14px,1.6vw,20px); cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.15); margin-top:.4rem; }

/* Drag Glow + Bounce */
.piece.grabbing{ box-shadow:0 0 18px 4px rgba(0,170,255,.7); transform:scale(1.05); transition:box-shadow .2s, transform .15s; }
@keyframes pieceDrop{ 0%{transform:scale(1.1);} 50%{transform:scale(0.95);} 100%{transform:scale(1);} }

/* Sparkle */
.sparkle{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; }
.sparkle .sp{ position:absolute; width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 30% 30%,#fff,#ffe066 60%,#ff9f1a 100%); animation:spMove .6s ease-out forwards; }
@keyframes spMove{ 0%{opacity:1; transform:translate(0,0) scale(1);} 100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(.2);} }

/* Small height */
@media (max-height:480px){ .landscape-grid{ gap:1vw; padding:1vh 1vw; } .pane h3{ display:none; } }