/* Mahjong Wild 0.8: approved 9:16 artwork with real, independently rendered game layers. */
:root{color-scheme:dark;--mw-gold:#ffd66a;--mw-jade:#11cfb4;--tile-gap:2px;background:#160507}
html,body{margin:0;width:100%;height:100%;min-height:0;overflow:hidden;background:#160507;color:#fff4d6;font-family:Arial,sans-serif}
body{display:grid;place-items:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:radial-gradient(ellipse at center,#701510,#190507 70%)}
.scene{display:none!important}
.game-stage{position:relative;display:block;width:min(100vw,calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))*9/16),640px);height:auto;min-height:0;max-height:none;aspect-ratio:9/16;margin:0;padding:0;border:0;border-radius:0;box-shadow:0 0 70px #000a;isolation:isolate;background:#540c0e url('/assets/locked-v08/frame.webp') center/100% 100% no-repeat;overflow:hidden;container-type:inline-size}
.game-stage::before{display:none}.game-stage>*{min-width:0}.game-header{position:absolute;inset:0 0 auto;height:23.6%;display:block;border:0;background:none;box-shadow:none;padding:0;pointer-events:none}
.game-header::before,.game-header::after{display:none}.title-lockup{position:absolute;inset:0;opacity:0;pointer-events:none}.header-icon{position:absolute;top:.2%;width:12%;height:25%;padding:0;min-width:44px;min-height:44px;background:none;border:0;box-shadow:none;pointer-events:auto;border-radius:50%}
#menu-btn{left:.2%}#sound-btn{right:.2%}.header-icon svg{opacity:0}.header-icon.sound-on{box-shadow:none;border:0}.header-icon:not(.sound-on)#sound-btn::after{content:'';position:absolute;width:56%;height:3px;left:22%;top:50%;background:#fff;box-shadow:0 0 3px #000;transform:rotate(-45deg)}
.header-icon:focus-visible,.play-controls button:focus-visible{outline:2px solid white;outline-offset:-2px}
.multiplier-frame{position:absolute;left:12.1%;top:18.3%;width:75.8%;height:4.5%;margin:0;padding:0;border:0;box-shadow:none;background:none;z-index:3}
.multiplier-rail{display:grid;grid-template-columns:repeat(4,1fr);height:100%;border:0;box-shadow:none;background:none;padding:0;overflow:visible}
.multiplier-rail .mult{position:relative;display:flex;align-items:center;justify-content:center;font:bold italic 8.7cqw/.9 Georgia,serif;letter-spacing:-.04em;color:#06cfbc;background:none;border:0;box-shadow:none;text-shadow:1px 2px 0 #002c2f,-1px -1px 0 #9affef,0 3px 2px #001c22;transform:none;opacity:1}
.multiplier-rail .mult.active{color:#ffe75a;text-shadow:1px 2px #a22500,-1px -1px #ffffda,0 0 10px #ffb009,0 0 18px #ff7807;background:none;filter:none}
.multiplier-rail .mult.active::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse,#ffe96538,transparent 75%);pointer-events:none}
.reel-theatre{position:absolute;left:12.5%;top:24.2%;width:75%;height:44.25%;margin:0;padding:0;border:0;background:none;box-shadow:none;overflow:visible;z-index:2}
.reel-theatre::before,.reel-theatre::after,.theatre-deco,.reel-corner{display:none!important}.board-frame{position:absolute;inset:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0;overflow:hidden}
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;height:100%;padding:0;border:0;background:none;box-shadow:none;border-radius:0;overflow:hidden}
.reel{display:grid;grid-template-rows:repeat(5,minmax(0,1fr));gap:2px;height:100%;min-height:0;position:relative}.reel.short{height:calc(80% - .4px);margin:auto 0;grid-template-rows:repeat(4,minmax(0,1fr))}
.board .tile{position:relative;display:block;height:100%;width:100%;padding:0;min-height:0;background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important;border-radius:10%;transition:none;isolation:isolate;will-change:auto}
.board .tile::before,.board .tile::after{display:none!important}.tile-image{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 1px 1px #0008)}
.tile.marked .tile-image{filter:brightness(1.17) drop-shadow(0 0 4px #ffe57b)}.tile.enhanced .tile-image,.tile.wild .tile-image{filter:drop-shadow(0 0 3px #ffc117)}
.tile .crack{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.tile .win-border{position:absolute;inset:2%;border:2px solid #ffe983;border-radius:10%;box-shadow:0 0 6px #ffcd05,inset 0 0 5px #ffd93e;pointer-events:none}
.tile.removed .tile-image,.tile.removed .crack{opacity:0}.effects-layer{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:8}.effects-layer .shard{position:absolute;object-fit:contain;pointer-events:none;will-change:transform,opacity}.effects-layer .flash{position:absolute;border-radius:50%;background:radial-gradient(ellipse,#fffbc3,#ffc82a66 30%,transparent 70%);mix-blend-mode:screen;pointer-events:none}
.announcement{position:absolute;left:17.5%;top:69.95%;width:65%;height:4.75%;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;background:none;box-shadow:none;overflow:visible;z-index:3}.announcement-ornament{display:none}
#stage-notice{font:italic bold 3.4cqw/1.1 Georgia,serif;color:#ffe99b;text-shadow:0 2px #64120a,0 0 3px #bb3606;letter-spacing:0;text-align:center}.announcement.winning #stage-notice{font-size:5.5cqw;white-space:nowrap}
.credits-strip{position:absolute;left:3.5%;top:77.45%;width:93%;height:3.75%;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.5%;background:none;border:0;box-shadow:none;z-index:4}
.credits-strip .meter{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 0 0 17%;border:0;background:none;box-shadow:none;min-width:0;color:white;overflow:hidden;border-radius:0}.meter small{font:600 1.55cqw/1 Arial,sans-serif;color:#a4cbc1;letter-spacing:.12em;padding:0;margin:0 0 2px}.meter-value{font:600 3.8cqw/1.05 Arial,sans-serif;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 1px 2px #001714;letter-spacing:-.03em}
.play-controls{position:absolute;inset:81.5% 0 auto;height:14.3%;display:block;margin:0;padding:0;border:0;background:none;box-shadow:none;z-index:4}
.play-controls button{position:absolute;margin:0;padding:0;border:0;box-shadow:none;background:none;border-radius:50%;color:#ffdf67;min-width:40px;min-height:40px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#turbo-btn{left:3.9%;top:16%;width:15%;height:52%}#minus-btn{left:20.2%;top:18%;width:14.5%;height:50%;font-size:0}#plus-btn{left:65.8%;top:18%;width:14.5%;height:50%;font-size:0}#auto-btn{left:81.5%;top:16%;width:15%;height:52%}#spin-btn{left:34%;top:0;width:32%;height:95%}
.play-controls button>svg,.spin-ring{display:none}.secondary-control>span{position:absolute;top:80%;left:0;width:100%;text-align:center;font:700 2cqw/1 Arial,sans-serif;opacity:0}.secondary-control.active>span,.secondary-control[aria-pressed=true]>span{opacity:1;background:#4b120ae8;border-radius:4px;padding:3px 0}.secondary-control.active,#turbo-btn[aria-pressed=true]{filter:drop-shadow(0 0 5px #fff99c)}
#spin-btn .spin-label{position:absolute;bottom:4%;left:0;width:100%;text-align:center;opacity:0;font-size:2.3cqw;letter-spacing:.08em}#spin-btn.busy .spin-label{opacity:1;text-shadow:0 1px #061f1b;background:#004538b8;border-radius:8px}
.spin-disk{position:absolute;left:21%;top:18%;width:58%;aspect-ratio:1;pointer-events:none;border-radius:50%;object-fit:cover}#spin-btn.busy .spin-disk{animation:mw-spin 1s linear infinite}
.game-bottom-bar{position:absolute;left:23%;bottom:1%;width:54%;height:2.1%;display:flex;align-items:center;justify-content:space-between;padding:0 5px;border:0;border-radius:5px;background:#1a0808b8;color:#ffdda5;z-index:5}.game-bottom-bar button{font-size:1.55cqw;color:inherit;border:0;background:none;padding:3px}.game-bottom-bar .round-phase{font-size:1.7cqw;letter-spacing:.06em;color:#ffdda5}.virtual-note{position:absolute;left:0;bottom:.2%;width:100%;text-align:center;font:500 1.3cqw Arial,sans-serif;letter-spacing:.12em;color:#f5cc9d;pointer-events:none}.skip-control{display:none!important}
.overlay-banner{position:absolute;z-index:10;left:4%;right:4%;top:32%;width:auto;padding:8% 3%;border:2px solid #f9ca53;border-radius:12px;background:linear-gradient(#9a1809ef,#42070cf2);box-shadow:0 0 20px #ffc84477;text-align:center;color:#ffe69b;font:bold italic 6cqw Georgia,serif;transform:none;animation:none;pointer-events:none}.overlay-banner small{display:block;font:600 3.6cqw/1.6 Arial,sans-serif;margin-top:8px;color:white}.hidden,[hidden]{display:none!important}
.game-dialog,.auto-dialog{width:min(94vw,520px);max-height:88dvh;margin:auto;padding:0;border:1px solid #dbb263;border-radius:16px;background:#191b1beF;color:#f6ebd5;box-shadow:0 12px 70px #000c;font-family:Arial,sans-serif}.game-dialog::backdrop,.auto-dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.dialog-head{padding:15px 18px;background:#49100e;color:#ffdf8d}.dialog-head button{min-width:40px;min-height:40px}.dialog-tabs{display:flex;overflow-x:auto;padding:10px;gap:5px}.dialog-tabs button{flex:1;min-width:65px;font-size:11px;padding:10px 5px}.dialog-body{padding:12px 18px 22px;overflow-y:auto;max-height:66dvh}.info-panel{font-size:14px;line-height:1.55}.info-panel h2{font-size:17px;color:#ffdc88}.setting-row{gap:12px;align-items:center}.setting-row button{min-width:56px;min-height:42px}.volume-control{display:flex;align-items:center;gap:10px;max-width:60%}.volume-control input{width:130px;max-width:100%}.digest{font-size:11px;overflow-wrap:anywhere}.auto-dialog p,.auto-options{padding:15px 20px}.auto-options button{min-width:64px;min-height:48px}.auto-cancel{margin:0 20px 18px;width:calc(100% - 40px);min-height:42px}.small-note{color:#b8b1a4}.retry-btn{border:1px solid #ffcf64;background:#46130e;color:#ffe3a3;border-radius:8px;padding:8px 14px}.image-preload{display:none}
@keyframes mw-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.multiplier-rail .mult{filter:none;-webkit-text-stroke:0;text-shadow:1px 2px 1px #002c2f}
.multiplier-rail .mult.active{text-shadow:1px 2px #a22500,0 0 10px #ffb009}
.game-bottom-bar .footer-icon span{font-size:1.55cqw}
.credits-strip .meter-value{color:#fff}
