* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #8fd3ff; font-family: Fredoka, "Arial Rounded MT Bold", sans-serif; color: #fff; user-select: none; }
#game canvas { display: block; }
.hidden { display: none !important; }

.outline { -webkit-text-stroke: 1px #000; }
#hud, #floaters { position: fixed; inset: 0; pointer-events: none; }
#hud button { pointer-events: auto; }

.pill { background: rgba(0,0,0,.45); border-radius: 999px; padding: 6px 16px; font-weight: 700; font-size: 18px; text-shadow: 0 2px 0 #000; }
#topbar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; white-space: nowrap; }
#zone .req-ok { color: #7cfc00; }
#zone .req-ko { color: #ff5252; }

#run { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); background: #8b0000; border: 4px solid #ff3b3b; border-radius: 18px; padding: 6px 48px; font-size: 52px; font-weight: 700; text-shadow: 0 3px 0 #000; animation: pulse .5s infinite alternate; }
@keyframes pulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.08); } }

#banner { position: absolute; top: 150px; left: 50%; transform: translateX(-50%); font-size: 30px; font-weight: 700; text-align: center; text-shadow: 0 3px 0 #000, 0 0 12px #000; opacity: 0; width: 90%; }
#banner.show { animation: bannerAnim 5s forwards; }
@keyframes bannerAnim { 0% { opacity: 0; transform: translateX(-50%) scale(.6); } 8% { opacity: 1; transform: translateX(-50%) scale(1.05); } 12% { transform: translateX(-50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }

#menu { position: absolute; left: 12px; top: 50%; transform: translateY(-58%); display: grid; grid-template-columns: repeat(2, 92px); gap: 8px; }
.mbtn { width: 92px; padding: 8px 4px; border: 3px solid #000; border-radius: 16px; background: linear-gradient(#ffd54f, #ff9800); color: #fff; font: 700 15px Fredoka, sans-serif; text-shadow: 0 2px 0 #000; cursor: pointer; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 0 #000; }
.mbtn span { font-size: 28px; text-shadow: none; }
.mbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
#btnIndex { background: linear-gradient(#a1887f, #6d4c41); }
#btnFuse { background: linear-gradient(#ce93d8, #8e24aa); }
#btnRebirth { background: linear-gradient(#80d8ff, #1e88e5); }
#btnLock { background: linear-gradient(#ef9a9a, #c62828); }
#btnLock.locked { background: linear-gradient(#a5d6a7, #2e7d32); }
#btnLock.cooldown { filter: grayscale(.8); }
#btnMulti { background: linear-gradient(#80cbc4, #00897b); }
#btnHatch { background: linear-gradient(#fff59d, #f9a825); }
#btnZones { background: linear-gradient(#b388ff, #5e35b1); }
#btnQuests { background: linear-gradient(#ffcc80, #e65100); }
#btnChat { background: linear-gradient(#81d4fa, #0277bd); }
#btnAdmin { background: linear-gradient(#b0bec5, #37474f); }
#btnGames { background: linear-gradient(#f48fb1, #ad1457); }
#btnEmotes { background: linear-gradient(#ffe082, #ff8f00); }
#btnSlow { background: linear-gradient(#c5e1a5, #558b2f); }
#btnSlow.on { background: linear-gradient(#76ff03, #1b5e20); box-shadow: 0 4px 0 #000, 0 0 0 3px #76ff03; }
#btnMore { background: linear-gradient(#90a4ae, #455a64); }
#eventPill { background: rgba(74,20,140,.8); color: #fff59d; }
.mbtn { position: relative; }
.mbtn.notify::after { content: '!'; position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: #ff1744; border: 2px solid #000; font-size: 14px; line-height: 18px; animation: pulseDot .6s infinite alternate; }
@keyframes pulseDot { to { transform: scale(1.2); } }
#restock.warn { background: rgba(200,0,0,.75); animation: pulseDot .5s infinite alternate; }
#abusePill { background: linear-gradient(90deg, #6a1b9a, #d81b60); color: #ffeb3b; border: 2px solid #000; }

/* Messagerie (multijoueur) */
#chat { position: absolute; right: 12px; bottom: 12px; width: min(380px, 45vw); display: flex; flex-direction: column; gap: 6px; }
#chatLog { display: flex; flex-direction: column; gap: 3px; max-height: 220px; overflow: hidden; }
.chat-msg { background: rgba(0,0,0,.5); border-radius: 8px; padding: 4px 10px; font-size: 16px; font-weight: 600; text-shadow: 0 1px 0 #000; word-wrap: break-word; transition: opacity 1s; }
.chat-msg.old { opacity: .35; }
#chatInput { pointer-events: auto; font: 600 16px Fredoka, sans-serif; padding: 8px 10px; border: 3px solid #000; border-radius: 10px; user-select: text; -webkit-user-select: text; }
.stat.gems b { color: #80deea; }
.btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bar.small { height: 8px; margin: 4px 0; }
#mpPill { color: #80d8ff; pointer-events: auto; cursor: pointer; }
.inp { font: 600 18px Fredoka, sans-serif; padding: 6px 10px; border: 3px solid #000; border-radius: 10px; width: 170px; max-width: 100%; user-select: text; -webkit-user-select: text; }
.inp.code { text-transform: uppercase; letter-spacing: 3px; margin-top: 6px; }
.room-code { font-size: 28px; letter-spacing: 4px; color: #ffeb3b; text-shadow: 0 2px 0 #000; user-select: text; -webkit-user-select: text; }
.link { word-break: break-all; user-select: text; -webkit-user-select: text; }
.mbtn.small { padding: 4px; }
.mbtn.small span { font-size: 18px; }

#stats { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.stat { display: flex; align-items: center; gap: 8px; font-size: 34px; font-weight: 700; text-shadow: 0 3px 0 #000; }
.stat span { font-size: 38px; text-shadow: none; }
.stat small { font-size: 18px; opacity: .95; }
.stat.money b { color: #7cfc00; }
.stat.money small { color: #b9ff8a; }

#prompt { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); background: rgba(0,0,0,.6); padding: 8px 18px; border-radius: 12px; font-size: 22px; font-weight: 700; }
#prompt kbd { background: #fff; color: #000; border-radius: 6px; padding: 0 8px; margin-right: 6px; box-shadow: 0 3px 0 #888; }
#carry { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); background: rgba(0,0,0,.55); padding: 8px 18px; border-radius: 12px; font-size: 20px; font-weight: 600; text-align: center; }

#toasts { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; max-width: min(420px, 70vw); }
.toast { background: rgba(0,0,0,.7); border-left: 6px solid #fff; padding: 8px 14px; border-radius: 10px; font-size: 17px; font-weight: 600; animation: toastIn .25s; transition: opacity .5s, transform .5s; }
.toast.good { border-color: #7cfc00; }
.toast.bad { border-color: #ff5252; }
.toast.info { border-color: #40c4ff; }
.toast.out { opacity: 0; transform: translateX(30px); }
@keyframes toastIn { from { transform: translateX(40px); opacity: 0; } }

#flash { position: absolute; inset: 0; background: #ff0000; opacity: 0; transition: opacity .6s; }
#flash.on { opacity: .45; transition: none; }

.floater { position: absolute; left: 0; top: 0; font-weight: 700; font-size: 22px; text-shadow: 0 2px 0 #000, 0 0 6px #000; white-space: nowrap; will-change: transform; }
.floater.fly { font-size: 26px; }

/* Bouton de combo du tapis (x2, x3…) */
#combo { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; width: 86px; height: 86px; border-radius: 50%; border: 4px solid #000; background: radial-gradient(#fff59d, #ff9100); color: #fff; font: 700 34px Fredoka, sans-serif; text-shadow: 0 3px 0 #000; box-shadow: 0 5px 0 #000, 0 0 24px #ffeb3b; animation: comboPop .5s infinite alternate; cursor: pointer; z-index: 5; }
@keyframes comboPop { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(1.15); } }

/* Présentation */
#intro { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(circle at 50% 40%, #3949ab, #0d0f2b 70%); text-align: center; padding: 20px; }
.intro-studio { font-size: 26px; font-weight: 600; color: #b0bec5; letter-spacing: 1px; opacity: 0; animation: introFade 1.6s .2s forwards; }
.intro-title { font-size: 64px; font-weight: 700; text-shadow: 0 5px 0 #000, 0 0 30px #ff9800; opacity: 0; transform: scale(.4); animation: introPop .8s 1.8s forwards; }
.intro-title span { color: #ffd54f; display: block; font-size: 44px; }
.intro-sub { font-size: 20px; color: #80deea; opacity: 0; animation: introFade 1s 2.6s forwards; }
.intro-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; opacity: 0; animation: introFade .8s 2.9s forwards; }
.big-play { font-size: 28px; padding: 12px 36px; }
@keyframes introFade { to { opacity: 1; } }
@keyframes introPop { 60% { opacity: 1; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }

/* Interdiction */
#ban { position: fixed; inset: 0; z-index: 40; background: rgba(40,0,0,.92); display: flex; align-items: center; justify-content: center; }
.ban-box { text-align: center; background: #2b2d42; border: 4px solid #000; border-radius: 20px; padding: 24px 32px; }
.ban-time { font-size: 48px; font-weight: 700; color: #ff5252; }

/* Téléphone des mini-jeux */
#phone { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); }
.phone-body { height: min(92vh, 720px); aspect-ratio: 9 / 17; max-width: 96vw; background: #111; border: 4px solid #000; border-radius: 34px; padding: 12px 10px 18px; display: flex; flex-direction: column; box-shadow: 0 10px 0 #000, inset 0 0 0 3px #444; }
.phone-top { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 8px; font-weight: 700; }
.phone-close { width: 34px; height: 34px; border-radius: 10px; border: 3px solid #000; background: #e53935; color: #fff; font: 700 18px Fredoka, sans-serif; cursor: pointer; }
.phone-screen { flex: 1; overflow-y: auto; scroll-snap-type: y mandatory; border-radius: 18px; background: #263238; }
.phone-home { width: 90px; height: 6px; border-radius: 3px; background: #555; margin: 10px auto 0; }
.mg-card { height: 100%; scroll-snap-align: start; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; gap: 4px; }
.mg-title { font-size: 20px; font-weight: 700; }
.mg-card canvas { width: 100%; max-height: calc(100% - 64px); object-fit: contain; border-radius: 12px; background: #fff; touch-action: none; }
.mg-over { position: absolute; left: 10%; right: 10%; top: 30%; background: rgba(0,0,0,.78); border-radius: 16px; padding: 12px; text-align: center; }
.mg-card.playing .mg-over { display: none; }
.mg-hint { font-size: 13px; opacity: .8; }

/* Contenus des panneaux */
.grid-btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.btn.big { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; white-space: normal; }
.btn.big span { font-size: 28px; text-shadow: none; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tabs .btn { padding: 6px 10px; font-size: 14px; }
.inp.small { width: 110px; }
.inp.area { width: 100%; resize: vertical; font-size: 16px; }
select.inp { width: auto; min-width: 140px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: 15px; }
.checks input { transform: scale(1.3); margin-right: 4px; }
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.skin { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 3px solid #000; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; font: 700 14px Fredoka, sans-serif; cursor: pointer; }
.skin i { width: 34px; height: 54px; border-radius: 6px; border: 2px solid #000; }
.skin.on { background: rgba(124,252,0,.25); border-color: #7cfc00; }
.ghost-btn { background: none; border: none; color: rgba(255,255,255,.12); font-size: 18px; cursor: pointer; padding: 2px 8px; }
.npc-talk { font-size: 19px; background: rgba(255,255,255,.1); border-radius: 12px; padding: 10px 14px; }
.row.locked { opacity: .55; }

/* Panneaux */
#panel { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.panel-box { width: min(720px, 100%); max-height: 86vh; display: flex; flex-direction: column; background: #2b2d42; border: 4px solid #000; border-radius: 20px; box-shadow: 0 8px 0 #000; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: linear-gradient(#5c6bc0, #3949ab); border-bottom: 4px solid #000; }
.panel-head h2 { margin: 0; font-size: 30px; text-shadow: 0 3px 0 #000; }
#panelClose { width: 44px; height: 44px; border-radius: 12px; border: 3px solid #000; background: #e53935; color: #fff; font: 700 22px Fredoka, sans-serif; cursor: pointer; box-shadow: 0 3px 0 #000; }
#panelBody { padding: 14px 16px; overflow-y: auto; font-size: 17px; }
#panelBody h3 { margin: 14px 0 8px; font-size: 21px; }
#panelBody h3:first-child { margin-top: 0; }
#panelBody p { margin: 6px 0; line-height: 1.4; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(255,255,255,.07); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.row .grow { flex: 1; }
.row small { opacity: .8; }
.btn { border: 3px solid #000; border-radius: 12px; padding: 8px 14px; font: 700 16px Fredoka, sans-serif; color: #fff; background: linear-gradient(#66bb6a, #2e7d32); cursor: pointer; text-shadow: 0 2px 0 #000; box-shadow: 0 3px 0 #000; white-space: nowrap; }
.btn:disabled { filter: grayscale(1) brightness(.7); cursor: not-allowed; }
.btn.red { background: linear-gradient(#ef5350, #c62828); }
.btn.blue { background: linear-gradient(#42a5f5, #1565c0); }
.tag { font-weight: 700; padding: 2px 8px; border-radius: 8px; background: rgba(0,0,0,.35); }
.idx-biome { margin-bottom: 12px; }
.idx-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.idx-card { border: 3px solid #000; border-radius: 10px; padding: 6px 4px; text-align: center; font-size: 13px; font-weight: 700; min-height: 54px; display: flex; flex-direction: column; justify-content: center; text-shadow: 0 1px 0 #000; }
.idx-card.unknown { filter: brightness(.45); }
.req { display: flex; gap: 8px; align-items: center; }
.bar { height: 14px; background: rgba(0,0,0,.4); border-radius: 8px; overflow: hidden; margin: 6px 0 12px; }
.bar > div { height: 100%; background: linear-gradient(90deg, #7cfc00, #00c853); }
.keys td { padding: 3px 10px 3px 0; }
.keys kbd { background: #fff; color: #000; border-radius: 6px; padding: 1px 7px; box-shadow: 0 2px 0 #888; font-family: inherit; }

@media (max-height: 820px) {
  #menu { grid-template-columns: repeat(3, 84px); }
  .mbtn { width: 84px; padding: 6px 3px; }
  .mbtn span { font-size: 24px; }
}

@media (max-width: 640px) {
  .mbtn { width: 70px; font-size: 12px; }
  #menu { grid-template-columns: repeat(2, 70px); }
  .mbtn span { font-size: 20px; }
  .stat { font-size: 24px; }
  .stat span { font-size: 26px; }
  #run { font-size: 32px; padding: 4px 24px; }
  .idx-grid { grid-template-columns: repeat(3, 1fr); }
  #topbar { top: 6px; }
  .pill { font-size: 14px; }
}

/* ---------- Contrôles tactiles ---------- */
#game canvas { touch-action: none; }
#hud button, #panel { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#touch { display: none; }

body.touch #touch { display: block; }
#joy { position: absolute; left: calc(20px + env(safe-area-inset-left)); bottom: calc(20px + env(safe-area-inset-bottom)); width: 140px; height: 140px; border-radius: 50%; background: rgba(0,0,0,.25); border: 3px solid rgba(255,255,255,.5); pointer-events: auto; touch-action: none; display: flex; align-items: center; justify-content: center; }
#joyKnob { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.85); border: 3px solid #000; box-shadow: 0 3px 0 #000; }
#tbtns { position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 72px 86px; grid-template-rows: 72px 72px; gap: 10px; }
.tbtn { pointer-events: auto; touch-action: none; border: 3px solid #000; border-radius: 50%; color: #fff; font: 700 12px Fredoka, sans-serif; text-shadow: 0 1px 0 #000; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 0 #000; padding: 0; }
.tbtn span { font-size: 26px; line-height: 1; text-shadow: none; }
.tbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
#tAct { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 86px; height: 86px; background: linear-gradient(#66bb6a, #2e7d32); }
#tAct.ready { animation: actPulse .7s infinite alternate; }
@keyframes actPulse { to { box-shadow: 0 4px 0 #000, 0 0 0 6px rgba(124,252,0,.6); } }
#tHit { grid-column: 1; grid-row: 1; background: linear-gradient(#ef5350, #c62828); }
#tJump { grid-column: 1; grid-row: 2; background: linear-gradient(#42a5f5, #1565c0); }
#tHit.drop { background: linear-gradient(#ffb74d, #ef6c00); }

/* Mise en page compacte : menu en grille en haut à gauche, infos en haut à droite. */
body.touch #menu { top: calc(8px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); transform: none; display: grid; grid-template-columns: repeat(3, 50px); gap: 6px; }
body.touch .mbtn { width: 50px; padding: 3px 1px; font-size: 9px; border-radius: 12px; box-shadow: 0 3px 0 #000; }
body.touch .mbtn span { font-size: 20px; }
body.touch #stats { top: calc(292px + env(safe-area-inset-top)); bottom: auto; left: calc(10px + env(safe-area-inset-left)); gap: 0; }
body.touch .stat { font-size: 20px; gap: 4px; }
body.touch .stat span { font-size: 20px; }
body.touch .stat small { font-size: 12px; }
body.touch #topbar { left: auto; right: calc(8px + env(safe-area-inset-right)); top: calc(8px + env(safe-area-inset-top)); transform: none; flex-direction: column; align-items: flex-end; gap: 4px; }
body.touch .pill { font-size: 13px; padding: 4px 10px; }
body.touch #toasts { top: calc(104px + env(safe-area-inset-top)); right: 8px; max-width: 55vw; gap: 4px; }
body.touch .toast { font-size: 12px; padding: 5px 9px; }
body.touch #run { top: 8px; font-size: 26px; padding: 2px 18px; border-width: 3px; }
body.touch #banner { top: 60px; font-size: 18px; }
body.touch #prompt { pointer-events: auto; bottom: calc(190px + env(safe-area-inset-bottom)); font-size: 16px; max-width: 90vw; text-align: center; border: 2px solid #7cfc00; }
body.touch #carry { bottom: calc(170px + env(safe-area-inset-bottom)); font-size: 13px; max-width: 70vw; padding: 5px 10px; }
body.touch .floater { font-size: 15px; }
body.touch #chat { right: auto; left: calc(10px + env(safe-area-inset-left)); top: calc(392px + env(safe-area-inset-top)); bottom: auto; width: 60vw; }
body.touch #abusePill { font-size: 11px; max-width: 150px; white-space: normal; text-align: right; }
body.touch .chat-msg { font-size: 12px; padding: 3px 8px; }
body.touch #chatLog { max-height: 110px; }
body.touch #chatInput { font-size: 16px; }
body.touch #combo { width: 70px; height: 70px; font-size: 28px; }
body.touch .intro-title { font-size: 40px; }
body.touch .intro-title span { font-size: 28px; }
body.touch .intro-studio { font-size: 18px; }
body.touch .mbtn.notify::after { width: 16px; height: 16px; font-size: 11px; line-height: 13px; top: -4px; right: -4px; }

/* Téléphone en paysage : peu de hauteur. */
@media (max-height: 500px) {
  body.touch #joy { width: 120px; height: 120px; }
  body.touch #tbtns { grid-template-columns: 62px 76px; grid-template-rows: 62px 62px; }
  body.touch #tAct { width: 76px; height: 76px; }
  body.touch #chat { top: auto; bottom: calc(70px + env(safe-area-inset-bottom)); left: calc(150px + env(safe-area-inset-left)); width: 36vw; }
  body.touch #chatLog { max-height: 70px; }
  body.touch #menu { grid-template-columns: repeat(4, 46px); gap: 4px; }
  body.touch .mbtn { width: 46px; font-size: 8px; }
  body.touch .mbtn span { font-size: 17px; }
  body.touch #stats { top: calc(8px + env(safe-area-inset-top)); left: calc(212px + env(safe-area-inset-left)); }
  body.touch #prompt { bottom: calc(14px + env(safe-area-inset-bottom)); }
  body.touch #carry { bottom: calc(60px + env(safe-area-inset-bottom)); }
  .panel-box { max-height: 94vh; }
  .phone-body { height: 96vh; aspect-ratio: auto; width: min(440px, 70vw); padding: 6px 8px 8px; border-radius: 22px; }
  .phone-top { padding-bottom: 4px; }
  .phone-home { display: none; }
  .mg-title { font-size: 15px; }
  .mg-over { top: 15%; font-size: 13px; padding: 8px; }
  .mg-hint { display: none; }
  .panel-head h2 { font-size: 22px; }
  #panelBody { font-size: 14px; padding: 8px 12px; }
}