/* Advisory layer stays inside the original rarity border. No shop geometry changes. */
.shop-card.shop-recommended::after{content:"";position:absolute;inset:3px;border:1px solid #70ffe0;border-radius:5px;pointer-events:none;z-index:5}
.shop-card .shop-advice-badge{position:absolute;left:2px;top:27px;width:44px;height:44px;min-width:44px;min-height:44px;border:0;background:transparent;padding:0;box-shadow:none;z-index:6;display:flex;align-items:center;justify-content:flex-start;color:#bffff0;cursor:pointer;touch-action:manipulation}
.shop-advice-badge span{font-size:10px;line-height:16px;background:#133c35f2;border:1px solid #70ffe0;border-radius:3px;padding:0 3px;text-shadow:none}
.shop-advice-badge:focus-visible{outline:2px solid #fff;outline-offset:-2px}
#shop-advice-tip{position:fixed;z-index:1300;width:max-content;max-width:min(280px,calc(100vw - 16px));box-sizing:border-box;padding:10px 12px;border:1px solid #70ffe0;border-radius:8px;background:#102b2af5;color:#e8fff8;font:13px/1.45 system-ui,sans-serif;box-shadow:0 4px 16px #0008;pointer-events:none}
#shop-advice-tip strong{color:#8dffdf}#shop-advice-tip ul{padding-left:16px;margin:6px 0}#shop-advice-tip small{color:#b8d3ca;font-size:11px}
body.playing.mobile-ui .shop-card .shop-advice-badge{top:19px;left:0}
body.playing.mobile-ui .shop-advice-badge span{font-size:9px;line-height:14px;padding:0 2px}

/* The recommendation shares the existing 44px information control, avoiding two overlapping mobile buttons. */
.shop-card .shop-info.shop-advice-badge,body.playing.mobile-ui .shop-card .shop-info.shop-advice-badge{left:auto!important;right:0!important;top:0!important;width:44px!important;height:44px!important;padding:2px!important;align-items:flex-start;justify-content:flex-end;color:#bffff0!important;background:transparent;z-index:6}
#shop-advice-tip{pointer-events:auto}#shop-advice-tip button{display:block;margin-top:8px;min-height:44px;width:100%;border:1px solid #53796c;border-radius:4px;background:#1f4439;color:#e8fff8;font-size:12px;cursor:pointer}