/* RPS Daily — shared styles for the daily games (clean, light, blue accent). */
:root{
  --rpsd-bg:#fffcf2; --rpsd-bg2:#f7f6ef; --rpsd-ink:#1f2430; --rpsd-muted:#6b7280;
  --rpsd-blue:#2563eb; --rpsd-blue-d:#1d4ed8; --rpsd-line:#e5e7eb;
  --rpsd-green:#22c55e; --rpsd-yellow:#eab308; --rpsd-red:#ef4444;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body.rpsd{
  min-height:100vh; background:var(--rpsd-bg); color:var(--rpsd-ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* top bar */
.rpsd-bar{ position:fixed; top:0; left:0; right:0; height:56px; z-index:50; display:flex; align-items:center;
  justify-content:space-between; padding:0 18px; background:#fff; border-bottom:1px solid var(--rpsd-line); }
.rpsd-back,.rpsd-help{ background:none; border:none; cursor:pointer; font-size:24px; line-height:1; color:#4b5563;
  text-decoration:none; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:8px; }
.rpsd-help{ font-weight:700; border:2px solid #d1d5db; font-size:18px; }
.rpsd-back:hover,.rpsd-help:hover{ color:#111827; background:#f3f4f6; }

/* screen container */
.rpsd-main{ padding-top:56px; min-height:100vh; }
.rpsd-screen{ min-height:calc(100vh - 56px); display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:24px 18px 60px; }

/* splash */
.rpsd-splash{ background:var(--rpsd-bg); }
.rpsd-logo{ width:120px; height:120px; object-fit:contain; margin-bottom:18px; }
.rpsd-title{ font-size:clamp(2rem,7vw,2.6rem); font-weight:800; margin:0 0 12px; }
.rpsd-desc{ color:var(--rpsd-muted); max-width:420px; margin:0 0 28px; font-size:1.05rem; line-height:1.5; }
.rpsd-btn{ background:var(--rpsd-blue); color:#fff; border:none; border-radius:14px; padding:14px 34px;
  font-size:1.15rem; font-weight:600; cursor:pointer; transition:transform .12s, background .15s; font-family:inherit; }
.rpsd-btn:hover{ background:var(--rpsd-blue-d); transform:scale(1.04); }
.rpsd-btn:active{ transform:scale(.97); }
.rpsd-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.rpsd-meta{ margin-top:28px; color:#9ca3af; font-size:.85rem; line-height:1.5; }

/* results */
.rpsd-result-title{ font-size:clamp(2rem,7vw,2.6rem); font-weight:800; margin:0 0 28px; }
.rpsd-result-content{ margin-bottom:26px; }
.rpsd-next{ color:var(--rpsd-muted); margin:0 0 18px; white-space:pre-line; }
.rpsd-share{ padding:12px 26px; font-size:1rem; }

/* result dots (rps etc.) */
.rpsd-dots{ display:flex; gap:10px; justify-content:center; }
.rpsd-dot{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:20px; animation:rpsd-pop .4s ease backwards; }
.rpsd-dot.win{ background:var(--rpsd-green); } .rpsd-dot.tie{ background:var(--rpsd-yellow); } .rpsd-dot.lose{ background:var(--rpsd-red); }
@keyframes rpsd-pop{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* help drawer */
.rpsd-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.28); backdrop-filter:blur(2px); z-index:60;
  opacity:0; pointer-events:none; transition:opacity .25s; }
.rpsd-overlay.show{ opacity:1; pointer-events:auto; }
.rpsd-drawer{ position:fixed; left:0; right:0; bottom:0; z-index:70; background:#fff; border-radius:20px 20px 0 0;
  padding:24px 22px 34px; max-height:80vh; overflow-y:auto; transform:translateY(100%); transition:transform .3s cubic-bezier(.34,1.2,.64,1);
  box-shadow:0 -8px 30px rgba(0,0,0,.15); }
.rpsd-drawer.show{ transform:translateY(0); }
.rpsd-drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.rpsd-drawer-head h2{ font-size:1.5rem; font-weight:800; margin:0; }
.rpsd-close{ background:none; border:none; font-size:22px; cursor:pointer; color:#6b7280; }
.rpsd-drawer-body{ color:#374151; line-height:1.6; }
.rpsd-drawer-body ul{ padding-left:20px; } .rpsd-drawer-body li{ margin:8px 0; }

/* toast */
#rpsd-toast{ position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(16px); opacity:0;
  background:#111827; color:#fff; padding:12px 20px; border-radius:12px; font-size:.95rem; font-weight:500;
  z-index:100; transition:opacity .25s, transform .25s; pointer-events:none; box-shadow:0 6px 24px rgba(0,0,0,.3); }
#rpsd-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }