*{box-sizing:border-box;margin:0;padding:0}
body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#0d1b2a;margin:0;padding:0;overflow:hidden}
#gw{width:100%;max-width:800px;border-radius:0;overflow:hidden;position:relative;touch-action:none;user-select:none;background:#1a6bb5;box-shadow:0 10px 40px rgba(0,0,0,0.5)}
@media (min-width: 800px) { #gw { border-radius:16px; margin: 4vh 0; } }
#gc{display:block;width:100%}
#hud{position:absolute;top:10px;left:0;width:calc(100% - 60px);padding:0 8px;display:flex;align-items:center;justify-content:flex-start;gap:6px;flex-wrap:wrap;pointer-events:none}
.hpill{background:rgba(255,255,255,0.25);border:3px solid rgba(255,255,255,0.6);border-radius:24px;padding:6px 14px;color:#fff;font-family:'Comic Sans MS',cursive,sans-serif;font-size:15px;font-weight:700;display:flex;align-items:center;gap:5px}
#pbtn{position:absolute;top:10px;right:10px;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,0.3);border:3px solid rgba(255,255,255,0.7);color:#fff;font-size:22px;cursor:pointer;font-weight:bold;z-index:10;display:none;transition:transform 0.1s;display:flex;align-items:center;justify-content:center}
#pbtn:active{transform:scale(0.9)}
#dpad{position:absolute;bottom:12px;left:12px;display:none;flex-direction:column;align-items:center;gap:6px}
#dpad button{width:54px;height:54px;background:rgba(255,255,255,0.35);border:3px solid rgba(255,255,255,0.7);border-radius:14px;color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;font-weight:700}
#dpad button:active{background:rgba(255,255,255,0.6);transform:scale(0.93)}
#drow2{display:flex;gap:6px}
#ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Comic Sans MS',cursive,sans-serif;color:#fff;z-index:15;background:#1e365c}
#ov h1{font-size:clamp(24px,5vw,42px);font-weight:700;color:#fff;text-shadow:3px 3px 0 #e05000;margin-bottom:6px;letter-spacing:2px}
#ov .sub{font-size:clamp(12px,2.5vw,16px);color:#ffe;margin-bottom:18px;text-align:center;line-height:1.9;max-width:300px;text-shadow:1px 1px 0 rgba(0,0,0,0.3)}
.bigsc{font-size:clamp(36px,7vw,58px);font-weight:700;color:#ffe000;text-shadow:3px 3px 0 #c08000;line-height:1}
.bsub{font-size:13px;color:#ffe;margin-bottom:20px}
#obtn{background:#ff8800;color:#fff;border:4px solid #fff;border-radius:32px;padding:14px 42px;font-size:18px;font-weight:700;cursor:pointer;font-family:'Comic Sans MS',cursive,sans-serif;box-shadow:0 6px 0 #c05000;margin-bottom:4px;transition:transform 0.1s}
#obtn:hover{background:#ffaa00;transform:translateY(-2px)}
#obtn:active{transform:translateY(2px);box-shadow:0 2px 0 #c05000}
#sb{margin-top:14px;width:230px;background:rgba(255,255,255,0.18);border-radius:14px;padding:10px 14px;border:2px solid rgba(255,255,255,0.4)}
#sb h3{font-size:12px;color:#ffe;letter-spacing:1px;text-align:center;margin-bottom:8px}
.sr{display:flex;justify-content:space-between;font-size:13px;padding:3px 6px;border-radius:6px}
.sr:nth-child(odd){background:rgba(255,255,255,0.1)}
.sr .rk{color:#ffe;width:22px}.sr .rv{color:#ffe000;font-weight:700}.sr .rd{color:#cce}

/* Pause Menu */
#pm{display:none;position:absolute;inset:0;background:rgba(0,0,0,0.6);z-index:20;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-family:'Comic Sans MS',cursive,sans-serif;}
#pm h2{font-size:36px;margin-bottom:24px;text-shadow:2px 2px #000;color:#ffe000;}
.pm-box{background:rgba(255,255,255,0.15);padding:24px 30px;border-radius:16px;border:2px solid rgba(255,255,255,0.4);text-align:center;width:280px;box-shadow:0 8px 32px rgba(0,0,0,0.3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.v-row{margin-bottom:15px;}
.v-row label{display:block;margin-bottom:8px;font-size:18px;font-weight:700;}
.v-row input[type=range]{width:100%;accent-color:#ffcc00;height:12px;border-radius:8px;}
.menu-btn{color:#fff;border:4px solid #fff;border-radius:32px;padding:12px 0;font-size:18px;font-weight:700;cursor:pointer;font-family:'Comic Sans MS',cursive,sans-serif;box-shadow:0 4px 0 rgba(0,0,0,0.2);width:100%;transition:transform 0.1s;display:block;}
.menu-btn:active{transform:translateY(4px);box-shadow:0 0 0 transparent;}

/* Ship Selector UI */
#ship-selector-wrapper {
  width: 90%;
  max-width: 500px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ss-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffe000;
  margin-bottom: 12px;
  text-shadow: 2px 2px 0 #884400;
  letter-spacing: 1px;
}
#ship-selector {
  display: flex;
  gap: 12px;
  width: 100%;
  overflow-x: auto;
  padding: 4px 8px 12px 8px;
  scroll-behavior: smooth;
}
#ship-selector::-webkit-scrollbar {
  height: 8px;
}
#ship-selector::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
#ship-selector::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
}
.ship-card {
  flex: 0 0 auto;
  width: 110px;
  height: 90px;
  background: rgba(0, 0, 0, 0.3);
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.ship-card:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.7);
}
.ship-card.active {
  background: rgba(255, 220, 0, 0.3);
  border-color: #ffe000;
  box-shadow: 0 0 15px rgba(255, 224, 0, 0.6);
  transform: scale(1.05);
  z-index: 2;
}
.ship-card canvas {
  width: 80px;
  height: 50px;
  margin-bottom: 4px;
}
.ship-card-name {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 0 #000;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}