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

:root {
    --sand: #e8dcc8;
    --teal: #7ec8c8;
    --stone: #d4cfc5;
    --deep-navy: #0e1a24;
    --ocean: #2a6b8a;
    --gold: #b89a5a;
    --dark-blue: #1b2838;
    --terracotta: #c85a3a;
}

body {
    background-color: var(--sand);
    font-family: 'Karla', sans-serif;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

.tangram-board {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 6px;
    padding: 24px;
}

.tile {
    position: relative;
    cursor: pointer;
    perspective: 800px;
}

.tile-front,
.tile-back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    transition: transform 0.6s ease;
    padding: 16px;
}

.tile-front {
    background-color: var(--deep-navy);
    transform: rotateY(0deg);
}

.tile-back {
    background-color: var(--dark-blue);
    transform: rotateY(180deg);
    border: 2px solid var(--gold);
}

.tile[data-flipped="true"] .tile-front {
    transform: rotateY(-180deg);
}

.tile[data-flipped="true"] .tile-back {
    transform: rotateY(0deg);
}

.tile-1 {
    grid-column: 1 / 5;
    grid-row: 1 / 4;
}

.tile-2 {
    grid-column: 5 / 9;
    grid-row: 1 / 3;
}

.tile-3 {
    grid-column: 9 / 13;
    grid-row: 1 / 5;
}

.tile-4 {
    grid-column: 1 / 4;
    grid-row: 4 / 7;
}

.tile-5 {
    grid-column: 4 / 9;
    grid-row: 3 / 7;
}

.tile-6 {
    grid-column: 9 / 13;
    grid-row: 5 / 8;
}

.tile-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
}

.tile-icon svg {
    width: 100%;
    height: 100%;
}

.tile-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    color: var(--sand);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.1;
}

.tile-text {
    font-family: 'Karla', sans-serif;
    font-size: clamp(0.8rem, 1.4vw, 1rem);
    color: var(--stone);
    text-align: center;
    line-height: 1.5;
}

.brand-mark {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.brand-text {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    color: var(--deep-navy);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.brand-dot {
    font-family: 'Azeret Mono', monospace;
    font-size: clamp(0.8rem, 1.5vw, 1.2rem);
    color: var(--terracotta);
}

.greek-key-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: repeating-linear-gradient(
        90deg,
        var(--gold) 0px,
        var(--gold) 20px,
        transparent 20px,
        transparent 26px
    );
}

/* Tile hover states */
.tile-front:hover {
    outline: 2px solid var(--teal);
    outline-offset: -2px;
}

/* Tangram decorative elements */
.tile-1 .tile-front { border-bottom: 3px solid var(--terracotta); }
.tile-2 .tile-front { border-left: 3px solid var(--teal); }
.tile-3 .tile-front { border-top: 3px solid var(--gold); }
.tile-4 .tile-front { border-right: 3px solid var(--ocean); }
.tile-5 .tile-front { border-top: 3px solid var(--terracotta); border-bottom: 3px solid var(--teal); }
.tile-6 .tile-front { border-left: 3px solid var(--gold); }

/* Responsive adjustments */
@media (max-width: 768px) {
    .tangram-board {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        gap: 8px;
        padding: 16px;
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
    }

    .tile-1,
    .tile-2,
    .tile-3,
    .tile-4,
    .tile-5,
    .tile-6 {
        grid-column: span 2;
        grid-row: auto;
        min-height: 180px;
    }

    .brand-mark {
        position: relative;
        grid-column: 1 / -1;
        bottom: auto;
        left: auto;
        transform: none;
        text-align: center;
        padding: 16px;
    }
}