:root {
  --ink: #2b2a4c;
  --panel: rgba(255, 255, 255, 0.82);
  --accent: #ff7a3d;
  --good: #34c76b;
  font-family: ui-rounded, "Nunito", "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; height: 100dvh; overflow: hidden; background: #bfe6ff; color: var(--ink); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; border: 0; color: var(--ink); touch-action: manipulation; }

#hud { position: fixed; inset: 0 0 auto 0; padding: 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
#progress { display: flex; align-items: center; gap: 14px; background: var(--panel); border-radius: 999px; padding: 6px 14px; }
#pills { display: flex; gap: 6px; }
.pill { width: 30px; height: 30px; border-radius: 50%; background: #d8dcf0; display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.pill.cur { background: var(--accent); color: #fff; transform: scale(1.15); }
.pill.done { background: var(--good); color: #fff; }
#rounds { display: flex; gap: 6px; }
.rd { width: 14px; height: 14px; border-radius: 50%; background: #d8dcf0; }
.rd.cur { background: var(--accent); }
.rd.done { background: var(--good); }
#total { font-weight: 800; font-size: 20px; }

#goal { display: flex; flex-direction: column; align-items: center; background: var(--panel); border-radius: 24px; padding: 4px 22px 8px; }
#bignum { font-size: clamp(44px, 9vh, 84px); font-weight: 900; line-height: 1; color: var(--accent); }
#dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; max-width: 80vw; }
.grp { display: flex; gap: 3px; }
.grp i { width: 13px; height: 13px; border-radius: 50%; background: var(--ink); display: block; }
#instruction { font-size: clamp(18px, 3.4vh, 28px); font-weight: 800; background: var(--panel); border-radius: 999px; padding: 4px 18px; text-align: center; }
#bubble { min-height: 0; font-size: clamp(22px, 4vh, 34px); font-weight: 900; background: #fff; border: 4px solid var(--accent); border-radius: 26px; padding: 8px 22px; opacity: 0; transform: scale(0.8); transition: opacity 0.2s, transform 0.25s cubic-bezier(.3,1.6,.5,1); position: fixed; top: 44%; left: 0; right: 0; margin: 0 auto; width: fit-content; z-index: 3; text-align: center; max-width: 90vw; }
#bubble.show { opacity: 1; transform: scale(1); }
#result { font-size: clamp(40px, 8vh, 72px); letter-spacing: 6px; text-shadow: 0 3px 0 rgba(0,0,0,0.12); position: fixed; top: 30%; left: 0; right: 0; text-align: center; }
#result .st { display: inline-block; animation: pop 0.5s cubic-bezier(.3,1.8,.5,1) both; }
#result .st.off { filter: grayscale(1) opacity(0.35); }
@keyframes pop { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }

#bottom { pointer-events: none; position: fixed; inset: auto 0 0 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; background: linear-gradient(transparent, rgba(255,255,255,0.55) 25%); }
#ways { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.way { display: flex; gap: 2px; background: var(--panel); padding: 5px 8px; border-radius: 12px; align-items: center; }
.way b { margin-right: 4px; }
.mini { height: 20px; border-radius: 5px; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15); }
#tray { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 100%; min-height: 64px; }
.brick { --u: clamp(6px, calc((160vw - 800px) / 45), 22px); height: 64px; min-width: 64px; max-width: 100%; border-radius: 14px; font-size: 26px; font-weight: 900; box-shadow: 0 5px 0 rgba(0,0,0,0.22), inset 0 -6px 0 rgba(0,0,0,0.12); transition: transform 0.1s; }
.brick:active { transform: translateY(4px) scale(0.97); box-shadow: 0 1px 0 rgba(0,0,0,0.22); }
#actions { display: flex; gap: 12px; align-items: center; }
.act { width: 68px; height: 68px; border-radius: 22px; font-size: 32px; background: #fff; box-shadow: 0 5px 0 rgba(0,0,0,0.18); }
.act.go { width: 96px; background: var(--good); color: #fff; font-size: 38px; }
.act[aria-pressed="true"] { background: #ffe38a; }
.act:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,0.18); }
.act.pulse { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.1); } }

.screen { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: linear-gradient(#5db8ff, #bfe6ff 60%, #fff1c9); background-size: cover; background-position: center; }
.screen h1 { margin: 0; font-size: clamp(40px, 9vw, 96px); font-weight: 900; color: #fff; text-shadow: 0 5px 0 rgba(43,42,76,0.35); text-align: center; padding: 0 12px; }
.big { min-height: 88px; padding: 0 44px; border-radius: 30px; font-size: 40px; font-weight: 900; background: var(--accent); color: #fff; box-shadow: 0 7px 0 rgba(0,0,0,0.2); }
.big:active { transform: translateY(5px); box-shadow: 0 2px 0 rgba(0,0,0,0.2); }
#levels { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.lvl { width: 92px; height: 92px; border-radius: 26px; background: #fff; box-shadow: 0 6px 0 rgba(0,0,0,0.18); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lvl b { font-size: 36px; line-height: 1; }
.lvl span { font-size: 24px; font-weight: 800; color: var(--accent); }
#end-stars { font-size: clamp(40px, 8vw, 80px); font-weight: 900; color: #fff; text-shadow: 0 4px 0 rgba(43,42,76,0.35); }

@media (max-height: 560px) {
  #goal { padding: 2px 16px 4px; }
  #progress { padding: 3px 10px; }
  .pill { width: 24px; height: 24px; font-size: 13px; }
}

/* Le panneau du bas ne doit pas intercepter les touches destinées aux briques du pont. */
#bottom > * { pointer-events: auto; }
.screen { overflow-y: auto; justify-content: safe center; -webkit-overflow-scrolling: touch; }
@media (max-width: 480px) {
  .screen { gap: 16px; padding: 12px; }
  .big { min-height: 64px; font-size: 30px; padding: 0 32px; }
  .lvl { width: 72px; height: 72px; }
  #hud { padding: max(6px, env(safe-area-inset-top)) 8px 4px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #bottom { flex-direction: row; justify-content: center; align-items: center; gap: 12px; padding: 4px 12px calc(6px + env(safe-area-inset-bottom)); }
  #tray { flex: 1 1 auto; min-height: 0; flex-wrap: nowrap; gap: 6px; }
  .brick { height: 56px; min-width: 56px; font-size: 22px; }
  .act { width: 56px; height: 56px; font-size: 26px; }
  .act.go { width: 76px; }
  #actions { gap: 8px; flex: none; }
  .screen { gap: 10px; padding: 8px 12px; }
  .big { min-height: 60px; font-size: 30px; }
}