body {
	/* Dynamic edge: illustration begins at x=936px in the 1512x800 background. */
	--art-edge: min(100vw, max(61.9048vw, 117.0000vh));
	background-color: #d9ebff;
	background-image: url(images/kokomi.png);
	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-size: cover;
    background-position: center center;
	margin: 0; padding: 0;
	text-align: center;
	font-family: "Geneva", "Verdana", bold;
	font-size: 13px;
	color: #6471c9;
	text-shadow: 0 1px 0 rgba(255,255,255,.55);
	filter: dropshadow(color=#cfdcff, offx=1, offy=1);
	cursor: url('images/cursor5.png') 11 14, auto;
}

#container {
 	width: var(--art-edge);
	padding: 0px;
	float: left;
	margin: 0 auto;
}

#title, #title a:link, #title a:visited, #title a:hover, #title a:active {
	font-family: "Geneva", "Verdana";
	font-weight: normal;
	font-size: 75px;
	letter-spacing: 2px;
	text-transform: uppercase;
 	padding: 0px;
	width:100%;
	margin: 10px 0 10px 0;
	color: #6f7be0;
 	text-align: center;
	text-shadow: 1px 1px 1px rgba(255,255,255,.65);
	filter: dropshadow(color=#e3e7ff, offx=1, offy=1);
}

#header {
	width:1920px;
	height:800px;
	bottom:0px;
	right:1px;
	position: fixed;
	z-index:-1;
}

#sidebar {
	padding: 10px;
 	width: 190px;
	float: left;
	position: fixed;
	line-height: 20px;
	background-color: rgba(227, 240, 255, 0.88);
	-moz-border-radius: 15px;
	border-radius: 15px;
 	text-align: justify;
	margin: 0 10px 0 10px;
	-webkit-box-shadow: 0 4px 18px rgba(160, 185, 236, .55);
	-moz-box-shadow: 0 4px 18px rgba(160, 185, 236, .55);
	box-shadow: 0 4px 18px rgba(160, 185, 236, .55);
}

#content {
 	padding: 10px;
 	width: calc(100% - 250px);
	box-sizing: border-box;
	float: right;
	line-height: 20px;
	background-color: rgba(244, 238, 255, 0.9);
	-moz-border-radius: 15px;
	border-radius: 15px;
 	text-align: justify;
	margin: 0 0 0 0;
	-webkit-box-shadow: 0 4px 18px rgba(160, 185, 236, .55);
	-moz-box-shadow: 0 4px 18px rgba(160, 185, 236, .55);
	box-shadow: 0 4px 18px rgba(160, 185, 236, .55);
}

#footer, #footer a:link, #footer a:visited, #footer a:hover, #footer a:active{
	text-align: center;
	font-size: 10px;
}

