/* ============================================================
   Bancomat Wizit — simulateur de guichet automatique (web)
   Recréation moderne de l'app Unity d'origine.
   Deux habillages : Wizit (par défaut) et FOVAHM (?brand=fovahm, voir js/brand.js).
   ============================================================ */

:root{
  /* Wizit : les couleurs du logo (flamme, or, braise) */
  --brand:#ed732e;
  --brand-deep:#c4381b;
  --brand-light:#eeb12e;
  --brand-ink:#b8291f;
  --brand-watermark:url("../assets/logo.png");
  --atm-body:#b8bbbe;
  --atm-body-dark:#8f9295;
  --atm-body-light:#d6d8da;
  --screen-bg:#ffffff;
  --screen-ink:#1a1a1a;
  --key-face:#e9ebee;
  --shadow:0 10px 40px rgba(0,0,0,.35);
  --radius:14px;
  font-size:16px;
}
/* FOVAHM : l'habillage d'origine, activé par ?brand=fovahm */
:root[data-brand="fovahm"]{
  --brand:#f5a623;
  --brand-deep:#e8951a;
  --brand-light:#f0c675;
  --brand-ink:#b86e00;
  --brand-watermark:url("../assets/fovahm/logo.png");
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}

html,body{height:100%;}
/* html paints the device safe-areas (home indicator, notch) so no white band
   shows on any phone/tablet: grey behind the app, orange behind the splash */
