:root {
  --ink: #3d2a3c;
  --ink-soft: #6b5468;
  --cream: #fff8f1;
  --paper: #fffdf9;
  --line: #ead9d3;
  --pink: #f27a9b;
  --pink-deep: #d9577d;
  --pink-soft: #ffd6e2;
  --mint: #5fbf9f;
  --mint-soft: #d6f2e6;
  --sky: #bfe6f2;
  --gold: #f6c26b;
  --gold-deep: #e39d2f;
  --violet: #8fa2ec;
  --sky-top: #ffd6e2;
  --sky-bottom: #fff1df;
  --shadow: 0 4px 0 rgba(61, 42, 60, .9);
  --radius: 14px;
  --pixel: 'Pixelify Sans', 'Silkscreen', monospace;
  --mono: 'Silkscreen', 'Pixelify Sans', monospace;
  --sans: 'Nunito', system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 62%, var(--sky-bottom) 100%);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .8s;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

#island { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; cursor: grab; }
#island:active { cursor: grabbing; }

/* étiquettes de la carte */
.labels { position: fixed; inset: 0; pointer-events: none; }
.map-label {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  background: rgba(61, 42, 60, .88); color: #fff; padding: 6px 10px 6px 8px; border-radius: 8px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .2); transition: opacity .3s;
}
.map-label i { font-style: normal; color: var(--pink-soft); margin-right: 4px; }
.map-label::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: rgba(61, 42, 60, .88); }

/* chargement */
#loader {
  position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: radial-gradient(circle at 50% 45%, #ffe7ef, #f8c9d8 70%);
  transition: opacity .6s, visibility .6s;
}
#loader.done { opacity: 0; visibility: hidden; }
.loader-fish img { image-rendering: pixelated; animation: bob 1.2s ease-in-out infinite; filter: drop-shadow(0 8px 0 rgba(61, 42, 60, .15)); }
#loader p { font: 12px var(--mono); margin: 0; color: var(--ink); }
.loader-bar { width: 180px; height: 12px; border: 2px solid var(--ink); border-radius: 3px; background: #fff; padding: 2px; }
.loader-bar span { display: block; height: 100%; width: 10%; background: repeating-linear-gradient(90deg, var(--pink) 0 6px, transparent 6px 8px); transition: width .3s; }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* en-tête */
.site-header {
  position: fixed; top: 16px; left: 20px; right: 20px; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; justify-self: start; }
.brand img { border-radius: 12px; box-shadow: var(--shadow); image-rendering: pixelated; }
.brand strong { display: block; font: 700 24px/1 var(--pixel); letter-spacing: .06em; }
.brand small { display: block; font: 9px var(--mono); letter-spacing: .12em; color: var(--ink-soft); margin-top: 4px; }
.chip-btn, .wallet-btn {
  border: 2px solid var(--ink); background: var(--gold); padding: 9px 16px; border-radius: 10px;
  font: 700 12px var(--mono); letter-spacing: .06em; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s;
}
.chip-btn { background: var(--paper); }
.chip-btn span { color: var(--pink); }
.wallet-btn { justify-self: end; background: var(--paper); }
.wallet-btn.on { background: var(--mint-soft); }
.chip-btn:hover, .wallet-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(61, 42, 60, .9); }
.chip-btn:active, .wallet-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(61, 42, 60, .9); }

/* accueil */
.hero {
  position: fixed; left: clamp(20px, 4vw, 64px); top: 50%; transform: translateY(-48%); z-index: 5; max-width: 470px;
  transition: opacity .4s, transform .4s;
}
.kicker { font: 11px var(--mono); letter-spacing: .14em; margin: 0 0 6px; }
.kicker span { color: var(--pink); }
.whisper { font: italic 500 15px var(--sans); color: var(--ink-soft); margin: 0 0 10px; }
.hero h1 {
  font: 700 clamp(44px, 5.6vw, 76px)/.98 var(--pixel); margin: 0 0 18px; letter-spacing: .01em;
  color: var(--paper); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--ink), 0 10px 0 rgba(242, 122, 155, .55);
}
.lede { font-size: 17px; font-weight: 700; margin: 0 0 22px; max-width: 380px; background: rgba(255, 253, 249, .55); padding: 4px 8px; border-radius: 8px; backdrop-filter: blur(2px); }
.pixel-btn {
  border: 3px solid var(--ink); border-radius: 12px; background: linear-gradient(180deg, #ffd88f, var(--gold));
  font: 700 22px var(--pixel); letter-spacing: .08em; padding: 16px 28px; box-shadow: 0 6px 0 var(--ink);
  display: inline-flex; gap: 14px; align-items: center; transition: transform .12s, box-shadow .12s;
}
.pixel-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); }
.pixel-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.pixel-btn:disabled { opacity: .6; background: #eee2da; }
.play-btn { font-size: 26px; }
.meta { display: flex; gap: 18px; font-size: 13px; font-weight: 800; margin: 16px 0 18px; }
.meta span::first-letter { color: var(--mint); }
.link-btn { background: none; border: 0; padding: 0; font: 11px var(--mono); letter-spacing: .1em; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--pink); display: block; margin-bottom: 10px; }
.link-btn.small { font-size: 10px; margin-top: 8px; }
.chain-note { font: 9px var(--mono); letter-spacing: .1em; color: var(--ink-soft); margin: 0; }

