/* Floralia · rune stones (js/runestone.js, 2026-10-23): the stone tile and the sockets on the bag's gear card (#bagp .rsk-*),
   and the craft page's คละชนิด tab bits (#eco .rsm-*); the merge itself is the craft page (css/craft2.css). */
/* a stone: its tier's plate, the stone big, the tier numeral and the count */
#bagp .rs-st { position: relative; display: grid; place-items: center; aspect-ratio: 1; width: 4.6em; border-radius: .7em; border: 1px solid rgba(255, 255, 255, .18); background: center / 100% 100% no-repeat; }
#bagp .rs-st img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 .15em .2em rgba(0, 0, 0, .5)); }
#bagp .rs-st .t { position: absolute; left: .3em; top: .2em; font: 900 .95em/1 'Times New Roman', Georgia, serif; font-style: normal; color: #ffd76a; -webkit-text-stroke: .16em #1a1008; paint-order: stroke fill; }
#bagp .rs-st .n { position: absolute; right: .3em; bottom: .2em; font-style: normal; font-weight: 700; font-size: .85em; color: #fff; -webkit-text-stroke: .22em #241a2c; paint-order: stroke fill; }
#bagp .rs-st.shine { box-shadow: 0 0 0 2px #fff6c8, 0 0 12px 3px rgba(255, 230, 140, .75); }

/* the bag's gear card: three sockets (locked ones say at which + they open), the stone list under them */
#bagp .rsk-box { margin: .5em 0; padding: .5em .6em; border-radius: .6em; background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 162, 74, .3); }
#bagp .rsk-h { display: flex; align-items: center; gap: .5em; margin-bottom: .4em; }
#bagp .rsk-h b { color: #ffe08a; } #bagp .rsk-h small { color: var(--dim); font-size: .8em; }
#bagp .rsk-go { padding: .15em .6em; border-radius: .5em; border: 1px solid #8a6a2e; background: #2a2032; font-size: .8em; font-weight: 600; }
#bagp .rsk-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4em; }   /* (four sockets: the 4th at +15) */
#bagp .rsk { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; min-height: 4.2em; padding: .3em; border-radius: .6em; border: 1px dashed rgba(255, 215, 106, .45); background: rgba(0, 0, 0, .3); color: rgba(255, 215, 106, .8); font-size: 1.1em; font-weight: 700; }
#bagp .rsk small { font-size: .62em; font-weight: 500; color: var(--dim); text-align: center; line-height: 1.2; }
#bagp .rsk.on { border-style: solid; border-color: #c9a24a; }
#bagp .rsk.on img { width: 2.4em; height: 2.4em; object-fit: contain; }
#bagp .rsk.on small { color: #ffe08a; }
#bagp .rsk.on.ask { border-color: #ff8a6a; box-shadow: 0 0 0 1px #ff8a6a, 0 0 10px rgba(255, 120, 90, .45); }   /* (tapped once: the price to take it out) */
#bagp .rsk.on.ask small { color: #ffb39a; font-weight: 700; }
#bagp .rsk.lock { opacity: .65; font-size: .9em; cursor: default; }
#bagp .rsk.lock small, #bagp .rsk:not(.on) small { font-size: .8em; color: #cfc3a8; }   /* (readable: 🔒 +5 / ยัดหิน) */
#bagp .rsk-list { display: flex; flex-wrap: wrap; gap: .35em; margin-top: .5em; max-height: 12em; overflow: auto; }
#bagp .rsk-list button { display: flex; flex-direction: column; align-items: center; gap: .1em; width: 4.6em; padding: 0; border: 0; background: none; }
#bagp .rsk-list .rs-st { width: 3.6em; }
#bagp .rsk-list small { font-size: .62em; color: var(--dim); text-align: center; line-height: 1.15; }
#bagp .rsk-list .rsk-odds { font-style: normal; font-size: .62em; font-weight: 700; color: #8fe67c; }   /* (the chance it takes: green 100%, gold, red under 60%) */
#bagp .rsk-list .rsk-odds.mid { color: #ffd76a; } #bagp .rsk-list .rsk-odds.lo { color: #ff8a7a; }
#bagp .rsk-list .rsk-off { font-style: normal; font-size: .58em; color: #ff8a7a; }   /* (an attack stone this class does not use) */
/* the craft page's คละชนิด tab: the ? on the dial, the + in an empty slot */
#eco .rsm-q { position: relative; z-index: 2; font: 800 44px/1 Fredoka, sans-serif; color: #ffe08a; text-shadow: 0 0 12px rgba(255, 200, 90, .85), 0 2px 0 #3a2400; }
#eco .rsm-plus { position: relative; z-index: 2; font: 700 22px/1 Fredoka, sans-serif; color: rgba(255, 215, 106, .65); }
/* the four slots' ⚡ ใส่อัตโนมัติ / ล้าง */
#eco .rsm-acts { display: flex; justify-content: center; gap: 8px; margin: 2px 0 4px; }
#eco .rsm-acts button { padding: 6px 16px; border-radius: 9px; border: 1px solid #c9a24a; background: linear-gradient(180deg, #4a3418, #2a1c0c); color: #ffe08a; font: 700 13px Prompt, sans-serif; cursor: pointer; }
#eco .rsm-acts .rsm-auto { border-color: #fff0b0; color: #2c1a08; background: linear-gradient(180deg, #ffe9a0, #f2b64a 55%, #c9832a); }
#eco .rsm-acts button:disabled { filter: grayscale(1); opacity: .45; cursor: default; }

