:root{
    --bg: #F4EFE6;
    --ink: #1C1B1A;
    --board: #21365B;
    --board-edge: #16253F;
    --slot: #F4EFE6;
    --red: #E8543D;
    --yellow: #F2B705;
    --muted: #7C7466;
  }
 
  * { box-sizing: border-box; }
 
  body{
    margin:0;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
      radial-gradient(circle at 20% 15%, rgba(255,255,255,0.5), transparent 40%),
      var(--bg);
    font-family: 'Georgia', 'Iowan Old Style', serif;
    color:var(--ink);
    padding:24px 12px;
  }
 
  .wrap{
    width:100%;
    max-width:520px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
  }
 
  @media (max-width: 480px){
    body{ padding:12px 6px; }
    .wrap{ gap:10px; }
    h1{ font-size:1.5rem; }
    .subtitle{ font-size:0.68rem; letter-spacing:0.1em; }
    .status{ font-size:0.9rem; }
    .hint{ font-size:0.68rem; }
    .board-frame{ padding:8px; border-radius:10px; }
    .board{ gap:5px; }
    .col{ gap:5px; }
  }
 
  header{
    text-align:center;
  }
 
  h1{
    margin:0;
    font-size:2rem;
    letter-spacing:0.02em;
    font-weight:700;
  }
 
  h1 .four{
    color:var(--red);
  }
 
  .subtitle{
    margin:4px 0 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.14em;
    color:var(--muted);
  }
 
  .status{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:1rem;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:28px;
  }
 
  .status .dot{
    width:16px;
    height:16px;
    border-radius:50%;
    display:inline-block;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.25);
  }
 
  .dot.red{ background:var(--red); }
  .dot.yellow{ background:var(--yellow); }
 
  .board-frame{
    position:relative;
    background: linear-gradient(180deg, var(--board), var(--board-edge));
    padding:14px;
    border-radius:14px;
    box-shadow:
      0 12px 24px rgba(0,0,0,0.18),
      0 2px 0 rgba(255,255,255,0.06) inset;
  }
 
  .board{
    display:grid;
    grid-template-columns: repeat(7, minmax(0,1fr));
    gap: 8px;
    width:min(96vw, 460px);
  }
 
  .col{
    display:flex;
    flex-direction:column;
    gap:8px;
    cursor:pointer;
    border-radius:8px;
    transition: background 0.15s ease;
  }
 
  .col:hover{
    background: rgba(255,255,255,0.05);
  }
 
  .col.disabled{
    cursor:default;
  }
 
  .cell{
    aspect-ratio:1;
    border-radius:50%;
    background: var(--slot);
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.35);
    position:relative;
    overflow:hidden;
  }
 
  .cell .piece{
    position:absolute;
    inset:0;
    border-radius:50%;
    transform: translateY(-140%);
    opacity:0;
  }
 
  .cell .piece.placed{
    animation: drop 0.42s cubic-bezier(.5,0,.7,1.3) forwards;
  }
 
  .cell .piece.red{
    background: radial-gradient(circle at 32% 28%, #FF8467, var(--red) 65%, #B93923 100%);
  }
 
  .cell .piece.yellow{
    background: radial-gradient(circle at 32% 28%, #FFDD6B, var(--yellow) 65%, #C08A00 100%);
  }
 
  @keyframes drop{
    0%   { transform: translateY(-140%); opacity:1; }
    70%  { transform: translateY(4%); }
    85%  { transform: translateY(-2%); }
    100% { transform: translateY(0%); opacity:1; }
  }
 
  .piece.win{
    box-shadow: 0 0 0 4px rgba(255,255,255,0.7) inset, 0 0 12px rgba(255,255,255,0.6);
  }
 
  .controls{
    display:flex;
    gap:10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
 
  button{
    appearance:none;
    border:none;
    background: var(--ink);
    color:var(--bg);
    padding:10px 18px;
    border-radius:8px;
    font-size:0.85rem;
    letter-spacing:0.02em;
    cursor:pointer;
    transition: transform 0.1s ease, opacity 0.15s ease;
  }
 
  button:hover{ opacity:0.85; }
  button:active{ transform: scale(0.96); }
 
  .hint{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:0.75rem;
    color:var(--muted);
    text-align:center;
  }