/* carte token */
.token-card {
  position: fixed; right: clamp(16px, 3vw, 40px); bottom: 74px; z-index: 6; width: min(380px, calc(100vw - 32px));
  background: rgba(61, 42, 60, .94); color: #fff; border-radius: var(--radius); border: 2px solid var(--ink);
  box-shadow: 0 6px 0 rgba(61, 42, 60, .35); overflow: hidden; transition: opacity .4s, transform .4s;
}
.tc-top { display: flex; justify-content: space-between; padding: 12px 16px 6px; font: 10px var(--mono); letter-spacing: .1em; }
.tc-top span { color: #d9bfd2; }
.tc-ca { padding: 6px 16px 14px; }
.tc-ca small { display: block; font: 9px var(--mono); color: var(--pink-soft); letter-spacing: .1em; margin-bottom: 4px; }
.tc-ca button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; max-width: 100%; }
.tc-ca code { font: 12px var(--mono); overflow-wrap: anywhere; color: #fff; }
.copy-hint { color: var(--pink-soft); }
.tc-links { display: grid; grid-template-columns: 1.4fr 1fr; }
.tc-links a { display: block; padding: 12px 16px; text-decoration: none; }
.tc-links small { display: block; font: 9px var(--mono); letter-spacing: .1em; margin-bottom: 4px; }
.tc-links span { font-weight: 800; font-size: 14px; }
.tc-buy { background: var(--pink); color: #fff; }
.tc-buy:hover { background: var(--pink-deep); }
.tc-buy.disabled { background: #8a6f86; pointer-events: none; }
.tc-x { background: #4c3649; }
.tc-x:hover { background: #5a4157; }
.tc-x.disabled { pointer-events: none; opacity: .7; }

/* modes */
.back-explore, .hud { display: none; }
body[data-mode="explore"] .hero, body[data-mode="explore"] .token-card, body[data-mode="game"] .hero, body[data-mode="game"] .token-card { opacity: 0; pointer-events: none; transform: translateY(-48%) translateX(-30px); }
body[data-mode="explore"] .token-card, body[data-mode="game"] .token-card { transform: translateY(20px); }
body[data-mode="explore"] .back-explore { display: block; }
body[data-mode="game"] .hud { display: block; }
body[data-mode="game"] .site-header { display: none; }
.pill { position: fixed; top: 84px; left: 20px; z-index: 8; border: 2px solid var(--ink); background: var(--paper); border-radius: 999px; padding: 8px 16px; font: 11px var(--mono); box-shadow: var(--shadow); }

/* HUD */
.hud { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-left { position: absolute; top: 16px; left: 20px; }
.player-chip {
  display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, #b8a6f2, #8f7ae0); color: #fff;
  border: 2px solid var(--ink); border-radius: 12px; padding: 8px 18px 8px 8px; box-shadow: var(--shadow); text-align: left;
}
.pc-icon { width: 34px; height: 34px; display: grid; place-items: center; background: rgba(255, 255, 255, .25); border-radius: 8px; font-size: 18px; }
.player-chip b { display: block; font: 700 15px var(--pixel); letter-spacing: .08em; }
.player-chip small { font: 10px var(--mono); opacity: .9; }
.hud-right { position: absolute; top: 16px; right: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.stats { display: flex; gap: 10px; }
.stat { position: relative; display: flex; align-items: center; gap: 10px; background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; padding: 8px 14px 8px 8px; box-shadow: var(--shadow); min-width: 150px; }
.st-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: #fff; font-size: 17px; border: 2px solid var(--ink); }
.stat.mint .st-ic { background: var(--mint); }
.stat.pink .st-ic { background: var(--pink); }
.stat.gold .st-ic { background: var(--gold); color: var(--ink); }
.stat small { display: block; font: 8px var(--mono); letter-spacing: .08em; color: var(--ink-soft); }
.stat b { font: 700 19px/1.1 var(--pixel); font-variant-numeric: tabular-nums; }
.stat em { position: absolute; right: 8px; bottom: -11px; font: 9px var(--mono); font-style: normal; background: var(--mint); color: #fff; border: 2px solid var(--ink); border-radius: 6px; padding: 1px 6px; }
.env-chip { display: flex; align-items: center; gap: 8px; font: 9px var(--mono); letter-spacing: .08em; background: rgba(61, 42, 60, .85); color: #fff; padding: 6px 12px; border-radius: 999px; margin-top: 6px; }
.env-chip i { width: 1px; height: 10px; background: rgba(255, 255, 255, .35); }
.feed { position: absolute; right: 20px; top: 140px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; }
.feed li { background: rgba(255, 253, 249, .92); border: 2px solid var(--ink); border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 800; animation: slide-in .35s ease-out; box-shadow: 0 2px 0 var(--ink); }
.feed li b { color: var(--pink-deep); }
.feed li.out { opacity: 0; transition: opacity .6s; }
@keyframes slide-in { from { transform: translateX(30px); opacity: 0; } }
.hud-actions { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); display: flex; gap: 14px; }
.big-btn {
  position: relative; display: flex; align-items: center; gap: 12px; text-align: left; min-width: 196px;
  border: 3px solid var(--ink); border-radius: 12px; padding: 10px 18px 10px 10px; box-shadow: 0 6px 0 var(--ink); transition: transform .12s, box-shadow .12s;
}
.big-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); }
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.big-btn.market { background: linear-gradient(180deg, #ffd88f, var(--gold)); }
.big-btn.inventory { background: linear-gradient(180deg, #8de0c4, var(--mint)); padding-right: 56px; }
.bb-ic { width: 40px; height: 40px; display: grid; place-items: center; background: rgba(255, 255, 255, .45); border: 2px solid var(--ink); border-radius: 8px; font-size: 20px; }
.big-btn b { display: block; font: 700 18px var(--pixel); letter-spacing: .1em; }
.big-btn small { font-size: 11px; font-weight: 800; }
.big-btn em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 700 13px var(--pixel); font-style: normal; background: var(--ink); color: #fff; border-radius: 6px; padding: 4px 9px; }

/* barre du bas */
.bottom-bar {
  position: fixed; left: 20px; right: 20px; bottom: 14px; z-index: 9; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font: 9px var(--mono); letter-spacing: .1em; pointer-events: none;
}
.bottom-bar > * { pointer-events: auto; }
.bb-place { display: flex; gap: 10px; align-items: center; background: rgba(255, 253, 249, .78); padding: 8px 12px; border-radius: 10px; backdrop-filter: blur(4px); }
.bb-place b { font-weight: 400; }
.bb-place i { font-style: normal; opacity: .4; }
.bb-tools { display: flex; gap: 4px; background: rgba(255, 253, 249, .78); padding: 4px; border-radius: 10px; backdrop-filter: blur(4px); }
.bb-tools button { border: 0; background: transparent; min-width: 30px; height: 28px; border-radius: 7px; font: 13px var(--mono); }
.bb-tools button.wide { font-size: 9px; letter-spacing: .1em; padding: 0 10px; }
.bb-tools button:hover { background: var(--pink-soft); }
.bb-tools button[aria-pressed="true"] { background: var(--mint-soft); }

/* fenêtres */
dialog.sheet {
  border: 3px solid var(--ink); border-radius: 18px; padding: 26px 28px 22px; background: var(--paper); color: var(--ink);
  width: min(880px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); overflow: auto; box-shadow: 0 10px 0 rgba(61, 42, 60, .9);
}
dialog.small-sheet { width: min(500px, calc(100vw - 24px)); }
dialog::backdrop { background: rgba(61, 42, 60, .45); backdrop-filter: blur(3px); }
dialog[open] { animation: pop .22s ease-out; }
@keyframes pop { from { transform: scale(.96); opacity: 0; } }
.x { position: absolute; right: 14px; top: 12px; width: 32px; height: 32px; border: 2px solid var(--line); background: #fff; border-radius: 8px; font-size: 20px; line-height: 1; }
.x:hover { border-color: var(--ink); }
.eyebrow { font: 9px var(--mono); letter-spacing: .14em; color: var(--ink-soft); text-align: center; margin: 0 0 8px; }
dialog h2 { font: 700 26px var(--pixel); letter-spacing: .06em; text-align: center; margin: 0 0 6px; }
.sub { text-align: center; font-size: 14px; color: var(--ink-soft); margin: 0 auto 18px; max-width: 520px; }
.balance-pill { display: flex; width: max-content; margin: 0 auto 20px; align-items: center; gap: 8px; background: linear-gradient(180deg, #ffe7b5, #ffd88f); border: 2px solid var(--ink); border-radius: 999px; padding: 8px 18px; font: 11px var(--mono); box-shadow: 0 3px 0 var(--ink); }
.balance-pill b { font: 700 18px var(--pixel); }
.fineprint { font-size: 11px; color: var(--ink-soft); text-align: center; margin: 16px 0 0; }
.fineprint.left { text-align: left; }

/* marché */
.shop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; box-shadow: 0 4px 0 var(--line); }
.card .art { position: relative; height: 150px; border-radius: 10px; border: 2px solid var(--ink); display: grid; place-items: center; overflow: hidden; }
.card .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.card[data-type="rod"] .art { background: linear-gradient(160deg, #ffe3ec, #f8a9c0); }
.card[data-type="net"] .art { background: linear-gradient(160deg, #e0f7ee, #8ad8bd); }
.card[data-type="boat"] .art { background: linear-gradient(160deg, #e6ebff, #a6b4f2); }
.owned { position: absolute; right: 8px; top: 8px; font: 8px var(--mono); background: var(--ink); color: #fff; border-radius: 6px; padding: 4px 7px; }
.card .role { font: 8px var(--mono); letter-spacing: .12em; color: var(--ink-soft); margin: 12px 4px 2px; }
.card h3 { font: 700 18px var(--pixel); letter-spacing: .08em; margin: 0 4px 2px; }
.card .tag { font-size: 12px; color: var(--ink-soft); margin: 0 4px 10px; min-height: 32px; }
.yield { display: flex; align-items: baseline; gap: 6px; background: #fff6e6; border: 2px dashed #f2cf8e; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.yield b { font: 700 24px var(--pixel); }
.yield span { font-size: 11px; font-weight: 800; }
.facts-list { list-style: none; margin: 0 4px 12px; padding: 0; font-size: 12px; display: grid; gap: 4px; }
.facts-list li::before { content: '✿ '; color: var(--pink); }
.hire { margin-top: auto; display: flex; align-items: center; gap: 10px; border: 3px solid var(--ink); border-radius: 10px; background: linear-gradient(180deg, #ffd88f, var(--gold)); padding: 8px 12px; box-shadow: 0 4px 0 var(--ink); text-align: left; transition: transform .1s, box-shadow .1s; }
.hire:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.hire:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.hire:disabled { filter: grayscale(.7); opacity: .7; }
.hire .coin { width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 8px; display: grid; place-items: center; background: #fff3d6; }
.hire b { display: block; font: 700 14px var(--pixel); letter-spacing: .1em; }
.hire small { font: 9px var(--mono); }

/* inventaire */
.inv-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.inv-count { display: flex; align-items: center; gap: 10px; border: 2px solid var(--ink); border-radius: 12px; padding: 8px; }
.inv-count img { width: 48px; height: 40px; object-fit: contain; background: rgba(255,255,255,.6); border-radius: 6px; }
.inv-count b { font: 700 20px var(--pixel); display: block; }
.inv-count small { font-size: 11px; }
.inv-count[data-type="rod"] { background: #ffe9f0; }
.inv-count[data-type="net"] { background: #e3f7ef; }
.inv-count[data-type="boat"] { background: #eaeeff; }
.inv-list { display: grid; gap: 8px; max-height: 46vh; overflow: auto; padding-right: 4px; }
.inv-row { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; background: #fff; }
.inv-row img { width: 44px; height: 36px; object-fit: contain; border-radius: 6px; }
.inv-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 13px; }
.status { font: 8px var(--mono); letter-spacing: .08em; padding: 3px 7px; border-radius: 6px; border: 2px solid var(--ink); }
.st-fishing { background: #bfe6f2; }
.st-delivering { background: var(--gold); }
.st-returning { background: var(--mint-soft); }
.st-resting { background: #e5dcff; }
.bar { height: 8px; border-radius: 4px; background: #f1e8e4; margin: 6px 0 4px; overflow: hidden; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), #8de0c4); }
.inv-meta { display: flex; gap: 14px; font-size: 11px; color: var(--ink-soft); }
.empty { text-align: center; padding: 24px; color: var(--ink-soft); }
.empty button { margin-top: 10px; }

/* classement */
.search { display: flex; align-items: center; gap: 8px; border: 2px solid var(--ink); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; background: #fff; }
.search input { border: 0; outline: 0; flex: 1; font: 700 14px var(--sans); background: transparent; color: var(--ink); }
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 52vh; overflow: auto; }
.board li { display: grid; grid-template-columns: 38px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; border: 2px solid var(--line); border-radius: 12px; background: #fff; font-weight: 800; font-size: 14px; }
.board li .rk { font: 700 15px var(--pixel); }
.board li .crew { font-size: 12px; color: var(--ink-soft); }
.board li .score { font: 700 15px var(--pixel); font-variant-numeric: tabular-nums; }
.board li small { font: 9px var(--mono); color: var(--ink-soft); margin-left: 6px; }
.board li.r1 { background: #fff1cc; border-color: var(--gold-deep); }
.board li.r2 { background: #eef0ff; border-color: var(--violet); }
.board li.r3 { background: #ffe5ec; border-color: var(--pink); }
.board li.me { outline: 3px solid var(--mint); }

/* démarrer */
.steps { display: flex; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 0 0 16px; font: 8px var(--mono); letter-spacing: .06em; flex-wrap: wrap; }
.steps li { padding: 5px 9px; border-radius: 6px; background: #f3ebe7; color: var(--ink-soft); }
.steps li.active { background: var(--pink-soft); color: var(--ink); }
.steps li.done { background: var(--mint-soft); color: var(--ink); }
.wallet-list { display: grid; gap: 8px; }
.wallet-opt { display: flex; align-items: center; gap: 12px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; padding: 10px 14px; font-weight: 800; box-shadow: 0 3px 0 var(--ink); text-align: left; }
.wallet-opt img { width: 28px; height: 28px; border-radius: 6px; }
.wallet-opt:hover { background: var(--pink-soft); }
.main-btn { width: 100%; border: 3px solid var(--ink); border-radius: 12px; background: linear-gradient(180deg, #ff9fb9, var(--pink)); color: #fff; padding: 13px; font: 700 15px var(--pixel); letter-spacing: .06em; box-shadow: 0 4px 0 var(--ink); }
.main-btn:disabled { opacity: .7; }
.field { display: grid; gap: 6px; font-weight: 800; font-size: 13px; margin-bottom: 12px; }
.field input { border: 2px solid var(--ink); border-radius: 10px; padding: 11px 12px; font: 700 15px var(--sans); color: var(--ink); background: #fff; }
.field small { font-weight: 600; color: var(--ink-soft); font-size: 11px; }
.addr { text-align: center; font: 12px var(--mono); background: #f6efea; border-radius: 8px; padding: 8px; margin: 0 0 10px; }
.text-btn { display: block; margin: 10px auto 0; background: none; border: 0; font-size: 12px; font-weight: 800; text-decoration: underline; color: var(--ink-soft); }
.form-error { color: #c43b5c; font-weight: 800; font-size: 13px; text-align: center; min-height: 0; margin: 8px 0 0; }
.form-error:empty { display: none; }
.note { font-size: 12px; color: var(--ink-soft); text-align: center; margin: 8px 0 0; }
.note.pinkish { background: #fff0f4; border-radius: 8px; padding: 8px; margin-top: 12px; }
.note.strong { font-weight: 900; color: var(--ink); }
.or { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.or::before, .or::after { content: ''; flex: 1; height: 2px; background: var(--line); }
.guest-btn { width: 100%; border: 2px solid var(--ink); border-radius: 12px; background: var(--mint-soft); padding: 12px; font-weight: 900; font-size: 15px; box-shadow: 0 3px 0 var(--ink); }
.guest-btn:hover { background: #c3ecdb; }

/* récompenses */
.rw-top { display: flex; justify-content: space-between; font: 9px var(--mono); letter-spacing: .12em; margin-bottom: 16px; padding-right: 36px; }
.rw-top em { font-style: normal; background: var(--pink-soft); padding: 3px 8px; border-radius: 6px; }
.rw-intro { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.rw-intro img { border-radius: 12px; image-rendering: pixelated; }
.rw-intro h2 { text-align: left; font-size: 21px; margin: 0 0 4px; }
.rw-intro .eyebrow { text-align: left; margin: 0; }
.story { font-size: 14px; line-height: 1.55; margin: 0 0 10px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.facts div { background: #fff6ef; border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.facts dt { font: 8px var(--mono); letter-spacing: .08em; color: var(--ink-soft); }
.facts dd { margin: 4px 0 0; font-weight: 900; font-size: 13px; }
.wide-btn { width: 100%; justify-content: center; font-size: 15px; margin-top: 14px; }

.toast { position: fixed; left: 50%; top: 20px; transform: translate(-50%, -80px); z-index: 60; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 10px; font-weight: 800; font-size: 13px; transition: transform .3s; pointer-events: none; }
.toast.show { transform: translate(-50%, 0); }

/* téléphone */
@media (max-width: 760px) {
  .site-header { top: 12px; left: 12px; right: 12px; grid-template-columns: 1fr auto; gap: 8px; }
  .site-header .chip-btn { display: none; }
  .brand img { width: 36px; height: 36px; }
  .brand strong { font-size: 19px; }
  .brand small { display: none; }
  .wallet-btn { padding: 8px 12px; font-size: 10px; }
  .hero { top: 70px; transform: none; left: 12px; right: 12px; max-width: none; background: rgba(255, 253, 249, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 2px solid rgba(61, 42, 60, .12); border-radius: 16px; padding: 14px 14px 12px; }
  body[data-phase="night"] .hero { background: rgba(35, 30, 60, .62); }
  body[data-mode="landing"] .labels { display: none; }
  .lede { background: none; padding: 0; backdrop-filter: none; }
  .bb-place, .bb-tools button { white-space: nowrap; }
  body[data-mode="explore"] .hero, body[data-mode="game"] .hero { transform: translateX(-30px); }
  .hero h1 { font-size: 40px; margin-bottom: 12px; }
  .whisper { display: none; }
  .lede { font-size: 14px; margin-bottom: 14px; }
  .play-btn { font-size: 20px; padding: 12px 20px; }
  .meta { font-size: 11px; gap: 12px; margin: 10px 0 8px; }
  .link-btn { margin-bottom: 4px; }
  .token-card { left: 16px; right: 16px; width: auto; bottom: 58px; }
  .tc-ca code { font-size: 10px; }
  .tc-top { padding: 10px 14px 4px; }
  .tc-ca { padding: 4px 14px 10px; }
  .tc-links a { padding: 10px 14px; }
  .bottom-bar { left: 12px; right: 12px; bottom: 10px; }
  .hide-sm { display: none; }
  .bb-place { padding: 7px 9px; }
  .bb-tools button.wide { padding: 0 6px; }
  #sound-label { display: none; }
  .hide-xs { display: none; }
  .hud-left { top: 12px; left: 12px; }
  .player-chip { padding: 6px 12px 6px 6px; }
  .pc-icon { width: 28px; height: 28px; }
  .hud-right { top: 66px; left: 12px; right: 12px; align-items: stretch; }
  .stats { gap: 6px; }
  .stat { min-width: 0; flex: 1; padding: 6px 8px 6px 6px; gap: 6px; }
  .st-ic { display: none; }
  .stat b { font-size: 14px; }
  .stat small { font-size: 7px; }
  .env-chip { align-self: flex-end; }
  .feed { top: auto; bottom: 140px; right: 12px; left: 12px; align-items: stretch; }
  .hud-actions { left: 12px; right: 12px; transform: none; bottom: 56px; gap: 8px; }
  .big-btn { min-width: 0; flex: 1; padding: 8px; gap: 8px; }
  .big-btn.inventory { padding-right: 44px; }
  .bb-ic { width: 32px; height: 32px; font-size: 16px; }
  .big-btn b { font-size: 14px; }
  .big-btn small { display: none; }
  dialog.sheet { padding: 22px 14px 16px; }
  .shop { grid-template-columns: 1fr; }
  .card .art { height: 120px; }
  .inv-counts { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .board li { grid-template-columns: 30px 1fr auto; }
  .board li .crew { display: none; }
}

/* ====== nouveautés : vie de l'île, pêche, collection, améliorations… ====== */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3fcf8e; box-shadow: 0 0 0 3px rgba(63, 207, 142, .25); animation: pulse 1.6s infinite; vertical-align: middle; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(63, 207, 142, 0); } }
.hero-live { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; margin: -6px 0 16px; }
.hero-live i { font-style: normal; opacity: .4; }
body[data-phase="night"] .hero-live { color: #fbeef4; }

.rank-line { margin: 8px 0 0 4px; font: 10px var(--mono); letter-spacing: .06em; color: var(--ink); background: rgba(255, 253, 249, .8); padding: 5px 9px; border-radius: 8px; width: max-content; }
.rank-line b { color: var(--pink-deep); }
.side-tools { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.side-tools button { display: flex; align-items: center; gap: 8px; border: 2px solid var(--ink); background: var(--paper); border-radius: 10px; padding: 7px 12px 7px 8px; box-shadow: 0 3px 0 var(--ink); font: 10px var(--mono); letter-spacing: .08em; width: 156px; text-align: left; transition: transform .1s; }
.side-tools button span { width: 26px; height: 26px; display: grid; place-items: center; background: var(--pink-soft); border-radius: 7px; font-size: 14px; }
.side-tools button b { font-weight: 400; flex: 1; }
.side-tools button em { font-style: normal; font-size: 9px; background: var(--ink); color: #fff; border-radius: 5px; padding: 2px 5px; }
.side-tools button:hover { transform: translateX(3px); }
.online-chip { margin: 12px 0 0 2px; font: 10px var(--mono); letter-spacing: .06em; display: flex; align-items: center; gap: 7px; background: rgba(61, 42, 60, .85); color: #fff; padding: 6px 10px; border-radius: 999px; width: max-content; }

.chips-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.chips-row .env-chip { margin-top: 0; }
.event-chip { font: 9px var(--mono); letter-spacing: .06em; background: rgba(255, 253, 249, .92); border: 2px solid var(--ink); padding: 5px 10px; border-radius: 999px; }
.event-chip.live { background: var(--pink); color: #fff; animation: glowpink 1.4s infinite; }
.event-chip.live.koi_rush { background: linear-gradient(90deg, #f6c26b, #ffd45c); color: var(--ink); }
@keyframes glowpink { 50% { box-shadow: 0 0 0 5px rgba(242, 122, 155, .25); } }
.holder-chip { font: 9px var(--mono); letter-spacing: .06em; background: #fff6e0; border: 2px dashed var(--gold-deep); padding: 5px 10px; border-radius: 999px; }
.holder-chip.on { background: linear-gradient(90deg, #ffd88f, #ffe9b8); border-style: solid; border-color: var(--ink); }

.feed { top: 176px; }
.feed li.others { background: rgba(61, 42, 60, .9); color: #fff; border-color: rgba(255, 255, 255, .25); }
.feed li.others b { color: #ffc2d3; }

.basket { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; padding: 8px 8px 8px 14px; box-shadow: 0 5px 0 var(--ink); min-width: 330px; }
.basket.empty { display: none; }
.basket-info { flex: 1; }
.basket-info small { font: 8px var(--mono); letter-spacing: .1em; color: var(--ink-soft); display: block; }
.basket-info b { font: 700 18px var(--pixel); font-variant-numeric: tabular-nums; }
.basket-info b i { font-style: normal; font-size: 12px; color: var(--ink-soft); }
.basket-bar { height: 8px; border-radius: 4px; background: #f1e8e4; margin-top: 4px; overflow: hidden; border: 1px solid var(--line); }
.basket-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); transition: width .25s; }
.collect-btn { border: 3px solid var(--ink); border-radius: 10px; background: linear-gradient(180deg, #ffd88f, var(--gold)); font: 700 15px var(--pixel); letter-spacing: .08em; padding: 10px 16px; box-shadow: 0 4px 0 var(--ink); }
.collect-btn:disabled { filter: grayscale(.6); opacity: .65; }
.collect-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.basket.full { animation: wobble 1.2s infinite; }
.basket.full .basket-bar span { background: linear-gradient(90deg, var(--pink), var(--pink-deep)); }
.basket.full .collect-btn { background: linear-gradient(180deg, #ff9fb9, var(--pink)); color: #fff; }
@keyframes wobble { 0%, 100% { transform: translateX(-50%) rotate(0); } 25% { transform: translateX(-50%) rotate(-1.2deg); } 75% { transform: translateX(-50%) rotate(1.2deg); } }
.big-btn.fish { background: linear-gradient(180deg, #ffb3c8, var(--pink)); color: #fff; }
.big-btn.fish small { color: #fff; }
.float-text { position: fixed; z-index: 70; transform: translate(-50%, -10px); font: 700 22px var(--pixel); color: var(--gold-deep); -webkit-text-stroke: 1px var(--ink); pointer-events: none; animation: rise 1.4s ease-out forwards; }
@keyframes rise { to { transform: translate(-50%, -70px); opacity: 0; } }

/* équipage */
.inv-right { display: flex; align-items: center; gap: 6px; }
.wake-btn { border: 2px solid var(--ink); background: var(--gold); border-radius: 7px; font: 8px var(--mono); letter-spacing: .06em; padding: 4px 7px; box-shadow: 0 2px 0 var(--ink); }
.wake-btn:hover { background: #ffd88f; }
.inv-row.resting { background: #f7f3ff; }

/* améliorations */
.up-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.up-card { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: 0 4px 0 var(--line); }
.up-ic { width: 52px; height: 52px; display: grid; place-items: center; font-size: 26px; background: var(--pink-soft); border: 2px solid var(--ink); border-radius: 12px; }
.up-body h3 { margin: 0 0 4px; font: 700 16px var(--pixel); letter-spacing: .06em; }
.up-body p { margin: 6px 0 0; font-size: 12px; color: var(--ink-soft); }
.pips { display: flex; gap: 4px; }
.pips i { width: 16px; height: 8px; border-radius: 3px; background: #efe4df; border: 1px solid var(--line); }
.pips i.on { background: var(--mint); border-color: var(--ink); }
.up-card .hire { margin: 0; padding: 7px 10px; }
.up-max { font: 700 14px var(--pixel); background: var(--mint-soft); border: 2px solid var(--ink); border-radius: 8px; padding: 8px 12px; }
.holder-card { margin-top: 16px; border: 2px solid var(--ink); border-radius: 14px; padding: 14px 16px; background: linear-gradient(135deg, #fff6e0, #ffe9f0); }
.hc-head { display: flex; gap: 12px; align-items: center; }
.hc-head > span { font-size: 26px; }
.hc-head > div { flex: 1; }
.hc-head h3 { margin: 0; font: 700 18px var(--pixel); letter-spacing: .06em; }
.hc-head p { margin: 4px 0 0; font-size: 13px; }
.tiers { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 800; }
.tiers li { background: #fff; border: 2px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.tiers li b { font: 700 15px var(--pixel); color: var(--pink-deep); }
.tiers li.on { border-color: var(--ink); background: var(--mint-soft); }

/* boutons génériques en plus */
.main-btn.small { width: auto; padding: 8px 12px; font-size: 12px; text-decoration: none; white-space: nowrap; }
.main-btn.mint { background: linear-gradient(180deg, #8de0c4, var(--mint)); color: var(--ink); }
.main-btn.dark { background: var(--ink); color: #fff; text-align: center; text-decoration: none; display: block; }
a.pixel-btn { text-decoration: none; color: var(--ink); justify-content: center; }

/* pêche */
.fish-sheet { width: min(520px, calc(100vw - 24px)); }
.pond { position: relative; height: 250px; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom)); }
.pond-sky { position: absolute; inset: 0 0 52% 0; background: radial-gradient(circle at 80% 30%, rgba(255, 255, 255, .7) 0 22px, transparent 23px); }
.pond-water { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(180deg, #8fdcef, #5fb7d6); border-top: 3px solid #e3f6fb; }
body[data-phase="night"] .pond-water { background: linear-gradient(180deg, #3c4c86, #232a55); border-top-color: #6f80c4; }
body[data-event="koi_rush"] .pond-water { background: linear-gradient(180deg, #ffe08a, #f2b84a); }
.pond-water i { position: absolute; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .55); animation: drift 6s linear infinite; }
.pond-water i:nth-child(1) { width: 60px; top: 30%; left: 10%; }
.pond-water i:nth-child(2) { width: 90px; top: 60%; left: 55%; animation-duration: 9s; }
.pond-water i:nth-child(3) { width: 40px; top: 80%; left: 25%; animation-duration: 7s; }
@keyframes drift { from { transform: translateX(-30px); } to { transform: translateX(60px); } }
.line { position: absolute; left: 50%; top: -10px; width: 2px; height: 0; background: rgba(255, 255, 255, .9); transform-origin: top; transition: height .4s; }
.bobber { position: absolute; left: calc(50% - 13px); top: 44%; width: 26px; height: 34px; opacity: 0; transform: translateY(-120px) scale(.6); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; }
.bobber span { position: absolute; inset: 0; border-radius: 50% 50% 45% 45%; background: linear-gradient(180deg, #ff6f6f 0 50%, #fff 50%); border: 3px solid var(--ink); }
.bobber span::before { content: ''; position: absolute; left: 50%; top: -12px; width: 3px; height: 10px; background: var(--ink); transform: translateX(-50%); }
.ripple { position: absolute; left: 50%; top: calc(44% + 30px); width: 70px; height: 16px; margin-left: -35px; border: 3px solid rgba(255, 255, 255, .75); border-radius: 50%; opacity: 0; }
.bang { position: absolute; left: calc(50% + 22px); top: 22%; font: 700 46px var(--pixel); color: #fff; -webkit-text-stroke: 3px var(--ink); opacity: 0; transform: scale(.4); }
.pond.casting .line, .pond.waiting .line, .pond.bite .line, .pond.reeling .line { height: calc(44% + 12px); }
.pond.waiting .bobber, .pond.bite .bobber, .pond.reeling .bobber { opacity: 1; transform: none; animation: float 1.6s ease-in-out infinite; }
.pond.waiting .ripple { animation: rip 2.2s ease-out infinite; }
.bobber.nibble { animation: nib .35s ease-in-out !important; }
.pond.bite .bobber { animation: dive .5s ease-in-out infinite; }
.pond.bite .ripple { animation: rip .6s ease-out infinite; }
.pond.bite .bang { opacity: 1; transform: scale(1); transition: transform .15s; }
.pond.reeling .bobber { transform: translateY(-60px); transition: transform .3s; animation: none; }
@keyframes float { 50% { transform: translateY(4px); } }
@keyframes nib { 50% { transform: translateY(9px); } }
@keyframes dive { 0%, 100% { transform: translateY(14px); } 50% { transform: translateY(22px); } }
@keyframes rip { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(1.8); } }
.catch-card { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.cc { position: relative; background: var(--paper); border: 3px solid var(--rc, var(--ink)); border-radius: 14px; padding: 14px 22px 12px; text-align: center; box-shadow: 0 5px 0 var(--ink), 0 0 0 4px rgba(255, 255, 255, .5); animation: pop .3s ease-out; min-width: 190px; }
.cc img { width: 120px; height: 74px; image-rendering: pixelated; display: block; margin: 4px auto; }
.cc b { display: block; font: 700 19px var(--pixel); letter-spacing: .04em; }
.cc small { display: block; font: 9px var(--mono); letter-spacing: .1em; color: var(--rc, var(--ink-soft)); margin-top: 2px; }
.cc strong { display: block; margin-top: 6px; font: 700 16px var(--pixel); color: var(--gold-deep); }
.cc .new { position: absolute; left: -10px; top: -12px; background: var(--pink); color: #fff; font: 700 12px var(--pixel); padding: 3px 8px; border-radius: 6px; border: 2px solid var(--ink); transform: rotate(-8deg); }
.cc .q { position: absolute; right: -10px; top: -12px; font: 8px var(--mono); letter-spacing: .08em; padding: 4px 7px; border-radius: 6px; border: 2px solid var(--ink); background: #fff; }
.cc .q-perfect { background: var(--gold); }
.cc .q-good { background: var(--mint-soft); }
.cc.miss { border-color: var(--ink); }
.pond.legendary { box-shadow: 0 0 0 4px #ffd45c, 0 0 30px #ffd45c; }
.pond.epic { box-shadow: 0 0 0 4px #c07ee6; }
.fish-ctx { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font: 9px var(--mono); letter-spacing: .06em; margin: 12px 0 0; color: var(--ink-soft); }
.fish-ctx i { font-style: normal; opacity: .4; }
#fish-action.hot { background: linear-gradient(180deg, #ff9fb9, var(--pink)); color: #fff; animation: shake .25s infinite; }
@keyframes shake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }

/* collection */
.rarity-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 14px; font-size: 11px; font-weight: 800; }
.rarity-legend span { display: flex; align-items: center; gap: 5px; }
.rarity-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--rc); border: 1px solid var(--ink); }
.fish-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.fish-card { background: #fff; border: 2px solid var(--line); border-top: 5px solid var(--rc); border-radius: 12px; padding: 8px 6px; text-align: center; }
.fish-card img { width: 72px; height: 44px; image-rendering: pixelated; display: block; margin: 2px auto 4px; }
.fish-card b { display: block; font-size: 12px; font-weight: 900; line-height: 1.15; }
.fish-card small { display: block; font: 8px var(--mono); color: var(--ink-soft); margin-top: 3px; }
.fish-card em { display: block; font-style: normal; font-size: 10px; color: var(--ink-soft); margin-top: 4px; }
.fish-card.unknown { background: #faf6f3; }
.fish-card.unknown b { color: var(--ink-soft); }

/* invitation & partage */
.ref-box { display: flex; gap: 8px; align-items: center; border: 2px solid var(--ink); border-radius: 12px; padding: 6px 6px 6px 12px; background: #fff; }
.ref-box code { flex: 1; font: 11px var(--mono); overflow-wrap: anywhere; }
.share-preview { border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: repeating-linear-gradient(45deg, #fff3f6 0 12px, #ffe9ef 12px 24px); }
.share-preview { position: relative; }
.share-preview::before { content: 'Painting your island card…'; position: absolute; inset: 0; display: grid; place-items: center; font: 12px var(--mono); color: var(--ink-soft); }
.share-preview img { position: relative; width: 100%; height: 100%; display: block; object-fit: cover; }
.share-preview img:not([src]) { visibility: hidden; }
.share-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.share-actions .main-btn { font-size: 13px; }

/* classement */
.tabs { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.tabs button { border: 2px solid var(--ink); background: #fff; border-radius: 9px; padding: 7px 12px; font: 9px var(--mono); letter-spacing: .08em; }
.tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.tabs em { font-style: normal; opacity: .7; }
.my-rank { text-align: center; font-size: 13px; font-weight: 800; margin: 0 0 10px; min-height: 1em; }
.my-rank b { color: var(--pink-deep); }

/* bannière d'événement */
.event-banner { position: fixed; left: 50%; top: 92px; z-index: 55; display: flex; gap: 12px; align-items: center; transform: translate(-50%, -30px) scale(.9); opacity: 0; pointer-events: none; background: var(--pink); color: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 12px 20px; box-shadow: 0 6px 0 var(--ink); transition: all .35s cubic-bezier(.3, 1.5, .5, 1); }
.event-banner.koi_rush { background: linear-gradient(90deg, #f6c26b, #ffd45c); color: var(--ink); }
.event-banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.event-banner > span { font-size: 32px; }
.event-banner b { display: block; font: 700 22px var(--pixel); letter-spacing: .06em; }
.event-banner small { font-size: 13px; font-weight: 800; }

@media (max-width: 760px) {
  .hero-live { font-size: 11px; margin: -2px 0 8px; }
  .rank-line, .hud-left .link-btn.small { display: none; }
  .side-tools { position: fixed; left: 12px; top: 170px; margin: 0; gap: 6px; }
  .side-tools button { width: auto; padding: 5px; }
  .side-tools button b, .side-tools button em { display: none; }
  .online-chip { position: fixed; right: 12px; top: 14px; margin: 0; }
  .chips-row { justify-content: flex-end; }
  .chips-row .env-chip { display: none; }
  .feed { top: auto; bottom: 200px; }
  .basket { bottom: 120px; min-width: 0; left: 12px; right: 12px; transform: none; padding: 6px 6px 6px 10px; }
  @keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-1deg); } 75% { transform: rotate(1deg); } }
  .collect-btn { padding: 8px 12px; font-size: 13px; }
  .big-btn em { right: 6px; padding: 3px 6px; font-size: 11px; }
  .big-btn.inventory { padding-right: 34px; }
  .big-btn b { letter-spacing: .04em; }
  .up-grid { grid-template-columns: 1fr; }
  .up-card { grid-template-columns: 44px 1fr; }
  .up-card .hire, .up-card .up-max { grid-column: 1 / -1; justify-content: center; }
  .up-ic { width: 44px; height: 44px; font-size: 22px; }
  .fish-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pond { height: 220px; }
  .share-actions { grid-template-columns: 1fr; }
  .event-banner { top: 120px; width: calc(100vw - 24px); }
}

/* écrans d'ordinateur peu hauts */
@media (min-width: 761px) and (max-height: 720px) {
  .hero h1 { font-size: clamp(38px, 4.6vw, 58px); margin-bottom: 12px; }
  .whisper { display: none; }
  .lede { margin-bottom: 14px; }
  .play-btn { font-size: 21px; padding: 12px 22px; }
  .meta { margin: 10px 0 10px; }
}
/* nuit : texte clair sur ciel sombre */
body[data-phase="night"] .brand, body[data-phase="night"] .kicker, body[data-phase="night"] .whisper,
body[data-phase="night"] .meta, body[data-phase="night"] .link-btn, body[data-phase="night"] .chain-note { color: #fbeef4; }
body[data-phase="night"] .brand small { color: #d9c6dd; }
body[data-phase="night"] .lede { background: rgba(61, 42, 60, .55); color: #fff; }
body[data-phase="night"] .hero h1 { text-shadow: 0 5px 0 var(--ink), 0 10px 0 rgba(242, 122, 155, .8); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }