/* -------------------------------------
FONTS
------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Momo+Signature&display=swap");

@font-face {
font-family: "Chomage";
src: url("https://tcg.dollheart.org/fonts/Chomage.woff2") format("woff2"),
url("https://tcg.dollheart.org/fonts/Chomage.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Cafe24Dongdong";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Dongdong.woff") format("woff");
font-weight: normal;
font-display: swap;
}

@font-face {
font-family: "Andika";
font-style: normal;
font-weight: 400;
src: url("https://fonts.bunny.net/andika/files/andika-latin-400-normal.woff2") format("woff2");
}

/* -------------------------------------
BODY
------------------------------------- */

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
padding: 20px;
background: linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.65)),
url("https://tcg.dollheart.org/misc/cloth.png");
font-family: "Andika", Verdana, sans-serif;
font-size: 13px;
line-height: 16px;
letter-spacing: 1px;
text-align: left;
text-shadow: 0 0 1px #ead5d8;
color: #9b6f72;
cursor: url("https://tcg.dollheart.org/misc/paw.gif"), pointer;
}

img {
vertical-align: middle;
}

/* -------------------------------------
ACCENTS & LINKS
------------------------------------- */

::selection {
background: #fde6f0;
color: #9b6f72;
}

a {
color: #d88497;
text-decoration: none;
transition: 0.2s ease;
cursor: url("https://tcg.dollheart.org/misc/paw.gif"), pointer;
}

a:hover {
color: #efaa95;
text-shadow: 0 0 4px #fde6f0;
}

a:active {
color: #c77878;
}

b,
strong {
font-weight: bold;
color: #d47778;
}

i,
em {
color: #d89a88;
}

u {
text-decoration: underline wavy #f2b5a2;
text-underline-offset: 3px;
}

h4 {
margin: 8px 0 5px;
padding-bottom: 3px;
border-bottom: 1px dotted #e6d4d4;
font-family: "Andika", Verdana, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 16px;
letter-spacing: 1.5px;
text-transform: lowercase;
color: #c47d87;
}

/* -------------------------------------
SCROLLBAR
------------------------------------- */

::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
background: #fbe9f8;
}

::-webkit-scrollbar-thumb {
background: #ffbac2;
border: 2px solid #fbe9f8;
border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
background: #efaa95;
}

/* -------------------------------------
LAYOUT
------------------------------------- */

.layout {
max-width: 1200px;
height: calc(100vh - 170px);
margin: 0 auto 40px;
overflow: hidden;
display: flex;
flex-direction: column;
background: transparent;
border: 15px solid transparent;
border-image: url("https://tcg.dollheart.org/misc/border.png") 15 round;
}

.layout,
.navigation {
position: relative;
z-index: 1;
}

.banner,
.main,
.footer {
background: #fff8fb;
}

#background-hearts {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 0;
}	

 /* -------------------------------------
NAVIGATION
------------------------------------- */

.navigation {
max-width: 1200px;
margin: 40px auto 0;
padding: 7px 7px 0;
}

.navi-link {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 6px;
}

.navi-link a {
 flex: 1 1 0;
position: relative;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 0;
padding: 4px 7px 2px;
background: linear-gradient(to bottom, #ffffff 0%, #fde6f0 48%, #fad0c2 100%);
border: 1px dotted #e6d4d4;
border-bottom: 1px solid #fff8fb;
border-radius: 9px 9px 0 0;
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.95), inset -1px 0 0 rgba(255,226,238,0.55), 1px 0 0 rgba(255,255,255,0.5);
font-family: Chomage;
font-size: 10px;
font-weight: normal;
line-height: 14px;
letter-spacing: 1px;
text-align: center;
text-transform: lowercase;
white-space: nowrap;
color: #c47d87;
text-shadow: 0 1px 0 #ffffff;
transition: 0.22s ease;
}

.navi-link a::before {
content: "";
position: absolute;
left: 5px;
right: 5px;
top: 3px;
height: 1px;
background: rgba(255,255,255,0.95);
}

.navi-link a:hover {
border-color: #efaa95;
border-bottom-color: #ffbac2;
transform: translateY(-2px);
z-index: 3;
}

.nav-icon {
width: 12px;
margin-right: 4px;
opacity: 0.55;
transition: 0.22s ease;
}

.navi-link a:hover .nav-icon {
opacity: 1;
transform: rotate(-8deg);
}

/* -------------------------------------
BANNER
------------------------------------- */

.banner {
flex-shrink: 0;
position: relative;
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 100%;
height: 400px;
padding: 30px;
background: url("https://tcg.dollheart.org/meri_banner.png") center;
background-size: cover;
border-bottom: 1px dotted #ffbac2;
}

/* -------------------------------------
SITE NAME
------------------------------------- */

