/* Ball Sudoku - Clean modern stylesheet */
:root{
    --bg-1: #0f1720;
    --bg-2: #0b1220;
    --accent: #4CAF50;
    --muted: rgba(255,255,255,0.62);
}

*{box-sizing:border-box}

body{
    font-family: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
    margin:0;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background: radial-gradient(1200px 800px at 10% 10%, rgba(76,175,80,0.06), transparent 8%),
                linear-gradient(180deg,var(--bg-1),var(--bg-2));
    color:#e6eef1;
    padding:28px;
}

.app-card{
    width:100%;
    max-width:980px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:16px;
    padding:22px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.03);
}

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

.title{ display:flex; align-items:center; gap:12px }

h1{
    font-size:1.5rem;
    margin:0;
    letter-spacing:0.3px;
    background: linear-gradient(90deg,var(--accent), #73e08a);
    -webkit-background-clip: text;
    background-clip: text;
    color:transparent;
}

.controls{ display:flex; align-items:center; gap:10px }

.controls select, .controls button{ height:44px; padding:0 12px; font-size:0.98rem }

select{
    background: rgba(255,255,255,0.03);
    color:var(--muted);
    border:1px solid rgba(255,255,255,0.04);
    border-radius:10px;
    outline:none;
    transition: box-shadow .18s ease, transform .12s ease;
}
select:focus{ box-shadow: 0 6px 18px rgba(76,175,80,0.08); transform: translateY(-2px); }

button{
    background: linear-gradient(180deg,var(--accent), #3e8e3e);
    color:#07210a;
    border: none;
    border-radius:10px;
    padding:10px 14px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

button.secondary{ background: transparent; color:var(--muted); border:1px solid rgba(255,255,255,0.04) }
button:hover{ transform: translateY(-3px); box-shadow: 0 8px 24px rgba(2,6,23,0.45); }

.board-wrap{ margin-top:16px; display:flex; justify-content:center }

.grid{
    width: min(720px, 86vmin);
    height: min(720px, 86vmin);
    display:grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap:0;
    border-radius:12px;
    overflow:hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
    padding:8px;
    border:1px solid rgba(255,255,255,0.03);
}

/* .row wrapper used in markup; let its children participate in the grid */
.row{ display: contents; }

.cell{
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.03);
}

/* Thicker separators for 3x3 boxes */
.cell:nth-child(3n){ border-right: 2px solid rgba(255,255,255,0.06); }
.row:nth-child(3n) .cell{ border-bottom: 2px solid rgba(255,255,255,0.06); }

.circle{
    width:74%;
    height:74%;
    border-radius:50%;
    display:inline-block;
    transition: transform .12s ease, opacity .12s ease;
    box-shadow: none;
}

/* Plain solid colors for each ball */
.color-1{ background: #e60000; } /* Red */
.color-2{ background: #ffff4d; } /* Yellow */
.color-3{ background: #00bfff; } /* Sky Blue */
.color-4{ background: #32cd32; } /* Grass Green */
.color-5{ background: #e0e0e0; } /* Off White */
.color-6{ background: #ff8c00; } /* Orange */
.color-7{ background: #800080; } /* Purple */
.color-8{ background: #ff1493; } /* Dark Pink */
.color-9{ background: #ffb6c1; } /* Light Pink */

.cell:hover .circle{ transform: scale(1.04); }

.controls .note{ font-size:0.86rem; color:var(--muted); margin-left:8px }
.help-row{ margin-top:12px; color:var(--muted); font-size:0.9rem }
footer{ margin-top:18px; text-align:center; color:rgba(255,255,255,0.45); font-size:0.86rem }

@media (max-width:720px){
    .app-card{ padding:16px }
    .controls{ flex-wrap:wrap }
    .controls select, .controls button{ width:100% }
    .header{ flex-direction:column; align-items:flex-start; gap:10px }
}