:root { --ink: #3b2a6b; --card: clamp(76px, 17vmin, 128px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  font-family: "Trebuchet MS", "Avenir Next", system-ui, sans-serif; color: var(--ink); background: #bfe8ff; }
canvas#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
canvas#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; touch-action: manipulation; }
.row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }

.big { min-width: 64px; min-height: 64px; border-radius: 22px; background: #fff; font-size: 30px; font-weight: 800;
  box-shadow: 0 5px 0 rgba(59,42,107,.25); padding: 8px 18px; }
.big:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(59,42,107,.25); }
.big.round { width: 64px; padding: 0; border-radius: 50%; }
.big.go { background: #5fd35f; color: #fff; min-height: 72px; padding: 8px 40px; }
.big[disabled] { opacity: .45; cursor: default; }

.layer { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 20; pointer-events: none; }
.layer > * { pointer-events: auto; }
body[data-screen="home"] #home, body[data-screen="levels"] #levels, body[data-screen="end"] #end { display: flex; }
.panel { background: rgba(255,255,255,.88); border-radius: 32px; padding: 20px 26px; display: flex; flex-direction: column;
  gap: 16px; align-items: center; max-width: 94vw; max-height: 86vh; max-height: 86dvh; overflow: auto; animation: pop .45s cubic-bezier(.3,1.6,.5,1); }
.panel h1 { margin: 0; font-size: clamp(30px, 6vw, 54px); text-align: center; }
.panel h2 { margin: 0; font-size: clamp(26px, 5vw, 40px); text-align: center; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#home .panel { margin-top: 6vh; }
.act { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 150px; font-size: 22px; padding: 14px 18px; }
.act .ic { font-size: 62px; line-height: 1.1; }
.lvl { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 100px; min-height: 100px; font-size: 40px; }
.lvl small { font-size: 22px; letter-spacing: 2px; }

#hud { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: none; flex-wrap: wrap; justify-content: space-between;
  align-items: center; padding: 10px; gap: 8px; pointer-events: none; }
#hud > * { pointer-events: auto; }
body:not([data-screen="home"]) #hud, body[data-screen="home"] #hud { display: flex; }
body[data-screen="home"] #btnSpeak, body[data-screen="home"] #btnHome,
body[data-screen="levels"] #btnSpeak, body[data-screen="end"] #btnSpeak { visibility: hidden; }
#wheel { display: flex; gap: 10px; margin: 0 auto; }
#wheel .big { font-size: 32px; padding: 0; width: 64px; height: 64px; border-radius: 50%; }
#wheel .big.on { outline: 5px solid #ffd23f; background: #fffbe0; transform: scale(1.1); }
#wheel.locked .big:not(.on) { opacity: .4; pointer-events: none; }
@media (max-width: 560px) { #wheel { order: 3; width: 100%; justify-content: center; } }

#prompt { position: fixed; z-index: 9; top: 84px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.92); border-radius: 999px;
  padding: 8px 22px; font-weight: 800; font-size: clamp(18px, 3.2vmin, 28px); text-align: center; max-width: 92vw; display: none; }
body[data-screen="play"] #prompt { display: block; }
@media (max-width: 560px) { #prompt { top: 150px; } }
#toast { position: fixed; z-index: 30; left: 50%; top: 42%; transform: translate(-50%, 0) scale(.8); background: #fff; border-radius: 28px;
  padding: 12px 26px; font-size: clamp(20px, 4vmin, 32px); font-weight: 800; box-shadow: 0 6px 0 rgba(59,42,107,.2); opacity: 0;
  pointer-events: none; transition: opacity .25s, transform .25s; max-width: 90vw; text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, 0) scale(1); }

.dock { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; padding: 10px 10px 16px; display: none; flex-direction: column;
  align-items: center; gap: 10px; pointer-events: none; }
