/* ============================================================
   12Tails:Remastered — prototype v4
   RevenueX-style app frame: full-height dark LEFT sidebar with
   grouped sections + blank placeholder blocks. HH:MM clock.
   Night-fantasy palette, rounded, no bright blue.
   ============================================================ */
:root{
  --night:#171008; --night-2:#221912; --night-3:#2d2114; --panel:#1c140c;
  --line:#4a3621;
  /* wood tokens: mirror theme.css so pages that load only app.css (index.html,
     download.html, …) still render the framed .tab / social borders. Without
     this, border:1px solid var(--wood-line) is invalid at computed-value time
     and the frames silently disappear. */
  --wood:#241a12; --wood-2:#3a2a1c; --wood-line:#5c4226;
  --ink:#2b2218; --paper:#efe4c8; --paper-edge:#d8c79c; --paper-deep:#e6d8b4;
  --gold:#e0a23a; --gold-bright:#f6c454;
  --teal:#3fae9f; --violet:#8d6fd1; --ember:#e07a3a;
  --green:#46c05c; --red:#a8392b; --slate:#7d7264;
  --tx:#f0e6d2; --tx-dim:#b39e7d;
  --shadow:0 10px 34px rgba(0,0,0,.55);
  --r:16px; --r-lg:22px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--tx);
  font-family:"Spectral","Noto Serif Thai",Georgia,serif; font-size:16px; line-height:1.6;
  background:
    radial-gradient(900px 500px at 80% -150px, rgba(246,196,84,.14), transparent 60%),
    radial-gradient(1100px 600px at 10% -100px, rgba(224,122,58,.12), transparent 55%),
    radial-gradient(1300px 800px at 50% 115%, rgba(224,162,58,.10), transparent 55%),
    linear-gradient(180deg, #20160c 0%, var(--night) 40%, #120c06 100%);
  background-attachment:fixed;
}
a{color:var(--tx); text-decoration:none;} a:hover{color:var(--gold-bright);}

/* ---------- Row 1: brand header + clock ---------- */
.brandbar{
  display:flex; align-items:center; justify-content:center; position:relative;
  background:linear-gradient(180deg, #1c140c, #171008);
  border-bottom:1px solid var(--line); padding:10px 14px; z-index:5;
}
.brandbar .menu{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--tx); font-size:1.1rem; cursor:pointer;
}
.brandbar .menu:hover{border-color:var(--gold); color:var(--gold-bright);}
.brandbar .title{font-family:"Cinzel"; font-weight:900; letter-spacing:.22em; font-size:.95rem; text-transform:uppercase;}
.brandbar .title b{color:var(--gold-bright);}
.brandbar .clock{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:8px;
  font-family:"Cinzel"; font-size:.74rem; letter-spacing:.08em; color:var(--tx-dim);
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  padding:7px 12px; border-radius:12px;
}
.brandbar .clock b{color:var(--gold-bright); font-size:1rem; font-variant-numeric:tabular-nums;}
.brandbar .clock .dot{width:7px; height:7px; border-radius:99px; background:var(--green); box-shadow:0 0 8px var(--green);}

/* ---------- App frame: sidebar + content ---------- */
.frame{display:grid; grid-template-columns:280px 1fr; min-height:calc(100vh - 59px); max-width:1440px; margin:0 auto;}