a:link, a:active, a:visited {
	font-family: "Geneva", "Verdana";
	font-size: 13px;
	color: #4f5fbd;
	text-decoration: none;
	cursor: default;
	font-weight: bold;
	letter-spacing: 1px;
}
a:hover {
	font-family: "Geneva", "Verdana";
	font-size: 13px;
	font-weight: normal;
	color: #a455d8;
	text-decoration: none;
	cursor: default;
	font-weight: bold;
	letter-spacing: 1px;
}
a.nav:link, a.nav:visited, a.nav:active {
	font-family: "Geneva", "Verdana";
	font-weight: normal;
	font-size: 13px;
	text-transform: none;
	letter-spacing: 1px;
	color: #4f5fbd;
	width: 98%;
	display:  block;
	text-align: center;
	padding: 5px;
	margin: 2px 0;
	text-decoration: none;
	border-bottom: 1px dashed #7ca8e8;
	letter-spacing: 0px;
	text-shadow: 0 1px 0 rgba(255,255,255,.55);
	filter: dropshadow(color=#dfe6ff, offx=1, offy=1);
}

a.nav:hover {
	font-family: "Geneva", "Verdana";
	font-weight: normal;
	font-size: 13px;
	text-transform: none;
	letter-spacing: 1px;
	color: #a455d8;
	width: 98%;
	display:  block;
	text-align: center;
	padding: 5px;
	margin: 2px 0;
	text-decoration: none;
	border-bottom: 1px dashed #b57be6;
	letter-spacing: 0px;
	text-shadow: 1px 1px 1px rgba(255,255,255,.45);
	filter: dropshadow(color=#dfe6ff, offx=1, offy=1);
}

h1 {
	font-family: "Geneva", "Verdana", bold;
	font-weight: normal;
	font-size: 28px;
	border-bottom: 1px dashed #9db9f7;
	line-height: 28px;
	text-transform: uppercase;
	color: #5f6dd1;
	padding: 2px;
	margin-top: 5px;
	margin-bottom: 3px;
	text-shadow: 1px 1px 1px rgba(255,255,255,.55);
	filter: dropshadow(color=#dfe6ff, offx=1, offy=1);
}
h2, h3, h4 {
	font-family: "Geneva", "Verdana", bold;
	font-weight: normal;
	letter-spacing: 2px;
	font-size: 16px;
	border-bottom: 1px dashed #9ab9f1;
	text-transform: none;
	color: #6b7cdb;
	text-align: center;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 3px;
	text-shadow: 1px 1px 1px rgba(255,255,255,.55);
	filter: dropshadow(color=#dfe6ff, offx=1, offy=1);
}
b, i, u, s {color: #7468d6;}
.highlightCard {
	border: 2px solid #92abff;
	background: #eff3ff;
}

textarea {
	border: 1px dotted #92abff;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgba(228, 241, 255, 0.95);
	color: #5f6dd1;
}

.dimmedCard {
	opacity:0.3;
	filter:alpha(opacity=30);
}

body::-webkit-scrollbar {
    width: 4px;
}
body::-webkit-scrollbar-track {
    background-color: #fff5c8;
    border-left: 1px solid #7fb86b;
}
body::-webkit-scrollbar-thumb {
    background-color: #77abe0;
}
body::-webkit-scrollbar-thumb:hover {
  background-color: #ef8a4d;
}

textarea::-webkit-scrollbar {
    width: 4px;
}
textarea::-webkit-scrollbar-track {
    background-color: #fff8d9;
    border-left: 1px solid #7fb86b;
}
textarea::-webkit-scrollbar-thumb {
    background-color: #77abe0;
}
textarea::-webkit-scrollbar-thumb:hover {
  background-color: #ef8a4d;
}

.column {
    display: inline-block;
    vertical-align: top;
    width: 49%;
}

input {
  box-sizing: border-box;
  border: 1px solid #92abff;
  border-radius: 7px;
  background-color: rgba(228, 241, 255, 0.95);
  color: #5f6dd1;
}

input[type=button], input[type=submit], input[type=reset] {
  background-color: #d8e7ff;
  border: 1px solid #92abff;
  border-radius: 7px;
  color: #5f6dd1;
  text-decoration: none;
  margin: 1px 1px;
  cursor: pointer;
}

select {
  border: 1px solid #92abff;
  border-radius: 7px;
  background-color: rgba(228, 241, 255, 0.95);
  color: #5f6dd1;
}
/* Card hover tooltip - watery blue/lilac glass theme */
.has-card-tooltip {
    cursor: help;
}

.card-tooltip {
    position: fixed;
    z-index: 99999;
    max-width: 260px;
    padding: 5px 10px;
    border: 1px solid rgba(244, 248, 255, .72);
    border-radius: 999px;
    background: rgba(208, 228, 255, .72);
    color: #5662bd;
    font-family: "Geneva", "Verdana", sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.35;
    letter-spacing: .35px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
    box-shadow: 0 5px 16px rgba(132, 150, 214, .16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
    white-space: nowrap;
}

.card-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Style 4: keep Trade Buddies together on one sidebar row */
#sidebar img[src$="/scara.png"],
#sidebar img[src$="/xiao.png"] {
    height: 78px;
    width: auto;
    max-width: 86px;
    object-fit: contain;
    vertical-align: bottom;
    margin: 0 2px;
}


/* Themed custom cursor */
body, a, a:link, a:visited, a:active, a:hover, button, input, select, textarea, label, .has-card-tooltip {
    cursor: url('images/cursor5.png') 11 14, auto !important;
}

/* Decorative form controls - Style 4 / Kokomi & Ayaka */
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    box-sizing: border-box;
    border: 1px dashed #879ee8;
    border-radius: 3px;
    background-color: rgba(248,251,255,.94);
    background-image:
        radial-gradient(circle at calc(100% - 9px) 8px, rgba(126,113,224,.28) 0 1.5px, transparent 2px),
        radial-gradient(circle at calc(100% - 14px) 12px, rgba(93,180,225,.22) 0 1px, transparent 1.5px),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(235,241,255,.92));
    color: #5361af;
    padding: 7px 9px;
    outline: 1px solid rgba(137,176,233,.38);
    outline-offset: 2px;
    box-shadow: 0 2px 6px rgba(94,119,188,.08);
    transition: border-color .15s ease, outline-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
    border-color: #6f7ed8;
    border-style: solid;
    outline-color: rgba(111,126,216,.34);
    background-color: rgba(252,253,255,.98);
    box-shadow: 0 0 0 2px rgba(111,126,216,.08), 0 3px 8px rgba(94,119,188,.10);
}
input[type="button"], input[type="submit"], input[type="reset"], button {
    border: 1px dashed #7d91df;
    border-radius: 3px;
    background: rgba(224,234,255,.96);
    color: #5361af;
    padding: 6px 11px;
    box-shadow: inset 0 -2px 0 rgba(111,126,216,.09), 0 2px 4px rgba(94,119,188,.08);
    font-weight: bold;
    letter-spacing: .3px;
}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
    border-style: solid;
    background: rgba(211,224,255,.98);
    color: #46539d;
}
/* TCG log boxes: keep log textareas inside the central content panel */
textarea.tcg-logbox {
    display: block;
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    min-width: 0;
    box-sizing: border-box;
    margin: 8px auto;
    padding: 9px 10px;
    resize: vertical;
    overflow-x: auto;
}



/* ===== Select dropdown theme fix style 4 ===== */
select {
    background-color: rgba(248,251,255,.98);
    color: #5361af;
}
select option,
select optgroup {
    background: rgba(235,241,255,.96);
    color: #5361af;
}
select option:checked,
select option:hover,
select option:focus {
    background: rgba(248,251,255,.98);
    color: #5361af;
}


/* ===== Custom h1 font - Style 4 ===== */
@font-face {
    font-family: "WatermelonH1";
    src: url("fonts/style4-h1.woff2") format("woff2");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}
h1 {
    font-family: "WatermelonH1", "Geneva", "Verdana", sans-serif;
    font-weight: normal;
}


/* ===== Common text font: Trebuchet MS (decorative h1 stays theme-specific) ===== */
body,
#title, #title a:link, #title a:visited, #title a:hover, #title a:active,
#sidebar, #content, #footer,
a:link, a:visited, a:active, a:hover,
a.nav:link, a.nav:visited, a.nav:active, a.nav:hover,
h2, h3, h4,
b, i, u, s,
input, textarea, select, option, optgroup, button,
.card-tooltip {
    font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
}


/* ===== Trebuchet readability sizing ===== */
body { font-size: 15px; }
a:link, a:visited, a:active, a:hover,
a.nav:link, a.nav:visited, a.nav:active, a.nav:hover { font-size: 15px; }
h2, h3, h4 { font-size: 17px; }
input, textarea, select, button { font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif; font-size: 14px; }
#footer, #footer a:link, #footer a:visited, #footer a:hover, #footer a:active { font-size: 11px; }
.card-tooltip { font-size: 13px; }


/* ===== Responsive phone/tablet + Back to top ===== */
:root {
    --mobile-panel: rgba(240,246,255,.97);
    --backtop-bg: #6f7ed8;
    --backtop-fg: #f8fbff;
    --backtop-border: #a9b9ef;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

#backToTop {
    position: fixed;
    z-index: 100000;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px dashed var(--backtop-border);
    border-radius: 50%;
    background: var(--backtop-bg);
    color: var(--backtop-fg);
    font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
    font-size: 23px;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
#backToTop.is-visible {
    opacity: .92;
    visibility: visible;
    transform: translateY(0);
}
#backToTop:hover,
#backToTop:focus-visible {
    opacity: 1;
    border-style: solid;
    transform: translateY(-2px);
}

#content img {
    max-width: 100%;
    height: auto;
}
#content input:not([type="checkbox"]):not([type="radio"]),
#content textarea,
#content select {
    max-width: 100%;
}