html{background:var(--atm-body-dark);}
@media (orientation:portrait){html{background:var(--brand-deep);}}
body{
  font-family:"Segoe UI",Roboto,-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:transparent;
  color:#222;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

/* ---- responsive stage: keep the machine's aspect ratio ---- */
.stage{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:var(--atm-body);
}
.machine{
  /* fill the whole viewport edge-to-edge — no letterboxing on any aspect ratio
     (incl. iPhone 15 Pro Max landscape ~2.17:1, installed as a PWA) */
  width:100%;
  height:100%;
  display:flex;
  gap:0;
  overflow:hidden;
  container-type:size;
}

/* ================= LEFT: ATM BODY ================= */
.atm{
  flex:1 1 68%;
  background:
    linear-gradient(180deg,var(--atm-body-light),var(--atm-body) 40%,var(--atm-body-dark));
  display:flex;
  flex-direction:column;
  /* outer edges (left/top/bottom) respect the device safe-area (notch, home bar) */
  padding:
    max(3cqw, env(safe-area-inset-top))
    3cqw
    max(2.5cqw, env(safe-area-inset-bottom))
    max(3cqw, env(safe-area-inset-left));
  gap:2cqw;
}

.atm-top{flex:1 1 auto;display:flex;min-height:0;}
.screen-block{
  flex:1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:stretch;
  gap:1.4cqw;
  min-height:0;
  min-width:0;
}

/* side buttons flanking the display */
.side-buttons{
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  /* top offset = screen header height, so buttons distribute over the same
     region as the on-screen option labels (which sit below the header) */
  padding:8cqh 0 0;
  gap:0;
}
.side-btn{
  width:6cqh;
  height:6cqh;
  min-width:34px;
  border:none;
  border-radius:5px;
  background:linear-gradient(180deg,#e4e6e8,#a7abae);
  box-shadow:0 2px 3px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.6);
  cursor:pointer;
  transition:transform .05s, filter .1s;
}
.side-buttons.left .side-btn{border-top-left-radius:2px;border-bottom-left-radius:2px;}
.side-btn:active{transform:scale(.92);filter:brightness(.9);}
.side-btn.flash{filter:brightness(1.25);}

/* the display */
.screen{
  background:var(--screen-bg);
  border-radius:6px;
  border:2px solid #cfd2d5;
  box-shadow:inset 0 0 0 2px #eee, 0 3px 10px rgba(0,0,0,.3);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-width:0;
  color:var(--screen-ink);
}
.screen-header{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:1cqw;
  padding:0 1.6cqw;
  height:8cqh;
  box-sizing:border-box;
  flex:0 0 auto;
}
.screen-logo{height:5.2cqh;min-height:26px;width:auto;}
.screen-bank{display:flex;flex-direction:column;line-height:1.1;text-align:left;}
.screen-bank strong{font-size:1.7cqh;color:#333;font-weight:700;}
.screen-bank span{font-size:1.4cqh;color:#666;}

.screen-grid{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:22% 1fr 22%;
  min-height:0;
}
.opt-col{
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  padding:0;
}
.opt-slot{
  flex:1;
  display:flex;
  align-items:center;
  font-size:2.1cqh;
  font-weight:600;
  color:#111;
  padding:0 1cqw;
  min-height:0;
}
.opt-col.left .opt-slot{justify-content:flex-start;text-align:left;}
.opt-col.right .opt-slot{justify-content:flex-end;text-align:right;}
.opt-slot .opt-content{display:inline-flex;align-items:center;gap:.5em;}
.opt-col.left .opt-content::before{content:"◀";color:var(--brand);font-size:.8em;}
.opt-col.right .opt-content::after{content:"▶";color:var(--brand);font-size:.8em;}
.opt-slot .opt-content{
  background:#fff;
  cursor:pointer;
}
.opt-slot.filled .opt-content:hover{color:var(--brand-deep);}

.screen-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1cqh 1cqw 2.5cqh;
  gap:2cqh;
  min-width:0;
}
.info-text{font-size:2.4cqh;line-height:1.35;color:#111;max-width:100%;}
.info-text .amount{color:var(--brand-deep);font-weight:800;white-space:nowrap;}
.sub-text{font-size:1.9cqh;color:#555;line-height:1.3;}
.error-text{color:#c0392b;font-weight:700;}

/* PIN display */
.pin-display{
  font-size:6cqh;
  letter-spacing:.35em;
  font-weight:700;
  font-family:"Courier New",monospace;
  color:#111;
  padding-left:.3em;
}
/* generic big field (custom amount) */
.amount-field{
  font-size:6cqh;
  font-weight:800;
  font-family:"Courier New",monospace;
  color:#111;
  border-bottom:0.5cqh solid var(--brand);
  min-width:5em;
  padding:0 .3em .3cqh;
}
.amount-field .cursor{animation:blink 1s steps(1) infinite;color:var(--brand);}
@keyframes blink{50%{opacity:0;}}

/* insert-card graphic */
.insert-graphic{display:flex;flex-direction:column;align-items:center;gap:1.5cqh;}
.insert-graphic svg{width:26cqh;max-width:60%;height:auto;color:#111;}
.spinner{
  width:7cqh;height:7cqh;border-radius:50%;
  border:0.9cqh solid #ddd;border-top-color:var(--brand);
  animation:spin 0.9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* denomination list */
.denom-list{font-size:2cqh;line-height:1.5;text-align:left;}
.denom-list li{list-style:none;}
.denom-count{font-weight:800;color:var(--brand-deep);}

/* ---- keypad + controls ---- */
.atm-bottom{
  /* une seule hauteur pour les touches du clavier ET les boutons Annuler / Corr / OK
     (rembourrage haut+bas + voyant), pour libérer de la place à l'écran */
  --btn-h:calc(3cqh + max(2.6cqh, 16px));
  flex:0 0 auto;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:4cqw;
  padding-top:.5cqh;
}
.keypad{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.3cqh 1.4cqh;
}
.key{
  width:var(--btn-h);height:var(--btn-h);
  border:none;border-radius:8px;
  font-size:3.4cqh;font-weight:700;color:#222;
  background:linear-gradient(180deg,#fbfbfb,#c7cacd);
  box-shadow:0 3px 4px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.9);
  cursor:pointer;
  transition:transform .05s, filter .1s;
}
.key:active,.key.flash{transform:translateY(2px);filter:brightness(.92);}
.key-zero{grid-column:2;}

.control-pad{display:flex;flex-direction:column;gap:1.6cqh;justify-content:center;padding-top:.4cqh;}
.ctrl{
  display:flex;align-items:center;gap:1cqw;
  border:none;border-radius:7px;cursor:pointer;
  height:var(--btn-h);
  padding:0 1.2cqw;
  background:linear-gradient(180deg,#f2f3f4,#cbced1);
  box-shadow:0 3px 4px rgba(0,0,0,.35), inset 0 1px 2px rgba(255,255,255,.9);
  min-width:22cqh;
  transition:transform .05s, filter .1s;
}
.ctrl:active,.ctrl.flash{transform:translateY(2px);filter:brightness(.94);}
.ctrl-label{font-size:2cqh;font-weight:700;color:#333;flex:1;text-align:left;}
.ctrl-light{width:2.6cqh;height:2.6cqh;min-width:16px;min-height:16px;border-radius:4px;box-shadow:inset 0 0 3px rgba(0,0,0,.5);}
.ctrl-light.red{background:#e33; }
.ctrl-light.orange{background:#f39c12;}
.ctrl-light.green{background:#2ecc71;}

/* ================= RIGHT: DISPENSER ================= */
.dispenser{
  flex:1 1 32%;
  background:linear-gradient(180deg,var(--brand-light),var(--brand) 55%,var(--brand-deep));
  display:flex;
  flex-direction:column;
  /* outer edges (right/top/bottom) respect the device safe-area */
  padding:
    max(2.5cqw, env(safe-area-inset-top))
    max(2.5cqw, env(safe-area-inset-right))
    max(2.5cqw, env(safe-area-inset-bottom))
    2.5cqw;
  gap:2.5cqh;
  position:relative;
}
.dispenser-top{
  display:flex;align-items:center;gap:1.2cqw;
  color:#fff;
}
.gear-btn,.close-btn{
  border:none;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.18);
  border-radius:7px;
  font-size:2.6cqh;line-height:1;
  width:5.2cqh;height:5.2cqh;min-width:32px;min-height:32px;
  display:flex;align-items:center;justify-content:center;
}
.close-btn{margin-left:auto;background:rgba(0,0,0,.12);}
.gear-btn:active,.close-btn:active{filter:brightness(.85);}
.credit{
  font-size:2.1cqh;font-weight:600;color:#fff;text-decoration:none;
  text-shadow:0 1px 2px rgba(0,0,0,.2);
  border-bottom:1px solid rgba(255,255,255,.5);
  padding-bottom:1px;
}
.credit:hover{border-bottom-color:#fff;}
.credit:active{opacity:.7;}

/* card reader */
.card-reader{
  background:linear-gradient(180deg,#f7f7f7,#e6e6e6);
  border-radius:10px;
  flex:0 0 auto;
  height:20cqh;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.15);
}
.card-slot{
  /* largeur proche de celle d'une vraie fente à carte (petit côté = 54 mm),
     ce qui garde la carte éjectée à une taille réaliste */
  width:50%;height:34%;
  background:linear-gradient(180deg,#c9cccf,#eceef0);
  border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.2);
  position:relative;
  transition:box-shadow .15s;
}
.card-slot-mouth{
  width:82%;height:20%;
  background:#2b2b2b;
  border-radius:3px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.8);
}
.card-slot.hot{box-shadow:0 0 0 4px var(--brand), 0 2px 5px rgba(0,0,0,.2);}

/* dispensing tray — overflow visible so dragged props (card, billets, reçu)
   stay visible when moved outside the grey zone */
.tray{
  flex:1 1 auto;
  background:linear-gradient(180deg,#d9d9d9,#c2c2c2);
  border-radius:10px;
  position:relative;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.2);
  overflow:visible;
}
.tray-items{position:absolute;inset:0;}

/* deux fentes de distribution côte à côte : billets (large) et reçu (étroite),
   dimensionnées d'après le format réel des billets (137mm) et du reçu (~76mm) */
.dispenser-slots{
  flex:0 0 auto;
  display:flex;
  gap:2.5cqw;
  align-items:stretch;
}
.d-slot{
  background:linear-gradient(180deg,#f7f7f7,#e6e6e6);
  border-radius:10px;
  height:13cqh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2cqh;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.15);
  position:relative;
}
.notes-dslot{flex:137 1 0;}     /* largeur d'un billet suisse : 137 mm */
.receipt-dslot{flex:76 1 0;}    /* largeur d'un reçu : ~76 mm */
.d-mouth{
  width:88%;height:15%;
  background:#2b2b2b;
  border-radius:3px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.8);
}
.d-label{
  font-size:1.55cqh;font-weight:700;color:#8a8d91;
  text-transform:uppercase;letter-spacing:.09em;line-height:1;
}

/* generic draggable prop */
.prop{
  position:absolute;
  cursor:grab;
  touch-action:none;
  will-change:transform;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));
}
.prop img{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block;}
.prop.dragging{cursor:grabbing;filter:drop-shadow(0 14px 20px rgba(0,0,0,.5));z-index:50;}
.prop.taken{transition:transform .45s ease-in, opacity .45s;opacity:0;}

/* the bank card (portrait source, shown horizontal in the tray) */
.card-prop{
  width:42%;
  left:29%;top:40%;
}
.card-prop img{
  transform:rotate(-90deg) scale(1.62);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}

/* carte saisie par l'utilisateur pour l'insérer : elle se redresse à la
   verticale (rotation de l'image seule — la position reste pilotée par le
   wrapper, donc le survol de la fente reste exact) */
.card-prop.upright{z-index:60;}
.card-prop.upright img{transform:rotate(0deg) scale(1.62);}

/* carte redressée à la verticale devant/dans la fente.
   Le haut de la carte est ancré sur la fente (transform-origin) : la
   translation vers le haut + le clip donnent l'illusion de l'avalement,
   et rotateX ajoute la perspective (bas de la carte vers l'utilisateur). */
.card-prop.vertical{
  transform-origin:top center;
  z-index:60;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.45));
}
.card-prop.vertical img{
  transform:none;                 /* image source déjà en portrait */
  border-radius:4px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
}

/* prop présenté à moitié dans une fente (billets, reçu) : même principe
   que la carte — haut ancré sur la fente, clip + perspective */
.prop.in-slot{
  transform-origin:top center;
  z-index:55;
}

/* banknotes wad */
.notes-prop{width:42%;left:6%;top:36%;aspect-ratio:653 / 320;}
.notes-prop .note{
  position:absolute;left:0;top:0;width:100%;height:auto;
  border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,.35);
  border:1px solid rgba(0,0,0,.15);
}
.notes-prop img.note{display:block;}
/* billets étalés en éventail pour pouvoir les compter */
.notes-prop.spread{z-index:70;}
.notes-prop.spread .note{transition:transform .45s cubic-bezier(.2,.8,.2,1);}

/* receipt */
.receipt-prop{
  width:26%;left:60%;top:40%;
  background:#fff;color:#222;
  border-radius:3px;
  /* la taille de base est fixée en JS d'après la largeur du reçu ; tout le
     contenu est en em, donc il reste contenu et grandit avec le zoom */
  padding:.7em .9em;
  font-family:"Courier New",monospace;
  box-shadow:0 3px 8px rgba(0,0,0,.4);
  cursor:grab;touch-action:none;
}
.receipt-prop h4{font-size:1.2em;text-align:center;margin-bottom:.5em;line-height:1.15;}
.receipt-prop .r-line{font-size:1em;line-height:1.45;display:flex;justify-content:space-between;gap:.4em;}
.receipt-prop .r-rule{border-top:1px dashed #999;margin:.5em 0;}
.receipt-prop .r-total{font-weight:800;font-size:1.2em;}
.receipt-prop .r-foot{font-size:.8em;color:#666;margin-top:.5em;text-align:center;line-height:1.25;}

.take-hint{
  position:absolute;left:0;right:0;bottom:4%;
  text-align:center;color:#fff;font-size:1.9cqh;font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  animation:pulse 1.3s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pulse{50%{opacity:.4;}}

/* ================= modal ================= */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;z-index:100;
}
.modal-backdrop[hidden]{display:none;}
.modal{
  background:#fff;border-radius:14px;padding:28px 30px;width:min(90vw,380px);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:14px;
}
.modal h2{font-size:22px;color:#333;}
.cfg-section{
  margin:8px 0 0;font-weight:700;color:#333;font-size:13px;
  text-transform:uppercase;letter-spacing:.05em;
}
.cfg-section span{font-weight:500;color:#999;text-transform:none;letter-spacing:0;}
.cfg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.cfg-row label{font-weight:600;color:#444;font-size:15px;flex:1;line-height:1.2;}
.modal input{
  border:2px solid #ddd;border-radius:8px;background:#fff;
  padding:8px 10px;font-size:18px;color:#222;-moz-appearance:textfield;
}
.modal input:focus{outline:none;border-color:var(--brand);}
#pin-input{width:110px;text-align:center;letter-spacing:.25em;font-family:"Courier New",monospace;}
#t1-input,#t2-input,#t3-input,#t4-input,#disp-input{width:72px;text-align:center;font-variant-numeric:tabular-nums;}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:6px;}
.modal-btn{
  border:none;border-radius:8px;padding:12px 22px;font-size:16px;font-weight:700;cursor:pointer;
}
.modal-btn.cancel{background:#eee;color:#555;}
.modal-btn.ok{background:var(--brand);color:#fff;}
.modal-btn:active{filter:brightness(.92);}
.modal-version{
  margin-top:10px;padding-top:12px;border-top:1px solid #eee;
  font-size:12px;color:#999;text-align:center;line-height:1.4;
}
.modal-version #app-version{font-variant-numeric:tabular-nums;color:#777;}

/* ================= portrait splash (phone held vertically) ================= */
#portrait-splash{
  display:none;
  position:fixed;inset:0;z-index:200;
  flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  /* le bas réserve la place du crédit ; l'ensemble défile si l'écran est très court */
  padding:calc(20px + env(safe-area-inset-top)) 20px calc(52px + env(safe-area-inset-bottom));
  overflow-y:auto;
  color:#fff;
  /* card-inspired background: orange gradient + soft flower glow */
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, var(--brand-light) 0%, var(--brand) 52%, var(--brand-deep) 100%);
}
#portrait-splash::after{
  /* large faint flower watermark, like the real card */
  content:"";
  /* fixe : le filigrane ne doit pas agrandir la zone défilable du splash */
  position:fixed;left:50%;bottom:-6%;width:82vw;height:82vw;
  transform:translateX(-50%);
  background:var(--brand-watermark) center/contain no-repeat;
  opacity:.12;pointer-events:none;
}
.splash-inner{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;
  width:100%;max-width:420px;
  margin:auto 0;                 /* centré, mais collé en haut (et défilable) si ça déborde */
}
.splash-card{
  width:min(34vw,160px);height:auto;
  border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.35), 0 2px 0 rgba(255,255,255,.4) inset;
  transform:rotate(-5deg);
}
.splash-title{
  font-size:clamp(26px,7vw,42px);font-weight:800;letter-spacing:.5px;
  text-shadow:0 2px 6px rgba(0,0,0,.25);margin-top:6px;
}
.splash-sub{
  font-size:clamp(16px,4.5vw,24px);font-weight:500;opacity:.92;
  text-transform:uppercase;letter-spacing:3px;margin-top:-6px;
}
.splash-rotate{
  margin-top:8px;font-size:clamp(14px,3.6vw,18px);font-weight:600;
  background:rgba(0,0,0,.14);border-radius:999px;padding:10px 20px;
  display:inline-flex;align-items:center;gap:8px;
}
.splash-rotate .rot-ico{display:inline-block;font-size:1.3em;animation:rot 2.4s ease-in-out infinite;}
@keyframes rot{0%,60%{transform:rotate(0)}80%{transform:rotate(-90deg)}100%{transform:rotate(-90deg)}}
.splash-install{
  width:100%;
  background:rgba(255,255,255,.94);color:#2b2b2b;
  border-radius:16px;padding:14px 14px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  text-align:left;
}
.splash-install[hidden]{display:none;}
.si-title{font-size:16px;font-weight:800;color:var(--brand-ink);text-align:center;margin-bottom:10px;}
.si-btn{
  display:block;width:100%;border:none;border-radius:12px;cursor:pointer;
  background:var(--brand-deep);color:#fff;
  font-size:17px;font-weight:800;padding:14px 16px;min-height:48px;
  box-shadow:0 3px 8px rgba(0,0,0,.25);
}
.si-btn[hidden],.si-steps[hidden]{display:none;}
.si-btn:active{filter:brightness(.92);}
.si-steps{list-style:none;display:flex;flex-direction:column;gap:9px;}
.si-steps li{display:flex;align-items:center;gap:10px;}
.si-num{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--brand-deep);color:#fff;
  font-size:14px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.si-text{flex:1;font-size:14px;line-height:1.3;font-weight:500;}
.si-text b{font-weight:800;}
.si-mark{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #d5d5d5;border-radius:9px;background:#fff;color:#222;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.si-glyph{width:38px;height:38px;}
.si-glyph svg{width:24px;height:24px;}
.si-pill{
  padding:0 12px;height:34px;border:none;border-radius:999px;
  background:#1a73e8;color:#fff;font-size:13px;font-weight:700;
}
.splash-credit{
  position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:0;right:0;
  z-index:1;color:rgba(255,255,255,.9);font-size:14px;font-weight:600;text-decoration:none;
}
.splash-credit:active{opacity:.6;}
@media (orientation:portrait){
  #portrait-splash{display:flex;}
}