.game-window{width:540px;max-width:calc(100vw - 12px)}
.game-window .content{min-height:0;padding:8px;background:#c0c0c0;overflow:auto}
.game-shell{display:flex;flex-direction:column;gap:7px;align-items:center}
.game-status{width:100%;box-sizing:border-box;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 8px;padding:4px 7px;background:#000;color:#7cff7c;border:2px inset #fff;font:12px "Courier New",monospace}
.game-status span{white-space:nowrap}
.game-armor{color:#9ad7ff}
.game-config{width:100%;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:4px;background:#d4d0c8;border:2px inset #fff}
.game-config-field{display:flex;align-items:center;gap:6px;min-height:32px;padding:2px 4px;color:#000;font:11px Tahoma,Arial,sans-serif}
.game-config-field select{
 appearance:none;-webkit-appearance:none;
 min-height:32px;min-width:96px;padding:4px 26px 4px 8px;
 border:2px inset #fff;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23000'/%3E%3C/svg%3E") no-repeat right 8px center;
 color:#000;font:12px Tahoma,Arial,sans-serif;cursor:pointer
}
.game-config-field select:disabled{color:#666;background-color:#e8e4dc;cursor:not-allowed}
.game-config-field select:focus{outline:1px dotted #000;outline-offset:1px}
.game-canvas-wrap{position:relative;width:100%;background:#000;border:3px inset #fff;line-height:0;overflow:hidden}
.game-canvas{display:block;width:100%;height:auto;max-height:calc(100vh - 280px);aspect-ratio:3/2;object-fit:contain;background:#050505;outline:none;touch-action:none;image-rendering:pixelated}
#snake-canvas{aspect-ratio:1/1;max-width:420px;margin:auto}
.game-outcome{display:none;position:absolute;inset:0;align-items:center;justify-content:center;padding:12px;box-sizing:border-box;color:#fff;text-align:center;font:bold clamp(34px,10vw,72px) "Courier New",monospace;line-height:1;letter-spacing:.04em;text-shadow:4px 4px 0 #000,0 0 9px currentColor;pointer-events:none;z-index:2;image-rendering:pixelated}
.game-outcome.visible{display:flex;animation:game-outcome-flash .7s steps(2,end) infinite}
.game-outcome.win{color:#75ff72}
.game-outcome.lose{color:#ff5c5c}
@keyframes game-outcome-flash{50%{opacity:.28}}
.game-actions,.touch-controls{display:flex;justify-content:center;gap:6px;width:100%}
.game-actions button,.touch-controls button{min-height:32px;min-width:72px;padding:5px 10px;border:2px outset #fff;background:#d4d0c8;color:#000;font:12px Tahoma,Arial,sans-serif}
.game-actions button:active,.touch-controls button:active{border-style:inset}
.touch-controls{display:none}
.touch-controls button{min-width:48px;min-height:44px;font-size:17px;font-weight:bold;touch-action:manipulation;user-select:none}
.touch-dpad{display:none;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,44px);gap:4px;justify-content:center}
.touch-dpad .up{grid-column:2}
.touch-dpad .left{grid-column:1;grid-row:2}
.touch-dpad .down{grid-column:2;grid-row:2}
.touch-dpad .right{grid-column:3;grid-row:2}
.game-help{margin:0;color:#333;text-align:center;font-size:11px;line-height:1.3}
.game-window.game-active .titlebar{background:linear-gradient(90deg,#0a246a,#1084d0)}

.invaders-boss-hud{
 position:absolute;inset:0;pointer-events:none;z-index:3;
 display:flex;justify-content:space-between;align-items:flex-start;
 padding:4px 6px;box-sizing:border-box
}
.invaders-boss-hud.hidden{display:none}
.invaders-bar-corner{width:min(42%,150px);display:flex;flex-direction:column;gap:2px}
.invaders-bar-you{align-items:flex-end;text-align:right}
.invaders-bar-label{
 color:#fff;font:bold 10px "Courier New",monospace;letter-spacing:.04em;
 text-shadow:1px 1px 0 #000;line-height:1.1
}
.invaders-bar-you .invaders-bar-label{color:#9ad7ff}
.invaders-bar-track{
 position:relative;width:100%;height:10px;background:#1a1010;
 border:1px solid #fff;box-sizing:border-box;overflow:hidden
}
.invaders-bar-you .invaders-bar-track{background:#101820;border-color:#9ad7ff}
.invaders-bar-fill{position:absolute;left:0;top:0;bottom:0;width:100%;transition:none}
.invaders-bar-red{background:#e83939;z-index:1}
.invaders-bar-green{background:#3bd34a;z-index:2}
.invaders-bar-player{background:#4db8ff;z-index:1}

.invaders-notice{
 position:absolute;left:50%;top:18%;transform:translate(-50%,-50%);
 z-index:4;pointer-events:none;opacity:0;
 padding:4px 10px;background:#000;border:2px outset #fff;
 color:#ffe066;font:bold 12px "Courier New",monospace;
 text-shadow:1px 1px 0 #000;white-space:nowrap;max-width:92%;
 transition:opacity .15s linear
}
.invaders-notice.visible{opacity:1}

.invaders-reward{
 position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
 padding:10px;box-sizing:border-box;background:rgba(0,0,0,.72)
}
.invaders-reward.hidden{display:none}
.invaders-reward-panel{
 width:min(100%,320px);padding:12px 14px;background:#c0c0c0;
 border:2px outset #fff;box-shadow:2px 2px 0 #000;color:#000;
 font:12px Tahoma,Arial,sans-serif
}
.invaders-reward-title{
 margin:0 0 8px;padding:4px 6px;background:linear-gradient(90deg,#0a246a,#1084d0);
 color:#fff;font:bold 13px Tahoma,Arial,sans-serif
}
.invaders-reward-copy{margin:0 0 10px;line-height:1.35}
.invaders-reward-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:stretch}
.invaders-reward-btn{
 flex:1 1 120px;min-height:44px;min-width:120px;padding:8px 10px;
 border:2px outset #fff;background:#d4d0c8;color:#000;
 font:bold 13px Tahoma,Arial,sans-serif;cursor:pointer;touch-action:manipulation
}
.invaders-reward-btn:focus{outline:1px dotted #000;outline-offset:1px}
.invaders-reward-btn:active{border-style:inset}
.invaders-reward-hint{margin:10px 0 0;color:#333;font-size:11px;line-height:1.3}

@media (max-width:760px), (hover:none) and (pointer:coarse){
 .game-window .content{padding:5px}
 .game-shell{gap:5px}
 .game-canvas{max-height:calc(100vh - 320px)}
 #snake-canvas{max-height:calc(100vh - 370px)}
 .game-config{gap:4px;padding:3px}
 .game-config-field{min-height:44px;font-size:12px}
 .game-config-field select{min-height:44px;min-width:110px;font-size:14px;padding-right:28px}
 .touch-controls{display:flex}
 .touch-dpad{display:grid}
 .game-actions button{min-height:44px;min-width:76px}
 .game-help{display:none}
 .invaders-bar-corner{width:min(46%,140px)}
 .invaders-bar-label{font-size:9px}
 .invaders-bar-track{height:9px}
 .invaders-reward-panel{padding:10px}
 .invaders-notice{font-size:11px;top:14%}
}

@media (prefers-reduced-motion:reduce){
 .game-outcome.visible{animation:none}
 .invaders-notice{transition:none}
}