/* GLODOOM Links — layout "cliente do jogo". A tela inteira é a área de jogo, com a câmera virada para o céu (como no print do cliente): HUD nos cantos, janelas flutuantes no meio, chat embaixo à esquerda, barra de atalhos embaixo no centro e a faixa de EXP no rodapé. Três modos, controlados por classes em : (padrão) desktop: janelas arrastáveis, várias abertas .is-mobile celular: uma janela por vez, ocupando a área entre HUD e barra .is-list lista: todas as janelas abertas em coluna (acessível / sem JS de janela) */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; height: 100%; } body { margin: 0; min-height: 100%; font-family: var(--il-font-ui); font-size: var(--il-fs-body); line-height: var(--il-lh); color: var(--il-text); background-color: var(--il-page-bg); overflow: hidden; } html.is-list body { overflow: auto; } img { max-width: 100%; } a { color: var(--il-link); } p { margin: 0 0 0.75em; } /* ---------- Cena de fundo: céu de dia visto de baixo ---------- */ .scene { position: fixed; inset: 0; z-index: var(--il-z-scene); pointer-events: none; overflow: hidden; background-color: var(--il-page-bg); background-image: var(--il-page-bg-image); background-size: cover; background-position: center; } /* com foto de fundo: some o céu/nuvens procedurais, mantém vinheta e grão; cor de espera escura */ .scene__layer { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity; z-index: 1; } .scene__layer.is-active { opacity: 1; } html.is-mobile .scene__layer { background-position: center top; } html.has-bg body, .scene--photo { background-color: #0b1428; } /* com foto, quem pinta a arte são as .scene__layer (cross-fade); a .scene não pode repetir a mesma imagem, senão o navegador baixa a versão desktop E a mobile */ .scene--photo { background-image: none; } .scene--photo .scene__sky, .scene--photo .scene__clouds, .scene--photo .scene__clouds--far { display: none; } .scene--photo ~ .kbd-hint, html.has-bg .kbd-hint { color: #c9d3e6; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } html.is-mobile .scene--photo { background-position: center top; } .scene__sky { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 40% at 78% 18%, var(--il-sun), transparent 70%), radial-gradient(ellipse 120% 70% at 50% 110%, var(--il-sky-haze) 10%, transparent 60%), linear-gradient(180deg, var(--il-sky-top) 0%, var(--il-sky-mid) 55%, var(--il-sky-low) 100%); } /* duas camadas de nuvens (blobs suaves) que derivam devagar */ .scene__clouds, .scene__clouds--far { position: absolute; inset: -10% -20%; background-repeat: no-repeat; filter: blur(18px); animation: il-clouds 120s linear infinite alternate; } .scene__clouds { background-image: radial-gradient(ellipse 18% 9% at 18% 22%, var(--il-cloud), transparent 70%), radial-gradient(ellipse 26% 11% at 30% 30%, var(--il-cloud), transparent 70%), radial-gradient(ellipse 16% 8% at 68% 16%, var(--il-cloud), transparent 70%), radial-gradient(ellipse 30% 12% at 80% 40%, var(--il-cloud), transparent 70%), radial-gradient(ellipse 34% 14% at 50% 78%, var(--il-cloud), transparent 70%), radial-gradient(ellipse 22% 10% at 12% 70%, var(--il-cloud), transparent 70%); } .scene__clouds--far { filter: blur(30px); animation-duration: 180s; animation-direction: alternate-reverse; background-image: radial-gradient(ellipse 40% 16% at 40% 10%, var(--il-cloud-soft), transparent 70%), radial-gradient(ellipse 50% 18% at 75% 65%, var(--il-cloud-soft), transparent 70%), radial-gradient(ellipse 45% 16% at 20% 50%, var(--il-cloud-soft), transparent 70%), radial-gradient(ellipse 60% 20% at 55% 95%, var(--il-cloud-soft), transparent 70%); } @keyframes il-clouds { from { transform: translate3d(-2%, 0, 0); } to { transform: translate3d(2%, 1%, 0); } } .scene__vignette { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse 85% 85% at 50% 50%, transparent 60%, rgba(20, 40, 70, 0.35)); } .scene__grain { position: absolute; inset: 0; z-index: 3; opacity: 0.22; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- HUD ---------- */ .hud { position: fixed; z-index: var(--il-z-hud); } .hud--buffs { top: 8px; left: 8px; } .hud--status { top: 42px; left: 8px; width: 262px; } .hud--party { top: 148px; left: 8px; width: 150px; } .hud--target { top: 8px; left: 50%; transform: translateX(-50%); width: 240px; } .hud--map { top: 8px; right: 8px; } .hud--nameplate { top: 13%; left: 68%; transform: translate(-50%, -50%); z-index: var(--il-z-nameplate); pointer-events: none; } .hud--nameplate > * { pointer-events: auto; } .hud--strip { left: 0; right: 0; bottom: 0; height: var(--il-strip-h); } .hud--sysmenu { right: 8px; bottom: calc(var(--il-strip-h) + 8px); } /* ---------- Render do personagem na lateral (decorativo, print do jogador) ---------- */ .hud--character { top: 184px; bottom: calc(var(--il-strip-h) + 48px); width: min(24vw, 300px); z-index: 1; /* acima da cena, abaixo das janelas e do resto do HUD */ pointer-events: none; overflow: hidden; } .hud--character.side-right { right: 0; } .hud--character.side-left { left: 0; } .hud--character__art { position: absolute; bottom: 0; height: 100%; width: auto; max-width: none; display: block; filter: drop-shadow(0 14px 26px rgba(10, 20, 40, 0.45)) saturate(1.08) contrast(1.04); } .hud--character.side-right .hud--character__art { right: 0; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 100%); } .hud--character.side-left .hud--character__art { left: 0; -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 24%, #000 100%); mask-image: linear-gradient(to left, transparent 0%, #000 24%, #000 100%); } /* esconde em telas menores: não há espaço sem brigar com as janelas */ @media (max-width: 1400px), (max-height: 640px) { .hud--character { display: none; } } html.is-mobile .hud--character, html.is-list .hud--character { display: none; } .hud--character:empty { display: none; } /* ---------- Área de janelas ---------- */ .desktop { position: fixed; inset: 0; z-index: var(--il-z-window); pointer-events: none; /* só as janelas recebem clique */ } .desktop > .il-window { position: absolute; pointer-events: auto; width: var(--w, 460px); max-width: calc(100vw - 16px); max-height: calc(100vh - var(--il-bar-h) - var(--il-strip-h) - 24px); animation: il-window-open 0.14s ease-out; } .desktop > .il-window[hidden] { display: none; } .desktop > .il-window.is-dragging { transition: none; box-shadow: 0 0 0 1px var(--il-border-outer), inset 0 0 0 1px var(--il-border-dark), 0 18px 40px rgba(10, 20, 40, 0.6); } @keyframes il-window-open { from { opacity: 0; transform: scale(0.985); } } /* ---------- Chat ---------- */ .chat-dock { position: fixed; left: 8px; bottom: calc(var(--il-strip-h) + 8px); z-index: var(--il-z-chat); } /* ---------- Barra de atalhos ---------- */ .bar-dock { position: fixed; left: 50%; bottom: calc(var(--il-strip-h) + 8px); transform: translateX(-50%); z-index: var(--il-z-bar); max-width: calc(100vw - 16px); } /* ---------- Rodapé (dentro da janela do servidor no desktop; solto no modo lista) ---------- */ .site-footer { display: none; text-align: center; font-size: var(--il-fs-chrome); line-height: 1.7; color: var(--il-text-muted); padding: 8px 0; } html.is-list .site-footer { display: block; position: relative; z-index: 1; padding-bottom: calc(var(--il-bar-h) + 24px); color: #1e2a3a; } html.is-list .site-footer a { color: #1e2a3a; } .noscript { position: relative; z-index: 2; max-width: 600px; margin: 24px auto; } /* inventário: 8 colunas como no cliente (6 no celular) */ .il-slot-grid--inv { grid-template-columns: repeat(8, 1fr); } html.is-mobile .il-slot-grid--inv { grid-template-columns: repeat(6, 1fr); } .site-footer p { margin: 0; } /* ---------- Diálogo de NPC ---------- */ .hero-head { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; margin-bottom: 10px; } .hero-head__crest { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8)); } .hero-head__name { margin: 0; font-size: var(--il-fs-h1); font-weight: 700; line-height: 1.05; letter-spacing: 0.06em; color: #fff; text-shadow: 0 1px 0 #000, 0 0 14px rgba(242, 199, 92, 0.3); } .hero-head__tag { margin: 3px 0 0; font-size: var(--il-fs-label); color: var(--il-title-text); } .hero-head__tag .il-server-tag { margin-right: 4px; } .il-lead { margin: 0 0 10px; font-size: var(--il-fs-lead); } .il-pitch { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--il-fs-label); color: var(--il-text-muted); } .il-pitch li::before { content: "•"; color: var(--il-title-text); margin-right: 6px; } .il-meta { margin: 10px 0 0; font-size: var(--il-fs-label); color: var(--il-text-muted); } .socials-row { display: flex; gap: 6px; flex-wrap: wrap; } /* ---------- Ajuda de teclado (canto) ---------- */ .kbd-hint { position: fixed; right: 8px; bottom: calc(var(--il-strip-h) + 46px); z-index: var(--il-z-hud); font-size: var(--il-fs-chrome); color: #223247; text-align: right; line-height: 1.5; pointer-events: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); } .kbd-hint kbd { font: inherit; color: var(--il-text); border: 1px solid var(--il-border-dark); padding: 0 4px; background: rgba(30, 32, 36, 0.85); text-shadow: none; } @media (max-width: 1199px) { .kbd-hint { display: none; } } /* ========================================================================= Modo celular: uma janela por vez, entre o HUD e a barra ========================================================================= */ html.is-mobile .hud--status { width: auto; left: 6px; right: 6px; top: 6px; } html.is-mobile .il-status { grid-template-columns: 40px 1fr; padding: 4px 8px 4px 4px; } html.is-mobile .il-status__portrait { width: 40px; height: 40px; } html.is-mobile .il-status__lv { display: none; } html.is-mobile .hud--map, html.is-mobile .hud--buffs, html.is-mobile .hud--party, html.is-mobile .hud--target, html.is-mobile .hud--nameplate, html.is-mobile .hud--strip, html.is-mobile .hud--sysmenu, html.is-mobile .chat-dock, html.is-mobile .kbd-hint { display: none; } html.is-mobile .desktop { top: calc(var(--il-hud-h) - 8px); bottom: calc(var(--il-bar-h-mobile) + 12px); left: 6px; right: 6px; } html.is-mobile .desktop > .il-window { position: absolute; inset: 0; width: auto; max-width: none; max-height: none; transform: none !important; } html.is-mobile .bar-dock { left: 6px; right: 6px; bottom: 6px; transform: none; max-width: none; } html.is-mobile .il-bar { overflow-x: auto; justify-content: flex-start; gap: 4px; padding: 4px; scrollbar-width: none; } html.is-mobile .il-bar::-webkit-scrollbar { display: none; } html.is-mobile .il-bar__pages, html.is-mobile .il-bar__lock, html.is-mobile .il-bar__key, html.is-mobile .il-bar__slot--empty, html.is-mobile .il-bar__sep { display: none; } html.is-mobile .il-bar__page:not(.is-on) { display: none; } html.is-mobile .il-bar__btn { width: 46px; height: 46px; } html.is-mobile .il-bar__btn .il-slot__icon { width: 32px; height: 32px; } html.is-mobile .il-window__titlebar { min-height: 34px; } html.is-mobile .il-video-grid { grid-template-columns: 1fr; } html.is-mobile .il-video-grid .il-video-card { grid-template-columns: 40% 1fr; } html.is-mobile .il-stat-tiles { grid-template-columns: 1fr 1fr; } /* ========================================================================= Modo lista: página comum rolável, todas as janelas em coluna ========================================================================= */ html.is-list .scene { position: fixed; } html.is-list .hud, html.is-list .chat-dock, html.is-list .kbd-hint { display: none; } html.is-list .desktop { position: relative; inset: auto; z-index: 1; pointer-events: auto; max-width: 720px; margin: 0 auto; padding: 12px 12px calc(var(--il-bar-h) + 24px); display: flex; flex-direction: column; gap: var(--il-gap); } html.is-list .desktop > .il-window { position: static; width: auto; max-width: none; max-height: none; transform: none !important; animation: none; } html.is-list .desktop > .il-window[hidden] { display: flex; } html.is-list .il-window__body { overflow: visible; } html.is-list .il-window__close { display: none; } html.is-list .il-bar__key, html.is-list .il-bar__pages, html.is-list .il-bar__lock { display: none; } html.is-list .il-bar__page:not(.is-on) { display: none; } html.is-list .il-bar__slot--empty { display: none; } html.is-list .bar-dock { bottom: 8px; } @media (min-width: 768px) { html.is-list .desktop { padding-top: 32px; gap: 16px; } } /* ========================================================================= Timer de raid boss: card à direita, embaixo do minimapa ========================================================================= */ .hud--raid { top: 176px; right: 8px; } .hud--raid:empty { display: none; } .hud--raid.is-open { z-index: var(--il-z-chat); } /* painel aberto fica na frente das janelas */ /* tela baixa: não cabe embaixo do minimapa, vai pro lado */ @media (max-height: 640px) { .hud--raid { top: 8px; right: 240px; } } /* celular: tirinha compacta embaixo do retrato (o resto do HUD some) */ html.is-mobile.has-raid { --il-hud-h: 168px; } html.is-mobile .hud--raid { display: block; top: 90px; left: 6px; right: 6px; } html.is-list .hud--raid { display: none; } /* modo lista não tem HUD (vem depois da regra de celular de propósito) */ html.is-mobile .il-raid { width: auto; } html.is-mobile .il-raid__main { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; padding: 5px 8px; } html.is-mobile .il-raid__head { padding: 0; margin: 0; background: none; border: 0; } html.is-mobile .il-raid__lv { display: none; } html.is-mobile .il-raid__row { padding: 0; justify-content: flex-end; } html.is-mobile .il-raid__label { display: none; } html.is-mobile .il-raid__time { font-size: 16px; } html.is-mobile .il-raid__bar { grid-column: 1 / -1; margin: 0; } html.is-mobile .il-raid__sub { grid-column: 1 / -1; padding: 0; }