/*
 * Parchment Playful – Layout
 *
 * Prinzip: #game-container füllt das gesamte Fenster.
 * Phaser skaliert und zentriert sein Canvas darin vollständig selbst (FIT + CENTER_BOTH).
 * So gibt es NUR EIN Koordinatensystem – kein Konflikt zwischen CSS und Phaser.
 * Die Karten-Optik (Schatten, Rundungen) liegt per CSS auf dem Canvas-Element.
 */

/* ===== Variablen ===== */
:root {
    --parchment-base: #fcf5e5;
    --shadow: 0 20px 50px rgba(74, 74, 74, 0.2);
}

/* ===== Reset ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ===== Body: Füllt das Fenster, zeigt Hintergrund-Dekor ===== */
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: var(--parchment-base);
    /* Dezentes Punktraster */
    background-image: radial-gradient(#efdfbb 1px, transparent 1px);
    background-size: 20px 20px;
}

/* ===== Spiel-Container: Füllt den gesamten Body ===== */
/* Phaser weiß damit genau: "Mein Spielfeld beginnt bei (0, 0) des Fensters."
   Phaser's Scale.FIT + CENTER_BOTH übernehmen das Zentrieren und Skalieren des Canvas. */
#game-container {
    width: 100%;
    height: 100%;
}

/* ===== Canvas: Karten-Optik per CSS ===== */
/* Das Canvas selbst bekommt den Schatten und die abgerundeten Ecken.
   Da border-radius das Canvas-Rendering visuell beschneidet, sieht
   es wie eine schwebende Karte aus – ohne Extra-Div-Wrapper. */
canvas {
    display: block;
    border-radius: 24px;
    box-shadow: var(--shadow);
}