/* Base Nautique Tycoon - habillage jeu mobile : scène plein écran, panneaux indigo, boutons à relief */
:root {
  --night: #1B2150;
  --panel: #2B3380;
  --panel2: #353EA0;
  --card: #3A43A6;
  --tile: #5159BC;
  --tile-hi: #EEF0FF;
  --lilac: #8C92F4;
  --lilac-d: #5C62D0;
  --gold: #FFC83D;
  --gold-d: #C98A12;
  --mint: #2BD17E;
  --mint-d: #12894D;
  --coral: #FF5D6C;
  --coral-d: #B9303F;
  --orange: #FF8A1F;
  --orange-d: #C25E00;
  --ink: #F2F4FF;
  --mut: #B3B9F0;
  --line: rgba(255, 255, 255, .14);
  --ok: #4BE08F; --warn: #FFC83D; --bad: #FF7B88;
  --acc: var(--orange); --acc-d: var(--orange-d);
  --blue: var(--lilac); --blue-d: var(--lilac-d);
  --green: var(--mint); --green-d: var(--mint-d);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--night); color: var(--ink); }
body { font: 15px/1.35 ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; user-select: none; -webkit-user-select: none; }
.mut { color: var(--mut); }
button { font: inherit; color: inherit; }
h2, h3, p { margin: 0; }
b { font-weight: 900; }
svg { display: block; }

#app { position: fixed; inset: 0; overflow: hidden; }

/* ---------- scène plein écran ---------- */
#stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; background: #8ED8F5; }
#stage.drag { cursor: grabbing; }
#pan { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; transition: transform .5s cubic-bezier(.3, .7, .2, 1); }
#pan.free { transition: none; }
.scene { display: block; }
.scene.grow { animation: grow .7s ease; }
@keyframes grow { 0% { filter: none; } 30% { filter: brightness(1.14); } 100% { filter: none; } }
.zone { cursor: pointer; }
.upmark { cursor: pointer; animation: upb 1.1s ease-in-out infinite; }
@keyframes upb { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: no-preference) {
  .bob { animation: bob 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
  .bob.lean { animation-name: lean; animation-duration: 1.6s; }
  .cloud { animation: drift 160s linear infinite; }
  .wave { animation: wave 6s ease-in-out infinite; }
  .glint { animation: glint 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .flag { animation: flag 1.5s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; }
  .walk { animation: walk 5.5s ease-in-out infinite; }
  .idle { animation: idle 2.4s ease-in-out infinite; }
  .rain { animation: rain .7s linear infinite; }
  .bolt { animation: bolt 5s linear infinite; opacity: 0; }
  .bird { animation: bird 26s linear infinite; }
  .sun { animation: sun 8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-1.6px) rotate(1.2deg); } }
  @keyframes lean { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg) translateY(-1px); } }
  @keyframes drift { from { transform: translateX(0); } to { transform: translateX(480px); } }
  @keyframes wave { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(7px); opacity: .5; } }
  @keyframes glint { 0%, 100% { opacity: .2; transform: scaleX(.7); } 50% { opacity: 1; transform: scaleX(1.1); } }
  @keyframes flag { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(7deg) scaleX(.84); } }
  @keyframes walk { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }
  @keyframes idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2px); } }
  @keyframes rain { from { transform: translate(0, -6px); opacity: .9; } to { transform: translate(-10px, 70px); opacity: 0; } }
  @keyframes bolt { 0%, 90%, 100% { opacity: 0; } 92%, 96% { opacity: 1; } }
  @keyframes bird { from { transform: translate(-30px, 34px); } to { transform: translate(400px, 14px); } }
  @keyframes sun { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
}


