/* ===================================================================
   First Capital — Financial Freedom Challenge  (Kiosk 1080 x 1920)
   Brand: Navy #102040  ·  Gold #F0C000
=================================================================== */
:root{
  --navy:#102040;
  --navy-deep:#0A1730;
  --navy-2:#16284f;
  --navy-3:#1f3a6e;
  --gold:#F0C000;
  --gold-2:#FFD83D;
  --gold-deep:#C99B00;
  --white:#FFFFFF;
  --ink:#0A1226;
  --muted:#9fb0d6;
  --good:#34d27b;
  --bad:#ff6b6b;
  --r:26px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
[ng-cloak]{display:none!important;}
html,body{width:100%;height:100%;background:#05080f;overflow:hidden;
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
.no-select,.no-select *{user-select:none;-webkit-user-select:none;touch-action:none;}
button{font-family:inherit;cursor:pointer;border:none;outline:none;}

/* ---------- scaled stage ---------- */
.stage-wrap{position:fixed;inset:0;overflow:hidden;background:#05080f;}
.stage{
  position:absolute;top:50%;left:50%;width:1080px;height:1920px;
  transform:translate(-50%,-50%) scale(1);transform-origin:center center;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #1c376b 0%, var(--navy) 42%, var(--navy-deep) 100%);
  color:var(--white);
}

/* floating background orbs */
.bg-orbs span{position:absolute;border-radius:50%;filter:blur(8px);opacity:.20;}
.bg-orbs span:nth-child(1){width:420px;height:420px;left:-120px;top:120px;
  background:radial-gradient(circle,var(--gold),transparent 65%);animation:float1 9s ease-in-out infinite;}
.bg-orbs span:nth-child(2){width:520px;height:520px;right:-160px;top:700px;
  background:radial-gradient(circle,#2f5bb0,transparent 65%);animation:float2 11s ease-in-out infinite;}
.bg-orbs span:nth-child(3){width:360px;height:360px;left:50%;bottom:-120px;
  background:radial-gradient(circle,var(--gold),transparent 65%);opacity:.12;animation:float1 13s ease-in-out infinite;}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(40px)}}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-50px)}}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  padding:70px 70px 60px;text-align:center;animation:screenIn .5s cubic-bezier(.2,.8,.2,1);}
@keyframes screenIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

.gold{color:var(--gold);}

/* ---------- buttons ---------- */
.btn-primary{
  margin-top:34px;padding:30px 60px;border-radius:60px;font-size:38px;font-weight:800;
  letter-spacing:1px;color:var(--ink);
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  box-shadow:0 14px 0 var(--gold-deep),0 26px 40px rgba(240,192,0,.35);
  transition:transform .08s, box-shadow .08s;width:auto;min-width:420px;}
.btn-primary:active{transform:translateY(8px);box-shadow:0 6px 0 var(--gold-deep),0 14px 24px rgba(240,192,0,.3);}
.btn-primary[disabled]{filter:grayscale(.6);opacity:.45;box-shadow:none;}
.btn-primary.big{font-size:46px;padding:38px 70px;min-width:560px;}
.btn-primary.sm{font-size:30px;padding:22px 46px;min-width:0;margin-top:24px;}
.btn-ghost{margin-top:22px;background:transparent;color:var(--muted);font-size:28px;
  letter-spacing:2px;padding:16px 30px;border-radius:40px;border:2px solid rgba(255,255,255,.18);}
.btn-ghost:active{background:rgba(255,255,255,.08);}
.pulse{animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* ===================== LOADING ===================== */
.loading{justify-content:center;gap:54px;}
.spinner{width:130px;height:130px;border-radius:50%;
  border:14px solid rgba(255,255,255,.14);border-top-color:var(--gold);
  animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.load-text{font-size:42px;font-weight:800;letter-spacing:8px;color:var(--gold);}
.load-bar{width:62%;height:22px;border-radius:14px;background:rgba(255,255,255,.12);overflow:hidden;}
.load-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));
  border-radius:14px;transition:width .35s ease;box-shadow:0 0 18px rgba(240,192,0,.5);}
