/* ROSA Mahjong: the board owns the available space; geometry comes from mahjong-layout.js. */
#mahjong-dialog{display:flex;flex-direction:column;height:100dvh;background-image:linear-gradient(#031c2635,#02182366),url('assets/mahjong-garden-dusk.webp');background-position:center;background-size:cover;background-attachment:fixed;color:var(--rosa-text);overflow:hidden;}
#mahjong-dialog:not([open]){display:none;}
#mahjong-dialog .mj-bar{position:relative;flex:none;min-height:64px;margin:8px 12px 0;padding:6px 16px;border:var(--rosa-gold-border);border-radius:var(--rosa-radius-md);background:var(--rosa-panel-fill);backdrop-filter:blur(6px);}
#mahjong-dialog .mj-brand img{width:145px;}
#mahjong-dialog .mj-top-nav .rosa-button{min-height:48px;font-size:13px;gap:3px;padding:4px 14px;}
#mahjong-dialog .mj-top-nav .mj-control-icon{width:24px;height:24px;}
#mahjong-dialog .mj-account strong{font-size:13px;}#mahjong-dialog .mj-account small{font-size:10px;}
#mahjong-dialog .mj-guest-emblem{width:36px;height:36px;padding:6px;}
#mahjong-dialog .mj-main{flex:1;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:9px;width:100%;max-width:none;margin:0;padding:8px 12px max(8px,env(safe-area-inset-bottom));}
#mahjong-dialog .mj-heading{margin:0;min-height:0;}
#mahjong-dialog .mj-title-plaque{display:flex;flex-direction:column;justify-content:center;min-height:88px;width:min(360px,100%);max-width:none;margin:0 auto;padding:12px 50px;border:0;border-radius:0;background:transparent url('assets/mahjong-title-sakura.webp') center/100% 100% no-repeat;box-shadow:none;}
#mahjong-dialog .mj-title-plaque::before,#mahjong-dialog .mj-title-plaque::after,#mahjong-dialog .mj-title-plaque>.mj-ornament,#mahjong-dialog .mj-eyebrow{display:none;}
#mahjong-dialog #mahjong-title{font:700 38px/1.05 var(--rosa-font-display);margin:0;letter-spacing:.5px;background-image:linear-gradient(var(--rosa-ivory),var(--rosa-gold-light) 25%,var(--rosa-gold) 60%,var(--rosa-gold-light) 73%,var(--rosa-gold-warm));filter:drop-shadow(0 1px #fff1bf) drop-shadow(0 3px #84531b) drop-shadow(0 5px 2px #000b);}
#mahjong-dialog .mj-tagline{margin:4px 0 0;font:600 9px/1.4 var(--rosa-font-interface);letter-spacing:.6px;color:var(--rosa-text-muted);}
#mahjong-dialog .mj-workspace{display:grid;grid-template-columns:185px minmax(0,1fr) 112px;gap:12px;min-height:0;align-items:stretch;}
#mahjong-dialog .mj-sidebar,#mahjong-dialog .mj-side-actions{align-self:stretch;position:relative;min-height:0;border:var(--rosa-gold-border);border-radius:var(--rosa-radius-md);background:var(--rosa-panel-fill);box-shadow:inset 0 1px #ffe2a020,var(--rosa-shadow);backdrop-filter:blur(5px);}
#mahjong-dialog .mj-sidebar{padding:12px 10px;overflow:auto;scrollbar-width:thin;}
#mahjong-dialog .mj-mode-label{display:block;margin:0;padding:0 5px 8px;font-size:10px;letter-spacing:1px;color:var(--rosa-text-muted);}
#mahjong-dialog .mj-modes{display:flex;flex-direction:column;gap:6px;}
#mahjong-dialog .mj-modes .rosa-button{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 7px;font-size:13px;text-align:left;border:1px solid transparent;border-radius:var(--rosa-radius-sm);background:none;box-shadow:none;}
#mahjong-dialog .mj-modes button>span:first-child{width:25px;height:25px;flex:none;}
#mahjong-dialog .mj-modes button[aria-pressed='true']{border-color:var(--rosa-gold);background:linear-gradient(120deg,#d7a64b30,#082e3550);box-shadow:inset 0 1px #ffe2a040;color:var(--rosa-gold-light);}
#mahjong-dialog .mj-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:11px 0 0;}
#mahjong-dialog .mj-stats>div{display:flex;align-items:center;flex-direction:column;gap:5px;min-width:0;padding:9px 4px;border:1px solid #d7a64b35;border-radius:var(--rosa-radius-sm);background:#06192388;}
#mahjong-dialog .mj-stats strong{font:700 24px/1 var(--rosa-font-numbers);color:var(--rosa-gold-light);}
#mahjong-dialog .mj-stats span{font-size:11px;line-height:1.3;text-align:center;color:var(--rosa-text-muted);}
#mahjong-dialog .mj-daily-date{font-size:11px;line-height:1.5;margin:8px 0 0;overflow-wrap:anywhere;}
#mahjong-dialog .mj-dashboard{display:grid;grid-template-columns:1fr;gap:6px;margin:8px 0 0;}
#mahjong-dialog .mj-dashboard>div{min-width:0;min-height:0;padding:9px;border:1px solid #d7a64b35;border-radius:var(--rosa-radius-sm);background:#06192388;box-shadow:none;}
#mahjong-dialog .mj-dashboard .mj-metric{display:none;}
#mahjong-dialog .mj-dashboard .mj-progress{display:block;}
#mahjong-dialog .mj-progress>div{display:flex;justify-content:space-between;gap:5px;margin-bottom:7px;}
#mahjong-dialog .mj-dashboard span{font-size:11px;color:var(--rosa-text-muted);}
#mahjong-dialog .mj-dashboard strong{font:600 17px/1.2 var(--rosa-font-numbers);color:var(--rosa-text);margin:0;}
#mahjong-dialog .mj-dashboard .mj-clock{display:flex;align-items:center;justify-content:space-between;width:auto;gap:8px;}
#mahjong-dialog .mj-dashboard progress{width:100%;height:7px;}
#mahjong-dialog .mj-center{position:relative;display:flex;flex-direction:column;gap:5px;height:100%;min-width:0;min-height:0;}
#mahjong-dialog .mj-board-tools{display:none;}
#mahjong-dialog .mj-table{flex:1;min-width:0;min-height:0;width:100%;max-width:none;position:relative;padding:14px;border:1px solid var(--rosa-gold);border-radius:var(--rosa-radius-md);transform:none;overflow:hidden;background:radial-gradient(ellipse at 48% 35%,#09634a,#034536 60%,#012b25);box-shadow:inset 0 0 0 3px #061923,inset 0 0 0 4px #d7a64b88,inset 0 0 35px #001b16b3,0 5px 14px #0005;}
#mahjong-dialog .mj-table::before{inset:-2px;width:auto;height:auto;border:0 solid transparent;border-image:url('assets/rosa-sculpted-frame.webp') 180 / 48px / 0 stretch;filter:drop-shadow(0 2px 1px #201103);z-index:3;}
#mahjong-dialog .mj-table::after{display:none;}
#mahjong-dialog .mj-table-inlay{inset:6px;border:0;border-radius:12px;opacity:.6;background:repeating-linear-gradient(38deg,#c8efcf05 0 1px,transparent 1px 4px);}
#mahjong-dialog .mj-table-inlay::before,#mahjong-dialog .mj-table-inlay::after{display:none;}
#mahjong-dialog .mj-board{position:relative;width:100%;height:100%;max-width:none;min-width:0;aspect-ratio:auto;margin:0;container-type:normal;}
/* Position, width and height are computed from live layout bounds; never percentage-scaled. */
#mahjong-dialog .mj-tile{position:absolute;margin:0;padding:0;aspect-ratio:auto;left:0;top:0;width:1px;height:1px;border:0;border-radius:13%;background:transparent;box-shadow:none;isolation:isolate;filter:drop-shadow(1px 3px 2px #00110caa);transition:translate var(--rosa-duration),filter var(--rosa-duration);}
#mahjong-dialog .mj-tile::before{content:'';position:absolute;inset:-3% -5% -22% -4%;background:url('assets/mahjong-ivory-sculpted.webp') center/100% 100% no-repeat;pointer-events:none;z-index:-1;filter:drop-shadow(0 1px 0 #9a7b3f) drop-shadow(0 2px 0 #163c2b);}
#mahjong-dialog .mj-tile::after{display:none;}
#mahjong-dialog .mj-tile-face{position:absolute;inset:2% 9% 5% 3%;background:none;box-shadow:none;border-radius:12%;overflow:hidden;pointer-events:none;}
#mahjong-dialog .mj-tile-face::before{display:none;}
#mahjong-dialog .mj-tile-face::after{background:linear-gradient(125deg,#fff1,transparent 24% 80%,#aa7b1c08);}
#mahjong-dialog .mj-tile-face svg{display:block;width:97%;height:97%;margin:1% auto;filter:none;pointer-events:none;}
#mahjong-dialog .mj-tile:not(.is-free){filter:brightness(.91) saturate(.94) drop-shadow(1px 3px 2px #00110caa);}
#mahjong-dialog .mj-tile.is-free{filter:brightness(1.04) drop-shadow(1px 3px 2px #00110caa);}
#mahjong-dialog .mj-tile.is-selected{translate:0 -4px;outline:2px solid var(--rosa-crystal);outline-offset:2px;filter:brightness(1.12) drop-shadow(1px 6px 4px #00110caa);}
#mahjong-dialog .mj-tile.is-hint{outline:2px solid var(--rosa-gold-light);outline-offset:2px;animation:mj-fit-hint 1.3s ease-in-out infinite;}
#mahjong-dialog .mj-tile.is-matching{z-index:20000!important;pointer-events:none;animation:mj-fit-match .3s ease-out forwards;}
#mahjong-dialog .mj-message{flex:none;min-height:0;margin:0;font-size:12px;line-height:1.35;text-align:center;color:var(--rosa-text);}
#mahjong-dialog .mj-message:empty{display:none;}
#mahjong-dialog .mj-side-actions{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:12px;padding:12px 8px;}
#mahjong-dialog .mj-side-actions .rosa-button{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:8px;width:100%;min-height:88px;margin:0;padding:10px 4px;border:var(--rosa-gold-border);border-radius:var(--rosa-radius-sm);background:var(--rosa-panel-fill);color:var(--rosa-text);font-size:13px;box-shadow:inset 0 1px #ffe2a020;}
#mahjong-dialog .mj-side-actions .mj-control-icon{width:34px;height:34px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;}
#mahjong-dialog .mj-side-actions .mj-icon-svg{width:100%;height:100%;}
#mahjong-dialog .mj-bottom{display:block;padding:0;margin:0;border:0;background:none;box-shadow:none;}
#mahjong-dialog .mj-bottom>.mj-ornament{display:none;}
#mahjong-dialog .mj-controls{display:grid;grid-template-columns:1.15fr repeat(4,minmax(0,1fr)) 48px;gap:8px;width:100%;margin:0;}
#mahjong-dialog .mj-controls .rosa-button{display:flex;align-items:center;justify-content:center;flex-direction:row;min-width:0;min-height:48px;padding:8px 10px;gap:10px;font-size:13px;border-radius:var(--rosa-radius-sm);background:var(--rosa-panel-fill);}
#mahjong-dialog .mj-controls [data-mj='new']{background:var(--rosa-primary-fill);color:var(--rosa-bg);border-color:var(--rosa-gold-light);}
#mahjong-dialog .mj-controls .mj-control-icon{width:25px;height:25px;flex:none;}
#mahjong-dialog .mj-controls [data-mj='zoom'] [data-button-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
#mahjong-dialog .mj-footer-note{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:17px;}
#mahjong-dialog .mj-save-state{margin:0;font-size:11px;color:var(--rosa-text-muted);line-height:1.3;}
#mahjong-dialog .mj-rules{position:relative;margin:0;font-size:12px;color:var(--rosa-gold-light);}
#mahjong-dialog .mj-rules summary{cursor:pointer;white-space:nowrap;}
#mahjong-dialog .mj-rules p{position:absolute;right:0;bottom:25px;width:min(430px,85vw);margin:0;padding:18px;border:var(--rosa-gold-border);border-radius:var(--rosa-radius-md);background:var(--rosa-bg);color:var(--rosa-text);font-size:13px;line-height:1.6;box-shadow:var(--rosa-shadow);z-index:300;}
#mahjong-dialog.mj-zoom .mj-table{overflow:auto;}
#mahjong-dialog.mj-zoom .mj-board{max-width:none;min-width:0;}
#mahjong-dialog .mj-popover-card{background:var(--rosa-panel-fill);border:var(--rosa-gold-border);border-radius:var(--rosa-radius-lg);}
#mahjong-dialog .mj-preview-piece{position:relative;background:none;border:0;box-shadow:none;isolation:isolate;}
#mahjong-dialog .mj-preview-piece::before{content:'';position:absolute;inset:-3% -5% -20% -4%;background:url('assets/mahjong-ivory-sculpted.webp') center/100% 100% no-repeat;z-index:-1;}
#mahjong-dialog .mj-preview-piece .mj-tile-face{inset:2% 9% 5% 3%;}
#mahjong-dialog .mj-theme-preview{width:68px;aspect-ratio:60/82;border:0;border-radius:0;background:transparent url('assets/mahjong-ivory-sculpted.webp') center/100% 100% no-repeat;box-shadow:none;padding:5% 8% 12% 5%;}
#mahjong-dialog .mj-theme-preview svg{width:100%;height:100%;margin:0;}
#mahjong-dialog[data-theme='sapphire'] .mj-table{background:radial-gradient(ellipse,#174d69,#082e48);}
#mahjong-dialog[data-theme='night']{background-image:linear-gradient(#03132cbd,#020d20e6),url('assets/mahjong-garden-dusk.webp');}
#mahjong-dialog[data-theme='night'] .mj-table{background:radial-gradient(ellipse,#293d5d,#0b1c32);}
@keyframes mj-fit-hint{50%{outline-color:var(--rosa-gold);filter:brightness(1.18);}}
@keyframes mj-fit-match{to{translate:0 -16px;scale:.9;opacity:0;}}
@media(hover:hover){#mahjong-dialog .mj-tile.is-free:hover{translate:0 -3px;filter:brightness(1.1) drop-shadow(1px 6px 3px #00110c99);}}
@media(max-width:1100px){#mahjong-dialog .mj-workspace{grid-template-columns:160px minmax(0,1fr) 96px;gap:8px;}#mahjong-dialog .mj-account{display:none;}#mahjong-dialog .mj-modes .rosa-button{font-size:12px;gap:7px;}#mahjong-dialog .mj-controls .rosa-button{font-size:12px;gap:7px;}}
@media(min-width:1001px){#mahjong-dialog .mj-top-nav{order:0;flex-basis:auto;}#mahjong-dialog .mj-bar{flex-wrap:nowrap;}#mahjong-dialog .mj-top-nav .rosa-button{min-width:72px;}#mahjong-dialog .mj-board-tools{display:none;}}
@media(max-width:1000px){
 #mahjong-dialog{overflow:auto;background-image:linear-gradient(#031c2644,#02182377),url('assets/mahjong-garden-dusk-mobile.webp');}
 #mahjong-dialog .mj-bar{flex-wrap:wrap;margin:0;padding:6px 10px;border-radius:0;gap:5px;min-height:0;}
 #mahjong-dialog .mj-brand img{width:108px;}#mahjong-dialog .mj-header-actions .rosa-button{min-width:44px;min-height:44px;}
 #mahjong-dialog .mj-top-nav{order:3;flex-basis:100%;}#mahjong-dialog .mj-top-nav .rosa-button{flex:1;min-height:44px;flex-direction:row;padding:5px;gap:6px;font-size:12px;}
 #mahjong-dialog .mj-top-nav .mj-control-icon{width:20px;height:20px;}
 #mahjong-dialog .mj-main{flex:none;display:flex;flex-direction:column;gap:10px;padding:9px 7px max(12px,env(safe-area-inset-bottom));}
 #mahjong-dialog .mj-title-plaque{min-height:70px;width:280px;max-width:100%;padding:4px 40px;}#mahjong-dialog #mahjong-title{font-size:27px;}#mahjong-dialog .mj-tagline{display:none;}
 #mahjong-dialog .mj-workspace{display:flex;flex-direction:column;gap:10px;min-height:0;}
 #mahjong-dialog .mj-center{order:1;height:clamp(280px,46dvh,490px);flex:none;gap:5px;}
 #mahjong-dialog .mj-board-tools{display:flex;justify-content:flex-end;flex:none;margin:0;}
 #mahjong-dialog .mj-board-tools .rosa-button{display:flex;gap:7px;align-items:center;min-height:44px;padding:6px 12px;font-size:12px;}
 #mahjong-dialog .mj-board-tools .mj-control-icon{width:22px;height:22px;}
 #mahjong-dialog .mj-table{padding:7px;border-radius:var(--rosa-radius-md);}
 #mahjong-dialog .mj-side-actions{order:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:7px;gap:7px;}
 #mahjong-dialog .mj-side-actions .rosa-button{min-height:59px;font-size:12px;gap:5px;padding:6px;}
 #mahjong-dialog .mj-side-actions .mj-control-icon{width:24px;height:24px;}
 #mahjong-dialog .mj-sidebar{order:3;flex:none;padding:8px;overflow:visible;}
 #mahjong-dialog .mj-mode-label{display:none;}#mahjong-dialog .mj-modes{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
 #mahjong-dialog .mj-modes .rosa-button{min-height:44px;font-size:12px;justify-content:center;}
 #mahjong-dialog .mj-stats{margin-top:6px;}#mahjong-dialog .mj-stats>div{flex-direction:row;justify-content:center;gap:8px;padding:7px;}
 #mahjong-dialog .mj-stats strong{font-size:22px;}#mahjong-dialog .mj-stats span{font-size:11px;}
 #mahjong-dialog .mj-dashboard{grid-template-columns:1fr 1fr;gap:5px;margin-top:5px;}#mahjong-dialog .mj-dashboard .mj-clock{justify-content:center;flex-direction:column;gap:4px;}
 #mahjong-dialog .mj-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}#mahjong-dialog .mj-controls .rosa-button{flex-direction:column;gap:5px;min-height:59px;padding:7px 3px;font-size:11px;}
 #mahjong-dialog .mj-controls [data-mj='zoom']{display:none;}#mahjong-dialog .mj-footer-note{gap:8px;}#mahjong-dialog .mj-save-state{font-size:10px;}
}
@media(prefers-reduced-motion:reduce){#mahjong-dialog .mj-tile.is-selected,#mahjong-dialog .mj-tile.is-free:hover{translate:none;}#mahjong-dialog .mj-tile.is-hint{animation:none;}}
#mahjong-dialog.mj-no-motion .mj-tile.is-selected,#mahjong-dialog.mj-no-motion .mj-tile.is-free:hover{translate:none;}
#mahjong-dialog .mj-sidebar>.mj-ornament{display:none;}
#mahjong-dialog .mj-controls [data-mj='new'] .mj-icon-svg{filter:brightness(.2);}
@media(max-width:1000px){#mahjong-dialog .mj-center{height:auto;}#mahjong-dialog .mj-table{flex:none;min-height:180px;}}
@media(max-width:1000px){#mahjong-dialog .mj-workspace{display:contents;}#mahjong-dialog .mj-heading{order:0;}#mahjong-dialog .mj-center{order:1;}#mahjong-dialog .mj-side-actions{order:2;}#mahjong-dialog .mj-bottom{order:3;}#mahjong-dialog .mj-sidebar{order:4;}#mahjong-dialog .mj-footer-note{order:5;}}

#mahjong-dialog .mj-pan-hint{display:none;font-size:11px;color:var(--rosa-text-muted);align-self:center;}
@media(max-width:1000px){#mahjong-dialog.mj-zoom .mj-pan-hint{display:block;}#mahjong-dialog.mj-zoom .mj-board-tools{justify-content:space-between;gap:9px;}}
/* Latest approved ROSA reference: carved gold, warm garden, matched panel families. */
#mahjong-dialog .mj-sidebar{display:flex;flex-direction:column;gap:10px;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;}
#mahjong-dialog .mj-mode-zone,#mahjong-dialog .mj-stats-zone{position:relative;padding:12px 10px;border:var(--rosa-gold-border);border-radius:var(--rosa-radius-md);background:linear-gradient(125deg,#073831f5,#031f29f7);box-shadow:inset 0 0 0 3px #d7a64b18,var(--rosa-shadow);}
#mahjong-dialog .mj-mode-label,#mahjong-dialog #mj-stats-heading{font:600 13px/1.3 var(--rosa-font-interface);letter-spacing:.4px;color:var(--rosa-gold-light);margin:0;padding:0 3px 9px;border-bottom:1px solid #d7a64b44;}
#mahjong-dialog .mj-modes{margin-top:7px;}
#mahjong-dialog .mj-modes button[aria-pressed='true']{background:var(--rosa-primary-fill);border-color:var(--rosa-gold-light);color:var(--rosa-bg);box-shadow:inset 0 1px #fff9,0 0 12px #d7a64b44;}
#mahjong-dialog .mj-modes button[aria-pressed='true'] .mj-icon-svg{filter:brightness(.25);}
#mahjong-dialog .mj-side-actions{background:linear-gradient(125deg,#073831f5,#031f29f7);box-shadow:inset 0 0 0 3px #d7a64b18,var(--rosa-shadow);}
#mahjong-dialog .mj-side-actions .rosa-button{border:0;background:none;box-shadow:none;min-height:108px;gap:7px;}
#mahjong-dialog .mj-side-actions .mj-control-icon{display:grid;place-items:center;width:65px;height:65px;padding:14px;border:1px solid var(--rosa-gold);border-radius:50%;background:radial-gradient(ellipse at 30% 18%,#465a3f,#032d30 56%,#061923);box-shadow:inset 0 0 0 3px #d7a64b18,0 4px 10px #0007;}
#mahjong-dialog .mj-ornament{position:absolute;inset:2px;display:block;border:0 solid transparent;border-image:url('assets/rosa-sculpted-frame.webp') 180 / 30px / 0 stretch;background:none;box-shadow:none;pointer-events:none;opacity:1;z-index:1;}
#mahjong-dialog .mj-title-plaque>.mj-ornament{display:none;}
#mahjong-dialog .mj-bottom{position:relative;padding:4px;border:var(--rosa-gold-border);border-radius:var(--rosa-radius-md);background:var(--rosa-panel-fill);}
#mahjong-dialog .mj-bottom>.mj-ornament{display:block;border-image-width:25px;opacity:1;}
#mahjong-dialog .mj-table{box-shadow:inset 0 0 0 3px #061923,inset 0 0 0 4px #d7a64b99,inset 0 0 35px #001b16b3,0 3px 0 #785623,0 5px 0 #d7a64b80,0 7px 14px #0008;}
@media(max-width:1000px){#mahjong-dialog .mj-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:8px;}#mahjong-dialog .mj-mode-zone,#mahjong-dialog .mj-stats-zone{padding:10px;}#mahjong-dialog .mj-side-actions .rosa-button{min-height:65px;}#mahjong-dialog .mj-side-actions .mj-control-icon{width:32px;height:32px;border:0;background:none;box-shadow:none;padding:2px;}#mahjong-dialog .mj-mode-label{display:block;}#mahjong-dialog .mj-modes{grid-template-columns:1fr;}#mahjong-dialog .mj-dashboard{grid-template-columns:1fr;}#mahjong-dialog .mj-ornament{border-image-width:24px;}}
@media(max-width:480px){#mahjong-dialog .mj-sidebar{grid-template-columns:1fr;}#mahjong-dialog .mj-modes{grid-template-columns:1fr 1fr;}}

/* Sculpted material pass: real raster relief, shared palette and live controls. */
#mahjong-dialog .mj-bar,#mahjong-dialog .mj-mode-zone,#mahjong-dialog .mj-stats-zone,#mahjong-dialog .mj-side-actions,#mahjong-dialog .mj-bottom,#mahjong-dialog .mj-popover-card{background:radial-gradient(ellipse at 30% 0,#0a4a3dba,transparent 65%),linear-gradient(120deg,#021c24f5,#012b2bf5 50%,#031922fa);box-shadow:inset 0 2px 2px #ffe2a04d,inset 0 -3px 7px #000b,0 3px 0 #63451c,0 6px 13px #0009;}
#mahjong-dialog .mj-mode-zone,#mahjong-dialog .mj-stats-zone{padding:16px 12px;}
#mahjong-dialog .mj-modes .rosa-button{min-height:52px;border-bottom:1px solid #d7a64b33;background:linear-gradient(110deg,#042d3030,#031b2566);text-shadow:0 2px 2px #000;}
#mahjong-dialog .mj-modes button[aria-pressed='true']{background:radial-gradient(ellipse at 50% 0,#fff4c9aa,transparent 65%),linear-gradient(#ffe6a5,#e5ad45 45%,#bb7c26 90%,#f8d57c);border-color:#ffe2a0;box-shadow:inset 0 2px 1px #fff6d2,inset 0 -3px 2px #986121,0 3px 0 #624018,0 0 13px #e5ad4566;text-shadow:0 1px #ffe2a0;}
#mahjong-dialog .mj-modes button[aria-pressed='true'] .mj-icon-svg{filter:drop-shadow(0 1px #775019);}
#mahjong-dialog .mj-icon-svg{filter:drop-shadow(0 1px 0 #80551d) drop-shadow(0 2px 1px #0009);}
#mahjong-dialog .mj-side-actions .mj-control-icon{border:2px solid #f1ca78;background:radial-gradient(ellipse at 28% 15%,#797454,#0a3d35 40%,#001c23 75%);box-shadow:inset 0 2px 1px #fff5bf,inset 0 0 0 4px #8a672c, inset 0 0 0 6px #0c403d,0 3px 0 #705027,0 6px 10px #0008;}
#mahjong-dialog .mj-side-actions .mj-control-icon svg{filter:drop-shadow(0 2px #8b5d25) drop-shadow(0 3px 2px #000);}
#mahjong-dialog .mj-controls .rosa-button{border:1px solid #e4bb6c;background:linear-gradient(130deg,#064037,#031d26 65%);box-shadow:inset 0 2px 1px #ffe2a066,inset 0 -3px 3px #0008,0 2px 0 #78531f;}
#mahjong-dialog .mj-controls [data-mj='new']{background:radial-gradient(ellipse at top,#fff1c6aa,transparent 70%),linear-gradient(#ffe7ac,#efbb59 45%,#c5892e 92%,#ffdc8b);box-shadow:inset 0 2px 1px #fff8df,inset 0 -3px 2px #a4681d,0 2px 0 #624018,0 0 12px #d7a64b44;}
#mahjong-dialog .mj-tile-face svg{width:100%;height:100%;filter:drop-shadow(0 .35px .1px #69401b66);}
#mahjong-dialog .mj-tile::before{filter:drop-shadow(1px 3px 1px #00170de0);}
#mahjong-dialog .mj-table-inlay{inset:9px;border:1px solid #dfbd5d66;background:repeating-linear-gradient(38deg,#c8efcf07 0 1px,transparent 1px 3px);box-shadow:inset 0 0 24px #001c17;}
#mahjong-dialog .mj-bottom>.mj-ornament{border-image-width:22px;}
@media(max-width:1000px){#mahjong-dialog .mj-table::before{border-image-width:32px;}#mahjong-dialog .mj-side-actions .mj-control-icon{width:38px;height:38px;padding:7px;border-width:1px;box-shadow:inset 0 1px #fff4b7,inset 0 0 0 2px #8a672c,0 2px 2px #0009;}#mahjong-dialog .mj-mode-zone,#mahjong-dialog .mj-stats-zone{padding:13px 10px;}}

/* Reference composition: sidebar starts beside the title, table and dock form one centre. */
@media(min-width:1001px){
 #mahjong-dialog .mj-bar{min-height:86px;margin:12px 22px 0;padding:0 18px 0 0;gap:20px;border-radius:18px;}
 #mahjong-dialog .mj-brand{position:relative;display:grid;place-items:center;align-self:stretch;width:210px;flex:none;padding:8px 18px;border-right:2px solid var(--rosa-gold);border-radius:16px;background:radial-gradient(ellipse at center,#15554888,#001720);box-shadow:inset 0 0 0 4px #b4883633,0 4px 12px #0009;}
 #mahjong-dialog .mj-brand img{width:178px;max-height:72px;object-fit:contain;}
 #mahjong-dialog .mj-top-nav{justify-content:flex-start;flex:1;gap:0;}
 #mahjong-dialog .mj-top-nav .rosa-button{min-width:110px;min-height:82px;padding:8px 18px;font-size:14px;border-radius:0;border-right:1px solid #b3873029;}
 #mahjong-dialog .mj-top-nav .mj-control-icon{width:32px;height:32px;}
 #mahjong-dialog .mj-top-nav .rosa-current{background:radial-gradient(ellipse at bottom,#e3aa3e80,transparent 75%);box-shadow:inset 0 -3px #ffdf83,0 8px 14px -10px #ffd573;}
 #mahjong-dialog .mj-main{display:grid;grid-template-columns:clamp(195px,17vw,270px) minmax(0,1fr) clamp(112px,9vw,150px);grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px 18px;padding:16px 22px 10px;}
 #mahjong-dialog .mj-workspace{display:contents;}
 #mahjong-dialog .mj-heading{grid-column:2;grid-row:1;align-self:center;}
 #mahjong-dialog .mj-sidebar{grid-column:1;grid-row:1 / 4;align-self:stretch;justify-content:space-between;gap:14px;}
 #mahjong-dialog .mj-center{grid-column:2;grid-row:2;}
 #mahjong-dialog .mj-side-actions{grid-column:3;grid-row:2;align-self:center;justify-content:space-evenly;padding:20px 8px;gap:16px;}
 #mahjong-dialog .mj-bottom{grid-column:2 / 4;grid-row:3;padding:9px 10px;border-radius:18px;}
 #mahjong-dialog .mj-footer-note{grid-column:1 / 4;grid-row:4;}
 #mahjong-dialog .mj-title-plaque{width:min(540px,100%);min-height:105px;padding:14px 70px;}
 #mahjong-dialog #mahjong-title{font-size:clamp(38px,4.1vw,61px);letter-spacing:1px;}
 #mahjong-dialog .mj-tagline{font-size:10px;letter-spacing:1px;}
 #mahjong-dialog .mj-mode-zone{padding:22px 16px 19px;}
 #mahjong-dialog .mj-stats-zone{padding:20px 16px;}
 #mahjong-dialog .mj-modes{gap:8px;margin-top:14px;}
 #mahjong-dialog .mj-modes .rosa-button{min-height:72px;padding:12px 8px;gap:13px;font-size:15px;}
 #mahjong-dialog .mj-modes button>span:first-child{width:38px;height:38px;}
 #mahjong-dialog .mj-mode-label,#mahjong-dialog #mj-stats-heading{font-size:16px;text-align:center;padding-bottom:12px;text-transform:none;}
 #mahjong-dialog .mj-side-actions .rosa-button{min-height:110px;font-size:14px;gap:10px;}
 #mahjong-dialog .mj-side-actions .mj-control-icon{width:85px;height:85px;padding:20px;}
 #mahjong-dialog .mj-controls .rosa-button{min-height:60px;font-size:14px;padding:9px 7px;gap:9px;}
 #mahjong-dialog .mj-controls .mj-control-icon{width:31px;height:31px;}
 #mahjong-dialog .mj-dashboard .mj-clock{padding:14px 8px;}
 #mahjong-dialog .mj-dashboard strong{font-size:21px;}
 #mahjong-dialog .mj-ornament{border-image-width:44px;}
 #mahjong-dialog .mj-bottom>.mj-ornament{border-image-width:28px;}
}
#mahjong-dialog .mj-mode-copy{display:flex;min-width:0;flex-direction:column;gap:4px;}
#mahjong-dialog .mj-mode-copy small{font:400 11px/1.35 var(--rosa-font-interface);color:var(--rosa-text-muted);text-transform:none;letter-spacing:0;}
#mahjong-dialog .mj-modes [aria-pressed='true'] small{color:#473315;text-shadow:none;}
#mahjong-dialog .mj-table{border:7px solid #b77e29;border-radius:24px;padding:13px;box-shadow:0 0 0 1px #ffe6a0,inset 0 0 0 2px #ffe3a3,inset 0 0 0 5px #3d3319,inset 0 0 40px #00150fe0,0 5px 0 #5c3614,0 8px 0 #e5b354,0 15px 22px #000a;}
#mahjong-dialog .mj-table::before{inset:-7px;border-image-width:76px;filter:drop-shadow(0 2px 1px #342006);}
#mahjong-dialog .mj-table-inlay{inset:6px;border:2px solid #d9b65a55;border-radius:16px;background:repeating-linear-gradient(38deg,#9adb9b06 0 1px,transparent 1px 3px);}
/* The old garden stylesheet used !important fills. Override them explicitly here. */
#mahjong-dialog .mj-controls .rosa-button{background:radial-gradient(ellipse at top,#14614b77,transparent 70%),linear-gradient(125deg,#063b35,#00171e 80%)!important;box-shadow:inset 0 2px 1px #ffde8b99,inset 0 -3px 4px #0009,0 3px 0 #674419;}
#mahjong-dialog .mj-controls [data-mj='new']{background:linear-gradient(#fff2bf,#f4c76c 40%,#d89935 88%,#ffdf92)!important;box-shadow:inset 0 2px 1px #fff9dc,inset 0 -3px 2px #a26820,0 3px 0 #765022,0 0 16px #dfa94755;}
#mahjong-dialog .mj-side-actions .mj-control-icon{background:radial-gradient(ellipse at 28% 12%,#6c7250,#05362f 43%,#00171b 80%);box-shadow:inset 0 2px 1px #fff6bd,inset 0 0 0 4px #966c29,inset 0 0 0 6px #072e29,0 4px 0 #70461e,0 7px 12px #0009;}
@media(min-width:1001px) and (max-height:820px){
 #mahjong-dialog .mj-bar{min-height:74px;margin-top:8px;}
 #mahjong-dialog .mj-top-nav .rosa-button{min-height:72px;}
 #mahjong-dialog .mj-main{padding-top:12px;gap:8px 13px;grid-template-columns:190px minmax(0,1fr) 110px;}
 #mahjong-dialog .mj-title-plaque{min-height:82px;width:440px;max-width:100%;}
 #mahjong-dialog #mahjong-title{font-size:44px;}
 #mahjong-dialog .mj-modes .rosa-button{min-height:58px;font-size:13px;gap:8px;}
 #mahjong-dialog .mj-modes button>span:first-child{width:31px;height:31px;}
 #mahjong-dialog .mj-mode-zone,#mahjong-dialog .mj-stats-zone{padding:16px 12px;}
 #mahjong-dialog .mj-mode-copy small{font-size:10px;}
 #mahjong-dialog .mj-stats>div{padding:7px 4px;}
 #mahjong-dialog .mj-dashboard>div{padding:7px;}
 #mahjong-dialog .mj-side-actions .mj-control-icon{width:70px;height:70px;padding:16px;}
 #mahjong-dialog .mj-side-actions .rosa-button{min-height:91px;font-size:12px;}
 #mahjong-dialog .mj-controls .rosa-button{min-height:52px;font-size:12px;}
}
@media(max-width:1000px){
 #mahjong-dialog .mj-mode-copy small{font-size:10px;}
 #mahjong-dialog .mj-table{border-width:5px;padding:9px;}
 #mahjong-dialog .mj-table::before{inset:-5px;border-image-width:43px;}
 #mahjong-dialog .mj-modes .rosa-button{text-align:left;justify-content:flex-start;}
 #mahjong-dialog .mj-side-actions .mj-control-icon{box-shadow:inset 0 1px #fff4b7,inset 0 0 0 2px #8a672c,0 2px 2px #0009;}
}
@media(min-width:1001px) and (max-height:820px){
 #mahjong-dialog .mj-sidebar{gap:9px;}
 #mahjong-dialog .mj-mode-zone,#mahjong-dialog .mj-stats-zone{padding:13px 11px;}
 #mahjong-dialog .mj-modes{gap:4px;margin-top:8px;}
 #mahjong-dialog .mj-modes .rosa-button{min-height:50px;padding:6px;gap:8px;font-size:12px;}
 #mahjong-dialog .mj-mode-copy{gap:2px;}
 #mahjong-dialog .mj-mode-copy small{font-size:9px;line-height:1.25;}
 #mahjong-dialog .mj-mode-label,#mahjong-dialog #mj-stats-heading{font-size:14px;padding-bottom:8px;}
 #mahjong-dialog .mj-stats{gap:4px;margin-top:8px;}
 #mahjong-dialog .mj-stats>div{padding:6px 2px;gap:3px;}
 #mahjong-dialog .mj-stats strong{font-size:22px;}
 #mahjong-dialog .mj-stats span{font-size:10px;}
 #mahjong-dialog .mj-dashboard{gap:4px;margin-top:5px;}
 #mahjong-dialog .mj-dashboard>div,#mahjong-dialog .mj-dashboard .mj-clock{padding:7px;}
 #mahjong-dialog .mj-dashboard strong{font-size:17px;}
 #mahjong-dialog .mj-dashboard span{font-size:10px;}
}

/* Approved UI kit: explicit default / hover / pressed / disabled / keyboard states. */
#mahjong-dialog .mj-controls .rosa-button:disabled,#mahjong-dialog .mj-panel-body .rosa-button:disabled{background:linear-gradient(#535957,#303635)!important;border-color:#7c837e;color:#b2b6b0!important;box-shadow:inset 0 1px #ffffff24;opacity:.65;cursor:not-allowed;}
#mahjong-dialog .mj-side-actions .rosa-button:disabled{opacity:.55;cursor:not-allowed;}
#mahjong-dialog .mj-side-actions .rosa-button:disabled .mj-control-icon{background:linear-gradient(#35433d,#172923);border-color:#737b6b;box-shadow:inset 0 0 0 3px #465447;filter:grayscale(1);}
#mahjong-dialog .mj-side-actions .rosa-button:disabled .mj-icon-svg{filter:grayscale(1);opacity:.55;}
#mahjong-dialog :is(.rosa-button,.mj-popover-close):focus-visible{outline:3px solid var(--rosa-crystal);outline-offset:3px;}
#mahjong-dialog .mj-controls .rosa-button:active:not(:disabled),#mahjong-dialog .mj-panel-body .rosa-button:active:not(:disabled){translate:0 2px;box-shadow:inset 0 3px 6px #0008,0 1px #a77e36;filter:brightness(.94);}
#mahjong-dialog .mj-side-actions .rosa-button:active:not(:disabled) .mj-control-icon{translate:0 2px;box-shadow:inset 0 3px 7px #0009,inset 0 0 0 3px #8b6428;}
#mahjong-dialog .mj-modes .rosa-button:active{translate:0 1px;}
#mahjong-dialog .mj-popover-card{padding:30px;border:2px solid var(--rosa-gold);box-shadow:inset 0 0 0 4px #cc9a3844,0 5px 0 #523816,0 22px 60px #000b;}
#mahjong-dialog .mj-popover-card>.mj-ornament{border-image-width:42px;}
#mahjong-dialog .mj-confirm-actions .rosa-button{flex:1;min-height:48px;}
#mahjong-dialog .mj-confirm-actions .rosa-button--primary{background:var(--rosa-primary-fill);color:var(--rosa-bg);border-color:var(--rosa-gold-light);}
@media(hover:hover){
 #mahjong-dialog .mj-controls .rosa-button:hover:not(:disabled),#mahjong-dialog .mj-panel-body .rosa-button:hover:not(:disabled){border-color:#fff0b8;filter:brightness(1.1);box-shadow:inset 0 1px #fff3be88,0 0 13px #e8b34766;}
 #mahjong-dialog .mj-side-actions .rosa-button:hover:not(:disabled) .mj-control-icon{border-color:#fff3b9;box-shadow:inset 0 0 0 3px #ae8538,inset 0 1px #fff8da,0 0 18px #f6c54c80;}
 #mahjong-dialog .mj-modes .rosa-button:hover:not([aria-pressed='true']){border-color:var(--rosa-gold);background:linear-gradient(110deg,#725a263f,#03252c);}
}
@media(prefers-reduced-motion:reduce){#mahjong-dialog .rosa-button:active,#mahjong-dialog .rosa-button:active .mj-control-icon{translate:none;}}
#mahjong-dialog.mj-no-motion .rosa-button:active,#mahjong-dialog.mj-no-motion .rosa-button:active .mj-control-icon{translate:none;}
@media(max-width:600px){
 #mahjong-dialog .mj-controls{grid-template-columns:repeat(2,minmax(0,1fr));}
 #mahjong-dialog .mj-controls [data-mj='new']{grid-column:1 / -1;flex-direction:row;}
 #mahjong-dialog .mj-modes .rosa-button{flex-direction:row;min-height:70px;gap:7px;padding:8px 5px;}
 #mahjong-dialog .mj-modes button>span:first-child{width:26px;height:26px;}
 #mahjong-dialog .mj-mode-copy{align-items:flex-start;text-align:left;}
}