/* ===== LEFT SIDEBAR (RevenueX-style) ===== */
.side{
  background:linear-gradient(180deg, var(--panel), #0a101e);
  border-right:1px solid var(--line);
  padding:18px 14px 14px; display:flex; flex-direction:column; gap:4px;
}
.side .group{
  font-family:"Cinzel"; font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--tx-dim); margin:14px 8px 8px;
}
.side .group:first-child{margin-top:2px;}
.item{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px;
  color:var(--tx); font-family:"Noto Serif Thai"; font-weight:600; font-size:.92rem;
  border:1px solid transparent;
}
.item:hover{background:rgba(255,255,255,.04); border-color:var(--line); color:var(--gold-bright);}
.item.on{
  background:linear-gradient(90deg, rgba(246,196,84,.2), rgba(224,122,58,.08));
  border-color:rgba(246,196,84,.4);
}
.item .blk{
  width:38px; height:38px; min-width:38px; border-radius:11px;
  background:repeating-linear-gradient(45deg, #2d2114 0 6px, #241a0f 6px 12px);
  border:1px solid var(--line); display:grid; place-items:center;
  font-size:.55rem; color:#937c55; letter-spacing:.05em;
}
.item small{display:block; font-family:"Cinzel"; font-weight:700; font-size:.54rem; letter-spacing:.2em; color:var(--gold); text-transform:uppercase;}
.item .right{margin-left:auto; font-family:"Cinzel"; font-size:.72rem; color:var(--tx-dim); font-variant-numeric:tabular-nums;}
.pill{
  margin-left:auto; font-size:.6rem; font-family:"Cinzel"; font-weight:700; letter-spacing:.06em;
  padding:3px 9px; border-radius:999px;
}
.pill.g{background:rgba(70,192,92,.15); color:#7fe096; border:1px solid rgba(70,192,92,.4);}
.pill.v{background:rgba(224,162,58,.16); color:#f0d6a4; border:1px solid rgba(224,162,58,.45);}
.pill.r{background:rgba(168,57,43,.18); color:#ffb0a0; border:1px solid rgba(168,57,43,.5);}

/* mini widgets in sidebar */
.widget{
  margin:6px 4px; padding:12px 14px; border-radius:16px;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
}
.widget .w-title{font-family:"Cinzel"; font-size:.6rem; letter-spacing:.22em; color:var(--tx-dim); text-transform:uppercase; margin-bottom:8px;}
.rankrow{display:flex; align-items:center; gap:8px; padding:5px 4px; font-family:"Noto Serif Thai"; font-size:.84rem;}
.rankrow .pos{font-family:"Cinzel"; font-weight:900; width:1.3em; text-align:center; color:var(--gold);}
.rankrow:first-of-type .pos{color:#ffb0a0;}
.rankrow .lv{margin-left:auto; font-size:.68rem; color:var(--tx-dim); font-variant-numeric:tabular-nums;}
.w-note{font-size:.62rem; color:#937c55; font-family:"Noto Serif Thai"; margin-top:6px;}

/* login box pinned at bottom (like the profile card) */
.side .spacer{flex:1;}
.logincard{
  margin:8px 4px 0; padding:14px; border-radius:16px;
  background:linear-gradient(180deg, var(--night-3), var(--night-2));
  border:1px solid var(--line); text-align:center;
}
.logincard .soon{
  font-family:"Cinzel"; font-size:.7rem; letter-spacing:.05em; color:#9a886a;
  border:1.5px dashed #5e482c; border-radius:12px; padding:10px; position:relative;
  cursor:not-allowed; margin-bottom:8px;
}
.logincard .soon .tag{position:absolute; top:-9px; right:6px; background:var(--red); color:#ffe9d9;
  font-size:.5rem; letter-spacing:.1em; padding:2px 7px; border-radius:999px; text-transform:uppercase;}
.btn-gold{
  display:block; font-family:"Cinzel"; font-weight:900; letter-spacing:.08em;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, #b87f24);
  color:#3a2503; border:1px solid #8a5e15; border-radius:13px;
  padding:11px 16px; box-shadow:0 4px 0 #7a5310, 0 8px 18px rgba(0,0,0,.4);
  cursor:pointer; text-align:center;
}
.btn-gold:hover{filter:brightness(1.07);}

/* ===== CONTENT column ===== */
.content{padding:0 18px 30px; min-width:0;}

/* Row 2 nav (inside content, RevenueX top-bar position) */
.navbar{display:flex; align-items:center; gap:6px; padding:12px 2px; border-bottom:1px solid var(--line); margin-bottom:14px;}
.sigil{
  width:42px; height:42px; min-width:42px; border-radius:13px;
  background:radial-gradient(circle at 35% 30%, #8a6328 0%, #4b3414 55%, #241806 100%);
  border:2px solid var(--gold); box-shadow:inset 0 0 12px rgba(0,0,0,.6), 0 0 14px rgba(224,162,58,.25);
  display:grid; place-items:center; color:#ffe9bd; font-family:"Cinzel"; font-weight:900;
}
nav.main{display:flex; gap:2px; flex:1; overflow-x:auto; scrollbar-width:none;}
nav.main::-webkit-scrollbar{display:none;}
nav.main a{
  font-family:"Noto Serif Thai"; font-weight:700; font-size:.93rem; white-space:nowrap;
  color:var(--tx); padding:8px 13px; border-radius:13px; text-align:center; line-height:1.25;
}
nav.main a small{display:block; font-family:"Cinzel"; font-weight:700; font-size:.55rem; letter-spacing:.22em; color:var(--gold); text-transform:uppercase;}
nav.main a:hover{background:rgba(246,196,84,.1); color:var(--gold-bright);}
.nav-icons{display:flex; gap:8px; margin-left:12px;}
.icon-btn{
  width:38px; height:38px; min-width:38px; border-radius:999px; display:grid; place-items:center;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--tx); font-size:.95rem;
}
.icon-btn:hover{border-color:var(--gold); color:var(--gold-bright);}

/* Event banner strip */
.events{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px;}
.ev{
  display:flex; align-items:center; gap:14px; padding:11px 16px;
  border-radius:var(--r-lg); border:1.5px solid; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.ev::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 45%, transparent 60%); transform:translateX(-100%); animation:shine 4s infinite;}
@keyframes shine{60%{transform:translateX(100%);} 100%{transform:translateX(100%);}}
.ev .badge{font-family:"Cinzel"; font-weight:900; letter-spacing:.14em; font-size:.64rem; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; color:#fff; white-space:nowrap;}
.ev .what{flex:1; font-family:"Noto Serif Thai"; font-weight:700; font-size:.92rem;}
.ev .what small{display:block; font-weight:400; font-size:.74rem; color:#c4ad85;}
.ev .count{font-family:"Cinzel"; font-weight:900; font-size:1.1rem; font-variant-numeric:tabular-nums;}
.ev-arena{background:linear-gradient(135deg, #3a2a1c, #241a12); border-color:#8a5e15;}
.ev-arena .badge{background:linear-gradient(180deg, var(--gold-bright), var(--gold)); color:#3a2503;}
.ev-arena .count{color:var(--gold-bright);}
.ev-arena .what{color:#efe4c8;} .ev-arena .what small{color:#b9a47e;}
.ev-boss{background:linear-gradient(135deg, #33241a, #1d130c); border-color:#8a5e15;}
.ev-boss .badge{background:linear-gradient(180deg, #e8a26b, var(--ember)); color:#3a1c03;}
.ev-boss .count{color:#f0c08e;}
.ev-boss .what{color:#efe4c8;} .ev-boss .what small{color:#b9a47e;}

/* Hero carousel */
.hero{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); margin-bottom:18px;}
.slides{display:flex; transition:transform .6s cubic-bezier(.6,.05,.25,1);}
.slide{min-width:100%; min-height:360px; position:relative; display:grid; place-items:center; padding:36px 18px 58px;}
.slide .inner{text-align:center; max-width:660px; position:relative; z-index:2;}
.s-keyart{
  background:
    radial-gradient(420px 200px at 78% 22%, rgba(246,196,84,.5), transparent 60%),
    radial-gradient(700px 360px at 18% 10%, rgba(224,122,58,.35), transparent 60%),
    radial-gradient(900px 420px at 55% 115%, rgba(224,162,58,.3), transparent 55%),
    linear-gradient(180deg, #3a2a18 0%, #271b0e 55%, #190f07 100%);
}
.s-keyart::after{
  content:"ภาพ KEY ART จริง (โทนทองอุ่น) จะอยู่ตรงนี้";
  position:absolute; top:12px; left:12px; z-index:3;
  font-size:.62rem; color:#d9c39b; background:rgba(26,17,8,.6);
  border:1px solid var(--line); padding:4px 10px; border-radius:999px;
}
.lanterns i{position:absolute; width:10px; height:14px; border-radius:5px;
  background:radial-gradient(circle at 50% 35%, #ffd98a, #e07a3a 70%);
  box-shadow:0 0 18px 6px rgba(224,150,58,.45); opacity:.9;}
.lanterns i:nth-child(1){left:10%; top:64%;} .lanterns i:nth-child(2){left:22%; top:72%; transform:scale(.8);}
.lanterns i:nth-child(3){left:86%; top:66%; transform:scale(.9);} .lanterns i:nth-child(4){left:72%; top:76%; transform:scale(.7);}
.logo-seal{display:inline-block; padding:18px 34px 15px; border-radius:20px;
  background:rgba(20,13,5,.55); border:2px solid var(--gold);
  box-shadow:inset 0 0 30px rgba(246,196,84,.16), var(--shadow);}
.logo-seal .l1{font-family:"Cinzel"; font-weight:900; font-size:2.2rem; line-height:1;
  color:#fdf6e4; text-shadow:0 2px 0 #241806, 0 0 26px rgba(246,196,84,.55);}
.logo-seal .l1 b{color:var(--gold-bright); text-shadow:0 2px 0 #4a3000, 0 0 22px rgba(246,196,84,.55);}
.logo-seal .l2{font-family:"Noto Serif Thai"; color:#ead9b8; font-size:.84rem; letter-spacing:.4em; margin-top:4px;}
.tagline-en{margin:14px 0 2px; font-family:"Cinzel"; font-weight:700; letter-spacing:.28em;
  font-size:.78rem; text-transform:uppercase; color:var(--gold-bright);
  text-shadow:0 1px 8px rgba(0,0,0,.7);}
.tagline{margin:4px 0 16px; color:#f6eed9; font-weight:600; font-family:"Noto Serif Thai"; font-size:.98rem;}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.cta-row .btn-gold{display:inline-block; font-size:1.02rem; padding:13px 28px; border-radius:17px;}
.btn-ghost{font-family:"Cinzel"; font-weight:700; color:var(--tx); border:1.5px solid var(--gold);
  border-radius:14px; padding:12px 20px; background:rgba(24,15,7,.5); cursor:pointer;}
.btn-ghost:hover{background:rgba(246,196,84,.12); color:var(--gold-bright);}
.s-patch{background:radial-gradient(700px 320px at 50% -60px, rgba(224,162,58,.25), transparent 60%), linear-gradient(180deg, #251a0e, #171008);}
.patch-card{background:linear-gradient(180deg, var(--paper), var(--paper-deep));
  border:1.5px solid var(--paper-edge); border-radius:var(--r-lg);
  padding:20px 28px; box-shadow:var(--shadow); text-align:center; color:var(--ink);}
.crest{font-family:"Cinzel"; letter-spacing:.42em; font-size:.64rem; color:#8a5e15; text-transform:uppercase;}
.patch-card h2{font-family:"Cinzel"; font-weight:900; margin:.3em 0 .2em; font-size:1.6rem; color:#5c3d12;}
.patch-card p{margin:.2em 0 1em; color:#4d3d28; font-family:"Noto Serif Thai";}
.s-comm{background:
  radial-gradient(600px 300px at 30% 110%, rgba(224,162,58,.28), transparent 60%),
  radial-gradient(600px 300px at 80% -20%, rgba(224,122,58,.28), transparent 60%),
  linear-gradient(180deg, #261b10, #181008);}
.s-comm h2{font-family:"Noto Serif Thai"; color:#eef3fc; font-size:1.5rem; margin:0 0 6px;}
.s-comm p{color:#bccadf; font-family:"Noto Serif Thai"; margin:0 0 16px;}
.dots{position:absolute; bottom:12px; left:0; right:0; display:flex; gap:8px; justify-content:center; z-index:4;}
.dots button{width:9px; height:9px; border-radius:999px; border:1px solid var(--gold); background:transparent; cursor:pointer; padding:0;}
.dots button.on{background:var(--gold-bright);}
.arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:36px; height:36px; border-radius:999px; border:1px solid var(--gold);
  background:rgba(8,12,24,.6); color:var(--gold-bright); font-size:1.05rem; cursor:pointer;}
.arrow.prev{left:10px;} .arrow.next{right:10px;}

/* News cards */
.section-title{font-family:"Cinzel"; font-weight:900; letter-spacing:.14em; font-size:.95rem;
  text-transform:uppercase; margin:4px 2px 12px; display:flex; align-items:center; gap:12px;}
.section-title::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--gold), rgba(224,122,58,.5), transparent);}
.cards{display:grid; gap:13px;}
.card{display:grid; grid-template-columns:170px 1fr; overflow:hidden;
  background:linear-gradient(180deg, var(--paper), var(--paper-deep));
  border:1.5px solid var(--paper-edge); border-radius:var(--r-lg);
  box-shadow:0 8px 22px rgba(0,0,0,.5); color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;}
.card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.65);}
.thumb{min-height:112px; position:relative;}
.thumb span{position:absolute; left:10px; bottom:8px; font-size:.58rem; color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.45); padding:2px 8px; border-radius:999px;}
.t1{background:radial-gradient(140px 90px at 70% 30%, rgba(246,196,84,.8), transparent 60%), linear-gradient(135deg,#7d281d,#3a1009);}
.t2{background:radial-gradient(150px 100px at 30% 70%, rgba(246,196,84,.65), transparent 60%), linear-gradient(135deg,#6b4a2c,#3a280f);}
.t3{background:radial-gradient(150px 100px at 60% 60%, rgba(63,174,159,.7), transparent 65%), linear-gradient(135deg,#1f5448,#0e2a23);}
.card .body{padding:13px 17px 11px;}
.kicker{display:inline-block; font-family:"Cinzel"; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase;
  color:#fff; padding:3px 10px; border-radius:999px; margin-bottom:5px;}
.k-patch{background:var(--red);} .k-event{background:var(--ember);} .k-news{background:var(--teal);}
.card h3{margin:.1em 0 .25em; font-family:"Noto Serif Thai"; font-weight:700; font-size:1.04rem; color:#42301a;}
.card p{margin:0 0 7px; font-family:"Noto Serif Thai"; font-size:.86rem; color:#5a4a33;}
.meta{font-size:.7rem; color:var(--slate);}

/* patch-seal news cards (CC style merged) */
.pcard{display:block; overflow:hidden; border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--paper), var(--paper-deep));
  border:1.5px solid var(--paper-edge); box-shadow:0 8px 22px rgba(0,0,0,.5);
  color:var(--ink); transition:transform .15s ease, box-shadow .15s ease;}
.pcard:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.65);}
.phead{display:flex; align-items:center; gap:12px; padding:10px 16px;
  background:linear-gradient(180deg, #2d2114, #1c140c); border-bottom:2px solid var(--gold);}
.phead .ver{font-family:"Cinzel"; font-weight:900; font-size:1.05rem; color:var(--gold-bright);}
.phead .ptitle{font-family:"Cinzel"; font-weight:700; letter-spacing:.1em; font-size:.92rem;
  color:var(--paper); text-transform:uppercase;}
.phead .pdate{margin-left:auto; font-family:"Spectral"; font-style:italic; font-size:.74rem; color:#c4ad85;}
.pbody{padding:12px 18px 10px;}
.pbody ul{margin:0; padding-left:1.2em; font-family:"Noto Serif Thai"; font-size:.9rem; color:#4d3d28;}
.pbody li{margin-bottom:6px;}
.pbody b{color:#42301a;}

/* Footer */
footer{margin:20px 0 0; padding:16px 18px;
  background:linear-gradient(180deg, var(--night-2), #150e07);
  border:1px solid var(--line); border-radius:var(--r-lg);
  color:#b3a283; font-family:"Noto Serif Thai"; font-size:.78rem; text-align:center;}
footer .logos{display:flex; gap:12px; justify-content:center; margin-bottom:8px;}
footer .logos span{display:inline-grid; place-items:center; width:72px; height:28px; border-radius:10px;
  background:#120b05; border:1px solid var(--line); color:#d9c79b; font-size:.56rem;
  font-family:"Cinzel"; letter-spacing:.08em;}
footer em{color:#8a795c;}

/* Responsive */
@media (max-width: 980px){
  .frame{grid-template-columns:1fr;}
  .side{flex-direction:column; border-right:none; border-bottom:1px solid var(--line); order:2;}
  .content{order:1;}
  .side .spacer{display:none;}
  .events{grid-template-columns:1fr;}
  .brandbar .clock{position:static; transform:none; margin-left:auto;}
  .brandbar{justify-content:flex-start; gap:10px; padding-left:60px;}
  .card{grid-template-columns:105px 1fr;}
  .thumb{min-height:100%;}
  .logo-seal .l1{font-size:1.7rem;}
}
@media (prefers-reduced-motion: reduce){ .slides{transition:none;} .ev::after{animation:none;} }

/* ====== MERGE ADDITIONS (real assets; additive only) ====== */
.item .blk img{width:30px;height:30px;image-rendering:auto;display:block}
.icon-btn svg{width:17px;height:17px;fill:var(--tx)}
.icon-btn:hover svg{fill:var(--gold-bright)}
.s-keyart .art{position:absolute;left:50%;top:0;width:132%;transform:translate(-50%,-31%);z-index:0;pointer-events:none}
.s-keyart .artblend{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(23,16,8,.18) 0%, rgba(23,16,8,0) 30%,
    rgba(23,16,8,.55) 72%, #190f07 96%)}
.s-keyart .herologo{width:min(380px,72vw);filter:drop-shadow(0 5px 20px rgba(0,15,30,.65))}
footer .logos img{height:24px;display:block}
footer .logos span.haslogo{width:auto;padding:2px 10px;background:#efe4c8}

/* ============================================================
   v8 — NIGHT ATMOSPHERE + SEAMLESS TOP + NEXON FOOTER + ART BUTTONS
   (Ken consolidated order 2026-06-12; additive overrides on the v7 base.
   RULE: UI chrome stays warm gold/wood/parchment — night blue is
   BACKDROP IMAGERY ONLY.)
   ============================================================ */

/* ---- night ambient backgrounds (two options for the gate) ---- */
body.bg-camp{
  background:
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(8,5,2,.78) 100%),
    linear-gradient(180deg, rgba(13,8,4,.72) 0%, rgba(13,8,4,.6) 30%, rgba(10,6,3,.82) 100%),
    url("../night/ambient_camp.jpg") center top/cover no-repeat fixed,
    #120c06;
}
body.bg-sky{
  background:
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(8,5,2,.7) 100%),
    linear-gradient(180deg, rgba(13,8,4,.5) 0%, rgba(13,8,4,.42) 40%, rgba(10,6,3,.72) 100%),
    url("../night/sky_tile.jpg") top left/256px 256px repeat fixed,
    #120c06;
}

/* ---- seamless top (MapleStory-style): no boxes, generous air ---- */
.brandbar{
  background:linear-gradient(180deg, rgba(10,6,3,.55), rgba(10,6,3,0));
  border-bottom:none; padding:12px 18px;
}
.brandbar .menu{background:rgba(255,255,255,.03); border-color:rgba(92,66,38,.5)}
.brandbar .clock{background:rgba(0,0,0,.25); border-color:rgba(92,66,38,.5)}
.navbar{
  border-bottom:none; margin-bottom:18px; padding:16px 2px 14px; gap:18px;
}
.navbar .navlogo{height:52px; display:block; filter:drop-shadow(0 3px 10px rgba(0,10,25,.55))}
nav.main{gap:8px; justify-content:flex-start}
nav.main a{
  font-size:1.04rem; padding:10px 18px; border-radius:13px; background:none;
}
nav.main a small{font-size:.58rem; letter-spacing:.24em}
nav.main a:hover{background:none; color:var(--gold-bright); text-shadow:0 0 14px rgba(246,196,84,.35)}
.frame{min-height:calc(100vh - 63px)}
.side{background:linear-gradient(180deg, rgba(28,20,12,.92), rgba(13,9,5,.94));
  border-right:1px solid rgba(74,54,33,.55)}

/* ---- classic 2011 art buttons (hover = original _over swap) ---- */
.artstack{display:flex; flex-direction:column; gap:10px; align-items:center; margin:10px 0 6px}
.artbtn{display:block; background-size:100% 100%; background-repeat:no-repeat;
  border-radius:10px; transition:transform .12s; image-rendering:auto}
.artbtn:hover{transform:translateY(-1px) scale(1.02)}
.artbtn.b-download{width:212px; height:58px; background-image:url("../buttons/but_download.png")}
.artbtn.b-download:hover{background-image:url("../buttons/but_download_over.png")}
.artbtn.b-guide{width:198px; height:57px; background-image:url("../buttons/but_guide.png")}
.artbtn.b-guide:hover{background-image:url("../buttons/but_guide_over.png")}
.artbtn.b-character{width:198px; height:56px; background-image:url("../buttons/but_character.png")}
.artbtn.b-character:hover{background-image:url("../buttons/but_character_over.png")}
.artbtn.b-register{width:212px; height:66px; background-image:url("../buttons/but_register.png")}
.artbtn.b-register:hover{background-image:url("../buttons/but_register_over.png")}
/* preload hover frames so the first swap doesn't flicker */
.artpreload{position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none}

/* ---- community slide: by the fire ---- */
.s-comm{
  background:
    linear-gradient(180deg, rgba(13,8,4,.55) 0%, rgba(13,8,4,.25) 45%, rgba(10,6,3,.7) 100%),
    url("../night/slide_fire.jpg") center 65%/cover no-repeat;
}
.s-comm h2,.s-comm p{color:#f6eed9; text-shadow:0 2px 10px rgba(0,0,0,.85)}

/* ---- Nexon-style footer: centered clean column ---- */
footer.v8{
  margin:26px 0 0; padding:30px 18px 26px; border:none; border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(16,10,5,.6), rgba(10,6,3,.85));
  text-align:center; color:#b3a283; font-family:"Noto Serif Thai"; font-size:.8rem;
}
footer.v8 .f-social{display:flex; gap:14px; justify-content:center; margin-bottom:14px}
footer.v8 .f-social a{width:40px; height:40px; border-radius:999px; display:grid; place-items:center;
  background:rgba(224,162,58,.1); border:1px solid var(--line)}
footer.v8 .f-social a:hover{border-color:var(--gold)}
footer.v8 .f-social svg{width:18px; height:18px; fill:var(--tx)}
footer.v8 .f-links{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:12px;
  font-family:"Noto Serif Thai"; font-weight:600; font-size:.86rem}
footer.v8 .f-links a{color:var(--tx-dim); padding:2px 10px}
footer.v8 .f-links a:hover{color:var(--gold-bright)}
footer.v8 .f-links span{color:#5e482c}
footer.v8 .f-contact{color:#8a795c; margin-bottom:12px}
footer.v8 .f-credit{line-height:1.7}
footer.v8 .f-credit em{color:#8a795c}
footer.v8 .f-bb{margin-top:14px}
footer.v8 .f-bb img{height:26px; background:#efe4c8; border-radius:6px; padding:2px 8px; opacity:.9}

/* ---- floating back-to-top ---- */
#toTop{
  position:fixed; right:22px; bottom:22px; z-index:120; width:46px; height:46px;
  border-radius:14px; border:1.5px solid var(--gold); cursor:pointer;
  background:linear-gradient(180deg, #3a2a1c, #241a12); color:var(--gold-bright);
  font-size:1.25rem; box-shadow:0 6px 18px rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .12s;
}
#toTop.show{opacity:1; pointer-events:auto}
#toTop:hover{transform:translateY(-2px); filter:brightness(1.1)}

/* ---- mobile fixes (incl. the brandbar clock clipping) ---- */
@media (max-width: 980px){
  .navbar .navlogo{height:42px}
  nav.main a{font-size:.9rem; padding:8px 10px}
}
@media (max-width: 480px){
  .brandbar{padding:10px 10px 10px 56px; gap:8px}
  .brandbar .title{font-size:.72rem; letter-spacing:.12em; white-space:nowrap}
  .brandbar .clock{padding:5px 8px; font-size:.6rem; gap:5px; flex-shrink:0}
  .brandbar .clock b{font-size:.82rem}
  .brandbar .clock span:not(.dot){display:none}  /* drop the "SERVER TIME" label, keep dot+time */
}

/* ============================================================
   v9 — 3-COLUMN HOME · seamless header · announcement banners ·
   social-preview slots · two-list ranking  (Ken order 2026-06-12)
   Additive on the v7/v8 base. Night = backdrop only; chrome stays gold/wood.
   ============================================================ */

/* ---- new site-wide ambient background (bestnight) ---- */
body.bg-best{
  background:
    radial-gradient(ellipse 125% 85% at 50% 36%, transparent 48%, rgba(6,4,2,.84) 100%),
    linear-gradient(180deg, rgba(12,8,4,.74) 0%, rgba(12,8,4,.58) 30%, rgba(8,5,2,.86) 100%),
    url("../night/bestnight.jpg") center top/cover no-repeat fixed,
    #0e0a06;
}

/* ---- seamless header (two rows, no boxes) ---- */
.sitehead{
  position:sticky; top:0; z-index:100; padding:10px 22px 0;
  background:linear-gradient(180deg, rgba(10,6,3,.82), rgba(10,6,3,.34) 72%, transparent);
  backdrop-filter:blur(5px);
}
.brandrow{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  max-width:1440px; margin:0 auto;}
.brand-left{display:flex; align-items:center; gap:16px; justify-self:start; min-width:0;}
.brand-left .blogo{height:66px; display:block; filter:drop-shadow(0 3px 12px rgba(0,12,28,.6));}
.acct{display:flex; gap:8px; align-items:stretch; flex-wrap:wrap;}
.acctbtn{font-family:"Cinzel"; font-weight:700; font-size:.64rem; letter-spacing:.05em;
  text-transform:uppercase; padding:8px 13px; border-radius:11px; text-align:center;
  line-height:1.2; white-space:nowrap; position:relative;}
.acctbtn small{display:block; font-family:"Noto Serif Thai"; font-weight:400; font-size:.58rem; letter-spacing:0;}
.acctbtn.gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold) 60%,#b87f24);
  color:#3a2503; border:1px solid #8a5e15; box-shadow:0 3px 0 #7a5310;}
.acctbtn.gold:hover{filter:brightness(1.08);}
.acctbtn.soon{background:rgba(255,255,255,.03); color:#9a886a; border:1.5px dashed #5e482c; cursor:not-allowed;}
.acctbtn.soon::after{content:"coming soon"; position:absolute; top:-8px; right:-4px;
  background:var(--red); color:#ffe9d9; font-family:"Cinzel"; font-size:.42rem; letter-spacing:.04em;
  padding:1px 6px; border-radius:999px;}
.wordmark{justify-self:center; font-family:"Cinzel"; font-weight:900; letter-spacing:.18em;
  font-size:1.55rem; text-align:center; color:var(--tx); text-shadow:0 2px 14px rgba(0,0,0,.75);}
.wordmark b{color:var(--gold-bright);}
.headclock{justify-self:end; display:flex; align-items:center; gap:8px; white-space:nowrap;
  font-family:"Cinzel"; font-size:.74rem; letter-spacing:.08em; color:var(--tx-dim);
  background:rgba(0,0,0,.28); border:1px solid var(--line); padding:7px 12px; border-radius:12px;}
.headclock b{color:var(--gold-bright); font-size:1rem; font-variant-numeric:tabular-nums;}
.headclock .dot{width:7px; height:7px; border-radius:99px; background:var(--green); box-shadow:0 0 8px var(--green);}

.menurow{display:flex; justify-content:center; gap:6px; flex-wrap:wrap;
  max-width:1440px; margin:8px auto 0; padding:8px 0 12px;}
.menurow a{font-family:"Noto Serif Thai"; font-weight:700; font-size:1rem; color:var(--tx);
  padding:9px 17px; border-radius:12px; text-align:center; line-height:1.2;}
.menurow a small{display:block; font-family:"Cinzel"; font-weight:700; font-size:.54rem;
  letter-spacing:.2em; color:var(--gold); text-transform:uppercase;}
.menurow a:hover{color:var(--gold-bright); text-shadow:0 0 12px rgba(246,196,84,.32);}

/* ---- three-column layout ---- */
.layout3{display:grid; grid-template-columns:272px minmax(0,1fr) 298px; gap:18px;
  max-width:1440px; margin:18px auto 0; padding:0 22px;}
.col-left,.col-right{display:flex; flex-direction:column; gap:14px;}
.col-center{min-width:0; display:flex; flex-direction:column; gap:16px;}
.colhead{font-family:"Cinzel"; font-weight:900; letter-spacing:.14em; font-size:.74rem;
  text-transform:uppercase; color:var(--gold); padding:2px 4px;}

/* ---- center: announcement banners ---- */
.anns{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.ann{display:flex; flex-direction:column; justify-content:center; gap:6px; padding:16px 18px;
  border-radius:var(--r-lg); border:1.5px solid #8a5e15; box-shadow:var(--shadow);
  background:linear-gradient(135deg,#3a2a1c,#231a11); min-height:104px; position:relative; overflow:hidden;}
.ann::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.05) 45%, transparent 60%);
  transform:translateX(-100%); animation:shine 5s infinite;}
.ann .a-k{font-family:"Cinzel"; font-weight:900; letter-spacing:.12em; font-size:.58rem;
  text-transform:uppercase; color:var(--gold-bright);}
.ann .a-t{font-family:"Noto Serif Thai"; font-weight:700; font-size:.95rem; color:#efe4c8; line-height:1.4;}
.ann .a-sub{font-family:"Noto Serif Thai"; font-size:.76rem; color:#b9a47e;}
.ann .a-num{font-family:"Cinzel"; font-weight:900; font-size:1.35rem; color:var(--gold-bright); letter-spacing:.04em;}
.ann .a-num span{font-size:.7rem; color:#b9a47e; letter-spacing:.06em;}

/* ---- left: social-preview slots ---- */
.social-slot{background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
.ss-head{display:flex; align-items:center; gap:8px; padding:9px 13px; border-bottom:1px solid var(--line);
  font-family:"Cinzel"; font-weight:700; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-dim);}
.ss-head svg{width:16px; height:16px; fill:var(--gold);}
.ss-body{display:grid; place-items:center; text-align:center; color:#9a886a;
  font-family:"Noto Serif Thai"; font-size:.76rem; padding:14px; gap:6px;
  background:repeating-linear-gradient(45deg,#241a0f 0 7px,#1d150c 7px 14px);}
.ss-fb .ss-body{height:148px;} .ss-yt .ss-body{height:158px;} .ss-dc .ss-body{height:206px;}
.ss-body .ss-note{font-size:.64rem; color:#6f6047;}

/* ---- right: two-list ranking ---- */
.ranklist + .ranklist{margin-top:12px; padding-top:11px; border-top:1px dashed var(--line);}
.rl-h{font-family:"Cinzel"; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:6px;}
.rl-sub{font-size:.58rem; color:#8a795c; font-family:"Noto Serif Thai"; margin-top:5px; line-height:1.5;}

/* ---- responsive ---- */
@media (max-width:1080px){
  .layout3{grid-template-columns:minmax(0,1fr);}
  .col-center{order:1;} .col-left{order:2;} .col-right{order:3;}
  .col-left,.col-right{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start;}
  .ss-dc{grid-column:1 / -1;}
}
@media (max-width:680px){
  .brandrow{grid-template-columns:auto 1fr; row-gap:8px;}
  .brand-left{grid-column:1; }
  .headclock{grid-column:2; justify-self:end;}
  .wordmark{grid-column:1 / -1; order:3; justify-self:center; font-size:1.15rem;}
  .anns{grid-template-columns:1fr;}
  .col-left,.col-right{grid-template-columns:1fr;}
  .menurow a{font-size:.9rem; padding:8px 12px;}
}
@media (max-width:480px){
  .sitehead{padding:8px 12px 0;}
  .brand-left{gap:10px;} .brand-left .blogo{height:50px;}
  .acctbtn{font-size:.58rem; padding:6px 9px;}
  .headclock span:not(.dot){display:none;}
  .headclock{padding:5px 9px;}
}

/* ===== v10 — banner restore prominence · side banner · left acct · smaller wordmark ===== */
.wordmark{font-size:1.28rem; letter-spacing:.16em;}      /* item 5: a little smaller */

/* item 4: account buttons stacked full-width in the left column */
.acct.acct-col{flex-direction:column; gap:8px; align-items:stretch;}
.acct.acct-col .acctbtn{font-size:.72rem; padding:11px 14px;}
.acct.acct-col .acctbtn small{font-size:.62rem;}

/* item 2: boss/Arena vertical side banner */
.sidebanner{display:block; border-radius:14px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow); transition:transform .12s, border-color .12s;}
.sidebanner:hover{transform:translateY(-2px); border-color:var(--gold);}
.sidebanner img{display:block; width:100%; height:auto;}

/* item 1: keep the announcement banners reading clearly (slightly brighter face + edge) */
.ann{background:linear-gradient(135deg,#43301f,#291d12); border-color:var(--gold);}
.ann .a-t{color:#f7ecd2;}

/* v10 fix: side banner near native width, centered (don't upscale the 140px art) */
.sidebanner{max-width:150px; margin:2px auto;}
@media (max-width:1080px){ .sidebanner{max-width:150px;} }

/* ===== v10b — site-wide background = ExtendedGuildSky (Ken-confirmed) ===== */
body.bg-guildsky{
  background:
    radial-gradient(ellipse 130% 80% at 50% 32%, transparent 42%, rgba(5,4,9,.86) 100%),
    linear-gradient(180deg, rgba(9,8,16,.70) 0%, rgba(9,8,16,.55) 28%, rgba(6,5,11,.88) 100%),
    url("../night/extendedguildsky.jpg") center top/cover no-repeat fixed,
    #0a0810;
}

/* ============================================================
   v11 — framed tabs both columns · art-button GAME MENU ·
   News/Events header art · bigger logo · top-right socials
   ============================================================ */

/* item 7: bigger logo + top-right social row */
.brand-left .blogo{height:86px;}
.brand-right{justify-self:end; display:flex; align-items:center; gap:14px;}
.social-top{display:flex; gap:9px;}
.social-top a{width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(224,162,58,.12); border:1px solid var(--wood-line); transition:all .15s;}
.social-top a:hover{background:rgba(224,162,58,.3); border-color:var(--gold);}
.social-top svg{width:18px; height:18px; fill:var(--paper);}
.social-top a:hover svg{fill:var(--gold-bright);}

/* item 2: wood-framed "tab" panels (both columns) */
.tab{background:linear-gradient(180deg, rgba(30,21,12,.94), rgba(15,10,5,.95));
  border:1px solid var(--wood-line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden;}
.tab-h{font-family:"Cinzel"; font-weight:700; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; padding:10px 14px; color:var(--paper);
  background:linear-gradient(180deg,#3a2a1c,#241a12); border-bottom:2px solid var(--gold);}
.tab-b{padding:14px;}

/* item 3/4: GAME MENU art buttons (real PNGs, hover = _over) */
.menu-b{display:flex; flex-direction:column; gap:10px; align-items:center;}
.acctbtn.block{display:block; width:100%; text-align:center;}
.amenu{display:block; width:100%; max-width:226px; margin:0 auto; background-size:100% 100%;
  background-repeat:no-repeat; transition:transform .12s; image-rendering:auto;}
.amenu:hover{transform:translateY(-1px) scale(1.015);}
.amenu.b-register{aspect-ratio:236/73; background-image:url("../buttons/but_register.png");}
.amenu.b-register:hover{background-image:url("../buttons/but_register_over.png");}
.amenu.b-refill{aspect-ratio:236/55; background-image:url("../buttons/but_refill.png");}
.amenu.b-download{aspect-ratio:236/64; background-image:url("../buttons/but_download.png");}
.amenu.b-download:hover{background-image:url("../buttons/but_download_over.png");}
.amenu.b-guide{aspect-ratio:208/60; background-image:url("../buttons/but_guide.png");}
.amenu.b-guide:hover{background-image:url("../buttons/but_guide_over.png");}
.amenu.b-character{aspect-ratio:208/59; background-image:url("../buttons/but_character.png");}
.amenu.b-character:hover{background-image:url("../buttons/but_character_over.png");}
/* SkillSimulator = CSS text button on the site's theme wood (siblings are baked PNGs; no shared wood
   asset to reuse). Gold serif label, blends into the dark-sepia + gold-serif site. No logo, no ribbon. */
.amenu.b-skillsim{aspect-ratio:auto; background-image:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-height:58px; padding:9px 12px; border-radius:11px; text-decoration:none;
  background:linear-gradient(180deg,var(--wood-2),var(--wood));
  border:1.5px solid #8a5e15; box-shadow:0 4px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(246,196,84,.14);}
.amenu.b-skillsim .ss-th{font-family:"Noto Serif Thai","Cinzel",serif; font-weight:700; font-size:.98rem;
  line-height:1.15; color:var(--gold-bright); text-shadow:0 1px 2px rgba(0,0,0,.6);}
.amenu.b-skillsim .ss-en{font-family:"Cinzel"; font-weight:900; font-size:.92rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-bright); text-shadow:0 1px 2px rgba(0,0,0,.6);}
.amenu.b-skillsim:hover{filter:brightness(1.08); transform:translateY(-1px) scale(1.015); border-color:var(--gold);}
.amenu.b-gm{aspect-ratio:183/70; max-width:200px; background-image:url("../buttons/gm_direct.png");}
.amenu-wrap{position:relative; width:100%; display:flex; justify-content:center;}
.amenu.disabled{filter:grayscale(.85) brightness(.62); cursor:not-allowed; pointer-events:none;}
.cs-badge{position:absolute; top:-7px; right:18px; background:var(--red); color:#ffe9d9;
  font-family:"Cinzel"; font-size:.46rem; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px;}

/* item 5: News/Events header art */
.sec-header{display:block; margin:4px 0 2px;}
.sec-header img{display:block; width:100%; max-width:440px; height:auto;}
.events-list{display:flex; flex-direction:column; gap:8px;}
.ev-row{display:flex; align-items:center; gap:12px; padding:11px 16px; border-radius:14px;
  background:linear-gradient(180deg, var(--paper), var(--paper-deep)); border:1px solid var(--paper-edge);
  box-shadow:0 6px 18px rgba(0,0,0,.4); color:var(--ink); font-family:"Noto Serif Thai";}
.ev-row .ev-when{margin-left:auto; font-family:"Cinzel"; font-size:.72rem; color:var(--slate); white-space:nowrap;}
.ev-row .ev-tag{font-family:"Cinzel"; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--ember); padding:3px 9px; border-radius:999px;}
.ev-row b{color:#42301a;}

/* item 6: bigger boss side banner inside its tab */
.tab .sidebanner{max-width:100%; margin:0 auto;}

/* social slots inside the Community tab: drop their own border (tab provides it) */
.tab .social-slot{border:none; border-radius:10px; background:rgba(0,0,0,.18);}
.tab .social-slot + .social-slot{margin-top:12px;}

@media (max-width:680px){
  .brand-right{flex-direction:row;}
  .social-top a{width:32px; height:32px;}
}

/* v11 fix: mobile header — shrink wide logo so all 3 social icons + clock fit */
@media (max-width:680px){
  .brandrow{grid-template-columns:auto 1fr; row-gap:8px; align-items:center;}
  .brand-left{grid-column:1; justify-self:start;}
  .brand-right{grid-column:2; justify-self:end; gap:8px;}
  .wordmark{grid-column:1 / -1; order:3; justify-self:center; font-size:1.1rem;}
  .brand-left .blogo{height:52px;}
  .social-top{gap:6px;}
  .social-top a{width:30px; height:30px;}
  .social-top svg{width:15px; height:15px;}
}

/* ============================================================
   v12 — header aligned to body width · bigger logo · smaller
   banners · server-status carronian · transparent News/Events
   ============================================================ */

/* follow-up: header content shares the 3-column body's max-width + 22px gutters */
.sitehead{padding:10px 0 0;}
.brandrow{max-width:1440px; margin:0 auto; padding:0 22px;}
.menurow{max-width:1440px; margin:8px auto 0; padding:8px 22px 12px;}

/* item 7: bigger logo (source 480x166 → 108px tall ≈ 312px wide, within native res) */
.brand-left .blogo{height:108px;}

/* item 8: shorter / more compact announcement banners */
.ann{min-height:0; padding:11px 16px; gap:3px;}
.ann .a-t{font-size:.9rem; line-height:1.35;}
.ann .a-num{font-size:1.15rem;}

/* item 5: server-status row shows the Carronian server-name art */
.srv-row{display:flex; align-items:center; gap:10px;}
.srv-name{height:26px; width:auto; border-radius:5px; display:block;}
.srv-row .pill{margin-left:auto;}

/* item 2: transparent News/Events headers sit clean (no plate behind) */
.sec-header{background:none;}

/* item 4: footer BigBug logo (transparent PNG, no parchment plate) */
.sitefoot .f-bb img, footer .f-bb img{height:54px; background:none; padding:0; border-radius:0;}

@media (max-width:680px){
  .brand-left .blogo{height:52px;}
}

/* v12b — minimal footer (credit + logo only) */
footer.v8{padding:26px 18px 30px;}
footer.v8 .f-credit{line-height:1.8; font-size:.82rem;}
footer.v8 .f-bb{margin-top:14px;}
footer.v8 .f-bb img{height:62px; background:none; padding:0; border-radius:0;}

/* ===== v14 polish ===== */
/* item 1: soft golden glow masks the white fringe on the transparent News/Events headers */
.sec-header img{
  filter:drop-shadow(0 0 6px rgba(224,162,58,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
/* item 5: server name as plain styled text (no image) */
.srv-name-txt{font-family:"Cinzel"; font-weight:700; font-size:.92rem; letter-spacing:.04em;
  color:var(--gold-bright); text-shadow:0 1px 4px rgba(0,0,0,.5);}
.srv-row .pill{margin-left:auto;}

/* ===== v13 — artwork-led hero (minimal overlay, one CTA, contrast scrim) ===== */
.hslide{position:relative; min-height:400px; padding:0; display:block;}
.hart{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.hscrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(8,5,2,.92) 0%, rgba(8,5,2,.55) 26%, rgba(8,5,2,0) 52%),
            linear-gradient(to right, rgba(8,5,2,.6) 0%, rgba(8,5,2,0) 45%);}
.hcap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 30px 30px;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;}
.hcap .tagline-en{font-family:"Cinzel"; font-weight:700; letter-spacing:.16em; font-size:1rem;
  text-transform:uppercase; color:var(--gold-bright); text-shadow:0 2px 10px rgba(0,0,0,.95); margin:0;}
.hcap .btn-gold{font-size:1.1rem; padding:13px 40px;}
@media (max-width:680px){
  .hslide{min-height:300px;}
  .hcap{padding:16px 18px 22px;} .hcap .tagline-en{font-size:.82rem;} .hcap .btn-gold{font-size:.95rem; padding:11px 28px;}
}

/* ===== v15 — enlarged denoised logo + Login button matched to Register (236x73) ===== */
.brand-left .blogo{height:122px;}        /* bigger, denoised source 260x91 */
@media (max-width:680px){ .brand-left .blogo{height:60px;} }

/* Login plate = same footprint as the Register art button (236x73), grayed coming-soon */
.loginbtn{display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; max-width:226px; aspect-ratio:236/73; margin:0 auto; border-radius:12px;
  font-family:"Noto Serif Thai"; font-size:.82rem; line-height:1.15; text-align:center;
  background:linear-gradient(180deg,#3a2a1c,#241a12); border:1.5px solid #5e482c;
  color:#9a886a; cursor:not-allowed;}
.loginbtn b{font-family:"Cinzel"; letter-spacing:.12em; font-size:.95rem; color:#b39e7d; margin-top:1px;}

/* v13b — small text-style secondary CTA on the community hero slide */
.hcap .hsec{font-family:"Noto Serif Thai"; font-weight:600; font-size:.82rem; color:var(--gold-bright);
  text-shadow:0 2px 8px rgba(0,0,0,.9); text-decoration:none; margin-top:-4px;}
.hcap .hsec:hover{color:#fff; text-decoration:underline;}

/* v14b — announcement banners: bigger text, balanced equal-height pair */
.ann{min-height:104px; padding:14px 20px; gap:5px; justify-content:center;}
.ann .a-t.big{font-size:1.18rem; font-weight:700; line-height:1.3; color:#f7ecd2;}
.ann .a-sub{font-size:.86rem;}
.ann .a-label{font-family:"Noto Serif Thai"; font-weight:600; font-size:.92rem; color:#efe4c8; line-height:1.3;}
.ann .a-num{font-size:1.5rem; font-weight:900; margin-top:2px;}
@media (max-width:680px){ .ann{min-height:88px;} .ann .a-t.big{font-size:1.05rem;} }

/* ===== v16 — hero CTA = dark wood fill + gold frame; compact 2-line banners ===== */
.btn-hero{
  display:inline-block; font-family:"Cinzel"; font-weight:700; letter-spacing:.06em;
  font-size:1.02rem; padding:12px 30px; border-radius:13px; text-decoration:none;
  color:var(--gold-bright);
  background:linear-gradient(180deg, rgba(48,34,20,.94), rgba(28,19,11,.96));
  border:2px solid var(--gold);
  box-shadow:0 4px 16px rgba(0,0,0,.5), inset 0 0 16px rgba(224,162,58,.16);
  text-shadow:0 1px 4px rgba(0,0,0,.8); transition:all .14s;
}
.btn-hero:hover{transform:translateY(-2px); border-color:var(--gold-bright);
  color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.55), inset 0 0 22px rgba(246,196,84,.28);}
@media (max-width:680px){ .btn-hero{font-size:.9rem; padding:10px 22px;} }

/* item 4: compact announcement banners — smaller text, 2 lines, shorter boxes */
.ann{min-height:0; padding:12px 18px; gap:4px;}
.ann .a-t.big{font-size:1.02rem; line-height:1.3;}
.ann .a-sub{font-size:.8rem;}
.ann .a-label{font-size:.84rem; line-height:1.3;}
.ann .a-num{font-size:1.3rem; margin-top:1px;}

/* ===== v17 — normalize center-column vertical rhythm (even 16px gaps) ===== */
.col-center{gap:16px;}
.sec-header{margin:0;}            /* header hugs the column rhythm, no extra margin */
.cards{gap:16px;}                 /* card-to-card matches section gap */
.events-list{gap:16px;}           /* event rows match too */

/* v20 — nudge News section up ~5px to tighten the gap above it */
.sec-header.news-up{margin-top:-5px;}

/* ===== v18 — News nudge more · pre-register SOON tag (gold) ===== */
.sec-header.news-up{margin-top:-10px;}
.ann .a-num .prereg-soon{font-size:1.02rem; font-weight:700;}
.soon-tag{display:inline-block; font-family:"Cinzel"; font-weight:700; font-size:.62rem;
  letter-spacing:.08em; color:#2a1d0a; vertical-align:middle; margin-left:6px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold)); border:1px solid #8a5e15;
  padding:2px 9px; border-radius:999px; box-shadow:0 1px 4px rgba(0,0,0,.4);}

/* ===== v18b — social preview tabs in brand colors (header + icon) ===== */
.ss-fb .ss-head{background:#1877F2; color:#fff; border-bottom-color:#0f5ed0;}
.ss-yt .ss-head{background:#FF0000; color:#fff; border-bottom-color:#c40000;}
.ss-dc .ss-head{background:#5865F2; color:#fff; border-bottom-color:#3f4ad0;}
.ss-fb .ss-head svg, .ss-yt .ss-head svg, .ss-dc .ss-head svg{fill:#fff;}
/* subtle brand-tinted left accent on each preview body, keep it readable */
.ss-fb{border:1px solid #1877F2;} .ss-yt{border:1px solid #FF0000;} .ss-dc{border:1px solid #5865F2;}
.tab .social-slot{border-width:1px;}

/* ===== v19 — native side banner (no upscale) + nav-style announcement boxes ===== */
/* item 1: show the side banner at NATIVE size, framed; never scale the image up */
.tab .sidebanner{max-width:100%; margin:0 auto; display:flex; justify-content:center;}
.tab .sidebanner img{width:auto; height:auto; max-width:100%; display:block;}

/* item 3: announcement boxes match the top-menu look — dark wood, white Thai / gray EN */
.ann{
  background:linear-gradient(180deg,#2c2014,#1d140c);
  border:1px solid var(--wood-line);
  box-shadow:0 4px 16px rgba(0,0,0,.45);
}
.ann .a-t.big{font-family:"Noto Serif Thai"; font-weight:700; color:#f4ecdb; font-size:1.02rem;}
.ann .a-sub{color:#a89d89; font-size:.8rem;}                 /* muted gray English subline */
.ann .a-label{font-family:"Noto Serif Thai"; font-weight:700; color:#f4ecdb; font-size:.92rem;}
.ann .a-num .prereg-soon{color:#a89d89; font-weight:700;}    /* muted, the gold ·SOON pill stays */

/* ===== v20 — shiny banners back · gold sublines · native+120% side banner · tighter ===== */
/* item 2: REVERT to the shinier announcement box (gold border, warm gradient) */
.ann{
  background:linear-gradient(135deg,#43301f,#291d12);
  border:1.5px solid var(--gold);
  box-shadow:inset 0 0 22px rgba(224,162,58,.16), 0 6px 18px rgba(0,0,0,.5);
}
/* item 3: sublines GOLD (not gray) */
.ann .a-sub{color:var(--gold-bright);}
/* item 4: pre-register value = plain GOLD typed text, no badge */
.ann .a-num{color:var(--gold-bright); font-weight:900; font-size:1.18rem;}

/* item 1: side banner ~120% of native (140->168px), crisp, centered, even padding */
.tab .sidebanner{justify-content:center; padding:2px;}
.tab .sidebanner img{width:168px; max-width:100%; height:auto;}

/* item 5: nudge News + Events sections up a bit more */
.sec-header.news-up{margin-top:-14px;}
.sec-header.events-up{margin-top:-8px;}

/* ===== v21 — "REMASTERED" caption under logo, outlined like the Thai subtitle ===== */
.logo-wrap{display:flex; flex-direction:column; align-items:center; line-height:1;}
.logo-remaster{
  font-family:"Cinzel"; font-weight:900; font-size:.72rem; letter-spacing:.42em;
  text-transform:uppercase; text-align:center; margin-top:-8px; padding-left:.42em;
  color:#0a1626;                            /* dark near-black fill */
  -webkit-text-stroke:0.8px #2f9fe0;        /* blue outer rim */
  text-stroke:0.8px #2f9fe0;
  text-shadow:0 0 3px rgba(60,170,230,.55); /* soft blue glow to lift it off the dark header */
}
@media (max-width:680px){ .logo-remaster{font-size:.56rem; margin-top:-5px;} }

/* ===== v21b — REMASTERED color/position + frameless side banner ===== */
/* item 1: align REMASTERED left (under the logo text) + up, light-cyan like สิบสองหางออนไลน์ */
.logo-wrap{align-items:flex-start;}
.logo-remaster{
  margin-top:-16px; margin-left:14px; padding-left:.42em;
  font-size:.68rem; letter-spacing:.4em;
  color:#8FD4F2;                                  /* light cyan-blue fill */
  -webkit-text-stroke:0.8px #1B4F8A;              /* deeper blue rim */
  text-stroke:0.8px #1B4F8A;
  text-shadow:0 0 4px #2E8BD0, 0 1px 1px rgba(0,0,0,.4);  /* soft blue glow */
}
@media (max-width:680px){ .logo-remaster{font-size:.52rem; margin-top:-9px; margin-left:8px;} }

/* item 2: frameless side banner — native size, soft border + glow, no boxy tab */
.sidebanner-bare{display:block; width:max-content; max-width:100%; margin:2px auto;
  border-radius:12px; overflow:hidden; line-height:0;
  box-shadow:0 0 0 1px rgba(224,162,58,.35), 0 6px 20px rgba(0,0,0,.5), 0 0 18px rgba(224,162,58,.18);
  transition:transform .12s, box-shadow .12s;}
.sidebanner-bare:hover{transform:translateY(-2px);
  box-shadow:0 0 0 1px var(--gold), 0 8px 24px rgba(0,0,0,.55), 0 0 24px rgba(246,196,84,.3);}
.sidebanner-bare img{display:block; width:auto; height:auto; max-width:100%;}

/* ===== v22 — REMASTERED dark-fill/blue-rim + framed high-res side banner ===== */
/* item 1: dark fill, blue outline + glow (revert from blue fill); up + left */
.logo-remaster{
  color:#0a1422;                              /* black/dark fill */
  -webkit-text-stroke:0.8px #2f9fe0;          /* blue rim */
  text-stroke:0.8px #2f9fe0;
  text-shadow:0 0 4px #2E8BD0, 0 0 2px rgba(46,139,208,.8);  /* soft blue glow */
  margin-top:-19px; margin-left:10px;
}
/* item 2: high-res banner fills the framed tab cleanly (downscale = crisp), rounded */
.tab .sidebanner img{width:100%; max-width:100%; height:auto; border-radius:8px;}

/* ===== v23 — balance the two announcement boxes: equal main / equal subline sizes ===== */
.ann .a-t.big, .ann .a-label{font-size:1.0rem; font-weight:700; color:#f4ecdb; line-height:1.3;}
.ann .a-sub, .ann .a-num{font-size:.86rem; font-weight:700; line-height:1.3;}
.ann .a-num{color:var(--gold-bright);}   /* keep เร็วๆ นี้ · SOON gold */

/* ===== v28 — right banner heading one line · sublines aligned · nav centered ===== */
/* right pre-register heading must fit one line (shrink + nowrap); sublines then align */
.ann .a-label{font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ann{justify-content:flex-start;}                 /* anchor content top so both boxes' rows line up */
.ann .a-t.big, .ann .a-label{min-height:1.35em; display:flex; align-items:center;}
.ann .a-sub, .ann .a-num{min-height:1.2em; display:flex; align-items:center;}
/* nav row: nudge slightly left so it reads centered within the body width */
.menurow{padding-right:34px;}

/* ===== v29 — bigger pre-register heading + match a-num font to a-sub (CBT) ===== */
.ann .a-label{font-size:.94rem;}   /* +~2px larger "ลงทะเบียนล่วงหน้า · PRE-REGISTER ACCOUNTS" */
.ann .a-num{font-family:"Spectral","Noto Serif Thai",Georgia,serif; font-weight:700;
  font-style:normal; letter-spacing:normal;}  /* match the CBT subline font */

/* v30 — nudge nav row 3px further left */
.menurow{transform:translateX(-3px);}

/* ===== v31 — force both sublines identical + nav 3px more left ===== */
.ann .a-sub, .ann .a-num{
  font-family:"Spectral","Noto Serif Thai",Georgia,serif !important;
  font-size:.86rem !important; font-weight:700 !important; font-style:normal !important;
  letter-spacing:normal !important; color:var(--gold-bright) !important; line-height:1.3 !important;
}
.menurow{transform:translateX(-6px);}   /* was -3px; 3px more left */

/* ===== v32 — header STATIC (page is short, no need to follow scroll) =====
   To restore the sticky header in future, replace the rule below with:
       .sitehead{ position:sticky; top:0; z-index:100; }
   (the original sticky styling is preserved in the v9 block above for reference) */
.sitehead{position:static;}

/* ===== v33 — contrast + legibility polish (WCAG AA on small text) ===== */
/* social-slot placeholder note was #6f6047 → 3.44:1 on the dark slot (fails AA);
   lift to the muted-tan ramp. Smaller size still keeps it subordinate. */
.ss-body .ss-note{color:#9a886a;}
/* ranking explainer was 9.28px / 4.67:1 (marginal + cramped); nudge size + color */
.rl-sub{font-size:.62rem; color:#9a886a;}