/* CSS Document */

html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	text-align: left;
	line-height:1.2em;

}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

ol,ul {
	list-style: none;
}

q:before,q:after,
blockquote:before,blockquote:after {
	content: "";
}

a img,:link img,:visited img { 
	border:none 

}

sup {
line-height: 0;
vertical-align: text-top;

}

/* Authenticated Club Penguin Style */

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #555;
    background: #fff;
    text-align: center;
    width: 100%;
    height: 100%;
}

#play-page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header */
#hdrWrap {
    position: relative;
    height: 32px;
    width: 100%;
    margin: 0 0 5px 0;
    background-color: #00529b; /* Fallback blue */
    /* Mimic the gradient of playNavBg.gif */
    background-image: linear-gradient(to bottom, #0076a3 0%, #00529b 100%);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    z-index: 100;
}

#navBg {
    width: 100%;
    height: 32px;
}

#htmlNav {
    max-width: 900px; /* Or 842px originally */
    margin: 0 auto;
    height: 32px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Align links to right like original usually */
}

/* Branding - "YUKON" text to replace logo slightly */
.logo-text {
    position: absolute;
    left: 10px;
    top: 5px;
    font-weight: bold;
    font-size: 18px;
    color: #feb62a; /* Gold/Orange */
    text-shadow: 1px 1px 0 #003366;
    letter-spacing: 1px;
    font-family: "Arial Black", Arial, sans-serif;
}

#bu_nav {
    list-style: none;
    display: flex;
    margin-right: 10px;
}

#bu_nav li {
    margin: 0 4px;
    font-size: 11px;
    font-weight: 700;
    color: #feb62a; /* Orange separator/dot */
}

#bu_nav li a {
    color: #fff;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 700;
}

#bu_nav li a:hover {
    color: #feb62a;
}

/* Game Container Wrapper */
#game-container-wrapper {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff; /* Original play page was white usually */
    /* Keep it clean white. */
    padding: 20px;
    overflow: hidden;
}

#game {
    /* Box shadow for "container" effect since we don't have the image borders */
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    /* Yukon defaults */
    max-width: 100%;
    max-height: calc(100vh - 100px);
    aspect-ratio: 1520/960;
}

#game-container-wrapper:fullscreen {
    background-color: #000;
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-container-wrapper:fullscreen #game {
    max-height: 100%;
    max-width: 100%;
    box-shadow: none;
}

/* Footer */
#ftrWrap {
    width: 100%;
    margin-top: auto;
    padding: 10px 0 20px 0;
    font-size: 11px;
    background-color: #fff;
}

#ftrBg {
    max-width: 836px;
    margin: 0 auto;
    text-align: center;
}

#ftrContent ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

#ftrContent ul li {
    margin: 0 4px;
    color: #b4b4b4; /* Separator color */
    font-weight: 800;
}

#ftrContent ul li a {
    color: #b4b4b4;
    text-decoration: none;
    font-weight: 700;
    font-size: 11px;
}

#ftrContent ul li a:hover {
    color: #045aa1; /* CP Blue hover */
}

#ftrContent p {
    color: #a1a1a1;
    font-size: 10.5px;
    text-align: center;
}

.asterisk {
    color: #00529b;
}

.updated {
    font-size: 10px;
}

/* Dark Mode Overrides */
body.dark-mode {
    background-color: #1a1e24;
    color: #eceff4;
}

body.dark-mode #play-page-wrapper {
    background-color: #1a1e24;
}

body.dark-mode #game-container-wrapper {
    background-color: #1a1e24;
}

body.dark-mode #ftrWrap {
    background-color: #1a1e24;
    border-top: 3px solid #4c566a; /* Nord-like border */
}

body.dark-mode #ftrContent p,
body.dark-mode #ftrContent ul li {
    color: #d8dee9;
}

body.dark-mode #ftrContent ul li a {
    color: #88c0d0; /* Cyan */
}

body.dark-mode #ftrContent ul li a:hover {
    color: #81a1c1; /* Lighter Cyan */
}

body.dark-mode #hdrWrap {
    /* Optional: Change header in dark mode? 
       Leaving the gradient keeps the CP feel but we can soften it.
       Let's keep the classic gradient even in dark mode for identity. */
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

body.dark-mode .logo-text {
    /* Ensure visibility if we changed header bg, but we didn't */
    color: #ebcb8b; /* Slightly softer gold */
}