/* Fort Surge — styles de l'interface HTML (la 3D et la toile 2D sont dessinées par le script). */
:root {
  --uz: 1;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ink: #15142a;
  --cream: #fff6ec;
  --gold: #ffd23f;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #15142a;
  color: #fff;
  font-family: LilitaOne, 'Arial Black', 'Segoe UI', sans-serif;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
#stage { position: fixed; inset: 0; }
#game, #hud { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
#hud { pointer-events: none; }
#ui { position: fixed; inset: 0; pointer-events: none; font-size: calc(var(--uz) * 18px); }
#ui .layer { position: absolute; inset: 0; pointer-events: none; }
#ui button, #ui .panel { pointer-events: auto; }
.no3d { position: absolute; inset: 0; display: grid; place-items: center; padding: 2em; text-align: center; font: 600 18px/1.4 system-ui, sans-serif; color: #fff6ec; }

svg.i { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }
i.coin { display: inline-block; width: 0.95em; height: 0.95em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0 0 18%, #ffd23f 20% 58%, #e8a400 60% 72%, #ffd23f 74%); box-shadow: 0 0.08em 0 #a86b00; vertical-align: -0.12em; margin-right: 0.25em; }

/* ---------- Boutons ---------- */
.icon-btn {
  font: inherit;
  width: 2.4em;
  height: 2.4em;
  border: 0;
  border-radius: 0.75em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(10, 14, 30, 0.6);
  box-shadow: inset 0 0 0 0.12em rgba(255, 255, 255, 0.22);
  cursor: pointer;
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg.i { width: 1.3em; height: 1.3em; }
.top-right { position: absolute; top: calc(0.6em + var(--safe-t)); right: 0.6em; display: flex; gap: 0.45em; }

.btn {
  font: inherit;
  font-size: 1.15em;
  color: #fff;
  border: 0;
  border-radius: 0.75em;
  padding: 0.55em 1.1em;
  margin: 0.3em 0;
  background: linear-gradient(#ffd54a, #ff9f1a);
  box-shadow: 0 0.22em 0 #b45f00, 0 0.45em 0.9em rgba(0, 0, 0, 0.35);
  text-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  white-space: nowrap;
}
.btn:active { transform: translateY(0.16em); box-shadow: 0 0.06em 0 #b45f00, 0 0.2em 0.5em rgba(0, 0, 0, 0.3); }
.btn.green { background: linear-gradient(#72f095, #23b04e); box-shadow: 0 0.22em 0 #137a33, 0 0.45em 0.9em rgba(0, 0, 0, 0.35); }
.btn.grey { background: linear-gradient(#7d8aa6, #4e5a75); box-shadow: 0 0.22em 0 #2c344a, 0 0.45em 0.9em rgba(0, 0, 0, 0.35); }
.btn.red { background: linear-gradient(#ff7b7b, #e23b3b); box-shadow: 0 0.22em 0 #8f1b1b, 0 0.45em 0.9em rgba(0, 0, 0, 0.35); }
/* boutons de pub : violets avec 🎬 (jamais verts), toujours à côté d'un bouton normal */
.btn.purple { background: linear-gradient(#b48cff, #7b4ce0); box-shadow: 0 0.22em 0 #4b2a9a, 0 0.45em 0.9em rgba(0, 0, 0, 0.35); }
.btn.big { font-size: 1.4em; }
.btn.small { font-size: 0.95em; }
.btn .clap { font-size: 0.9em; }

/* ---------- Écran titre ---------- */
.title-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(4.5em + var(--safe-t)) 1em calc(3em + var(--safe-b));
  background: linear-gradient(rgba(10, 10, 30, 0.55), rgba(10, 10, 30, 0) 45%, rgba(10, 10, 30, 0) 70%, rgba(10, 10, 30, 0.55));
  transition: opacity 0.35s;
}
.title-screen.out { opacity: 0; }
.title-screen .logo { display: flex; flex-direction: column; align-items: center; line-height: 0.9; transform: rotate(-4deg); animation: bob 3s ease-in-out infinite; }
.title-screen .logo span { font-size: 4.2em; color: #fff; text-shadow: 0 0.06em 0 #7a2a10, 0 0.12em 0 #4a1408, 0 0.2em 0.4em rgba(0, 0, 0, 0.5); -webkit-text-stroke: 0.04em #3a1206; }
.title-screen .logo .l2 { color: #ffb347; font-size: 4.8em; }
.title-screen .tagline { margin-top: 1em; max-width: 18em; text-align: center; font-size: 1em; color: #fff6ec; text-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.7); }
.title-screen .spacer { flex: 1; }
.title-screen .tap { font-size: 1.25em; color: #ffe27a; text-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.8); animation: pulse 1.4s ease-in-out infinite; text-align: center; }
@keyframes bob { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-0.2em); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.96); } }

/* ---------- Panneaux ---------- */
.screen-dim { position: absolute; inset: 0; background: rgba(6, 8, 22, 0.62); display: flex; align-items: center; justify-content: center; pointer-events: auto; animation: fade 0.2s; }
.panel {
  background: linear-gradient(#2f2b5c, #221f45);
  border-radius: 1.1em;
  box-shadow: inset 0 0 0 0.14em rgba(255, 255, 255, 0.12), 0 1em 2.4em rgba(0, 0, 0, 0.5);
  padding: 1em 1.1em 1.1em;
  width: min(92vw, 25em);
  max-height: 84vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  animation: pop 0.22s ease-out;
}
.panel h2 { margin: 0.1em 0 0.35em; font-size: 1.6em; font-weight: normal; color: #ffe27a; }
.panel p { margin: 0.3em 0 0.6em; font: 600 0.92em/1.35 system-ui, sans-serif; color: #d8d4f4; }
.panel .row { display: flex; gap: 0.5em; }
.panel .row .btn { flex: 1; font-size: 0.95em; padding: 0.55em 0.4em; }
.panel .btn { width: 100%; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(0.88); opacity: 0; } }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4em; margin: 0.2em 0 0.6em; }
.stats div { background: rgba(0, 0, 0, 0.22); border-radius: 0.7em; padding: 0.45em 0.3em; display: flex; flex-direction: column; }
.stats b { font-weight: normal; font-size: 1.3em; color: #fff; }
.stats span { font: 600 0.72em system-ui, sans-serif; color: #b8b4d8; }

/* Armurerie : en bas de l'écran, le jeu continue au-dessus */
.panel.armory { position: absolute; left: 50%; bottom: calc(0.6em + var(--safe-b)); transform: translateX(-50%); width: min(96vw, 30em); max-height: 62vh; padding: 0.8em; animation: rise 0.25s ease-out; }
@keyframes rise { from { transform: translate(-50%, 30%); opacity: 0; } }
.panel-head { display: flex; align-items: center; justify-content: space-between; text-align: left; gap: 0.5em; }
.panel-head h2 { margin: 0; font-size: 1.35em; }
.panel-head p { margin: 0.1em 0 0.4em; font-size: 0.8em; }
.icon-btn.close { font-size: 1em; flex: none; }
.up-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45em; }
.up-card {
  font: inherit;
  color: #fff;
  border: 0;
  border-radius: 0.8em;
  padding: 0.5em 0.5em 0.45em;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 0.12em rgba(255, 255, 255, 0.1);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.15em 0.45em;
  text-align: left;
  cursor: pointer;
}
.up-card.can { background: linear-gradient(rgba(255, 210, 63, 0.24), rgba(255, 160, 30, 0.14)); box-shadow: inset 0 0 0 0.12em rgba(255, 210, 63, 0.55); }
.up-card.off { opacity: 0.7; }
.up-card:active { transform: scale(0.97); }
.up-ic { grid-row: span 2; width: 2.1em; height: 2.1em; border-radius: 0.6em; background: rgba(0, 0, 0, 0.25); display: grid; place-items: center; color: #ffe27a; }
.up-txt { display: flex; flex-direction: column; min-width: 0; }
.up-txt b { font-weight: normal; font-size: 0.98em; }
.up-txt small { font: 600 0.66em/1.2 system-ui, sans-serif; color: #c8c4e8; }
.up-cost { font-size: 0.95em; color: #ffe27a; }
.up-card.off .up-cost { color: #ff9a8a; }
.panel .hint { margin: 0.5em 0 0; font-size: 0.75em; color: #bfffcf; }

.welcome .big-gold { font-size: 2.2em; color: #ffe27a; margin: 0.1em 0 0.4em; }
.credits p { font-size: 0.82em; }

/* ---------- Bouton d'achat (amélioration, conquête) ---------- */
.pad-offer { position: absolute; left: 50%; bottom: calc(6.4em + var(--safe-b)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.2em; animation: rise2 0.18s ease-out; }
.pad-offer .btn { font-size: 1.1em; gap: 0.6em; padding: 0.55em 0.8em 0.55em 1em; }
.pad-offer .pill { background: rgba(0, 0, 0, 0.25); border-radius: 0.6em; padding: 0.1em 0.45em; }
.pad-offer small { font: 700 0.75em system-ui, sans-serif; color: #ffd0c8; text-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.8); }
@keyframes rise2 { from { transform: translate(-50%, 40%); opacity: 0; } }

/* ---------- Offre (pub récompensée) ---------- */
.offer-card {
  position: absolute;
  left: 0.6em;
  top: calc(6.2em + var(--safe-t));
  font: inherit;
  color: #fff;
  border: 0;
  border-radius: 0.9em;
  padding: 0.45em 0.6em 0.55em;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.1em 0.45em;
  background: linear-gradient(#b48cff, #7b4ce0);
  box-shadow: 0 0.22em 0 #4b2a9a, 0 0.5em 1em rgba(0, 0, 0, 0.35);
  cursor: pointer;
  overflow: hidden;
  animation: wiggle 2.4s ease-in-out infinite;
}
.offer-card.fall { background: linear-gradient(#ff8a7a, #d8433a); box-shadow: 0 0.22em 0 #8f1b1b, 0 0.5em 1em rgba(0, 0, 0, 0.35); }
.offer-ic { grid-row: span 2; width: 2.2em; height: 2.2em; display: grid; place-items: center; color: #ffe27a; background: rgba(0, 0, 0, 0.2); border-radius: 0.6em; }
.offer-ic svg.i { width: 1.6em; height: 1.6em; }
.offer-txt { display: flex; flex-direction: column; text-align: left; }
.offer-txt b { font-weight: normal; font-size: 0.95em; }
.offer-txt small { font-size: 0.85em; color: #ffe27a; }
.offer-ad { grid-column: 2; font: 700 0.62em system-ui, sans-serif; opacity: 0.85; text-align: left; }
.offer-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 0.22em; background: rgba(255, 255, 255, 0.75); transform-origin: left; }
@keyframes wiggle { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-4deg); } 95% { transform: rotate(4deg); } }

/* ---------- Messages ---------- */
.toast { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); padding: 0.5em 1em; border-radius: 0.8em; background: rgba(10, 14, 30, 0.8); color: #fff; font-size: 1em; transition: opacity 0.4s; white-space: nowrap; }
.toast.out { opacity: 0; }
.dbg { position: fixed; left: 6px; bottom: 6px; z-index: 60; font: 12px monospace; color: #fff; background: rgba(0, 0, 0, 0.55); padding: 3px 6px; border-radius: 4px; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .title-screen .logo, .title-screen .tap, .offer-card { animation: none; }
}