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

:root {
    --purple: #5533E8;
    --yellow: #F5C200;
    --coral: #E84530;
    --teal: #00A889;
    --blue: #2563EB;
    --pink: #DB2777;
    --orange: #EA580C;
    --lime: #65A30D;
    --sky: #0284C7;
    --amber: #D97706;
    --ink: #0B0F1A;
    --bg: #111827;
    --bg-panel: #1F2937;
    --border: #374151;
    --text-dim: #6B7280;
    --r: 8px;
}

html, body {
    height: 100%;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: #fff;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ---- BACK LINK ---- */
.back-link {
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 200;
    color: var(--text-dim);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: color 0.15s;
}
.back-link:hover { color: #fff; }

/* ---- APP LAYOUT ---- */
#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding: 0;
}

/* ---- HUD ---- */
#hud {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 100px;
    background: var(--bg-panel);
    border-bottom: 2px solid var(--border);
    flex-shrink: 0;
    min-height: 52px;
}

#level-badge {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yellow);
    white-space: nowrap;
    flex-shrink: 0;
}

#progress-wrap {
    flex: 1;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

#progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--teal), var(--yellow));
    border-radius: 4px;
    transition: width 0.4s ease;
}

#star-display {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--yellow);
    flex-shrink: 0;
}

/* ---- GRID ---- */
#grid-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 0;
    overflow: hidden;
}

#grid {
    display: grid;
    gap: 5px;
}

/* ---- BLOCKS ---- */
.block {
    position: relative;
    border-radius: var(--r);
    cursor: pointer;
    transition: transform 0.08s, filter 0.08s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* All intact blocks share the same base stone appearance */
.block[data-hp="3"],
.block[data-hp="2"],
.block[data-hp="1"] {
    background: linear-gradient(160deg, #3A4255 0%, #252B38 55%, #1C2130 100%);
    border: 2px solid #4A5568;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.07),
        inset 0 -2px 0 rgba(0,0,0,0.25),
        0 3px 0 rgba(0,0,0,0.5);
}

/* Crack overlays — same SVG viewBox so cracks are identical across block sizes */
.block[data-hp="2"]::after,
.block[data-hp="1"]::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: no-repeat center / 100% 100%;
}

/* One hit: single main crack + two small branches */
.block[data-hp="2"]::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M58,0 L48,30 L64,46 L42,100' stroke='rgba(0,0,0,0.58)' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48,30 L26,40' stroke='rgba(0,0,0,0.38)' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M64,46 L90,52' stroke='rgba(0,0,0,0.32)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Two hits: same main crack, heavier + spider web of branches */
.block[data-hp="1"]::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M58,0 L48,30 L64,46 L42,100' stroke='rgba(0,0,0,0.75)' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48,30 L20,36 L0,28' stroke='rgba(0,0,0,0.52)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M64,46 L98,54' stroke='rgba(0,0,0,0.48)' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M42,100 L16,86' stroke='rgba(0,0,0,0.45)' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M50,78 L76,90 L98,84' stroke='rgba(0,0,0,0.42)' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M58,0 L82,6' stroke='rgba(0,0,0,0.35)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M54,62 L32,70' stroke='rgba(0,0,0,0.38)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Dust tint on nearly-broken blocks */
.block[data-hp="1"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(180,160,130,0.07);
    pointer-events: none;
}

.block.broken {
    background: #0F172A;
    border: 2px solid #1E293B;
    cursor: default;
}

.block.has-letter {
    cursor: default;
}

/* Hit animation */
.block.hit {
    transform: scale(0.91);
    filter: brightness(1.5);
}

/* ---- LETTER TILES ---- */
.letter-tile {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.1rem, 4vw, 2rem);
    font-weight: 900;
    color: var(--ink);
    border-radius: calc(var(--r) - 2px);
    cursor: grab;
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s;
    letter-spacing: -0.02em;
}

.letter-tile:active { cursor: grabbing; }

.letter-tile.selected {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px var(--yellow), 0 4px 16px rgba(245,194,0,0.5);
}

.letter-tile.dragging {
    opacity: 0.25;
}

