@font-face { font-family: 'Rammetto One'; src: url('fonts/rammetto-one-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('fonts/nunito-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('fonts/nunito-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('fonts/nunito-sans-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --milk: #FDDCEC;        /* rose du logo : fond de l'en-tête */
  --lemon: #FFF7E0;       /* crème citron : section de jeu */
  --choco: #3B2417;       /* encre, contours */
  --choco-2: #6B4A39;     /* texte secondaire */
  --line: #EED9CF;
  --pink: #F2559A;
  --pink-deep: #CC2F72;
  --butter: #FFCB45;
  --paper: #FBF6EC;       /* écran de l'app */
  --tile: #F2EDE4;        /* case vide */
  --frame: #2E211A;       /* cadre de la grille */
  --err: #D7263D;
  --display: 'Rammetto One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --text: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--milk); color: var(--choco); font-family: var(--text); font-size: 17px; line-height: 1.55; overflow-x: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--choco); color: #fff; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 800; }
.skip:focus { top: 12px; }

/* ---------- Boutons « sticker » ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 2.5px solid var(--choco); border-radius: 16px; background: #fff; color: var(--choco); font: 800 17px/1 var(--text); text-decoration: none; box-shadow: 0 4px 0 var(--choco); transition: transform .08s ease, box-shadow .08s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--choco); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--choco); }
.btn--butter { background: var(--butter); }

/* ---------- En-tête : le principe ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "text visual" "cta visual"; column-gap: clamp(32px, 5vw, 80px); align-content: center; max-width: 1240px; margin: 0 auto; padding: clamp(40px, 6vw, 88px) clamp(16px, 4vw, 48px) clamp(64px, 7vw, 104px); }
.hero__text { grid-area: text; align-self: end; max-width: 560px; }
.hero__cta { grid-area: cta; align-self: start; }
.hero__visual { grid-area: visual; align-self: center; }

.logo { width: min(100%, 377px); margin: 0 0 8px; line-height: 0; }
/* The artwork has see-through margins of its own (34 px left, 35 px right out of 860): they overflow
   on both sides, so the visible logo fills .logo exactly. It lines up with the text in two columns
   and is truly centred in one column. */
.logo img { display: block; width: 108.72%; max-width: none; height: auto; margin: -3.05% 0 -6.2% -4.3%; }

.tagline { margin: 14px 0 18px; font-weight: 800; font-size: clamp(23px, 2.5vw, 31px); line-height: 1.2; }
.lede { margin: 0 0 18px; color: var(--choco-2); max-width: 34em; }

.rules { display: grid; gap: 10px; }
.rule { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 16px 10px 12px; text-align: left; background: #fff; border: 2px solid rgba(59, 36, 23, 0.14); border-radius: 18px; font-weight: 700; font-size: 16.5px; line-height: 1.3; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease; }
.rule:hover { border-color: rgba(59, 36, 23, 0.4); }
.rule[aria-pressed="true"] { background: #FFF1C7; border: 2.5px solid var(--choco); box-shadow: 0 4px 0 var(--choco); transform: translateY(-2px); }
.rule__icon { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; width: 56px; height: 44px; }
.rule__icon img { width: 30px; height: 36px; object-fit: contain; }
.rule__icon img + img { margin-left: -8px; }
.rule__icon--dots { align-items: center; gap: 0; }
.rule__icon--dots i { width: 15px; height: 15px; margin-left: -4px; border-radius: 50%; border: 2px solid #fff; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--b) 45%); }
.rule__icon--dots i:first-child { margin-left: 0; }
.rules__help { margin: 10px 0 26px; font-size: 14.5px; color: var(--choco-2); }

.hero__visual { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.box { position: relative; width: min(100%, 540px, 82vh); aspect-ratio: 1; background: #fff; border: 3px solid var(--choco); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 50px -26px rgba(59, 36, 23, 0.35); }
.box__inner { position: absolute; inset: 0; }
.box__caption { max-width: 30em; min-height: 3.1em; text-align: center; font-size: 16px; color: var(--choco-2); }

/* A square is 20% of the box; the grid lines are drawn on top (.grid-lines), so squares can slide underneath. */
.tile { position: absolute; left: 0; top: 0; width: 20%; height: 20%; background: var(--case); transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)); transition: transform .75s cubic-bezier(.22, .9, .25, 1) calc(var(--i) * 16ms), background-color .35s ease, opacity .25s ease; }
.box[data-mode="tri"] .tile { transform: translate(calc(var(--sc) * 100%), calc(var(--sr) * 100%)); }
.box[data-mode="formes"] .tile { background: #fff; }
.tile img { position: absolute; left: 12%; top: 6%; width: 76%; height: 86%; object-fit: contain; transition: opacity .3s ease; pointer-events: none; }
.tile .tile__w { opacity: 0; }
.box[data-mode="formes"] .tile .tile__c { opacity: 0; }
.box[data-mode="formes"] .tile .tile__w { opacity: 1; }
.box[data-mode="parfums"] .tile img { opacity: 0; }
.box.has-focus .tile:not(.is-line):not(.is-same) { opacity: .28; }
/* Same colour (or same shape when colours are hidden): a ring in the flavour's own deep tone */
.tile::before, .tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.tile::before { background: #fff; }
.tile::after { box-shadow: inset 0 0 0 5px var(--deep); transition: opacity .2s ease; }
.box[data-mode="formes"] .tile::after { box-shadow: inset 0 0 0 5px #A0806C; }
.box.has-focus .tile.is-same::after { opacity: 1; }
/* Ripple when the highlight appears: a soft flash and a little bounce, square by square */
.box.has-focus .tile.pulse::before { animation: hl-flash .5s ease-out; animation-delay: calc(var(--d) * 45ms); }
.box.has-focus .tile.pulse img { animation: hl-pop .42s cubic-bezier(.3, 1.5, .5, 1); animation-delay: calc(var(--d) * 45ms); }

/* Grid lines, shared by the box, the game board and the collection */
.grid-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.grid-lines path { fill: none; stroke: var(--choco); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.board .grid-lines path { stroke-width: 2px; }
.grid-lines--thin path { stroke-width: 1.25px; stroke: rgba(59, 36, 23, 0.6); }

/* ---------- Section de jeu ---------- */
.play { position: relative; background: var(--lemon); padding: clamp(40px, 4vw, 56px) clamp(16px, 4vw, 48px) clamp(72px, 8vw, 112px); }
.play::before, .foot::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 16px; background: radial-gradient(circle at 13px 16px, var(--scallop) 12.5px, transparent 13px) repeat-x; background-size: 26px 16px; }
.play { --scallop: var(--lemon); }
.play__head { grid-area: head; align-self: start; width: 100%; max-width: 330px; justify-self: end; padding-top: 28px; }
.play__head h2, .foot h2 { margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.01em; }
.play__head p { margin: 0 0 20px; max-width: 36em; color: var(--choco-2); }
.levels { display: inline-flex; gap: 8px; padding: 6px; background: #fff; border: 2px solid rgba(59, 36, 23, 0.12); border-radius: 18px; }
.chip { min-height: 44px; padding: 0 18px; border: 2px solid transparent; border-radius: 12px; background: transparent; font-weight: 800; font-size: 15.5px; color: var(--choco-2); }
.chip:hover { background: #FFF5D6; }
.chip[aria-pressed="true"] { background: var(--choco); color: #fff; }

.stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "head phone collection" "legend phone collection"; grid-template-rows: auto 1fr; column-gap: clamp(28px, 3.4vw, 56px); row-gap: 26px; max-width: 1240px; margin: 0 auto; }
.phone { grid-area: phone; align-self: start; width: 392px; padding: 12px; background: #1E1510; border-radius: 54px; box-shadow: 0 0 0 2px #4A372B, 0 30px 60px -20px rgba(59, 36, 23, 0.55); }
.legend { grid-area: legend; justify-self: end; align-self: start; }
.collection { grid-area: collection; justify-self: start; align-self: center; }
.card { width: 100%; max-width: 330px; padding: 22px 22px 18px; background: #fff; border: 2px solid rgba(59, 36, 23, 0.1); border-radius: 22px; font-size: 15px; line-height: 1.5; color: var(--choco-2); }
.card h3 { margin: 0 0 12px; font-size: 19px; font-weight: 800; color: var(--choco); }
.card p { margin: 12px 0 0; }

.states { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.states li { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--choco); font-size: 14.5px; line-height: 1.25; }
.mini { position: relative; flex: 0 0 auto; width: 46px; height: 46px; border: 2px solid var(--choco); border-radius: 9px; background: var(--case); }
.mini img { position: absolute; left: 12%; top: 6%; width: 76%; height: 86%; object-fit: contain; }
.keys { font-size: 13.5px; }

.coll__count { margin: 0 0 12px !important; color: var(--choco); }
.coll__count strong { font-family: var(--display); font-weight: 400; font-size: 26px; color: var(--pink-deep); }
.coll { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px; }
.coll__flavs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); justify-items: center; }
.coll__flav i { display: block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 14%, var(--b) 50%); }
.coll__shapes { display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); align-items: center; justify-items: center; }
.coll__shape { width: 26px; height: 30px; }
.coll__shape img { width: 100%; height: 100%; object-fit: contain; }
.coll__grid { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); aspect-ratio: 1; background: #fff; border: 2px solid var(--choco); border-radius: 10px; overflow: hidden; }
.coll__cell { position: relative; background: #fff; transition: background-color .2s ease; }
.coll__cell img { position: absolute; left: 12%; top: 6%; width: 76%; height: 86%; object-fit: contain; opacity: 0; transition: opacity .2s ease; }
.coll__cell.is-on { background: var(--case); }
.coll__cell.is-on img { opacity: 1; }
.coll__cell.is-dup { box-shadow: inset 0 0 0 3px var(--err); }

/* ---------- L'app ---------- */
.app { position: relative; display: flex; flex-direction: column; width: 100%; background: var(--paper); border-radius: 42px; padding: 22px 16px 18px; overflow: hidden; }
.app__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.icon-btn { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: #fff; border: 1.5px solid #EADFCC; border-radius: 14px; color: var(--choco-2); }
.icon-btn:hover { border-color: var(--choco-2); }
.app__title { flex: 1 1 auto; min-width: 0; }
.app__level { font-family: var(--display); font-size: 20px; line-height: 1.15; }
.app__sub { font-size: 13px; font-weight: 700; color: #A0806C; }
.pill { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: #fff; border: 1.5px solid #EADFCC; border-radius: 18px; font-weight: 800; font-size: 14px; color: var(--choco-2); font-variant-numeric: tabular-nums; }
.pill svg { color: var(--pink-deep); }

.board { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); aspect-ratio: 1 / 1; background: #fff; border: 2.5px solid var(--choco); border-radius: 16px; overflow: hidden; }
.board.nudge { animation: nudge .35s ease; }
.cell { position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: var(--case, var(--tile)); transition: background-color .2s ease; }
.cell img { position: absolute; left: 11%; top: 5%; width: 78%; height: 88%; object-fit: contain; pointer-events: none; }
.cell::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cell.pulse::after { animation: hl-flash .45s ease-out; animation-delay: calc(var(--d, 0) * 40ms); }
.cell.pulse img.cell__img { animation: hl-pop .4s cubic-bezier(.3, 1.5, .5, 1); animation-delay: calc(var(--d, 0) * 40ms); }
.cell.pop img.cell__img { animation: pop .28s cubic-bezier(.3, 1.6, .5, 1); }
.cell.is-same { box-shadow: inset 0 0 0 4px var(--deep); }
.cell.is-sel { box-shadow: inset 0 0 0 4px var(--pink), inset 0 0 0 6px #fff; }
.cell.is-err { box-shadow: inset 0 0 0 4px var(--err); background-image: repeating-linear-gradient(45deg, rgba(215, 38, 61, 0.16) 0 5px, transparent 5px 10px); }
.cell.is-err.is-sel { box-shadow: inset 0 0 0 4px var(--err), inset 0 0 0 6px #fff; }
.cell.is-err::before { content: "!"; position: absolute; right: 5px; top: 5px; z-index: 2; width: 16px; height: 16px; border-radius: 50%; background: var(--err); color: #fff; font: 800 11px/16px var(--text); text-align: center; }
.cell.is-hint { box-shadow: none; outline: 3px dashed var(--pink); outline-offset: -7px; }
.cell .cell__ghost { opacity: .42; }
.cell:focus-visible { outline: 3px solid var(--choco); outline-offset: -3px; }

.status { min-height: 56px; margin: 8px 2px 4px; font-size: 14px; line-height: 1.35; font-weight: 700; color: var(--choco-2); display: flex; align-items: center; gap: 10px; }
.status.is-warn { color: var(--err); }
.status.is-hint { color: var(--pink-deep); }
.status .poser { flex: 0 0 auto; min-height: 34px; padding: 0 12px; border: 2px solid var(--choco); border-radius: 10px; background: var(--butter); font-weight: 800; font-size: 13.5px; color: var(--choco); box-shadow: 0 2px 0 var(--choco); }

.pad__label { font-size: 13px; font-weight: 800; color: #A0806C; margin: 0 2px 6px; }
.pad__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.key { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 62px; padding: 4px 0 3px; background: #fff; border: 2px solid #F0E6D6; border-radius: 14px; font-size: 11px; font-weight: 800; color: var(--choco-2); transition: border-color .12s ease, background-color .12s ease, transform .08s ease; }
.key:hover { border-color: #D9C6AE; }
.key:active { transform: scale(.96); }
.key img { width: 30px; height: 34px; object-fit: contain; }
.key .sphere { width: 30px; height: 30px; margin: 2px 0; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff 0 10%, var(--clair) 24%, var(--base) 58%, var(--fonce) 100%); box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.12); }
.key[aria-pressed="true"] { border-color: var(--choco); background: #FFF6D8; box-shadow: 0 3px 0 var(--choco); transform: translateY(-1px); }
.key:disabled { opacity: .4; cursor: not-allowed; }
.key span:last-child { max-width: 100%; white-space: nowrap; }
.key--long span:last-child { font-size: 9.5px; letter-spacing: -0.02em; }

.actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.act { display: flex; align-items: center; justify-content: center; gap: 6px; height: 48px; padding: 0; background: #fff; border: 2px solid var(--choco); border-radius: 14px; box-shadow: 0 3px 0 var(--choco); font-weight: 800; font-size: 14.5px; color: var(--choco); transition: transform .08s ease, box-shadow .08s ease; }
.act:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--choco); }
.act--hint { background: var(--butter); }

.win { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgba(251, 246, 236, 0.82); backdrop-filter: blur(3px); }
.win[hidden] { display: none; }
.win__card { position: relative; z-index: 2; width: 100%; padding: 26px 20px 22px; text-align: center; background: #fff; border: 2.5px solid var(--choco); border-radius: 24px; box-shadow: 0 6px 0 var(--choco); animation: rise .45s cubic-bezier(.3, 1.4, .5, 1); }
.win__title { margin: 0 0 8px; font-family: var(--display); font-size: 25px; line-height: 1.1; color: var(--pink-deep); }
.win__text { margin: 0 0 18px; font-size: 15px; color: var(--choco-2); }
.confetti { position: absolute; top: -60px; z-index: 1; width: 34px; height: 40px; pointer-events: none; animation: fall var(--d, 2.4s) cubic-bezier(.3, .1, .6, 1) var(--delay, 0s) forwards; }

/* ---------- Pied de page ---------- */
.foot { position: relative; --scallop: var(--choco); background: var(--choco); color: #FBEFE6; padding: clamp(56px, 7vw, 96px) clamp(16px, 4vw, 48px) 40px; text-align: center; }
.foot__inner { max-width: 760px; margin: 0 auto; }
.foot h2 { color: #FFC6DE; }
.foot__lede { margin: 0 0 28px; font-size: 19px; font-weight: 700; }
.foot__aside { margin: 0 auto 36px; max-width: 34em; padding: 18px 22px; border: 2px dashed rgba(255, 198, 222, 0.45); border-radius: 18px; color: #EBD7CB; font-size: 15.5px; }
.foot__small { margin: 0; font-size: 13.5px; color: #BFA697; }

@keyframes pop { 0% { transform: scale(.55); } 100% { transform: scale(1); } }
@keyframes hl-flash { 0% { opacity: .6; } 100% { opacity: 0; } }
@keyframes hl-pop { 0% { transform: scale(.84); } 60% { transform: scale(1.07); } 100% { transform: none; } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-5px); } 65% { transform: translateX(4px); } }
@keyframes rise { 0% { transform: translateY(24px) scale(.94); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(900px) rotate(var(--rot, 260deg)); opacity: 0; } }

/* ---------- Adaptations ---------- */
@media (max-width: 1180px) {
  .stage { grid-template-columns: auto minmax(0, 340px); grid-template-areas: "head head" "phone legend" "phone collection"; grid-template-rows: auto auto 1fr; justify-content: center; row-gap: 24px; }
  .play__head { justify-self: center; max-width: 640px; padding-top: 0; text-align: center; margin-bottom: 10px; }
  .play__head p { margin-left: auto; margin-right: auto; }
  .legend, .collection { justify-self: start; align-self: start; }
  .legend { align-self: end; }
}
@media (max-width: 960px) {
  /* One column: logo and intro, then the box, then the rules right under it so a tapped rule is seen at once. */
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "visual" "rules" "cta"; row-gap: 8px; }
  .hero__text { display: contents; }
  .hero__intro { grid-area: intro; width: 100%; max-width: 640px; justify-self: center; }
  .logo { width: min(92%, 377px); margin-left: auto; margin-right: auto; }
  .hero__rules { grid-area: rules; width: 100%; max-width: 640px; justify-self: center; margin-top: 6px; }
  .hero__visual { gap: 14px; }
  .box__caption { min-height: 4.65em; }
  .rules__help { margin-bottom: 8px; }
  .hero__cta { justify-self: center; margin-top: 10px; }
}
@media (max-width: 780px) {
  body { font-size: 16px; }
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "phone" "legend" "collection"; grid-template-rows: auto; justify-items: center; }
  .legend, .collection { justify-self: center; align-self: auto; max-width: 440px; }
  .foot h2 { font-size: clamp(28px, 8vw, 40px); }
  .phone { width: 100%; max-width: 440px; padding: 0; background: none; border-radius: 0; box-shadow: none; }
  .app { border-radius: 28px; border: 2.5px solid var(--choco); padding: 18px 12px 14px; }
  .keys { display: none; }
}
@media (max-width: 420px) {
  .app { padding: 16px 10px 12px; }
  .key { height: 58px; font-size: 10.5px; }
  .key img { width: 26px; height: 30px; }
  .key .sphere { width: 26px; height: 26px; }
  .act { font-size: 13.5px; gap: 4px; }
  .rule { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .confetti { display: none; }
}
.act:disabled { opacity: .45; cursor: default; transform: none; box-shadow: 0 3px 0 var(--choco); }
@media (hover: none) { .keys { display: none; } }
@media (max-width: 359px) { .key span:last-child { font-size: 9px; } .key--long span:last-child { font-size: 8px; } }

/* Touch: no double-tap zoom or grey flash while playing, no image call-out on long press */
.board, .pad, .actions, .box, .rules, .levels, .chip, .btn { touch-action: manipulation; }
button, .tile, a { -webkit-tap-highlight-color: transparent; }
.app, .box { -webkit-user-select: none; user-select: none; }
.app img, .box img, .coll img, .rule img { -webkit-touch-callout: none; -webkit-user-drag: none; }

/* Phones held sideways: the whole box stays on screen, and the game splits into grid | controls */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 600px) {
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "phone" "legend" "collection"; justify-items: center; }
  .phone { width: 100%; max-width: 760px; padding: 0; background: none; border-radius: 0; box-shadow: none; }
  .app { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "bar bar" "board status" "board pad" "board actions"; align-items: start; column-gap: 18px; border-radius: 24px; border: 2.5px solid var(--choco); padding: 12px 14px 14px; }
  .app__bar { grid-area: bar; margin-bottom: 10px; }
  .board { grid-area: board; width: min(66vh, 300px); }
  .status { grid-area: status; min-height: 2.8em; margin: 0 0 4px; }
  .pad { grid-area: pad; }
  .pad__row { margin-bottom: 8px; }
  .key { height: 52px; }
  .actions { grid-area: actions; margin-top: 2px; }
  .act { height: 42px; }
  .legend, .collection { max-width: 520px; }
}

/* Lane lines ("couloirs"): each row and each column owns a pair of parallel black lines, centred on the
   grid lines. They never move: a corridor that stays lit keeps its lines, one that goes dark fades out,
   and a newly lit one grows its lines out of the square (--from = the square's place along the corridor). */
.lanes { position: absolute; inset: 0; z-index: 4; pointer-events: none; --lw: 4px; --lane-ink: #000; }
.board .lanes { --lw: 3.5px; }
.lane { --k: 0; --from: 0; position: absolute; display: block; box-sizing: border-box; opacity: 0; transition: opacity .14s ease; }
.lane--row { left: 0; right: 0; top: calc(var(--k) * 20% - var(--lw) / 2); height: calc(20% + var(--lw)); border-top: var(--lw) solid var(--lane-ink); border-bottom: var(--lw) solid var(--lane-ink); }
.lane--col { top: 0; bottom: 0; left: calc(var(--k) * 20% - var(--lw) / 2); width: calc(20% + var(--lw)); border-left: var(--lw) solid var(--lane-ink); border-right: var(--lw) solid var(--lane-ink); }
.lane.is-on { opacity: 1; }
.lane--row.is-on { animation: lane-x .3s cubic-bezier(.3, .8, .3, 1); }
.lane--col.is-on { animation: lane-y .3s cubic-bezier(.3, .8, .3, 1); }
@keyframes lane-x { from { clip-path: inset(0 calc(100% - (var(--from) + 1) * 20%) 0 calc(var(--from) * 20%)); } to { clip-path: inset(0 0 0 0); } }
@keyframes lane-y { from { clip-path: inset(calc(var(--from) * 20%) 0 calc(100% - (var(--from) + 1) * 20%) 0); } to { clip-path: inset(0 0 0 0); } }