:root {
  --ink: #2e2011;
  --brown: #4d3a22;
  --brown-2: #6b5231;
  --parch: #efe4c2;
  --parch-2: #dfd0a4;
  --parch-3: #c9b783;
  --text: #3a2c18;
  --muted: #7d6a48;
  --orange: #f58412;
  --orange-2: #d9620a;
  --yellow: #ffd23f;
  --green: #5f9320;
  --danger: #b3261e;
  --display: 'Lilita One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  --body: 'Nunito', Verdana, Geneva, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #3d6ea8;
  color: var(--text);
  font-family: var(--body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
[hidden] { display: none !important; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; cursor: grab; }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible, input:focus-visible { outline: 3px solid #2f7de0; outline-offset: 2px; }
.primary {
  font-family: var(--display); font-size: 1rem; letter-spacing: .03em; color: #fff;
  padding: .55em 1.3em .6em; border-radius: 9px; border: 2px solid var(--ink);
  background: linear-gradient(180deg, #ffa53a, var(--orange) 50%, var(--orange-2));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--ink);
  text-shadow: 0 2px 0 rgba(90, 40, 0, .65);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.primary:hover { filter: brightness(1.08); }
.primary:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 var(--ink); }
.primary:disabled { filter: grayscale(.8); cursor: wait; }
.ghost {
  font-weight: 800; font-size: .78rem; color: var(--brown); padding: .5em .9em; border-radius: 8px;
  border: 2px solid var(--brown-2); background: linear-gradient(180deg, var(--parch), var(--parch-2));
  box-shadow: 0 2px 0 var(--brown-2); transition: transform .08s, box-shadow .08s;
}
.ghost:hover { background: var(--parch); }
.ghost:active { transform: translateY(2px); box-shadow: none; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 9px; border: 2px solid var(--ink); color: #fff; flex: none;
  background: linear-gradient(180deg, #ffa53a, var(--orange-2)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 3px 0 var(--ink);
  font-size: 1.1rem; font-weight: 800;
}
#restart { background: linear-gradient(180deg, var(--parch), var(--parch-3)); color: var(--brown); }
.icon-btn.off { filter: grayscale(1); text-decoration: line-through; }
.eyebrow {
  font-family: var(--display); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; margin: 0 0 1rem; text-shadow: 0 2px 0 var(--ink), 0 0 12px rgba(0, 0, 0, .5);
}

/* ---------- Barre du haut ---------- */
#top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 14px;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px; pointer-events: none;
}
#top > * { pointer-events: auto; }
.brand {
  font-family: var(--display); font-size: 1.05rem; color: var(--yellow); margin-right: auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 4px;
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
}
#gems {
  display: flex; gap: 7px; list-style: none; margin: 0; padding: 7px 12px; flex: none;
  background: var(--brown); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ink);
}
#gems li {
  width: 13px; height: 17px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  border: 2px solid var(--ink); background: #7a6a4d; transition: all .5s ease;
}
#gems li.current { background: var(--parch); animation: wobble 1.2s ease-in-out infinite; }
#gems li.done { background: radial-gradient(circle at 35% 30%, #ffe27a, var(--orange) 70%); }
@keyframes wobble { 50% { transform: rotate(-10deg) translateY(-1px); } }

/* ---------- Fenêtre d'énigme (façon interface de jeu) ---------- */
#panel {
  position: fixed; z-index: 4; left: 18px; bottom: 18px; width: min(400px, calc(100vw - 36px));
  max-height: calc(100dvh - 90px); overflow-y: auto;
  border-radius: 12px; background: var(--parch); border: 3px solid var(--ink);
  box-shadow: 0 6px 0 rgba(46, 32, 17, .55), 0 18px 40px -10px rgba(0, 0, 0, .55), inset 0 0 0 2px #fff7dc;
  animation: rise .5s cubic-bezier(.2, 1.2, .3, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
#panel.swap { animation: none; opacity: 0; transform: translateY(16px); transition: all .3s ease; }
.step {
  font-weight: 800; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #ffcf8a;
  background: var(--brown); padding: 10px 16px 0;
}
#p-title {
  font-family: var(--display); font-weight: 400; font-size: 1.4rem; line-height: 1.15; color: #fff6dc; margin: 0;
  background: var(--brown); padding: 1px 16px 10px; border-bottom: 3px solid var(--ink); text-wrap: balance;
  text-shadow: 0 2px 0 var(--ink);
}
#p-body, #p-controls, #p-feedback, .panel-foot, #p-hint { margin-inline: 16px; }
#p-body { margin-top: 12px; }
#p-body p { margin: 0 0 .6em; }
#p-body em { font-style: normal; font-weight: 800; color: var(--orange-2); }
#p-body ol { margin: .2em 0 .5em; padding-left: 1.5em; font-size: .93rem; }
#p-body li { margin-bottom: .3em; }
#p-body li::marker { color: var(--orange-2); font-weight: 800; }
#p-body b { font-weight: 800; }
#p-controls { margin-top: .7em; display: grid; gap: .65em; }
#p-controls:empty { display: none; }
.row { display: flex; gap: .6em; align-items: center; flex-wrap: wrap; }
input[type=text] {
  flex: 1; min-width: 0; font-family: var(--body); font-weight: 800; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); background: #fffaea; border: 2px solid var(--brown-2); border-radius: 8px;
  padding: .55em .8em; box-shadow: inset 0 2px 0 rgba(77, 58, 34, .18);
}
input[type=text]::placeholder { color: #a8966f; letter-spacing: 0; text-transform: none; font-weight: 600; font-style: italic; }
#p-feedback { min-height: 1.4em; margin-top: .6em; margin-bottom: 0; font-weight: 700; font-size: .92rem; color: var(--muted); }
#p-feedback.bad { color: var(--danger); animation: shake .4s; }
#p-feedback.good { color: var(--green); }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.panel-foot { display: flex; justify-content: flex-end; margin-top: .3em; margin-bottom: 14px; }
.panel-foot:has(#hint-btn[hidden]) { margin-bottom: 4px; }
#p-hint {
  margin-top: -4px; margin-bottom: 14px; padding: .6em .8em; border-radius: 8px; font-size: .9rem; font-weight: 600;
  background: var(--parch-2); border: 2px dashed var(--brown-2);
}
.fragment {
  display: flex; align-items: center; gap: .8em; padding: .6em .8em; border-radius: 10px;
  background: var(--parch-2); border: 2px solid var(--brown-2);
}
.fragment b {
  font-family: var(--display); font-weight: 400; font-size: 2.2rem; color: var(--orange); line-height: 1;
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; padding: 0 4px;
}
.fragment span { font-size: .9rem; }

.slots { display: flex; gap: 6px; }
.slots i {
  width: 22px; height: 28px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  border: 2px dashed var(--parch-3); transition: all .25s;
}
.slots i.on { border: 2px solid var(--ink); transform: translateY(-2px); }
.cipher {
  font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .04em; line-height: 1.55; padding: .6em .8em; border-radius: 8px;
  background: #33271a; color: #f3e6c0; border: 2px solid var(--ink); word-spacing: .25em;
}
.cipher small { display: block; font-family: var(--body); font-size: .6rem; letter-spacing: .14em; color: #b9a67c; text-transform: uppercase; }
.cipher .plain { color: var(--yellow); }
.stat { font-weight: 800; font-size: .8rem; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; margin-right: auto; }
.frags { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.frags div { text-align: center; padding: .3em 0 .2em; border-radius: 8px; border: 2px solid var(--brown-2); background: var(--parch-2); }
.frags small { display: block; font-weight: 800; font-size: .62rem; letter-spacing: .12em; color: var(--muted); }
.frags b { font-family: var(--display); font-weight: 400; font-size: 1.25rem; color: var(--orange-2); }
.readout {
  margin-left: auto; font-family: var(--mono); font-weight: 800; font-size: 1.25rem; letter-spacing: .06em; padding: .15em .6em; border-radius: 8px;
  background: #33271a; color: var(--yellow); border: 2px solid var(--ink);
}
.pad { display: grid; grid-template-columns: repeat(2, 54px); gap: 6px; justify-content: center; }
.pad .ghost { font-size: 1.3rem; line-height: 1; padding: .35em 0; }
.tries { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 9.5em; overflow-y: auto; }
.tries li { display: flex; align-items: center; gap: .7em; font-size: .82rem; font-weight: 700; padding: .25em .5em; border-radius: 7px; background: var(--parch-2); }
.dots { display: flex; gap: 4px; }
.dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: .3em .8em; font-size: .82rem; font-weight: 800; margin-right: auto; }
.legend span { display: flex; align-items: center; gap: .35em; }
.legend i { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--ink); }

#tooltip {
  position: fixed; z-index: 6; pointer-events: none; transform: translate(-50%, -160%);
  font-weight: 800; font-size: .8rem; padding: .3em .75em; border-radius: 7px;
  background: var(--parch); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); white-space: nowrap;
}

