:root{--gold:#f6ce78;--border:#c9974f;--dark:#071a24;--sidebar:250px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#05101d;color:#fff7de;font-family:Tahoma,"Noto Serif Thai",sans-serif}
button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid white;outline-offset:3px}
#stage{position:fixed;inset:0;background:radial-gradient(ellipse at center,#183e3d,#061321 76%)}
#side{position:absolute;inset:0 auto 0 0;width:var(--sidebar);padding:28px 13px 85px;background:linear-gradient(165deg,#112f33 0%,#071b25 65%,#080e20);border-right:2px solid #b88a3d;box-shadow:9px 0 32px #0008;z-index:10;display:none}
.started #side{display:block}.side-title{text-align:center;color:#ffe3a0;font-size:19px;font-weight:bold;line-height:1.65;padding-bottom:20px;border-bottom:1px solid #b38b53}
.navitem{display:block;width:100%;text-align:left;margin-top:17px;padding:16px 12px;background:#133b38;color:#ffe4ad;border:1px solid #a78c53;border-radius:12px;font-size:15px;font-weight:bold;transition:.2s}
.navitem.active,.navitem:hover{background:#d4a651;color:#211604;box-shadow:0 0 12px #e2aa4570}
.navitem small{font-size:11px;opacity:.8;display:block;padding-top:4px;font-weight:normal}
.side-bottom{position:absolute;bottom:95px;left:13px;right:13px}.side-bottom button{width:100%;padding:11px;border-radius:10px;border:1px solid #b88a3d;color:#f9df9f;background:#153135}
#content{position:absolute;inset:0;transition:left .35s ease} .started #content{left:var(--sidebar)}
.slide{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;padding:22px 20px 83px}
.slide.active{display:flex}.slide.cover{padding:0 0 78px;background:#071020}.full-art{max-width:100%;width:100%;height:100%;object-fit:contain}
.cover .full-art{object-fit:contain}.members{background:radial-gradient(ellipse at center,#2d5038,#08171c 76%)}
.members .full-art{max-width:min(100%,1280px);max-height:calc(100% - 22px);width:auto;height:auto;object-fit:contain;border:4px ridge #eac16b;border-radius:12px;box-shadow:0 12px 30px #0008}
.characters{background:radial-gradient(ellipse at 52% 20%,#30424f,#061727 75%)}
.characters:before{content:"";position:absolute;inset:16px;border:2px solid #9f773a;border-radius:16px;pointer-events:none}
.heading{position:relative;font-family:Tahoma,sans-serif;color:#ffe2a2;text-shadow:1px 2px 4px #000;letter-spacing:.01em;font-size:clamp(20px,2.3vw,31px);margin:0 0 12px}
.video-area{position:relative;display:flex;align-items:center;justify-content:center;width:min(100%,960px);flex:1;min-height:0;padding:4px;background:#08131bc9;border:4px ridge #bf9855;border-radius:16px;box-shadow:0 14px 30px #0009;overflow:hidden}
#characterVideo{width:100%;height:100%;object-fit:contain;background:#000}
.video-foot{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px}
.clipbutton{color:#ffe9bd;background:#1d4342;border:1px solid #bda05d;padding:8px 13px;border-radius:25px;white-space:nowrap;font-size:13px}
.clipbutton.active{background:linear-gradient(#ffe6a4,#d7a348);color:#25180b;font-weight:bold}
.clipbutton:hover{filter:brightness(1.15)}#playnote{color:#f5dba7;text-align:center;font-size:12px;margin:7px 0 0;min-height:17px}
#controls{position:fixed;bottom:0;left:0;right:0;padding:11px 15px;background:linear-gradient(transparent,#020c18 25%);display:flex;align-items:center;justify-content:center;gap:12px;z-index:20}
.ctrl{border:1px solid #e0b568;background:linear-gradient(#ffe9ab,#d4a04a);color:#2c1b04;border-radius:28px;padding:11px 19px;font-weight:bold}.ctrl.dark{background:#102d35;color:#ffe2a0}.ctrl:disabled{opacity:.4;cursor:not-allowed}#count{min-width:48px;text-align:center;color:#ffe5ad;font-size:14px}
#hint{position:absolute;right:13px;top:14px;background:#00131aba;padding:7px 12px;border:1px solid #95794a;border-radius:20px;font-size:12px;color:#f0d7a8;z-index:3}
@media(max-width:900px){:root{--sidebar:185px}#side{padding:15px 8px 85px}.side-title{font-size:15px}.navitem{font-size:12px;padding:12px 8px}.slide{padding:16px 10px 83px}.heading{font-size:20px}.clipbutton{padding:6px 8px;font-size:11px}.video-foot{gap:5px}.ctrl{padding:9px 11px}}
@media(max-width:540px){:root{--sidebar:125px}.side-title{font-size:12px}.navitem{font-size:11px;padding:10px 6px}.navitem small{display:none}.heading{font-size:16px}#hint{display:none}.clipbutton{font-size:10px}}

/* เนื้อหาวรรณคดี 110–114 */
#side{overflow-y:auto;padding-bottom:115px} .side-bottom{position:sticky;bottom:-88px;margin-top:22px;left:auto;right:auto;background:#081f27;padding:8px 0}
.navitem{margin-top:10px;padding:11px 12px}.navitem small{padding-top:2px}
.verse-slide{background:radial-gradient(ellipse at 50% 0%,#244f48 0%,#071b24 70%);padding:20px 26px 81px}
.poem-shell{height:100%;width:min(100%,1120px);display:flex;flex-direction:column;border:3px double #e4b76a;background:linear-gradient(140deg,#fcf2d9,#f3dfb4);border-radius:19px;color:#3d2b1d;overflow:hidden;box-shadow:0 12px 38px #000b,inset 0 0 0 6px #764a2230}
.poem-header{flex:0 0 auto;text-align:center;background:linear-gradient(110deg,#063b32,#0d5746,#063b32);color:#fbe7b2;padding:12px 14px 14px;border-bottom:5px double #dbad52}
.poem-header h1{font-size:clamp(19px,2.5vw,32px);margin:3px 0;line-height:1.35}.eyebrow{font-size:12px;letter-spacing:.08em}.chapter-id{display:inline-block;color:#fff0c4;font-size:13px}
.poem-scroll{padding:15px 30px 24px;overflow-y:auto;min-height:0;scrollbar-color:#b58a43 #eee0ba}
.section-label{margin:0 0 11px;color:#6e3f13;font-size:20px;text-align:center}
.verse-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 21px}
.verse{padding:10px 15px 14px;border:1px solid #cead70;background:#fff8e9;border-radius:12px;box-shadow:0 4px 12px #8d672321}
.verse-number{font-size:12px;color:#885c20;font-weight:bold;border-bottom:1px solid #dfcba6;padding-bottom:5px}
.verse p{font-size:clamp(15px,1.55vw,22px);line-height:1.7;text-align:center;white-space:normal;margin:8px 0 0}
.summary{margin-top:17px;background:#e9f0d9;border-left:6px solid #3f7855;padding:14px 18px;border-radius:10px}
.summary h2{font-size:20px;margin:0 0 6px;color:#18523b}.summary p{font-size:clamp(15px,1.45vw,19px);line-height:1.8;margin:0}
@media(max-width:850px){.poem-scroll{padding:12px}.verse-grid{gap:8px}.verse{padding:7px}.verse p{font-size:14px}}
@media(max-width:680px){.verse-grid{grid-template-columns:1fr}.verse-slide{padding:10px 6px 78px}.poem-header h1{font-size:17px}.summary p{font-size:14px}}

/* ฉบับปรับรูปแบบ: ขยายเต็มจอและใช้พื้นลายไทยทุกหน้า */
:root{--sidebar:clamp(210px,18vw,290px)}
html,body,button{font-family:"Noto Serif Thai","TH Sarabun New","Angsana New","Leelawadee UI",serif}
#stage{background:radial-gradient(ellipse at center,#234f42,#071d24 80%)}
#side{background:linear-gradient(160deg,#073d32,#092d2e 65%,#152332);border-right:3px solid #d7ad60}
.side-title{font-family:"Noto Serif Thai","Angsana New",serif;font-size:clamp(18px,1.45vw,24px)}
.navitem{font-family:inherit;font-size:clamp(13px,1vw,17px);line-height:1.5}
.heading,.poem-header h1,.section-label,.summary h2{font-family:"Noto Serif Thai","TH Sarabun New","Angsana New",serif}
.slide{padding-left:clamp(6px,1vw,18px);padding-right:clamp(6px,1vw,18px)}
.slide.cover{padding:0 0 66px}
.members,.characters,.verse-slide{background:radial-gradient(ellipse at 60% 10%,#f8e6c4,#ddc69d 90%)}
.members::before,.characters::after{content:"";position:absolute;inset:0;background-image:url("../images/image_01_da663a92d.svg");background-size:180px 180px;opacity:.24;pointer-events:none}
.members .full-art{position:relative;z-index:1;width:100%;max-width:100%;max-height:100%;height:100%;border:0;border-radius:0;box-shadow:none;object-fit:contain}
.characters:before{display:none}
.video-area{width:100%;max-width:none;flex:1;border:2px solid #d0a456;border-radius:8px;padding:3px}
.verse-slide{padding:8px 10px 73px;background-image:linear-gradient(#f0dfb9dd,#e7d1a7ee),url("../images/image_01_da663a92d.svg");background-repeat:repeat;background-size:auto,240px 240px}
.poem-shell{height:100%;width:100%;max-width:none;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:hidden}
.poem-header{background:linear-gradient(90deg,#064337,#11604a,#064337);border-bottom:3px solid #d5ac61;padding:7px 12px 9px}
.poem-header h1{font-size:clamp(24px,2.8vw,42px)}
.poem-scroll{width:100%;padding:12px clamp(16px,3vw,70px) 25px;overflow-y:auto}
.section-label{font-size:clamp(20px,1.7vw,27px);margin:0 0 10px}
.verse-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(22px,4vw,85px);row-gap:clamp(13px,2.3vh,28px);align-items:start}
.verse{border:0;background:transparent;border-radius:0;box-shadow:none;padding:0;margin:0;min-width:0}
.verse p{font-family:"Noto Serif Thai","TH Sarabun New","Angsana New",serif;color:#3e2514;font-size:clamp(20px,1.75vw,29px);line-height:1.85;font-weight:500;margin:0;text-align:center}
.summary{margin-top:clamp(18px,3vh,40px);border:0;border-top:2px solid #b99254;background:transparent;padding:15px 5px 0;border-radius:0}
.summary h2{color:#174d39;font-size:clamp(21px,1.75vw,30px);text-align:center;margin:0 0 7px}
.summary p{font-family:"Noto Serif Thai","TH Sarabun New","Angsana New",serif;font-size:clamp(18px,1.45vw,25px);line-height:1.9;color:#3e2818;text-align:center}
#controls{padding:7px 12px;gap:10px}
.ctrl{font-family:inherit;font-size:clamp(14px,1.2vw,18px);padding:8px 18px}
@media(max-width:900px){.verse-grid{column-gap:15px}.verse p{font-size:clamp(17px,2.2vw,23px)}.summary p{font-size:17px}}
@media(max-width:680px){.verse-grid{grid-template-columns:1fr}.verse-slide{padding-left:0;padding-right:0}.poem-scroll{padding:12px 8px}.verse p{font-size:20px}}

/* ฉบับอักษรใหญ่ ภาพลายไทย และตัวละครประกอบ */
:root{--sidebar:clamp(230px,18vw,315px)}
html,body,button{font-family:"Noto Serif Thai","Angsana New","TH Sarabun New",Georgia,serif!important}
#side{padding-left:15px;padding-right:15px}
.side-title{font-size:clamp(25px,1.7vw,31px)!important;line-height:1.55}
.side-title div{font-size:20px!important}
.navitem{font-size:clamp(17px,1.24vw,22px)!important;padding:13px 12px;line-height:1.5}
.navitem small{font-size:clamp(13px,.84vw,17px)!important}
.side-bottom button{font-size:19px!important}
#hint{font-size:18px!important}
#controls{min-height:73px}
.ctrl{font-size:clamp(19px,1.4vw,25px)!important}
#count{font-size:20px!important;min-width:73px}
.heading{font-family:inherit!important;font-size:clamp(34px,3.1vw,52px)!important}
.clipbutton{font-size:clamp(17px,1.17vw,23px)!important;padding:9px 14px}
#playnote{font-size:19px!important;min-height:24px}
.video-foot{margin-top:10px}
.members,.characters,.verse-slide{background-image:url("../images/image_01_ff64e9282.jpg")!important;background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important}
.members:before,.characters:after{display:none!important}
.members .full-art{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important}
.characters .heading{color:#673411;text-shadow:0 1px 2px #fff6}
.characters .video-area{background:#0b1d24;border:4px ridge #a66e1b;max-height:calc(100% - 155px)}
.characters #playnote{color:#542b0b}
.verse-slide{padding:15px 15px 82px!important}
.poem-shell{background:transparent!important;min-height:0}
.poem-header{background:linear-gradient(90deg,#68380add,#8e4c0aea,#65320bda)!important;border:2px solid #f5d68a;border-radius:7px;padding:6px 10px 7px!important;margin:8px 24px 0;box-shadow:0 4px 10px #75400d44}
.poem-header h1{font-size:clamp(36px,3vw,54px)!important;line-height:1.22}
.eyebrow,.chapter-id{font-size:clamp(16px,1vw,21px)!important}
.poem-scroll{padding:15px clamp(38px,4.5vw,90px) 22px!important}
.section-label{font-size:clamp(27px,2vw,36px)!important;margin:0 0 9px;color:#733902}
.poem-area{display:grid;grid-template-columns:minmax(0,1fr) clamp(140px,15%,215px);gap:24px;align-items:center}
.verse-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(12px,2.1vh,25px) clamp(17px,2vw,46px)!important;align-items:start}
.verse{min-width:0}
.verse p{font-size:clamp(24px,2.05vw,37px)!important;line-height:1.7!important;font-weight:600!important;color:#301907!important;text-shadow:0 1px 0 #fff9d9;margin:0}
.poem-cast{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:11px;min-width:0}
.cast-item{margin:0;width:100%;max-width:205px;min-height:0;display:flex;align-items:center;flex-direction:column}
.cast-item img{width:100%;height:clamp(130px,20vh,195px);object-fit:contain;object-position:center;border:3px solid #c28b36;border-radius:14px;background:#f3e1b8;box-shadow:0 4px 12px #73401266}
.cast-item figcaption{font-size:clamp(17px,1.3vw,23px);font-weight:700;line-height:1.45;color:#5d2b08;text-align:center;margin-top:3px}
.summary{border-top:3px solid #b87b2b!important;margin-top:clamp(14px,2.4vh,26px)!important;padding-top:10px!important}
.summary h2{font-size:clamp(28px,2.05vw,38px)!important;color:#184f37}
.summary p{font-size:clamp(22px,1.7vw,31px)!important;line-height:1.65!important;color:#321d11;text-align:left!important;font-weight:500}
@media(max-width:1200px){.poem-area{grid-template-columns:minmax(0,1fr) 135px;gap:12px}.poem-scroll{padding:12px 28px 18px!important}.verse p{font-size:clamp(20px,2vw,29px)!important}.cast-item img{height:125px}.cast-item figcaption{font-size:17px}}
@media(max-width:850px){:root{--sidebar:175px}.navitem{font-size:15px!important;padding:8px 5px}.side-title{font-size:20px!important}.poem-area{grid-template-columns:1fr}.poem-cast{flex-direction:row}.cast-item{max-width:110px}.cast-item img{height:75px}.verse p{font-size:20px!important}.summary p{font-size:19px!important}.poem-header h1{font-size:26px!important}}
@media(max-width:550px){.verse-grid{grid-template-columns:1fr!important}.poem-scroll{padding:12px 17px!important}.verse p{font-size:21px!important}}

/* Version: large decorative headings and source text refresh 110-114 */
:root{--thai-gold:#ffe4a2}
#side .side-title{font-size:clamp(29px,2vw,39px)!important;color:#ffde91!important;text-shadow:2px 2px 0 #382000,0 0 12px #cd8b3a}
#side .navitem{font-size:clamp(20px,1.43vw,27px)!important;font-weight:700;text-shadow:0 1px #352008}
#side .navitem small{font-size:clamp(15px,1vw,19px)!important}
#controls .ctrl{font-size:clamp(21px,1.65vw,29px)!important;font-weight:700}
.heading{font-size:clamp(42px,3.7vw,66px)!important;color:#ffdf90!important;-webkit-text-stroke:.7px #66330e;text-shadow:2px 3px 0 #361d0b,0 0 14px #a26a1f}
.poem-header{padding:9px 12px!important}
.poem-header h1{font-size:clamp(45px,3.35vw,70px)!important;color:#ffdf90!important;letter-spacing:.3px;-webkit-text-stroke:.8px #6a3107;text-shadow:2px 3px 1px #281400,0 0 14px #ffc962aa}
.poem-header .eyebrow{font-size:clamp(17px,1.15vw,23px)!important;font-weight:700;color:#fff5cf}
.poem-header .chapter-id{font-size:clamp(18px,1.2vw,24px)!important;color:#ffecbc}
.section-label,.summary h2{width:fit-content;max-width:95%;margin:6px auto 18px!important;padding:5px 34px 8px!important;border-radius:100px;border:3px solid #ffe6a3;background:linear-gradient(135deg,#6a220f,#a8541f 55%,#62240e)!important;box-shadow:inset 0 0 0 2px #dca958,0 6px 13px #683b1d55!important;font-size:clamp(36px,2.8vw,54px)!important;line-height:1.3!important;color:#fff0ad!important;-webkit-text-stroke:0.75px #6d2d07;text-shadow:2px 2px 0 #391701,0 0 9px #f3b85a;text-align:center!important;font-weight:900!important}
.poem-scroll{overflow-y:auto!important;overscroll-behavior:contain;padding:12px clamp(32px,3.5vw,65px) 26px!important;scrollbar-color:#af762b transparent}
.poem-area{grid-template-columns:minmax(0,1fr) clamp(145px,13%,210px)!important;gap:12px!important;align-items:start}
.verse-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(16px,2vw,36px)!important;align-items:start}
.verse{margin:0!important;min-width:0!important}
.verse p{font-size:clamp(29px,2.25vw,43px)!important;line-height:1.92!important;font-weight:700!important;color:#3c210e!important;-webkit-text-stroke:.3px #60360a;text-shadow:1px 1px 0 #fffbde,-.5px -.5px 0 #e5ad58,0 2px 3px #e6b46f99!important;white-space:normal}
.poem-cast{position:sticky;top:6px}
.cast-item figcaption{font-size:clamp(20px,1.5vw,29px)!important;color:#6a2d09!important;-webkit-text-stroke:.3px #f6d49c;text-shadow:1px 1px 0 white}
.summary{margin-top:26px!important;padding-top:18px!important;border-top:3px double #965d19!important}
.summary p{font-size:clamp(28px,2.04vw,39px)!important;line-height:1.8!important;font-weight:700!important;color:#3d210d!important;-webkit-text-stroke:.18px #664017;text-shadow:0 1px 0 #fff5cf!important;text-wrap:pretty}
@media(max-width:1150px){.poem-area{grid-template-columns:minmax(0,1fr) 135px!important}.verse p{font-size:clamp(25px,2.5vw,34px)!important}.summary p{font-size:clamp(24px,2.4vw,33px)!important}}
@media(max-width:750px){.poem-area{grid-template-columns:1fr!important}.poem-cast{position:relative;flex-direction:row}.verse p{font-size:clamp(23px,3vw,31px)!important}.section-label,.summary h2{font-size:clamp(25px,4vw,39px)!important;padding:5px 15px!important}}
@media(max-width:500px){.verse-grid{grid-template-columns:1fr!important}.poem-header h1{font-size:29px!important}}

/* Update: single-column, exact order of newly supplied verses, bigger display fonts */
.verse-slide .poem-scroll{padding:14px clamp(18px,3.4vw,70px) 60px!important}
.verse-slide .poem-header h1{font-size:clamp(45px,4vw,78px)!important;-webkit-text-stroke:1.3px #572706!important;text-shadow:3px 4px 1px #291102,0 0 16px #ffd37c!important}
.verse-slide .poem-header .eyebrow{font-size:clamp(20px,1.55vw,29px)!important}
.verse-slide .poem-header .chapter-id{font-size:clamp(20px,1.45vw,28px)!important}
.verse-slide .section-label,.verse-slide .summary h2{font-size:clamp(41px,3.25vw,64px)!important;line-height:1.38!important;padding:9px 42px 13px!important;border:4px solid #ffe3a0!important;-webkit-text-stroke:1px #5c2306!important;text-shadow:3px 3px 0 #311409,0 0 13px #f9c65c!important;box-shadow:inset 0 0 0 2px #c98d2b,0 7px 16px #3f241e70!important}
.verse-slide .poem-area{display:grid!important;grid-template-columns:minmax(0,1fr) clamp(145px,13%,215px)!important;gap:clamp(10px,2vw,34px)!important;align-items:start!important}
.verse-slide .verse-grid{display:block!important;grid-template-columns:none!important;width:100%!important}
.verse-slide .verse-one-column{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
.verse-slide .verse-one-column p{font-size:clamp(35px,2.85vw,55px)!important;line-height:1.74!important;color:#3a1c0b!important;font-weight:750!important;text-align:center!important;white-space:normal!important;-webkit-text-stroke:.5px #6d3d13!important;text-shadow:1.5px 1.5px 0 #fff9e8,-1px -1px 0 #fff3cf,0 3px 5px #bc885588!important}
.verse-slide .stanza-space{display:block!important;height:clamp(18px,2vh,35px)!important}
.verse-slide .summary{margin-top:38px!important;padding-top:26px!important}
.verse-slide .summary p{font-size:clamp(34px,2.6vw,51px)!important;line-height:1.75!important;font-weight:750!important;-webkit-text-stroke:.3px #70441b!important;text-shadow:1px 1px 0 #fff5d5,0 2px 2px #d9bd85!important}
.verse-slide .cast-item figcaption{font-size:clamp(21px,1.65vw,31px)!important}
#side .navitem{font-size:clamp(21px,1.6vw,30px)!important}
#controls .ctrl{font-size:clamp(22px,1.7vw,32px)!important}
@media(max-width:1100px){.verse-slide .poem-area{grid-template-columns:minmax(0,1fr) 130px!important}.verse-slide .verse-one-column p{font-size:clamp(30px,3.2vw,42px)!important}.verse-slide .summary p{font-size:clamp(29px,3vw,40px)!important}}
@media(max-width:720px){.verse-slide .poem-area{grid-template-columns:1fr!important}.verse-slide .poem-cast{position:relative!important}.verse-slide .verse-one-column p{font-size:clamp(27px,4.2vw,35px)!important}.verse-slide .section-label,.verse-slide .summary h2{font-size:clamp(31px,5vw,42px)!important;padding:7px 15px!important}}

/* Revision 2026-11-15: text runs in normal reading order; wrap only at the right edge */
.verse-slide .verse-grid,.verse-slide .verse-one-column{display:block!important;width:100%!important;max-width:none!important;}
.verse-slide .verse-one-column{border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;}
.verse-slide .verse-one-column p{
  display:block!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;
  text-align:left!important;text-indent:0!important;
  font-size:clamp(37px,3.2vw,61px)!important;
  line-height:1.63!important;letter-spacing:.012em!important;
  font-weight:750!important;color:#351707!important;
  -webkit-text-stroke:.7px #8e552c!important;
  text-shadow:1.8px 1.8px 0 #fff4ce,-1px -1px 0 #fff7e4,2px 3px 3px #83502655!important;
}
.verse-slide .poem-area{grid-template-columns:minmax(0,1fr) clamp(130px,14vw,235px)!important;align-items:start!important;gap:18px!important}
.verse-slide .section-label,.verse-slide .summary h2{
  font-size:clamp(45px,3.65vw,76px)!important;line-height:1.38!important;font-weight:900!important;
  color:#ffe8a3!important;background:linear-gradient(110deg,#4c150d,#893618 48%,#4c150d)!important;
  -webkit-text-stroke:1.35px #3a1105!important;
  text-shadow:-2px -2px 0 #c88938,2px 3px 0 #2f1005,0 0 15px #ffa928aa!important;
  border:4px ridge #f9d98b!important;border-radius:18px!important;padding:8px 18px 14px!important;
  box-shadow:inset 0 0 0 2px #9e5e23,0 8px 15px #441e1666!important;
}
.verse-slide .poem-header h1{font-size:clamp(49px,4.3vw,86px)!important;font-weight:900!important;
 -webkit-text-stroke:1.6px #5b2308!important;text-shadow:3px 4px 0 #281004,0 0 16px #ffd571!important;}
.verse-slide .poem-header .eyebrow,.verse-slide .poem-header .chapter-id{font-size:clamp(23px,1.8vw,35px)!important}
.verse-slide .summary p{font-size:clamp(37px,2.95vw,56px)!important;line-height:1.65!important;text-align:left!important;
 font-weight:750!important;-webkit-text-stroke:.5px #8a5229!important;text-shadow:1.5px 1.5px 0 #fff8e7,0 2px 3px #93663755!important;}
.verse-slide .poem-scroll{padding:20px clamp(20px,3vw,68px) 95px!important;overflow-y:auto!important}
#side .navitem{font-size:clamp(20px,1.4vw,29px)!important}
@media(max-width:900px){.verse-slide .poem-area{grid-template-columns:minmax(0,1fr)!important}
.verse-slide .poem-cast{display:flex!important;gap:8px!important;flex-wrap:wrap!important}
.verse-slide .poem-cast .cast-item{max-width:140px!important}
.verse-slide .verse-one-column p{font-size:clamp(32px,4.2vw,49px)!important}}

/* บทสรุปและคำถาม — หัวข้อศิลป์ไทยขนาดใหญ่ */
.ending-slide{color:#44220e;background:#fae7b6!important}
.ending-shell{height:100%;width:100%;display:flex;flex-direction:column;background-image:linear-gradient(rgba(255,247,222,.11),rgba(255,247,222,.12)),url('../images/image_01_2cb2d976b.png');background-size:100% 100%;background-position:center}
.ending-header{flex-shrink:0;text-align:center;padding:clamp(23px,3vh,40px) 5% 12px}
.ending-eyebrow{display:block;font-size:clamp(16px,1.4vw,21px);color:#76451d;font-weight:bold;letter-spacing:.04em}
.ending-header h1{font-family:'Noto Serif Thai',Georgia,serif;margin:0;font-size:clamp(36px,3.9vw,67px);line-height:1.5;color:#854019;-webkit-text-stroke:.7px #f9d879;text-shadow:1px 2px 0 #f3d6a1,2px 3px 4px #97562e;font-weight:900}
.header-decoration{font-size:26px;color:#a36d24;line-height:1.1}
.ending-scroll{overflow-y:auto;min-height:0;flex:1;padding:8px clamp(40px,5.4vw,110px) 62px;scrollbar-color:#ae864b transparent}
.moral-items{display:grid;gap:clamp(14px,2vh,23px)}
.moral-item{display:flex;align-items:flex-start;gap:23px;padding:clamp(12px,1.6vh,22px) 26px;border:2px solid rgba(167,102,28,.5);border-radius:18px;background:rgba(255,251,230,.82);box-shadow:0 5px 16px #79552f20}
.moral-number{flex:none;font-size:clamp(30px,2.5vw,43px);font-weight:bold;color:#fff1c5;text-shadow:1px 2px #4b220b;background:linear-gradient(135deg,#8b2b19,#c4872c);border:3px double #eac573;border-radius:50%;width:75px;height:75px;display:grid;place-items:center}
.moral-item h3{font-size:clamp(27px,2.35vw,39px);color:#854017;margin:0 0 5px;font-weight:900;line-height:1.4;-webkit-text-stroke:.35px #b47940;text-shadow:1px 1px 0 #fff4d4}
.moral-item p{font-size:clamp(22px,1.85vw,31px);line-height:1.8;color:#2e241b;margin:0}
.moral-summary{margin-top:30px;padding:15px 28px 25px;background:rgba(248,226,170,.90);border-block:3px solid #b88730;border-radius:12px}
.moral-summary h2{font-size:clamp(31px,2.8vw,45px);text-align:center;color:#7d3513;margin:8px 0 12px;text-shadow:1px 2px 0 #ffe9a8}
.moral-summary p{font-size:clamp(23px,1.9vw,33px);line-height:1.8;margin:0}
.quiz-intro{font-size:clamp(24px,1.85vw,32px);text-align:center;color:#783c19;margin:0 0 24px;font-weight:bold}
.question-items{display:grid;gap:clamp(14px,1.8vh,22px)}
.question-item{border:2px solid #c59143;background:rgba(255,251,235,.9);border-radius:15px;overflow:hidden;box-shadow:0 4px 12px #65391518}
.question-item summary{list-style:none;cursor:pointer;padding:20px 25px;display:flex;align-items:center;gap:24px}
.question-item summary::-webkit-details-marker{display:none}
.qnumber{background:linear-gradient(#72351b,#ac6727);color:#fff0ba;padding:13px 18px;border:2px solid #e3b660;border-radius:11px;flex:none;font-size:clamp(23px,1.65vw,29px);font-weight:bold}
.qtext{font-size:clamp(26px,2.2vw,39px);font-weight:800;color:#492512;line-height:1.65;flex:1;text-shadow:1px 1px 0 #eed7a9}
.qchevron{font-size:42px;color:#9b6126;transition:transform .2s}.question-item[open] .qchevron{transform:rotate(180deg)}
.answer{padding:18px 36px 25px;margin:0 22px 20px;background:#e6f0d6;border-left:7px solid #3c7851;border-radius:10px;font-size:clamp(23px,1.75vw,31px);line-height:1.7}
.answer b{color:#205c3a}.answer p{margin:4px 0 0}
@media(max-width:800px){.ending-scroll{padding:8px 18px 38px}.moral-number{width:50px;height:50px}.moral-item{gap:10px;padding:12px}.question-item summary{gap:8px;padding:12px}.qnumber{padding:8px}}

/* หน้าแสดงคลิปกลอน: เต็มหน้าจอ ซ่อนแถบปุ่มด้านล่าง */
#stage.poem-video-mode #controls{display:none!important}
#stage.poem-video-mode #side{display:none!important}
#stage.poem-video-mode #content{left:0!important}
.slide.poem-video-slide{padding:0!important;background:#000!important;inset:0!important}
.slide.poem-video-slide .poem-film{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:#000}
.slide.poem-video-slide video{height:100%;width:100%;object-fit:contain;background:#000;display:block}
.poem-video-menu{position:absolute;right:18px;top:16px;z-index:21;padding:10px 18px;font-size:19px;border:1px solid #e8c67a;border-radius:25px;background:#09291cdb;color:#ffe6a3;cursor:pointer;opacity:.76}
.poem-video-menu:hover,.poem-video-menu:focus{opacity:1}
#stage.poem-video-mode.nav-on #side{display:block!important;z-index:30!important}
#stage.poem-video-mode.nav-on #content{left:var(--sidebar)!important}
#stage.poem-video-mode.nav-on .poem-video-menu{right:16px}
@media(max-width:750px){.poem-video-menu{font-size:15px;padding:8px 11px;right:8px;top:8px}}

/* กรอบลายไทยและเอฟเฟกต์: ใช้เฉพาะหน้าคลิปกลอน */
#stage.poem-video-mode .slide.poem-video-slide {background:#190e13!important; overflow:hidden}
.slide.poem-video-slide .poem-film {
  position:absolute;inset:0;overflow:hidden;
  background-image:linear-gradient(180deg,rgba(20,6,8,.03),rgba(32,12,7,.08)),url("../images/image_01_2cb2d976b.png");
  background-position:center;background-size:100% 100%;
  display:flex;align-items:center;justify-content:center;
}
.slide.poem-video-slide .thai-film-frame {
  position:absolute;inset:7.2% 4.5% 7.5%; display:flex;align-items:center;justify-content:center;
  padding:9px;background:linear-gradient(135deg,#8c3718,#fff5ba 14%,#b56a17 28%,#ffe6a1 48%,#894418 66%,#f5cc66 84%,#7d270e);
  border:3px solid #60290f;border-radius:15px;
  box-shadow:0 0 0 3px #e0a746,0 0 0 7px #48210f,0 18px 44px #210805b0,inset 0 0 9px #fff6c2;
}
.slide.poem-video-slide .thai-film-frame::before {
  content:"";position:absolute;inset:7px;pointer-events:none;z-index:2;
  border:2px solid rgba(253,204,100,.68);border-radius:5px;
  box-shadow:inset 0 0 20px rgba(255,200,67,.12)
}
.slide.poem-video-slide .thai-film-frame video {
 width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:1;
 background:radial-gradient(ellipse at center,#30211d,#070606 85%);border:0;border-radius:5px;
}
.slide.poem-video-slide .thai-film-title {
 z-index:5;position:absolute;top:1%;left:50%;transform:translateX(-50%);white-space:nowrap;
 font-family:serif;font-size:clamp(22px,2.7vw,42px);line-height:1.2;font-weight:800;
 color:#fff0b3;-webkit-text-stroke:.55px #6e330a;text-shadow:0 2px 3px #40160f,0 0 11px #ecbb5c;
 background:linear-gradient(90deg,transparent,#3d0f0bdc 20%,#46130fe6 80%,transparent);
 padding:0 48px;pointer-events:none
}
.slide.poem-video-slide .thai-film-title::before,.slide.poem-video-slide .thai-film-title::after{content:'❖';font-size:.64em;vertical-align:middle;color:#fbd174;margin:0 14px}
.slide.poem-video-slide .thai-ornament {position:absolute;z-index:5;pointer-events:none;font-size:clamp(24px,3.4vw,58px);line-height:1;color:#ffd878;text-shadow:0 2px 2px #6d2706,0 0 11px #ffc957}
.slide.poem-video-slide .thai-ornament.left{left:1.5%;top:50%;transform:translateY(-50%)}
.slide.poem-video-slide .thai-ornament.right{right:1.5%;top:50%;transform:translateY(-50%)}
.slide.poem-video-slide .thai-bottom-text {position:absolute;left:50%;bottom:1.5%;transform:translateX(-50%);font-size:clamp(16px,1.6vw,24px);color:#613a11;font-weight:bold;text-shadow:0 1px #fff6cc;white-space:nowrap;z-index:5;pointer-events:none}
/* เปลี่ยนฉากแบบม่านทองบนเว็บ ไม่ตัดต่อวิดีโอต้นฉบับ */
.slide.poem-video-slide .scene-curtain {
 position:absolute;inset:-5%;z-index:10;pointer-events:none;
 background:linear-gradient(115deg,transparent 12%,rgba(255,228,139,.85) 39%,#fff2b9 49%,rgba(205,118,30,.86) 58%,transparent 89%);
 transform:translateX(-145%) skewX(-8deg);opacity:0;
}
.slide.poem-video-slide.active .scene-curtain{animation:thaiWipeIn 1.1s ease-out both}
.slide.poem-video-slide.active .thai-film-frame{animation:thaiFilmReveal .82s ease-out both}
.slide.poem-video-slide.active .thai-film-title{animation:thaiTitleReveal 1s .25s both}
.slide.poem-video-slide.scene-exiting .scene-curtain{animation:thaiWipeOut .95s ease-in both}
@keyframes thaiWipeIn{0%{transform:translateX(-145%) skewX(-8deg);opacity:.95}52%{opacity:.9}100%{transform:translateX(145%) skewX(-8deg);opacity:0}}
@keyframes thaiWipeOut{0%{transform:translateX(-145%) skewX(-8deg);opacity:0}20%{opacity:.9}100%{transform:translateX(145%) skewX(-8deg);opacity:1}}
@keyframes thaiFilmReveal{from{opacity:.25;filter:brightness(1.6);transform:scale(.975)}to{opacity:1;filter:brightness(1);transform:scale(1)}}
@keyframes thaiTitleReveal{from{opacity:0;transform:translate(-50%,-18px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:750px){.slide.poem-video-slide .thai-film-frame{inset:10% 3.7% 9%;padding:5px;border-width:2px}.slide.poem-video-slide .thai-film-title{padding:0 12px}.slide.poem-video-slide .thai-ornament{display:none}.slide.poem-video-slide .thai-bottom-text{font-size:13px}}
@media(prefers-reduced-motion:reduce){.slide.poem-video-slide.active .scene-curtain,.slide.poem-video-slide.active .thai-film-frame,.slide.poem-video-slide.active .thai-film-title,.slide.poem-video-slide.scene-exiting .scene-curtain{animation:none}}

/* Responsive web version: phones / tablets and cover tap-to-start */
#cover{cursor:pointer;touch-action:manipulation}
#cover:focus-visible{outline:4px solid #f6ce78;outline-offset:-5px}
.cover-tap-hint{position:absolute;z-index:3;bottom:90px;left:50%;transform:translateX(-50%);white-space:nowrap;max-width:calc(100% - 24px);padding:11px 24px;border:2px solid #ffdf99;border-radius:999px;background:rgba(25,24,19,.76);box-shadow:0 4px 18px #0008;color:#fff6d6;text-shadow:0 1px 3px #000;font-size:clamp(17px,2vw,26px);font-weight:800;pointer-events:none;animation:coverHint 2.4s ease-in-out infinite}
@keyframes coverHint{50%{box-shadow:0 4px 26px #f8c870aa;background:rgba(58,34,14,.88)}}
.mobile-menu-toggle,.menu-backdrop{display:none}
#content,.slide,.poem-scroll,.ending-scroll{min-width:0}
@media(max-width:1024px){
 :root{--sidebar:min(84vw,360px)}
 html,body{overscroll-behavior:none}
 #stage.started #content,#stage.poem-video-mode.nav-on #content{left:0!important}
 #side,.started #side,#stage.poem-video-mode.nav-on #side{display:block!important;position:fixed;top:0;left:0;bottom:0;width:var(--sidebar)!important;transform:translateX(-105%);transition:transform .25s ease;z-index:60!important;padding:65px 15px 24px!important;overflow-y:auto;box-shadow:12px 0 40px #0009}
 #stage.nav-on #side,#stage.poem-video-mode.nav-on #side{transform:translateX(0)}
 .side-title{font-size:25px!important}
 #side .navitem{font-size:19px!important;padding:11px 13px!important;margin-top:9px!important;line-height:1.45}
 #side .navitem small{font-size:13px!important;display:block!important}
 .side-bottom{bottom:auto!important;padding:18px 0!important}
 .mobile-menu-toggle{display:flex;align-items:center;justify-content:center;gap:7px;position:fixed;left:12px;top:calc(12px + env(safe-area-inset-top));z-index:70;min-width:48px;min-height:44px;padding:7px 14px;border-radius:99px;border:2px solid #e7bd6c;background:#103b35ed;color:#fff0ba;font-size:18px;font-weight:700;box-shadow:0 3px 10px #0007}
 #stage:not(.started) .mobile-menu-toggle{display:none}
 .menu-backdrop{display:none;position:fixed;inset:0;z-index:55;border:0;border-radius:0;background:#00131bc9}
 #stage.nav-on .menu-backdrop{display:block}
 #stage.poem-video-mode .poem-video-menu{display:none}
 #controls{bottom:0;left:0;right:0;z-index:25;padding:8px 8px calc(9px + env(safe-area-inset-bottom));gap:7px;min-height:62px;flex-wrap:nowrap}
 #controls .ctrl{font-size:clamp(13px,2.4vw,19px)!important;padding:9px 12px!important;white-space:nowrap}
 #controls #count{font-size:13px;min-width:42px}
 #hint{display:none}
 .slide{padding:65px 8px 78px!important}
 .slide.cover{padding:0 0 65px!important}
 .cover-tap-hint{bottom:82px}
 .members .full-art{max-height:100%;width:100%;height:100%;object-fit:contain}
 .heading{font-size:clamp(26px,4vw,40px)!important;padding-inline:42px;text-align:center}
 .characters .video-area{width:100%;min-height:0;flex:1}
 .characters .video-foot{gap:7px;max-height:88px;overflow-y:auto}
 .characters .clipbutton{font-size:clamp(13px,2vw,17px)!important;padding:7px 11px}
 #playnote{font-size:clamp(12px,1.6vw,16px)}
 .verse-slide{padding:60px 5px 75px!important}
 .verse-slide .poem-shell{height:100%;min-height:0}
 .verse-slide .poem-header{padding:6px 8px 9px}
 .verse-slide .poem-header h1{font-size:clamp(27px,4.7vw,45px)!important;line-height:1.4}
 .verse-slide .poem-header .eyebrow,.verse-slide .poem-header .chapter-id{font-size:clamp(14px,2.2vw,20px)!important}
 .verse-slide .poem-scroll{min-height:0;flex:1;overflow-y:auto!important;overscroll-behavior:contain;padding:14px 14px 70px!important}
 .verse-slide .poem-area{grid-template-columns:minmax(0,1fr)!important;gap:9px!important}
 .verse-slide .poem-cast{display:flex!important;flex-direction:row!important;justify-content:center;flex-wrap:wrap;gap:9px;position:static!important;order:-1}
 .verse-slide .poem-cast .cast-item{width:clamp(70px,16vw,110px);max-width:110px!important;margin:0}
 .verse-slide .poem-cast .cast-item img{width:100%;height:clamp(60px,13vw,105px);object-fit:contain}
 .verse-slide .poem-cast .cast-item figcaption{font-size:clamp(13px,2vw,19px)!important}
 .verse-slide .section-label,.verse-slide .summary h2{font-size:clamp(28px,4.3vw,41px)!important;padding:8px 12px!important;line-height:1.4!important}
 .verse-slide .verse-one-column p{font-size:clamp(24px,3.6vw,35px)!important;line-height:1.72!important;overflow-wrap:anywhere!important}
 .verse-slide .summary p{font-size:clamp(23px,3.3vw,33px)!important;line-height:1.7!important}
 .ending-slide{padding:58px 5px 78px!important}
 .ending-shell{height:100%;min-height:0;background-size:cover}
 .ending-header{padding:12px 8px 2px}
 .ending-header h1{font-size:clamp(31px,5vw,53px)!important}
 .ending-scroll{padding:10px 13px 45px!important}
 .moral-item{padding:12px;gap:11px}
 .moral-number{width:50px;height:50px;font-size:25px}
 .moral-item h3{font-size:clamp(22px,3vw,30px)}
 .moral-item p,.moral-summary p{font-size:clamp(19px,2.6vw,25px)}
 .qtext{font-size:clamp(20px,2.7vw,29px)}
 .qnumber{font-size:clamp(16px,2.2vw,21px)}
 .answer{font-size:clamp(19px,2.5vw,25px);margin:0 10px 12px;padding:13px}
 #stage.poem-video-mode .slide.poem-video-slide{padding:0!important}
 .slide.poem-video-slide .thai-film-frame{inset:9% 3% 8%!important;padding:5px!important}
 .slide.poem-video-slide .thai-film-title{font-size:clamp(21px,4vw,35px);white-space:normal;text-align:center;width:85%;top:1%}
 .slide.poem-video-slide .thai-bottom-text{max-width:90%;white-space:normal;text-align:center}
}
@media(max-width:600px){
 #controls .ctrl{font-size:13px!important;padding:8px 9px!important}
 #controls #fullscreen{font-size:18px!important}
 #controls #count{font-size:12px;min-width:38px}
 .slide.cover{padding:0 0 65px!important}
 .cover-tap-hint{bottom:79px;font-size:16px;white-space:normal;text-align:center;padding:8px 13px}
 .verse-slide .verse-one-column p{font-size:clamp(22px,5.3vw,29px)!important;line-height:1.7!important}
 .verse-slide .summary p{font-size:clamp(21px,5vw,27px)!important}
 .verse-slide .section-label,.verse-slide .summary h2{font-size:clamp(25px,6.6vw,34px)!important}
 .verse-slide .poem-header h1{font-size:clamp(25px,6.2vw,34px)!important}
 .moral-item{flex-direction:column}
 .question-item summary{gap:8px;padding:11px}
 .qnumber{padding:6px 8px}
 .qtext{font-size:20px;line-height:1.5}
 .qchevron{font-size:22px}
 .characters .video-foot{max-height:100px}
 .slide.poem-video-slide .thai-film-frame{inset:12% 2.5% 12%!important}
 .slide.poem-video-slide .thai-film-title{top:2%}
}
@media(max-height:500px) and (max-width:1024px){
 .slide{padding-top:52px!important;padding-bottom:60px!important}
 .slide.cover{padding:0 0 54px!important}
 .cover-tap-hint{bottom:64px}
 .ending-slide{padding-top:48px!important;padding-bottom:58px!important}
 .verse-slide{padding-top:48px!important;padding-bottom:59px!important}
 .slide.poem-video-slide .thai-film-frame{inset:10% 4% 12%!important}
 .slide.poem-video-slide .thai-bottom-text{display:none}
 #controls{min-height:48px;padding:4px 8px calc(4px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.cover-tap-hint{animation:none}}