*{box-sizing:border-box}
html,body{margin:0;min-height:100%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{background:radial-gradient(circle at 50% -10%,#202d42 0,#0a0e14 48%,#05070b 100%);color:#f4f6fb;font:14px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:14px}
.wrap{max-width:1050px;margin:auto}
header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.logo{font-size:22px;font-weight:1000;color:#fff;text-decoration:none}.logo span{color:#b98cff}
.player{margin-left:auto;color:#aab5c4;font-weight:900;font-size:11px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player:before{content:"PLAYER ";color:#657286;font-size:8px;letter-spacing:1px}
.stat{background:#0d131d;border:1px solid #293548;border-radius:11px;padding:6px 11px;font-size:9px;color:#8290a3}
.stat b{display:block;color:#fff;font-size:16px;text-align:right}
main{display:grid;grid-template-columns:minmax(0,700px) 280px;gap:16px}
.game-card,.info{background:linear-gradient(145deg,#121a26,#080c12);border:1px solid #293548;border-radius:22px;padding:18px;box-shadow:0 25px 70px #0009}
.topline{display:flex;justify-content:space-between;align-items:end}.topline small,.info>b,.tray-label,.leaderboard small{color:#b98cff;font-weight:1000;letter-spacing:2px}
.topline h1{margin:4px 0 13px;font-size:28px;letter-spacing:-.5px}
#combo{background:#211637;color:#d9c2ff;border:1px solid #6844a0;border-radius:10px;padding:8px 10px;font-size:11px}
.board{width:min(620px,100%);margin:auto;aspect-ratio:1;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:2px;padding:9px;border-radius:18px;background:#070a0f;border:1px solid #202a38;box-shadow:inset 0 0 35px #000,0 18px 45px #0008;touch-action:none;overscroll-behavior:none}
.cell{border-radius:6px;background:#101824;position:relative;min-width:0}
.cell.f{background:var(--fill);box-shadow:inset 0 2px 0 #fff8,inset 0 -6px 9px #0008,0 3px 8px #0008}
.cell.preview{background:var(--preview)!important;box-shadow:inset 0 2px 0 #fff8,0 0 16px #ffffff33}
.cell.invalid{background:#ff52601c!important;box-shadow:inset 0 0 0 1px #ff687888}
#message{text-align:center;color:#8f9caf;min-height:40px;padding:12px 6px;font-size:12px}
.tray-label{font-size:9px;color:#78869a;margin-bottom:7px}
.pieces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;width:100%;min-width:0}
.piece{min-height:112px;min-width:0;width:100%;background:#0b1119;border:1px solid #34445a;border-radius:14px;display:grid;place-items:center;user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none;cursor:grab;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.piece:active{cursor:grabbing}.piece.selected{border-color:#b98cff;box-shadow:0 0 0 2px #b98cff30;transform:scale(1.02)}.piece.used{opacity:.16}
.shape{display:grid;grid-template-columns:repeat(5,15px);grid-template-rows:repeat(5,15px);gap:3px}
.mini{width:15px;height:15px;border-radius:4px}
.piece .mini[data-empty="1"]{visibility:hidden!important;background:transparent!important;box-shadow:none!important}
.dragGhost{position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 18px 18px #000b);opacity:.99}
.dragGhost .shape{transform:scale(1.42)}.dragGhost .mini{width:15px;height:15px}
button{border:0;border-radius:11px;padding:12px 16px;font-weight:1000;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#new,#again,#submit{background:#b98cff;color:#100a17;margin-top:13px;width:100%}
#submit{background:#65e6b1}#submit:disabled{opacity:.45}
.info{line-height:1.8;color:#aab5c4}.info ol{padding-left:20px;margin-bottom:0}
#over{display:none;margin-top:18px;padding:15px;border:1px solid #6e3946;border-radius:13px;background:#24141a;text-align:center}
#over.show{display:block}#over strong,#over em{display:block}#over strong{color:#ff8090;letter-spacing:2px}#over em{font-style:normal;font-size:32px;color:#fff}
#submitStatus{font-size:11px;color:#aab5c4;margin-top:8px}
.leaderboard{margin-top:18px;border-top:1px solid #253142;padding-top:14px}
.lb-head{display:flex;align-items:center;justify-content:space-between}.lb-head h2{margin:2px 0 8px;font-size:18px}
#refreshLB{width:36px;height:36px;padding:0;background:#151f2d;color:#fff;border:1px solid #34445a}
#lbStatus{font-size:11px;color:#77859a;margin:4px 0 8px}
#lbList{margin:0;padding:0;list-style:none;display:grid;gap:5px}
#lbList li{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;background:#0c131d;border:1px solid #202d3d;border-radius:9px;padding:7px 9px;font-size:12px}
#lbList li b{color:#c9d2df}.lb-score{font-weight:1000;color:#fff}
@media(max-width:800px){
 body{padding:7px}.wrap{max-width:620px}.info{display:none}.game-card{padding:11px;border-radius:17px}
 .topline h1{font-size:22px}.board{gap:1px;padding:7px;border-radius:15px}.cell{border-radius:5px}
 .pieces{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:stretch}
 .piece{min-height:94px}.shape{grid-template-columns:repeat(5,11px);grid-template-rows:repeat(5,11px);gap:2px}.mini{width:11px;height:11px}
 .dragGhost .shape{transform:scale(1.5)}header{flex-wrap:wrap}.player{order:3;width:100%;margin-left:0}
 .leaderboard{margin-top:14px}
}
@media(max-width:340px){.piece{min-height:84px}.shape{grid-template-columns:repeat(5,10px);grid-template-rows:repeat(5,10px);gap:2px}.mini{width:10px;height:10px}}

/* v6 mobile tray: always three columns, never vertical */
.pieces{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:stretch;
  justify-content:space-between;
  width:100%;
  gap:8px;
  overflow:visible;
}
.piece{
  flex:1 1 0 !important;
  width:0 !important;
  min-width:0 !important;
  max-width:none !important;
  touch-action:none !important;
  -webkit-touch-callout:none !important;
}
@media(max-width:800px){
  .pieces{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:6px !important}
  .piece{flex:1 1 0 !important;width:0 !important;min-width:0 !important}
}

/* v7: mobile-safe horizontal tray */
.pieces{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:stretch!important;width:100%!important;gap:8px!important;overflow:visible!important;touch-action:none!important;}
.piece{display:grid!important;flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:none!important;touch-action:none!important;pointer-events:auto!important;-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;}
.piece .shape{pointer-events:none!important;}
@media(max-width:800px){.pieces{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:6px!important}.piece{flex:1 1 0!important;width:auto!important;min-width:0!important}}

/* v8 MOBILE LAYOUT FIX
   The desktop two-column layout must collapse completely on phones.
*/
@media (max-width: 800px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  body{
    padding:6px;
  }
  .wrap{
    width:100%;
    max-width:620px;
    margin:0 auto;
  }
  header{
    width:100%;
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
  }
  .logo{
    font-size:20px;
    white-space:nowrap;
  }
  .player{
    order:initial;
    width:auto;
    margin-left:auto;
    max-width:80px;
  }
  .stat{
    flex:0 0 auto;
    padding:5px 9px;
  }

  /* CRITICAL: remove the desktop 700px + 280px layout */
  main{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }
  .game-card{
    display:block;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0;
    padding:12px !important;
    overflow:visible;
  }
  .info{
    display:none !important;
  }

  .topline{
    width:100%;
    min-width:0;
  }
  .topline h1{
    font-size:25px;
    line-height:1.05;
  }

  .board{
    width:100% !important;
    max-width:620px;
    margin:0 auto;
  }

  #message{
    width:100%;
    min-height:38px;
    line-height:1.3;
  }

  /* Three independent touch targets, always one horizontal row */
  .pieces{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    max-width:100% !important;
    gap:7px !important;
    align-items:stretch !important;
    justify-content:space-between !important;
    overflow:visible !important;
  }
  .piece{
    display:grid !important;
    flex:1 1 0 !important;
    width:0 !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:96px !important;
    padding:4px !important;
    margin:0 !important;
    touch-action:none !important;
    pointer-events:auto !important;
  }
  .piece .shape{
    pointer-events:none !important;
    transform:none !important;
    grid-template-columns:repeat(5,12px) !important;
    grid-template-rows:repeat(5,12px) !important;
    gap:2px !important;
  }
  .piece .mini{
    width:12px !important;
    height:12px !important;
  }

  /* Keep the lifted block comfortably visible while dragging */
  .dragGhost{
    z-index:99999 !important;
    pointer-events:none !important;
  }
  .dragGhost .shape{
    transform:scale(1.55) !important;
  }

  #new,#again,#submit{
    min-height:48px;
    font-size:15px;
  }
}

@media (max-width:380px){
  .game-card{padding:9px !important}
  .pieces{gap:5px !important}
  .piece{min-height:86px !important}
  .piece .shape{
    grid-template-columns:repeat(5,10px) !important;
    grid-template-rows:repeat(5,10px) !important;
    gap:2px !important;
  }
  .piece .mini{
    width:10px !important;
    height:10px !important;
  }
}

/* v9: clean drag — no floating duplicate while moving */
.dragGhost{display:none!important}
.piece.selected{
  opacity:0!important;
  transform:none!important;
  box-shadow:none!important;
  border-color:transparent!important;
}
.piece.selected .shape{visibility:hidden!important}
.cell.preview{
  box-shadow:inset 0 0 0 1px #ffffff66, 0 0 10px #ffffff22;
}

/* v10: original-style mobile drag ghost, positioned above the finger */
.dragGhost{
  display:block!important;position:fixed;z-index:999999;pointer-events:none;
  padding:7px;border-radius:12px;background:rgba(9,16,28,.92);
  border:1px solid rgba(255,255,255,.20);box-shadow:0 10px 30px rgba(0,0,0,.35);
  width:max-content;height:max-content;
}
.dragGhost .shape{display:grid!important;grid-template-columns:repeat(5,16px)!important;grid-template-rows:repeat(5,16px)!important;gap:2px!important}
.dragGhost .mini{display:block!important;width:16px!important;height:16px!important;border-radius:4px!important}
.piece.selected{opacity:0!important}
@media(max-width:800px){
  .dragGhost .shape{grid-template-columns:repeat(5,18px)!important;grid-template-rows:repeat(5,18px)!important}
  .dragGhost .mini{width:18px!important;height:18px!important}
}


/* v11: original-style floating drag + locked board shadow */
.dragGhost{display:block!important;position:fixed!important;z-index:100000!important;pointer-events:none!important;opacity:1!important;filter:drop-shadow(0 10px 12px #0009)!important;}
.dragGhost .shape{transform:scale(1.42)!important;}
.piece.selected{opacity:0!important;transform:none!important;box-shadow:none!important;border-color:transparent!important;}
.piece.selected .shape{visibility:hidden!important;}
.cell.preview{opacity:1!important;}

/* v12: floating piece lives inside the board, above the finger */
.dragGhost{overflow:visible!important;}
.dragGhost .shape{transform:scale(1.42)!important;}

/* v13: clean original-style drag */
.dragGhost{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;outline:0!important}
.dragGhost .shape{background:transparent!important;border:0!important;box-shadow:none!important}
.dragGhost .mini{border:0!important;outline:0!important}
.cell.preview{border:0!important;box-shadow:inset 0 0 0 1px #ffffff40,0 0 8px #ffffff18!important}

/* v14 geometry: floating piece and board preview share the exact same cell grid */
.dragGhost{
  position:fixed!important;
  z-index:10000!important;
  pointer-events:none!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  margin:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 10px 12px #0009)!important;
  transform:none!important;
  overflow:visible!important;
}
.dragGhost .shape{
  position:absolute!important;
  left:0!important;
  top:0!important;
  display:grid!important;
  grid-template-columns:repeat(5,var(--drag-cell))!important;
  grid-template-rows:repeat(5,var(--drag-cell))!important;
  gap:2px!important;
  transform:none!important;
}
.dragGhost .mini{
  width:var(--drag-cell)!important;
  height:var(--drag-cell)!important;
  border-radius:6px!important;
  box-sizing:border-box!important;
}
.dragGhost .mini[data-empty="1"]{
  visibility:hidden!important;
  background:transparent!important;
  box-shadow:none!important;
}