:root {
    --page: #f2eadc;
    --panel: rgba(255,255,255,.72);
    /* --panel: rgba(239, 230, 215, .88); */
    --ink: #3f352d;
    --muted: #75695f;
    --cell: #dfcfb9;
    --cell-line: #bda98e;
    --shadow: 0 12px 30px rgba(70,48,28,.15);
    --piece-color: #b78f7a;
  }
  * { box-sizing: border-box; }
  html, body { min-height: 100%; }
  body {
    margin: 0;
    color: var(--ink);
    background:
      radial-gradient(circle at 25% 10%, rgba(255,255,255,.8), transparent 28rem),
      linear-gradient(135deg, #f7f0e6, var(--page));
    font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  button { font: inherit; }
  .app {
    width: min(94vw, 620px);
    margin: 0 auto;
    padding: max(14px, env(safe-area-inset-top)) 0 max(22px, env(safe-area-inset-bottom));
  }
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }
  h1 {
    font-size: clamp(20px, 5vw, 30px);
    margin: 0;
    letter-spacing: .02em;
  }
  .stats {
    display: flex;
    gap: 8px;
  }
  .stat {
    min-width: 78px;
    padding: 8px 10px;
    border-radius: 14px;
    background: var(--panel);
    box-shadow: var(--shadow);
    text-align: center;
    backdrop-filter: blur(8px);
  }
  .stat small { display:block; color:var(--muted); font-size:11px; }
  .stat strong { font-size:20px; }

  .board-wrap {
    position: relative;
    padding: 10px;
    border: 5px solid #8f694b;
    border-radius: 17px;
    background: linear-gradient(145deg, #b8865e, #7d563c);
    box-shadow: var(--shadow), inset 0 2px 4px rgba(255,255,255,.25);
  }
  .board {
    display: grid;
    /* grid-template-columns: repeat(6, 1fr); */
    aspect-ratio: 1;
    gap: 3px;
    padding: 3px;
    background: var(--cell-line);
    border-radius: 9px;
    touch-action: manipulation;
    }
  .cell {
    position: relative;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(145deg, #eadbc5, var(--cell));
    box-shadow: inset 0 1px 1px rgba(255,255,255,.8), inset 0 -1px 2px rgba(74,47,28,.12);
    cursor: pointer;
    min-width: 0;
    padding: 0;
  }
  .cell.filled::after,
  .mini-cell.filled::after {
    content:"";
    position:absolute;
    inset:7%;
    border-radius: 20%;
    background: var(--piece-color);
    box-shadow:
      inset 0 2px 1px rgba(236, 220, 198, .35),
      inset 0 -3px 4px rgba(70,25,35,.18),
      0 2px 3px rgba(57,36,24,.18);
  }
  .cell.obstacle::after {
    content:"";
    position:absolute;
    inset:5%;
    border-radius: 13%;
    background:
      radial-gradient(circle at 28% 24%, rgba(236, 220, 198,.55), transparent 24%),
      linear-gradient(145deg, #d8d4cc, #aaa59d);
    box-shadow:
      inset 0 2px 1px rgba(255,255,255,.35),
      inset 0 -4px 6px rgba(0,0,0,.25),
      0 2px 3px rgba(45,34,27,.3);
  }
  .hp {
    position:absolute;
    z-index:2;
    inset:0;
    display:grid;
    place-items:center;
    color: #5a4032;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    font-size: clamp(13px, 4.8vw, 31px);
    font-weight:800;
    pointer-events:none;
  }
  .cell.preview-ok::before,
  .cell.preview-no::before {
    content:"";
    position:absolute;
    inset:8%;
    z-index:3;
    border-radius:20%;
  }
  .cell.preview-ok::before {background: rgba(143, 105, 75, .35); }
  .cell.preview-no::before {background: rgba(140, 90, 75, .30); }
  .cell.clearing { animation: pop .28s ease both; }
  .cell.hit .hp { animation: bump .28s ease; }
  @keyframes pop { 50% { transform:scale(.75); filter:brightness(1.15); } }
  @keyframes bump { 50% { transform:scale(1.35); } }

  /* .cell.line-preview {
    background:
      linear-gradient(
        rgba(190, 145, 110, .12),
        rgba(190, 145, 110, .12)
      ),
      linear-gradient(145deg, #eadbc5, var(--cell));

    box-shadow:
      inset 0 0 0 1px rgba(125, 87, 60, .35);
  } */

  .cell.line-preview {
    animation: lineGlow 0.9s ease-in-out infinite alternate;
    box-shadow:
      inset 0 0 0 3px rgba(255, 215, 120, .85),
      0 0 12px rgba(255, 190, 70, .75);
  }
/* 
  @keyframes lineGlow {
    from {
      filter: brightness(1);
    }

    to {
      filter: brightness(1.35);
    }
  } */
  .hand-panel {
    margin-top: 14px;
    padding: 12px;
    border-radius: 18px;
    background: var(--panel);
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
  }
  .hint { margin:0 0 10px; color:var(--muted); font-size:13px; text-align:center; }
  .hand {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .piece {
    position:relative;
    min-height: 112px;
    border:2px solid transparent;
    border-radius:14px;
    background:rgba(255,255,255,.58);
    cursor:pointer;
    display:grid;
    place-items:center;
    padding:8px;
    transition:.15s ease;
  }
  .piece:hover { transform: translateY(-2px); }
  /* .piece.selected { border-color:#5f9d74; box-shadow:0 0 0 3px rgba(95,157,116,.18); } */
  .piece.selected {
  border-color: #8f694b;
  box-shadow: 0 0 0 3px rgba(143, 105, 75, .18);
  }
  .piece.used { opacity:.18; cursor:default; transform:none; }
  .piece.cannot-fit:not(.used) { opacity:.48; }
  .mini-grid {
    display: grid;
    gap: 3px;
    width: max-content;
    height: max-content;
  }
  .mini-cell {
    position: relative;
    width: clamp(22px, 7vw, 38px);
    height: clamp(22px, 7vw, 38px);
  }
  .mini-cell.empty { opacity:0; }
  .controls {
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:12px;
  }
  .btn {
    border:0;
    border-radius:999px;
    padding:10px 18px;
    color:#fff;
    background:#785b44;
    box-shadow:0 5px 12px rgba(75,48,29,.2);
    cursor:pointer;
    font-weight:700;
  }
  .btn.secondary { background:#817c76; }
  .message {
    min-height: 1.5em;
    margin: 9px 0 0;
    text-align:center;
    font-weight:700;
    color:#6f5140;
  }
  .rules {
    margin-top:14px;
    padding:12px 16px;
    border-radius:16px;
    background:rgba(255,255,255,.45);
    color:var(--muted);
    font-size:13px;
    line-height:1.65;
  }
  .rules summary { color:var(--ink); cursor:pointer; font-weight:700; }
  @media (max-width:440px) {
    .app { width: 96vw; }
    .board-wrap { padding:7px; border-width:4px; }
    .board { gap:2px; padding:2px; }
    .hand-panel { padding:9px; }
    .piece { min-height:96px; padding:5px; }
    .stats { gap:5px; }
    .stat { min-width:64px; padding:6px; }
  }