.lore-progress { margin:14px 0; padding:15px 18px; border:1px solid #d8c49d35; border-radius:12px; background:#17302e; color:#d8c49d; font-size:16px; line-height:1.8; }
.lore-read-button { display:block; padding:12px 20px; margin:12px auto 0; border:1px solid #d8c49d70; border-radius:12px; color:#eee8d8; background:#25463f; font:500 16px/1.6 'Sarabun',sans-serif; cursor:pointer; }
.lore-read-button[hidden] { display:none; }
.lore-read-button:disabled { opacity:.65; cursor:default; }
.lore-read-button:focus-visible,.gift-odds summary:focus-visible { outline:2px solid #e1cfaa; outline-offset:4px; }
#lore-dialog { width:min(650px,calc(100% - 28px)); max-height:88dvh; margin:auto; padding:40px 32px 28px; border:1px solid #d8c49d65; border-radius:20px; background:linear-gradient(145deg,#203c35,#112828); color:#eee8d8; overflow:auto; }
#lore-dialog::backdrop { background:#081919ed; backdrop-filter:blur(6px); }
.lore-close { position:absolute; right:8px; top:8px; width:44px; height:44px; color:#d8c49d; }
#lore-title { font:400 28px/1.6 'Pridi',serif; margin:12px 0; }
#lore-content { font:400 17px/2 'Sarabun',sans-serif; }
#lore-content p { margin:14px 0; }
#lore-content h3 { font:500 20px/1.7 'Pridi',serif; margin-top:26px; color:#e1cfaa; }
#lore-content a { color:#d8c49d; text-decoration:underline; font-size:15px; }
#lore-content .lore-tradition,#lore-content .lore-fiction-note { color:#b9cabe; font-size:14px; }
.gift-odds { max-width:700px; width:100%; margin:24px auto; padding:16px 20px; background:#17302ed9; border:1px solid #d8c49d35; border-radius:14px; font:400 15px/1.8 'Sarabun',sans-serif; color:#b9cabe; }
.gift-odds summary { cursor:pointer; color:#e1cfaa; font-size:16px; }
.gift-odds p { margin:12px 0; }
.shop-karma-art { min-height:145px; display:flex; align-items:center; justify-content:center; gap:18px; color:#d8c49d; font:400 42px 'Pridi',serif; background:radial-gradient(ellipse at center,#d8c49d15,transparent 70%); border-bottom:1px solid #d8c49d20; }
.shop-karma-art svg { width:58px; height:58px; }
@media(max-width:600px) { #lore-dialog { padding:42px 22px 24px; } #lore-title { font-size:24px; } #shop-products { grid-template-columns:1fr; } .shop-karma-art { min-height:115px; } }