/* app — mobile-app mockup template for 7K Casino. Namespace: .ap* */
:root{
  --acc:#ffa066;      /* amber */
  --acc2:#7aa2f7;     /* indigo */
  --bg:#0e1016;       /* stage bg */
  --scr:#12141c;      /* screen bg */
  --panel:#191c26;    /* card bg */
  --panel2:#20242f;   /* raised */
  --ink:#f2f4f8;      /* primary text */
  --mut:#9aa2b4;      /* muted text */
  --line:#282d3a;     /* hairline */
  --ok:#42d392;       /* positive */
  --bezel:#05060a;    /* device frame */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Inter",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(60vw 60vw at 14% -8%, rgba(108,123,255,.18), transparent 60%),
    radial-gradient(50vw 50vw at 96% 12%, rgba(245,182,56,.14), transparent 58%),
    var(--bg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{list-style:none;padding:0}
.ap-skip{position:absolute;left:-9999px}
.ap-skip:focus{left:12px;top:12px;background:var(--acc);color:#111;padding:8px 12px;border-radius:10px;z-index:99}
.ap-bb{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;color:var(--ink)}

/* ===== stage + device ===== */
.ap-stage{
  min-height:100vh;
  display:flex;align-items:flex-start;justify-content:center;
  padding:28px 16px 40px;
}
.ap-side{
  display:none;
  max-width:320px;
  padding:34px 26px 0;
  position:sticky;top:34px;
}
.ap-side .k{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.ap-side h2{font-family:"Plus Jakarta Sans",sans-serif;font-size:30px;line-height:1.15;margin:14px 0}
.ap-side p{color:var(--mut);font-size:15px;line-height:1.6}
.ap-side .dots{display:flex;gap:8px;margin-top:22px}
.ap-side .dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.ap-side .dots i:first-child{background:var(--acc);width:26px;border-radius:5px}

.ap-device{
  flex:0 0 auto;
  width:452px;max-width:100%;
  background:linear-gradient(160deg,#161922,#080a10);
  border-radius:44px;
  padding:12px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.05) inset,
    0 40px 90px -30px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.04);
}
.ap-screen{
  position:relative;
  height:min(884px,calc(100vh - 56px));
  background:var(--scr);
  border-radius:34px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
}
.ap-screen::-webkit-scrollbar{width:0;display:none}

/* ===== sticky app bar ===== */
.ap-top{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,rgba(18,20,28,.98),rgba(18,20,28,.9));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  border-radius:34px 34px 0 0;
  padding:8px 16px 10px;
}
.ap-status{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--mut);padding:2px 4px 8px}
.ap-status .notch{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:96px;height:22px;background:#05060a;border-radius:14px}
.ap-status .ap-v{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ap-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ap-word{display:flex;align-items:center;gap:9px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:18px;letter-spacing:.01em}
.ap-word .logo{width:34px;height:34px;border-radius:11px;background:linear-gradient(150deg,var(--acc),#e08a12);display:grid;place-items:center;color:#1a1305;font-weight:800;font-size:14px;box-shadow:0 6px 16px -6px rgba(245,182,56,.7)}
.ap-word small{display:block;font-family:"Inter",sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}

/* ===== buttons ===== */
.ap-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:15px;
  padding:14px 18px;border-radius:16px;border:0;cursor:pointer;
  background:linear-gradient(150deg,var(--acc),#e79a13);color:#1a1305;
  box-shadow:0 10px 24px -12px rgba(245,182,56,.8);
  transition:transform .12s ease;
}
.ap-btn:active{transform:translateY(1px)}
.ap-btn--wide{width:100%}
.ap-btn--sm{padding:9px 14px;font-size:13px;border-radius:12px}
.ap-btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.ap-btn--soft{background:var(--panel2);color:var(--ink);box-shadow:none}

/* ===== feed ===== */
.ap-feed{padding:16px 16px 96px;display:flex;flex-direction:column;gap:22px}
.ap-sec{scroll-margin-top:120px}
.ap-lab{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ap-lab h2{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:20px}
.ap-lab .more{font-size:12.5px;color:var(--acc);font-weight:600}
.ap-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:8px;font-family:"Plus Jakarta Sans",sans-serif}

/* hero */
.ap-hero h1{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:29px;line-height:1.18;letter-spacing:-.01em}
.ap-hero p.lede{color:var(--mut);font-size:14.5px;line-height:1.62;margin:12px 0 16px}
.ap-cta{display:flex;flex-direction:column;gap:10px}
.ap-kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
.ap-kpi .k{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:13px 14px}
.ap-kpi .k .ap-v{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:22px}
.ap-kpi .k span{font-size:11.5px;color:var(--mut)}
.ap-kpi .k .ap-v em{font-style:normal;color:var(--acc)}

/* chip filters */
.ap-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.ap-chips::-webkit-scrollbar{display:none}
.ap-chip{flex:0 0 auto;padding:8px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--mut)}
.ap-chip.on{background:var(--acc);color:#1a1305;border-color:transparent}

/* welcome cards */
.ap-welc{display:flex;flex-direction:column;gap:12px}
.ap-offer{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;position:relative;overflow:hidden}
.ap-offer::before{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(108,123,255,.28),transparent 70%)}
.ap-offer .step{font-size:11px;color:var(--mut);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.ap-offer .pct{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:34px;line-height:1;margin:6px 0 2px;color:var(--acc)}
.ap-offer .up{font-size:13.5px;color:var(--ink);font-weight:600}
.ap-offer .game{font-size:12.5px;color:var(--mut);margin-top:8px;display:flex;align-items:center;gap:6px}
.ap-offer .game i{font-style:normal}
.ap-offer:nth-child(2) .pct{color:#7f8cff}
.ap-offer:nth-child(3) .pct{color:var(--ok)}

/* slot catalog */
.ap-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ap-slot{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ap-slot .thumb{height:82px;display:grid;place-items:center;font-size:30px}
.ap-slot .thumb.g1{background:linear-gradient(140deg,#3a2a66,#6c4ec9)}
.ap-slot .thumb.g2{background:linear-gradient(140deg,#5a2033,#c0435f)}
.ap-slot .thumb.g3{background:linear-gradient(140deg,#1f3b52,#2f88c9)}
.ap-slot .thumb.g4{background:linear-gradient(140deg,#3d1f1f,#a5432b)}
.ap-slot .thumb.g5{background:linear-gradient(140deg,#264a2c,#3fae63)}
.ap-slot .thumb.g6{background:linear-gradient(140deg,#4a3a12,#d0a02c)}
.ap-slot .b{padding:10px 11px 12px}
.ap-slot .nm{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:13.5px;line-height:1.25}
.ap-slot .pv{font-size:11px;color:var(--mut);margin-top:3px}
.ap-slot .rtp{display:inline-block;margin-top:8px;font-size:10.5px;font-weight:700;color:var(--ok);background:rgba(66,211,146,.12);border-radius:8px;padding:3px 7px;font-family:"Plus Jakarta Sans",sans-serif}

/* VIP */
.ap-vip{display:flex;flex-direction:column;gap:8px}
.ap-tier{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:11px 13px}
.ap-tier .ic{width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;font-size:19px;background:var(--panel2)}
.ap-tier .t{flex:1;min-width:0}
.ap-tier .t .ap-v{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:14px;display:block}
.ap-tier .t span{font-size:11.5px;color:var(--mut)}
.ap-tier .cb{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:17px;color:var(--acc)}

/* live */
.ap-live{display:flex;flex-direction:column;gap:10px}
.ap-table{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px}
.ap-table .cover{width:56px;height:56px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;font-size:26px}
.ap-table .cover.l1{background:linear-gradient(140deg,#5a1f2a,#b83b52)}
.ap-table .cover.l2{background:linear-gradient(140deg,#1f2b45,#3a56a8)}
.ap-table .cover.l3{background:linear-gradient(140deg,#4a2f12,#e0932c)}
.ap-table .d{flex:1;min-width:0}
.ap-table .d .ap-v{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:14.5px;display:block}
.ap-table .d span{font-size:11.5px;color:var(--mut)}
.ap-table .d .lim{color:var(--ink)}
.ap-live-dot{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:#ff6b7d;letter-spacing:.08em;text-transform:uppercase}
.ap-live-dot i{width:7px;height:7px;border-radius:50%;background:#ff6b7d;box-shadow:0 0 0 0 rgba(255,107,125,.6);animation:appulse 1.6s infinite}
@keyframes appulse{0%{box-shadow:0 0 0 0 rgba(255,107,125,.55)}70%{box-shadow:0 0 0 7px rgba(255,107,125,0)}100%{box-shadow:0 0 0 0 rgba(255,107,125,0)}}

/* cashier table */
.ap-cash{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.ap-cash table{width:100%;border-collapse:collapse}
.ap-cash th,.ap-cash td{text-align:left;padding:11px 12px;font-size:12.5px;border-bottom:1px solid var(--line)}
.ap-cash th{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);background:var(--panel2)}
.ap-cash td:first-child{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700}
.ap-cash tr:last-child td{border-bottom:0}
.ap-cash .zero{color:var(--ok);font-weight:700}

/* toggles / settings */
.ap-set{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:6px 14px}
.ap-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.ap-row:last-child{border-bottom:0}
.ap-row .txt .ap-v{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:14px;display:block}
.ap-row .txt span{font-size:11.5px;color:var(--mut)}
.ap-sw{width:46px;height:27px;flex:0 0 auto;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:background .18s}
.ap-sw::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:left .18s}
.ap-sw.on{background:var(--acc)}
.ap-sw.on::after{left:22px}

/* reviews */
.ap-revs{display:flex;flex-direction:column;gap:10px}
.ap-rev{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:13px}
.ap-rev .h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ap-rev .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;color:#12141c}
.ap-rev .av.a1{background:linear-gradient(140deg,#f5b638,#e0770f)}
.ap-rev .av.a2{background:linear-gradient(140deg,#6c7bff,#9a5cff)}
.ap-rev .av.a3{background:linear-gradient(140deg,#42d392,#22a2c9)}
.ap-rev .nm{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:13.5px}
.ap-rev .st{font-size:11px;color:var(--acc)}
.ap-rev p{font-size:12.5px;color:var(--mut);line-height:1.55}

/* faq */
.ap-faq details{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:9px;overflow:hidden}
.ap-faq summary{list-style:none;cursor:pointer;padding:14px 15px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:14px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.ap-faq summary::-webkit-details-marker{display:none}
.ap-faq summary::after{content:"+";color:var(--acc);font-size:20px;font-weight:700}
.ap-faq details[open] summary::after{content:"–"}
.ap-faq p{padding:0 15px 15px;font-size:13px;color:var(--mut);line-height:1.6}

/* author note */
.ap-note{background:linear-gradient(150deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:18px;padding:16px}
.ap-note h2{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:17px;margin-bottom:10px}
.ap-note p{font-size:12.5px;color:var(--mut);line-height:1.62;margin-bottom:10px}
.ap-note p:last-child{margin-bottom:0}
.ap-18{display:inline-block;font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:11px;color:#ff6b7d;border:1px solid rgba(255,107,125,.5);border-radius:7px;padding:1px 6px;margin-right:6px}

/* footer */
.ap-foot{border-top:1px solid var(--line);padding:16px;background:var(--panel)}
.ap-foot .fw{display:flex;align-items:center;gap:9px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:16px;margin-bottom:10px}
.ap-foot .fw .logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(150deg,var(--acc),#e08a12);display:grid;place-items:center;color:#1a1305;font-weight:800;font-size:12px}
.ap-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;font-family:"Plus Jakarta Sans",sans-serif;color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:5px 11px;margin-bottom:12px}
.ap-foot .legal{font-size:11px;color:var(--mut);line-height:1.6}
.ap-foot .legal p{margin-bottom:8px}
.ap-foot .cr{font-size:10.5px;color:var(--mut);margin-top:12px;padding-top:12px;border-top:1px solid var(--line);line-height:1.55}

/* ===== sticky tab bar ===== */
.ap-tabs{
  position:sticky;bottom:0;z-index:20;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:linear-gradient(0deg,rgba(18,20,28,.99),rgba(18,20,28,.92));
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  border-radius:0 0 34px 34px;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.ap-tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;font-size:10px;color:var(--mut);font-weight:600}
.ap-tab .ico{font-size:20px;line-height:1}
.ap-tab.on{color:var(--acc)}

/* ===== responsive ===== */
@media (min-width:1080px){
  .ap-stage{gap:28px;align-items:flex-start}
  .ap-side{display:block}
}
@media (max-width:520px){
  .ap-stage{padding:0}
  .ap-device{width:100%;border-radius:0;padding:0}
  .ap-screen{height:100vh;border-radius:0}
  .ap-top{border-radius:0}
  .ap-tabs{border-radius:0}
  .ap-status .notch{display:none}
}