/*
Theme Name: Funclub168 Fenice
Theme URI: https://funclub168.online/
Author: funclub168
Version: 1.0.0
Description: คู่มือเกมและกีฬาของ funclub168 ในบรรยากาศโรงโอเปราสีเขียวนกยูง
Text Domain: funclub168-fenice
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
*/
:root {
    --midnight:#092f2e;
    --indigo:#123d39;
    --blue:#22594f;
    --porcelain:#faf8f0;
    --ivory:#eeeadc;
    --ink:#143430;
    --muted:#52645a;
    --rule:#d0c9b5;
    --amber:#edcd88;
    --oak:#685018;
    --sans:"Fahkwang","Leelawadee UI","Noto Sans Thai",Tahoma,Arial,sans-serif;
    --display:"Baskervville",Baskerville,"Times New Roman",serif;
    --gutter:clamp(18px,4.5vw,80px);
}
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; background:var(--porcelain); color:var(--ink); font:1rem/1.7 var(--sans); overflow-wrap:break-word; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.42; }
a { color:inherit; text-decoration:none; }
img,picture,svg { display:block; }
img { max-width:100%; }
select,button { font:inherit; }
button,select,label[for] { cursor:pointer; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid #916224; outline-offset:4px; }
.hero :focus-visible,.mast :focus-visible,.closing :focus-visible,.lesson :focus-visible { outline-color:var(--amber); }
.frame { width:min(1510px,calc(100% - 2 * var(--gutter))); margin-inline:auto; }
.skip { position:absolute; z-index:8; padding:8px 14px; background:white; transform:translateY(-150%); }
.skip:focus { transform:none; }
.mast { position:relative; z-index:5; color:var(--porcelain); background:var(--midnight); border-bottom:1px solid #464252; }
.mast-inner { min-height:72px; display:flex; align-items:center; gap:clamp(18px,3vw,50px); }
.wordmark { display:inline-flex; align-items:center; gap:9px; white-space:nowrap; flex:none; }
.wordmark img { width:34px; height:34px; }
.wordmark>span { font:600 clamp(1.7rem,2.25vw,2.25rem)/1 var(--display); text-transform:uppercase; letter-spacing:-.055em; }
.wordmark b { color:var(--amber); font-weight:400; }
.main-menu { margin-inline:auto; }
.main-menu ul,.closing ul { list-style:none; margin:0; padding:0; }
.main-menu ul { display:flex; gap:clamp(13px,2.2vw,34px); }
.main-menu a,.desk-login { display:inline-flex; align-items:center; min-height:44px; font-size:.92rem; font-weight:620; }
.main-menu a:hover,.main-menu a[aria-current="page"],.desk-login:hover { color:var(--amber); }
.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 { min-height:45px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 20px; font-size:.95rem; font-weight:650; line-height:1.5; border:1px solid transparent; border-radius:5px; }
.primary-action { background:var(--amber); color:#251d15; }
.primary-action:hover { background:#ffcf8a; }
.outline-action { color:white; border-color:#c5bac2; background:#22223291; }
.outline-action:hover,.ink-action:hover { background:var(--blue); }
.ink-action { background:var(--indigo); color:white; }

.hero { position:relative; isolation:isolate; display:grid; align-items:stretch; background:var(--midnight); color:var(--porcelain); min-height:clamp(435px,36vw,595px); }
.cover-art { position:absolute; inset:0; z-index:-2; overflow:hidden; background:var(--indigo); }
.cover-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:77% center; }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,#052b2af7 0%,#082e2bec 21%,#12382fa3 42%,transparent 72%); }
.hero-frame { display:flex; align-items:center; }
.hero-copy { width:min(44vw,660px); padding-block:clamp(37px,4.1vw,67px); }
.hero-brand { display:block; font:400 clamp(4.9rem,8.2vw,9rem)/.93 var(--display); text-transform:uppercase; letter-spacing:-.068em; padding-bottom:.17em; }
.hero-brand b { color:var(--amber); font-weight:400; }
.hero-heading { display:block; font-weight:630; font-size:clamp(1.35rem,2.05vw,2.45rem); letter-spacing:-.035em; text-wrap:balance; }
.hero-intro { margin:11px 0 21px; max-width:33rem; color:#f0ece7; font-size:clamp(.98rem,1.08vw,1.13rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.directory { padding-block:clamp(29px,3.1vw,55px) clamp(39px,4.2vw,70px); }
.section-head,.journal-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.section-head h2,.journal-heading h2 { font-size:clamp(1.5rem,2.05vw,2.5rem); letter-spacing:-.035em; }
.text-link { display:inline-flex; align-items:center; gap:8px; min-height:40px; color:var(--oak); font-size:.9rem; font-weight:650; }
.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(9px,1.25vw,23px); }
.topic { display:block; min-width:0; }
.topic-photo { position:relative; aspect-ratio:1.65; overflow:hidden; background:var(--indigo); border-radius:22px 4px 4px 4px; }
.topic-photo img,.read-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .24s ease; }
.topic:hover img,.read-cover:hover img { transform:scale(1.035); }
.topic-caption { display:flex; justify-content:space-between; align-items:center; gap:6px; padding:10px 0; border-bottom:1px solid var(--rule); }
.topic-caption h3 { font-size:clamp(1.1rem,1.48vw,1.55rem); }
.topic-caption p { font-size:clamp(.78rem,.88vw,.95rem); color:var(--muted); }
.topic-arrow { display:grid; place-items:center; flex:none; color:var(--oak); }
.topic-arrow .ui-icon { width:16px; }
.lesson { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(22px,4vw,62px); align-items:center; padding:clamp(24px,3.6vw,60px); color:var(--porcelain); background:linear-gradient(110deg,#212236,#303044 70%); border-radius:5px; border-inline-start:6px solid #b78950; }
.lesson-copy h2 { font-size:clamp(1.6rem,2.65vw,3.1rem); line-height:1.36; letter-spacing:-.035em; }
.lesson-copy p { color:#e6e2e3; margin:10px 0 5px; max-width:34rem; }
.lesson .text-link { color:var(--amber); }
.bowl-demo { padding:12px clamp(12px,1.45vw,22px) 20px; margin:0; min-width:0; border:1px solid #777183; border-radius:5px; }
.bowl-demo legend { padding-inline:7px; color:var(--porcelain); font-weight:620; }
.bowl-choice { position:absolute; width:1px; height:1px; opacity:0; }
.bowl-demo label { display:inline-flex; align-items:center; min-height:41px; padding:6px 11px; margin:2px 3px 4px 0; border:1px solid #898294; border-radius:4px; font-size:.88rem; }
.bowl-choice:checked+label { color:#291e11; background:var(--amber); border-color:var(--amber); }
.bowl-choice:focus-visible+label { outline:3px solid white; outline-offset:3px; }
.bowl-result { display:none; gap:16px; align-items:center; margin-top:14px; min-height:84px; }
#bowl-spare:checked~.result-spare,#bowl-strike:checked~.result-strike,#bowl-open:checked~.result-open { display:flex; }
.bowl-ranges { flex:none; display:grid; gap:3px; width:6.35rem; font-variant-numeric:tabular-nums; }
.bowl-ranges span { display:flex; justify-content:space-between; align-items:baseline; gap:6px; padding:4px 6px; color:var(--ink); background:var(--ivory); }
.bowl-ranges small { font-size:.67rem; }
.bowl-ranges b { font-size:.95rem; }
.bowl-explainer { min-width:0; }
.bowl-explainer strong { display:block; color:var(--amber); font-size:1.35rem; }
.bowl-explainer p { color:#f1ebee; font-size:.93rem; }
.journal { padding-block:clamp(34px,4.4vw,70px); }
.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(13px,1.7vw,28px); }
.read-card,.reading-side { min-width:0; }
.read-cover { position:relative; display:block; width:100%; aspect-ratio:1.65; overflow:hidden; background:var(--indigo); border-radius:5px; }
.read-body { padding-block:13px; }
.read-meta,.article-byline,.crumb { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:.84rem; color:var(--muted); }
.read-meta span { font-weight:700; color:var(--oak); }
.read-body h2,.read-body h3 { margin:.38em 0; font-size:clamp(1.1rem,1.38vw,1.52rem); }
.read-body a:hover { text-decoration:underline; }
.read-body p { color:var(--muted); font-size:.94rem; }
.member-guides,.reading { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,.82fr); gap:clamp(25px,5vw,90px); }
.member-guides { padding-bottom:clamp(30px,4vw,68px); }
.member-panel { align-self:start; border:1px solid var(--rule); padding:22px; border-radius:4px; background:var(--ivory); }
.member-panel h2 { font-size:1.38rem; margin-bottom:12px; }
.member-panel a { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--rule); font-weight:600; color:var(--oak); }
.closing { padding:clamp(30px,4vw,70px) 0 20px; color:var(--porcelain); background:var(--midnight); border-top:4px double #805f44; }
.closing-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(20px,5vw,80px); }
.closing-brand p { margin-top:15px; max-width:28rem; color:#e3dce2; font-size:.93rem; }
.closing h2 { margin:.2em 0 .7em; font-size:1.06rem; color:var(--porcelain); }
.closing nav a { display:inline-block; padding:4px 0; color:#e5e1e6; font-size:.92rem; }
.closing nav a:hover { text-decoration:underline; color:var(--amber); }
.colophon { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 18px; padding-top:15px; margin-top:26px; border-top:1px solid #585162; font-size:.8rem; color:#e1dce2; }
.inner-head { color:var(--porcelain); background:var(--indigo); padding:clamp(30px,4vw,65px) 0; border-bottom:3px solid #b1854c; }
.inner-head h1 { max-width:65rem; font-size:clamp(1.85rem,3.45vw,4.1rem); letter-spacing:-.04em; text-wrap:balance; }
.inner-head p { max-width:55rem; margin-top:13px; font-size:clamp(.98rem,1.16vw,1.2rem); color:#e9e4e7; }
.crumb,.article-byline { color:#f4d39e; margin-bottom:11px; }
.crumb a,.article-byline a { text-decoration:underline; text-underline-offset:3px; }
.reading,.archive-body,.missing { padding-block:clamp(27px,4vw,65px); }
.archive-intro { max-width:870px; margin-bottom:28px; }
.prose { min-width:0; color:var(--ink); font-size:1.05rem; line-height:1.85; }
.prose h2 { margin:1.45em 0 .4em; font-size:clamp(1.25rem,1.95vw,2rem); }
.prose h3 { margin:1.3em 0 .4em; font-size:1.16rem; }
.prose>:first-child { margin-top:0; }
.prose p,.prose ul,.prose ol,.prose blockquote { margin:0 0 1em; }
.prose ul,.prose ol { padding-inline-start:1.55em; }
.prose a:not(.action) { color:var(--oak); text-decoration:underline; text-underline-offset:3px; }
.prose table { width:100%; max-width:100%; margin-block:1em; border-collapse:collapse; font-size:.93em; }
.prose caption { text-align:left; font-weight:700; }
.prose td,.prose th { border:1px solid var(--rule); padding:7px 9px; text-align:start; overflow-wrap:anywhere; }
.prose th { background:var(--ivory); }
.prose figure { margin-inline:0; max-width:100%; overflow-x:auto; }
.reading-side img { width:100%; height:auto; border-radius:5px; }
.outbound { padding:16px 18px; margin-bottom:25px; border-inline-start:4px solid var(--oak); background:var(--ivory); }
.outbound p { margin:8px 0 0; font-size:.93rem; color:var(--muted); }
.post-links { display:flex; justify-content:space-between; flex-wrap:wrap; 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(--porcelain); }
@media(max-width:1000px){
    .mast-inner,.mast-actions { gap:13px; }
    .hero-copy { width:min(54vw,555px); }
    .topic-arrow { display:none; }
}
@media(max-width:860px){
    .mast-inner { min-height:58px; flex-wrap:wrap; gap:0; }
    .mast-actions { margin-inline-start:auto; gap:8px; }
    .nav-toggle { display:grid; place-content:center; gap:5px; width:42px; height:42px; border:1px solid #83747c; border-radius:4px; background:var(--indigo); }
    .main-menu { display:none; position:absolute; top:100%; left:0; width:100%; margin:0; padding:12px var(--gutter); background:var(--midnight); border-bottom:1px solid #83747c; }
    .menu-open .main-menu { display:block; }
    .main-menu ul { flex-wrap:wrap; gap:0 23px; }
    .main-menu .drawer-login { display:inline-flex; color:var(--amber); gap:6px; }
    .desk-login { display:none; }
    .hero { min-height:370px; }
    .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; }
    .wordmark { gap:6px; } .wordmark img { width:27px; height:27px; } .wordmark>span { font-size:1.55rem; }
    .mast .primary-action { min-height:41px; padding:6px 10px; font-size:.83rem; }
    .nav-toggle { width:40px; height:40px; }
    .hero { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; min-height:0; gap:14px; padding:14px var(--gutter); }
    .hero::after { display:none; }
    .hero-frame { grid-area:1/1; min-width:0; width:100%; }
    .hero-copy { width:100%; padding:8px 0; }
    .hero-brand { font-size:clamp(3.2rem,9.3vw,4.1rem); }
    .hero-heading { font-size:1.28rem; }
    .hero-intro { margin:8px 0 13px; font-size:.91rem; }
    .hero-actions { gap:7px; }
    .hero-actions .action { min-height:43px; padding:6px 11px; font-size:.86rem; }
    .cover-art { grid-area:1/2; position:relative; inset:auto; z-index:0; width:100%; aspect-ratio:2/3; border-radius:25px 4px 4px 4px; }
    .cover-art img { object-fit:contain; object-position:center; }
    .topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .topic-casino { grid-column:1/-1; display:grid; grid-template-columns:1.05fr 1fr; background:var(--ivory); border-radius:15px 3px 3px 3px; overflow:hidden; }
    .topic-casino .topic-photo { border-radius:0; } .topic-casino .topic-caption { padding:10px 12px; }
    .topic-photo { border-radius:14px 3px 3px 3px; }
    .topic-caption { padding:7px 0; } .topic-caption h3 { font-size:1.12rem; }
    .section-head h2,.journal-heading h2 { font-size:1.4rem; }
    .section-head .text-link,.journal-controls { font-size:.8rem; }
    .lesson { padding:19px 13px; gap:14px; }
    .bowl-demo label { font-size:.82rem; padding:4px 7px; min-height:38px; }
    .bowl-demo { padding:7px 9px 12px; }
    .bowl-result { gap:10px; flex-wrap:wrap; }
    .bowl-ranges { width:100%; display:flex; } .bowl-ranges span { gap:7px; } 
}
@media(max-width:480px){
    .hero { display:flex; flex-direction:column; align-items:stretch; padding:17px var(--gutter) var(--gutter); }
    .hero-frame { order:-1; }
    .hero-copy { padding:0; }
    .hero-brand { font-size:clamp(3.4rem,13vw,4.2rem); }
    .hero-heading { font-size:clamp(1.23rem,5.25vw,1.58rem); }
    .cover-art { align-self:stretch; flex:0 0 auto; }
}
@media(max-width:365px){
    :root { --gutter:10px; }
    .mast .primary-action .ui-icon { display:none; }
    .journal-list,.read-grid { grid-template-columns:1fr; }
    .hero-actions .action { padding-inline:8px; }
    .lesson { padding:16px 9px; }
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; }
}


:root{--display:Georgia,"Times New Roman",serif;--sans:"Leelawadee UI","Noto Sans Thai",Tahoma,Arial,sans-serif}
.mast{border-bottom:1px solid #927a4f}.wordmark>span,.hero-brand{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.055em}.wordmark>span{font-style:italic}.hero-brand{font-weight:400}.hero-brand b{font-style:italic}.action{border-radius:999px}.primary-action{background:#edcd88}.outline-action{background:#0c3330b8;border-color:#b7bd9f}.hero-intro{color:#f4f1e6}.lesson{background:#123d39;border-color:#bba46a}.main-menu a[aria-current="page"]{color:#f1ce85}.directory{padding-top:clamp(26px,3vw,46px)}.topic-photo{aspect-ratio:1.48;border-radius:64px 64px 3px 3px}.topic-caption{border-bottom:1px solid #a89d7e;padding:10px 3px}.topic-arrow{width:28px;height:28px;border:1px solid #b9b19a;border-radius:50%}.member-panel{border-top:3px solid #ae9762}.closing{border-top-color:#af995f}.hero-heading{color:#f4e9ce}
@media(min-width:861px){.hero{display:grid;grid-template-columns:43% 57%;background:#0b3533;min-height:clamp(400px,34vw,575px);overflow:hidden}.hero::after{display:none}.hero-frame{grid-area:1/1;width:100%;min-width:0}.hero-copy{width:100%;padding:clamp(33px,4vw,68px) 1.5vw clamp(33px,4vw,68px) var(--gutter)}.hero-brand{font-size:clamp(3.2rem,5.9vw,7.1rem)}.cover-art{grid-area:1/2;position:relative;inset:auto;z-index:0;border-radius:180px 0 0 0;border-left:1px solid #c6af78;border-top:1px solid #c6af78}.cover-art img{object-position:72% center}.topic-grid{gap:clamp(12px,1.45vw,24px)}}
@media(max-width:660px){.hero .hero-brand{font-size:clamp(2.6rem,9.7vw,4.7rem)}.cover-art{border-radius:48px 3px 3px 3px;overflow:hidden}.topic-photo{border-radius:30px 30px 2px 2px}.hero-copy .hero-heading{color:#f4e9ce}.topic-casino .topic-caption{background:#123d39;color:white}.topic-casino .topic-caption p{color:#e1dbbd}.topic-casino .topic-arrow{color:#e9cb8d}.bowl-ranges{width:6.35rem}}