* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html,body { height:100%; background:#0b1020; overflow:hidden; font-family:"Segoe UI","Kanit",system-ui,sans-serif; color:#eef; user-select:none; } canvas { display:block; image-rendering:pixelated; image-rendering:crisp-edges; cursor:crosshair; } #game { position:fixed; inset:0; } /* ---------- HUD ---------- */ #appVersion { flex:none; margin-left:auto; padding:3px 7px; color:#9fb0e0; background:rgba(20,26,48,.82); border:1px solid #3a4675; border-radius:6px; font-size:10.5px; font-weight:700; line-height:1; letter-spacing:.04em; pointer-events:none; } #hud { position:fixed; top:10px; left:10px; z-index:20; pointer-events:none; display:flex; flex-direction:column; gap:6px; } #playerHudCard { pointer-events:auto; cursor:pointer; } #playerHudCard:hover, #playerHudCard:focus-visible, #playerHudCard[aria-expanded="true"] { border-color:#5ec6ff; outline:none; box-shadow:0 4px 14px rgba(0,0,0,.4),0 0 12px rgba(94,198,255,.3); } .panel { background:rgba(20,26,48,.78); border:2px solid #3a4675; border-radius:10px; padding:8px 12px; backdrop-filter:blur(4px); box-shadow:0 4px 14px rgba(0,0,0,.4); } #nameLine { font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; } #hName { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #lvlBadge { background:#f0b429; color:#3a2b00; font-weight:800; font-size:12px; border-radius:6px; padding:1px 7px; } .bar { width:190px; height:13px; border-radius:7px; background:#141a2e; border:1px solid #000; overflow:hidden; margin-top:5px; position:relative; } .bar > span { display:block; height:100%; transition:width .18s; } .bar > b { position:absolute; inset:0; text-align:center; font-size:10px; line-height:13px; font-weight:700; color:#fff; text-shadow:0 1px 1px #000; } #hpFill { background:linear-gradient(#ff6b6b,#c0392b); } #mpFill { background:linear-gradient(#69d7ff,#315dce); } #mpBar.is-low { border-color:#d8aa45; box-shadow:0 0 7px rgba(216,170,69,.34); } #mpBar.is-low #mpFill { background:linear-gradient(#d8aa45,#8e641c); } #xpEdgeBar { position:fixed; z-index:96; left:0; right:0; bottom:0; width:100vw; height:4px; overflow:hidden; background:#211a0a; box-shadow:0 -1px 0 rgba(8,13,27,.9); pointer-events:none; } #xpEdgeFill { display:block; width:0; height:100%; background:linear-gradient(90deg,#b47a13,#ffe29a,#d8aa45); box-shadow:0 0 4px rgba(255,226,154,.65); transition:width .18s; } #quickStats { display:flex; align-items:center; gap:10px; margin-top:6px; color:#b8c6eb; font-size:10.5px; font-weight:800; white-space:nowrap; } #quickStats b { color:#fff0bd; font-size:11.5px; } #quickStats i { color:#7fd8ff; font-size:16px; font-style:normal; line-height:8px; vertical-align:-1px; } #serverRates { margin-left:2px; padding-left:7px; border-left:1px solid #445277; color:#ffe29a; font-size:9px; font-weight:850; letter-spacing:.025em; white-space:nowrap; } #serverRates.boostActive { color:#72d99b; text-shadow:0 0 7px rgba(114,217,155,.32); } #lootTicker { position:fixed; top:0; left:50%; z-index:45; width:min(680px,50vw); height:38px; display:block; overflow:hidden; transform:translateX(-50%); color:#e8eeff; background:linear-gradient(180deg,rgba(20,29,53,.97),rgba(10,16,34,.94)); border:1px solid #4b5f94; border-top:0; border-radius:0 0 12px 12px; box-shadow:0 7px 22px rgba(0,0,0,.42),inset 0 -1px 0 rgba(137,172,255,.11); pointer-events:none; } #lootTicker[hidden] { display:none; } .lootTickerViewport { width:100%; min-width:0; height:100%; position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); } .lootTickerMessage { width:max-content; height:100%; display:flex; align-items:center; gap:8px; padding:0 12px; color:#dfe7fb; font-size:12px; font-weight:700; white-space:nowrap; will-change:transform; } .lootTickerMessage.is-running { animation:lootTickerScroll var(--loot-ticker-duration,6s) linear both; } .lootTickerIcon { width:29px; height:29px; flex:none; display:grid; place-items:center; overflow:hidden; color:#fff; background:linear-gradient(145deg, hsl(var(--loot-tier-hue,42) 82% 42% / .96),hsl(var(--loot-tier-hue,42) 58% 15% / .96)); border:1px solid hsl(var(--loot-tier-hue,42) 90% 72%); border-radius:8px; box-shadow:inset 0 0 10px rgba(255,255,255,.2), 0 0 12px hsl(var(--loot-tier-hue,42) 88% 58% / .45); font-size:17px; } .lootTickerIcon img { width:25px; height:25px; display:block; object-fit:contain; image-rendering:pixelated; } .lootTickerPlayer { color:#8ddcff; font-weight:900; } .lootTickerReward { color:#fff1ad; font-weight:900; } .lootTickerSource { color:#aab7d7; } #lootTicker[data-rarity="uncommon"] { border-color:#3e9467; box-shadow:0 7px 22px rgba(0,0,0,.42),0 0 15px rgba(70,215,129,.15); } #lootTicker[data-rarity="uncommon"] .lootTickerReward { color:#76efa3; } #lootTicker[data-rarity="rare"] { border-color:#4e7fca; box-shadow:0 7px 22px rgba(0,0,0,.42),0 0 17px rgba(76,143,255,.2); } #lootTicker[data-rarity="rare"] .lootTickerReward { color:#75b5ff; } #lootTicker[data-rarity="legendary"] { border-color:#b78132; box-shadow:0 7px 22px rgba(0,0,0,.42),0 0 19px rgba(255,190,61,.24); } #lootTicker[data-rarity="legendary"] .lootTickerReward { color:#ffd86b; text-shadow:0 0 8px rgba(255,201,65,.42); } #lootTicker[data-tier] { border-color:hsl(var(--loot-tier-hue) 76% 61%); box-shadow:0 7px 22px rgba(0,0,0,.42),0 0 19px hsl(var(--loot-tier-hue) 88% 58% / .28); } #lootTicker[data-tier] .lootTickerReward { color:hsl(var(--loot-tier-hue) 92% 78%); text-shadow:0 0 8px hsl(var(--loot-tier-hue) 88% 58% / .42); } #lootTicker[data-tier="1"] { border-color:#3a4675; box-shadow:0 7px 22px rgba(0,0,0,.42); } #lootTicker[data-tier="1"] .lootTickerIcon { color:#dfe7fb; background:transparent; border-color:#53638a; box-shadow:none; } #lootTicker[data-tier="1"] .lootTickerReward { color:#f1f3f8; text-shadow:none; } @keyframes lootTickerScroll { from{ transform:translateX(var(--loot-ticker-start,680px)); } to{ transform:translateX(-100%); } } #rewardBoostTicker { position:fixed; top:46%; left:50%; z-index:94; width:min(620px,88vw); height:54px; transform:translate(-50%,-50%); overflow:hidden; pointer-events:none; color:#ffe29a; background:linear-gradient(90deg,transparent,rgba(8,13,27,.96) 12%,rgba(24,37,65,.98) 50%,rgba(8,13,27,.96) 88%,transparent); border-block:2px solid #d8aa45; box-shadow:0 10px 30px rgba(0,0,0,.48); } #rewardBoostTicker[hidden] { display:none; } #rewardBoostTickerMessage { width:max-content; height:100%; display:flex; align-items:center; padding:0 14px; font-size:17px; font-weight:950; white-space:nowrap; text-shadow:0 2px 0 #080d1b; } #rewardBoostTickerMessage.is-running { animation:rewardBoostRun 6.2s linear both; } @keyframes rewardBoostRun { from{ transform:translateX(620px); } to{ transform:translateX(-100%); } } #combatRewardFeed { position:fixed; left:0; top:0; z-index:35; width:190px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; pointer-events:none; transform:translate3d(-300px,-300px,0); contain:layout style paint; will-change:transform; } .combatRewardRow { min-height:30px; max-width:190px; display:flex; align-items:center; gap:7px; padding:5px 9px 5px 6px; border:1px solid #4a5d8e; border-left:3px solid #69d7ff; border-radius:6px; color:#eef3ff; background:rgba(8,13,27,.94); box-shadow:0 5px 14px rgba(0,0,0,.45); animation:combatRewardRise 1.8s cubic-bezier(.16,.8,.3,1) both; } .combatRewardRow.gold { border-left-color:#d8aa45; color:#ffe29a; } .combatRewardRow.item,.combatRewardRow.items-overflow { border-left-color:#c9a7ff; color:#f0e7ff; } .combatRewardRow b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; } .combatRewardIcon { width:20px; height:20px; flex:none; display:grid; place-items:center; overflow:hidden; border:1px solid #35476f; background:#111a2d; color:#ffe29a; font-size:12px; } .combatRewardIcon img { width:18px; height:18px; object-fit:contain; image-rendering:pixelated; } @keyframes combatRewardRise { 0%{opacity:0;transform:translateY(4px) scale(.99)} 5%,90%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-5px) scale(1)} } #targetLock { position:fixed; top:44px; left:50%; z-index:38; width:min(165px,calc(100vw - 24px)); min-height:52px; transform:translateX(-50%); display:grid; grid-template-columns:minmax(0,1fr); gap:4px; align-items:center; padding:7px 8px 7px 12px; background:linear-gradient(180deg,rgba(25,34,62,.96),rgba(13,19,39,.96)); border:2px solid #5ec6ff; border-radius:12px; box-shadow:0 7px 22px rgba(0,0,0,.48),0 0 14px rgba(94,198,255,.18); pointer-events:auto; } #targetLock[hidden] { display:none; } .targetLockHeading { min-width:0; display:flex; align-items:center; gap:5px; } .targetLockHealth { min-width:0; display:grid; grid-template-columns:18px minmax(0,1fr); gap:4px; align-items:center; } #targetLockKind { width:18px; height:18px; display:grid; place-items:center; border-radius:50%; color:#10233a; background:#78d4ff; font-size:9px; font-weight:900; } #targetLock[data-kind="player"] #targetLockKind { color:#17311c; background:#73e29a; } #targetLock[data-kind="boss"] #targetLockKind { color:#3d2500; background:#ffd86b; } #targetLockName { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; font-size:12px; } #targetLockLevel { flex:none; color:#ffd86b; font-size:10px; font-weight:800; } .targetLockBar { position:relative; width:100%; height:10px; overflow:hidden; border:1px solid #080b14; border-radius:999px; background:#141a2e; } #targetLockHpFill { display:block; height:100%; width:100%; background:linear-gradient(#ff7373,#c83535); transition:width .16s; } #targetLockHpText { position:absolute; inset:0; color:#fff; font-size:8px; line-height:9px; text-align:center; text-shadow:0 1px 1px #000; } #bossTargetMeta { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:6px; } #bossTargetMeta[hidden], #bossDamagePanel[hidden] { display:none; } #bossFocusTarget { min-width:0; overflow:hidden; color:#ffca78; font-size:8px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; } #bossFocusTarget::before { content:'◎ '; color:#ff786e; } #bossDamageToggle { width:28px; height:18px; flex:none; display:grid; align-content:center; gap:2px; padding:3px 6px; border:1px solid #74613a; border-radius:4px; color:#ffe29a; background:#211b12; cursor:pointer; } #bossDamageToggle i { display:block; width:100%; height:1px; background:currentColor; box-shadow:0 1px #080d1b; } #bossDamageToggle:hover, #bossDamageToggle:focus-visible, #bossDamageToggle[aria-expanded="true"] { border-color:#ffe29a; color:#fff2bd; background:#3a2c16; outline:none; } #bossDamagePanel { position:absolute; top:calc(100% + 7px); right:0; z-index:2; width:min(330px,calc(100vw - 16px)); box-sizing:border-box; padding:8px; border:2px solid #d8aa45; border-radius:8px; color:#eef3ff; background:linear-gradient(180deg,rgba(17,26,45,.99),rgba(8,13,27,.99)); box-shadow:0 14px 34px rgba(0,0,0,.62),inset 0 0 0 1px #080d1b; } #bossDamagePanel header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; } #bossDamagePanel header strong { color:#ffe29a; font-size:11px; } #bossDamagePanel header small { color:#69d7ff; font:800 7px/1 monospace; letter-spacing:.12em; } .bossDamageColumns,.bossDamageRow { display:grid; grid-template-columns:minmax(0,1fr) 64px 76px; gap:6px; align-items:center; } .bossDamageColumns { padding:0 6px 5px; color:#788bad; font-size:7px; font-weight:900; } .bossDamageColumns span:not(:first-child),.bossDamageRow span:not(:first-child) { text-align:right; } .bossDamageRow { min-height:28px; padding:3px 6px; border-top:1px solid #263657; font-size:9px; } .bossDamageRow b { min-width:0; overflow:hidden; color:#eef3ff; text-overflow:ellipsis; white-space:nowrap; } .bossDamageRow b::before { content:'#' attr(data-rank) ' '; color:#d8aa45; } .bossDamageRow .bossDps { color:#69d7ff; font-weight:850; } .bossDamageRow .bossDamage { color:#ffe29a; font-weight:900; } #bossDamageTop:empty::after { content:'ยังไม่มีผู้เล่นสร้างดาเมจ'; display:block; padding:14px 6px; color:#8496b9; font-size:9px; text-align:center; } #bossDamageSelf { margin-top:6px; padding-top:5px; border-top:2px solid #d8aa45; } #bossDamageSelf:empty::after { content:'คุณยังไม่มีอันดับ'; display:block; padding:5px 6px 2px; color:#93a4c8; font-size:8px; } #bossDamageSelf .bossDamageRow { border:1px solid #52658c; background:#182541; } .targetLockActions { grid-column:1; display:grid; grid-template-columns:1fr; gap:4px; margin-top:2px; } .targetLockActions[hidden] { display:none; } .targetLockActions button { flex:1; min-height:25px; padding:3px 7px; border:1px solid #486096; border-radius:7px; background:#243a63; color:#eaf0ff; font:800 10px "Segoe UI",sans-serif; cursor:pointer; } .targetLockActions button:hover, .targetLockActions button:focus-visible { border-color:#5ec6ff; background:#2b4a7a; color:#fff; outline:none; } #targetLockPvp { border-color:#7a3a3a; } #targetLockParty { border-color:#6a58a6; background:#342b63; } #targetLockClose { position:absolute; top:0; right:0; z-index:1; width:27px; height:27px; transform:translate(38%,-38%); border:1px solid #53638e; border-radius:50%; background:#243052; color:#cbd6f5; cursor:pointer; font-size:11px; } #targetLockClose:hover, #targetLockClose:focus-visible { color:#fff; background:#6b3030; border-color:#ff8a7a; outline:none; } body.targetLocked #followTag, body.targetLocked #pvpBanner { top:104px; } body.playerTargetLocked #followTag, body.playerTargetLocked #pvpBanner { top:164px; } #goldHud { align-self:flex-start; pointer-events:none; padding:5px 10px; color:#ffd86b; background:rgba(20,26,48,.86); border:1px solid #66572e; border-radius:999px; box-shadow:0 3px 10px rgba(0,0,0,.35); font-size:12px; font-weight:800; } #settingsBtn { position:fixed; top:10px; right:10px; z-index:24; width:38px; height:38px; border:2px solid #3a4675; border-radius:10px; background:rgba(20,26,48,.9); color:#fff; font-size:19px; cursor:pointer; } #settingsBtn:hover, #settingsBtn:focus-visible, #settingsBtn[aria-expanded="true"] { border-color:#5ec6ff; outline:none; } #townReturnBtn { position:fixed; top:108px; right:148px; z-index:24; width:38px; height:38px; border:2px solid #5573a6; border-radius:10px; background:rgba(20,26,48,.92); color:#fff; font-size:18px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.38); } #townReturnBtn:hover, #townReturnBtn:focus-visible { border-color:#ffd86b; background:#33476d; outline:none; } #minimapCoords { position:fixed; top:234px; right:14px; z-index:23; width:120px; padding:2px 4px; border-radius:5px; background:rgba(10,14,28,.68); color:#c7d2ee; text-align:center; font:700 9px/1.25 "Segoe UI",sans-serif; letter-spacing:.02em; pointer-events:none; } #minimapCoords[hidden] { display:none; } #partyPanel { position:relative; z-index:24; align-self:flex-start; box-sizing:border-box; width:220px; max-height:min(220px,calc(100vh - 190px)); overflow:hidden; padding:0; pointer-events:auto; border-color:#505f91; background:rgba(12,18,38,.94); box-shadow:0 10px 28px rgba(0,0,0,.42); } #partyPanel[hidden], #partyInvite[hidden], #partyBody[hidden] { display:none; } .partyHeader { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; border-bottom:1px solid #39466f; background:linear-gradient(90deg,#2c315d,#17223d); } #partyToggle { display:flex; align-items:center; justify-content:space-between; min-height:28px; padding:4px 7px; border:0; background:transparent; color:#e5e9ff; cursor:pointer; font:900 9px/1 "Segoe UI",sans-serif; letter-spacing:.08em; } #partyToggle small { color:#86e7b3; font-size:9px; letter-spacing:0; } #partyLeave { margin:3px; padding:0 6px; border:1px solid #74484f; border-radius:5px; background:#442b39; color:#ffc2c8; cursor:pointer; font:800 8px "Segoe UI",sans-serif; } #partyToggle:focus-visible, #partyLeave:focus-visible, .partyMemberActions button:focus-visible { outline:2px solid #69d5ff; outline-offset:-2px; } #partyBody { max-height:calc(min(220px,100vh - 190px) - 29px); overflow-y:auto; padding:4px; scrollbar-width:thin; scrollbar-color:#536791 #11182d; } #partyBonus { min-height:17px; overflow:hidden; padding:3px 5px; border:1px solid #43517a; border-radius:5px; background:#17213c; color:#ffe49a; font:800 7px/1.25 "Segoe UI",sans-serif; text-overflow:ellipsis; white-space:nowrap; } #partyActiveHelp { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } #partyMembers { display:grid; gap:3px; margin-top:3px; } .partyMember { --party-color:#6fd9ff; position:relative; min-width:0; display:flex; align-items:center; gap:3px; height:26px; padding:0; } .partyMember.offline { filter:saturate(.35); opacity:.72; } .partyCrown { color:#ffd43b; text-shadow:0 0 7px #b97b18; } .partyHpBar { position:relative; flex:1; min-width:0; height:26px; overflow:hidden; border:1px solid #35456f; border-left:3px solid var(--party-color); border-radius:6px; background:#12172a; } .partyHpBar > i { position:absolute; inset:0 auto 0 0; display:block; background:linear-gradient(90deg,rgba(180,45,68,.92),rgba(235,92,111,.9)); } .partyHpCopy { position:absolute; inset:0; display:flex; align-items:center; gap:4px; min-width:0; padding:0 5px; color:#f5f7ff; font:850 8px/1 "Segoe UI",sans-serif; text-shadow:0 1px 2px #070b16; } .partyHpIdentity { min-width:0; flex:1; display:flex; align-items:center; gap:3px; } .partyHpIdentity b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; } .partyHpText { flex:none; color:#fff; font-size:7px; font-variant-numeric:tabular-nums; } .partyStatusIcon,.partyWorldIcon { flex:none; width:12px; height:12px; display:grid; place-items:center; border:1px solid rgba(225,234,255,.36); border-radius:4px; background:rgba(7,12,25,.68); color:var(--party-color); font:900 8px/1 "Segoe UI Symbol","Segoe UI",sans-serif; text-shadow:none; } .partyStatusIcon.statusDEAD { color:#ff858f; } .partyStatusIcon.statusAFK,.partyStatusIcon.statusOFFLINE { color:#a6afc3; } .partyStatusIcon.statusSAFE { color:#72d99b; } .partyWorldIcon { color:#c9a7ff; } .partyHpBar[hidden],.partyMemberActions[hidden] { display:none; } .partyMemberActions { flex:1; min-width:0; display:flex; gap:2px; margin:0; } .partyMemberActions button { flex:1; min-width:0; height:24px; padding:0; border:1px solid #50618d; border-radius:6px; background:#26375d; color:#dfe8ff; cursor:pointer; font:900 11px "Segoe UI",sans-serif; } .partyMemberActions button[data-action="kick"] { border-color:#774750; color:#ffc0c8; background:#472b39; } .partyMemberMenuButton { flex:none; width:24px; height:24px; padding:0; border:1px solid #50618d; border-radius:6px; background:#1f2d4e; color:#dfe8ff; cursor:pointer; font:900 13px/1 "Segoe UI",sans-serif; } #partyMessage { min-height:11px; margin:3px 2px 0; color:#ffbd80; font:750 7px/1.25 "Segoe UI",sans-serif; } #partyMessage:empty { display:none; } #partyMessage.error { color:#ff929e; } #partyInvite { position:fixed; inset:0; z-index:91; display:grid; place-items:center; padding:18px; background:rgba(5,8,18,.58); backdrop-filter:blur(3px); } #partyInvite .panel { box-sizing:border-box; width:min(330px,92vw); padding:17px; border-color:#7669ba; text-align:center; box-shadow:0 18px 48px rgba(0,0,0,.62); } #partyInvite b, #partyInvite small { display:block; } #partyInvite b { color:#f2edff; font-size:14px; } #partyInvite small { margin:6px 0 14px; color:#a8b4d4; font-size:9px; } .partyInviteActions { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .partyInviteActions button { min-height:38px; border:1px solid #596a98; border-radius:8px; background:#29385e; color:#e8eeff; cursor:pointer; font-weight:850; } #partyAccept { border-color:#4b9b75; background:#255b49; color:#c9ffe1; } #bossMvpPanel { position:fixed; top:308px; right:10px; z-index:25; box-sizing:border-box; width:128px; border:1px solid #6f5a23; border-radius:9px; overflow:hidden; background:rgba(10,14,28,.94); color:#e9edff; box-shadow:0 8px 24px rgba(0,0,0,.38); } #bossMvpPanel[hidden], #bossMvpBody[hidden] { display:none; } #bossMvpToggle { width:100%; min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:3px; padding:6px; border:0; background:linear-gradient(135deg,#342816,#1b243e); color:#ffd86b; font:800 11px/1.2 "Segoe UI",sans-serif; cursor:pointer; } #bossMvpToggle small { min-width:0; overflow:hidden; color:#b9c3df; font-size:8px; font-weight:700; text-align:right; text-overflow:ellipsis; white-space:nowrap; } #bossMvpBody { padding:6px; border-top:1px solid #514626; } #bossMvpBody p { margin:0 0 7px; color:#aeb9d5; font:600 9px/1.35 "Segoe UI",sans-serif; } #bossMvpPlans { display:grid; grid-template-columns:1fr; gap:5px; margin-bottom:7px; } #bossMvpPlans button { min-height:31px; padding:4px; border:1px solid #665b3b; border-radius:6px; background:#202b49; color:#ffe49a; font:800 9px/1.2 "Segoe UI",sans-serif; cursor:pointer; } #bossMvpPlans button:hover, #bossMvpPlans button:focus-visible { border-color:#ffd86b; outline:none; } .bossMvpRow { display:flex; align-items:center; gap:6px; padding:6px 3px; border-top:1px solid #29334f; font:700 10px/1.25 "Segoe UI",sans-serif; } .bossMvpRow input { width:16px; height:16px; accent-color:#f5bf37; } .bossMvpRow span { flex:1; } .bossMvpRow small { color:#8fa2cf; font-size:8px; } #bossMvpMessage { min-height:12px; margin-top:5px; color:#ffcc80; font:700 9px/1.25 "Segoe UI",sans-serif; } #townReturnConfirm, #townWarpLoading { position:fixed; inset:0; z-index:82; display:grid; place-items:center; padding:18px; background:rgba(6,9,20,.68); backdrop-filter:blur(4px); } #townReturnConfirm[hidden], #townWarpLoading[hidden] { display:none; } .townReturnDialog { width:min(340px,90vw); padding:22px; text-align:center; border-color:#d7a94b; box-shadow:0 18px 48px rgba(0,0,0,.62),0 0 24px rgba(255,205,94,.12); } .townReturnIcon { width:54px; height:54px; margin:0 auto 10px; display:grid; place-items:center; border:2px solid #d7a94b; border-radius:50%; background:#2a385b; font-size:26px; } .townReturnDialog h2 { margin:0 0 7px; color:#ffd86b; font-size:20px; } .townReturnDialog p { margin:0 0 18px; color:#aeb9db; font-size:12px; line-height:1.5; } .townReturnActions { display:flex; gap:9px; } .townReturnActions button { flex:1; min-height:38px; border:1px solid #52628e; border-radius:9px; background:#263457; color:#eaf0ff; font-weight:800; cursor:pointer; } #townReturnConfirmBtn { border-color:#d7a94b; background:#70511f; color:#fff4c4; } .townReturnActions button:hover, .townReturnActions button:focus-visible { filter:brightness(1.14); outline:none; } .townWarpLoadingCard { width:min(280px,84vw); padding:21px; text-align:center; border-color:#67c7ff; } .townWarpLoadingCard b, .townWarpLoadingCard small { display:block; } .townWarpLoadingCard b { margin-top:10px; color:#eaf7ff; font-size:15px; } .townWarpLoadingCard small { margin:4px 0 13px; color:#8da5cf; font-size:10px; } .townWarpSpinner { display:block; width:38px; height:38px; margin:auto; border:4px solid #263b62; border-top-color:#67d7ff; border-radius:50%; animation:townWarpSpin .7s linear infinite; } .townWarpProgress { display:block; width:100%; height:5px; overflow:hidden; border-radius:999px; background:linear-gradient(90deg,#4364b7,#68ddff,#4364b7); background-size:200% 100%; animation:townWarpFlow .75s linear infinite; } @keyframes townWarpSpin { to { transform:rotate(360deg); } } @keyframes townWarpFlow { to { background-position:-200% 0; } } #settingsMenu { position:fixed; top:54px; right:10px; z-index:40; width:172px; padding:6px; } #settingsMenu[hidden] { display:none; } .settingsOption { box-sizing:border-box; width:100%; padding:8px 10px; border:0; border-radius:7px; background:transparent; color:#eef; text-align:left; font-size:12px; font-weight:700; cursor:pointer; } .settingsOption:hover, .settingsOption:focus-visible { background:#303b67; outline:none; } .settingsOption.off { color:#7f8aa9; opacity:.72; } .settingsDownload { margin-top:5px; padding-top:9px; border-top:1px solid #39456c; border-radius:0 0 7px 7px; color:#bfe5ff; font-size:11px; } .settingsDownload.checking { color:#7f8aa9; cursor:wait; opacity:.72; } .settingsDownloadStatus { min-height:0; padding:0 10px; color:#ffcf8a; font:700 9px/1.35 "Segoe UI",sans-serif; } .settingsDownloadStatus:not(:empty) { padding-top:3px; padding-bottom:4px; } .settingsLogout { margin-top:5px; padding-top:9px; border-top:1px solid #39456c; color:#ff9d9d; } .settingsLogout:hover, .settingsLogout:focus-visible { background:#5a2b34; color:#ffd0d0; } .settingsLogout:disabled { opacity:.6; cursor:wait; } /* new-mail notification dot on ⚙️ + inbox badge in the menu */ .notifDot { position:absolute; top:-3px; right:-3px; width:11px; height:11px; border-radius:50%; background:#ff4d4d; border:2px solid #141a30; box-shadow:0 0 6px rgba(255,77,77,.85); } .settingsInbox { display:flex; align-items:center; justify-content:space-between; gap:8px; } .inboxMenuBadge { min-width:18px; padding:0 5px; height:18px; border-radius:9px; background:#ff4d4d; color:#fff; font:800 10px/18px "Segoe UI",sans-serif; text-align:center; } #inboxModal { position:fixed; inset:0; z-index:85; display:grid; place-items:center; padding:18px; background:rgba(5,8,18,.74); backdrop-filter:blur(5px); } #inboxModal[hidden] { display:none; } .inboxWindow { width:min(500px,94vw); max-height:min(720px,88vh); display:flex; flex-direction:column; padding:0; overflow:hidden; border-color:#657bb1; box-shadow:0 22px 60px rgba(0,0,0,.7); } .inboxHeader { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px; border-bottom:1px solid #38476e; background:linear-gradient(135deg,#202d50,#17223e); } .inboxHeader small { color:#7fcff2; font:800 9px/1 "Segoe UI",sans-serif; letter-spacing:.12em; } .inboxHeader h2 { margin:3px 0 0; color:#f4f7ff; font-size:18px; } .inboxHeader button { width:34px; height:34px; border:1px solid #52638d; border-radius:8px; background:#253353; color:#dce6ff; cursor:pointer; } .inboxList { min-height:0; overflow:auto; padding:12px; display:grid; gap:10px; } .inboxEmpty { margin:0; padding:26px 18px; text-align:center; color:#8a97bd; } .inboxCard { border:1px solid #38476e; border-radius:11px; padding:11px 12px; background:linear-gradient(120deg,rgba(34,45,80,.9),rgba(20,27,50,.9)); display:grid; gap:6px; } .inboxCard.unclaimed { border-color:#ffca4a; box-shadow:0 0 0 1px rgba(255,202,74,.25); } .inboxCardHead { display:flex; align-items:baseline; justify-content:space-between; gap:8px; } .inboxCardTitle { color:#ffe6ad; font-size:14px; } .inboxCardTime { color:rgba(160,174,205,.7); font-size:10px; white-space:nowrap; } .inboxCardBody { color:#d7deef; font-size:12.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word; } .inboxRewards { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; } .inboxReward { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:8px; background:rgba(255,255,255,.07); color:#f1f3f8; font-size:11px; } .inboxReward[data-item-tier] { border:1px solid hsl(var(--item-tier-hue) 72% 62%); background:hsl(var(--item-tier-hue) 55% 22%); } .inboxReward[data-item-tier="1"] { color:#f1f3f8; border-color:rgba(160,174,205,.35); background:transparent; box-shadow:none; } .inboxReward img { width:20px; height:20px; image-rendering:pixelated; } .inboxClaimBtn { justify-self:start; margin-top:3px; padding:7px 14px; border:none; border-radius:8px; font-weight:800; color:#22320a; cursor:pointer; background:linear-gradient(100deg,#8ff06b,#4fd08a); } .inboxClaimBtn:hover { filter:brightness(1.06); } .inboxClaimBtn:disabled { background:#3a4560; color:#9fb0c8; cursor:default; } #hotkeyModal { position:fixed; inset:0; z-index:84; display:grid; place-items:center; padding:18px; background:rgba(5,8,18,.74); backdrop-filter:blur(5px); } #hotkeyModal[hidden] { display:none; } .hotkeyWindow { width:min(520px,94vw); max-height:min(720px,88vh); display:flex; flex-direction:column; padding:0; overflow:hidden; border-color:#657bb1; box-shadow:0 22px 60px rgba(0,0,0,.7); } .hotkeyHeader { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px; border-bottom:1px solid #38476e; background:linear-gradient(135deg,#202d50,#17223e); } .hotkeyHeader small { color:#7fcff2; font:800 9px/1 monospace; letter-spacing:.18em; } .hotkeyHeader h2 { margin:3px 0 0; color:#f4f7ff; font-size:19px; } .hotkeyHeader button { width:34px; height:34px; border:1px solid #52638d; border-radius:8px; background:#253353; color:#dce6ff; cursor:pointer; } .hotkeyHint { margin:0; padding:10px 18px; color:#9eacd0; font-size:11px; background:#111a30; } .hotkeyList { min-height:0; overflow:auto; padding:8px 12px; display:grid; gap:5px; } .hotkeyRow { min-height:42px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:6px 8px 6px 12px; border:1px solid #303e64; border-radius:9px; background:#17213a; } .hotkeyRow span { color:#dce5fb; font-size:12px; font-weight:700; } .hotkeyBind { min-width:88px; min-height:30px; padding:4px 10px; border:1px solid #6175a7; border-radius:7px; background:#263655; color:#ffe08a; font:800 11px/1 monospace; cursor:pointer; } .hotkeyBind.listening { border-color:#6fe0ff; color:#fff; box-shadow:0 0 0 2px rgba(111,224,255,.16); } .hotkeyStatus { min-height:18px; padding:0 18px 7px; color:#79dff7; font-size:10px; } .hotkeyFooter { display:flex; justify-content:flex-end; gap:8px; padding:11px 16px; border-top:1px solid #38476e; background:#131d34; } .hotkeyFooter button { min-height:34px; padding:0 14px; border:1px solid #52638d; border-radius:8px; background:#253353; color:#dce6ff; font-weight:800; cursor:pointer; } #hotkeyDone { border-color:#4ca3c7; background:#17617c; color:#effcff; } #status { position:fixed; top:10px; right:56px; z-index:20; font-size:12px; display:flex; align-items:center; gap:6px; } #dot { width:9px; height:9px; border-radius:50%; background:#888; } .sBtn { background:none; border:1px solid #3a4675; border-radius:6px; color:#fff; cursor:pointer; font-size:13px; padding:2px 6px; pointer-events:auto; text-decoration:none; } #discordBtn { display:grid; place-items:center; width:27px; height:25px; padding:3px; color:#cdd5ff; } #discordBtn svg { width:18px; height:18px; fill:currentColor; } #discordBtn:hover, #discordBtn:focus-visible { color:#fff; background:#5865f2; border-color:#8490ff; outline:none; } #memberDashboardLink { font-size:10px; font-weight:800; white-space:nowrap; } #linkGameId[hidden], #memberDashboardLink[hidden] { display:none; } #settingsMenu #linkGameId { width:100%; min-height:38px; white-space:normal; text-align:left; } .sBtn.off { opacity:.32; } #dot.on { background:#3ddc6b; box-shadow:0 0 8px #3ddc6b; } #dot.off{ background:#ff9f43; } #lbPanel { position:fixed; top:58px; left:50%; z-index:35; width:min(420px,92vw); transform:translateX(-50%); display:none; } #lbPanel.open { display:block; } #lbList { max-height:52vh; overflow-y:auto; padding-right:3px; scrollbar-width:thin; scrollbar-color:#526898 rgba(10,14,28,.72); } #lbList::-webkit-scrollbar { width:7px; } #lbList::-webkit-scrollbar-track { margin:3px 0; border-radius:999px; background:rgba(10,14,28,.72); box-shadow:inset 0 0 0 1px rgba(90,107,176,.22); } #lbList::-webkit-scrollbar-thumb { border:1px solid rgba(10,14,28,.88); border-radius:999px; background:linear-gradient(180deg,#7188bf,#405584); box-shadow:0 0 5px rgba(91,116,178,.32); } #lbList::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#e5c36a,#8e7132); } .lbRow { display:grid; grid-template-columns:32px 1fr auto; gap:8px; align-items:center; padding:5px 4px; border-bottom:1px solid rgba(90,107,176,.35); font-size:12px; } .lbRow:last-child { border-bottom:0; } .lbRank { color:#8ea0d0; text-align:center; } .lbIdentity { min-width:0; display:flex; align-items:center; gap:6px; } .lbName { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lbStars { flex:none; min-width:24px; display:flex; flex-direction:column; align-items:center; color:#ffd86b; font:900 8px/7px "Segoe UI Symbol","Segoe UI",sans-serif; letter-spacing:-1px; text-shadow:0 0 5px rgba(255,216,107,.4); } .lbStarsSingle { font-size:9px; line-height:11px; } .lbOnline { flex:none; width:6px; height:6px; border-radius:50%; background:#4fd67b; box-shadow:0 0 5px rgba(79,214,123,.7); } .lbProgress { display:grid; justify-items:end; gap:1px; } .lbLevel { color:#ffd86b; font-weight:800; } .lbExperience { color:#9fb0d7; font-size:9px; font-weight:700; } #lbSelf { margin-top:6px; padding-top:5px; border-top:1px solid #6f5a23; } #lbSelf[hidden] { display:none; } #lbSelf .lbRow { border:1px solid rgba(255,216,107,.45); border-radius:7px; background:rgba(72,57,24,.38); } /* ---------- Discord community popup ---------- */ #discordModal { position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:18px; background:rgba(6,9,20,.74); backdrop-filter:blur(4px); } #discordModal[hidden] { display:none; } .discordDialog { position:relative; width:min(360px,calc(100vw - 36px)); padding:28px 24px 24px; text-align:center; border-color:#6975f5; box-shadow:0 18px 50px rgba(0,0,0,.62),0 0 28px rgba(88,101,242,.2); } #discordClose { position:absolute; top:9px; right:9px; width:30px; height:30px; border:0; border-radius:7px; background:transparent; color:#9da8cc; font-size:16px; cursor:pointer; } #discordClose:hover, #discordClose:focus-visible { background:#303b67; color:#fff; outline:none; } .discordMark { width:66px; height:66px; margin:0 auto 13px; display:grid; place-items:center; border-radius:20px; color:#fff; background:#5865f2; box-shadow:0 8px 24px rgba(88,101,242,.38); } .discordMark svg { width:40px; height:40px; fill:currentColor; } .discordDialog h2 { margin:0 0 8px; color:#fff; font-size:21px; } .discordDialog p { margin:0 auto 20px; max-width:290px; color:#aeb9db; font-size:12px; line-height:1.55; } #discordJoin { display:block; padding:11px 16px; border-radius:9px; background:#5865f2; color:#fff; font-size:14px; font-weight:900; text-decoration:none; box-shadow:0 6px 18px rgba(88,101,242,.3); } #discordJoin:hover, #discordJoin:focus-visible { background:#6d78f7; outline:2px solid #aeb5ff; outline-offset:2px; } /* ---------- Boss kill popup (ประกาศอันดับดาเมจ) ---------- */ #bossPop { position:fixed; top:76px; left:50%; z-index:40; width:min(320px,86vw); transform:translateX(-50%) translateY(-16px); display:none; text-align:center; opacity:0; transition:opacity .35s, transform .35s; border-color:#ff9f43; box-shadow:0 8px 26px rgba(0,0,0,.5); } #bossPop.show { opacity:1; transform:translateX(-50%) translateY(0); } #bossPop h4 { font-size:14px; color:#ff9f43; margin:0 0 2px; } #bossPop .sub { font-size:11px; color:#9fb0e0; margin-bottom:8px; } .bpRow { display:grid; grid-template-columns:28px 1fr auto; gap:8px; align-items:center; padding:5px 6px; border-bottom:1px solid rgba(90,107,176,.35); font-size:13px; } .bpRow:last-child { border-bottom:0; } .bpRow .m { text-align:center; } .bpRow .n { text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bpRow .d { color:#ffd86b; font-weight:700; } .bpRow.me { background:rgba(255,159,67,.16); border-radius:6px; } #bpList { max-height:44vh; overflow-y:auto; } #bpSelf { margin-top:6px; padding-top:6px; border-top:2px solid rgba(255,159,67,.5); } #bpSelf .bpRow { border-bottom:0; } #bossPopClose { position:absolute; top:5px; right:5px; width:25px; height:25px; border:0; border-radius:6px; color:#aeb9db; background:transparent; cursor:pointer; } #bossPopClose:hover, #bossPopClose:focus-visible { color:#fff; background:#3a4675; outline:none; } /* ---------- Player context menu + follow tag ---------- */ #playerMenu { position:fixed; z-index:45; min-width:134px; padding:7px; background:rgba(20,26,48,.97); border:2px solid #486096; border-radius:12px; box-shadow:0 10px 26px rgba(0,0,0,.45); display:grid; gap:6px; } #playerMenu[hidden] { display:none; } #playerMenuName { font-size:12px; font-weight:800; color:#cfe0ff; text-align:center; padding:2px 4px 5px; border-bottom:1px solid rgba(90,107,176,.4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:190px; } #playerMenu button { min-height:34px; padding:6px 10px; color:#eaf0ff; background:#243a63; border:1px solid #3a4675; border-radius:9px; font:800 13px "Segoe UI",sans-serif; cursor:pointer; } #playerMenu button#kickBtn, #playerMenu button#chatMuteBtn { border-color:#6d2f34; background:#3a2023; color:#ffd0d0; } #playerMenu button#kickBtn:hover, #playerMenu button#kickBtn:focus-visible, #playerMenu button#chatMuteBtn:hover, #playerMenu button#chatMuteBtn:focus-visible { border-color:#ff6a6a; background:#542429; color:#fff; } #playerMenu button:hover, #playerMenu button:focus-visible { border-color:#5ec6ff; background:#2b4a7a; color:#fff; outline:none; } #playerMenu button#inspectBtn { border-color:#3a5a86; background:#1d3352; color:#cfe4ff; } #inspectPanel { position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:rgba(4,8,18,.5); } #inspectPanel[hidden] { display:none; } #inspectPanel .panel { width:min(300px,92vw); padding:12px 14px; border:1px solid #34507e; border-radius:14px; background:linear-gradient(160deg,#152443,#0d1730); } #inspectHead { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; } #inspectTitle { color:#ffd86b; font-size:14px; } #inspectClose { border:0; background:#28324f; color:#cdd8f2; border-radius:7px; width:26px; height:26px; cursor:pointer; } #inspectBody { display:flex; flex-direction:column; gap:3px; font-size:12.5px; } #inspectBody .inspectRow { display:flex; justify-content:space-between; gap:10px; padding:3px 6px; border-radius:6px; background:rgba(255,255,255,.03); } #inspectBody .inspectRow span { color:#9fb0d4; } #inspectBody .inspectRow b { color:#eef3ff; text-align:right; overflow-wrap:anywhere; } #inspectBody .inspectRow.empty b { color:#5f6b86; font-weight:400; } #followTag { position:fixed; top:44px; left:50%; transform:translateX(-50%); z-index:36; display:flex; align-items:center; gap:8px; padding:5px 6px 5px 12px; background:rgba(20,26,48,.9); border:2px solid #3ddc6b; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.4); font-size:12px; font-weight:700; color:#dfffe9; max-width:min(80vw,320px); } #followTag[hidden] { display:none; } #followTagText { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #followStop { flex:none; width:22px; height:22px; border-radius:50%; cursor:pointer; border:1px solid #3a4675; background:#243a63; color:#fff; font-size:12px; line-height:1; display:flex; align-items:center; justify-content:center; } #followStop:hover, #followStop:focus-visible { border-color:#ff8a7a; background:#5a2b2b; outline:none; } body.touchUI #followTag { top:62px; } #pvpBtn { border-color:#7a3a3a !important; } #pvpBtn:hover, #pvpBtn:focus-visible { border-color:#ff8a7a !important; background:#5a2b2b !important; } .chatPlayerName.chatPlayerNameActionable { color:#9fd1ff; text-decoration:underline; text-underline-offset:2px; cursor:pointer; } .chatPlayerName.chatPlayerNameActionable:hover, .chatPlayerName.chatPlayerNameActionable:focus-visible { color:#d8e8ff; } .chatPlayerName { pointer-events:none; } .chatPlayerNameActionable { pointer-events:auto; } /* ---------- PVP challenge prompt + duel banner ---------- */ #pvpInvite { position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; background:rgba(7,10,23,.72); } #pvpInvite[hidden] { display:none; } #pvpInvite .panel { width:min(340px,88vw); text-align:center; border-color:#ff8a7a; background:rgba(20,26,48,.98); } #pvpInvite b { display:block; font-size:15px; color:#ffd0c4; margin-bottom:14px; line-height:1.5; } .pvpInviteBtns { display:flex; gap:10px; } .pvpInviteBtns button { flex:1; min-height:42px; border:none; border-radius:10px; font:800 14px "Segoe UI",sans-serif; cursor:pointer; color:#fff; } #pvpAccept { background:linear-gradient(#e74c3c,#a5281b); box-shadow:0 4px 12px rgba(231,76,60,.35); } #pvpAccept:active { transform:translateY(1px); } #pvpDecline { background:#3a4675; } #pvpBanner { position:fixed; top:44px; left:50%; transform:translateX(-50%); z-index:37; display:flex; align-items:center; gap:10px; padding:5px 6px 5px 13px; background:rgba(40,14,14,.92); border:2px solid #ff5b5b; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.45); font-size:12.5px; font-weight:800; color:#ffd7d7; max-width:min(84vw,340px); } #pvpBanner[hidden] { display:none; } #pvpBannerText { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #pvpForfeit { flex:none; padding:3px 10px; border-radius:999px; cursor:pointer; border:1px solid #ff8a7a; background:#5a2b2b; color:#fff; font-size:11px; font-weight:800; } #pvpForfeit:hover, #pvpForfeit:focus-visible { background:#7a2b2b; border-color:#ffb0a4; outline:none; } body.touchUI #pvpBanner { top:62px; } #pvpAnnouncement { position:fixed; top:50%; left:50%; z-index:72; transform:translate(-50%,-50%); width:min(460px,88vw); padding:18px 22px; text-align:center; border:2px solid #ffb347; border-radius:16px; background:rgba(15,20,42,.94); box-shadow:0 12px 38px rgba(0,0,0,.58),0 0 24px rgba(255,159,67,.25); pointer-events:none; } #pvpAnnouncement[hidden] { display:none; } #pvpAnnouncement strong, #pvpAnnouncement span { display:block; } #pvpAnnouncement strong { color:#ffd86b; font-size:clamp(22px,5vw,34px); line-height:1.15; text-shadow:0 2px 8px #000; } #pvpAnnouncement span { margin-top:8px; color:#fff0df; font-size:clamp(14px,3.5vw,19px); font-weight:800; line-height:1.45; } #pvpAnnouncement.countdown strong { color:#ff8a7a; font-size:clamp(48px,14vw,82px); } #pvpAnnouncement.result { border-color:#69db7c; box-shadow:0 12px 38px rgba(0,0,0,.58),0 0 26px rgba(105,219,124,.3); } #pvpAnnouncement.result strong { color:#8df0a0; } #pvpAnnouncement.serverNotice { top:14px; transform:translateX(-50%); width:auto; max-width:min(520px,90vw); padding:7px 14px; border-width:1px; border-radius:10px; box-shadow:0 5px 16px rgba(0,0,0,.42); } #pvpAnnouncement.serverNotice strong, #pvpAnnouncement.serverNotice span { display:inline; font-size:12px; line-height:1.35; text-shadow:none; } #pvpAnnouncement.serverNotice span { margin:0 0 0 7px; font-weight:700; } body.touchUI #pvpAnnouncement.serverNotice { top:8px; max-width:92vw; padding:6px 10px; } /* ---------- Chat ---------- */ #chat { position:fixed; bottom:10px; left:10px; z-index:20; width:min(340px,70vw); } #chat.chatHidden { display:none; } #chatTabs { display:flex; gap:4px; margin-bottom:3px; cursor:move; touch-action:none; } .ctab { background:rgba(20,26,48,.75); border:1px solid #3a4675; color:#8ea0d0; border-radius:8px 8px 0 0; padding:3px 11px; font-size:11.5px; cursor:pointer; } .ctab.on { color:#fff; background:rgba(43,127,208,.55); border-color:#5ec6ff; } #tabParty.on { background:rgba(104,79,181,.62); border-color:#b39cff; } .ctab .cb { color:#ffd43b; font-weight:800; margin-left:4px; font-size:10px; } #chatCollapseBtn { display:grid; place-items:center; width:30px; min-height:28px; margin-left:auto; border:1px solid #52638f; border-radius:8px 8px 0 0; background:rgba(20,26,48,.9); color:#dce6ff; font-size:15px; cursor:pointer; } #chatHideBtn { display:grid; place-items:center; width:30px; min-height:28px; border:1px solid #6a552f; border-radius:8px 8px 0 0; background:linear-gradient(180deg,rgba(46,34,17,.92),rgba(24,17,9,.94)); color:#ffe6a6; font-size:12px; font-weight:900; cursor:pointer; } #chatCollapseBtn:hover, #chatCollapseBtn:focus-visible { border-color:#5ec6ff; color:#fff; outline:none; } #chatHideBtn:hover, #chatHideBtn:focus-visible { border-color:#ffd86b; color:#fff6d8; outline:none; } #chat.chatMin .clog, #chat.chatMin #chatForm { display:none; } #chatRestoreBtn { position:fixed; bottom:10px; left:10px; z-index:20; display:grid; place-items:center; width:44px; height:44px; border:1px solid #c99a3c; border-radius:12px; cursor:pointer; font-size:20px; background:linear-gradient(160deg,#2c1e12,#160f08); box-shadow:0 8px 20px rgba(0,0,0,.5),inset 0 0 0 1px rgba(216,170,69,.2); } #chatRestoreBtn[hidden] { display:none; } #chatRestoreBtn:hover, #chatRestoreBtn:focus-visible { border-color:#ffd86b; outline:none; box-shadow:0 8px 22px rgba(0,0,0,.55),0 0 12px rgba(216,170,69,.45); } .clog { max-height:195px; overflow-y:auto; font-size:13px; line-height:1.3; display:flex; flex-direction:column; gap:1px; margin-bottom:6px; padding-right:4px; } /* Messages flow as continuous inline text: the name sits inline with the body so wrapped lines run back to the left edge (no hanging indent), and the timestamp floats to the top-right of the message. */ .clog .msg { display:block; min-width:0; } .clog .msg .chatText { overflow-wrap:anywhere; } .clog .msg b { color:#f0b429; margin-right:4px; } .clog .msg.party b { color:#bfaeff; } .clog .msg b.linkedName, #hName.linkedName { color:#8de8ff; text-shadow:0 0 8px rgba(90,210,255,.28); } .roleBadge, .roleBadgeName::before { display:inline-flex; align-items:center; justify-content:center; margin-right:4px; padding:1px 5px; color:var(--role-badge-text,#fff); background:var(--role-badge-color,#8b4dff); border:1px solid color-mix(in srgb,var(--role-badge-text,#fff) 72%,transparent); border-radius:5px; font-size:9px; font-weight:900; letter-spacing:.4px; line-height:1.35; box-shadow:0 1px 4px color-mix(in srgb,var(--role-badge-color,#8b4dff) 42%,transparent); } .roleBadgeName::before { content:attr(data-role-badge); vertical-align:1px; } .clog .sys { color:#8ab6ff; font-style:italic; } .clog .msg .chatTime { color:rgba(160,174,205,.4); font-size:9px; font-style:normal; float:right; font-weight:400; margin-left:8px; padding-left:8px; vertical-align:1px; font-variant-numeric:tabular-nums; } #chatForm { display:flex; gap:6px; } #chatIn { flex:1; background:rgba(20,26,48,.9); border:2px solid #3a4675; color:#fff; border-radius:8px; padding:7px 10px; font-size:13px; outline:none; } #chatIn:focus { border-color:#5ec6ff; } #chatSend { background:#2b7fd0; border:none; color:#fff; border-radius:8px; padding:0 14px; font-weight:700; cursor:pointer; } /* ---------- Mobile controls ---------- */ #touch { position:fixed; inset:0; z-index:15; pointer-events:none; display:none; } #pad { position:absolute; left:18px; bottom:18px; width:126px; height:126px; pointer-events:auto; touch-action:none; border:3px solid rgba(113,134,205,.82); border-radius:50%; background:radial-gradient(circle,rgba(54,70,126,.58) 0 35%,rgba(28,38,76,.76) 36% 100%); box-shadow:inset 0 0 20px rgba(7,10,23,.65),0 5px 16px rgba(0,0,0,.42); } #joystickKnob { position:absolute; left:50%; top:50%; width:56px; height:56px; transform:translate(-50%,-50%); border:3px solid #91a5e8; border-radius:50%; background:radial-gradient(circle at 38% 32%,#8297df,#34477f 72%); box-shadow:0 4px 12px rgba(0,0,0,.5),inset 0 2px 4px rgba(255,255,255,.22); will-change:transform; } #atkBtn { position:absolute; right:26px; bottom:40px; width:92px; height:92px; pointer-events:auto; background:radial-gradient(#e74c3c,#a5281b); border:3px solid #ff8a7a; border-radius:50%; color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.5); } /* ---------- Loading + first-time character setup ---------- */ #login { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 30%,#1a2450,#070a17); } #loginCard { width:min(420px,92vw); text-align:center; } #loginCard h1 { font-size:30px; letter-spacing:1px; margin-bottom:4px; background:linear-gradient(#ffd86b,#f0932b); -webkit-background-clip:text; background-clip:text; color:transparent; } /* Official game logo, shared across the pre-game screens and system popups. */ .brandLogo { display:block; margin:0 auto; height:auto; max-width:100%; filter:drop-shadow(0 8px 24px rgba(0,0,0,.5)); } .brandTitle { margin:0 0 6px; line-height:0; } .brandLogo--boot { width:min(272px,72vw); } .brandLogo--setup { width:132px; margin-bottom:12px; border-radius:18px; } .brandLogo--popup { width:60px; margin-bottom:6px; border-radius:12px; } @media (prefers-reduced-motion:no-preference) { .brandLogo--boot { animation:brandLogoRise .5s ease-out; } } @keyframes brandLogoRise { from { opacity:0; transform:translateY(10px) scale(.96); } } #loginCard .sub { color:#9fb0e0; font-size:13px; margin-bottom:20px; } #nameSetup { position:fixed; inset:0; z-index:52; display:grid; place-items:center; padding:18px; background:rgba(7,10,23,.78); backdrop-filter:blur(5px); } #nameSetup[hidden] { display:none; } .nameSetupCard { width:min(390px,100%); padding:24px; text-align:center; border-color:#6375bd; box-shadow:0 20px 55px rgba(0,0,0,.62),0 0 28px rgba(94,198,255,.12); } .nameSetupCard h2 { margin:0 0 7px; color:#ffd86b; font-size:22px; } .nameSetupCard p { margin:0 0 17px; color:#9fb0e0; font-size:12px; line-height:1.5; } #nameSetupAlert { min-height:18px; margin-top:9px; color:#ff9f7a; font-size:11px; font-weight:700; } #assetLoading { margin:-8px 0 12px; padding:9px 10px; border:1px solid #344474; border-radius:9px; background:rgba(14,21,43,.78); } #assetLoading > div:first-child { display:flex; justify-content:space-between; gap:12px; color:#9fb0e0; font-size:10.5px; font-weight:700; } #assetLoadingPercent { color:#8de8ff; } .assetLoadingTrack { height:7px; margin-top:7px; overflow:hidden; border-radius:999px; background:#0b1125; box-shadow:inset 0 1px 3px rgba(0,0,0,.7); } #assetLoadingFill { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#398ed2,#62e0ff); transition:width .18s ease; } #assetLoading.ready { border-color:#3d8b68; } #assetLoading.ready #assetLoadingPercent { color:#8ff0b2; } .playerAccountStatus { min-height:30px; display:flex; align-items:center; justify-content:center; margin:-8px 0 12px; padding:6px 10px; border:1px solid #2d3865; border-radius:8px; background:rgba(20,26,48,.72); color:#9fb0e0; font-size:11.5px; line-height:1.45; } .playerAccountStatus.linked { border-color:#4d8b68; color:#9ff0ba; } .playerAccountStatus .roleBadge { margin-left:6px; margin-right:0; } #nameIn { width:100%; background:#141a30; border:2px solid #3a4675; color:#fff; text-align:center; border-radius:10px; padding:13px; font-size:17px; outline:none; margin-bottom:14px; } #nameIn:focus { border-color:#ffd86b; } #genderSelect { display:flex; gap:10px; margin-bottom:14px; } .genderOption { flex:1; padding:11px; border-radius:10px; cursor:pointer; background:#141a30; border:2px solid #3a4675; color:#9fb0e0; font:800 15px "Segoe UI","Kanit",sans-serif; transition:border-color .15s,color .15s,background .15s; } .genderOption[data-gender="male"].on { border-color:#5ec6ff; color:#dff1ff; background:rgba(43,127,208,.22); } .genderOption[data-gender="female"].on { border-color:#ff8ac2; color:#ffe1f0; background:rgba(208,43,138,.22); } .genderOption:hover, .genderOption:focus-visible { outline:none; color:#fff; } #playBtn { width:100%; background:linear-gradient(#f0b429,#e08a1e); color:#3a2400; border:none; border-radius:10px; padding:14px; font-size:18px; font-weight:800; cursor:pointer; box-shadow:0 6px 18px rgba(240,180,41,.35); } #playBtn:active { transform:translateY(1px); } #playBtn:disabled { cursor:wait; color:#79829f; background:#252f50; box-shadow:none; } .playerGoogleAuth[hidden], .googlePlayerButton[hidden] { display:none !important; } /* World Atlas — authoritative, informational map browser. */ #minimapOpen { position:fixed; z-index:24; padding:0; border:0; border-radius:0; background:transparent; color:transparent; cursor:pointer; pointer-events:auto; } #minimapOpen:hover { box-shadow:inset 0 0 0 2px #d8aa45; } #minimapOpen:focus-visible { outline:2px solid #69d7ff; outline-offset:2px; box-shadow:0 0 0 1px #080d1b; } #worldAtlasModal { position:fixed; inset:0; z-index:96; display:grid; place-items:center; padding:16px; background:rgba(3,6,14,.86); color:#eef3ff; font-family:"Trebuchet MS",Tahoma,sans-serif; } #worldAtlasModal[hidden] { display:none; } .worldAtlasWindow { width:min(1040px,calc(100vw - 32px)); height:min(720px,calc(100dvh - 32px)); min-height:440px; display:grid; grid-template-rows:48px 36px minmax(0,1fr); overflow:hidden; border:2px solid #d8aa45; outline:1px solid #080d1b; background:#111a2d; box-shadow:0 18px 50px rgba(0,0,0,.68),inset 0 0 0 3px #182541; clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); } .worldAtlasHeader { height:48px; display:flex; align-items:center; gap:12px; padding:0 8px 0 16px; border-bottom:1px solid #35476f; background:#080d1b; } .worldAtlasHeader div { min-width:0; } .worldAtlasHeader small { display:block; color:#d8aa45; font:700 8px/1 monospace; letter-spacing:2px; } .worldAtlasHeader h2 { margin:2px 0 0; color:#ffe29a; font-size:18px; line-height:1; } #worldAtlasConnection { margin-left:auto; color:#93a4c8; font:11px/1.2 monospace; cursor:pointer; } #worldAtlasClose { width:40px; height:40px; flex:none; border:1px solid #35476f; border-radius:4px; background:#182541; color:#eef3ff; font-size:18px; } .worldAtlasTabs { display:grid; grid-template-columns:repeat(3,minmax(90px,140px)); justify-content:center; height:36px; border-bottom:1px solid #35476f; background:#080d1b; } .worldAtlasTabs button { min-height:36px; border:0; border-radius:0; background:#111a2d; color:#93a4c8; } .worldAtlasTabs button[aria-selected="true"] { color:#ffe29a; border-bottom:2px solid #d8aa45; box-shadow:inset 3px 0 #d8aa45; } .worldAtlasBody { min-height:0; display:grid; grid-template-columns:208px minmax(0,1fr) 232px; } #worldAtlasRail { min-width:0; overflow:auto; padding:12px 8px; border-right:1px solid #35476f; background:#0d1425; scrollbar-color:#d8aa45 #111a2d; scrollbar-width:thin; } .worldAtlasWorldCard { position:relative; width:192px; min-height:64px; display:flex; align-items:center; gap:10px; margin:0 0 8px; padding:7px 8px; border:1px solid #35476f; border-radius:3px; text-align:left; background:#182541; color:#eef3ff; scroll-snap-align:start; } .worldAtlasWorldCard[aria-current="true"] { border-color:#d8aa45; background:#202d49; box-shadow:inset 3px 0 #ffe29a; } .worldAtlasWorldCard[aria-current="true"]::after { content:""; position:absolute; top:-1px; right:-1px; border-style:solid; border-width:0 12px 12px 0; border-color:transparent #d8aa45 transparent transparent; } .atlasWorldIcon { width:56px; height:48px; flex:none; display:grid; place-items:center; overflow:hidden; border:1px solid #35476f; background:#080d1b; font-size:25px; image-rendering:pixelated; } .atlasWorldIcon img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; } .worldAtlasWorldCard > span:last-child { min-width:0; } .worldAtlasWorldCard b,.worldAtlasWorldCard small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .worldAtlasWorldCard b { font-size:13px; }.worldAtlasWorldCard small { margin-top:5px; color:#93a4c8; font-size:9px; } .worldAtlasMapPanel { min-width:0; min-height:0; display:grid; grid-template-rows:42px minmax(0,1fr) 44px; padding:12px; background:#111a2d; } .worldAtlasMapHeading { display:flex; align-items:center; justify-content:space-between; gap:8px; } .worldAtlasMapHeading > div { display:flex; align-items:center; min-width:0; gap:7px; } .worldAtlasMapHeading h3 { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#ffe29a; font-size:16px; } #worldAtlasMapIcon { font-size:20px; } #worldAtlasMapSize { color:#93a4c8; font:10px monospace; white-space:nowrap; } #worldAtlasCanvasWrap { position:relative; min-height:0; overflow:hidden; display:grid; place-items:center; border:1px solid #35476f; outline:1px solid #080d1b; background:#080d1b; } #worldAtlasCanvas { display:block; image-rendering:pixelated; } #worldAtlasMapEmpty { position:absolute; inset:0; display:grid; place-items:center; padding:18px; color:#93a4c8; text-align:center; } #worldAtlasMapEmpty[hidden] { display:none; } .worldAtlasMapControls { display:flex; align-items:end; justify-content:center; gap:6px; } .worldAtlasMapControls button { min-width:40px; height:36px; padding:0 10px; border:1px solid #35476f; border-radius:3px; background:#182541; color:#eef3ff; } #worldAtlasDetails { min-width:0; overflow:auto; padding:14px 12px; border-left:1px solid #35476f; background:#0d1425; scrollbar-color:#d8aa45 #111a2d; scrollbar-width:thin; } #worldAtlasDetails h3 { margin:15px 0 8px; color:#ffe29a; font-size:13px; } #worldAtlasDescription { margin:0; color:#c8d3eb; font-size:12px; line-height:1.55; } #worldAtlasRecommended { margin-top:12px; padding:9px; border-left:3px solid #d8aa45; background:#182541; color:#eef3ff; font-size:11px; line-height:1.45; } .atlasPortalRow { display:flex; align-items:center; gap:8px; min-height:32px; padding:4px 5px; border-bottom:1px solid rgba(53,71,111,.55); font-size:11px; } #worldAtlasLegend { display:grid; gap:7px; margin-top:16px; padding-top:10px; border-top:1px solid #35476f; } #worldAtlasLegend span { display:flex; align-items:center; gap:8px; color:#93a4c8; font-size:10px; } .atlasMarker { position:relative; width:16px; height:16px; display:inline-block; flex:none; } .atlasMarkerCurrent::before { content:""; position:absolute; inset:2px; transform:rotate(45deg); border:2px solid #080d1b; background:#69d7ff; box-shadow:inset 0 0 0 2px #eef3ff; } .atlasMarkerPortal::before { content:""; position:absolute; inset:1px 2px; border:2px solid #080d1b; outline:2px solid #c9a7ff; background:linear-gradient(90deg,transparent 40%,#eef3ff 40% 60%,transparent 60%); clip-path:polygon(25% 0,75% 0,100% 25%,100% 100%,65% 100%,65% 55%,35% 55%,35% 100%,0 100%,0 25%); } .atlasMonsterCard,.atlasItemCard { display:flex; align-items:center; gap:8px; min-height:54px; margin-bottom:7px; padding:7px; border:1px solid #35476f; border-left-width:3px; background:#182541; } .atlasThreat-monster { border-left-color:#69d7ff; }.atlasThreat-miniboss { border-left-color:#d8aa45; } .atlasThreat-boss { border-left-color:#ff786e; box-shadow:inset 0 0 0 1px rgba(255,120,110,.18); } .atlasCardIcon { width:38px; height:38px; flex:none; display:grid; place-items:center; overflow:hidden; border:2px solid #080d1b; outline:1px solid #35476f; background:#111a2d; font-size:20px; } .atlasCardIcon img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; } .atlasIconFallback::before { content:"◆"; color:#93a4c8; } .atlasMonsterCard > span:last-child,.atlasItemCard > span:last-child { min-width:0; flex:1; } .atlasMonsterCard > span > span { display:flex; align-items:center; justify-content:space-between; gap:4px; } .atlasMonsterCard b,.atlasItemCard b,.atlasItemCard small,.atlasMonsterCard small { display:block; } .atlasMonsterCard b,.atlasItemCard b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; } .atlasMonsterCard small,.atlasItemCard small { margin-top:4px; color:#93a4c8; font-size:9px; } .atlasClassBadge { flex:none; padding:2px 4px; border:1px solid #35476f; color:#eef3ff; background:#080d1b; font:normal 8px/1 monospace; } .atlasRarity-epic,.atlasRarity-legendary { border-left-color:#d8aa45; } .atlasItemCard[data-item-tier] { border-left-color:hsl(var(--item-tier-hue) 82% 67%); background:linear-gradient(90deg,hsl(var(--item-tier-hue) 55% 25% / .78),#182541 72%); } .atlasItemCard[data-item-tier] .atlasCardIcon { outline-color:hsl(var(--item-tier-hue) 82% 67%); background:hsl(var(--item-tier-hue) 58% 18%); } .atlasItemCard[data-item-tier="1"] { color:inherit; border-left-color:#35476f; background:transparent; } .atlasItemCard[data-item-tier="1"] b { color:inherit; } .atlasItemCard[data-item-tier="1"] small { color:#93a4c8; } .atlasItemCard[data-item-tier="1"] .atlasCardIcon { outline-color:#35476f; background:transparent; box-shadow:none; } .atlasEmpty { margin:10px 4px; color:#93a4c8; font-size:11px; line-height:1.5; } #worldAtlasModal button:focus-visible { outline:2px solid #69d7ff; outline-offset:2px; box-shadow:0 0 0 1px #080d1b; } body.atlasOpen #minimapOpen { pointer-events:none; } @media (max-width:700px), (pointer:coarse) { #worldAtlasModal { padding:0; align-items:stretch; } .worldAtlasWindow { width:100vw; height:100dvh; min-height:0; grid-template-rows:48px 36px minmax(0,1fr); border-width:0; outline:0; clip-path:none; padding-top:env(safe-area-inset-top); } .worldAtlasHeader { padding-left:calc(12px + env(safe-area-inset-left)); padding-right:calc(6px + env(safe-area-inset-right)); } #worldAtlasConnection { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; } .worldAtlasTabs { display:grid; grid-template-columns:repeat(3,1fr); height:36px; background:#080d1b; } .worldAtlasTabs button { min-height:36px; border:0; border-bottom:1px solid #35476f; border-radius:0; background:#111a2d; color:#93a4c8; font-size:11px; } .worldAtlasTabs button[aria-selected="true"] { color:#ffe29a; border-bottom:2px solid #d8aa45; box-shadow:inset 3px 0 #d8aa45; } .worldAtlasBody { display:grid; grid-template-columns:1fr; grid-template-rows:76px minmax(0,1fr); min-height:0; } #worldAtlasRail { display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; padding:4px 12px; border-right:0; border-bottom:1px solid #35476f; scroll-snap-type:x mandatory; } .worldAtlasWorldCard { width:132px; min-width:132px; min-height:64px; height:64px; margin:0; padding:5px; gap:6px; } .atlasWorldIcon { width:44px; height:48px; }.worldAtlasWorldCard b { font-size:11px; } .worldAtlasMapPanel { grid-row:2; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); } #worldAtlasDetails { position:absolute; left:0; right:0; bottom:0; z-index:2; max-height:42dvh; padding:12px calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); border:1px solid #d8aa45; border-bottom:0; background:#0d1425; } #worldAtlasDetails:has(> [data-atlas-panel="map"]:not([hidden])) { display:none; } [data-atlas-panel][hidden] { display:none!important; } .worldAtlasMapControls button,#worldAtlasClose,.worldAtlasTabs button,.worldAtlasWorldCard { min-height:44px; } .worldAtlasMapControls { align-items:center; } body.atlasOpen #touch,body.atlasOpen #skillRow,body.atlasOpen #chat,body.atlasOpen #partyPanel, body.atlasOpen #hud,body.atlasOpen #status,body.atlasOpen #townReturnBtn,body.atlasOpen #bossMvpPanel, body.atlasOpen #minimapCoords { visibility:hidden; } } @media (max-height:440px) and (orientation:landscape) { #worldAtlasModal { padding:0; } .worldAtlasWindow { width:100vw; height:100dvh; min-height:0; grid-template-rows:44px 36px minmax(0,1fr); border-width:0; outline:0; clip-path:none; } .worldAtlasHeader { height:44px; } .worldAtlasBody { grid-template-columns:148px minmax(0,1fr) 220px; grid-template-rows:minmax(0,1fr); } #worldAtlasRail { grid-column:1; display:block; overflow:auto; padding:6px; border-right:1px solid #35476f; border-bottom:0; } .worldAtlasWorldCard { width:132px; margin-bottom:6px; } .worldAtlasMapPanel { grid-column:2; grid-row:1; } #worldAtlasDetails { position:relative; inset:auto; grid-column:3; max-height:none; border:0; border-left:1px solid #35476f; } } .playerGoogleAuth { margin-top:13px; } .loginDivider { display:flex; align-items:center; gap:10px; margin:12px 0 9px; color:#6676a8; font-size:10px; text-transform:uppercase; } .loginDivider::before, .loginDivider::after { content:""; flex:1; height:1px; background:#2d3865; } .googlePlayerButton { min-height:40px; display:flex; justify-content:center; align-items:center; } .googleIdentityRetry { min-height:44px; padding:8px 14px; border:1px solid #5ec6ff; border-radius:999px; background:#182847; color:#e8f7ff; font-weight:800; cursor:pointer; } .googleIdentityRetry:hover, .googleIdentityRetry:focus-visible { border-color:#ffd86b; outline:none; } .googleIdentityRetry:disabled { opacity:.62; cursor:wait; } #playerGoogleAlert, #playerLinkAlert { min-height:18px; margin-top:7px; color:#ffb36b; font-size:11px; line-height:1.4; } #playerLinkModal { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(5,9,21,.78); backdrop-filter:blur(5px); } #playerLinkModal[hidden] { display:none; } #playerLinkModal > .panel { width:min(390px,94vw); padding:15px; border-color:#5ec6ff; background:rgba(16,25,48,.98); } .playerLinkHeader { display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; } .playerLinkHeader > div { flex:1; } .playerLinkHeader b, .playerLinkHeader small { display:block; } .playerLinkHeader b { color:#8de8ff; font-size:17px; } .playerLinkHeader small, #playerLinkModal p { color:#9fb0e0; font-size:11.5px; line-height:1.5; } #playerLinkModal p { margin:0 0 13px; } #playerLinkClose { width:30px; height:30px; border:1px solid #3a4675; border-radius:8px; background:#202a4e; color:#fff; cursor:pointer; } #playerLinkClose:hover, #playerLinkClose:focus-visible { border-color:#8de8ff; outline:none; } #loginNote { margin-top:16px; font-size:11.5px; color:#7f8ec0; line-height:1.6; } #loginNote code { background:#141a30; padding:1px 5px; border-radius:4px; color:#ffd86b; } .hint { color:#ff9f43; } #versionUpdate { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(7,10,23,.82); backdrop-filter:blur(5px); } #versionUpdate.show { display:flex; } #versionUpdate .panel { box-sizing:border-box; width:min(370px,100%); padding:22px; text-align:center; border-color:#f0b429; background:rgba(20,26,48,.97); box-shadow:0 22px 64px rgba(0,0,0,.64),0 0 28px rgba(240,180,41,.12); } #versionUpdate b, #versionUpdate span { display:block; } #versionUpdate b { margin-bottom:7px; color:#ffd86b; font-size:18px; } #versionUpdate > .panel > span { color:#cfe0ff; font-size:12px; line-height:1.55; } .versionUpdateIcon { width:44px; height:44px; margin:0 auto 10px; border:1px solid #715d2f; border-radius:50%; color:#ffd86b; background:#26233a; font:900 27px/42px "Segoe UI",sans-serif; } #versionUpdate[data-mode="progress"] .versionUpdateIcon { animation:versionUpdateSpin 1.1s linear infinite; } #versionAutoUpdateLabel { display:flex; align-items:center; justify-content:center; gap:8px; margin:17px 0 13px; padding:9px; border:1px solid #39466f; border-radius:9px; background:#151d38; color:#b9c8ec; cursor:pointer; } #versionAutoUpdateLabel input { width:17px; height:17px; margin:0; accent-color:#54c7ff; } #versionAutoUpdateLabel span { font-size:11px; font-weight:750; } #versionUpdateActions { display:grid; grid-template-columns:1fr 1.25fr; gap:8px; } #versionUpdateActions button, #versionRecoveryRetry { min-height:40px; border:1px solid #4c5e91; border-radius:9px; color:#eaf2ff; background:#26355d; cursor:pointer; font-weight:850; } #versionUpdateNow { border-color:#d69b25!important; color:#171423!important; background:linear-gradient(#ffe17b,#efad2e)!important; } #versionRecoveryRetry { width:100%; margin-top:15px; border-color:#d69b25; } #versionUpdateActions button:focus-visible, #versionRecoveryRetry:focus-visible, #versionUpdateReminder:focus-visible { outline:2px solid #8de8ff; outline-offset:2px; } #versionUpdate[data-mode="progress"] #versionAutoUpdateLabel, #versionUpdate[data-mode="progress"] #versionUpdateActions { display:none; } #versionUpdateReminder { position:fixed; right:10px; bottom:10px; z-index:95; min-height:34px; padding:7px 12px; border:1px solid #d69b25; border-radius:999px; color:#1a1624; background:#ffd45f; box-shadow:0 5px 18px rgba(0,0,0,.42); cursor:pointer; font-weight:900; } @keyframes versionUpdateSpin { to { transform:rotate(360deg); } } /* ---------- Server-status (maintenance) popup ---------- */ #serverStatusPopup { position:fixed; inset:0; z-index:97; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(7,10,23,.55); backdrop-filter:blur(3px); pointer-events:none; } #serverStatusPopup.show { display:flex; animation:serverStatusFade .28s ease-out; } .serverStatusCard { box-sizing:border-box; width:min(340px,100%); padding:24px 22px 20px; text-align:center; border:1px solid #f0b429; border-radius:18px; background:rgba(20,26,48,.98); box-shadow:0 22px 64px rgba(0,0,0,.6),0 0 30px rgba(240,180,41,.14); pointer-events:auto; animation:serverStatusPop .34s cubic-bezier(.2,1.3,.5,1); } .serverStatusMascot { position:relative; width:74px; height:74px; margin:0 auto 12px; border-radius:50%; border:1px solid #715d2f; background:radial-gradient(circle at 50% 38%,#312a4b,#201d33); box-shadow:inset 0 0 14px rgba(0,0,0,.4); } .serverStatusFace { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:34px; animation:serverStatusBob 2.2s ease-in-out infinite; } .serverStatusZzz { position:absolute; top:2px; right:6px; color:#ffe08a; font-weight:900; font-size:13px; opacity:0; animation:serverStatusZzz 2.6s ease-in-out infinite; } .serverStatusZzz:nth-child(2) { top:-6px; right:-4px; font-size:16px; animation-delay:.7s; } #serverStatusPopup .serverStatusCard b { display:block; margin-bottom:7px; color:#ffd86b; font-size:17px; } #serverStatusText { display:block; color:#cfe0ff; font-size:12.5px; line-height:1.6; } .serverStatusHint { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:15px; padding-top:13px; border-top:1px solid #2b3557; color:#9db0dc; font-size:11.5px; font-weight:750; } .serverStatusSpinner { width:15px; height:15px; border-radius:50%; border:2px solid #3a4675; border-top-color:#ffd45f; animation:versionUpdateSpin 1s linear infinite; } .serverStatusDots i { font-style:normal; opacity:.25; animation:serverStatusDots 1.4s infinite; } .serverStatusDots i:nth-child(2) { animation-delay:.2s; } .serverStatusDots i:nth-child(3) { animation-delay:.4s; } #serverStatusPopup[data-state="restored"] .serverStatusCard { border-color:#68d391; box-shadow:0 22px 64px rgba(0,0,0,.6),0 0 30px rgba(104,211,145,.22); } #serverStatusPopup[data-state="restored"] .serverStatusMascot { border-color:#2f7a52; background:radial-gradient(circle at 50% 38%,#1f3a2e,#16281f); } #serverStatusPopup[data-state="restored"] .serverStatusCard b { color:#8ef0b4; } #serverStatusPopup[data-state="restored"] .serverStatusZzz, #serverStatusPopup[data-state="restored"] .serverStatusHint { display:none; } #serverStatusPopup[data-state="restored"] .serverStatusFace { animation:serverStatusCheer .5s ease; } #serverStatusPopup[data-state="superseded"] .serverStatusCard { border-color:#f0a545; box-shadow:0 22px 64px rgba(0,0,0,.6),0 0 30px rgba(240,165,69,.2); } #serverStatusPopup[data-state="superseded"] .serverStatusCard b { color:#ffcf8a; } #serverStatusPopup[data-state="superseded"] .serverStatusMascot, #serverStatusPopup[data-state="superseded"] .serverStatusSpinner, #serverStatusPopup[data-state="superseded"] .serverStatusDots { display:none; } #serverStatusPopup[data-state="superseded"] .serverStatusHint { color:#e8b877; } @keyframes serverStatusFade { from { opacity:0; } to { opacity:1; } } @keyframes serverStatusPop { from { transform:translateY(10px) scale(.94); opacity:0; } } @keyframes serverStatusBob { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-4px) rotate(4deg); } } @keyframes serverStatusZzz { 0% { opacity:0; transform:translateY(4px) scale(.7); } 35% { opacity:.95; } 70%,100% { opacity:0; transform:translateY(-10px) scale(1.1); } } @keyframes serverStatusDots { 0%,60%,100% { opacity:.25; } 30% { opacity:1; } } @keyframes serverStatusCheer { 0% { transform:scale(.6) rotate(-12deg); } 60% { transform:scale(1.25); } 100% { transform:scale(1); } } @media (prefers-reduced-motion:reduce) { #serverStatusPopup.show,.serverStatusCard,.serverStatusFace,.serverStatusZzz, .serverStatusSpinner,.serverStatusDots i { animation:none; } } #hint { position:fixed; bottom:10px; right:10px; z-index:20; font-size:11px; color:#7f8ec0; text-align:right; line-height:1.5; max-width:300px; } /* ---------- Inventory / Quests / Dialog ---------- */ #questHudDock { align-self:flex-start; display:flex; align-items:stretch; gap:4px; pointer-events:auto; } #questHudDock[hidden] { display:none; } #questHud { font-size:11.5px; line-height:1.6; max-width:230px; display:none; } .mobilePanelCollapse { display:none; } #hudMenuRow { align-self:flex-start; display:flex; gap:6px; pointer-events:auto; } #bagBtn, #wardrobeBtn, #refineBtn, #refineCraftBtn, #marketBtn { position:relative; z-index:21; box-sizing:border-box; display:grid; place-items:center; width:42px; height:42px; padding:0; pointer-events:auto; color:#fff; cursor:pointer; border:2px solid #43547d; border-radius:6px; background:#11192e; box-shadow:inset 0 0 0 1px rgba(160,190,255,.12),0 2px 0 rgba(5,8,18,.65); } #bagBtn:hover, #bagBtn:focus-visible, #wardrobeBtn:hover, #wardrobeBtn:focus-visible, #refineBtn:hover, #refineBtn:focus-visible, #refineBtn[aria-expanded="true"], #refineCraftBtn:hover, #refineCraftBtn:focus-visible, #refineCraftBtn[aria-expanded="true"], #marketBtn:hover, #marketBtn:focus-visible, #marketBtn[aria-expanded="true"] { outline:none; transform:translateY(-1px); } #bagBtn:hover, #bagBtn:focus-visible { border-color:#f07bb0; } #wardrobeBtn:hover, #wardrobeBtn:focus-visible { border-color:#72b7ff; } #refineBtn:hover, #refineBtn:focus-visible, #refineBtn[aria-expanded="true"] { border-color:#ffd86b; } #refineCraftBtn:hover, #refineCraftBtn:focus-visible, #refineCraftBtn[aria-expanded="true"] { border-color:#72e1cb; } #marketBtn:hover, #marketBtn:focus-visible, #marketBtn[aria-expanded="true"] { border-color:#ffe29a; } #bagBtn { border-color:#754467; background:#211525; } #wardrobeBtn { border-color:#355b8a; background:#101d33; } #refineBtn { border-color:#765c39; background:#251c17; } #refineCraftBtn { border-color:#36716c; background:#102622; } #marketBtn { border-color:#8b6a2e; background:#211a0f; } .hudMenuSprite { --menu-sprite-size:38px; display:block; width:var(--menu-sprite-size); height:var(--menu-sprite-size); background-image:url('/asssetitem01.png'); background-repeat:no-repeat; background-size:auto calc(var(--menu-sprite-size) * 1.29); background-position-y:center; filter:drop-shadow(0 1px 0 rgba(0,0,0,.85)); image-rendering:pixelated; } .hudMenuSprite--bag { background-position-x:calc(var(--menu-sprite-size) * -.378); } .hudMenuSprite--wardrobe { background-position-x:calc(var(--menu-sprite-size) * -1.56); } .hudMenuSprite--refine { background-position-x:calc(var(--menu-sprite-size) * -2.788); } .hudMenuSprite--craft { background-position-x:calc(var(--menu-sprite-size) * -4.008); } .hudMenuMarketIcon { display:block; width:38px; height:38px; background:url('/ui/market-scale.png') center/contain no-repeat; image-rendering:pixelated; filter:drop-shadow(0 1px 0 #000); } .marketDeliveryBadge { position:absolute; right:-5px; top:-6px; min-width:16px; height:16px; box-sizing:border-box; padding:0 4px; border:1px solid #080d1b; border-radius:8px; color:#08101c; background:#ffe29a; font:950 8px/14px monospace; text-align:center; } .hotkeyHintBadge { position:absolute; top:2px; left:4px; max-width:calc(100% - 8px); overflow:hidden; color:rgba(223,232,255,.55); font:900 9px/1 monospace; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; text-shadow:0 1px 2px #080b15; } #autoBtn { overflow:hidden; } #autoBtn { position:relative; display:grid; place-items:center; width:50px; height:50px; flex:none; margin-left:36px; padding:0; color:#dfe6ff; background:rgba(20,26,48,.85); border:2px solid #3a4675; border-radius:6px; cursor:pointer; } #autoBtn:hover { border-color:#ffd86b; } #autoBtn.on { background:#8a4a12; border-color:#ffd86b; color:#ffd86b; box-shadow:0 0 12px rgba(240,180,41,.5); } .autoAssetSprite { --auto-sprite-size:46px; display:block; width:var(--auto-sprite-size); height:var(--auto-sprite-size); background-image:url('/assseticonauto01.png'); background-repeat:no-repeat; background-size:auto calc(var(--auto-sprite-size) * 1.25); background-position-y:calc(50% + 2px); filter:drop-shadow(0 1px 0 rgba(0,0,0,.85)); image-rendering:pixelated; } .autoAssetSprite--toggle { background-position-x:calc(var(--auto-sprite-size) * -.014); } .autoAssetSprite--range { background-position-x:calc(var(--auto-sprite-size) * -1.193); } .autoRangeLabel { position:absolute; right:1px; bottom:1px; max-width:calc(100% - 2px); overflow:hidden; padding:1px 2px; color:#dfe6ff; background:rgba(5,8,18,.78); border-radius:2px; font:800 8px/1 monospace; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; } /* Boss target-lock button lives under the mini-map (top-right), not in the skill row. */ #bossLockBtn { position:fixed; z-index:24; top:258px; right:14px; left:auto; width:120px; height:44px; padding:4px 8px; overflow:hidden; color:#ffe39a; background:rgba(55,30,76,.92); border:2px solid #8258a8; border-radius:12px; cursor:pointer; font:800 10.5px/1.2 "Segoe UI",sans-serif; text-overflow:ellipsis; white-space:nowrap; } #bossLockBtn:hover, #bossLockBtn:focus-visible, #bossLockBtn.locked { border-color:#ffd86b; outline:none; box-shadow:0 0 12px rgba(255,216,107,.42); } #bossLockBtn.locked { color:#fff3bf; background:#6e4514; } #bossLockBtn[hidden] { display:none; } #rangeBtn { display:grid; place-items:center; width:50px; height:50px; flex:none; padding:0; color:#dfe6ff; background:rgba(20,26,48,.85); border:2px solid #3a4675; border-radius:6px; cursor:pointer; } #rangeBtn:hover, #rangeBtn:focus-visible, #rangeBtn[aria-expanded="true"] { border-color:#5ec6ff; outline:none; box-shadow:0 0 10px rgba(94,198,255,.35); } #rangeMenu { position:fixed; bottom:72px; left:calc(50% + 76px); z-index:23; width:102px; display:grid; gap:4px; padding:6px; background:rgba(20,26,48,.96); border:2px solid #486096; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.38); } #rangeMenu[hidden] { display:none; } .rangeOption { min-height:30px; padding:4px 8px; color:#dfe6ff; background:#202a49; border:1px solid #3a4675; border-radius:8px; font:800 12px "Segoe UI",sans-serif; cursor:pointer; text-align:center; } .rangeOption:hover, .rangeOption:focus-visible { border-color:#5ec6ff; color:#fff; background:#263b61; outline:none; } .rangeOption[aria-checked="true"] { color:#8fe1ff; background:#173f5a; border-color:#5ec6ff; box-shadow:inset 0 0 0 1px rgba(143,225,255,.22); } #bagPanel { position:fixed; top:208px; right:10px; z-index:21; width:236px; display:none; } #invGrid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px; } .invCell { background:linear-gradient(180deg,#1c130a,#241914); border:1px solid #5a4526; border-radius:8px; height:52px; padding:0; color:#fff; font:inherit; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; box-shadow:inset 0 2px 6px rgba(0,0,0,.6),inset 0 0 0 1px rgba(216,170,69,.06); } .invCell:hover, .invCell:focus-visible { border-color:#ffd86b; outline:none; box-shadow:0 0 8px rgba(240,180,41,.35); } .invCell.rarity-uncommon { border-color:#47c978; background:radial-gradient(circle at 50% 44%,rgba(48,153,84,.72),rgba(13,45,29,.94) 72%); box-shadow:inset 0 0 0 1px rgba(122,239,158,.18),0 0 8px rgba(58,208,105,.2); } .invCell.rarity-uncommon:hover, .invCell.rarity-uncommon:focus-visible { border-color:#8df0ad; box-shadow:inset 0 0 0 1px rgba(159,255,190,.24),0 0 12px rgba(58,225,112,.48); } .invCell.rarity-rare { border-color:#5b9cff; background:radial-gradient(circle at 50% 44%,rgba(43,105,190,.76),rgba(10,31,66,.95) 72%); box-shadow:inset 0 0 0 1px rgba(126,183,255,.2),0 0 10px rgba(72,145,255,.28); } .invCell.rarity-rare:hover, .invCell.rarity-rare:focus-visible { border-color:#9ac7ff; box-shadow:inset 0 0 0 1px rgba(173,210,255,.28),0 0 14px rgba(74,148,255,.55); } .invCell.rarity-legendary { border-color:#a56cff; background:radial-gradient(circle at 50% 44%,rgba(111,54,176,.78),rgba(35,15,62,.96) 72%); box-shadow:inset 0 0 0 1px rgba(203,157,255,.26),0 0 9px rgba(156,92,255,.34); } .invCell.rarity-legendary:hover, .invCell.rarity-legendary:focus-visible { border-color:#d4b3ff; box-shadow:inset 0 0 0 1px rgba(224,195,255,.34),0 0 14px rgba(173,112,255,.62); } .invCell[data-item-tier] { border-color:hsl(var(--item-tier-hue) 82% 68%); background:radial-gradient(circle at 50% 44%,hsl(var(--item-tier-hue) 58% 38% / .78), hsl(var(--item-tier-hue) 58% 14% / .96) 72%); box-shadow:inset 0 0 0 1px hsl(var(--item-tier-hue) 88% 78% / .24), 0 0 10px hsl(var(--item-tier-hue) 88% 58% / .32); } .invCell[data-item-tier]:hover, .invCell[data-item-tier]:focus-visible { border-color:hsl(var(--item-tier-hue) 92% 82%); outline:none; box-shadow:inset 0 0 0 1px hsl(var(--item-tier-hue) 92% 86% / .3), 0 0 14px hsl(var(--item-tier-hue) 90% 64% / .58); } .invCell[data-item-tier="1"] { color:#fff; border-color:#3a4675; background:transparent; box-shadow:none; } .invCell[data-item-tier="1"]:hover, .invCell[data-item-tier="1"]:focus-visible { border-color:#66759c; box-shadow:0 0 8px rgba(83,99,138,.3); } .invCell[data-item-tier="1"] b { color:#dfe7fb; text-shadow:none; } .invCell[data-item-tier="5"], .equipSlot.filled[data-item-tier="5"], .refineStackCard[data-item-tier="5"], .atlasItemCard[data-item-tier="5"], .inboxReward[data-item-tier="5"] { background:linear-gradient(135deg,#6d4a12,#d8a83e 48%,#7a5314); color:#fff3c4; } .invCell[data-item-tier="6"], .equipSlot.filled[data-item-tier="6"], .refineStackCard[data-item-tier="6"], .atlasItemCard[data-item-tier="6"], .inboxReward[data-item-tier="6"] { background:linear-gradient(135deg,#671b28,#c33b4d 50%,#681b2b); } .invCell[data-item-tier="7"], .equipSlot.filled[data-item-tier="7"], .refineStackCard[data-item-tier="7"], .atlasItemCard[data-item-tier="7"], .inboxReward[data-item-tier="7"] { background:linear-gradient(120deg,#d84b5e,#d8a83e 28%,#54c985 48%,#4b9ee6 68%,#a66de0 86%,#e05a9d); color:#fff; } .invCell img { image-rendering:pixelated; max-width:38px; max-height:40px; } .invCell b { position:absolute; bottom:1px; right:4px; font-size:10px; color:#ffd86b; } /* Character status — compact, readable, and visually separate from equipment. */ #statusPanel { position:fixed; z-index:38; top:50%; left:50%; width:min(336px,calc(100vw - 24px)); max-height:calc(100vh - 20px); display:none; transform:translate(-50%,-50%); overflow-y:auto; padding:0 14px 14px; scrollbar-color:#5e5b91 #151a31; border-color:#665b9a; background: radial-gradient(circle at 78% 0,rgba(110,91,189,.24),transparent 44%), linear-gradient(150deg,rgba(28,34,67,.98),rgba(13,18,37,.99)); box-shadow:0 18px 46px rgba(0,0,0,.65),inset 0 0 0 1px rgba(174,159,255,.08); } #statusPanel.open { display:block; animation:statusReveal .16s ease-out both; } @keyframes statusReveal { from{ opacity:0; transform:translate(-50%,calc(-50% - 7px)) scale(.98) } to{ opacity:1; transform:translate(-50%,-50%) } } .statusHeader { height:49px; display:flex; align-items:center; gap:10px; margin:0 -14px 12px; padding:0 13px; border-bottom:1px solid rgba(159,144,226,.38); background:linear-gradient(180deg,rgba(71,66,120,.72),rgba(35,39,73,.82)); } .statusCrest { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; color:#ffe29a; border:1px solid #9b8958; background:#292640; box-shadow:0 0 10px rgba(255,216,107,.18); } .statusHeader div { flex:1; display:flex; flex-direction:column; line-height:1.1; } .statusHeader b { color:#fff2c6; font-size:15px; } .statusHeader small { margin-top:3px; color:#9c99c9; font-size:8px; font-weight:800; letter-spacing:.22em; } #statusClose { width:30px; height:28px; border:1px solid #716d9a; border-radius:7px; background:#292d4c; color:#dddff8; font-weight:800; cursor:pointer; } #statusClose:hover, #statusClose:focus-visible { color:#fff; border-color:#d2c27c; outline:none; } .statusLevelCard { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 8px; margin-bottom:10px; padding:9px 11px; border:1px solid rgba(240,180,41,.45); border-radius:10px; background:linear-gradient(135deg,rgba(93,66,21,.42),rgba(35,32,48,.74)); } .statusLevelCard span { color:#f5e6b0; font-size:12px; font-weight:800; } .statusLevelCard strong { grid-row:1/3; grid-column:2; min-width:34px; text-align:center; color:#ffd86b; font-size:25px; line-height:1; text-shadow:0 0 10px rgba(255,216,107,.28); } .statusLevelCard small { color:#a79e87; font-size:9px; } .attributeList { display:grid; gap:7px; } .attributeRow { min-height:52px; display:grid; grid-template-columns:38px 1fr minmax(104px,auto); gap:8px; align-items:center; padding:7px 8px; border:1px solid rgba(91,105,158,.48); border-radius:10px; background:linear-gradient(100deg,rgba(38,46,82,.9),rgba(21,27,52,.88)); } .attributeIcon { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; font-size:16px; font-weight:900; color:#fff; box-shadow:inset 0 1px rgba(255,255,255,.17); } .attackIcon { background:linear-gradient(145deg,#d7685e,#77303b); } .speedIcon { background:linear-gradient(145deg,#4dbb84,#245f55); } .defenseIcon { background:linear-gradient(145deg,#7e91b7,#3f526f); } .hpIcon { background:linear-gradient(145deg,#d84f72,#7d2947); } .mpIcon { background:linear-gradient(145deg,#6f91df,#4e3d9e); } .attributeName { display:flex; min-width:0; flex-direction:column; } .attributeName b { color:#f4f5ff; font-size:13px; letter-spacing:.08em; } .attributeName small { margin-top:3px; color:#9da9d0; font-size:9px; line-height:1.2; } .attributeValue { display:flex; min-width:104px; flex-direction:column; align-items:flex-end; } .attributeValue > strong { color:#fff2b5; font-size:18px; line-height:1.05; text-align:right; } .attributeValue > small { margin-top:4px; color:#7f8db8; font-size:8px; line-height:1; white-space:nowrap; } .attributeValue > small.hasBonus { color:#72dda0; } #statusHint { margin-top:8px; color:#7f8db8; font-size:9px; line-height:1.35; text-align:center; } /* Equipment loadout — weathered wood, iron and neutral slot illustrations. */ #equipmentPanel { --slot-size:64px; position:fixed; top:104px; right:62px; z-index:35; width:min(316px,calc(100vw - 74px)); display:none; overflow:hidden; padding:0 14px 16px; border:2px solid #756442; border-radius:14px; background: radial-gradient(circle at 50% 38%,rgba(105,112,84,.18),transparent 48%), linear-gradient(145deg,rgba(43,39,31,.98),rgba(18,20,19,.99) 58%,rgba(28,27,23,.99)); box-shadow:0 16px 36px rgba(0,0,0,.58),0 0 0 1px #12110e, inset 0 0 0 1px rgba(220,199,151,.12),inset 0 -28px 42px rgba(0,0,0,.2); } #equipmentPanel::before { content:""; position:absolute; z-index:0; inset:5px; border:1px solid rgba(154,133,89,.24); border-radius:9px; pointer-events:none; } #equipmentPanel::after { content:""; position:absolute; z-index:3; top:0; left:50%; width:108px; height:3px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,#9e8654,transparent); box-shadow:0 0 8px rgba(158,134,84,.25); pointer-events:none; } #equipmentPanel.open { display:block; animation:equipmentReveal .16s ease-out both; } @keyframes equipmentReveal { from{ opacity:0; transform:translateY(-6px) scale(.98) } to{ opacity:1; transform:none } } .equipmentHeader { height:46px; position:relative; z-index:2; display:flex; align-items:center; gap:9px; margin:0 -14px 10px; padding:0 13px; color:#e7dcc4; font-size:14px; letter-spacing:.04em; text-shadow:0 2px 4px #000; background:linear-gradient(180deg,rgba(64,58,46,.96),rgba(36,36,31,.96)); border-bottom:1px solid #776541; box-shadow:0 4px 10px rgba(0,0,0,.28); } .equipmentCrest { width:20px; height:23px; flex:none; position:relative; background:linear-gradient(135deg,#c1c4bd,#737873 55%,#454a46); border:2px solid #9b8250; clip-path:polygon(50% 0,100% 18%,88% 72%,50% 100%,12% 72%,0 18%); box-shadow:inset 0 0 0 2px #3b403c; } .equipmentCrest::after { content:""; position:absolute; left:7px; top:4px; width:3px; height:11px; background:#bca36b; box-shadow:-3px 4px 0 -1px #bca36b,3px 4px 0 -1px #bca36b; } .equipmentHeader b { flex:1; } #equipmentLayout { height:328px; position:relative; z-index:1; isolation:isolate; } #equipmentLayout::before { content:""; position:absolute; z-index:0; inset:28px 34px 25px; border:1px solid rgba(143,128,89,.2); border-radius:50%; box-shadow:inset 0 0 32px rgba(77,85,67,.12),0 0 18px rgba(0,0,0,.2); pointer-events:none; } .equipmentStage { position:absolute; z-index:0; top:47px; left:50%; width:126px; height:224px; transform:translateX(-50%); display:flex; justify-content:center; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(102,109,80,.1),transparent); } .equipmentSigil { position:absolute; top:19px; left:50%; width:118px; height:178px; transform:translateX(-50%); border:1px solid rgba(151,128,78,.26); border-radius:50%; background: radial-gradient(circle,transparent 46%,rgba(119,127,94,.1) 47% 49%,transparent 50%), conic-gradient(from 22.5deg,rgba(151,128,78,.15),transparent 8%,transparent 17%,rgba(151,128,78,.15) 25%,transparent 33%); box-shadow:0 0 20px rgba(79,85,65,.16),inset 0 0 24px rgba(69,75,58,.12); } #equipmentAvatar { position:absolute; z-index:2; top:20px; left:50%; width:96px; height:152px; transform:translateX(-50%); image-rendering:pixelated; filter:drop-shadow(0 8px 5px rgba(0,0,0,.55)); animation:equipmentAvatarFloat 2.8s ease-in-out infinite; } @keyframes equipmentAvatarFloat { 0%,100%{ transform:translateX(-50%) translateY(0) } 50%{ transform:translateX(-50%) translateY(-3px) } } .equipmentPedestal { position:absolute; z-index:1; left:50%; bottom:14px; width:82px; height:17px; transform:translateX(-50%); border-top:2px solid #8d7445; border-radius:50%; background:radial-gradient(ellipse,rgba(152,124,70,.2),rgba(66,69,55,.12) 48%,transparent 70%); box-shadow:0 -2px 10px rgba(137,111,62,.12); } .equipSlot { width:var(--slot-size); height:var(--slot-size); padding:0; position:absolute; z-index:2; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#fff; cursor:default; border:1px solid #565d5c; border-radius:10px; background: linear-gradient(145deg,rgba(255,255,255,.04),transparent 34%), radial-gradient(circle at 50% 42%,#2a2f2e,#151817 74%); box-shadow:0 5px 10px rgba(0,0,0,.38),0 0 0 1px #101211, inset 0 0 0 2px rgba(66,70,67,.45),inset 0 -8px 16px rgba(0,0,0,.24); transition:border-color .16s,box-shadow .16s,transform .12s; } .equipSlot::before { content:""; position:absolute; z-index:2; inset:5px; pointer-events:none; background: linear-gradient(#85714b,#85714b) left top/8px 1px no-repeat, linear-gradient(#85714b,#85714b) right top/8px 1px no-repeat, linear-gradient(#85714b,#85714b) left bottom/8px 1px no-repeat, linear-gradient(#85714b,#85714b) right bottom/8px 1px no-repeat; opacity:.38; } .equipSlot::after { content:""; position:absolute; z-index:2; bottom:4px; left:50%; width:12px; height:2px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,#8f7b52,transparent); opacity:.42; } .equipSlot.empty { background-image:var(--slot-art),linear-gradient(145deg,rgba(255,255,255,.07),transparent 34%), radial-gradient(circle at 50% 42%,#2a2f2e,#151817 74%); background-repeat:no-repeat; background-position:center,center,center; background-size:52px 52px,100% 100%,100% 100%; image-rendering:pixelated; } .equipSlot.filled { cursor:pointer; border-color:#aa8d55; background-image:radial-gradient(circle at 50% 42%,rgba(80,68,43,.88),#191b18 74%); box-shadow:0 0 12px rgba(169,137,76,.3),0 5px 10px rgba(0,0,0,.42), inset 0 0 0 2px rgba(104,85,51,.42); } .equipSlot.filled.rarity-uncommon { border-color:#55cf82; background-image:radial-gradient(circle at 50% 42%,rgba(45,139,76,.92),#10271a 74%); box-shadow:0 0 14px rgba(65,218,116,.38),0 5px 12px rgba(0,0,0,.45), inset 0 0 0 2px rgba(100,222,139,.26); } .equipSlot.filled.rarity-rare { border-color:#639fff; background-image:radial-gradient(circle at 50% 42%,rgba(39,99,184,.94),#0c2247 74%); box-shadow:0 0 15px rgba(72,145,255,.42),0 5px 12px rgba(0,0,0,.45), inset 0 0 0 2px rgba(118,177,255,.28); } .equipSlot.filled.rarity-legendary { border-color:#a56cff; background-image:radial-gradient(circle at 50% 42%,rgba(105,52,171,.94),#25113e 74%); box-shadow:0 0 17px rgba(158,94,255,.5),0 5px 12px rgba(0,0,0,.45), inset 0 0 0 2px rgba(204,159,255,.34); } .equipSlot.filled.rarity-legendary:hover, .equipSlot.filled.rarity-legendary:focus-visible { border-color:#d4b3ff; box-shadow:0 0 21px rgba(177,117,255,.66),0 7px 13px rgba(0,0,0,.48); } .equipSlot:disabled { opacity:1; } .equipSlot.filled:hover, .equipSlot.filled:focus-visible { border-color:#d0b574; outline:none; transform:translateY(-2px); box-shadow:0 0 15px rgba(177,146,83,.38),0 7px 13px rgba(0,0,0,.48); } .equipSlot.filled.rarity-uncommon:hover, .equipSlot.filled.rarity-uncommon:focus-visible { border-color:#9bf1b6; box-shadow:0 0 18px rgba(65,230,121,.5),0 7px 13px rgba(0,0,0,.48); } .equipSlot.filled.rarity-rare:hover, .equipSlot.filled.rarity-rare:focus-visible { border-color:#a8ceff; box-shadow:0 0 19px rgba(77,151,255,.58),0 7px 13px rgba(0,0,0,.48); } .equipSlot.filled[data-item-tier] { border-color:hsl(var(--item-tier-hue) 82% 68%); background-image:radial-gradient(circle at 50% 42%,hsl(var(--item-tier-hue) 58% 38% / .94), hsl(var(--item-tier-hue) 58% 13%) 74%); box-shadow:0 0 17px hsl(var(--item-tier-hue) 88% 58% / .48),0 5px 12px rgba(0,0,0,.45), inset 0 0 0 2px hsl(var(--item-tier-hue) 88% 78% / .32); } .equipSlot.filled[data-item-tier]::before { background: linear-gradient(hsl(var(--item-tier-hue) 86% 76%),hsl(var(--item-tier-hue) 86% 76%)) left top/8px 1px no-repeat, linear-gradient(hsl(var(--item-tier-hue) 86% 76%),hsl(var(--item-tier-hue) 86% 76%)) right top/8px 1px no-repeat, linear-gradient(hsl(var(--item-tier-hue) 86% 76%),hsl(var(--item-tier-hue) 86% 76%)) left bottom/8px 1px no-repeat, linear-gradient(hsl(var(--item-tier-hue) 86% 76%),hsl(var(--item-tier-hue) 86% 76%)) right bottom/8px 1px no-repeat; opacity:.62; } .equipSlot.filled[data-item-tier]::after { background:linear-gradient(90deg,transparent, hsl(var(--item-tier-hue) 86% 76%),transparent); opacity:.58; } .equipSlot[data-slot].filled[data-item-tier]:hover, .equipSlot[data-slot].filled[data-item-tier]:focus-visible { border-color:hsl(var(--item-tier-hue) 92% 82%); outline:none; box-shadow:0 0 21px hsl(var(--item-tier-hue) 90% 64% / .64),0 7px 13px rgba(0,0,0,.48); } .equipSlot.filled[data-item-tier="1"] { border-color:#4b5879; background-image:none; box-shadow:0 5px 12px rgba(0,0,0,.45); } .equipSlot.filled[data-item-tier="1"]::before { background:none; } .equipSlot.filled[data-item-tier="1"]::after { background:none; } .equipSlot[data-slot].filled[data-item-tier="1"]:hover, .equipSlot[data-slot].filled[data-item-tier="1"]:focus-visible { border-color:#7080a7; box-shadow:0 7px 13px rgba(0,0,0,.48); } .equipSlot.filled:active { transform:translateY(0) scale(.96); } .equipSlot img { position:relative; z-index:1; width:46px; height:46px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 3px 2px rgba(0,0,0,.5)); } .equipSlot.tierLocked img { filter:grayscale(1) opacity(.55) drop-shadow(0 3px 2px rgba(0,0,0,.5)); } .equipSlot.tierLocked::after { content:'\1F512'; position:absolute; z-index:2; top:5px; right:6px; font-size:11px; filter:grayscale(1); text-shadow:0 1px 2px #000; } .equipSlot[data-slot="helm"] { left:50%; top:0; transform:translateX(-50%); } .equipSlot[data-slot="weapon"] { left:0; top:72px; } .equipSlot[data-slot="shield"] { right:0; top:72px; } .equipSlot[data-slot="garment"] { left:0; top:146px; } .equipSlot[data-slot="armor"] { right:0; top:146px; } .equipSlot[data-slot="accessory1"] { left:0; top:220px; } .equipSlot[data-slot="shoes"] { left:50%; top:264px; transform:translateX(-50%); } /* Loadout tabs: gear paper-doll vs a separate fashion (cosmetic) tab. */ .equipTabs { position:relative; z-index:2; display:flex; gap:6px; margin:0 0 10px; } .equipTab { flex:1; padding:7px 4px; border:1px solid #6a552f; border-radius:8px; cursor:pointer; color:#cbbb99; font:600 12px 'Segoe UI'; letter-spacing:.03em; background:linear-gradient(180deg,rgba(46,34,17,.9),rgba(24,17,9,.92)); transition:border-color .16s,color .16s,box-shadow .16s; } .equipTab:hover { border-color:#9a8047; color:#f2e6cc; } .equipTab.is-active { border-color:#c9a24a; color:#ffe29a; background:linear-gradient(180deg,rgba(78,64,36,.95),rgba(43,36,22,.95)); box-shadow:0 0 10px rgba(201,162,74,.24),inset 0 1px rgba(255,255,255,.06); } #equipmentLayout[hidden], #fashionLayout[hidden] { display:none; } #fashionLayout { position:relative; z-index:1; min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:20px 0; } #fashionLayout .equipSlot { position:static; width:80px; height:80px; } .fashionVisibility { min-height:32px; display:flex; align-items:center; justify-content:center; gap:7px; color:#e7dabb; font-size:10.5px; font-weight:750; cursor:pointer; text-align:center; } .fashionVisibility input { width:16px; height:16px; margin:0; accent-color:#d8aa45; cursor:pointer; } .fashionVisibility:has(input:disabled) { color:#8f7c58; cursor:not-allowed; } .fashionVisibility input:disabled { cursor:not-allowed; } .fashionNote { margin:6px 0 0; color:#a8946e; font-size:9px; line-height:1.45; text-align:left; } .equipSlot[data-slot="helm"].filled:hover, .equipSlot[data-slot="helm"].filled:focus-visible, .equipSlot[data-slot="shoes"].filled:hover, .equipSlot[data-slot="shoes"].filled:focus-visible { transform:translateX(-50%) translateY(-2px); } .equipSlot[data-slot="helm"].filled:active, .equipSlot[data-slot="shoes"].filled:active { transform:translateX(-50%) scale(.96); } #equipmentStats { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:2px; } #equipmentStats span { min-height:43px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border:1px solid rgba(111,133,190,.45); border-radius:9px; background:linear-gradient(180deg,rgba(31,46,83,.88),rgba(13,21,42,.9)); box-shadow:inset 0 1px rgba(255,255,255,.05); } #equipmentStats small { color:#91a5da; font-size:9px; font-weight:800; letter-spacing:.08em; } #equipmentStats b { color:#ffe29a; font-size:15px; text-shadow:0 1px 4px #000; } .weaponMastery { position:relative; z-index:2; margin-top:8px; padding:8px; border:1px solid rgba(216,170,69,.45); border-radius:9px; background:linear-gradient(180deg,rgba(27,39,70,.92),rgba(10,16,31,.94)); } .weaponMasteryHead { display:flex; align-items:center; justify-content:space-between; gap:8px; } .weaponMasteryHead span { display:flex; align-items:baseline; gap:6px; min-width:0; } .weaponMasteryHead b { color:#ffe29a; font-size:11px; } .weaponMasteryHead small { color:#8ca4d6; font-size:7px; font-weight:900; letter-spacing:.13em; } .weaponMasteryHead strong { max-width:45%; color:#72dda0; font-size:9px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .weaponMasteryTracks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-top:6px; } .weaponMasteryTrack { min-width:0; padding:5px 6px; border:1px solid rgba(101,122,174,.42); border-radius:7px; background:rgba(8,14,29,.72); } .weaponMasteryTrack.is-active { border-color:#e2b852; box-shadow:inset 3px 0 #d8aa45; } .weaponMasteryTrackTitle { display:flex; justify-content:space-between; gap:5px; color:#dce6ff; font-size:9px; font-weight:800; } .weaponMasteryTrackTitle b { color:#ffe29a; font-size:9px; } .weaponMasteryBar { height:4px; margin-top:4px; overflow:hidden; border-radius:3px; background:#080d1b; } .weaponMasteryBar i { display:block; height:100%; width:var(--mastery-progress,0%); background:linear-gradient(90deg,#397ac0,#69d7ff); } .weaponMasteryTrack small { display:block; margin-top:3px; color:#91a5ca; font-size:7px; line-height:1.25; white-space:normal; } .weaponMastery > p { margin:5px 0 0; color:#788cb8; font-size:7px; text-align:center; } #equipmentHint { position:relative; z-index:2; margin:8px 0 0; color:#8294c4; font-size:9.5px; line-height:1.3; text-align:center; } #equipmentTierStatus { position:relative; z-index:2; margin:2px 0 8px; padding:7px 9px; border:1px solid rgba(201,154,60,.34); border-radius:8px; color:#d8c8a6; background:linear-gradient(180deg,rgba(52,37,17,.7),rgba(26,17,8,.82)); font-size:10px; line-height:1.4; text-align:center; } #equipmentTierStatus b { color:#ffe6a6; } .invCell.tierLocked { filter:saturate(.2); opacity:.72; border-color:#687180; } .invCell.tierLocked::after { content:'\1F512'; position:absolute; top:3px; left:4px; font-size:11px; filter:grayscale(1); text-shadow:0 1px 2px #000; } .itemTooltipLocked { margin-top:5px; padding-top:5px; border-top:1px solid rgba(168,176,190,.28); color:#cbd0d8; font-weight:700; } /* Character workspace — bag and loadout stay attached without covering the whole game. */ #inventoryWorkspace { position:fixed; z-index:38; top:50%; left:50%; display:none; grid-template-columns:minmax(0,352px); gap:10px; width:min(352px,calc(100vw - 16px)); height:min(568px,calc(100vh - 20px)); transform:translate(-50%,-50%); align-items:stretch; /* Dark-wood fantasy panelling, reused across both panels. */ --wood-grain: repeating-linear-gradient(0deg,rgba(0,0,0,.4) 0 2px,rgba(128,90,50,.16) 2px 3px,transparent 3px 66px), repeating-linear-gradient(90deg,rgba(255,226,186,.032) 0 2px,rgba(0,0,0,.07) 2px 5px,transparent 5px 12px); --wood-fill:linear-gradient(158deg,#2c1e12,#1a1109 62%,#120b06); --wood-panel:var(--wood-grain),var(--wood-fill); --wood-band: repeating-linear-gradient(90deg,rgba(255,226,186,.05) 0 1px,rgba(0,0,0,.1) 1px 4px,transparent 4px 11px), linear-gradient(180deg,#3a2811,#22160b); --wood-inset: repeating-linear-gradient(0deg,rgba(0,0,0,.34) 0 2px,rgba(120,84,46,.13) 2px 3px,transparent 3px 58px), linear-gradient(150deg,#271a0f,#160e07); } #inventoryWorkspace.open { display:grid; animation:workspaceReveal .16s ease-out both; } #inventoryWorkspace.floated { animation:none!important; transform:none!important; } #inventoryWorkspace.withBag { grid-template-columns:266px minmax(0,352px); width:min(636px,calc(100vw - 16px)); } #inventoryWorkspace:not(.withBag) #statusPanel { grid-column:1; } @keyframes workspaceReveal { from{ opacity:0; transform:translate(-50%,calc(-50% - 7px)) scale(.985) } to{ opacity:1; transform:translate(-50%,-50%) } } #bagPanel { position:relative; inset:auto; z-index:1; grid-column:1; grid-row:1; width:auto; height:100%; min-height:0; display:none; overflow:hidden; padding:11px 11px 12px; border:2px solid #c99a3c; border-radius:13px; background: radial-gradient(circle at 50% -8%,rgba(216,170,69,.16),transparent 46%), var(--wood-panel); box-shadow:0 20px 48px rgba(0,0,0,.62),inset 0 0 0 1px rgba(216,170,69,.22), inset 0 2px 22px rgba(0,0,0,.6); } #bagPanel.open { display:flex; flex-direction:column; } .bagHeader { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:-11px -11px 9px; padding:9px 11px; cursor:move; touch-action:none; background:var(--wood-band); box-shadow:inset 0 -1px rgba(0,0,0,.5),0 1px 0 rgba(216,170,69,.12); border-bottom:1px solid transparent; border-image:linear-gradient(90deg,transparent,rgba(216,170,69,.7) 12%,rgba(216,170,69,.7) 88%,transparent) 1; } .bagHeader span { position:relative; display:flex; flex-direction:column; padding-left:27px; } .bagHeader span::before { content:'\1F392'; position:absolute; left:0; top:50%; transform:translateY(-50%); font-size:17px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); } .bagHeader b { color:#ffe6a6; font-size:14px; letter-spacing:.01em; text-shadow:0 1px 2px rgba(0,0,0,.55); } .bagHeader small { margin-top:2px; color:#c99a3c; font-size:8px; font-weight:900; letter-spacing:.24em; } #goldLine { padding:3px 8px; color:#ffe6a6; font-size:11px; font-weight:900; white-space:nowrap; border:1px solid rgba(216,170,69,.42); border-radius:8px; background:linear-gradient(180deg,rgba(58,43,19,.6),rgba(26,19,7,.7)); } .bagActions { display:flex; flex-direction:column; align-items:flex-end; gap:5px; } #sortInventory { padding:4px 8px; border:1px solid rgba(216,170,69,.42); border-radius:7px; color:#ffe6a6; background:linear-gradient(180deg,rgba(58,43,19,.55),rgba(26,19,7,.62)); font-size:9px; font-weight:900; letter-spacing:.02em; cursor:pointer; } #sortInventory:hover, #sortInventory:focus-visible { border-color:#ffd86b; color:#fff6d8; outline:none; box-shadow:0 0 9px rgba(216,170,69,.4); } .autoEqBtn { padding:4px 9px; border:1px solid #d69b25; border-radius:7px; color:#1a1206; background:linear-gradient(180deg,#ffe08a,#f0ad2e); cursor:pointer; font-size:9.5px; font-weight:900; letter-spacing:.02em; white-space:nowrap; } .autoEqBtn:hover, .autoEqBtn:focus-visible { filter:brightness(1.08); outline:none; box-shadow:0 0 10px rgba(240,173,46,.55); } .autoEqBtn:active { transform:scale(.96); } .autoEqBtn:disabled { opacity:.5; cursor:default; filter:grayscale(.3); } .equipmentTitleLine .autoEqBtn { align-self:center; } #bagPanel #invGrid { flex:1; min-height:0; overflow-y:auto; align-content:start; gap:6px; margin-top:8px; padding:2px 4px 2px 1px; scrollbar-width:thin; scrollbar-color:#c99a3c #11182d; } #bagPanel .invCell { height:56px; border-radius:9px; } #bagPanel .invCell img { max-width:42px; max-height:44px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); } #bagPanel .invCell b { bottom:2px; right:5px; font-size:11px; text-shadow:0 1px 2px rgba(0,0,0,.85); } #statusPanel { position:relative; inset:auto; z-index:1; grid-column:2; grid-row:1; width:auto; height:100%; min-height:0; display:none; transform:none; overflow-y:auto; padding:0 11px 11px; color:#efe4cf; scrollbar-color:#c99a3c #1a1109; border:2px solid #c99a3c; border-radius:13px; background: radial-gradient(circle at 50% -6%,rgba(216,170,69,.15),transparent 44%), var(--wood-panel); box-shadow:0 20px 48px rgba(0,0,0,.64),inset 0 0 0 1px rgba(216,170,69,.22),inset 0 2px 22px rgba(0,0,0,.55); } #statusPanel.open { display:block; animation:none; } #itemTooltip { position:fixed; z-index:80; width:min(286px,calc(100vw - 20px)); padding:9px 10px; pointer-events:none; color:#dfe8ff; background:rgba(10,16,34,.97); border:1px solid #536b9f; border-radius:9px; box-shadow:0 10px 28px rgba(0,0,0,.62); font-size:10.5px; line-height:1.4; } #itemTooltip[data-item-tier] { border-color:hsl(var(--item-tier-hue) 82% 68%); background:linear-gradient(145deg,hsl(var(--item-tier-hue) 54% 20% / .98),rgba(10,16,34,.98)); box-shadow:0 10px 28px rgba(0,0,0,.62),0 0 14px hsl(var(--item-tier-hue) 88% 58% / .3); } #itemTooltip[data-item-tier="1"] { color:#dfe8ff; border-color:#536b9f; background:rgba(10,16,34,.97); box-shadow:0 10px 28px rgba(0,0,0,.62); } #itemTooltip[data-item-tier="1"] .itemTooltipName { color:#eef3ff; } #itemTooltip[data-item-tier="1"] .itemTooltipMeta { color:#8fa5d7; } #itemTooltip[data-item-tier="1"] .itemTooltipStats { color:#8ee5b0; } #itemTooltip[data-item-tier="1"] .itemTooltipEquipped { color:#ffd86b; } #itemTooltip[hidden] { display:none; } .itemTooltipName { color:#fff0b5; font-size:12px; font-weight:900; } .itemTooltipMeta { margin-top:2px; color:#8fa5d7; } .itemTooltipIdentity { margin-top:4px; color:#aebde0; } .itemTooltipTotal { margin-top:6px; padding:6px 7px; border:1px solid rgba(114,217,155,.28); border-radius:5px; color:#9cf0ba; background:rgba(11,31,30,.56); } .itemTooltipTotal b,.itemTooltipSources> b { display:block; margin-bottom:2px; color:#edf4ff; font-size:9px; letter-spacing:.04em; } .itemTooltipSources { margin-top:6px; padding-top:5px; border-top:1px solid rgba(255,216,107,.3); } .itemTooltipSources>div { display:grid; grid-template-columns:72px minmax(0,1fr); gap:5px; padding:2px 0; color:#ffe19a; } .itemTooltipSources span { font-weight:900; } .itemTooltipSources small { color:#cbd6ef; font:inherit; } .itemTooltipEquipped { margin-top:5px; color:#ffd86b; font-weight:800; } .invEquippedMark { position:absolute; top:2px; left:3px; z-index:3; display:grid; place-items:center; width:15px; height:15px; border-radius:5px; color:#1a1606; background:#ffd86b; box-shadow:0 1px 5px rgba(0,0,0,.65); font-size:9px; font-weight:1000; } .invRefineMark { position:absolute; top:2px; right:3px; z-index:3; min-width:17px; padding:2px 3px; color:#fff3bf; border:1px solid #d8aa45; border-radius:3px; background:#3a2b13; box-shadow:0 1px 5px rgba(0,0,0,.65); font:950 8px/1 monospace; } .equipRefineMark { position:absolute; z-index:6; top:-5px; right:-5px; min-width:18px; padding:2px 3px; color:#1a1207; border:1px solid #5f431c; border-radius:4px; background:#ffe29a; box-shadow:0 2px 6px rgba(0,0,0,.55); font:950 8px/1 monospace; } .statusHeader { height:44px; margin:0 -11px 9px; padding:0 11px; cursor:move; touch-action:none; border-bottom:1px solid transparent; border-image:linear-gradient(90deg,transparent,rgba(216,170,69,.7) 12%,rgba(216,170,69,.7) 88%,transparent) 1; background:var(--wood-band); box-shadow:inset 0 -1px rgba(0,0,0,.5),0 1px 0 rgba(216,170,69,.12); } .statusHeader b { color:#ffe6a6; font-size:14px; letter-spacing:.02em; text-shadow:0 1px 2px rgba(0,0,0,.55); } .statusHeader small { color:#c99a3c; font-size:7px; font-weight:900; letter-spacing:.2em; } .statusCrest { width:26px; height:26px; color:#ffe5a3; border-color:#c99a3c; background:linear-gradient(180deg,#3a2b13,#1a1307); box-shadow:0 0 12px rgba(216,170,69,.25); } #statusClose { width:28px; height:26px; border-color:rgba(216,170,69,.5); border-radius:7px; color:#ffe6a6; background:linear-gradient(180deg,rgba(58,43,19,.6),rgba(26,19,7,.7)); } #statusClose:hover, #statusClose:focus-visible { border-color:#ffd86b; color:#fff6d8; background:linear-gradient(180deg,rgba(78,58,26,.7),rgba(40,29,11,.8)); box-shadow:0 0 9px rgba(216,170,69,.4); } #equipmentPanel { --slot-size:46px; position:relative; inset:auto; z-index:1; width:auto; display:block; overflow:visible; padding:9px 10px 10px; border:1px solid rgba(201,154,60,.7); border-radius:12px; background:var(--wood-inset); box-shadow:inset 0 0 0 1px rgba(216,170,69,.16),inset 0 2px 12px rgba(0,0,0,.5); } #equipmentPanel::before, #equipmentPanel::after, #equipmentLayout::before { display:none; } .equipmentTitleLine { position:relative; z-index:2; display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; } #equipmentTitle, .statusSectionTitle { margin:0; color:#ffe6a6; font-size:12px; text-align:left; letter-spacing:.06em; } #equipmentLayout { height:auto; display:grid; grid-template-columns:var(--slot-size) minmax(0,1fr) var(--slot-size); grid-template-rows:repeat(4,var(--slot-size)); justify-items:center; align-items:start; gap:20px 12px; padding:2px 2px 15px; } .loadoutFigure { grid-column:2; grid-row:1 / 5; align-self:stretch; justify-self:stretch; position:relative; display:grid; place-items:end center; overflow:hidden; border:1px solid rgba(216,170,69,.3); border-radius:12px; background: radial-gradient(ellipse at 50% 84%,rgba(216,170,69,.2),rgba(24,15,6,.4) 56%,rgba(10,6,3,.72) 82%), linear-gradient(180deg,#221607,#100a05); box-shadow:inset 0 0 24px rgba(0,0,0,.6),inset 0 0 0 1px rgba(216,170,69,.08); } .loadoutFigure::after { content:''; position:absolute; left:50%; bottom:10px; transform:translateX(-50%); width:78px; height:13px; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%); } .loadoutFigureArt { position:relative; z-index:1; width:84px; height:152px; margin-bottom:12px; background-image:url("characters/newborn-weapon-animations.png"); background-repeat:no-repeat; background-position:0 0; background-size:2016px 912px; image-rendering:pixelated; filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)); } .equipSlot[data-slot="helm"]{ grid-column:1; grid-row:1; } .equipSlot[data-slot="armor"]{ grid-column:1; grid-row:2; } .equipSlot[data-slot="garment"]{ grid-column:1; grid-row:3; } .equipSlot[data-slot="shoes"]{ grid-column:1; grid-row:4; } .equipSlot[data-slot="weapon"]{ grid-column:3; grid-row:1; } .equipSlot[data-slot="shield"]{ grid-column:3; grid-row:2; } .equipSlot[data-slot="accessory1"]{ grid-column:3; grid-row:3; } .equipSlot[data-slot="necklace"]{ grid-column:3; grid-row:4; } .equipmentStage { display:none; } .equipSlot, .equipSlot[data-slot] { position:relative; inset:auto; width:var(--slot-size); height:var(--slot-size); transform:none; overflow:visible; border:1px solid #7a6238; border-radius:9px; background:radial-gradient(circle at 50% 42%,#3a2f1c,#181008 78%); box-shadow:0 4px 9px rgba(0,0,0,.4),inset 0 0 0 2px rgba(201,154,60,.12); } .equipSlot::before { inset:4px; opacity:.34; } .equipSlot::after { content:attr(data-label); z-index:4; left:50%; bottom:-15px; width:max-content; height:auto; transform:translateX(-50%); color:#c6b489; background:none; opacity:1; font-size:8px; font-weight:800; line-height:1; letter-spacing:.02em; } .equipSlot.empty { background-size:38px 38px,100% 100%,100% 100%; } .equipSlot.filled { border-color:#d1a955; background-image:radial-gradient(circle at 50% 42%,#62512d,#1c263f 74%); } .equipSlot.filled:hover, .equipSlot.filled:focus-visible, .equipSlot[data-slot].filled:hover, .equipSlot[data-slot].filled:focus-visible { transform:translateY(-2px); border-color:#ffe08a; } .equipSlot.filled:active, .equipSlot[data-slot].filled:active { transform:scale(.96); } .equipSlot img { width:39px; height:39px; } /* Fashion tab: character preview (left) + wardrobe list (right). */ #fashionLayout { position:relative; z-index:1; min-height:0; display:grid; grid-template-columns:132px minmax(0,1fr); gap:11px; padding:2px 1px 4px; align-items:start; } #fashionLayout .equipSlot[data-slot="fashion"] { display:none; } .fashionPreview { display:flex; flex-direction:column; align-items:center; gap:9px; } .fashionFigure { position:relative; width:100%; height:200px; display:grid; place-items:end center; overflow:hidden; border:1px solid rgba(216,170,69,.3); border-radius:12px; background: radial-gradient(ellipse at 50% 84%,rgba(216,170,69,.2),rgba(24,15,6,.4) 56%,rgba(10,6,3,.72) 82%), linear-gradient(180deg,#221607,#100a05); box-shadow:inset 0 0 24px rgba(0,0,0,.6),inset 0 0 0 1px rgba(216,170,69,.08); } .fashionFigure::after { content:''; position:absolute; left:50%; bottom:12px; transform:translateX(-50%); width:80px; height:12px; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%); } .fashionFigureArt { position:relative; z-index:1; margin-bottom:14px; background-repeat:no-repeat; background-position:0 0; image-rendering:pixelated; filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)); } .fashionFigureArt[data-mode="default"] { width:70px; height:126px; background-size:2400% 600%; } .fashionFigureArt[data-mode="skin"] { width:130px; height:130px; background-size:800% 600%; margin-bottom:4px; } .fashionFigureCrown { position:absolute; z-index:2; top:16px; left:50%; transform:translateX(-50%); width:34px; height:auto; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); pointer-events:none; } .fashionWardrobe { display:flex; flex-direction:column; min-width:0; } .fashionWardrobeHead { display:flex; align-items:baseline; gap:6px; margin-bottom:7px; color:#ffe6a6; } .fashionWardrobeHead b { font-size:12px; letter-spacing:.02em; } .fashionWardrobeHead small { color:#c99a3c; font-size:7px; font-weight:900; letter-spacing:.2em; } .fashionWardrobeList { display:grid; gap:6px; max-height:210px; overflow-y:auto; padding-right:3px; scrollbar-width:thin; scrollbar-color:#c99a3c #1a1109; } .fashionCard { display:grid; grid-template-columns:44px minmax(0,1fr); gap:9px; align-items:center; padding:6px; text-align:left; cursor:pointer; color:#efe4cf; border:1px solid #6a552f; border-radius:9px; background:linear-gradient(180deg,rgba(48,34,16,.66),rgba(22,15,7,.8)); transition:border-color .15s,box-shadow .15s; } .fashionCard:hover, .fashionCard:focus-visible { border-color:#ffd86b; outline:none; box-shadow:0 0 9px rgba(216,170,69,.35); } .fashionCard:disabled { cursor:default; } .fashionCard[aria-current="true"] { border-color:#ffe08a; background:linear-gradient(180deg,rgba(78,58,26,.82),rgba(36,25,11,.86)); box-shadow:inset 0 0 0 1px rgba(255,224,138,.5),0 0 10px rgba(216,170,69,.4); } .fashionCardThumb { width:44px; height:44px; border-radius:8px; border:1px solid rgba(216,170,69,.3); background-color:#140d05; background-repeat:no-repeat; background-position:0 0; background-size:800% 600%; image-rendering:pixelated; } .fashionCardBody { min-width:0; } .fashionCardBody b { display:block; font-size:11px; color:#ffe6a6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fashionCardBody small { display:block; margin-top:2px; font-size:8px; color:#b7a377; } .fashionCardBody .fashionCardState { color:#8fe1b0; font-weight:800; } #equipmentStats { gap:4px; margin-top:3px; } #equipmentStats span { min-height:25px; border:1px solid rgba(201,154,60,.32); border-radius:6px; background:linear-gradient(180deg,rgba(52,37,17,.72),rgba(26,17,8,.82)); } #equipmentStats small { color:#c2ac82; font-size:8px; } #equipmentStats b { color:#ffe29a; font-size:11px; } .weaponMastery { margin-top:5px; padding:6px; } .weaponMasteryHead b { font-size:9.5px; } .weaponMasteryHead strong { font-size:8px; } .weaponMasteryTracks { gap:4px; margin-top:4px; } .weaponMasteryTrack { padding:4px 5px; } .statusSectionTitle { margin:7px 1px 5px; font-size:10.5px; } .attributeList { grid-template-columns:1fr; gap:4px; } .attributeRow { min-height:38px; grid-template-columns:minmax(82px,.7fr) minmax(0,1.8fr); gap:7px; padding:3px 6px; border-color:rgba(201,154,60,.3); border-radius:8px; background:linear-gradient(180deg,rgba(48,34,16,.66),rgba(24,16,8,.78)); } .attributeName b { color:#f4ead2; font-size:9.5px; } .attributeValue { min-width:0; } .attributeValue > strong { color:#fff0b5; font-size:13px; } .attributeValue > small { margin-top:2px; color:#a8946e; font-size:7px; line-height:1.25; white-space:normal; text-align:right; } .attributeValue > small.hasBonus { color:#72dda0; } #dlg { position:fixed; left:50%; bottom:100px; transform:translateX(-50%); z-index:30; width:min(440px,92vw); display:none; } #dlgName { font-weight:800; color:#ffd86b; font-size:15px; margin-bottom:4px; } #dlgText { white-space:pre-line; font-size:13px; color:#dfe6ff; line-height:1.55; margin-bottom:10px; } #dlgBtns button { background:#2b7fd0; color:#fff; border:none; border-radius:8px; padding:8px 13px; margin-right:8px; font-weight:700; cursor:pointer; font-size:13px; } #dlgBtns button:last-child { background:#3a4675; } #dlgBtns { max-height:min(52vh,420px); overflow-y:auto; scrollbar-color:#52638f #151d37; } #merchantModal { position:fixed; z-index:72; inset:0; display:grid; place-items:center; padding:12px; background:rgba(5,10,22,.68); backdrop-filter:blur(3px); } #merchantModal[hidden] { display:none; } #skinGachaModal{position:fixed;z-index:73;inset:0;display:grid;place-items:center;padding:12px;background:rgba(4,7,18,.72);backdrop-filter:blur(5px)} #skinGachaModal[hidden]{display:none} #wardrobeModal{position:fixed;z-index:73;inset:0;display:grid;place-items:center;padding:12px;background:rgba(4,7,18,.72);backdrop-filter:blur(5px)} #wardrobeModal[hidden]{display:none}.wardrobeWindow{width:min(620px,calc(100vw - 24px))}.wardrobeSigil{color:#b8f0ff;background:radial-gradient(circle,#4e91a8,#294868 62%,#111a2c)} #wardrobeClose{border:0;background:#202945;color:#dce5ff;width:34px;height:34px;border-radius:9px}.wardrobeRewards:empty::before{content:'ยังไม่มีชุดกาชา';grid-column:1/-1;padding:24px;color:#91a1be;text-align:center} #refineModal { position:fixed; z-index:75; inset:0; display:grid; place-items:center; padding:12px; background:rgba(4,7,16,.82); backdrop-filter:blur(4px); } #refineModal[hidden] { display:none; } .refineWindow { position:relative; width:min(980px,calc(100vw - 24px)); height:min(680px,calc(100dvh - 24px)); display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; padding:0; border:2px solid #d8aa45; border-radius:4px; outline:1px solid #182541; outline-offset:-5px; background:#080d1b; box-shadow:0 28px 90px rgba(0,0,0,.8),0 0 0 1px #050813; clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); } .refineHeader { min-height:52px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 12px; border-bottom:1px solid #35476f; background:linear-gradient(90deg,#182541,#111a2d 68%,#231c16); } .refineHeaderMark { width:38px; height:38px; display:grid; place-items:center; border:1px solid #d8aa45; background:#2d2517; clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); } .refineHeaderMark svg { width:25px; height:25px; fill:#ffe29a; filter:drop-shadow(0 0 3px rgba(216,170,69,.45)); } .refineHeader h2,.refineHeader p { margin:0; } .refineHeader small { color:#d8aa45; font:950 7px/1 monospace; letter-spacing:.2em; } .refineHeader h2 { margin-top:2px; color:#eef3ff; font-size:17px; letter-spacing:.04em; } .refineHeader p { margin-top:2px; color:#93a4c8; font-size:9px; } #refineClose { width:34px; height:34px; border:1px solid #586b94; border-radius:2px; color:#eef3ff; background:#182541; cursor:pointer; font-weight:900; } #refineClose:hover,#refineClose:focus-visible { border-color:#69d7ff; outline:2px solid #080d1b; box-shadow:0 0 0 3px #69d7ff; } .refineBody { min-height:0; display:grid; grid-template-columns:240px minmax(280px,1fr) 248px; } .refineStacks,.refinePreview,.refineAction { min-width:0; min-height:0; padding:12px; } .refineStacks { display:flex; flex-direction:column; border-right:1px solid #35476f; background:#0d1425; } .refinePreview { overflow-y:auto; scrollbar-color:#536a97 #0b1120; background: linear-gradient(rgba(17,26,45,.92),rgba(8,13,27,.96)), repeating-linear-gradient(0deg,transparent 0 31px,rgba(216,170,69,.04) 32px); } .refineAction { display:flex; flex-direction:column; gap:10px; border-left:1px solid #35476f; background:#111a2d; } .refineSectionHeading { display:flex; justify-content:space-between; align-items:center; gap:8px; color:#eef3ff; font-size:10px; font-weight:900; letter-spacing:.04em; } .refineSectionHeading small { color:#7f92ba; font:800 7px/1 monospace; letter-spacing:.08em; } .refineFilters { display:grid; grid-template-columns:1.4fr .8fr; gap:6px; margin:9px 0; } .refineFilters label,.refineSourceLabel { display:grid; gap:3px; color:#93a4c8; font-size:7.5px; font-weight:800; } .refineSourceLabel[hidden] { display:none!important; } .refineFilters select,.refineSourceLabel select { width:100%; min-height:34px; padding:0 8px; color:#eef3ff; border:1px solid #42577f; border-radius:3px; background:#111a2d; font:800 9px "Segoe UI",sans-serif; } .refineFilters select:focus-visible,.refineSourceLabel select:focus-visible { border-color:#69d7ff; outline:2px solid #080d1b; box-shadow:0 0 0 3px #69d7ff; } .refineStackList { flex:1; min-height:80px; overflow-y:auto; display:grid; align-content:start; gap:6px; padding-right:3px; scrollbar-color:#536a97 #0b1120; } .refineStackCard { position:relative; width:100%; min-height:57px; display:grid; grid-template-columns:43px minmax(0,1fr) auto; gap:8px; align-items:center; padding:6px; color:#eef3ff; text-align:left; cursor:pointer; border:1px solid #35476f; border-radius:3px; background:#111a2d; } .refineStackCard[data-item-tier] { border-color:hsl(var(--item-tier-hue) 52% 47%); background:linear-gradient(90deg,hsl(var(--item-tier-hue) 54% 25% / .48),#111a2d 74%); } .refineStackCard:hover,.refineStackCard:focus-visible { border-color:#69d7ff; outline:none; } .refineStackCard[aria-selected="true"] { border-color:#ffe29a; box-shadow:inset 3px 0 #d8aa45,0 0 0 1px #080d1b,0 0 0 2px #d8aa45; background:#182541; } .refineStackCard[data-item-tier][aria-selected="true"] { background:linear-gradient(90deg,hsl(var(--item-tier-hue) 58% 31% / .68),#182541 76%); } .refineStackCard.is-equipped { box-shadow:0 0 0 1px #d8aa45 inset, 0 0 0 2px rgba(216,170,69,.35); } .refineStackCard.is-disabled { opacity:.72; } .refineStackIcon { position:relative; width:41px; height:41px; display:grid; place-items:center; overflow:hidden; border:1px solid #52658c; background:#080d1b; image-rendering:pixelated; } .refineStackIcon[data-item-tier],.refineItemIcon[data-item-tier] { border-color:hsl(var(--item-tier-hue) 82% 68%); background:radial-gradient(circle at 50% 42%,hsl(var(--item-tier-hue) 62% 40% / .9), hsl(var(--item-tier-hue) 60% 13% / .98) 74%); box-shadow:inset 0 0 0 2px hsl(var(--item-tier-hue) 88% 78% / .2), 0 0 10px hsl(var(--item-tier-hue) 88% 58% / .3); } .refineStackIcon[data-item-tier="5"],.refineItemIcon[data-item-tier="5"] { background:linear-gradient(135deg,#705018,#d8aa45 50%,#7b5618); } .refineStackIcon[data-item-tier="6"],.refineItemIcon[data-item-tier="6"] { background:linear-gradient(135deg,#711d2a,#c94052 50%,#701c2b); } .refineStackIcon[data-item-tier="7"],.refineItemIcon[data-item-tier="7"] { background:linear-gradient(120deg,#dc5163,#d8aa45 28%,#52c987 48%,#4d9fe6 68%,#aa72e2 86%,#df5e9f); } .refineStackIcon img { width:35px; height:35px; object-fit:contain; image-rendering:pixelated; } .refineLevelBadge { position:absolute; right:1px; bottom:1px; min-width:18px; padding:2px 3px; color:#17110a; background:#ffe29a; border:1px solid #5f431c; font:950 8px/1 monospace; text-align:center; } .refineStackCopy { min-width:0; } .refineStackCopy strong,.refineStackCopy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .refineStackCopy strong { color:#eef3ff; font-size:10px; } .refineStackCopy small { margin-top:4px; color:#93a4c8; font-size:7.5px; } .refineEquippedBadge { align-self:start; padding:3px 4px; min-width:16px; text-align:center; color:#111a2d; border:1px solid #d8aa45; background:linear-gradient(180deg,#ffe9a7,#f0c85f); border-radius:2px; font:900 9px/1 monospace; letter-spacing:.04em; } .refineListState { padding:22px 8px; color:#93a4c8; text-align:center; font-size:9px; line-height:1.5; } .refineEmptyState { min-height:100%; display:grid; place-content:center; justify-items:center; gap:8px; padding:24px; text-align:center; } .refinePreview > [hidden] { display:none!important; } .refineEmptyState span { width:56px; height:56px; display:grid; place-items:center; color:#d8aa45; border:1px solid #52658c; background:#111a2d; font-size:28px; transform:rotate(45deg); } .refineEmptyState strong { color:#eef3ff; font-size:13px; } .refineEmptyState small { max-width:300px; color:#93a4c8; font-size:9px; line-height:1.55; } .refineItemHero { display:grid; grid-template-columns:88px minmax(0,1fr); gap:14px; align-items:center; padding:13px; border:1px solid #42577f; background:linear-gradient(135deg,#182541,#111a2d); } .refineItemIcon { position:relative; width:84px; height:84px; display:grid; place-items:center; border:2px solid #d8aa45; background:radial-gradient(circle,#26365a,#080d1b 72%); box-shadow:inset 0 0 0 3px #111a2d; } .refineItemIcon img { max-width:70px; max-height:70px; object-fit:contain; image-rendering:pixelated; } .refineItemHero small { color:#d8aa45; font:900 8px/1.2 monospace; letter-spacing:.1em; } .refineItemHero h3 { margin:5px 0; color:#eef3ff; font-size:18px; } #refineItemStack { color:#93a4c8; font-size:10px; } .refineSourceLabel { margin-top:10px; padding:9px; border:1px solid #42577f; background:#0d1425; } .refineMaterialPicker { margin-top:10px; padding:9px; border:1px solid #42577f; background:#0d1425; } .refineStoneSlots { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-top:9px; } .refineStoneSlot { min-width:44px; min-height:70px; display:grid; place-items:center; gap:2px; padding:5px; color:#93a4c8; cursor:pointer; border:1px dashed #52658c; background:#111a2d; } .refineStoneSlot[draggable="true"] { color:#ffe29a; border-style:solid; border-color:#d8aa45; background:#282115; } .refineStoneSlot small { justify-self:start; font:800 7px monospace; }.refineStoneSlot span { font-size:20px; }.refineStoneSlot strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:7px; } .refineStoneSlotIcon { width:38px; height:38px; object-fit:contain; image-rendering:pixelated; border:1px solid hsl(var(--item-tier-hue,220) 48% 44%); background:#0b1120; } .refineInventoryHeading { margin-top:10px; } .refineMaterialInventory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:7px; } .refineInventoryStone { min-height:70px; display:grid; grid-template-columns:54px minmax(0,1fr); gap:8px; align-items:center; padding:6px 8px; color:#eef3ff; text-align:left; cursor:pointer; border:1px solid #42577f; background:#111a2d; } .refineInventoryStone[data-item-tier] { border-color:hsl(var(--item-tier-hue) 60% 48%); background:linear-gradient(135deg,hsl(var(--item-tier-hue) 48% 24% / .78),#111a2d 72%); } .refineInventoryStoneIcon { width:52px; height:52px; object-fit:contain; image-rendering:pixelated; border:1px solid hsl(var(--item-tier-hue,220) 48% 44%); background:#0b1120; } .refineInventoryStoneCopy { min-width:0; }.refineInventoryStone strong,.refineInventoryStone small { display:block; }.refineInventoryStone strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.refineInventoryStone small { margin-top:3px; color:#b3c0dc; font-size:7px; line-height:1.45; }.refineInventoryStone:disabled { opacity:.5; filter:saturate(.55); }.refineInventoryStone:disabled .refineInventoryStoneIcon { opacity:.72; } .refineQuoteMeta { margin-top:8px; min-height:30px; padding:6px; color:#9ec4e8; border-left:3px solid #69aef7; background:#101d32; font-size:8px; line-height:1.45; } .refineBonusPanel { margin-top:10px; padding:11px; border:1px solid #35476f; background:#0d1425; } .refineBonusRows { display:grid; gap:6px; margin-top:9px; } .refineBonusRow { display:grid; grid-template-columns:minmax(0,1fr) auto 18px auto; gap:7px; align-items:center; min-height:34px; padding:5px 8px; border:1px solid #35476f; background:#111a2d; } .refineBonusRow span { color:#93a4c8; font-size:8px; font-weight:850; } .refineBonusRow b { color:#eef3ff; font-size:11px; } .refineBonusRow i { color:#d8aa45; font-style:normal; text-align:center; } .refineBonusRow strong { color:#72d99b; font-size:12px; } .refineBonusPanel > p { margin:9px 0 0; color:#93a4c8; font-size:8px; line-height:1.5; } .refineRiskCard { display:grid; justify-items:center; gap:3px; padding:12px; border:1px solid #42577f; background:#0d1425; text-align:center; } .refineRiskCard small,.refineRiskCard span { color:#93a4c8; font-size:8px; } .refineRiskCard strong { color:#eef3ff; font:950 30px/1 monospace; } .refineRiskCard[data-risk="safe"] { border-color:#d8aa45; background:#282115; } .refineRiskCard[data-risk="safe"] strong { color:#ffe29a; } .refineRiskCard[data-risk="held"] { border-color:#cf8e38; background:#2b1d12; } .refineRiskCard[data-risk="held"] strong { color:#ffc56c; } .refineRiskCard[data-risk="downgrade"] { border-color:#b75155; background:#30151c; } .refineRiskCard[data-risk="downgrade"] strong { color:#ff8e91; } .refineRiskCard[data-risk="destroyed"] { border-color:#ff5c63; background:#3a1118; box-shadow:inset 0 0 0 1px #6f2029; } .refineRiskCard[data-risk="destroyed"] strong { color:#ff9398; } .refineOutcomeGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; } .refineOutcomeGrid span { min-height:36px; display:flex; justify-content:space-between; align-items:center; gap:5px; padding:5px 7px; border:1px solid #35476f; background:#0d1425; } .refineOutcomeGrid small { color:#93a4c8; font-size:7px; } .refineOutcomeGrid b { color:#eef3ff; font-size:9px; } .refineOutcomeGrid span:last-child { border-color:#63303b; } .refineOutcomeGrid span:last-child b { color:#ff9398; } .refineCosts { display:grid; gap:6px; margin:0; } .refineCosts div { display:flex; justify-content:space-between; gap:8px; min-height:32px; align-items:center; padding:5px 7px; border:1px solid #35476f; background:#0d1425; } .refineCosts dt { color:#93a4c8; font-size:8px; } .refineCosts dd { margin:0; color:#eef3ff; font-size:9px; font-weight:900; text-align:right; } .refineCosts dd.is-short { color:#ff8e91; } .refineCosts div[data-grade="1"] { border-left:3px solid #98a1b2; } .refineCosts div[data-grade="2"] { border-left:3px solid #72d99b; background:#10251f; } .refineCosts div[data-grade="3"] { border-left:3px solid #69aef7; background:#101d32; } .refineCosts div[data-grade="4"] { border-left:3px solid #c99cff; background:#21172f; } .refineBlocked { min-height:28px; padding:6px 7px; color:#ffbf8d; border-left:3px solid #a8623d; background:#241819; font-size:8px; line-height:1.4; } .refineBlocked:empty { display:none; } #refineAttempt,#refineRetry { min-height:42px; padding:8px; cursor:pointer; color:#17120a; border:1px solid #ffe29a; border-radius:3px; background:linear-gradient(#ffe29a,#d8aa45); font-size:11px; font-weight:950; } #refineAttempt[data-risk="downgrade"] { color:#fff; border-color:#ff8e91; background:linear-gradient(#b94f58,#77303a); } #refineAttempt[data-risk="destroyed"] { color:#fff; border-color:#ff9398; background:linear-gradient(#c5404b,#741d29); } #refineAttempt:disabled { cursor:not-allowed; color:#687897; border-color:#35476f; background:#18213a; } #refineRetry { color:#eef3ff; border-color:#69d7ff; background:#173750; } #refineAttempt:focus-visible,#refineRetry:focus-visible { outline:2px solid #080d1b; box-shadow:0 0 0 3px #69d7ff; } .refineAuthority { margin-top:auto; color:#7184aa; font-size:7px; line-height:1.45; text-align:center; } .refineResult { min-height:48px; display:flex; gap:9px; align-items:center; padding:8px 12px; border-top:1px solid #35476f; background:#0d1425; } .refineResultIcon { width:30px; height:30px; display:grid; place-items:center; border:1px solid #52658c; background:#111a2d; color:#93a4c8; } .refineResult strong,.refineResult small { display:block; } .refineResult strong { color:#eef3ff; font-size:10px; } .refineResult small { margin-top:2px; color:#93a4c8; font-size:8px; } .refineResult[data-outcome="success"] { border-top-color:#72d99b; background:#10251f; } .refineResult[data-outcome="success"] .refineResultIcon { color:#72d99b; border-color:#72d99b; } .refineResult[data-outcome="held"] { border-top-color:#cf8e38; background:#271d13; } .refineResult[data-outcome="held"] .refineResultIcon { color:#ffc56c; border-color:#cf8e38; } .refineResult[data-outcome="downgraded"] { border-top-color:#b75155; background:#2b151b; } .refineResult[data-outcome="downgraded"] .refineResultIcon { color:#ff8e91; border-color:#b75155; } .refineResult[data-outcome="destroyed"] { border-top-color:#ff5c63; background:#351016; } .refineResult[data-outcome="destroyed"] .refineResultIcon { color:#ff9398; border-color:#ff5c63; } .refineResult[data-outcome="error"] { border-top-color:#b75155; background:#24151a; } .refineResult[data-outcome="error"] .refineResultIcon { color:#ff8e91; border-color:#b75155; } .refineResult[data-outcome="pending"] .refineResultIcon { animation:refinePending .9s steps(4,end) infinite; } @keyframes refinePending { to { transform:rotate(360deg); } } .refineAttemptAnimation { position:absolute; z-index:5; inset:0; display:grid; place-items:center; padding:18px; cursor:wait; background:radial-gradient(circle at 50% 48%,rgba(38,57,95,.72),rgba(4,7,16,.94) 62%); } .refineAttemptAnimation[hidden] { display:none; } .refineAnimationStage { position:relative; width:min(390px,100%); min-height:330px; display:grid; grid-template-rows:1fr auto auto auto; place-items:center; overflow:hidden; padding:20px; border:2px solid #d8aa45; outline:1px solid #111a2d; outline-offset:-6px; background:radial-gradient(circle at 50% 38%,#22365c 0,#111a2d 46%,#080d1b 76%); box-shadow:0 24px 70px rgba(0,0,0,.8),inset 0 0 55px rgba(216,170,69,.1); } .refineAnimationStage::before { content:""; position:absolute; width:190px; height:190px; left:50%; top:29px; transform:translateX(-50%) rotate(45deg); border:2px solid rgba(216,170,69,.45); box-shadow:inset 0 0 0 12px rgba(8,13,27,.28),0 0 22px rgba(216,170,69,.18); } .refineAnimationItem { position:absolute; z-index:3; left:50%; top:74px; width:92px; height:92px; display:grid; place-items:center; transform:translateX(-50%); border:2px solid #ffe29a; background:radial-gradient(circle,#2b426c,#080d1b 72%); box-shadow:inset 0 0 0 4px #111a2d,0 0 22px rgba(216,170,69,.32); } .refineAnimationItem img { width:76px; height:76px; object-fit:contain; image-rendering:pixelated; } .refineAnimationStones { position:absolute; z-index:2; left:50%; top:180px; display:flex; gap:5px; transform:translateX(-50%); } .refineAnimationStones img { width:34px; height:34px; padding:2px; object-fit:contain; image-rendering:pixelated; border:1px solid #d8aa45; background:#171d2f; } .refineAnimationHammer { position:absolute; z-index:4; left:calc(50% + 38px); top:31px; width:62px; height:62px; transform-origin:12px 52px; } .refineAnimationHammer svg { width:100%; height:100%; fill:#ffe29a; filter:drop-shadow(0 4px 0 #6d4a18) drop-shadow(0 0 7px rgba(255,226,154,.55)); } .refineAnimationFlash { position:absolute; z-index:5; left:50%; top:112px; width:20px; height:20px; transform:translate(-50%,-50%) rotate(45deg); background:#fff6c5; opacity:0; box-shadow:0 0 22px 12px rgba(255,208,87,.6); } .refineAnimationSpark { position:absolute; z-index:5; left:50%; top:112px; width:5px; height:5px; background:#ffe29a; opacity:0; box-shadow:0 0 8px #ffd65e; } .refineAnimationStage > strong { z-index:6; align-self:end; margin-top:225px; color:#ffe29a; font-size:18px; text-align:center; } .refineAnimationStage > small { z-index:6; margin-top:5px; color:#aebddd; font-size:9px; line-height:1.45; text-align:center; } .refineAnimationStage > em { z-index:6; margin-top:12px; color:#69d7ff; font-size:8px; font-style:normal; } .refineAttemptAnimation.is-active:not(.is-resolved) .refineAnimationHammer { animation:refineHammerSwing 1.05s cubic-bezier(.65,0,.32,1) infinite; } .refineAttemptAnimation.is-active:not(.is-resolved) .refineAnimationItem { animation:refineItemCharge 1.05s ease-in-out infinite; } .refineAttemptAnimation.is-active:not(.is-resolved) .refineAnimationStones img { animation:refineStoneCharge 1.05s ease-in infinite; } .refineAttemptAnimation.is-active:not(.is-resolved) .refineAnimationStones img:nth-child(2) { animation-delay:.08s; } .refineAttemptAnimation.is-active:not(.is-resolved) .refineAnimationStones img:nth-child(3) { animation-delay:.16s; } .refineAttemptAnimation.is-active:not(.is-resolved) .refineAnimationStones img:nth-child(4) { animation-delay:.24s; } .refineAttemptAnimation.is-active:not(.is-resolved) .refineAnimationFlash { animation:refineForgeFlash 1.05s steps(2,end) infinite; } .refineAttemptAnimation.is-paused * { animation-play-state:paused!important; } .refineAttemptAnimation.is-resolved { cursor:pointer; } .refineAttemptAnimation.is-resolved .refineAnimationHammer,.refineAttemptAnimation.is-resolved .refineAnimationStones { opacity:0; } .refineAttemptAnimation.is-resolved .refineAnimationItem { animation:refineResultPop .58s cubic-bezier(.2,1.4,.35,1) both; } .refineAttemptAnimation.is-resolved .refineAnimationFlash { animation:refineResultBurst .62s ease-out both; } .refineAttemptAnimation.is-resolved .sparkA { animation:refineSparkA .62s ease-out both; } .refineAttemptAnimation.is-resolved .sparkB { animation:refineSparkB .62s .04s ease-out both; } .refineAttemptAnimation.is-resolved .sparkC { animation:refineSparkC .62s .08s ease-out both; } .refineAttemptAnimation[data-outcome="success"] .refineAnimationStage { border-color:#ffe29a; box-shadow:0 24px 70px rgba(0,0,0,.8),inset 0 0 70px rgba(77,213,174,.24); } .refineAttemptAnimation[data-outcome="success"] .refineAnimationStage > strong { color:#8ff4c3; text-shadow:0 0 12px rgba(114,217,155,.6); } .refineAttemptAnimation[data-outcome="held"] .refineAnimationStage { border-color:#cf8e38; box-shadow:0 24px 70px rgba(0,0,0,.8),inset 0 0 65px rgba(207,142,56,.2); } .refineAttemptAnimation[data-outcome="held"] .refineAnimationStage > strong { color:#ffc56c; } .refineAttemptAnimation[data-outcome="downgraded"] .refineAnimationStage,.refineAttemptAnimation[data-outcome="destroyed"] .refineAnimationStage { border-color:#ff6c75; box-shadow:0 24px 70px rgba(0,0,0,.8),inset 0 0 72px rgba(183,45,58,.3); } .refineAttemptAnimation[data-outcome="downgraded"] .refineAnimationStage > strong,.refineAttemptAnimation[data-outcome="destroyed"] .refineAnimationStage > strong { color:#ff9398; } .refineAttemptAnimation[data-outcome="destroyed"].is-resolved .refineAnimationItem { animation:refineResultShatter .65s ease-out both; } @keyframes refineHammerSwing { 0%,38%{transform:rotate(-38deg)} 55%,62%{transform:rotate(23deg)} 100%{transform:rotate(-38deg)} } @keyframes refineItemCharge { 0%,100%{filter:brightness(.82);transform:translateX(-50%) scale(.96)} 55%{filter:brightness(1.35);transform:translateX(-50%) scale(1.04)} } @keyframes refineStoneCharge { 0%,28%{opacity:.55;transform:translateY(7px)} 60%,100%{opacity:1;transform:translateY(-8px);filter:brightness(1.45)} } @keyframes refineForgeFlash { 0%,48%,100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.4)} 54%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1.4)} } @keyframes refineResultPop { 0%{transform:translateX(-50%) scale(.72);filter:brightness(2.2)} 100%{transform:translateX(-50%) scale(1.08);filter:brightness(1.15)} } @keyframes refineResultBurst { 0%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(.5)} 100%{opacity:0;transform:translate(-50%,-50%) rotate(225deg) scale(8)} } @keyframes refineSparkA { 0%{opacity:1;transform:translate(0)} 100%{opacity:0;transform:translate(-68px,-52px) rotate(90deg)} } @keyframes refineSparkB { 0%{opacity:1;transform:translate(0)} 100%{opacity:0;transform:translate(72px,-36px) rotate(135deg)} } @keyframes refineSparkC { 0%{opacity:1;transform:translate(0)} 100%{opacity:0;transform:translate(12px,70px) rotate(180deg)} } @keyframes refineResultShatter { 0%{transform:translateX(-50%) scale(1);filter:brightness(1.8)} 100%{transform:translateX(-50%) scale(.25) rotate(18deg);filter:grayscale(1);opacity:.18} } .refineConfirm { position:absolute; z-index:4; inset:0; display:grid; place-items:center; padding:18px; background:rgba(4,7,16,.88); } .refineConfirm[hidden] { display:none; } .refineConfirm section { width:min(420px,100%); padding:20px; border:2px solid #b75155; background:#17101a; text-align:center; box-shadow:0 18px 60px rgba(0,0,0,.72); } .refineConfirm section > span { width:42px; height:42px; display:grid; place-items:center; margin:0 auto 9px; color:#fff; border:2px solid #ff8e91; background:#7a3039; font:950 23px/1 monospace; } .refineConfirm h3 { margin:0; color:#fff0f0; font-size:16px; } .refineConfirm p { color:#d8afb4; font-size:10px; line-height:1.6; } .refineConfirm section > div { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .refineConfirm button { min-height:44px; border:1px solid #586b94; color:#eef3ff; background:#182541; font-weight:900; } #refineConfirmApprove { border-color:#ff8e91; background:#87343e; } .refineConfirm button:focus-visible { outline:2px solid #080d1b; box-shadow:0 0 0 3px #69d7ff; } #refineCraftModal { position:fixed; z-index:76; inset:0; display:grid; place-items:center; padding:12px; background:rgba(4,7,16,.88); } #refineCraftModal[hidden] { display:none; } .refineCraftWindow { position:relative; width:min(720px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); display:flex; flex-direction:column; overflow:hidden; padding:0; border:2px solid #d8aa45; background:#080d1b; } #refineCraftClose { width:44px; height:44px; color:#eef3ff; border:1px solid #586b94; background:#182541; } .refineCraftRecipes { min-height:180px; overflow-y:auto; display:grid; gap:8px; padding:14px; } .refineCraftRecipe { min-height:70px; display:grid; grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr); gap:8px; align-items:center; padding:10px; color:#eef3ff; text-align:left; cursor:pointer; border:1px solid #42577f; background:#111a2d; } .refineCraftRecipe[aria-checked="true"] { border-color:#ffe29a; background:#282115; box-shadow:inset 4px 0 #d8aa45; } .refineCraftRecipe strong,.refineCraftRecipe small { display:block; } .refineCraftRecipe small { margin-top:4px; color:#93a4c8; font-size:8px; } .refineCraftRecipeItem { min-width:0; display:grid; grid-template-columns:40px minmax(0,1fr); gap:8px; align-items:center; } .refineCraftRecipeCopy { min-width:0; } .refineCraftRecipeIcon { box-sizing:border-box; width:40px; height:40px; padding:3px; object-fit:contain; image-rendering:pixelated; border:1px solid #42577f; border-radius:8px; background:#0a1020; } .refineCraftRecipe i { color:#d8aa45; text-align:center; font-style:normal; } .refineCraftRecipe em { grid-column:1/-1; color:#ffbf8d; font-size:8px; font-style:normal; } .refineCraftFooter { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; padding:12px; border-top:1px solid #35476f; background:#111a2d; } .refineCraftFooter p { margin:0; color:#93a4c8; font-size:8px; line-height:1.45; } #refineCraftAttempt,#refineCraftRetry { min-height:44px; padding:8px 14px; color:#17120a; border:1px solid #ffe29a; background:linear-gradient(#ffe29a,#d8aa45); font-weight:950; } #refineCraftAttempt:disabled { color:#687897; border-color:#35476f; background:#18213a; } .refineCraftBatch { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; } .refineCraftBatch[hidden] { display:none; } .refineCraftBatchOption { min-height:44px; padding:5px 12px; border-radius:8px; cursor:pointer; color:#cfe0ff; background:#18213a; border:1px solid #35476f; font:800 12px "Segoe UI",sans-serif; } .refineCraftBatchOption:hover:not(:disabled), .refineCraftBatchOption:focus-visible { border-color:#5ec6ff; outline:none; } .refineCraftBatchOption.is-active { color:#17120a; background:linear-gradient(#ffe29a,#d8aa45); border-color:#ffe29a; } .refineCraftBatchOption:disabled { opacity:.4; cursor:default; } .refineCraftBatchOption[hidden] { display:none; } #refineCraftRetry { color:#eef3ff; border-color:#69d7ff; background:#173750; } .refineCraftResultOverlay { position:fixed; z-index:79; inset:0; display:grid; place-items:center; padding:16px; cursor:pointer; background:radial-gradient(circle at 50% 45%,rgba(34,53,88,.8),rgba(4,7,16,.94) 68%); backdrop-filter:blur(5px); } .refineCraftResultOverlay[hidden] { display:none; } .refineCraftResultCard { box-sizing:border-box; width:min(440px,100%); padding:22px; text-align:center; border:2px solid #d8aa45; outline:1px solid #111a2d; outline-offset:-6px; background:linear-gradient(150deg,#182541,#080d1b 72%); box-shadow:0 28px 90px rgba(0,0,0,.82),inset 0 0 45px rgba(216,170,69,.12); animation:refineCraftResultEnter .34s cubic-bezier(.2,1.25,.35,1) both; } .refineCraftResultKicker { color:#d8aa45; font:900 7px/1 monospace; letter-spacing:.18em; } .refineCraftResultCard h2 { margin:8px 0 14px; color:#eef3ff; font-size:21px; } .refineCraftResultFlow { display:grid; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr); gap:8px; align-items:center; } .refineCraftResultFlow > i { color:#ffe29a; font-size:22px; font-style:normal; } .refineCraftResultItem { min-width:0; display:grid; justify-items:center; gap:6px; padding:10px 6px; border:1px solid #42577f; background:#0d1425; } .refineCraftResultItem img { width:64px; height:64px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 5px 8px rgba(0,0,0,.55)); } .refineCraftResultItem b { max-width:100%; overflow:hidden; color:#dce8ff; font-size:9px; text-overflow:ellipsis; white-space:nowrap; } .refineCraftResultRecipe { margin:10px 0 0; color:#d8aa45; font-size:9px; line-height:1.45; text-align:center; } #refineCraftResultScore { display:block; margin-top:16px; color:#8ff4c3; font-size:18px; } .refineCraftResultOverlay[data-outcome="held"] #refineCraftResultScore { color:#ffc56c; } .refineCraftResultCard p { margin:6px 0 14px; color:#aebddd; font-size:9px; line-height:1.5; } .refineCraftResultStats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } .refineCraftResultStats span { padding:8px; border:1px solid #35476f; background:#111a2d; } .refineCraftResultStats small,.refineCraftResultStats b { display:block; } .refineCraftResultStats small { color:#8294b8; font-size:7px; } .refineCraftResultStats b { margin-top:4px; color:#ffe29a; font-size:14px; } .refineCraftResultCard > em { display:block; margin-top:15px; color:#69d7ff; font-size:8px; font-style:normal; } @keyframes refineCraftResultEnter { from{opacity:0;transform:translateY(18px) scale(.94)} to{opacity:1;transform:none} } #marketModal { position:fixed; z-index:78; inset:0; display:grid; place-items:center; padding:12px; background:rgba(3,6,14,.9); } #marketModal[hidden] { display:none; } .marketWindow { position:relative; width:min(1120px,calc(100vw - 24px)); height:min(740px,calc(100dvh - 24px)); display:flex; flex-direction:column; overflow:hidden; padding:0; border:2px solid #d8aa45; border-radius:4px; background:#080d1b; box-shadow:0 30px 100px rgba(0,0,0,.82),inset 0 0 0 3px #111a2d; } .marketHeader { min-height:52px; display:grid; grid-template-columns:42px minmax(0,1fr) auto auto 44px; gap:10px; align-items:center; padding:8px 12px; border-bottom:1px solid #35476f; background:linear-gradient(90deg,#182541,#111a2d 58%,#1d1812); } .marketHeaderIcon { width:38px; height:38px; display:grid; place-items:center; border:1px solid #d8aa45; background:#17130e; box-shadow:inset 0 0 0 2px #080d1b; } .marketHeaderIcon img { width:36px; height:36px; object-fit:contain; image-rendering:pixelated; } .marketHeaderCopy small { color:#d8aa45; font:950 9px/1 monospace; letter-spacing:.18em; } .marketHeaderCopy h2,.marketHeaderCopy p { margin:0; } .marketHeaderCopy h2 { margin-top:2px; color:#eef3ff; font-size:18px; } .marketHeaderCopy p { margin-top:2px; color:#93a4c8; font-size:10px; } .marketWallet { min-width:122px; padding:5px 9px; border:1px solid #6e5932; background:#17140f; text-align:right; } .marketWallet small,.marketWallet b { display:block; } .marketWallet small { color:#93a4c8; font-size:9px; } .marketWallet b { margin-top:2px; color:#ffe29a; font-size:13px; } #marketClose { width:44px; height:44px; cursor:pointer; border:1px solid #586b94; color:#eef3ff; background:#182541; } #marketClose:hover,#marketClose:focus-visible { border-color:#69d7ff; outline:2px solid #080d1b; box-shadow:0 0 0 3px #69d7ff; } .marketAccessBadge { max-width:238px; min-height:38px; display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:7px; align-items:center; box-sizing:border-box; padding:4px 8px; border:1px solid #9b7731; color:#ffe7a8; background:#211a10; } .marketAccessBadge[hidden] { display:none; } .marketPermitIcon { width:26px; height:26px; display:grid; place-items:center; border:1px solid #d8aa45; background:#111a2d; } .marketAccessBadge strong,.marketAccessBadge p { display:block; margin:0; } .marketAccessBadge strong { color:#ffe29a; font-size:10px; } .marketAccessBadge p { margin-top:2px; overflow:hidden; color:#cbbd9c; font-size:8px; text-overflow:ellipsis; white-space:nowrap; } .marketAccessBadge > b { color:#ffe29a; font-size:10px; white-space:nowrap; } .marketTabs { min-height:40px; display:flex; align-items:stretch; overflow-x:auto; border-bottom:1px solid #35476f; background:#0d1425; } .marketTabs button { position:relative; min-width:118px; padding:8px 14px; cursor:pointer; border:0; border-right:1px solid #263657; color:#93a4c8; background:transparent; font-size:11px; font-weight:900; white-space:nowrap; } .marketTabs button[aria-current="page"] { color:#ffe29a; background:#182541; } .marketTabs button[aria-current="page"]::after { content:""; position:absolute; left:8px; right:8px; bottom:0; height:2px; background:#d8aa45; } .marketTabs button span { display:inline-grid; min-width:16px; height:16px; place-items:center; margin-left:4px; border-radius:8px; background:#2e3d60; } .marketBody { flex:1; min-height:0; display:grid; grid-template-columns:200px minmax(390px,1fr) 340px; } .marketCategories,.marketCenter,.marketSellOrdersPane,.marketDetail { min-width:0; min-height:0; } .marketCategories[hidden] { display:none; } .marketSellOrdersPane[hidden] { display:none; } .marketBody:not([data-market-tab="sell"]) .marketCategories[hidden] + .marketCenter { grid-column:1/3; } .marketBody:not([data-market-tab="sell"]) .marketDetail { grid-column:3; } .marketBody[data-market-tab="sell"] { grid-template-columns:minmax(248px,.55fr) minmax(390px,1.35fr) 340px; } .marketCategories { padding:12px; overflow-y:auto; border-right:1px solid #35476f; background:#0d1425; } .marketSectionTitle { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:#eef3ff; font-size:11px; font-weight:900; } .marketSectionTitle button { min-height:30px; border:0; color:#69d7ff; background:transparent; font-size:10px; } .marketCategories > button,.marketCategoryChildren > button { width:100%; min-height:42px; display:flex; justify-content:space-between; align-items:center; padding:8px 10px; cursor:pointer; border:1px solid transparent; color:#cbd6ee; background:transparent; text-align:left; } .marketCategories > button,.marketCategoryChildren > button { font-size:11px; } .marketCategories > button small,.marketCategoryChildren > button small { color:#66799f; font:800 8px/1 monospace; } .marketCategories > button:hover,.marketCategories > button:focus-visible,.marketCategoryChildren > button:hover,.marketCategoryChildren > button:focus-visible { border-color:#52658c; outline:none; } .marketCategories > button[aria-current="true"],.marketCategoryChildren > button[aria-current="true"] { border-color:#d8aa45; color:#ffe29a; background:#211b12; box-shadow:inset 3px 0 #d8aa45; } .marketCategoryChildren { display:grid; gap:3px; margin:-2px 0 5px 10px; padding-left:7px; border-left:1px solid #35476f; } .marketCategoryChildren > button { min-height:36px; padding-left:9px; } .marketTrustNote { display:grid; gap:5px; margin-top:18px; padding:10px; border:1px solid #2d4861; color:#8fb7d4; background:#0c1b29; } .marketTrustNote b { color:#bfe7ff; font-size:10px; } .marketTrustNote span { font-size:9px; line-height:1.55; } .marketCenter { display:flex; flex-direction:column; overflow:hidden; background:#080d1b; } .marketBrowseTools { display:grid; grid-template-columns:minmax(220px,1.7fr) repeat(3,minmax(104px,.7fr)); gap:8px; align-items:end; padding:10px 12px; border-bottom:1px solid #263657; } .marketBrowseTools[hidden] { display:none; } .marketBrowseTools label { display:grid; gap:5px; color:#93a4c8; font-size:9px; font-weight:800; } .marketBrowseTools input,.marketBrowseTools select { min-width:0; min-height:42px; box-sizing:border-box; padding:7px 9px; border:1px solid #42577f; border-radius:2px; color:#eef3ff; background:#111a2d; font-size:11px; } .marketSearch { position:relative; display:block!important; } .marketSearch span { position:absolute; z-index:1; left:11px; bottom:11px; color:#69d7ff; font-size:16px; } .marketSearch input { width:100%; padding-left:29px; } .marketBrowseTools input:focus,.marketBrowseTools select:focus { border-color:#69d7ff; outline:2px solid #080d1b; box-shadow:0 0 0 3px #69d7ff; } .marketCenterHeading { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 12px; } .marketCenterHeading small,.marketCenterHeading h3 { display:block; margin:0; } .marketCenterHeading small { color:#d8aa45; font:850 8px/1 monospace; letter-spacing:.14em; } .marketCenterHeading h3 { margin-top:4px; color:#eef3ff; font-size:14px; } #marketRefresh { min-height:44px; padding:6px 10px; cursor:pointer; border:1px solid #42577f; color:#b8cae9; background:#111a2d; font-size:10px; font-weight:900; } .marketSellOrdersPane { display:flex; flex-direction:column; overflow:hidden; border-left:1px solid #35476f; background:#0d1425; } .marketSellOrdersHeading { min-height:51px; display:flex; justify-content:space-between; align-items:center; gap:8px; box-sizing:border-box; padding:9px 10px; border-bottom:1px solid #263657; } .marketSellOrdersHeading small,.marketSellOrdersHeading h3 { display:block; margin:0; } .marketSellOrdersHeading small { color:#d8aa45; font:850 8px/1 monospace; letter-spacing:.12em; } .marketSellOrdersHeading h3 { margin-top:4px; color:#eef3ff; font-size:14px; } .marketSellOrdersHeading > b { min-width:26px; height:26px; display:grid; place-items:center; border:1px solid #6e5932; color:#ffe29a; background:#211a10; font-size:11px; } .marketSellOrdersList { flex:1; min-height:80px; overflow-y:auto; display:grid; align-content:start; gap:6px; padding:8px; } .marketSellOrdersList .marketRow { min-height:62px; grid-template-columns:42px minmax(0,1fr); gap:7px; padding:6px; } .marketSellOrdersList .marketRowIcon { width:40px; height:40px; } .marketSellOrdersList .marketRowIcon img { width:36px; height:36px; } .marketSellOrdersList .marketRowPrice { grid-column:2; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:6px; text-align:left; } .marketSellOrdersList .marketRowPrice small { margin-top:0; } .marketSellOrdersEmpty { padding:28px 10px; color:#8799bb; font-size:11px; line-height:1.5; text-align:center; } .marketSellOrdersStatus { min-height:34px; box-sizing:border-box; padding:7px 9px; border-top:1px solid #263657; color:#93a4c8; font-size:9px; line-height:1.45; } .marketList { flex:1; min-height:80px; overflow-y:auto; display:grid; align-content:start; gap:6px; padding:0 10px 10px; } .marketBody[data-market-tab="sell"] .marketCenter .marketList { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:0 8px 10px; } .marketBody[data-market-tab="sell"] .marketCenter .marketRow { min-width:0; min-height:84px; box-sizing:border-box; grid-template-columns:1fr; align-content:center; justify-items:center; gap:5px; overflow:hidden; padding:6px 4px; text-align:center; } .marketBody[data-market-tab="sell"] .marketCenter .marketRowCopy { width:100%; } .marketBody[data-market-tab="sell"] .marketCenter .marketRowCopy strong { display:-webkit-box; overflow:hidden; font-size:9px; line-height:1.25; white-space:normal; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .marketBody[data-market-tab="sell"] .marketCenter .marketRowCopy small { margin-top:2px; font-size:8px; } .marketBody[data-market-tab="sell"] .marketCenter .marketRowPrice { display:none; } .marketRow { width:100%; min-height:64px; display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:9px; align-items:center; position:relative; padding:7px; cursor:pointer; border:1px solid #35476f; color:#eef3ff; background:#111a2d; text-align:left; } .marketRow:hover,.marketRow:focus-visible { border-color:#69d7ff; outline:none; } .marketRow[aria-selected="true"] { border-color:#ffe29a; background:#182541; box-shadow:inset 3px 0 #d8aa45; } .marketBody[data-market-tab="sell"] .marketCenter .marketRow.is-equipped { border-color:#46536a; color:#8995aa; background:#111722; box-shadow:none; } .marketBody[data-market-tab="sell"] .marketCenter .marketRow.is-equipped[aria-selected="true"] { border-color:#8190aa; box-shadow:inset 3px 0 #68758b; } .marketBody[data-market-tab="sell"] .marketCenter .marketRow.is-equipped .marketRowIcon { border-color:#536074; background:#151b27; } .marketBody[data-market-tab="sell"] .marketCenter .marketRow.is-equipped .marketRowIcon img { filter:grayscale(1); opacity:.48; } .marketBody[data-market-tab="sell"] .marketCenter .marketRow.is-equipped .marketRowCopy { opacity:.58; } .marketEquippedBadge { position:absolute; z-index:1; top:5px; right:5px; min-width:18px; height:18px; display:grid; place-items:center; box-sizing:border-box; padding:0 4px; border:1px solid #aab4c6; border-radius:2px; color:#f5f7fb; background:#5b6679; font:950 10px/1 monospace; box-shadow:0 1px 0 #080d1b; } .marketRowIcon,.marketItemIcon { display:grid; place-items:center; overflow:hidden; border:1px solid #42577f; background:#080d1b; } .marketRowIcon { width:50px; height:50px; } .marketRowIcon img { width:44px; height:44px; object-fit:contain; image-rendering:pixelated; } .marketRowIcon[data-item-tier],.marketItemIcon[data-item-tier] { border-color:hsl(var(--item-tier-hue) 75% 65%); background:hsl(var(--item-tier-hue) 45% 15%); } .marketRowIcon[data-item-tier="1"],.marketItemIcon[data-item-tier="1"] { border-color:#536b9f; background:#0c1324; } .marketRowCopy { min-width:0; } .marketRowCopy strong,.marketRowCopy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .marketRowCopy strong { color:#eef3ff; font-size:12px; } .marketRowCopy small { margin-top:4px; color:#93a4c8; font-size:9px; } .marketRowCopy .marketOrderTiming { color:#ffe29a; font-variant-numeric:tabular-nums; } .marketRowPrice { min-width:94px; color:#ffe29a; text-align:right; } .marketRowPrice b,.marketRowPrice small { display:block; } .marketRowPrice b { font-size:12px; } .marketRowPrice small { margin-top:4px; color:#7f92ba; font-size:9px; } .marketListState { padding:26px 12px; color:#93a4c8; text-align:center; font-size:11px; line-height:1.55; } #marketLoadMore { min-height:38px; margin:0 10px 8px; cursor:pointer; border:1px solid #42577f; color:#cbd8ef; background:#111a2d; } .marketListStatus { min-height:18px; padding:0 12px 8px; color:#93a4c8; font-size:10px; } .marketDetail { display:flex; flex-direction:column; overflow-y:auto; padding:12px; border-left:1px solid #35476f; background:#111a2d; } #marketMobileDetailClose { display:none; min-height:38px; margin:-4px 0 8px; border:1px solid #42577f; color:#b9c9e4; background:#0d1425; } .marketDetailEmpty { min-height:100%; display:grid; place-content:center; justify-items:center; gap:8px; color:#8192b5; text-align:center; } .marketDetailEmpty[hidden],#marketDetailContent[hidden] { display:none; } .marketDetailEmpty img { width:76px; height:76px; object-fit:contain; image-rendering:pixelated; opacity:.45; } .marketDetailEmpty b { color:#b9c7e1; font-size:13px; } .marketDetailEmpty span { max-width:220px; font-size:10px; line-height:1.5; } .marketItemHero { display:grid; grid-template-columns:72px minmax(0,1fr); gap:10px; align-items:center; padding-bottom:12px; border-bottom:1px solid #35476f; } .marketItemIcon { width:70px; height:70px; } .marketItemIcon img { width:62px; height:62px; object-fit:contain; image-rendering:pixelated; } .marketItemHero h3,.marketItemHero p { margin:0; } .marketItemHero small { color:#d8aa45; font:850 9px/1 monospace; } .marketItemHero h3 { margin-top:4px; color:#eef3ff; font-size:16px; } .marketItemHero p { margin-top:5px; color:#93a4c8; font-size:10px; line-height:1.5; } .marketPriceHistory { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; } .marketPriceHistory span { padding:7px; border:1px solid #35476f; background:#0d1425; } .marketPriceHistory small,.marketPriceHistory b { display:block; } .marketPriceHistory small { color:#7f92ba; font-size:9px; } .marketPriceHistory b { margin-top:3px; color:#dce7fb; font-size:11px; } .marketTransaction { display:grid; gap:8px; margin-top:10px; } .marketTransaction label { display:grid; gap:5px; color:#a8b6d2; font-size:10px; font-weight:800; } .marketTransaction input,.marketTransaction select { min-height:40px; box-sizing:border-box; padding:8px; border:1px solid #42577f; color:#eef3ff; background:#0d1425; font-size:12px; } .marketTransaction button,.marketPrimaryAction { min-height:44px; padding:8px; cursor:pointer; border:1px solid #ffe29a; color:#17120a; background:linear-gradient(#ffe29a,#d8aa45); font-weight:950; } .marketTransaction button:disabled { cursor:not-allowed; color:#667897; border-color:#35476f; background:#18213a; } .marketFeePreview { display:grid; gap:5px; margin:0; } .marketFeePreview div { display:flex; justify-content:space-between; gap:8px; padding:6px 7px; border:1px solid #35476f; background:#0d1425; } .marketFeePreview dt { color:#93a4c8; font-size:9px; } .marketFeePreview dd { margin:0; color:#eef3ff; font-size:11px; font-weight:900; text-align:right; } .marketFeePreview .fee dd { color:#ffbf76; } .marketFeePreview .net dd { color:#82e7ad; } .marketSellSummary { display:grid; gap:6px; padding:9px; border:1px solid #52658c; background:#0b1324; } .marketSellSummary > div { display:flex; justify-content:space-between; gap:10px; align-items:center; } .marketSellSummary span { color:#93a4c8; font-size:9px; } .marketSellSummary b { color:#eef3ff; font-size:11px; text-align:right; } .marketSellSummary .marketSellSummaryNet { padding-top:7px; border-top:1px solid #263657; } .marketSellSummary .marketSellSummaryNet b { color:#82e7ad; } .marketQuoteNotice { padding:8px; border-left:3px solid #69d7ff; color:#bfe7ff; background:#0c1b29; font-size:9px; line-height:1.5; } .marketBlockedNotice { padding:8px; border-left:3px solid #d8aa45; color:#eed8a4; background:#2a2112; font-size:10px; line-height:1.5; } .marketActionStatus { min-height:18px; margin-top:auto; padding-top:9px; color:#93a4c8; font-size:10px; line-height:1.45; } .marketActionStatus.is-error { color:#ff9a9e; } .marketActionStatus.is-success { color:#82e7ad; } .marketConfirm { position:absolute; z-index:5; inset:0; display:grid; place-items:center; padding:16px; background:rgba(4,7,16,.9); } .marketConfirm[hidden] { display:none; } .marketConfirm section { width:min(460px,100%); box-sizing:border-box; padding:20px; border:2px solid #d8aa45; background:#111a2d; box-shadow:0 24px 80px rgba(0,0,0,.82); } .marketConfirm section > small { color:#d8aa45; font:900 7px/1 monospace; letter-spacing:.16em; } .marketConfirm h3 { margin:7px 0 12px; color:#eef3ff; font-size:17px; } #marketConfirmText { color:#c1cce1; font-size:11px; line-height:1.55; } .marketConfirmSummary { display:grid; gap:5px; } .marketConfirmSummary div { display:flex; justify-content:space-between; gap:12px; padding:6px; border:1px solid #35476f; background:#0d1425; } .marketConfirmSummary b { color:#ffe29a; text-align:right; } .marketConfirmWarning { margin-top:9px; padding:8px; border-left:3px solid #c34c54; color:#ffb4b8; background:#2b151b; } .marketConfirmActions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; } .marketConfirmActions button { min-height:44px; border:1px solid #586b94; color:#eef3ff; background:#182541; font-weight:900; } #marketConfirmApprove { color:#17120a; border-color:#ffe29a; background:linear-gradient(#ffe29a,#d8aa45); } .marketConfirmActions button:focus-visible { outline:2px solid #080d1b; box-shadow:0 0 0 3px #69d7ff; } body.marketOpen { overflow:hidden; } @media(max-width:820px){ #marketModal { padding:0; } .marketWindow { width:100vw; height:100dvh; border-radius:0; } .marketHeader { grid-template-columns:38px minmax(0,1fr) auto 44px; padding-top:max(7px,env(safe-area-inset-top)); } .marketHeaderIcon { width:36px; height:36px; } .marketHeaderIcon img { width:34px; height:34px; } .marketHeaderCopy p,.marketWallet { display:none; } .marketAccessBadge { max-width:94px; grid-template-columns:26px minmax(0,1fr); padding:4px 6px; } .marketAccessBadge p,.marketAccessBadge > b { display:none; } .marketTabs button { min-width:106px; min-height:44px; } .marketBody { display:block; overflow:hidden; } .marketCategories { display:flex; gap:6px; overflow-x:auto; padding:8px 10px; border-right:0; border-bottom:1px solid #35476f; scroll-snap-type:x mandatory; } .marketSectionTitle,.marketTrustNote { display:none; } .marketCategories > button,.marketCategoryChildren > button { flex:0 0 auto; width:auto; min-width:92px; min-height:44px; scroll-snap-align:start; } .marketCategoryChildren { display:contents; } .marketCenter { height:calc(100% - 61px); } .marketBody[data-market-tab="sell"] .marketCenter { height:42%; } .marketBody[data-market-tab="sell"] .marketSellOrdersPane { height:58%; } .marketBody[data-market-tab="sell"] .marketCenter .marketList { grid-template-columns:repeat(5,minmax(0,1fr)); } .marketBody[data-market-tab="sell"] .marketSellOrdersPane { border-top:1px solid #d8aa45; border-left:0; } .marketBody[data-market-tab="sell"] .marketSellOrdersHeading { min-height:47px; } .marketBody[data-market-tab="sell"] .marketSellOrdersList { padding-bottom:10px; } .marketBrowseTools { grid-template-columns:repeat(3,minmax(0,1fr)); } .marketBrowseTools .marketSearch { grid-column:1/-1; } .marketBrowseTools input,.marketBrowseTools select { min-height:44px; } .marketSearch span { bottom:12px; } .marketDetail { position:absolute; z-index:3; left:0; right:0; bottom:0; max-height:55dvh; padding-bottom:max(12px,env(safe-area-inset-bottom)); border:1px solid #d8aa45; border-bottom:0; background:#111a2d; box-shadow:0 -20px 50px rgba(0,0,0,.72); } .marketDetail[data-mobile-open="false"] { display:none; } #marketMobileDetailClose { display:block; min-height:44px; } .marketTransaction input,.marketTransaction select { min-height:44px; } .marketTransaction .marketPrimaryAction { position:sticky; z-index:1; bottom:0; } .marketItemHero { grid-template-columns:58px minmax(0,1fr); } .marketItemIcon { width:56px; height:56px; } .marketItemIcon img { width:50px; height:50px; } .marketRow { min-height:70px; } .marketConfirm { padding:12px; } } @media(max-height:440px) and (orientation:landscape){ .marketHeaderCopy p,.marketAccessBadge p { display:none; } .marketBody { grid-template-columns:150px minmax(320px,1fr) 250px; } .marketBody[data-market-tab="sell"] { grid-template-columns:minmax(220px,.7fr) minmax(300px,1.3fr) 250px; } .marketBody[data-market-tab="sell"] .marketCenter .marketList { grid-template-columns:repeat(3,minmax(0,1fr)); } .marketCategories { display:block; padding:7px; border-right:1px solid #35476f; } .marketCategories > button { width:100%; min-height:34px; } .marketCenter { height:auto; } .marketDetail { position:relative; max-height:none; border-top:0; border-right:0; border-bottom:0; } } .skinGachaWindow{width:min(680px,calc(100vw - 24px));max-height:min(780px,calc(100vh - 24px));overflow:auto;padding:0;border:1px solid rgba(170,126,255,.55);background:linear-gradient(160deg,rgba(27,20,54,.98),rgba(11,20,39,.98));box-shadow:0 26px 80px rgba(0,0,0,.65)} .skinGachaHeader{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:13px;align-items:center;padding:18px;border-bottom:1px solid rgba(163,124,255,.28)} .skinGachaHeader h2,.skinGachaHeader p{margin:0}.skinGachaHeader h2{color:#f0eaff;font-size:20px}.skinGachaHeader p{color:#aebbd3;font-size:12px;margin-top:3px}.skinGachaHeader small{color:#b18cff;font-weight:900;letter-spacing:.13em} .skinGachaSigil{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;font-size:30px;color:#fff2a8;background:radial-gradient(circle,#8c67dc,#3d2d77 62%,#17152c);box-shadow:0 0 24px rgba(158,113,255,.48)} #skinGachaClose{border:0;background:#202945;color:#dce5ff;width:34px;height:34px;border-radius:9px} .skinGachaBalance{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:rgba(109,75,178,.13);color:#9daccc}.skinGachaBalance strong{font-size:18px;color:#ffe08a} .skinGachaRewards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:16px} .skinGachaReward{position:relative;display:grid;gap:7px;justify-items:center;border:1px solid #344466;border-radius:13px;background:#111a2d;padding:12px 10px;text-align:center;overflow:hidden}.skinGachaReward.owned{border-color:#57c8a1;background:#102720}.skinGachaReward.equipped{box-shadow:0 0 0 2px #8c70ff inset}.skinGachaRewardPreview{position:relative;display:block;width:78px;height:78px;border:1px solid rgba(157,177,222,.28);border-radius:14px;background-color:#0a1020;background-repeat:no-repeat;background-position:0 0;background-size:800% 600%;image-rendering:pixelated;box-shadow:0 8px 20px rgba(0,0,0,.28)}.skinGachaRewardIcon{position:absolute;right:4px;top:4px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(22,15,45,.88);color:#ffe48c;font-size:14px;box-shadow:0 0 12px rgba(144,104,255,.45)}.skinGachaReward strong{font-size:12px;color:#eef2ff}.skinGachaReward small{color:#91a1be}.skinGachaReward button{width:100%;border:0;border-radius:8px;padding:7px;background:#2f446f;color:#eff6ff;font-weight:800}.skinGachaReward button:disabled{opacity:.45} .skinGachaResult{margin:0 16px;padding:12px;border-radius:10px;background:rgba(9,14,27,.72);text-align:center;color:#c8d4ee;min-height:20px}.skinGachaResult.win{color:#fff2a3;box-shadow:0 0 24px rgba(255,217,101,.15) inset} .skinGachaFooter{display:grid;gap:8px;padding:16px;text-align:center}.skinGachaFooter button{border:0;border-radius:11px;padding:13px;background:linear-gradient(135deg,#8c64e8,#5876e8);color:white;font-size:15px;font-weight:900;box-shadow:0 8px 25px rgba(91,79,218,.3)}.skinGachaFooter button:disabled{filter:grayscale(.7);opacity:.6}.skinGachaFooter small{color:#8c9ab4} @media(max-width:680px){.skinGachaRewards{grid-template-columns:1fr}.skinGachaHeader{grid-template-columns:46px minmax(0,1fr) auto}.skinGachaSigil{width:42px;height:42px}.skinGachaWindow{max-height:calc(100vh - 12px)}} .merchantWindow { width:min(720px,calc(100vw - 24px)); max-height:min(680px,calc(100vh - 24px)); display:flex; flex-direction:column; overflow:hidden; padding:0; border:1px solid #667cb1; border-radius:16px; background: radial-gradient(circle at 9% 0,rgba(81,180,190,.18),transparent 34%), linear-gradient(150deg,rgba(28,39,72,.995),rgba(10,16,34,.997)); box-shadow:0 28px 80px rgba(0,0,0,.72),inset 0 1px rgba(255,255,255,.08); } .merchantHeader { display:grid; grid-template-columns:78px minmax(0,1fr) auto; gap:13px; align-items:center; padding:13px 14px; border-bottom:1px solid rgba(105,132,190,.42); background:linear-gradient(90deg,rgba(45,78,103,.72),rgba(28,39,74,.35)); } .merchantPortrait { width:72px; height:82px; border:1px solid #587aa0; border-radius:12px; background-color:#101c2b; background-image:url('/npcs/market-merchant-idle.png'); background-repeat:no-repeat; background-size:400% 400%; background-position:0 0; box-shadow:inset 0 0 18px rgba(58,159,174,.2); image-rendering:pixelated; } .merchantHeader small { color:#70d3d7; font-size:7px; font-weight:950; letter-spacing:.2em; } .merchantHeader h2 { margin:3px 0 0; color:#fff0bc; font-size:17px; } .merchantHeader p { margin:4px 0 0; color:#9eabc7; font-size:9.5px; line-height:1.4; } #merchantClose { align-self:start; width:31px; height:31px; padding:0; color:#cbd6ea; cursor:pointer; border:1px solid #516186; border-radius:9px; background:#1d2949; } #merchantClose:hover,#merchantClose:focus-visible { color:#fff; border-color:#8da7e0; outline:none; } .merchantToolbar { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid rgba(82,105,158,.35); background:rgba(12,19,39,.7); } .merchantTabs { display:flex; gap:6px; } .merchantTabs button { padding:7px 12px; color:#93a4c8; cursor:pointer; border:1px solid #46567c; border-radius:8px; background:#18223d; font-size:10px; font-weight:850; } .merchantTabs button[aria-selected="true"] { color:#eaffff; border-color:#4eb5bd; background:#1a4a56; box-shadow:0 0 12px rgba(67,199,213,.18); } .merchantBalance { margin-left:auto; display:flex; align-items:center; gap:7px; } .merchantBalance small { color:#7788a8; font-size:7px; white-space:nowrap; } #merchantGold { padding:7px 10px; color:#ffd86b; border:1px solid #826b37; border-radius:9px; background:#2d2515; font-size:12px; white-space:nowrap; } .merchantSellTools { padding:8px 14px; border-bottom:1px solid rgba(82,105,158,.35); background:rgba(18,28,52,.94); } .merchantFilters,.merchantSellSummary { display:flex; align-items:center; gap:7px; } .merchantFilters label { display:flex; align-items:center; gap:5px; color:#8fa3c9; font-size:8px; } .merchantFilters select,.merchantFilters button { height:28px; padding:0 8px; color:#dce8ff; border:1px solid #465a82; border-radius:7px; background:#111d39; font-size:8.5px; } .merchantFilters button { cursor:pointer; } .merchantFilters button:hover { border-color:#69c8cf; } .merchantSellSummary { justify-content:space-between; margin-top:7px; color:#8fa3c9; font-size:8.5px; } #merchantSellSelected { padding:7px 11px; color:#eaffff; cursor:pointer; border:1px solid #46aeb8; border-radius:8px; background:linear-gradient(#318e99,#21606b); font-size:9px; font-weight:900; } #merchantSellSelected:disabled { color:#63708b; cursor:not-allowed; border-color:#394763; background:#222d45; } .merchantHighTierConfirm { margin-top:8px; padding:9px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:7px; align-items:center; border:1px solid #bc7447; border-radius:9px; background:rgba(91,42,28,.7); } .merchantHighTierConfirm[hidden] { display:none; } .merchantHighTierConfirm div { min-width:0; } .merchantHighTierConfirm strong,.merchantHighTierConfirm span { display:block; } .merchantHighTierConfirm strong { color:#ffd0a6; font-size:9px; } .merchantHighTierConfirm span { margin-top:3px; color:#e7bca4; font-size:7.5px; line-height:1.35; } .merchantHighTierConfirm button { padding:7px 8px; cursor:pointer; color:#f4e8df; border:1px solid #966143; border-radius:7px; background:#553728; font-size:8px; } #merchantHighTierApprove { color:#26150d; border-color:#e8a16d; background:#f0aa70; font-weight:950; } .merchantItem.highTier { border-color:rgba(240,170,112,.75); } .merchantItem.highTier .merchantItemCopy b::after { content:' 🔒'; color:#ffbd82; } .merchantItems { flex:1; min-height:190px; overflow-y:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-content:start; padding:12px 14px; scrollbar-color:#536791 #11182d; } .merchantItem { min-width:0; display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:9px; align-items:center; padding:9px; border:1px solid #34486f; border-radius:11px; background:linear-gradient(145deg,rgba(31,45,78,.9),rgba(16,24,46,.94)); } .merchantItemIcon { width:46px; height:46px; display:grid; place-items:center; overflow:hidden; border:1px solid #566a92; border-radius:9px; background:#111a2e; } .merchantItem[data-item-tier] { border-color:hsl(var(--item-tier-hue) 60% 48%); background:linear-gradient(145deg,hsl(var(--item-tier-hue) 48% 24% / .9),rgba(16,24,46,.96)); } .merchantItem[data-item-tier] .merchantItemIcon { border-color:hsl(var(--item-tier-hue) 82% 68%); background:hsl(var(--item-tier-hue) 58% 18%); box-shadow:inset 0 0 0 1px hsl(var(--item-tier-hue) 88% 78% / .2); } .merchantItem[data-item-tier="1"] { color:inherit; border-color:#34486f; background:transparent; } .merchantItem[data-item-tier="1"] .merchantItemIcon { border-color:#566a92; background:transparent; box-shadow:none; } .merchantItem[data-item-tier="1"] .merchantItemCopy b { color:#eef3ff; } .merchantItem[data-item-tier="1"] .merchantItemCopy code { color:#8fa0bf; } .merchantItem[data-item-tier="1"] .merchantItemCopy small { color:#8ee5b0; } .merchantItemIcon img { max-width:40px; max-height:40px; object-fit:contain; image-rendering:pixelated; } .merchantItemCopy { min-width:0; } .merchantItemCopy b,.merchantItemCopy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .merchantItemCopy b { color:#eef3ff; font-size:10.5px; } .merchantItemCopy code { color:#7188ba; font-size:7.5px; } .merchantItemCopy small { margin-top:4px; color:#87d7a9; font-size:8px; } .merchantItem button { min-width:68px; padding:8px 7px; color:#14200e; cursor:pointer; border:0; border-radius:8px; background:linear-gradient(#ffd86b,#dca731); font-size:9px; font-weight:950; } .merchantItem button.sell { color:#eafcff; background:linear-gradient(#45b6c3,#267781); } .merchantQuantity { display:grid; grid-template-columns:24px minmax(50px,auto) 24px; gap:3px; } .merchantQuantity button { min-width:0; padding:7px 4px; } .merchantQuantity button.pick { color:#eafcff; background:linear-gradient(#45b6c3,#267781); } .merchantQuantity button.pick.selected { color:#102421; background:linear-gradient(#77edbd,#45b487); } .merchantQuantity input { width:100%; min-width:0; padding:7px 3px; box-sizing:border-box; color:#eafcff; border:1px solid #3d8090; border-radius:8px; outline:0; background:#12243d; text-align:center; font:900 9px "Press Start 2P",system-ui,sans-serif; } .merchantQuantity input:focus { border-color:#69d7ff; box-shadow:0 0 0 2px rgba(105,215,255,.28); } .merchantQuantity input:disabled { color:#67728a; border-color:#29334b; background:#182238; opacity:.72; } .merchantBuyActions { min-width:126px; display:grid; gap:4px; } .merchantBuyActions .merchantQuantity { grid-template-columns:28px minmax(48px,1fr) 28px; } .merchantQuantityShortcuts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; } .merchantQuantityShortcuts button { min-width:0; padding:5px 3px; color:#d9e8ff; border:1px solid #49658f; background:#1a2b4c; font-size:8px; } .merchantQuantityShortcuts button:hover,.merchantQuantityShortcuts button:focus-visible { color:#fff4bd; border-color:#d8aa45; outline:2px solid #69d7ff; outline-offset:1px; } .merchantBuyActions .merchantBuyAction { width:100%; } .merchantItem button:disabled { color:#67728a; cursor:not-allowed; background:#29334b; opacity:.72; } .merchantEmpty { grid-column:1/-1; margin:35px 0; color:#8492ad; text-align:center; font-size:11px; } .merchantFooter { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 14px; border-top:1px solid rgba(82,105,158,.35); color:#95a6c7; background:rgba(9,15,30,.88); } #merchantStatus { font-size:9px; } #merchantStatus.error { color:#ff9d9d; } #merchantStatus.success { color:#79e7a7; } .merchantFooter small { color:#697a9b; font-size:7.5px; text-align:right; } /* ---------- Skills + beat gauge ---------- */ #skillRow { position:fixed; bottom:14px; left:50%; transform:translateX(-50%); z-index:19; display:flex; gap:8px; } .skillBtn { width:50px; height:50px; position:relative; cursor:pointer; background:rgba(20,26,48,.85); border:2px solid #3a4675; border-radius:12px; display:flex; align-items:center; justify-content:center; padding:0; user-select:none; overflow:hidden; } .skillAssetSprite { --skill-sprite-size:44px; display:block; width:var(--skill-sprite-size); height:var(--skill-sprite-size); background-image:url('/asssetskill01.png'); background-repeat:no-repeat; background-size:auto calc(var(--skill-sprite-size) * 1.17); background-position-y:center; filter:drop-shadow(0 1px 0 rgba(0,0,0,.85)); image-rendering:pixelated; } .skillAssetSprite--s1 { background-position-x:calc(var(--skill-sprite-size) * -.214); } .skillAssetSprite--s2 { background-position-x:calc(var(--skill-sprite-size) * -1.392); } .skillAssetSprite--s3 { background-position-x:calc(var(--skill-sprite-size) * -2.59); } .skillAssetSprite--s4 { background-position-x:calc(var(--skill-sprite-size) * -3.774); } .skillAssetSprite--s5 { background-position-x:calc(var(--skill-sprite-size) * -4.97); } .skillBtn .k { position:absolute; top:1px; left:5px; font-size:10px; font-weight:800; color:#8ea0d0; } .skillBtn .cdOv { position:absolute; left:0; bottom:0; width:100%; height:0%; background:rgba(5,8,20,.72); pointer-events:none; } .skillBtn.ready { border-color:#5ec6ff; } .skillBtn.locked { filter:grayscale(.8); opacity:.58; } .skillBtn:active { transform:scale(.94); } #autoPotionSlot { width:50px; height:50px; position:relative; flex:0 0 auto; border:2px solid #8e3d55; border-radius:12px; background:linear-gradient(145deg,rgba(62,17,35,.94),rgba(20,26,48,.94)); color:#fff; padding:2px; overflow:hidden; cursor:pointer; } #autoPotionSlot img { width:42px; height:42px; object-fit:contain; image-rendering:pixelated; } #autoPotionSlot .autoPotionEmpty { font-size:24px; color:#d48da3; } #autoPotionQuantity { position:absolute; right:3px; bottom:1px; min-width:15px; padding:0 3px; border-radius:8px; background:#0a0e1d; color:#fff; font-size:9px; line-height:14px; } #autoPotionThreshold { position:absolute; left:2px; top:1px; padding:0 3px; border-radius:6px; background:rgba(95,16,43,.9); color:#ffd4df; font-size:8px; line-height:13px; } #autoPotionCooldown { position:absolute; inset:auto 0 0; height:0; background:rgba(5,8,20,.76); pointer-events:none; } #autoPotionSlot.is-empty { border-style:dashed; filter:saturate(.7); } #autoPotionSlot.is-out { border-color:#f08c46; } /* On desktop the auto-potion slot moves to the right end of the action bar (it stays first/left on touch layouts, beside the mobile joystick HUD). */ body:not(.touchUI) #autoPotionSlot { order:1; margin-left:10px; } .autoPotionDialog { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:16px; background:rgba(3,6,15,.72); backdrop-filter:blur(5px); } .autoPotionDialog[hidden] { display:none; } .autoPotionDialog>section { width:min(440px,100%); max-height:min(720px,calc(100dvh - 32px)); overflow:auto; padding:16px; border:1px solid rgba(232,91,128,.62); border-radius:18px; background:linear-gradient(155deg,#151d35,#0d1326 72%); box-shadow:0 24px 80px rgba(0,0,0,.55); } .autoPotionDialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; } .autoPotionDialog h2 { margin:1px 0 0; font-size:18px; } .autoPotionDialog header small { color:#ed9ab2; font-size:8px; letter-spacing:.16em; } #autoPotionClose { width:44px; height:44px; border:1px solid #485476; border-radius:12px; background:#151e35; color:#d9e1f4; font-size:24px; cursor:pointer; } .autoPotionDialog>section>p { color:#a8b3cc; font-size:10px; line-height:1.55; } .autoPotionOptions { display:grid; gap:8px; margin:13px 0; } .autoPotionOption { min-height:62px; display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:10px; padding:8px 10px; border:1px solid #343f62; border-radius:13px; background:#111a30; color:#eaf0ff; text-align:left; cursor:pointer; } .autoPotionOption img { width:48px; height:48px; object-fit:contain; image-rendering:pixelated; } .autoPotionOption span { display:grid; gap:3px; } .autoPotionOption small { color:#93a1be; font-size:9px; } .autoPotionOption b:last-child { min-width:30px; color:#ffb8c9; text-align:right; } .autoPotionOption.is-selected { border-color:#f0658d; box-shadow:0 0 0 2px rgba(240,101,141,.2); } .autoPotionDialog fieldset { border:0; margin:12px 0; padding:0; } .autoPotionDialog legend { margin-bottom:7px; color:#c8d1e7; font-size:10px; } #autoPotionThresholds { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; } #autoPotionThresholds button,#autoPotionUseNow { min-height:44px; border:1px solid #3a486d; border-radius:11px; background:#17213b; color:#cdd7ee; font-weight:800; cursor:pointer; } #autoPotionThresholds button.is-selected { border-color:#f0658d; color:#fff; background:#51203a; } .autoPotionToggle { min-height:44px; display:flex; align-items:center; gap:9px; color:#dbe4f6; font-size:11px; } .autoPotionToggle input { width:20px; height:20px; accent-color:#ef5d86; } #autoPotionUseNow { width:100%; margin-top:6px; background:linear-gradient(135deg,#963250,#65213c); border-color:#e16288; } #autoPotionUseNow:disabled,.autoPotionOption:disabled { opacity:.48; cursor:not-allowed; } #autoPotionStatus { min-height:16px; margin-bottom:0; color:#ffbdcc; } #beatBar { position:fixed; bottom:72px; left:50%; transform:translateX(-50%); z-index:19; width:210px; height:13px; background:rgba(10,14,28,.85); border:2px solid #3a4675; border-radius:8px; overflow:hidden; opacity:0; transition:opacity .2s; pointer-events:none; } /* shown only while using skills */ #beatBar.show { opacity:1; } #beatBar .zg { position:absolute; left:33%; width:34%; top:0; bottom:0; background:rgba(105,219,124,.3); } #beatBar .zp { position:absolute; left:44%; width:12%; top:0; bottom:0; background:rgba(255,212,59,.55); } #beatMark { position:absolute; top:0; bottom:0; width:3px; margin-left:-1px; background:#fff; box-shadow:0 0 6px #fff; } body.touchUI #skillRow { bottom:154px; gap:5px; } body.touchUI #autoPotionSlot { width:44px; height:44px; border-radius:9px; } body.touchUI #autoPotionSlot img { width:38px; height:38px; } body.touchUI .skillBtn, body.touchUI #autoBtn, body.touchUI #rangeBtn { width:42px; height:42px; } body.touchUI #bossLockBtn { width:80px; height:34px; top:202px; right:calc(12px + var(--safe-r)); } body.touchUI #autoBtn { margin-left:10px; } body.touchUI .skillAssetSprite { --skill-sprite-size:38px; } body.touchUI .hudMenuSprite { --menu-sprite-size:36px; } body.touchUI .hudMenuMarketIcon { width:36px; height:36px; } body.touchUI .autoAssetSprite { --auto-sprite-size:36px; } body.touchUI #rangeMenu { bottom:202px; left:calc(50% + 41px); } body.touchUI #beatBar { bottom:204px; width:150px; } * { scrollbar-width:thin; scrollbar-color:rgba(116,124,143,.72) rgba(4,6,12,.34) !important; } *::-webkit-scrollbar { width:8px !important; height:8px !important; } *::-webkit-scrollbar-track { background:rgba(4,6,12,.28) !important; border-radius:999px !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04) !important; } *::-webkit-scrollbar-thumb { background:linear-gradient(180deg,rgba(122,130,150,.82),rgba(52,57,70,.82)) !important; border:1px solid rgba(0,0,0,.58) !important; border-radius:999px !important; } *::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,rgba(150,158,178,.9),rgba(70,76,90,.9)) !important; } @media (max-width:820px){ #chat{ width:60vw } .clog{ max-height:125px } #hint{ display:none } } /* ---------- touch devices: arrange HUD around the joystick ---------- */ /* keep the online/status bar (top-right) from overlapping the HP bar (top-left) on narrow screens: compact the status bar and drop the HUD below it */ body.touchUI #lootTicker { top:env(safe-area-inset-top,0px); width:calc(100vw - 12px); height:36px; } body.touchUI #rewardBoostTicker { width:94vw; height:46px; } body.touchUI #rewardBoostTickerMessage { font-size:13px; } body.touchUI #combatRewardFeed { width:150px; } body.touchUI .combatRewardRow { max-width:150px; min-height:27px; padding:4px 7px 4px 5px; } body.touchUI .combatRewardRow b { font-size:10px; } body.touchUI #targetLock { top:calc(42px + env(safe-area-inset-top,0px)); width:min(310px,calc(100vw - 20px)); } body.touchUI.targetLocked #followTag, body.touchUI.targetLocked #pvpBanner { top:calc(102px + env(safe-area-inset-top,0px)); } body.touchUI.playerTargetLocked #followTag, body.touchUI.playerTargetLocked #pvpBanner { top:calc(162px + env(safe-area-inset-top,0px)); } body.touchUI .lootTickerMessage { gap:6px; padding:0 9px; font-size:10.5px; } body.touchUI .lootTickerIcon { width:26px; height:26px; border-radius:7px; } body.touchUI .lootTickerIcon img { width:22px; height:22px; } body.touchUI #status { top:calc(44px + env(safe-area-inset-top,0px)); right:54px; gap:5px; padding:5px 7px; font-size:11px; } body.touchUI #statTxt { display:none; } body.touchUI #serverRates { padding-left:5px; font-size:8px; } body.touchUI #goldHud { max-width:42vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.touchUI #settingsBtn { top:calc(44px + env(safe-area-inset-top,0px)); right:8px; } body.touchUI #settingsMenu { top:calc(86px + env(safe-area-inset-top,0px)); right:8px; } body.touchUI #partyPanel { width:160px; max-height:min(172px,calc(100vh - 230px)); } body.touchUI #partyBody { max-height:142px; } body.touchUI #partyPanel.collapsed { width:132px; } body.touchUI .partyMemberActions button,body.touchUI .partyMemberMenuButton { min-height:24px; } body.touchUI #playerHudCard { padding-left:10px; padding-right:10px; } body.touchUI #playerHudCard .bar { width:170px; } body.touchUI #quickStats { gap:6px; font-size:9.5px; } body.touchUI #quickStats b { font-size:10.5px; } body.touchUI .sBtn { padding:3px 6px; font-size:12px; } body.touchUI #hud { top:calc(88px + env(safe-area-inset-top,0px)); } body.touchUI #chat { bottom:192px; left:12px; width:min(290px,58vw); } body.touchUI .clog { max-height:91px; font-size:11.5px; background:rgba(20,26,48,.55); } body.touchUI #chatIn { padding:5px 9px; font-size:12px; } body.touchUI #chatSend { padding:0 10px; font-size:12px; } body.touchUI #hint { display:none; } body.touchUI #questHud { max-width:180px; font-size:10.5px; } body.touchUI #inventoryWorkspace { max-height:calc(100vh - 12px); } body.touchUI #statusPanel, body.touchUI #equipmentPanel { width:auto; transform:none; } body.statusOpen.touchUI #lootTicker, body.statusOpen.touchUI #hud, body.statusOpen.touchUI #targetLock, body.statusOpen.touchUI #status, body.statusOpen.touchUI #bagBtn, body.statusOpen.touchUI #wardrobeBtn, body.statusOpen.touchUI #refineBtn, body.statusOpen.touchUI #refineCraftBtn, body.statusOpen.touchUI #goldHud, body.statusOpen.touchUI #settingsBtn, body.statusOpen.touchUI #partyPanel, body.statusOpen.touchUI #settingsMenu, body.statusOpen.touchUI #townReturnBtn, body.statusOpen.touchUI #minimapCoords, body.statusOpen.touchUI #autoBtn, body.statusOpen.touchUI #rangeBtn, body.statusOpen.touchUI #rangeMenu, body.statusOpen.touchUI #chat, body.statusOpen.touchUI #touch, body.statusOpen.touchUI #skillRow, body.statusOpen.touchUI #beatBar { visibility:hidden; } body.refineOpen.touchUI #lootTicker, body.refineOpen.touchUI #hud, body.refineOpen.touchUI #targetLock, body.refineOpen.touchUI #status, body.refineOpen.touchUI #settingsBtn, body.refineOpen.touchUI #settingsMenu, body.refineOpen.touchUI #townReturnBtn, body.refineOpen.touchUI #minimapCoords, body.refineOpen.touchUI #bossMvpPanel, body.refineOpen.touchUI #chat, body.refineOpen.touchUI #touch, body.refineOpen.touchUI #skillRow, body.refineOpen.touchUI #partyPanel { visibility:hidden; } @media (max-width:699px){ body:not(.touchUI) #townReturnBtn { display:none; } } @media (max-height:519px){ body.touchUI #townReturnBtn { display:none; } } @media (max-width:336px){ .bar { width:160px; } #questHud, body.touchUI #questHud { max-width:160px; } } @media (max-width:640px){ #inventoryWorkspace, #inventoryWorkspace.withBag { top:6px; right:6px; bottom:6px; left:6px; width:auto; height:auto; max-height:none; transform:none; grid-template-columns:minmax(0,1fr); overflow-y:auto; align-content:start; } #inventoryWorkspace.open { animation:workspaceRevealMobile .16s ease-out both; } #bagPanel { order:1; grid-column:1; grid-row:auto; width:auto; height:min(42vh,330px); overflow:hidden; } #statusPanel { order:2; grid-column:1; grid-row:auto; width:auto; height:auto; max-height:none; overflow:visible; } @keyframes workspaceRevealMobile { from{ opacity:0; transform:translateY(-5px) scale(.99) } to{ opacity:1; transform:none } } #merchantModal { padding:6px; } .merchantWindow { width:100%; max-height:calc(100vh - 12px); border-radius:13px; } .merchantHeader { grid-template-columns:58px minmax(0,1fr) auto; gap:9px; padding:9px; } .merchantPortrait { width:54px; height:64px; } .merchantHeader h2 { font-size:14px; } .merchantHeader p { font-size:8px; } .merchantToolbar { padding:8px 9px; } .merchantBalance small { display:none; } .merchantSellTools { padding:7px 9px; } .merchantFilters { flex-wrap:wrap; } .merchantFilters label { flex:1; } .merchantFilters select { flex:1; min-width:0; } .merchantFilters button { flex:1 1 auto; } .merchantHighTierConfirm { grid-template-columns:1fr 1fr; } .merchantHighTierConfirm div { grid-column:1/-1; } .merchantTabs button { padding:7px 9px; } .merchantItems { grid-template-columns:1fr; padding:8px 9px; } .merchantBuyActions { min-width:136px; } .merchantBuyActions button,.merchantBuyActions input { min-height:44px; } .merchantFooter { align-items:flex-start; flex-direction:column; gap:4px; padding:8px 9px; } .merchantFooter small { text-align:left; } #refineModal { padding:0; } .refineWindow { width:100vw; height:100dvh; border-width:0; outline:0; border-radius:0; clip-path:none; grid-template-rows:auto minmax(0,1fr) auto; } .refineHeader { min-height:52px; padding:4px calc(9px + env(safe-area-inset-right)) 4px calc(9px + env(safe-area-inset-left)); } .refineHeaderMark { width:34px; height:34px; } #refineClose { width:44px; height:44px; } .refineHeader h2 { font-size:14px; } .refineHeader p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; } .refineBody { overflow-y:auto; display:flex; flex-direction:column; min-height:0; padding-bottom:env(safe-area-inset-bottom); scrollbar-color:#536a97 #0b1120; } .refineStacks,.refinePreview,.refineAction { flex:none; padding:10px calc(10px + env(safe-area-inset-right)) 10px calc(10px + env(safe-area-inset-left)); } .refineStacks { height:210px; border-right:0; border-bottom:1px solid #35476f; } .refineFilters select,.refineSourceLabel select { min-height:44px; } .refineStackList { grid-template-columns:repeat(2,minmax(0,1fr)); } .refinePreview { overflow:visible; } .refineAction { border-left:0; border-top:1px solid #35476f; } .refineItemHero { grid-template-columns:68px minmax(0,1fr); padding:9px; } .refineItemIcon { width:64px; height:64px; } .refineItemIcon img { max-width:54px; max-height:54px; } .refineItemHero h3 { font-size:15px; } .refineBonusRow { min-height:36px; } .refineRiskCard { grid-template-columns:minmax(0,1fr) auto; justify-items:start; align-items:center; text-align:left; } .refineRiskCard small,.refineRiskCard span { grid-column:1; } .refineRiskCard strong { grid-column:2; grid-row:1/3; font-size:25px; } #refineAttempt,#refineRetry { min-height:48px; } .refineStoneSlots { gap:5px; }.refineMaterialInventory { grid-template-columns:1fr; } #refineCraftModal { padding:0; } .refineCraftWindow { box-sizing:border-box; width:100%; max-width:100%; max-height:100dvh; height:100dvh; border-width:0; } .refineCraftRecipes { padding:10px; } .refineCraftFooter { grid-template-columns:1fr; padding-bottom:calc(12px + env(safe-area-inset-bottom)); } .refineCraftBatchOption { min-height:44px; } #refineCraftAttempt,#refineCraftRetry { width:100%; min-height:48px; } .refineAttemptAnimation { padding:10px; } .refineAnimationStage { min-height:300px; padding:14px; } .refineAnimationStage > strong { margin-top:210px; font-size:16px; } .refineCraftResultOverlay { padding:10px calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left)); } .refineCraftResultCard { padding:17px 13px; } .refineCraftResultItem img { width:54px; height:54px; } .refineCraftResultItem b { font-size:8px; } #refineCraftResultScore { font-size:16px; } .refineAuthority { margin-top:0; } .refineResult { padding-bottom:calc(8px + env(safe-area-inset-bottom)); } } @media (max-width:390px){ .refineStackList { grid-template-columns:1fr; } .refineStacks { height:190px; } .refineHeader small,.refineHeader p { display:none; } } @media (max-height:440px) and (orientation:landscape){ .refineWindow { width:100vw; height:100dvh; } .refineBody { display:grid; grid-template-columns:210px minmax(260px,1fr) 230px; overflow:hidden; } .refineStacks { height:auto; border-right:1px solid #35476f; border-bottom:0; } .refineStackList { grid-template-columns:1fr; } .refinePreview,.refineAction { overflow-y:auto; } .refineAction { border-top:0; border-left:1px solid #35476f; } .refineResult { display:none; } } @media (max-height:520px){ /* landscape phones: extra tight */ body.touchUI .clog { max-height:57px; } body.touchUI #chat { bottom:180px; } body.touchUI #questHud { display:none !important; } #inventoryWorkspace { max-height:calc(100vh - 12px); } } @media (prefers-reduced-motion:reduce){ .lootTickerMessage.is-running { animation-name:lootTickerFade; animation-timing-function:ease; } .refineResult[data-outcome="pending"] .refineResultIcon { animation:none; } .refineAttemptAnimation *,.refineCraftResultCard { animation:none!important; transition:none!important; } @keyframes lootTickerFade { 0%,100%{ opacity:0 } 12%,88%{ opacity:1 } } } /* ==================================================================== */ /* Mobile UX refresh */ /* Compact HUD, safe-area aware controls, and a vertical skill/AUTO */ /* column on the right by the thumb. Touch devices only. */ /* ==================================================================== */ :root { --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px); --safe-b:env(safe-area-inset-bottom,0px); } /* soft scrim so bright map tiles never wash out the movement controls */ body.touchUI #touch::before { content:""; position:absolute; left:0; right:0; bottom:0; z-index:0; height:calc(150px + var(--safe-b)); pointer-events:none; background:linear-gradient(to top,rgba(6,9,20,.55),transparent); } body.touchUI #pad, body.touchUI #atkBtn { z-index:1; } /* compact HUD */ body.touchUI #hud .panel { padding:6px 9px; } body.touchUI #nameLine { font-size:13px; gap:6px; } body.touchUI #lvlBadge { font-size:11px; } body.touchUI .bar { width:146px; height:11px; margin-top:4px; } body.touchUI .bar > b { font-size:9px; line-height:11px; } body.touchUI #goldHud { font-size:11px; margin-top:4px; } body.touchUI #appVersion, body.touchUI #quickStats, body.touchUI .hotkeyHintBadge { display:none; } body.touchUI #hud { top:calc(48px + env(safe-area-inset-top,0px)); left:calc(8px + var(--safe-l)); gap:4px; } body.touchUI #playerHudCard { width:160px; padding:5px 7px; } body.touchUI #playerHudCard .bar { width:142px; } body.touchUI #hudMenuRow { gap:5px; } body.touchUI #questHud { max-width:156px; max-height:32px; overflow:hidden; padding:4px 7px; font-size:9px; line-height:1.3; } /* compact top-right buttons, clear of a right-side notch */ body.touchUI #status { top:calc(7px + env(safe-area-inset-top,0px)); left:calc(8px + var(--safe-l)); right:auto; max-width:calc(100vw - 64px - var(--safe-l) - var(--safe-r)); padding:4px 6px; gap:4px; } body.touchUI #status #memberDashboardLink, body.touchUI #status #discordBtn { display:none !important; } body.touchUI #settingsMenu #linkGameId { min-height:44px; } body.touchUI #settingsBtn { top:calc(7px + env(safe-area-inset-top,0px)); right:calc(8px + var(--safe-r)); } body.touchUI #settingsMenu { top:calc(49px + env(safe-area-inset-top,0px)); right:calc(8px + var(--safe-r)); } body.touchUI #targetLock { top:calc(48px + env(safe-area-inset-top,0px)); left:auto; right:calc(8px + var(--safe-r)); width:min(196px,calc(100vw - 178px - var(--safe-l) - var(--safe-r))); min-height:48px; transform:none; padding:5px 7px 5px 9px; gap:3px; } body.touchUI #bossDamageToggle { width:32px; height:24px; padding-inline:7px; } body.touchUI #bossDamagePanel { width:min(320px,calc(100vw - 16px)); } body.touchUI .targetLockActions { grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; } body.touchUI .targetLockActions button { min-width:0; min-height:30px; padding:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:8px; } body.touchUI #targetLockClose { width:24px; height:24px; } body.touchUI #townReturnBtn { top:108px; right:calc(92px + var(--safe-r)); width:36px; height:36px; } body.touchUI #minimapCoords { top:184px; right:calc(12px + var(--safe-r)); width:72px; padding:1px 2px; font-size:8px; } body.touchUI #bossMvpPanel { top:242px; right:calc(8px + var(--safe-r)); width:80px; } body.touchUI #bossMvpToggle { align-items:stretch; flex-direction:column; gap:1px; text-align:left; } body.touchUI #bossMvpToggle small { text-align:left; } body.touchUI .bossMvpRow { align-items:flex-start; flex-wrap:wrap; } body.touchUI .bossMvpRow small { width:100%; padding-left:22px; } body.touchUI #bagBtn, body.touchUI #wardrobeBtn, body.touchUI #refineBtn, body.touchUI #refineCraftBtn, body.touchUI #equipBtn, body.touchUI #statusBtn { width:40px; height:40px; } body.touchUI #bagBtn { right:auto; } body.touchUI #equipBtn { right:calc(54px + var(--safe-r)); } body.touchUI #statusBtn { right:calc(54px + var(--safe-r)); top:98px; font-size:9px; } /* directional joystick — compact, safe-area anchored, brightens while dragging */ body.touchUI #pad { left:calc(16px + var(--safe-l)); bottom:calc(20px + var(--safe-b)); width:108px; height:108px; transition:border-color .14s, box-shadow .14s; } body.touchUI #joystickKnob { width:48px; height:48px; transition:background .14s, box-shadow .14s; } body.touchUI #pad.active { border-color:rgba(150,178,255,.95); box-shadow:inset 0 0 18px rgba(7,10,23,.6),0 5px 16px rgba(0,0,0,.5),0 0 16px rgba(94,150,255,.4); } body.touchUI #pad.active #joystickKnob { background:radial-gradient(circle at 38% 32%,#bcc9ff,#4a63b8 74%); box-shadow:0 4px 12px rgba(0,0,0,.55),0 0 14px rgba(120,160,255,.55),inset 0 2px 4px rgba(255,255,255,.3); } /* attack button — compact corner anchor, halo ring, press feedback */ body.touchUI #atkBtn { right:calc(12px + var(--safe-r)); bottom:calc(18px + var(--safe-b)); width:78px; height:78px; font-size:25px; transition:transform .1s, box-shadow .14s; box-shadow:0 4px 12px rgba(0,0,0,.5),0 0 0 5px rgba(231,76,60,.14); } body.touchUI #atkBtn.active { transform:scale(.92); box-shadow:0 2px 7px rgba(0,0,0,.5),0 0 0 3px rgba(231,76,60,.32),0 0 18px rgba(231,76,60,.5); } /* skill bar → compact vertical column on the right, above the attack button. column-reverse keeps skill 1 nearest the thumb, with AUTO/range at the top. */ body.touchUI #skillRow { left:auto; transform:none; flex-direction:column-reverse; right:calc(16px + var(--safe-r)); bottom:calc(106px + var(--safe-b)); gap:7px; z-index:19; } body.touchUI .skillBtn, body.touchUI #autoBtn, body.touchUI #rangeBtn { width:42px; height:42px; } body.touchUI .skillBtn { border-radius:6px; background:rgba(20,26,48,.92); box-shadow:0 3px 9px rgba(0,0,0,.42); } body.touchUI .skillBtn.ready { border-color:#5ec6ff; box-shadow:0 0 11px rgba(94,198,255,.42),0 3px 9px rgba(0,0,0,.42); } body.touchUI #autoBtn { margin-left:0; } body.touchUI #bossLockBtn { align-self:flex-end; font-size:9px; } /* beat gauge stays horizontal (marker uses left%), moved to the free centre */ body.touchUI #beatBar { left:50%; transform:translateX(-50%); bottom:calc(24px + var(--safe-b)); width:140px; height:12px; } /* range menu opens to the left of the range button at the top of the column */ body.touchUI #rangeMenu { left:auto; right:calc(80px + var(--safe-r)); bottom:calc(300px + var(--safe-b)); } /* chat sits bottom-left above the joystick; the whole centre band is now free */ body.touchUI #chat { left:calc(12px + var(--safe-l)); bottom:calc(138px + var(--safe-b)); width:min(300px,62vw); } body.touchUI .clog { max-height:86px; } body.touchUI #chatCollapseBtn { display:block; min-width:44px; min-height:36px; } body.touchUI #chat.mobileCollapsed { width:auto; max-width:calc(100vw - 116px - var(--safe-l) - var(--safe-r)); } body.touchUI #chat.mobileCollapsed #chatTabs { margin-bottom:0; } body.touchUI #chat.mobileCollapsed .clog, body.touchUI #chat.mobileCollapsed #chatForm { display:none !important; } body.touchUI #chat.mobileCollapsed .ctab { min-width:44px; min-height:36px; padding:3px 8px; } @media (max-height:520px){ /* landscape phones: 2-column skill grid clears the top-right buttons */ body.touchUI #touch::before { height:calc(120px + var(--safe-b)); } body.touchUI #pad { width:96px; height:96px; bottom:calc(14px + var(--safe-b)); } body.touchUI #joystickKnob { width:42px; height:42px; } body.touchUI #atkBtn { width:66px; height:66px; font-size:22px; right:calc(12px + var(--safe-r)); bottom:calc(14px + var(--safe-b)); } body.touchUI #skillRow { display:grid; grid-template-columns:repeat(2,37px); grid-auto-flow:row; gap:6px; right:calc(12px + var(--safe-r)); bottom:calc(90px + var(--safe-b)); } body.touchUI .skillBtn, body.touchUI #autoBtn, body.touchUI #rangeBtn { width:37px; height:37px; } body.touchUI .skillAssetSprite { --skill-sprite-size:31px; } body.touchUI .hudMenuSprite { --menu-sprite-size:31px; } body.touchUI .hudMenuMarketIcon { width:31px; height:31px; } body.touchUI .autoAssetSprite { --auto-sprite-size:31px; } body.touchUI #bossLockBtn { width:80px; height:37px; grid-column:1/-1; justify-self:end; } body.touchUI .skillBtn { font-size:18px; } body.touchUI #beatBar { bottom:calc(18px + var(--safe-b)); width:118px; } body.touchUI #rangeMenu { right:calc(96px + var(--safe-r)); bottom:calc(96px + var(--safe-b)); } body.touchUI #chat { bottom:calc(120px + var(--safe-b)); width:min(230px,36vw); } body.touchUI .clog { max-height:44px; } body.touchUI #hud { top:calc(44px + env(safe-area-inset-top,0px)); } body.touchUI #targetLock { top:calc(44px + env(safe-area-inset-top,0px)); } body.touchUI #questHud { display:none !important; } } /* Portrait phones keep the playfield clear until a thumb touches it. */ @media (max-width:699px) and (orientation:portrait) { body.touchUI #game { touch-action:none; } body.touchUI #touch::before { height:calc(112px + var(--safe-b)); background:linear-gradient(to top,rgba(6,9,20,.36),transparent); } body.touchUI #pad { position:fixed; left:50%; top:50%; right:auto; bottom:auto; width:112px; height:112px; pointer-events:none; visibility:hidden; opacity:0; transform:translate(-50%,-50%) scale(.92); border:1px solid rgba(144,176,255,.52); background:rgba(12,20,42,.2); box-shadow:inset 0 0 18px rgba(126,159,255,.12),0 6px 18px rgba(0,0,0,.32); transition:opacity .12s ease,transform .12s ease,border-color .12s ease; } body.touchUI #pad.active { visibility:visible; opacity:1; transform:translate(-50%,-50%) scale(1); border-color:rgba(164,190,255,.82); background:rgba(12,20,42,.34); box-shadow:inset 0 0 18px rgba(126,159,255,.2),0 6px 18px rgba(0,0,0,.38),0 0 14px rgba(105,156,255,.2); } body.touchUI #joystickKnob { width:44px; height:44px; opacity:.82; background:rgba(111,142,213,.54); } body.touchUI #pad.active #joystickKnob { background:rgba(158,181,255,.72); box-shadow:0 3px 11px rgba(0,0,0,.42); } body.touchUI #hud { top:calc(44px + env(safe-area-inset-top,0px)); gap:3px; } body.touchUI #hud .panel { padding:4px 6px; } body.touchUI #playerHudCard { width:150px; padding:4px 6px; } body.touchUI #playerHudCard .bar { width:132px; } body.touchUI #goldHud { padding:3px 7px; font-size:10px; } body.touchUI #hudMenuRow { gap:4px; } body.touchUI #bagBtn, body.touchUI #wardrobeBtn, body.touchUI #refineBtn, body.touchUI #refineCraftBtn, body.touchUI #marketBtn, body.touchUI #equipBtn, body.touchUI #statusBtn { width:36px; height:36px; } body.touchUI #settingsBtn { width:34px; height:34px; font-size:17px; } body.touchUI #townReturnBtn { width:32px; height:32px; right:calc(78px + var(--safe-r)); } body.touchUI #targetLock { width:min(184px,calc(100vw - 164px - var(--safe-l) - var(--safe-r))); } body.touchUI #bossMvpPanel { width:76px; } body.touchUI #chat { left:calc(10px + var(--safe-l)); bottom:calc(12px + var(--safe-b)); width:min(276px,68vw); z-index:28; } body.touchUI .clog { max-height:min(74px,15vh); font-size:10px; } body.touchUI #chatIn { min-height:34px; font-size:11px; } body.touchUI #chatSend { min-height:34px; font-size:11px; } body.touchUI #chatCollapseBtn { min-width:36px; min-height:32px; font-size:22px; } body.touchUI #chat.mobileCollapsed { max-width:calc(100vw - 20px - var(--safe-l) - var(--safe-r)); } body.touchUI #chat.mobileCollapsed .ctab { min-width:40px; min-height:32px; padding:3px 6px; } body.touchUI #atkBtn { width:72px; height:72px; right:calc(14px + var(--safe-r)); bottom:calc(14px + var(--safe-b)); font-size:25px; } body.touchUI #skillRow { right:calc(14px + var(--safe-r)); bottom:calc(94px + var(--safe-b)); gap:5px; } body.touchUI .skillBtn, body.touchUI #autoBtn, body.touchUI #rangeBtn { width:38px; height:38px; } } /* Weapon skill trees — server-authored ranks and effects inside a compact pixel-fantasy frame. */ .weaponMasteryActions { display:flex!important; align-items:center!important; justify-content:flex-end; gap:6px!important; } #weaponSkillTreeOpen { min-height:30px; padding:4px 8px; color:#fff1bd; border:1px solid #997532; border-radius:5px; background:linear-gradient(#4a391b,#241b0d); cursor:pointer; font-size:8px; font-weight:900; } #weaponSkillTreeOpen:hover,#weaponSkillTreeOpen:focus-visible { color:#fff; border-color:#ffe29a; outline:2px solid #69d7ff; outline-offset:2px; } .weaponSkillTreeModal { position:fixed; inset:0; z-index:110; display:grid; place-items:center; padding:18px; background:rgba(3,6,15,.86); backdrop-filter:blur(4px); } .weaponSkillTreeModal[hidden] { display:none; } .weaponSkillTreeShell { width:min(1120px,calc(100vw - 36px)); height:min(740px,calc(100dvh - 36px)); position:relative; display:grid; grid-template-rows:auto auto auto minmax(0,1fr) auto; overflow:hidden; color:#eef3ff; border:2px solid #d8aa45; border-radius:4px; background:#080d1b; box-shadow:0 0 0 1px #050813,0 0 0 4px #35476f,0 24px 80px rgba(0,0,0,.72); } .weaponSkillTreeHeader { min-height:54px; display:grid; grid-template-columns:1fr auto 44px; align-items:center; gap:14px; padding:7px 10px 7px 16px; border-bottom:1px solid #5d4927; background:linear-gradient(180deg,#1d2b49,#10192c); } .weaponSkillTreeHeader small { color:#8da0c7; font-size:7px; font-weight:900; letter-spacing:.18em; } .weaponSkillTreeHeader h2 { margin:2px 0 0; color:#ffe29a; font:900 16px "Press Start 2P",system-ui,sans-serif; text-shadow:2px 2px #503813; } .weaponSkillTreePoints { min-width:92px; display:flex; align-items:center; justify-content:center; gap:9px; padding:6px 10px; border:1px solid #5b709f; border-radius:4px; background:#111a2d; } .weaponSkillTreePoints span { color:#93a4c8; font-size:8px; font-weight:800; } .weaponSkillTreePoints b { color:#ffe29a; font-size:18px; } #weaponSkillTreeClose { width:44px; height:44px; color:#dce8ff; border:1px solid #53658e; border-radius:4px; background:#182541; cursor:pointer; font-size:24px; } #weaponSkillTreeClose:hover,#weaponSkillTreeClose:focus-visible { color:#fff; border-color:#ffe29a; outline:2px solid #69d7ff; outline-offset:1px; } #weaponSkillTreeHelp { margin:0; padding:7px 14px; color:#a7b6d5; border-bottom:1px solid #263451; background:#0d1527; font-size:9px; line-height:1.4; text-align:center; } .weaponSkillTreeTabs { min-height:44px; display:grid; grid-template-columns:repeat(4,minmax(92px,1fr)); gap:4px; padding:5px 8px; overflow-x:auto; border-bottom:1px solid #35476f; background:#111a2d; scrollbar-width:thin; } .weaponSkillTreeTabs button { position:relative; min-height:34px; color:#9babcc; border:1px solid #35476f; background:#0c1425; cursor:pointer; font-weight:900; } .weaponSkillTreeTabs button::before { content:''; position:absolute; left:0; top:0; width:3px; height:100%; background:transparent; } .weaponSkillTreeTabs button[aria-selected="true"] { color:#fff2bd; border-color:#b9903e; background:#1b2946; } .weaponSkillTreeTabs button[aria-selected="true"]::before { background:#d8aa45; } .weaponSkillTreeTabs button.is-active-weapon::after { content:'ใช้งาน'; position:absolute; right:5px; top:3px; color:#72d99b; font-size:6px; letter-spacing:.04em; } .weaponSkillTreeTabs button:focus-visible { outline:2px solid #69d7ff; outline-offset:1px; } .weaponSkillTreeBody { min-height:0; display:grid; grid-template-columns:172px minmax(410px,1fr) 240px; } .weaponSkillTreeLegend,.weaponSkillNodeDetail { min-width:0; padding:12px; background:#10192c; } .weaponSkillTreeLegend { border-right:1px solid #35476f; } .weaponSkillTreeLegend>div { display:flex; align-items:center; gap:9px; margin-bottom:10px; padding:7px; border:1px solid #263654; background:#0b1221; } .weaponSkillTreeLegend i { width:9px; height:30px; flex:0 0 auto; background:#aab6cf; } .weaponSkillTreeLegend .branchCore { background:#d8aa45; }.weaponSkillTreeLegend .branchAtk { background:#ff786e; } .weaponSkillTreeLegend .branchDef { background:#72d99b; }.weaponSkillTreeLegend .branchSpeed { background:#69d7ff; } .weaponSkillTreeLegend span { display:grid; gap:3px; }.weaponSkillTreeLegend b { color:#e7edff; font-size:9px; } .weaponSkillTreeLegend small,.weaponSkillTreeLegend p { color:#8193b7; font-size:7px; line-height:1.45; } .weaponSkillTreeLegend p { margin:14px 2px 0; } .weaponSkillTreeCanvas { min-height:0; overflow:auto; padding:18px 20px 26px; background-color:#0a1020; background-image:linear-gradient(rgba(65,86,128,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(65,86,128,.12) 1px,transparent 1px), radial-gradient(circle at 50% 8%,rgba(216,170,69,.12),transparent 35%); background-size:16px 16px,16px 16px,100% 100%; } .weaponSkillTreeCanvas:focus-visible { outline:2px solid #69d7ff; outline-offset:-3px; } .weaponTreeRoot { display:flex; flex-direction:column; align-items:center; gap:9px; margin-bottom:14px; } .weaponTreeGate { position:relative; min-width:190px; padding:6px 10px; color:#9db0d4; border:1px dashed #55688f; background:#101b31; font-size:7px; line-height:1.4; text-align:center; } .weaponTreeGate::before { content:''; position:absolute; left:50%; bottom:100%; width:2px; height:10px; background:#8d743d; } .weaponTreeBranches { position:relative; display:grid; grid-template-columns:repeat(3,minmax(118px,1fr)); gap:12px; align-items:start; } .weaponTreeBranches::before { content:''; position:absolute; left:16.66%; right:16.66%; top:-10px; height:12px; border:2px solid #415576; border-bottom:0; } .weaponTreeBranch { --branch:#aab6cf; position:relative; min-width:0; padding:24px 8px 10px; border:1px solid #273755; background:linear-gradient(180deg,color-mix(in srgb,var(--branch) 9%,#111a2d),#0b1221 38%); } .weaponTreeBranch[data-branch="ATK"] { --branch:#ff786e; }.weaponTreeBranch[data-branch="DEF"] { --branch:#72d99b; } .weaponTreeBranch[data-branch="SPEED"] { --branch:#69d7ff; } .weaponTreeBranch h3 { position:absolute; inset:6px 8px auto; margin:0; color:var(--branch); font-size:8px; text-align:center; } .weaponTreeBranchNodes { display:flex; flex-direction:column; align-items:center; gap:14px; } .weaponTreeNodeWrap { position:relative; width:100%; display:flex; justify-content:center; } .weaponTreeNodeWrap:not(:first-child)::before { content:''; position:absolute; left:50%; bottom:100%; width:2px; height:14px; background:color-mix(in srgb,var(--branch) 58%,#35476f); } .weaponTreeNode { position:relative; width:min(100%,156px); min-height:58px; display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; gap:7px; padding:7px; color:#dfe8fb; border:1px solid #4b5f86; border-radius:3px; background:#111a2d; cursor:pointer; text-align:left; } .weaponTreeNode img { width:34px; height:34px; object-fit:contain; image-rendering:pixelated; } .weaponTreeNode .weaponTreeGlyph { width:34px; height:34px; display:grid; place-items:center; color:var(--branch,#d8aa45); border:1px solid currentColor; background:#091020; font-weight:900; } .weaponTreeNode span { min-width:0; }.weaponTreeNode b { display:block; overflow:hidden; color:#f2f5ff; font-size:8px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; } .weaponTreeNode small { display:block; margin-top:3px; color:#91a4c8; font-size:7px; } .weaponTreeNode.is-ranked { border-color:var(--branch,#d8aa45); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 8px color-mix(in srgb,var(--branch,#d8aa45) 25%,transparent); } .weaponTreeNode.is-locked { filter:grayscale(.7); opacity:.55; cursor:not-allowed; } .weaponTreeNode.is-capstone { border-width:2px; clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px); } .weaponTreeNode.is-pending { pointer-events:none; animation:weaponNodePending .8s steps(2,end) infinite; } .weaponTreeNode.can-allocate::after { content:'＋'; position:absolute; right:3px; top:2px; color:#ffe29a; font-size:12px; } .weaponTreeNode:focus-visible { outline:2px solid #69d7ff; outline-offset:2px; } @keyframes weaponNodePending { 50% { opacity:.62; } } /* Topology silhouettes vary by weapon while node authority remains entirely server-side. */ .weaponSkillTreeCanvas.tree-sword .weaponTreeBranch[data-branch="DEF"] { transform:translateY(-6px); border-color:#568a74; } .weaponSkillTreeCanvas.tree-sword .weaponTreeBranch[data-branch="ATK"] .weaponTreeNodeWrap:nth-child(even) { transform:translateX(7px); } .weaponSkillTreeCanvas.tree-knife .weaponTreeBranch[data-branch="ATK"] { transform:translateY(-8px) rotate(-.35deg); } .weaponSkillTreeCanvas.tree-knife .weaponTreeBranch[data-branch="SPEED"] { transform:translateY(-8px) rotate(.35deg); } .weaponSkillTreeCanvas.tree-knife .weaponTreeNodeWrap:nth-child(even) { transform:translateX(10px); } .weaponSkillTreeCanvas.tree-knife .weaponTreeNodeWrap:nth-child(odd) { transform:translateX(-6px); } .weaponSkillTreeCanvas.tree-bow .weaponTreeBranches { grid-template-columns:1fr 1.18fr 1fr; } .weaponSkillTreeCanvas.tree-bow .weaponTreeBranch[data-branch="SPEED"] { order:2; transform:translateY(-8px); } .weaponSkillTreeCanvas.tree-bow .weaponTreeBranch[data-branch="DEF"] { order:3; } .weaponSkillTreeCanvas.tree-mace .weaponTreeBranches { gap:18px; } .weaponSkillTreeCanvas.tree-mace .weaponTreeBranch { clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%,0 8px); } .weaponSkillTreeCanvas.tree-mace .weaponTreeBranch[data-branch="ATK"] { transform:translateY(-10px); } .weaponSkillNodeDetail { overflow:auto; border-left:1px solid #35476f; } .weaponSkillNodeDetail>small { color:#8293b5; font-size:7px; letter-spacing:.04em; } .weaponSkillNodeDetail h3 { margin:7px 0; color:#ffe29a; font-size:13px; line-height:1.4; } .weaponSkillNodeDetail p { color:#b6c3de; font-size:9px; line-height:1.55; white-space:pre-line; } .weaponSkillNodeDetail dl { margin:12px 0 0; display:grid; grid-template-columns:auto 1fr; gap:7px; font-size:8px; } .weaponSkillNodeDetail dt { color:#7f92b8; }.weaponSkillNodeDetail dd { margin:0; color:#e3eaff; text-align:right; } .weaponSkillNodeDetail button { width:100%; min-height:44px; margin-top:14px; color:#171304; border:1px solid #ffe29a; background:linear-gradient(#ffe083,#cf9d2f); cursor:pointer; font-weight:950; } .weaponSkillNodeDetail button:disabled { color:#7b8498; border-color:#44536f; background:#202b40; cursor:not-allowed; } .weaponSkillNodeDetail button:focus-visible { outline:2px solid #69d7ff; outline-offset:2px; } .weaponSkillTreeFooter { min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 12px; border-top:1px solid #35476f; background:#0d1527; } #weaponSkillTreeStatus { margin:0; color:#ffb1aa; font-size:8px; }.weaponSkillTreeFooter>span { color:#7183a8; font-size:7px; text-align:right; } body.weaponSkillTreeOpen { overflow:hidden; } body.weaponSkillTreeOpen #touch,body.weaponSkillTreeOpen #skillRow,body.weaponSkillTreeOpen #chat, body.weaponSkillTreeOpen #partyPanel { visibility:hidden; } /* Server-authored active weapon skills: tap casts, vertical swipe configures AUTO. */ #weaponSkillHotbar:empty { display:none; } #weaponSkillHotbar { position:absolute; left:50%; bottom:64px; display:flex; gap:8px; transform:translateX(-50%); } .weaponHotbarSlot { --weapon-skill-size:50px; position:relative; width:var(--weapon-skill-size); height:var(--weapon-skill-size); flex:0 0 auto; } .weaponActiveSkill { width:100%; height:100%; position:relative; display:grid; place-items:center; padding:2px; color:#eef3ff; border:2px solid #53658e; border-radius:10px; background:#111a2d; cursor:pointer; touch-action:none; user-select:none; transform:translate3d(0,var(--weapon-drag-y,0px),0); transition:transform .16s ease-out,border-color .16s,filter .16s,box-shadow .16s; } .weaponActiveSkill img { width:42px; height:42px; object-fit:contain; pointer-events:none; image-rendering:pixelated; } .weaponActiveSkill .weaponSkillFallback { font-size:19px; font-weight:950; color:#ffe29a; } .weaponActiveSkill .weaponSkillCooldown { position:absolute; inset:auto 0 0; height:var(--skill-cooldown,0%); background:rgba(4,8,18,.8); pointer-events:none; } .weaponActiveSkill .weaponSkillMp { position:absolute; right:2px; bottom:1px; z-index:2; padding:1px 3px; color:#9fdcff; border-radius:4px; background:#071024; font-size:7px; } .weaponActiveSkill.is-auto { border-color:#72d99b; box-shadow:0 0 12px rgba(114,217,155,.48),inset 0 0 0 1px rgba(178,255,205,.16); } .weaponActiveSkill.is-disabled,.weaponActiveSkill.is-low-mp { filter:grayscale(.75) brightness(.62); } .weaponActiveSkill.is-pending { pointer-events:none; opacity:.72; } .weaponActiveSkill.is-dragging { transition:none; } .weaponActiveSkill.is-auto-enable-ready { border-color:#72d99b; box-shadow:0 0 15px rgba(114,217,155,.68); } .weaponActiveSkill.is-auto-disable-ready { border-color:#ff9d95; box-shadow:0 0 15px rgba(255,108,99,.58); } .weaponActiveSkill::after { position:absolute; z-index:6; left:50%; bottom:calc(100% + 5px); min-width:max-content; padding:3px 5px; color:#eef3ff; border:1px solid #53658e; border-radius:4px; background:rgba(8,13,27,.96); content:"↑ เปิด · ↓ ปิด"; font-size:7px; font-weight:900; opacity:0; pointer-events:none; transform:translate(-50%,3px); transition:opacity .12s,transform .12s; } .weaponActiveSkill.is-dragging::after { opacity:1; transform:translate(-50%,0); } .weaponActiveSkill.is-auto-enable-ready::after { color:#b7f7cc; border-color:#72d99b; content:"ปล่อยเพื่อเปิด"; } .weaponActiveSkill.is-auto-disable-ready::after { color:#ffd0cc; border-color:#ff6c63; content:"ปล่อยเพื่อปิด"; } .weaponActiveSkill:focus-visible { outline:2px solid #69d7ff; outline-offset:2px; } .weaponSkillAutoBadge { position:absolute; z-index:3; left:50%; top:-14px; transform:translateX(-50%); padding:2px 5px; color:#06150e; border:1px solid #b7f7cc; border-radius:3px; background:#72d99b; font-size:6px; font-weight:950; pointer-events:none; } #weaponSkillAutoGuide { position:fixed; z-index:18; left:50%; bottom:130px; transform:translateX(-50%); margin:0; padding:4px 8px; color:#dce8ff; border:1px solid #41557a; border-radius:4px; background:rgba(8,13,27,.9); font-size:7px; font-weight:800; pointer-events:none; white-space:nowrap; } #weaponSkillAutoGuideStatus { color:#ffe29a; font-size:inherit; } @media (max-width:820px) { .weaponSkillTreeModal { padding:0; place-items:stretch; } .weaponSkillTreeShell { width:100vw; height:100dvh; border-width:0 0 2px; border-radius:0; box-shadow:none; } .weaponSkillTreeHeader { min-height:52px; padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(8px,env(safe-area-inset-right)); } .weaponSkillTreeHeader h2 { font-size:12px; }.weaponSkillTreePoints { min-width:74px; padding:5px 7px; } .weaponSkillTreePoints span { display:none; }.weaponSkillTreeTabs { grid-template-columns:repeat(4,minmax(86px,1fr)); scroll-snap-type:x mandatory; } .weaponSkillTreeTabs button { min-height:44px; scroll-snap-align:start; } .weaponSkillTreeBody { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; } .weaponSkillTreeLegend { display:none; }.weaponSkillTreeCanvas { padding:16px 12px 22px; } .weaponSkillNodeDetail { max-height:34dvh; padding:10px 12px max(12px,env(safe-area-inset-bottom)); border:0; border-top:2px solid #d8aa45; } .weaponSkillNodeDetail h3 { margin:4px 0; }.weaponSkillNodeDetail p { margin:4px 0; } .weaponSkillNodeDetail dl { margin-top:7px; }.weaponSkillTreeFooter>span { display:none; } .weaponTreeBranches { min-width:430px; }.weaponTreeNode { min-height:62px; } .weaponHotbarSlot { --weapon-skill-size:42px; }.weaponActiveSkill img { width:34px; height:34px; } body.touchUI #weaponSkillHotbar { left:auto; right:48px; bottom:0; display:flex; flex-direction:column; gap:5px; transform:none; } body.touchUI #weaponSkillAutoGuide { left:auto; right:calc(60px + var(--safe-r)); bottom:calc(102px + var(--safe-b)); transform:none; writing-mode:vertical-rl; white-space:normal; } } @media (max-width:390px) { .weaponSkillTreeHeader { grid-template-columns:1fr auto 44px; gap:7px; }.weaponSkillTreeHeader small { display:none; } #weaponSkillTreeHelp { font-size:8px; }.weaponSkillTreeTabs { padding-inline:4px; } } @media (max-height:440px) and (orientation:landscape) { .weaponSkillTreeModal { padding:8px; } .weaponSkillTreeShell { width:calc(100vw - 16px); height:calc(100dvh - 16px); } .weaponSkillTreeHeader { min-height:44px; padding-block:3px; }.weaponSkillTreeHeader h2 { font-size:12px; } #weaponSkillTreeHelp { display:none; }.weaponSkillTreeTabs { min-height:40px; padding-block:3px; } .weaponSkillTreeTabs button { min-height:34px; } .weaponSkillTreeBody { grid-template-columns:154px minmax(360px,1fr) 210px; } .weaponSkillTreeLegend,.weaponSkillNodeDetail { padding:8px; }.weaponSkillTreeLegend>div { margin-bottom:5px; padding:4px; } .weaponSkillTreeCanvas { padding:10px 12px 42px; }.weaponSkillNodeDetail { padding-bottom:34px; }.weaponTreeRoot { margin-bottom:10px; } .weaponSkillTreeFooter { position:absolute; z-index:3; left:0; right:0; bottom:0; min-height:24px; padding-block:2px; } } @media (prefers-reduced-motion:reduce) { .weaponActiveSkill,.weaponTreeNode,#xpEdgeFill { transition:none; }.weaponTreeNode.is-pending { animation:none; } } @media (max-width:699px) and (orientation:portrait) { body.touchUI #beatBar { width:124px; bottom:calc(18px + var(--safe-b)); } body.touchUI #rangeMenu { right:calc(74px + var(--safe-r)); bottom:calc(272px + var(--safe-b)); } body.touchUI .mobilePanelCollapse { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid #526894; border-radius:6px; color:#dfe8ff; background:rgba(22,34,65,.92); font:900 24px/1 "Segoe UI",sans-serif; cursor:pointer; } body.touchUI .mobilePanelCollapse:focus-visible { outline:2px solid #8de8ff; outline-offset:2px; } body.touchUI #targetLockCollapse { position:absolute; top:50%; right:28px; transform:translateY(-50%); } body.touchUI #targetLock.mobileCollapsed { width:58px; min-height:36px; padding:3px; } body.touchUI #targetLock.mobileCollapsed .targetLockHeading, body.touchUI #targetLock.mobileCollapsed .targetLockHealth, body.touchUI #targetLock.mobileCollapsed .targetLockActions, body.touchUI #targetLock.mobileCollapsed #bossTargetMeta, body.touchUI #targetLock.mobileCollapsed #bossDamagePanel { display:none !important; } body.touchUI #targetLock.mobileCollapsed #targetLockCollapse { left:3px; right:auto; } body.touchUI #targetLock.mobileCollapsed #targetLockClose { top:50%; right:3px; width:22px; height:22px; transform:translateY(-50%); } body.touchUI #questHudDock { gap:3px; align-items:center; } body.touchUI #questHud { max-width:142px; max-height:30px; padding:3px 5px; font-size:8.5px; } body.touchUI #questHud.mobileCollapsed { display:none !important; } body.touchUI #settingsMenu { padding:6px; } body.touchUI #settingsMenu:not(.mobileCollapsed) #settingsCollapseBtn { position:absolute; top:6px; right:6px; } body.touchUI #settingsMenu:not(.mobileCollapsed) .settingsOption:first-of-type { padding-right:36px; } body.touchUI #settingsMenu.mobileCollapsed { width:36px; min-height:36px; padding:3px; border-width:1px; } body.touchUI #settingsMenu.mobileCollapsed > :not(#settingsCollapseBtn) { display:none; } body.touchUI #partyPanel.collapsed { width:94px; } body.touchUI #partyPanel.collapsed #partyLeave { display:none; } body.touchUI #partyToggle::after, body.touchUI #bossMvpToggle::after { content:'‹'; flex:none; color:#a9c7ff; font-size:18px; line-height:1; } body.touchUI #partyToggle[aria-expanded="false"]::after, body.touchUI #bossMvpToggle[aria-expanded="false"]::after { content:'›'; } body.touchUI #bossMvpToggle { flex-direction:row; align-items:center; } body.touchUI #bossMvpToggle small { text-align:right; } }