/* Public landing page. Keep its layout independent of game theme assets. */
:root { color-scheme: light; font-family: Tahoma, Arial, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #33251e; background: #f5f0e7; line-height: 1.75; }
img { max-width: 100%; }
a { color: #7d151c; }
a:focus-visible, button:focus-visible { outline: 3px solid #e6a347; outline-offset: 3px; }
.Main {
    position: absolute; inset: 0 0 auto; height: 390px; pointer-events: none;
    background: linear-gradient(180deg, rgba(38, 15, 11, .45), rgba(99, 48, 31, .10) 65%, #f5f0e7),
        url('/Home2.png') center top / cover no-repeat;
}
.Bar {
    position: relative; z-index: 2; display: flex; justify-content: center;
    align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 18px;
    background: rgba(47, 19, 17, .88); box-shadow: 0 3px 12px rgba(22, 9, 8, .22);
}
.Bar a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 38px; padding: 5px 15px; border-radius: 999px;
    color: #fff; text-decoration: none; font-weight: 700;
}
.Bar a:hover, .Bar a:focus-visible { background: rgba(255, 255, 255, .16); }
.Bar .Join, .Bar .Sign { background: #8e111c; border: 1px solid rgba(255, 255, 255, .35); }
.Bar .Sign { background: #d9a65b; color: #2b1713; }
.Body {
    position: relative; z-index: 1; width: min(1100px, calc(100% - 28px));
    /* Leave the painted logo in Home2.png visible above the first card. */
    margin: 88px auto 48px; padding: 22px clamp(14px, 3vw, 36px) 36px;
    background: rgba(255, 255, 255, .96); border: 1px solid #e8dccb;
    border-radius: 20px; box-shadow: 0 15px 42px rgba(54, 26, 16, .18);
}
.Body > .Pic { display: none; }
.Body h1, .Body h2, .Body h3 { line-height: 1.4; color: #78151c; }
.Body p, .Body li { overflow-wrap: anywhere; }
.HDF { padding: 20px clamp(12px, 3vw, 32px); border-radius: 16px; background: #fff9f0; text-align: center; }
.HHF { margin: 0 0 12px; font-size: clamp(26px, 4vw, 42px); }
.HHT, .HHL { margin: 24px 0 12px; text-align: center; font-size: clamp(21px, 3vw, 28px); }
.HDS { max-width: 700px; margin: auto; padding: 14px 22px; border-inline-start: 4px solid #b3854b; background: #faf6ee; }
.HDT {
    max-width: 560px; margin: 22px auto; padding: 18px 24px; border-radius: 14px;
    background: #f4ede2; line-height: 2; text-align: start; font-weight: 700;
}
.HDL { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.HIm {
    display: block; width: 100%; height: 160px; object-fit: cover; object-position: top;
    border-radius: 12px; border: 2px solid #eadfcf; cursor: zoom-in;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .10);
}
.HIm:hover { border-color: #9e2830; }
#footer2 { overflow: hidden; border-radius: 12px; }
.overlay { display: none; position: fixed; inset: 0; z-index: 1000; }
.overlay .mask { position: absolute; inset: 0; background: rgba(18, 10, 9, .66); }
.overlay_content {
    position: relative; width: min(650px, calc(100% - 26px)); max-height: calc(100dvh - 32px);
    overflow: auto; margin: 16px auto; padding: 25px 20px 20px;
    background: #fffaf3; border-radius: 18px; box-shadow: 0 18px 55px rgba(0, 0, 0, .35);
}
.overlay_content .closer {
    position: absolute; top: 9px; inset-inline-end: 12px; display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 50%; background: #8e111c;
    color: #fff; text-decoration: none; cursor: pointer;
}
.overlay_content .closer::after { content: '×'; font: bold 26px/1 Arial, sans-serif; }
.overlay_content .closer img { display: none; }
.overlay_content .footer { clear: both; }
#Screen .overlay_content { width: min(950px, calc(100% - 26px)); text-align: center; }
#Screen .Screen-content { display: block; max-height: calc(100dvh - 115px); width: auto; margin: auto; object-fit: contain; }
@media (max-width: 760px) {
    .Main { height: 310px; }
    .Bar { gap: 3px; padding: 9px 6px; }
    .Bar a { min-height: 34px; padding: 4px 9px; font-size: 12px; }
    .Body { width: calc(100% - 14px); margin-top: 75px; padding: 15px 11px 22px; }
    .HDL { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .HIm { height: 120px; }
    #footer2 .Grid__Container { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
    .HDL { gap: 7px; }
    .HIm { height: 105px; }
    #footer2 .Grid__Container { grid-template-columns: 1fr !important; }
    .overlay_content { padding: 43px 10px 14px; }
}