/* Abyssal Citadel: dark stone and engraved metal, in the spirit of Diablo II's menus. */ :root { --iron: #11100f; --iron2: #181615; --iron3: #2a2724; --line: #58524a; --text: #ded4c0; --dim: #968c7c; --brass: #c7ab6b; --gold: #ffd06e; --blood: #b23a2e; --moss: #5f9a5a; --red: #ff6b6b; --green: #6ee87f; --head: "Cinzel", "Trajan Pro", Georgia, serif; --body: "Lato", "Segoe UI", system-ui, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: #0e0d0c url(art/Backdrop.jpg) center / cover fixed no-repeat; color: var(--text); font: 15px/1.4 var(--body); overflow: hidden; } button { font: inherit; color: inherit; } img { image-rendering: auto; } .hidden { display: none !important; } b { color: #fff3dc; } /* ---------- textured pieces (9-slice) ---------- */ .box { border: 11px solid transparent; border-image: url(art/FrameArt_box.png) 14 fill / 11px stretch; } .frame { border: 12px solid transparent; border-image: url(art/FrameArt_frame.png) 14 / 12px stretch; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative; min-height: 34px; padding: 4px 18px; cursor: pointer; white-space: nowrap; border: 8px solid transparent; border-image: url(art/FrameArt_button.png) 10 fill / 8px stretch; background: none; color: var(--text); font: 600 15px var(--head); letter-spacing: .02em; text-shadow: 0 1px 2px #000; } .btn::before, .btn::after { /* the small blue gems set into the rim */ content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: #468cff; border: 1px solid #080c1c; transform: rotate(45deg); } .btn::before { left: -11px; } .btn::after { right: -11px; } .btn:hover:not(:disabled) { filter: brightness(1.18); } .btn:active:not(:disabled) { filter: brightness(.9); transform: translateY(1px); } .btn.primary { border-image-source: url(art/FrameArt_buttonGold.png); color: #ecce88; } .btn.danger { border-image-source: url(art/FrameArt_buttonRed.png); color: #f09688; } .btn:disabled { opacity: .45; cursor: default; } .btn.small { min-height: 28px; padding: 2px 12px; font-size: 13px; } .rule { height: 6px; margin: 4px 0 8px; background: url(art/FrameArt_bar.png) center / 100% 100%; filter: sepia(1) saturate(2.5) hue-rotate(5deg) brightness(1.15); -webkit-mask-image: linear-gradient(90deg, #000 0, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 0, #000 70%, transparent); } /* ---------- log in ---------- */ #login { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; } #login .panel { width: min(420px, 100%); padding: 18px 22px; background: url(art/StoneArt.png) 0 0 / 128px; } #login h1 { margin: 0 0 2px; font: 700 34px var(--head); color: var(--brass); text-align: center; text-shadow: 0 2px 6px #000; } #login p { color: var(--dim); text-align: center; margin: 0 0 14px; } .field { display: block; margin: 8px 0; } .field span { display: block; font-size: 13px; color: var(--dim); margin-bottom: 3px; } input[type=text], input[type=password], textarea { width: 100%; padding: 8px 10px; background: var(--iron2); color: var(--text); border: 1px solid var(--line); border-radius: 3px; font: 15px var(--body); } select.qty { padding: 6px 4px; background: var(--iron2); color: var(--text); border: 1px solid var(--line); border-radius: 3px; font: 700 14px var(--body); } input:focus, textarea:focus { outline: 1px solid var(--brass); } #login .row { display: flex; gap: 14px; justify-content: center; margin-top: 14px; flex-wrap: wrap; } #loginErr, #nameErr, #forgotErr, #resetErr { color: #ff8a7a; min-height: 20px; text-align: center; margin-top: 8px; } /* ---------- top bar ---------- */ #app { position: fixed; inset: 0; display: flex; flex-direction: column; } #topbar { display: flex; align-items: center; gap: 16px; margin: 8px 12px 0; padding: 4px 10px; min-height: 58px; background: rgba(16,15,14,.95); border: 1px solid var(--line); border-radius: 4px; overflow-x: auto; } #topbar .name { font: 700 22px var(--head); color: var(--brass); white-space: nowrap; } .goldbox { min-width: 150px; } .goldbox { display: flex; align-items: baseline; justify-content: center; gap: 8px; } .goldbox small { display: inline; font: 800 21px var(--body); letter-spacing: .02em; } .goldbox .v { font: 800 21px var(--body); color: #ffd05c; text-shadow: 0 1px 0 #3c2400; white-space: nowrap; } /* Attack / Magic Attack bars: a brass cap holding the icon + a glass tube of liquid */ .barbox { position: relative; display: flex; align-items: center; width: 240px; height: 46px; flex: none; } .barbox .cap { position: relative; z-index: 4; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ffe9a8, #c49a3c 40%, #6b4a12 75%, #2c1c04); box-shadow: 0 2px 5px #000c, inset 0 -2px 3px #0008; } .barbox .cap::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle, #1b1118, #060406); box-shadow: inset 0 2px 4px #000; } .barbox .cap img { position: relative; width: 30px; height: 30px; object-fit: contain; } .barbox .ring { position: absolute; left: 36px; top: 3px; bottom: 3px; width: 8px; z-index: 4; border-radius: 2px; background: linear-gradient(90deg, #5a3e0e, #f2d48a 50%, #5a3e0e); box-shadow: 0 0 2px #000; } .barbox .area { position: relative; flex: 1; min-width: 0; height: 40px; margin-left: -8px; border-radius: 0 20px 20px 0; overflow: hidden; background: linear-gradient(#ffffff14, #ffffff05 40%, #00000060), #0d0a12; box-shadow: inset 0 0 0 1.5px #ffffff30, inset 0 -3px 6px #000a, 0 2px 5px #000a; } .barbox .area::after { content: ""; position: absolute; left: 12px; right: 16px; top: 3px; height: 6px; border-radius: 6px; background: linear-gradient(#ffffff99, #ffffff08); z-index: 2; } .barbox .fill { position: absolute; inset: 0 auto 0 0; border-radius: 0 14px 14px 0; transition: width .4s ease; } .barbox.atk .fill { background: linear-gradient(#ff6a5a, #c8121c 45%, #5a0208); box-shadow: inset 0 0 8px #ff9a7a, 0 0 10px #ff2a1a; } .barbox.mag .fill { background: linear-gradient(#8aff8a, #14b04a 45%, #03401c); box-shadow: inset 0 0 8px #aaffaa, 0 0 10px #2aff6a; } /* bubbles: drift slowly upward inside the liquid; the ones past the liquid's edge are clipped away, and some pop out as the level drops (each has a minimum level, set in updateBars) */ .barbox .bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; clip-path: inset(0 calc(100% - var(--lv, 100%)) 0 0 round 0 14px 14px 0); transition: clip-path .4s ease; } .barbox .bubbles i { position: absolute; bottom: -6px; border-radius: 50%; opacity: 0; animation: bubbleUp var(--d, 8s) linear var(--dl, 0s) infinite; transition: filter .6s; } .barbox.atk .bubbles i { background: radial-gradient(circle at 35% 30%, #fff, #ffd0c8 45%, #ff9a8a00 75%); box-shadow: 0 0 2px #ffc0b0aa; } .barbox.mag .bubbles i { background: radial-gradient(circle at 35% 30%, #fff, #d8ffd0 45%, #9aff9a00 75%); box-shadow: 0 0 2px #c8ffc0aa; } .barbox .bubbles i.gone { display: none; } @keyframes bubbleUp { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .9; } 50% { transform: translate(var(--w, 3px), -22px); } 85% { opacity: .8; } 100% { transform: translate(0, -44px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .barbox .bubbles i { animation-duration: 30s; } } .barbox .txt { position: absolute; inset: 0 6px 0 10px; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.1; color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 4px #000, 0 0 8px #000c; } /* a soft dark glow behind the writing so bubbles and the glass shine never cover it */ .barbox .txt::before { content: ""; position: absolute; left: 50%; top: 50%; width: 82%; height: 78%; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, #000a, #0006 55%, #0000); } .barbox .lbl { font: 700 15px var(--head); letter-spacing: .05em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .barbox .sub { font: 800 11.5px var(--body); color: #f2e6cc; white-space: nowrap; } .barbox .pct { color: #fff; } .barbox .regen:not(:empty)::before { content: " · "; } /* ---------- main panel ---------- */ #panelWrap { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 10px 12px 6px; } #panel { position: relative; width: 100%; max-width: 860px; display: flex; flex-direction: column; background: #141312 url(art/StoneArt.png) 0 0 / 128px; border: 14px solid transparent; border-image: url(art/FrameArt_frame.png) 14 / 14px stretch; } #panel::before, #panel::after { content: ""; position: absolute; top: -18px; width: 14px; height: 14px; background: #96804f; border: 2px solid #28200f; transform: rotate(45deg); z-index: 3; } #panel::before { left: -18px; } #panel::after { right: -18px; } #header { display: flex; align-items: center; gap: 12px; padding: 6px 8px 8px; } #title { padding: 4px 18px; font: 600 24px var(--head); color: var(--brass); letter-spacing: .04em; text-transform: uppercase; } #body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 18px; scrollbar-color: var(--line) transparent; } #body > * + * { margin-top: 10px; } .card { padding: 6px 8px; } .card > * + * { margin-top: 6px; } .card h3, .h3 { margin: 0; font: 600 21px var(--head); color: var(--brass); } .dim { color: var(--dim); } .text { font-size: 15px; } .pagetext { background: rgba(17,16,15,.85); padding: 5px 10px; border-radius: 4px; } .center { text-align: center; } .row { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 2px; border: 8px solid transparent; border-image: url(art/FrameArt_box.png) 14 fill / 8px stretch; } .row .pic { width: 40px; height: 40px; flex: none; border-radius: 6px; object-fit: cover; } .row .main { flex: 1; min-width: 0; } .row .t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row .s { font-size: 13px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row .tag { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row .btns { display: flex; gap: 14px; flex: none; padding-right: 10px; } .row.tap { cursor: pointer; } .row.tap:hover { filter: brightness(1.12); } .btnrow { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding: 0 12px; } .btnrow.c { justify-content: center; } .avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: radial-gradient(#3a3226, #16120e); border: 2px solid #8a7550; font: 700 18px var(--head); color: var(--gold); } .avatar img { width: 86%; height: 86%; object-fit: contain; } .avatar.custom { position: relative; } .avatar.custom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .avslot { position: relative; display: inline-block; cursor: pointer; border-radius: 50%; } .avslot:hover .avatar { filter: brightness(1.15); box-shadow: 0 0 0 3px var(--brass), 0 0 30px #000; } .avslot .avedit { position: absolute; right: 2%; bottom: 2%; width: 30%; max-width: 40px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #1e1a14; border: 2px solid var(--brass); font-size: 16px; box-shadow: 0 2px 6px #000; } .avpick { background: none; border: 2px solid transparent; border-radius: 50%; padding: 2px; cursor: pointer; } .avpick.on { border-color: var(--brass); } .avpick:hover { filter: brightness(1.2); } /* ---------- page banner ---------- */ .hero { position: relative; height: 210px; border-radius: 3px; overflow: hidden; background: linear-gradient(var(--tint1), #08060e); } .hero::after { content: ""; position: absolute; inset: 0; border: 12px solid transparent; border-image: url(art/FrameArt_frame.png) 14 / 12px stretch; pointer-events: none; z-index: 6; } .hero .glow { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(transparent, #286effaa); animation: glowPulse 1.3s ease-in-out infinite alternate; } @keyframes glowPulse { to { background: linear-gradient(transparent, #46a0ffaa); } } .flame { position: absolute; bottom: -4px; background: url(art/FrameArt_flame1.png) bottom / 100% 100% no-repeat; transform-origin: 50% 100%; animation: flick var(--d) ease-in-out infinite alternate, sway var(--s) ease-in-out infinite alternate; } .flame.f2 { background-image: url(art/FrameArt_flame2.png); } .flame.f3 { background-image: url(art/FrameArt_flame3.png); } @keyframes flick { from { transform: scaleY(1) scaleX(1); opacity: .9; } to { transform: scaleY(.72) scaleX(1.08); opacity: .6; } } @keyframes sway { from { margin-left: -6px; } to { margin-left: 6px; } } .circle { position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; } .spin { animation: spin var(--t, 18s) linear infinite; } .spin.rev { animation-direction: reverse; } @keyframes spin { to { rotate: 360deg; } } .hero .center { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; z-index: 3; } .hero .center img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 4px 10px #000); } .hero .emoji { font-size: 120px; line-height: 1; } .hero .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; } .hero .art + .fade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(transparent 65%, #08060ee6); } .mote { position: absolute; border-radius: 50%; animation: drift var(--d) ease-in-out infinite alternate; z-index: 1; } @keyframes drift { to { translate: 0 -12px; opacity: .3; } } .herotitle { text-align: center; font: 700 42px var(--head); color: #f6f0e6; text-shadow: 0 2px 6px #000; margin-top: 4px !important; line-height: 1.1; } .herodesc { text-align: center; font-weight: 700; font-size: 17px; color: #dcd2be; padding: 0 20px; } .pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .pill { padding: 6px 16px; border-radius: 99px; font-weight: 700; font-size: 15px; border: 1px solid transparent; } .pill.gold { background: #e8b84c; color: #281a06; } .pill.green { background: #0e2e22; color: #5ae68c; border-color: #3ca064; } .pill.brown { background: #342414; color: #f0c46e; border-color: #785628; } .pill.purple { background: #28231c; color: #dcc48c; border-color: #6e665c; } .pill.red { background: #3c1014; color: #ff7878; border-color: #b43c3c; } .pill.blue { background: #0e1e38; color: #8cc8ff; border-color: #3c78c8; } .cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .cell { padding: 0 6px; height: 64px; display: flex; flex-direction: column; justify-content: center; border: 8px solid transparent; border-image: url(art/FrameArt_box.png) 14 fill / 8px stretch; } .cell small { font-weight: 700; font-size: 12px; color: var(--dim); } .cell .v { font: 800 22px var(--body); } /* tabs */ .tabs { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 14px; padding: 0 12px; } .tabs .btn { width: 100%; padding: 4px 6px; font-size: 14px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; } .tabs .btn.on { color: #fff; } .tabs .btn.on .gem { position: absolute; bottom: -12px; left: 50%; width: 9px; height: 9px; margin-left: -4px; background: #5aa0ff; border: 1px solid #14141e; transform: rotate(45deg); } /* heading with a toggle (How it works, damage lists) */ .toggleHead { display: flex; align-items: center; gap: 10px; } .toggleHead .h3 { flex: 1; } .howlist { margin: 0; padding-left: 20px; } .howlist li { margin: 4px 0; } /* bars inside pages */ .hpbar { position: relative; height: 28px; border-radius: 99px; background: #140608; border: 2px solid #000; overflow: hidden; } .hpbar .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ff786e, #de262c 45%, #780812); } .hpbar span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; color: #fff; text-shadow: 0 0 3px #000; font-size: 14px; } .hpbar.thin { height: 18px; border-width: 1px; border-radius: 4px; } .hpbar.thin span { font: 600 12px ui-monospace, monospace; } /* big animated strike buttons */ .strikes { display: flex; justify-content: center; gap: 14px; padding: 4px 0; flex-wrap: wrap; } .strike { position: relative; flex: 1 1 0; max-width: 300px; min-width: 150px; height: var(--h, 56px); display: flex; align-items: stretch; border: 2px solid var(--rim); border-radius: 8px; overflow: hidden; cursor: pointer; padding: 0; background: linear-gradient(var(--hi), var(--mid) 45%, var(--lo)); box-shadow: 0 0 10px var(--rim); animation: pulse .9s ease-in-out infinite alternate; } @keyframes pulse { to { box-shadow: 0 0 22px var(--rim), 0 0 4px var(--rim) inset; border-width: 3px; } } .strike.atk { --rim: #ff5c3c; --hi: #ff786e; --mid: #de262c; --lo: #780812; } .strike.mag { --rim: #50f078; --hi: #96ff8c; --mid: #2ec446; --lo: #0a6422; } .strike img { height: 100%; aspect-ratio: 1; border-right: 2px solid var(--rim); } .strike span { flex: 1; display: grid; place-items: center; font: 700 calc(var(--h, 56px) * .36) var(--head); color: #fff; text-shadow: 0 0 4px #000, 0 2px 2px #000; padding: 0 6px; white-space: nowrap; overflow: hidden; } .strike::before { content: ""; position: absolute; inset: 0 0 55% 0; background: linear-gradient(#ffffff55, transparent); pointer-events: none; } .strike::after { content: ""; position: absolute; top: 0; bottom: 0; width: 25%; left: -40%; background: linear-gradient(90deg, transparent, #ffffff66, transparent); animation: sweep 2.2s ease-in-out infinite; pointer-events: none; } @keyframes sweep { to { left: 120%; } } .strike:hover:not(:disabled) { filter: brightness(1.12); } .strike:disabled { animation: none; box-shadow: none; opacity: .45; cursor: default; } .strike:disabled::after { display: none; } /* ---------- home ---------- */ .stage { position: relative; height: max(560px, calc(100vh - 230px)); } .stage .ring { position: absolute; left: 50%; top: 44%; translate: -50% -50%; pointer-events: none; } .stage .pool { position: absolute; left: 50%; top: 44%; translate: -50% -50%; border-radius: 50%; background: #c8280a; opacity: .1; animation: breathe 2.6s ease-in-out infinite alternate; } @keyframes breathe { to { opacity: .22; } } .stage .me { position: absolute; left: 50%; top: 44%; translate: -50% -50%; text-align: center; display: grid; justify-items: center; gap: 4px; } .stage .me .avatar { width: 150px; height: 150px; font-size: 70px; border-width: 4px; box-shadow: 0 0 30px #000; } .stage .me .nm { font: 700 28px var(--head); color: #ffeec8; text-shadow: 0 0 6px #461e00, 0 2px 2px #000; text-transform: uppercase; white-space: nowrap; } .stage .me .tt { font-weight: 700; font-size: 14px; color: #d682ff; text-transform: uppercase; } .stage .me .pillbtn { padding: 4px 12px; border-radius: 99px; background: #1e1c1a; border: 1px solid #aa9c84; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); } .tile { position: absolute; translate: -50% -50%; width: 27%; height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; background: linear-gradient(#2c2824, #0e0d0c); border: 2px solid #aa9c84; border-radius: 12px; box-shadow: 0 0 0 5px #aa9c8424; color: #ffe4a0; } .tile:hover { filter: brightness(1.2); } .tile.big { width: 34%; height: 74px; } .tile img { height: 58%; max-width: 90%; object-fit: contain; } .tile .em { font-size: 28px; line-height: 1; } .tile .lb { font: 700 var(--lbs, 16px) var(--head); text-shadow: 0 0 3px #461e00, 0 1px 1px #000; white-space: nowrap; } .tile .blue { position: relative; height: 58%; aspect-ratio: 1; } .tile .blue img { position: absolute; inset: 0; width: 100%; height: 100%; } .homeWrap { position: relative; } .corners { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 8px; z-index: 4; pointer-events: none; } .corner { pointer-events: auto; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; cursor: pointer; } .corner.daily { background: linear-gradient(#3a2c12, #120e08); border: 2px solid #ffc43c; } .corner.boss { background: #3c0a0e; border: 2px solid #ff4646; animation: bossPulse .7s ease-in-out infinite alternate; } .corner.boss.dead { background: #1e1c1a; border-color: #aa9c84; animation: none; } @keyframes bossPulse { to { border-color: #ff464655; } } .corner .t { font: 700 16px var(--head); } .corner .s { font-weight: 700; font-size: 12px; text-align: center; } .corner img { width: 44px; height: 44px; border-radius: 8px; border: 1px solid #ff5a3c; object-fit: cover; } /* ---------- stronghold ---------- */ .platformRow { position: relative; overflow: hidden; border-radius: 6px; background: #0e0c14; } .platformRow .void { position: absolute; left: 50%; top: 50%; translate: -50.5% -45%; } .platformRow .plat { position: absolute; left: 50%; top: 50%; translate: -50% -50%; box-shadow: 0 0 0 3px #0006; } .grid { position: absolute; left: 50%; top: 50%; translate: -50% -50%; } .plot { position: absolute; border-radius: 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; overflow: hidden; border: 1px solid var(--line); background: #2a272499; } .plot.empty { background: #18161580; } .plot.built { background: var(--iron3); } .plot.nexus { background: #3a3424; border-color: var(--brass); } .plot.open { border: 2px solid var(--brass); } .plot:hover { filter: brightness(1.2); } .plot .bimg { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; } .plot .strip { position: relative; width: 100%; background: #000a; text-align: center; font: 700 12px var(--body); color: var(--brass); padding: 1px 0; } .plot.nexus .strip { font-family: var(--head); font-size: 14px; } .plot .portal { position: absolute; left: 4%; top: 6%; width: 92%; height: 56%; object-fit: contain; animation: portal 1.8s ease-in-out infinite alternate; } @keyframes portal { to { transform: scale(1.1); opacity: .75; } } .plot .empt { position: relative; font-size: 11px; color: var(--dim); padding-bottom: 3px; } /* modal */ .modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: #000a; } .modal .box { width: min(460px, 100%); max-height: 90vh; overflow: auto; background-color: #12110f; } .modal .box > * + * { margin-top: 10px; } /* ---------- gear ---------- */ .gearLayout { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: start; } @media (max-width: 640px) { .gearLayout { grid-template-columns: 1fr; } .rail { display: grid !important; grid-template-columns: repeat(3, 1fr); } } .rail { display: flex; flex-direction: column; gap: 8px; } .railBtn { display: flex; align-items: center; gap: 8px; text-align: left; min-height: 56px; padding: 2px 6px; cursor: pointer; border: 8px solid transparent; border-image: url(art/FrameArt_button.png) 10 fill / 8px stretch; background: none; color: var(--text); } .railBtn.on { border-image-source: url(art/FrameArt_buttonGold.png); } .railBtn .i { font-size: 22px; } .railBtn .n { font-weight: 700; font-size: 14px; } .railBtn .c { font-size: 12px; color: var(--dim); } .railBtn.on .n { color: #fff; } .railBtn.on .c { color: #ffd66e; } .content > * + * { margin-top: 10px; } .doll { position: relative; margin: 0 auto; background: #2e2d2b url(art/FrameArt_cobble.png) 0 0 / 192px; box-shadow: 0 0 0 3px #14120f; } .doll::after { content: ""; position: absolute; inset: -6px; border: 12px solid transparent; border-image: url(art/FrameArt_frame.png) 14 / 12px stretch; pointer-events: none; } .slot { position: absolute; cursor: pointer; border: 6px solid transparent; border-image: url(art/FrameArt_slot.png) 8 fill / 6px stretch; display: grid; place-items: center; padding: 0; background: none; } .slot:hover { filter: brightness(1.25); } .slot.sel { outline: 3px solid var(--brass); } .slot img.item { position: absolute; left: 7%; top: 5%; width: 86%; height: 82%; object-fit: contain; } .slot img.ghost { width: 70%; height: 70%; object-fit: contain; opacity: .4; filter: grayscale(1) brightness(.75); } .slot .rn { position: absolute; top: 0; right: 2px; font-size: 11px; font-weight: 700; color: #aaa69c; } .sockets { position: absolute; bottom: 2px; left: 0; right: 0; display: flex; gap: 3px; justify-content: center; } .sockets i { width: 9px; height: 9px; border-radius: 50%; background: #0a0a0a; border: 1px solid #96928a; } .gridTiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .ctile { text-align: center; padding: 6px 4px; border-radius: 10px; background: #14121a; border: 2px solid var(--c, #c7ab6b); } .ctile.no { background: #0c0c0e; border: 1px solid #323238; } .ctile img { width: 64px; height: 64px; object-fit: contain; } .ctile.no img { opacity: .3; filter: grayscale(1); } .ctile .n { font-size: 12px; font-weight: 700; margin-top: 2px; } .ctile.no .n { color: #5a5a60; } .guide summary { cursor: pointer; font-weight: 700; padding: 6px 8px; background: var(--iron2); border-radius: 4px; } table.t { width: 100%; border-collapse: collapse; font-size: 14px; } table.t th, table.t td { text-align: center; padding: 5px 4px; } table.t th { background: #1e1b18; font: 600 13px var(--head); color: var(--brass); } table.t tr:nth-child(even) td { background: #16141380; } table.t td:first-child, table.t th:first-child { text-align: left; } table.stat td:first-child, table.stat th:first-child { text-align: center; } table.stat tr.total td { border-top: 1px solid #c7ab6b88; font: 700 16px var(--head); } /* ---------- chat ---------- */ #chatBar { display: flex; gap: 10px; margin: 0 12px 8px; } .chatBox { flex: 1; display: flex; align-items: center; gap: 10px; height: 62px; padding: 0 10px; cursor: pointer; border-radius: 6px; position: relative; overflow: hidden; } .chatBox::after { content: ""; position: absolute; inset: 0; border: 9px solid transparent; border-image: url(art/FrameArt_frame.png) 14 / 9px stretch; pointer-events: none; } .chatBox.world { background: linear-gradient(90deg, #0e1a30, #08101e); } .chatBox.clan { background: linear-gradient(90deg, #301012, #1e0808); } .chatBox .ic { font-size: 26px; } .chatBox .t { font-weight: 800; font-size: 18px; } .chatBox.world .t { color: #6eaaff; } .chatBox.clan .t { color: #ff6e6e; } .chatBox .p { font-size: 15px; font-weight: 700; color: #a0a0b4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .chatBox > div { min-width: 0; flex: 1; text-align: left; } .chatBox .ic { flex: none; } #chatWin { position: fixed; inset: 66px 12px 12px; z-index: 40; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #0a0a10f5; border-radius: 6px; } #chatWin::after { content: ""; position: absolute; inset: -6px; border: 12px solid transparent; border-image: url(art/FrameArt_frame.png) 14 / 12px stretch; pointer-events: none; } #chatWin header { display: flex; align-items: center; justify-content: space-between; } #chatWin header b { font: 700 26px var(--head); } #chatList { flex: 1; overflow-y: auto; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; } #chatList .m { font-size: 15px; word-wrap: break-word; } #chatList .m .nm { font-weight: 800; } #chatForm { display: flex; gap: 14px; align-items: center; } #chatForm input { flex: 1; } /* ---------- toast ---------- */ /* action pop-ups: every one the same size */ #toasts { position: fixed; left: 50%; bottom: 96px; translate: -50% 0; z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(380px, calc(100vw - 24px)); } .toast { --edge: #d9a94a; position: relative; box-sizing: border-box; width: 100%; height: 62px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 12px; overflow: hidden; pointer-events: auto; cursor: pointer; border-radius: 12px; color: #f3e6c4; background: linear-gradient(180deg, #2c2030f2, #160f1af2); border: 1px solid #ffffff1a; border-left: 4px solid var(--edge); box-shadow: 0 8px 22px #000c, 0 0 0 1px #00000080, inset 0 1px 0 #ffffff14, 0 0 18px color-mix(in srgb, var(--edge) 25%, transparent); backdrop-filter: blur(6px); animation: toastIn .28s cubic-bezier(.2, .9, .3, 1.2); } .toast.ok { --edge: #4ec46a; } .toast.err { --edge: #e0503a; } .toast.info { --edge: #d9a94a; } .toast .ti { flex: none; width: 38px; height: 38px; display: grid; place-items: center; font-size: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--edge) 45%, #fff0), #00000066); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--edge) 60%, transparent); } .toast .tt { flex: 1; min-width: 0; font: 600 14px/1.3 var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; } .toast .tn { flex: none; font: 800 13px var(--body); color: var(--edge); } .toast .tn:empty { display: none; } .toast .tbar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--edge); opacity: .8; transform-origin: left; animation: toastBar var(--ms, 4200ms) linear forwards; } .toast.out { animation: toastOut .25s ease-in forwards; } @keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.96); } } @keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.96); } } @keyframes toastBar { to { transform: scaleX(0); } } .gearLayout > * { min-width: 0; } .railBtn { min-width: 0; } @media (max-width: 640px) { #topbar { flex-wrap: wrap; gap: 6px 8px; padding: 6px 8px; } #topbar .name { display: none; } .goldbox { min-width: 0; flex: 1 1 100%; display: flex; align-items: baseline; justify-content: center; gap: 8px; } .barbox { width: auto; flex: 1 1 0; min-width: 0; height: 42px; } .barbox .cap { width: 42px; height: 42px; } .barbox .cap img { width: 27px; height: 27px; } .barbox .ring { left: 33px; } .barbox .area { height: 36px; } .barbox .txt { left: 8px; right: 4px; } .barbox .lbl { font-size: 12.5px; letter-spacing: .03em; } .barbox .sub { font-size: 10.5px; } .chatBox .t { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chatBox .p { font-size: 13px; } .corners { position: static; margin-bottom: 6px; } .corner { padding: 4px 8px; } .corner .t { font-size: 13px; } .corner img { width: 34px; height: 34px; } .stage { height: 640px; } .stage .me .avatar { width: 120px !important; height: 120px !important; font-size: 56px !important; } .tile { width: 31%; } .tile.big { width: 40%; } .railBtn { padding: 2px; gap: 4px; } .railBtn .i { font-size: 18px; } .railBtn .n { font-size: 12px; } .railBtn .c { display: none; } #panelWrap { padding: 6px 4px 4px; } #body { padding: 4px 4px 14px; } .herotitle { font-size: 32px; } .hero { height: 180px; } .tile .lb { font-size: 12px !important; } .row .btns { gap: 8px; } } @media (prefers-reduced-motion: reduce) { .spin, .flame, .strike, .strike::after, .mote, .plot .portal, .corner.boss, .stage .pool, .hero .glow { animation: none !important; } } /* Market packs: one tile per pack, amount on top and price below */ .packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 10px 2px 0; } .pack { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; cursor: pointer; background: linear-gradient(#2a2216, #15110b); border: 2px solid #7a5c2a; border-radius: 8px; color: var(--brass); font: 700 20px var(--head); box-shadow: inset 0 0 10px #000a; transition: transform .1s, border-color .1s; } .pack span { font: 900 14px var(--body, Lato, sans-serif); color: #fff; background: #2e7d32; border-radius: 4px; padding: 2px 8px; } .pack:hover { transform: translateY(-2px); border-color: #d4a84a; } .pack:active { transform: none; } /* Gift from the Administrator */ .gift { text-align: center; } .gifthead { font: 700 24px var(--head); color: #ffd36a; text-shadow: 0 0 12px #ffb40066, 0 2px 4px #000; margin: 4px 0 10px; } .giftmsg { font-size: 17px; font-style: italic; color: #f3ead8; background: #0008; border-left: 3px solid #d4a84a; padding: 10px 14px; margin: 0 0 12px; text-align: left; white-space: pre-wrap; } .giftlbl { font: 700 14px var(--head); color: var(--brass); letter-spacing: .08em; text-transform: uppercase; } .giftitems { list-style: none; padding: 0; margin: 6px 0 12px; font-size: 16px; line-height: 1.7; } /* Notifications: bell on Home and the list */ .corner.bell { position: relative; justify-content: center; width: 54px; height: 54px; padding: 0; border-radius: 50%; background: radial-gradient(#3a2c12, #120e08); border: 2px solid #c9a24a; box-shadow: 0 0 10px #000a; align-self: center; } .corner.bell .bi { font-size: 28px; line-height: 1; } .corner.bell.ring .bi { animation: bellRing 2.4s ease-in-out infinite; transform-origin: 50% 10%; display: inline-block; } .corner.bell .badge { position: absolute; top: -6px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #d42a2a; color: #fff; font: 900 13px/22px var(--body); text-align: center; border: 2px solid #1a0a0a; box-sizing: border-box; } @keyframes bellRing { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(16deg); } 80% { transform: rotate(-14deg); } 86% { transform: rotate(10deg); } 92% { transform: rotate(-6deg); } } .note { display: flex; gap: 12px; align-items: flex-start; } .note .ni { font-size: 30px; line-height: 1.1; flex: none; width: 40px; text-align: center; } .note .nb { flex: 1; min-width: 0; } .note .nt { font: 700 17px var(--head); color: var(--brass); } .note .nx { font-size: 14px; margin-top: 3px; line-height: 1.5; } .note .nw { font-size: 12px; color: var(--dim); margin-top: 4px; } .note.new { border-color: #e0b24a; box-shadow: 0 0 0 1px #e0b24a55, inset 0 0 20px #e0b24a22; } .note .nnew { font: 900 10px var(--body); background: #d42a2a; color: #fff; border-radius: 4px; padding: 1px 5px; vertical-align: middle; letter-spacing: .05em; } @media (max-width: 600px) { .corner.bell { width: 46px; height: 46px; } .corner.bell .bi { font-size: 24px; } } @media (prefers-reduced-motion: reduce) { .corner.bell.ring .bi { animation: none; } } /* long page titles (Notifications, Collection Log, Daily Reward) shrink to fit on phones */ #title.long { font-size: 24px; } @media (max-width: 600px) { #title.long { font-size: 17px; padding: 4px 10px; } } /* Vault: the link on the Stronghold page and the deposit preview */ .vaultlink { position: relative; display: flex; align-items: center; gap: 12px; margin: 10px 0; min-height: 86px; padding: 10px 16px; border: 2px solid #c9a24a; border-radius: 10px; overflow: hidden; cursor: pointer; box-shadow: 0 0 14px #000c, inset 0 0 0 1px #000; } .vaultlink img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; filter: brightness(.55); transition: filter .2s, transform .4s; } .vaultlink::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000c 0%, #0006 55%, #0000 100%); } .vaultlink .vl, .vaultlink .va { position: relative; z-index: 1; } .vaultlink .vl { flex: 1; } .vaultlink .vt { font: 700 24px var(--head); color: #ffd36a; text-shadow: 0 2px 6px #000; } .vaultlink .vs { font-size: 14px; color: #f3ead8; text-shadow: 0 1px 3px #000; } .vaultlink .va { font: 700 34px var(--head); color: #ffd36a; } .vaultlink:hover img { filter: brightness(.7); transform: scale(1.03); } .vprev { font-size: 14px; color: var(--dim); margin: 6px 2px 0; min-height: 20px; } /* pack rows have three buttons: on narrow screens put them on their own line under the item */ @media (max-width: 600px) { .packlist .row { flex-wrap: wrap; padding-bottom: 4px; } .packlist .row .main { flex: 1 1 calc(100% - 60px); } .packlist .row .btns { flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; padding-right: 4px; } } /* Summoning: choose the gem that captures souls */ .gemPick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 10px; } .gemPick .gp { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; cursor: pointer; border-radius: 8px; background: linear-gradient(#221c14, #110d09); border: 2px solid #4a3d28; color: var(--text); font: 13px var(--body); } .gemPick .gp img { width: 34px; height: 34px; object-fit: contain; } .gemPick .gp .gi { font-size: 28px; line-height: 34px; } .gemPick .gp small { color: var(--dim); } .gemPick .gp.on { border-color: #e0b24a; box-shadow: 0 0 0 1px #e0b24a55, inset 0 0 16px #e0b24a33; } .gemPick .gp:disabled { opacity: .4; cursor: default; } /* Gear Guide rune table: each rune's effect on its own line under its drop chances */ .t tr.runefx td { text-align: left; font-size: 13px; color: var(--dim); padding-top: 0; border-top: none; } /* recipe effects are long: let them wrap instead of being cut off */ .wraprows .row .s, .wraprows .row .tag { white-space: normal; overflow: visible; text-overflow: clip; } .wraprows .row { padding-top: 4px; padding-bottom: 4px; } /* rune drop table: 7 chance columns, kept compact so it fits a phone */ table.t.runetable { font-size: 13px; } table.t.runetable th, table.t.runetable td { padding: 4px 2px; } table.t.runetable tr.runefx td { font-size: 12px; } @media (max-width: 600px) { table.t.runetable { font-size: 12px; } table.t.runetable th { font-size: 11px; } } /* Battle: opponents open their profile; results pop up in the middle with buttons to go again */ .tapgo { font: 700 14px var(--head); color: #ff8a78; white-space: nowrap; } .foestrikes { margin: 4px 0 10px; } .battleres { text-align: center; } .battleres .brhead { font: 700 28px var(--head); margin: 2px 0 8px; text-shadow: 0 2px 6px #000; } .battleres.win .brhead { color: #8fe08f; } .battleres.loss .brhead { color: #ff7a6a; } .battleres .brtext { font-size: 15px; line-height: 1.5; margin: 0 4px 12px; } .battleres .strikes { flex-wrap: wrap; justify-content: center; } @media (max-width: 600px) { .battleres .strike span { font-size: 15px; } } .okmsg { color: #7ee68c; text-align: center; margin-top: 6px; line-height: 1.4; } .okmsg:empty { display: none; } a.forgot { color: var(--gold); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; } .revlink { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 14px 0 6px; font-size: 14px; } .revlink a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .revnew { display: inline-block; background: #c0392b; color: #fff; font: 700 10px var(--body, sans-serif); padding: 2px 5px; border-radius: 4px; text-decoration: none; vertical-align: 2px; } .revhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 18px; } .revver { font: 700 13px var(--head); color: #1b1408; background: #b89a5c; padding: 2px 7px; border-radius: 4px; } .revver.latest { background: #ecce88; } .revdate { font-size: 13px; margin-left: auto; } .revlist { margin: 8px 0 2px; padding-left: 20px; line-height: 1.5; } .revlist li { margin: 3px 0; } /* Home: enter the running clan battle (under your name and avatar) */ .stage .me .clanGo { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 10px; cursor: pointer; white-space: nowrap; background: linear-gradient(#c8231b, #7a0d08); border: 2px solid #ff8a6a; color: #fff; text-align: left; box-shadow: 0 0 14px #ff2a1a, 0 3px 6px #000; animation: clanGlow 1.6s ease-in-out infinite alternate; } .stage .me .clanGo .cgi { font-size: 24px; filter: drop-shadow(0 1px 1px #000); } .stage .me .clanGo .cgt { display: grid; line-height: 1.15; } .stage .me .clanGo b { font: 700 15px var(--head); letter-spacing: .06em; text-shadow: 0 1px 2px #000; } .stage .me .clanGo small { font-size: 11px; color: #ffd6c8; max-width: 190px; overflow: hidden; text-overflow: ellipsis; } @keyframes clanGlow { from { box-shadow: 0 0 8px #ff2a1a, 0 3px 6px #000; } to { box-shadow: 0 0 22px #ff4a2a, 0 3px 6px #000; } } .renameForm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 10px 2px; } .renameForm input { flex: 1; min-width: 140px; padding: 8px 10px; font-size: 16px; background: #141210; color: var(--text); border: 1px solid var(--line, #6b5a3a); border-radius: 6px; } .strike.low { filter: grayscale(.55) brightness(.8); } .strikes.stack { flex-direction: column; align-items: center; gap: 12px; padding: 6px 4px; } .strikes.stack .strike { flex: none; width: 100%; max-width: 440px; min-width: 0; } .pagetext.clanbonus { color: #9fe0a8; text-align: center; } .pagetext.clanbonus.off { color: var(--dim); } /* item art is cut out and cropped to the item, so it fits whatever box it's shown in without stretching */ img[src*="ItemArt_"] { object-fit: contain !important; } /* ---- Home: painted background + medallions ---- */ .home2 { overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #4a1f45 0%, #2a1230 55%, #160a1c 100%); margin: -6px -6px 0; padding-top: 6px; border-radius: 6px; } .home2 .corners { position: relative; z-index: 6; margin: 0 6px 4px; } .home2 .homeBg { position: absolute; pointer-events: none; max-width: none; } .home2 .stage .ring { mix-blend-mode: screen; opacity: .95; } .medal { position: absolute; translate: -50% -50%; display: grid; justify-items: center; gap: 2px; cursor: pointer; z-index: 3; transition: transform .12s; } .medal img { display: block; filter: drop-shadow(0 4px 6px #000a); } .medal:hover { transform: scale(1.06); } .medal:active { transform: scale(.96); } .medal .lb { font: 700 var(--lbs, 13px) var(--head); color: #f6e7c8; text-shadow: 0 0 4px #000, 0 1px 2px #000; white-space: nowrap; letter-spacing: .04em; margin-top: -4px; } .home2 .revlink { position: relative; z-index: 3; padding-bottom: 10px; } .stage .me .clanGo img.cgi { width: 34px; height: 34px; } .stage .me.me2 { translate: -50% 0; gap: 2px; z-index: 4; } .stage .me.me2 .avatar { width: var(--av) !important; height: var(--av) !important; font-size: calc(var(--av) * .46) !important; } .stage .me.me2 .nm { font-size: var(--nm); margin-top: 4px; } .stage .me.me2 .tt { font-size: calc(var(--nm) * .55); } .stage .me.me2 .pillbtn { font-size: 12px; padding: 3px 10px; margin-top: 2px; } .stage .me.me2 .clanGo { position: static; translate: none; margin-top: 8px; padding: 5px 12px 5px 6px; } .stage .me.me2 .clanGo { margin-top: 6px; padding: 3px 10px 3px 4px; gap: 6px; } .stage .me.me2 .clanGo img.cgi { width: 28px; height: 28px; } .stage .me.me2 .clanGo b { font-size: 13px; } .stage .me.me2 .clanGo small { font-size: 10px; } .home2 { position: relative; } .home2::before { content: ""; position: absolute; inset: 0; background: url(art/HomeBg.jpg) center 40% / cover; filter: blur(16px) brightness(.7); transform: scale(1.08); pointer-events: none; } .home2 > * { position: relative; } .home2 .stage { z-index: 1; } .home2.wide .homeBg { -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); } /* ---- Home: living background (all loops divide 6s) ---- */ .home2 .homeBg { animation: bgBreathe 6s ease-in-out infinite; transform-origin: 50% 47%; } @keyframes bgBreathe { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.035); filter: brightness(1.12); } } .home2 .fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .home2 .bokeh { position: absolute; aspect-ratio: 1; border-radius: 50%; filter: blur(3px); opacity: .22; mix-blend-mode: screen; animation: bokeh var(--d) ease-in-out var(--dl) infinite; } @keyframes bokeh { 0%,100% { transform: translate(0,0) scale(1); opacity: .14; } 50% { transform: translate(var(--dx), var(--dy)) scale(1.15); opacity: .34; } } .home2 .spark { position: absolute; width: var(--sz); height: var(--sz); border-radius: 50%; background: #ffd27a; box-shadow: 0 0 6px 2px #ffb04a; opacity: 0; animation: spark var(--d) linear var(--dl) infinite; } @keyframes spark { 0% { transform: translate(0,0); opacity: 0; } 15% { opacity: 1; } 70% { opacity: .85; } 100% { transform: translate(var(--sx), var(--rise)); opacity: 0; } } .home2 .halo { position: absolute; translate: -50% -50%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 2; background: radial-gradient(circle, #ff8a3a88 0%, #ff5a2a55 30%, #ff3a1a22 55%, transparent 70%); mix-blend-mode: screen; animation: halo 3s ease-in-out infinite; } @keyframes halo { 0%,100% { transform: scale(.85); opacity: .6; } 50% { transform: scale(1.12); opacity: 1; } } .home2 .medal { animation: bob 3s ease-in-out infinite; } .home2 .medal[data-i="1"], .home2 .medal[data-i="5"] { animation-delay: -.75s; } .home2 .medal[data-i="2"], .home2 .medal[data-i="6"] { animation-delay: -1.5s; } .home2 .medal[data-i="3"], .home2 .medal[data-i="7"] { animation-delay: -2.25s; } @keyframes bob { 0%,100% { margin-top: 0; } 50% { margin-top: -6px; } } .home2 .medal img { animation: medGlow 3s ease-in-out infinite; animation-delay: inherit; } @keyframes medGlow { 0%,100% { filter: drop-shadow(0 4px 6px #000a) brightness(1); } 50% { filter: drop-shadow(0 0 12px #ffcf6a) brightness(1.18); } } @media (prefers-reduced-motion: reduce) { .home2 .homeBg, .home2 .bokeh, .home2 .spark, .home2 .halo, .home2 .medal, .home2 .medal img { animation: none !important; } } /* ---- Citadel page in the Home style ---- */ .cit2 { position: relative; margin: -6px -6px 0; padding: 8px 8px 14px; border-radius: 6px; overflow: hidden; background: #2a1230; } .cit2 .citBg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; animation: bgBreathe 6s ease-in-out infinite; pointer-events: none; } .cit2 .fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .cit2 .bokeh { position: absolute; aspect-ratio: 1; border-radius: 50%; filter: blur(3px); opacity: .22; mix-blend-mode: screen; animation: bokeh var(--d) ease-in-out var(--dl) infinite; } .cit2 .spark { position: absolute; width: var(--sz); height: var(--sz); border-radius: 50%; background: #ffd27a; box-shadow: 0 0 6px 2px #ffb04a; opacity: 0; animation: spark var(--d) linear var(--dl) infinite; } .cit2 .citIn { position: relative; z-index: 1; } .citHead { position: relative; height: 210px; display: grid; place-items: center; } .citHead .ring { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 230px; mix-blend-mode: screen; opacity: .9; } .citHead .halo { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 260px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ff8a3a88 0%, #ff5a2a55 30%, #ff3a1a22 55%, transparent 70%); mix-blend-mode: screen; animation: halo 3s ease-in-out infinite; } .citHead .cmedal { position: relative; width: 132px; height: 132px; animation: bob 3s ease-in-out infinite, medGlow 3s ease-in-out infinite; } .citTitle { text-align: center; font: 700 34px var(--head); color: #ffeec8; letter-spacing: .08em; text-shadow: 0 0 10px #ff7a2a99, 0 2px 3px #000; margin: -6px 0 2px; } .cit2 .cell { border: 1px solid #d9a94a99; border-image: none; border-radius: 12px; background: linear-gradient(#2a143399, #12081acc); box-shadow: inset 0 0 18px #ff8a3a22, 0 0 10px #c060ff22; padding: 6px 12px; backdrop-filter: blur(2px); } .cit2 .cell small { color: #e6c9a0; letter-spacing: .06em; } .cit2 .vaultlink { border: 1px solid #d9a94a; border-radius: 14px; box-shadow: 0 0 14px #ffb04a44; } .cit2 .platformRow .void, .cit2 .platformRow .plat { display: none; } .cit2 .platformRow .grid { padding: 0; border-radius: 18px; background: radial-gradient(ellipse at 50% 50%, #3a1a4499, #14081cdd 75%); border: 2px solid #d9a94a; box-shadow: 0 0 22px #ff9a3a55, inset 0 0 30px #c060ff33; box-sizing: content-box; } .cit2 .plot { border-radius: 10px; border: 1px solid #b98ad055; background: #1c0e2499; } .cit2 .plot.empty .portal { opacity: .55; filter: hue-rotate(250deg) saturate(1.2); } .cit2 .plot.empty .empt { color: #c9a6e0; } .cit2 .plot.built { background: radial-gradient(circle at 50% 40%, #5a2a3a, #1c0e24); border: 1px solid #f0c45c; box-shadow: 0 0 10px #ffb04a66; } .cit2 .plot.nexus { background: radial-gradient(circle at 50% 40%, #6a3a2a, #1c0e24); border: 2px solid #ffd27a; box-shadow: 0 0 18px #ffb04a99; animation: medGlow 3s ease-in-out infinite; } .cit2 .plot .strip { background: linear-gradient(transparent, #000c); color: #ffe2a0; } .cit2 .platformRow { background: none !important; border: none !important; box-shadow: none !important; border-image: none !important; } .cit2 .plot.empty .portal { filter: hue-rotate(140deg) saturate(1.3) brightness(1.1); opacity: .6; } /* ---- every page in the Home style ---- */ .cit2 .citIn > * + * { margin-top: 10px; } .cit2 .box { border: 1px solid #d9a94a88; border-image: none; border-radius: 12px; padding: 3px; background: linear-gradient(#2a143399, #12081acc); box-shadow: inset 0 0 18px #ff8a3a1a, 0 0 10px #c060ff1a; } .cit2 .row { border: 1px solid #b98ad04d; border-image: none; border-radius: 10px; padding: 6px 8px; background: #1c0e24a6; } .cit2 .row.tap:hover { border-color: #d9a94a; } .cit2 .pagetext { background: #14081cb3; border: 1px solid #b98ad033; border-radius: 10px; } .cit2 .rule { filter: sepia(1) saturate(3) hue-rotate(5deg) brightness(1.3); opacity: .8; } .cit2 .h3 { color: #ffd98a; text-shadow: 0 0 8px #ff8a3a55; } .cit2 .citTitle.long { font-size: 26px; } .cit2 .herodesc { text-align: center; color: #d6a8ff; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .citHead .cDisc { position: relative; width: 124px; height: 124px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #3a2440, #120818); border: 4px solid #d9a94a; box-shadow: 0 0 0 2px #2a1408, 0 0 18px #ffb04a88, inset 0 0 18px #000; animation: bob 3s ease-in-out infinite, medGlow 3s ease-in-out infinite; } .citHead .cDisc span { font-size: 62px; line-height: 1; filter: drop-shadow(0 2px 4px #000); } .citHead .cDisc img { width: 74%; height: 74%; object-fit: contain; } .citHead .cCustom { position: relative; width: 140px; height: 140px; display: grid; place-items: center; } .citHead .cCustom .avatar { width: 130px !important; height: 130px !important; font-size: 58px !important; } .citHead .cCustom > img { position: absolute; inset: 0; width: 100% !important; } /* boss/monster/vault banners: shown at the picture's own shape (so heads aren't cut off), up to 340px tall; on very wide screens the top of the picture is kept */ .cit2 .bannerFrame { position: relative; height: auto; aspect-ratio: 960 / 522; max-height: 340px; margin-left: auto; margin-right: auto; border-radius: 14px; overflow: hidden; border: 2px solid #d9a94a; box-shadow: 0 0 22px #ff9a3a55; } .cit2 .bannerFrame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; } .cit2 .bannerFrame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, #1a0a22d9); } .cit2 .cells { gap: 10px; } .cit2 .card.box { padding: 10px 12px; } .cit2 .citTitle { text-transform: uppercase; } .cit2 [style*="repeat(7,1fr)"] { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 4px !important; } .cit2 [style*="repeat(7,1fr)"] > .box { padding: 3px 0; overflow: hidden; } .cit2 .strike { min-width: 0; } .cit2 .strikes { gap: 10px; } .cit2 .strikes:not(.stack) .strike span { font-size: 15px; padding: 0 4px; } .cit2 .strikes:not(.stack) .strike span { white-space: normal; line-height: 1.1; text-align: center; font-size: 15px; } .row .ostats { display: grid; grid-template-columns: max-content max-content max-content max-content; gap: 1px 6px; font-size: 12px; font-weight: 700; margin-top: 2px; white-space: nowrap; } .row .ostats span:nth-child(4n+2) { margin-right: 10px; } .pagetext.bossregen { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 14px; } /* a small line inside an Attack / Magic Attack button (World Boss regen timer) */ .strike span:has(.ssub) { display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1.05; } .strike .ssub { font: 700 12px var(--body); color: #f0e6d0; text-shadow: 0 0 3px #000, 0 1px 1px #000; margin-top: 2px; letter-spacing: .02em; } .strike:disabled .ssub { opacity: 1; } .strike span .ssub, .strike span .ssub * { display: inline !important; font: 700 12px var(--body) !important; place-items: unset; padding: 0; } .strike span .ssub { display: block !important; white-space: nowrap; } /* hold to keep attacking */ .strike { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; } .strike.holding { filter: brightness(1.25); transform: scale(.98); } /* descriptions that can be minimized */ .minInfo { margin-top: 4px; } .minInfo .miToggle { display: block; margin: 4px 0 0 auto; background: none; border: none; padding: 2px 0; cursor: pointer; font: 700 12px var(--body); color: #d9b46a; text-decoration: underline; text-underline-offset: 2px; } .minInfo .miToggle:hover { color: #ffe2a0; } /* battle result pop-up: a bit bigger, numbers as a bulleted list */ .modal .box:has(> .battleres) { width: min(520px, 100%); padding: 18px 16px; } .battleres .brhead { font-size: 34px; margin-bottom: 10px; } .battleres .brtext { font-size: 18px; font-weight: 700; margin-bottom: 8px; } .battleres .brlist { list-style: none; padding: 0; margin: 0 auto 16px; display: inline-grid; gap: 6px; text-align: left; font-size: 18px; font-weight: 700; } .battleres .brlist li { background: #ffffff0d; border: 1px solid #d9a94a44; border-radius: 8px; padding: 6px 14px; } .battleres .strikes { --h: 58px !important; } .battleres .strike span { font-size: 19px !important; } /* clan picture in the clan page header */ .citHead .cCustom .clanPicBig { position: relative !important; width: 130px !important; height: 130px; border-radius: 50%; object-fit: cover; animation: bob 3s ease-in-out infinite; } /* Battle list: player names and "View ›" in the gold heading font, like the tab buttons */ .oppname { font: 700 17px var(--head); color: #ffd98a; letter-spacing: .03em; text-shadow: 0 0 6px #ff8a3a44, 0 1px 2px #000; } .tapgo { color: #ffd98a; text-shadow: 0 0 6px #ff8a3a44, 0 1px 2px #000; } /* Profile Record */ .recgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 22px; } .rechead { font-family: var(--head); color: #ecce88; font-weight: 700; font-size: 16px; margin: 4px 0 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(236, 206, 136, .25); } .recrow { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; } .recrow b { color: #f3e6c4; } .recrow b.gold { color: #f0c45c; } /* password fields with a show/hide eye */ .pwwrap { position: relative; display: block; } .pwwrap input { width: 100%; padding-right: 46px; box-sizing: border-box; } .pwwrap .eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 34px; border: 0; padding: 0; cursor: pointer; background: transparent center / 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9b88e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); opacity: .8; } .pwwrap .eye:hover { opacity: 1; } .pwwrap .eye.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ecce88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 19c-7 0-11-7-11-7a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 7 11 7a18.5 18.5 0 0 1-2.16 3.19M14.12 14.12a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E"); } .buffOrb { width: 26px; height: 26px; vertical-align: -7px; object-fit: contain; } /* ---- 3D gold lettering: a bright metallic gradient inside the letters, with a darker bevel/extrusion below ---- */ #login h1, #topbar .name, #title .gtx, .card h3, .h3, .cit2 .h3, .goldbox small, .goldbox .v, .oppname, .tapgo, .rechead, .recrow b.gold, .note .nt, .giftlbl { background-image: linear-gradient(180deg, #fffbe0 0%, #ffe680 22%, #ffc61a 45%, #d48a00 52%, #ffb800 64%, #ffe27a 84%, #fff3b8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 1px 0 #8a5200) drop-shadow(0 1px 0 #5e3600) drop-shadow(0 1px 0 #3a2000) drop-shadow(0 2px 3px #000c); -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* the gradient follows each element's own height, so wide/short elements keep the same metallic band */ .goldbox .v { letter-spacing: .01em; } .note .nt .nnew { -webkit-text-fill-color: currentColor; filter: none; } /* gear guide: item, sockets and tiers 1-5 fit a phone screen */ .geartiers th, .geartiers td { padding-left: 5px; padding-right: 5px; text-align: center; white-space: nowrap; } .geartiers td:first-child, .geartiers th:first-child { text-align: left; } /* rows whose full name and description must show (rune and gem inventory): text wraps instead of "…", and on phones the buttons move onto their own line under it */ .row.wrap { padding-top: 6px; padding-bottom: 6px; } .row.wrap .t, .row.wrap .s { white-space: normal; overflow: visible; text-overflow: clip; } @media (max-width: 640px) { .row.wrap { flex-wrap: wrap; } .row.wrap .main { flex: 1 1 0; } .row.wrap .btns { flex: 1 1 100%; justify-content: center; padding: 4px 0 2px; } } /* phones: rows of 4+ tabs (e.g. the clan page) wrap onto two lines of 3 so every label fits in full, and long labels like "Applicants (3)" may break onto a second line inside the button */ @media (max-width: 640px) { .tabs.many { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 8px; padding: 0 6px; } .tabs.many .btn { width: calc((100% - 16px) / 3); flex: none; } .tabs.many .btn { font-size: 12.5px; letter-spacing: 0; padding: 4px 3px; white-space: normal; line-height: 1.15; overflow: visible; text-overflow: clip; min-height: 38px; } /* thin health bars: the numbers and timer wrap inside the bar (it grows) instead of spilling over each other */ .hpbar.thin { height: auto; min-height: 18px; } .hpbar.thin span { position: relative; inset: auto; display: block; text-align: center; padding: 1px 4px; font-size: 11px; line-height: 1.3; } } /* battle pop-ups: same size every time, buttons in the same place */ .modal .box:has(> .battleres) { width: min(520px, 100%); } .battleres .brbody { height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-y: auto; } .battleres .brbody > * { margin-top: 0; } .battleres .brbody .brlist { margin-bottom: 0; } .battleres .brbtns { height: 74px; display: flex; align-items: center; justify-content: center; margin-top: 8px !important; } .battleres .brbtns .strikes { width: 100%; flex-wrap: nowrap; } .battleres .brclose { margin-top: 6px !important; } @media (max-width: 600px) { .battleres .brbody { height: 280px; } .battleres .brhead { font-size: 28px; } .battleres .brtext, .battleres .brlist { font-size: 16px; } } /* profile > Offenses */ .offlist { display: grid; gap: 8px; margin-top: 6px; } .offrow { padding: 8px 12px; border-radius: 8px; background: #ffffff0a; border: 1px solid #d9a94a44; } .offrow .offk { font-weight: 800; color: #ffb08a; } /* Home: notifications bell with the polls button under it */ .bellcol { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: auto; } .corner.bell.poll { border-color: #5aa0dc; } /* Polls */ .pollopts { display: grid; gap: 8px; } .pollopt { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 8px; overflow: hidden; text-align: left; background: #ffffff0a; border: 1px solid #d9a94a55; color: #f3e6c4; font: 700 15px var(--body); cursor: pointer; } .pollopt.off { cursor: default; } .pollopt:not(.off):hover { border-color: #d9a94a; background: #ffffff14; } .pollopt.mine { border-color: #7ee68c; } .pollopt .pollbar { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #5aa0dc55, #5aa0dc22); transition: width .4s; } .pollopt .pollt, .pollopt .pollp { position: relative; } .pollopt .pollt { flex: 1; } .pollopt .pollp { color: #cfe4ff; font-size: 13px; white-space: nowrap; } .pollverdict { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; font-weight: 700; } .pollverdict.pass { background: #14301a; border: 1px solid #4ec46a; color: #8fe08f; } .pollverdict.fail { background: #3a1414; border: 1px solid #e0503a; color: #ff9a8a; } .pollopt .pollbar.pass { background: linear-gradient(90deg, #4ec46a88, #4ec46a33); } .pollopt .pollbar.fail { background: linear-gradient(90deg, #e0503a66, #e0503a22); } /* profile > Accounts: link another account */ .linkform { display: grid; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 8px; background: #ffffff08; border: 1px solid #d9a94a44; } .linkform input { width: 100%; box-sizing: border-box; } .accrow { position: relative; } .accrow .accx { position: absolute; top: 4px; right: 4px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #c04a4a; background: #2a1010; color: #ff9a8a; font: 700 14px var(--body); cursor: pointer; line-height: 1; } .accrow .accx:hover { background: #4a1616; color: #fff; } /* ---- Leaderboard ---- */ .lbtabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 12px; } .lbtab { padding: 7px 14px; border-radius: 99px; border: 1px solid #d9a94a55; background: #00000055; color: #e8d9b0; font: 700 13px var(--head); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; } .lbtab:hover { border-color: #d9a94a; } .lbtab.on { background: linear-gradient(#ffd35a, #c48a1c); color: #2a1a04; border-color: #ffe08a; box-shadow: 0 0 12px #ffc84a66; } .podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin: 6px 0 14px; } .pod { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; cursor: pointer; } .pod .podcrown { height: 26px; font-size: 24px; filter: drop-shadow(0 0 6px #ffcf4a); } .pod .podpic { position: relative; } .pod .podpic .avatar { border-width: 3px; box-shadow: 0 0 16px var(--pc, #ffcf4a88); } .pod.p1 { --pc: #ffcf4aaa; --pb: linear-gradient(#ffe28a, #c8901c 60%, #7a5208); } .pod.p2 { --pc: #d8e0ecaa; --pb: linear-gradient(#f2f5fa, #9aa6b6 60%, #4e5868); } .pod.p3 { --pc: #e0975aaa; --pb: linear-gradient(#ffc08a, #b5682a 60%, #5e3010); } .pod .podpic .avatar { border-color: transparent; background-clip: padding-box; outline: 3px solid; outline-color: color-mix(in srgb, var(--pc) 100%, transparent); } .pod .podnum { position: absolute; right: -6px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--body); color: #1a1004; background: var(--pb); box-shadow: 0 2px 6px #000a; border: 2px solid #1a1004; } .pod .podname { margin-top: 8px; font: 700 14px var(--head); color: #f3e6c4; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pod .podname small { color: #ffd98a; font-family: var(--body); } .pod .podval { font: 800 15px var(--body); color: #ffd98a; margin-top: 2px; } .pod .podbase { width: 100%; margin-top: 8px; border-radius: 10px 10px 4px 4px; background: var(--pb); display: grid; place-items: center; box-shadow: inset 0 2px 0 #ffffff66, 0 4px 10px #0008; } .pod .podbase span { font: 900 26px var(--head); color: #1a100488; text-shadow: 0 1px 0 #ffffff55; } .pod.p1 .podbase { height: 70px; } .pod.p2 .podbase { height: 50px; } .pod.p3 .podbase { height: 38px; } .pod.me .podname { color: #ffd98a; } .lblist { display: grid; gap: 6px; } .lbrow { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 8px; border-radius: 10px; background: linear-gradient(90deg, #ffffff0d, #ffffff05); border: 1px solid #ffffff12; } .lbrow.tap { cursor: pointer; } .lbrow.tap:hover { border-color: #d9a94a66; background: #ffffff12; } .lbrow.me { border-color: #ffd35a; background: linear-gradient(90deg, #ffd35a26, #ffd35a08); box-shadow: 0 0 12px #ffc84a33; } .lbrow .lbnum { flex: none; min-width: 30px; height: 30px; padding: 0 4px; border-radius: 8px; display: grid; place-items: center; font: 800 15px var(--body); color: #ffd98a; background: #00000066; border: 1px solid #d9a94a55; } .lbrow .lbname { flex: 1; min-width: 0; font: 700 15px var(--body); color: #f3e6c4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lbrow .lbname small { color: #ffd98a; } .lbrow .lbsub { font: 600 12px var(--body); color: var(--dim); } .lbrow .lbval { flex: none; font: 800 15px var(--body); color: #ffd98a; } .lbgap { text-align: center; color: var(--dim); letter-spacing: .3em; } /* ---- Mercenaries ---- */ .mercTotals .cells { grid-template-columns: repeat(3, 1fr); } .mcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top btn" "tag tag" "stats stats"; gap: 8px 10px; align-items: center; padding: 10px 12px; margin-top: 8px; border-radius: 12px; background: linear-gradient(180deg, #ffffff0d, #ffffff04); border: 1px solid #d9a94a33; } .mcard .mtop { grid-area: top; display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; } .mcard .mwho { min-width: 0; } .mcard .mname { font: 700 16px var(--head); color: #f3e6c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mcard .mon { font: 700 12px var(--body); color: #6ee87f; } .mcard .mbtn { grid-area: btn; } .mcard .mbtn .btn { white-space: nowrap; } .mcard .mstats { grid-area: stats; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .mstat { text-align: center; padding: 4px 2px; border-radius: 8px; background: #00000055; border: 1px solid #ffffff14; } .mstat small { display: block; font: 700 10px var(--body); letter-spacing: .05em; color: var(--dim); } .mstat b { font: 800 14px var(--body); } .mstat.red b { color: #ff7a6a; } .mstat.green b { color: #6ee87f; } .mtag { display: inline-block; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; vertical-align: top; margin-top: 3px; padding: 2px 9px; border-radius: 99px; font: 600 12px var(--body); border: 1px solid; white-space: nowrap; } .mtag.owned { color: #e8d9b0; border-color: #d9a94a55; background: #d9a94a14; } .mtag.owned b { color: #ffd98a; } .mtag.free { color: #8fe08f; border-color: #4ec46a66; background: #4ec46a14; } .mtag.mine { color: #8fe08f; border-color: #4ec46a66; background: #4ec46a14; } .mtag.value { color: #ffd98a; border-color: #d9a94a66; background: #d9a94a14; } @media (max-width: 340px) { .mcard { grid-template-areas: "top top" "tag tag" "stats stats" "btn btn"; } .mcard .mbtn { justify-self: end; } } .mcard .mtagrow { grid-area: tag; min-width: 0; margin-top: -4px; } .mcard .mtagrow .mtag { margin-top: 0; font-size: 13px; } /* mercenaries search: box and both buttons on one line */ form[data-form="hireSearch"] { flex-wrap: nowrap; gap: 8px; } form[data-form="hireSearch"] input { min-width: 0 !important; } form[data-form="hireSearch"] .btn { flex: none; padding-left: 12px; padding-right: 12px; } /* ---- Gear: equipment board ---- */ .gboard { --s: clamp(52px, 15vw, 92px); display: grid; grid-template-columns: var(--s) 1fr var(--s); gap: clamp(8px, 2.5vw, 22px); align-items: stretch; margin: 4px auto 14px; max-width: 640px; padding: clamp(10px, 2.5vw, 18px); border-radius: 18px; background: radial-gradient(120% 90% at 50% 40%, #1c1436, #07050f); border: 1px solid #ffffff10; box-shadow: inset 0 0 40px #000c; } .gboard .gcol { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; } .gslot { position: relative; width: var(--s); height: var(--s); padding: 0; cursor: pointer; border-radius: 10px; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #14102a, #05040b); border: 1px solid #ffffff14; box-shadow: inset 0 0 12px #000; transition: transform .1s, box-shadow .15s; } .gslot:hover { transform: translateY(-1px); border-color: #ffffff33; } .gslot img.ghost { width: 82%; height: 82%; object-fit: contain; opacity: .85; } .gslot img.item { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 0 6px #000); } .gslot.full { border-color: var(--tc); box-shadow: inset 0 0 14px #000, 0 0 10px color-mix(in srgb, var(--tc) 55%, transparent); } .gslot.sel { outline: 2px solid #ffd35a; outline-offset: 2px; } .gslot .rn { position: absolute; top: 2px; right: 5px; font: 700 11px var(--body); color: #aaa69c; } .gslot .sockets { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: center; gap: 3px; } .gslot .sockets i { width: 7px; height: 7px; border-radius: 50%; background: #2a2440; border: 1px solid #8a7aa8; } .gboard .gmid { position: relative; min-width: 0; border-radius: 22px; overflow: hidden; cursor: pointer; background: radial-gradient(circle at 50% 40%, #2a1f4a, #0b0816); box-shadow: 0 0 0 1px #ffffff18, 0 0 30px #8a6aff33, inset 0 0 30px #000; display: grid; place-items: center; } .gboard .gmid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gboard .gmid img.crest { position: static; width: 70%; height: auto; object-fit: contain; } .gboard .gmid .initial { font: 700 clamp(60px, 18vw, 120px) var(--head); color: #ecce88; text-shadow: 0 0 20px #ffcf4a66; } .gboard .gmid .gname { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 8px 10px; text-align: center; font: 700 clamp(15px, 4vw, 20px) var(--head); color: #ffd98a; background: linear-gradient(transparent, #000c); text-shadow: 0 2px 4px #000; } .gslot { overflow: hidden; } .gslot img.item, .gslot img.ghost { position: absolute; inset: 8%; width: 84%; height: 84%; max-width: none; object-fit: contain; } .gslot .sockets { z-index: 2; } .gslot img.ghost { inset: 2%; width: 96%; height: 96%; opacity: 1; } .gearstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .gst { text-align: center; padding: 8px 4px; border-radius: 10px; background: #00000055; border: 1px solid #ffffff14; } .gst small { display: block; font: 700 11px var(--body); letter-spacing: .04em; color: var(--dim); } .gst b { display: block; font: 800 19px var(--body); } .gst span { display: block; font: 600 11px var(--body); color: var(--dim); } .gst.red b { color: #ff7a6a; } .gst.green b { color: #6ee87f; } .gearfx { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .gearfx span { padding: 3px 10px; border-radius: 99px; background: #d9a94a14; border: 1px solid #d9a94a55; color: #ffd98a; font: 600 13px var(--body); } @media (max-width: 420px) { .gearstats { grid-template-columns: repeat(2, 1fr); } } /* ---- Profile banner ---- */ .pbanner { position: relative; margin: -4px -4px 0; height: clamp(360px, 115vw, 560px); border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #2a1f4a, #07050f); } .pbanner .pbimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .pbanner .pbcrest { position: absolute; inset: 0 0 30% 0; display: grid; place-items: center; } .pbanner .pbcrest img { width: 55%; max-width: 260px; filter: drop-shadow(0 0 24px #8a6aff66); } .pbanner .pbcrest span { font: 700 clamp(120px, 40vw, 220px) var(--head); color: #ecce88; text-shadow: 0 0 30px #ffcf4a66; } .pbanner .pbshade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, #0b0816cc 72%, #0b0816 100%); } .pbanner .pbedit { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 12px; border: 1px solid #ffffff33; background: #00000088; font-size: 20px; cursor: pointer; } .pbanner .pbinfo { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 18px 16px; } .pbanner .pbname { font: 700 clamp(34px, 10vw, 52px) var(--head); color: #f6ecd2; text-shadow: 0 3px 10px #000; line-height: 1.05; } .pbbadges { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; } .pbbadge { padding: 6px 14px; border-radius: 99px; font: 700 14px var(--body); background: #1a1230dd; color: #f3e6c4; border: 1px solid #ffffff22; } .pbbadge.gold { background: linear-gradient(#ffd35a, #e0a52a); color: #2a1a04; border-color: #ffe08a; cursor: pointer; } .pbbadge.clan b { color: #ffb06a; } .pbbadge.on { color: #6ee87f; } .pbtitle { font: 600 16px var(--body); color: #e8dcff; font-style: italic; text-shadow: 0 2px 6px #000; } .pbbtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; } .pbbtns .btn { width: 100%; } .pbstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; } .pbstat { text-align: center; padding: 10px 4px; border-radius: 12px; background: #ffffff0a; border: 1px solid #ffffff14; } .pbstat b { display: block; font: 800 clamp(16px, 4.6vw, 22px) var(--body); } .pbstat small { display: block; font: 600 12px var(--body); color: var(--dim); } /* ---- Wall ---- */ .wallform { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-bottom: 10px; } .wallform textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 46px; } .wallmsg { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid #ffffff12; } .wallmsg .wallav { cursor: pointer; flex: none; } .wallbody { flex: 1; min-width: 0; } .wallhead { display: flex; align-items: baseline; gap: 8px; } .wallhead b { color: #ffd98a; cursor: pointer; } .wallhead .dim { font-size: 12px; } .wallx { margin-left: auto; background: none; border: 0; color: #ff9a8a; cursor: pointer; font-size: 14px; } .walltext { color: #f3e6c4; word-wrap: break-word; white-space: pre-wrap; } .pbstats { grid-template-columns: repeat(3, 1fr); } .pbstat { background: #120c20e6; border-color: #d9a94a33; box-shadow: inset 0 0 12px #000a; } .pbstat small { color: #cbbfa8; } .pbanner.noimg { height: clamp(300px, 80vw, 400px); } .pbanner.noimg .pbcrest { inset: 0 0 42% 0; } .pbanner.noimg .pbcrest span { font-size: clamp(90px, 28vw, 150px); } /* top bar: Regeneration Shards */ .shardbox { margin-left: auto; flex: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px; border-radius: 12px; cursor: pointer; background: linear-gradient(#123064, #0a1838); border: 2px solid #5ab0ff; box-shadow: 0 0 12px #3a8cff77, inset 0 1px 0 #ffffff33; color: #dff2ff; font: 800 19px var(--body); } .shardbox:hover { box-shadow: 0 0 18px #5ab0ffaa, inset 0 1px 0 #ffffff33; } .shardbox svg { filter: drop-shadow(0 0 4px #7ac8ff); } .shardask { text-align: center; } .shardask .sacrystal svg { width: 48px; height: 62px; filter: drop-shadow(0 0 12px #5ab0ff); } .shardask .sabars { display: flex; justify-content: center; gap: 16px; font-weight: 800; margin: 4px 0 8px; } .shardask > * + * { margin-top: 8px; } @media (max-width: 640px) { .goldbox { flex: 1 1 auto !important; } .shardbox { height: 34px; font-size: 16px; padding: 0 10px 0 8px; } .shardbox svg { width: 16px; height: 21px; } } @media (max-width: 640px) { #topbar .goldbox { order: 0; flex: 1 1 55% !important; justify-content: center; padding-left: 70px; } #topbar .shardbox { order: 1; margin-left: 0; } #topbar .barbox { order: 2; flex: 1 1 calc(50% - 8px) !important; } } .bellcol { flex-direction: row; gap: 54px; } @media (max-width: 600px) { .bellcol { gap: 46px; } } @media (max-width: 600px) { .home2 .corners .corner.daily, .home2 .corners .corner.boss { flex: 1 1 0; min-width: 0; } .home2 .corners .corner .t { font-size: 13px; } .home2 .corners .corner .s { font-size: 11px; } .home2 .corners .corner.daily > div:first-child { font-size: 24px !important; } .home2 .corners .corner.boss img { width: 34px; height: 34px; } .home2 .corners { gap: 6px; } } @media (max-width: 600px) { .bellcol { gap: 40px; } .home2 .corner.bell { width: 40px; height: 40px; } .home2 .corner.bell .bi { font-size: 20px; } .home2 .corners .corner .t { font-size: 12px; letter-spacing: 0; } .home2 .corners .corner.daily, .home2 .corners .corner.boss { padding: 4px 6px; gap: 5px; overflow: hidden; } .home2 .corners .corner.boss img { width: 30px; height: 30px; } .home2 .corners .corner.daily > div:first-child { font-size: 20px !important; } } /* Home: Daily Reward box: yellow when ready to claim, green once claimed today */ .home2 .corner.daily.ready { border-color: #ffd23a !important; background: linear-gradient(#4a3a08, #241a02) !important; box-shadow: 0 0 16px #ffd23a88, inset 0 1px 0 #ffffff33 !important; animation: dailyPulse 2s ease-in-out infinite; } .home2 .corner.daily.ready .t { color: #ffe27a !important; } .home2 .corner.daily.ready .s { color: #fff3b0 !important; } .home2 .corner.daily.claimed { border-color: #4ec46a !important; background: linear-gradient(#123a1c, #08200e) !important; box-shadow: 0 0 12px #4ec46a55, inset 0 1px 0 #ffffff22 !important; } .home2 .corner.daily.claimed .t { color: #8fe08f !important; } .home2 .corner.daily.claimed .s { color: #b8f0c0 !important; } @keyframes dailyPulse { 50% { box-shadow: 0 0 26px #ffd23acc, inset 0 1px 0 #ffffff33; } } /* Daily Reward border flashes like the World Boss box (yellow when ready, green when claimed) */ .home2 .corner.daily.ready { animation: dailyFlashY .7s ease-in-out infinite alternate !important; } .home2 .corner.daily.claimed { animation: dailyFlashG .7s ease-in-out infinite alternate !important; } @keyframes dailyFlashY { to { border-color: #ffd23a55; } } @keyframes dailyFlashG { to { border-color: #4ec46a55; } } @media (prefers-reduced-motion: reduce) { .home2 .corner.daily { animation: none !important; } } .plundert { width: 100%; } .plundert td:nth-child(2), .plundert td:nth-child(3), .plundert th:nth-child(2), .plundert th:nth-child(3) { text-align: right; white-space: nowrap; } .plundert tr.tot td { border-top: 2px solid #d9a94a66; padding-top: 8px; } .plundert tr.now td { color: #ff9a7a; } .plundert .gold { color: #ffd98a; } .plundert tr.low td { color: #ffcf8a; } .plundert tr.tax td { color: #ff9a7a; } .foldHead { cursor: pointer; user-select: none; } .foldBtn { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #d9a94a88; background: #00000066; color: #ffd98a; font-size: 16px; cursor: pointer; } .foldBtn:hover { background: #d9a94a22; } /* battle health bar (blue, above the attack buttons) */ .hpbar.blue { height: 32px; border-color: #050a1a; background: #060c1e; box-shadow: 0 0 14px #2f7bff55, inset 0 2px 6px #000; } .hpbar.blue .fill { background: linear-gradient(#8fd0ff, #2f86ff 45%, #0b2f8a); box-shadow: inset 0 1px 0 #ffffff66; transition: width .4s; } .hpbar.blue span { font-size: 15px; letter-spacing: .3px; text-shadow: 0 0 4px #000, 0 1px 2px #000; } .battleHp { margin: 4px 0 2px; } /* clan battle countdown */ .battleTimer { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px auto; text-align: center; } .btClock { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 22px; border-radius: 99px; background: linear-gradient(#2a1830, #140a18); border: 1px solid #d9a54a; box-shadow: 0 0 12px #d9a54a44, inset 0 1px 0 #ffffff22; } .btIcon { font-size: 18px; align-self: center; } .btTime { font: 800 22px ui-monospace, monospace; color: #ffd36b; text-shadow: 0 0 8px #ffb02a88, 0 1px 0 #000; font-variant-numeric: tabular-nums; } .btLeft { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: #d9c4a0; } .btBy { font-size: 13px; color: #e0cba8; text-shadow: 0 1px 3px #000, 0 0 6px #000; } .btBy b { color: #f0dcb4; } /* battle pages: Attack and Magic Attack side by side */ .strikes.pair { flex-wrap: nowrap; gap: 12px; padding: 6px 0; max-width: 640px; margin: 0 auto; } .strikes.pair .strike { flex: 1 1 0; min-width: 0; max-width: none; } .strikes.pair .strike span { white-space: normal; text-align: center; line-height: 1.1; font-size: 22px; } @media (max-width: 600px) { .strikes.pair { gap: 8px; } .strikes.pair .strike img { width: 44px; height: 100%; aspect-ratio: auto; object-fit: contain; } .strikes.pair .strike span { font-size: 15px; padding: 0 4px; } } .hpbar.blueFill { background: #060c1e; border-color: #050a1a; } .hpbar.blueFill .fill { background: linear-gradient(#8fd0ff, #2f86ff 45%, #0b2f8a); } /* clan monster battles: one at a time with side arrows */ .monCarousel { display: flex; align-items: center; gap: 8px; } .monSlide { flex: 1; min-width: 0; } .monSlide > .card { margin: 0; } .monArrow { flex: none; width: 40px; height: 64px; border-radius: 10px; border: 1px solid #d9a54a; background: linear-gradient(#3a2440, #1a0e1e); color: #ffd36b; font: 800 34px/1 var(--head); text-shadow: 0 0 8px #ffb02a88; cursor: pointer; box-shadow: 0 0 10px #d9a54a33; padding: 0 0 4px; } .monArrow:hover:not(:disabled) { filter: brightness(1.25); } .monArrow:disabled { opacity: .25; cursor: default; box-shadow: none; } .monDots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; } .monDot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #d9a54a; background: transparent; padding: 0; cursor: pointer; } .monDot.on { background: #ffd36b; box-shadow: 0 0 6px #ffb02a; } .monDot.live:not(.on) { border-color: #4fa3ff; background: #2f86ff66; } .monDots .dim { font-size: 12px; margin-left: 6px; } @media (max-width: 600px) { .monArrow { width: 32px; height: 56px; font-size: 28px; } .monCarousel { gap: 6px; } } .monSlide .toggleHead { flex-direction: column; align-items: center; text-align: center; gap: 10px; } .monSlide .toggleHead .h3 { width: 100%; } .monSlide > .card { min-height: 190px; display: flex; flex-direction: column; justify-content: center; gap: 6px; } /* install-app pop-up */ .instBox { text-align: center; max-width: 380px; margin: 0 auto; } .instIcon { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 0 16px #ffb02a55; margin-bottom: 8px; } .instStep { display: flex; gap: 12px; align-items: center; text-align: left; padding: 9px 10px; margin: 6px 0; border-radius: 10px; background: #ffffff0d; border: 1px solid #d9a54a44; } .instN { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#ffd36b, #b9822a); color: #1a0e1e; font-weight: 900; } .instIco { font-size: 16px; } /* chat: tap a name to view the profile; clan tag after names in World chat */ #chatList .m .tapname { cursor: pointer; text-decoration: underline dotted transparent; text-underline-offset: 3px; } #chatList .m .tapname:hover { text-decoration-color: currentColor; filter: brightness(1.2); } #chatList .m .ctag { font-size: .85em; font-weight: 700; color: #d9b36b; opacity: .85; } /* very narrow phones (about 340px wide and under, e.g. Galaxy S9+): keep the Daily Reward / World Boss boxes readable */ @media (max-width: 340px) { .bellcol { gap: 22px; } .home2 .corner.bell { width: 34px; height: 34px; } .home2 .corner.bell .bi { font-size: 17px; } .home2 .corners { gap: 4px; margin: 0 4px 4px; } .home2 .corners .corner.daily > div:first-child, .home2 .corners .corner.boss img { display: none; } .home2 .corners .corner.daily, .home2 .corners .corner.boss { padding: 4px 5px; } .home2 .corners .corner .t { font-size: 11px; } .home2 .corners .corner .s { font-size: 10px; } } /* ---- Home: Daily Reward / World Boss boxes, the same size and layout on every screen ---- [icon] TITLE (one line) status line (one line) Both boxes share the row equally; the two round buttons sit between them. Sizes scale smoothly with the screen width. */ .home2 .corners { --hcH: clamp(50px, 14vw, 64px); --hcI: clamp(26px, 8.4vw, 40px); --bs: clamp(32px, 10vw, 46px); gap: clamp(4px, 1.6vw, 10px) !important; align-items: center; margin: 0 6px 4px !important; } .home2 .corners .corner.hc { flex: 1 1 0 !important; min-width: 0; max-width: 230px; height: var(--hcH); box-sizing: border-box; padding: 0 clamp(5px, 1.8vw, 10px) !important; gap: clamp(4px, 1.6vw, 8px) !important; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; } .home2 .corners .corner.hc .hcIco { flex: none; width: var(--hcI) !important; height: var(--hcI) !important; display: grid !important; place-items: center; font-size: calc(var(--hcI) * .8) !important; line-height: 1; border-radius: 8px; } .home2 .corners .corner.hc img.hcIco { object-fit: cover; border: 1px solid #ff5a3c; } .home2 .corners .corner.hc .hcTxt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .home2 .corners .corner.hc .t { font: 700 clamp(10px, 3.2vw, 15px) var(--head) !important; letter-spacing: .02em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.1; } .home2 .corners .corner.hc .s { font-weight: 700; font-size: clamp(10px, 2.9vw, 13px) !important; text-align: left !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.15; } .home2 .corners .corner.hc.boss .t { color: #ff786e; } .home2 .corners .corner.hc.boss .s { color: #ffc878; } .home2 .corners .corner.hc.boss.dead .s { color: var(--dim); } .home2 .corners .bellcol { flex: none; gap: var(--bs) !important; } .home2 .corners .corner.bell { width: var(--bs) !important; height: var(--bs) !important; } .home2 .corners .corner.bell .bi { font-size: calc(var(--bs) * .5) !important; } .home2 .corners .corner.bell .badge { top: -5px; right: -7px; min-width: 18px; height: 18px; font-size: 11px; padding: 0 4px; } /* phones: the boxes are narrow, so drop the pictures and centre two short lines (title, status) in every box */ @media (max-width: 599px) { .home2 .corners .corner.hc { justify-content: center; padding: 0 4px !important; } .home2 .corners .corner.hc .hcIco { display: none !important; } .home2 .corners .corner.hc .hcTxt { align-items: center; text-align: center; gap: 3px; } .home2 .corners .corner.hc .t { font-size: clamp(9px, 2.85vw, 14px) !important; letter-spacing: 0 !important; } .home2 .corners .corner.hc .s { font-size: clamp(10px, 3vw, 14px) !important; text-align: center !important; } }