/* --- RESET & BASE --- */
* {box-sizing: border-box;margin: 0;padding: 0;}
html, body {background-attachment: fixed; background-size: cover; background-position: center; transition: background 1.2s ease, color 0.8s ease;}
body.seelie {background: linear-gradient(135deg, #fdfcfb 0%, #e9f3ff 35%, #f3e8ff 70%, #ffffff 100%); color: #3b2f4a;}
body.unseelie {background: linear-gradient(135deg, #0f0f14 0%, #1a1826 35%, #2b1e3a 70%, #140f1f 100%); color: #d4d0ff;}


/* --- LAYOUT CHANGES BASED ON MEDIA SIZE --- */
.layout {display: block; min-height: 100vh;font-family: "Georgia", serif;}
.sidebar {width: 100%; height: auto; display: block; padding: 1rem; transition: background 1s ease, color 0.8s ease, box-shadow 0.8s ease;}
.site-title {position: relative; height: 160px;}
.site-title img {position: absolute; width: 50%; height: auto; opacity: 0; transition: opacity 0.8s ease; object-fit: contain;}
.maintext {width: 100%; height: auto; display: block; padding: clamp(1.5rem, 3vw, 3rem);}
#page-title {padding:15px;width:fit-content;margin-left:auto;margin-right:auto;align-items:center;text-align:center;}
#footer {padding:15px;width:fit-content;margin-left:auto;margin-right:auto;align-items:center;text-align:center;}
.court {display:none;}
@media (max-width: 767px)
{
	.section {backdrop-filter: none;}
	.particles-container, .orb-container {display: none;}
}
@media (min-width: 768px) and (max-width: 991px)
{
	.layout {display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto auto; min-height: 100vh;}
	.sidebar {position: sticky; top: 0; height: auto; overflow-y: auto;}
	.site-title img {width: 75%;}
}
@media (min-width: 992px) and (max-width: 1199px)
{
	.layout {display: grid; grid-template-columns: 200px 1fr 200px; min-height: 100vh;}
	.sidebar {position: sticky; top: 0; height: 100vh; overflow-y: auto;}
	.site-title img {width: 100%;}
	.court {display: flex; position: sticky; top: 0; height: 100vh; overflow: hidden;}
}
@media (min-width: 1200px)
{
	.layout {display: grid; grid-template-columns: 260px 1fr 260px; min-height: 100vh;}
	.sidebar {position: sticky; top: 0; height: 100vh; overflow-y: auto;}
	.site-title img {width: 100%;}
	.court {display: flex; position: sticky; top: 0; height: 100vh; overflow: hidden;}
}


/* --- SIDEBAR STYLING --- */
@media (min-width: 768px)
{
	.menu {display: flex; flex-direction: column; gap: 1rem;}
	.menu a {text-decoration: none; padding: 0.6rem 0.8rem; border-radius: 6px; transition: all 0.3s ease;text-align: center;}
}
.menu a.current:hover {filter: brightness(1.1);}
/* Seelie */
body.seelie .title-seelie {opacity: 1;}
.seelie .sidebar {background: rgba(255,255,255,0.55); backdrop-filter: blur(8px);}
.seelie .menu a {transition: all 0.25s ease;color: #6a4fb3;background: linear-gradient(to bottom, rgba(245,240,255,0.85), rgba(220,205,255,0.75));}
.seelie .menu a:hover {background: #d9c8ff; color: #2a1f45;}
.seelie .menu a.current {background: linear-gradient(to bottom, rgba(80, 40, 120, 0.8), rgba(20, 5, 35, 0.95)); color: #d4af37; font-weight: bold;}
/* Unseelie */
body.unseelie .title-unseelie {opacity: 1;}
.unseelie .sidebar {background: rgba(10,10,20,0.6); backdrop-filter: blur(8px);}
.unseelie .menu a {transition: all 0.25s ease;color: #a48cff; background: linear-gradient(to bottom, rgba(80, 40, 120, 0.8), rgba(20, 5, 35, 0.95));}
.unseelie .menu a:hover {background: #5a3d87; color: #ffffff;}
.unseelie .menu a.current {background: linear-gradient(to bottom, rgba(245,240,255,0.85), rgba(220,205,255,0.75)); color: #145a32; font-weight: bold;}
/* --- Style Button --- */
.court-button {margin-bottom: 2rem; width: 100%; justify-self: center;margin-top:1.5rem; padding: 0.6rem 1rem; font-size:1.2rem;border-radius: 20px; cursor: pointer; font-size: 0.9rem; letter-spacing: 1px; transition: all 0.3s ease;font-family: "Baskerville", "Palatino Linotype","Georgia", serif;font-style: italic;}
#courtToggle {visibility: hidden;}
.js #courtToggle {visibility: visible;}
/* Seelie */
.seelie .court-button {background: linear-gradient(45deg, #c7a6ff 0%, #8e5edb 60%, #4b2a7a 100%); box-shadow: 0 0 10px rgba(180, 150, 255,0.5); color: #ffffff;border:2px solid #d4af37;}
.seelie .court-button:hover {transform: scale(1.05); box-shadow: 0 0 20px rgba(180,150,255,0.8);}
/* Unseelie */
.unseelie .court-button {background: linear-gradient(45deg, #2b1e3a 0%, #5a3d87 100%); box-shadow: 0 0 12px rgba(100,60,180,0.6); color: #e6e0ff;border:2px solid #145a32;}
.unseelie .court-button:hover {transform: scale(1.05); box-shadow: 0 0 25px rgba(120,80,255,0.9);}


/* --- CONTENT STYLING --- */
/* --- Curved Sections --- */
.section {padding: 5rem 5rem; margin: 1rem 0; backdrop-filter: blur(6px); position: relative; overflow: hidden; transition: background 1s ease;}
/* Seelie */
body.seelie .section {background: rgba(255,255,255,0.60);}
/* Unseelie */
body.unseelie .section {background: rgba(30,20,50,0.60);}

/* --- Horizontal Rule --- */
hr.decorative {border: none; height: 3px; margin: 2rem 0; background: linear-gradient(o right, transparent, #c9a3ff, transparent); border-radius: 5px;}
/* Seelie */
.seelie hr {background: linear-gradient(to right, transparent, #bfa8ff, transparent);}
/* Unseelie */
.unseelie hr {background: linear-gradient(to right, transparent, #6f42c1, transparent);}


/* --- COURT STYLING --- */
.court img {position: absolute; max-width: 120px; opacity: 0; transition: opacity 3s ease; pointer-events: none; animation: float 6s ease-in-out infinite;}
@keyframes float
{
	0% {transform: translateY(0px);}
	50% {transform: translateY(-10px);}
	100% {transform: translateY(0px);}
}


/* --- BACKGROUND STYLING --- */
/* --- Orbs --- */
.orb {position: absolute; border-radius: 50%; filter: blur(30px); opacity: 0.3; animation-iteration-count: infinite; animation-timing-function: ease-in-out; z-index: 0; pointer-events: none;}
@keyframes floatOrb
{
	0% { transform: translate(0, 0) scale(var(--scale)); }
	25% { transform: translate(var(--x-move), var(--y-move)) scale(var(--scale)); }
	50% { transform: translate(calc(var(--x-move)/2), calc(var(--y-move)/1.5)) scale(calc(var(--scale)*0.9)); }
	75% { transform: translate(calc(-var(--x-move)/2), calc(var(--y-move)/3)) scale(var(--scale)); }
	100% { transform: translate(0,0) scale(var(--scale)); }
}
/* Seelie */
body.seelie .orb {background: radial-gradient(circle, #bfa8ff 0%, #8e5edb 80%); opacity: 0.5; opacity: 0.25;}
/* Unseelie */
body.unseelie .orb {background: radial-gradient(circle, #6f42c1 0%, #2b1e3a 80%); opacity: 0.25;}

/* --- Background Particles --- */
.particles-container {position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;}
.particle-float {position: absolute; border-radius: 50%; opacity: 0.6; animation-timing-function: linear; animation-iteration-count: infinite;}
/* Seelie */
body.seelie .particle-float {background: radial-gradient(circle, #e6b800 0%, #e6d699 70%); width: 8px; height: 8px; animation-name: seelieFloat; animation-duration: calc(8s + var(--rand)*5s); opacity: 0.7; box-shadow: 0 0 6px #e6b800, 0 0 12px #e6d699;}
@keyframes seelieFloat
{
	0% { transform: translate(var(--x), -10vh) scale(1); opacity: 0; }
	10% { opacity: 0.7; }
	100% { transform: translate(calc(var(--x) + var(--drift)), 100vh) scale(0.9); opacity: 0; }
}
/* Unseelie */
body.unseelie .particle-float {background: radial-gradient(circle, #00ff66 0%, #009944 80%); width: 5px; height: 5px; opacity: 0.4; animation-name: unseelieFloat; animation-duration: calc(12s + var(--rand)*8s);}
@keyframes unseelieFloat
{
	0% { transform: translate(var(--x), 100vh) scale(1); opacity:0; }
	10% { opacity:0.4; }
	100% { transform: translate(calc(var(--x) + 20px), -10vh) scale(0.8); opacity:0; }
}
/* --- Click Particles --- */
.particle {position: absolute; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; animation: burst 700ms ease-out forwards;}
@keyframes burst
{
	0% { transform: translate(0,0) scale(1); opacity:1; }
	100% { transform: translate(var(--x), var(--y)) scale(0.2); opacity:0; }
}
body.seelie .particle {background: radial-gradient(circle, #e6b800 0%, #e6d699 70%); box-shadow: 0 0 8px #e6b800, 0 0 16px #e6d699;}
body.unseelie .particle {background: radial-gradient(circle, #00ff66 0%, #009944 70%); box-shadow: 0 0 8px #00ff66, 0 0 16px #009944;}

/* --- Fade Overlay --- */
.fade-overlay {position: fixed; inset: 0; pointer-events: none; background: black; opacity: 0; transition: opacity 0.6s ease; z-index: 999;}




/* =========================
Seelie Palette (Light / Ethereal)
---------------------------------
BACKGROUND GRADIENTS
#fdfcfb - very soft warm white
#e9f3ff - pale sky blue
#f3e8ff - light lavender mist
#ffffff - pure white
TEXT
#3b2f4a - muted deep plum
SIDEBAR & LINKS
#6a4fb3 - medium royal purple
#d9c8ff - light lilac
#2a1f45 - dark violet-indigo
#d4af37 - metallic gold
BUTTONS
#c7a6ff - soft pastel purple
#8e5edb - vibrant amethyst
#4b2a7a - deep grape purple
#ffffff - white
SECTION BACKGROUND
rgba(255,255,255,0.60) - translucent white glass
HORIZONTAL RULE
#bfa8ff - pale lavender
ORBS
#bfa8ff - soft glowing lavender
#8e5edb - amethyst purple
FLOATING PARTICLES
#e6b800 - warm golden yellow
#e6d699 - soft champagne gold

Unseelie Palette (Dark / Enchanted)
-----------------------------------
BACKGROUND GRADIENTS
#0f0f14 - near-black charcoal
#1a1826 - dark midnight purple
#2b1e3a - deep shadow plum
#140f1f - blackened violet
TEXT
#d4d0ff - pale lavender glow
SIDEBAR & LINKS
#a48cff - soft glowing violet
#5a3d87 - dark royal purple
#ffffff - white
#145a32 - deep forest green (current link)
BUTTONS
#2b1e3a - deep plum
#5a3d87 - royal purple
#e6e0ff - pale lavender-white
SECTION BACKGROUND
rgba(30,20,50,0.60) - translucent dark plum
HORIZONTAL RULE
#6f42c1 - strong royal violet
ORBS
#6f42c1 - vivid violet
#2b1e3a - dark plum
FLOATING PARTICLES
#00ff66 - neon emerald green
#009944 - deep emerald green

BOTH
----
FADE OVERLAY
black - pure black
MISC
#d4af37 - metallic warm gold
#145a32 - dark enchanted forest green
========================= */

td{padding:0.3rem;}
#adminbg{margin:25px;padding:25px;background-color:white;border:medium solid grey;font-family:Candara, Helvetica, sans-serif;line-height:1.5;}
#adminbg{color:black;}
#adminbg a{color:black;font-weight:normal;}
#adminbg a:visited{color:black;}
#adminbg a:active{color:black;}