* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            touch-action: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
        }
        
        body {
            /* Samme farve som spillets bund (#gameCanvas), ikke den lysere
               marineblå.

               Canvas kan ikke naa hele vejen ned paa iOS: for et position:fixed
               element er height:100% viewportens hoejde, og den er kortere end
               den fysiske skaerm naar viewport-fit=cover er sat. Restfeltet
               nederst - bag hjemmeindikatoren - viste derfor bodys baggrund som
               en tydelig bjaelke.

               At faa elementet til at daekke helt kraever 100lvh eller lignende,
               og den slags har braekket layoutet to gange i denne opgave. Her er
               farven nok: feltet ligger bag hjemmeindikatoren, hvor der alligevel
               intet skal tegnes, og med samme farve er der intet at se.

               Startskaermen har sin egen gradient og paavirkes ikke. */
            background: #050a12;
            overflow: hidden;
            font-family: Arial, sans-serif;
            /* Safe area for iPhone notch/dynamic island */
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom, 0px);
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }
        
        #gameCanvas {
            display: block;
            background: #050a12;
            /* EKSPLICIT størrelse, ikke ankring til fire kanter.
               Canvas er et replaced element: sætter man top/left/right/bottom,
               strækkes det IKKE — det beholder sin intrinsiske størrelse, altså
               bufferens. Målte man så boksen og satte bufferen til den, blev det
               et fikspunkt, der aldrig voksede ud over standardens 300x150.
               width/height i procent er derimod eksplicitte og strækker det.
               For position:fixed er 100% hele skærmen. */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        
        
        
        
        
        
        #gameOver, #youWin {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #ff4444;
            font-size: 48px;
            font-weight: bold;
            text-shadow: 4px 4px 8px rgba(0,0,0,0.8);
            display: none;
        }
        
        #youWin {
            color: #44ff44;
        }
        
        #restart {
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translateX(-50%);
            padding: 15px 30px;
            font-size: 20px;
            background: #4a90d9;
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            display: none;
        }
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        #craftMenu {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }
        
        #craftMenu .menuInner {
            background: rgba(40, 40, 0, 0.35);
            border: 2px solid #aaaa44;
            max-height: 70vh;
            overflow-y: auto;
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
        }
        
        #craftMenu .menuInner::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%23ffaa00' fill-opacity='0.06' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E");
        }
        
        #craftMenu h3 {
            color: #ffff66;
            text-align: center;
            margin-bottom: 10px;
        }
        
        #craftAlloys {
            text-align: center;
            color: #aaa;
            margin-bottom: 15px;
            font-size: 14px;
        }
        
        .craftOption {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            margin: 6px 0;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            cursor: pointer;
            color: #fff;
            font-size: 12px;
        }
        
        .craftOption:active {
            background: rgba(170, 170, 68, 0.3);
            border-color: rgba(170, 170, 68, 0.6);
        }
        
        .craftOption.disabled {
            opacity: 0.4;
            cursor: default;
        }
        
        .craftOption .craftName {
            flex: 1;
        }
        
        .craftOption .craftCost {
            color: #aaa;
            font-size: 11px;
        }
        
        .craftOption .craftStorage {
            margin-left: 10px;
            color: #88ff88;
            font-size: 11px;
        }

        #upgradeMenu {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }
        
        #upgradeMenu .menuInner {
            background: rgba(0, 25, 0, 0.35);
            border: 2px solid rgba(50, 200, 50, 0.6);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
        }
        
        #upgradeMenu .menuInner::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%2344ff44' fill-opacity='0.06' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E");
        }
        
        #upgradeMenu h3 {
            color: #44ff44;
            text-align: center;
            margin-bottom: 15px;
        }
        
        .upgradeOption {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            margin: 6px 0;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            cursor: pointer;
            color: #fff;
            font-size: 13px;
        }
        
        .upgradeOption:hover, .upgradeOption:active {
            background: rgba(50, 200, 50, 0.3);
            border-color: rgba(50, 200, 50, 0.6);
        }
        
        .upgradeOption.disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }
        
        .upgradeIcon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 11px;
        }
        
        .upgradeName {
            flex: 1;
        }
        
        .upgradeLevel {
            font-size: 11px;
            color: #88ff88;
            margin-left: 5px;
        }
        
        .upgradeCount {
            background: rgba(255, 255, 255, 0.2);
            padding: 3px 8px;
            border-radius: 8px;
            font-weight: bold;
            font-size: 12px;
        }
        
        #closeUpgrade {
            display: block;
            width: 100%;
            margin-top: 15px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            color: #fff;
            cursor: pointer;
        }
        
        /* Research Tree Overlay */
        #researchTree {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 5, 15, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 300;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        .researchTreePanel {
            width: 95%;
            height: 90%;
            max-width: 800px;
            max-height: 600px;
            background: radial-gradient(ellipse at center, rgba(0, 30, 60, 0.35) 0%, rgba(0, 10, 25, 0.4) 100%);
            border: 2px solid #0088ff;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 0 50px rgba(0, 136, 255, 0.3), inset 0 0 30px rgba(0, 100, 200, 0.1);
            overflow: hidden;
            position: relative;
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
        }
        .researchTreePanel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%230088ff' fill-opacity='0.06' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E");
            opacity: 0.25;
            pointer-events: none;
            z-index: 0;
        }
        .researchTreePanel > * {
            position: relative;
            z-index: 1;
        }
        .researchTreeHeader {
            padding: 15px 20px;
            background: linear-gradient(180deg, rgba(0, 80, 160, 0.4) 0%, transparent 100%);
            border-bottom: 1px solid rgba(0, 136, 255, 0.3);
            position: relative;
            text-align: center;
        }
        .treeTitle {
            color: #00ccff;
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 3px;
            text-shadow: 0 0 20px rgba(0, 200, 255, 0.5);
        }
        .treeSubtitle {
            color: #668899;
            font-size: 11px;
            margin-top: 4px;
            letter-spacing: 2px;
        }
        .closeTreeBtn {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 50, 50, 0.2);
            border: 1px solid #ff4444;
            color: #ff6666;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 16px;
        }
        .researchTreeContent {
            flex: 1;
            position: relative;
            overflow: hidden;
        }
        #treeCanvas {
            width: 100%;
            height: 100%;
        }
        .researchTreeFooter {
            padding: 12px 20px;
            background: linear-gradient(0deg, rgba(0, 40, 80, 0.5) 0%, transparent 100%);
            border-top: 1px solid rgba(0, 136, 255, 0.3);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .treeAlloysDisplay {
            color: #ffcc44;
            font-size: 14px;
            font-weight: bold;
        }
        .alloyIcon {
            color: #ffaa00;
            margin-right: 5px;
        }
        #currentResearchDisplay {
            color: #66aaff;
            font-size: 12px;
            padding: 8px 12px;
            background: rgba(0, 40, 80, 0.6);
            border-radius: 6px;
            margin-left: 15px;
            border: 1px solid rgba(0, 150, 255, 0.3);
        }
        #currentResearchDisplay .progressBar {
            height: 6px;
            background: #112233;
            border-radius: 3px;
            margin-top: 5px;
            overflow: hidden;
        }
        #currentResearchDisplay .progressFill {
            height: 100%;
            background: linear-gradient(90deg, #4466aa, #66aaff);
            transition: width 0.3s;
        }
        
        /* Production Overlay */
        #productionOverlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 5, 15, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 300;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        .productionPanel {
            width: 95%;
            height: 85%;
            max-width: 500px;
            max-height: 550px;
            background: radial-gradient(ellipse at center, rgba(40, 30, 10, 0.4) 0%, rgba(15, 10, 5, 0.45) 100%);
            border: 2px solid #ffaa44;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 0 50px rgba(255, 170, 68, 0.3), inset 0 0 30px rgba(150, 100, 50, 0.1);
            overflow: hidden;
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
        }
        .productionHeader {
            padding: 15px 20px;
            background: linear-gradient(180deg, rgba(120, 80, 20, 0.4) 0%, transparent 100%);
            border-bottom: 1px solid rgba(255, 170, 68, 0.3);
            position: relative;
            text-align: center;
        }
        .productionTitle {
            color: #ffaa44;
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 3px;
            text-shadow: 0 0 20px rgba(255, 170, 68, 0.5);
        }
        .productionSubtitle {
            color: #886644;
            font-size: 11px;
            margin-top: 4px;
            letter-spacing: 2px;
        }
        .closeProductionBtn {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 50, 50, 0.2);
            border: 1px solid #ff4444;
            color: #ff6666;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 16px;
        }
        .productionContent {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .factoryCard {
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 170, 68, 0.3);
            border-radius: 8px;
            padding: 8px 10px;
        }
        .factoryCardHeader {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }
        .factoryName {
            color: #ffcc44;
            font-weight: bold;
            font-size: 12px;
        }
        .factoryStatus {
            font-size: 9px;
            padding: 2px 6px;
            border-radius: 8px;
        }
        .factoryStatus.active {
            background: rgba(68, 255, 68, 0.2);
            color: #44ff44;
        }
        .factoryStatus.paused {
            background: rgba(255, 170, 68, 0.2);
            color: #ffaa44;
        }
        .factoryStatus.noPower {
            background: rgba(255, 68, 68, 0.2);
            color: #ff6644;
        }
        .factoryStats {
            display: flex;
            flex-direction: column;
            gap: 4px;
            font-size: 11px;
            margin-bottom: 8px;
        }
        .factoryStatsCompact {
            display: flex;
            justify-content: space-between;
            font-size: 10px;
            color: #aaa;
            margin-bottom: 6px;
            padding: 4px 0;
            border-bottom: 1px solid rgba(255, 170, 68, 0.15);
        }
        .factoryStat {
            display: flex;
            justify-content: space-between;
        }
        .factoryStat .label {
            color: #888;
        }
        .factoryStat .value {
            color: #fff;
        }
        .factoryControls {
            display: flex;
            gap: 6px;
        }
        .factoryBtn {
            flex: 1;
            padding: 6px;
            border-radius: 5px;
            border: 1px solid;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
        }
        .factoryBtn.toggle {
            background: rgba(68, 255, 68, 0.1);
            border-color: #44ff44;
            color: #44ff44;
        }
        .factoryBtn.toggle.paused {
            background: rgba(255, 170, 68, 0.1);
            border-color: #ffaa44;
            color: #ffaa44;
        }
        .factoryBtn.ammoSelect {
            background: rgba(100, 150, 255, 0.1);
            border-color: #6699ff;
            color: #6699ff;
        }
        .productionFooter {
            padding: 10px 15px;
            background: linear-gradient(0deg, rgba(80, 50, 20, 0.5) 0%, transparent 100%);
            border-top: 1px solid rgba(255, 170, 68, 0.3);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 11px;
        }
        .factoryCountDisplay, .totalProductionDisplay {
            font-size: 13px;
            font-weight: bold;
        }
        .noFactoriesMsg {
            text-align: center;
            color: #666;
            padding: 40px 20px;
            font-size: 14px;
        }
        
        /* Tutorial Overlay */
        #tutorialOverlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: auto;
            z-index: 500;
            display: none;
            background: rgba(0, 0, 0, 0.3);
        }
        /* Skip-knap. z-index over tutorialOverlay (500), saa den kan rammes
           ogsaa mens et skilt daekker skaermen. */
        #tutorialSkip {
            position: fixed;
            top: 10px;
            left: 10px;
            z-index: 600;
            padding: 7px 12px;
            font-family: 'Courier New', monospace;
            font-size: 10px;
            letter-spacing: 2px;
            color: rgba(160, 200, 220, 0.75);
            background: rgba(10, 25, 40, 0.85);
            border: 1px solid rgba(90, 150, 180, 0.6);
            border-radius: 6px;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
        }
        #tutorialSkip:active {
            background: rgba(20, 45, 70, 0.95);
            color: #cceeff;
        }
        #tutorialBox {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 30, 60, 0.35);
            border: 2px solid #00ccff;
            border-radius: 15px;
            padding: 25px 40px;
            text-align: center;
            pointer-events: auto;
            cursor: pointer;
            box-shadow: 0 0 40px rgba(0, 200, 255, 0.4);
            max-width: 80%;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        #tutorialMessage {
            color: #00ffff;
            font-size: 22px;
            font-weight: bold;
            letter-spacing: 2px;
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
        }
        #tutorialSubtext {
            color: #88aacc;
            font-size: 14px;
        }
        #tutorialArrow {
            position: absolute;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 20px solid #00ccff;
            display: none;
        }
        #tutorialHighlight {
            position: absolute;
            border: 3px solid #00ffff;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.6), inset 0 0 20px rgba(0, 255, 255, 0.2);
            animation: tutorialPulse 1s ease-in-out infinite;
            pointer-events: none;
            display: none;
        }
        @keyframes tutorialPulse {
            0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.6); }
            50% { box-shadow: 0 0 40px rgba(0, 255, 255, 0.9); }
        }
        
        /* Tutorial button glow */
        .tutorialGlow {
            animation: tutorialButtonGlow 0.8s ease-in-out infinite !important;
            position: relative;
            z-index: 100;
        }
        @keyframes tutorialButtonGlow {
            0%, 100% { 
                box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
                border-color: #00ffff !important;
            }
            50% { 
                box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff, 0 0 60px #00ffff;
                border-color: #88ffff !important;
            }
        }
        
        #scanningHUD {
            display: none;
        }
        
        #hexRadar {
            position: fixed;
            top: 80px;
            left: 50%;
            transform: translateX(-50%);
            width: 260px;
            height: 260px;
            pointer-events: none;
            z-index: 45;
            display: none;
            opacity: 0;
            transition: opacity 0.8s;
        }
        #hexRadar.active { display: block; opacity: 1; }
        #hexRadar.alert .hexRadarSweep { background: conic-gradient(from 0deg, transparent 0deg, rgba(255,68,68,0.15) 30deg, transparent 60deg); }
        #hexRadar.alert .hexRadarRing { border-color: rgba(255,68,68,0.12); }
        #hexRadar.alert .hexRadarCenter { background: radial-gradient(circle, rgba(255,68,68,0.08), transparent 70%); }
        
        .hexRadarContainer {
            position: relative;
            width: 100%;
            height: 100%;
        }
        
        .hexRadarRing { display: none; }
        
        .hexRadarSvg {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none;
        }
        
        .hexRadarCross {
            position: absolute;
            top: 50%; left: 50%;
            transform-origin: center;
        }
        .hexRadarCross::before, .hexRadarCross::after {
            content: '';
            position: absolute;
            background: rgba(0,170,255,0.28);
        }
        .hexRadarCross::before { width: 260px; height: 1px; top: 0; left: -130px; }
        .hexRadarCross::after { width: 1px; height: 260px; top: -130px; left: 0; }
        
        .hexRadarDiag1, .hexRadarDiag2 {
            position: absolute;
            top: 50%; left: 50%;
            width: 260px; height: 1px;
            background: rgba(0,170,255,0.22);
            transform-origin: center;
        }
        .hexRadarDiag1 { transform: translate(-50%, -50%) rotate(60deg); }
        .hexRadarDiag2 { transform: translate(-50%, -50%) rotate(-60deg); }
        
        .hexRadarSweep {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
            background: conic-gradient(from 0deg, transparent 0deg, rgba(0,170,255,0.12) 30deg, transparent 60deg);
            animation: radarSweep 4s linear infinite;
        }
        @keyframes radarSweep {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .hexRadarCenter {
            position: absolute;
            top: 50%; left: 50%;
            width: 8px; height: 8px;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle, rgba(0,255,170,0.3), transparent 70%);
            border-radius: 50%;
        }
        
        .hexRadarText {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            pointer-events: none;
        }
        .hexRadarTitle {
            color: #66ccff;
            font-size: 20px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 3px;
            text-shadow: 0 0 12px rgba(102,204,255,0.6);
            margin-bottom: 4px;
        }
        .hexRadarTitle.alert {
            color: #ff6644;
            text-shadow: 0 0 12px rgba(255,102,68,0.6);
        }
        .hexRadarSub {
            color: #558899;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        .hexRadarSub.alert {
            color: #ff4444;
            animation: blink 0.5s ease-in-out infinite;
        }
        .hexRadarStatus {
            position: absolute;
            bottom: 25%;
            left: 50%;
            transform: translateX(-50%);
            color: #44ff88;
            font-size: 9px;
            letter-spacing: 1px;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .hexRadarStatus.alert {
            color: #ff4444;
            animation: blink 0.5s ease-in-out infinite;
        }
        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 5px #44ccff; }
            50% { box-shadow: 0 0 20px #44ccff, 0 0 30px #44ccff; }
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }
        @keyframes mgAutoPulse {
            0%, 100% { box-shadow: 0 0 8px #44ff88, inset 0 0 6px rgba(68,255,136,0.3); }
            50% { box-shadow: 0 0 18px #44ff88, 0 0 26px rgba(68,255,136,0.6), inset 0 0 10px rgba(68,255,136,0.5); }
        }
        
        #powerupChooser {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }
        
        .menuInner {
            background: rgba(0, 20, 40, 0.35);
            border: 2px solid rgba(74, 144, 217, 0.6);
            border-radius: 15px;
            padding: 20px;
            min-width: 280px;
            max-width: 90%;
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
            position: relative;
            overflow: hidden;
        }
        
        .menuInner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%234a90d9' fill-opacity='0.08' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E");
            opacity: 0.25;
            pointer-events: none;
            z-index: 0;
        }
        
        .menuInner > * {
            position: relative;
            z-index: 1;
        }
        
        /* HUD popup menus with hexagon background */
        .hudPopupMenu {
            position: relative;
            overflow: hidden;
        }
        .hudPopupMenu::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%234a90d9' fill-opacity='0.08' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E");
            opacity: 0.25;
            pointer-events: none;
            z-index: 0;
        }
        .hudPopupMenu > * {
            position: relative;
            z-index: 1;
        }
        
        #storageMenu::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%2344ff44' fill-opacity='0.08' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E");
        }
        
        #alloyStorageMenu::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%23ffaa00' fill-opacity='0.08' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E");
        }
        
        #powerMenu::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%2300aaff' fill-opacity='0.08' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E");
        }
        
        #powerupChooser h3 {
            color: #fff;
            text-align: center;
            margin-bottom: 15px;
        }
        
        .powerupOption {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            margin: 8px 0;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            cursor: pointer;
            color: #fff;
        }
        
        .powerupOption:hover, .powerupOption:active {
            background: rgba(74, 144, 217, 0.3);
            border-color: rgba(74, 144, 217, 0.6);
        }
        
        .powerupOption.disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }
        
        .powerupIcon {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        .powerupName {
            flex: 1;
        }
        
        .powerupDesc {
            font-size: 11px;
            color: #888;
        }
        
        .powerupCount {
            background: rgba(255, 255, 255, 0.2);
            padding: 4px 10px;
            border-radius: 10px;
            font-weight: bold;
            margin-left: 10px;
        }
        
        #closeChooser {
            display: block;
            width: 100%;
            margin-top: 15px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            color: #fff;
            cursor: pointer;
        }
        
        #powerupNotice {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #ffff00;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }
        
        /* Wave notification HUD */
        #waveNotification {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 50;
            pointer-events: auto;
            cursor: pointer;
        }
        
        .waveHUD {
            background: linear-gradient(180deg, rgba(20, 60, 100, 0.95), rgba(10, 40, 80, 0.95));
            border: 2px solid #4a90d9;
            border-radius: 12px;
            padding: 25px 50px;
            text-align: center;
            box-shadow: 0 0 30px rgba(74, 144, 217, 0.5), inset 0 0 20px rgba(74, 144, 217, 0.2);
            animation: hudPulse 2s ease-in-out infinite;
        }
        
        @keyframes hudPulse {
            0%, 100% { box-shadow: 0 0 30px rgba(74, 144, 217, 0.5), inset 0 0 20px rgba(74, 144, 217, 0.2); }
            50% { box-shadow: 0 0 40px rgba(74, 144, 217, 0.7), inset 0 0 25px rgba(74, 144, 217, 0.3); }
        }
        
        #waveMessage {
            color: #66ccff;
            font-size: 28px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 3px;
            text-shadow: 0 0 15px rgba(102, 204, 255, 0.8);
            margin-bottom: 8px;
        }
        
        #waveMessage.alert {
            color: #ff6644;
            text-shadow: 0 0 15px rgba(255, 102, 68, 0.8);
        }
        
        #waveSubtext {
            color: #88aacc;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        
        /* Shortcuts HUD */
        #shortcutsHUD {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 250;
        }
        
        .shortcutsPanel {
            background: linear-gradient(180deg, rgba(20, 40, 80, 0.35), rgba(10, 25, 50, 0.35));
            border: 2px solid #4a90d9;
            border-radius: 12px;
            padding: 20px 30px;
            min-width: 280px;
            box-shadow: 0 0 30px rgba(74, 144, 217, 0.4);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
        }
        
        .shortcutsPanel h3 {
            color: #66ccff;
            font-size: 16px;
            text-align: center;
            margin-bottom: 15px;
            letter-spacing: 2px;
            border-bottom: 1px solid rgba(74, 144, 217, 0.4);
            padding-bottom: 10px;
        }
        
        .shortcutRow {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            color: #aaccee;
            font-size: 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .shortcutKey {
            background: rgba(74, 144, 217, 0.3);
            border: 1px solid #4a90d9;
            border-radius: 4px;
            padding: 3px 10px;
            font-family: monospace;
            font-weight: bold;
            color: #fff;
            min-width: 50px;
            text-align: center;
        }
        
        .shortcutHint {
            color: #667788;
            font-size: 11px;
            text-align: center;
            margin-top: 15px;
        }
        
        #weaponUnlock {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 200;
        }
        
        #weaponUnlock .menuInner {
            background: rgba(0, 10, 20, 0.35);
            border: 3px solid #ffa500;
            text-align: center;
            padding: 30px;
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
        }
        
        #weaponUnlock h2 {
            color: #ffa500;
            margin-bottom: 20px;
        }
        
        #weaponUnlock .weapon-name {
            color: #fff;
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        #weaponUnlock .weapon-desc {
            color: #aaa;
            margin-bottom: 10px;
        }
        
        /* ========== BUILD MODE STYLES ========== */
        #buildModeBtn {
            background: linear-gradient(145deg, #553311, #332200);
            border: 2px solid #885522;
            border-radius: 12px;
            position: relative;
        }
        
        #buildModeBtn::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 14px;
            border: 1px dashed #ff8844;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        #buildModeBtn:not(.disabled)::before {
            opacity: 0.5;
        }
        
        #buildModeBtn:not(.disabled) {
            background: linear-gradient(145deg, #774422, #442200);
            border-color: #ff8844;
            box-shadow: 0 0 10px rgba(255, 136, 68, 0.3);
        }
        
        #buildModeBtn.active {
            background: linear-gradient(145deg, #ff8844, #cc5500);
            border-color: #ffaa66;
            box-shadow: 0 0 20px rgba(255, 136, 68, 0.6);
            transform: scale(1.05);
        }
        
        #buildModeBtn.active::before {
            opacity: 0;
        }
        
        #buildModeBtn.disabled {
            background: rgba(50, 50, 50, 0.5);
            border-color: #444;
            opacity: 0.5;
        }
        
        #buildMenu {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.65);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }
        
        .buildMenuPanel {
            width: 95%;
            max-width: 500px;
            height: 85%;
            background: linear-gradient(180deg, rgba(10, 25, 40, 0.35) 0%, rgba(5, 15, 25, 0.35) 100%);
            border: 2px solid #0088ff;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 0 30px rgba(0, 136, 255, 0.3), inset 0 0 60px rgba(0, 136, 255, 0.1);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
        }
        .buildMenuPanel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%230088ff' fill-opacity='0.06' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E");
            opacity: 0.3;
            pointer-events: none;
            z-index: 0;
        }
        .buildMenuPanel > * {
            position: relative;
            z-index: 1;
        }
        
        .buildMenuHeader {
            padding: 15px 20px;
            border-bottom: 1px solid rgba(0, 136, 255, 0.3);
            position: relative;
            text-align: center;
        }
        
        .buildTitle {
            color: #0af;
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 4px;
        }
        
        .buildSubtitle {
            color: #068;
            font-size: 11px;
            letter-spacing: 2px;
            margin-top: 4px;
        }
        
        .closeBuildBtn {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 50, 50, 0.2);
            border: 2px solid #f44;
            color: #f66;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
        }
        
        .buildMenuContent {
            flex: 1;
            position: relative;
            overflow: hidden;
        }
        
        #buildCanvas {
            width: 100%;
            height: 100%;
            display: block;
        }
        
        .buildMenuFooter {
            padding: 12px 20px;
            border-top: 1px solid rgba(0, 136, 255, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .buildAlloysDisplay {
            color: #0f0;
            font-size: 14px;
            font-weight: bold;
        }
        
        .buildAlloysDisplay .alloyIcon {
            color: #0f0;
            margin-right: 5px;
        }
        
        .buildOption {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            margin: 8px 0;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 136, 68, 0.3);
            border-radius: 10px;
            cursor: pointer;
            color: #fff;
        }
        
        .buildOption:hover, .buildOption:active {
            background: rgba(255, 136, 68, 0.2);
            border-color: rgba(255, 136, 68, 0.6);
        }
        
        .buildOption.disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }
        
        .buildOption.locked {
            opacity: 0.5;
            border-color: #444;
        }
        
        .buildIcon {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        
        .buildName {
            flex: 1;
        }
        
        .buildName small {
            display: block;
            font-size: 10px;
            color: #888;
            margin-top: 2px;
        }
        
        .buildCost {
            color: #aaa;
            font-size: 12px;
        }
        
        /* Platform Info Panel */
        #platformInfo {
            position: absolute;
            top: 60px;
            right: 10px;
            width: 200px;
            background: rgba(0, 20, 40, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            border: 2px solid #4a90d9;
            border-radius: 10px;
            padding: 15px;
            display: none;
            z-index: 50;
        }
        
        #platformInfo h4 {
            color: #fff;
            margin-bottom: 10px;
            font-size: 14px;
        }
        
        .platformStat {
            font-size: 11px;
            color: #aaa;
            margin: 5px 0;
        }
        
        .platformStat span {
            color: #fff;
            float: right;
        }
        
        .platformBtn {
            width: 100%;
            padding: 8px;
            margin-top: 8px;
            background: rgba(74, 144, 217, 0.3);
            border: 1px solid #4a90d9;
            border-radius: 6px;
            color: #fff;
            font-size: 11px;
            cursor: pointer;
        }
        
        .platformBtn:hover {
            background: rgba(74, 144, 217, 0.5);
        }
        
        .platformBtn.upgrade {
            background: rgba(68, 170, 68, 0.3);
            border-color: #44aa44;
        }
        
        .platformBtn.repair {
            background: rgba(200, 100, 50, 0.3);
            border-color: #cc6633;
        }
        
        .platformBtn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        
        /* Production selector in platform info */
        .prodSelect {
            width: 100%;
            padding: 6px;
            margin-top: 8px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid #666;
            border-radius: 4px;
            color: #fff;
            font-size: 11px;
        }
        
        /* Build mode indicator */
        #buildModeIndicator {
            position: absolute;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            padding: 8px 20px;
            background: rgba(255, 136, 68, 0.9);
            border-radius: 20px;
            color: #fff;
            font-size: 12px;
            font-weight: bold;
            display: none;
            z-index: 60;
        }
        
        /* Start Screen */
        /* Startskaermens eget laerred: hexmoenster og lukkede blast doors bag
           menuen. Spillets laerred tegner intet foer gameStarted, saa doerene
           paa startskaermen maa tegnes her. */
        #menuCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        /* Indholdet skal ligge OVER laerredet. Uden det maler laerredet menuen
           over, fordi begge ligger i samme stakkontekst. */
        #startScreen > *:not(#menuCanvas) {
            position: relative;
            z-index: 1;
        }

        /* ---------- Menuens syv sekskanter ---------- */
        /* Skal staa EFTER reglen ovenfor: samme specificitet, saa
           raekkefoelgen afgoer det. */
        /* - syv sekskanter ---------- */
        /* Klyngen ligger frit oven paa laerredet, saa felterne kan saettes af
           hexgitterets egen formel. Selve positionerne kommer fra
           placerMenuFelter(); her staar kun udseendet. */
        #startScreen > #playControls {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            pointer-events: none;
        }

        .mCell {
            position: absolute;
            border: 0;
            padding: 2px;
            background: transparent;
            cursor: pointer;
            font-family: 'Orbitron', 'Courier New', monospace;
            pointer-events: auto;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }

        .mCell > span {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            padding: 0 8%;
            line-height: 1.12;
            letter-spacing: 1px;
            text-align: center;
            text-transform: uppercase;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }

        .mCell .mSub {
            font-style: normal;
            font-family: 'Courier New', monospace;
            letter-spacing: 0.5px;
            text-transform: none;
            opacity: 0.72;
            margin-top: 3px;
        }

        .mCell:disabled { cursor: default; }
        .mCell:disabled > span { opacity: 0.55; }

        /* Kanten er det ydre lag, fyldet det indre - samme tre lag som
           bygningerne paa braettet. */
        .c-name   { background: #00e1ff; }
        .c-name   > span { background: #0a2836; color: #93f1ff; }
        .c-green  { background: #3ce87a; }
        .c-green  > span { background: #0c2c1a; color: #a9f8c6; }
        .c-steel  { background: #39607a; }
        .c-steel  > span { background: #0c1a26; color: #95bad0; }
        .c-dim    { background: #223a48; }
        .c-dim    > span { background: #08111a; color: #4a6b7e; }
        .c-cyan   { background: #00e1ff; }
        .c-cyan   > span { background: #0a2836; color: #93f1ff; }

        /* Kanonens grundform: lysende orange kant, moerk fyld, prik i midten -
           praecis de tre lag, tegnIris() ser paa braettet. */
        .c-cannon { background: #f0a020; }
        .c-cannon > span { background: #34260e; padding: 0; }
        .mDot {
            display: block;
            background: #f0a020;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }

        /* Navnefeltet er selv en sekskant, ikke en bjaelke. */
        .c-name input {
            width: 100%;
            border: 0;
            outline: 0;
            background: transparent;
            color: inherit;
            font-family: inherit;
            text-align: center;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .c-name input::placeholder { color: #3f7f96; }

        #startScreen > #knownPlayers {
            position: absolute;
            left: 0;
            right: 0;
            z-index: 1;
            text-align: center;
        }

        #startScreen > #resumeCard { position: relative; z-index: 2; }

        /* ---------- Highscore som overlaeg ---------- */
        #startScreen > #highscoreOverlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(2, 6, 12, 0.72);
        }

        .overlayBoks {
            width: 100%;
            max-width: 420px;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            background: #0a1420;
            border: 1px solid #1f3f57;
            border-radius: 10px;
            padding: 14px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
        }

        .overlayTop {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .overlayTitel {
            font-family: 'Orbitron', 'Courier New', monospace;
            font-size: 14px;
            letter-spacing: 3px;
            color: #7df3ff;
        }

        .overlayLuk {
            width: 44px;
            height: 44px;
            border: 1px solid #1f3f57;
            border-radius: 6px;
            background: #101d2b;
            color: #9fc4d8;
            font-size: 22px;
            line-height: 1;
            cursor: pointer;
        }
        .overlayLuk:hover { border-color: #0a94ad; color: #00e1ff; }

        #highscorePanel { overflow-y: auto; }



        #startScreen {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, #050a12 0%, #0a1525 50%, #051015 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding-top: 60px;
            z-index: 1000;
            overflow-y: auto;
        }
        
        .startTitle {
            font-size: 52px;
            font-weight: bold;
            color: #00ffff;
            text-shadow: 0 0 30px #00ffff, 0 0 60px #0088aa;
            letter-spacing: 8px;
            margin-bottom: 5px;
        }
        
        .startSubtitle {
            font-size: 14px;
            color: #668899;
            letter-spacing: 4px;
            margin-bottom: 30px;
        }
        
        /* Cannon icon on start screen */
        .startIcon {
            width: 80px;
            height: 80px;
            margin-bottom: 30px;
        }
        
        /* Tabs */
        .tabContainer {
            display: flex;
            gap: 0;
            margin-bottom: 0;
        }
        
        .tab {
            padding: 12px 30px;
            font-size: 14px;
            color: #668899;
            background: rgba(0, 30, 50, 0.5);
            border: 2px solid #334455;
            border-bottom: none;
            border-radius: 10px 10px 0 0;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .tab.active {
            color: #00ffff;
            background: rgba(0, 50, 80, 0.8);
            border-color: #00aaaa;
        }
        
        .tab:hover:not(.active) {
            color: #aabbcc;
            background: rgba(0, 40, 60, 0.6);
        }
        
        /* Tab content */
        .tabContent {
            width: 320px;
            min-height: 300px;
            background: rgba(0, 50, 80, 0.3);
            border: 2px solid #00aaaa;
            border-radius: 0 0 15px 15px;
            padding: 20px;
        }
        
        .tabPanel {
            display: none;
        }
        
        .tabPanel.active {
            display: block;
        }
        
        /* Play panel */
        .playPanel input {
            width: 100%;
            padding: 15px;
            font-size: 18px;
            text-align: center;
            background: rgba(0, 30, 50, 0.8);
            border: 2px solid #00aaff;
            border-radius: 10px;
            color: #fff;
            outline: none;
            margin-bottom: 15px;
        }
        
        .playPanel input:focus {
            border-color: #00ffff;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
        }
        
        .playPanel input::placeholder {
            color: #556677;
        }
        
        .startBtn {
            width: 100%;
            padding: 18px;
            font-size: 20px;
            font-weight: bold;
            background: linear-gradient(180deg, #00aa44, #006622);
            border: 2px solid #00ff66;
            border-radius: 12px;
            color: #fff;
            cursor: pointer;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
            transition: all 0.2s;
        }
        
        .startBtn:hover:not(:disabled) {
            background: linear-gradient(180deg, #00cc55, #008833);
            transform: scale(1.02);
            box-shadow: 0 0 20px rgba(0, 255, 100, 0.4);
        }
        
        .startBtn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
            transform: none;
        }
        
        /* ===== Autoresume-kort =====
           Erstatter navnefeltet naar der findes et gemt spil for den
           spiller, der sidst spillede paa denne enhed. Continue er den
           store knap, fordi den er det, der sker af sig selv; Restart og
           Switch player staar under den - synlige, men ikke dominerende. */
        .resumeCard {
            text-align: center;
            padding: 4px 0 0;
        }
        
        .resumeWelcome {
            color: #66ccaa;
            font-size: 11px;
            letter-spacing: 3px;
            font-family: 'Courier New', monospace;
            margin-bottom: 6px;
        }
        
        .resumeName {
            color: #fff;
            font-size: 24px;
            font-weight: bold;
            word-break: break-word;
            text-shadow: 0 0 12px rgba(0, 255, 200, 0.4);
            margin-bottom: 8px;
        }
        
        .resumeStats {
            color: #00ffaa;
            font-size: 16px;
            margin-bottom: 3px;
        }
        
        .resumeDate {
            color: #667788;
            font-size: 11px;
            margin-bottom: 16px;
        }
        
        .resumeAlt {
            display: flex;
            gap: 8px;
            margin-top: 10px;
        }
        
        .resumeAltBtn {
            flex: 1;
            /* 44px er Apples mindstemaal for en tapflade. Spillet har allerede
               en klage over knapper, der er svaere at ramme - de her skal ikke
               vaere den naeste. */
            min-height: 44px;
            padding: 11px 4px;
            font-size: 12px;
            letter-spacing: 1px;
            background: rgba(0, 40, 60, 0.7);
            border: 1px solid #336677;
            border-radius: 8px;
            color: #99bbcc;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .resumeAltBtn:hover {
            border-color: #55aacc;
            color: #ddeeff;
            background: rgba(0, 60, 90, 0.8);
        }
        
        /* Tidligere spillere paa DENNE enhed. Bevidst ikke en liste over
           alle saves i skyen - de hoerer andre spillere til. */
        .knownPlayers {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: center;
            margin: -8px 0 12px;
        }
        
        .knownPlayers:empty {
            display: none;
        }
        
        .playerChip {
            min-height: 32px;
            padding: 6px 14px;
            font-size: 12px;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: rgba(0, 40, 60, 0.6);
            border: 1px solid #335566;
            border-radius: 20px;
            color: #88aabb;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .playerChip:hover {
            border-color: #00aaff;
            color: #fff;
        }
        
        .playerChip.hasSave {
            border-color: #2e7d5a;
            color: #7fd6b0;
        }
        
        /* Highscore panel */
        .highscoreList {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .highscoreItem {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            background: rgba(0, 40, 60, 0.5);
            border-radius: 8px;
            border: 1px solid #335566;
        }
        
        .highscoreItem.gold {
            background: linear-gradient(90deg, rgba(255, 200, 50, 0.2), rgba(255, 150, 0, 0.1));
            border-color: #ffaa00;
        }
        
        .highscoreItem.silver {
            background: linear-gradient(90deg, rgba(180, 180, 200, 0.2), rgba(140, 140, 160, 0.1));
            border-color: #aaaacc;
        }
        
        .highscoreItem.bronze {
            background: linear-gradient(90deg, rgba(200, 130, 80, 0.2), rgba(160, 100, 60, 0.1));
            border-color: #cc8855;
        }
        
        .hsRank {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 14px;
            border-radius: 50%;
            margin-right: 12px;
        }
        
        .highscoreItem.gold .hsRank {
            background: linear-gradient(180deg, #ffcc00, #ff9900);
            color: #553300;
        }
        
        .highscoreItem.silver .hsRank {
            background: linear-gradient(180deg, #ccccdd, #9999aa);
            color: #333344;
        }
        
        .highscoreItem.bronze .hsRank {
            background: linear-gradient(180deg, #cc8855, #995533);
            color: #331100;
        }
        
        .hsRank.normal {
            background: rgba(0, 80, 100, 0.5);
            color: #88aaaa;
        }
        
        .hsName {
            flex: 1;
            color: #ddeeff;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .hsScore {
            color: #00ffaa;
            font-weight: bold;
            font-size: 14px;
        }
        
        .hsLevel {
            color: #888;
            font-size: 11px;
            margin-left: 8px;
            min-width: 40px;
            text-align: right;
        }
        
        .noHighscores {
            text-align: center;
            color: #556677;
            padding: 40px 20px;
            font-style: italic;
        }
        
        .clearScoresBtn {
            margin-bottom: 10px;
            padding: 8px 16px;
            font-size: 11px;
            background: rgba(100, 40, 40, 0.5);
            border: 1px solid #884444;
            border-radius: 6px;
            color: #aa6666;
            cursor: pointer;
            width: 100%;
        }
        
        .clearScoresBtn:hover {
            background: rgba(150, 50, 50, 0.6);
            color: #ff8888;
        }