:root {
    --bg: #f7f6f1;
    --panel: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --border: #e5e7eb;
    --accent: #0f766e;
    --shadow: 0 18px 44px -28px rgba(17, 24, 39, 0.45);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 14% 16%, #dcfce7 0, transparent 30%),
        radial-gradient(circle at 86% 82%, #dbeafe 0, transparent 34%),
        var(--bg);
    display: grid;
    place-items: center;
    padding: 24px;
}

.shell {
    width: min(860px, 100%);
    background: color-mix(in srgb, var(--panel) 92%, #f0fdf4 8%);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow);
    padding: clamp(22px, 4vw, 36px);
    animation: rise 360ms ease-out;
}

.hero h1 {
    margin: 0;
    font-size: clamp(1.8rem, 2.4vw, 2.2rem);
    letter-spacing: 0.01em;
}

.hero p {
    margin: 8px 0 24px;
    color: var(--muted);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.card {
    text-decoration: none;
    color: inherit;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    display: grid;
    gap: 8px;
    transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
}

.card:hover,
.card:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 45%, white);
    box-shadow: 0 12px 28px -20px rgba(15, 118, 110, 0.65);
    outline: none;
}

.icon {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}

.icon svg {
    width: 34px;
    height: 34px;
    display: block;
}

.card-c4 .icon {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.card-gomoku .icon {
    background: #fffbeb;
    border-color: #fde68a;
}

.card-othello .icon {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.card-chess .icon {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.label {
    font-weight: 650;
    letter-spacing: 0.01em;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}