/*
Theme Name: Youwinn24 Billiard
Version: 1.0.0
Author: youwinn24
Description: คู่มือกีฬาและโต๊ะเกมภาษาไทยในบรรยากาศสโมสรบิลเลียด
Text Domain: youwinn24-billiard
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
*/
:root {
    --ink: #201a1b;
    --paper: #f6f2e9;
    --panel: #fffdf8;
    --wine: #62202c;
    --deep-wine: #491522;
    --gold: #d8b779;
    --muted: #645b59;
    --line: #d4c8b7;
    --body: "Leelawadee UI", "Noto Sans Thai", Tahoma, Arial, sans-serif;
    --display: "Baskervville", "Georgia", "Times New Roman", serif;
}
*, *::after, *::before { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1rem/1.65 var(--body); overflow-wrap: break-word; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.32; }
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; }
a, button, select, label[for] { touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #d3691b; outline-offset: 3px; }
.frame { width: min(1350px, calc(100% - clamp(40px, 9vw, 160px))); margin-inline: auto; }
.skip { position: fixed; top: 6px; left: 6px; z-index: 9; transform: translateY(-170%); padding: 8px 16px; background: white; color: var(--ink); }
.skip:focus { transform: none; }
.ui-icon { width: 17px; height: 17px; flex: none; }
.mast { position: relative; z-index: 4; background: var(--panel); border-top: 4px solid var(--wine); border-bottom: 1px solid var(--line); }
.mast-inner, .wordmark, .mast-actions, .main-menu ul { display: flex; align-items: center; }
.mast-inner { min-height: 70px; gap: clamp(16px, 3.2vw, 60px); }
.wordmark { gap: 7px; width: fit-content; flex: none; }
.wordmark img { width: 37px; height: 37px; }
.wordmark span { font: bold 1.37rem/1 var(--display); letter-spacing: -.05em; }
.main-menu { border-left: 1px solid var(--line); padding-left: clamp(16px, 2.25vw, 36px); }
.main-menu ul, .closing ul { list-style: none; margin: 0; padding: 0; }
.main-menu ul { gap: clamp(13px, 1.65vw, 28px); }
.main-menu a, .desk-login { display: inline-flex; align-items: center; min-height: 44px; font-size: .93rem; font-weight: 650; }
.mast-actions { margin-left: auto; gap: 16px; }
.main-menu .drawer-login, .nav-toggle { display: none; }
.main-menu a:hover, .main-menu a[aria-current], .desk-login:hover { color: var(--wine); text-decoration: underline; text-underline-offset: 5px; }
.action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; gap: 9px; padding: 8px 18px; border: 1px solid transparent; border-radius: 3px; font-size: .93rem; line-height: 1.45; font-weight: 700; }
.primary-action, .ink-action { background: var(--wine); color: white; }
.primary-action:hover, .ink-action:hover { background: var(--deep-wine); }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--wine); font-weight: 650; font-size: .93rem; }
.text-link:hover, .desk-links a:hover, .read-body a:hover, .closing a:hover, .crumb a:hover { text-decoration: underline; text-underline-offset: 4px; }