/* Tile colors by position (cycled) */
.letter-tile[data-color="0"] { background: var(--yellow); }
.letter-tile[data-color="1"] { background: var(--coral); color: #fff; }
.letter-tile[data-color="2"] { background: var(--teal); color: #fff; }
.letter-tile[data-color="3"] { background: var(--purple); color: #fff; }
.letter-tile[data-color="4"] { background: var(--blue); color: #fff; }
.letter-tile[data-color="5"] { background: var(--pink); color: #fff; }
.letter-tile[data-color="6"] { background: var(--orange); color: #fff; }
.letter-tile[data-color="7"] { background: var(--lime); color: #fff; }

/* Floating drag clone */
.drag-clone {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    border-radius: var(--r);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: var(--ink);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    transform: scale(1.15);
    transition: none;
}

/* ---- CHESTS ---- */
#chests-area {
    padding: 12px 16px 16px;
    background: var(--bg-panel);
    border-top: 2px solid var(--border);
    flex-shrink: 0;
}

#chests {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-end;
}

.chest {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s;
}
.chest:hover { transform: translateY(-2px); }

.chest-lid {
    height: 30px;
    background: var(--chest-top);
    border: 2.5px solid rgba(0,0,0,0.35);
    border-radius: 6px 6px 0 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    transform-origin: bottom center;
}

.chest-lid::after {
    content: '';
    width: 12px;
    height: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 3px 3px 0 0;
    position: absolute;
    bottom: 0;
}

.chest-body {
    height: 52px;
    background: var(--chest-color);
    border: 2.5px solid rgba(0,0,0,0.35);
    border-top: none;
    border-radius: 0 0 6px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.chest-body::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(0,0,0,0.2);
}

.chest-label {
    font-size: 1.6rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
    pointer-events: none;
    line-height: 1;
}

/* Chest states */
.chest.drag-over .chest-lid {
    transform: rotateX(-40deg);
}

.chest.drag-over {
    transform: translateY(-4px) scale(1.05);
}

.chest.matched {
    filter: brightness(0.55) saturate(0.4);
    pointer-events: none;
}

.chest.matched .chest-label {
    opacity: 0.4;
}

.chest.wrong {
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

/* Count badge on chest */
.chest-count {
    position: absolute;
    top: -8px;
    right: -6px;
    background: var(--yellow);
    color: var(--ink);
    font-size: 0.65rem;
    font-weight: 900;
    border-radius: 10px;
    padding: 1px 5px;
    min-width: 18px;
    text-align: center;
    border: 2px solid var(--bg-panel);
    transition: transform 0.2s;
}

/* ---- OVERLAYS ---- */
#intro-overlay,
#complete-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11,15,26,0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

#complete-overlay.hidden { display: none; }

#intro-box,
#complete-box {
    background: var(--bg-panel);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 32px 28px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

.intro-eyebrow {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--yellow);
    margin-bottom: 8px;
}

#intro-box h2,
#complete-box h2 {
    font-size: clamp(1.4rem, 5vw, 2rem);
    font-weight: 900;
    margin-bottom: 10px;
    line-height: 1.15;
}

.intro-hint {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 18px;
}

#intro-letters {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.intro-letter-badge {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.12s;
    color: var(--ink);
}
.intro-letter-badge:hover { transform: scale(1.1); }
.intro-letter-badge:active { transform: scale(0.95); }

.intro-instructions {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 24px;
    line-height: 1.5;
}

#intro-btn,
#next-btn {
    background: var(--yellow);
    color: var(--ink);
    border: none;
    border-radius: 8px;
    padding: 14px 36px;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.35);
    transition: transform 0.1s, box-shadow 0.1s;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.02em;
}
#intro-btn:hover,
#next-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
}
#intro-btn:active,
#next-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 rgba(0,0,0,0.35);
}

/* Complete overlay */
#complete-stars {
    font-size: 2rem;
    margin-bottom: 12px;
    letter-spacing: 4px;
}

#complete-sub {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin-bottom: 24px;
}

/* ---- CONFETTI ---- */
.confetti-bit {
    position: fixed;
    pointer-events: none;
    border-radius: 2px;
    z-index: 9000;
    animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(0.4); opacity: 0; }
}

.confetti-rain {
    animation: rain-fall linear forwards;
}

@keyframes rain-fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ---- ROCK PARTICLES ---- */
.rock-particle {
    position: fixed;
    pointer-events: none;
    z-index: 500;
    border-radius: 2px;
    animation: rock-fly cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes rock-fly {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    60%  { opacity: 0.7; }
    100% { transform: translate(var(--px), var(--py)) rotate(var(--pr)); opacity: 0; }
}

/* Sound wave ripple on letter click */
.sound-ripple {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255,255,255,0.4);
    animation: ripple 0.35s ease-out forwards;
    pointer-events: none;
}
@keyframes ripple {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(1.4); }
}

/* Chest pop animation when letter lands */
@keyframes chest-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15) translateY(-4px); }
    70%  { transform: scale(0.96); }
    100% { transform: scale(1); }
}
.chest.popping { animation: chest-pop 0.4s ease; }