/* Scène proportionnelle : les bras et leurs boutons partagent les mêmes repères. */
[data-poulpe-scene] { background: radial-gradient(ellipse at 50% 5%, #167e9b 0, #075074 38%, #082650 78%); }
[data-poulpe-scene] .ocean-bg { position: fixed; inset: 0; width: 100%; height: 100dvh; overflow: hidden; }
[data-poulpe-scene] .ocean-bg::after { content: ''; position: absolute; inset: auto -5% -60px; height: 115px; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 10%, #286d76, #124050 70%); box-shadow: 0 -12px 60px #51dfc218; }
[data-poulpe-scene] .light-rays { inset: 0; height: 85%; opacity: .6; }
[data-poulpe-scene] .seaweed { z-index: 1; opacity: .65; border-radius: 80% 10% 0 0; background: linear-gradient(#51d9af, #1a786f); }
[data-poulpe-scene] .fish { opacity: .38; }
[data-poulpe-scene] .header { height: 66px; padding: 7px 70px 7px 16px; background: #062e46b3; border-bottom: 1px solid #91e7eb2b; }
[data-poulpe-scene] .quit-btn { width: 46px; height: 46px; font-size: 1.4rem; }
[data-poulpe-scene] .game-container { height: auto; min-height: calc(100dvh - 66px); padding: 18px 12px 20px; gap: 8px; }
[data-poulpe-scene] .target-zone { margin: 0; min-width: 260px; max-width: 100%; padding: 12px 20px 8px; border: 2px solid #99eeed; background: #06374fe6; box-shadow: 0 8px 24px #031d3b40; }
[data-poulpe-scene] .target-number { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.15; }
[data-poulpe-scene] .target-label { color: #d1ffff; font-size: .86rem; }
[data-poulpe-scene] .operation-badge { background: #7441bf; font-size: .78rem; }
[data-poulpe-scene] .octopus-zone { position: relative; width: min(420px, 100%); height: auto; aspect-ratio: 420 / 400; flex: 0 0 auto; margin: 0; transform: none; isolation: isolate; }
[data-poulpe-scene] .octopus-zone::before { content: ''; position: absolute; inset: 8% 0 0; border-radius: 50%; background: radial-gradient(ellipse, #59dace1a, transparent 70%); }
[data-poulpe-scene] .tentacles-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
[data-poulpe-scene] .octopus-arm path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
[data-poulpe-scene] .arm-outline { stroke: #382165; stroke-width: 29; }
[data-poulpe-scene] .arm-fill { stroke: url(#poulpeArm); stroke-width: 24; }
[data-poulpe-scene] .arm-suckers { stroke: #f0b4f4; stroke-width: 7; stroke-dasharray: 1 14; opacity: .75; }
[data-poulpe-scene] .octopus-arm.selected .arm-outline { stroke: #b8fff0; filter: drop-shadow(0 0 4px #70ecd4); }
[data-poulpe-scene] .octopus-body { position: absolute; top: 7%; left: 50%; width: 39%; height: 36%; transform: translateX(-50%); border-radius: 48% 48% 39% 39%; z-index: 2; background: radial-gradient(ellipse at 34% 20%, #dfb2ff, #ad69ed 38%, #8048ce 75%); box-shadow: inset -8px -12px 18px #492a832e, inset 4px 5px 4px #f5deff50, 0 8px 12px #06163240; animation: poulpe-breathe 3s ease-in-out infinite; }
[data-poulpe-scene] .octopus-body::before { content: ''; position: absolute; width: 21%; height: 10%; top: 15%; left: 20%; border-radius: 50%; background: #f9e5ff55; transform: rotate(-25deg); }
[data-poulpe-scene] .octopus-body::after { content: ''; position: absolute; width: 100%; height: 15%; left: 0; top: 64%; background: radial-gradient(ellipse at 20% 50%, #f6a3dc 0 8%, transparent 10%), radial-gradient(ellipse at 80% 50%, #f6a3dc 0 8%, transparent 10%); opacity: .7; }
[data-poulpe-scene] .octopus-eyes { position: absolute; top: 34%; left: 18%; width: 64%; height: 31%; display: flex; justify-content: space-between; gap: 0; }
[data-poulpe-scene] .eye { width: 33%; height: 100%; background: #fffdf8; border-radius: 50%; position: relative; box-shadow: inset 0 -3px 4px #37174320; }
[data-poulpe-scene] .eye::after { content: ''; position: absolute; width: 50%; height: 52%; left: 45%; top: 42%; border-radius: 50%; background: #30264a; transition: height .2s, top .2s; }
[data-poulpe-scene] .eye::before { content: ''; position: absolute; width: 18%; height: 18%; left: 49%; top: 43%; border-radius: 50%; background: white; z-index: 1; }
[data-poulpe-scene] .octopus-mouth { position: absolute; left: 41%; top: 70%; width: 18%; height: 11%; border-radius: 15% 15% 50% 50%; background: #573082; border-bottom: 3px solid #f5a5dd; transition: height .2s; }
[data-poulpe-scene] .octopus-body.happy .eye::after { height: 15%; top: 53%; }
[data-poulpe-scene] .octopus-body.happy .octopus-mouth { height: 17%; }
[data-poulpe-scene] .octopus-body.sad .octopus-mouth { border-radius: 50% 50% 10% 10%; border: 0; }
[data-poulpe-scene] .octopus-body.thinking .eye::after { top: 30%; }
@keyframes poulpe-breathe { 50% { transform: translateX(-50%) translateY(-4px) rotate(1deg); } }
[data-poulpe-scene] .tentacle { position: absolute; top: var(--y); left: var(--x); right: auto; bottom: auto; translate: -50% -50%; width: 16%; height: auto; aspect-ratio: 1; min-width: 44px; border-radius: 50%; display: grid; place-items: center; padding: 0; font: 700 clamp(1.2rem, 4vw, 1.65rem) 'Fredoka', system-ui; color: #fff; background: linear-gradient(145deg, #724fc1, #50318f); border: 3px solid #e1c6ff; box-shadow: 0 5px 0 #301f5f, inset 0 2px 1px #ffffff30, 0 7px 12px #06182b50; cursor: pointer; z-index: 3; transition: transform .15s, background .15s, box-shadow .15s; }
[data-poulpe-scene] .tentacle[data-arg="0"] { --x: 11.19%; --y: 46.5%; }
[data-poulpe-scene] .tentacle[data-arg="1"] { --x: 10.71%; --y: 65.75%; }
[data-poulpe-scene] .tentacle[data-arg="2"] { --x: 21.43%; --y: 83%; }
[data-poulpe-scene] .tentacle[data-arg="3"] { --x: 40%; --y: 91%; }
[data-poulpe-scene] .tentacle[data-arg="4"] { --x: 60%; --y: 91%; }
[data-poulpe-scene] .tentacle[data-arg="5"] { --x: 78.57%; --y: 83%; }
[data-poulpe-scene] .tentacle[data-arg="6"] { --x: 89.29%; --y: 65.75%; }
[data-poulpe-scene] .tentacle[data-arg="7"] { --x: 88.81%; --y: 46.5%; }
[data-poulpe-scene] .tentacle:hover { background: linear-gradient(145deg, #8965d6, #633fa9); }
[data-poulpe-scene] .tentacle:focus-visible { outline: 3px solid white; outline-offset: 5px; }
[data-poulpe-scene] .tentacle.selected { background: #ffd681; color: #352047; border-color: #fff3bc; transform: scale(1.07); box-shadow: 0 5px 0 #92613a, 0 0 18px #ffdf9270; }
[data-poulpe-scene] .tentacle.correct { background: #176c55; color: white; border-color: #acffce; animation: poulpe-correct .5s ease; }
[data-poulpe-scene] .tentacle.wrong { background: #a13152; color: white; border-color: #ffc3ce; animation: poulpe-wrong .35s ease; }
[data-poulpe-scene] .tentacle:active { transform: scale(.95); }
@keyframes poulpe-correct { 50% { transform: scale(1.18); } }
@keyframes poulpe-wrong { 25%, 75% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
[data-poulpe-scene] .formula-zone { margin: 0; min-height: 44px; padding: 8px 16px; background: #052f47e6; border-color: #81e7e870; }
[data-poulpe-scene] .formula-text { font-size: 1.1rem; color: #d7fcff; }
[data-poulpe-scene] .validate-btn { margin: 0; min-height: 48px; padding: 10px 30px; font-size: 1.05rem; background: #7650c4; box-shadow: 0 4px 0 #443073; }
[data-poulpe-scene] .validate-btn:disabled { color: #bfd9e4; background: #24485f; box-shadow: none; }
[data-poulpe-scene] .validate-zone { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; padding: 0; }
[data-poulpe-scene] [data-game-fullscreen-slot] { display: inline-flex; color: #d7fcff; }
[data-poulpe-scene] .combo-zone { top: 79px; left: auto; right: 20px; transform: none; pointer-events: none; }
@media (max-width: 380px) {
    [data-poulpe-scene] .game-container { padding-inline: 8px; }
    [data-poulpe-scene] .header { padding-left: 8px; padding-right: 62px; }
    [data-poulpe-scene] .stats { gap: 5px; }
    [data-poulpe-scene] .stat { min-width: 42px; padding: 4px; }
}
[data-poulpe-scene="words"] .game-container { max-width: none; }
[data-poulpe-scene="words"] .question-zone { margin: 0; width: min(440px, 100%); padding: 12px 18px; background: #06374fe6; border: 2px solid #99eeed; box-shadow: 0 8px 24px #031d3b40; }
[data-poulpe-scene="words"] .question-text { font-size: .95rem; }
[data-poulpe-scene="words"] .question-verb { font-size: clamp(1.25rem, 4vw, 1.7rem); }
[data-poulpe-scene="words"] .octopus-zone { width: min(460px, 100%); }
[data-poulpe-scene="words"] .octopus-body { filter: none; }
[data-poulpe-scene="words"] .tentacle { width: 27%; height: 14%; min-height: 44px; aspect-ratio: auto; border-radius: 22px; padding: 4px; font-size: clamp(.75rem, 2.8vw, 1rem); line-height: 1.15; transform: none; }
[data-poulpe-scene="words"] .tentacle[data-arg="0"] { --x: 14%; --y: 35%; }
[data-poulpe-scene="words"] .tentacle[data-arg="1"] { --x: 14%; --y: 54%; }
[data-poulpe-scene="words"] .tentacle[data-arg="2"] { --x: 14%; --y: 73%; }
[data-poulpe-scene="words"] .tentacle[data-arg="3"] { --x: 14%; --y: 92%; }
[data-poulpe-scene="words"] .tentacle[data-arg="4"] { --x: 86%; --y: 92%; }
[data-poulpe-scene="words"] .tentacle[data-arg="5"] { --x: 86%; --y: 73%; }
[data-poulpe-scene="words"] .tentacle[data-arg="6"] { --x: 86%; --y: 54%; }
[data-poulpe-scene="words"] .tentacle[data-arg="7"] { --x: 86%; --y: 35%; }
[data-poulpe-scene="words"] .tentacle:disabled { opacity: .4; cursor: default; box-shadow: none; }
[data-poulpe-scene="words"] .validate-zone { margin: 0; padding: 0; }
@media (orientation: portrait) and (max-height: 650px) {
    [data-poulpe-scene] .game-container { padding-block: 10px; gap: 5px; }
    [data-poulpe-scene] .target-zone { padding: 8px 12px 6px; }
}
@media (orientation: landscape) and (max-height: 600px) and (min-width: 600px) {
    [data-poulpe-scene] .game-container { display: grid; grid-template-columns: minmax(230px, 330px) minmax(300px, 420px); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: 'target scene' 'formula scene' 'validate scene' '. scene'; justify-content: center; align-items: center; justify-items: center; min-height: calc(100dvh - 66px); padding: 12px 16px; column-gap: 24px; }
    [data-poulpe-scene] .target-zone { grid-area: target; align-self: end; }
    [data-poulpe-scene] .octopus-zone { grid-area: scene; width: min(100%, calc((100dvh - 94px) * 1.05)); min-width: 290px; }
    [data-poulpe-scene] .formula-zone { grid-area: formula; }
    [data-poulpe-scene] .validate-zone { grid-area: validate; }
    [data-poulpe-scene] .target-number { font-size: 2rem; }
    [data-poulpe-scene] .combo-zone { top: 70px; right: 10px; }
    [data-poulpe-scene="words"] .question-zone { grid-area: target; }
    [data-poulpe-scene="words"] .validate-zone { grid-area: validate; }
}
@media (prefers-reduced-motion: reduce) {
    [data-poulpe-scene] .octopus-body, [data-poulpe-scene] .bubble, [data-poulpe-scene] .fish, [data-poulpe-scene] .seaweed, [data-poulpe-scene] .light-rays, [data-poulpe-scene] .tentacle, [data-poulpe-scene] .combo-badge, [data-poulpe-scene] .confetti { animation: none !important; }
    [data-poulpe-scene] .tentacle { transition: none; }
}