/* Match booster jewels: distinct silhouettes, colour and readable labels. */
#app .practice-match .booster-tool{position:relative;background:linear-gradient(145deg,#302552,#10273b);border:1px solid #e5c78b;border-radius:16px;box-shadow:inset 0 1px #fff2bd55,inset 0 -4px #050a2399,0 0 18px #886fff20;padding:8px 12px;gap:3px;overflow:visible}
#app .practice-match .booster-tool .tool-symbol{height:44px;display:grid;place-items:center}
#app .practice-match .booster-art{display:block;width:48px;height:48px;filter:drop-shadow(0 2px 4px #0008) drop-shadow(0 0 6px #81beff44)}
#app .practice-match .booster-tool[data-act=moves]{background:linear-gradient(145deg,#533052,#2b1b33)}
#app .practice-match .booster-tool:active{transform:translateY(1px)}
#app .practice-match .booster-tool:disabled .booster-art{filter:grayscale(.6);opacity:.65}
/* Full viewport workbench. Tasks and craft recipes are available from the header drawer. */
body[data-route=merge]{overflow:hidden}
body[data-route=merge] #app .app-shell{display:block;max-width:none;min-height:100dvh}
body[data-route=merge] #app :is(.sidebar,.mobile-nav,.topbar){display:none}
body[data-route=merge] #app .main{display:flex;flex-direction:column;width:100%;height:100dvh;max-width:none;margin:0;padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-left));overflow:hidden}
body[data-route=merge] #app .main>:is(.page-heading,.focus-notice,.merge-help,.merge-orders,.crafting-panel){display:none}
#app .merge-screen-header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;flex:0 0 auto;border-bottom:1px solid #64736a;background:#0b1c23f2;padding:4px 0}
#app .merge-screen-header h1{flex:1;min-width:0;white-space:nowrap}
#app .merge-screen-header .icon-button{width:44px;min-width:44px;height:44px;padding:10px}
#app .merge-screen-header .button{min-height:40px;padding:8px 12px}
body[data-route=merge] #app .merge-layout{display:flex;min-height:0;flex:1;width:100%;max-width:none;margin:0}
body[data-route=merge] #app .merge-layout>.side-panel{display:none}
body[data-route=merge] #app .merge-layout>.practice{display:flex;flex-direction:column;flex:1;min-height:0;margin:0;border:0;border-radius:0;overflow:hidden;background:linear-gradient(#0c2029c9,#07171cbd)}
body[data-route=merge] #app .merge-layout .practice-top{display:none}
body[data-route=merge] #app .generators{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:6px 0;gap:6px}
body[data-route=merge] #app .generator{position:relative;display:grid;grid-template-columns:32px 1fr;align-items:center;gap:0 5px;min-height:60px;border-radius:10px;padding:5px 6px;text-align:left;background:#142d33ed}
body[data-route=merge] #app .generator>.relic-art{grid-row:1/3;width:32px;height:32px;margin:0}
body[data-route=merge] #app .generator small{grid-column:2;white-space:nowrap}
body[data-route=merge] #app .merge-board{flex:1 1 auto;min-height:0;width:min(100%,calc((100dvh - 240px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*6/7));max-width:none;aspect-ratio:6/7;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr));gap:5px;padding:4px;margin:auto;align-content:center}
body[data-route=merge] #app .merge-cell{aspect-ratio:auto;min-height:0;border-radius:10px;background:#0b202bed;border:1px solid #48616a;box-shadow:inset 0 1px #a6c9cd22,inset 0 -3px #0005;overflow:hidden}
body[data-route=merge] #app .merge-cell.has-item{background:linear-gradient(145deg,#293f51,#132632)}
body[data-route=merge] #app .merge-cell .item-symbol{display:block;width:75%;height:75%;max-height:calc(100% - 12px);margin:0}
body[data-route=merge] #app .merge-cell .relic-art{width:100%;height:100%;max-width:none;object-fit:contain}
body[data-route=merge] #app .merge-cell .item-rank{position:absolute;bottom:2px;left:0;right:0;text-align:center;line-height:1;color:#e8d091}
body[data-route=merge] #app .merge-selection{flex:0 0 auto;min-height:30px;max-height:42px;overflow:auto;padding:4px 8px;text-align:center;background:#0a1b21e8}
body[data-route=merge] #app .inventory-actions{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:6px 0;margin:0;min-height:48px;background:#0b1c23}
body[data-route=merge] #app .inventory-actions .button{min-width:0;min-height:40px;padding:6px 4px;border-radius:9px}
#modal-root .merge-menu-dialog{max-width:760px}#modal-root .merge-menu-dialog .merge-orders{display:grid;grid-template-columns:1fr;gap:12px}#modal-root .merge-menu-dialog .side-panel{display:block}#modal-root .merge-menu-dialog .crafting-panel{margin:12px 0}
@media(orientation:landscape) and (max-height:600px){body[data-route=merge] #app .merge-layout>.practice{display:grid;grid-template-columns:minmax(0,1fr) 150px;grid-template-rows:1fr auto}body[data-route=merge] #app .merge-board{grid-column:1;grid-row:1/3;width:calc((100dvh - 68px)*6/7);height:calc(100dvh - 68px);margin:auto}body[data-route=merge] #app .generators{grid-column:2;grid-row:1;display:flex;flex-direction:column;padding:8px 0}body[data-route=merge] #app .merge-selection{display:none}body[data-route=merge] #app .inventory-actions{grid-column:2;grid-row:2;grid-template-columns:1fr 1fr}}
/* Ivory bone bodies and engraved suits. New trays use 6 columns and 44–88 bones. */
#app .mj-board{width:min(100%,540px);margin:0 auto;aspect-ratio:var(--cols)/calc(var(--rows)*1.3)}
#app .mj-tile.bone{min-width:32px;min-height:40px;padding:4px 3px 9px;border:1px solid #e4d4ae;border-radius:7px;background:linear-gradient(110deg,#fff9e8 0%,#f3e6c8 72%,#ded0ab 100%);box-shadow:inset 1px 1px 0 #fff, inset -2px -3px 0 #d5c49d,0 4px 0 #aaa07b,0 6px 0 #21544b,1px 7px 3px #0008;color:#224e48}
#app .mj-tile.bone::after{content:"";position:absolute;inset:3px 3px 6px;border:1px solid #b8a77e50;border-radius:4px;pointer-events:none}
#app .mj-tile.bone .mahjong-face{display:block;width:88%;height:88%;max-height:none;margin:0;filter:drop-shadow(0 1px #fff9)}
#app .mj-tile.bone .mj-mark{background:transparent;right:3px;bottom:1px;opacity:.65;min-height:0;min-width:0}
#app .mj-tile.bone[aria-disabled=true]{filter:brightness(.8) saturate(.7)}
#app .mj-tile.bone.is-picked,#app .mj-tile.bone.is-hint{outline:3px solid #69e9c9;outline-offset:-3px;box-shadow:inset 0 0 10px #58d7c450,0 4px 0 #aaa07b,0 6px 0 #21544b,0 0 14px #75ead055}
#app .mj-board-wrap{padding:20px 12px 25px}.mj-upgrade{padding:8px 0 16px}.mj-upgrade .button{margin-top:8px}
@media(prefers-reduced-motion:reduce){#app .booster-tool:active{transform:none}}

body[data-route=merge] #app .generator{grid-template-columns:24px minmax(0,1fr)}
body[data-route=merge] #app .generator>.relic-art{grid-row:1;width:24px;height:24px}
body[data-route=merge] #app .generator small{grid-column:1/-1;text-align:center}
#app .practice-match .special-tag{background:radial-gradient(circle at 35% 25%,#53658c,#252747 65%,#131527);border-color:#ffe9a6;box-shadow:inset 0 1px 4px #e1f6ff70,0 0 8px #ffdb7544}
#app .practice-match .special-tag svg{color:#fff2b3;filter:drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px #ffdc8a)}