.dock > * { pointer-events: auto; }
body[data-screen="play"][data-activity="plante"] #dock-plante,
body[data-screen="play"][data-activity="cycle"] #dock-cycle,
body[data-screen="play"][data-activity="saison"] #dock-saison { display: flex; }

#needs { background: rgba(255,255,255,.9); border-radius: 999px; padding: 6px 18px; font-size: 32px; display: flex; gap: 6px; min-height: 52px; align-items: center; }
#needs .off { filter: grayscale(1); opacity: .35; }
.act-btn { width: clamp(96px, 20vmin, 130px); min-height: 84px; font-size: 48px; }
.blink { animation: blink .6s ease-in-out 4; }
@keyframes blink { 50% { background: #ffe27a; transform: scale(1.15); box-shadow: 0 0 0 8px rgba(255,210,63,.6); } }

.face { position: relative; width: 100%; height: 100%; border-radius: 18px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.face img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.face .em { font-size: calc(var(--card) * .55); line-height: 1; }
.face .lab { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 15px; font-weight: 800; background: rgba(255,255,255,.8); padding: 2px; }

#slots { flex-wrap: nowrap; gap: 6px; align-items: center; background: rgba(255,255,255,.78); border-radius: 26px; padding: 8px 10px; }
.slot { width: var(--card); height: var(--card); border-radius: 20px; border: 4px dashed #8d6bff; background: rgba(255,255,255,.7); flex: none; padding: 0; }
.slot.filled { border-style: solid; border-color: #5fd35f; padding: 0; animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
.slot.target { background: #fff6c2; transform: scale(1.06); }
.arrow { font-size: clamp(22px, 5vmin, 40px); font-weight: 800; }
#hand { gap: 10px; }
.card { width: var(--card); height: var(--card); border-radius: 20px; background: #fff; padding: 5px; flex: none; box-shadow: 0 5px 0 rgba(59,42,107,.25);
  touch-action: none; cursor: grab; }
.card.sel { outline: 5px solid #ffd23f; transform: translateY(-6px); }
.card.bounce { animation: bounce .55s; }
@keyframes bounce { 0% { transform: translateY(-30px); } 30% { transform: translateY(0); } 50% { transform: translateY(-14px); } 70% { transform: translateY(0); } 85% { transform: translateY(-5px); } 100% { transform: translateY(0); } }
.card.ghost { position: fixed; z-index: 50; pointer-events: none; transform: scale(1.12); opacity: .92; margin: 0; }
.card.drag-src { opacity: .3; }

#proposals { gap: 12px; }
.prop { width: clamp(100px, 22vmin, 150px); min-height: clamp(110px, 24vmin, 160px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: clamp(15px, 2.6vmin, 20px); padding: 8px; }
.prop .em { font-size: clamp(46px, 11vmin, 72px); line-height: 1.1; }
.prop.done { background: #d6f7d0; opacity: .6; pointer-events: none; }
.prop.shake { animation: shake .45s; }
@keyframes shake { 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }

#end { background: rgba(59,42,107,.3); }
#end .stars { font-size: clamp(54px, 13vw, 90px); letter-spacing: 6px; }
#end .stars .off { filter: grayscale(1); opacity: .3; }
#end .win { font-size: clamp(24px, 4.5vw, 34px); font-weight: 800; text-align: center; }

/* Téléphone */
@media (max-width: 480px) {
  .panel { padding: 16px 14px; gap: 12px; }
  .act { min-width: 120px; }
  .act .ic { font-size: 48px; }
  #home .panel { margin-top: 70px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .panel { padding: 10px 18px; gap: 8px; max-height: calc(100dvh - 84px); margin-top: 72px; }
  #home .panel { margin-top: 72px; }
  .act { min-width: 120px; padding: 8px 14px; }
  .act .ic { font-size: 40px; }
  .lvl { min-height: 72px; min-width: 84px; font-size: 30px; }
  .panel h1 { font-size: 28px; }
}