/* ══════════════════════════════════════════════════════════════════════════
   BASE — Reset, Design Tokens, Body, Layout, Header, Canvas Frame
   Layer: Foundation
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Reset & Design Tokens ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:       #fdf6ec;
    --surface:  rgba(160,120,80,.08);
    --border:   rgba(160,120,80,.15);
    --gold:     #d4873f;
    --text:     #4a3728;
    --muted:    rgba(74,55,40,.45);
    --f-head:   'Nunito', sans-serif;
    --f-mono:   'Nunito', sans-serif;
}

/* ── Base ───────────────────────────────────────────── */
html, body { height: 100%; }

body {
    background-color: var(--bg);
    /* Ambient colour blobs – warm cozy room atmosphere */
    background-image:
        radial-gradient(ellipse 70% 50% at 10% 5%, rgba(220,175,120,.30) 0%, transparent 55%),
        radial-gradient(ellipse 50% 45% at 88% 92%, rgba(195,145,100,.25) 0%, transparent 55%),
        radial-gradient(ellipse 55% 45% at 50% 50%, rgba(240,200,150,.12) 0%, transparent 60%),
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(140,100,60,.10) 0%, transparent 70%);
    color: var(--text);
    font-family: var(--f-mono);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* Respect device notches / rounded corners (iOS, Android cutouts) */
    padding:
        max(1rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        max(1rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}

/* ── Game wrapper ───────────────────────────────────── */
.wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    max-width: 480px;
}

/* ── Header ─────────────────────────────────────────── */
.header { text-align: center; }
@media (max-height: 700px), (max-width: 500px) {
  .header { display: none; }
}

.title-logo {
    width: clamp(180px, 55vw, 320px);
    height: auto;
    display: block;
    margin: 0 auto;
    filter:
        drop-shadow(0 3px 8px rgba(0,0,0,.38))
        drop-shadow(0 12px 22px rgba(110,35,80,.30));
}

.tagline {
    font-size: .68rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .25rem;
}

/* ── Canvas container ───────────────────────────────── */
.canvas-wrap { width: 100%; display: flex; justify-content: center; }

/* Inner wrapper shrinks to canvas CSS width so the HUD aligns exactly */
.canvas-inner { position: relative; display: inline-block; }

#c {
    display: block;
    cursor: pointer;
    touch-action: none;
    border-radius: 20px;
    /* Strong floating-card — clear separation from page */
    border: 2px solid rgba(180,130,70,.25);
    box-shadow:
        0 0 80px rgba(180,130,70,.25),
        0 0 30px rgba(220,160,80,.15),
        0 24px 50px rgba(40,20,0,.55),
        0 6px 16px rgba(40,20,0,.25),
        inset 0 0 40px rgba(255,220,160,.06);
}

/* ── Boot loader (shown until JS modules initialize) ───────────── */
#bootLoader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    background: var(--bg);
    background-image:
        radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255,202,212,.45) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 50% 90%, rgba(220,175,120,.25) 0%, transparent 60%);
    transition: opacity .45s ease;
}
#bootLoader .boot-paw {
    font-size: 3.2rem;
    animation: bootPulse 1s ease-in-out infinite;
    filter: drop-shadow(0 6px 12px rgba(110,35,80,.25));
}
#bootLoader .boot-label {
    font-family: var(--f-head);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: .72rem;
    color: var(--muted);
}
#bootLoader.boot-hide {
    opacity: 0;
    pointer-events: none;
}
@keyframes bootPulse {
    0%, 100% { transform: scale(1)    rotate(-6deg); opacity: .8; }
    50%      { transform: scale(1.18) rotate(6deg);  opacity: 1;  }
}
@media (prefers-reduced-motion: reduce) {
    #bootLoader .boot-paw { animation: none; }
}