:root{
      --bg-color:#faf8ef;
      --panel-bg:#ffffff;
      --panel-shadow:rgba(0,0,0,0.06);
      --text:#3b3b3b;

      --grid-bg:#bbada0;
      --cell-bg:rgba(238,228,218,0.35);
      --cell-filled-shadow:rgba(0,0,0,0.15);

      --score-bg:#bbada0;
      --btn:#8f7a66;
      --btn-hover:#7f6a56;
      --btn-danger:#b64b4b;
      --btn-danger-hover:#a34040;

      --hint:rgba(46, 204, 113, 0.25);
      --invalid:rgba(231, 76, 60, 0.25);

      --gap:6px;
      --radius:14px;

      --board-size: 420px;
      --font: "Clear Sans","Helvetica Neue",Arial,sans-serif;
    }

    [data-theme="dark"]{
      --bg-color:#1a1a2e;
      --panel-bg:#16213e;
      --panel-shadow:rgba(0,0,0,0.35);
      --text:#eaeaea;

      --grid-bg:#2a2a4a;
      --cell-bg:rgba(60,60,90,0.55);

      --score-bg:#3a3a5a;
      --btn:#4a4a6a;
      --btn-hover:#5a5a7a;
      --btn-danger:#a64a4a;
      --btn-danger-hover:#b15858;

      --hint:rgba(46, 204, 113, 0.22);
      --invalid:rgba(231, 76, 60, 0.22);
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      min-height:100vh;
      background:var(--bg-color);
      font-family:var(--font);
      color:var(--text);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:18px 10px;
      overflow-x:hidden;
      transition: background 0.25s;
    }

    .wrap{
      width:min(94vw, 520px);
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }

    .home-btn{
      text-decoration:none;
      background:var(--btn);
      color:#fff;
      padding:10px 14px;
      border-radius:12px;
      font-weight:800;
      transition:0.15s;
      user-select:none;
    }
    .home-btn:hover{ background:var(--btn-hover); }

    .badge{
      background:var(--panel-bg);
      color:var(--text);
      border-radius:12px;
      padding:10px 12px;
      font-weight:800;
      box-shadow:0 6px 16px var(--panel-shadow);
      flex:1;
      min-width: 180px;
      text-align:center;
    }

    .scorebox{
      background:var(--score-bg);
      padding:10px 16px;
      border-radius:12px;
      color:#fff;
      text-align:center;
      min-width:120px;
      user-select:none;
    }
    .scorebox .label{ font-size:12px; display:block; opacity:0.9; font-weight:700; }
    .scorebox .val{ font-size:22px; font-weight:900; letter-spacing:0.3px; }

    .panel{
      background:var(--panel-bg);
      border-radius:var(--radius);
      box-shadow:0 10px 24px var(--panel-shadow);
      padding:12px;
    }

    .board-area{
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .board{
      width:100%;
      aspect-ratio:1 / 1;
      background:var(--grid-bg);
      border-radius:12px;
      padding:10px;
      display:grid;
      grid-template-columns:repeat(8, 1fr);
      grid-template-rows:repeat(8, 1fr);
      gap:var(--gap);
      position:relative;
      touch-action:none;
      user-select:none;
      transition: transform 0.08s;
    }

    .board.shake{
      animation: boardShake 0.4s ease-out;
    }

    @keyframes boardShake {
      0%, 100% { transform: translateX(0); }
      15% { transform: translateX(-4px) rotate(-0.5deg); }
      30% { transform: translateX(4px) rotate(0.5deg); }
      45% { transform: translateX(-3px) rotate(-0.3deg); }
      60% { transform: translateX(3px) rotate(0.3deg); }
      75% { transform: translateX(-2px); }
      90% { transform: translateX(2px); }
    }

    .cell{
      background:var(--cell-bg);
      border-radius:8px;
      position:relative;
      overflow:hidden;
      transition: transform 0.08s, background 0.15s;
    }
    .cell.filled{
      box-shadow: inset 0 -2px 0 rgba(255,255,255,0.25),
                  0 4px 10px var(--cell-filled-shadow);
    }
    .cell.clearing{
      animation: cellClear 0.35s ease-out forwards;
    }
    .cell.placing{
      animation: cellPlace 0.2s ease-out;
    }

    @keyframes cellClear {
      0% { transform: scale(1); opacity: 1; }
      40% { transform: scale(1.15); opacity: 1; }
      100% { transform: scale(0); opacity: 0; }
    }

    @keyframes cellPlace {
      0% { transform: scale(0.5); opacity: 0.6; }
      60% { transform: scale(1.1); }
      100% { transform: scale(1); opacity: 1; }
    }

    .cell.hint::after,
    .cell.invalid::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:8px;
    }
    .cell.hint::after{ background:var(--hint); }
    .cell.invalid::after{ background:var(--invalid); }

    /* 파티클 이펙트 */
    .particle{
      position: fixed;
      pointer-events: none;
      border-radius: 50%;
      z-index: 9999;
      animation: particleFly 0.6s ease-out forwards;
    }

    @keyframes particleFly {
      0% { 
        transform: translate(0, 0) scale(1); 
        opacity: 1; 
      }
      100% { 
        transform: translate(var(--dx), var(--dy)) scale(0); 
        opacity: 0; 
      }
    }

    /* 스코어 팝업 */
    .score-popup{
      position: fixed;
      pointer-events: none;
      font-weight: 900;
      font-size: 18px;
      color: #fff;
      text-shadow: 0 2px 8px rgba(0,0,0,0.4);
      z-index: 9999;
      animation: scorePopup 0.8s ease-out forwards;
    }

    @keyframes scorePopup {
      0% { 
        transform: translateY(0) scale(0.8); 
        opacity: 0; 
      }
      20% { 
        transform: translateY(-10px) scale(1.1); 
        opacity: 1; 
      }
      100% { 
        transform: translateY(-50px) scale(0.9); 
        opacity: 0; 
      }
    }

    .toolbar{
      display:flex;
      gap:8px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
    }

    .btn{
      border:none;
      background:var(--btn);
      color:#fff;
      padding:10px 12px;
      border-radius:12px;
      font-weight:900;
      cursor:pointer;
      transition:0.15s;
      user-select:none;
      white-space:nowrap;
    }
    .btn:hover{ background:var(--btn-hover); }
    .btn.danger{ background:var(--btn-danger); }
    .btn.danger:hover{ background:var(--btn-danger-hover); }

    .subinfo{
      font-size:12px;
      opacity:0.9;
      font-weight:700;
      line-height:1.35;
    }

    .tray{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:10px;
      margin-top:10px;
    }

    .piece{
      background:rgba(0,0,0,0.04);
      border-radius:14px;
      padding:10px;
      min-height:92px;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      cursor:grab;
      user-select:none;
      touch-action:none;
      outline:2px solid transparent;
      transition: 0.15s ease-out;
    }
    [data-theme="dark"] .piece{
      background:rgba(255,255,255,0.07);
    }
    .piece:active{ cursor:grabbing; }
    .piece.used{
      opacity:0.35;
      cursor:not-allowed;
    }
    .piece.selected{
      outline-color: rgba(52,152,219,0.85);
      transform: translateY(-1px);
    }
    .piece.dragging{
      opacity: 0.4;
      transform: scale(0.95);
    }

    .piece-grid{
      display:grid;
      gap:6px;
      align-items:center;
      justify-items:center;
    }
    .pblock{
      width:18px;
      height:18px;
      border-radius:6px;
      box-shadow: inset 0 -2px 0 rgba(255,255,255,0.25),
                  0 4px 10px rgba(0,0,0,0.14);
    }

    .leaderboard{
      margin-top:10px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .lb-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      font-weight:900;
      letter-spacing:0.2px;
    }
    .lb-list{
      display:flex;
      flex-direction:column;
      gap:6px;
      font-size:13px;
      font-weight:800;
    }
    .lb-row{
      display:flex;
      justify-content:space-between;
      gap:10px;
      padding:8px 10px;
      border-radius:12px;
      background:rgba(0,0,0,0.04);
    }
    [data-theme="dark"] .lb-row{ background:rgba(255,255,255,0.07); }
    .lb-rank{ opacity:0.85; min-width: 26px; }
    .lb-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .lb-score{ font-variant-numeric: tabular-nums; }

    .toast{
      position:fixed;
      left:50%;
      bottom:18px;
      transform:translateX(-50%);
      background:rgba(0,0,0,0.80);
      color:#fff;
      padding:10px 14px;
      border-radius:999px;
      font-weight:900;
      letter-spacing:0.2px;
      opacity:0;
      pointer-events:none;
      transition:opacity 0.18s, transform 0.18s;
      z-index:9999;
    }
    .toast.show{
      opacity:1;
      transform:translateX(-50%) translateY(-4px);
    }

    .modal-backdrop{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,0.55);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      z-index:10000;
    }
    .modal-backdrop.show{ display:flex; }
    .modal{
      width:min(92vw, 420px);
      background:var(--panel-bg);
      color:var(--text);
      border-radius:18px;
      box-shadow:0 14px 40px rgba(0,0,0,0.35);
      padding:16px;
    }
    .modal h2{
      margin:0 0 8px;
      font-size:18px;
      font-weight:1000;
      letter-spacing:0.2px;
    }
    .modal p{
      margin:6px 0;
      font-size:13px;
      font-weight:800;
      opacity:0.92;
      line-height:1.45;
    }
    .modal .actions{
      margin-top:12px;
      display:flex;
      gap:8px;
      justify-content:flex-end;
      flex-wrap:wrap;
    }

    .floating{
      position:fixed;
      z-index:9998;
      pointer-events:none;
      opacity:0.95;
      filter: drop-shadow(0 12px 28px rgba(0,0,0,0.35));
      transition: transform 0.08s ease-out, opacity 0.1s;
      will-change: transform, left, top;
    }
    .floating.over-board{
      transform: scale(1);
    }
    .floating.outside-board{
      transform: scale(0.85);
      opacity: 0.7;
    }