:root { color-scheme: light; font-family: "Trebuchet MS", system-ui, sans-serif; color: #3c2f22; background: #d9efe1; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; background: #d9efe1 url('/assets/backgroundColorForest.png') center top / 780px auto fixed; } button { font: inherit; cursor: pointer; } button:disabled { cursor: not-allowed; opacity: .45; }
[hidden] { display: none !important; }
.app-shell { width: min(1120px, calc(100% - 28px)); margin: 0 auto; padding: 24px 0 48px; }.hero { min-height: 184px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; padding: 22px 34px; border: 3px solid #755134; border-radius: 28px; background: linear-gradient(110deg, #f9e6ad 0%, #f4cb7d 58%, #a8d990 58%); box-shadow: 0 8px 0 #a87851; }.hero__copy { max-width: 610px; }.eyebrow { margin: 0 0 4px; color: #88572e; font-size: .76rem; font-weight: 900; letter-spacing: .13em; }h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(2rem, 5vw, 3.8rem); line-height: .92; color: #5c3820; }h1 span { display: block; color: #bf6a34; font-size: .47em; letter-spacing: .03em; }.hero p:not(.eyebrow) { max-width: 470px; margin: 14px 0 0; font-weight: 700; }.hero__niglo { align-self: end; width: min(200px, 28vw); margin: -3px 3vw -22px 10px; object-fit: contain; filter: drop-shadow(0 7px 0 rgba(79,68,45,.2)); }
.difficulty { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 26px 0 18px; padding: 13px 18px; border-radius: 18px; background: rgba(255,255,255,.84); box-shadow: 0 3px 13px rgba(45,77,48,.15); font-weight: 900; }.difficulty__buttons { display: flex; gap: 8px; flex-wrap: wrap; }.difficulty__button,.shop__item,.shop__continue { border: 2px solid #755134; border-radius: 12px; background: #fff2c9; color: #563823; font-weight: 900; box-shadow: 0 3px 0 #b37848; transition: transform .12s,box-shadow .12s; }.difficulty__button { padding: 8px 12px; }.difficulty__button.is-active { background: #91c772; border-color: #47783d; color: #173d22; box-shadow: 0 3px 0 #47783d; }button:not(:disabled):active { transform: translateY(3px); box-shadow: none; }
.world-map { margin-top: 26px; padding: 28px; border: 3px solid #755134; border-radius: 26px; background: rgba(255,250,232,.94); box-shadow: 0 7px 0 #b88a60; text-align: center; }.world-map__intro { max-width: 620px; margin: 0 auto 24px; }.world-map h2 { margin: 2px 0 8px; color: #684125; font-family: Georgia,serif; font-size: clamp(1.7rem,4vw,2.4rem); }.world-map__intro p:last-child { margin: 0; font-weight: 700; }.world-map__cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }.world-card { min-height: 245px; display: flex; flex-direction: column; align-items: flex-start; padding: 22px; border: 3px solid #755134; border-radius: 20px; color: #fff7dd; text-align: left; box-shadow: 0 6px 0 #7a5135; transition: transform .15s,filter .15s; }.world-card:hover { filter: brightness(1.08); transform: translateY(-3px); }.world-card span { font-size: .72rem; font-weight: 900; letter-spacing: .1em; }.world-card strong { margin: 9px 0; font-family: Georgia,serif; font-size: 1.65rem; line-height: 1; }.world-card small { font-size: .9rem; font-weight: 800; line-height: 1.45; }.world-card b { margin-top: auto; padding: 8px 13px; border-radius: 12px; background: #fff0bc; color: #604025; }.world-card--easy { background: linear-gradient(145deg,#80bd59,#3c7b46); }.world-card--normal { background: linear-gradient(145deg,#bf8d55,#7b5033); }.world-card--hard { background: linear-gradient(145deg,#5d8148,#264d3b); }.back-button { margin-bottom: 8px; border: 0; background: transparent; color: #755134; font-weight: 900; text-decoration: underline; }
.game-layout { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 22px; align-items: start; }.game-card,.info-card,.event-log { border: 3px solid #755134; border-radius: 22px; background: rgba(255,250,232,.96); box-shadow: 0 7px 0 #b88a60; }.game-card { padding: 16px; }.hud { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 5px 11px; }.hud__level { margin-right: auto; display: grid; text-transform: capitalize; }.hud__level span { color: #82654b; font-size: .76rem; font-weight: 900; }.hud__lives,.hud__money,.hud__shield { display: flex; align-items: center; gap: 2px; font-weight: 900; }.hud__lives img { width: 21px; height: 21px; object-fit: contain; }.hud__money img,.hud__shield img { width: 27px; height: 27px; object-fit: contain; }.message { min-height: 26px; color: #8a4e26; font-weight: 900; text-align: center; }
.board-frame { padding: 8px; overflow: auto; border: 5px solid #628c4e; border-radius: 18px; background: #547f45 url('/assets/dirt_grass.png') center / 90px; }.board { display: grid; grid-template-columns: repeat(var(--columns),minmax(24px,1fr)); width: min(100%,480px); min-width: 0; margin: auto; overflow: hidden; border: 3px solid #375c38; border-radius: 8px; background: #7caf5e; aspect-ratio: 1; }.tile { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; background: #bfdf82 url('/assets/tile_grassStones.png') center / cover; }.tile--wall { background: #436d3e url('/assets/bush.png') center / 105% 105%; box-shadow: inset 0 0 0 1px rgba(26,70,28,.5); }.tile.is-hint { box-shadow: inset 0 0 0 3px #f5e46f; }.tile.is-map { background-color: #d7efae; }.tile__niglo { width: 145%; height: 145%; object-fit: contain; transform: translateY(8%); filter: drop-shadow(0 2px 1px rgba(34,34,20,.35)); z-index: 3; }.tile__item { width: 78%; height: 78%; object-fit: contain; z-index: 2; }.tile__item--coin { animation: bob 1.2s ease-in-out infinite alternate; }.tile__exit { width: 90%; height: 125%; object-fit: contain; align-self: end; z-index: 2; }.tile__hole { width: 55%; height: 32%; border-radius: 50%; background: radial-gradient(ellipse,#312619 0 25%,#644327 31% 48%,#2a2419 52% 100%); box-shadow: 0 2px 0 #b4d374; }.tile__checkpoint { width: 35%; height: 35%; border-radius: 50% 50% 50% 0; background: #f9d967; transform: rotate(-45deg); box-shadow: 0 0 0 3px #9d642b; }@keyframes bob { to { transform: translateY(-8%); } }
.controls { display: grid; grid-template-columns: repeat(3,54px); gap: 7px; width: max-content; margin: 18px auto 7px; }.control { width: 54px; height: 48px; border: 2px solid #765033; border-radius: 14px; background: #f4c46f; color: #623d25; box-shadow: 0 4px 0 #af7444; font-weight: 900; }.control--up { grid-column: 2; }.control--left { grid-column: 1; grid-row: 2; }.control--down { grid-column: 2; grid-row: 2; }.control--right { grid-column: 3; grid-row: 2; }.keyboard-help { margin: 0; color: #806c59; font-size: .8rem; font-weight: 700; text-align: center; }
.shop { margin-top: 18px; padding: 16px; border: 3px dashed #bd8a45; border-radius: 15px; background: #fff0bc; text-align: center; }.shop:empty { display: none; }.shop h2 { margin: 0; font-family: Georgia,serif; color: #8a4e26; }.shop p { margin: 5px 0 12px; font-size: .9rem; }.shop__items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.shop__item,.shop__continue { padding: 9px 10px; font-size: .86rem; }.shop__item { display: flex; align-items: center; gap: 7px; min-height: 70px; text-align: left; }.shop__icon { width: 42px; height: 42px; flex: 0 0 42px; object-fit: contain; }.shop__copy { display: grid; gap: 2px; }.shop__copy strong { font-size: .82rem; }.shop__copy small { font-size: .67rem; line-height: 1.15; }.shop__copy b { color: #a55327; font-size: .75rem; }.shop__continue { margin-top: 14px; background: #91c772; border-color: #47783d; color: #173d22; box-shadow: 0 3px 0 #47783d; }
.side-column { display: grid; gap: 16px; }.info-card { position: relative; overflow: hidden; padding: 21px 18px; }.info-card__mascot { position: absolute; width: 100px; right: -13px; top: -7px; opacity: .82; }.info-card h2 { position: relative; max-width: 160px; margin: 0 0 17px; font-family: Georgia,serif; color: #684125; }.info-card ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: .88rem; font-weight: 800; }.legend-dot { display: inline-block; width: 12px; height: 12px; margin-right: 4px; border-radius: 50%; vertical-align: -1px; }.legend-dot--coin { background: #f2be35; box-shadow: 0 0 0 2px #b57223; }.legend-dot--spike { background: #6e7880; }.legend-dot--safe { background: #f8da5b; }.event-log { padding: 13px; }.event-log summary { cursor: pointer; color: #755134; font-weight: 900; }.event-log #log { max-height: 220px; margin-top: 12px; overflow: auto; color: #526b50; font-family: ui-monospace,monospace; font-size: .68rem; line-height: 1.45; white-space: pre-wrap; }
@media (max-width: 800px) { .game-layout { grid-template-columns: 1fr; }.side-column { grid-template-columns: 1fr 1fr; }.hero { min-height: 155px; padding: 20px; }.hero__niglo { width: 150px; }.difficulty { align-items: flex-start; flex-direction: column; }.world-map__cards { grid-template-columns: 1fr; }.world-card { min-height: 160px; } }@media (max-width: 520px) { .app-shell { width: min(100% - 16px,1120px); padding-top: 8px; }.hero { border-radius: 20px; }.hero__niglo { display: none; }.difficulty { margin: 16px 0; }.difficulty__buttons { width: 100%; }.difficulty__button { flex: 1; padding: 8px 5px; font-size: .78rem; }.world-map { margin-top: 14px; padding: 20px 14px; }.game-card { padding: 10px; }.hud { gap: 7px; }.hud__level { font-size: .8rem; }.hud__lives img { width: 17px; height: 17px; }.hud__money img,.hud__shield img { width: 22px; height: 22px; }.board-frame { padding: 5px; }.board { width: min(100%,360px); }.shop__items { grid-template-columns: 1fr; }.side-column { grid-template-columns: 1fr; }.info-card { display: none; } }

.world-card em { margin-top: 13px; font-style: normal; font-size: .84rem; font-weight: 900; }
.world-card__stars { margin-top: 7px; color: #ffe37a; font-size: 1.2rem; letter-spacing: .06em; text-shadow: 0 2px 0 rgba(74,50,25,.45); }
.hero { position: relative; }.sound-toggle { position: absolute; right: 20px; top: 20px; padding: 7px 10px; border: 2px solid #755134; border-radius: 12px; background: #fff2c9; color: #5d3b24; font-size: .8rem; font-weight: 900; }.how-to-play { margin: 15px auto 0 !important; padding: 10px 13px; border-radius: 12px; background: #e4f2d2; color: #405c35; font-size: .88rem; font-weight: 800; }
.outcome-modal { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(34,61,38,.62); }.outcome-card { width: min(100%,440px); padding: 26px; border: 4px solid #755134; border-radius: 26px; background: #fff5d5; box-shadow: 0 10px 0 #a87851; text-align: center; }.outcome-card img { width: 150px; height: 150px; object-fit: contain; margin: -62px auto 4px; filter: drop-shadow(0 5px 0 rgba(67,51,31,.18)); }.outcome-card h2 { margin: 3px 0 8px; color: #684125; font-family: Georgia,serif; font-size: 2rem; }.outcome-card p:not(.eyebrow) { margin: 0; font-size: 1.06rem; font-weight: 800; line-height: 1.45; }

/* La carte reste lisible, et les trois zones restent de vrais boutons. */
.world-map {
  min-height: 610px;
  background: linear-gradient(rgba(255,250,232,.86), rgba(255,250,232,.66)), url('/assets/world-map-v1.png') center / cover;
}
.world-map__cards { max-width: 890px; margin: 210px auto 0; }
.world-card { background-blend-mode: multiply; }
@media (max-width: 800px) {
  .world-map { min-height: 0; background-position: center top; }
  .world-map__cards { margin-top: 34px; }
}

@media (min-width: 801px) {
  .world-map { position: relative; overflow: hidden; }
  .world-map__intro { position: relative; z-index: 2; padding: 15px 22px; border-radius: 18px; background: rgba(255,250,232,.86); }
  .world-map__cards { position: absolute; z-index: 3; inset: 0; max-width: none; margin: 0; display: block; }
  .world-card { position: absolute; width: 190px; min-height: 0; padding: 13px; border-radius: 16px; box-shadow: 0 5px 0 #7a5135; }
  .world-card strong { margin: 5px 0; font-size: 1.22rem; }
  .world-card small { display: none; }
  .world-card em { margin-top: 6px; font-size: .74rem; }
  .world-card__stars { margin-top: 3px; font-size: .95rem; }
  .world-card b { margin-top: 8px; padding: 5px 9px; font-size: .82rem; }
  .world-card--easy { left: 7%; top: 66%; }
  .world-card--normal { left: 42%; top: 42%; }
  .world-card--hard { right: 7%; top: 17%; }
}

/* Plateau : un vrai chemin clair et des haies faciles à repérer. */
.board-frame { padding: 10px; border-color: #315b3b; background: #23472f; }
.board {
  border-color: #1d3d28;
  border-radius: 14px;
  background: #b8e889;
  box-shadow: 0 8px 20px rgba(26,61,35,.28);
}
.tile {
  overflow: visible;
  background: linear-gradient(135deg, #dff5ae 0%, #bde58a 100%);
  border: 1px solid rgba(59,112,58,.22);
  cursor: pointer;
}
.tile::after {
  content: '';
  position: absolute;
  width: 14%; height: 14%;
  border-radius: 50%;
  background: rgba(67,125,58,.16);
  box-shadow: 22px 10px 0 rgba(67,125,58,.12), -17px 20px 0 rgba(67,125,58,.1);
}
.tile--wall {
  overflow: visible;
  z-index: 1;
  background-color: #2c5334;
  background-image: var(--hedge-img);
  background-size: cover;
  background-position: center;
  border: none;
  cursor: default;
  image-rendering: pixelated;
  box-shadow: inset 0 -5px 0 rgba(18,40,22,.4), inset 0 4px 0 rgba(214,247,158,.22), 0 2px 3px rgba(15,35,20,.35);
}
.tile--wall::before { display: none; }
.tile--wall::after { display: none; }
.tile__niglo {
  width: 116%; height: 134%;
  transform: translateY(12%);
  filter: drop-shadow(0 3px 2px rgba(29,52,23,.38));
}
.tile__item, .tile__exit, .tile__checkpoint, .tile__hole { z-index: 4; }
.message { min-height: 38px; padding: 5px 10px; color: #365f37; }

/* Accueil : la carte est le décor principal, les mondes restent très lisibles. */
.world-map {
  background: linear-gradient(rgba(255,250,232,.45), rgba(255,250,232,.2)), url('/assets/world-map-v1.png') center / cover;
}
@media (min-width: 801px) {
  .world-map__intro { background: rgba(255,250,232,.94); box-shadow: 0 5px 16px rgba(62,81,44,.18); }
  .world-card { width: 205px; padding: 15px; box-shadow: 0 6px 0 #70462e, 0 9px 18px rgba(44,51,31,.28); }
  .world-card--easy { left: 7%; top: 65%; }
  .world-card--easy b::before { content: 'Commencer '; }
  .world-card--easy b { font-size: 0; }
  .world-card--easy b::before { font-size: .82rem; }
}

/* La boutique arrive au centre : elle ne se cache plus sous le plateau. */
.shop:not(:empty) {
  position: fixed;
  z-index: 20;
  top: 50%; left: 50%;
  width: min(92vw, 580px);
  max-height: min(82vh, 680px);
  margin: 0;
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 4px solid #755134;
  border-radius: 24px;
  background: #fff3cf;
  box-shadow: 0 0 0 100vmax rgba(28,55,35,.62), 0 11px 0 #a87851;
}

/* Écran de jeu final : progression, plateau, mission. */
.game-layout {
  grid-template-columns: 210px minmax(0, 1fr) 255px;
  gap: 18px;
}
body.is-playing .hero { display: none; }
body.is-playing .app-shell { padding-top: 18px; }
.level-panel {
  overflow: hidden;
  padding: 18px 14px;
  border: 3px solid #755134;
  border-radius: 22px;
  background: #fff4ce;
  box-shadow: 0 7px 0 #b88a60;
}
.level-panel h2 { margin: 3px 0 8px; color: #684125; font-family: Georgia, serif; font-size: 1.55rem; line-height: 1.05; }
.level-panel__help { margin: 0 0 17px; color: #67533f; font-size: .82rem; font-weight: 800; line-height: 1.35; }
.level-list { display: grid; gap: 9px; }
.level-step { display: flex; align-items: center; gap: 9px; min-height: 45px; padding: 5px 8px 5px 5px; border: 2px solid #b69562; border-radius: 15px; background: rgba(255,249,220,.88); color: #80654a; font-size: .78rem; font-weight: 900; }
.level-step__number { display: grid; width: 32px; height: 32px; place-items: center; flex: 0 0 32px; border: 2px solid #765033; border-radius: 50%; background: #e4b95d; color: #5c3820; box-shadow: 0 2px 0 #a67138; font-family: Georgia, serif; font-size: 1.05rem; }
.level-step.is-current { border-color: #427b40; background: #dff2b7; color: #2d5e34; }
.level-step.is-current .level-step__number { background: #8ec85d; border-color: #427b40; color: #153d22; box-shadow: 0 2px 0 #427b40; }
.level-step.is-done .level-step__number { background: #f4c85b; }
.level-panel__map { width: 100%; margin-top: 17px; padding: 9px; border: 2px solid #765033; border-radius: 12px; background: #fff0bb; color: #654229; font-weight: 900; }
.game-card { padding: 18px; }
.hud { min-height: 52px; padding-bottom: 13px; border-bottom: 2px solid #e9d6a3; }
.hud__level strong { color: #583b26; font-size: 1.03rem; }
.board-frame { background: #1d432b; }
.side-column { gap: 14px; }
.info-card { min-height: 205px; background: #fff7dc; }
.info-card__mascot { width: 105px; right: -17px; top: -4px; }
@media (max-width: 1000px) {
  .game-layout { grid-template-columns: minmax(0, 1fr) 250px; }
  .level-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 10px 20px; align-items: center; }
  .level-panel .eyebrow, .level-panel h2, .level-panel__help { margin: 0; }
  .level-list { grid-column: 1 / -1; grid-template-columns: repeat(5, 1fr); }
  .level-step { justify-content: center; padding: 5px; }
  .level-step__copy { display: none; }
  .level-panel__map { grid-column: 2; grid-row: 1 / 3; width: auto; margin: 0; }
}
@media (max-width: 650px) {
  .game-layout { grid-template-columns: 1fr; }
  .side-column { display: none; }
  .level-panel { grid-column: auto; }
  .game-card { padding: 10px; }
  .level-panel__map { font-size: .76rem; }
  .level-step__number { width: 28px; height: 28px; flex-basis: 28px; font-size: .92rem; }
}