#bubble {
  position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; max-width: 230px;
  font-weight: 800; font-size: .85rem; line-height: 1.25; text-align: center; padding: .5em .8em; border-radius: 14px;
  background: #fffaea; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  opacity: 0; transition: opacity .25s; will-change: transform;
}
#bubble.show { opacity: 1; }
#bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; margin-left: -7px;
  background: #fffaea; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg);
}

/* ---------- Intro & finale ---------- */
#intro, #finale { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; text-align: center; padding: 20px; }
#intro { background: radial-gradient(ellipse at center, rgba(20, 30, 60, .15), rgba(20, 25, 50, .6) 85%); transition: opacity .7s ease, visibility .7s; }
#intro.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-inner { max-width: 760px; animation: rise .9s .1s cubic-bezier(.2, 1.2, .3, 1) both; }
h1 {
  font-family: var(--display); font-weight: 400; font-size: clamp(2.3rem, 7.6vw, 5rem); line-height: 1.02; margin: 0 0 1.2rem;
  color: var(--yellow); text-wrap: balance; padding: 0 8px;
  -webkit-text-stroke: clamp(8px, 1.4vw, 14px) var(--ink); paint-order: stroke fill;
  filter: drop-shadow(0 6px 0 rgba(46, 32, 17, .6));
}
h1 em { font-style: normal; color: #ff9a1f; font-size: 1.25em; }
.lede {
  display: inline-block; font-size: 1.02rem; font-weight: 700; max-width: 34em; margin: 0 auto 1.4rem; padding: .8em 1.2em; text-wrap: pretty;
  background: var(--parch); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 5px 0 rgba(46, 32, 17, .55), inset 0 0 0 2px #fff7dc;
}
#intro .primary, #finale .primary { font-size: 1.3rem; padding: .55em 1.6em .62em; display: block; margin: 0 auto; }
.fine { margin-top: 1.2rem; font-size: .88rem; font-weight: 700; color: #fff; text-shadow: 0 1px 0 var(--ink), 0 0 8px rgba(0, 0, 0, .6); }

#finale { pointer-events: none; align-content: end; padding-bottom: max(5vh, 24px); animation: rise 1s ease both; }
#finale > * { pointer-events: auto; }
#finale h2 {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 5.5vw, 3.2rem); margin: 0 0 .25em; color: var(--yellow);
  -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill; padding: 0 8px;
}
#finale .lede { margin-bottom: .9rem; }
#code {
  font-family: var(--mono); font-weight: 800; font-size: clamp(1.1rem, 4.8vw, 2.2rem); letter-spacing: .1em; color: var(--text);
  padding: .5em .9em; border-radius: 12px; background: #fffaea; border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink), inset 0 0 0 3px var(--yellow);
  user-select: all; max-width: 100%; overflow-wrap: anywhere; font-variant-ligatures: none;
}
.finale-actions { display: flex; gap: 12px; margin-top: 1.2rem; align-items: center; flex-wrap: wrap; justify-content: center; }
#finale .finale-actions .primary { margin: 0; font-size: 1.1rem; }

@media (max-width: 900px) {
  body { font-size: 15px; }
  #panel { left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; max-height: 47dvh; }
  #p-title { font-size: 1.2rem; }
  .brand { font-size: .78rem; -webkit-text-stroke-width: 4px; }
  #gems { gap: 3px; padding: 5px 7px; } #gems li { width: 9px; height: 12px; border-width: 1.5px; }
  .brand { display: none; }
  #top { justify-content: flex-end; }
  .lede { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; }
}