/* 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: Robo Run
 * Fil: css/robo-run.css
 * Version registreret: 2026-10-04T18:54:41+02:00 (Europe/Copenhagen)
 * Filens oprettelsesdato: 2026-10-01T18:10:48+02:00
 * Observeret seneste filændring før registrering: 2026-10-01T18:25:04+02:00
 * Fildatoer kan ændres ved kopiering og dokumenterer ikke første udviklingsdato.
 * Registreringen daterer denne version; oprindelig udviklingsdato er ikke verificeret.
 */
/* Robo Run: game content only. The shared page, footer, mobile layout and
   fullscreen control live in style.css and game-mode.css. */
.robo-run-page {
  --game-accent: #24c9ec;
  --robo-gap: clamp(8px, 1.4vmin, 18px);
  --button-height: 48px;
  --button-gap: 12px;
  --board-gap: 6px;
  --board-padding: clamp(6px, 2vmin, 24px);
  --board-border: clamp(4px, 1.2vmin, 14px);
}
.robo-run-page *, .robo-run-page *::before, .robo-run-page *::after { box-sizing: border-box; }
.robo-run-page .game { min-height: 560px; height: min(700px, calc(var(--game-viewport-height, 100vh) * .68)); display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--robo-gap); }
.robo-run-page .game-layout { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(210px, 1fr) minmax(0, 5fr); gap: var(--robo-gap); }
.robo-run-page :where(.game) button, .robo-run-page select { font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.robo-run-page :where(.game) button { min-width: 0; min-height: 0; border: 2px solid #a85cff; border-radius: 16px; font-weight: 700; cursor: pointer; background: #b15df0; color: #fff; }
.robo-run-page :where(.game) button:focus-visible, .robo-run-page select:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.robo-run-page :where(.game) button:disabled { cursor: default; opacity: .65; }
.robo-run-page :where(.game) button:active:not(:disabled) { filter: brightness(1.12); }
.robo-run-page .side { min-width: 0; min-height: 0; }
.robo-run-page .side-content { display: grid; grid-template-rows: auto max-content max-content; align-content: start; gap: 12px; padding: 0 8px 8px; }
.robo-run-page .side header { display: flex; align-items: center; min-width: 0; }
.robo-run-page .side h2 { margin: 0; color: #e065db; font-size: clamp(1.4rem, 2.5vw, 2.25rem); white-space: nowrap; }
.robo-run-page .controls, .robo-run-page .actions { display: grid; grid-template-columns: 1fr; grid-auto-rows: var(--button-height); gap: var(--button-gap); }
.robo-run-page .controls button, .robo-run-page .actions button { width: 100%; height: var(--button-height); margin: 0; padding: 0 14px; display: grid; place-items: center; }
.robo-run-page .controls button { display:flex;align-items:center;justify-content:center;gap:10px;font-size:clamp(1rem,3vmin,1.6rem); }
.robo-run-page .command-label { flex:0 0 11ch;text-align:left;font-size:clamp(12px,1.6vmin,16px);line-height:1.15; }
.robo-run-page .controls .command-icon { flex:0 0 24px;width:24px;height:24px; }
.robo-run-page .actions button { font-size: clamp(.75rem, 1.8vmin, 1.1rem); line-height: 1.15; }
.robo-run-page .clear { background: #fff; color: #27385f; border-color: #dce6f5; }
.robo-run-page .sound { background: #122542; border-color: #7fa7c8; }
.robo-run-page .run { background: #2bc4d2; color: #071329; }
.robo-run-page .next { background: #4bea82; color: #071329; }
.robo-run-page .play-area { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--robo-gap); }
.robo-run-page .level-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; font-size: clamp(12px, 1.8vmin, 17px); color: #c5d7ef; }
.robo-run-page #level-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.robo-run-page .level-bar label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.robo-run-page select { background: #122542; color: #eef4ff; border: 1px solid #7fa7c8; border-radius: 8px; padding: 4px; font-size: 16px; }
.robo-run-page .play-workspace { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--robo-gap); }
.robo-run-page .board-space { min-width: 0; min-height: 0; display: grid; place-items: center; }
.robo-run-page .board { position: relative; flex: none; box-sizing: content-box; padding: var(--board-padding); border: var(--board-border) solid #1d3155; border-radius: 20px; background: #081022; --cell-size: 20px; width: calc(var(--cols, 5) * var(--cell-size) + (var(--cols, 5) - 1) * var(--board-gap)); height: calc(var(--rows, 1) * var(--cell-size) + (var(--rows, 1) - 1) * var(--board-gap)); }
.robo-run-page .board-grid { display: grid; grid-template-columns: repeat(var(--cols, 5), var(--cell-size)); grid-template-rows: repeat(var(--rows, 1), var(--cell-size)); gap: var(--board-gap); }
.robo-run-page .cell { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; border: 1px solid #1d2b48; border-radius: clamp(5px, 1vmin, 14px); color: #f05bdb; }
.robo-run-page .path-cell { border-color: #ed4dd9; box-shadow: 0 0 0 1px #ed4dd9, 0 0 12px #f05bdb88; }
.robo-run-page .goal-cell { border-color: #20d7f4; box-shadow: 0 0 0 1px #20d7f4, 0 0 12px #20d7f466; }
.robo-run-page .goal-mark { width: 42%; height: 42%; fill: #e065db; }
.robo-run-page .command-icon { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.robo-run-page .route-number { position: absolute; right: 7%; bottom: 5%; font-size: clamp(9px, calc(var(--cell-size) * .15), 18px); color: #aabbd8; line-height: 1; }
.robo-run-page .robot { position: absolute; left: var(--board-padding); top: var(--board-padding); width: var(--cell-size); height: var(--cell-size); display: grid; place-items: center; z-index: 2; pointer-events: none; transition: transform .24s ease; }
.robo-run-page .robot-icon { width: 72%; height: 72%; color: #8be8ee; filter: drop-shadow(0 0 3px #24c9ec88); }
.robo-run-page .robot-direction { transition:none;animation:none;transform-origin:center;position:absolute;right:7%;top:8%;width:clamp(12px,calc(var(--cell-size) * .18),24px);height:clamp(12px,calc(var(--cell-size) * .18),24px);background:#f05bdb;-webkit-mask:url('/assets/icons/arrow.svg') center / contain no-repeat;mask:url('/assets/icons/arrow.svg') center / contain no-repeat; }
.robo-run-page .victory .robot-icon { animation: robo-celebrate .6s ease-in-out 2; }
.robo-run-page .victory .goal-cell { box-shadow: 0 0 0 2px #4bea82, 0 0 18px #4bea8288; }
.robo-run-page .plan { min-width: 0; display: grid; grid-template-columns: repeat(var(--plan-columns, 4), minmax(0, 1fr)); grid-auto-rows: clamp(32px, calc(var(--game-viewport-height, 100vh) * .05), 48px); gap: clamp(5px, 1.2vmin, 11px); padding: clamp(5px, 1.8vmin, 18px); border: 3px dashed #229bb5; border-radius: 16px; }
.robo-run-page .slot { min-width: 0; position: relative; border: 2px dashed #5da9b8; border-radius: 10px; color: #96a9cb; display: grid; background: transparent; overflow: hidden; }
.robo-run-page .slot-command { display: grid; place-items: center; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; color: inherit; font-size: clamp(12px, 2.5vmin, 22px); font-weight: 400; }
.robo-run-page .slot.filled { border-style: solid; border-color: #b15df0; background: #b15df020; color: #fff; }
.robo-run-page .slot.filled .slot-command { padding-right: 20px; }
.robo-run-page .slot.selected { border-color: #fff; box-shadow: inset 0 0 0 1px #fff; background: #b15df044; }
.robo-run-page .slot.current { background: #2bc4d244; border-color: #2bc4d2; }
.robo-run-page .slot.failed { border-color: #ffc985; background: #80522944; }
.robo-run-page .slot-remove { position: absolute; right: 0; top: 0; height: 100%; min-width: 24px; max-width: 40%; padding: 0 4px; border: 0; border-radius: 0; background: transparent; color: #d7e3f5; font-size: 18px; font-weight: 400; }
.robo-run-page .slot-index { position: absolute; left: 4px; top: 3px; font-size: 9px; color: #c4d6ee; line-height: 1; pointer-events: none; }
.robo-run-page .plan-help { margin: 0; color: #a9bbd9; text-align: center; font-size: clamp(11px, 1.5vmin, 14px); line-height: 1.3; }
.robo-run-page .hint { margin: 0; min-height: 1.35em; text-align: center; color: #9af5b5; font-size: clamp(12px, 2vmin, 16px); line-height: 1.35; }
.robo-run-page .hint.error { color: #ffd99f; }
.robo-run-page .final-reward { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: clamp(16px, 4vmin, 48px); background: #081329dd; backdrop-filter: blur(5px); }
.robo-run-page .final-reward[hidden] { display: none; }
.robo-run-page .reward-card { width: min(560px, 100%); padding: clamp(22px, 5vmin, 48px); border: 3px solid #24c9ec; border-radius: 24px; background: #101d3a; box-shadow: 0 0 0 5px #1d3155, 0 0 34px #24c9ec88; text-align: center; color: #eef4ff; }
.robo-run-page .reward-kicker { margin: 0 0 8px; color: #9af5b5; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.robo-run-page .reward-card h2 { margin: 0; color: #e065db; font-size: clamp(28px, 5vmin, 52px); }.robo-run-page .reward-card p:not(.reward-kicker) { margin: 16px auto 22px; max-width: 34ch; line-height: 1.45; color: #c5d7ef; }
.robo-run-page .pixel-robo { --pixel-size: clamp(5px, 1.4vmin, 12px); display: grid; grid-template-columns: repeat(20, var(--pixel-size)); grid-template-rows: repeat(20, var(--pixel-size)); justify-content: center; gap: 1px; margin: 12px auto 0; }.robo-run-page .pixel { width: var(--pixel-size); height: var(--pixel-size); opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); animation: pixel-in .55s cubic-bezier(.2,.9,.3,1.2) forwards; animation-delay: var(--pixel-delay); }.robo-run-page .reward-again { min-height: 44px; padding: 8px 22px; border-color: #e065db; }
@keyframes robo-celebrate { 50% { transform: translateY(-5px) rotate(8deg); } } @keyframes pixel-in { to { opacity: 1; transform: translate(0, 0) scale(1); } }
@media (orientation: landscape) and (max-height: 600px) {
  .robo-run-page { --button-height: 42px; --button-gap: 6px; --robo-gap: 7px; --board-padding: 6px; --board-border: 5px; }
  
  .robo-run-page .game { min-height: 0; height: calc(var(--game-viewport-height, 100vh) - 150px); }.robo-run-page .game-layout { grid-template-columns: clamp(190px, 28vw, 240px) minmax(0, 1fr); gap: 10px; }.robo-run-page .side-content { padding: 0; gap: 6px; }.robo-run-page .side h2 { font-size: 1.1rem; }.robo-run-page .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }.robo-run-page .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }.robo-run-page .controls button, .robo-run-page .actions button { padding: 0; border-radius: 12px; }.robo-run-page .actions button { font-size: 11px; } .robo-run-page .command-label { font-size:10px; } .robo-run-page .controls button { gap:4px; } .robo-run-page .controls .command-icon { flex-basis:20px;width:20px;height:20px; }.robo-run-page .plan { grid-template-columns: repeat(var(--plan-columns, 10), minmax(0, 1fr)); grid-auto-rows: 30px; padding: 4px; gap: 4px; }.robo-run-page .plan-help { display: none; }
}
@media (prefers-reduced-motion: reduce) { .robo-run-page *, .robo-run-page *::before, .robo-run-page *::after { animation: none !important; transition: none !important; } }

/* Den aktive bane tilpasser sig skabelonens skærmhøjde. */
.robo-run-page.game-mode-active .game { height: 100%; min-height: 0; }
.robo-run-page .final-reward { z-index: 100; }
.robo-run-page .side h2 { margin: 0; }
/* Kommandoer og plan deler pladsen på lave mobilskærme. */
@media (orientation: landscape) and (max-height: 600px) {
 .robo-run-page .game.compact-layout { grid-template-rows: minmax(0, 1fr) auto auto; }
 .robo-run-page .compact-layout .controls { grid-auto-rows: var(--compact-button-height, 32px); }
 .robo-run-page .compact-layout .actions { grid-auto-rows: var(--compact-button-height, 32px); }
 .robo-run-page .compact-layout .controls button, .robo-run-page .compact-layout .actions button { height: 100%; }
}

.robo-run-page.game-mode-active .level-bar { padding-right: 52px; }

/* Touch-landskab: hele spillet passer under den faste topbar før fuldskærm. */
@media (orientation: landscape) and (any-pointer: coarse) {
    body.robo-run-page:not(.game-mode-active) { height: var(--game-viewport-height, 100svh); overflow: hidden; }
    .robo-run-page:not(.game-mode-active) .site-footer { display: none; }
    .robo-run-page:not(.game-mode-active) .ninabella-game-page {
        height: calc(var(--game-viewport-height, 100svh) - var(--site-header-height));
        min-height: 0;
        padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    }
    .robo-run-page:not(.game-mode-active) .ninabella-game-layout,
    .robo-run-page:not(.game-mode-active) .ninabella-game-panel,
    .robo-run-page:not(.game-mode-active) .ninabella-game-content,
    .robo-run-page:not(.game-mode-active) .game { height: 100%; min-height: 0; }
    .robo-run-page:not(.game-mode-active) .ninabella-game-panel { padding: clamp(6px, 1.25vmin, 14px); }
    .robo-run-page:not(.game-mode-active) .ninabella-game-kicker,
    .robo-run-page:not(.game-mode-active) .ninabella-game-title,
    .robo-run-page:not(.game-mode-active) .ninabella-game-intro { display: none; }
}

/* Lodrette kommandoer som online-referencen; tilpas deres højde på tablet. */
@media (orientation: landscape) and (min-height: 601px) {
    .robo-run-page { --button-height: clamp(36px, calc(var(--game-viewport-height, 100vh) * .052), 48px); --button-gap: clamp(6px, calc(var(--game-viewport-height, 100vh) * .01), 12px); }
}