:root {
    --bg-primary: #e0f7fa;
    --bg-secondary: #b2ebf2;
    --bg-tertiary: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-glass: rgba(255, 255, 255, 0.5);
    --green-neon: #00acc1;
    --green-bright: #26c6da;
    --green-soft: #80deea;
    --green-dark: #00838f;
    --green-glow: rgba(0, 188, 212, 0.2);
    --green-glow-strong: rgba(0, 188, 212, 0.4);
    --cyan: #ff9800;
    --cyan-glow: rgba(255, 152, 0, 0.2);
    --text-primary: #37474f;
    --text-secondary: #546e7a;
    --text-muted: #78909c;
    --text-dark: #263238;
    --border: rgba(0, 172, 193, 0.3);
    --border-active: rgba(0, 172, 193, 0.7);
    --danger: #ff5252;
    --warning: #ff9800;
    --color-daily: #03a9f4;
    --color-permanent: #4caf50;
    --cell-size: 48px;
    --stock-cell-size: 25px;
    --clue-size: 32px;
    --gap: 1px;
    --font-title: 'Orbitron', sans-serif;
    --font-body: 'Noto Sans JP', sans-serif;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-active); border-radius: 3px; }

@media (max-width: 900px) {
    :root { --cell-size: 38px; --clue-size: 26px; }
}
@media (max-width: 500px) {
    :root { --cell-size: 32px; --clue-size: 22px; }
}