/* ===== BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,sans-serif;background:#0d0d0d;color:#e0e0e0;min-height:100vh}
.container{max-width:600px;margin:0 auto;padding:20px}
h1{text-align:center;font-size:1.8rem;margin-bottom:10px;color:#ff4477}
.subtitle{text-align:center;font-size:.85rem;color:#888;margin-bottom:20px}

/* ===== MODE ===== */
.mode-row{display:flex;gap:8px;margin-bottom:15px}
.mode-btn{flex:1;padding:12px;border:2px solid #333;background:#1a1a1a;color:#aaa;border-radius:8px;cursor:pointer;font-size:.85rem;text-align:center;transition:all .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;min-height:44px}
.mode-btn.active{border-color:#44aaff;background:#1a2a3a;color:#44aaff}
.mode-btn small{display:block;font-size:.65rem;color:#666;margin-top:3px}

/* ===== ROLES ===== */
.role-select{display:flex;gap:10px;margin-bottom:20px}
.role-card{flex:1;background:#1a1a1a;border:2px solid #333;border-radius:12px;padding:12px;text-align:center}
.role-card h4{font-size:.7rem;color:#888;margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}
.role-card select{width:100%;padding:10px;background:#111;border:1px solid #444;color:#e0e0e0;border-radius:6px;font-size:1rem;touch-action:manipulation;min-height:44px}
.role-card.dom-card{border-color:#ff4477}
.role-card.sub-card{border-color:#ffaa00}
.play-boundary{color:#aaa;font-size:.8rem;line-height:1.4;margin:12px 0}
.consequence-toggle{display:flex;align-items:flex-start;gap:8px;color:#aaa;font-size:.8rem;line-height:1.4;margin-top:12px}
.consequence-box{display:none;background:#1a1a1a;border:2px solid #ffaa00;border-radius:12px;padding:16px;margin-bottom:20px}
.consequence-box.show{display:block}
.consequence-box h3{font-size:.95rem;color:#ffaa00;margin-bottom:8px}
.consequence-box p{font-size:.9rem;line-height:1.5;color:#ccc;margin-bottom:12px}
.solo-select{margin-bottom:20px;text-align:center}
.solo-select label{font-size:.75rem;color:#888;text-transform:uppercase;letter-spacing:1px}
.solo-select select{padding:10px;background:#111;border:1px solid #444;color:#e0e0e0;border-radius:6px;font-size:1rem;min-height:44px;margin-top:5px}

/* ===== FILTERS ===== */
.tier-row{display:flex;gap:8px;margin-bottom:15px;flex-wrap:wrap}
.tier-btn{padding:8px 12px;border:1px solid #333;background:#1a1a1a;color:#aaa;border-radius:20px;cursor:pointer;font-size:.75rem;transition:all .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;min-height:44px}
.tier-row.compact{gap:5px}
.tier-row.compact .tier-btn{padding:4px 10px;font-size:.7rem;min-height:30px}
.level-progress{font-size:.75rem;color:#ff6644;margin:-8px 0 12px;min-height:1em}
.tier-btn.active{border-color:#ff4477;color:#ff4477;background:#2a1a1f}
.cat-row{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}

/* ===== DATE FILTER PANEL ===== */
.filter-panel{background:#141414;border:1px solid #2a2a2a;border-radius:16px;padding:14px;margin-bottom:22px;display:flex;flex-direction:column;gap:14px}
.filter-group{--accent:#ff4477;--accent-bg:#2a1a1f}
.filter-group.budget-group{--accent:#44cc88;--accent-bg:#14261d}
.filter-group.time-group{--accent:#44aaff;--accent-bg:#14202e}
.filter-label{font-size:.65rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin-bottom:7px;display:flex;align-items:center;gap:8px}
.filter-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.35}
.filter-group .tier-row{margin-bottom:0;gap:7px}
.filter-group .tier-btn{padding:8px 14px;font-size:.8rem;min-height:38px;border-radius:999px;background:#1c1c1c;border:1px solid #333;color:#bbb;line-height:1.1}
.filter-group .tier-btn small{display:block;font-size:.6rem;opacity:.7;margin-top:2px}
.filter-group .tier-btn:active{transform:scale(.96)}
.filter-group .tier-btn.active{border-color:var(--accent);color:#fff;background:var(--accent-bg);box-shadow:0 0 0 1px var(--accent),0 0 14px -2px var(--accent)}
.fav-toggle{align-self:center;display:flex;align-items:center;gap:8px;padding:9px 20px;min-height:40px;border-radius:999px;border:1px dashed #555;background:transparent;color:#bbb;font-size:.8rem;cursor:pointer;transition:all .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.fav-toggle .fav-icon{filter:grayscale(1);opacity:.6;transition:all .2s}
.fav-toggle.active{border-style:solid;border-color:#ffaa00;color:#ffcc66;background:#2a251a;box-shadow:0 0 14px -2px #ffaa00}
.fav-toggle.active .fav-icon{filter:none;opacity:1}
.cat-btn{padding:8px 12px;border:1px solid #333;background:#1a1a1a;color:#aaa;border-radius:20px;cursor:pointer;font-size:.75rem;transition:all .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;min-height:44px}
.cat-btn.active{border-color:#ffaa00;color:#ffaa00;background:#2a251a}

/* ===== WHEEL ===== */
.wheel-container{position:relative;width:280px;height:280px;margin:0 auto 20px}
.wheel{width:100%;height:100%;border-radius:50%;border:4px solid #333;transition:transform 4s cubic-bezier(.25,.1,.25,1);overflow:hidden}
.wheel-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;background:#1a1a1a;border:3px solid #ff4477;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#ff4477;z-index:10;text-align:center}
.wheel-pointer{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:20px solid #ff4477;z-index:20}

/* ===== BUTTONS ===== */
.spin-btn{display:block;width:100%;padding:16px;background:#ff4477;color:#fff;border:none;border-radius:8px;font-size:1.1rem;cursor:pointer;margin-bottom:20px;transition:all .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;min-height:44px}
.spin-btn:hover{background:#ff6699}
.spin-btn:disabled{background:#444;cursor:not-allowed}

/* ===== RESULT ===== */
.result-box{background:#1a1a1a;border:2px solid #ff4477;border-radius:12px;padding:20px;margin-bottom:20px;display:none}
.result-box.show{display:block}
.result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.result-title{font-size:1.1rem;color:#ff4477;font-weight:bold}
.result-names{font-size:.75rem;color:#888}
.result-body{font-size:.9rem;line-height:1.6;color:#ccc;margin-bottom:15px}
.result-meta{font-size:.8rem;color:#888}
.result-meta span{color:#ffaa00}
.report-btns{display:flex;gap:10px;margin-top:15px}
.report-btn{flex:1;padding:12px;border:none;border-radius:8px;cursor:pointer;font-size:.9rem;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;min-height:44px}
.report-btn.complete{background:#225522;color:#66ff66}
.report-btn.fail{background:#552222;color:#ff6666}
.rate-row{display:flex;gap:10px;justify-content:center;margin-top:12px}
.rate-btn{padding:8px 22px;font-size:1.3rem;background:#1a1a1a;border:1px solid #333;border-radius:20px;cursor:pointer;opacity:.6;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:44px}
.rate-btn.active{opacity:1;border-color:#ff4477;background:#2a1a1f}
.log-rate{display:inline-flex;gap:6px;margin-left:10px;vertical-align:middle}
.log-rate-btn{padding:2px 10px;font-size:1rem;background:#1a1a1a;border:1px solid #333;border-radius:14px;cursor:pointer;opacity:.5;min-height:30px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.log-rate-btn.active{opacity:1;border-color:#ff4477;background:#2a1a1f}
.report-btn.skip{background:#333;color:#ddd}
.report-btn.safeword{background:#552222;color:#ff4444;flex:.5}

/* ===== DICE ===== */
.dice-section{margin-bottom:20px}
.dice-section h3{font-size:.9rem;color:#888;margin-bottom:10px}
.dice-row{display:flex;gap:15px;justify-content:center;margin-bottom:15px}
.die{width:92px;min-height:70px;padding:6px;box-sizing:border-box;text-align:center;background:#1a1a1a;border:2px solid #444;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.8rem;line-height:1.2}
.die-label{text-align:center;font-size:.6rem;color:#666;margin-top:4px}
.dice-col{text-align:center}
.dice-result{text-align:center;font-size:.9rem;color:#ffaa00;margin-bottom:10px}

/* ===== REMOTE ===== */
.remote-section{background:#1a1a1a;border-radius:12px;padding:15px;margin-bottom:20px}
.remote-section h3{font-size:.9rem;color:#888;margin-bottom:10px}
.remote-input{width:100%;padding:10px;background:#111;border:1px solid #333;color:#e0e0e0;border-radius:6px;font-size:.9rem;margin-bottom:10px}
.remote-btn{padding:10px 20px;background:#333;color:#e0e0e0;border:none;border-radius:6px;cursor:pointer;font-size:.85rem;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;min-height:44px}

/* ===== LOG ===== */
.order-log{margin-top:20px}
.order-log h3{font-size:.9rem;color:#888;margin-bottom:10px}
.log-item{background:#1a1a1a;padding:10px;border-radius:8px;margin-bottom:8px;font-size:.8rem}
.log-item .log-status{float:right;font-weight:bold}
.log-item .log-status.done{color:#66ff66}
.log-item .log-status.pending{color:#ffaa00}
.log-item .log-status.failed{color:#ff6666}
.log-item .log-status.safeword{color:#ff4444}
.log-stats{font-size:.85rem;color:#ccc;margin-bottom:10px}
.log-detail{margin-top:6px;color:#aaa;white-space:pre-wrap}
.log-consequence{margin-top:6px;color:#ff9999}
.log-bar{display:flex;gap:8px;margin-top:6px}
.page-link{text-align:center;margin:0 0 14px}
.page-link a{color:#ffaa00;text-decoration:none;font-weight:bold;font-size:.9rem}   

/* ===== WHEEL POLISH ===== */
.wheel-container{width:320px;height:320px;max-width:86vw;max-height:86vw;padding:12px;border-radius:50%;background:radial-gradient(circle,#2a2a2a 0%,#111 100%);box-shadow:0 0 0 3px #ffaa00,0 0 30px rgba(255,68,119,.45),0 10px 40px rgba(0,0,0,.7),inset 0 0 20px rgba(0,0,0,.8);box-sizing:border-box;margin-bottom:28px}
.wheel-container::before{content:"";position:absolute;inset:3px;border-radius:50%;background:repeating-conic-gradient(#ffdd66 0 2deg,transparent 2deg 15deg);-webkit-mask:radial-gradient(circle,transparent 0 calc(100% - 9px),#000 calc(100% - 9px));mask:radial-gradient(circle,transparent 0 calc(100% - 9px),#000 calc(100% - 9px));opacity:.85;animation:rimBlink 1.2s steps(2) infinite;pointer-events:none}
@keyframes rimBlink{50%{opacity:.35}}
.wheel-container::after{content:"";position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.28),transparent 45%),radial-gradient(circle,transparent 55%,rgba(0,0,0,.35) 100%);pointer-events:none;z-index:5}
.wheel{border:none;transition:transform 4s cubic-bezier(.12,.7,.1,1)}
.wheel-center{width:76px;height:76px;background:radial-gradient(circle at 35% 30%,#ff7799,#c4224f 70%);border:4px solid #ffdd66;color:#fff;font-weight:bold;font-size:.85rem;letter-spacing:1px;box-shadow:0 0 14px rgba(255,68,119,.7),inset 0 -4px 8px rgba(0,0,0,.35)}
.wheel-pointer{top:-6px;border-left-width:16px;border-right-width:16px;border-top:30px solid #ffdd66;filter:drop-shadow(0 3px 4px rgba(0,0,0,.7))}
.spin-btn{background:linear-gradient(135deg,#ff4477,#ff7a45);font-weight:bold;letter-spacing:2px;box-shadow:0 4px 18px rgba(255,68,119,.45)}
.spin-btn:hover{background:linear-gradient(135deg,#ff6699,#ff9966);transform:translateY(-1px)}
.spin-btn:active{transform:scale(.98)}
h1{letter-spacing:3px;text-shadow:0 0 18px rgba(255,68,119,.6)}
body.date-page h1{color:#ffcc66;text-shadow:0 0 18px rgba(255,170,0,.55)}
body.date-page .wheel-container{box-shadow:0 0 0 3px #ff88aa,0 0 30px rgba(255,170,0,.4),0 10px 40px rgba(0,0,0,.7),inset 0 0 20px rgba(0,0,0,.8)}

/* ===== DATE PAGE: WHEEL CARD, RESULT CARD, LOG ===== */
body.date-page .wheel-card{background:radial-gradient(ellipse at top,#2a1d22 0%,#161214 60%,#111 100%);border:1px solid #3a2a2f;border-radius:24px;padding:34px 16px 18px;margin-bottom:22px;box-shadow:0 12px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)}
body.date-page .wheel-card .wheel-container{margin-bottom:26px}
body.date-page .wheel-card .spin-btn{margin-bottom:0;border-radius:999px;background:linear-gradient(135deg,#ff6a8a,#ffaa44);color:#2a1010;font-weight:800;box-shadow:0 6px 22px rgba(255,140,90,.4)}
body.date-page .wheel-card .spin-btn:hover{background:linear-gradient(135deg,#ff82a0,#ffbb66)}
body.date-page .wheel-card .spin-btn:disabled{background:#3a3a3a;color:#888;box-shadow:none}

body.date-page .result-box{position:relative;overflow:hidden;background:linear-gradient(160deg,#241a1e 0%,#171315 70%);border:1px solid #5a3a45;border-radius:20px;padding:22px 20px 20px;box-shadow:0 10px 36px rgba(0,0,0,.55),0 0 0 1px rgba(255,170,0,.08);animation:resultIn .45s ease-out}
body.date-page .result-box::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#ff4477,#ffaa00,#44cc88,#44aaff)}
@keyframes resultIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
body.date-page .result-badge{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#ffcc66;background:rgba(255,170,0,.12);border:1px solid rgba(255,170,0,.35);padding:3px 10px;border-radius:999px;margin-bottom:12px}
body.date-page .result-header{flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:12px}
body.date-page .result-title{font-size:1.4rem;line-height:1.2;color:#fff}
body.date-page .result-names{font-size:.75rem;color:#ff88aa;letter-spacing:.5px}
body.date-page .result-body{font-size:.95rem;line-height:1.65;color:#d8d0d2;padding:12px 14px;background:rgba(255,255,255,.03);border-left:3px solid #ff4477;border-radius:0 10px 10px 0;margin-bottom:14px}
body.date-page .result-meta{display:flex;flex-direction:column;gap:6px;font-size:.7rem;letter-spacing:1px;text-transform:uppercase;color:#7d7478}
body.date-page .result-meta span{display:block;color:#ffcc66;font-size:.85rem;letter-spacing:0;text-transform:none}
body.date-page .rate-row{align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid #2c2326}
body.date-page .rate-label{flex:1;font-size:.75rem;color:#8a8084;text-align:left}
body.date-page .rate-btn{border-radius:999px;padding:6px 18px;transition:all .15s}
body.date-page .rate-btn:active{transform:scale(.92)}
body.date-page .rate-btn.active{box-shadow:0 0 14px -2px #ff4477}
body.date-page .report-btn.complete{background:linear-gradient(135deg,#2e8a4e,#47b86a);color:#fff;font-weight:700;border-radius:999px;letter-spacing:.5px;box-shadow:0 4px 16px rgba(71,184,106,.3)}

body.date-page .order-log{background:#141214;border:1px solid #2a2326;border-radius:20px;padding:16px}
body.date-page .order-log h3{font-size:.75rem;font-weight:700;letter-spacing:2px;color:#ffcc66;margin-bottom:12px;display:flex;align-items:center;gap:10px}
body.date-page .order-log h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#ffaa00,transparent);opacity:.35}
body.date-page .log-stats{display:inline-block;font-size:.75rem;color:#bbb;background:#1d1a1c;border:1px solid #2f2a2d;border-radius:999px;padding:4px 14px;margin-bottom:12px}
body.date-page .log-item{position:relative;background:#1b181a;border:1px solid #2a2528;border-left:4px solid #555;border-radius:12px;padding:12px 14px;margin-bottom:10px;font-size:.85rem;line-height:1.4;overflow:hidden}
body.date-page .log-item.st-done{border-left-color:#47b86a}
body.date-page .log-item.st-pending{border-left-color:#ffaa00}
body.date-page .log-item.st-failed{border-left-color:#ff6666}
body.date-page .log-item .log-status{font-size:.6rem;letter-spacing:1.2px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.06)}
body.date-page .log-item .log-status.done{background:rgba(71,184,106,.15)}
body.date-page .log-item .log-status.pending{background:rgba(255,170,0,.15)}
body.date-page .log-item small{display:block;margin-top:3px;font-size:.7rem}
body.date-page .log-rate{display:flex;margin:8px 0 0}
body.date-page .log-rate-btn{border-radius:999px;padding:2px 14px;transition:all .15s}
body.date-page .log-rate-btn:active{transform:scale(.92)}
body.date-page .log-rate-btn.active{box-shadow:0 0 10px -2px #ff4477}
body.date-page .log-detail{margin-top:10px;padding:10px 12px;background:rgba(255,255,255,.03);border-radius:8px;font-size:.8rem}
body.date-page .log-bar .remote-btn{border-radius:999px;background:#242022;border:1px solid #3a3336;font-size:.75rem;padding:8px 16px;min-height:38px}

/* ===== DATE PAGE: ROLES INSIDE FILTER PANEL ===== */
.filter-group.roles-group{--accent:#ffaa00}
.filter-panel .role-select{margin-bottom:0;gap:8px}
.filter-panel .role-card{background:#1c1c1c;border-width:1px;border-radius:14px;padding:9px 10px}
.filter-panel .role-card h4{font-size:.6rem;margin-bottom:5px}
.filter-panel .role-card select{padding:6px 8px;min-height:38px;font-size:.9rem;border-radius:999px;text-align:center}

/* ===== DATE PAGE: SYNC PHONES ===== */
.sync-card{background:#141214;border:1px solid #2a2326;border-radius:16px;padding:12px 16px;margin:0 0 22px}
.sync-card summary{cursor:pointer;font-size:.8rem;font-weight:700;letter-spacing:1px;color:#ffcc66;list-style:none;display:flex;align-items:center;gap:8px;min-height:30px}
.sync-card summary::-webkit-details-marker{display:none}
.sync-dot{width:9px;height:9px;border-radius:50%;background:#555;margin-left:auto}
.sync-dot.on{background:#47b86a;box-shadow:0 0 8px #47b86a}
.sync-help{font-size:.75rem;color:#8a8084;line-height:1.5;margin:10px 0}
.sync-row{display:flex;gap:8px;align-items:center}
.sync-row .remote-input{margin-bottom:0;flex:1;min-width:0;border-radius:999px;padding:10px 14px;text-transform:uppercase;letter-spacing:2px}
.sync-row .remote-btn{border-radius:999px;background:#242022;border:1px solid #3a3336;padding:8px 18px}
.sync-status{font-size:.75rem;color:#888;margin-top:8px}

/* ===== SPICY PAGE (shares date-page look) ===== */
.filter-group.level-group{--accent:#ff4477;--accent-bg:#2a1a1f}
.filter-group.cat-group{--accent:#ffaa00;--accent-bg:#2a251a}
.filter-group .cat-row{margin-bottom:0;gap:7px}
.filter-group .cat-btn{padding:6px 14px;font-size:.78rem;min-height:34px;border-radius:999px;background:#1c1c1c;border:1px solid #333;color:#bbb}
.filter-group .cat-btn:active{transform:scale(.96)}
.filter-group .cat-btn.active{border-color:var(--accent);color:#fff;background:var(--accent-bg);box-shadow:0 0 0 1px var(--accent),0 0 14px -2px var(--accent)}
.filter-group .level-progress{margin:8px 0 0;color:#ff8866}
body.spicy-page .report-btn.fail{background:linear-gradient(135deg,#a82f48,#ff5577);color:#fff;font-weight:700;border-radius:999px;letter-spacing:.5px;box-shadow:0 4px 16px rgba(255,85,119,.3)}
body.spicy-page .solo-select,body.spicy-page .role-select{margin-bottom:16px}
body.spicy-page .dice-section,body.spicy-page .remote-section{background:#141214;border:1px solid #2a2326;border-radius:20px;padding:16px}
body.spicy-page .dice-section h3,body.spicy-page .remote-section h3{color:#ffcc66;letter-spacing:2px;font-size:.8rem}
body.spicy-page .die{border-radius:14px}
body.spicy-page .remote-btn{border-radius:999px}
body.spicy-page .remote-input{border-radius:999px}

/* ===== REMOTE CHAT ===== */
.chat-box{background:#1a1618;border:1px solid #2f2a2d;border-radius:16px;padding:10px 14px;margin:10px 0 16px}
.chat-box summary{cursor:pointer;font-size:.8rem;font-weight:700;letter-spacing:1px;color:#ffcc66;list-style:none;min-height:30px;display:flex;align-items:center;gap:8px}
.chat-box summary::-webkit-details-marker{display:none}
.chat-badge{background:#ff4477;color:#fff;border-radius:999px;font-size:.65rem;padding:2px 8px;margin-left:auto}
.chat-log{height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin:10px 0;padding:8px;background:#111;border-radius:12px}
.chat-msg{max-width:80%;padding:8px 12px;border-radius:16px;font-size:.85rem;line-height:1.35;word-wrap:break-word;overflow-wrap:anywhere}
.chat-msg.me{align-self:flex-end;background:linear-gradient(135deg,#ff4477,#ff7a55);color:#fff;border-bottom-right-radius:4px}
.chat-msg.them{align-self:flex-start;background:#2a2527;color:#eee;border-bottom-left-radius:4px}
.chat-msg.chat-gone{opacity:.6;font-style:italic}
.chat-img{display:block;max-width:100%;max-height:220px;border-radius:10px;cursor:pointer}
.chat-row{display:flex;gap:8px;align-items:center}
.chat-row .remote-input{flex:1;min-width:0;margin-bottom:0}
.chat-photo-btn{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#242022;border:1px solid #3a3336;cursor:pointer;font-size:1.1rem;flex-shrink:0}
.chat-note{font-size:.65rem;color:#666;margin-top:8px}
.chat-viewer{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:12px}
.chat-viewer img{max-width:100%;max-height:100%;border-radius:8px}
.chat-viewer{flex-direction:column;gap:12px}
.chat-viewer img{min-height:0}
.chat-viewer-bar{display:flex;gap:10px;flex-shrink:0}
.chat-viewer{flex-direction:column;gap:12px}
.chat-viewer img{min-height:0}
.chat-viewer-bar{display:flex;gap:10px;flex-shrink:0}
/* ===== ALERTS ===== */
.alert-toggle{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;min-height:40px;border-radius:999px;border:1px dashed #555;background:transparent;color:#bbb;font-size:.8rem;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;margin:4px 0}
.alert-toggle.active{border-style:solid;border-color:#ffaa00;color:#ffcc66;background:#2a251a;box-shadow:0 0 14px -2px #ffaa00}
.alert-banner{position:fixed;left:12px;right:12px;top:12px;z-index:1000;padding:12px 16px;border-radius:14px;background:linear-gradient(135deg,#ff4477,#ff7a55);color:#fff;font-weight:700;font-size:.9rem;text-align:center;box-shadow:0 8px 28px rgba(0,0,0,.6);transform:translateY(-140%);transition:transform .25s;cursor:pointer}
.alert-banner.show{transform:translateY(0)}
/* ===== BOTTOM TAB BAR (spicy page) ===== */
body.spicy-page{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
body.spicy-page[data-tab="wheel"] [data-view]:not([data-view="wheel"]),
body.spicy-page[data-tab="log"] [data-view]:not([data-view="log"]),
body.spicy-page[data-tab="dice"] [data-view]:not([data-view="dice"]),
body.spicy-page[data-tab="cmds"] [data-view]:not([data-view="cmds"]),
body.spicy-page[data-tab="control"] [data-view]:not([data-view="control"]),
body.spicy-page[data-tab="cards"] [data-view]:not([data-view="cards"]),
body.spicy-page[data-tab="vault"] [data-view]:not([data-view="vault"]),
body.spicy-page[data-tab="positions"] [data-view]:not([data-view="positions"]){display:none!important}
.tab-bar{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:rgba(20,18,20,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid #2f2a2d;padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(0,0,0,.5)}
.tab-btn{position:relative;flex:1;min-width:46px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px;max-width:110px;margin:0 auto;padding:5px 2px;border:none;background:transparent;color:#8a8084;font-size:.62rem;letter-spacing:.3px;cursor:pointer;border-radius:12px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:all .15s}
.tab-ico{font-size:1.3rem;line-height:1;filter:grayscale(1);opacity:.7;transition:all .15s}
.tab-btn.active{color:#ffcc66;background:linear-gradient(180deg,rgba(255,68,119,.16),rgba(255,170,0,.08))}
.tab-btn.active .tab-ico{filter:none;opacity:1;transform:translateY(-1px) scale(1.1)}
.tab-btn:active{transform:scale(.94)}
.tab-dot{position:absolute;top:4px;left:calc(50% + 8px);width:9px;height:9px;border-radius:50%;background:#ff4477;box-shadow:0 0 8px #ff4477;display:none}
.tab-dot.on{display:block}
.tab-badge{position:absolute;top:2px;left:calc(50% + 4px);min-width:16px;padding:1px 5px;border-radius:999px;background:#ff4477;color:#fff;font-style:normal;font-size:.6rem;font-weight:700;text-align:center}
body.spicy-page .chat-box{margin-top:6px}
body.spicy-page .chat-box>summary{pointer-events:none}
body.spicy-page .chat-log{height:calc(100vh - 400px);min-height:220px;max-height:520px}
.conn-details{margin-top:14px;background:#111;border:1px solid #2a2326;border-radius:14px;padding:10px 14px}
.conn-details summary{cursor:pointer;font-size:.75rem;color:#8a8084;letter-spacing:.5px;min-height:28px;display:flex;align-items:center}
/* ===== PROOF GATE + VIDEO ===== */
.proof-gate{margin:12px 0;padding:12px;border:1px dashed #ff4477;border-radius:14px;background:rgba(255,68,119,.08);text-align:center}
.proof-gate p{margin:0 0 10px;font-size:.9rem;color:#ffcc66}
.proof-btn{display:inline-block;background:linear-gradient(135deg,#ff4477,#ff7a55);color:#fff;font-weight:700;border-radius:999px;padding:12px 22px;cursor:pointer;border:none}
.proof-gate .proof-status{margin:10px 0 0;font-size:.75rem;color:#8a8084;min-height:1em}
.consequence-box .remote-btn:disabled{opacity:.4;cursor:not-allowed}
video.chat-img{width:100%;background:#000}
.chat-save-link{display:block;margin-top:6px;background:transparent;border:none;color:inherit;opacity:.8;font-size:.7rem;text-decoration:underline;cursor:pointer;padding:2px 0}
/* ===== VIDEO CALL ===== */
.call-btn{width:100%;margin:8px 0}
.proof-call{display:block;margin:10px auto 0;background:transparent;border:1px solid #ff4477;color:#ff9db8}
.call-overlay{position:fixed;inset:0;z-index:200000 !important;background:#000;flex-direction:column;align-items:center;justify-content:flex-end}
.call-remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.call-local{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:12px;width:28vw;max-width:130px;aspect-ratio:3/4;object-fit:cover;border-radius:12px;border:2px solid #fff3;background:#111;z-index:2;transform:scaleX(-1)}
.call-text{position:relative;z-index:2;color:#fff;font-size:1.3rem;font-weight:700;margin:0 0 20px;text-shadow:0 2px 8px #000}
.call-controls{position:relative;z-index:2;display:none;gap:16px;margin-bottom:calc(env(safe-area-inset-bottom) + 28px)}
.call-b{width:58px;height:58px;border-radius:50%;border:none;background:#ffffff30;color:#fff;font-size:1.4rem;cursor:pointer;backdrop-filter:blur(6px)}
.call-in .call-b{width:auto;border-radius:999px;padding:0 26px;font-size:1rem;font-weight:700}
.call-yes{background:#2ea44f}
.call-no{background:#e5334b}
.call-overlay[data-phase=incoming] .call-in,.call-overlay[data-phase=live] .call-act,.call-overlay[data-phase=calling] .call-act,.call-overlay[data-phase=connecting] .call-act{display:flex}
.call-overlay[data-phase=incoming] .call-local,.call-overlay[data-phase=incoming] .call-remote{display:none}
/* ===== COMMAND EDITOR ===== */
.cmd-editor{padding:0 4px 90px}
.cmd-add{width:100%;margin:6px 0 10px;background:linear-gradient(135deg,#ff4477,#ff7a55);color:#fff;font-weight:700}
.cmd-filters{display:flex;gap:8px;margin:8px 0}
.cmd-filters select,.cmd-editor select,.cmd-editor textarea{flex:1;width:100%;box-sizing:border-box;background:#1c181b;color:#eee;border:1px solid #3a3338;border-radius:10px;padding:10px;font:inherit;font-size:.9rem}
.cmd-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;width:100%;text-align:left;background:#1c181b;border:1px solid #2f2a2d;color:#eee;border-radius:12px;padding:10px 12px;margin:0 0 6px;cursor:pointer;font:inherit}
.cmd-t{flex:1 1 100%;font-weight:600;font-size:.92rem}
.cmd-meta{font-size:.72rem;color:#8a8084}
.cmd-tag{font-size:.65rem;font-weight:600;color:#ffcc66;border:1px solid #ffcc6666;border-radius:999px;padding:1px 7px}
.cmd-tag.new{color:#6fe3a0;border-color:#6fe3a066}
.cmd-lbl{display:block;font-size:.75rem;color:#a89ea3;margin:10px 0 0}
.cmd-lbl .remote-input,.cmd-lbl select,.cmd-lbl textarea{display:block;margin-top:4px}
.cmd-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.cmd-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cmd-actions .remote-btn{flex:1 1 40%}
.cmd-del{background:#e5334b!important;color:#fff}
.cmd-restore,.cmd-more{width:100%;margin-top:10px;background:transparent;border:1px solid #3a3338;color:#a89ea3}
.cat-btn.locked{opacity:.5;border-style:dashed}

/* ===== VOICE MEMOS ===== */
.chat-mic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid #3a3338;background:#1c181b;color:#fff;font-size:1.1rem;cursor:pointer}
.chat-mic.rec{background:#e5334b;border-color:#e5334b;animation:vpulse 1s infinite}
@keyframes vpulse{50%{box-shadow:0 0 0 8px rgba(229,51,75,.25)}}
.voice-bar{align-items:center;gap:10px;margin:8px 0;padding:8px 12px;border-radius:12px;background:rgba(229,51,75,.12);border:1px solid #e5334b;font-size:.85rem}
.voice-bar .rec-dot{width:10px;height:10px;border-radius:50%;background:#e5334b}
.voice-hint{flex:1;color:#b9a9ae;font-size:.72rem}
audio.chat-audio{width:100%;min-width:200px;height:40px}

/* ===== DOM CONTROL PAD & LIVE COMMANDS ===== */
.dom-pad-section{padding:0 4px 90px}
.dom-header-card{background:linear-gradient(135deg,#1f1418,#16141a);border:1px solid #3d2a33;border-radius:16px;padding:16px;margin-bottom:16px;text-align:center;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.dom-roles-badge{display:inline-flex;align-items:center;gap:8px;background:#100d10;padding:6px 14px;border-radius:999px;border:1px solid #3a2530;margin-bottom:8px}
.dom-tag{color:#ff4477;font-weight:700;font-size:.85rem}
.dom-arrow{color:#666;font-size:.9rem}
.sub-tag{color:#ffaa00;font-weight:700;font-size:.85rem}
.swap-role-mini{background:transparent;border:none;color:#aaa;cursor:pointer;font-size:1.1rem;padding:0 4px;line-height:1;transition:transform .2s}
.swap-role-mini:hover{transform:rotate(180deg);color:#fff}
.dom-mode-status{font-size:.72rem;color:#8a8084;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
.dom-live-status{font-size:.82rem;color:#ffcc66;font-weight:600;min-height:1.2em}

.dom-card{background:#161315;border:1px solid #2d2429;border-radius:16px;padding:16px;margin-bottom:16px}
.dom-card-title{font-size:.75rem;font-weight:700;letter-spacing:1.5px;color:#ff4477;text-transform:uppercase;margin-bottom:4px}
.dom-card-desc{font-size:.75rem;color:#8a8084;margin-bottom:14px;line-height:1.3}

/* Pacing Grid */
.dom-pacing-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.dom-pace-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 10px;border-radius:14px;border:1px solid #333;background:#1c181b;color:#eee;cursor:pointer;transition:all .15s;touch-action:manipulation;min-height:86px}
.dom-pace-btn:active{transform:scale(.95)}
.dom-btn-ico{font-size:1.4rem;margin-bottom:4px}
.dom-btn-main{font-size:.82rem;font-weight:700;letter-spacing:.8px}
.dom-btn-sub{font-size:.65rem;color:#999;margin-top:2px}

.pace-stroke{border-color:#059669;background:linear-gradient(180deg,rgba(16,185,129,.12),#181517);color:#34d399}
.pace-stroke:hover{background:linear-gradient(180deg,rgba(16,185,129,.22),#181517)}
.pace-tease{border-color:#d97706;background:linear-gradient(180deg,rgba(245,158,11,.12),#181517);color:#fbbf24}
.pace-tease:hover{background:linear-gradient(180deg,rgba(245,158,11,.22),#181517)}
.pace-freeze{border-color:#dc2626;background:linear-gradient(180deg,rgba(239,68,68,.16),#181517);color:#f87171}
.pace-freeze:hover{background:linear-gradient(180deg,rgba(239,68,68,.28),#181517)}
.pace-edge{border-color:#d97706;background:linear-gradient(180deg,rgba(245,158,11,.2),#181517);color:#f59e0b}
.pace-edge:hover{background:linear-gradient(180deg,rgba(245,158,11,.32),#181517)}

.dom-beg-btn{width:100%;padding:12px;border-radius:12px;border:1px solid #7c3aed;background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(147,51,234,.1));color:#c084fc;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .15s;touch-action:manipulation}
.dom-beg-btn:active{transform:scale(.97)}

/* Climax Gate */
.dom-gate-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dom-gate-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 8px;border-radius:14px;border:1px solid #333;background:#1c181b;cursor:pointer;transition:all .15s;touch-action:manipulation;min-height:90px}
.dom-gate-btn:active{transform:scale(.95)}
.gate-ico{font-size:1.5rem;margin-bottom:4px}
.gate-title{font-size:.82rem;font-weight:700;letter-spacing:.8px}
.gate-sub{font-size:.65rem;color:#999;margin-top:2px;text-align:center}

.gate-grant{border-color:#059669;color:#34d399;background:linear-gradient(180deg,rgba(16,185,129,.18),#181517)}
.gate-deny{border-color:#dc2626;color:#f87171;background:linear-gradient(180deg,rgba(239,68,68,.18),#181517)}
.gate-ruin{border-color:#9333ea;color:#c084fc;background:linear-gradient(180deg,rgba(147,51,234,.18),#181517)}
.gate-handsfree{border-color:#2563eb;color:#60a5fa;background:linear-gradient(180deg,rgba(37,99,235,.18),#181517)}

/* Spank & Timers */
.dom-preset-row{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.dom-pill-btn{flex:1 1 20%;padding:10px 8px;border-radius:999px;border:1px solid #3a3237;background:#1e1a1d;color:#bbb;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s;touch-action:manipulation;min-height:40px;text-align:center}
.dom-pill-btn:active{transform:scale(.94)}
.dom-pill-btn.active{border-color:#ff4477;color:#fff;background:#2e1821}
.dom-custom-row{display:flex;gap:8px;align-items:center}
.dom-custom-row .remote-input{flex:1;margin:0}
.dom-custom-row .remote-btn{margin:0;white-space:nowrap}
.dom-pose-select-row{margin-bottom:10px}
.dom-pose-select-row select{width:100%;margin:0}

/* Instant Demands */
.dom-demands-list{display:flex;flex-direction:column;gap:8px}
.dom-demand-item{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:12px;border:1px solid #2d2429;background:#1a1619;color:#ccc;font-size:.78rem;font-weight:500;cursor:pointer;text-align:left;transition:all .15s;touch-action:manipulation}
.dom-demand-item:active{transform:scale(.98);background:#251f23}
.dom-demand-item:hover{border-color:#ff4477;color:#fff}

/* Active Sticky Banner */
.active-cmd-banner{position:fixed;top:10px;left:12px;right:12px;z-index:950;display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:14px;background:rgba(26,20,24,.96);border:2px solid #ff4477;box-shadow:0 8px 30px rgba(0,0,0,.7);backdrop-filter:blur(10px);cursor:pointer;animation:bannerDrop .3s cubic-bezier(.2,.8,.2,1)}
@keyframes bannerDrop{from{transform:translateY(-120%)}to{transform:translateY(0)}}
.banner-pulse{width:10px;height:10px;border-radius:50%;background:#ff4477;box-shadow:0 0 10px #ff4477;animation:pulseDot 1.2s infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}}
.banner-content{flex:1;overflow:hidden}
.banner-label{display:block;font-size:.62rem;color:#888;letter-spacing:1px;font-weight:700}
.banner-title{display:block;font-size:.82rem;color:#fff;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.banner-timer{font-size:.92rem;font-weight:800;color:#ffcc66;font-variant-numeric:tabular-nums}
.banner-btn{padding:6px 14px;border-radius:999px;border:none;background:#ff4477;color:#fff;font-size:.72rem;font-weight:700;cursor:pointer}

/* Fullscreen Dom Command Overlay */
.dom-cmd-overlay{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:20px}
.dom-cmd-overlay.active{display:flex}
.dco-backdrop{position:absolute;inset:0;background:rgba(8,6,8,.94);backdrop-filter:blur(16px)}
.dco-card{position:relative;z-index:2;width:100%;max-width:440px;border-radius:24px;background:linear-gradient(180deg,#1c151a,#130e12);border:2px solid var(--cmd-color,#ff4477);padding:26px 20px;text-align:center;box-shadow:0 0 40px rgba(255,68,119,.25),0 16px 40px rgba(0,0,0,.8);animation:cardPop .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes cardPop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.dco-badge{display:inline-block;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.08);font-size:.65rem;letter-spacing:1.5px;color:#aaa;font-weight:700;margin-bottom:12px}
.dco-title{font-size:1.6rem;font-weight:900;letter-spacing:.5px;margin-bottom:10px;line-height:1.2;text-shadow:0 0 20px currentColor}
.dco-text{font-size:.95rem;line-height:1.5;color:#e0d8dc;margin-bottom:20px}

/* Interactive Spank Area */
.dco-spank-area{background:rgba(255,255,255,.04);border-radius:18px;padding:16px;margin-bottom:20px;border:1px solid rgba(255,255,255,.08)}
.dco-spank-counter{font-size:2rem;font-weight:900;color:#ff4477;font-variant-numeric:tabular-nums;margin-bottom:8px}
.dco-spank-target{width:120px;height:120px;border-radius:50%;border:4px solid #ff4477;background:linear-gradient(135deg,#e11d48,#be123c);color:#fff;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;box-shadow:0 0 25px rgba(225,29,72,.4);transition:transform .1s}
.dco-spank-target.hit{transform:scale(.88)}
.spank-hand{font-size:2.4rem;line-height:1}
.spank-prompt{font-size:.58rem;font-weight:800;letter-spacing:.8px;margin-top:4px}
.dco-spank-phrase{font-size:.78rem;color:#ffcc66;margin-top:10px;min-height:1.2em;font-weight:600}

/* Timer Area */
.dco-timer-area{background:rgba(255,255,255,.04);border-radius:18px;padding:16px;margin-bottom:20px;border:1px solid rgba(255,255,255,.08)}
.dco-timer-clock{font-size:3.2rem;font-weight:900;color:#06b6d4;font-variant-numeric:tabular-nums;line-height:1}
.dco-timer-label{font-size:.7rem;letter-spacing:2px;color:#888;margin-top:6px;font-weight:700}

/* Overlay Actions */
.dco-actions{display:flex;gap:10px}
.dco-btn{flex:1;padding:14px 10px;border-radius:12px;border:none;font-size:.85rem;font-weight:700;cursor:pointer;touch-action:manipulation;transition:all .15s}
.dco-btn:active{transform:scale(.96)}
.dco-obey-btn{background:linear-gradient(135deg,#ff4477,#ff7a55);color:#fff;box-shadow:0 4px 16px rgba(255,68,119,.4)}
.dco-min-btn{background:#2a2428;color:#ccc;border:1px solid #443840}
.dco-dismiss-btn{background:transparent;color:#888;border:1px solid #332a30}

/* ===== TABOO CARD DECKS ===== */
.cards-view{padding:0 4px 90px}
.cards-role-row{display:flex;align-items:center;gap:8px;background:#181316;border:1px solid #33232c;border-radius:14px;padding:8px 12px;margin-bottom:14px}
.cards-role-label{font-size:.72rem;font-weight:700;color:#8a8084;text-transform:uppercase;letter-spacing:.8px;white-space:nowrap}
.cards-role-pill{flex:1;display:flex;align-items:center;gap:6px;background:#120e11;border:1px solid #442a38;border-radius:999px;padding:4px 10px}
.cards-role-pill.dom-pill{border-color:rgba(255,68,119,.5)}
.cards-role-pill.sub-pill{border-color:rgba(255,170,0,.5)}
.crp-icon{font-size:.9rem}
.crp-tag{font-size:.65rem;font-weight:800;letter-spacing:.5px}
.dom-pill .crp-tag{color:#ff4477}
.sub-pill .crp-tag{color:#ffaa00}
.cards-role-pill select{flex:1;background:transparent;border:none;color:#f0e6eb;font-size:.85rem;font-weight:700;outline:none;cursor:pointer;padding:2px 0}
.cards-role-pill select option{background:#1a1418;color:#f0e6eb}
.crp-swap{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#251820;border:1px solid #4d2f3e;border-radius:50%;color:#ff4477;font-size:1.1rem;cursor:pointer;touch-action:manipulation;transition:all .15s;flex-shrink:0}
.crp-swap:active{transform:rotate(180deg) scale(.9)}
.deck-header-card{background:linear-gradient(135deg,#1f1418,#16141a);border:1px solid #3d2a33;border-radius:16px;padding:16px;margin-bottom:16px;text-align:center;box-shadow:0 4px 18px rgba(0,0,0,.4)}
#tabooDeckTitle{font-size:1.15rem;font-weight:800;letter-spacing:1px;margin-bottom:4px}
#tabooDeckSubtitle{font-size:.78rem;color:#8a8084;margin-bottom:10px}
.deck-meta{display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid #2d2429;font-size:.72rem;color:#aaa}
.deck-reshuffle-btn{background:transparent;border:1px solid #443840;color:#ccc;border-radius:999px;padding:4px 12px;font-size:.7rem;cursor:pointer;transition:all .15s}
.deck-reshuffle-btn:active{transform:scale(.95);background:#2a2428}

/* Deck Selector Buttons */
.deck-selector-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:16px}
.deck-tab-btn{display:flex;flex-direction:column;align-items:center;padding:10px 4px;border-radius:12px;border:1px solid #2d2429;background:#181417;color:#888;cursor:pointer;touch-action:manipulation;transition:all .15s}
.deck-tab-btn:active{transform:scale(.94)}
.deck-tab-ico{font-size:1.2rem;margin-bottom:2px}
.deck-tab-name{font-size:.65rem;font-weight:700;letter-spacing:.3px}

.deck-tab-btn.active[data-deck="sex_acts"]{border-color:#f43f5e;background:linear-gradient(180deg,rgba(244,63,94,.2),#181417);color:#fb7185}
.deck-tab-btn.active[data-deck="positions"]{border-color:#a855f7;background:linear-gradient(180deg,rgba(168,85,247,.2),#181417);color:#c084fc}
.deck-tab-btn.active[data-deck="power_worship"]{border-color:#eab308;background:linear-gradient(180deg,rgba(234,179,8,.2),#181417);color:#fde047}
.deck-tab-btn.active[data-deck="toys_sensory"]{border-color:#06b6d4;background:linear-gradient(180deg,rgba(6,182,212,.2),#181417);color:#67e8f9}

/* 3D Card Scene & Flip */
.taboo-card-scene{perspective:1000px;width:100%;max-width:340px;margin:0 auto 16px;cursor:pointer}
.taboo-card-wrapper{position:relative;width:100%;aspect-ratio:3/4;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.34,1.56,.64,1);touch-action:manipulation}
.taboo-card-wrapper.flipped{transform:rotateY(180deg)}

.taboo-card-face{position:absolute;inset:0;width:100%;height:100%;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 12px 36px rgba(0,0,0,.6);border:2px solid #332a30}

/* Card Back */
.taboo-card-back{background:linear-gradient(145deg,#1f1319,#120d11);border-color:#ff4477;overflow:hidden}
.card-back-pattern{position:absolute;inset:8px;border:1px dashed rgba(255,68,119,.3);border-radius:14px;pointer-events:none}
.card-back-logo{font-size:3.5rem;line-height:1;margin-bottom:12px;filter:drop-shadow(0 0 16px rgba(255,68,119,.5))}
.card-back-prompt{font-size:.78rem;font-weight:800;letter-spacing:2px;color:#ff4477;text-transform:uppercase}

/* Card Front */
.taboo-card-front{transform:rotateY(180deg);padding:24px 20px;text-align:center;justify-content:space-between;background:#181318}
.card-front-category{font-size:.68rem;letter-spacing:1.5px;font-weight:800;text-transform:uppercase;color:#aaa;background:rgba(0,0,0,.4);padding:4px 12px;border-radius:999px}
.card-front-text{font-size:1.15rem;font-weight:700;line-height:1.5;color:#fff;margin:auto 0;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.card-front-footer{font-size:.58rem;letter-spacing:1.5px;color:#8a8084;font-weight:700}

.draw-btn{margin-bottom:14px;font-size:1rem;font-weight:800;letter-spacing:1px}

/* Card Action Buttons */
.taboo-card-actions{display:flex;gap:10px}
.taboo-act-btn{flex:1;padding:14px 10px;border-radius:12px;border:none;font-size:.82rem;font-weight:700;cursor:pointer;touch-action:manipulation;transition:all .15s}
.taboo-act-btn:active{transform:scale(.96)}
.accept-btn{background:linear-gradient(135deg,#059669,#10b981);color:#fff;box-shadow:0 4px 16px rgba(16,185,129,.35)}
.forfeit-btn{background:linear-gradient(135deg,#e11d48,#9f1239);color:#fff;box-shadow:0 4px 16px rgba(225,29,72,.35)}


/* ===== TROPHY VAULT (PROOF LOCKER) ===== */
.vault-view{padding:0 4px 90px}
.vault-header-card{background:linear-gradient(135deg,#23161a,#17121c);border:1px solid #4a2a35;border-radius:16px;padding:16px;margin-bottom:14px;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.vh-badge{display:inline-block;font-size:.65rem;font-weight:800;letter-spacing:1.5px;color:#f59e0b;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);padding:3px 10px;border-radius:999px;margin-bottom:6px}
.vault-header-card h3{font-size:1.25rem;font-weight:800;letter-spacing:1px;color:#fbbf24;margin-bottom:4px}
#vaultStats{font-size:.78rem;color:#8a8084;margin-bottom:12px}
.vault-actions-bar{display:flex;justify-content:center}
.vault-add-btn{background:linear-gradient(135deg,#f59e0b,#d97706);color:#111;font-weight:800;border:none;border-radius:999px;padding:8px 18px;font-size:.78rem;cursor:pointer;box-shadow:0 4px 14px rgba(245,158,11,.4);transition:all .15s}
.vault-add-btn:active{transform:scale(.95)}

/* Filter Pills */
.vault-filter-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;margin-bottom:14px}
.vault-filter-btn{flex-shrink:0;background:#181316;border:1px solid #33232c;border-radius:999px;padding:6px 14px;color:#8a8084;font-size:.72rem;font-weight:700;cursor:pointer;transition:all .15s}
.vault-filter-btn.active{background:linear-gradient(135deg,rgba(245,158,11,.2),#181316);border-color:#f59e0b;color:#fbbf24}

/* Empty State */
.vault-empty{text-align:center;padding:40px 20px;background:#161214;border:1px dashed #33232c;border-radius:16px;color:#8a8084}
.ve-icon{font-size:2.8rem;margin-bottom:8px;opacity:.6}
.vault-empty h4{font-size:1rem;color:#eee;margin-bottom:6px}
.vault-empty p{font-size:.8rem;line-height:1.4;max-width:320px;margin:0 auto}

/* Trophy Grid */
.vault-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:600px){.vault-grid{grid-template-columns:repeat(3,1fr)}}

.vault-card{background:#161214;border:1px solid #2d2026;border-radius:14px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:all .2s;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.vault-card:active{transform:scale(.97)}
.vault-thumb-wrap{position:relative;width:100%;aspect-ratio:1/1;background:#0d0a0c;overflow:hidden}
.vault-thumb{width:100%;height:100%;object-fit:cover;display:block}
.vault-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#fff;background:rgba(0,0,0,.35);text-shadow:0 2px 8px rgba(0,0,0,.8)}
.vault-type-badge{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.75);color:#fff;font-size:.58rem;font-weight:800;padding:2px 6px;border-radius:4px;letter-spacing:.5px}
.vault-who-badge{position:absolute;bottom:6px;left:6px;background:linear-gradient(135deg,rgba(245,158,11,.9),rgba(217,119,6,.9));color:#111;font-size:.6rem;font-weight:800;padding:2px 8px;border-radius:999px}
.vault-meta{padding:8px 10px}
.vault-title{font-size:.78rem;font-weight:700;color:#f0e6eb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.vault-date{font-size:.65rem;color:#776d72}

/* Fullscreen Trophy Viewer Modal */
.vault-viewer-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:12px}
.vvm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.vvm-content{position:relative;z-index:2;width:100%;max-width:500px;max-height:90vh;display:flex;flex-direction:column;background:#181316;border:1px solid #3d2532;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.8)}
.vvm-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #2d1d26}
.vvm-titles h3{font-size:.95rem;font-weight:800;color:#fff;margin-bottom:2px}
.vvm-titles p{font-size:.68rem;color:#8a8084}
.vvm-close-btn{background:transparent;border:none;color:#aaa;font-size:1.3rem;cursor:pointer;padding:4px}
.vvm-media-wrap{flex:1;min-height:220px;max-height:60vh;display:flex;align-items:center;justify-content:center;background:#0d0a0c;overflow:hidden}
.vvm-media{max-width:100%;max-height:60vh;object-fit:contain}
.vvm-actions{display:flex;gap:10px;padding:12px 16px;border-top:1px solid #2d1d26}
.vvm-action-btn{flex:1;padding:10px;border-radius:10px;border:none;font-size:.78rem;font-weight:700;cursor:pointer;touch-action:manipulation;transition:all .15s}
.vvm-action-btn.save-btn{background:linear-gradient(135deg,#f59e0b,#d97706);color:#111}
.vvm-action-btn.delete-btn{background:#2a1a20;color:#ff5566;border:1px solid #4a222c}

/* Chat Trophy Button */
.chat-trophy-btn{display:inline-block;margin-top:6px;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.4);color:#fbbf24;font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:999px;cursor:pointer;transition:all .15s}
.chat-trophy-btn:active{transform:scale(.94);background:rgba(245,158,11,.3)}
.chat-media-actions{display:flex;gap:8px;align-items:center;margin-top:6px}


/* ===== TOP NAV & DEVICE PILL ===== */
.top-nav-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.top-nav-bar .page-link{margin:0}
.device-pill{display:flex;align-items:center;gap:6px;background:#181316;border:1px solid #3d2532;border-radius:999px;padding:4px 12px;color:#f0e6eb;font-size:.72rem;font-weight:700;cursor:pointer;touch-action:manipulation;transition:all .15s}
.device-pill:active{transform:scale(.95)}
.device-pill[data-user="shannon"]{border-color:#ff4477;background:linear-gradient(135deg,rgba(255,68,119,.15),#181316)}
.device-pill[data-user="blake"]{border-color:#ffaa00;background:linear-gradient(135deg,rgba(255,170,0,.15),#181316)}
.dp-icon{font-size:.85rem}
.dp-switch{font-size:.8rem;color:#8a8084;margin-left:2px}

/* ===== DEVICE PICKER MODAL ===== */
.device-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px}
.dm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dm-card{position:relative;z-index:2;width:100%;max-width:380px;background:linear-gradient(145deg,#1f1418,#120e14);border:2px solid #ff4477;border-radius:24px;padding:24px 20px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.8)}
.dm-badge{display:inline-block;font-size:.65rem;font-weight:800;letter-spacing:1.5px;color:#ff4477;background:rgba(255,68,119,.15);border:1px solid rgba(255,68,119,.3);padding:3px 10px;border-radius:999px;margin-bottom:8px}
.dm-card h2{font-size:1.35rem;font-weight:800;color:#fff;margin-bottom:6px}
.dm-sub{font-size:.78rem;color:#8a8084;line-height:1.4;margin-bottom:20px}
.dm-buttons{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.dm-btn{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;border:1px solid #33232c;background:#181316;color:#fff;text-align:left;cursor:pointer;touch-action:manipulation;transition:all .15s}
.dm-btn:active{transform:scale(.97)}
.dm-btn.shannon-btn{border-color:rgba(255,68,119,.6);background:linear-gradient(135deg,rgba(255,68,119,.2),#181316)}
.dm-btn.blake-btn{border-color:rgba(255,170,0,.6);background:linear-gradient(135deg,rgba(255,170,0,.2),#181316)}
.dm-btn-ico{font-size:2rem;line-height:1}
.dm-btn-title{display:block;font-size:.95rem;font-weight:800;color:#fff;margin-bottom:2px}
.dm-btn-desc{display:block;font-size:.68rem;color:#aaa}
.dm-close-text{background:transparent;border:none;color:#776d72;font-size:.75rem;cursor:pointer;padding:8px}


/* ===== XP PROGRESSION HEADER WIDGET ===== */
.xp-header-widget{display:flex;align-items:center;gap:10px;background:#181316;border:1px solid #33232c;border-radius:14px;padding:6px 12px;margin-bottom:12px;cursor:pointer;touch-action:manipulation;transition:all .15s}
.xp-header-widget:active{transform:scale(.98);background:#20181c}
.xph-left{display:flex;align-items:center;gap:6px;white-space:nowrap}
.xph-badge{font-size:.7rem;font-weight:800;color:#fbbf24;background:rgba(251,191,36,.15);border:1px solid rgba(251,191,36,.3);padding:2px 8px;border-radius:999px}
.xph-title{font-size:.72rem;font-weight:700;color:#eee}
.xph-nums{font-size:.62rem;font-weight:800;color:#fbbf24;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.25);padding:1px 6px;border-radius:6px}
.xph-bar-wrap{flex:1;height:6px;background:#251920;border-radius:999px;overflow:hidden}
.xph-bar{height:100%;background:linear-gradient(90deg,#f59e0b,#ff4477);border-radius:999px;transition:width .4s ease}
.xph-arrow{font-size:.9rem;color:#776d72}

/* ===== FLOATING XP BADGE NOTIFICATION ===== */
.xp-floater{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:3000;padding:10px 20px;border-radius:999px;font-size:1.05rem;font-weight:800;text-align:center;box-shadow:0 12px 36px rgba(0,0,0,.8);pointer-events:none;animation:xpFloatAnim 2s cubic-bezier(.22,1,.36,1) forwards}
.xp-floater.gain{background:linear-gradient(135deg,#059669,#10b981);color:#fff;border:1px solid #34d399;box-shadow:0 0 20px rgba(16,185,129,.5)}
.xp-floater.loss{background:linear-gradient(135deg,#dc2626,#991b1b);color:#fff;border:1px solid #f87171;box-shadow:0 0 20px rgba(220,38,38,.5)}
.xp-floater small{display:block;font-size:.68rem;font-weight:700;opacity:.9;margin-top:2px;letter-spacing:.5px}

@keyframes xpFloatAnim{
  0%{opacity:0;transform:translate(-50%,20px) scale(.8)}
  15%{opacity:1;transform:translate(-50%,0) scale(1.05)}
  30%{transform:translate(-50%,0) scale(1)}
  75%{opacity:1;transform:translate(-50%,-10px)}
  100%{opacity:0;transform:translate(-50%,-30px) scale(.9)}
}

/* ===== PROGRESSION MODAL ===== */
.progression-modal{position:fixed;inset:0;z-index:2500;display:flex;align-items:center;justify-content:center;padding:12px}
.pm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pm-card{position:relative;z-index:2;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;background:linear-gradient(145deg,#1f1318,#120e14);border:2px solid #ff4477;border-radius:24px;padding:20px 16px;box-shadow:0 20px 60px rgba(0,0,0,.85)}
.pm-header{text-align:center;margin-bottom:16px}
.pm-badge{display:inline-block;font-size:.65rem;font-weight:800;letter-spacing:1.5px;color:#f59e0b;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);padding:3px 10px;border-radius:999px;margin-bottom:6px}
.pm-header h2{font-size:1.35rem;font-weight:800;color:#fff;margin-bottom:4px}
.pm-sub{font-size:.75rem;color:#8a8084}

.pm-person-block{background:#181316;border:1px solid #33232c;border-radius:18px;padding:14px;margin-bottom:14px}
.pm-person-block.blake-block{border-color:rgba(255,170,0,.3)}
.pm-person-block.shannon-block{border-color:rgba(255,68,119,.3)}
.pm-person-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pm-avatar{font-size:1.3rem}
.pm-person-header h3{font-size:1.1rem;font-weight:800;color:#fff}

.pm-roles-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pm-role-box{background:#120e11;border:1px solid #2d1d25;border-radius:12px;padding:10px}
.pm-role-box.dom-box{border-color:rgba(255,68,119,.35)}
.pm-role-box.sub-box{border-color:rgba(255,170,0,.35)}
.pm-role-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.pm-role-tag{font-size:.62rem;font-weight:800;letter-spacing:.5px}
.dom-box .pm-role-tag{color:#ff4477}
.sub-box .pm-role-tag{color:#ffaa00}
.pm-level-num{font-size:.7rem;font-weight:800;color:#fff;background:rgba(255,255,255,.1);padding:1px 6px;border-radius:4px}
.pm-rank-title{font-size:.78rem;font-weight:700;color:#eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px}
.pm-bar-wrap{height:5px;background:#251920;border-radius:999px;overflow:hidden;margin-bottom:4px}
.dom-box .pm-bar{height:100%;background:linear-gradient(90deg,#ff4477,#fb7185);border-radius:999px}
.sub-box .pm-bar{height:100%;background:linear-gradient(90deg,#f59e0b,#fbbf24);border-radius:999px}
.pm-xp-nums{font-size:.65rem;color:#776d72;text-align:right}
.pm-sub-meta{margin-top:6px;padding-top:6px;border-top:1px dashed #2d1d25;display:flex;flex-direction:column;gap:2px}
.pm-streak{font-size:.68rem;font-weight:800;color:#f59e0b}
.pm-stats{font-size:.62rem;color:#8a8084}

.pm-close-btn{width:100%;background:#23181e;border:1px solid #4a2a38;color:#ddd;padding:12px;border-radius:12px;font-weight:700;font-size:.85rem;cursor:pointer;touch-action:manipulation;transition:all .15s}
.pm-close-btn:active{transform:scale(.97)}


/* ===== KAMA SUTRA & PEGGING POSITION VAULT ===== */
.positions-view { padding: 0 4px 90px; }
.pos-header-card {
  background: linear-gradient(135deg, #24141e, #18121f);
  border: 1px solid #4a2840;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
  text-align: center;
  box-shadow: 0 4px 22px rgba(0,0,0,.45);
}
.pos-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #fb7185;
  background: rgba(251,113,133,.15);
  border: 1px solid rgba(251,113,133,.3);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.pos-header-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 4px;
}
.pos-header-card p {
  font-size: .78rem;
  color: #9d8c94;
  margin-bottom: 12px;
}
.pos-search-wrap {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}
.pos-search-input {
  width: 100%;
  background: rgba(14,10,13,.85);
  border: 1px solid #422938;
  border-radius: 999px;
  padding: 9px 16px;
  color: #fff;
  font-size: .82rem;
  outline: none;
  box-sizing: border-box;
  transition: all .2s;
}
.pos-search-input:focus {
  border-color: #fb7185;
  box-shadow: 0 0 12px rgba(251,113,133,.25);
}

/* Category Filter Pills */
.pos-filter-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 12px;
  margin-bottom: 4px;
}
.pos-filter-row::-webkit-scrollbar { display: none; }
.pos-cat-btn {
  flex-shrink: 0;
  background: #181317;
  border: 1px solid #36222e;
  color: #a89aa0;
  font-size: .75rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  transition: all .15s;
}
.pos-cat-btn.active {
  background: linear-gradient(135deg, #ff4477, #e11d48);
  border-color: #ff6699;
  color: #fff;
  box-shadow: 0 2px 10px rgba(255,68,119,.4);
}

/* Empty State */
.positions-empty {
  text-align: center;
  padding: 40px 16px;
  background: #161115;
  border: 1px dashed #36232e;
  border-radius: 18px;
  color: #8a7c83;
}
.pe-icon { font-size: 2.2rem; margin-bottom: 6px; }
.positions-empty h4 { color: #ddd; font-size: 1rem; margin-bottom: 4px; }
.positions-empty p { font-size: .8rem; }

/* Grid of Positions */
.positions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 600px) {
  .positions-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* Card */
.pos-card {
  background: #171216;
  border: 1px solid #33212b;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.pos-card:active {
  transform: scale(.97);
  border-color: #fb7185;
}
.pos-visual-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background: #0f0a0d;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pos-svg-art {
  width: 100%;
  height: 100%;
  display: block;
}
.pos-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card Badges */
.pos-cat-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
}
.pos-cat-badge.pegging { color: #c084fc; border-color: rgba(192,132,252,.5); background: rgba(30,10,40,.8); }
.pos-cat-badge.intimate { color: #fb7185; border-color: rgba(251,113,133,.5); background: rgba(40,10,20,.8); }
.pos-cat-badge.behind { color: #fb923c; border-color: rgba(251,146,60,.5); background: rgba(40,20,10,.8); }
.pos-cat-badge.riding { color: #facc15; border-color: rgba(250,204,21,.5); background: rgba(35,30,10,.8); }

.pos-custom-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: .58rem;
  font-weight: 800;
  background: rgba(16,185,129,.9);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}

.pos-match-badge {
  position: absolute;
  top: 8px;
  right: 42px;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .5px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(245,158,11,.6);
  animation: pulse-match 2s infinite ease-in-out;
}
@keyframes pulse-match {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .85; transform: scale(1.05); }
}

.pos-card-wish-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(15,10,13,.75);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: all .15s;
}
.pos-card-wish-btn.active {
  background: rgba(239,68,68,.3);
  border-color: #ef4444;
  transform: scale(1.08);
}

.pos-meta {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pos-title {
  font-size: .85rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin: 0;
}
.pos-sub {
  font-size: .72rem;
  color: #94858c;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pos-tags-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
  font-size: .64rem;
  color: #7a6e74;
}
.pos-tags-row span {
  background: #120e11;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #281a23;
}
.pos-card-stars {
  color: #fbbf24 !important;
  border-color: rgba(251,191,36,.3) !important;
  font-weight: 700;
}

/* Detail Modal */
.pos-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.pos-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.pos-modal-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #171115;
  border: 1px solid #3d2331;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.85);
}
.pos-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #2a1823;
}
.pos-modal-titles h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 2px;
}
.pos-modal-titles p {
  font-size: .75rem;
  color: #9a8a92;
  margin: 0;
}
.pos-modal-close {
  background: #251620;
  border: 1px solid #4a283e;
  color: #ccc;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
}
.pos-modal-media-wrap {
  position: relative;
  width: 100%;
  max-height: 240px;
  background: #0d090c;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid #2a1823;
}
.pos-modal-media-wrap .pos-svg-art {
  max-height: 240px;
}
.pos-modal-img {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
}
.pos-remove-photo-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(220,38,38,.85);
  border: none;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.pos-modal-body {
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pos-modal-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pos-section-label {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fb7185;
}
.pos-focus-text, .pos-tips-text {
  font-size: .82rem;
  color: #ddd;
  line-height: 1.45;
  background: #120d10;
  border: 1px solid #281722;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0;
}
.pos-tips-text {
  color: #fef08a;
  border-color: rgba(250,204,21,.25);
  background: rgba(35,30,12,.5);
}
.pos-steps-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: .82rem;
  color: #ddd;
  line-height: 1.4;
}
.pos-steps-list li::marker {
  color: #ff4477;
  font-weight: 800;
}
.pos-stars-wrap {
  display: flex;
  gap: 6px;
  font-size: 1.5rem;
  cursor: pointer;
  user-select: none;
  margin-bottom: 4px;
}
.pos-star {
  color: #3f2a35;
  transition: color .15s, transform .15s;
}
.pos-star:hover, .pos-star:active {
  transform: scale(1.15);
}
.pos-star.filled {
  color: #f59e0b;
}
.pos-notes-input {
  width: 100%;
  background: #120d10;
  border: 1px solid #2f1c28;
  border-radius: 10px;
  padding: 8px 10px;
  color: #eee;
  font-size: .78rem;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.pos-notes-input:focus {
  outline: none;
  border-color: #fb7185;
}

.pos-modal-actions {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: #120c10;
  border-top: 1px solid #2a1823;
}
.pos-modal-action-btn {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: .82rem;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: all .15s;
}
.pos-modal-action-btn.wish-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 4px 15px rgba(239,68,68,.35);
}
.pos-modal-action-btn.wish-btn.active {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  box-shadow: 0 4px 20px rgba(245,158,11,.5);
}
.pos-modal-action-btn.photo-btn {
  background: #23181e;
  border: 1px solid #4a283c;
  color: #ddd;
}
.pos-modal-action-btn:active {
  transform: scale(.97);
}


/* ===== PERSISTENT TOP APP BAR (Stationary at top of iPhone) ===== */
.app-top-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90000 !important;
  background: rgba(14, 11, 14, 0.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 68, 119, 0.16);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
  padding-top: calc(8px + env(safe-area-inset-top));
  padding-bottom: 8px;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  margin-bottom: 0;
  box-sizing: border-box;
}
.app-top-header .top-bar-row,
.app-top-header .xp-header-widget {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.app-top-header .xp-header-widget {
  margin-top: 6px;
  margin-bottom: 0;
}
.top-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0;
}
.top-left-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.top-date-link {
  background: #181316;
  border: 1px solid #3d2532;
  border-radius: 999px;
  padding: 4px 10px;
  color: #f59e0b;
  font-size: .72rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  touch-action: manipulation;
  transition: all .15s;
}
.top-date-link:active {
  transform: scale(.95);
  background: #23161e;
}
.top-right-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
.top-tool-btn {
  position: relative;
  background: #181316;
  border: 1px solid #36222e;
  border-radius: 12px;
  width: 38px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  color: #bbb;
  transition: all .15s;
}
.top-tool-btn:active {
  transform: scale(.92);
}
.top-tool-btn.active {
  background: linear-gradient(135deg, #ff4477, #e11d48);
  border-color: #ff6699;
  color: #fff;
  box-shadow: 0 2px 10px rgba(255,68,119,.4);
}
.top-tool-ico {
  font-size: 1.05rem;
  line-height: 1;
}
.top-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 8px rgba(239,68,68,.6);
  border: 1px solid #fff;
}
.top-tool-btn .tab-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff4477;
  display: none;
}
.top-tool-btn .tab-dot.on {
  display: block;
}


/* ===== FLOATING MESSENGER WINDOW (Facebook Messenger Style) ===== */
.messenger-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.messenger-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.messenger-window {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  height: 84vh;
  max-height: 720px;
  display: flex;
  flex-direction: column;
  background: #171115;
  border: 1px solid #3d2331;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.85);
  animation: messengerSlideUp .25s cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 650px) {
  .messenger-overlay {
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 24px 20px 0;
    pointer-events: none;
  }
  .messenger-backdrop {
    pointer-events: auto;
  }
  .messenger-window {
    pointer-events: auto;
    width: 380px;
    height: 560px;
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8);
  }
}
@keyframes messengerSlideUp {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.messenger-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #1c141a;
  border-bottom: 1px solid #2d1a26;
  flex-shrink: 0;
}
.messenger-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.messenger-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4477, #f59e0b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 0 10px rgba(255, 68, 119, .4);
}
.messenger-titles {
  display: flex;
  flex-direction: column;
}
.messenger-title {
  font-size: .92rem;
  font-weight: 800;
  color: #fff;
}
.messenger-status {
  font-size: .65rem;
  font-weight: 700;
  color: #8a7c83;
}
.messenger-status.online { color: #10b981; }
.messenger-status.offline { color: #8a7c83; }

.messenger-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mha-btn {
  background: #251821;
  border: 1px solid #422437;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  color: #ddd;
  cursor: pointer;
  touch-action: manipulation;
  transition: all .15s;
}
.mha-btn:active { transform: scale(.92); }
.mha-btn.call-btn {
  background: rgba(16, 185, 129, .2);
  border-color: rgba(16, 185, 129, .4);
  color: #10b981;
}

/* Connection tray */
.messenger-conn-tray {
  background: #110c10;
  border-bottom: 1px solid #2d1a26;
  padding: 12px 16px;
  font-size: .75rem;
  flex-shrink: 0;
  max-height: 200px;
  overflow-y: auto;
}
.mct-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.mct-label { color: #888; font-weight: 700; }
.mct-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.mct-row .remote-input { flex: 1; margin: 0; }
.mct-backup {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #2d1a26;
}
.mct-backup-lbl { font-size: .68rem; color: #777; display: block; margin-bottom: 4px; }

/* Messages feed inside messenger window */
.messenger-window .chat-log {
  flex: 1;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto;
  padding: 12px;
  margin: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Footer input row */
.messenger-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: #1c141a;
  border-top: 1px solid #2d1a26;
  flex-shrink: 0;
}
.messenger-input {
  flex: 1;
  background: #100b0e !important;
  border: 1px solid #3d2331 !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  color: #fff !important;
  font-size: .85rem !important;
  outline: none;
  margin: 0 !important;
  box-sizing: border-box;
  transition: border-color .15s;
}
.messenger-input:focus {
  border-color: #ff4477 !important;
  box-shadow: 0 0 10px rgba(255, 68, 119, .3);
}
.messenger-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ff4477, #e11d48);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  box-shadow: 0 2px 10px rgba(255, 68, 119, .4);
  transition: transform .15s;
}
.messenger-send-btn:active {
  transform: scale(.9);
}


/* ===== 1-TAP ROLE SELECTOR CARDS ===== */
.role-select {
  width: 100%;
  margin: 8px 0 16px;
  display: flex;
  flex-direction: column;
}
.role-cards-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}
.role-card-btn {
  background: #171115;
  border: 2px solid #2d1c25;
  border-radius: 14px;
  padding: 10px 6px;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 72px;
  touch-action: manipulation;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}
.rcb-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 2px;
}
.rcb-crown {
  font-size: 0.95rem;
  opacity: 0.5;
  transition: all 0.2s;
}
.rcb-dom-badge {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #887a82;
  text-transform: uppercase;
}
.rcb-name {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #a89aa2;
  line-height: 1.15;
  transition: color 0.2s;
}
.rcb-sub-desc {
  font-size: 0.65rem;
  color: #73656d;
  font-weight: 600;
  margin-top: 3px;
  line-height: 1;
}

/* Shannon Active State */
#roleCardShannonDom.active {
  border-color: #ff4477;
  background: linear-gradient(145deg, rgba(255, 68, 119, 0.25), #1d1017);
  box-shadow: 0 4px 18px rgba(255, 68, 119, 0.38);
  transform: translateY(-2px);
}
#roleCardShannonDom.active .rcb-crown {
  opacity: 1;
  filter: drop-shadow(0 0 8px #ff4477);
  transform: scale(1.18);
}
#roleCardShannonDom.active .rcb-dom-badge {
  color: #ff4477;
  font-weight: 900;
}
#roleCardShannonDom.active .rcb-name {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 68, 119, 0.6);
}
#roleCardShannonDom.active .rcb-sub-desc {
  color: #ffb3c6;
  font-weight: 700;
}

/* Blake Active State */
#roleCardBlakeDom.active {
  border-color: #ffaa00;
  background: linear-gradient(145deg, rgba(255, 170, 0, 0.25), #1d1610);
  box-shadow: 0 4px 18px rgba(255, 170, 0, 0.38);
  transform: translateY(-2px);
}
#roleCardBlakeDom.active .rcb-crown {
  opacity: 1;
  filter: drop-shadow(0 0 8px #ffaa00);
  transform: scale(1.18);
}
#roleCardBlakeDom.active .rcb-dom-badge {
  color: #ffaa00;
  font-weight: 900;
}
#roleCardBlakeDom.active .rcb-name {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 170, 0, 0.6);
}
#roleCardBlakeDom.active .rcb-sub-desc {
  color: #ffd699;
  font-weight: 700;
}

/* Center Swap Button */
.role-swap-center-btn {
  background: #23161e;
  border: 1.5px solid #482637;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 3px 12px rgba(0,0,0,0.5);
  box-sizing: border-box;
  flex-shrink: 0;
}
.rsc-arrow {
  font-size: 1.15rem;
  font-weight: 900;
  color: #ff85a2;
  line-height: 1;
}
.rsc-label {
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #a87e91;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 2px;
}
.role-swap-center-btn:active {
  transform: scale(0.88) rotate(180deg);
  background: #ff4477;
  border-color: #ff4477;
  box-shadow: 0 0 14px rgba(255, 68, 119, 0.6);
}
.role-swap-center-btn:active .rsc-arrow,
.role-swap-center-btn:active .rsc-label {
  color: #fff;
}

/* ===== CLIMAX SESSION BAR (WHEEL VIEW) ===== */
.climax-session-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 6px 10px;
  background: rgba(20, 14, 18, 0.7);
  border: 1px solid #331d2a;
  border-radius: 999px;
}
.climax-status-pill {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 4px 10px;
  border-radius: 999px;
  transition: all .2s;
}
.climax-status-pill.locked {
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: #f87171;
}
.climax-status-pill.unlocked {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
  animation: climaxPulse 2s infinite ease-in-out;
}
@keyframes climaxPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .85; transform: scale(1.02); }
}
.session-reset-btn {
  background: transparent;
  border: 1px solid #442a38;
  color: #887a82;
  font-size: .62rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  transition: all .15s;
}
.session-reset-btn:hover, .session-reset-btn:active {
  color: #ff85a2;
  border-color: #ff4477;
  background: rgba(255, 68, 119, 0.1);
}

/* ===== DOM PAD WHEEL CLIMAX GATE ===== */
.dom-wheel-gate-box {
  background: #140d12;
  border: 1px solid #381f2c;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 14px;
}
.dom-wheel-gate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.gate-status-badge {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 4px 10px;
  border-radius: 8px;
}
.gate-status-badge.locked {
  background: #3b1117;
  border: 1px solid #ef4444;
  color: #fca5a5;
}
.gate-status-badge.unlocked {
  background: #064e3b;
  border: 1px solid #10b981;
  color: #6ee7b7;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
}
.gate-spins-info {
  font-size: .68rem;
  color: #a3959c;
}
.dom-wheel-gate-buttons {
  display: flex;
  gap: 8px;
}
.dom-toggle-gate-btn {
  flex: 2;
  padding: 10px;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
  border: none;
  touch-action: manipulation;
  transition: all .15s;
}
.dom-toggle-gate-btn.unlock-mode {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.35);
}
.dom-toggle-gate-btn.lock-mode {
  background: linear-gradient(135deg, #b91c1c, #ef4444);
  color: #fff;
  box-shadow: 0 3px 12px rgba(239, 68, 68, 0.35);
}
.dom-toggle-gate-btn:active {
  transform: scale(.96);
}
.dom-reset-session-btn {
  flex: 1;
  background: #20171d;
  border: 1px solid #442a38;
  color: #d1b8c6;
  padding: 10px 8px;
  border-radius: 10px;
  font-size: .68rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: all .15s;
}
.dom-reset-session-btn:active {
  background: #ff4477;
  color: #fff;
  border-color: #ff4477;
  transform: scale(.96);
}


/* ================================================================
   3D INTIMATE COMMAND DICE STUDIO
   ================================================================ */
.dice-view {
  padding: 0 4px 90px;
}
.dice-hero-card {
  background: linear-gradient(135deg, #1f121a, #130e18);
  border: 1px solid #3d2332;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.dh-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid rgba(244, 63, 94, 0.3);
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.dice-hero-card h2 {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 4px;
}
.dh-desc {
  font-size: .78rem;
  color: #a89aa2;
  margin-bottom: 12px;
}
.dice-current-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #3d2332;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: all .15s;
}
.dice-current-role-pill:active {
  transform: scale(.95);
  background: rgba(255, 68, 119, 0.15);
  border-color: #ff4477;
}
.dcr-dom { color: #ff4477; }
.dcr-arrow { color: #ffaa00; font-weight: 900; }
.dcr-sub { color: #ffd699; }

/* 3D Dice Stage */
.dice-stage {
  background: #140d12;
  border: 1px solid #2a1823;
  border-radius: 20px;
  padding: 18px 12px;
  margin-bottom: 16px;
  perspective: 900px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
}
.dice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.die-cube-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.die-badge {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .8px;
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 4px;
}
.badge-who {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
}
.badge-action {
  background: rgba(244, 63, 94, 0.2);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.4);
}
.badge-target {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.db-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* 3D Die Cube */
.die-cube {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  min-height: 96px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
  text-align: center;
  transform-style: preserve-3d;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  -webkit-user-select: none;
}
.die-pip-corner {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.die-pip-corner.top-left { top: 7px; left: 7px; }
.die-pip-corner.bottom-right { bottom: 7px; right: 7px; }

.die-who {
  background: linear-gradient(145deg, #24142a, #150a1b);
  border: 2px solid #a855f7;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  color: #f3e8ff;
}
.die-action {
  background: linear-gradient(145deg, #2a111b, #190911);
  border: 2px solid #f43f5e;
  box-shadow: 0 6px 20px rgba(244, 63, 94, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  color: #ffe4e6;
}
.die-target {
  background: linear-gradient(145deg, #2a1f10, #181108);
  border: 2px solid #f59e0b;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  color: #fef3c7;
}

.die-inner {
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.25;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}
.die-col-label {
  font-size: .56rem;
  font-weight: 700;
  color: #786972;
  letter-spacing: .5px;
  margin-top: 6px;
  text-transform: uppercase;
}

/* Animations: Tumbling Physics & Landing Flare */
@keyframes diceTumble {
  0% { transform: rotateX(0deg) rotateY(0deg) scale(1); }
  25% { transform: rotateX(180deg) rotateY(90deg) scale(0.92); }
  50% { transform: rotateX(360deg) rotateY(270deg) scale(0.88); }
  75% { transform: rotateX(540deg) rotateY(360deg) scale(0.92); }
  100% { transform: rotateX(720deg) rotateY(540deg) scale(1); }
}
@keyframes diceBounceLanded {
  0% { transform: scale(0.85); }
  50% { transform: scale(1.08); filter: brightness(1.3); }
  100% { transform: scale(1); filter: brightness(1); }
}
.dice-stage.rolling .die-cube {
  animation: diceTumble 0.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.dice-stage.landed .die-cube {
  animation: diceBounceLanded 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Roll Button */
.dice-roll-main-btn {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #e11d48, #ff4477);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(225, 29, 72, 0.45);
  touch-action: manipulation;
  transition: all 0.15s;
}
.dice-roll-main-btn:active {
  transform: scale(0.97);
}
.dice-roll-main-btn.rolling {
  opacity: 0.8;
  pointer-events: none;
}
.drb-icon { font-size: 1.25rem; }
.drb-sparkle { font-size: 1rem; opacity: .8; }

/* Result Showcase Card */
.dice-result-showcase {
  background: linear-gradient(145deg, #1b1218, #110c10);
  border: 2px solid #ff4477;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  display: none;
  margin-bottom: 24px;
}
.dice-result-showcase.show {
  display: block;
  animation: fadeInUp 0.3s ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.drs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.drs-badge {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #ff85a2;
  text-transform: uppercase;
}
.drs-time {
  font-size: .65rem;
  color: #77656f;
}
.drs-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.drs-tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
}
.drs-tag.tag-who {
  background: rgba(168, 85, 247, 0.25);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.45);
}
.drs-tag.tag-action {
  background: rgba(244, 63, 94, 0.25);
  color: #fda4af;
  border: 1px solid rgba(244, 63, 94, 0.45);
}
.drs-tag.tag-target {
  background: rgba(245, 158, 11, 0.25);
  color: #fde68a;
  border: 1px solid rgba(245, 158, 11, 0.45);
}
.dice-result-text {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 16px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.dice-result-text.jackpot {
  color: #fbbf24;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.6);
}
.drs-actions {
  display: flex;
  gap: 8px;
}
.drs-btn {
  flex: 1;
  padding: 10px 8px;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  border: none;
  touch-action: manipulation;
  transition: all .15s;
}
.drs-btn:active {
  transform: scale(0.96);
}
.drs-done-btn {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.35);
}
.drs-reroll-btn {
  background: #251820;
  border: 1px solid #48283a;
  color: #ff85a2;
}
.drs-chat-btn {
  background: #191c28;
  border: 1px solid #283a54;
  color: #60a5fa;
}

/* ===== DATE WHEEL MODERN LUXURY MATCHING STYLES ===== */
.top-date-link.spicy-link {
  color: #ff4477;
  border-color: #ff4477;
  background: linear-gradient(135deg, rgba(255, 68, 119, 0.16), #181316);
  box-shadow: 0 0 14px rgba(255, 68, 119, 0.25);
}
.date-hero-card {
  text-align: center;
  margin: 6px 0 16px;
  padding: 18px 14px;
  background: radial-gradient(ellipse at top, #2e2019 0%, #171214 70%);
  border: 1px solid #4a3424;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,200,100,0.18);
}
.date-hero-card .dh-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(255,170,0,0.22), rgba(255,100,150,0.12));
  border: 1px solid #ffaa00;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #ffcc66;
  text-transform: uppercase;
  margin-bottom: 8px;
  box-shadow: 0 0 14px rgba(255,170,0,0.3);
}
.date-hero-card h1 {
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #ffcc66;
  text-shadow: 0 0 20px rgba(255,170,0,0.5);
  margin: 0 0 4px;
}
.date-hero-card .dh-subtitle {
  font-size: 0.82rem;
  color: #a89aa2;
  margin: 0;
  font-weight: 500;
}
body.date-page .spin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  font-size: 0.92rem;
  letter-spacing: 1px;
}
body.date-page .spin-btn .drb-icon {
  font-size: 1.25rem;
}
body.date-page .spin-btn .drb-sparkle {
  font-size: 1rem;
}
body.date-page .sync-card {
  background: #171316;
  border: 1px solid #36242c;
  border-radius: 20px;
  padding: 16px;
  margin-top: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
body.date-page .sync-card summary {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffcc66;
  cursor: pointer;
  list-style: none;
}
body.date-page .sync-card summary::-webkit-details-marker {
  display: none;
}

/* ================================================================
   NETLIFY OVERLAY & BADGE SUPPRESSION
   Completely removes Netlify floating badge, feedback drawer, and
   injected preview widgets so they never block buttons or tabs.
   ================================================================ */
#netlify-badge,
.netlify-badge,
[data-netlify-badge],
[data-netlify-drawer],
#netlify-feedback-drawer,
div[id^="netlify-"],
div[class*="netlify-"],
div[data-netlify-preview],
div[data-netlify-feedback],
div[id*="netlify-collaborative"],
iframe[id*="netlify"],
iframe[src*="netlify"],
a[href*="netlify.com"][style*="fixed"],
a[href*="netlify.com"][style*="absolute"],
a[href*="netlify.app"][style*="fixed"],
a[href*="netlify.app"][style*="absolute"],
div[style*="z-index"][style*="bottom"] a[href*="netlify"],
div[style*="z-index"][style*="fixed"] a[href*="netlify"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: -99999px !important;
  left: -99999px !important;
  width: 0 !important;
  height: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  z-index: -9999 !important;
}

/* Ensure bottom tab bar and floating elements stay on top and clickable */
.tab-bar {
  z-index: 99999 !important;
}
.active-cmd-banner,
.messenger-overlay,
.device-modal,
.progression-modal {
  z-index: 100000 !important;
}
.dom-cmd-overlay {
  z-index: 250000 !important;
}

body.date-page {
  padding-top: calc(64px + env(safe-area-inset-top)) !important;
  padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
}
body.spicy-page {
  padding-top: calc(112px + env(safe-area-inset-top)) !important;
  padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
}

/* Submissive Waiting / Locked Spin Button */
.spin-btn.sub-locked,
.spin-btn:disabled.sub-locked {
  background: linear-gradient(135deg, #241a20, #161214) !important;
  border: 1px dashed #6b334a !important;
  color: #bfadb7 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.9 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.6px !important;
  padding: 14px 16px !important;
}
.spin-btn.sub-locked .drb-icon {
  font-size: 1.15rem !important;
  opacity: 0.85 !important;
}

/* ===== PROGRESSION MODAL TABS & LEVEL REWARDS ===== */
.pm-tab-switcher {
  display: flex;
  gap: 8px;
  background: #140e13;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid #33232c;
  margin-bottom: 14px;
}
.pm-tab-btn {
  flex: 1;
  padding: 8px 4px;
  border: none;
  background: transparent;
  color: #8a8084;
  font-size: .78rem;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  transition: all .15s;
}
.pm-tab-btn.active {
  background: linear-gradient(135deg, #ff4477, #e11d48);
  color: #fff;
  box-shadow: 0 2px 10px rgba(255, 68, 119, .35);
}
.pm-reward-toggles {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.pm-reward-toggle-btn {
  flex: 1;
  padding: 8px 6px;
  background: #181316;
  border: 1px solid #33232c;
  border-radius: 12px;
  color: #aaa;
  font-size: .74rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: all .15s;
}
.pm-reward-toggle-btn.active[data-track="dom"] {
  border-color: #ff4477;
  background: linear-gradient(135deg, rgba(255, 68, 119, .2), #181316);
  color: #fb7185;
}
.pm-reward-toggle-btn.active[data-track="sub"] {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, .2), #181316);
  color: #fbbf24;
}
.pm-rewards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 4px;
}
.pm-reward-card {
  position: relative;
  background: #141014;
  border: 1px solid #2a1f26;
  border-radius: 14px;
  padding: 12px;
  transition: all .2s;
}
.pm-reward-card.unlocked {
  border-color: #ff4477;
  background: linear-gradient(135deg, rgba(255, 68, 119, .08), #161016);
  box-shadow: 0 4px 16px rgba(255, 68, 119, .12);
}
.pm-reward-card.unlocked.sub-card {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, .08), #161016);
  box-shadow: 0 4px 16px rgba(245, 158, 11, .12);
}
.pm-reward-card.locked {
  opacity: .55;
  filter: grayscale(.6);
}
.pm-reward-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}
.pm-reward-lvl {
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: #251b22;
  color: #eee;
}
.pm-reward-card.unlocked .pm-reward-lvl {
  background: #ff4477;
  color: #fff;
}
.pm-reward-card.unlocked.sub-card .pm-reward-lvl {
  background: #f59e0b;
  color: #111;
}
.pm-reward-kind {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #8a8084;
}
.pm-reward-title {
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pm-reward-desc {
  font-size: .78rem;
  color: #bfb2b8;
  line-height: 1.45;
  margin-bottom: 10px;
}
.pm-reward-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, .08);
}
.pm-reward-status {
  font-size: .68rem;
  font-weight: 700;
  color: #888;
}
.pm-reward-card.unlocked .pm-reward-status {
  color: #4ade80;
}
.pm-reward-redeem-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  transition: all .15s;
  background: linear-gradient(135deg, #ff4477, #f43f5e);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 68, 119, .4);
}
.pm-reward-redeem-btn:active {
  transform: scale(.95);
}
.pm-reward-redeem-btn.sub-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #111;
  box-shadow: 0 2px 8px rgba(245, 158, 11, .4);
}
.pm-reward-redeem-btn:disabled {
  background: #251b22;
  color: #666;
  box-shadow: none;
  cursor: not-allowed;
  opacity: .7;
}

/* ===== TONIGHT'S SESSION RECAP & SOUVENIR MODAL ===== */
.session-recap-modal {
  position: fixed;
  inset: 0;
  z-index: 200000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.srm-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(150deg, #24141d, #140c12, #0d070b);
  border: 2px solid #f59e0b;
  border-radius: 24px;
  padding: 22px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9);
  text-align: center;
}
.srm-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: #ff4477;
  background: rgba(255, 68, 119, 0.15);
  border: 1px solid rgba(255, 68, 119, 0.35);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.srm-title {
  font-size: 1.45rem;
  font-weight: 900;
  color: #fff;
  margin: 0 0 4px 0;
  letter-spacing: 1px;
}
.srm-subtitle {
  font-size: 0.78rem;
  color: #a89ca2;
  margin-bottom: 16px;
}
.srm-vibe-box {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(255, 68, 119, 0.1));
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.srm-vibe-header {
  font-size: 0.65rem;
  font-weight: 800;
  color: #f59e0b;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}
.srm-vibe-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}
.srm-vibe-desc {
  font-size: 0.75rem;
  color: #c4b6bc;
  font-style: italic;
  line-height: 1.35;
}
.srm-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.srm-stat-tile {
  background: #160d14;
  border: 1px solid #2d1a24;
  border-radius: 14px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.srm-stat-ico {
  font-size: 1.5rem;
  margin-bottom: 4px;
}
.srm-stat-num {
  font-size: 1.35rem;
  font-weight: 900;
  color: #fff;
}
.srm-stat-lbl {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #9e8f96;
  margin-top: 2px;
}
.srm-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.srm-btn {
  border-radius: 14px;
  padding: 13px;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.srm-btn:active {
  transform: scale(0.97);
}
.srm-btn-vault {
  background: linear-gradient(135deg, #f59e0b, #ff4477);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 68, 119, 0.4);
}
.srm-btn-reset {
  background: #20131b;
  color: #c4b6bc;
  border: 1px solid #3d2433;
}
.srm-btn-close {
  background: transparent;
  color: #8a8084;
  padding: 8px;
  font-size: 0.85rem;
}

/* ===== SEXUAL TROPHY LEVEL REWARDS STYLING ===== */
.pm-reward-card.trophy-card {
  border: 1.5px solid rgba(245, 158, 11, 0.5) !important;
  background: linear-gradient(145deg, #24141d, #1a0e17) !important;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.12);
}
.pm-reward-card.trophy-card.unlocked {
  border-color: #f59e0b !important;
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.28);
}
.pm-reward-kind.trophy-kind {
  color: #f59e0b !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  background: rgba(245, 158, 11, 0.15) !important;
  font-weight: 800;
}
.pm-reward-redeem-btn.trophy-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #1a0f02 !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4) !important;
}
.pm-reward-redeem-btn.trophy-btn:active {
  transform: scale(0.96);
}

/* Partner Locked Reward Cards */
.pm-reward-card.partner-card {
  opacity: 0.85;
}
.pm-reward-redeem-btn.partner-locked {
  background: #181216 !important;
  color: #7a6e74 !important;
  border: 1px solid #33232c !important;
  cursor: not-allowed !important;
  opacity: 0.65 !important;
  box-shadow: none !important;
}

/* ===== RANDOM CRITICAL WHEEL MULTIPLIERS (2X / 3X) ===== */
.result-multiplier-banner {
  border-radius: 14px;
  padding: 10px 14px;
  margin: 8px 0 14px 0;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1.25;
}
.result-multiplier-banner .rmb-sub {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  opacity: 0.9;
}
.result-multiplier-banner.mult-2x {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(234, 179, 8, 0.38));
  border: 2px solid #f59e0b;
  color: #fef08a;
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.55), inset 0 0 12px rgba(245, 158, 11, 0.2);
  animation: pulseGold 1.6s infinite ease-in-out;
}
.result-multiplier-banner.mult-3x {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.35), rgba(245, 158, 11, 0.35));
  border: 2px solid #ff4477;
  color: #ffffff;
  box-shadow: 0 0 32px rgba(255, 68, 119, 0.75), inset 0 0 16px rgba(245, 158, 11, 0.3);
  animation: pulseCrit 1.1s infinite ease-in-out;
}
.result-box.crit-2x {
  border: 2.5px solid #f59e0b !important;
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.45) !important;
}
.result-box.crit-3x {
  border: 3px solid #ff4477 !important;
  box-shadow: 0 0 45px rgba(255, 68, 119, 0.65), inset 0 0 20px rgba(255, 68, 119, 0.25) !important;
}
.result-box.crit-shake {
  animation: critShake 0.45s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes critShake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}
@keyframes pulseGold {
  0%, 100% { transform: scale(1); box-shadow: 0 0 18px rgba(245, 158, 11, 0.45); }
  50% { transform: scale(1.02); box-shadow: 0 0 30px rgba(245, 158, 11, 0.75); }
}
@keyframes pulseCrit {
  0%, 100% { transform: scale(1); box-shadow: 0 0 24px rgba(255, 68, 119, 0.6); }
  50% { transform: scale(1.03); box-shadow: 0 0 42px rgba(255, 68, 119, 0.95), 0 0 20px rgba(245, 158, 11, 0.6); }
}
.log-mult-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.log-mult-badge.mult-2x {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid #f59e0b;
  color: #fef08a;
}
.log-mult-badge.mult-3x {
  background: rgba(255, 68, 119, 0.25);
  border: 1px solid #ff4477;
  color: #ff80a0;
}

/* ===== 1-TAP SOLO PLAYER SELECTOR CARDS ===== */
.solo-select {
  width: 100%;
  margin: 8px 0 16px;
  text-align: center;
}
.solo-cards-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.solo-card-btn {
  background: #171115;
  border: 2px solid #2d1c25;
  border-radius: 14px;
  padding: 12px 10px;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.solo-card-btn:active {
  transform: scale(0.97);
}
.solo-card-btn.active {
  background: linear-gradient(145deg, #2a1622, #1b0e16);
  border-color: #ff4477;
  box-shadow: 0 4px 20px rgba(255, 68, 119, 0.35);
}
.solo-card-btn .scb-avatar {
  font-size: 1.5rem;
  line-height: 1;
}
.solo-card-btn .scb-name {
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
}
.solo-card-btn .scb-sub {
  font-size: 0.72rem;
  color: #a89ca2;
  font-weight: 600;
}
.solo-card-btn.active .scb-sub {
  color: #ff80a0;
}

/* Strict CSS mode visibility for Solo vs Duo/Remote */
body[data-mode="solo"] #roleSelect {
  display: none !important;
}
body[data-mode="solo"] #soloSelect {
  display: block !important;
}
body[data-mode="duo"] #soloSelect,
body[data-mode="remote"] #soloSelect {
  display: none !important;
}
body[data-mode="duo"] #roleSelect,
body[data-mode="remote"] #roleSelect {
  display: flex !important;
}

/* ===== COMMAND RARITY SYSTEM (COMMON -> MYTHIC) ===== */
.result-rarity-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  transition: all 0.3s ease;
}
.rarity-common {
  background: rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #cbd5e1;
}
.rarity-uncommon {
  background: rgba(34, 197, 94, 0.18);
  border: 1.5px solid #22c55e;
  color: #4ade80;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.3);
}
.rarity-rare {
  background: rgba(168, 85, 247, 0.22);
  border: 1.5px solid #a855f7;
  color: #c084fc;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.45);
}
.rarity-epic {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(234, 179, 8, 0.3));
  border: 2px solid #f59e0b;
  color: #fde047;
  box-shadow: 0 0 26px rgba(245, 158, 11, 0.65);
  animation: pulseGold 1.5s infinite ease-in-out;
}
.rarity-mythic {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.35), rgba(245, 158, 11, 0.35));
  border: 2px solid #ff4477;
  color: #ffffff;
  box-shadow: 0 0 35px rgba(255, 68, 119, 0.8), 0 0 15px rgba(245, 158, 11, 0.5);
  animation: pulseCrit 1.1s infinite ease-in-out;
}

/* Card Glows based on Rarity */
.result-box.glow-common {
  border-color: #475569 !important;
}
.result-box.glow-uncommon {
  border-color: #22c55e !important;
  box-shadow: 0 0 25px rgba(34, 197, 94, 0.35) !important;
}
.result-box.glow-rare {
  border-color: #a855f7 !important;
  box-shadow: 0 0 32px rgba(168, 85, 247, 0.45) !important;
}
.result-box.glow-epic {
  border-color: #f59e0b !important;
  box-shadow: 0 0 40px rgba(245, 158, 11, 0.6) !important;
}
.result-box.glow-mythic {
  border-color: #ff4477 !important;
  box-shadow: 0 0 50px rgba(255, 68, 119, 0.75), inset 0 0 20px rgba(255, 68, 119, 0.25) !important;
}

.log-rarity-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 5px;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ===== DOM AWAITING SUB ACTION STATUS BANNER ===== */
.dom-waiting-status {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(255, 68, 119, 0.15));
  border: 1.5px solid rgba(245, 158, 11, 0.5);
  border-radius: 14px;
  padding: 12px 16px;
  margin-top: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.dom-waiting-status .dws-icon {
  font-size: 1.6rem;
  line-height: 1;
}
.dom-waiting-status .dws-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.82rem;
  color: #c4b6bc;
  line-height: 1.35;
}
.dom-waiting-status .dws-text strong {
  font-size: 0.92rem;
  color: #f59e0b;
  letter-spacing: 0.5px;
}

/* ===== DOM QUICK POSE PILLS ===== */
.dom-quick-poses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
}
.dqp-btn {
  background: #191217;
  border: 1px solid #3d2433;
  color: #c4b6bc;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.dqp-btn:active {
  transform: scale(0.96);
}
.dqp-btn.active {
  background: linear-gradient(135deg, rgba(255,68,119,0.3), rgba(245,158,11,0.25));
  border-color: #ff4477;
  color: #fff;
  box-shadow: 0 2px 12px rgba(255, 68, 119, 0.35);
}