.zh-game{box-sizing:border-box;position:relative;isolation:isolate;overflow:hidden;min-height:100dvh;padding:clamp(20px,4vw,44px);color:#fff9e8;text-align:center;font-family:system-ui,-apple-system,sans-serif;background:radial-gradient(circle at 50% 65%,#56375f 0,#281d37 52%,#151320 100%)}.zh-game *{box-sizing:border-box}.zh-stars{position:absolute;inset:0;z-index:-1;opacity:.5;background-image:radial-gradient(#f3cb74 1px,transparent 1px);background-size:37px 53px}.zh-top,.zh-hud{display:flex;justify-content:space-between;align-items:center;gap:12px}.zh-brand{font-weight:900;letter-spacing:.12em}.zh-tag{padding:6px 12px;border:1px solid #e9b865;border-radius:20px;color:#ffcb79}.zh-hud{margin:35px auto 0;max-width:650px;font-size:clamp(18px,3vw,28px)}.zh-hud>div{min-width:110px;padding:8px 15px;border-radius:16px;background:#ffffff18}.zh-game h1{font-size:clamp(30px,5vw,58px);line-height:1.05;margin:25px 0 8px;color:#ffce78}.zh-subtitle{margin:0 0 22px}.zh-arena{position:relative;margin:auto;width:min(100%,650px);height:min(53dvh,720px);min-height:310px;overflow:hidden;border:3px solid #b98761;border-radius:30px;background:linear-gradient(#201a31cc,#342843a8),radial-gradient(circle at center,#624057,#201a31);box-shadow:0 22px 65px #0a0714a6}.zh-target{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#ffcb7555;z-index:3}.zh-target:after{content:'✦';position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);font-size:52px;color:#ffd874;text-shadow:0 0 15px #ffc45a}.zh-creature{position:absolute;display:grid;place-items:center;width:88px;height:88px;font-size:64px;filter:drop-shadow(0 8px 7px #0008);will-change:transform}.zh-magic{position:absolute;left:50%;top:54%;z-index:5;font-size:68px;transform:translate(-50%,-50%);pointer-events:none}.zh-magic.active{animation:zh-burst .35s ease-out}@keyframes zh-burst{from{scale:.3;opacity:1}to{scale:2.2;opacity:0}}.zh-panel{max-width:650px;margin:16px auto;padding:12px}.zh-panel p{font-size:20px;margin:0 0 12px}.zh-panel small{display:block;margin:10px auto;opacity:.72}.zh-button{border:0;border-radius:999px;padding:16px 26px;background:#e39a54;color:#261b29;font:800 19px system-ui;cursor:pointer;box-shadow:0 7px 0 #97552e}.zh-button:active{transform:translateY(5px);box-shadow:0 2px 0 #97552e}.zh-controller{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:75dvh}.zh-wand{font-size:95px}.zh-controller p{font-size:19px}.zh-fire{width:min(80vw,330px);aspect-ratio:1;border-radius:50%;font-size:clamp(22px,6vw,30px)}
.zh-code{font-size:clamp(46px,11vw,76px);font-weight:900;letter-spacing:.12em;color:#ffd574}.zh-controller form{display:grid;gap:14px;justify-items:center}.zh-controller input{max-width:240px;padding:12px;font-size:32px;text-align:center;letter-spacing:.12em;border:2px solid #e39a54;border-radius:12px}.zh-game [hidden]{display:none!important}.zh-button:disabled{opacity:.5;cursor:default}
.zh-qr{width:clamp(140px,18dvh,240px);margin:8px auto}.zh-qr svg{display:block;width:100%;border-radius:12px}.zh-panel:has(.zh-qr){padding:4px}.zh-panel:has(.zh-qr) p{margin:4px 0}.zh-target{height:0!important;bottom:auto!important;width:100%!important;left:0!important;border-top:2px dashed #ffd574aa;background:none!important;transform:translateY(-50%);transition:top .08s linear}.zh-target:after{top:0!important;left:50%!important}#zh-controls{display:grid;justify-items:center;gap:16px}#zh-controls label{font-weight:700}#zh-aim{appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;width:60px;height:24dvh;accent-color:#e39a54;touch-action:none}.zh-fire{width:min(55vw,240px);aspect-ratio:1;font-size:clamp(19px,5vw,26px)}
.zh-controller{min-height:calc(100dvh - 100px);justify-content:flex-start;padding-top:3dvh}.zh-controller h1{font-size:clamp(28px,7vw,38px);margin:8px 0}.zh-controller #zh-feedback{margin:4px 0 12px;font-size:16px}.zh-controller #zh-controls{width:100%;max-width:520px;gap:12px}.zh-start{margin:10px auto}.zh-remote{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;height:min(53dvh,470px);min-height:275px}.zh-aim-pad{position:relative;overflow:hidden;border:2px solid #e7bc75;border-radius:30px;background:linear-gradient(180deg,#78577e99,#342842);touch-action:none;user-select:none;-webkit-user-select:none;cursor:ns-resize}.zh-aim-track{position:absolute;top:25px;bottom:25px;left:50%;width:5px;transform:translateX(-50%);border-radius:10px;background:#ffdc8e70}.zh-aim-thumb{position:absolute;bottom:50%;left:50%;z-index:2;display:grid;place-items:center;width:66px;height:66px;transform:translate(-50%,50%);border-radius:50%;background:#ffcf7d;color:#342640;font-size:38px;font-weight:800;box-shadow:0 4px 25px #0008;pointer-events:none;transition:bottom .06s linear}.zh-pad-hint{position:absolute;bottom:16px;left:0;right:0;color:#fff3d1;font-size:13px;letter-spacing:.12em;font-weight:900;pointer-events:none}.zh-fire-zone{display:grid;place-items:center}.zh-fire{width:min(42vw,190px);aspect-ratio:1;padding:12px;font-size:62px;touch-action:manipulation}.zh-fire span,.zh-fire small{display:block}.zh-fire small{font-size:19px;letter-spacing:.1em}.zh-aim-pad:focus-visible,.zh-fire:focus-visible{outline:4px solid #fff1b0;outline-offset:3px}
#zh-aim{width:100%;height:auto;appearance:none;writing-mode:horizontal-tb;direction:ltr}
.zh-playing,.zh-playing body,.zh-playing .zh-game{touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none}.zh-playing body{overflow:hidden}.zh-gesture-hint{width:min(100%,430px);min-height:50dvh;display:grid;align-content:center;justify-items:center;gap:10px;margin:auto;border:2px solid #e7bc75;border-radius:30px;background:#342842aa}.zh-gesture-hint span{font-size:clamp(50px,12vw,78px);color:#ffcf7d;line-height:1}.zh-gesture-hint strong{font-size:clamp(18px,5vw,25px)}.zh-playing .zh-gesture-hint{border-color:#ffcf7d;background:radial-gradient(circle,#754a69aa,#342842aa)}.zh-playing .zh-gesture-hint:after{content:'Tout l’écran est ta baguette';margin-top:12px;color:#ffe9bd;font-size:14px}