* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Georgia', serif;
overflow: hidden;
background-image: url('assets/img/bg.png');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
color: #e8dcc0;
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="8" fill="rgba(255%2C255%2C255%2C0.3)" stroke="rgba(200%2C50%2C50%2C0.8)" stroke-width="2"/></svg>'), auto;
}

#wonderland {
position: relative;
width: 100vw;
height: 100vh;
background-image:
radial-gradient(circle at 20% 30%, rgba(139, 69, 19, 0.3) 1px, transparent 1px),
radial-gradient(circle at 80% 70%, rgba(75, 0, 130, 0.2) 1px, transparent 1px);
background-size: 150px 150px, 200px 200px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}



#alice {
position: absolute;
width: 130px;
height: 208px;
background-image: url('assets/img/alice.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 600;
cursor: pointer;
outline: none !important;
box-shadow: none !important;
border: none !important;
top: auto;
left: auto;
}

#alice:focus,
#alice:active,
#alice:hover {
outline: none !important;
box-shadow: none !important;
border: none !important;
}



.playing-card {
position: absolute !important;
width: 225px;
height: 315px;
/* Weathered card background */
background: linear-gradient(135deg,
#f5f3f0 0%,
#ede8e0 25%,
#f8f6f2 50%,
#ebe6dd 75%,
#f2efea 100%);
border: 2px solid #8b7355;
border-radius: 12px;
user-select: none;
-webkit-user-select: none;
/* Safari */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE/Edge */
touch-action: none;
/* Prevent default touch behaviors */
transition: none;
cursor: grab;
-webkit-touch-callout: none;
/* Disable iOS callout */
-webkit-tap-highlight-color: transparent;
/* Remove tap highlight */
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 15px;
/* Weathered shadow and texture */
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
z-index: 500;
outline: none;
text-align: center;
right: auto !important;
bottom: auto !important;
/* Add subtle texture */
position: relative;
}

.playing-card:hover {
cursor: grab;
}

.playing-card:active {
cursor: grabbing;
}

/* Add weathered texture overlay */
.playing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(139, 115, 85, 0.1) 1px, transparent 1px),
radial-gradient(circle at 80% 70%, rgba(139, 115, 85, 0.08) 1px, transparent 1px),
radial-gradient(circle at 40% 80%, rgba(101, 67, 33, 0.05) 1px, transparent 1px);
border-radius: 12px;
pointer-events: none;
}

/* Weathered edges */
.playing-card::after {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: linear-gradient(45deg,
rgba(139, 115, 85, 0.3) 0%,
transparent 20%,
transparent 80%,
rgba(139, 115, 85, 0.2) 100%);
border-radius: 13px;
z-index: -1;
pointer-events: none;
}

.suit {
font-size: 140px;
margin-top: 10px;
align-self: center;
position: relative;
z-index: 2;
}

