:root {
    --night:#060c1a;--deep:#0e1630;--paper:#edf3ff;
    --gold:#ffd93d;--warm:#ff6b6b;--cool:#4d96ff;
    --soft:#a6b5d5;--line:rgba(0,255,255,.2);--glass:rgba(8,14,28,.88);
    --shadow:0 30px 100px rgba(0,0,0,.45);--rad:24px;
}

body, html {
    margin: 0;
    padding: 0;
    background: var(--night); /* Tło szablonu */
    color: var(--paper);
    font-family: "Trebuchet MS", Verdana, sans-serif;
}

/* TOP BAR (Skopiowany z szablonu Big Games) */
.topbar{width:min(1120px,calc(100% - 40px));margin:0 auto;min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-size:1.42rem;font-weight:900;color:transparent;background:linear-gradient(45deg,var(--warm),var(--gold));-webkit-background-clip:text;background-clip:text;letter-spacing:.04em;text-decoration:none}
.trail{display:flex;align-items:center;gap:10px;color:var(--soft);font-size:.92rem}
.trail a{color:var(--gold);text-decoration:none}

.game-shell {
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(1120px,calc(100% - 40px));
    margin: 0 auto;
    height: 70vh; /* Mniejsze płótno! */
    min-height: 500px;
    position: relative;
}

.game-frame {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
    border-radius: var(--rad);
    overflow: hidden;
    background: #87CEEB; /* Błękitne niebo dla gry */
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

#game-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#game-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
}

#ui-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; /* By móc klikać przez to w tło! */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 40px;
    z-index: 10;
}

#instructions {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 15px 30px;
    border-radius: 30px;
    text-align: center;
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

#instructions h2 {
    margin-top: 0;
    font-size: 20px;
    margin-bottom: 5px;
    font-family: 'Cinzel', serif;
}

#score-display {
    position: absolute;
    top: 20px;
    left: 20px;
    font-family: 'Cinzel', serif;
    font-size: 32px;
    font-weight: bold;
    color: #ffd93d; /* Złoty z szablonu */
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    transition: transform 0.1s;
    pointer-events: none;
}

#instructions p {
    color: #eee;
    margin: 0;
    font-size: 14px;
}

#btn-next-tree {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#btn-next-tree:hover {
    background: #45a049;
    transform: translateY(-2px);
}

#loading-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffbfa0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
    transition: opacity 0.5s ease;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    font-size: 24px;
    font-weight: 700;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

#btn-next-tree:active {
    transform: translateY(0);
}