/* KineticPhysics "classic era" theme (late-2000s online-toy-site look).
   Loaded last on every page so it overrides per-page inline styles. */

:root {
    --kp-sky-top: #5fa2d6;
    --kp-sky-bottom: #cfe3f3;
    --kp-nav-top: #6fa8dc;
    --kp-nav-bottom: #2f6eb0;
    --kp-nav-border: #1d4a7a;
    --kp-panel-border: #8aa4bd;
    --kp-panel-bg: #f3f7fb;
    --kp-link: #0b55a8;
    --kp-green-top: #f08aa3;
    --kp-green-bottom: #c4344f;
    --kp-green-border: #8c1f35;
}

html {
    background: var(--kp-sky-bottom);
}

body {
    font-family: Verdana, Geneva, Arial, sans-serif !important;
    font-size: 12px !important;
    color: #222 !important;
    background:
        url('Images/movingClouds.jpg') top left repeat-x,
        linear-gradient(to bottom, var(--kp-sky-top) 0, var(--kp-sky-bottom) 420px, #e8f1f8 100%) !important;
    background-attachment: scroll !important;
    animation: none !important;
    min-height: 100vh;
}

a { color: var(--kp-link); }
a:hover { color: #c24a00; text-decoration: underline; }

/* ---- page sheet: white "paper" on the sky backdrop ---- */
.container {
    background: #fff;
    border: 1px solid #5d7e9f;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 4px 14px rgba(0, 40, 90, 0.35);
    padding: 8px 14px 14px !important;
    margin-bottom: 30px !important;
}

.feedback-top,
.feedback-top a {
    font-size: 10px;
    color: #6b7f93;
}

/* ---- banner (keeps Images/bgBanner.png from each page) ---- */
.banner-container {
    background: transparent !important;
    border: none !important;
    height: 90px !important;
    overflow: visible !important;
}
.banner-logo { height: 155px !important; }

/* ---- navigation bar ---- */
.navbar {
    background: linear-gradient(to bottom, var(--kp-nav-top) 0%, #4a8bc9 48%, var(--kp-nav-bottom) 100%) !important;
    border: 1px solid var(--kp-nav-border) !important;
    border-radius: 0 0 5px 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    padding: 7px 8px !important;
    margin-bottom: 12px !important;
    color: #cfe3f5;
    font-size: 12px;
}
.navbar a {
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px !important;
    font-weight: bold;
    margin: 0 4px !important;
    padding: 2px 6px;
    border-radius: 3px;
    text-shadow: 0 1px 1px rgba(0, 30, 70, 0.7) !important;
}
.navbar a:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff !important;
    text-decoration: none;
}
#topUsernameDisplay {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-shadow: 0 1px 1px rgba(0, 30, 70, 0.7);
}

/* ---- boxes / panels ---- */
.box,
.sidebar-box,
.popup-box {
    background: var(--kp-panel-bg);
    border: 1px solid var(--kp-panel-border) !important;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 40, 90, 0.18);
}
.panel-header,
.login-header,
.popup-header {
    background: linear-gradient(to bottom, #7db3e2 0%, #4d8dc9 100%) !important;
    color: #fff !important;
    border-bottom: 1px solid var(--kp-nav-border) !important;
    border-radius: 3px 3px 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 30, 70, 0.7) !important;
    animation: none !important;
}
.login-header { padding: 5px 8px !important; font-size: 13px; }
.col-login { background: #e6eef6 !important; }
.col-right-top { background: linear-gradient(to bottom, #f6fafd 0%, #c4daee 100%) !important; }
.col-mid { background: #fff !important; }

.header-comic {
    font-family: "Comic Sans MS", "Comic Neue", cursive !important;
    color: #1d4a7a;
    font-size: 17px;
}

/* ---- buttons: glossy green "go" buttons ---- */
button,
.register-link-btn,
.login-btn,
.logout-btn,
.claim-btn,
.action-btn,
.register-btn {
    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(80, 0, 20, 0.6) !important;
    background: linear-gradient(to bottom, var(--kp-green-top) 0%, var(--kp-green-bottom) 100%) !important;
    border: 1px solid var(--kp-green-border) !important;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 1px rgba(0, 0, 0, 0.25);
    padding: 4px 14px;
    cursor: pointer;
}
button:hover,
.register-link-btn:hover,
.claim-btn:hover:not(:disabled) {
    filter: brightness(1.08);
    background: linear-gradient(to bottom, var(--kp-green-top) 0%, var(--kp-green-bottom) 100%) !important;
    text-decoration: none;
}
button:active { filter: brightness(0.93); }
button:disabled,
.claim-btn:disabled { filter: grayscale(0.9) brightness(1.1); cursor: not-allowed; color: #eee !important; }

.play-this-btn,
.btn-download {
    font-family: "Comic Sans MS", "Comic Neue", cursive !important;
    background: linear-gradient(to bottom, var(--kp-green-top) 0%, var(--kp-green-bottom) 100%) !important;
    border: 2px solid var(--kp-green-border) !important;
    border-radius: 8px !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(80, 0, 20, 0.7) !important;
}
.btn-download-orange {
    background: linear-gradient(to bottom, #ffd35a 0%, #f0821a 100%) !important;
    border-color: #a14d00 !important;
}

/* ---- form fields ---- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input:not([type]),
textarea,
select {
    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: 12px;
    border: 1px solid #7a94ab !important;
    border-radius: 3px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
    padding: 3px 4px;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #2f6eb0 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 3px rgba(47, 110, 176, 0.6);
}

/* ---- thumbnails & small details ---- */
.featured-thumbnail,
.avatar-viewport,
.download-icon-box {
    border: 1px solid var(--kp-panel-border) !important;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 40, 90, 0.3);
}
.avatar-viewport:hover { border-color: var(--kp-nav-bottom) !important; }

.reward-day { border-color: var(--kp-panel-border); border-radius: 4px; background: #e8eff6; }
.reward-day.active { border-color: #f0821a; background: #fff1c9; }

/* ---- footer ---- */
.footer-links,
.footer-links p {
    color: #6b7f93 !important;
    font-size: 10px;
}
.footer-links {
    border-top: 1px solid #c9d6e3;
    margin-top: 24px !important;
    padding-top: 10px;
}
.footer-links a { color: #4a6f96; }

/* ---- tables / lists ---- */
table { border-collapse: collapse; }
th {
    background: linear-gradient(to bottom, #e7f0f8, #cddfee);
    border: 1px solid var(--kp-panel-border);
}
td { border-color: #d3dfeb; }