/* Engagement features: push prompt, "stay in the loop" strip, WhatsApp page, Opportunity Hunter game. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header bell */
.push-bell{border:1px solid #dce5ea;background:#fff;border-radius:999px;width:38px;height:38px;display:inline-grid;place-items:center;font-size:17px;line-height:1;padding:0;cursor:pointer}
.push-bell:hover{border-color:var(--green)}
.push-bell.is-on{background:#e7f8ef;border-color:#16a878}
.push-bell[hidden]{display:none}

/* Soft permission banner */
.push-banner{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:90;width:min(560px,calc(100% - 24px));background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 55px rgba(16,43,70,.22);padding:16px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.push-banner-body{flex:1 1 260px;min-width:0}
.push-banner-body strong{display:block;color:var(--navy);font-size:14px;margin-bottom:3px}
.push-banner-body p{margin:0;font-size:12px;line-height:1.55}
.push-banner-actions{display:flex;gap:8px;flex-wrap:wrap}
.push-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:95;background:#102b46;color:#fff;border-radius:12px;padding:12px 16px;font-size:13px;max-width:min(460px,calc(100% - 24px));transition:opacity .2s,transform .2s;box-shadow:0 12px 35px rgba(0,0,0,.25)}
.push-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* Strip above the footer */
.engage-strip{background:#f0f7f4;border-top:1px solid #d9ece4;border-bottom:1px solid #d9ece4;padding:26px 0}
.engage-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.engage-strip h2{font-size:20px;margin:0 0 4px;color:var(--navy)}
.engage-strip p{margin:0;font-size:13px;max-width:560px}
.engage-strip-actions{display:flex;gap:10px;flex-wrap:wrap}
.engage-strip-actions .btn[hidden]{display:none}
.engage-card h2{font-size:19px}
.engage-consent{display:flex!important;gap:10px;align-items:flex-start;font-weight:500!important}
.engage-consent input{width:auto!important;margin-top:3px}

/* Opportunity Hunter */
.game-wrap{max-width:980px}
.game-head{padding:6px 0 18px}
.game-head h1{font-size:clamp(2.2rem,5vw,3.4rem);color:var(--navy);margin:8px 0}
.game-head p{max-width:640px;font-size:14px}
.game-layout{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:26px;align-items:start}
.game-stage{position:relative}
.game-canvas-wrap{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 18px 50px rgba(16,43,70,.22);background:#0b2036;aspect-ratio:9/14;max-width:420px;margin:0 auto}
#game-canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}
.game-overlay{position:absolute;inset:0;background:rgba(8,24,40,.88);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;gap:6px;overflow:auto}
.game-overlay[hidden]{display:none}
.game-overlay h2{color:#fff;font-size:clamp(1.6rem,5vw,2.1rem);margin:0 0 4px}
.game-overlay p{color:#c9d8e5;font-size:13px;line-height:1.65;margin:0 0 6px}
.game-overlay b{color:#72dfb3}
.game-keys{font-size:11px!important;color:#93acbf!important}
.game-final{font-weight:800;font-size:16px!important;color:#fff!important}
.game-tip{font-size:12px!important;color:#f3c96a!important;max-width:290px}
.game-save-note{min-height:18px;font-size:12px!important}
.game-save-note a{color:#72dfb3}
.game-name-form{display:grid;gap:7px;width:100%;max-width:260px;margin:4px 0}
.game-name-form label{font-size:12px;font-weight:700;color:#c9d8e5}
.game-name-form input{border:1px solid #3a5d7c;background:#0f2a43;color:#fff;border-radius:8px;padding:10px;font-size:13px}
.game-over-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.game-over-actions .btn-outline{background:transparent;color:#fff;border-color:#4a6c8a}
.game-over-actions .btn[hidden]{display:none}
.game-controls{display:none;gap:12px;margin:12px auto 0;max-width:420px}
.game-pad{flex:1;height:58px;border:0;border-radius:14px;background:#183c5e;color:#fff;font-size:22px;touch-action:none;user-select:none;-webkit-user-select:none}
.game-pad:active{background:#16a878}
@media (hover:none),(max-width:820px){.game-controls{display:flex}}
.game-side{display:grid;gap:16px}
.game-board,.game-how{border:1px solid var(--line);border-radius:16px;padding:20px;background:#fff}
.game-board h2,.game-how h2{font-size:18px;color:var(--navy);margin:0 0 12px}
.game-board ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.game-board li{display:flex;align-items:center;gap:10px;font-size:13px}
.game-board li strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-board .leader-rank{width:24px;height:24px;border-radius:50%;background:#e7f8ef;color:#087e59;display:grid;place-items:center;font-size:11px;font-weight:800;flex-shrink:0}
.game-board-empty{color:var(--muted)}
.game-how ul{margin:0;padding-left:18px;font-size:13px;line-height:1.8;color:#526478}
.game-note{font-size:11px;margin:12px 0 0}
@media (max-width:820px){.game-layout{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.push-toast{transition:none}}

/* ---- Rich opportunity / article body (Phase 38) ---- */
.rich-body{font-size:15px;line-height:1.85;color:#34485b;overflow-wrap:anywhere}
.rich-body>:first-child{margin-top:0}
.rich-body h2{font-size:22px;color:var(--navy);margin:30px 0 10px}
.rich-body h3{font-size:18px;color:var(--navy);margin:24px 0 8px}
.rich-body h4{font-size:15px;color:var(--navy);margin:18px 0 6px}
.rich-body p{color:inherit;margin:0 0 14px;font-size:inherit}
.rich-body ul,.rich-body ol{margin:0 0 16px;padding-left:24px}
.rich-body li{margin-bottom:6px;padding-left:2px}
.rich-body li::marker{color:var(--green);font-weight:800}
.rich-body a{color:var(--green-dark);text-decoration:underline}
.rich-body blockquote{margin:0 0 16px;padding:6px 18px;border-left:4px solid #bfe8d6;background:#f7fbf9;border-radius:0 10px 10px 0}
.rich-body hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.rich-body table{display:block;overflow-x:auto;border-collapse:collapse;margin:0 0 16px;max-width:100%}
.rich-body th,.rich-body td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top;font-size:13px}
.rich-body th{background:#f4f8fb;color:var(--navy)}
.detail-meta div b{overflow-wrap:anywhere}

.apply-note{background:#f7fbf9;border:1px solid #d5eee3;border-radius:12px;padding:14px 16px;margin:0 0 14px;font-size:14px;line-height:1.7;color:#34485b}
.apply-actions{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
.apply-safety{font-size:12px;color:var(--muted);margin:0}
.detail-section .rich-body,.rich-body.detail-section{padding-top:0}