/* Tablets and smaller laptops */
@media (max-width: 1100px) {
    body {
        background-attachment: scroll;
        background-position: center top;
    }
    #container {
        width: 100%;
        max-width: 100%;
    }
    #content {
        width: calc(100% - 235px);
        min-width: 0;
        padding: 12px;
        overflow-x: auto;
    }
    #sidebar {
        width: 185px;
    }
    #title {
        max-width: 100%;
    }
    table {
        max-width: 100%;
    }
}

/* Phones and portrait tablets */
@media (max-width: 820px) {
    body {
        min-width: 0;
        padding: 0;
        background-attachment: scroll;
        background-size: auto 100vh;
        background-position: center top;
    }
    #header {
        display: none;
    }
    #container {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    #sidebar {
        position: relative;
        float: none;
        width: auto;
        max-width: none;
        margin: 10px;
        padding: 10px 12px;
        box-sizing: border-box;
        background-color: var(--mobile-panel);
        text-align: center;
    }
    #sidebar h2 {
        clear: both;
    }
    #sidebar > h2:first-child img,
    #sidebar center img {
        max-width: 100%;
        height: auto;
    }
    #sidebar a.nav {
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
        width: calc(50% - 8px);
        min-height: 38px;
        margin: 2px;
        padding: 8px 5px;
    }
    #content {
        float: none;
        width: auto;
        max-width: none;
        min-width: 0;
        margin: 10px;
        padding: 12px;
        box-sizing: border-box;
        overflow-x: auto;
    }
    #title {
        width: auto;
        max-width: 100%;
        margin-left: 10px;
        margin-right: 10px;
        font-size: clamp(38px, 10vw, 58px);
        line-height: 1.05;
        overflow-wrap: anywhere;
    }
    h1 {
        font-size: clamp(25px, 8vw, 34px);
        line-height: 1.08;
        overflow-wrap: anywhere;
    }
    h2, h3, h4 {
        line-height: 1.2;
    }
    .column {
        display: block;
        width: 100%;
    }
    textarea.tcg-logbox {
        width: 100%;
        max-width: 100%;
    }
    #backToTop {
        width: 42px;
        height: 42px;
        line-height: 38px;
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 480px) {
    body { font-size: 14px; }
    a:link, a:visited, a:active, a:hover,
    a.nav:link, a.nav:visited, a.nav:active, a.nav:hover { font-size: 14px; }
    #sidebar,
    #content {
        margin: 7px;
        border-radius: 10px;
    }
    #sidebar a.nav {
        width: 100%;
        margin: 1px 0;
    }
    input[type="button"], input[type="submit"], input[type="reset"], button {
        min-height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    #backToTop { transition: none; }
}


