/* DA kdo.neuroveto.fr : le tissu du calot « foodies » (fond crème, stickers rétro à contour brun, aplats vifs) */
@font-face { font-family: Fredoka; src: url(/static/polices/fredoka-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Fredoka; src: url(/static/polices/fredoka-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Caveat; src: url(/static/polices/caveat-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
	--creme: #fdf8ef; --papier: #fffdf8; --brun: #3b2a26; --brun-doux: #6b5750;
	--rouge: #e5383b; --jaune: #f6c445; --vert: #9bc184; --turquoise: #5fb3a8; --saumon: #f4a38c; --rose: #f7c6c7;
	--ombre: 4px 4px 0 var(--brun);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0; min-height: 100vh; padding: 28px 16px 48px; display: flex; justify-content: center; align-items: flex-start;
	font-family: Fredoka, 'Trebuchet MS', system-ui, sans-serif; font-size: 18px; line-height: 1.5; color: var(--brun);
	background-color: var(--creme); background-image: url(/static/motif.svg); background-size: 360px 360px;
}
.carte {
	width: 100%; max-width: 520px; background: var(--papier); border: 3px solid var(--brun); border-radius: 22px;
	box-shadow: 6px 6px 0 var(--brun); padding: 26px 22px 24px; text-align: center; margin-top: 4vh;
}
h1 { font-weight: 600; font-size: 30px; line-height: 1.15; margin: 6px 0 14px; }
p { margin: 0 0 12px; }
a { color: var(--brun); }

.sticker { display: inline-block; font-weight: 600; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; padding: 5px 14px;
	border: 3px solid var(--brun); border-radius: 999px; transform: rotate(-4deg); box-shadow: 3px 3px 0 var(--brun); margin: 0 0 6px; }
.sticker-jaune { background: var(--jaune); }
.sticker-rouge { background: var(--rouge); color: #fff; }

.bouton { font: inherit; font-weight: 600; font-size: 19px; color: var(--brun); background: var(--jaune); border: 3px solid var(--brun); border-radius: 14px;
	padding: 12px 26px; box-shadow: var(--ombre); cursor: pointer; text-decoration: none; display: inline-block; margin-top: 8px; transition: transform .08s, box-shadow .08s; }
.bouton:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--brun); }
.bouton:focus-visible, input:focus-visible, .carte-memory:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; }
.bouton:disabled { opacity: .6; }

.reponse { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; }
.etiquette { font-family: Caveat, cursive; font-size: 26px; line-height: 1; }
input[name=reponse] { font: inherit; font-size: 20px; text-align: center; width: 100%; max-width: 320px; padding: 12px 14px; color: var(--brun);
	background: #fff; border: 3px solid var(--brun); border-radius: 14px; }
input.code { font-size: 32px; letter-spacing: .5em; padding-left: calc(14px + .5em); max-width: 240px; font-variant-numeric: tabular-nums; }
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.bouton-choix { margin: 0; padding: 14px 10px; }
.couleur-0 { background: var(--rose); } .couleur-1 { background: var(--vert); } .couleur-2 { background: var(--jaune); } .couleur-3 { background: var(--turquoise); } .couleur-4 { background: var(--saumon); }
.rate { color: var(--rouge); font-weight: 600; margin: 4px 0 0; }
.bravo { display: inline-block; background: var(--vert); border: 3px solid var(--brun); border-radius: 12px; padding: 4px 14px; font-weight: 600; transform: rotate(2deg); }

.progression { display: flex; justify-content: center; gap: 8px; margin: 0 0 14px; }
.progression span { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--brun); background: #fff; }
.progression .fait { background: var(--rouge); }
.progression .ici { background: var(--jaune); transform: scale(1.25); }

.polaroid { margin: 6px auto 16px; padding: 10px 10px 34px; background: #fff; border: 2px solid var(--brun); box-shadow: var(--ombre); transform: rotate(-2deg); max-width: 92%; display: inline-block; }
.polaroid img { display: block; max-width: 100%; max-height: 60vh; height: auto; }

.indice { margin: 18px auto 0; max-width: 420px; text-align: left; background: #fff6d6; border: 2px dashed var(--brun); border-radius: 12px; padding: 8px 14px; }
.indice summary { font-family: Caveat, cursive; font-size: 24px; cursor: pointer; }
.signature { font-family: Caveat, cursive; font-size: 30px; margin-top: 10px; }
.discret { margin-top: 26px; }
.lien { font: inherit; font-size: 14px; color: var(--brun-doux); background: none; border: 0; text-decoration: underline; cursor: pointer; }

/* memory */
.jeu { width: 100%; }
.memory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.memory.n6, .memory.n9 { grid-template-columns: repeat(3, 1fr); }
.carte-memory { aspect-ratio: 1; padding: 0; border: 3px solid var(--brun); border-radius: 14px; background: none; cursor: pointer; position: relative; perspective: 600px; box-shadow: 3px 3px 0 var(--brun); }
.carte-memory span { position: absolute; inset: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; transition: transform .35s; }
.carte-memory .dos { background: var(--turquoise) url(/static/favicon.svg) center / 46% no-repeat; }
.carte-memory .face { background: #fff; transform: rotateY(180deg); }
.carte-memory .face svg { width: 78%; height: 78%; }
.carte-memory.ouverte .dos { transform: rotateY(180deg); }
.carte-memory.ouverte .face { transform: rotateY(360deg); }
.carte-memory.trouvee { box-shadow: none; transform: translate(3px, 3px); }
.carte-memory.trouvee .face { background: #eef7e8; }
.coups { font-size: 15px; color: var(--brun-doux); margin-top: 6px; }

@media (prefers-reduced-motion: reduce) { .carte-memory span, .bouton { transition: none; } }
@media (max-width: 380px) { h1 { font-size: 26px; } .carte { padding: 22px 16px; } }

/* cadeaux du parcours : un petit paquet carré dans la progression, le mot en grand */
.progression .paquet { border-radius: 4px; transform: rotate(45deg) scale(.9); }
.progression .paquet.ici { transform: rotate(45deg) scale(1.2); }
.mot-cadeau { font-size: 21px; font-weight: 600; background: #fff6d6; border: 3px solid var(--brun); border-radius: 16px; padding: 16px 16px 6px; margin: 8px 0 6px; transform: rotate(-1deg); }

/* chasse aux chats */
.jeu[data-jeu="chats"] { position: relative; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.chats-tete { display: flex; justify-content: space-between; font-weight: 600; font-size: 20px; margin-bottom: 6px; }
.rue { display: block; width: 100%; height: auto; border: 3px solid var(--brun); border-radius: 14px; background: #cfe9f3; box-shadow: var(--ombre); }
.chat-rue { cursor: pointer; }
.chat-corps { transform: translateY(46px); transition: transform .16s ease-out; }
.chat-rue.sorti .chat-corps { transform: translateY(0); }
.chat-rue.attrape .chat-corps { transform: translateY(0) scale(0); transition: transform .25s ease-in; }
.chats-ecran { position: absolute; inset: 34px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255, 253, 248, .9); border-radius: 14px; }
.chats-ecran[hidden] { display: none; }
.chats-titre { font-weight: 600; font-size: 22px; margin: 0 12px 4px; }
.petit { font-size: 15px; color: var(--brun-doux); }
.main-pos { pointer-events: none; }
.main { transform: translateY(190px); }
.main.saisit { animation: saisir .55s ease-in-out; }
@keyframes saisir { 0% { transform: translateY(190px); } 40% { transform: translateY(0); } 55% { transform: translateY(0) scale(.92, .86); } 100% { transform: translateY(190px); } }
.chat-rue.attrape .chat-corps { transition-delay: .2s; }
.bulle { font-family: Caveat, cursive; font-size: 24px; font-weight: 700; fill: var(--rouge); stroke: #fff; stroke-width: 4px; paint-order: stroke; text-anchor: middle; pointer-events: none; animation: bulle 1.1s ease-out forwards; }
@keyframes bulle { from { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; } to { opacity: 0; transform: translateY(-26px); } }
@media (prefers-reduced-motion: reduce) { .main.saisit, .bulle { animation-duration: .01s; } }

/* plateau de verres */
.jeu[data-jeu="plateau"] { position: relative; user-select: none; -webkit-user-select: none; }
.salle { display: block; width: 100%; height: auto; border: 3px solid var(--brun); border-radius: 14px; box-shadow: var(--ombre); touch-action: none; cursor: ew-resize; }
.plateau-age { font-family: Caveat, cursive; font-size: 27px; line-height: 1.1; color: var(--rouge); min-height: 2.2em; margin: 0 0 6px; display: flex; align-items: center; justify-content: center; }
.plateau-age.nouvel-age { animation: age .6s ease-out; }
.plateau-age.gagne { color: #4f7d3a; }
@keyframes age { from { transform: scale(.6) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } }
.chute .p-verres { transform: translateY(120px) rotate(25deg); transition: transform .6s ease-in; }
.jeu[data-jeu="plateau"] .chats-ecran { inset: 0; }

/* géoguesseur */
.jeu[data-jeu="carte"] { position: relative; user-select: none; -webkit-user-select: none; }
.carte-indice { font-family: Caveat, cursive; font-size: 30px; line-height: 1.1; min-height: 2.2em; margin: 0 0 4px; display: flex; align-items: center; justify-content: center; }
.carte-indice.nouvel-age { animation: age .4s ease-out; }
.carte-barre { height: 10px; border: 2px solid var(--brun); border-radius: 6px; background: #fff; overflow: hidden; margin-bottom: 8px; }
.carte-barre span { display: block; height: 100%; width: 100%; background: var(--rouge); transform-origin: left; transform: scaleX(0); }
.carte-barre span.court { animation: compte linear forwards; }
@keyframes compte { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.france { display: block; width: 100%; height: auto; border: 3px solid var(--brun); border-radius: 14px; box-shadow: var(--ombre); touch-action: manipulation; cursor: crosshair; }
.deps path { fill: #fdf8ef; stroke: #b9a99d; stroke-width: 1.5; stroke-linejoin: round; }
.carte-nom { font-family: Fredoka, sans-serif; font-weight: 600; font-size: 34px; text-anchor: middle; fill: var(--brun); stroke: #fff; stroke-width: 8px; paint-order: stroke; pointer-events: none; }
.carte-nom.passe { font-size: 26px; opacity: .75; }
.carte-score { font-weight: 600; min-height: 1.5em; margin: 8px 0 0; }
.carte-score.ok { color: #4f7d3a; } .carte-score.ko { color: var(--rouge); }
.jeu[data-jeu="carte"] .chats-ecran { inset: 0; }

/* noms à écrire vite */
.jeu[data-jeu="noms"] { position: relative; min-height: 240px; }
.noms-saisie { font: inherit; font-size: 19px; width: 100%; padding: 12px; text-align: center; color: var(--brun); background: #fff; border: 3px solid var(--brun); border-radius: 14px; }
.noms-saisie.juste { background: #eef7e8; border-color: #4f7d3a; }
.noms-aide { font-size: 15px; color: var(--brun-doux); min-height: 1.4em; margin-top: 8px; }
.noms-ecran { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255, 253, 248, .95); border-radius: 14px; }
.noms-ecran[hidden] { display: none; }