@font-face { font-family: 'Lilita One'; src: url(fonts/lilita-one.woff2) format('woff2'); font-display: swap; }
/* même famille visuelle que Dédale : nuit violette, panneaux cerclés de noir, ombres pleines ; ici le bronze des automates */
:root {
  --bg: #1a1230; --panel: #2b2050; --panel2: #3a2c68; --edge: #0e0920; --ink: #f6f0e4; --ink2: #b3a8d3;
  --gold: #ffc93c; --bronze: #d08a3c; --bronze2: #8f5524; --red: #ff4458; --blue: #3f8cff; --green: #3ddc97; --stone: #463a70;
  --game: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --cell: min(calc((100vw - 40px) / 6), 60px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100dvh; color: var(--ink); overflow-x: hidden;
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .04) 1px, transparent 0) 0 0 / 14px 14px, radial-gradient(ellipse at 50% 0%, #2e2156, var(--bg) 60%), var(--bg);
  font: 15px/1.35 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
#app { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 8px) 14px calc(env(safe-area-inset-bottom) + 12px); }
h1, h2, h3 { margin: 0; font-family: var(--game); font-weight: 400; letter-spacing: .02em; }
.muted { color: var(--ink2); }

/* boutons */
.btn { display: block; width: 100%; border: 3px solid var(--edge); border-radius: 16px; padding: 12px 16px; margin: 0;
  font-family: var(--game); font-size: 21px; color: #fff; background: var(--panel2); box-shadow: 0 5px 0 var(--edge); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--edge); }
.btn:disabled { opacity: .45; }
.btn.primary { background: linear-gradient(#ff6b6b, #e8364f); }
.btn.bronze { background: linear-gradient(#e7a35a, #b76a2b); }
.btn.ghost { background: var(--panel); font-size: 18px; }
.btn small { display: block; font-size: 13px; opacity: .85; margin-top: 1px; }

/* titre */
.title { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; text-align: center; }
.logo-gear { font-size: 80px; line-height: 1; filter: drop-shadow(0 6px 0 var(--edge)); animation: spin 14s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.title h1 { font-size: 66px; color: var(--gold); -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; text-shadow: 0 6px 0 var(--edge); }
.title p { margin: 0; color: var(--ink2); font-size: 16px; }
.menu { display: flex; flex-direction: column; gap: 12px; }
.proto { font-size: 12px; color: var(--ink2); opacity: .7; }

/* barre du haut */
.top { display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 3px solid var(--edge); background: var(--panel); box-shadow: 0 3px 0 var(--edge); font-size: 20px; padding: 0; }
.arena-n { flex: 1; font-family: var(--game); font-size: 18px; color: var(--ink2); }
.arena-n b { color: var(--ink); font-size: 24px; }
.hp { display: flex; gap: 3px; }
.hp i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--edge); background: radial-gradient(circle at 35% 35%, #ffd38a, var(--bronze) 60%, var(--bronze2)); box-shadow: 0 2px 0 var(--edge); }
.hp i.lost { background: #2a2147; }
.hp i.shield { background: radial-gradient(circle at 35% 35%, #bfe3ff, var(--blue) 60%, #1d4fa8); }

/* consigne */
.say { min-height: 40px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ink2); font-size: 14px; padding: 0 6px; }
.say b { color: var(--ink); }

/* l'arène */
.board-wrap { display: flex; justify-content: center; }
.board { position: relative; display: grid; grid-template-columns: repeat(6, var(--cell)); grid-auto-rows: var(--cell); gap: 0;
  padding: 6px; border-radius: 18px; background: var(--edge); box-shadow: 0 0 0 3px var(--panel2), 0 6px 0 3px var(--edge); }
.tile { border-radius: 8px; margin: 2px; background: linear-gradient(var(--stone), #3a2f60); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .06), inset 0 -3px 0 rgba(0, 0, 0, .25); position: relative; }
.tile.ghost-path { background: linear-gradient(#5a4b92, #4a3d7e); }
.tile.ghost-hit::after { content: ''; position: absolute; inset: 6px; border-radius: 6px; border: 3px dashed rgba(255, 99, 99, .85); }
.tile.warn::before { content: '!'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--game); font-size: calc(var(--cell) * .5); color: var(--gold); opacity: .8; animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.tile.flash { animation: flash .35s ease-out; }
@keyframes flash { 0% { background: #ff8a3c; } 100% { background: linear-gradient(var(--stone), #3a2f60); } }
.unit { position: absolute; left: 6px; top: 6px; width: var(--cell); height: var(--cell); display: flex; align-items: center; justify-content: center;
  transform: translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell))); transition: transform .26s cubic-bezier(.3, 1.3, .6, 1); pointer-events: none; z-index: 2; }
.bot { z-index: 3; }
.bot .body { width: 74%; height: 74%; border-radius: 30%; border: 3px solid var(--edge); background: radial-gradient(circle at 35% 30%, #ffd38a, var(--bronze) 55%, var(--bronze2));
  box-shadow: 0 4px 0 var(--edge), inset 0 0 0 3px rgba(255, 230, 180, .35); display: flex; align-items: center; justify-content: center;
  transform: rotate(calc(var(--d) * 90deg)); transition: transform .26s ease; }
.bot .eye { width: 34%; height: 34%; border-radius: 50%; background: #7ff0ff; border: 3px solid var(--edge); box-shadow: 0 0 10px #7ff0ff; transform: translateY(-62%); }
.bot.ghost { opacity: .4; filter: grayscale(.3); z-index: 1; }
.bot.hurt .body { animation: hurt .4s ease; }
@keyframes hurt { 30% { background: #ff6b6b; } }
.foe { font-size: calc(var(--cell) * .58); filter: drop-shadow(0 3px 0 var(--edge)); }
.foe .hpbar { position: absolute; bottom: 3px; left: 18%; right: 18%; display: flex; gap: 2px; }
.foe .hpbar i { flex: 1; height: 5px; border-radius: 3px; background: var(--red); border: 1px solid var(--edge); }
.foe.hit { animation: hit .3s ease; }
@keyframes hit { 40% { transform: translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell))) scale(1.25); filter: brightness(2); } }
.foe.dead { opacity: 0; transform: translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell))) scale(.2); transition: opacity .3s, transform .3s; }
.fx { position: absolute; z-index: 5; pointer-events: none; font-family: var(--game); font-size: 20px; color: #fff; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill;
  left: 6px; top: 6px; width: var(--cell); text-align: center; transform: translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell))); animation: fx .7s ease-out forwards; }
@keyframes fx { to { margin-top: -26px; opacity: 0; } }

/* la ligne de commandes */
.line-label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--game); font-size: 15px; color: var(--ink2); margin-bottom: -4px; }
.line { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.slot { position: relative; aspect-ratio: .78; border-radius: 12px; border: 3px solid var(--edge); background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .05);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; }
.slot .n { position: absolute; top: -9px; left: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--panel2); border: 2px solid var(--edge); font-family: var(--game); font-size: 12px; display: flex; align-items: center; justify-content: center; }
.slot.target { cursor: pointer; border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(255, 201, 60, .4); }
.slot.chosen { transform: translateY(-4px); }
.slot.running { box-shadow: 0 0 0 3px #7ff0ff, 0 0 18px rgba(127, 240, 255, .6); }
.card { border-radius: 12px; border: 3px solid var(--edge); box-shadow: 0 4px 0 var(--edge); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 3px; color: var(--edge); text-align: center; }
.slot.filled { box-shadow: 0 4px 0 var(--edge); }
.c-move { background: linear-gradient(#9fd2ff, #5da6f0); }
.c-turn { background: linear-gradient(#c7b8ff, #9479f0); }
.c-hit { background: linear-gradient(#ffb08a, #f0743c); }
.c-fire { background: linear-gradient(#ffd56b, #f0a01c); }
.c-spin { background: linear-gradient(#ff9fb6, #e8507a); }
.c-shield { background: linear-gradient(#a6f0d2, #3dc89a); }
.c-glitch { background: repeating-linear-gradient(135deg, #5a5470 0 8px, #3f3a55 8px 16px); color: #ffb3b3; }
.ic { font-size: 24px; line-height: 1; }
.nm { font-family: var(--game); font-size: 12px; line-height: 1.05; }
.lv { display: flex; gap: 2px; }
.lv i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--edge); background: rgba(255, 255, 255, .4); }
.lv i.on { background: var(--edge); }

/* la main */
.hand { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hand .card { cursor: pointer; padding: 8px 4px; min-height: 92px; transition: transform .12s; }
.hand .card .ic { font-size: 30px; }
.hand .card .nm { font-size: 15px; }
.hand .card .ds { font-size: 11px; line-height: 1.15; font-weight: 600; opacity: .85; }
.hand .card.sel { transform: translateY(-8px); box-shadow: 0 0 0 3px var(--gold), 0 10px 0 var(--edge); }
.hand .card.dim { opacity: .35; }
.actions { display: flex; gap: 10px; }

/* récompenses, fin */
.panel { background: var(--panel); border: 3px solid var(--edge); box-shadow: 0 5px 0 var(--edge); border-radius: 18px; padding: 16px; }
.center { text-align: center; }
.big { font-size: 64px; line-height: 1; }
.rewards { display: flex; flex-direction: column; gap: 10px; }
.reward { display: flex; gap: 12px; align-items: center; text-align: left; background: linear-gradient(var(--panel2), var(--panel)); border: 3px solid var(--edge); box-shadow: 0 4px 0 var(--edge); border-radius: 16px; padding: 12px; color: var(--ink); }
.reward:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.reward .ic { font-size: 34px; width: 44px; text-align: center; }
.reward b { display: block; font-family: var(--game); font-weight: 400; font-size: 19px; color: var(--gold); }
.reward small { color: var(--ink2); font-size: 13px; }
.mods { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.mod { font-size: 12px; background: rgba(0, 0, 0, .25); border-radius: 99px; padding: 3px 10px; color: var(--ink2); }

/* feuille, toast, mise à jour, installation */
.sheet { position: fixed; inset: 0; z-index: 50; background: rgba(14, 9, 32, .7); display: flex; align-items: flex-end; justify-content: center; }
.sheet-card { width: 100%; max-width: 480px; max-height: 88dvh; overflow: auto; background: var(--panel); border: 3px solid var(--edge); border-bottom: 0; border-radius: 22px 22px 0 0;
  padding: 18px 16px calc(env(safe-area-inset-bottom) + 16px); display: flex; flex-direction: column; gap: 12px; }
.sheet-card h3 { font-size: 24px; color: var(--gold); }
.sheet-card p, .sheet-card li { margin: 0; line-height: 1.45; }
.sheet-card ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 24px); transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--edge);
  font-family: var(--game); padding: 10px 18px; border-radius: 14px; border: 3px solid var(--edge); box-shadow: 0 4px 0 var(--edge); max-width: 90vw; text-align: center; }
.update { position: fixed; top: calc(env(safe-area-inset-top) + 8px); left: 50%; transform: translateX(-50%); z-index: 70; display: flex; gap: 10px; align-items: center;
  background: var(--gold); color: var(--edge); border: 3px solid var(--edge); border-radius: 14px; padding: 8px 12px; font-weight: 700; box-shadow: 0 4px 0 var(--edge); }
.update button { border: 0; border-radius: 10px; background: var(--edge); color: var(--gold); padding: 6px 10px; font-weight: 700; }
.install { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px); z-index: 40; max-width: 460px; margin: 0 auto; display: flex; align-items: center; gap: 10px;
  background: var(--panel2); border: 3px solid var(--edge); border-radius: 16px; padding: 10px; box-shadow: 0 4px 0 var(--edge); }
.install img { width: 40px; height: 40px; border-radius: 10px; }
.install-text { flex: 1; display: flex; flex-direction: column; font-size: 13px; }
.install-btn { border: 3px solid var(--edge); border-radius: 12px; background: var(--gold); color: var(--edge); font-weight: 700; padding: 6px 10px; }
.install-close { border: 0; background: none; font-size: 18px; color: var(--ink2); }
body:not([data-screen="title"]) .install { display: none !important; }