/* ---------- bandeau du haut ---------- */
#hud { position: absolute; left: 0; right: 0; top: 0; z-index: 4; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
.hud-l { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 3px 12px; border-radius: 99px; background: rgba(21, 26, 66, .82); color: #fff; font-size: 13px; font-weight: 900; box-shadow: 0 2px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12); backdrop-filter: blur(4px); max-width: 100%; }
.pill svg { width: 17px; height: 17px; flex: none; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pill small { color: var(--mut); font-size: 12px; font-weight: 800; }
.pill.cash { padding: 3px 14px 3px 3px; min-height: 38px; }
.coin { flex: none; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF0A0, #FFC83D 55%, #E0A100); box-shadow: inset 0 -2px 0 #B87900, 0 1px 0 rgba(0, 0, 0, .35); display: grid; place-items: center; color: #8A5A00; font-weight: 900; font-size: 15px; }
#t-cash { font-size: 21px; line-height: 1; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
#t-cash.neg { color: #FF9AA3; }
.pill.net { color: var(--mut); }
.pill.net.up { color: #5DF0A0; }
.pill.net.down { color: #FF8F9B; }
.pill.base { max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 24px; font-size: 12px; }
.stars { appearance: none; border: 0; padding: 6px 10px 7px; border-radius: 16px; background: rgba(21, 26, 66, .82); box-shadow: 0 2px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12); display: grid; gap: 5px; cursor: pointer; }
.star-row { display: flex; gap: 3px; }
.star-row svg { width: 20px; height: 20px; }
.star-bar { display: block; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.star-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 1%); background: linear-gradient(180deg, #FFE27A, #FFB000); border-radius: 4px; transition: width .6s; }

/* ---------- boutons latéraux ---------- */
#side { position: absolute; right: 10px; top: calc(86px + env(safe-area-inset-top, 0px)); z-index: 4; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.rbtn { position: relative; width: 50px; height: 50px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); background: radial-gradient(circle at 35% 25%, #A9AEFF, var(--lilac-d)); box-shadow: 0 4px 0 #3A3F9A, 0 6px 10px rgba(0, 0, 0, .3); display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .08s; }
.rbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #3A3F9A; }
.rbtn svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25)); }
.rbtn.gold { background: radial-gradient(circle at 35% 25%, #FFE98A, #E8A21A); box-shadow: 0 4px 0 var(--gold-d), 0 6px 10px rgba(0, 0, 0, .3); }
.rbtn.alert { background: radial-gradient(circle at 35% 25%, #FF9AA4, #E0364A); box-shadow: 0 4px 0 var(--coral-d), 0 6px 10px rgba(0, 0, 0, .3); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.rbtn .bdg { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--coral); border: 2px solid #fff; color: #fff; font-size: 11px; font-weight: 900; display: grid; place-items: center; }
.chip { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 14px; background: linear-gradient(180deg, var(--lilac), var(--lilac-d)); color: #fff; box-shadow: 0 3px 0 #3A3F9A; font-size: 11.5px; line-height: 1.15; border: 0; text-align: left; cursor: pointer; max-width: 180px; }
.chip b { display: block; font-size: 12.5px; }
.chip i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; font-style: normal; font-size: 17px; }
.chip.bad { background: linear-gradient(180deg, #FF8A96, #D8384C); box-shadow: 0 3px 0 var(--coral-d); }
.chip.good { background: linear-gradient(180deg, #5DE79F, #1EA862); box-shadow: 0 3px 0 var(--mint-d); }

#vipzone { position: absolute; left: 10px; top: 36%; z-index: 4; display: flex; flex-direction: column; gap: 10px; }
.vip { width: 86px; padding: 8px 6px; border-radius: 12px; border: 2px solid #FFE9A0; background: linear-gradient(135deg, #F5C93C, #B67C10); color: #fff; font-weight: 900; text-align: center; box-shadow: 0 4px 0 #7A5008; cursor: pointer; animation: vipb 1s ease-in-out infinite alternate; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.vip b { display: block; font-size: 20px; letter-spacing: .06em; }
.vip span { font-size: 11px; }
@keyframes vipb { from { transform: rotate(-3deg) scale(1); } to { transform: rotate(3deg) scale(1.06); } }

/* ---------- indice du bas et menu ---------- */
#hint { position: absolute; left: 10px; right: 10px; bottom: calc(112px + env(safe-area-inset-bottom, 0px)); z-index: 4; display: flex; justify-content: center; pointer-events: none; }
.hintcard { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 16px; background: linear-gradient(180deg, #6A70E6, #4A50BE); color: #fff; border: 0; box-shadow: 0 3px 0 #2D3290, 0 8px 14px rgba(0, 0, 0, .3); font-size: 13px; font-weight: 800; text-align: left; cursor: pointer; max-width: 100%; }
.hintcard i { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--coral); display: grid; place-items: center; font-style: normal; font-weight: 900; }
.hintcard.good i { background: var(--mint); }
.hintcard b { color: #FFE27A; }
#tray { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 0 12px calc(14px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
#tray > * { pointer-events: auto; }
.tbtn { position: relative; flex: none; width: 66px; height: 66px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .7); background: radial-gradient(circle at 35% 25%, #A9AEFF, var(--lilac-d)); box-shadow: 0 5px 0 #3A3F9A, 0 8px 14px rgba(0, 0, 0, .35); display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .08s; }
.tbtn:active { transform: translateY(4px); box-shadow: 0 1px 0 #3A3F9A; }
.tbtn svg { width: 32px; height: 32px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .3)); }
.tbtn.big { width: 72px; height: 72px; }
.tbtn .bdg { position: absolute; top: -3px; right: -3px; width: 22px; height: 22px; border-radius: 50%; background: var(--coral); border: 2px solid #fff; color: #fff; font-size: 12px; font-weight: 900; display: grid; place-items: center; }
.tbtn small { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); white-space: nowrap; }
.trayr { display: flex; gap: 10px; align-items: flex-end; }
.boostbtn { position: relative; flex: 1; max-width: 190px; min-height: 52px; margin: 0 4px 6px; padding: 6px 12px 6px 6px; display: flex; align-items: center; gap: 8px; border-radius: 99px; border: 3px solid rgba(255, 255, 255, .65); background: linear-gradient(180deg, #FFD65C, #F29A12); color: #4A2A00; box-shadow: 0 5px 0 var(--gold-d), 0 8px 14px rgba(0, 0, 0, .3); text-align: left; cursor: pointer; transition: transform .08s; }
.boostbtn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--gold-d); }
.boostbtn i { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-style: normal; font-size: 20px; }
.boostbtn b { display: block; font-size: 15px; line-height: 1.05; }
.boostbtn span { display: block; font-size: 11px; font-weight: 800; opacity: .8; }
.boostbtn.on { background: linear-gradient(180deg, #8EF0B6, #1FB35F); color: #063B1D; box-shadow: 0 5px 0 var(--mint-d), 0 8px 14px rgba(0, 0, 0, .3); }
.boostbtn.cd { background: linear-gradient(180deg, #8F95D8, #6A70B4); color: #fff; box-shadow: 0 5px 0 #3A3F78; cursor: default; }

/* ---------- panneaux plein écran ---------- */
.panel { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; background: linear-gradient(180deg, #232A6C 0, #1B2150 100%); animation: rise .25s ease-out; }
.panel[hidden] { display: none; }
.panel::before { content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none; background-image: radial-gradient(circle at 20% 15%, #fff 0 1.5px, transparent 2px), radial-gradient(circle at 70% 60%, #fff 0 1.5px, transparent 2px); background-size: 46px 46px, 62px 62px; }
.phead { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 8px; }
.phead h2 { font-size: 24px; font-weight: 900; color: #E8EBFF; letter-spacing: .01em; }
.xbtn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); display: grid; place-items: center; cursor: pointer; padding: 0; }
.xbtn svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.ptabs { position: relative; display: flex; gap: 6px; padding: 0 14px; overflow-x: auto; scrollbar-width: none; }
.ptabs::-webkit-scrollbar { display: none; }
.ptab { flex: none; min-width: 64px; padding: 9px 14px 8px; border: 0; border-radius: 12px 12px 0 0; background: rgba(255, 255, 255, .12); color: #C8CDF8; font-weight: 900; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.ptab svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ptab.on { background: #E8EBFF; color: #2B3380; }
.ptab .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }
.pbody { position: relative; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px calc(30px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; background: #2B3380; border-top: 3px solid #E8EBFF; box-shadow: inset 0 8px 14px rgba(0, 0, 0, .12); }
.pbody.free { background: transparent; border-top: 0; box-shadow: none; }

.card { background: var(--card); border-radius: 18px; padding: 14px; min-width: 0; box-shadow: 0 4px 0 rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .1); }
.card.flat { background: transparent; box-shadow: none; }
.fan { display: inline-flex; align-items: center; padding: 4px 14px; border-radius: 99px; background: linear-gradient(180deg, #FFA13A, var(--orange)); color: #fff; font-weight: 900; font-size: 13px; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); box-shadow: 0 2px 0 var(--orange-d), inset 0 1px 0 rgba(255, 255, 255, .4); }
.fan.blue { background: linear-gradient(180deg, #A5AAFF, var(--lilac-d)); box-shadow: 0 2px 0 #3A3F9A, inset 0 1px 0 rgba(255, 255, 255, .4); }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 2px -4px; }
.sec-head .mut { font-size: 12px; font-weight: 700; }

/* ---------- boutons ---------- */
.btn { min-height: 46px; padding: 8px 16px; border-radius: 99px; border: 0; background: linear-gradient(180deg, #A5AAFF, var(--lilac-d)); color: #fff; font-weight: 900; cursor: pointer; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); box-shadow: 0 4px 0 #3A3F9A, inset 0 1px 0 rgba(255, 255, 255, .4); transition: transform .06s, box-shadow .06s; }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #3A3F9A; }
.btn:focus-visible, .tbtn:focus-visible, .rbtn:focus-visible, .ptab:focus-visible, .seg button:focus-visible, .tile:focus-visible, .boostbtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.btn.pri { background: linear-gradient(180deg, #62EBA3, #1FB35F); box-shadow: 0 4px 0 var(--mint-d), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn.pri:active:not(:disabled) { box-shadow: 0 1px 0 var(--mint-d); }
.btn.sec { background: rgba(255, 255, 255, .16); box-shadow: 0 4px 0 rgba(0, 0, 0, .25); text-shadow: none; }
.btn.warn { background: linear-gradient(180deg, #FFA13A, var(--orange)); box-shadow: 0 4px 0 var(--orange-d); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; filter: saturate(.5); }
.btn.small { min-height: 34px; padding: 4px 12px; font-size: 13px; }
.btn.buy { min-width: 96px; font-size: 14px; }
.btn.buy.pri::before, .btn.coinb::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF3A8, #FFC83D 60%, #E0A100); box-shadow: inset 0 -1px 0 #B87900; }
.btn.big { width: 100%; min-height: 52px; font-size: 17px; letter-spacing: .02em; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* ---------- jauges, objectifs ---------- */
.bar { height: 14px; background: rgba(0, 0, 0, .28); border-radius: 99px; overflow: hidden; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .3); position: relative; }
.bar > i { display: block; height: 100%; width: calc(var(--p, 0) * 1%); background: linear-gradient(180deg, #FFD24A, #FF9A1F); border-radius: 99px; transition: width .5s ease; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45); }
.bar.ok > i { background: linear-gradient(180deg, #62EBA3, #1FB35F); }
.bar.warn > i { background: linear-gradient(180deg, #FFE27A, #F0A100); }
.bar.bad > i { background: linear-gradient(180deg, #FF8590, #E5384A); }
.bar.blue > i { background: linear-gradient(180deg, #B6BAFF, #6B71E0); }
.gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.gauge { min-width: 0; }
.gauge .lab { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 800; color: var(--mut); margin-bottom: 4px; }
.gauge .lab b { color: #fff; }
.obj { display: grid; gap: 12px; }
.obj .row { display: grid; gap: 5px; }
.obj .row .lab { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; gap: 8px; }
.obj .row .lab span:first-child { color: var(--mut); }
.alert { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; font-weight: 700; padding: 10px 12px; border-radius: 14px; background: rgba(255, 200, 61, .16); box-shadow: inset 0 0 0 2px rgba(255, 200, 61, .5); }
.alert.bad { background: rgba(255, 93, 108, .18); box-shadow: inset 0 0 0 2px rgba(255, 93, 108, .55); }
.alert.good { background: rgba(43, 209, 126, .16); box-shadow: inset 0 0 0 2px rgba(43, 209, 126, .5); }
.alert i { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--warn); }
.alert.bad i { background: var(--bad); } .alert.good i { background: var(--ok); }
.meteo { display: grid; gap: 8px; }
.meteo .l { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.meteo .l span:first-child { color: var(--mut); font-weight: 700; }
.tone-good { color: var(--ok); } .tone-bad { color: var(--bad); } .tone-warn { color: var(--warn); }
.decision { box-shadow: 0 0 0 3px var(--orange), 0 4px 0 rgba(0, 0, 0, .22); }
.decision h3 { font-size: 17px; margin: 10px 0 4px; font-weight: 900; }
.decision .opts { display: grid; gap: 10px; margin-top: 12px; }
.decision .opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; width: 100%; border-radius: 16px; }
.decision .opt small { color: #E6E8FF; font-weight: 700; text-align: right; }
.log { display: grid; gap: 7px; font-size: 13px; }
.log div { display: flex; gap: 8px; }
.log b { flex: none; width: 54px; color: var(--mut); font-weight: 800; }

/* ---------- listes d'achats ---------- */
.item { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-top: 2px dashed var(--line); }
.item:first-child { border-top: 0; padding-top: 2px; }
.item .nm { font-weight: 900; }
.item .own { color: var(--gold); font-weight: 900; margin-left: 5px; }
.item .d { font-size: 12.5px; color: var(--mut); font-weight: 700; }
.item .g { font-size: 12.5px; color: var(--ok); font-weight: 800; }
.item .why { font-size: 12.5px; color: var(--warn); font-weight: 800; }
.item .ref { font-size: 11.5px; color: #C9CEFF; font-weight: 600; margin-top: 3px; padding-left: 8px; border-left: 3px solid var(--lilac); }
.item .sellrow { margin-top: 4px; }
.linkbtn { background: none; border: 0; color: var(--mut); text-decoration: underline; padding: 6px 0; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ico { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .6); box-shadow: 0 3px 0 rgba(0, 0, 0, .3), inset 0 -3px 0 rgba(0, 0, 0, .14), inset 0 2px 0 rgba(255, 255, 255, .45); overflow: hidden; }
.ico-svg { width: 100%; height: 100%; padding: 4px; }
.ico-n { position: absolute; right: 2px; bottom: 1px; font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 0 3px rgba(0, 0, 0, .5); }
.mini { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 800; }
.mini .ico { width: 36px; height: 36px; border-radius: 11px; }

.group .gh { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.group .gh b { font-size: 17px; }
.group .gs { font-size: 12.5px; color: var(--mut); font-weight: 700; }
.group .nums { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin: 10px 0 5px; flex-wrap: wrap; }
.group.locked { opacity: .65; filter: saturate(.6); }
.group .lockmsg { font-size: 13px; color: var(--warn); font-weight: 800; margin-top: 6px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 12px; padding: 4px; border-radius: 99px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .3); }
.seg button { min-height: 38px; background: transparent; border: 0; border-radius: 99px; cursor: pointer; font-size: 13.5px; font-weight: 900; color: var(--mut); }
.seg button.on { background: linear-gradient(180deg, #A5AAFF, var(--lilac-d)); color: #fff; box-shadow: 0 3px 0 #3A3F9A; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.base-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 2px dashed var(--line); }
.base-row:first-child { border-top: 0; }
.base-row .n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); font-weight: 900; font-size: 14px; color: var(--mut); }
.base-row.done .n { background: linear-gradient(180deg, #62EBA3, #1FB35F); color: #fff; }
.base-row.cur .n { background: linear-gradient(180deg, #FFA13A, var(--orange)); color: #fff; }
.base-row.lock { opacity: .6; }
.base-row .t { font-weight: 900; }
.base-row .s { font-size: 12.5px; color: var(--mut); font-weight: 700; }
.badge { font-size: 11px; color: var(--mut); background: rgba(255, 255, 255, .14); border-radius: 99px; padding: 3px 10px; font-weight: 800; white-space: nowrap; }
.set { display: grid; gap: 10px; }
.set label { font-size: 13px; color: var(--mut); font-weight: 700; }
.set .seg { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
textarea { width: 100%; min-height: 84px; background: rgba(0, 0, 0, .3); color: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 8px; font: 12px/1.3 ui-monospace, Menlo, Consolas, monospace; resize: vertical; user-select: text; -webkit-user-select: text; }
.note { font-size: 12.5px; color: var(--mut); font-weight: 700; }

/* missions */
.mis { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-top: 2px dashed var(--line); }
.mis:first-of-type { border-top: 0; }
.mis-t { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 800; grid-column: 1; }
.mis-t small { color: var(--mut); font-weight: 700; white-space: nowrap; }
.mis .bar { grid-column: 1; }
.mis .btn { grid-column: 2; grid-row: 1 / span 2; min-width: 84px; }

/* ---------- fenêtres ---------- */
.modal { position: fixed; inset: 0; z-index: 20; background: rgba(8, 10, 36, .55); display: flex; align-items: flex-end; justify-content: center; }
.modal.clear { background: transparent; pointer-events: none; }
.modal.clear .sheet { pointer-events: auto; }
.modal[hidden] { display: none; }
.sheet { position: relative; background: linear-gradient(180deg, #343CA0, #262D78); color: var(--ink); width: 100%; max-width: 560px; border-radius: 26px 26px 0 0; padding: 20px 16px calc(18px + env(safe-area-inset-bottom, 0px)); max-height: 92%; overflow: auto; display: grid; gap: 12px; box-shadow: 0 -6px 0 rgba(255, 255, 255, .12), 0 -10px 30px rgba(0, 0, 0, .4); animation: rise .28s ease-out; border-top: 3px solid #E8EBFF; }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet h2 { font-size: 24px; font-weight: 900; }
.sheet .kv { display: grid; gap: 8px; }
.sheet .kv div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(0, 0, 0, .24); }
.sheet .kv span:first-child { color: var(--mut); font-weight: 700; }
.sheet p { color: #E1E4FF; }
.sheet .xbtn { position: absolute; right: 12px; top: 12px; }

/* fenêtre de zone */
.zhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 0; }
.ztitle { text-align: center; min-width: 0; } .ztitle h2 { font-size: 20px; line-height: 1.1; }
.ztitle .fan { font-size: 11px; padding: 2px 10px; margin-bottom: 3px; }
.zarrow { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-size: 26px; font-weight: 900; line-height: 1; cursor: pointer; padding: 0 0 3px; }
.zsel { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 16px; background: #E9ECFF; color: #25296E; align-items: start; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.zsel .ico { width: 70px; height: 70px; }
.zsel .nm { font-weight: 900; font-size: 17px; line-height: 1.15; } .zsel .nm small { color: #6A70B4; font-weight: 800; }
.zsel .lv { display: inline-block; margin-top: 3px; padding: 1px 10px; border-radius: 99px; background: #3A4192; color: #fff; font-weight: 900; font-size: 12px; }
.zsel .d { font-size: 13px; color: #404593; margin-top: 5px; font-weight: 700; }
.zsel .ref { font-size: 11px; color: #6A70B4; margin-top: 4px; font-weight: 600; }
.zsel .g { color: #0C8C4E; font-weight: 900; margin-top: 5px; font-size: 14px; }
.zsel .why { color: #C0283D; font-size: 12px; font-weight: 800; margin-top: 4px; }
.tgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tile { position: relative; aspect-ratio: 1; border-radius: 14px; border: 0; background: var(--tile); padding: 5px; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .22); }
.tile .ico { width: 100%; height: 100%; border: 0; box-shadow: none; border-radius: 10px; }
.tile .ico-svg { padding: 2px; filter: saturate(.7) brightness(1.05); }
.tile.sel { background: var(--tile-hi); box-shadow: 0 0 0 3px #fff, 0 3px 0 rgba(0, 0, 0, .3); }
.tile.sel .ico-svg { filter: none; }
.tile.lock { background: #151A47; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); } .tile.lock .ico-svg { filter: brightness(.18) grayscale(1); }
.tile.done { background: #3C8F73; }
.tile .lb { position: absolute; right: 3px; top: 3px; min-width: 20px; padding: 1px 5px; border-radius: 8px; background: rgba(21, 26, 71, .85); color: #fff; font-size: 11px; font-weight: 900; text-align: center; }
.tile .up { position: absolute; left: 3px; top: 3px; background: var(--mint); color: #fff; font-size: 10px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #fff; animation: upb 1s ease-in-out infinite; }

/* écran équipe */
.staff { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.staff .av { grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #FFE0B8, #E9A66B); border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); display: grid; place-items: center; overflow: hidden; }
.staff .av svg { width: 52px; height: 52px; }
.staff .top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.staff .top b { font-size: 16px; }
.staff .cnt { padding: 2px 10px; border-radius: 99px; background: rgba(0, 0, 0, .3); font-weight: 900; font-size: 13px; }
.staff .sal { font-size: 12.5px; color: var(--mut); font-weight: 700; }
.staff .acts { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; }
.staff .acts .btn { flex: 1; min-height: 40px; font-size: 14px; }
.heads { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 6px; grid-column: 1 / -1; }
.heads i { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #FFE0B8, #E9A66B); border: 2px solid #fff; display: block; }
.heads i.empty { background: rgba(0, 0, 0, .25); border: 2px dashed rgba(255, 255, 255, .3); }

/* zones : liste de construction */
.zgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zcard { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 0; border-radius: 18px; background: var(--card); text-align: left; cursor: pointer; color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .12); }
.zcard:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.zcard b { font-size: 15px; line-height: 1.15; }
.zcard small { color: var(--mut); font-weight: 800; }
.zcard .zpips { display: flex; gap: 3px; margin-top: 2px; }
.zcard .zpips i { flex: 1; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .3); }
.zcard .zpips i.on { background: linear-gradient(180deg, #62EBA3, #1FB35F); }
.zcard .up { position: absolute; right: 10px; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--mint); color: #fff; display: grid; place-items: center; border: 2px solid #fff; font-size: 12px; font-weight: 900; animation: upb 1s ease-in-out infinite; }

/* ---------- effets ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.float { position: absolute; font-weight: 900; font-size: 17px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 6px rgba(0, 0, 0, .4); animation: floatup 1.6s ease-out forwards; white-space: nowrap; }
.float.plus { color: #FFE27A; }
.float.minus { color: #FFC0C6; }
@keyframes floatup { 0% { transform: translateY(0) scale(.7); opacity: 0; } 15% { opacity: 1; transform: translateY(-8px) scale(1.15); } 100% { transform: translateY(-64px) scale(1); opacity: 0; } }
.spark { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF3A8, #FFC83D 60%, #E0A100); box-shadow: 0 0 6px rgba(255, 200, 61, .9); animation: fly .9s cubic-bezier(.3, .6, .4, 1) forwards; }
@keyframes fly { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.5); opacity: 0; } }

@media (min-width: 700px) {
  .modal { align-items: center; }
  .sheet { border-radius: 26px; }
  .pbody, .ptabs, .phead { max-width: 640px; margin-left: auto; margin-right: auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #pan { transition: none; }
  .upmark, .rbtn.alert, .vip, .tile .up, .zcard .up { animation: none; }
}
.scene { width: 360px; height: 440px; }
.item .ref { display: none; }