.load-pct{font-size:36px;font-weight:900;color:#fff;}

/* ===================== HOME ===================== */
.home{justify-content:center;}
.home-inner{display:flex;flex-direction:column;align-items:center;gap:60px;width:100%;}
.logo-lg{width:840px;max-width:92%;filter:drop-shadow(0 16px 40px rgba(0,0,0,.45));
  background:#fff;border-radius:40px;padding:60px 56px;}
.home-divider{width:300px;height:8px;border-radius:6px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.home-tap{font-size:40px;letter-spacing:8px;font-weight:800;color:var(--gold);
  animation:pulse 1.8s ease-in-out infinite;}
.home-foot{position:absolute;bottom:60px;left:0;right:0;color:var(--muted);
  letter-spacing:6px;font-size:26px;font-weight:600;}

/* ===================== REGISTER ===================== */
.register{justify-content:center;gap:10px;}
.logo-sm{width:340px;background:#fff;border-radius:18px;padding:16px 22px;margin-bottom:18px;}
.reg-title{font-size:52px;font-weight:900;letter-spacing:3px;text-transform:uppercase;margin:6px 0 50px;}
.field-block{width:100%;margin-bottom:50px;display:flex;flex-direction:column;align-items:center;}
.field-label{font-size:34px;font-weight:800;letter-spacing:6px;text-transform:uppercase;
  text-align:center;color:var(--gold);margin-bottom:14px;}
.kiosk-input{position:relative;width:100%;min-height:104px;border-radius:22px;
  background:rgba(255,255,255,.06);border:3px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;gap:4px;
  font-size:48px;font-weight:800;letter-spacing:4px;text-transform:uppercase;text-align:center;
  padding:0 28px;color:#fff;transition:border-color .2s,box-shadow .2s;}
.kiosk-input.active{border-color:var(--gold);box-shadow:0 0 0 4px rgba(240,192,0,.25);}
.kiosk-input.invalid{border-color:var(--bad);}
.kiosk-input .ph{position:absolute;color:rgba(255,255,255,.30);font-weight:700;letter-spacing:3px;}
.kiosk-input .kv{white-space:nowrap;}
.caret{width:4px;height:52px;background:var(--gold);animation:blink 1s step-end infinite;border-radius:2px;}
@keyframes blink{50%{opacity:0}}
.field-hint{margin-top:10px;font-size:24px;letter-spacing:3px;color:var(--muted);font-weight:600;}
.field-hint.bad{color:var(--bad);}

/* ---------- custom keyboard ---------- */
.kb{width:100%;margin-top:18px;background:var(--navy-deep);
  border:2px solid rgba(240,192,0,.30);border-radius:24px;padding:18px 16px;
  box-shadow:var(--shadow);}
.kb-pop{transform-origin:top center;animation:kbPop .22s cubic-bezier(.2,1.4,.4,1);}
@keyframes kbPop{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
.reg-actions{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:10px;}
.kb-row{display:flex;justify-content:center;gap:12px;margin-bottom:12px;}
.kb-row:last-child{margin-bottom:0;}
.key{flex:1;min-width:0;height:96px;border-radius:16px;font-size:40px;font-weight:800;color:var(--navy);
  background:linear-gradient(180deg,#ffffff,#e9eefb);
  box-shadow:0 6px 0 #b9c4e0;transition:transform .05s,box-shadow .05s;}
.key:active{transform:translateY(5px);box-shadow:0 1px 0 #b9c4e0;}
.kb-alpha .key{max-width:96px;}
.kb-num .key{max-width:150px;height:104px;font-size:48px;}
.key-space{max-width:none!important;flex:4;color:var(--navy);font-size:30px;letter-spacing:4px;}
.key-back{background:linear-gradient(180deg,#33508f,#22386a);color:#fff;box-shadow:0 6px 0 #14213f;}
.key-done{background:linear-gradient(180deg,#3fdd86,#21b566);color:#04240f;box-shadow:0 6px 0 #157a43;
  font-size:30px;letter-spacing:3px;flex:2;}
.key-done.wide{flex:1;max-width:none;}

/* ===================== QUIZ ===================== */
.quiz{padding:50px 56px 70px;justify-content:space-between;}
.quiz-head,.quiz-body,.quiz-foot{width:100%;display:flex;flex-direction:column;align-items:center;}
.quiz-body{flex:1 1 auto;justify-content:center;}     /* question + answers fill the middle */
.quiz-foot{gap:6px;}
.quiz-foot .btn-primary{margin-top:10px;}
.quiz-top{width:100%;display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.quiz-top .logo-sm{width:210px;margin:0;padding:10px 14px;}
.progress{display:flex;gap:14px;}
.prog-dot{width:46px;height:14px;border-radius:8px;background:rgba(255,255,255,.18);transition:.3s;}
.prog-dot.done{background:var(--gold);}
.prog-dot.cur{background:var(--gold-2);box-shadow:0 0 16px var(--gold);}
.q-count{font-size:40px;font-weight:900;color:var(--gold);}
.q-count span{font-size:24px;color:var(--muted);}

.timer-wrap{width:100%;display:flex;align-items:center;gap:20px;margin:6px 0 18px;}
.timer-bar{flex:1;height:22px;border-radius:14px;background:rgba(255,255,255,.12);overflow:hidden;}
.timer-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transition:width 1s linear;border-radius:14px;}
.timer-num{font-size:38px;font-weight:900;min-width:90px;}
.timer-num.danger{color:var(--bad);animation:pulse .6s infinite;}

.q-text{font-size:54px;line-height:1.12;font-weight:900;margin:6px 0 14px;}
.q-hint{font-size:26px;color:var(--muted);margin-bottom:24px;line-height:1.4;}
.q-hint b{color:var(--gold);}

.answers{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:0;margin-top:40px;}
.answer-card{position:relative;min-height:250px;border-radius:24px;padding:26px 24px;
  background:rgba(255,255,255,.07);border:3px solid rgba(255,255,255,.16);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  transition:transform .12s,border-color .2s,background .2s;overflow:hidden;}
.answer-card:active{transform:scale(.97);}
.ac-letter{width:64px;height:64px;border-radius:50%;background:var(--gold);color:var(--navy);
  font-size:36px;font-weight:900;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.ac-text{font-size:34px;font-weight:700;line-height:1.2;}
.ac-drop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(240,192,0,.18);color:var(--gold);font-weight:900;letter-spacing:3px;font-size:30px;
  opacity:0;transition:.15s;border:4px dashed var(--gold);border-radius:24px;}
.answer-card.drop-hover{border-color:var(--gold);transform:scale(1.03);}
.answer-card.drop-hover .ac-drop{opacity:1;}
.answer-card.selected{border-color:var(--gold);background:rgba(240,192,0,.16);
  box-shadow:0 0 0 4px rgba(240,192,0,.25);}
.answer-card.delivered::after{content:"+BONUS";position:absolute;top:12px;right:14px;
  background:var(--good);color:#04240f;font-size:20px;font-weight:900;padding:5px 12px;border-radius:20px;}

/* money bags */
.money-row{width:100%;display:flex;justify-content:center;gap:26px;margin-bottom:24px;flex-wrap:wrap;}
.money-bag{width:178px;height:178px;border-radius:22px;
  background:linear-gradient(180deg,#21407f,#16284f);
  border:3px solid var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);transition:transform .1s,opacity .2s;touch-action:none;}
.money-bag:active{transform:scale(1.08);}
.money-bag.used{opacity:.25;pointer-events:none;filter:grayscale(.7);transform:scale(.9);}
.bag-ico{font-size:74px;line-height:1;}
.bag-amt{font-size:28px;font-weight:800;color:var(--gold);}
.bonus-label{font-size:28px;color:var(--muted);font-weight:600;margin-bottom:18px;letter-spacing:1px;}
.bonus-label span{color:var(--gold);font-weight:900;letter-spacing:3px;}

/* cart */
.cart-line{width:100%;display:flex;justify-content:center;margin-bottom:14px;}
.cart-zone{display:flex;align-items:center;gap:22px;padding:22px 40px;border-radius:26px;
  background:rgba(255,255,255,.06);border:3px dashed rgba(255,255,255,.3);min-width:520px;
  justify-content:center;transition:.15s;touch-action:none;}
.cart-zone.has{border-style:solid;border-color:var(--gold);background:rgba(240,192,0,.12);}
.cart-zone.drop-hover{border-color:var(--gold-2);background:rgba(240,192,0,.22);transform:scale(1.03);}
.cart-ico{font-size:76px;line-height:1;}
.cart-info{text-align:left;}
.cart-title{font-size:30px;font-weight:900;letter-spacing:3px;}
.cart-meta{font-size:28px;color:var(--gold);font-weight:700;}
.cart-drag-hint{margin-left:auto;background:var(--gold);color:var(--navy);font-weight:900;
  font-size:24px;padding:10px 18px;border-radius:20px;letter-spacing:2px;animation:pulse 1.4s infinite;}

/* drag clone */
.drag-clone{position:fixed;z-index:9999;pointer-events:none;opacity:.92;
  transform:translate(-50%,-50%) scale(1.06);filter:drop-shadow(0 16px 24px rgba(0,0,0,.5));}

/* ===================== SUMMARY ===================== */
.summary{justify-content:center;padding:60px 56px;}
.summary .logo-sm{margin-bottom:24px;}
.well-done{font-size:38px;font-weight:700;color:#dfe7fb;margin-bottom:18px;animation:pop .5s cubic-bezier(.2,1.6,.4,1);}
.well-done b{color:var(--gold);}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.total-score{font-size:52px;font-weight:900;letter-spacing:2px;margin-bottom:34px;}
.total-score .gold{font-size:84px;}
.total-score small{font-size:40px;color:var(--muted);font-weight:700;}

.score-breakdown{width:100%;display:flex;flex-direction:column;gap:18px;margin-bottom:30px;}
.sb-q{display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.12);
  border-radius:20px;padding:22px 28px;text-align:left;}
.sb-left{flex:1;min-width:0;}
.sb-quest{font-size:24px;color:var(--muted);font-weight:600;line-height:1.25;margin-bottom:8px;
  display:flex;gap:12px;align-items:baseline;}
.sb-num{background:var(--gold);color:var(--navy);border-radius:8px;padding:0 10px;
  font-weight:900;font-size:22px;flex:0 0 auto;}
.sb-ans{font-size:34px;font-weight:800;color:#fff;line-height:1.15;}
.sb-right{flex:0 0 auto;text-align:right;}
.sb-base{font-size:40px;font-weight:900;color:var(--gold);line-height:1;}
.sb-bonus{font-size:28px;font-weight:900;color:var(--good);margin-top:8px;white-space:nowrap;}
.sb-bonus em{font-style:normal;font-size:20px;color:var(--muted);font-weight:700;}

/* ===================== OVERLAYS / MODALS ===================== */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(4,8,18,.82);backdrop-filter:blur(6px);z-index:500;animation:fade .25s;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:linear-gradient(180deg,var(--navy-2),var(--navy-deep));
  border:3px solid var(--gold);border-radius:34px;padding:44px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;}
.pop-in{animation:popIn .45s cubic-bezier(.2,1.5,.4,1);}
@keyframes popIn{from{opacity:0;transform:scale(.7) translateY(40px)}to{opacity:1;transform:none}}

.video-modal{width:auto;max-width:920px;}
.vm-tag{font-size:30px;font-weight:900;letter-spacing:4px;color:var(--gold);margin-bottom:22px;}
.motiv-video{width:auto;max-width:820px;height:auto;max-height:1380px;
  border-radius:22px;background:#000;display:block;}

.detail-modal{width:920px;max-height:1500px;}
.dm-title{font-size:48px;font-weight:900;letter-spacing:3px;margin-bottom:24px;color:var(--gold);}
.dm-scroll{width:100%;overflow-y:auto;max-height:1150px;padding-right:8px;touch-action:pan-y;}
.dm-q{background:rgba(255,255,255,.06);border-radius:20px;padding:24px;margin-bottom:18px;text-align:left;}
.dm-qhead{font-size:32px;font-weight:800;line-height:1.3;margin-bottom:14px;display:flex;gap:14px;}
.dm-num{background:var(--gold);color:var(--navy);border-radius:12px;padding:2px 14px;font-weight:900;height:fit-content;}
.dm-ans{display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:rgba(240,192,0,.1);border-radius:14px;padding:16px 20px;}
.dm-ans.none{background:rgba(255,107,107,.12);}
.dm-chosen{font-size:32px;font-weight:700;}
.dm-score{font-size:28px;font-weight:900;color:var(--gold);white-space:nowrap;}
.dm-score em{color:var(--good);font-style:normal;}