:root{--bg:#070707;--panel:#171717;--line:#333;--gold:#e6b940;--danger:#d34;--safe-top:env(safe-area-inset-top);--safe-bottom:env(safe-area-inset-bottom)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#000;font-family:Inter,system-ui,Arial,sans-serif;color:#fff;touch-action:none;user-select:none}button,input{font:inherit}.screen{display:none;width:100%;height:100%}.screen.active{display:block}.phone-stage{position:relative;width:100%;height:100%;overflow:hidden;background:#000}.screen-track{display:flex;width:200%;height:100%;transform:translateX(0);transition:transform .28s cubic-bezier(.2,.8,.2,1)}.fake-screen{width:50%;height:100%;flex:none;background:#000}.fake-screen img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.midas-layer{position:absolute;inset:0;display:none;pointer-events:none;overflow:hidden}.midas-layer.visible{display:block}.hand-group{position:absolute;left:50%;bottom:0;height:var(--hand-height,100vh);width:auto;aspect-ratio:2/3;transform:translateX(-50%);will-change:transform,opacity,filter;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}.hand-group #midasHand{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 18px #0008);pointer-events:none}.playing-card{position:absolute;left:50%;bottom:31%;width:var(--card-width,88vw);aspect-ratio:2.5/3.5;transform:translateX(-50%);transform-style:preserve-3d;opacity:0;visibility:hidden;will-change:transform,opacity}.playing-card.shown{opacity:1;visibility:visible}.card-face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;filter:drop-shadow(0 4px 8px #0008)}.card-front-image{transform:rotateY(0deg);-webkit-transform:rotateY(0deg);z-index:2}.card-back-image{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);z-index:1}.playing-card.face-down .card-front-image{z-index:1}.playing-card.face-down .card-back-image{z-index:2}.playing-card{transition:transform var(--card-flip-duration,.75s) cubic-bezier(.4,.05,.2,1)}.playing-card.face-down{transform:translateX(-50%) rotateY(180deg);-webkit-transform:translateX(-50%) rotateY(180deg)}.midas-layer.fetching .hand-group{animation:handFetch var(--hand-motion-duration,2s) cubic-bezier(.55,.05,.2,1) forwards}.midas-layer.removing .hand-group{animation:handRemove var(--hand-motion-duration,2s) cubic-bezier(.55,.05,.2,1) forwards}.midas-layer.dissolving .hand-group{animation:dissolve var(--dissolve-duration,1.8s) ease forwards}.midas-layer.dissolving .playing-card{display:none}@keyframes handFetch{0%{transform:translateX(-50%) translateY(0)}48%{transform:translateX(-50%) translateY(calc(var(--hand-visible-base,200px) - var(--hand-height,100vh)))}55%{transform:translateX(-50%) translateY(calc(var(--hand-visible-base,200px) - var(--hand-height,100vh)))}100%{transform:translateX(-50%) translateY(0)}}@keyframes handRemove{0%{transform:translateX(-50%) translateY(0)}48%{transform:translateX(-50%) translateY(calc(var(--hand-visible-base,200px) - var(--hand-height,100vh)))}55%{transform:translateX(-50%) translateY(calc(var(--hand-visible-base,200px) - var(--hand-height,100vh)))}100%{transform:translateX(-50%) translateY(0)}}@keyframes dissolve{0%{opacity:1;filter:blur(0);-webkit-mask-size:100% 100%;mask-size:100% 100%}35%{opacity:.9;filter:drop-shadow(0 0 18px #ffd967) blur(.5px)}100%{opacity:0;filter:blur(14px);transform:translateX(-50%) scale(1.06);-webkit-mask-image:radial-gradient(circle at 50% 40%,transparent 0 42%,#000 72%);mask-image:radial-gradient(circle at 50% 40%,transparent 0 42%,#000 72%)}}
.config-screen{overflow:auto;touch-action:auto;background:#0c0c0c;padding:calc(18px + var(--safe-top)) 18px calc(30px + var(--safe-bottom));user-select:text}.config-header{max-width:1200px;margin:auto auto 18px;display:flex;align-items:center;justify-content:space-between;gap:15px}.config-header h1{margin:0;color:var(--gold);font-size:2rem}.config-header p{margin:2px 0 0;color:#aaa}.config-grid{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px}.panel h2{margin:0 0 10px;font-size:1.05rem}.panel p{color:#bbb;line-height:1.4}.panel label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;color:#ddd}.panel input[type=file]{max-width:65%}.row{display:flex;gap:8px;flex-wrap:wrap}button{border:1px solid #444;background:#252525;color:#fff;border-radius:10px;padding:10px 13px;cursor:pointer}button:hover{background:#303030}.primary{background:var(--gold);color:#17120a;border-color:var(--gold);font-weight:800}.timings label input{width:76px;margin-left:auto}.timings label span{width:28px;color:#aaa}.range output{min-width:58px;text-align:right;color:var(--gold);font-weight:800}.range input{flex:1}.editor-panel{grid-column:span 1}.zone-toolbar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}.zone-toolbar button.active{background:var(--gold);color:#111;border-color:var(--gold)}.zone-toolbar.values button{min-width:42px}.editor{position:relative;width:100%;aspect-ratio:9/16;background:#050505;border:1px solid #444;border-radius:12px;overflow:hidden;touch-action:none}.editor img{width:100%;height:100%;object-fit:cover;display:block}.zones{position:absolute;inset:0}.zone{position:absolute;border:2px solid var(--zone-color,#ffd23f);background:color-mix(in srgb,var(--zone-color,#ffd23f) 22%,transparent);display:flex;align-items:center;justify-content:center;font-weight:900;text-shadow:0 1px 3px #000;cursor:move;min-width:18px;min-height:18px}.zone .handle{position:absolute;right:-5px;bottom:-5px;width:13px;height:13px;background:#fff;border:2px solid #000;border-radius:50%;cursor:nwse-resize}.help ol{padding-left:22px;line-height:1.7}.help strong{color:var(--gold)}
@media (min-width:900px){.editor-panel{grid-column:span 1}.editor{max-height:650px}}
.zone-controls{margin-top:12px;padding-top:12px;border-top:1px solid #333;display:grid;gap:10px}.zone-controls label{margin:0}.zone-size{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:10px!important}.zone-size input{min-width:0;width:100%}.zone-size output{min-width:55px;text-align:right;color:var(--gold);font-weight:800}.lock-control{justify-content:flex-start!important;cursor:pointer}.lock-control input{width:18px;height:18px;accent-color:var(--gold)}.editor:not(.resize-unlocked) .zone .handle{display:none}.editor.resize-unlocked .zone .handle{display:block}
.editor:not(.resize-unlocked) .handle{display:none!important;pointer-events:none!important}
.editor.resize-unlocked .handle{display:block;pointer-events:auto}
.zone-label{pointer-events:none}

/* Neutralise les actions natives d'appui long sur les captures et les éléments visuels. */
html,body,#app,.phone-stage,.fake-screen,.midas-layer,img{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
img{
  -webkit-user-drag:none;
  user-drag:none;
  pointer-events:none;
}
/* Les images de l'éditeur restent non interactives ; les zones superposées reçoivent les gestes. */
.editor img{pointer-events:none}

.preview-panel{align-self:start}.midas-preview{position:relative;width:min(100%,390px);aspect-ratio:9/16;margin:12px auto 0;overflow:hidden;border:1px solid #444;border-radius:16px;background:#000}.preview-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.preview-hand-group{position:absolute;left:50%;bottom:0;height:100%;width:auto;aspect-ratio:2/3;transform:translateX(-50%);pointer-events:none}.preview-hand{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 10px #0008)}.preview-card{position:absolute;left:50%;bottom:31%;width:88%;max-height:78%;aspect-ratio:2.5/3.5;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 3px 6px #0009);opacity:0;visibility:hidden}.preview-card.visible{opacity:1;visibility:visible}.preview-toggle{justify-content:flex-start!important;margin-top:12px!important;cursor:pointer}.preview-toggle input{width:18px;height:18px;accent-color:var(--gold)}

/* Réglage précis de la position de la main et de la carte */
.hand-group{left:calc(50% + var(--hand-x,0px));bottom:calc(0px - var(--hand-y,0px))}
.playing-card{left:calc(50% + var(--card-x,0px));bottom:calc(31% - var(--card-y,0px))}
.midas-layer.materializing .hand-group{animation:materialize var(--materialize-duration,1.8s) ease forwards}
@keyframes materialize{0%{opacity:0;filter:blur(14px);transform:translateX(-50%) scale(1.06);-webkit-mask-image:radial-gradient(circle at 50% 40%,transparent 0 42%,#000 72%);mask-image:radial-gradient(circle at 50% 40%,transparent 0 42%,#000 72%)}65%{opacity:.9;filter:drop-shadow(0 0 18px #ffd967) blur(.5px)}100%{opacity:1;filter:blur(0);transform:translateX(-50%) scale(1);-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}}
.position-controller{position:absolute;z-index:1000;left:16px;top:120px;width:min(250px,calc(100vw - 24px));margin:0;padding:10px 12px 12px;border:1px solid #555;border-radius:14px;background:#0d0d0df2;box-shadow:0 12px 32px #000b;touch-action:none;user-select:none}.position-drag-handle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-10px -12px 10px;padding:9px 12px;border-bottom:1px solid #3c3c3c;border-radius:14px 14px 0 0;background:#1d1d1d;color:var(--gold);font-weight:800;cursor:grab;touch-action:none}.position-drag-handle:active{cursor:grabbing}.position-targets{display:flex;gap:8px;margin-bottom:10px}.position-targets button{flex:1;padding:8px}.position-targets button.active{background:var(--gold);border-color:var(--gold);color:#17120a;font-weight:800}.arrow-pad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,44px);justify-content:center;gap:6px}.arrow-pad button{padding:0;font-size:1.1rem;font-weight:900}.arrow-pad [data-dir="up"]{grid-column:2;grid-row:1}.arrow-pad [data-dir="left"]{grid-column:1;grid-row:2}.arrow-pad [data-dir="down"]{grid-column:2;grid-row:2}.arrow-pad [data-dir="right"]{grid-column:3;grid-row:2}.position-controller output{display:block;margin-top:10px;text-align:center;color:var(--gold);font-weight:800}.position-controller p{margin:7px 0 0;text-align:center;font-size:.86rem;color:#aaa}

/* Retournement garanti : la face est masquée et le véritable visuel Dos.png est révélé. */
.card-front-image,.card-back-image{transition:opacity 0s linear calc(var(--card-flip-duration,.75s)/2)}
.card-front-image{opacity:1}.card-back-image{opacity:0}
.playing-card.face-down .card-front-image{opacity:0}
.playing-card.face-down .card-back-image{opacity:1}

/* Sélecteur de dos de carte */
.back-selector-panel{max-width:1200px;margin:0 auto 16px}.back-selector-panel p{margin:0 0 12px}.card-back-selector{display:flex;gap:10px;overflow-x:auto;padding:4px 3px 9px;scrollbar-width:thin}.card-back-choice{flex:0 0 82px;padding:6px;border:3px solid transparent;background:#171717;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:6px}.card-back-choice:hover{background:#222}.card-back-choice.selected{border-color:var(--gold);box-shadow:0 0 0 2px #000,0 0 14px #e7ba5a66}.card-back-choice img{display:block;width:62px;height:87px;object-fit:contain;border-radius:4px;background:#fff}.card-back-choice span{font-size:.7rem;line-height:1.15;color:#ddd;text-align:center}.card-back-choice.selected span{color:var(--gold);font-weight:800}


/* v0.2.9 — retournement fiable sur Chrome mobile : le conteneur s'aplatit,
   puis l'image visible est réellement remplacée par le dos au milieu. */
.playing-card{transform:translateX(-50%);-webkit-transform:translateX(-50%);transition:none!important}
.playing-card.flipping{animation:cardTurn var(--card-flip-duration,.75s) cubic-bezier(.4,.05,.2,1) both}
.playing-card.face-down{transform:translateX(-50%);-webkit-transform:translateX(-50%)}
.card-front-image,.card-back-image{transform:none!important;-webkit-transform:none!important;transition:none!important;backface-visibility:visible;-webkit-backface-visibility:visible}
.card-front-image{opacity:1!important;visibility:visible!important;z-index:2}
.card-back-image{opacity:0!important;visibility:hidden!important;z-index:1}
.playing-card.face-down .card-front-image{opacity:0!important;visibility:hidden!important;z-index:1}
.playing-card.face-down .card-back-image{opacity:1!important;visibility:visible!important;z-index:2}
@keyframes cardTurn{0%{transform:translateX(-50%) scaleX(1)}48%{transform:translateX(-50%) scaleX(.02)}52%{transform:translateX(-50%) scaleX(.02)}100%{transform:translateX(-50%) scaleX(1)}}

/* v0.3.0 — version visible, slides directionnels et retournement robuste */
.config-title{display:flex;align-items:flex-start;gap:10px}.version-badge{display:inline-flex;align-items:center;justify-content:center;margin-top:4px;padding:4px 8px;border:1px solid #5a4a20;border-radius:999px;background:#241d0d;color:var(--gold);font-size:.75rem;font-weight:800;white-space:nowrap}
.screen-track{position:absolute;inset:0;width:100%;height:100%;display:block;transform:none!important;transition:none!important;overflow:hidden}
.fake-screen{position:absolute;inset:0;width:100%;height:100%;will-change:transform;transform:translateX(100%)}
.fake-screen:first-child{transform:translateX(0)}
.playing-card{transform:translateX(-50%);-webkit-transform:translateX(-50%);transition:none!important;transform-style:flat!important;-webkit-transform-style:flat!important}
.playing-card.flipping{animation:none!important}
.card-front-image{display:block!important;opacity:1!important;visibility:visible!important;transform:none!important;-webkit-transform:none!important;z-index:2!important}
.card-back-image{display:none!important}
.playing-card.face-down{transform:translateX(-50%);-webkit-transform:translateX(-50%)}
.playing-card.face-down .card-front-image{display:block!important;opacity:1!important;visibility:visible!important}


/* v0.3.5 — retournement 3D continu piloté par requestAnimationFrame */
.playing-card{transform-origin:50% 50%;-webkit-transform-origin:50% 50%;will-change:transform}
.playing-card.flipping{animation:none!important;transition:none!important}

.position-controller.dragging{opacity:.96}.position-controller .arrow-pad button{touch-action:none;-webkit-user-select:none;user-select:none}

/* v0.3.11 — scénarios et retournement optionnel */
.scenario-settings{margin-top:16px;padding-top:12px;border-top:1px solid #333}.scenario-settings fieldset{margin:0 0 12px;padding:10px 12px;border:1px solid #444;border-radius:12px}.scenario-settings legend{padding:0 6px;color:var(--gold);font-weight:800}.scenario-settings fieldset label,.check-setting{justify-content:flex-start!important;align-items:flex-start!important;cursor:pointer}.scenario-settings input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--gold)}.check-setting:has(input:disabled){opacity:.45;cursor:not-allowed}

/* v0.3.21 — implémentation de l’écran identique à Dessin.
   En mode autonome iOS avec la barre d’état « default », le viewport utile
   commence déjà sous l’heure, le Wi‑Fi et la batterie : aucun décalage manuel
   par safe-area n’est ajouté au mode spectacle. */
:root{
  --app-height:100dvh;
  --background-fit:cover;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html,body{
  margin:0;
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
body{height:100dvh;background:#000}
#app{position:relative;width:100%;height:100%;overflow:hidden}
.screen{width:100%;height:100%}
#performer.screen.active{
  display:block;
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
}
#performer .phone-stage,
#performer .screen-track,
#performer .fake-screen{
  width:100%;
  height:100%;
}
#performer .phone-stage{position:absolute;inset:0;overflow:hidden;background:#000}
#performer .screen-track{position:absolute;inset:0;display:block;transform:none!important;transition:none!important;overflow:hidden}
#performer .fake-screen{position:absolute;inset:0;will-change:transform;background:#000}
#performer .fake-screen:first-child{transform:translateX(0)}
#performer .fake-screen:not(:first-child){transform:translateX(100%)}
#performer .fake-screen img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:var(--background-fit,cover);
  object-position:center;
  background:#000;
  pointer-events:none;
  -webkit-user-drag:none;
}
/* Les éditeurs gardent le ratio naturel de la capture : elle y reste entière
   et les zones tactiles correspondent à ses coordonnées réelles. */
.editor,.midas-preview{height:auto;background:#000}
.editor img{object-fit:contain!important;object-position:center!important;background:#000}
.preview-background{object-fit:var(--background-fit,cover);object-position:center;background:#000}
.panel select{max-width:65%;min-width:150px;background:#252525;color:#fff;border:1px solid #444;border-radius:9px;padding:8px 10px}