.mj-layout{display:grid;gap:24px;max-width:1100px;margin:0 auto 24px;align-items:start}.mj-board-wrap{min-width:0;background:linear-gradient(145deg,#193335,#0a1b20);border:1px solid #8c7951;border-radius:24px;padding:20px 14px 26px;box-shadow:inset 0 0 50px #0004}.mj-board{position:relative;width:100%;aspect-ratio:var(--cols)/calc(var(--rows)*1.22);isolation:isolate}.mj-tile{position:absolute;left:calc(var(--x)*100%/var(--cols) + var(--z)*1.1%);top:calc(var(--y)*100%/var(--rows) - var(--z)*1.3%);width:calc(100%/var(--cols) - 5px);height:calc(100%/var(--rows) - 5px);padding:4px;min-height:44px;min-width:44px;border:1px solid #bfa573;border-radius:10px;background:linear-gradient(145deg,#f4e4bb,#c9bd99);color:#1a3436;box-shadow:0 5px 0 #79684b,0 8px 10px #0005;z-index:var(--z);cursor:pointer;touch-action:manipulation;transition:filter .15s,box-shadow .15s}.mj-tile svg{width:80%;height:72%;max-height:65px;display:block;margin:auto}.mj-tile[aria-disabled=true]{filter:brightness(.65);cursor:default}.mj-tile.is-free{border-color:#fcdf97}.mj-tile.is-picked,.mj-tile.is-hint{outline:3px solid #6ae3d3;outline-offset:-3px;box-shadow:0 5px 0 #79684b,0 0 18px #6ae3d355}.mj-tile:focus-visible{outline:3px solid white;outline-offset:3px}.mj-aside{background:#10252b;border:1px solid #526966;border-radius:20px;padding:22px}.mj-actions{display:flex;flex-wrap:wrap;gap:10px}.mj-actions .button{min-height:48px;flex:1 1 110px}.mj-status{min-height:3em;color:#e8d3a1}.mj-levels{display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));gap:8px;margin-top:16px}.mj-levels button{min-height:44px;border-radius:9px;border:1px solid #7d795e;background:#19353b;color:#f0dfb6}.mj-levels button[aria-current=true]{outline:2px solid #71cfc0}.mj-levels button:disabled{opacity:.4}.mj-entry{margin:20px 0;padding:20px;border:1px solid #6b7966;border-radius:18px;background:#11282c}.mj-entry p{margin:6px 0 14px}.mj-count{color:#d8c48f}.mj-complete{padding:24px;text-align:center}.mj-legend{margin-top:20px}.mj-legend ul{padding-left:20px}
@media(min-width:768px){.mj-board-wrap{padding:32px 26px 38px}.mj-layout{max-width:760px}.mj-tile svg{max-height:80px}}
@media(min-width:1024px) and (orientation:landscape){.mj-layout{grid-template-columns:minmax(0,1fr) 300px;max-width:1200px;gap:24px}.mj-aside{position:sticky;top:20px}.mj-board-wrap{padding:28px 22px 34px}}
@media(min-width:760px) and (max-width:1023px) and (orientation:landscape){.mj-layout{grid-template-columns:minmax(0,1fr) 260px;max-width:960px;gap:16px}.mj-board-wrap{padding:24px 14px 30px}.mj-aside{padding:18px}}
@media(min-width:1200px) and (orientation:landscape){body[data-route=mahjong] .app-shell{grid-template-columns:170px minmax(0,1fr)}body[data-route=mahjong] .sidebar{padding-inline:12px}.mj-layout{grid-template-columns:minmax(0,700px) minmax(260px,300px)}}
@media(max-width:390px){.mj-board-wrap{padding:16px 5px 22px}.mj-tile{border-radius:7px;padding:2px}.mj-aside{padding:16px}}
@media(prefers-reduced-motion:reduce){.mj-tile{transition:none}}
.mj-feedback{border-top:1px solid #526966;padding-top:16px;margin-top:20px}.mj-aside details{margin-top:16px}.mj-aside summary{min-height:44px;cursor:pointer;padding-block:10px}.mj-board{min-width:270px}.mj-board-wrap{overflow:auto}
/* Orientation changes are CSS-only: no game reset and no replacement of the selection. */
@media(pointer:coarse){.topbar .icon-button{min-width:44px;min-height:44px}.main{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.topbar{height:auto;min-height:68px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:10px}.page-heading{flex-wrap:wrap}.resources{flex-wrap:wrap}.main .button{min-height:44px}}
@media(min-width:768px) and (max-width:1400px) and (pointer:coarse){.main{padding-inline:max(24px,env(safe-area-inset-left)) max(24px,env(safe-area-inset-right))}.topbar{gap:12px;flex-wrap:wrap}.practice{min-width:0}.workspace{min-width:0}.book-collection-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}
@media(max-height:600px) and (orientation:landscape) and (pointer:coarse){body[data-route=mahjong] .mj-layout{grid-template-columns:minmax(280px,1fr) minmax(240px,.8fr);gap:16px;max-width:900px}.mj-board-wrap{padding:20px 12px 24px}.mj-aside{padding:16px}.mj-levels{grid-template-columns:repeat(5,minmax(36px,1fr))}}
/* Every tile owns its artwork. Intrinsic 256px item assets must never size the board. */
.mj-tile{display:grid;place-items:center;overflow:hidden;contain:layout paint;box-sizing:border-box}
.mj-tile>.relic-art{display:block;width:78%;height:72%;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;aspect-ratio:1;margin:0 auto;pointer-events:none}
.mj-tile .mj-mark{position:absolute;right:4px;bottom:3px;display:grid;place-items:center;min-width:1.2em;min-height:1.2em;border-radius:4px;background:#f7e9c7e8;color:#183438;pointer-events:none}
.mj-board{box-sizing:border-box;min-width:270px;padding:0}
.mj-board-wrap{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}
.mj-aside{min-width:0}.mj-aside h2{margin:0 0 8px}.mj-aside p{margin:8px 0 12px}.mj-aside .mj-count{margin:4px 0 8px}.mj-actions{margin:16px 0}.mj-feedback h3{margin:0 0 12px}.mj-feedback>.button{max-width:100%;margin-bottom:8px}.mj-levels{grid-template-columns:repeat(5,minmax(0,1fr))}.mj-levels .button{min-width:0;padding:8px 4px}
@media(max-width:600px){.mj-layout{gap:16px}.mj-board-wrap{border-radius:16px}.mj-aside{border-radius:16px}.mj-tile>.relic-art{width:76%;height:72%}}
/* 59: Accademia Aurora — archive cloth, warm ivory, engraved brass corners. */
#app .mj-board-wrap{position:relative;border-color:#b09359;background:radial-gradient(ellipse at 45% 35%,#244340,#102b2d 60%,#091a20);box-shadow:inset 0 0 0 4px #0b2024,inset 0 0 0 5px #9a805a65,inset 0 0 45px #02090b90,0 10px 30px #0003}
#app .mj-board{background:radial-gradient(ellipse at center,#426b5d18,transparent 68%);border-radius:12px}
#app .mj-tile.bone{border-color:#cab17e;background:linear-gradient(115deg,#fffbed,#f3e7c9 64%,#d9c69b);box-shadow:inset 1px 1px 0 #fffef4,inset -2px -3px 0 #d2bc8c,0 4px 0 #9b8458,0 6px 0 #173f3a,1px 8px 4px #0009}
#app .mj-tile.bone::after{inset:3px 3px 6px;border-color:#ad8d5059;border-radius:3px}
#app .mj-tile.bone .mahjong-face{width:96%;height:96%;filter:drop-shadow(0 1px #fff8)}
#app .mj-tile.bone .mj-mark{display:none}
#app .mj-tile.bone.is-free{border-color:#fbe3a4;box-shadow:inset 1px 1px 0 #fffef4,inset -2px -3px 0 #d2bc8c,0 4px 0 #9b8458,0 6px 0 #173f3a,1px 8px 4px #0009}
#app .mj-tile.bone[aria-disabled=true]{filter:brightness(.77) saturate(.65)}
#app .mj-tile.bone.is-picked,#app .mj-tile.bone.is-hint{outline:3px solid #62ebd3;outline-offset:-3px;box-shadow:inset 0 0 10px #6dedd333,0 4px 0 #9b8458,0 6px 0 #173f3a,0 0 16px #75ead066}
#app .mj-legend li{display:flex;align-items:center;gap:8px;min-height:44px;list-style:none}
#app .mj-legend .mahjong-face{flex:0 0 30px;width:30px;height:40px;border-radius:3px;background:#f3e7c9}