/* HUD du jeu : une barre fine en haut, deux blocs en bas. Tout est plat, sombre et translucide
   pour que la scene 3D reste le sujet. Plus de bois, plus de pancartes suspendues. */
html, body { height: 100%; overflow: hidden; }
#stage { position: fixed; inset: 0; }
#stage canvas { width: 100%; height: 100%; display: block; filter: saturate(.82) brightness(.72) contrast(1.04); }
/* la scene s'eteint sur les bords et sous le HUD : le champ reste lisible, l'interface respire */
#stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(9, 12, 10, .8) 0, rgba(9, 12, 10, 0) 190px), linear-gradient(0deg, rgba(9, 12, 10, .74) 0, rgba(9, 12, 10, 0) 300px), radial-gradient(ellipse at 50% 48%, rgba(9, 12, 10, 0) 34%, rgba(9, 12, 10, .5) 78%, rgba(9, 12, 10, .82) 100%); }
.hud { position: fixed; z-index: 10; }

/* ================= barre du haut */
.beam { top: 0; left: 0; right: 0; height: 56px; background: linear-gradient(180deg, rgba(16, 21, 18, .88), rgba(10, 14, 11, .74)); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); box-shadow: var(--lip), 0 10px 30px rgba(0, 0, 0, .35); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 18px 0 210px; z-index: 11; }
/* filet vert sous la barre : le seul rappel d'herbe du HUD */
.beam::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line) 35%, var(--accent-line) 65%, transparent); }

.beam-logo { position: absolute; left: 18px; top: 0; height: 54px; display: flex; align-items: center; gap: 10px; text-decoration: none; z-index: 2; }
.beam-logo img { width: 26px; height: 26px; transition: opacity .2s; opacity: .95; }
.beam-logo:hover img { opacity: 1; }
.beam-logo span { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink); letter-spacing: -.01em; }

/* solde */
.balance-tag { justify-self: start; display: flex; align-items: center; gap: 10px; padding: 0; margin: 0; background: none; border: 0; animation: none; }
.balance-tag::after { content: none; }
.balance-tag .coin { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; box-shadow: 0 0 10px rgba(227, 181, 82, .5); }
.balance-tag .coin::after { content: none; }
.balance-tag .v { font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1; letter-spacing: -.01em; }
.balance-tag .v small { font-size: 11px; color: var(--muted); font-family: var(--font); font-weight: 400; margin-left: 6px; letter-spacing: .04em; }
.balance-tag .rate { font-size: 11px; color: var(--accent); margin-top: 4px; }

/* zone au centre */
.zone-sign { justify-self: center; position: relative; margin: 0; width: 380px; }
.zone-sign::before, .zone-sign::after { content: none; }
.zone-sign .board { padding: 0; background: none; border: 0; text-align: center; }
.zone-sign .top { display: flex; align-items: center; justify-content: center; gap: 10px; }
.zone-sign .nav { width: 24px; height: 24px; border-radius: 6px; border: 1px solid transparent; background: transparent; cursor: pointer; font-size: 14px; color: var(--muted); line-height: 1; transition: background .15s, color .15s; }
.zone-sign .nav:hover { background: var(--surface-2); color: var(--ink); }
.zone-sign .name { min-width: 190px; }
.zone-sign .name b { display: block; font-family: var(--display); font-weight: 800; font-size: 15.5px; line-height: 1.1; letter-spacing: -.01em; }
.zone-sign .name span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.zone-sign .prog { margin-top: 7px; }
.zone-sign .prog .l { display: flex; justify-content: center; gap: 8px; font-size: 11px; color: var(--muted); margin-bottom: 5px; white-space: nowrap; }
.zone-sign .prog .l b { color: var(--ink-2); font-weight: 500; font-family: var(--font); font-size: 11px; }
.zone-sign .bar { height: 3px; }
.zone-sign .bar .tractor { display: none; }

