/* Pokopia Theme — bright cozy meadow, Ditto & Drifloon colours */
:root {
  --bg:#d4efc8; --fg:#2d1f5e; --muted:#6b5a8a; --card:#fff;
  --border:#b5d9a0; --btn:#7c4dbd; --btn-fg:#fff;
  --shadow:0 6px 24px rgba(100,60,180,.15);
}

/* Sky-to-meadow gradient background */
html,body {
  background:linear-gradient(180deg,#b8e4f9 0%,#d4efc8 55%,#a8d88a 100%) !important;
  background-attachment:fixed !important;
  color:#2d1f5e !important;
}

/* Clouds drifting across the top */
body::before {
  content:'';position:fixed;top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(ellipse 120px 50px at 12% 8%,rgba(255,255,255,.85) 60%,transparent 100%),
    radial-gradient(ellipse 80px 35px at 20% 6%,rgba(255,255,255,.85) 60%,transparent 100%),
    radial-gradient(ellipse 150px 55px at 55% 4%,rgba(255,255,255,.8) 60%,transparent 100%),
    radial-gradient(ellipse 90px 38px at 64% 2%,rgba(255,255,255,.8) 60%,transparent 100%),
    radial-gradient(ellipse 110px 45px at 85% 7%,rgba(255,255,255,.75) 60%,transparent 100%);
  pointer-events:none;z-index:0;
}
body > *{position:relative;z-index:1}

/* Headings */
h1{color:#5c2fa8 !important;text-shadow:0 2px 8px rgba(124,77,189,.18) !important}
h2{color:#3d2680 !important}
h3{color:#5c2fa8 !important}

/* Links */
a{color:#5c2fa8 !important}
a:hover{color:#7c4dbd !important;text-decoration:underline !important}
.links a,header a{color:#fff !important;text-shadow:0 1px 4px rgba(0,0,0,.25) !important}
.links a:hover,header a:hover{color:#ffd6f0 !important}

/* Header — purple banner like a Drifloon body */
header{background:linear-gradient(135deg,#7c4dbd,#9d6fd4) !important;border-radius:0 0 20px 20px !important;padding:12px 18px !important;box-shadow:0 4px 16px rgba(124,77,189,.35) !important}
header h1{color:#fff !important;text-shadow:0 2px 8px rgba(0,0,0,.2) !important}

/* Cards — white with soft green/purple border, bubbly corners */
.card{background:#fff !important;border:2px solid #c5e8b0 !important;border-radius:20px !important;box-shadow:0 6px 24px rgba(100,60,180,.12),0 1px 0 rgba(255,255,255,.9) inset !important}

/* Panels inside cards */
.panel{background:rgba(212,239,200,.45) !important;border:1.5px solid #b5d9a0 !important;border-radius:14px !important}

/* Buttons — Ditto purple, rounded like a balloon */
a.btn,button:not(.danger){
  background:linear-gradient(135deg,#9d6fd4,#7c4dbd) !important;
  color:#fff !important;border:none !important;font-weight:700 !important;
  border-radius:999px !important;
  box-shadow:0 3px 14px rgba(124,77,189,.4),0 -2px 0 rgba(0,0,0,.1) inset !important;
}
a.btn:hover,button:not(.danger):hover{
  background:linear-gradient(135deg,#b07fe0,#9d6fd4) !important;
  box-shadow:0 5px 20px rgba(124,77,189,.5) !important;
  transform:translateY(-1px) !important;
}
button.danger{background:#e05c6c !important;border:none !important;border-radius:999px !important}

/* Inputs */
input,select,textarea{
  background:rgba(255,255,255,.85) !important;color:#2d1f5e !important;
  border:1.5px solid #c5a8e0 !important;border-radius:10px !important;
}
input::placeholder{color:#a08ab8 !important}
input:focus,select:focus{
  border-color:#7c4dbd !important;
  box-shadow:0 0 0 3px rgba(124,77,189,.18) !important;
  outline:none !important;
}

/* Tables */
th{color:#5c2fa8 !important;border-bottom:2px solid #c5a8e0 !important;background:rgba(212,239,200,.5) !important}
td{border-bottom:1px solid #e0d4f0 !important;color:#2d1f5e !important}
tr:hover td{background:rgba(200,230,180,.3) !important}

/* Season bar */
.season-bar label{color:#3d2680 !important;font-weight:700 !important}
.season-bar select{background:#fff !important;color:#2d1f5e !important;border:1.5px solid #c5a8e0 !important;border-radius:10px !important}
.season-badge{background:linear-gradient(135deg,#9d6fd4,#7c4dbd) !important;color:#fff !important;border-radius:999px !important}

/* Admin nav */
.admin-nav a{background:rgba(255,255,255,.7) !important;color:#5c2fa8 !important;border:1.5px solid #c5a8e0 !important;border-radius:999px !important}
.admin-nav a:hover{background:#7c4dbd !important;color:#fff !important;border-color:#7c4dbd !important}

/* Nav links */
nav a{color:#5c2fa8 !important}

/* Lists */
.leader-list li,.recent-list li{border-bottom:1px dashed #c5a8e0 !important}
.leader-list li:hover{background:rgba(200,230,180,.25) !important;border-radius:8px !important}

/* Badges */
.badge,.tag{background:rgba(124,77,189,.12) !important;color:#5c2fa8 !important;border-radius:999px !important}

/* Muted text */
.muted{color:#7b6a9a !important}

/* Warnings */
.warn{background:rgba(253,230,180,.7) !important;border-color:#f0c060 !important;color:#7a5000 !important;border-radius:12px !important}

/* Create/edit forms */
.create-form,.edit-form{background:rgba(212,239,200,.5) !important;border-color:#b5d9a0 !important;border-radius:16px !important}
.create-form label,.edit-form label{color:#3d2680 !important}

/* Gallery cards — transparent so background shows through */
.grid .card{background:rgba(255,255,255,.6) !important;border:1.5px solid #c5e8b0 !important;box-shadow:0 4px 12px rgba(100,60,180,.1) !important}

.meta{color:#3d2680 !important}
#favBanner{background:rgba(255,230,245,.8) !important;border-color:#e0a8d0 !important;color:#6b2060 !important;border-radius:12px !important}
#favBanner .fx{background:rgba(220,160,200,.3) !important}
#seasonBanner{background:rgba(212,239,200,.8) !important;border-color:#88c870 !important;color:#2d5010 !important;border-radius:12px !important}

/* Drifloon carrying Ditto — corner decoration */
body::after{
  content:'';position:fixed;top:50px;right:0;width:260px;height:150px;
  background:url('/static/drifloon_ditto.png') center/contain no-repeat;
  pointer-events:none;z-index:0;opacity:.88;
}