/* ===== Theme-specific Back to top: Style 4 / Kokomi & Ayaka ===== */
#backToTop {
    border: 1px dashed #879ee8;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(248,251,255,.96), rgba(174,191,246,.92));
    color: #5361af;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 5px 18px rgba(94,119,188,.22);
    text-shadow: 0 1px 0 rgba(255,255,255,.75);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
#backToTop::after {
    content: "✧";
    position: absolute;
    top: -9px;
    right: -6px;
    font-size: 16px;
    line-height: 1;
    color: #7e71e0;
    text-shadow: 0 1px 0 #f8fbff;
}
#backToTop:hover,
#backToTop:focus-visible {
    background: linear-gradient(145deg, rgba(252,253,255,.98), rgba(194,184,244,.94));
    color: #4d5bab;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 20px rgba(94,119,188,.28);
}

/* Any portrait-oriented device: zoom/crop background to the middle-left and hide right-side character art */
@media (orientation: portrait) {
    html, body {
        min-height: 100%;
        background-color: inherit;
    }

    body {
        background-repeat: no-repeat;
        background-size: auto 125vh;
        background-position: 28% top;
        background-attachment: fixed;
    }
}

/* ===== Clear distinction: body text vs links - Style 4 ===== */
body, #sidebar, #content { color: #6873a8; }
a:link, a:visited, a:active { color: #4057c7; }
a:hover { color: #a455d8; }


/* Strong text/link separation — Style 4 */
body, #sidebar, #content { color: #737ca9; }
a:link, a:visited, a:active,
a.nav:link, a.nav:visited, a.nav:active { color: #334fc9; }
a:hover, a.nav:hover { color: #b05adc; }


/* ===== Style 5 / Hundred Acre Adventure ===== */
body {
    --art-edge: min(100vw, max(61.9048vw, 117vh));
    background-color: #9fe8ef;
    background-image: url('https://dari.meowandsparkle.party/images/winnietodos.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    color: #385e58;
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
    cursor: url('../images/cursor5.png') 11 14, auto;
}
#sidebar {
    background-color: rgba(255, 246, 198, .90);
    box-shadow: 0 4px 18px rgba(82,116,84,.28);
}
#content {
    background-color: rgba(235, 249, 230, .91);
    box-shadow: 0 4px 18px rgba(82,116,84,.25);
}
#title, #title a:link, #title a:visited, #title a:hover, #title a:active {
    color: #c83a32;
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
a:link, a:visited, a:active,
a.nav:link, a.nav:visited, a.nav:active {
    color: #176d8f;
}
a:hover, a.nav:hover {
    color: #d34a32;
}
a.nav:link, a.nav:visited, a.nav:active { border-bottom-color: #7cad67; }
a.nav:hover { border-bottom-color: #e18a32; background: rgba(255,185,62,.12); }
h1 {
    font-family: "Cooper Black", "Trebuchet MS", sans-serif;
    font-weight: 900;
    color: #c83a32;
    border-bottom-color: #e29b34;
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
h2, h3, h4 {
    color: #337a62;
    border-bottom-color: #84a95f;
}
b, i, u, s { color: #b64c34; }
.highlightCard { border-color: #e79a2e; background: #fff4bd; }
.card-tooltip {
    border: 1px solid rgba(255,255,255,.72);
    background: rgba(255, 235, 137, .90);
    color: #704627;
    box-shadow: 0 5px 16px rgba(107,89,43,.18);
}
body, a, a:link, a:visited, a:active, a:hover, button, input, select, textarea, label, .has-card-tooltip {
    cursor: url('../images/cursor5.png') 11 14, auto !important;
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea, select {
    box-sizing: border-box;
    border: 1px dashed #79a860;
    border-radius: 3px;
    background-color: #fff7c9;
    background-image:
        radial-gradient(circle at calc(100% - 8px) 8px, rgba(220,63,48,.55) 0 1.5px, transparent 2px),
        radial-gradient(circle at calc(100% - 13px) 12px, rgba(235,154,44,.58) 0 1px, transparent 1.5px),
        radial-gradient(circle at calc(100% - 18px) 7px, rgba(46,124,98,.38) 0 1px, transparent 1.5px),
        linear-gradient(180deg, #fff9d9, #edf5c4);
    color: #355a51;
    outline: 1px solid rgba(226,155,52,.35);
    outline-offset: 2px;
    box-shadow: 0 2px 5px rgba(70,111,75,.10);
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus, select:focus {
    border-color: #d44d35;
    border-style: solid;
    outline-color: rgba(211,74,50,.30);
    background-color: #fffbe0;
    box-shadow: 0 0 0 2px rgba(226,155,52,.12), 0 3px 7px rgba(70,111,75,.10);
}
select option, select optgroup { background: #f2efb8; color: #355a51; }
input[type="button"], input[type="submit"], input[type="reset"], button {
    border: 1px dashed #d78d2c;
    border-radius: 3px;
    background: #f6c94e;
    color: #7c4028;
    box-shadow: inset 0 -2px 0 rgba(166,94,28,.12), 0 2px 4px rgba(70,111,75,.10);
}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
    border-style: solid;
    background: #e7663e;
    color: #fff8d7;
}
#backToTop {
    border: 1px dashed #2f765f;
    border-radius: 50%;
    background: linear-gradient(145deg,#ffd24d,#e8922e);
    color: #6d3d22;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65),0 5px 18px rgba(88,106,61,.28);
}
#backToTop::after { content: "☼"; color:#c83a32; }
#backToTop:hover,#backToTop:focus-visible { background:linear-gradient(145deg,#ef7a43,#d84c37); color:#fff8d7; }
#sidebar img[src$="/tigger.png"], #sidebar img[src$="/piglet.png"] { max-height: 82px; width:auto; vertical-align:bottom; margin:0 3px; }
#sidebar > h2:first-child img { max-width: 150px; height:auto; }
@media (orientation: portrait) {
    body { background-size: auto 125vh; background-position: 28% top; background-attachment: fixed; }
}

/* ===============================
   STYLE 6 — Eeveelutions / berries
   Final theme overrides
   =============================== */
body {
    --art-edge: min(100vw, max(61.9048vw, 117.0000vh));
    background-color: #f8f4ff;
    background-image: url(images/eeveefondo.png) !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    font-family: "Trebuchet MS", "Verdana", sans-serif;
    font-size: 14px;
    color: #5b6671;
    text-shadow: 0 1px 0 rgba(255,255,255,.65);
    cursor: url('images/cursor6.png') 11 14, auto;
}

#container {
    width: var(--art-edge);
}

#sidebar {
    background: rgba(255, 248, 245, 0.90);
    border: 1px solid rgba(219, 150, 175, 0.55);
    box-shadow: 0 5px 20px rgba(190, 137, 159, 0.20), 0 0 0 1px rgba(255,255,255,.55) inset;
}

#content {
    background: rgba(252, 250, 255, 0.90);
    border: 1px solid rgba(176, 211, 192, 0.55);
    box-shadow: 0 5px 20px rgba(160, 198, 184, 0.18), 0 0 0 1px rgba(255,255,255,.65) inset;
}

body, a, a:link, a:visited, a:active, a:hover, button, input, select, textarea, label, .has-card-tooltip {
    cursor: url('../images/cursor6.png') 11 14, auto !important;
}

#title, #title a:link, #title a:visited, #title a:hover, #title a:active {
    font-family: "Trebuchet MS", "Verdana", sans-serif;
    color: #db6d95;
    text-shadow: 1px 1px 0 rgba(255,255,255,.7), 0 0 8px rgba(255,255,255,.2);
}

a:link, a:active, a:visited {
    color: #c25d86;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 0.3px;
}

a:hover {
    color: #5fa27a;
    text-decoration: none;
    font-weight: bold;
}

a.nav:link, a.nav:visited, a.nav:active {
    color: #c25d86;
    border-bottom: 1px dashed #e7a9bf;
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

a.nav:hover {
    color: #5fa27a;
    border-bottom: 1px dashed #8bc9a5;
}

h1 {
    font-family: "Trebuchet MS", "Verdana", sans-serif;
    font-weight: bold;
    font-size: 34px;
    line-height: 34px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #db6d95;
    border-bottom: 1px dashed #e8a9bf;
    text-shadow: 1px 1px 0 rgba(255,255,255,.75);
}

h2, h3, h4 {
    font-family: "Trebuchet MS", "Verdana", sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    color: #6fa382;
    border-bottom: 1px dashed #b7ddc3;
    text-shadow: 1px 1px 0 rgba(255,255,255,.75);
}

b, i, u, s {
    color: #d96f91;
}

.highlightCard {
    border: 2px solid #9fd3b2;
    background: rgba(244, 255, 248, 0.95);
}

.card-tooltip {
    background: rgba(255, 249, 245, 0.96);
    border: 1px dashed #e6aac1;
    color: #57636d;
    box-shadow: 0 10px 24px rgba(146, 173, 162, 0.18);
}

.card-tooltip .tooltip-title {
    color: #c25d86;
    border-bottom: 1px dashed rgba(194, 93, 134, 0.28);
}

.card-tooltip .tooltip-line b {
    color: #6fa382;
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    box-sizing: border-box;
    border: 1px dashed #e6aac1;
    border-radius: 4px;
    background-color: rgba(255, 252, 248, 0.96);
    background-image:
        radial-gradient(circle at calc(100% - 8px) 8px, rgba(217,111,145,.55) 0 1.6px, transparent 2px),
        radial-gradient(circle at calc(100% - 13px) 12px, rgba(255,188,105,.70) 0 1.2px, transparent 1.7px),
        radial-gradient(circle at calc(100% - 19px) 7px, rgba(111,163,130,.45) 0 1.2px, transparent 1.7px),
        linear-gradient(180deg, rgba(255,248,252,.98), rgba(250,255,252,.98));
    color: #5b6671;
    outline: 1px solid rgba(159, 211, 178, 0.45);
    outline-offset: 2px;
    box-shadow: 0 2px 6px rgba(186, 154, 170, 0.10);
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
    border-color: #6fa382;
    border-style: solid;
    background-color: #fffdfb;
    outline-color: rgba(111,163,130,.45);
    box-shadow: 0 0 0 2px rgba(233, 176, 197, 0.12), 0 3px 8px rgba(155, 181, 168, 0.15);
}

select option,
select optgroup {
    background: #fff7fb;
    color: #5b6671;
}

input[type=button], input[type=submit], input[type=reset], button {
    background: linear-gradient(180deg, #ffd3e1, #f4a7bf);
    border: 1px dashed #d96f91;
    border-radius: 4px;
    color: #7a4257;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 2px 6px rgba(186, 154, 170, 0.12);
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover,
input[type=button]:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, button:focus-visible {
    background: linear-gradient(180deg, #c7f0d6, #96d4ad);
    border-style: solid;
    color: #3f6a52;
}

body::-webkit-scrollbar,
textarea::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
    background-color: #fff8ed;
    border-left: 1px solid #b7ddc3;
}

body::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
    background-color: #ef9ab8;
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover {
    background-color: #8dcaa4;
}

#backToTop {
    border: 1px dashed #d96f91;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffdbe7, #f4a9c1);
    color: #7a4257;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 5px 18px rgba(186, 154, 170, 0.24);
}

#backToTop::after {
    content: "✦";
    color: #6fa382;
}

#backToTop:hover,
#backToTop:focus-visible {
    background: linear-gradient(145deg, #c7f0d6, #96d4ad);
    color: #3f6a52;
}

#sidebar > h2:first-child img {
    max-width: 150px;
    height: auto;
}

#sidebar img[src$="/snorlax.png"],
#sidebar img[src$="/squirtle.png"] {
    max-height: 82px;
    width: auto;
    vertical-align: bottom;
    margin: 0 3px;
}

#sidebar a[href*="/panel"] img,
#sidebar a[href*="/panel/"] img {
    max-width: 120px;
    height: auto;
}

@media (orientation: portrait) {
    body {
        background-size: auto 125vh;
        background-position: 28% top;
        background-attachment: fixed;
    }
}


/* ===== Final custom h1 font - Style 6 ===== */
@font-face {
    font-family: "PoohH1";
    src: url("fonts/style6-pooh.woff2") format("woff2");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}
h1 {
    font-family: "PoohH1", "Trebuchet MS", Trebuchet, Arial, sans-serif;
    font-weight: normal;
}

/* ===== Style 6 final adjustments ===== */
/* Keep the Needs shortcut styled like a normal link, not body text. */
.needs-inline-link a:link,
.needs-inline-link a:visited,
.needs-inline-link a:active {
    color: #c25d86 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    text-shadow: none;
}
.needs-inline-link a:hover {
    color: #5fa27a !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
.needs-inline-link a b { color: inherit !important; }

/* Keep the custom Pooh title visually aligned with the other themes. */
h1 {
    font-size: 27px;
    line-height: 30px;
    letter-spacing: 1px;
}

/* Force the Style 6 Pooh face on the complete H1, including generated counts/numbers. */
h1,
h1 * {
    font-family: "PoohH1", "Trebuchet MS", Trebuchet, Arial, sans-serif !important;
    font-style: normal;
}


/* ===== Unified panel coherence: all 7 themes =====
   Same translucency, radius and shadow language; theme colors stay individual. */
#sidebar {
    background: rgba(255,248,245, 0.94) !important;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(190,137,159, 0.28);
}

#content {
    background: rgba(252,250,255, 0.94) !important;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(190,137,159, 0.25);
}

/* ===== Style 6: force Pooh numerals in generated H1 deck counters ===== */
@font-face {
    font-family: "PoohDigits";
    src: url("fonts/style6-pooh-digits.ttf?v=2") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-display: block;
}
h1 .pooh-h1-count,
h1 .pooh-h1-count * {
    font-family: "PoohDigits" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    font-feature-settings: normal !important;
}

/* ======================================================
   STYLE 8 — Mermaid / sunrise-sunset ocean
   ====================================================== */
@font-face {
    font-family: "WeddingMermaidH1";
    src: url("fonts/wedding_mermaid.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

body {
    --art-edge: min(100vw, max(61.9048vw, 117.0000vh));
    background-color: #f7c58f;
    background-image: url(images/mermaidfondo.png) !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
    font-size: 14px;
    color: #6a4637;
    text-shadow: 0 1px 0 rgba(255,255,255,.68);
    cursor: url('../images/cursor8.png') 9 16, auto;
}

#container { width: var(--art-edge); }

#sidebar {
    background: rgba(255, 239, 214, 0.94) !important;
    color: #6a4637;
    border: 1px solid rgba(226, 137, 82, .52);
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(176, 104, 70, .26);
}

#content {
    background: rgba(255, 246, 226, 0.94) !important;
    color: #6a4637;
    border: 1px solid rgba(111, 180, 191, .40);
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(153, 111, 105, .22);
}

#title, #title a:link, #title a:visited, #title a:hover, #title a:active {
    color: #d87249;
    text-shadow: 1px 1px 0 rgba(255,255,255,.72), 0 0 8px rgba(232, 132, 72, .18);
}

a:link, a:active, a:visited {
    color: #bf633e;
    text-decoration: none;
    font-weight: bold;
}
a:hover { color: #408f9b; }

a.nav:link, a.nav:visited, a.nav:active {
    color: #b95f3d;
    border-bottom: 1px dashed #e7a270;
}
a.nav:hover {
    color: #367f8d;
    border-bottom-color: #7bb7bd;
    background: rgba(123, 190, 196, .10);
}

h1,
h1 *,
h1 .pooh-h1-count,
h1 .pooh-h1-count * {
    font-family: "WeddingMermaidH1", "Trebuchet MS", Trebuchet, Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    font-feature-settings: normal !important;
}
h1 {
    font-size: 28px;
    line-height: 30px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #d76c43;
    border-bottom: 1px dashed #e2a06d;
    text-shadow: 1px 1px 0 rgba(255,255,255,.76);
}

h2, h3, h4 {
    color: #b36f45;
    border-bottom-color: #88b9bd;
    text-shadow: 1px 1px 0 rgba(255,255,255,.70);
}

b, i, u, s { color: #b65e3d; }

.highlightCard {
    border-color: #63aeb7;
    background: #fff1dd;
}

.card-tooltip {
    background: rgba(255, 247, 231, .97);
    border: 1px solid rgba(215, 110, 67, .46);
    color: #64483b;
    box-shadow: 0 8px 22px rgba(139, 94, 77, .18);
}
.card-tooltip .tooltip-title {
    color: #b65e3d;
    border-bottom-color: rgba(184, 92, 145, .28);
}
.card-tooltip .tooltip-line b { color: #3f8e99; }

body, a, a:link, a:visited, a:active, a:hover, button, input, select, textarea, label, .has-card-tooltip {
    cursor: url('../images/cursor8.png') 9 16, auto !important;
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    border: 1px dashed #dc9463;
    border-radius: 4px;
    background-color: #fff5e7;
    background-image:
        radial-gradient(circle at calc(100% - 8px) 8px, rgba(224,116,65,.50) 0 1.5px, transparent 2px),
        radial-gradient(circle at calc(100% - 13px) 12px, rgba(86,169,181,.42) 0 1.2px, transparent 1.7px),
        radial-gradient(circle at calc(100% - 19px) 7px, rgba(246,177,92,.38) 0 1.2px, transparent 1.7px),
        linear-gradient(180deg, #fff8ed, #fff0d8);
    color: #6a4637;
    outline: 1px solid rgba(85, 160, 171, .24);
    outline-offset: 2px;
    box-shadow: 0 2px 6px rgba(143, 96, 79, .10);
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
    border-color: #458f99;
    border-style: solid;
    background-color: #fffaf1;
    outline-color: rgba(217,108,67,.28);
    box-shadow: 0 0 0 2px rgba(217,108,67,.08), 0 3px 8px rgba(95, 151, 157, .12);
}
select, select option, select optgroup {
    background: #fff3df;
    color: #6a4637;
}

input[type=button], input[type=submit], input[type=reset], button {
    border: 1px dashed #c96d45;
    border-radius: 4px;
    background: linear-gradient(180deg, #ffd39b, #f2a066);
    color: #6b4433;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.66), 0 2px 6px rgba(144, 92, 66, .14);
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover,
input[type=button]:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, button:focus-visible {
    background: linear-gradient(180deg, #b9dee0, #72bcc3);
    color: #355e64;
    border-style: solid;
}

body::-webkit-scrollbar,
textarea::-webkit-scrollbar { width: 6px; }
body::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
    background-color: #fff0dc;
    border-left: 1px solid #e0a06f;
}
body::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
    background-color: #df8452;
    border-radius: 10px;
}
body::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover { background-color: #57a9b2; }

#backToTop {
    border: 1px dashed #c86c45;
    background: linear-gradient(145deg, #ffd19a, #ef9a62);
    color: #6b4534;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 5px 18px rgba(146, 91, 69, .22);
}
#backToTop::after { content: "✦"; color: #3f919c; }
#backToTop:hover,#backToTop:focus-visible {
    background: linear-gradient(145deg, #b6dfe1, #73bcc3);
    color: #355d63;
}

#sidebar > h2:first-child img {
    max-width: 150px;
    height: auto;
}
#sidebar a[href*="/panel"] img,
#sidebar a[href*="/panel/"] img {
    max-width: 150px;
    height: auto;
}
#sidebar img[src$="/mermaidv.png"],
#sidebar img[src$="/mermaida.png"] {
    max-height: 72px;
    width: auto;
    vertical-align: bottom;
    margin: 0 3px;
}

@media (orientation: portrait) {
    body {
        background-size: auto 125vh;
        background-position: 28% top;
        background-attachment: fixed;
    }
}

/* ======================================================
   STYLE 8 — Sunset palette cleanup
   Removes stray green/teal tones and strengthens sunset oranges.
   ====================================================== */
body {
    background-color: #f7b77f;
    color: #674538;
}

#sidebar {
    background: rgba(255, 236, 209, 0.94) !important;
    color: #674538;
    border-color: rgba(242, 137, 73, .58);
    box-shadow: 0 5px 18px rgba(190, 103, 65, .25);
}

#content {
    background: rgba(255, 245, 224, 0.94) !important;
    color: #674538;
    border-color: rgba(235, 158, 98, .50);
    box-shadow: 0 5px 18px rgba(179, 111, 79, .22);
}

#title, #title a:link, #title a:visited, #title a:hover, #title a:active {
    color: #f07a3f;
    text-shadow: 1px 1px 0 rgba(255,255,255,.72), 0 0 8px rgba(244,126,63,.20);
}

a:link, a:active, a:visited { color: #d65f3d; }
a:hover { color: #9a62c7; }

a.nav:link, a.nav:visited, a.nav:active {
    color: #cf5c3b;
    border-bottom-color: #eda168;
}
a.nav:hover {
    color: #8f5fc1;
    border-bottom-color: #b88ad8;
    background: rgba(184, 138, 216, .09);
}

h1 {
    color: #f17636 !important;
    border-bottom-color: #f0a15f;
    text-shadow: 1px 1px 0 rgba(255,255,255,.78), 0 0 7px rgba(241,118,54,.16);
}

h2, h3, h4 {
    color: #d66a43;
    border-bottom-color: #c995d8;
}

b, i, u, s { color: #ca5939; }

.highlightCard {
    border-color: #b780d1;
    background: #fff0dc;
}

.card-tooltip {
    background: rgba(255, 247, 231, .97);
    border-color: rgba(237, 130, 67, .50);
    color: #63463a;
    box-shadow: 0 8px 22px rgba(148, 89, 70, .18);
}
.card-tooltip .tooltip-title {
    color: #d65f3d;
    border-bottom-color: rgba(184, 126, 202, .32);
}
.card-tooltip .tooltip-line b { color: #9762bd; }

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    border-color: #e9955f;
    background-color: #fff5e6;
    background-image:
        radial-gradient(circle at calc(100% - 8px) 8px, rgba(239,112,62,.50) 0 1.5px, transparent 2px),
        radial-gradient(circle at calc(100% - 13px) 12px, rgba(177,122,205,.40) 0 1.2px, transparent 1.7px),
        radial-gradient(circle at calc(100% - 19px) 7px, rgba(247,178,89,.42) 0 1.2px, transparent 1.7px),
        linear-gradient(180deg, #fff9ef, #fff0d9);
    color: #674538;
    outline-color: rgba(181, 127, 205, .25);
    box-shadow: 0 2px 6px rgba(147, 93, 72, .10);
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
    border-color: #a66ac9;
    background-color: #fffaf2;
    outline-color: rgba(240,118,54,.28);
    box-shadow: 0 0 0 2px rgba(240,118,54,.08), 0 3px 8px rgba(166,106,201,.10);
}
select, select option, select optgroup {
    background: #fff3df;
    color: #674538;
}

input[type=button], input[type=submit], input[type=reset], button {
    border-color: #d56840;
    background: linear-gradient(180deg, #ffd28f, #f39a57);
    color: #6a4032;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.66), 0 2px 6px rgba(149, 86, 61, .14);
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover,
input[type=button]:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, button:focus-visible {
    background: linear-gradient(180deg, #d9b2e8, #b983d2);
    color: #53375f;
}

body::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
    background-color: #fff0dc;
    border-left-color: #efa268;
}
body::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb { background-color: #ed8550; }
body::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover { background-color: #ad76cb; }

#backToTop {
    border-color: #d56840;
    background: linear-gradient(145deg, #ffd08b, #ef9151);
    color: #6a4132;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 5px 18px rgba(151, 86, 63, .22);
}
#backToTop::after { color: #a96bc7; }
#backToTop:hover,#backToTop:focus-visible {
    background: linear-gradient(145deg, #dfb7eb, #b982d2);
    color: #54375f;
}