/* menu a droite */
.menu { justify-self: end; display: flex; align-items: center; gap: 4px; margin: 0; }
.menu .tab { --drop: 0; position: relative; border: 1px solid transparent; background: transparent; color: var(--muted); font-family: var(--font); font-weight: 500; font-size: 13.5px; padding: 8px 13px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; margin: 0; transition: background .15s, color .15s, border-color .15s; }
.menu .tab::before, .menu .tab::after { content: none; }
.menu .tab:hover { background: var(--surface-2); color: var(--ink); animation: none; }
.menu .tab:active { transform: translateY(1px); }
.menu .tab.wallet { border-color: var(--accent); color: var(--accent); margin-left: 6px; }
.menu .tab.wallet:hover { background: var(--accent-dim); }
.menu .tab.wallet.connected { border-color: var(--line-2); color: var(--ink-2); }
.menu .tab.wallet.connected:hover { background: var(--surface-2); color: var(--ink); }
.menu .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-3); }
.menu .sound.on .dot { background: var(--accent); box-shadow: 0 0 6px var(--accent); }

/* ================= actions, en bas a gauche */
.signpost { left: 22px; bottom: 22px; width: auto; height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.signpost .post { display: none; }
.board-btn { position: static; white-space: nowrap; padding: 0 18px; height: 44px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-family: var(--font); font-weight: 600; font-size: 14.5px; color: var(--ink); clip-path: none; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(18, 23, 20, .82); backdrop-filter: blur(12px); filter: none; transition: background .15s, border-color .15s, transform .08s; }
.board-btn::before, .board-btn::after { content: none; }
.board-btn:hover:not(:disabled) { background: rgba(30, 39, 33, .9); filter: none; transform: none; border-color: var(--line-3); }
.board-btn:active:not(:disabled) { transform: translateY(1px); }
.board-btn:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.board-btn.mint { background: var(--grad); border-color: transparent; color: #06210a; font-weight: 600; min-width: 0; box-shadow: 0 0 0 1px rgba(127, 217, 87, .5), 0 10px 30px rgba(127, 217, 87, .22); }
.board-btn.mint:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(127, 217, 87, .7), 0 12px 38px rgba(127, 217, 87, .34); }
.board-btn.tools { min-width: 0; }
.board-btn .kbd { display: none; }
.board-btn .badge { margin-left: 6px; background: rgba(8, 36, 11, .16); border-color: rgba(8, 36, 11, .22); color: #08240b; }
.board-btn .count { background: var(--surface-3); border-radius: 6px; padding: 3px 8px; font-size: 12px; color: var(--ink-2); margin-left: 4px; }
.dots { display: none; }

/* ================= recolte, en bas a droite */
.clipboard { right: 22px; bottom: 22px; width: 308px; padding: 22px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(30, 39, 33, .82), rgba(14, 19, 16, .86)); backdrop-filter: blur(14px); border: 1px solid var(--line-2); box-shadow: var(--lip), 0 20px 46px rgba(0, 0, 0, .5); }
/* halo dore quand il y a quelque chose a recolter */
.clipboard::before { content: ""; position: absolute; left: 50%; top: -70px; width: 260px; height: 140px; margin-left: -130px; border-radius: 50%; background: radial-gradient(ellipse, rgba(227, 181, 82, .16), transparent 68%); pointer-events: none; }
.clipboard .clip { display: none; }
.clipboard .amt { background: linear-gradient(135deg, #fff2cf, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.clipboard .amt small { -webkit-text-fill-color: var(--muted); }
.clipboard .harvest { box-shadow: 0 10px 28px rgba(227, 181, 82, .2); }
.clipboard .harvest:hover:not(:disabled) { box-shadow: 0 12px 34px rgba(227, 181, 82, .32); }
.clipboard h3 { margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-family: var(--font); font-weight: 500; display: flex; justify-content: space-between; }
.clipboard h3 span { text-transform: none; letter-spacing: 0; color: var(--ink-2); font-size: 12px; }
.clipboard .amt { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1.1; margin: 10px 0 14px; letter-spacing: -.03em; }
.clipboard .amt small { font-size: 12px; color: var(--muted); font-family: var(--font); font-weight: 400; margin-left: 7px; letter-spacing: .04em; }
.clipboard .bar { height: 4px; }
.clipboard .note { font-size: 12px; color: var(--muted); margin: 12px 0 16px; line-height: 1.5; }
.clipboard .harvest { width: 100%; font-size: 15px; height: 46px; padding: 0; border-radius: 12px; }
.tip { right: 22px; bottom: 268px; max-width: 300px; padding: 12px 16px; border-radius: var(--r); font-size: 12px; color: var(--ink-2); background: rgba(18, 23, 20, .82); backdrop-filter: blur(12px); border: 1px solid var(--line-2); line-height: 1.5; }
.tip::after { content: none; }

/* ================= contenu des panneaux */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 26px; }
.stat { background: var(--surface-2); border-radius: var(--r); padding: 16px; border: 1px solid var(--line); }
.stat .v { font-size: 24px; font-family: var(--display); font-weight: 800; letter-spacing: -.035em; }
.stat .k { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.farms { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.farm { display: flex; gap: 12px; align-items: center; background: var(--surface-2); border-radius: var(--r); padding: 9px; border: 1px solid var(--line); }
.farm.done { border-color: rgba(127, 217, 87, .3); } .farm.current { border-color: var(--accent); } .farm.locked { opacity: .42; }
.farm .sw { width: 72px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; display: block; filter: saturate(.85) brightness(.92); }
.farm .n { font-family: var(--display); font-weight: 600; font-size: 13px; } .farm .t { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* intro */
.intro { text-align: center; }
.intro .pb { padding: 40px 34px 34px; }
.intro h1 { margin: 0 0 14px; font-size: 26px; font-weight: 600; }
.intro .sun { display: none; }
.intro-mark { width: 56px; height: 56px; display: block; margin: 0 auto 22px; opacity: .95; }
.intro-facts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 22px 0 4px; }
.intro-facts .pill { font-size: 12px; }

/* nouvelle zone */
.levelup { text-align: center; }
.levelup .sw { display: block; width: 100%; aspect-ratio: 18 / 11; object-fit: cover; border-radius: var(--r); margin: 0 0 18px; filter: saturate(.85) brightness(.92); }
.levelup b { font-family: var(--display); font-size: 18px; }
#fade { position: fixed; inset: 0; background: #090c0a; opacity: 0; pointer-events: none; z-index: 60; transition: opacity .6s; }

@media (max-width: 1150px) {
  .zone-sign { width: 280px; }
  .balance-tag .rate { display: none; }
}
@media (max-width: 900px) {
  .beam { grid-template-columns: 1fr auto; padding-left: 60px; }
  .beam-logo span { display: none; }
  .zone-sign { display: none; }
  .clipboard { width: 250px; }
  .menu .tab:not(.wallet):not(.sound) { display: none; }
}

/* ================= transition de zone */
#wipe { position: fixed; inset: 0; z-index: 30; pointer-events: none; clip-path: circle(0% at 50% 12%); background: #090c0a; }
#zone-banner { position: fixed; left: 50%; top: 46%; z-index: 31; pointer-events: none; transform: translate(-50%, -50%) translateY(14px); opacity: 0; }
#zone-banner.in { animation: bannerIn .5s cubic-bezier(.2, .9, .3, 1.1) forwards; }
#zone-banner.out { animation: bannerOut .4s ease-in forwards; }
@keyframes bannerIn { from { transform: translate(-50%, -50%) translateY(14px); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
@keyframes bannerOut { from { transform: translate(-50%, -50%); opacity: 1; } to { transform: translate(-50%, -50%) translateY(-14px); opacity: 0; } }
#zone-banner .inner { display: flex; align-items: center; gap: 18px; padding: 14px; border-radius: var(--r-lg); background: rgba(14, 19, 16, .9); backdrop-filter: blur(14px); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
#zone-banner .inner::before, #zone-banner .inner::after { content: none; }
#zone-banner img { width: 168px; height: 103px; object-fit: cover; border-radius: 8px; filter: saturate(.85) brightness(.92); }
#zone-banner .txt { padding-right: 14px; }
#zone-banner .txt span { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
#zone-banner .txt b { display: block; font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.zone-sign .name.flip { animation: flipName .5s ease-in-out; }
@keyframes flipName { 0% { opacity: 1; } 50% { opacity: .15; } 100% { opacity: 1; } }