.site-name {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
}

.site-name::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 20%, rgba(255,255,255,0.92) 50%, rgba(255,255,255,0.45) 80%, rgba(255,255,255,0) 100%);
border-top: 1px dashed rgba(255,255,255,0.95);
border-bottom: 1px dashed rgba(255,255,255,0.55);
filter: blur(0.4px);
}

.site-title {
font-family: "Chomage";
font-size: 42px;
line-height: 1;
letter-spacing: 3px;
color: #b69687;
text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 2px 4px rgba(117,88,73,.35), 0 0 8px rgba(255,255,255,.5);
text-transform: lowercase;
}

.site-subtitle {
font-family: "Momo Signature";
font-size: 17px;
line-height: 1.2;
color: #b57c88;
text-shadow: 0 1px 0 rgba(255,255,255,.95), 1px 2px 3px rgba(126,86,98,.35), 0 0 6px rgba(255,248,245,.6);
text-transform: lowercase;
}

.site-title-sub {
color: #a37a67;
}

/* -------------------------------------
MAIN COLUMNS
------------------------------------- */

.main {
display: grid;
grid-template-columns: 2.2fr 1fr;
gap: 1px;
flex: 1;
min-height: 0;
overflow: hidden;
background: #f6dab3;
border-bottom: 1px solid #ffbac2;
}

.main:has(.column:only-child) {
grid-template-columns: 1fr;
}