.suit.joker {
background-image: url('assets/img/joker.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 140px;
height: 140px;
font-size: 0;
}

.suit.hearts,
.suit.diamonds {
color: #c41e3a;
/* Slightly muted red */
}

.suit.spades,
.suit.clubs {
color: #2c2c2c;
/* Slightly softer black */
}

.card-text {
font-size: 30px;
color: #3a3a3a;
font-weight: bold;
/* Softer than pure black */
flex-grow: 1;
display: flex;
align-items: center;
text-align: center;
line-height: 1.2;
position: relative;
z-index: 2;
}



.content-mirror {
position: fixed;
background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
border: 4px solid #8B0000;
border-radius: 20px;
/*width: 500px;*/
max-width: 90vw !important;
/* Prevent exceeding viewport width */
max-height: 85vh !important;
/* Prevent exceeding viewport height */
width: auto !important;
/* Let it size naturally within max-width */
overflow-y: auto;
overflow-x: auto;
/* Handle horizontal overflow if needed */
/* Allow scrolling if content is too tall */
box-sizing: border-box;
padding: 15px;
box-shadow:
0 0 30px rgba(139, 0, 0, 0.8),
inset 0 0 20px rgba(0, 0, 0, 0.5);
z-index: 800;
display: none;
animation: mirrorAppear 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
backdrop-filter: blur(5px);
}

/* Desktop-specific adjustments */
@media (min-width: 769px) {
.content-mirror {
font-size: 21px;
max-width: 80vw !important;
/* Slightly smaller max on desktop */
max-height: 80vh !important;
min-width: 300px;
/* Minimum width for readability */
min-height: 200px;
/* Minimum height for readability */
}
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {

.playing-card {
/* Slightly larger touch targets on mobile */
min-width: 170px;
min-height: 238px;
}

/* Content mirrors on mobile */
.content-mirror {
width: 85vw !important;
max-height: 75vh !important;
font-size: 16px;
padding: 10px;
min-width: unset;
/* Remove min-width on mobile */
min-height: unset;
/* Remove min-height on mobile */
}

/* Playing cards on mobile */
.playing-card {
width: 140px !important;
/* Smaller than desktop 180px */
height: 196px !important;
/* Smaller than desktop 252px */
padding: 10px !important;
}

/* Card text on mobile */
.suit {
font-size: 100px !important;
/* Smaller than desktop 150px */
}

.suit.joker {
width: 100px !important;
/* Smaller than desktop 120px */
height: 100px !important;
}

.card-text {
font-size: 25px !important;
/* Smaller than desktop 54px */
line-height: 1.1;
}


/* Alice sprite on mobile */
#alice {
width: 90px !important;
/* Smaller than desktop 50px */
height: 144px !important;
/* Smaller than desktop 80px */
}

/* Cheshire grin on mobile */
.cheshire-grin {
width: 40px !important;
/* Smaller than desktop 60px */
height: 20px !important;
/* Smaller than desktop 30px */
}

/* Title adjustments on mobile */
h1,
.title {
font-size: 24px !important;
margin: 10px 0 !important;
}
}

/* Landscape mobile adjustments */
@media (max-width: 768px) and (orientation: landscape) {
.content-mirror {
max-height: 90vh !important;
width: 70vw !important;
}
}

@keyframes mirrorAppear {
0% {
opacity: 0;
transform: scale(0.3) rotate(-10deg);
filter: blur(10px);
}

50% {
transform: scale(1.1) rotate(2deg);
}

100% {
opacity: 1;
transform: scale(1) rotate(0deg);
filter: blur(0px);
}
}

.content-mirror h2 {
color: #DC143C;
margin-bottom: 15px;
border-bottom: 2px solid #8B0000;
padding-bottom: 8px;
text-shadow: 0 0 10px rgba(220, 20, 60, 0.5);
font-family: 'Georgia', serif;
}

.content-mirror p,
.content-mirror li,
.content-mirror span {
line-height: 1.6;
color: #e8dcc0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 100%;
}

/* Handle very wide content like URLs or code */
.content-mirror pre,
.content-mirror code {
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 100%;
overflow-x: auto;
}

.close-btn {
position: absolute;
top: 15px;
right: 20px;
background: #8B0000;
color: #fff;
border: 2px solid #DC143C;
border-radius: 50%;
width: 30px;
height: 30px;
cursor: pointer;
font-weight: bold;
font-size: 16px;
transition: all 0.3s ease;
}

.close-btn:hover {
background: #DC143C;
transform: rotate(90deg);
box-shadow: 0 0 15px rgba(220, 20, 60, 0.8);
}



#madnessTitle {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
padding: 20px 30px;
border: 3px solid #8B0000;
border-radius: 15px;
z-index: 2;
pointer-events: none;
text-align: center;
box-shadow: 0 0 30px rgba(139, 0, 0, 0.6);
}

#madnessTitle h1 {
color: #DC143C;
font-size: 30px;
text-shadow: 0 0 15px rgba(220, 20, 60, 0.8);
margin-bottom: 10px;
pointer-events: none;
font-family: 'Georgia', serif;
}

#madnessTitle p {
color: #e8dcc0;
font-style: italic;
pointer-events: none;
font-size: 16px;
}

.floating-teacup {
position: absolute;
width: 80px;
height: 60px;
pointer-events: none;
background: #8B4513;
border-radius: 0 0 20px 20px;
animation: float 15s infinite ease-in-out;
opacity: 0.6;
z-index: 3;
}

.floating-teacup::before {
content: '';
position: absolute;
pointer-events: none;
right: -15px;
top: 5px;
width: 12px;
height: 15px;
border: 3px solid #8B4513;
border-left: none;
border-radius: 0 10px 10px 0;
}

@keyframes float {

0%,
100% {
transform: translateY(0px) rotate(0deg);
}

25% {
transform: translateY(-20px) rotate(5deg);
}

50% {
transform: translateY(-10px) rotate(-3deg);
}

75% {
transform: translateY(-25px) rotate(7deg);
}
}

.cheshire-grin {
position: fixed;
width: 600px;
height: 300px;
background-image: url('assets/img/grin.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
opacity: 0;
z-index: 1;
transition: opacity 1s ease-in-out;
}


@keyframes grin {

0%,
45.45% {
opacity: 0;
transform: scale(1);
}

50% {
opacity: 0.6;
transform: scale(1.2);
}

95.45%,
100% {
opacity: 0.6;
transform: scale(1.2);
}
}

/* Custom scrollbar for content */
.content-mirror::-webkit-scrollbar {
width: 8px;
}

.content-mirror::-webkit-scrollbar-track {
background: #1a1a1a;
border-radius: 4px;
}

.content-mirror::-webkit-scrollbar-thumb {
background: #8B0000;
border-radius: 4px;
}

.content-mirror::-webkit-scrollbar-thumb:hover {
background: #DC143C;
}