/* Truth or Dare Couples — tema: gece kulubu, ince cerceve, renkli ofset golge, kesik kose */
:root{
  --ink:#120A18;
  --bg:#FDF2F8; --panel:#FFFFFF; --panel-2:#FFF7FB;
  --text:#1A0F22; --muted:#7C6685; --line:#120A18;
  --brand:#E11D6B; --brand-2:#7C3AED;
  --rose:#E11D6B; --amber:#FFB020; --mint:#10C9A0; --sky:#4AA8FF;
  --violet:#7C3AED; --peach:#FF8A5B; --blush:#FFD6E7;
  --bd:2px solid var(--ink);
  --pop:6px 6px 0 var(--brand); --pop-sm:3px 3px 0 var(--ink);
  --radius:6px; --cut:18px;
  --font:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'Space Mono',ui-monospace,Menlo,monospace;
}
:root[data-theme="dark"]{
  --ink:#000;
  --bg:#140B19; --panel:#1F1226; --panel-2:#291733;
  --text:#FFEAF4; --muted:#A98FB8; --line:#000;
  --blush:#3A1F33;
  --pop:6px 6px 0 var(--brand); --pop-sm:3px 3px 0 #000;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(var(--blush) 1.5px,transparent 1.5px);background-size:26px 26px}
a{color:inherit;text-decoration:none}
img{max-width:100%}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* topbar */
.top{position:sticky;top:0;z-index:30;background:var(--panel);border-bottom:var(--bd)}
.top .wrap{display:flex;align-items:center;gap:16px;height:64px}
.top nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.top nav::-webkit-scrollbar{display:none}
.top nav a{white-space:nowrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.03em;white-space:nowrap;flex:0 0 auto}
.brand .mark{width:32px;height:32px;border:var(--bd);border-radius:6px;display:block;flex:0 0 auto}
.brand .mark2{color:var(--brand)}
.top nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.top nav a{padding:8px 13px;font-weight:700;font-size:14px;border:2px solid transparent;border-radius:var(--radius)}
.top nav a:hover,.top nav a.on{border-color:var(--ink);background:var(--amber)}
.iconbtn{background:var(--panel);border:var(--bd);border-radius:var(--radius);padding:7px 11px;font:inherit;font-size:14px;cursor:pointer;color:var(--text)}
.iconbtn:active{transform:translate(2px,2px)}

/* generic card */
.card{background:var(--panel);border:var(--bd);border-radius:var(--radius);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.shadow{box-shadow:var(--pop)}

/* hero */
.hero{margin:34px 0 26px;padding:40px 38px;background:var(--panel);border:var(--bd);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  box-shadow:var(--pop)}
.hero h1{margin:0;font-size:clamp(32px,5.2vw,54px);line-height:1.02;letter-spacing:-.045em;font-weight:800}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero p{color:var(--muted);max-width:54ch;margin:16px 0 0;font-size:17px}
.tagline{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);margin:0 0 14px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;font-weight:800;font-size:15px;cursor:pointer;
  border:var(--bd);border-radius:var(--radius);background:var(--panel);color:var(--text);font-family:inherit;box-shadow:var(--pop-sm)}
.btn:active{transform:translate(3px,3px);box-shadow:none}
.btn.primary{background:var(--brand);color:#fff}
.btn.alt{background:var(--violet);color:#fff}

/* game */
.stage{display:grid;gap:16px;margin:26px 0}
.prompt{padding:44px 38px;min-height:230px;display:flex;flex-direction:column;justify-content:center;text-align:center;
  background:var(--panel);border:var(--bd);box-shadow:var(--pop);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.prompt .tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.prompt .qtext{font-size:clamp(20px,3.1vw,30px);font-weight:700;letter-spacing:-.025em;line-height:1.25;margin:0}
.prompt.truth{border-color:var(--ink);box-shadow:6px 6px 0 var(--sky)}
.prompt.dare{box-shadow:6px 6px 0 var(--brand)}
.share{display:flex;gap:8px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.share .iconbtn{font-size:12px;font-weight:700;padding:6px 12px;text-decoration:none}
.controls{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.levels-label{text-align:center;margin:0 0 4px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chip b{font-weight:800;color:var(--brand);margin-right:5px}
.chip.on b{color:var(--ink)}
.chip.spicy.on b{color:#fff}
.levels{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:4px}
.chip{white-space:nowrap}
.chip{font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:7px 14px;border:var(--bd);border-radius:999px;background:var(--panel);cursor:pointer;color:var(--text)}
.chip.on{background:var(--amber)}
.chip.spicy.on{background:var(--brand);color:#fff}

/* lists */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.tile{padding:24px;background:var(--panel);border:var(--bd);box-shadow:var(--pop-sm);transition:.15s;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.tile:hover{box-shadow:var(--pop);transform:translate(-2px,-2px)}
.tile .kick{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.tile h3{margin:10px 0 6px;font-size:20px;letter-spacing:-.025em}
.tile p{margin:0;color:var(--muted);font-size:14px}

.qlist{counter-reset:q;list-style:none;padding:0;margin:0;display:grid;gap:10px}
.qlist li{counter-increment:q;padding:15px 18px 15px 52px;position:relative;background:var(--panel);border:var(--bd);border-radius:var(--radius);font-size:16px}
.qlist li::before{content:counter(q);position:absolute;left:14px;top:13px;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--brand)}

h2.sec{margin:40px 0 14px;font-size:26px;letter-spacing:-.03em;font-weight:800}
h2.sec::after{content:"";display:block;width:54px;height:5px;background:var(--amber);border:var(--bd);margin-top:10px}
.prose{max-width:68ch}
.prose p{color:var(--muted)}

.note{padding:16px 18px;background:var(--blush);border:var(--bd);border-radius:var(--radius);font-size:14px;margin:22px 0}

footer{margin-top:60px;border-top:var(--bd);background:var(--panel)}
footer .wrap{padding:28px 20px;display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:14px}
footer a{font-weight:700;color:var(--text)}

@media(max-width:820px){
  .hero{padding:28px 20px}
  .top .wrap{gap:8px;padding:0 14px}
  .top nav{gap:2px}
  .top nav a{padding:7px 8px;font-size:13px}
  .prompt{padding:30px 18px}
  .wrap{padding:0 14px}
}
@media(max-width:560px){
  .brand{font-size:16px;gap:7px}
  .levels{gap:4px;flex-wrap:nowrap;justify-content:space-between}
  .chip{min-height:40px;padding:0 7px;display:inline-flex;align-items:center;font-size:10px;letter-spacing:.02em;flex:1 1 0;justify-content:center}
  .chip b{margin-right:3px}
  .levels-label{font-size:10px;letter-spacing:.1em}
  .share .iconbtn{min-height:44px;display:inline-flex;align-items:center;padding:0 16px}
  .top nav a{min-height:40px;display:inline-flex;align-items:center}
  .btn{min-height:48px}
  .brand .mark{width:28px;height:28px}
  .brand .full{display:none}
  .top nav a{padding:6px 7px;font-size:12px}
  .hero h1{font-size:30px}
  .btn{padding:12px 18px;font-size:14px}
  .chip{padding:6px 11px;font-size:11px}
  .qlist li{padding:13px 14px 13px 42px;font-size:15px}
  .qlist li::before{left:12px}
}