/* Build 33: center the glass inside its shelf cell at every viewport width. */
.sort-board,.tutorial-board{min-width:0;width:100%;max-width:100%}
.sort-board>.flask-button,.tutorial-board>.flask-button{min-width:0;max-width:100%;justify-self:stretch}
.flask-button>.flask-visual{width:100%;min-width:0;max-width:100%;margin-inline:auto}
.flask-visual>svg.flask-glass{display:block;margin-inline:auto;max-width:100%;justify-self:center}
body[data-route='play'] .flask-visual>svg.flask-glass{max-width:min(130px,100%)}
.mobile-nav button svg{width:24px;height:24px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mobile-nav button.active{background:#d5b57514;border-radius:10px;color:var(--gold)}

/* UI icons: optical size24, tap targets44, no dependency on glyph metrics. */
#app .ui-icon,#modal-root .ui-icon{display:inline-block;width:24px;height:24px;flex:0 0 24px;vertical-align:middle;pointer-events:none}
#app .tool-symbol{display:flex;align-items:center;justify-content:center}
#app :is(.level-back,.level-help,.icon-button),#modal-root .dialog-close{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;flex-shrink:0}
#app .map-controls :is([data-act='map-prev'],[data-act='map-next']){display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
#app .level-compact-header{grid-template-columns:44px minmax(0,1fr) auto 44px}

/* Approved visual42: shared glyphs and illustrated workshop assets. */
.essence-symbol:not([x]){display:inline-block;width:1em;height:1em;vertical-align:-.12em;overflow:visible;pointer-events:none}
.seal>.essence-symbol{width:45%;height:45%;max-width:24px;max-height:24px}
img.relic-art{object-fit:contain;user-select:none;pointer-events:none;aspect-ratio:1;vertical-align:middle}

/* Build 48 — Match-3 visual/layout repair (AA-GD-031). */
#app .seal>.essence-symbol{width:38%;height:38%;max-width:none;max-height:none;display:block;margin:auto;color:#000;filter:none;opacity:1}
#app .practice-match .seal{background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.08) 27%,rgba(0,0,0,.13) 72%),var(--seal)!important;border-color:color-mix(in srgb,var(--seal) 58%,#f4dfb0)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(0,0,0,.18),0 2px 4px rgba(0,0,0,.28)}
#app .practice-match .seal:before{border-color:rgba(0,0,0,.42);opacity:.48;background:linear-gradient(145deg,rgba(255,255,255,.09),transparent 55%)}
#app .practice-match .seal.target{background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.08) 27%,rgba(0,0,0,.13) 72%),var(--seal)!important;border-color:#d9b96f!important;box-shadow:inset 0 0 0 2px #d9b96f,0 0 0 1px #d9b96f66,inset 0 1px 0 rgba(255,255,255,.28)}
#app .practice-match .seal.target.selected{box-shadow:inset 0 0 0 2px #d9b96f,0 0 0 3px #72c9bd}
#app .target-depth{right:3px;top:3px;min-width:17px;height:17px;font-size:var(--t-caption);background:#f0d797;color:#111;border:1px solid #6c5427;box-shadow:none}
#app .seal-guide>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#app .guide-icon{width:18px;height:18px;display:inline-block;position:relative;flex:0 0 18px;color:var(--gold)}
#app .guide-line:before{content:'';position:absolute;left:1px;right:1px;top:8px;border-top:2px solid currentColor}
#app .guide-line:after{content:'';position:absolute;inset:4px 1px;border-left:2px solid currentColor;border-right:2px solid currentColor;transform:skewY(-35deg)}
#app .guide-area{border:1.5px solid currentColor;border-radius:3px;box-shadow:inset 5px 0 0 #d5b57533,inset -5px 0 0 #d5b57533}
#app .guide-type:before{content:'✦';position:absolute;inset:-2px 0 0;text-align:center;font-size:var(--t-caption);line-height:18px;font-family:var(--ff-ui)}
.tool-with-reason{display:inline-flex;flex-direction:column;align-items:center;gap:3px}.tool-disabled-reason{max-width:150px;text-align:center;color:var(--muted);font-size:var(--t-caption);line-height:var(--lh-caption)}
@media(max-width:900px){#app .practice-match .match-board{width:min(calc(100vw - 24px),calc(100dvh - 174px),560px);padding:5px;gap:4px}#app .practice-match .seal-guide{font-size:var(--t-caption);gap:10px}}
