/* --- cadre plein écran, sans défilement de page (téléphones et tablettes) --- */
html, body { height: 100%; }
body { overflow: hidden; overscroll-behavior: none; }
.wrap { height: 100svh; min-height: 0; padding-bottom: clamp(14px, 4vw, 22px); }
#s-intro, #s-game, #s-end { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* zone qui absorbe le débordement éventuel (explication longue, classement) */
.fill { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#play { flex: none; margin-top: 8px; }

.hero-emoji { font-size: clamp(2.1rem, 10vw, 2.8rem); margin-bottom: 8px; }
h1 { margin-bottom: .3em; }
a { color: var(--yellow); }
.btn { color: var(--ink); }
.btn--ghost { color: var(--paper); }

.qtop { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 10px; gap: 10px; }
.timer { height: 6px; background: var(--line); margin-bottom: 16px; flex: none; }
.timer > i { display: block; height: 100%; background: var(--yellow); width: 100%; transition: width .25s linear; }
.qimg { width: 100%; max-height: 40svh; object-fit: contain; border: 2px solid var(--ink); margin-bottom: 14px; display: block; background: #000; }
.qprompt { font-family: var(--font-display); font-size: clamp(1.2rem, 5vw, 1.7rem); font-weight: 500; margin: 4px 0 clamp(14px, 4vw, 18px); overflow-wrap: anywhere; }
.qtype { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border: 2px solid var(--yellow); color: var(--yellow); margin-bottom: 8px; }
.explain { border-left: 4px solid var(--yellow); padding: 8px 0 8px 14px; margin: 14px 0; font-size: .95rem; }

.score-big { font-family: var(--font-display); font-size: clamp(2.6rem, 15vw, 3.8rem); font-weight: 700; line-height: 1; color: var(--yellow); }
.stats { text-align: left; margin: 12px 0; }
.stat-line { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 8px 0; }
.stat-line b { white-space: nowrap; }
.reassure { background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); padding: clamp(11px, 3.5vw, 15px); font-weight: 600; margin: 12px 0 0; text-align: left; }
.fact { border-left: 4px solid var(--yellow); padding: 6px 0 6px 14px; margin: 14px 0 0; text-align: left; font-size: .95rem; }
.fact b { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-bottom: 2px; }
.end-actions { flex: none; display: grid; gap: 10px; margin-top: 10px; }

/* classement du jour */
.rank { text-align: left; margin-top: 22px; }
.rank h2 { font-size: 1.25rem; margin-bottom: .5em; }
.board { list-style: none; margin: 0 0 14px; padding: 0; }
.board li { display: grid; grid-template-columns: 2.2em 1.8em 1fr auto; gap: 8px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.board li.me { background: #35331f; border-color: var(--yellow); }
.board .r { font-family: var(--font-display); font-weight: 700; opacity: .6; }
.board .n { overflow-wrap: anywhere; font-weight: 600; }
.board .s { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--yellow); }
.board .empty { display: block; opacity: .6; border: 0; }
.enter { border: 2px solid var(--line); padding: 14px; }
.nicks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.nicks button { padding: 11px 10px; border: 2px solid var(--line); background: var(--ink-soft); color: var(--paper); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.nicks button.is-selected { border-color: var(--yellow); background: #35331f; }
.linklike { background: none; border: 0; color: var(--yellow); font: inherit; cursor: pointer; padding: 6px 0; text-decoration: underline; }
.avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.avatars button { font-size: clamp(1.3rem, 6vw, 1.5rem); padding: 10px 0; border: 2px solid var(--line); background: var(--ink-soft); cursor: pointer; }
.avatars button.is-selected { border-color: var(--yellow); background: #35331f; }
.enter-actions { display: grid; gap: 8px; }
.hidden, [hidden] { display: none !important; }