/*
Theme Name: Bilvero Lac
Theme URI: https://bilvero.site/
Version: 1.0.1
Author: bilvero
Description: ธีมคาสิโนริมทะเลสาบของ bilvero พร้อมคู่มือเกมและกีฬาภาษาไทย
Text Domain: bilvero-lac
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
*/
:root {
    --lake: #112b48;
    --deep: #091c32;
    --blue: #1b466a;
    --slate: #607284;
    --mist: #ecf0f1;
    --snow: #f9faf9;
    --ink: #15273b;
    --text: #3f5061;
    --rule: #c2cbd1;
    --rose: #eed2cd;
    --coral: #6e3c41;
    --sans: "Fahkwang", "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
    --display: "Instrument Serif", "Baskerville", "Times New Roman", serif;
    --gutter: clamp(20px, 4.7vw, 84px);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--snow); font: 1rem/1.7 var(--sans); overflow-wrap: break-word; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.45; }
a { color: inherit; text-decoration: none; }
img, picture, svg { display: block; }
img { max-width: 100%; }
button, select { font: inherit; }
button, select, label[for] { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #876162; outline-offset: 3px; }
.hero :focus-visible, .closing :focus-visible { outline-color: var(--rose); }
.frame { margin-inline: auto; width: min(1490px, calc(100% - 2 * var(--gutter))); }
.skip { position: absolute; z-index: 20; padding: 8px 15px; background: white; transform: translateY(-150%); }
.skip:focus { transform: none; }
.mast { background: var(--snow); color: var(--lake); position: relative; z-index: 3; border-bottom: 1px solid var(--rule); }
.mast-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 68px; }
.wordmark { display: inline-flex; gap: 8px; align-items: center; flex: none; white-space: nowrap; }
.wordmark img { width: 35px; height: 35px; }
.wordmark > span { font: italic 600 2rem/1 var(--display); letter-spacing: -.065em; }
.main-menu ul, .closing ul { list-style: none; margin: 0; padding: 0; }
.main-menu ul { display: flex; gap: clamp(12px, 2.1vw, 36px); align-items: center; }
.main-menu a, .desk-login { display: inline-flex; align-items: center; min-height: 44px; font-size: .92rem; font-weight: 600; }
.main-menu a:hover, .desk-login:hover, .main-menu a[aria-current="page"] { color: var(--coral); }
.mast-actions { display: flex; align-items: center; gap: 18px; }
.main-menu .drawer-login, .nav-toggle { display: none; }
.ui-icon { width: 17px; height: 17px; flex: none; }
.action { display: inline-flex; min-height: 45px; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; padding: 8px 19px; border-radius: 7px; font-size: .94rem; font-weight: 700; line-height: 1.5; }
.primary-action { background: var(--rose); color: var(--deep); }
.primary-action:hover { background: #ffebe5; }
.mast .primary-action, .ink-action { background: var(--lake); color: white; }
.mast .primary-action:hover, .ink-action:hover { background: var(--blue); }
.outline-action { color: white; background: #091c3287; border-color: #cedae2; }
.outline-action:hover { background: var(--blue); }

.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    min-height: clamp(450px, 39vw, 635px);
    background: var(--lake);
    color: var(--snow);
}
.cover-art { position: absolute; inset: 0; z-index: -2; display: block; overflow: hidden; }
.cover-art img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 49%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #071d32ed 0%, #0b253ce7 19%, #0c293fb3 36%, #0c203940 58%, transparent 79%), linear-gradient(0deg, #0b1e356e, transparent 48%); }
.hero-frame { padding-block: clamp(32px, 5.3vw, 90px); }
.hero-copy { max-width: min(49%, 690px); }
.hero h1 { font-size: clamp(1.52rem, 2.5vw, 2.85rem); letter-spacing: -.04em; }
.hero-brand { display: block; margin-bottom: .12em; font: italic 500 clamp(4.25rem, 8.3vw, 9.3rem)/.96 var(--display); letter-spacing: -.075em; color: #faf4ec; }
.hero-heading { display: block; text-wrap: balance; }
.hero-intro { max-width: 35rem; color: #e1e8ef; margin: 12px 0 22px; font-size: clamp(.94rem,1.07vw,1.16rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.directory { padding-block: clamp(25px, 2.6vw, 46px) clamp(38px, 4.8vw, 80px); }
.section-head, .journal-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 17px; border-bottom: 1px solid var(--rule); padding-bottom: 11px; }
.section-head h2, .journal-heading h2, .member-panel h2 { color: var(--lake); font-size: clamp(1.42rem,2.2vw,2.55rem); letter-spacing: -.04em; }
.text-link { display: inline-flex; gap: 7px; align-items: center; min-height: 40px; font-size: .92rem; font-weight: 650; color: var(--blue); }
.text-link:hover, .member-panel a:hover { text-decoration: underline; text-underline-offset: 4px; }
.topic-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: clamp(10px,1.6vw,26px); }
.topic { display: flex; min-width: 0; flex-direction: column; color: var(--lake); }
.topic-photo { position: relative; aspect-ratio: 1.64; overflow: hidden; border-radius: 8px; background: var(--slate); }
.topic-photo img, .read-cover img { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; transition:transform .24s ease; }
.topic:hover img, .read-cover:hover img { transform: scale(1.035); }
.topic-caption { display: flex; gap: 8px; justify-content: space-between; align-items: center; padding: 11px 0 4px; }
.topic-caption h3 { font-size: clamp(1.11rem,1.45vw,1.65rem); letter-spacing: -.02em; }
.topic-caption p { color: var(--text); font-size: clamp(.78rem,.9vw,.97rem); }
.topic-arrow { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--rule); border-radius: 50%; }
.topic-arrow .ui-icon { width: 14px; }

