/* AI_TAG: FRONTEND_GRAPHICS | 101Pige look & feel */
:root{
  --bg:#0b1628; --fg:#e6f2ff; --muted:#8fb3d9; --tile:#10233c; --tile-hi:#173055;
  --accent:#6fe3ff; --accent-2:#ffc073; --good:#8affb0; --bad:#ff7a7a;
  --shadow:0 10px 30px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
html,body{height:100%;}
body{margin:0;background:radial-gradient(1200px 800px at 20% -10%, #173055 0%, #0b1628 50%, #07111e 100%);color:var(--fg);font:16px/1.4 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;}

/* Alt theme */
body.alt{--bg:#120f1d; --fg:#ffeefc; --muted:#d9aee0; --tile:#201733; --tile-hi:#2c1e4d; --accent:#ff90e8; --accent-2:#ffd166;}
body.alt{background:radial-gradient(1200px 900px at 80% -20%, #2c1e4d 0%, #120f1d 50%, #0a0811 100%)}

.btn{background:var(--tile-hi);color:var(--fg);border:1px solid rgba(255,255,255,.08);padding:.5rem .8rem;border-radius:10px;box-shadow:var(--shadow);cursor:pointer;transition:transform .12s ease,background .2s ease;}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.15)}

.gp-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.gp-header .brand{display:flex;align-items:center;gap:.5rem}
.gp-header .logo{font-size:24px}
.gp-header h1{font-size:20px;margin:0;color:var(--fg)}
.gp-header .actions{display:flex;gap:.5rem}

.gp-main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;padding:24px;max-width:1200px;margin:0 auto}
.board-wrap{display:grid;gap:14px;align-items:start}
.board{display:grid;grid-template-columns:repeat(10,1fr);grid-auto-rows:48px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.cell{position:relative;border:1px solid rgba(255,255,255,.06);background:var(--tile);}
.cell.highlight{background:linear-gradient(180deg, rgba(111,227,255,.15), rgba(111,227,255,0));}
.cell.drop-ok{outline:2px solid var(--good);}
.cell.drop-bad{outline:2px solid var(--bad);}

.piece{--h:44px;display:grid;gap:6px;grid-auto-rows:var(--h);grid-auto-columns:var(--h);padding:8px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.12);border-radius:12px;box-shadow:var(--shadow);touch-action:none;user-select:none;}
.board{touch-action:none}
.cell{touch-action:none}
.piece.selected{outline:2px solid var(--accent)}
.tile{width:var(--h);height:var(--h);background:linear-gradient(180deg,#8fb3d9,#6fe3ff);border-radius:8px;box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.15), 0 6px 14px rgba(16,35,60,.65);transform:translateZ(0)}
.piece[data-tint="1"] .tile{filter:hue-rotate(30deg) saturate(1.1)}
.piece[data-tint="2"] .tile{filter:hue-rotate(75deg) saturate(1.1)}
.piece[data-tint="3"] .tile{filter:hue-rotate(150deg) saturate(1.15)}
.piece[data-tint="4"] .tile{filter:hue-rotate(210deg) saturate(1.15)}
.tile.bob{animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.queue{display:flex;gap:14px;align-items:center}
.hud{display:grid;gap:14px}
.card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:var(--shadow);padding:12px}
.card .row{display:flex;justify-content:space-between;padding:4px 0;color:var(--muted)}
.card .row strong{color:var(--fg)}
.card.tips summary{cursor:pointer}

.overlay{position:fixed;inset:0;background:rgba(7,17,30,.6);display:grid;place-items:center}
.overlay.hidden{display:none}
.panel{background:#0e1b2d;border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:var(--shadow);padding:20px;max-width:420px;width:90%}
.panel h2{margin-top:0}
.actions{display:flex;gap:.5rem;justify-content:flex-end}

/* Drag ghost */
.dragging{opacity:.85;transform:scale(1.03);filter:drop-shadow(0 12px 24px rgba(0,0,0,.5))}

/* Clear animations */
.clear-row{position:absolute;left:0;right:0;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:sweep .5s ease}
.clear-col{position:absolute;top:0;bottom:0;left:50%;width:2px;background:linear-gradient(180deg,transparent,var(--accent-2),transparent);animation:sweep .5s ease}
@keyframes sweep{from{opacity:0}50%{opacity:1}to{opacity:0}}

/* Responsive */
@media (max-width: 900px){
  .gp-main{grid-template-columns:1fr;}
  .board{grid-auto-rows:36px}
  .piece{--h:34px}
}