/* what a merge made, big on the screen (Rune.reveal): the stone in its tier's glow; หลอมทั้งหมด a grid with counts */
#rsreveal { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(6, 4, 12, .72); animation: rsr-in .18s ease-out; cursor: pointer; }
@keyframes rsr-in { from { opacity: 0; } }
#rsreveal .rsr-box { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 300px; max-width: min(92vw, 640px); padding: 22px 28px 20px; border-radius: 18px;
  border: 2px solid var(--rc); background: radial-gradient(ellipse 80% 60% at 50% 30%, color-mix(in srgb, var(--rc) 28%, transparent), transparent 70%), linear-gradient(180deg, #221a2c, #120d18);
  box-shadow: 0 0 0 4px #120d18, 0 0 40px color-mix(in srgb, var(--rc) 55%, transparent); color: #f3ead6; font: 400 15px Prompt, sans-serif; text-align: center; animation: rsr-pop .32s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes rsr-pop { from { transform: scale(.6); opacity: 0; } }
#rsreveal .rsr-h { font-size: 24px; font-weight: 700; color: #ffe08a; text-shadow: 0 0 12px rgba(255, 200, 90, .7); }
#rsreveal .rsr-box.shine .rsr-h { color: #fff6c8; }
#rsreveal .rsr-big { position: relative; display: grid; place-items: center; width: 170px; height: 170px; }
#rsreveal .rsr-big img { position: relative; z-index: 1; width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .6)); animation: rsr-bob 1.6s ease-in-out infinite alternate; }
@keyframes rsr-bob { to { transform: translateY(-6px) scale(1.03); } }
#rsreveal .rsr-rays { position: absolute; inset: -20px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 55%, transparent) 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); animation: rsr-spin 8s linear infinite; }
@keyframes rsr-spin { to { transform: rotate(1turn); } }
#rsreveal .rsr-name { font-size: 20px; color: var(--rc); }
#rsreveal .rsr-val { color: #c9c0ae; font-size: 14px; }
#rsreveal .rsr-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-height: 60vh; overflow-y: auto; padding: 4px; }
#rsreveal .rsr-it { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 92px; }
#rsreveal .rsr-ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 12px; border: 2px solid var(--rc); background: radial-gradient(circle, color-mix(in srgb, var(--rc) 35%, transparent), #120d18 75%); }
#rsreveal .rsr-it.shine .rsr-ic { box-shadow: 0 0 0 2px #fff6c8, 0 0 12px 3px rgba(255, 230, 140, .75); }
#rsreveal .rsr-ic img { width: 62px; height: 62px; object-fit: contain; }
#rsreveal .rsr-n { position: absolute; top: 48px; right: 6px; font: 800 15px Fredoka, sans-serif; color: #fff; -webkit-text-stroke: 3px #241a2c; paint-order: stroke fill; }
#rsreveal .rsr-it small { font-size: 11px; line-height: 1.15; color: #e8dcc0; }
#rsreveal .rsr-ok { margin-top: 4px; padding: 9px 40px; border-radius: 10px; border: 1px solid #fff0b0; background: linear-gradient(180deg, #ffe9a0, #f2b64a 55%, #c9832a); color: #2c1a08; font: 700 16px Prompt, sans-serif; cursor: pointer; }
/* the merge's effect (Rune mergeFx): the stones fly into the dial, the dial spins and glows, a flash */
.rsm-fx { position: fixed; inset: 0; z-index: 8990; pointer-events: none; }
.rsm-fly { position: fixed; object-fit: contain; transition: transform .55s cubic-bezier(.5, 0, .8, .4), opacity .55s ease-in; filter: drop-shadow(0 0 10px rgba(255, 220, 120, .9)); }
#eco .m4-dialbox.rsm-charge .m4-dial { animation: rsm-spin 1s cubic-bezier(.4, 0, .2, 1); }
#eco .m4-dialbox.rsm-charge .m4-aura { animation: rsm-glow 1s ease-in-out; }
#eco .m4-dialbox.rsm-charge .m4-core { animation: rsm-pulse 1s ease-in-out; }
@keyframes rsm-spin { to { transform: rotate(360deg); } }
@keyframes rsm-glow { 0%, 100% { opacity: 1; filter: none; } 60% { opacity: 1; filter: brightness(1.8) saturate(1.4); } }
@keyframes rsm-pulse { 0%, 100% { transform: scale(1); } 55% { transform: scale(1.18); filter: brightness(1.6); } }
.rsm-flash { position: fixed; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: radial-gradient(circle, #fff 0, rgba(255, 236, 170, .95) 30%, rgba(255, 190, 80, .5) 60%, transparent 72%); animation: rsm-flash .45s ease-out forwards; }
@keyframes rsm-flash { from { transform: scale(1); opacity: 1; } to { transform: scale(26); opacity: 0; } }

/* a stone's info in the bag card (Rune.infoHtml): one line - the stat, its value */
#bagp .rsi { display: flex; align-items: center; justify-content: space-between; margin: .6em 0; padding: .6em .9em; border-radius: .6em; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .1); }
#bagp .rsi span { font-size: 1.1em; font-weight: 600; color: #f2ead6; }
#bagp .rsi b { font: 800 1.4em/1 Fredoka, Prompt, sans-serif; color: var(--c); }