/* Loup Perché — interface. Couleurs issues de la palette du jeu (src/config.js). */
:root {
  --ui: #2B2D42; --ui-dark: #1E1F2E; --ui-soft: #3D405B; --ground: #E9EEF2; --shadow: #B3AD9A; --sand: #D6D2C4;
  --yellow: #FFD166; --marble: #FFD166; --rare: #A889F4; --player: #4ECDC4; --red: #FF6B6B; --blue: #4D9DE0;
  --paper: #F7F5EF; --white: #FFFFFF;
  --f: 'Schibsted Grotesk', system-ui, sans-serif; --fd: 'Bricolage Grotesque', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--ground); color: var(--ui); font-family: var(--f); overflow: hidden;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
button { font: inherit; cursor: pointer; color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
[hidden] { display: none !important; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Boutons en blocs voxel : couleur pleine, tranche du dessous dans la même teinte plus sombre, reflet en haut, pas de contour. */
.btn { --c: #FFFFFF; --s: #C9C3B1; --t: var(--ui);
  min-height: 50px; padding: 10px 18px; border: 0; border-radius: 6px; background: var(--c); color: var(--t);
  font-family: 'Lilita One', var(--fd); font-weight: 400; font-size: 19px; letter-spacing: .4px; text-transform: uppercase;
  box-shadow: inset 0 4px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.06), 0 7px 0 var(--s), 0 11px 10px rgba(43,45,66,.22);
  transition: transform .06s, box-shadow .06s; position: relative; margin-bottom: 7px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn:active { transform: translateY(6px); box-shadow: inset 0 4px 0 rgba(255,255,255,.55), 0 1px 0 var(--s), 0 3px 4px rgba(43,45,66,.2); }
.btn svg.i { stroke-width: 3; }
/* Survol à la souris : le bloc se soulève, s'éclaire, et son icône bouge un peu */
@media (hover: hover) {
  .btn:hover { transform: translateY(-3px); filter: brightness(1.06) saturate(1.08);
    box-shadow: inset 0 4px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.06), 0 10px 0 var(--s), 0 16px 14px rgba(43,45,66,.26); }
  .btn:hover svg.i { transform: rotate(-8deg) scale(1.12); }
  .btn:active { transform: translateY(6px); }
}
.btn svg.i { transition: transform .12s; }
.btn { transition: transform .1s, box-shadow .1s, filter .1s; }
.btn.main { --c: #FFD166; --s: #D9A43A; font-size: 32px; min-height: 68px; }
.btn.teal { --c: #4ECDC4; --s: #2E9E96; --t: #FFFFFF; }
.btn.red { --c: #FF6B6B; --s: #D04848; --t: #FFFFFF; }
.btn.small { min-height: 46px; font-size: 16px; padding: 8px 10px; white-space: nowrap; }
.row .btn.small { gap: 6px; }
@media (max-width: 380px) { .row .btn.small { font-size: 14px; padding: 8px 6px; } .row .btn.small svg.i { width: 18px; height: 18px; } }
.btn.icon { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; }
.btn[aria-pressed=true].snd { --c: #4ECDC4; --s: #2E9E96; --t: #FFFFFF; }
.daily small { text-transform: none; font-family: var(--f); font-weight: 600; letter-spacing: 0; }

/* Accueil */
#home { align-items: center; overflow-y: auto; overflow-x: hidden; padding: max(12px, env(safe-area-inset-top)) 16px 24px;
  background: var(--ground); }
.menu { display: flex; flex-direction: column; align-items: center; width: 100%; }
#home .top { width: 100%; max-width: 420px; display: flex; justify-content: space-between; gap: 8px; }
.hero { position: relative; width: 100%; max-width: 420px; margin-top: 6px; }
#homeCanvas { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }
h1.logo { text-align: center; margin: 4px 0 8px; line-height: .9; font-family: 'Lilita One', var(--fd); font-weight: 400; font-size: clamp(50px, 16vw, 84px); }
h1.logo img { display: block; width: min(270px, 72vw, 34vh); height: auto; margin: 0 auto; }
h1.logo .logoTxt > span { display: block; color: #FFFFFF; -webkit-text-stroke: 3px var(--ui); paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--ui), 0 6px 0 var(--ui), 0 9px 0 var(--ui), 0 14px 8px rgba(43,45,66,.25); }
h1.logo .perch { color: #FF6B6B !important; }
.tag { text-align: center; font-size: 16px; font-weight: 500; max-width: 330px; margin: 0 auto 14px; }
.col { display: flex; flex-direction: column; gap: 12px; width: min(340px, 100%); }
.row { display: flex; gap: 10px; } .row > * { flex: 1; min-width: 0; }
.daily { display: flex; flex-direction: column; line-height: 1.1; }
.daily small { font-size: 13px; font-weight: 500; opacity: .8; }
.meta { font-size: 14px; text-align: center; margin-top: 12px; }
.meta b { font-weight: 700; }
.pseudo { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; }
.pseudo input { flex: 1; min-width: 0; }

/* Partie */
#game { background: var(--ground); }
#hud { height: calc(48px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 6px 0; display: flex; align-items: center; gap: 6px;
  background: var(--ground); color: var(--ui); flex: none; font-family: var(--fd); }
#hud .btn.icon { margin-bottom: 4px; box-shadow: inset 0 3px 0 rgba(255,255,255,.55), 0 4px 0 var(--s); width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
.stat { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#hTime { flex: 1; justify-content: center; font-size: 22px; }
#hTime.low { color: var(--red); }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--marble); border: 2px solid var(--ui); flex: none; }
#hFreeze { color: var(--white); background: var(--blue); border-radius: 10px; padding: 2px 8px; font-size: 14px; }
#wrap { flex: 1; position: relative; overflow: hidden; touch-action: none; }
#cv, #ov { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ov { pointer-events: none; }
#hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); white-space: nowrap; font-size: 14px; font-weight: 600;
  color: var(--white); background: rgba(43,45,66,.85); padding: 6px 12px; border-radius: 12px; pointer-events: none; transition: opacity .4s; }

/* Boîtes de dialogue */
dialog { margin: auto; width: 100%; max-width: min(400px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto;
  background: var(--paper); color: var(--ui); border: 3px solid var(--ui); border-radius: 22px; box-shadow: inset 0 5px 0 #FFFFFF, 0 10px 0 #C9C3B1, 0 18px 24px rgba(43,45,66,.3); padding: 20px; border-radius: 8px; border: 0; }
dialog::backdrop { background: rgba(43,45,66,.55); }
dialog h2 { font-family: 'Lilita One', var(--fd); font-size: 32px; font-weight: 400; margin-bottom: 10px; line-height: 1; }
dialog p, dialog li { font-size: 16px; line-height: 1.35; margin-bottom: 8px; }
dialog ul { padding-left: 20px; margin-bottom: 10px; }
dialog .row { margin-top: 10px; }
#endDlg h2 { font-size: 40px; text-align: center; }
#endDlg.lose h2 { color: var(--red); } #endDlg.win h2 { color: #2BA89F; }
.big { font-family: 'Lilita One', var(--fd); font-size: 62px; font-weight: 400; text-align: center; line-height: 1; }
.big + p { text-align: center; margin-bottom: 4px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.stats div { background: #EFECE3; border: 0; border-radius: 6px; box-shadow: inset 0 -4px 0 #DCD7C8; padding: 6px 10px; }
.stats b { display: block; font-family: 'Lilita One', var(--fd); font-size: 24px; font-weight: 400; }
.stats span { font-size: 13px; }
.note { font-size: 14px; min-height: 18px; text-align: center; }
.err { color: #B8342C; font-size: 14px; min-height: 18px; margin-top: 6px; }
label { display: block; font-size: 14px; margin: 8px 0 4px; }
input { width: 100%; min-height: 44px; font: inherit; font-size: 16px; padding: 8px 12px; border: 0; box-shadow: inset 0 3px 0 #DCD7C8; border-radius: 6px; background: var(--white); color: var(--ui); user-select: text; }
.tabs { display: flex; gap: 8px; margin-bottom: 6px; } .tabs button[aria-pressed=true] { background: var(--yellow); }
ol.rank { padding-left: 24px; margin: 8px 0; }
ol.rank li { display: flex; justify-content: space-between; gap: 8px; }
ol.rank li.me { font-weight: 700; color: var(--player); }
.legend { display: grid; grid-template-columns: 22px 1fr; gap: 6px 8px; align-items: center; margin: 8px 0 12px; font-size: 15px; }
.legend i { width: 16px; height: 16px; border-radius: 50%; display: block; border: 2px solid var(--ui); }

/* Ordinateur / tablette paysage : diorama à gauche, menu à droite, toute la largeur utilisée */
@media (min-width: 860px) and (min-aspect-ratio: 5/4) {
  #home { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr); grid-template-rows: auto 1fr; column-gap: 40px;
    align-items: center; padding: 20px 48px 32px; background: var(--ground) linear-gradient(90deg, #E9EEF2 0 58%, #D6D2C4 58% 100%); }
  #home .top { grid-column: 1 / -1; max-width: none; }
  .hero { max-width: none; align-self: stretch; display: flex; align-items: center; }
  #homeCanvas { aspect-ratio: auto; height: min(78vh, 62vw); }
  .menu { max-width: 440px; justify-self: center; }
  h1.logo { font-size: clamp(64px, 7vw, 104px); }
  h1.logo img { width: min(420px, 100%); }
  .col { width: 100%; }
}