:root{
  --text:#1b2633;
  --muted:#4a5a6a;

  --btn:#e8edf3;
  --btnBorder:rgba(80,110,140,0.35);
  --btnPrimary:#cfe1ff;
  --btnPrimaryBorder:#6a95d6;

  --readyGreen:#7ee08a;
  --readyGreenBorder:#2f9f49;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  overscroll-behavior: none;

  background: url("assets/background.jpg") center / cover no-repeat fixed;
  position: relative;
}

/* Lighten overlay across entire app */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.72);
  pointer-events: none;
}

/* Keep UI above the overlay */
#app{
  position: relative;
  z-index: 1;
  min-height:100%;
  padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

.screen{ display:none; min-height:100%; }
.screen.active{ display:block; }

/* Semi-transparent + subtle blur overlay container */
.topbar{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 12px 10px;
  border-radius:14px;
  border:1px solid rgba(80,110,140,0.22);

  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.title{
  letter-spacing:0.10em;
  font-weight:950;
  font-size:16px;
}

/* Bigger BATTLESHIPS */
.titleBig{
  text-align:center;
  font-size:32px;
  letter-spacing:0.16em;
}

/* Phase text removed */
.phase{ display:none; }

.content{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:10px;
}

.boardHeader{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.panelTitle{
  font-weight:950;
  font-size:16px;
}
.panelTitle.centered{ text-align:center; }

.hint{
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}
.hintCentered{ text-align:center; }

/* Board container */
.boardWrap{
  position:relative;
  border-radius:14px;
  border:1px solid rgba(80,110,140,0.22);

  background: rgba(255,255,255,0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  padding:10px;
  overflow:hidden;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;

  touch-action: none;
}

canvas{
  width:100%;
  height:auto;
  border-radius:12px;
  background: rgba(255,255,255,0.55);
  border:1px solid rgba(80,110,140,0.22);

  touch-action:none;

  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  display:block;
}

/* HUD kept but unused */
.hudOverlay{
  position:absolute;
  left:0; right:0;
  top:0; bottom:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hudText{ display:none; }

/* Dock */
.dock{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:6px 0 2px;

  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action: none;
}

.dockRow{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
}

.shipImgBtn{
  border-radius:12px;
  border:1px solid rgba(80,110,140,0.22);
  background: rgba(255,255,255,0.70);
  padding:6px;
  width: 152px;
  height: 46px;
  display:flex;
  align-items:center;
  justify-content:center;

  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-action: none;
}

.shipImgBtn img{
  max-width:100%;
  max-height:100%;
  display:block;
  object-fit:contain;
  pointer-events:none;
}

/* Footer / buttons */
.footer{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:8px;

  border-radius:14px;
  border:1px solid rgba(80,110,140,0.18);

  background: rgba(255,255,255,0.50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action: none;
}

.controls{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:8px;
}

.btn{
  border-radius:12px;
  border:1px solid var(--btnBorder);
  background: var(--btn);
  color:var(--text);
  padding:12px 10px;
  font-weight:950;
  font-size:14px;

  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  touch-action: none;
}

.btn:disabled{ opacity:0.55; }

.btn.primary{
  background: var(--btnPrimary);
  border-color: var(--btnPrimaryBorder);
}

/* READY is green */
.btn.ready{
  background: rgba(126,224,138,0.95);
  border-color: var(--readyGreenBorder);
}
.btn.ready.pulse{
  animation: readyPulse 1.15s ease-in-out infinite;
}
@keyframes readyPulse{
  0%   { transform: scale(1);   filter: brightness(1); }
  50%  { transform: scale(1.03); filter: brightness(1.08); }
  100% { transform: scale(1);   filter: brightness(1); }
}

/* SPLASH */
.splashWrap{
  min-height: calc(100vh - max(10px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
  display:flex;
  flex-direction:column;
  gap:14px;
  justify-content:center;
}

.splashImage{
  width:100%;
  aspect-ratio: 1 / 1;
  align-items:center
  border-radius:16px;
  border:1px solid rgba(80,110,140,0.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(0,0,0,0.05)),
    url("assets/splash.png") center / cover no-repeat;
}

/* stack + centred */
.splashBtnsStack{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}

.splashBtnsStack .btn{
  width: min(360px, 92vw);
}

/* RULES */
.rulesCard{
  margin-top:10px;
  border-radius:14px;
  border:1px solid rgba(80,110,140,0.22);
  padding:12px;

  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.rulesText{
  font-size:14px;
  color: rgba(27,38,51,0.95);
}
.rulesText ul{
  margin: 8px 0 10px 18px;
  color: var(--muted);
}
.rulesBackRow{
  padding-top:10px;
  display:flex;
  justify-content:center;
}

.btn.small{
  padding:12px 14px;
  font-size:14px;
  border-radius:12px;
  font-weight:950;
}

/* END — no overlay card */
.endWrap{
  min-height: calc(100vh - max(10px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
  display:flex;
  align-items:center;
  justify-content:center;
}

.endPlain{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  width: 100%;
}

.endImage{
  width: min(520px, 92vw);
  height: auto;
  display:block;
}

.endBtn{
  width: min(360px, 92vw);
}