@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Noto+Sans+Thai:wght@400;500;600&family=Outfit:wght@300;400;500;600;700&display=swap');
:root{--gold:#eed39a;--cream:#fff1d8;--muted:#c4cfbf;--green:#163c32;--border:#e9cb8a30;--orange:#efaa58;--font:'Outfit','Noto Sans Thai',sans-serif;--serif:'Cormorant Garamond',Georgia,serif;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:#102b29;color:var(--cream);font-family:var(--font);font-size:15px;min-width:320px}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible{outline:2px solid #fff0b3;outline-offset:5px}button{touch-action:manipulation}button:disabled{opacity:.45;cursor:default}button,button span{ -webkit-tap-highlight-color:transparent}button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4}button:active{transform:translateY(1px)}[hidden]{display:none!important}.scenery{position:fixed;inset:0;overflow:hidden;z-index:-1;background:#102b29}.scene-image{position:absolute;inset:-2%;background:url('assets/thai-riverside.webp') center 52%/cover no-repeat;animation:breathe 30s ease-in-out infinite alternate}.scene-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,30,31,.86),rgba(8,33,32,.54) 34%,rgba(10,25,25,.03) 68%),linear-gradient(0deg,#0b2829 0%,#0b2829b8 13%,transparent 45%,#0b282933)}.waterlight{position:absolute;left:46%;top:52%;width:43%;height:22%;background:repeating-linear-gradient(0deg,transparent 0 8px,#ffd09613 9px 10px,transparent 11px 17px);filter:blur(3px);mix-blend-mode:screen;animation:ripple 6s ease-in-out infinite;transform:skewX(-18deg)}.mist{position:absolute;inset:30% -20% 15%;background:radial-gradient(ellipse at 20% 70%,#d9e9e710,transparent 60%);animation:mist 25s ease-in-out infinite alternate;pointer-events:none}.firefly{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffe4a1;box-shadow:0 0 10px 3px #ffd37a6b;animation:firefly var(--duration) ease-in-out infinite;animation-delay:var(--delay);opacity:0}.app-shell{max-width:1800px;padding:0 5%;margin:auto;min-height:100svh;display:flex;flex-direction:column}.topbar{height:106px;display:flex;align-items:center;justify-content:space-between;gap:20px}.text-button{background:none;border:0;padding:0}.brand{display:flex;text-align:left;align-items:center;gap:12px;letter-spacing:3px;font-size:16px;font-weight:500}.lotus-mark{color:var(--gold);font-size:41px;line-height:1}.brand-sub{display:block;font-size:8px;letter-spacing:2.2px;font-weight:400;color:#f8e8bf8a;margin-top:6px}.top-actions{display:flex;align-items:center;gap:12px}.thai-welcome{font-size:13px;color:#ffedcaaa;margin-right:10px}.pill,.icon-button{border:1px solid #ffe2a83b;background:#183c386b;backdrop-filter:blur(12px);border-radius:30px;padding:10px 15px;transition:background .2s,border-color .2s}.pill:hover,.icon-button:hover{background:#365549b3;border-color:#f6db9888}.language{font-size:12px;letter-spacing:.5px}.language span{color:#eee3d59c;margin-left:5px}.icon-button{width:38px;height:38px;display:grid;place-items:center;padding:8px;position:relative;font-size:21px}.sound-dot{position:absolute;right:3px;bottom:5px;width:7px;height:7px;background:#829e8f;border:1px solid #0b2829;border-radius:50%}.sound-on .sound-dot{background:#edce83}.hero{position:relative;display:grid;grid-template-columns:46% 54%;align-items:center;flex:1;min-height:580px;padding:12px 0 40px}.hero-copy{position:relative;z-index:2;max-width:510px}.eyebrow{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:2.5px;color:var(--gold);font-weight:500}.eyebrow>span:first-child:empty{height:1px;width:26px;background:var(--gold)}.signature{font-family:var(--serif);font-size:36px;font-style:italic;color:#f1e3c4;margin:27px 0 0 5px;letter-spacing:.5px}h1{font-family:var(--serif);font-size:clamp(92px,8.8vw,154px);font-weight:500;line-height:.78;letter-spacing:-5px;margin:4px 0 16px;position:relative;width:max-content;text-shadow:0 4px 20px #09222250}h1 span{color:var(--gold);padding-left:28px}h1 i{position:absolute;right:-50px;top:41px;font-size:41px;font-weight:400;color:var(--gold);animation:twinkle 5s infinite}.thai-title{color:#f1dba8d1;font-family:'Noto Sans Thai',sans-serif;font-size:19px;letter-spacing:3px;margin:24px 0 16px 5px}.hero-description{color:#e1e8dcbd;font-size:15px;line-height:1.7;margin:0 0 28px 5px;font-weight:300}.play-group{max-width:302px}.play-button{display:flex;align-items:center;gap:18px;width:100%;border:1px solid #ffe9b1;border-radius:9px;padding:18px 22px;background:linear-gradient(115deg,#f9e4ae,#e3b76a);box-shadow:0 5px 30px #e9ba6f24,inset 0 1px #fff9de;color:#1b3e32;font-size:19px;font-weight:600;position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s}.play-button:before{content:'';position:absolute;inset:-40% -60%;background:linear-gradient(110deg,transparent 40%,#fff7de7a 50%,transparent 60%);transform:translateX(-80%);animation:shine 7s ease-in-out infinite}.play-button:hover{box-shadow:0 5px 40px #e9ba6f66;transform:translateY(-3px)}.play-triangle{font-size:16px}.arrow{margin-left:auto;font-size:25px;font-weight:300}.continue-button{padding:12px 0 0;background:none;border:0;color:var(--gold);font-size:13px}.how-link{display:flex;align-items:center;gap:10px;border:0;background:none;font-size:13px;margin-top:22px;padding:0 4px;color:#f9eed4c9}.circle-play{border:1px solid #e3e2bf70;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:12px}.tiny-label{color:#d6e6d56b;font-size:7px;letter-spacing:1.5px;margin-left:7px}.tea-stage{height:510px;position:relative;align-self:end;isolation:isolate;transform:translateY(3%)}.tea-halo{position:absolute;left:4%;right:-10%;top:20%;bottom:-5%;background:radial-gradient(ellipse,#ffcc7845,transparent 65%);filter:blur(30px);animation:twinkle 7s infinite}.floating-tea{position:absolute;background:none;border:0;padding:0;filter:drop-shadow(0 18px 13px #0c211e6a);transition:filter .3s;animation:float 6s ease-in-out infinite;transform-origin:bottom center}.floating-tea:hover{filter:drop-shadow(0 0 20px #ffdc8290);z-index:8}.tea-art{display:block;width:100%;aspect-ratio:1;background:url('assets/tea-collection.webp') 0 0/200% 200% no-repeat;position:relative;pointer-events:none}.tea-1{background-position:100% 0}.tea-2{background-position:0 100%}.tea-3{background-position:100% 100%}.tea-thai{width:57%;left:12%;top:22%;z-index:4;--angle:-7deg;animation-duration:7.2s}.tea-taro{width:49%;right:-1%;top:14%;z-index:3;--angle:12deg;animation-duration:6.5s;animation-delay:-2s}.tea-pandan{width:36%;left:-6%;top:4%;z-index:2;--angle:-16deg;animation-duration:8s;animation-delay:-3s}.tea-pink{width:35%;right:3%;top:49%;z-index:5;--angle:15deg;animation-duration:5.6s;animation-delay:-2s}.tea-sparkles{position:absolute;left:20%;top:48%;font-size:25px;color:#fff0a9;text-shadow:0 0 20px #ffce6c;animation:twinkle 3s infinite;pointer-events:none}.tea-taro .tea-sparkles{animation:orbit 7s linear infinite;color:#e4c5ff}.tea-pandan .tea-sparkles{animation:leafDance 4s ease-in-out infinite;color:#d8ffaf}.tea-pink .tea-sparkles{animation:petalDance 5s ease-in-out infinite;color:#ffcef0}.tea-caption{position:absolute;bottom:2%;left:9%;right:0;display:flex;align-items:center;gap:12px;justify-content:center;color:#fae8bac7;font-size:8px;letter-spacing:2px;white-space:nowrap}.caption-line{width:25px;height:1px;background:#f7dca563}.sprite-friend{position:absolute;bottom:9%;left:-7%;padding:0;border:0;background:none;animation:bob 5s ease-in-out infinite}.gloom{display:block;width:58px;height:50px;background:radial-gradient(circle at 30% 20%,#fff9,var(--color) 40%,#392557);border-radius:55% 45% 42% 45%;box-shadow:inset -5px -6px 12px #0004,0 0 22px color-mix(in srgb,var(--color),transparent 70%);position:relative;isolation:isolate}.gloom:before,.gloom:after{content:'';position:absolute;top:42%;width:6px;height:8px;border-radius:50%;background:#162f3d;box-shadow:0 1px 0 #fff9;animation:blink 6s infinite}.gloom:before{left:29%}.gloom:after{right:29%}.gloom i{position:absolute;left:42%;bottom:23%;width:16%;height:7%;border-bottom:2px solid #343247;border-radius:50%}.friend-bubble{position:absolute;white-space:nowrap;left:-50%;bottom:125%;font-size:10px;padding:9px 13px;background:#fbf0d7eb;color:#375346;border-radius:10px 10px 10px 0;opacity:0;transition:opacity .3s}.sprite-friend:hover .friend-bubble{opacity:1}.bottom-nav{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(90deg,#12342d55,#0e302f77);backdrop-filter:blur(15px);border-radius:3px}.menu-tile{display:flex;text-align:left;align-items:center;gap:17px;border:0;border-right:1px solid var(--border);background:none;padding:24px 28px;transition:background .25s;position:relative}.menu-tile:last-child{border-right:0}.menu-tile:hover{background:#e6d69a13}.menu-icon{font-size:35px;color:#e9d09e;font-family:Georgia;line-height:1;min-width:33px;font-weight:400}.sun-icon{font-size:31px}.menu-tile b{font-weight:500;font-size:16px;display:block;letter-spacing:.1px}.menu-tile small{display:block;margin-top:5px;font-size:11px;color:#cbd8c59e;font-weight:300}.tile-arrow{margin-left:auto;font-size:22px;color:#b9c8af}.daily-dot{width:5px;height:5px;background:var(--gold);border-radius:50%;position:absolute;top:24px;right:56px;box-shadow:0 0 10px #f4c665}.footer{display:flex;justify-content:space-between;align-items:center;min-height:62px;font-size:9px;color:#d8dfc485;gap:20px}.footer>span:first-child{display:flex;align-items:center;gap:8px}.footer button{color:inherit;font-size:10px}.footer button:hover{color:var(--gold)}.thai-flag{width:16px;height:10px;background:linear-gradient(#bd4853 0 17%,#eee3d1 17% 33%,#263962 33% 67%,#eee3d1 67% 83%,#bd4853 83%);border-radius:1px;display:inline-block;opacity:.8}.version{font-size:8px;letter-spacing:1.8px}
dialog{background:linear-gradient(145deg,#20483e,#102c2a 80%);color:var(--cream);border:1px solid #d9bb7866;border-radius:18px;box-shadow:0 30px 110px #0009,0 0 60px #ebc98510;padding:26px 32px 32px;width:min(640px,calc(100vw - 28px));max-height:90svh;overflow:auto}dialog::backdrop{background:#041b1bd6;backdrop-filter:blur(9px)}dialog[open]{animation:modalIn .25s ease-out}.modal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.modal-kicker{font-size:8px;letter-spacing:2px;color:#d5c69c9e}.close-button{font-size:27px;background:#ffffff08;border:1px solid #ffffff19;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;line-height:1;color:#f9e8ca}.close-button:hover{background:#fff2}h2{font:500 43px/1.05 var(--serif);margin:8px 0 12px;color:var(--gold)}.modal-intro{font-size:14px;line-height:1.7;color:#d2ddc7c4;margin:0 0 24px}.modal-intro strong{color:#fff0d1;font-weight:500}.mode-list{display:grid;gap:10px}.mode-option{border:1px solid #dcc58d2b;background:#ffffff04;border-radius:10px;padding:16px;display:flex;align-items:center;gap:16px;text-align:left}.mode-option:hover,.mode-option.selected{border-color:#eccd8c99;background:#efd99d0f}.mode-option>span:first-child{font-size:26px;color:var(--gold);width:30px;text-align:center}.mode-option b{font-size:16px;font-weight:500;display:block}.mode-option small{font-size:12px;color:#bdceb7;display:block;margin-top:4px}.mode-option>.check{margin-left:auto;font-size:17px;color:var(--gold)}.field-label{display:block;font-size:10px;letter-spacing:1.4px;margin:24px 0 10px;color:#cfdbbfc2}.segmented{display:flex;border:1px solid #e6d6a72b;border-radius:8px;overflow:hidden}.segmented button{flex:1;background:#ffffff02;border:0;border-right:1px solid #e6d6a721;padding:12px 8px;color:#d2dec4;font-size:12px}.segmented button:last-child{border-right:0}.segmented button.selected{background:#e7cd91;color:#193c31}.modal-primary{width:100%;margin-top:24px;justify-content:center;padding:14px;font-size:16px}.button-row{display:flex;gap:12px;margin-top:24px}.button-row>button{flex:1}.secondary-button{border:1px solid #d4c59c44;background:#ffffff06;border-radius:8px;padding:13px 18px;font-size:13px}.secondary-button:hover{background:#ffffff13}.small-note{font-size:11px;line-height:1.6;color:#bfccb294;margin:17px 0 0}.collection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.tea-card{background:#ffffff05;border:1px solid #dfd4b32a;border-radius:10px;padding:6px 5px 13px;text-align:center}.tea-card:hover,.tea-card.selected{background:#fff1;border-color:var(--gold)}.tea-card b{font-size:10px;font-weight:400;display:block}.tea-card .tea-art{animation:bob 5s ease-in-out infinite}.tea-detail{display:flex;gap:20px;align-items:center;margin-top:20px;border-top:1px solid var(--border);padding-top:22px}.detail-art{width:140px;flex-shrink:0;animation:float 6s ease-in-out infinite;--angle:-4deg;filter:drop-shadow(0 12px 12px #0005)}.detail-content h3{font:500 28px var(--serif);margin:0 0 5px;color:var(--gold)}.detail-content .thai{font-size:13px;color:#cdbca4}.detail-content p{font-size:13px;line-height:1.65;color:#cfdbc3}.flavour-tag{font-size:9px;letter-spacing:1px;padding:6px 8px;border:1px solid #dfcb9e33;border-radius:4px;display:inline-block}.how-step{display:flex;gap:15px;margin:22px 0}.step-num{width:29px;height:29px;border:1px solid #d3ba773f;display:grid;place-items:center;border-radius:50%;flex-shrink:0;color:var(--gold);font-family:var(--serif);font-size:20px}.how-step h3{margin:0 0 5px;font-size:15px;font-weight:500}.how-step p{margin:0;font-size:13px;line-height:1.7;color:#c8d7be}.match-demo{display:flex;justify-content:center;gap:6px;margin:15px 0;padding:20px;border:1px solid #ddd3a923;background:#071c1a77;border-radius:10px}.match-demo .mini-cup{width:35px;height:44px}.match-demo .gloom{width:38px;height:38px;align-self:center}.match-demo>span:last-child{align-self:center;color:var(--gold);padding-left:12px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:22px 0}.settings-row label,.settings-row>.setting-copy{font-size:14px}.settings-row small{display:block;font-size:11px;color:#c0cfb4;margin-top:6px}.settings-row input[type=range]{width:140px;accent-color:#dfc68e}.settings-row input[type=checkbox]{appearance:none;background:#071e1d;width:42px;height:24px;border:1px solid #e4d29744;border-radius:20px;position:relative;cursor:pointer;flex-shrink:0}.settings-row input[type=checkbox]:before{content:'';position:absolute;top:3px;left:3px;background:#a2b6a4;border-radius:50%;width:16px;height:16px;transition:transform .2s}.settings-row input:checked{background:#d7be83}.settings-row input:checked:before{background:#133a30;transform:translateX(17px)}.scores-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.score-card{padding:20px 10px;border:1px solid #e7ca8233;border-radius:10px;text-align:center;background:#ffffff04}.score-card strong{display:block;font-family:var(--serif);font-size:36px;color:var(--gold)}.score-card small{font-size:10px;color:#bed0b8}.score-list{list-style:none;padding:0;margin:24px 0 10px}.score-list li{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);font-size:12px;gap:15px}.score-list strong{color:var(--gold)}.empty-state{padding:25px 20px;text-align:center;background:#ffffff04;border:1px dashed var(--border);border-radius:12px;margin-top:20px;font-size:13px;color:#c9d7bc;line-height:1.8}.about-lotus{font-size:58px;text-align:center;color:var(--gold);margin:0 0 10px}.centered{text-align:center}.sprite-line{display:flex;justify-content:center;gap:30px;padding:28px 0}.sprite-line .gloom{animation:bob 3s ease-in-out infinite}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,25px);background:#f6e6bc;color:#193d31;padding:12px 22px;border-radius:10px;max-width:90vw;text-align:center;box-shadow:0 8px 40px #0004;opacity:0;transition:all .25s;pointer-events:none;z-index:10;font-size:13px}.toast.show{opacity:1;transform:translate(-50%,0)}
.game-view{min-height:100svh;padding:20px 5%;background:#061f23a6;backdrop-filter:blur(5px)}.game-header{max-width:1040px;margin:auto;display:flex;align-items:center;justify-content:space-between}.game-brand{font:500 30px var(--serif);color:var(--gold)}.game-layout{display:flex;justify-content:center;align-items:center;gap:70px;max-width:1000px;margin:25px auto}.game-side{width:260px}.game-side h2{font-size:45px}.game-side>p{color:#cfddc9b3;font-size:13px;line-height:1.8}.stat-pair{display:flex;gap:40px;margin:30px 0}.stat-pair small,.next-card>small{font-size:9px;color:#c5d6bf;letter-spacing:1.5px;display:block}.stat-pair strong{font-size:36px;font-family:var(--serif);color:var(--gold)}.next-card{border:1px solid var(--border);padding:18px;border-radius:12px;background:#08272396;max-width:170px}#next-pair{display:flex;margin-top:15px;gap:5px;height:44px}#next-pair .mini-cup{width:30px;height:40px}.keyboard-help{font-size:11px!important;margin-top:25px}.game-status{color:var(--gold)!important;min-height:25px}.board-wrap{padding:15px 18px 18px;border:1px solid #eaca85aa;border-radius:20px;background:linear-gradient(135deg,#285247d9,#102d2de8);box-shadow:0 0 0 5px #d9c08a0a,0 20px 70px #0006;width:min(382px,100%)}.board-top{display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:var(--gold);padding:0 0 13px}.board{position:relative;aspect-ratio:8/14;width:100%;border:1px solid #e2cf9a3a;border-radius:7px;background-color:#081c22e6;background-image:linear-gradient(#c4c8a109 1px,transparent 1px),linear-gradient(90deg,#c4c8a109 1px,transparent 1px);background-size:12.5% 7.142857%;overflow:hidden}.board-cell{position:absolute;width:12.5%;height:7.142857%;padding:3px;display:flex;align-items:center;justify-content:center}.mini-cup{width:79%;height:90%;position:relative;border:1px solid #ffffff8c;border-radius:6px 6px 10px 10px;background:linear-gradient(100deg,#ffffffa6,transparent 40%,#ffffff30 70%,#0003),linear-gradient(0deg,var(--color) 0 75%,#fff0dc 96%);box-shadow:inset 0 2px 1px #fff8,0 2px 5px #0004;isolation:isolate;display:block}.mini-cup:before{content:'';position:absolute;width:12%;height:23%;left:48%;top:-16%;background:#f7e7c4;border-radius:1px;transform:rotate(8deg);z-index:-1}.mini-cup:after{content:'•••';position:absolute;bottom:1%;left:7%;right:5%;font:bold 14px/.8 Georgia;letter-spacing:0;color:#202333;text-align:center}.cup-symbol{position:absolute;top:15%;left:0;right:0;text-align:center;color:#26313c;font-size:13px;font-weight:600}.c0{--color:#f3a24e}.c1{--color:#b297e8}.c2{--color:#8dc685}.c3{--color:#ee9cbb}.board-cell .gloom{width:94%;height:90%;border-radius:45%;animation:spriteWobble 4s ease-in-out infinite}.board-cell .gloom:before,.board-cell .gloom:after{width:4px;height:5px}.board-cell .gloom .cup-symbol{top:3%;font-size:9px;opacity:.75}.board-cell.active{filter:drop-shadow(0 0 5px #fff7);z-index:3}.board-cell.ghost{opacity:.15}.board-cell.clearing{animation:clear .33s ease-in forwards}.touch-controls{display:flex;gap:8px;margin-top:14px}.touch-controls button{background:#315b4e;border:1px solid #d5bd7a66;border-radius:8px;flex:1;height:39px;font-size:21px}.touch-controls button:active{background:#e9c782;color:#173b31}.touch-controls .drop-control{background:#e3c992;color:#193c32}.win-icon{font-size:65px;text-align:center;color:#f0d497;margin-bottom:10px}.summary-score{font:500 64px var(--serif);color:var(--gold);text-align:center;margin:12px}.warning-text{color:#edb9a5;font-size:12px;line-height:1.6}.reduce-motion *,.reduce-motion *:before,.reduce-motion *:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.reduce-motion .firefly{opacity:.6}.high-contrast .mini-cup{outline:1px solid white}.high-contrast .hero-description,.high-contrast .menu-tile small,.high-contrast .footer,.high-contrast .small-note{color:#f6efdb}.high-contrast .scene-shade{background:linear-gradient(90deg,#071f20ed,#092422a8 45%,#071b2040)}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--angle,0deg))}50%{transform:translateY(-15px) rotate(calc(var(--angle,0deg) + 3deg))}}@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes firefly{0%,100%{transform:translate(0,0);opacity:0}30%,65%{opacity:.8}90%{transform:translate(24px,-100px);opacity:0}}@keyframes twinkle{0%,100%{opacity:.4}50%{opacity:1}}@keyframes breathe{to{transform:scale(1.03) translateX(-.4%)}}@keyframes ripple{50%{transform:translateY(6px) scaleX(1.08) skewX(10deg);opacity:.3}}@keyframes mist{to{transform:translateX(12%)}}@keyframes shine{0%,70%{transform:translateX(-80%)}100%{transform:translateX(80%)}}@keyframes orbit{from{transform:rotate(0) translateX(22px) rotate(0)}to{transform:rotate(360deg) translateX(22px) rotate(-360deg)}}@keyframes leafDance{50%{transform:translate(12px,-38px) rotate(80deg);opacity:.3}}@keyframes petalDance{50%{transform:translate(-12px,-30px) rotate(-120deg);opacity:.3}}@keyframes blink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.1)}}@keyframes spriteWobble{50%{transform:rotate(5deg) scale(.93,1.03)}}@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@keyframes clear{to{transform:scale(1.5);opacity:0;filter:brightness(2)}}
@media(min-width:1500px){.app-shell{padding:0 6%}.hero{min-height:670px}.tea-stage{height:600px}.hero-copy{padding-left:10px}.signature{font-size:42px}.hero-description{font-size:17px}.menu-tile{padding:29px 36px}}
@media(max-width:1100px){.topbar{height:85px}.hero{min-height:560px;grid-template-columns:47% 53%}.tea-stage{height:420px;align-self:center;transform:translateY(25px)}.tea-caption{font-size:6px;letter-spacing:1px;bottom:-6%}.menu-tile{padding:20px 17px;gap:12px}.menu-tile b{font-size:14px}.menu-tile small{font-size:10px}.hero-description{font-size:14px}.tiny-label{display:none}.game-layout{gap:35px}.board-wrap{width:340px}}
@media(max-width:760px){.app-shell{padding:0 6%}.topbar{height:78px}.brand{font-size:12px;letter-spacing:2px;gap:8px}.lotus-mark{font-size:32px}.brand-sub{font-size:6px;letter-spacing:1.1px}.top-actions{gap:7px}.thai-welcome{display:none}.top-actions .icon-button[data-action=fullscreen]{display:none}.icon-button{width:32px;height:32px}.language{padding:8px 10px;font-size:10px}.hero{display:block;min-height:720px;padding:16px 0 10px}.hero-copy{max-width:100%;text-align:center}.eyebrow{justify-content:center;font-size:8px;letter-spacing:1.8px}.signature{margin:21px 0 2px;font-size:29px}h1{font-size:100px;line-height:.8;letter-spacing:-3px;margin:4px auto 0}h1 br{display:none}h1 span{padding-left:13px}h1 i{right:-16px;top:-15px;font-size:24px}.thai-title{font-size:15px;margin:17px 0 13px;letter-spacing:2px}.hero-description{font-size:13px;margin-bottom:18px}.play-group{margin:0 auto;max-width:280px}.play-button{padding:15px 20px;font-size:17px}.how-link{margin:17px auto 0;font-size:12px}.tea-stage{height:300px;max-width:420px;width:100%;margin:2px auto 14px;transform:none}.tea-thai{width:54%;top:17%;left:15%}.tea-taro{width:46%;right:0;top:7%}.tea-pandan{width:34%;top:3%;left:-1%}.tea-pink{width:33%;top:38%;right:2%}.tea-caption{bottom:-1%;font-size:6px;left:0;letter-spacing:1px}.sprite-friend{left:9%;bottom:14%;transform:scale(.8)}.bottom-nav{grid-template-columns:1fr;background:#102e2c9e}.menu-tile{padding:17px 20px;border-right:0;border-bottom:1px solid var(--border)}.menu-tile:last-child{border-bottom:0}.menu-tile b{font-size:15px}.menu-tile small{font-size:11px}.menu-icon{font-size:29px}.daily-dot{top:21px}.footer{padding:20px 0;flex-wrap:wrap;justify-content:center;gap:14px;font-size:8px}.version{display:none}.scene-image{background-position:60% center}.scene-shade{background:linear-gradient(180deg,#0a2a2c80,#0a2a2c66 40%,#0b2929b0 70%,#0b2929)}dialog{padding:20px 22px 26px}h2{font-size:36px}.collection-grid{gap:5px}.tea-card b{font-size:8px}.detail-art{width:110px}.tea-detail{gap:10px}.detail-content h3{font-size:24px}.game-view{padding:14px 4%}.game-layout{gap:12px;flex-direction:column;margin:16px auto}.game-side{width:min(400px,100%);display:grid;grid-template-columns:1fr 1fr;column-gap:15px;align-items:center}.game-side>.eyebrow{font-size:7px;justify-content:flex-start}.game-side h2{font-size:27px;margin:0;grid-column:1;grid-row:2}.game-side>p:not(.game-status){display:none}.stat-pair{margin:0;grid-column:2;grid-row:1/3;gap:22px;justify-content:flex-end}.stat-pair small{font-size:7px;letter-spacing:1px}.stat-pair strong{font-size:28px}.next-card{padding:0;border:0;background:none;display:flex;align-items:center;gap:10px;max-width:none;grid-row:3;grid-column:1;margin-top:7px}.next-card>small{font-size:7px;letter-spacing:1px}#next-pair{height:28px;margin:0;gap:4px}#next-pair .mini-cup{height:26px;width:20px}.mini-cup:after{font-size:11px}.game-side .game-status{margin:5px 0 0;grid-column:2;font-size:10px;min-height:18px;text-align:right}.board-wrap{width:min(330px,100%);padding:12px 14px 14px}.board-top{font-size:7px;padding-bottom:10px;letter-spacing:1.4px}.game-brand{font-size:25px}.game-header .pill{font-size:11px;padding:8px 12px}}
@media(max-width:420px){h1{font-size:83px}.hero{min-height:680px}.tea-stage{height:275px}.collection-grid{grid-template-columns:repeat(2,1fr)}.tea-card{padding:5px 10px 10px}.tea-card .tea-art{width:80px;margin:auto}.tea-card b{font-size:10px}.settings-row input[type=range]{width:110px}.brand-sub{display:none}.top-actions{gap:5px}.hero-description{font-size:12px}.scores-grid{gap:6px}.score-card{padding:14px 5px}}
@media(prefers-reduced-motion:reduce){body:not(.motion-override) *,body:not(.motion-override) *:before,body:not(.motion-override) *:after{animation:none!important;transition:none!important}}
/* Crisp drawn arrows avoid missing glyphs across system font fallbacks. */
.arrow,.tile-arrow,.modal-primary>span:last-child{font-size:0;width:16px;height:16px;display:inline-block;position:relative;flex-shrink:0}.arrow:before,.tile-arrow:before,.modal-primary>span:last-child:before{content:'';position:absolute;right:1px;top:1px;width:10px;height:10px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor}.arrow:after,.tile-arrow:after,.modal-primary>span:last-child:after{content:'';position:absolute;width:17px;left:0;top:7px;height:1.5px;background:currentColor;transform:rotate(-45deg)}.play-triangle{font-size:0;width:0;height:0;border-left:12px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}.mini-cup.c0 .cup-symbol{animation:twinkle 3.7s infinite}.mini-cup.c1 .cup-symbol{animation:twinkle 5s infinite}.mini-cup.c2 .cup-symbol{animation:leafSway 4s infinite}.mini-cup.c3 .cup-symbol{animation:petalPulse 3s infinite}@keyframes leafSway{50%{transform:rotate(-12deg)}}@keyframes petalPulse{50%{transform:scale(1.2)}}
@media(max-width:760px){h1{font-size:clamp(55px,18vw,100px);letter-spacing:-2px}.scene-shade{background:linear-gradient(180deg,#0a2a2ca0,#0a2a2c88 40%,#0b2929b8 70%,#0b2929)}}
.tea-halo{right:0}.pause-mark{display:inline-block;width:7px;height:10px;border-left:2px solid currentColor;border-right:2px solid currentColor;margin-right:5px}