/* Projekt: Ninabella | https://nina3c.dk/
 * Brugsvilkår: LICENSE.md / /brugsvilkaar/ | Kilder: SOURCES.md
 * Projekt-credit angiver ikke verificeret ophav til alle bidrag.
 */
/*
 * Ninabella | https://nina3c.dk/
 * Spil: Diamantminen
 * Fil: css/diamantminen.css
 * Version registreret: 2026-10-04T18:54:41+02:00 (Europe/Copenhagen)
 * Filens oprettelsesdato: 2026-10-02T18:20:09+02:00
 * Observeret seneste filændring før registrering: 2026-10-03T21:23:16+02:00
 * Fildatoer kan ændres ved kopiering og dokumenterer ikke første udviklingsdato.
 * Registreringen daterer denne version; oprindelig udviklingsdato er ikke verificeret.
 */
.diamantminen-page .diamond-mine { min-width: 0; display: grid; gap: 12px; }
.diamantminen-page .game-audio-button { right: 10px; }
.diamantminen-page .mine-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-right: 54px; min-height: 40px; }
.diamantminen-page .mine-hud strong { color: #ffe180; letter-spacing: .06em; font-size: .8rem; }
.diamantminen-page #mineDiamonds { color: #71f6ff; font-weight: 900; white-space: nowrap; }
.diamantminen-page #mineGoal { color: #c7cee8; font-size: .85rem; }
.diamantminen-page .mine-stage { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "board board" "left right"; gap: 12px 16px; }
.diamantminen-page .mine-board-space { grid-area: board; min-width: 0; min-height: 0; display: grid; place-items: center; }
.diamantminen-page .mine-controls-left { grid-area: left; justify-self: end; }
.diamantminen-page .mine-controls-right { grid-area: right; justify-self: start; }
.diamantminen-page .keyboard-mine .mine-stage { grid-template-columns: 1fr; grid-template-areas: "board" "right"; }
.diamantminen-page .keyboard-mine .mine-controls-left { display: none; }
.diamantminen-page .keyboard-mine .mine-controls-right { justify-self: center; }
.diamantminen-page .mine-scene { position: relative; width: min(720px, 100%); aspect-ratio: 18 / 10; border-radius: 12px; overflow: hidden; border: 2px solid #7c6551; background: #171b26; }
.diamantminen-page #mineCanvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }
.diamantminen-page .mine-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(9 12 24 / 78%); }
.diamantminen-page .mine-overlay[hidden] { display: none; }
.diamantminen-page .mine-card { width: min(370px, 100%); padding: 20px; text-align: center; border: 2px solid #71f6ff; border-radius: 16px; background: #121e31; box-shadow: 0 0 28px rgb(113 246 255 / 15%); }
.diamantminen-page .mine-card h2 { margin: 0 0 8px; font-size: 1.5rem; }
.diamantminen-page .mine-card p { margin: 0 0 16px; color: #c7cee8; font-size: .9rem; line-height: 1.4; }
.diamantminen-page .mine-bottom { display: grid; gap: 10px; justify-items: center; }
.diamantminen-page #mineStatus { margin: 0; color: #c7cee8; font-size: .8rem; text-align: center; }
.diamantminen-page .mine-controls { display: flex; gap: 16px; }
.diamantminen-page .mine-controls button { width: 48px; height: 44px; padding: 0; border: 2px solid #7c91b2; border-radius: 10px; color: #fff; background: #16243b; font: 900 1.2rem var(--font-display); touch-action: none; user-select: none; cursor: pointer; }
.diamantminen-page .mine-controls button:active { background: #255467; }
.diamantminen-page .mine-controls button:focus-visible { outline: 3px solid #71f6ff; outline-offset: 3px; }
.diamantminen-page .keyboard-mine .mine-controls [data-mine-direction] { display: none; }
.diamantminen-page.game-mode-active .ninabella-game-layout { width: min(1320px, 100%); }
.diamantminen-page.game-mode-active .ninabella-game-panel { padding: 16px; }
.diamantminen-page.game-mode-active .diamond-mine { height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
.diamantminen-page.game-mode-active .mine-hud { padding-right: 104px; min-height: 44px; }
.diamantminen-page.game-mode-active .mine-scene { width: min(100%, var(--mine-board-width, 720px)); }
.diamantminen-page.game-mode-active .game-audio-button { top: 18px; right: 76px; }
.diamantminen-page.game-mode-active .game-close-button { top: 18px; right: 18px; }
@media (orientation: landscape) and (max-height: 599px) {
    .diamantminen-page.game-mode-active .ninabella-game-panel { padding: 12px 16px; }
    .diamantminen-page.game-mode-active .diamond-mine { gap: 8px; }
    .diamantminen-page.game-mode-active .mine-hud { min-height: 36px; gap: 4px 8px; flex-wrap: wrap; }
    .diamantminen-page.game-mode-active .mine-hud strong { font-size: .65rem; }
    .diamantminen-page.game-mode-active #mineDiamonds { font-size: .75rem; }
    .diamantminen-page.game-mode-active #mineGoal { font-size: .7rem; }
    .diamantminen-page.game-mode-active .game-audio-button { top: 14px; }
    .diamantminen-page.game-mode-active .game-close-button { top: 14px; }
    .diamantminen-page.game-mode-active .mine-bottom { gap: 4px; }
    .diamantminen-page.game-mode-active #mineStatus { font-size: .65rem; }
    .diamantminen-page .mine-card { padding: 12px; }
    .diamantminen-page .mine-card h2 { font-size: 1.1rem; }
    .diamantminen-page .mine-card p { font-size: .75rem; margin-bottom: 8px; }
}
@media (orientation: portrait) {
    .diamantminen-page.game-mode-active .ninabella-game-content { visibility: hidden; }
}

.diamantminen-page #mineLevel { font-size: .8rem; color: #ffe180; white-space: nowrap; }
.diamantminen-page #mineLives { color: #ff81be; font-weight: 900; white-space: nowrap; }
@media (orientation: landscape) and (max-height: 599px) {
    .diamantminen-page.game-mode-active #mineLevel,
    .diamantminen-page.game-mode-active #mineLives { font-size: .7rem; }
}
@media (orientation: landscape) and (max-width: 680px) {
    .diamantminen-page.game-mode-active #mineGoal { flex-basis: 100%; }
    .diamantminen-page .mine-card { padding: 6px; }
    .diamantminen-page .mine-card h2 { font-size: .85rem; margin-bottom: 4px; }
    .diamantminen-page .mine-card p { font-size: .65rem; line-height: 1.2; margin-bottom: 6px; }
    .diamantminen-page .mine-overlay { padding: 8px; }
}

.diamantminen-page .mine-pause { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 2px solid #7c91b2; border-radius: 10px; color: #fff; background: #16243b; font: 900 1.2rem var(--font-display); cursor: pointer; }
.diamantminen-page .mine-pause:disabled { opacity: .45; cursor: default; }
.diamantminen-page .mine-pause:focus-visible { outline: 3px solid #71f6ff; outline-offset: 3px; }

.diamantminen-page #mineEnergy { color: #8affaa; font-weight: 900; white-space: nowrap; font-size: .8rem; }
.diamantminen-page #mineEnergy.is-low { color: #ffb477; }
@media (orientation: landscape) and (max-height: 599px) {
    .diamantminen-page.game-mode-active #mineEnergy { font-size: .7rem; }
}

.diamantminen-page .mine-attack svg { width: 26px; height: 26px; fill: currentColor; vertical-align: middle; }
.diamantminen-page .mine-attack:disabled { opacity: .45; cursor: default; }

/* Touch controls flank the board; reserve a fixed gap on both sides. */
@media (orientation: landscape) {
    .diamantminen-page.game-mode-active .diamond-mine:not(.keyboard-mine) .mine-stage {
        grid-template-columns: 48px minmax(0, 1fr) 48px;
        grid-template-rows: minmax(0, 1fr);
        grid-template-areas: "left board right";
        column-gap: 20px;
        align-items: center;
    }
    .diamantminen-page.game-mode-active .diamond-mine:not(.keyboard-mine) .mine-board-space { align-self: stretch; }
    .diamantminen-page.game-mode-active .diamond-mine:not(.keyboard-mine) .mine-controls { flex-direction: column; gap: 16px; justify-self: center; }
}

.diamantminen-page #minePauseHome { display: contents; }
@media (orientation: landscape) {
    .diamantminen-page.game-mode-active .diamond-mine:not(.keyboard-mine) .mine-hud { min-height: 30px; }
}

@media (orientation: landscape) and (max-height: 599px) {
    .diamantminen-page.game-mode-active .diamond-mine:not(.keyboard-mine) {
        grid-template-columns: 80px minmax(0, 1fr) 48px;
        grid-template-rows: minmax(0, 1fr) auto;
        grid-template-areas: "hud board right" "left board right";
        gap: 12px 20px;
    }
    .diamantminen-page.game-mode-active .diamond-mine:not(.keyboard-mine) .mine-stage { display: contents; }
    .diamantminen-page.game-mode-active .diamond-mine:not(.keyboard-mine) .mine-hud {
        grid-area: hud; align-self: start; display: grid; gap: 4px; padding: 0; min-height: 0;
    }
    .diamantminen-page.game-mode-active .diamond-mine:not(.keyboard-mine) .mine-hud strong { display: none; }
    .diamantminen-page.game-mode-active .diamond-mine:not(.keyboard-mine) .mine-hud > span:not(#minePauseHome):not(#mineGoal) {
        display: block; padding: 3px 6px; border: 1px solid #506480; border-radius: 6px; background: #16243b; line-height: 14px;
    }
    .diamantminen-page.game-mode-active .diamond-mine:not(.keyboard-mine) #mineGoal { font-size: .65rem; line-height: 1.2; overflow-wrap: anywhere; }
    .diamantminen-page.game-mode-active .diamond-mine:not(.keyboard-mine) .mine-controls { align-self: end; }
    .diamantminen-page.game-mode-active:has(.diamond-mine:not(.keyboard-mine)) .game-audio-button,
    .diamantminen-page.game-mode-active:has(.diamond-mine:not(.keyboard-mine)) .game-mode-toggle {
        position: fixed; width: 48px; min-width: 48px; height: 44px; min-height: 44px;
        top: max(20px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); border-radius: 10px;
    }
    .diamantminen-page.game-mode-active:has(.diamond-mine:not(.keyboard-mine)) .game-audio-button {
        top: calc(max(20px, env(safe-area-inset-top)) + 56px); padding: 8px 10px; border-width: 2px; background: #16243b;
    }
    .diamantminen-page.game-mode-active .diamond-mine:not(.keyboard-mine) .mine-bottom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (orientation: landscape) and (max-height: 340px) {
    .diamantminen-page.game-mode-active .diamond-mine:not(.keyboard-mine) { row-gap: 8px; }
    .diamantminen-page.game-mode-active .diamond-mine:not(.keyboard-mine) .mine-controls { gap: 12px; }
    .diamantminen-page.game-mode-active .diamond-mine:not(.keyboard-mine) .mine-hud { gap: 3px; }
    .diamantminen-page.game-mode-active .diamond-mine:not(.keyboard-mine) #mineGoal { font-size: .6rem; line-height: 1.15; }
    .diamantminen-page.game-mode-active .diamond-mine:not(.keyboard-mine) .mine-hud > span:not(#minePauseHome):not(#mineGoal) { padding-block: 1px; line-height: 12px; }
}