body.game{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden}
.hud{display:flex;gap:12px;font-weight:700;font-size:15px}
.hud #score{color:var(--primary)}
.stage{flex:1;max-width:460px;width:100%;margin:0 auto;padding:0 16px 24px;position:relative}
.screen{display:none}
.screen.active{display:block}
.danger{color:var(--danger)}.ok{color:var(--ok)}
.intro,.result{text-align:center;padding-top:24px}
.big-emoji{font-size:64px;line-height:1}
.intro h1{font-size:34px;margin:12px 0 8px}
.intro p{color:var(--muted);font-size:17px}
.howto{list-style:none;padding:0;margin:20px 0 28px;color:var(--muted);font-size:15px}
.howto li{margin:6px 0}
.btn{appearance:none;border:0;border-radius:999px;padding:14px 26px;font-size:17px;font-weight:700;cursor:pointer;background:#e7eaf0;color:var(--fg);font-family:inherit;transition:transform .1s,opacity .2s}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.4;cursor:default}
.btn.primary{background:var(--primary);color:#fff}
.btn.danger{background:var(--danger);color:#fff}
.btn.ok{background:var(--ok);color:#fff}

.deck{position:relative;height:440px;margin-top:8px}
.card{position:absolute;inset:0;background:var(--card);border-radius:20px;box-shadow:0 10px 30px rgba(20,30,60,.14);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;display:flex;flex-direction:column;will-change:transform}
.card.dragging{cursor:grabbing;transition:none}
.card.animate{transition:transform .35s ease,opacity .35s ease}
.card.reveal .stamp{opacity:0!important;transition:opacity .4s .3s}
.card .stamp{position:absolute;top:22px;padding:4px 14px;border:4px solid;border-radius:10px;font-size:26px;font-weight:900;opacity:0;transform:rotate(-12deg);z-index:3;background:rgba(255,255,255,.85)}
.card .stamp.phish{right:18px;color:var(--danger);border-color:var(--danger)}
.card .stamp.safe{left:18px;color:var(--ok);border-color:var(--ok);transform:rotate(12deg)}
.card-type{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);padding:12px 16px 0}

/* SMS */
.sms .top{padding:8px 16px 12px;border-bottom:1px solid #eef0f4;text-align:center}
.sms .avatar{width:44px;height:44px;border-radius:50%;background:#c9cfdb;margin:0 auto 4px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff}
.sms .from{font-weight:700}
.sms .thread,.kakao .thread{flex:1;padding:16px;overflow:auto}
.bubble{display:inline-block;max-width:92%;padding:12px 14px;border-radius:18px;white-space:pre-wrap;word-break:break-all;font-size:15.5px;line-height:1.55}
.sms .bubble{background:#e9e9eb;border-top-left-radius:6px}

/* Kakao */
.kakao{background:#b2c7d9}
.kakao .card-type{color:#3b4a5a}
.kakao .top{padding:8px 16px 12px;font-weight:700;color:#1d2433}
.kakao .row{display:flex;gap:8px;align-items:flex-start}
.kakao .pf{width:38px;height:38px;border-radius:14px;background:#8aa2b8;flex:none;display:flex;align-items:center;justify-content:center;font-size:20px}
.kakao .name{font-size:13px;color:#2c3a48;margin-bottom:4px}
.kakao .bubble{background:#fff;border-top-left-radius:6px}

/* Email */
.email .head{padding:8px 16px 12px;border-bottom:1px solid #eef0f4}
.email .subject{font-size:18px;font-weight:800;margin:0 0 6px}
.email .from{font-size:13.5px;color:var(--muted);word-break:break-all}
.email .mail-body{flex:1;padding:16px;white-space:pre-wrap;word-break:break-all;font-size:15px;overflow:auto}

/* Web */
.web .bar{margin:8px 12px;background:#eef0f4;border-radius:10px;padding:8px 12px;font-size:13.5px;word-break:break-all;display:flex;gap:6px;align-items:center}
.web .lock{flex:none}
.web .page{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 28px;gap:10px}
.web .brand{font-size:32px;font-weight:900;color:#03c75a;letter-spacing:.02em}
.web .notice{font-size:14px;color:var(--muted);text-align:center}
.web .field{width:100%;border:1px solid #dadde3;border-radius:8px;padding:12px;font-size:14px;color:#9aa1ad;text-align:left}
.web .login{width:100%;background:#03c75a;color:#fff;border-radius:8px;padding:12px;font-weight:700;text-align:center}

/* Clue highlight after answer */
.clue{border-radius:4px;transition:background .3s,box-shadow .3s}
.card.reveal.is-phishing .clue{background:#ffe1e1;box-shadow:0 0 0 2px #ffb3b5;color:#b4141a}

.controls{display:flex;justify-content:space-between;gap:12px;margin-top:20px}
.controls .btn{flex:1}

.feedback{position:fixed;left:0;right:0;bottom:0;max-width:460px;margin:0 auto;background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -10px 30px rgba(20,30,60,.18);padding:20px 20px calc(20px + env(safe-area-inset-bottom));z-index:10;animation:up .25s ease;max-height:70vh;overflow:auto}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.fb-title{font-size:20px;font-weight:800;margin-bottom:6px}
.fb-title.right{color:var(--ok)}.fb-title.wrong{color:var(--danger)}
.fb-list{margin:0 0 16px;padding-left:20px;color:#333a48;font-size:15px}
.fb-list li{margin:6px 0}
.feedback .btn{width:100%}

.res-score{font-size:52px;font-weight:900;color:var(--primary);margin-top:8px}
.result h2{margin:4px 0 8px;font-size:24px}
.result>p{color:var(--muted)}
.tips{text-align:left;background:#fff;border-radius:var(--radius);padding:16px 20px;margin:20px 0;box-shadow:0 2px 10px rgba(20,30,60,.06)}
.tips h3{margin:0 0 8px;font-size:17px}
.tips ol{margin:0;padding-left:20px;font-size:15px}
.tips li{margin:6px 0}
.report{font-size:14px;color:var(--muted);margin:12px 0 0}
.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.toast{margin-top:12px;color:var(--ok);font-weight:700}
@media (max-height:700px){.deck{height:380px}}

body.game .logo{font-size:17px}
body.game .site-header{max-width:460px;padding:14px 16px}
.hud[hidden]{display:none}