.ring-tray { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:9px 0 0 144px; }
.ring-tray .gear-slot { position:static; width:auto; min-width:0; min-height:52px; border-color:#92845a; }
.equipment-series-row { grid-template-columns:36px repeat(4,minmax(0,1fr)); }
.inventory-grid { max-height:370px; overflow-y:auto; align-content:start; }
.item-slot { min-height:52px; }
.enchant-mark { position:absolute; top:3px; right:4px; color:#ffe099; text-shadow:0 0 7px #bd8325,0 1px 3px #000; font:bold 12px Georgia,serif; }
.enchant-selection-hint { padding:12px; border:1px solid #deb970; background:#322648; color:#ffe1a3; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; }
.enchant-selecting .item-slot, .enchant-selecting .gear-slot { cursor:crosshair; }
.economy-panel { width:min(780px,94vw); max-height:86vh; overflow-y:auto; color:#e9e2cf; padding:24px; }
.economy-panel .panel-heading div { display:grid; gap:6px; }
.economy-panel .panel-heading small, .enchant-kicker { color:#c5a86a; font:11px Georgia,serif; letter-spacing:.25em; }
.economy-panel .panel-heading strong { font:23px 'Yu Mincho',serif; letter-spacing:.12em; }
.economy-welcome { display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:20px; border-bottom:1px solid #736445; }
.economy-welcome p { line-height:1.9; }.economy-welcome small { color:#aebcb7; }.economy-welcome b { white-space:nowrap; color:#efd48b; }
.shop-filters { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin:18px 0; }
.shop-filters div { display:flex; gap:5px; }.shop-filters button { padding:8px 11px; background:#142625; color:#b4c5bd; border:1px solid #4c6155; border-radius:5px; }
.shop-filters button.active { background:#655633; color:#fff0c6; border-color:#c8a365; }
.shop-item { display:grid; grid-template-columns:76px 1fr auto; gap:16px; align-items:center; padding:13px 0; border-bottom:1px solid #ffffff12; }
.shop-item img { width:76px; height:76px; object-fit:contain; border-radius:10px; background:#111b1b; border:1px solid #695e42; }
.shop-item small,.shop-item span { font-size:11px; color:#aebcb7; }.shop-item h3 { margin:5px 0; font:17px 'Yu Mincho',serif; color:#f8dda5; }.shop-item p { font-size:12px; margin:6px 0; color:#c9d5cc; }
.shop-item button,.enchant-actions button { padding:10px 16px; border:1px solid #bc9c59; border-radius:6px; background:linear-gradient(#706039,#383521); color:#fff0bd; line-height:1.7; }
.shop-item button:disabled { opacity:.35; cursor:not-allowed; }
#shop-message,#bank-message { color:#9bd4be; font-size:12px; line-height:1.8; }
.bank-panel { width:min(980px,96vw); }.bank-panel>p { font-size:12px; line-height:1.8; color:#b8c8c3; }
.bank-quantity { display:flex; align-items:center; gap:12px; color:#e4c787; font-size:12px; margin:16px 0; }.bank-quantity input { width:80px; padding:8px; background:#102321; color:white; border:1px solid #9b8659; }
.bank-columns { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.bank-columns h3 { font:16px 'Yu Mincho',serif; color:#efd398; }.bank-columns section>div { max-height:48vh; overflow-y:auto; }
.bank-item { width:100%; display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:9px; padding:9px; margin-bottom:6px; text-align:left; color:#d9e2d8; background:#172826; border:1px solid #4c5d4d; border-radius:7px; }
.bank-item img { width:44px; height:44px; object-fit:contain; }.bank-item b { display:block; font-size:12px; }.bank-item small { display:block; font-size:10px; margin-top:4px; color:#a7b9b0; }.bank-item em { color:#f1d183; font-style:normal; font-size:12px; }.bank-item:disabled { opacity:.4; cursor:not-allowed; }
#enchant-panel { position:fixed; inset:0; z-index:200; display:grid; place-items:center; pointer-events:auto; background:rgba(2,6,11,.88); backdrop-filter:blur(7px); }
.enchant-chamber { position:relative; isolation:isolate; width:min(760px,94vw); max-height:94vh; overflow-y:auto; overflow-x:hidden; padding:24px 32px; text-align:center; border:1px solid #ceb575; border-radius:15px; background:linear-gradient(#0c132c55,#080e19ee),url('assets/items/equipment/enchant-chamber-v1.png') center/cover; box-shadow:0 0 0 5px #a9904c17,inset 0 0 70px #020916,0 25px 100px #000; transition:box-shadow 1s; }
.enchant-chamber::before { content:''; position:absolute; inset:9px; pointer-events:none; border:1px solid #c4a77040; border-radius:9px; z-index:-1; }
.enchant-chamber h2 { font:26px 'Yu Mincho',serif; letter-spacing:.18em; color:#f8dda3; margin:12px 0; }.enchant-chamber h3 { font:19px 'Yu Mincho',serif; color:#fff0be; margin:6px 0; }
.enchant-stage { height:300px; position:relative; display:grid; place-items:center; }
#enchant-item-art { width:118px; height:118px; object-fit:contain; border-radius:50%; border:1px solid #d1b26a; box-shadow:0 0 25px #e0b55133; position:relative; z-index:2; }
.enchant-orbit { position:absolute; width:245px; height:245px; border:2px solid #bb9a57; border-radius:50%; box-shadow:inset 0 0 0 8px #dec2860a,inset 0 0 0 9px #e6c87b66,0 0 28px #d1a96d22; transition:filter 1s,opacity 1s; }
.enchant-orbit::after { content:'✦'; position:absolute; top:-14px; left:calc(50% - 9px); color:#ffe7a1; font-size:23px; text-shadow:0 0 12px #f9d479; }
.enchant-orbit.inner { width:190px; height:190px; border-style:dashed; border-color:#b293d8; transform:rotate(45deg); }
.enchant-orbit.crown { width:295px; height:295px; border:1px solid #dfc88955; outline:1px dashed #d0b78266; outline-offset:6px; opacity:.6; }
.enchant-orbit.crown::after { content:'✧'; }
.enchant-seal { width:154px; height:154px; transform:rotate(45deg); position:absolute; border:1px solid #dfb57855; outline:1px solid #dfb57833; outline-offset:12px; }
.enchant-rays { position:absolute; width:500px; height:500px; border-radius:50%; opacity:0; background:repeating-conic-gradient(from 10deg,transparent 0deg 12deg,#e2b96177 13deg 14deg,transparent 15deg 27deg); mask-image:radial-gradient(circle,transparent 14%,#000 32%,transparent 68%); pointer-events:none; }
.enchant-column { position:absolute; height:100%; width:130px; opacity:0; background:linear-gradient(90deg,transparent,#f8d89055,transparent); mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent); pointer-events:none; }
#enchant-motes { position:absolute; inset:50%; pointer-events:none; }
#enchant-motes i { position:absolute; width:var(--size); height:var(--size); border-radius:50%; background:#ffedb1; box-shadow:0 0 6px 2px #ffe5a188,0 0 15px #b08df3; opacity:0; transform:rotate(var(--angle)) translateX(var(--reach)); }
.enchant-shockwave { position:absolute; width:125px; height:125px; border:2px solid #ffecab; box-shadow:0 0 15px #eaca83,inset 0 0 20px #dcc287; border-radius:50%; opacity:0; }
.enchant-ritual { display:flex; justify-content:center; gap:35px; margin:2px 0 18px; font:10px 'Yu Mincho',serif; letter-spacing:.2em; color:#829693; }
.enchant-ritual span { padding-bottom:8px; border-bottom:1px solid #8e98712a; transition:color .6s,text-shadow .6s; }
.rolling .enchant-ritual span:first-child,.gathering .enchant-ritual span:nth-child(2),.suspended .enchant-ritual span:nth-child(3),.success .enchant-ritual span { color:#ffe4ab; text-shadow:0 0 12px #eac26f; border-color:#d6b26e; }
.enchant-burst { position:absolute; inset:-20px; opacity:0; background:radial-gradient(circle,#fffce5 0, #f5cc6788 15%,#bd82df33 34%,transparent 63%); border-radius:50%; }
#enchant-current,#enchant-pool { color:#acbdb9; font-size:12px; line-height:1.6; margin:9px 0; }#enchant-risk { color:#e6b398; font-size:12px; }#enchant-result { display:block; min-height:40px; margin:19px 0 10px; color:#f4dfae; font-size:17px; line-height:1.6; }
.enchant-actions { display:flex; justify-content:center; gap:15px; }.enchant-actions button { min-width:150px; }.enchant-actions button:disabled { opacity:.35; }
.rolling .outer { animation:enchant-spin 6s linear infinite; }.rolling .inner { animation:enchant-spin 4s linear infinite reverse; }.rolling .crown { animation:enchant-spin 18s linear infinite reverse; }.rolling .enchant-seal { animation:enchant-spin 9s linear infinite; }.rolling #enchant-item-art { animation:enchant-suspense 8.2s ease-in forwards; }
.rolling .enchant-rays { animation:enchant-rays 8.2s linear forwards; }.rolling #enchant-motes i { animation:enchant-mote 2.6s var(--delay) ease-in infinite; }
.gathering .enchant-orbit { filter:brightness(1.7) drop-shadow(0 0 10px #d2b6ff); opacity:1; }.gathering .outer { animation-duration:2.7s; }.gathering .inner { animation-duration:1.8s; }
.gathering .enchant-column { opacity:1; transition:opacity 2s; }.gathering .enchant-chamber { box-shadow:0 0 0 5px #a9904c17,inset 0 0 80px #8b60b744,0 0 90px #c1996555; }
.suspended .enchant-orbit,.suspended .enchant-seal,.suspended #enchant-motes i { animation-play-state:paused; }.suspended .enchant-orbit,.suspended .enchant-seal { opacity:.18; }.suspended .enchant-column { opacity:0; transition:opacity .4s; }
.success .enchant-burst { animation:enchant-flash 1.8s ease-out; }.success .enchant-shockwave { animation:enchant-wave 1.6s ease-out; }.success #enchant-item-art { box-shadow:0 0 55px #f5d371bb; animation:enchant-arrival 1s ease-out; }.success #enchant-result { color:#ffe7a3; text-shadow:0 0 20px #efb740; animation:enchant-reveal .85s ease-out; font-size:23px; font-family:'Yu Mincho',serif; }
.success #enchant-motes i { animation:enchant-scatter 2.4s calc(var(--delay) / 3) ease-out both; }.success .enchant-rays { opacity:.6; animation:enchant-spin 36s linear infinite; }.exceptional .enchant-chamber { box-shadow:0 0 0 5px #e5c57b33,inset 0 0 60px #d1a95933,0 0 110px #e5be7566; }
.failure #enchant-item-art { animation:enchant-break .9s forwards; }.failure #enchant-result { color:#dea6bc; }
@keyframes enchant-spin { to { transform:rotate(360deg); } }
@keyframes enchant-suspense { 0% { transform:scale(1); filter:brightness(1); } 29% { transform:translateY(-4px) scale(1.03); filter:brightness(1.1); } 70% { transform:translateY(-8px) scale(1.13); filter:brightness(1.6); } 82% { transform:scale(.92); filter:brightness(2); } 96% { transform:scale(.92); filter:brightness(2); } 100% { transform:scale(.98); filter:brightness(3); } }
@keyframes enchant-rays { 0% { opacity:0; transform:rotate(0); } 30% { opacity:.15; } 80% { opacity:.7; } 82%,100% { opacity:0; transform:rotate(75deg); } }
@keyframes enchant-mote { 0% { opacity:0; transform:rotate(var(--angle)) translateX(var(--reach)) scale(.5); } 20% { opacity:1; } 100% { opacity:0; transform:rotate(calc(var(--angle) + 75deg)) translateX(10px) scale(.3); } }
@keyframes enchant-scatter { from { opacity:1; transform:rotate(var(--angle)) translateX(45px) scale(1.5); } to { opacity:0; transform:rotate(calc(var(--angle) + 15deg)) translateX(calc(var(--reach) * 1.8)) scale(.3); } }
@keyframes enchant-wave { from { opacity:.9; transform:scale(.7); } to { opacity:0; transform:scale(4); } }
@keyframes enchant-arrival { from { transform:scale(.8); filter:brightness(2); } 40% { transform:scale(1.18); filter:brightness(1.35); } to { transform:scale(1); filter:brightness(1); } }
@keyframes enchant-flash { from { opacity:.9; transform:scale(.65); } to { opacity:0; transform:scale(1.35); } }
@keyframes enchant-reveal { from { opacity:0; transform:translateY(12px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes enchant-break { 30% { transform:translateX(-5px) rotate(-4deg); filter:grayscale(.7); } 60% { transform:translateX(5px) rotate(4deg); } to { opacity:.2; transform:scale(.8); filter:grayscale(1); } }
@media(prefers-reduced-motion:reduce) { .enchant-chamber * { animation-duration:.01ms!important; animation-iteration-count:1!important; } }
@media(max-height:780px) { .enchant-stage { height:240px; transform:scale(.8); margin:-15px 0; }.enchant-chamber { padding:18px 26px; }.enchant-chamber h2 { font-size:22px; }.enchant-ritual { margin-bottom:10px; } }
@media(max-width:700px) { .ring-tray { margin-left:0; }.economy-panel { padding:16px; }.bank-columns { grid-template-columns:1fr; }.bank-columns section>div { max-height:24vh; }.shop-item { grid-template-columns:54px 1fr auto; gap:8px; }.shop-item img { width:54px; height:54px; }.enchant-chamber { padding:18px; }.enchant-stage { height:205px; } }