/* Approved UI kit, 26 Oct 2026. Artwork is layered over real semantic controls. */
#mahjong-dialog{--mj-frame:url('assets/mahjong-reference/filigree-frame.webp');background-image:linear-gradient(#00141908,#00141918),url('assets/mahjong-reference/approved-garden.webp');}
#mahjong-dialog .mj-ornament{inset:-1px;border-image-source:var(--mj-frame);border-image-slice:115;border-image-width:34px;opacity:1;filter:drop-shadow(0 1px 0 #663c0e);}
#mahjong-dialog :is(.mj-bar,.mj-mode-zone,.mj-stats-zone,.mj-side-actions,.mj-bottom,.mj-popover-card){border:1px solid #ca9d46;border-radius:12px;background:var(--rosa-menu-fill);backdrop-filter:none;box-shadow:inset 0 0 0 3px #b18b3820,0 5px 14px #0008;}
#mahjong-dialog .mj-title-plaque{position:relative;display:grid;place-items:center;width:min(560px,100%);min-height:0;padding:0!important;border:0;background:none;box-shadow:none;}
#mahjong-dialog .mj-title-art{display:block;width:100%;height:auto;max-height:126px;object-fit:contain;filter:drop-shadow(0 3px 3px #0008);}
#mahjong-dialog #mahjong-title{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
#mahjong-dialog .mj-tagline{display:none;}
#mahjong-dialog .mj-icon-art{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 1px #0009);}
#mahjong-dialog .mj-table{padding:13px;border:5px solid #bc8b35;border-radius:24px;background:radial-gradient(ellipse at 50% 22%,#086142,#00432e 65%,#002d25);box-shadow:0 0 0 1px #ffe598,inset 0 0 0 2px #e2b95f,inset 0 0 32px #001a12cc,0 5px 0 #543611,0 7px 0 #dca347,0 12px 20px #0009;}
#mahjong-dialog .mj-table::before{inset:-5px;border-image-source:var(--mj-frame);border-image-slice:115;border-image-width:58px;filter:drop-shadow(0 1px #86571f);}
#mahjong-dialog .mj-table-inlay{inset:9px;border:1px solid #d9ba6044;border-radius:16px;background:repeating-linear-gradient(36deg,#a7e4b207 0 1px,transparent 1px 3px);box-shadow:inset 0 0 22px #00281b;}
#mahjong-dialog .mj-modes .rosa-button{border-radius:10px;background:var(--rosa-menu-item-fill);border:1px solid #46745c55;box-shadow:inset 0 1px #e0db9d0a;text-shadow:0 1px 2px #000;}
#mahjong-dialog .mj-modes button[aria-pressed='true']{border:1px solid #ffe3a1;background:radial-gradient(ellipse at 10% 0,#ffe79c88,transparent 80%),linear-gradient(115deg,#7b591a,#c18b2b 45%,#574416 100%);color:#fff2d2;box-shadow:inset 0 0 0 2px #f5d68c66,inset 0 1px #ffefbb,0 0 14px #eeb74c77;}
#mahjong-dialog .mj-modes button[aria-pressed='true'] .mj-icon-art{filter:drop-shadow(0 2px #66400f);}
#mahjong-dialog .mj-modes button[aria-pressed='true'] small{color:#fff0c6;text-shadow:0 1px #5c3d16;}
#mahjong-dialog .mj-mode-copy small{font-size:11px;}
#mahjong-dialog .mj-stats{display:flex;flex-direction:column;gap:5px;}
#mahjong-dialog .mj-stats>div{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px;border:1px solid #3954474d;border-radius:8px;background:#041421;}
#mahjong-dialog .mj-stats>div::before{content:'';display:block;width:29px;height:34px;background:url('assets/mahjong-reference/layouts.webp') center/contain no-repeat;}
#mahjong-dialog .mj-stats>div:nth-child(2)::before{background-image:url('assets/mahjong-reference/classic.webp');}
#mahjong-dialog .mj-stats strong{grid-column:3;grid-row:1;font-size:21px;color:var(--rosa-ivory);}
#mahjong-dialog .mj-stats span{grid-column:2;grid-row:1;text-align:left;font-size:11px;}
#mahjong-dialog .mj-dashboard>div{border:1px solid #3954474d;background:#041421;}
#mahjong-dialog .mj-dashboard .mj-clock{position:relative;padding-left:41px;}
#mahjong-dialog .mj-clock::before{content:'';position:absolute;left:5px;width:29px;height:34px;background:url('assets/mahjong-reference/timed.webp') center/contain no-repeat;}
#mahjong-dialog .mj-side-actions .mj-control-icon{border:2px solid #e9c16e;background:radial-gradient(ellipse at 32% 12%,#8a76464d,#09283b 50%,#031321);box-shadow:inset 0 0 0 3px #031d21,inset 0 0 0 4px #ae833c77,0 3px 7px #0009;}
#mahjong-dialog .mj-controls{grid-template-columns:1.3fr repeat(4,minmax(0,1fr)) 38px;gap:8px;}
#mahjong-dialog .mj-controls .rosa-button{border-radius:11px;border:1px solid #e3b969;background:var(--rosa-menu-item-fill)!important;box-shadow:inset 0 1px #ffedb060,0 2px 4px #0007;color:#fff0cc!important;}
#mahjong-dialog .mj-controls [data-mj='new']{background:linear-gradient(#fff0aa,#f6c85e 40%,#dfa33c 86%,#ffdd84)!important;box-shadow:inset 0 2px #fff5c2,inset 0 -2px #c28a28,0 0 13px #f9b94777;color:#151d16!important;}
#mahjong-dialog .mj-controls [data-mj='new'] .mj-icon-art{filter:none;}
#mahjong-dialog .mj-layout-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
#mahjong-dialog .mj-layout-options button{display:flex;flex-direction:column;gap:12px;align-items:center;padding:14px 6px;}
#mahjong-dialog .mj-layout-preview{display:block;position:relative;width:100%;aspect-ratio:15/11;max-width:130px;background:#043d30;border-radius:8px;}
#mahjong-dialog .mj-layout-preview i{position:absolute;left:calc(var(--px)*6%);top:calc(var(--py)*8%);width:5.5%;height:7%;border-radius:1px;background:#f4dfb3;box-shadow:0 1px #ad8435;}
#mahjong-dialog .mj-layout-options [aria-pressed='true']{border-color:#ffe5a5;box-shadow:0 0 12px #e8c76c66;}
#mahjong-dialog .mj-top-nav button:disabled{opacity:.66;cursor:not-allowed;filter:saturate(.7);}
@media(min-width:1001px){
 #mahjong-dialog .mj-main{grid-template-columns:clamp(180px,16.5vw,270px) minmax(0,1fr) clamp(92px,7.5vw,128px);gap:9px 14px;padding:12px 20px 10px;}
 #mahjong-dialog .mj-bar{min-height:78px;margin:8px 20px 0;gap:10px;padding-right:12px;}
 #mahjong-dialog .mj-brand{width:185px;padding:5px 13px;border-right:1px solid #cda14e;border-radius:12px;}
 #mahjong-dialog .mj-brand img{width:160px;max-height:68px;}
 #mahjong-dialog .mj-top-nav .rosa-button{min-width:0;flex:1;min-height:74px;padding:6px 9px;font-size:12px;}
 #mahjong-dialog .mj-top-nav .mj-control-icon{width:31px;height:31px;}
 #mahjong-dialog .mj-account{gap:7px;}
 #mahjong-dialog .mj-account small{font-size:9px;}
 #mahjong-dialog .mj-account strong{font-size:12px;}
 #mahjong-dialog .mj-header-actions .rosa-button{min-width:39px;min-height:39px;padding:8px;}
 #mahjong-dialog .mj-title-art{max-height:112px;}
 #mahjong-dialog .mj-heading{min-height:96px;display:grid;place-items:center;}
 #mahjong-dialog .mj-mode-zone,#mahjong-dialog .mj-stats-zone{padding:15px 13px;}
 #mahjong-dialog .mj-modes{gap:6px;margin-top:10px;}
 #mahjong-dialog .mj-modes .rosa-button{min-height:58px;padding:8px;gap:9px;font-size:14px;}
 #mahjong-dialog .mj-modes button>span:first-child{width:35px;height:35px;}
 #mahjong-dialog .mj-mode-label,#mahjong-dialog #mj-stats-heading{font-size:15px;padding-bottom:9px;}
 #mahjong-dialog .mj-side-actions{padding:13px 5px;gap:16px;}
 #mahjong-dialog .mj-side-actions .rosa-button{min-height:92px;font-size:12px;gap:6px;}
 #mahjong-dialog .mj-side-actions .mj-control-icon{width:73px;height:73px;padding:13px;}
 #mahjong-dialog .mj-bottom{grid-column:2;grid-row:3;padding:7px 9px;}
 #mahjong-dialog .mj-controls .rosa-button{min-height:53px;font-size:12px;padding:7px 5px;gap:6px;}
 #mahjong-dialog .mj-controls .mj-control-icon{width:28px;height:28px;}
 #mahjong-dialog .mj-sidebar{justify-content:flex-start;gap:12px;}
 #mahjong-dialog .mj-stats-zone{flex:1;display:flex;flex-direction:column;justify-content:space-between;}
 #mahjong-dialog .mj-ornament{border-image-width:32px;}
 #mahjong-dialog .mj-bottom>.mj-ornament{border-image-width:24px;}
 #mahjong-dialog .mj-center{perspective:2000px;}
 #mahjong-dialog .mj-table{transform:rotateX(5deg);transform-origin:center bottom;}
}
@media(min-width:1001px) and (max-width:1250px){#mahjong-dialog .mj-account{display:none;}#mahjong-dialog .mj-brand{width:164px;}#mahjong-dialog .mj-brand img{width:145px;}}
@media(min-width:1001px) and (max-height:820px){
 #mahjong-dialog .mj-main{grid-template-columns:180px minmax(0,1fr) 94px;gap:7px 12px;padding-top:10px;}
 #mahjong-dialog .mj-heading{min-height:78px;}
 #mahjong-dialog .mj-title-art{max-height:83px;}
 #mahjong-dialog .mj-mode-zone,#mahjong-dialog .mj-stats-zone{padding:12px 11px;}
 #mahjong-dialog .mj-mode-label,#mahjong-dialog #mj-stats-heading{font-size:13px;padding-bottom:6px;}
 #mahjong-dialog .mj-modes{gap:4px;margin-top:7px;}
 #mahjong-dialog .mj-modes .rosa-button{min-height:48px;padding:6px;font-size:12px;}
 #mahjong-dialog .mj-mode-copy small{font-size:9px;}
 #mahjong-dialog .mj-modes button>span:first-child{width:28px;height:28px;}
 #mahjong-dialog .mj-stats>div{padding:5px;}
 #mahjong-dialog .mj-stats span{font-size:10px;}
 #mahjong-dialog .mj-stats strong{font-size:18px;}
 #mahjong-dialog .mj-dashboard .mj-clock{padding-left:39px;}
 #mahjong-dialog .mj-side-actions .mj-control-icon{width:66px;height:66px;padding:12px;}
 #mahjong-dialog .mj-side-actions .rosa-button{min-height:80px;}
 #mahjong-dialog .mj-controls .rosa-button{min-height:47px;font-size:11px;}
}
@media(max-width:1000px){
 #mahjong-dialog{background-image:linear-gradient(#00141914,#00141928),url('assets/mahjong-reference/approved-garden-mobile.webp');}
 #mahjong-dialog .mj-top-nav{overflow-x:auto;justify-content:flex-start;scrollbar-width:thin;}
 #mahjong-dialog .mj-top-nav .rosa-button{flex:none;min-width:100px;min-height:48px;}
 #mahjong-dialog .mj-top-nav .mj-control-icon{width:24px;height:24px;}
 #mahjong-dialog .mj-title-plaque{width:min(410px,100%);}
 #mahjong-dialog .mj-title-art{max-height:98px;}
 #mahjong-dialog .mj-side-actions .mj-control-icon{width:40px;height:40px;padding:6px;}
 #mahjong-dialog .mj-controls{grid-template-columns:repeat(2,minmax(0,1fr));}
 #mahjong-dialog .mj-controls [data-mj='new']{grid-column:1/-1;}
 #mahjong-dialog .mj-table{transform:none;padding:9px;}
 #mahjong-dialog .mj-table::before{border-image-width:42px;}
 #mahjong-dialog .mj-stats-zone{display:block;}
 #mahjong-dialog .mj-stats>div{grid-template-columns:30px minmax(0,1fr) auto;}
 #mahjong-dialog .mj-dashboard .mj-clock{flex-direction:row;justify-content:space-between;}
 #mahjong-dialog .mj-mode-copy small{font-size:9px;}
}
@media(prefers-reduced-motion:reduce){#mahjong-dialog .mj-table{transform:none;}}
#mahjong-dialog.mj-no-motion .mj-table{transform:none;}
#mahjong-dialog .mj-win-counter{display:flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:65px;height:36px;padding:5px 9px;flex:none;}
#mahjong-dialog .mj-win-counter .mj-icon-art{width:24px;height:24px;flex:0 0 24px;}
#mahjong-dialog .mj-guest-emblem .mj-icon-art{width:100%;height:100%;}
#mahjong-dialog .mj-heading{display:flex;justify-content:center;align-items:center;}
#mahjong-dialog .mj-title-plaque{flex:none;}
#mahjong-dialog .mj-stats>div:first-child::before{background:url('assets/mahjong-reference/zhong.webp') center 2px/16px 25px no-repeat,url('assets/mahjong-ivory-sculpted.webp') center/27px 34px no-repeat;}
#mahjong-dialog .mj-header-search .rosa-button{display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:8px;border-radius:50%;border:1px solid #bd9547;background:#071c2b;}
#mahjong-dialog .mj-header-search .mj-control-icon{width:25px;height:25px;}
#mahjong-dialog .mj-header-search [data-button-label]{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;}
@media(max-width:1000px){#mahjong-dialog .mj-header-search{margin-left:auto;}#mahjong-dialog .mj-header-actions{margin-left:0;}}
#mahjong-dialog .mj-tile::before,#mahjong-dialog .mj-preview-piece::before{background-image:url('assets/mahjong-reference/ivory-tile.webp');filter:drop-shadow(1px 3px 1px #00170dc0);}
#mahjong-dialog .mj-tile-face{inset:3% 5% 6% 5%;}
#mahjong-dialog .mj-theme-preview{background-image:url('assets/mahjong-reference/ivory-tile.webp');}
#mahjong-dialog .mj-header-search button{min-width:40px;max-width:40px;border-radius:50%;}
#mahjong-dialog[data-theme='night']{background-image:linear-gradient(#041221bd,#010914e6),url('assets/mahjong-reference/approved-garden.webp');}

/* Menu backing follows the portal sapphire surface, including the logo compartment. */
#mahjong-dialog .mj-brand{background:var(--rosa-menu-fill);}

/* Atelier pass: readable playing surface and the approved navy / carved-gold shell. */
#mahjong-dialog{background-image:linear-gradient(#020c1a38,#020b184d),url('assets/mahjong-reference/approved-garden.webp');}
#mahjong-dialog .mj-table{background:radial-gradient(ellipse at 48% 35%,#145d49 0,#064332 58%,#01271f 100%);box-shadow:0 0 0 1px #ffe598,inset 0 0 0 2px #e2b95f,inset 0 0 52px #001a12e6,0 5px 0 #543611,0 7px 0 #dca347,0 16px 26px #000b;}
#mahjong-dialog .mj-table-inlay{background:repeating-linear-gradient(35deg,#d5eadb06 0 1px,transparent 1px 3px),radial-gradient(ellipse,#97ba8709,transparent 70%);}
#mahjong-dialog .mj-modes .rosa-button{border-color:#c8a14d40;box-shadow:inset 0 1px #ffedb012,0 2px 4px #0005;}
#mahjong-dialog .mj-modes button[aria-pressed='true']{background:linear-gradient(125deg,#fff1b5,#e0b34c 45%,#9b681d);color:#20170b;text-shadow:none;border-color:#fff1b9;box-shadow:inset 0 2px #fff4c7,inset 0 -3px #82551e,0 0 16px #eeb74c55;}
#mahjong-dialog .mj-modes button[aria-pressed='true'] small{color:#443315;text-shadow:none;}
#mahjong-dialog .mj-tile:not(.is-free){filter:brightness(.85) saturate(.86) drop-shadow(1px 4px 2px #00110cbb);}
#mahjong-dialog .mj-tile.is-free{filter:brightness(1.07) drop-shadow(1px 4px 2px #00110cbb);}
#mahjong-dialog .mj-tile.is-selected{outline:2px solid var(--rosa-gold-light);outline-offset:2px;filter:brightness(1.12) drop-shadow(0 5px 3px #0009);}
#mahjong-dialog .mj-tile:focus-visible{outline:3px solid var(--rosa-crystal);outline-offset:3px;}
#mahjong-dialog .mj-side-actions .rosa-button{border:0;background:none;box-shadow:none;}
#mahjong-dialog .mj-side-actions .mj-control-icon{background:radial-gradient(ellipse at 35% 15%,#67748c55,#081e35 52%,#020b19);box-shadow:inset 0 0 0 3px #061425,inset 0 0 0 4px #d0a54f88,0 5px 10px #000a;}
#mahjong-dialog .mj-side-actions .rosa-button:disabled{opacity:.45;}
#mahjong-dialog .mj-popover-card{box-shadow:inset 0 0 0 3px #d4ac4e22,0 24px 70px #000c;}
#mahjong-dialog .mj-panel-body button{min-height:44px;}
@media(min-width:1001px){
 #mahjong-dialog .mj-bar{min-height:64px;margin-top:7px;}
 #mahjong-dialog .mj-top-nav .rosa-button{min-height:60px;}
 #mahjong-dialog .mj-top-nav .mj-control-icon{width:27px;height:27px;}
 #mahjong-dialog .mj-brand img{max-height:56px;}
 #mahjong-dialog .mj-main{grid-template-columns:clamp(180px,15vw,245px) minmax(0,1fr) clamp(94px,7.4vw,126px);gap:8px 14px;padding-top:7px;}
 #mahjong-dialog .mj-heading{min-height:64px;}
 #mahjong-dialog .mj-title-art{max-height:72px;}
 #mahjong-dialog .mj-title-plaque{width:min(430px,100%);}
 #mahjong-dialog .mj-center{perspective:none;}
 #mahjong-dialog .mj-table{transform:none;padding:10px;}
 #mahjong-dialog .mj-mode-copy small{font-size:11px;line-height:1.35;}
 #mahjong-dialog .mj-controls .rosa-button{min-height:48px;}
 #mahjong-dialog .mj-stats-zone{flex:none;gap:12px;}
 #mahjong-dialog .mj-sidebar{justify-content:space-between;}
}
@media(min-width:1001px) and (max-height:820px){
 #mahjong-dialog .mj-heading{min-height:52px;}
 #mahjong-dialog .mj-title-art{max-height:58px;}
 #mahjong-dialog .mj-bar{min-height:58px;}
 #mahjong-dialog .mj-top-nav .rosa-button{min-height:54px;}
 #mahjong-dialog .mj-controls .rosa-button{min-height:44px;}
 #mahjong-dialog .mj-mode-copy small{font-size:10px;}
}
@media(max-width:1000px){
 #mahjong-dialog{background-image:linear-gradient(#020c1a55,#020b1877),url('assets/mahjong-reference/approved-garden-mobile.webp');}
 #mahjong-dialog .mj-heading{margin:0;min-height:0;}
 #mahjong-dialog .mj-title-art{max-height:74px;}
 #mahjong-dialog .mj-top-nav .rosa-button{min-width:82px;min-height:44px;}
 #mahjong-dialog .mj-side-actions{gap:6px;padding:8px;}
 #mahjong-dialog .mj-side-actions .rosa-button{min-height:64px;}
 #mahjong-dialog .mj-controls .rosa-button{min-height:48px;font-size:13px;}
 #mahjong-dialog .mj-table{border-radius:18px;}
}
@media(min-width:1001px) and (max-height:820px){
 #mahjong-dialog .mj-modes .rosa-button{min-height:44px;padding:5px;}
 #mahjong-dialog .mj-mode-zone,#mahjong-dialog .mj-stats-zone{padding:10px;}
 #mahjong-dialog .mj-stats-zone{gap:5px;}
 #mahjong-dialog .mj-dashboard{margin-top:4px;gap:4px;}
 #mahjong-dialog .mj-dashboard>div{padding-top:5px;padding-bottom:5px;}
 #mahjong-dialog .mj-dashboard .mj-clock{flex-direction:row;}
}