/* Latih for Rahmat's talks: the Tanya Mat app's Latih section as a stand-alone web app.
   Flow: pick a scenario -> scripted scam chat with 3 reply buttons per step -> result.
   A choice: safe (ends the round: pass, or "nearly" if a risky choice came before), ask (story goes on),
   risky (held against you, story goes on), comply (final step only: fooled).
   Brand: no emoji, outline SVG icons, cut-corner buttons, Tanya Mat teal. Dark theme only. */
:root{
  --acc:#37E7F2; --acc-rgb:55,231,242; --acc-hi:#6FF6FF; --acc-mid:#2A8F98; --tone-2:#4FB3BD; --tone-3-rgb:61,107,114;
  --bg:#030B10; --ink:#E1F3F6; --muted:rgba(225,243,246,.78); --head:#FFFFFF;
  --line:rgba(var(--tone-3-rgb),.29); --panel:rgba(6,19,26,.78);
  --chat-bg:#030B10; --top-bg:#06131A; --them-bg:#0F2229; --me-bg:var(--acc); --me-fg:#030C11;
  --field-bg:#0B1A20; --warn-bg:#B3261E; --warn-fg:#FFFFFF;
  --ok:#5BE49B; --mid:#F9BF1C; --bad:#FF8A7A; --gold:#F9BF1C;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{ font-family:'Outfit',sans-serif; background:var(--bg); color:var(--ink); min-height:100dvh;
  background:radial-gradient(ellipse 90% 40% at 50% 0%, rgba(var(--tone-3-rgb),.23) 0%, transparent 58%),
             linear-gradient(180deg,#05121A 0%,#030B10 42%,#020709 100%) fixed; }
[hidden]{ display:none !important; }
.page{ width:100%; max-width:520px; margin:0 auto; padding:calc(16px + env(safe-area-inset-top,0px)) 18px calc(32px + env(safe-area-inset-bottom,0px)); }
.i{ width:1.1em; height:1.1em; flex-shrink:0; vertical-align:-0.18em; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* buttons: cut corners, never rounded */
.btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:52px; padding:8px 16px;
  font:inherit; font-size:17px; font-weight:500; line-height:1.25; text-align:center; text-decoration:none; cursor:pointer; border:0;
  color:#030C11; background:linear-gradient(135deg,var(--acc-hi),var(--acc));
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); -webkit-tap-highlight-color:transparent; }
.btn.ghost{ --bd:rgba(var(--acc-rgb),.38); color:var(--tone-2); box-shadow:inset 0 0 0 1px var(--bd);
  /* the clip-path cuts the outline off at the 2 cut corners: draw each 1px diagonal back in (same as the app) */
  background:linear-gradient(to bottom right,transparent 50%,var(--bd) 50%,var(--bd) calc(50% + 1px),transparent calc(50% + 1px)) left top/8px 8px no-repeat,
             linear-gradient(to bottom right,transparent calc(50% - 1px),var(--bd) calc(50% - 1px),var(--bd) 50%,transparent 50%) right bottom/8px 8px no-repeat; }
.btn:active{ filter:brightness(.92); }
.btn:focus-visible{ outline:3px solid currentColor; outline-offset:-6px; }
.btn:disabled{ opacity:.45; cursor:default; }
.btn + .btn{ margin-top:10px; }

/* top row: back (left) + language (right) */
.bar-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; }
.back{ display:inline-flex; align-items:center; gap:6px; min-width:44px; min-height:44px; padding:0 12px 0 8px; margin-left:-8px;
  font:inherit; font-size:16px; font-weight:500; color:var(--head); background:transparent; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.back .i{ width:24px; height:24px; }
.back:focus-visible{ outline:2px solid var(--acc); outline-offset:-2px; }
.lang{ display:flex; margin-left:auto; box-shadow:inset 0 0 0 1px var(--line); clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.lang button{ min-width:48px; min-height:40px; font:inherit; font-family:'Chakra Petch',sans-serif; font-size:14px; letter-spacing:1px;
  color:var(--muted); background:transparent; border:0; cursor:pointer; }
.lang button[aria-pressed="true"]{ color:#030C11; background:var(--acc); }

/* 1. list */
.logo{ display:block; width:100%; max-width:300px; height:auto; margin:18px auto 0; }
.head{ margin-top:26px; }
.head h1{ font-family:'Orbitron',sans-serif; font-weight:500; font-size:22px; letter-spacing:1px; color:var(--head); text-transform:uppercase; }
.head p{ margin-top:6px; font-size:17px; line-height:1.5; color:var(--muted); }
.prog{ margin-top:16px; }
.prog .t{ font-size:15px; font-weight:500; color:var(--muted); }
.prog .t b{ color:var(--head); font-weight:500; }
.prog .barx{ margin-top:6px; height:6px; background:rgba(var(--tone-3-rgb),.25); }
.prog .barx span{ display:block; height:100%; background:var(--ok); transition:width .4s; }
.cards{ margin-top:16px; display:grid; gap:10px; }
.card{ display:flex; align-items:center; gap:14px; width:100%; min-height:76px; padding:14px; text-align:left; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); color:var(--ink); font:inherit;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%); }
.card .ic{ width:30px; flex-shrink:0; display:flex; justify-content:center; color:var(--tone-2); }
.card .ic .i{ width:30px; height:30px; }
.card .tx{ flex:1; min-width:0; }
.card .nm{ display:block; font-size:19px; font-weight:500; color:var(--head); }
.card .ds{ display:block; margin-top:2px; font-size:16px; line-height:1.4; color:var(--muted); }
.card .tick{ display:inline-flex; align-items:center; gap:4px; margin-top:6px; font-size:14px; font-weight:700; color:var(--ok); }
.card:focus-visible{ outline:3px solid var(--acc); outline-offset:-3px; }
.foot{ margin-top:22px; font-size:14px; line-height:1.5; color:var(--muted); text-align:center; }

/* 2. chat: full screen */
.chat{ position:fixed; inset:0; z-index:10; background:var(--chat-bg); display:flex; flex-direction:column; align-items:center; }
.chat-top{ width:100%; max-width:520px; flex-shrink:0; display:flex; align-items:center; gap:6px;
  padding:calc(8px + env(safe-area-inset-top,0px)) 14px 8px; background:var(--top-bg); border-bottom:1px solid var(--line); }
.chat-top .back{ margin-left:-4px; padding:0 6px; }
.who{ flex:1; min-width:0; }
.who b{ display:block; font-size:17px; font-weight:700; color:var(--head); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.who span{ display:block; font-size:14px; color:var(--muted); }
.who span.warn{ color:var(--bad); font-weight:500; }
.banner{ width:100%; max-width:520px; flex-shrink:0; padding:10px 16px; text-align:center; font-family:'Chakra Petch',sans-serif;
  font-size:14px; font-weight:500; letter-spacing:.02em; background:var(--warn-bg); color:var(--warn-fg); }
.stream{ width:100%; max-width:520px; flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:8px; padding:16px 18px 120px; }
.msg{ max-width:86%; padding:12px 16px; font-size:18px; line-height:1.45; white-space:pre-wrap; word-wrap:break-word; }
.msg.them{ align-self:flex-start; background:var(--them-bg); color:var(--ink); border:1px solid var(--line);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%); }
.msg.me{ align-self:flex-end; background:var(--me-bg); color:var(--me-fg); clip-path:polygon(6px 0,100% 0,100% 100%,0 100%,0 6px); }
.typing{ align-self:flex-start; font-size:16px; color:var(--muted); padding:2px 4px; }
.reply{ position:fixed; bottom:0; left:0; right:0; margin:0 auto; width:100%; max-width:520px; z-index:11;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px)); background:var(--top-bg); border-top:1px solid var(--line); }
.ask{ margin-bottom:6px; font-size:14px; font-weight:500; color:var(--muted); }
.choices{ display:grid; gap:8px; }
.choice{ display:block; width:100%; min-height:56px; padding:14px 16px; border:2px solid var(--acc-mid); cursor:pointer; text-align:left;
  font:inherit; font-size:18px; line-height:1.35; font-weight:500; background:var(--field-bg); color:var(--ink);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.choice:focus-visible{ outline:3px solid var(--acc); outline-offset:-6px; }
.choice:disabled{ opacity:.55; cursor:default; }

/* 3. result */
.res{ margin-top:12px; padding:20px 16px; background:var(--panel); border:1px solid var(--line); }
.verdict{ display:flex; align-items:center; gap:12px; font-size:24px; line-height:1.25; font-weight:800; }
.verdict .i{ width:34px; height:34px; }
.verdict.pass{ color:var(--ok); } .verdict.close{ color:var(--mid); } .verdict.fail{ color:var(--bad); }
.was{ margin-top:8px; font-size:17px; color:var(--muted); }
.res h2{ margin-top:18px; font-family:'Chakra Petch',sans-serif; font-size:14px; font-weight:500; letter-spacing:1.4px; text-transform:uppercase; color:var(--tone-2); }
.res ul{ margin-top:8px; padding-left:22px; }
.res li{ margin-top:6px; font-size:17px; line-height:1.5; color:var(--head); }
.res .adv{ margin-top:8px; font-size:17px; line-height:1.5; color:var(--head); }
.res .prog{ margin-top:12px; }
.picks{ margin-top:8px; display:grid; gap:10px; }
.pick{ display:flex; gap:10px; align-items:flex-start; }
.pick .i{ width:22px; height:22px; margin-top:3px; }
.pick.good .i{ color:var(--ok); } .pick.meh .i{ color:var(--mid); } .pick.bad .i{ color:var(--bad); }
.pick b{ display:block; font-size:17px; line-height:1.4; color:var(--head); font-weight:500; }
.pick span{ display:block; margin-top:2px; font-size:16px; line-height:1.45; color:var(--muted); }
.res .acts{ margin-top:22px; }
.help{ display:flex; align-items:center; gap:10px; margin-top:16px; padding:12px 14px; min-height:52px; text-decoration:none;
  border:1px solid var(--line); color:var(--head); font-size:16px; line-height:1.4; }
.help .i{ color:var(--bad); width:22px; height:22px; }
.help b{ color:var(--tone-2); font-weight:500; white-space:nowrap; }

/* back to the landing page: a link styled like the back button */
a.back{ text-decoration:none; }

/* landing page: two big choices */
.hub{ margin-top:22px; display:grid; gap:12px; }
.hub a{ display:flex; align-items:center; gap:16px; min-height:112px; padding:18px 16px; text-decoration:none; color:var(--ink);
  background:var(--panel); border:1px solid rgba(var(--acc-rgb),.38);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%); -webkit-tap-highlight-color:transparent; }