.hero { position: relative; isolation: isolate; background: #171315; color: white; }
.cover-art, .cover-art img, .hero::after { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover-art { z-index: -2; }
.cover-art img { object-fit: cover; object-position: 58% 48%; }
.hero::after { content: ""; z-index: -1; background: linear-gradient(90deg, #0b0909ed 0%, #191012dd 17%, #211214b8 34%, #1711144a 57%, transparent 73%); }
.hero-inner { display: flex; align-items: center; min-height: clamp(370px, 30.5vw, 535px); }
.hero-copy { width: min(52%, 660px); padding: clamp(26px, 3.5vw, 60px) 0; }
.hero h1 { font-size: clamp(1.65rem, 2.6vw, 3rem); font-weight: 650; }
.hero h1 > span { display: block; }
.hero-brand { font: normal 500 clamp(4rem, 6.65vw, 7.7rem)/1 var(--display); letter-spacing: -.077em; white-space: nowrap; color: #fff8e8; }
.hero-brand i { color: var(--gold); font-weight: 400; padding-right: .06em; }
.hero-brand + span { margin-top: 4px; }
.hero-intro { max-width: 31em; font-size: clamp(.98rem, 1.13vw, 1.22rem); line-height: 1.62; color: #efe7dd; margin: 13px 0 20px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions .primary-action { background: #ecd09a; color: #211716; }
.hero-actions .primary-action:hover { background: #ffdd9e; }
.outline-action { color: #fffaef; border: 1px solid #ac9e8c; background: #1a1515b3; }
.outline-action:hover { background: #3b2d2b; }

.directory { padding-block: clamp(22px, 2.4vw, 37px) clamp(25px, 3vw, 49px); }
.section-head, .journal-heading { display: flex; align-items: baseline; gap: 18px; margin-bottom: 17px; }
.section-head > .text-link, .journal-controls { margin-left: auto; }
.section-head h2, .journal-heading h2, .lesson-copy h2 { font-size: clamp(1.52rem, 2.15vw, 2.48rem); letter-spacing: -.035em; }
.topic-grid { display: grid; grid-template-columns: minmax(0, 1.27fr) repeat(2, minmax(0,1fr)); grid-template-rows: repeat(2,minmax(93px, 1fr)); gap: 11px; }
.topic { min-width: 0; display: grid; grid-template-columns: 43% minmax(0, 1fr); align-items: stretch; position: relative; border: 1px solid var(--line); background: var(--panel); }
.topic:hover { border-color: #99705a; }
.topic-photo { overflow: hidden; background: #2b2421; min-width: 0; }
.topic-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.topic:hover .topic-photo img { transform: scale(1.035); }
.topic-caption { align-self: center; padding: 10px clamp(10px, 1vw, 17px); }
.topic-caption h3 { font-size: clamp(1.09rem, 1.35vw, 1.5rem); line-height: 1.2; }
.topic-caption p { max-width: 19em; margin-top: 4px; font-size: clamp(.77rem, .87vw, .98rem); line-height: 1.45; color: var(--muted); }
.topic-arrow { position: absolute; right: 6px; bottom: 4px; color: var(--wine); }
.topic-arrow svg { width: 13px; height: 13px; }
.topic-casino { isolation: isolate; color: white; grid-row: 1/span 2; display: flex; align-items: end; background: #221d1d; border-color: transparent; }
.topic-casino .topic-photo, .topic-casino::after { position: absolute; inset: 0; }
.topic-casino .topic-photo { z-index: -2; }
.topic-casino::after { content: ""; z-index: -1; background: linear-gradient(transparent 20%, #100b0bf2); }
.topic-casino .topic-caption { align-self: end; padding: 14px 19px; }
.topic-casino h3 { font-size: clamp(1.35rem, 1.8vw, 2.2rem); }
.topic-casino p { color: #f3e9da; }
.topic-casino .topic-arrow { right: 15px; bottom: 17px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #e3ccae; border-radius: 50%; color: white; }
.topic-casino .topic-arrow svg { width: 16px; height: 16px; }

.practice { background: var(--deep-wine); color: #fbf6ec; border-block: 1px solid #642c33; }
.practice-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.03fr); gap: clamp(28px, 7vw, 110px); align-items: center; padding-block: clamp(26px, 3vw, 50px); }
.lesson-copy p { max-width: 37em; margin-top: 10px; color: #eddbd6; }
.lesson-copy .text-link { margin-top: 5px; color: #f2dba5; }
.score-panel { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 12px 17px 14px; border: 1px solid #87634e; background: #33161a; }
.score-panel legend { padding-inline: 6px; color: #e2c594; font-size: .9rem; font-weight: 650; }
.score-panel input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.score-panel label { display: grid; place-content: center; min-height: 44px; background: #4d272b; color: #f8efe5; border: 1px solid #927a67; font-weight: 600; }
.score-panel label + input + label { border-left: 0; }
.score-panel input:checked + label { background: #e6cc97; color: #32171b; }
.score-panel input:focus-visible + label { outline: 3px solid white; outline-offset: -4px; }
.score-result { display: none; grid-column: 1/-1; padding-top: 10px; }
#cushion-2:checked ~ #result-2, #cushion-3:checked ~ #result-3, #cushion-4:checked ~ #result-4 { display: block; }
.score-result strong { font-size: 1.28rem; }
.score-result p { margin-top: 3px; font-size: .92rem; line-height: 1.55; color: #eddbd6; }

.journal, .archive-body, .missing { padding-block: clamp(26px, 3vw, 48px); }
.journal-controls { display: flex; align-items: center; gap: 9px; font-size: .9rem; }
.journal-controls select { padding: 6px 9px; color: var(--ink); background: var(--panel); border: 1px solid #9e8775; border-radius: 3px; min-height: 40px; }
.journal-list, .read-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(11px, 1.6vw, 26px); }
.read-card { min-width: 0; border-bottom: 1px solid var(--line); }
.read-cover { display: block; overflow: hidden; aspect-ratio: 1.95; background: #cabdab; }
.read-cover img, .desk-photo img { width: 100%; height: 100%; object-fit: cover; }
.read-body { padding: 13px 2px 15px; }
.read-meta, .article-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 12px; color: var(--muted); font-size: .82rem; }
.read-meta span { color: var(--wine); font-weight: 700; }
.read-body h2, .read-body h3 { margin: 5px 0 7px; font-size: clamp(1.08rem, 1.35vw, 1.47rem); }
.read-body p { font-size: .93rem; color: var(--muted); }
.clubhouse { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: clamp(22px, 6vw, 95px); padding-block: clamp(23px, 2.8vw, 44px); border-top: 1px solid var(--line); }
.feature-copy h2, .desk-links h2 { margin-bottom: 7px; font-size: clamp(1.25rem, 1.7vw, 1.9rem); }
.feature-copy a, .prose a:not(.action) { color: var(--wine); text-decoration: underline; text-underline-offset: 3px; }
.feature-copy p + p { margin-top: .7em; }
.member-panel { display: grid; grid-template-columns: 35% minmax(0, 1fr); align-items: stretch; background: var(--panel); border: 1px solid var(--line); }
.desk-photo { min-height: 130px; }
.desk-links { padding: 13px 17px; }
.desk-links a { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-height: 40px; border-top: 1px solid var(--line); }
.inner-head { background: var(--deep-wine); color: var(--panel); border-bottom: 3px solid var(--gold); padding-block: clamp(25px, 3.6vw, 60px); }
.inner-head h1 { font-size: clamp(1.85rem, 3.2vw, 3.7rem); max-width: 31em; overflow-wrap: anywhere; }
.inner-head p { margin-top: 9px; color: #ecded9; max-width: 54em; }
.crumb { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 11px; font-size: .84rem; color: #efddce; }
.article-byline { color: #f3dba3; margin-bottom: 8px; }
.reading { display: grid; grid-template-columns: minmax(0,1fr) minmax(160px,27%); gap: clamp(20px, 4vw, 65px); align-items: start; padding-block: clamp(24px, 3.5vw, 55px); }
.prose { min-width: 0; overflow-wrap: anywhere; padding: clamp(18px, 3vw, 48px); background: var(--panel); border: 1px solid var(--line); line-height: 1.82; }
.prose h2, .prose h3 { margin: 1.05em 0 .43em; }
.prose h2 { font-size: clamp(1.25rem, 1.9vw, 1.95rem); }
.prose h3 { font-size: 1.13rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 .95em; }
.prose ul, .prose ol { padding-inline-start: 1.5em; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose table { margin: 13px 0 18px; border-collapse: collapse; width: 100%; }
.prose td, .prose th { border: 1px solid var(--line); padding: 7px 9px; text-align: start; }
.prose th { background: #eee8db; }
.outbound { padding: 4px 0 4px 15px; border-left: 3px solid var(--wine); margin-bottom: 21px; }
.outbound p { margin: 6px 0 0; font-size: .89rem; color: var(--muted); }
.reading-side { min-width: 0; background: var(--panel); border: 1px solid var(--line); }
.reading-side img { width: 100%; height: auto; }
.reading-side .text-link { margin: 5px 12px; }
.post-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; font-size: .9rem; }
.archive-intro { margin-bottom: 24px; }
.navigation.pagination, .missing .action { margin-top: 17px; }
.closing { background: #211a1b; color: #f6ede1; border-top: 3px solid var(--gold); }
.closing-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(18px, 6vw, 85px); padding-block: 30px; }
.closing h2 { margin-bottom: 6px; color: #e6c992; font-size: 1.09rem; }
.closing p { max-width: 30em; margin-top: 10px; color: #ddcfc3; font-size: .94rem; }
.closing li a { display: inline-flex; align-items: center; min-height: 33px; font-size: .9rem; }
.colophon { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid #665955; padding-block: 11px; color: #decdc0; font-size: .8rem; }

@media (max-width:900px) {
    .mast-inner { min-height: 58px; flex-wrap: wrap; gap: 8px; }
    .mast-actions { gap: 7px; }
    .desk-login { display: none; }
    .main-menu { order: 3; width: 100%; border-left: 0; padding-left: 0; }
    .main-menu ul { flex-wrap: wrap; gap: 2px 18px; }
    .main-menu .drawer-login { display: inline-flex; gap: 7px; color: var(--wine); }
    .nav-ready .main-menu { display: none; position: absolute; inset: 100% 0 auto; padding: 8px 5% 11px; background: var(--panel); border-block: 1px solid var(--line); box-shadow: 0 9px 14px #1b12131f; }
    .nav-ready .menu-open .main-menu { display: block; }
    .nav-ready .nav-toggle { display: grid; align-content: center; justify-content: center; gap: 4px; width: 42px; height: 42px; border: 1px solid #aa9483; color: var(--ink); background: transparent; border-radius: 3px; }
    .nav-toggle span { width: 17px; height: 2px; background: currentColor; }
    .hero-inner { min-height: 340px; }
    .hero-copy { width: 57%; }
    .topic-grid { grid-template-columns: minmax(0,1.25fr) repeat(2,minmax(0,1fr)); gap: 8px; }
    .topic:not(.topic-casino) { grid-template-columns: 38% minmax(0,1fr); }
    .topic-caption { padding: 8px; }
    .journal-list, .read-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px) {
    .frame { width: calc(100% - 30px); }
    .mast-inner { min-height: 54px; }
    .wordmark img { width: 30px; height: 30px; }
    .wordmark span { font-size: 1.16rem; }
    .mast-actions > .action { min-height: 39px; padding: 6px 10px; font-size: .83rem; }
    .hero-inner { align-items: end; min-height: clamp(380px, 109vw, 550px); }
    .cover-art img { object-position: 50% 20%; }
    .hero::after { background: linear-gradient(0deg, #140f10 0%, #160e11ea 15%, #160e11ad 34%, #1a121442 51%, transparent 66%); }
    .hero-copy { width: 100%; max-width: 31em; padding: 14px 0 18px; }
    .hero-brand { font-size: clamp(3.05rem, 12.7vw, 5rem); }
    .hero h1 { font-size: clamp(1.35rem, 4.9vw, 2.1rem); }
    .hero-brand + span { margin-top: 0; }
    .hero-intro { font-size: .9rem; margin: 6px 0 11px; line-height: 1.42; }
    .hero-actions { gap: 6px; }
    .hero-actions .action { min-height: 40px; font-size: .84rem; padding: 7px 10px; }
    .directory { padding-block: 18px 23px; }
    .section-head, .journal-heading { margin-bottom: 10px; gap: 8px; }
    .section-head > .text-link { font-size: .81rem; }
    .section-head h2, .journal-heading h2 { font-size: 1.32rem; }
    .topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto; gap: 8px; }
    .topic-casino { grid-column: 1/-1; grid-row: auto; min-height: clamp(99px, 28vw, 152px); }
    .topic-casino .topic-photo img { object-position: 50% 49%; }
    .topic-casino::after { background: linear-gradient(90deg, #160e0fe8, #160e0f70 47%, transparent 90%); }
    .topic-casino .topic-caption { padding: 11px 13px; }
    .topic:not(.topic-casino) { display: block; }
    .topic:not(.topic-casino) .topic-photo { aspect-ratio: 2.3; }
    .topic-caption h3 { font-size: 1.04rem; }
    .topic-caption p { font-size: .76rem; }
    .topic:not(.topic-casino) .topic-arrow { display: none; }
    .practice-inner, .clubhouse, .reading { grid-template-columns: minmax(0,1fr); gap: 16px; }
    .practice-inner { padding-block: 23px; }
    .score-panel { padding: 8px 11px 12px; }
    .lesson-copy p, .score-result p { font-size: .92rem; }
    .journal-heading { flex-wrap: wrap; align-items: center; }
    .journal-controls { font-size: .81rem; gap: 6px; }
    .journal-controls select { min-height: 37px; }
    .journal-list, .read-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
    .read-card { display: grid; grid-template-columns: 30% minmax(0,1fr); align-items: stretch; }
    .read-cover { position: relative; min-height: 100%; aspect-ratio: auto; }
    .read-cover img { position: absolute; inset: 0; }
    .read-body { padding: 4px 0 9px 11px; }
    .read-body p { font-size: .85rem; }
    .read-meta { gap: 4px 9px; }
    .desk-links { padding: 11px; }
    .prose { padding: 15px; font-size: .98rem; }
    .prose td, .prose th { padding: 4px; font-size: .82rem; }
    .reading-side { display: grid; grid-template-columns: 36% minmax(0,1fr); align-items: center; }
    .closing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
    .closing-brand { grid-column: 1/-1; }
}
@media (max-width:360px) {
    .frame { width: calc(100% - 22px); }
    .mast-actions > .action .ui-icon { display: none; }
    .hero-actions .action { padding-inline: 8px; }
    .journal-controls { flex-wrap: wrap; }
}
@media (prefers-reduced-motion:reduce) {
    *, *::after, *::before { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}