.column {
min-width: 0;
min-height: 0;
padding: 8px;
overflow-y: auto;
background: linear-gradient(to bottom, #fffdfd, #fff1f5);
}

.column:first-child {
background: linear-gradient(to bottom, #ffffff, #fff5f8);
}

.column:last-child {
background: linear-gradient(to bottom, #fffdfd, #fdeaf1);
border-left: 1px dotted #e6d4d4;
overflow-y: auto;
}

/* -------------------------------------
SECTIONS
------------------------------------- */

.box {
margin-bottom: 8px;
padding: 6px;
background: linear-gradient(to bottom, #ffffff, #fff8fb);
border: 1px solid #f1b8a5;
border-radius: 8px;
}

.box:last-child {
margin-bottom: 0;
}

.box p {
margin: 0 0 7px;
}

.box p:last-child {
margin-bottom: 0;
}

.intro-pixel {
float: left;
margin: 10px;
opacity: 0.7;
}

/* -------------------------------------
TITLES
------------------------------------- */

.title-big {
margin-bottom: 6px;
padding: 4px 6px 3px;
background: linear-gradient(to right, #fde6f0, #ffffff, #fde6f0);
border-radius: 10px;
font-family: "Cafe24Dongdong", Tahoma, sans-serif;
font-size: 17px;
line-height: 13px;
letter-spacing: 3px;
text-align: center;
text-transform: lowercase;
color: #d47778;
}

/* -------------------------------------
NOTES & LISTS
------------------------------------- */

.note {
margin-top: 6px;
padding: 5px;
border-left: 3px solid #ffbac2;
border-radius: 0 6px 6px 0;
font-size: 13px;
line-height: 15px;
color: #d89a88;
}

.tiny-list {
margin: 5px 0 0;
padding: 0;
list-style: none;
text-transform: lowercase;
}

.tiny-list li {
padding: 2px 0;
border-bottom: 1px dotted #e6d4d4;
color: #d89a88;
}

.list-icon {
height: 11px;
opacity: 0.5;
vertical-align: middle;
}

.side-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 20px;
margin: 5px 0 0;
padding: 0;
list-style: none;
}

.side-list li {
padding: 2px 0;
display: flex;
align-items: center;
gap: 4px;
color: #d89a88;
}

.side-list .list-icon {
opacity: 0.5;
vertical-align: -2px;
}

.trade-list {
margin: 6px 0;
padding: 0;
list-style: none;
}

.trade-list li {
display: flex;
align-items: flex-start;
gap: 6px;
margin-bottom: 6px;
line-height: 16px;
}

.trade-list li:last-child {
margin-bottom: 0;
}

.trade-list li img {
flex-shrink: 0;
width: 16px;
height: 16px;
object-fit: contain;
margin-top: 1px;
opacity: 0.7;
}

/* -------------------------------------
FORMS & BUTTONS
------------------------------------- */

#search {
padding: 8px 10px;
width: 200px;
border: 1px solid #e8b6c8;
border-radius: 6px;
background: #fffafb;
color: #765d66;
font-family: inherit;
font-size: 10pt;
box-sizing: border-box;
outline: none;
transition: all 0.2s ease;
}

#search:focus {
border-color: #d99bb3;
box-shadow: 0 0 5px rgba(217, 155, 179, 0.3);
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
padding: 5px 12px;
background: linear-gradient(to bottom, #ffffff, #fde6f0);
border: 1px dotted #e6d4d4;
border-radius: 7px;
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.95), inset 0 0 4px rgba(255,186,194,0.2);
font-family: "Andika", Verdana, sans-serif;
font-size: 13px;
line-height: 16px;
letter-spacing: 0.5px;
color: #c47d87;
text-shadow: 0 1px 0 #ffffff;
cursor: url("https://tcg.dollheart.org/misc/paw.gif"), pointer;
transition: 0.2s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
background: linear-gradient(to bottom, #ffffff, #fad0e2);
border-color: #efaa95;
color: #d47778;
box-shadow:
inset 1px 1px 0 rgba(255,255,255,0.95),
0 0 5px rgba(255,186,194,0.25);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
transform: translateY(1px);
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea {
box-sizing: border-box;
width: 100%;
padding: 6px 8px;
background: #fffdfd;
border: 1px dotted #e6d4d4;
border-radius: 6px;
box-shadow: inset 0 0 4px rgba(255,186,194,0.18);
font-family: "Andika", Verdana, sans-serif;
font-size: 13px;
line-height: 16px;
letter-spacing: 0.5px;
color: #9b6f72;
outline: none;
transition: 0.2s ease;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
background: #fff8fb;
border-color: #efaa95;
box-shadow:
inset 0 0 4px rgba(255,186,194,0.2),
0 0 4px rgba(255,186,194,0.25);
}

textarea {
min-height: 100px;
resize: vertical;
}

input::placeholder,
textarea::placeholder {
color: #c9a2a8;
opacity: 1;
}

select {
box-sizing: border-box;
padding: 6px 28px 6px 8px;
background: #fffdfd;
border: 1px dotted #e6d4d4;
border-radius: 6px;
box-shadow: inset 0 0 4px rgba(255,186,194,0.18);
font-family: "Andika", Verdana, sans-serif;
font-size: 13px;
line-height: 16px;
letter-spacing: 0.5px;
color: #9b6f72;
outline: none;
cursor: url("https://tcg.dollheart.org/misc/paw.gif"), pointer;
transition: 0.2s ease;
}

select:focus,
select:hover {
background: #fff8fb;
border-color: #efaa95;
box-shadow: inset 0 0 4px rgba(255,186,194,0.2), 0 0 4px rgba(255,186,194,0.25);
}

/* -------------------------------------
IMAGE TABLE
------------------------------------- */

.image-table {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 15px;
width: 100%;
}

.image-table a {
display: flex;
justify-content: center;
align-items: flex-end;
position: relative;
}

.image-table a:hover {
opacity: 0.65;
}

.image-table td {
text-align: center;
vertical-align: middle;
}

/* -------------------------------------
YAP SQUAD
------------------------------------- */

.yap-img {
height: 170px;
display: block;
background: transparent;
}

.yap-tooltip {
position: relative;
}

.yap-tooltip::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: 8px;
transform: translateX(-50%);
padding: 3px 8px;
background: rgba(255, 232, 240, 0.96);
color: #8f5f68;
font-family: "Andika", Verdana, sans-serif;
font-size: 12px;
line-height: 15px;
letter-spacing: 0.5px;
white-space: nowrap;
border: 1px solid #e6a7b7;
border-radius: 6px;
box-shadow: 0 3px 8px rgba(180, 120, 140, 0.35);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}

.yap-tooltip:hover::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-3px);
}

/* -------------------------------------
CARD TOOLTIP
------------------------------------- */

.card-tooltip-wrap img {
position: relative;
}

.card-tooltip-wrap img:hover {
cursor: url("https://tcg.dollheart.org/misc/paw.gif"), pointer;
}

.custom-card-tooltip {
position: fixed;
padding: 4px 10px;
background: rgba(255, 232, 240, 0.96);
color: #8f5f68;
font-family: "Andika", verdana, sans-serif;
font-size: 12px;
letter-spacing: 0.5px;
white-space: nowrap;
border: 1px solid #e6a7b7;
border-radius: 6px;
box-shadow: 0 3px 8px rgba(180, 120, 140, 0.35);
pointer-events: none;
opacity: 0;
transform: translateY(5px);
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 9999;
}

.custom-card-tooltip.show {
opacity: 1;
transform: translateY(0);
}

/* -------------------------------------
FOOTER
------------------------------------- */

.footer {
padding: 8px;
border-top: 1px dotted #efaa95;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: inset 0 1px 0 #ffffff, inset 0 0 8px rgba(222,240,189,0.65);
line-height: 14px;
letter-spacing: 1px;
text-align: center;
color: #9b6f72;
}

.footer a {
color: #d88497;
border-bottom: 1px dotted #efaa95;
}

.footer a:hover {
color: #efaa95;
text-shadow: 0 0 4px #ffffff;
}

/* -------------------------------------
MUSIC PLAYER
------------------------------------- */

[glenplayer04] {
z-index: 69;
--MusicPlayer-FadeIn-Speed: 0.25s;
--MusicPlayer-Edge-Offset: 25px;
--MusicPlayer-Width: 280px;
--MusicPlayer-Rounded-Corners: 0px;
--MusicPlayer-Border-Size: 0px;
--MusicPlayer-Border-Color: #f1b8a5;
--MusicPlayer-BG: #fff8fb;
--MusicPlayer-Padding: 0.85rem;
--MusicPlayer-Parts-Spacing: 0.8rem;
--MusicPlayer-Image-Size: 54px;
--MusicPlayer-Image-Rounded-Corners: 8px;
--MusicPlayer-Buttons-Style: "fill";
--MusicPlayer-Buttons-Padding: 10px;
--MusicPlayer-Buttons-BG: #fde6f0;
--MusicPlayer-Buttons-Size: 0.735rem;
--MusicPlayer-Buttons-Color: #d47778;
--MusicPlayer-Waves-Empty-Color: #f3d9df;
--MusicPlayer-Waves-Fill-Color: #ffbac2;
--MusicPlayer-Waves-Number: 30;
--MusicPlayer-Waves-Max-Height: 42px;
--MusicPlayer-Time-Font: "Andika";
--MusicPlayer-Time-Font-Size: 0.725rem;
--MusicPlayer-Time-Color: #9b6f72;
--MusicPlayer-Song-Name-Font: "Andika";
--MusicPlayer-Song-Name-Font-Size: 0.75rem;
--MusicPlayer-Song-Name-Top-Border-Size: 1px;
--MusicPlayer-Song-Name-Top-Border-Color: #e6d4d4;
--MusicPlayer-Song-Name-Padding: 0.85rem;
--MusicPlayer-Song-Name-BG: #fffdfd;
--MusicPlayer-Song-Name-Text-Color: #a37a67;
--MusicPlayer-Song-Name-Letter-Spacing: 0.0325em;
--MusicPlayer-Song-Name-Text-Align: center;
--MusicPlayer-Autoplay: "no";
--MusicPlayer-Loop: "no";
--MusicPlayer-Multiple-Players-Spacing: 10px;
--MusicPlayer-Multiple-Players-Autoplay-Next: "no";
--MusicPlayer-Multiple-Players-Loop-List: "no";
border: 15px solid transparent;
border-image: url("https://tcg.dollheart.org/misc/border.png") 15 round;
}

/* -------------------------------------
RESPONSIVE MEDIA
------------------------------------- */

@media (max-width: 768px) {
body {
padding: 10px;
}

.layout {
width: 100%;
max-width: 100%;
height: auto;
margin: 20px auto;
border-width: 10px;
overflow: visible;
}

.navigation {
width: 100%;
margin-top: 20px;
padding: 7px 7px 0;
}

.navi-link {
flex-wrap: wrap;
align-items: stretch;
gap: 5px;
}

.navi-link a {
flex: 1 1 calc(50% - 5px);
padding: 5px 7px;
border-radius: 8px;
white-space: normal;
}

.navi-link a::before {
display: none;
}

.banner {
height: 220px;
padding: 15px;
background-position: center;
}

.site-name {
align-items: center;
width: 100%;
text-align: center;
padding: 10px;
}

.site-title {
font-size: 30px;
letter-spacing: 2px;
}

.site-subtitle {
font-size: 15px;
}

.main {
display: flex;
flex-direction: column;
overflow: visible;
}

.column {
width: 100%;
overflow: visible;
padding: 8px;
}

.column:last-child {
border-left: 0;
border-top: 1px dotted #e6d4d4;
}

.box {
margin-bottom: 8px;
}

select {
max-width: 100%;
width: 100%;
 min-width: 0;
}

td select {
max-width: 100%;
width: 100%;
}

.sparkling-table {
width: 100% !important;
table-layout: fixed;
}

.sparkling-table tr {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.sparkling-table.coupons td {
flex: 0 0 33.333%;
width: 33.333%;
padding: 5px;
}

.sparkling-table.boosts td {
flex: 0 0 33.333%;
width: 33.333%;
padding: 5px;
}

.sparkling-table td img {
width: 70% !important;
height: auto !important;
max-width: 100%;
}

.side-list {
grid-template-columns: 1fr;
}

.image-table {
flex-wrap: wrap;
gap: 10px;
}

.yap-img {
height: 120px;
}

.footer {
border-radius: 0 0 8px 8px;
}

[glenplayer04],
#glenplayer04,
.glenplayer04 {
display: none !important;
}
}