:root{
    --border-high:#ff7b7b; --border-middle:#ffe082; --border-low:#9be7a1;
    --bg-zone:rgba(255,255,255,0.03); --bg-start:rgba(255,255,255,0.05);
    --tile-border:rgba(255,255,255,0.25);
  }
  .game-root{user-select:none;}
  .start-area{
    min-height:110px; display:flex; align-items:center; justify-content:center;
    border:1px dashed var(--tile-border); border-radius:12px; background:var(--bg-start);
  }
  .consonant-tile{
    font-size:3rem; width:96px; height:96px;
    display:flex; align-items:center; justify-content:center;
    border:3px solid var(--tile-border); border-radius:16px;
    background:rgba(255,255,255,0.06); cursor:grab;
    transition:transform 120ms ease, border-color 160ms ease, box-shadow 160ms ease;
    box-shadow:0 6px 18px rgba(0,0,0,0.25);
  }
  .consonant-tile:active{cursor:grabbing; transform:scale(0.98);}
  .consonant-tile.placed{cursor:default;}

  /* Fully disable interaction for placed tiles */
  .consonant-tile.placed{
    cursor: default;
    pointer-events: none;     /* no click/tap/hover */
    opacity: 0.98;            /* subtle 'settled' feel */
  }

  /* Three columns with a small gap */
  .tone-row{
    display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:start;
  }
  .tone-zone{
    min-height:220px; border:3px dashed transparent; border-radius:14px;
    background:var(--bg-zone); padding:10px 10px 14px;
    display:flex; flex-direction:column; transition:border-color 160ms, background 160ms, transform 120ms;
  }
  .tone-zone .zone-title{font-weight:700; letter-spacing:.2px; margin-bottom:8px;}

  /* Multi-column grid inside each Tone Class area */
  .zone-stack{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(92px,1fr)); /* fits 96px tiles nicely */
    gap:8px;
    align-content:start;       /* pack to top */
    justify-items:center;      /* center tiles in each cell */
  }

  .tone-high{border-color:var(--border-high);}
  .tone-middle{border-color:var(--border-middle);}
  .tone-low{border-color:var(--border-low);}
  .tone-zone.is-hover{transform:translateY(-2px); background:rgba(255,255,255,0.07);}

  .match-high{border-color:var(--border-high)!important;}
  .match-middle{border-color:var(--border-middle)!important;}
  .match-low{border-color:var(--border-low)!important;}

  @keyframes shake{
    10%,90%{transform:translateX(-2px);} 20%,80%{transform:translateX(4px);}
    30%,50%,70%{transform:translateX(-8px);} 40%,60%{transform:translateX(8px);}
  }
  .shake{animation:shake 350ms ease-in-out;}
  .is-hidden{display:none!important;}