/* ==========================================================
   Enchantment of the Seas 2027 - MASTER STYLESHEET
   Created by Aaron Brown.  Please do not steal my HTML.
   Best viewed at 800x600 or higher.  Speakers ON.
   ========================================================== */

html, body { margin: 0; padding: 0; }

body {
    font-family: "Times New Roman", Times, serif;
    color: #000000;
    background-color: #00002a;
}

/* ---- Per-frame body backgrounds ---- */
body.contentbody {
    background-image: url('assets/images/bg_stars.png');
    background-color: #00002a;
    color: #ffffff;
    padding: 10px;
}
body.topbody {
    background: #001a66;
    background: linear-gradient(#003bb3, #001133);
    overflow: hidden;
    text-align: center;
}
body.navbody {
    background: #101820;
    background: linear-gradient(#26313b, #0a0f14);
    color: #ffff66;
    text-align: center;
    padding: 6px 4px;
}
body.plainbody {
    background-image: url('assets/images/bg_stars.png');
    background-color: #00002a;
    color: #ffffff;
    text-align: center;
    padding: 0;
}

/* ---- Links, everywhere ---- */
a         { color: #ffee00; }
a:visited { color: #ffd0ff; }
a:hover   { color: #ffffff; background: #0000aa; }
.panel a         { color: #0000cc; }
.panel a:visited { color: #7a00b3; }
.panel a:hover   { color: #ffffff; background: #0000cc; }

/* ---- Beveled silver panels (the "embossed" look) ---- */
.panel {
    background: #d4d0c8;
    background: linear-gradient(#f2f0ec, #cfc9be);
    color: #000000;
    border: 3px outset #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
    padding: 14px 18px;
    margin: 0 auto 16px auto;
    max-width: 720px;
    box-shadow: 4px 4px 0 #000033;
}
.panel h2, .panel h3 { color: #000066; }

.panel-blue {
    background: #cfe4ff;
    background: linear-gradient(#eaf4ff, #b9d6ff);
    border-color: #ffffff #6a8fbf #6a8fbf #ffffff;
}

/* ---- Big page titles ---- */
h1.pagetitle {
    font-family: Impact, "Arial Black", sans-serif;
    font-size: 34px;
    letter-spacing: 1px;
    color: #ffee33;
    text-align: center;
    text-shadow: 2px 2px 0 #cc0000, 4px 4px 0 #000000;
    margin: 6px 0 12px 0;
}
h2.section {
    font-family: Impact, "Arial Black", sans-serif;
    color: #00ffff;
    text-shadow: 2px 2px 0 #000000;
    text-align: center;
    letter-spacing: 1px;
}

/* ---- The famous BLUE HORIZONTAL DIVIDER ---- */
.bluebar {
    height: 10px;
    margin: 8px 0;
    background: linear-gradient(#bfe0ff, #0033cc, #001133);
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #000033;
}

/* ---- Blinking text (real <blink> is dead, so we fake it faithfully) ---- */
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- Rainbow-ish glowing "NEW!" text ---- */
.hot {
    color: #ff2200;
    font-weight: bold;
    font-family: Arial, sans-serif;
    text-shadow: 1px 1px 0 #ffff00;
}

/* ---- Marquee bar ---- */
.marqueebar {
    background: #000000;
    color: #00ff00;
    font-family: "Courier New", monospace;
    font-weight: bold;
    border-top: 2px solid #00aa00;
    border-bottom: 2px solid #004400;
    padding: 3px 0;
}

/* ==========================================================
   TOP FRAME
   ========================================================== */
.topwrap { display: table; width: 100%; height: 100%; }
.topcell { display: table-cell; vertical-align: middle; }
.toptitle {
    font-family: Impact, "Arial Black", sans-serif;
    font-size: 30px;
    color: #ffee33;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #aa0000, 4px 4px 6px #000000;
    line-height: 1.05;
}
.topsub {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #aefcff;
    text-shadow: 1px 1px 0 #000044;
}
.torch { vertical-align: middle; }

/* ==========================================================
   LEFT NAV FRAME
   ========================================================== */
.navtitle {
    font-family: Impact, sans-serif;
    color: #ffcc00;
    font-size: 15px;
    text-shadow: 1px 1px 0 #000000;
    margin: 2px 0 8px 0;
}
a.navbtn {
    display: block;
    width: 150px;
    margin: 5px auto;
    padding: 6px 4px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #001b4d !important;
    background: #c9d6e5;
    background: linear-gradient(#f0f5fb, #9fb6d4);
    border: 2px outset #ffffff;
    border-right-color: #4a5a72;
    border-bottom-color: #4a5a72;
}
a.navbtn:hover {
    color: #ffffff !important;
    background: #2a5db0;
    background: linear-gradient(#3f7de0, #163e86);
    border-style: inset;
}
.navmini {
    color: #9fe0ff;
    font-size: 11px;
    font-family: Arial, sans-serif;
    margin-top: 8px;
    line-height: 1.5;
}
.navmini b { color: #ffff66; }

/* ==========================================================
   ODOMETER VISITOR COUNTER
   ========================================================== */
.odometer {
    display: inline-block;
    padding: 3px;
    background: #222;
    border: 2px inset #888;
}
.odo-digit {
    display: inline-block;
    width: 16px;
    padding: 2px 0;
    margin: 0 1px;
    font-family: "Courier New", monospace;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #00ff66;
    background: #000000;
    background: linear-gradient(#003300, #000000, #002200);
    border: 1px solid #00aa44;
    text-shadow: 0 0 4px #00ff66;
}

/* ==========================================================
   GUESTBOOK POSTS
   ========================================================== */
.board { width: 100%; border-collapse: collapse; }
.board td { vertical-align: top; }
.postbox {
    border: 2px ridge #99aabb;
    background: #ffffff;
    color: #000000;
    margin: 8px 0;
    padding: 0;
}
.postbox .who {
    background: #000088;
    background: linear-gradient(#0033cc, #000066);
    color: #ffff66;
    font-family: Arial, sans-serif;
    font-weight: bold;
    padding: 4px 8px;
    font-size: 13px;
}
.postbox .who .when { float: right; color: #aecbff; font-weight: normal; font-size: 11px; }
.postbox .body {
    padding: 8px 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #002200;
}
form.retro label { font-family: Arial, sans-serif; font-weight: bold; color: #000066; }
form.retro input[type=text],
form.retro textarea {
    font-family: "Courier New", monospace;
    font-size: 14px;
    border: 2px inset #cccccc;
    background: #ffffee;
    padding: 4px;
}
form.retro input.btn {
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #000066;
    background: linear-gradient(#f0f5fb, #9fb6d4);
    border: 2px outset #ffffff;
    padding: 4px 16px;
    cursor: pointer;
}
form.retro input.btn:hover { border-style: inset; color:#ffffff; background:linear-gradient(#3f7de0,#163e86); }

/* ==========================================================
   ATTENDEES
   ========================================================== */
.crewgrid { text-align: center; }
.crewcard {
    display: inline-block;
    width: 190px;
    margin: 10px;
    padding: 10px;
    vertical-align: top;
    background: linear-gradient(#f2f0ec, #cfc9be);
    border: 3px outset #ffffff;
    border-right-color: #808080;
    border-bottom-color: #808080;
    box-shadow: 3px 3px 0 #000044;
}
.crewcard img.face {
    width: 150px; height: 165px; object-fit: cover;
    border: 3px ridge #99aabb; background:#fff;
}
.crewcard .cname {
    font-family: Impact, sans-serif;
    font-size: 18px; color: #000066; margin: 6px 0 2px 0;
}
.crewcard .crole {
    font-family: Arial, sans-serif;
    font-size: 12px; color: #660000;
}

/* ---- Music list (links) ---- */
.musiclist { list-style: none; padding: 0; max-width: 520px; margin: 0 auto; }
.musiclist li {
    background: #ffffee; color: #000; margin: 5px 0; padding: 6px 10px;
    border: 2px ridge #ccbb88; font-family: Arial, sans-serif; text-align: left;
}
.musiclist li a { color: #0000cc; font-weight: bold; }

/* ---- Music players (jukebox) ---- */
.jukebox { list-style: none; padding: 0; max-width: 600px; margin: 0 auto; }
.jukebox li {
    background: #ffffee; color:#000; margin: 8px 0; padding: 8px 10px;
    border: 2px ridge #ccbb88; text-align: left;
}
.jukebox .song { font-family: Arial, sans-serif; font-weight: bold; font-size: 14px; color:#000066; }
.jukebox .artist { font-family: Arial, sans-serif; font-size: 12px; color:#444; }
.jukebox audio { width: 100%; margin-top: 6px; }
.jukebox .dl { font-family: Arial, sans-serif; font-size: 11px; }
.jukebox .dl a { color:#0000cc; }

/* ==========================================================
   CHAT ROOM
   ========================================================== */
.chatwrap { max-width: 620px; margin: 0 auto; }
.roomlist { font-family: Arial, sans-serif; font-size: 12px; text-align: center; margin: 8px 0; color: #cfe4ff; }
.roomlist .u { font-weight: bold; color: #ffff66; }
.chatwin {
    height: 340px; overflow-y: scroll;
    border: 3px ridge #99aabb; background: #ffffff;
    padding: 8px; text-align: left;
    font-family: Verdana, Arial, sans-serif; font-size: 13px; color: #000;
}
.chatline { margin: 3px 0; line-height: 1.4; }
.chatline .ct { color: #777; font-size: 11px; font-family: "Courier New", monospace; }
.chatline b { color: #000066; }
.chatempty { color: #555; font-style: italic; text-align: center; margin-top: 24px; }
.chatform { margin-top: 10px; text-align: center; }
.chatform label { font-family: Arial, sans-serif; font-weight: bold; color: #ffff66; }
.chatform input[type=text] {
    font-family: "Courier New", monospace; font-size: 14px;
    border: 2px inset #cccccc; background: #ffffee; padding: 4px; vertical-align: middle;
}
.chatform .chatname { width: 120px; }
.chatform .chatmsg  { width: 300px; max-width: 60%; }
.chatform input.send {
    font-family: Arial, sans-serif; font-weight: bold; color: #000066;
    background: linear-gradient(#f0f5fb, #9fb6d4); border: 2px outset #ffffff;
    padding: 4px 16px; cursor: pointer; vertical-align: middle;
}
.chatform input.send:hover { border-style: inset; color:#fff; background:linear-gradient(#3f7de0,#163e86); }

/* ==========================================================
   UTILITY
   ========================================================== */
.center { text-align: center; }
.small  { font-size: 11px; }
.footwm { color:#88aacc; font-family: Arial, sans-serif; font-size: 11px; text-align:center; margin-top:14px; }

/* ==========================================================
   SOUNDBOARD  (late-1990s hardware sampler look)
   ========================================================== */
.sbunit {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    padding: 28px 22px 32px;
    background: #303036;
    background: linear-gradient(#43434c, #16161a);
    border: 6px outset #5c5c66;
    border-radius: 16px;
    box-shadow: 0 0 0 3px #0a0a0c, 8px 8px 0 #000000, inset 0 0 40px #000000;
}
.screw {
    position: absolute; width: 15px; height: 15px; border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #ededed, #7a7a7a 60%, #2a2a2a);
    box-shadow: inset 0 0 2px #000, 0 1px 1px #000;
}
.screw::after { content:''; position:absolute; left:2px; right:2px; top:6px; height:2px; background:#3a3a3a; transform:rotate(35deg); }
.screw.tl{ top:9px; left:9px; }   .screw.tr{ top:9px; right:9px; }
.screw.bl{ bottom:9px; left:9px; } .screw.br{ bottom:9px; right:9px; }

.sbbanner { display:block; max-width:100%; height:auto; margin:2px auto 14px; }

.sbgrille {
    height: 22px; margin: 0 6px 20px; border-radius: 4px;
    background: radial-gradient(circle, #000 1.7px, transparent 2.3px) 0 0 / 9px 9px, #1b1b20;
    border: 2px inset #4a4a52;
    display: flex; align-items: center; justify-content: flex-end; padding: 0 10px;
}
.sbled {
    width: 13px; height: 13px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #7a0000, #360000 70%);
    box-shadow: 0 0 2px #000 inset;
}
.sbled.on {
    background: radial-gradient(circle at 35% 30%, #ffb0b0, #e00000 55%, #7a0000);
    box-shadow: 0 0 12px #ff2a2a, 0 0 2px #000 inset;
}

.sbgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    gap: 15px;
}
.sbbtn {
    font-family: "Arial Black", Impact, sans-serif;
    font-size: 21px;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.1;
    color: #ffffff;
    text-shadow: 2px 2px 0 rgba(0,0,0,.55);
    min-height: 104px;
    padding: 22px 12px;
    cursor: pointer;
    border-radius: 9px;
    border: 5px outset;
    box-shadow: 0 6px 0 rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.30);
}
.sbbtn:active, .sbbtn.playing {
    transform: translateY(5px);
    box-shadow: 0 1px 0 rgba(0,0,0,.55), inset 0 4px 10px rgba(0,0,0,.55);
    border-style: inset;
}
/* rubber pad colors (cycled across the grid) */
.pad-red    { background:linear-gradient(#e85454,#a81414); border-color:#ff9b9b #6d0c0c #6d0c0c #ff9b9b; }
.pad-orange { background:linear-gradient(#ef8a35,#a85200); border-color:#ffc487 #6f3600 #6f3600 #ffc487; }
.pad-green  { background:linear-gradient(#39ab52,#12631f); border-color:#8ee39d #0a3d13 #0a3d13 #8ee39d; }
.pad-teal   { background:linear-gradient(#1cabab,#0a5f60); border-color:#7fe6e6 #063c3d #063c3d #7fe6e6; }
.pad-blue   { background:linear-gradient(#3a79e6,#123f9a); border-color:#93b6f5 #0a2662 #0a2662 #93b6f5; }
.pad-purple { background:linear-gradient(#864fd8,#421f7a); border-color:#c3a2ef #29124d #29124d #c3a2ef; }
.pad-pink   { background:linear-gradient(#e0509a,#8a1e56); border-color:#f5a2c9 #571136 #571136 #f5a2c9; }
.pad-slate  { background:linear-gradient(#5f6b86,#2a3244); border-color:#a6b0c6 #1a2030 #1a2030 #a6b0c6; }

/* ==========================================================
   ARCADE / GAMES / HIGH SCORES
   ========================================================== */
.gamebox {
    background: #001030;
    border: 3px inset #6a8fbf;
    border-radius: 6px;
    padding: 18px;
    margin: 12px auto;
    max-width: 440px;
}
.scoreline { font-family: "Courier New", monospace; color: #ffee66; margin: 8px 0; font-size: 15px; }
.servebtn {
    display: block; width: 100%; max-width: 330px; margin: 10px auto;
    padding: 28px 10px; font-family: Impact, sans-serif; font-size: 26px; letter-spacing: 1px;
    color: #ffffff; cursor: pointer; border: 5px outset; border-radius: 8px;
}
.servebtn.wait { background: linear-gradient(#c0392b, #7a1d13); border-color: #ee8888 #550000 #550000 #ee8888; }
.servebtn.go   { background: linear-gradient(#2ecc40, #12631f); border-color: #88ff88 #006600 #006600 #88ff88; }
.bigstart {
    font-family: Impact, sans-serif; font-size: 22px; color: #001b4d; cursor: pointer;
    background: linear-gradient(#f0f5fb, #9fb6d4); border: 3px outset #ffffff;
    padding: 10px 30px; border-radius: 6px;
}
.playfield {
    position: relative; height: 320px; margin: 12px auto; max-width: 560px;
    background: linear-gradient(#0a3a6b, #001030);
    border: 3px inset #6a8fbf; border-radius: 6px; overflow: hidden;
}
.target { position: absolute; width: 64px; height: auto; cursor: pointer; }
.hsname {
    font-family: "Courier New", monospace; font-size: 16px; text-transform: uppercase;
    border: 2px inset #cccccc; background: #ffffee; padding: 5px; width: 160px; text-align: center;
}
.btn {
    font-family: Arial, sans-serif; font-weight: bold; color: #000066;
    background: linear-gradient(#f0f5fb, #9fb6d4); border: 2px outset #ffffff;
    padding: 5px 18px; cursor: pointer;
}
.btn:hover { border-style: inset; color: #ffffff; background: linear-gradient(#3f7de0, #163e86); }

/* high-score table */
.hs { margin: 10px auto; border-collapse: collapse; font-family: "Courier New", monospace; min-width: 250px; }
.hs th { background: #000066; color: #ffee66; padding: 4px 14px; font-size: 13px; letter-spacing: 1px; }
.hs td { padding: 3px 14px; border-bottom: 1px solid #99a; color: #001133; font-weight: bold; }
.hs tr:nth-child(even) td { background: rgba(0,0,80,0.06); }
.hs td:first-child { color: #aa0000; }
.hsempty { color: #555; font-style: italic; text-align: center; }

/* arcade hub cards */
.arcaderow { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.arcadecard { max-width: 320px; flex: 1 1 280px; }
.playbtn {
    display: inline-block; margin: 8px 0; padding: 10px 28px;
    font-family: Impact, sans-serif; font-size: 20px; letter-spacing: 1px;
    color: #001b4d !important; text-decoration: none;
    background: linear-gradient(#ffe14d, #e0a800); border: 3px outset #ffffff; border-radius: 6px;
}
.playbtn:hover { background: linear-gradient(#fff08a, #ffc400); color: #000000 !important; }
.minihs { margin-top: 10px; }