/* ================================
   Miracle Art Gallery — FINAL CSS
   ================================ */
:root{
  --bg:#ECE8E3;
  --card:rgba(255,255,255,0.88);
  --shadow:0 18px 55px rgba(0,0,0,0.14);
  --border:rgba(0,0,0,0.10);
  --text:rgba(0,0,0,0.78);
  --muted:rgba(0,0,0,0.55);
  --accent:#9b0c14;
}
html,body{
  margin:0;height:100%;overflow:hidden;background:var(--bg);
  font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  color:rgba(0,0,0,0.82);
}
/* make sure joystick always wins */
#joystickContainer,
.nipple-zone,
.nipple {
  z-index: 40 !important;
  pointer-events: auto !important;
}
#c{
  position:fixed;inset:0;width:100vw;height:100vh;display:block;
  background:var(--bg);touch-action:none;outline:none;
}
#overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(236,232,227,0.85);z-index:60;
  transition:opacity 220ms ease, transform 220ms ease;
  opacity:1;transform:translateY(0px);pointer-events:auto;
}
#overlay.is-hidden{opacity:0;transform:translateY(10px);pointer-events:none;}
.card{
  width:min(860px,92vw);border-radius:18px;background:var(--card);
  border:1px solid var(--border);box-shadow:var(--shadow);
  padding:18px 18px 16px;backdrop-filter: blur(10px);
}
.title{font-weight:900;font-size:20px;letter-spacing:0.2px;margin:0 0 8px;color:rgba(0,0,0,0.82);}
.sub{margin:0 0 10px;color:var(--text);font-size:13px;line-height:1.45;}
.tips{margin:0 0 14px;color:var(--muted);font-size:12px;line-height:1.35;white-space:pre-line;}
.actions{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.btn{
  appearance:none;border:1px solid rgba(0,0,0,0.10);border-radius:14px;
  padding:12px 16px;font-weight:900;cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,0.10);
  background:rgba(236,232,227,0.95);color:rgba(0,0,0,0.75);
  transition:transform 120ms ease, filter 120ms ease;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(0.98);} .btn:hover{filter:brightness(1.02);}
.btn-primary{background:var(--accent);color:rgba(255,255,255,0.95);border-color:rgba(0,0,0,0.10);}
.hint{font-size:12px;color:var(--muted);margin-top:8px;}
.error{margin-top:10px;font-size:12px;color:rgba(150,0,0,0.85);display:none;line-height:1.35;}
.error.show{display:block;}
@media (max-width:520px){
  .title{font-size:18px;}
  .actions{justify-content:center;}
  .btn{width:100%;text-align:center;}
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:5;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.22) 78%, rgba(0,0,0,0.35) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0.18));
}