.hub a:active{ filter:brightness(1.15); }
.hub a:focus-visible{ outline:3px solid var(--acc); outline-offset:-3px; }
.hub .ic{ flex-shrink:0; width:52px; height:52px; display:flex; align-items:center; justify-content:center; color:#030C11; background:var(--acc);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.hub .ic .i{ width:28px; height:28px; }
.hub .tx{ flex:1; min-width:0; }
.hub .nm{ display:block; font-family:'Orbitron',sans-serif; font-weight:500; font-size:19px; letter-spacing:.5px; text-transform:uppercase; color:var(--head); }
.hub .ds{ display:block; margin-top:4px; font-size:16px; line-height:1.4; color:var(--muted); }
.hub .st{ display:block; margin-top:6px; font-size:14px; font-weight:700; color:var(--ok); }
.hub .go{ flex-shrink:0; color:var(--tone-2); }
.hub .go .i{ width:22px; height:22px; }

/* badges (Latih + Kuiz): gold circle when earned, grey when not yet; each colour pair >= 4.5:1 */
.newb{ margin-top:14px; padding:12px 14px; border:2px solid var(--gold); color:var(--head); font-size:17px; font-weight:500; display:flex; align-items:center; gap:10px; }
.newb .i{ color:var(--gold); width:24px; height:24px; }
.badges{ margin-top:8px; display:grid; gap:8px; }
.bdg{ display:flex; align-items:center; gap:12px; padding:12px 14px; min-height:60px; border:1px solid var(--line); font-size:16px; line-height:1.3; }
.bdg .ic{ flex-shrink:0; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.bdg .ic .i{ width:22px; height:22px; }
.bdg.on{ border-color:var(--gold); color:var(--head); }
.bdg.on .ic{ background:#F9BF1C; color:#1A1300; }
.bdg.off{ color:var(--muted); }
.bdg.off .ic{ background:#1B2E35; color:#9AB0B5; }
.bdg .nm{ flex:1; min-width:0; }
.bdg .st{ flex-shrink:0; font-size:14px; font-weight:700; }
.bdg.on .st{ color:var(--gold); }
.bdg.off .st{ color:#B5C8CC; font-weight:500; }