.lesson { display: grid; align-items: center; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); gap: clamp(20px,4vw,65px); padding: clamp(22px,3.6vw,58px); border-block: 1px solid var(--rule); background: var(--mist); }
.lesson-copy h2 { font-size: clamp(1.6rem,2.7vw,3.1rem); color: var(--lake); letter-spacing: -.035em; }
.lesson-copy p { margin: 10px 0 5px; color: var(--text); max-width: 35rem; }
.score-demo { margin: 0; padding: 12px 18px 18px; min-width: 0; border: 1px solid #adbac5; border-radius: 9px; background: #f7f9fa; }
.score-demo legend { padding-inline: 5px; font-size: .95rem; font-weight: 650; }
.score-choice { position: absolute; width: 1px; height: 1px; opacity: 0; }
.score-demo label { display: inline-flex; align-items: center; min-height: 40px; border: 1px solid #b9c4cc; border-radius: 5px; margin: 2px 3px 4px 0; padding: 5px 10px; font-size: .87rem; }
.score-choice:checked + label { background: var(--lake); border-color: var(--lake); color: white; }
.score-choice:focus-visible + label { outline: 3px solid var(--coral); outline-offset: 2px; }
.score-result { display: none; gap: 16px; align-items: center; padding-top: 12px; }
#score-eight:checked ~ .result-eight, #score-nine:checked ~ .result-nine, #score-ten:checked ~ .result-ten { display: flex; }
.target-face {
    flex: none; position: relative; width: clamp(82px,9.5vw,145px); aspect-ratio: 1; border-radius: 50%;
    background:
        repeating-radial-gradient(circle closest-side, transparent 0 9.2%, #3b3f45 9.3% 10%),
        radial-gradient(circle closest-side, #f7ce61 0 20%, #d55d64 20% 40%, #65a6c3 40% 60%, #343943 60% 80%, #fafafa 80% 100%);
    box-shadow: inset 0 0 0 1px #465265;
}
.target-face i { position:absolute; top:50%; left:var(--shaft); width:3.6%; height:3.6%; transform:translateY(-50%); border-radius:50%; background:#131923; }
.target-face i::after { content:""; position:absolute; top:50%; left:100%; width:clamp(12px,1.7vw,25px); border-top:1px dashed #182436; }
.target-eight { --shaft:60.7%; } .target-nine { --shaft:60%; } .target-ten { --shaft:55%; }
.score-explainer { min-width: 0; } .score-explainer strong { display: block; color: var(--lake); font-size: 1.25rem; }
.score-explainer p { font-size: .92rem; line-height: 1.65; color: var(--text); }

.journal { padding-block: clamp(34px,4.4vw,75px); }
.journal-controls { display: flex; align-items: center; gap: 7px; font-size: .86rem; }
.journal-controls select { padding: 6px 9px; border: 1px solid var(--rule); border-radius: 4px; color: var(--ink); background: white; }
.journal-list, .read-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.8vw,28px); }
.read-card, .reading-side { min-width:0; }
.read-cover { position:relative; display:block; width:100%; aspect-ratio:1.64; overflow:hidden; border-radius:8px; background:var(--slate); }
.read-body { padding-block:13px; }
.read-meta,.article-byline,.crumb { display:flex; flex-wrap:wrap; align-items:center; gap:5px 11px; font-size:.84rem; color:var(--text); }
.read-meta span { color:var(--coral); font-weight:700; }
.read-body h2,.read-body h3 { font-size:clamp(1.1rem,1.45vw,1.5rem); margin:.4em 0; }
.read-body h2 a:hover,.read-body h3 a:hover { text-decoration:underline; }
.read-body p { font-size:.95rem; color:var(--text); line-height:1.65; }
.member-guides,.reading { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,.8fr); gap:clamp(24px,5.8vw,90px); }
.member-guides { padding-bottom:clamp(28px,4vw,68px); }
.member-panel { align-self:start; border:1px solid var(--rule); padding:22px; background:#eef3f5; border-radius:8px; }
.member-panel h2 { font-size:1.37rem; margin-bottom:12px; }
.member-panel a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--rule); color:var(--blue); font-weight:600; }
.closing { padding:clamp(30px,4vw,70px) 0 20px; color:#f4f6f8; background:var(--deep); }
.closing-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(18px,5vw,80px); }
.closing-brand p { max-width:27rem; margin-top:14px; color:#d7e0e8; font-size:.94rem; }
.closing h2 { font-size:1.06rem; margin:.16rem 0 .66rem; }
.closing nav a { display:inline-block; padding:4px 0; font-size:.91rem; color:#e2e9ef; }
.closing nav a:hover { color:var(--rose); text-decoration:underline; }
.colophon { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 18px; padding-top:14px; margin-top:25px; border-top:1px solid #43566b; font-size:.8rem; color:#cbd6e0; }
.inner-head { background:var(--lake); color:var(--snow); padding:clamp(26px,4vw,70px) 0; border-bottom:3px solid var(--rose); }
.inner-head h1 { max-width:64rem; font-size:clamp(1.85rem,3.45vw,4.1rem); letter-spacing:-.04em; text-wrap:balance; }
.inner-head p { max-width:55rem; margin-top:13px; color:#dce6f0; font-size:clamp(.98rem,1.15vw,1.2rem); }
.crumb,.article-byline { color:#f5d8d0; margin:0 0 12px; }
.crumb a, .article-byline a { text-decoration:underline; text-underline-offset:3px; }
.reading,.archive-body,.missing { padding-block:clamp(28px,4vw,65px); }
.archive-intro { max-width:870px; margin-bottom:28px; }
.prose { min-width:0; line-height:1.85; font-size:1.05rem; }
.prose h2 { font-size:clamp(1.27rem,1.95vw,2rem); margin:1.45em 0 .4em; }
.prose h3 { font-size:1.17rem; margin:1.3em 0 .4em; }
.prose > :first-child { margin-top:0; }
.prose p,.prose ol,.prose ul,.prose blockquote { margin:0 0 1em; }
.prose a:not(.action) { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.prose ol,.prose ul { padding-inline-start:1.5em; }
.prose table { border-collapse:collapse; width:100%; max-width:100%; margin-block:1em; font-size:.92em; }
.prose caption { text-align:left; font-weight:700; }
.prose td,.prose th { padding:7px 9px; text-align:start; border:1px solid var(--rule); overflow-wrap:anywhere; }
.prose th { background:var(--mist); }
.prose figure { margin-inline:0; max-width:100%; overflow-x:auto; }
.reading-side img { width:100%; height:auto; border-radius:8px; }
.outbound { padding:16px 18px; margin-bottom:25px; border-inline-start:4px solid var(--blue); background:var(--mist); }
.outbound p { margin:8px 0 0; font-size:.93rem; color:var(--text); }
.post-links { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; border-top:1px solid var(--rule); padding-top:18px; }
.pagination { margin-top:24px; } .page-numbers { display:inline-block; padding:6px 10px; }
.missing h1 { font-size:clamp(2rem,5vw,4rem); } .missing .action { margin-top:15px; }
.nav-toggle span { width:17px; height:2px; background:var(--lake); }
@media(max-width:1000px){
    .mast-inner,.mast-actions { gap:12px; }
    .hero-copy { max-width:53%; }
    .topic-grid { gap:9px; } .topic-arrow { display:none; }
}
@media(max-width:860px){
    .mast-inner { min-height:60px; flex-wrap:wrap; gap:0; }
    .mast-actions { margin-left:auto; gap:8px; }
    .nav-toggle { display:grid; place-content:center; gap:5px; border:1px solid var(--rule); width:42px; height:42px; border-radius:6px; background:white; }
    .main-menu { display:none; position:absolute; top:100%; left:0; width:100%; padding:12px var(--gutter); background:var(--snow); border-bottom:1px solid var(--rule); }
    .menu-open .main-menu { display:block; }
    .main-menu ul { flex-wrap:wrap; gap:0 22px; }
    .main-menu .drawer-login { display:inline-flex; gap:7px; color:var(--coral); } .desk-login { display:none; }
    .journal-list,.read-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:730px){
    .lesson,.member-guides,.reading { grid-template-columns:1fr; }
    .lesson-copy h2 br { display:none; }
    .closing-grid { grid-template-columns:1fr 1fr; } .closing-brand { grid-column:1/-1; }
}
@media(max-width:660px){
    :root { --gutter:15px; }
    .mast-inner { min-height:56px; } .wordmark { gap:5px; } .wordmark img { width:29px; height:29px; } .wordmark > span { font-size:1.7rem; }
    .mast .primary-action { min-height:41px; padding:6px 10px; font-size:.82rem; }
    .nav-toggle { width:40px; height:40px; }
    .hero { grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr); align-items:center; min-height:0; gap:16px; padding:16px var(--gutter); }
    .hero::before { display:none; }
    .hero-frame { grid-area:1/1; width:auto; padding:0; margin:0; min-width:0; }
    .cover-art { position:relative; grid-area:1/2; inset:auto; z-index:0; width:100%; aspect-ratio:2/3; border-radius:6px; overflow:hidden; }
    .cover-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; }
    .hero-copy { max-width:100%; }
    .hero-brand { font-size:clamp(2.65rem,8vw,4rem); }
    .hero-heading { text-wrap:initial; font-size:1.34rem; }
    .hero-intro { margin:8px 0 14px; font-size:.92rem; }
    .hero-actions { gap:6px; } .hero-actions .action { min-height:43px; padding:6px 10px; font-size:.84rem; }
    .section-head,.journal-heading { gap:7px; } .section-head h2,.journal-heading h2 { font-size:1.41rem; } .section-head .text-link,.journal-controls { font-size:.8rem; }
    .topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 10px; }
    .topic-casino { grid-column:1/-1; display:grid; grid-template-columns:1.12fr 1fr; align-items:center; border-block:1px solid var(--rule); padding-block:9px; }
    .topic-casino .topic-caption { padding-inline:12px; }
    .topic-photo { aspect-ratio:1.55; } .topic-caption { padding-block:7px 1px; } .topic-caption h3 { font-size:1.12rem; }
    .lesson { padding:19px 15px; gap:12px; }
    .score-demo { padding:8px 8px 13px; } .score-demo label { font-size:.8rem; padding-inline:7px; } .score-result { gap:10px; }
}
@media(max-width:480px){
    .hero { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0 0 22px; }
    .cover-art { width:100%; flex:0 0 auto; border-radius:0; }
    .hero-frame { padding:17px var(--gutter) 0; }
    .hero-brand { font-size:clamp(2.55rem,10.8vw,3.3rem); }
    .hero-heading { font-size:clamp(1.2rem,5vw,1.6rem); }
}
@media(max-width:365px){
    :root { --gutter:11px; }
    .journal-list,.read-grid { grid-template-columns:1fr; }
    .mast .primary-action .ui-icon { display:none; }
    .hero-actions .action { padding-inline:8px; }
    .score-result { align-items:flex-start; }
    .score-demo label { font-size:.76rem; padding-inline:5px; }
}
@media(prefers-reduced-motion:reduce){
    *, *::before, *::after { transition:none !important; scroll-behavior:auto !important; }
}