/* ใส่ออฟชั่น (js/optrune.js) - extras on top of css/optrune-frame.css (the Supreme window look). OPT-RUNE-V1 */
html body #hud section#opt-window.window { --pw-width: 600px !important; }
#hud #opt-window .opt-body { font-size: calc(var(--u) * 20); color: #10294f; }
#hud #opt-window .opt-purse { display: flex; justify-content: center; gap: calc(var(--u) * 18); margin-bottom: calc(var(--u) * 10); }
#hud #opt-window .opt-purse span { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 6) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 24); border: calc(var(--u) * 2) solid #dfb758; background: linear-gradient(180deg, #1f4f94, #143a73); color: #fff; }
#hud #opt-window .opt-purse b { color: #ffe39a; }
#hud #opt-window .opt-purse img { width: calc(var(--u) * 30); height: calc(var(--u) * 30); image-rendering: pixelated; }
#hud #opt-window .opt-zen { width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0, #e2ab33 60%, #9c7a36); }
#hud #opt-window .opt-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 12); }
#hud #opt-window .opt-list { display: flex; flex-direction: column; gap: calc(var(--u) * 6); max-height: calc(var(--u) * 520); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
#hud #opt-window .opt-row { display: flex; align-items: center; gap: calc(var(--u) * 10); width: 100%; text-align: left; padding: calc(var(--u) * 6) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 12); border: calc(var(--u) * 2) solid #cfe0f2; background: linear-gradient(180deg, #fff, #eef5fd); color: #10294f; cursor: pointer; }
#hud #opt-window .opt-row[aria-pressed="true"] { border-color: #dfb758; background: linear-gradient(180deg, #fffdf2, #fbeec2); }
#hud #opt-window .opt-row img { width: calc(var(--u) * 44); height: calc(var(--u) * 44); image-rendering: pixelated; flex: none; }
#hud #opt-window .opt-row span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
#hud #opt-window .opt-row b { font-size: calc(var(--u) * 19); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hud #opt-window .opt-row small { font-size: calc(var(--u) * 15); opacity: .85; }
#hud #opt-window .opt-row em { font-style: normal; }
#hud #opt-window .opt-worn { color: #1f8a4c; font-weight: 700; }
#hud #opt-window .opt-item { display: flex; align-items: center; gap: calc(var(--u) * 12); margin-bottom: calc(var(--u) * 8); }
#hud #opt-window .opt-item img { width: calc(var(--u) * 72); height: calc(var(--u) * 72); image-rendering: pixelated; border-radius: calc(var(--u) * 12);
  border: calc(var(--u) * 2) solid #dfb758; background: #fff; }
#hud #opt-window .opt-item b { display: block; font-size: calc(var(--u) * 22); }
#hud #opt-window .opt-item small { font-size: calc(var(--u) * 16); opacity: .8; }
#hud #opt-window .opt-lines { min-height: calc(var(--u) * 110); padding: calc(var(--u) * 8) calc(var(--u) * 12); border-radius: calc(var(--u) * 12);
  border: calc(var(--u) * 2) dashed #e5a3a6; background: #fff7f7; margin-bottom: calc(var(--u) * 8); }
#hud #opt-window .opt-lines p { margin: calc(var(--u) * 4) 0; font-size: calc(var(--u) * 22); }
#hud #opt-window .opt-lines.fresh { animation: opt-glow 1.2s ease-out 1; }
@keyframes opt-glow { 0% { box-shadow: 0 0 0 calc(var(--u) * 12) rgba(211, 32, 42, .35); } 100% { box-shadow: 0 0 0 0 rgba(211, 32, 42, 0); } }
#hud #opt-window .opt-none { color: #7a8aa5; }
#hud #opt-window .opt-before { font-size: calc(var(--u) * 15); color: #7a8aa5; margin: 0 0 calc(var(--u) * 8); }
#hud #opt-window #opt-roll { width: 100%; min-height: calc(var(--u) * 58); font-size: calc(var(--u) * 21) !important; }
#hud #opt-window .opt-cost { font-size: calc(var(--u) * 16); text-align: center; margin: calc(var(--u) * 6) 0 0; }
#hud #opt-window .opt-cost img { width: calc(var(--u) * 24); height: calc(var(--u) * 24); vertical-align: middle; image-rendering: pixelated; }
#hud #opt-window .opt-rules { font-size: calc(var(--u) * 16); line-height: 1.45; margin-top: calc(var(--u) * 12); }
#hud #opt-window .opt-rules p { margin: calc(var(--u) * 4) 0; }
#hud #opt-window .opt-red, #hud #opt-window .nv-opt { color: #d3202a !important; font-weight: 700; }
@media (max-width: 640px), (max-height: 520px) { #hud #opt-window .opt-main { grid-template-columns: 1fr; } }

/* "ใส่ออฟชั่น" button in the ช่างตีบวก window */
#hud #refine-window .opt-open { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0 0 8px; padding: 6px 10px;
  border-radius: 10px; border: 2px solid #b8323a; background: linear-gradient(180deg, #ffecec, #f7c9cb); color: #7a1218; font-weight: 800; cursor: pointer; }
#hud #refine-window .opt-open img { width: 28px; height: 28px; image-rendering: pixelated; }
#hud #bag-item-detail .opt-open-bag { width: 100%; justify-content: center; border-color: #b8323a !important; color: #7a1218 !important; background: #ffecec !important; }