:root{--bg:#0b0c0e;--ink:#e8e4dc;--dim:#8c8a84;--acc:#d9b45a;--red:#e0442f;--green:#7fb069}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:"Arial Black","Helvetica Neue",Impact,Arial,sans-serif;font-weight:900;overflow:hidden;touch-action:manipulation}
#app{position:fixed;inset:0;max-width:560px;margin:auto;overflow:hidden}
.grain{position:absolute;inset:-50%;pointer-events:none;z-index:50;opacity:.09;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");animation:gr 1s steps(4) infinite}
@keyframes gr{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}
.screen{position:absolute;inset:0;display:none;padding:max(28px,env(safe-area-inset-top)) 26px max(26px,env(safe-area-inset-bottom));flex-direction:column}
#app[data-screen=brief] #brief,#app[data-screen=report] #report{display:flex}
#app[data-screen=call] #call{display:block;padding:0}
.kicker{letter-spacing:.38em;font-size:12px;color:var(--acc)}
h1{font-size:clamp(54px,18vw,96px);line-height:.9;margin:10px 0 28px;letter-spacing:.02em;text-transform:uppercase}
h2{font-size:clamp(38px,12vw,64px);line-height:.95;margin:14px 0 26px;text-transform:uppercase}
.goals{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:14px;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.goals b{color:var(--acc);margin-right:14px}
.cover{font-size:11px;letter-spacing:.2em;color:var(--dim);margin-top:auto;margin-bottom:22px}
.cta{appearance:none;border:0;background:var(--ink);color:#0b0c0e;font:inherit;font-size:18px;letter-spacing:.24em;padding:20px 0;text-transform:uppercase;clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.cta:active{background:var(--acc)}
.cta[disabled]{opacity:.4}
.msg{min-height:20px;margin-top:14px;font-size:12px;letter-spacing:.1em;color:var(--red);text-transform:uppercase}
.stage{position:absolute;inset:0;background:radial-gradient(120% 80% at 40% 30%,#2a2622 0,#0b0c0e 70%)}
#face{position:absolute;left:50%;top:6%;height:78%;transform:translateX(-62%);filter:contrast(1.05) saturate(.85)}
#vig{position:absolute;inset:0;background:radial-gradient(90% 70% at 40% 40%,transparent 40%,rgba(0,0,0,.75));box-shadow:inset 0 0 0 0 var(--red);transition:box-shadow .5s}
#diamonds{position:absolute;right:max(14px,env(safe-area-inset-right));top:18%;display:grid;gap:30px;z-index:5}
.dia{width:84px;text-align:center;position:relative}
.dia i{display:block;position:relative;width:70px;height:70px;margin:0 auto;background:rgba(232,228,220,.6);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.dia i::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--c) var(--p,20%),#17181b var(--p,20%));clip-path:polygon(50% 4%,96% 50%,50% 96%,4% 50%);transition:background .3s}
.dia i span{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#fff;text-shadow:0 1px 3px #000;z-index:1}
.dia em{display:block;margin-top:8px;font-style:normal;font-size:9px;letter-spacing:.18em;color:var(--dim)}
.dia[data-k=rapport]{--c:#d9a05a}.dia[data-k=trust]{--c:#7fb069}.dia[data-k=suspicion]{--c:var(--red)}
.dia.bump i{animation:bump .6s}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.28)}55%{transform:scale(.94)}100%{transform:scale(1)}}
#caption{position:absolute;left:18px;right:110px;bottom:104px;font-size:14px;line-height:1.35;color:var(--ink);text-shadow:0 1px 4px #000;display:none;font-weight:700}
#app.cc #caption{display:block}
.bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:16px 18px max(18px,env(safe-area-inset-bottom));background:linear-gradient(0deg,#000d,transparent)}
#status{font-size:11px;letter-spacing:.22em;color:var(--acc);min-width:92px}
#meter{flex:1;height:6px;background:rgba(255,255,255,.1);overflow:hidden}
#meter b{display:block;height:100%;width:0;background:var(--ink)}
.sq{appearance:none;border:0;background:rgba(232,228,220,.1);color:var(--ink);font:inherit;font-size:10px;letter-spacing:.16em;width:48px;height:48px;transform:rotate(45deg);margin:0 6px}
.sq span{display:block;transform:rotate(-45deg)}
.sq.on{background:var(--ink);color:#000}
.sq.warn{background:rgba(224,68,47,.8)}
.rows{display:grid;gap:12px;margin-bottom:22px}
.row{display:flex;justify-content:space-between;font-size:15px;letter-spacing:.14em;text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid rgba(232,228,220,.15)}
.row b{color:var(--acc)}
#intel{font-size:13px;letter-spacing:.08em;color:var(--ink);line-height:1.5;margin-bottom:24px;text-transform:uppercase}
#again{margin-top:auto}