.game-page {
    background-color: #020b10;
    background-image: url('/static/img/background_pattern.png');
    background-repeat: repeat;
    background-size: auto;
}
.game-page .screen-grid {
    gap: 0;
    padding: 0;
    justify-content: center;
    align-content: center;
}

/*
 * The grid remains fluid. Phaser owns the logical 4:3 / 3:4 geometry and
 * scales the canvas uniformly inside these zones.
 */
.game-page .layout-h {
    grid-template-columns: repeat(15, minmax(0, 1fr));
    grid-template-rows: repeat(10, minmax(0, 1fr));
}

.game-page .layout-v {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-template-rows: repeat(15, minmax(0, 1fr));
}
.kire-game-canvas {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

/* Phaser supplies the centering margins; flex would offset the canvas again. */
#kire-game-h,
#kire-game-v {
    display: block;
}

.kire-game-canvas canvas {
    display: block;
}
.game-menu-button {
    z-index: 70; width: min(70%,48px); height: min(70%,48px); align-self:center; justify-self:center;
    padding:0; border:1px solid rgba(200,121,45,.65); border-radius:6px; background:rgba(5,19,30,.82);
    color:#e1b368; font-size:clamp(18px,2.4vmin,28px); cursor:pointer;
}
.game-global-menu { z-index:75; display:flex; flex-direction:column; gap:5px; padding:5px; border:1px solid rgba(200,121,45,.75); border-radius:7px; background:rgba(5,19,30,.97); }
.game-global-menu[hidden] { display:none; }
.game-global-menu-h { --row:2; --col:1; --rows:2; --cols:2; }
.game-global-menu-v { --row:2; --col:1; --rows:2; --cols:3; }
.game-global-menu a { display:flex; align-items:center; justify-content:center; min-height:30px; color:#e1b368; font-family:Georgia,'Times New Roman',serif; font-size:clamp(10px,1.3vmin,14px); font-weight:700; letter-spacing:.07em; text-decoration:none; }

.game-refresh-button {
    z-index: 60;
    width: min(68%, 44px);
    height: min(68%, 44px);
    align-self: center;
    justify-self: center;
    padding: 0;
    border: 1px solid rgba(200, 121, 45, .65);
    border-radius: 50%;
    background: rgba(5, 19, 30, .82);
    color: #e1b368;
    font-size: clamp(20px, 2.5vmin, 30px);
    line-height: 1;
    cursor: pointer;
}
.game-refresh-button:hover {
    border-color: rgba(225, 179, 104, .95);
    background: rgba(10, 31, 47, .95);
}
.game-refresh-button:active { transform: rotate(22deg); }