:root{--navy:#10395f;--deep:#062f51;--blue:#0398d7;--cream:#fff4d8;--paper:#fffaf0;--pink:#ef5e9a;--green:#218a64;--gold:#e9b637;--ink:#16324b;--mono:"DM Mono",monospace;--sans:"Manrope",system-ui,sans-serif;--display:"Yeseva One",Georgia,serif}
*{box-sizing:border-box}html{background:var(--deep)}body{margin:0;color:var(--ink);background:#d8f5ef;font-family:var(--sans);line-height:1.5;overflow-x:hidden}button,a{font:inherit}button{color:inherit}img{display:block;max-width:100%}:focus-visible{outline:4px solid #ffdb4d;outline-offset:4px}
.game-header{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 clamp(1rem,4vw,4rem);background:#10131e;color:#fff;border-bottom:5px solid var(--pink)}.brand{display:flex;align-items:center;gap:.75rem;color:inherit;text-decoration:none}.brand>span:last-child{display:grid}.brand strong{font-size:.82rem;letter-spacing:.12em}.brand small{color:#b5c5cf;font:500 .55rem var(--mono);letter-spacing:.12em}.brand-mark{display:grid;place-items:center;width:42px;height:42px;background:var(--pink);color:#10131e;font:500 1.05rem var(--mono);box-shadow:5px 5px 0 #55cbe7}.room-link{color:#fff;font:500 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;text-underline-offset:.35rem}
main{background-image:url("assets/mahjong/pavilion-court.jpeg");background-size:cover;background-position:center;background-attachment:fixed}.title-panel{padding:clamp(3rem,7vw,6.5rem) clamp(1rem,6vw,6rem);background:rgba(255,250,240,.94);border-bottom:7px solid var(--navy)}.title-panel>p:first-child,.eyebrow{margin:0;color:#9e386c;font:500 .7rem var(--mono);letter-spacing:.14em}.title-panel h1{max-width:1100px;margin:.5rem 0 1rem;font:400 clamp(3.5rem,8vw,8rem)/.9 var(--display);color:var(--navy)}.title-panel>p:last-child{max-width:740px;margin:0;font-size:clamp(1rem,1.7vw,1.25rem);font-weight:700}
.garden-picker{display:grid;grid-template-columns:minmax(250px,.55fr) minmax(0,1.45fr);gap:2rem;padding:clamp(2rem,4vw,4rem) clamp(1rem,4vw,4rem);background:rgba(9,76,103,.94);color:#fff;border-bottom:6px solid var(--gold)}.garden-picker h2{margin:.45rem 0 0;font:400 clamp(2rem,4vw,4rem)/1 var(--display)}.garden-options{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:1rem}.garden-option{position:relative;display:grid;place-items:center;padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(5px 6px 0 #2aaec8);transition:transform .14s ease,filter .14s ease}.garden-option.is-selected{filter:drop-shadow(5px 6px 0 var(--pink))}.garden-option img,.garden-option span{grid-area:1/1}.garden-option img{display:block;width:100%;height:auto;object-fit:contain}.garden-option span{z-index:1;display:block;max-width:56%;padding:0;color:var(--navy);font:800 clamp(.82rem,1.25vw,1.15rem)/1.05 var(--sans);text-align:center;text-wrap:balance;text-shadow:0 1px 0 #fff}.garden-option:hover{transform:translateY(-2px);filter:drop-shadow(5px 8px 0 #2aaec8) brightness(1.02)}.garden-option.is-selected:hover{filter:drop-shadow(5px 8px 0 var(--pink)) brightness(1.02)}.garden-option:focus-visible{outline:3px solid #ffdb4d;outline-offset:5px;border-radius:22px}.garden-option.is-selected::after{content:"PLAYING";position:absolute;top:50%;right:10%;z-index:2;transform:translateY(-50%);padding:.25rem .45rem;border-radius:999px;background:#ffdb4d;color:var(--deep);font:500 .5rem var(--mono);letter-spacing:.08em}
.game-wrap{container:mahjong-stage/inline-size;padding:clamp(1rem,4vw,3.5rem);background:rgba(216,245,239,.92)}.game-stage{--stage-unit:1px;position:relative;width:min(100%,1536px);margin:0 auto;aspect-ratio:16/9;background-image:var(--desktop-theme-image);background-size:cover;background-position:center;border:8px solid var(--cream);border-radius:26px;box-shadow:0 14px 0 var(--navy),0 22px 0 var(--pink);overflow:hidden;isolation:isolate}.game-stage::after{content:"";position:absolute;inset:0;z-index:-1;box-shadow:inset 0 0 0 3px rgba(11,75,102,.55);pointer-events:none}.theme-lotus{--desktop-theme-image:url("assets/mahjong/lotus-terrace.jpeg");--mobile-theme-image:url("assets/mahjong/lotus-terrace-clean.jpeg");--mobile-theme-position:50% 48%}.theme-rainbow{--desktop-theme-image:url("assets/mahjong/rainbow-falls.jpeg");--mobile-theme-image:url("assets/mahjong/rainbow-falls-clean.jpeg");--mobile-theme-position:43% 50%}.theme-pavilion{--desktop-theme-image:url("assets/mahjong/pavilion-court.jpeg");--mobile-theme-image:url("assets/mahjong/pavilion-court-clean.jpeg");--mobile-theme-position:68% 50%}
.desktop-values{position:absolute;inset:2.3% 0 auto 0;width:100%;height:8%;z-index:12;pointer-events:none}.desktop-values strong{position:absolute;top:12%;padding:.25rem .5rem;color:var(--navy);background:rgba(255,244,216,.82);border-radius:8px;font:800 clamp(.75rem,1.4vw,1.3rem) var(--mono)}.desktop-values strong:first-child{left:22%}.desktop-values strong:last-child{left:56%}.desktop-history{position:absolute;inset:1.4% 5.5% auto auto;display:grid;grid-template-columns:1fr 1fr;width:31%;height:9.5%;z-index:20}.desktop-history button,.desktop-controls button{border:0;background:transparent;cursor:pointer}.desktop-controls{position:absolute;right:1.3%;bottom:1.4%;display:grid;grid-template-columns:repeat(3,1fr);width:27%;height:19%;z-index:20}.mobile-theme-art,.mobile-hud,.mobile-theme-plaque{display:none}
.board{position:absolute;left:14%;top:27%;width:72%;height:51%;z-index:10}.mahjong-tile{position:absolute;padding:0;border:0;background:transparent;cursor:pointer;filter:saturate(.92) brightness(.96);transition:transform .12s ease,filter .12s ease,opacity .12s ease,box-shadow .16s ease;transform:translate(calc(var(--layer) * -3px),calc(var(--layer) * -5px));box-shadow:calc(var(--layer) * 2px + 3px) calc(var(--layer) * 3px + 4px) 0 rgba(11,76,96,.42);border-radius:clamp(5px,calc(10 * var(--stage-unit)),10px);overflow:hidden}.tile-art{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:#e8fbff}.tile-art img{position:absolute;width:calc(1448 / var(--crop-w) * 100%);max-width:none;height:auto;left:calc(var(--crop-x) / var(--crop-w) * -100%);top:calc(var(--crop-y) / var(--crop-h) * -100%)}.mahjong-tile.is-free{filter:saturate(1.04) brightness(1.03)}.mahjong-tile.is-free:hover{transform:translate(calc(var(--layer) * -3px),calc(var(--layer) * -5px - 5px));filter:saturate(1.12) brightness(1.1);z-index:50!important}.mahjong-tile.is-selected{outline:clamp(2px,calc(5 * var(--stage-unit)),5px) solid #ffd84a;outline-offset:clamp(1px,calc(2 * var(--stage-unit)),2px);filter:saturate(1.18) brightness(1.18);box-shadow:0 0 0 clamp(2px,calc(4 * var(--stage-unit)),4px) rgba(255,248,187,.96),0 0 clamp(12px,calc(25 * var(--stage-unit)),25px) clamp(5px,calc(11 * var(--stage-unit)),11px) rgba(255,205,44,.82),calc(var(--layer) * 2px + 3px) calc(var(--layer) * 3px + 4px) 0 rgba(11,76,96,.42);z-index:60!important;animation:matchGlow 1.1s ease-in-out infinite alternate}.mahjong-tile.is-blocked{cursor:not-allowed;opacity:.82}@keyframes matchGlow{from{filter:saturate(1.12) brightness(1.1)}to{filter:saturate(1.27) brightness(1.26)}}
.control-dock{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;width:min(100%,1050px);margin:2.2rem auto 0}.mobile-control-dock{display:none}.painted-control,.round-control,.sound-control{--control-art:none;position:relative;display:block;flex:0 0 auto;padding:0;border:0;background:transparent;cursor:pointer;overflow:hidden;isolation:isolate}.painted-control::before,.round-control::before,.sound-control::before{content:"";position:absolute;inset:0;background-image:var(--control-art);background-repeat:no-repeat;background-position:center;background-size:contain;mix-blend-mode:multiply;pointer-events:none}.painted-control{width:236px;height:92px;border-radius:999px}.round-control,.sound-control{width:144px;height:180px;border-radius:42% 42% 16% 16%/37% 37% 15% 15%}.painted-control::before{inset:-44% 0;background-size:cover}.control-undo{--control-art:url("assets/mahjong/undo-button-v2.jpeg")}.control-redo{--control-art:url("assets/mahjong/redo-button-v2.jpeg")}.control-reshuffle{--control-art:url("assets/mahjong/reshuffle-button-v2.jpeg")}.control-pause{--control-art:url("assets/mahjong/pause-button-v2.jpeg")}.control-restart{--control-art:url("assets/mahjong/restart-button-v2.jpeg")}.sound-control{--control-art:url("assets/mahjong/sound-button-v2.jpeg")}.painted-control>span,.round-control>span,.sound-control>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.painted-control:disabled,.round-control:disabled{filter:none;opacity:1;cursor:not-allowed}.painted-control:not(:disabled):active,.round-control:not(:disabled):active,.sound-control:active{transform:translateY(3px) scale(.98)}.game-message{max-width:900px;margin:1.5rem auto 0;padding:1rem 1.25rem;text-align:center;background:var(--navy);color:#fff;border-left:8px solid var(--pink);font:500 .78rem var(--mono);letter-spacing:.04em}
.rules-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,460px);align-items:center;gap:clamp(1.5rem,4vw,4rem);padding:clamp(2rem,5vw,4rem) clamp(1rem,6vw,6rem);background:rgba(255,250,240,.96);border-bottom:8px solid var(--gold)}.rules-panel h2{margin:.35rem 0 .55rem;font:400 clamp(2.2rem,4vw,4rem)/1 var(--display);color:var(--navy)}.rules-panel p:last-child{margin:0;max-width:520px;font-weight:700}.rules-trigger{max-width:460px;justify-self:end}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.how-to-dialog{width:min(92vw,calc(92vh * .6604),590px);max-width:none;max-height:92vh;margin:auto;padding:0;border:0;background:transparent;overflow:visible}.how-to-dialog::backdrop{background:rgba(3,30,48,.86);backdrop-filter:blur(3px)}.how-to-sheet{position:relative;width:100%;filter:drop-shadow(0 18px 34px rgba(2,26,44,.55))}.how-to-art{display:block;width:100%;height:auto}.how-to-steps{position:absolute;inset:0;margin:0;padding:0;list-style:none;color:var(--navy);font-weight:800;font-size:clamp(.52rem,1.5vw,.88rem);line-height:1.18}.how-to-steps li{position:absolute;display:flex;align-items:center}.how-to-steps li:nth-child(1){left:20%;top:24.7%;width:39%;height:6.5%}.how-to-steps li:nth-child(2){left:20%;top:40.1%;width:39%;height:6.4%}.how-to-steps li:nth-child(3){left:20%;top:55%;width:37%;height:6.8%}.how-to-steps li:nth-child(4){left:31%;top:72.7%;width:37%;height:6.2%}.how-to-close{position:absolute;top:-1.6%;right:-4%;width:17%;aspect-ratio:1;border:0;padding:0;background:transparent;cursor:pointer;filter:drop-shadow(0 6px 5px rgba(5,50,81,.36));transition:transform .12s ease,filter .12s ease}.how-to-close img{width:100%;height:100%;object-fit:contain}.how-to-close:hover{transform:scale(1.04);filter:drop-shadow(0 7px 6px rgba(5,50,81,.38)) brightness(1.04)}.how-to-close:active{transform:translateY(2px) scale(.98)}
.game-dialog{width:min(92vw,560px);padding:2rem;border:6px solid var(--cream);border-radius:26px;background:var(--paper);color:var(--ink);box-shadow:10px 10px 0 var(--pink)}.game-dialog::backdrop{background:rgba(3,30,48,.78)}.game-dialog h2{margin:.35rem 0 .7rem;font:400 clamp(2.5rem,7vw,4.5rem)/.95 var(--display);color:var(--navy)}.game-dialog>button{padding:.9rem 1rem;border:3px solid var(--navy);border-radius:999px;background:var(--blue);color:#fff;font-weight:800;cursor:pointer;box-shadow:5px 5px 0 var(--gold)}.victory-actions{display:grid;gap:.45rem;margin-top:1.5rem}.dialog-art-button{position:relative;display:grid;width:100%;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;filter:drop-shadow(0 5px 0 rgba(16,57,95,.3));transition:transform .12s ease,filter .12s ease}.dialog-art-button img{grid-area:1/1;width:100%;height:auto;pointer-events:none}.dialog-art-button span{grid-area:1/1;z-index:1;place-self:center;padding:0 12%;font-size:clamp(.9rem,3.5vw,1.15rem);font-weight:800;text-align:center;text-shadow:0 2px 2px rgba(6,47,81,.7);pointer-events:none}.dialog-art-button:hover{filter:drop-shadow(0 6px 0 rgba(16,57,95,.32)) brightness(1.04)}.dialog-art-button:active{transform:translateY(3px);filter:drop-shadow(0 2px 0 rgba(16,57,95,.3))}.dialog-art-button:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:999px}.best-time{font:500 .72rem var(--mono);color:#8b3765}footer{display:flex;justify-content:space-between;gap:1rem;padding:2rem clamp(1rem,5vw,5rem);background:#10131e;color:#fff;font:500 .72rem var(--mono);letter-spacing:.08em}footer p{margin:0}footer a{color:#ffdb4d}
@media(max-width:900px){.garden-picker{grid-template-columns:1fr}}
@media(max-width:680px){
  .game-header{min-height:70px}.brand small{display:none}.title-panel h1{font-size:3.25rem}
  .garden-options{grid-template-columns:1fr;gap:.8rem}.garden-option{display:grid;width:100%;max-width:680px;margin-inline:auto}.garden-option img{width:100%;height:auto}.garden-option span{max-width:52%;min-width:0;font-size:clamp(1rem,4.2vw,1.25rem)}.garden-option.is-selected::after{right:11%;font-size:.48rem}
  .rules-panel{grid-template-columns:1fr;padding:1.75rem 1rem 2.2rem;text-align:center}.rules-panel p:last-child{margin-inline:auto}.rules-trigger{width:min(100%,420px);justify-self:center}
  .game-wrap{padding:1.25rem max(.75rem,env(safe-area-inset-left)) calc(2.5rem + env(safe-area-inset-bottom));overflow:hidden}
  .game-message{margin-top:1.4rem;font-size:.68rem}footer{flex-direction:column}
}
@container mahjong-stage (max-width:680px){
  .game-stage{width:min(100%,calc((var(--visual-viewport-height,100svh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem)*.563151));max-width:865px;aspect-ratio:865/1536;height:auto;min-height:0;border:0;border-radius:clamp(10px,calc(20 * var(--stage-unit)),20px);background:#b8edf4;box-shadow:0 clamp(5px,calc(9 * var(--stage-unit)),9px) 0 var(--navy),0 clamp(8px,calc(15 * var(--stage-unit)),15px) 0 var(--pink);scroll-margin-top:calc(env(safe-area-inset-top) + .75rem)}.mobile-theme-art{position:absolute;display:block;inset:9.9% 0 0;z-index:0;background-image:var(--mobile-theme-image);background-size:cover;background-position:var(--mobile-theme-position);background-repeat:no-repeat;pointer-events:none}.game-stage::before,.game-stage::after{content:"";position:absolute;left:0;width:100%;z-index:15;background-image:url("assets/mahjong/mobile-game-stage.jpeg");background-repeat:no-repeat;background-size:100% auto;pointer-events:none}.game-stage::before{display:block;top:0;height:10%;background-position:top}.game-stage::after{inset:auto 0 0;height:18%;background-position:bottom;box-shadow:none}
  .desktop-values,.desktop-history,.desktop-controls{display:none}
  .mobile-hud{display:grid;grid-template-columns:1fr 1fr;position:absolute;inset:0 0 auto;width:100%;height:9.2%;z-index:20}.mobile-hud span{position:relative;display:block;width:100%;height:100%}.mobile-hud small{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mobile-hud strong{position:absolute;top:59%;left:62%;transform:translate(-50%,-50%);color:var(--navy);font:800 clamp(.72rem,2.8vw,1rem)/1 var(--mono);text-shadow:0 1px 0 #fff}.mobile-theme-plaque{position:absolute;display:grid;place-items:center;top:10.2%;left:50%;width:43%;height:4.8%;z-index:21;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 2px 2px rgba(5,50,81,.28))}.mobile-theme-plaque img,.mobile-theme-plaque span{grid-area:1/1}.mobile-theme-plaque img{width:100%;height:100%;object-fit:fill}.mobile-theme-plaque span{z-index:1;padding:0 11%;color:#fff;font:800 clamp(.42rem,1.7vw,.68rem)/1 var(--sans);letter-spacing:.08em;text-align:center;text-transform:uppercase;text-shadow:0 1px 2px rgba(5,50,81,.85)}
  .board{left:50%;top:15.75%;width:90%;height:40%;transform:translateX(-50%)}.mahjong-tile{transform:translateY(calc(var(--layer) * -5px));box-shadow:clamp(1px,calc(3 * var(--stage-unit)),3px) calc(var(--layer) * 3px + 4px) 0 rgba(11,76,96,.42)}.mahjong-tile.is-free:hover{transform:translateY(calc(var(--layer) * -5px - 5px))}
  .desktop-control-dock{display:none}
  .mobile-control-dock{position:absolute;inset:0;z-index:30;display:block;width:100%;pointer-events:none}
  .mobile-control-dock button{position:absolute;pointer-events:auto}
  .mobile-control-dock .painted-control{display:none}
  .mobile-control-dock .round-control,.mobile-control-dock .sound-control{bottom:0;width:25%;height:17.2%;border-radius:42% 42% 12% 12%/35% 35% 12% 12%}
  .mobile-control-dock .round-control::before,.mobile-control-dock .sound-control::before{display:none}
  .mobile-control-dock .control-reshuffle{left:0}.mobile-control-dock .control-pause{left:25%}.mobile-control-dock .control-restart{left:50%}.mobile-control-dock .sound-control{left:75%}
  .mobile-control-dock .round-control:active,.mobile-control-dock .sound-control:active{background:rgba(255,235,108,.18);box-shadow:inset 0 0 0 3px rgba(255,248,196,.72);transform:none}
}
@media(max-width:480px){.mobile-hud strong{font-size:clamp(.72rem,3.5vw,.95rem)}}
@media(max-width:390px){.title-panel h1{font-size:2.8rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
.control-dock{width:min(100%,1200px)}
.painted-control,.round-control,.sound-control{isolation:auto}
.mahjong-tile.is-selected::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,222,64,.34);box-shadow:inset 0 0 18px rgba(255,250,184,.9);pointer-events:none}
.how-to-steps{font-size:clamp(.5rem,1.25vw,.78rem)}.how-to-steps li:nth-child(1){left:22.5%;width:36.5%}.how-to-steps li:nth-child(2){left:22.5%;width:36.5%}.how-to-steps li:nth-child(3){left:22.5%;width:34.5%}.how-to-steps li:nth-child(4){left:38%;width:30%}
.how-to-dialog{width:min(78vw,calc(82vh * .6604),500px);max-height:82vh}.how-to-sheet{container-type:inline-size}.how-to-steps{font-size:clamp(.64rem,2.4cqw,.86rem);line-height:1.2}.how-to-close{top:.5%;right:-1%;width:11.5%;-webkit-tap-highlight-color:transparent}.how-to-close:focus,.how-to-close:focus-visible{outline:none;box-shadow:none}
@container mahjong-stage (max-width:680px){.game-stage{background-image:none}}