:root{
  --bg:#0b0720;--bg2:#120b2e;--card:#1a1138cc;--border:#3a2a73;
  --accent:#c89bff;--text:#f3ecff;--muted:#c7bde6;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text)}
.header{position:sticky;top:0;z-index:10;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #2f2361;background:linear-gradient(180deg,rgba(11,7,32,.9),rgba(11,7,32,.6));backdrop-filter:blur(8px)}
.brand{font-weight:700;color:var(--accent)}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
button,select,input[type=number]{background:var(--card);color:var(--text);border:1px solid var(--border);padding:10px 12px;border-radius:12px;cursor:pointer;box-shadow:0 0 20px rgba(200,155,255,.25),0 0 40px rgba(123,199,255,.18)}
button:hover{filter:brightness(1.05)}
.inline{display:inline-flex;align-items:center;gap:6px}
.main{padding:18px;max-width:1200px;margin:0 auto}
.board{position:relative;min-height:64vh;border:1px dashed #3b2b76;border-radius:16px;padding:16px;overflow:hidden}
.card{position:absolute;width:320px;min-width:300px;background:var(--card);border:1px solid var(--border);border-radius:16px;user-select:none;box-shadow:0 0 20px rgba(200,155,255,.25)}
.card .icon{position:absolute;right:12px;top:42px;width:28px;height:28px;opacity:.9}
.card h3{margin:10px 14px 6px 14px;font-size:16px;color:var(--accent)}
.card textarea{width:calc(100% - 28px);margin:0 14px 12px;border:1px solid #43307f;background:rgba(10,6,30,.7);color:var(--text);border-radius:10px;padding:10px;resize:vertical;font-size:14px;min-height:96px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 14px 14px}
.row .affirmBtn{border-color:#6f49c9;box-shadow:0 0 12px rgba(200,155,255,.35),0 0 24px rgba(100,150,255,.2)}
.draghandle{margin:12px 14px 0;background:rgba(255,255,255,.04);border:1px dashed #4b3a8f;border-radius:10px;padding:6px 8px;cursor:grab;user-select:none;touch-action:none;width:calc(100% - 28px);text-align:center}
.draghandle:active{cursor:grabbing}
.hud{border:1px solid #43307f;border-radius:10px;background:rgba(10,6,30,.55);padding:6px 10px;font-size:12px}
.rateTag{position:absolute;top:6px;left:8px;font-size:12px;padding:4px 8px;border:1px solid #43307f;border-radius:10px;background:rgba(10,6,30,.65);color:#fff;box-shadow:0 0 12px #c89bff55,0 0 24px #c89bff33}
.rateBadge{position:absolute;top:6px;right:8px;font-size:12px;padding:4px 8px;border:1px solid #43307f;border-radius:10px;background:rgba(10,6,30,.65);color:#fff;pointer-events:none;box-shadow:0 0 10px rgba(168,107,255,.2)}
.hidden{display:none}
@keyframes breathe{0%{filter:brightness(1)}50%{filter:brightness(1.15)}100%{filter:brightness(1)}}
@media print{.header,.controls{display:none!important}.board{border:0}.card{position:static;page-break-inside:avoid;background:#fff;color:#000;box-shadow:none;border:1px solid #999}}

/* ----- Stack cards on phones ----- */
@media (max-width: 768px) {
  body.mobile-stack .board { min-height: auto; height: auto; overflow: visible; }
  body.mobile-stack .card { position: static !important; width: calc(100% - 32px); margin: 12px 16px; }
  body.mobile-stack .draghandle { display: none; }
}

/* ----- Adjust header + text for mobile stack ----- */
@media (max-width: 768px) {
  body.mobile-stack header, body.mobile-stack h1, body.mobile-stack h2 { font-size: 90%; line-height: 1.2; }
  body.mobile-stack .hud, body.mobile-stack .controls, body.mobile-stack .panel { font-size: 95%; }
  body.mobile-stack .btn { padding: 8px 10px; font-size: 0.9rem; }
  body.mobile-stack .board { padding-bottom: 80px; }
}

/* ----- Soften glow + contrast for phones ----- */
@media (max-width: 768px) {
  body.mobile-stack, body.mobile-stack .card, body.mobile-stack .panel, body.mobile-stack .btn {
    box-shadow: 0 0 12px rgba(200,155,255,0.25), 0 0 24px rgba(130,180,255,0.15);
    background: rgba(20,10,45,0.8);
  }
  body.mobile-stack h1, body.mobile-stack h2 { text-shadow: 0 0 8px rgba(200,155,255,0.25); }
  body.mobile-stack .btn { border-color: rgba(120,100,180,0.6); background: rgba(40,20,80,0.85); }
  body.mobile-stack .card textarea, body.mobile-stack input, body.mobile-stack select {
    background: rgba(30,20,70,0.6);
    border-color: rgba(160,120,255,0.4);
  }
}

/* --- Mobile actions sheet --- */
@media (max-width: 768px){
  body.mobile-stack .controls .hide-on-mobile { display: none !important; }
  body.mobile-stack #actionsBtn { display: inline-flex; }

  .actions-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; z-index:9998; }
  .actions-sheet{
    position:fixed; left:0; right:0; bottom:0; background:rgba(26,17,56,.95); border-top:1px solid #3a2a73;
    box-shadow:0 -12px 30px rgba(0,0,0,.35); border-top-left-radius:14px; border-top-right-radius:14px;
    padding:12px; display:none; z-index:9999;
  }
  .actions-sheet .row{ display:flex; flex-wrap:wrap; gap:8px; }
  .actions-sheet .row button{
    flex:1 1 calc(50% - 8px); padding:12px; border-radius:12px; border:1px solid #43307f;
    background:rgba(40,20,80,.9); color:#fff;
  }
}
#actionsBtn{ display:none; }