/* =====================================================================
   Tema "Ordem de Ouro": azul-noite + dourado ornamentado (carregado depois de jogo.css)
   ===================================================================== */
:root{
  --gold:#e3bd6a;--gold-d:#7c5a22;--gold-l:#fff0bf;--ink:#ece6d8;--muted:#a9a7a0;
  --navy:#121a28;--navy2:#080c14;--steel:#1c2536;
  --panel:linear-gradient(180deg,rgba(20,28,42,.95),rgba(8,12,20,.95));
  --frame:0 0 0 1px #05070c,0 0 0 2px #5c4318,0 10px 30px rgba(0,0,0,.7);
  --line:rgba(227,189,106,.45);
}
html,body{background:#070a10}
/* ---------- painéis e janelas: moldura dourada com cantos trabalhados ---------- */
.panel{background:var(--stone),var(--panel);background-blend-mode:soft-light,normal;border-radius:3px;
  box-shadow:var(--frame),inset 0 0 0 1px rgba(227,189,106,.12),inset 0 0 30px rgba(0,0,0,.55)}
.panel::before{content:"";position:absolute;inset:-6px;border-radius:0;background:none;pointer-events:none;
  border:18px solid transparent;border-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 width=%2272%22 height=%2272%22 viewBox=%220 0 72 72%22%3E%3Cdefs%3E%3Cg id=%22c%22%3E%3Cg%3E%3Cpath d=%22M4 26 V8 Q4 4 8 4 H26%22 fill=%22none%22 stroke=%22%23e3bd6a%22 stroke-width=%222%22/%3E%3Cpath d=%22M9 22 V11 Q9 9 11 9 H22%22 fill=%22none%22 stroke=%22%237c5a22%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M2 2 L10 6 L6 10 Z%22 fill=%22%23e3bd6a%22/%3E%3Cpath d=%22M7 7 m-3.2 0 l3.2 -3.2 l3.2 3.2 l-3.2 3.2 z%22 fill=%22%23fff0bf%22 stroke=%22%233a2608%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M12 4.5 q5 -3 9 0 M4.5 12 q-3 5 0 9%22 fill=%22none%22 stroke=%22%23e3bd6a%22 stroke-width=%221.1%22/%3E%3Ccircle cx=%2216%22 cy=%229%22 r=%221.2%22 fill=%22%23e3bd6a%22/%3E%3Ccircle cx=%229%22 cy=%2216%22 r=%221.2%22 fill=%22%23e3bd6a%22/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cpath d=%22M26 4 H46 M26 9 H46%22 stroke=%22%23e3bd6a%22 stroke-width=%222%22 fill=%22none%22/%3E%3Cpath d=%22M26 9 H46%22 stroke=%22%237c5a22%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M26 68 H46%22 stroke=%22%23e3bd6a%22 stroke-width=%222%22/%3E%3Cpath d=%22M26 63 H46%22 stroke=%22%237c5a22%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M4 26 V46 M68 26 V46%22 stroke=%22%23e3bd6a%22 stroke-width=%222%22/%3E%3Cpath d=%22M9 26 V46 M63 26 V46%22 stroke=%22%237c5a22%22 stroke-width=%221.2%22/%3E%3Cuse xlink:href=%22%23c%22/%3E%3Cuse xlink:href=%22%23c%22 transform=%22translate(72 0) scale(-1 1)%22/%3E%3Cuse xlink:href=%22%23c%22 transform=%22translate(0 72) scale(1 -1)%22/%3E%3Cuse xlink:href=%22%23c%22 transform=%22translate(72 72) scale(-1 -1)%22/%3E%3C/svg%3E") 24 / 18px / 0 stretch;z-index:1}
.win{border-radius:3px}
.wh{background:linear-gradient(180deg,#1d2840 0%,#111827 55%,#0b101b 100%);border-bottom:0;
  box-shadow:inset 0 1px 0 rgba(255,230,170,.12),0 4px 10px rgba(0,0,0,.45);position:sticky;top:0}
.wh::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%2214%22 viewBox=%220 0 400 14%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 x2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23e3bd6a%22 stop-opacity=%220%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23e3bd6a%22/%3E%3Cstop offset=%221%22 stop-color=%22%23e3bd6a%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x=%220%22 y=%226.3%22 width=%22400%22 height=%221.4%22 fill=%22url(%23g)%22/%3E%3C/svg%3E") center/100% 14px no-repeat,url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2222%22 height=%2214%22 viewBox=%220 0 22 14%22%3E%3Cpath d=%22M11 1 L17 7 L11 13 L5 7 Z%22 fill=%22%23fff0bf%22 stroke=%22%233a2608%22 stroke-width=%22.8%22/%3E%3Cpath d=%22M1 7 H5 M17 7 H21%22 stroke=%22%23e3bd6a%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M11 3.5 L14.5 7 L11 10.5 L7.5 7 Z%22 fill=%22%23e3bd6a%22/%3E%3C/svg%3E") center/22px 14px no-repeat;pointer-events:none}
.wh b{font:800 18px Cinzel,serif;letter-spacing:.06em;background:linear-gradient(180deg,#fff3c8 10%,#e6bd62 55%,#a87a2a 90%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 1px #000)}
.wh b::before{content:"✦";-webkit-text-fill-color:#e3bd6a;color:#e3bd6a;margin-right:10px;font-size:13px}
.x{background:radial-gradient(circle at 40% 35%,#2a3a58,#0b111c);border:1px solid #e3bd6a;color:#f5dc9a}
.x:hover{background:radial-gradient(circle at 40% 35%,#8a2a1e,#3a0c08)}
.ph{color:#f0cf7c;border-image:linear-gradient(90deg,rgba(227,189,106,.85),rgba(227,189,106,.05)) 1}
.say{color:#d9d3c4}
/* ---------- botões: placas de aço com friso dourado ---------- */
.btn{position:relative;background:linear-gradient(180deg,#2b3850 0%,#18202f 48%,#0d121c 100%);border:1px solid #9c7a3a;border-radius:3px;color:#f1e7cf;
  box-shadow:inset 0 1px 0 rgba(255,236,190,.22),inset 0 -2px 0 rgba(0,0,0,.45),0 0 0 1px #04060a,0 3px 7px rgba(0,0,0,.55)}
.btn:hover:not(:disabled){border-color:#ffe2a0;filter:none;background:linear-gradient(180deg,#3a4a68 0%,#202b40 48%,#121a28 100%);box-shadow:inset 0 1px 0 rgba(255,236,190,.35),0 0 0 1px #04060a,0 0 14px rgba(255,205,110,.5)}
.btn:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(0,0,0,.7),0 0 0 1px #04060a}
.btn:disabled{opacity:.5;filter:grayscale(.6)}
.btn.gold{background:linear-gradient(180deg,#5a4318 0%,#3a2a0c 50%,#22180a 100%);color:#ffe7a8;border-color:#f3d084;text-shadow:0 1px 2px #000,0 0 8px rgba(255,200,90,.45);
  box-shadow:inset 0 1px 0 rgba(255,240,200,.35),inset 0 0 18px rgba(255,190,80,.25),0 0 0 1px #04060a,0 0 16px rgba(240,180,70,.35)}
.btn.gold:hover:not(:disabled){background:linear-gradient(180deg,#7a5c22 0%,#4e3910 50%,#2c1f0a 100%);box-shadow:inset 0 1px 0 rgba(255,240,200,.45),inset 0 0 22px rgba(255,200,90,.35),0 0 0 1px #04060a,0 0 22px rgba(255,200,90,.6)}
.chip{background:#121a28;border-color:rgba(227,189,106,.35)}.chip.on{background:linear-gradient(#2e3d5a,#18202f);border-color:#e3bd6a}
input,select,textarea{accent-color:#e3bd6a}
.tbox input,#loginBox input,#chat input{background:rgba(8,12,20,.85)!important;border:1px solid #7c5a22!important;border-radius:3px!important;color:#fff}
.tbox input:focus,#loginBox input:focus{border-color:#e3bd6a!important;box-shadow:0 0 10px rgba(227,189,106,.35)}
/* ---------- barras ---------- */
.bar{height:15px;background:#05070c;border:1px solid #000;border-radius:2px;box-shadow:0 0 0 1px #8a6a2c,0 0 0 2px #05070c,inset 0 1px 3px rgba(0,0,0,.9)}
.bar.hp i{background:linear-gradient(180deg,#ff8070 0%,#d8352a 40%,#8a1209 100%)!important}
.bar.mp i{background:linear-gradient(180deg,#86bcff 0%,#2f6fe0 40%,#0f2f78 100%)!important}
.bar.sh i{background:linear-gradient(180deg,#d4f2ff,#5aa8d6 50%,#2a6a98)!important}
#xpbar{background:#05070c;box-shadow:0 0 0 1px #8a6a2c,0 0 0 2px #05070c,0 2px 6px rgba(0,0,0,.6)}
#xpbar i{background:linear-gradient(180deg,#9cf07a 0%,#3fae32 45%,#1a5a12 100%)!important}
#pframe .bar{margin-left:9px;overflow:visible}
#pframe .bar::before{content:"";position:absolute;left:-14px;top:50%;width:18px;height:12px;transform:translateY(-50%);background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2222%22 height=%2214%22 viewBox=%220 0 22 14%22%3E%3Cpath d=%22M11 1 L17 7 L11 13 L5 7 Z%22 fill=%22%23fff0bf%22 stroke=%22%233a2608%22 stroke-width=%22.8%22/%3E%3Cpath d=%22M1 7 H5 M17 7 H21%22 stroke=%22%23e3bd6a%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M11 3.5 L14.5 7 L11 10.5 L7.5 7 Z%22 fill=%22%23e3bd6a%22/%3E%3C/svg%3E") center/22px 14px no-repeat;z-index:3}
#pframe .bar i{border-radius:1px}
/* ---------- retrato, orbes, barra de ações ---------- */
.pport{border:2px solid #e3bd6a;background:radial-gradient(circle at 50% 30%,#2a3a58,#080c14);box-shadow:0 0 0 2px #05070c,0 0 0 4px #7c5a22,0 0 16px color-mix(in srgb,var(--pc,#e3bd6a) 55%,transparent),inset 0 0 10px #000}
.orb{border:3px solid #e3bd6a;background:#05070c;box-shadow:0 0 0 2px #05070c,0 0 0 5px #7c5a22,0 0 0 6px #e3bd6a,0 0 0 8px #05070c,0 0 24px rgba(0,0,0,.8)}
.orb span{font:800 14px Cinzel,serif}
#slots{background:linear-gradient(180deg,rgba(20,28,42,.92),rgba(8,12,20,.92))}
.slot{border:1px solid #9c7a3a;border-radius:4px;background:radial-gradient(circle at 50% 30%,#22304a,#070a12 80%);box-shadow:inset 0 0 0 1px #000,inset 0 0 14px rgba(0,0,0,.9),0 0 0 1px #04060a,0 2px 5px rgba(0,0,0,.6)}
.slot:hover{border-color:#ffe2a0}
.slot .k{color:#f5dc9a;background:rgba(5,8,14,.85)}
#topbtns .btn{border-radius:4px;background:radial-gradient(circle at 50% 35%,#2a3a58,#0b111c 75%)}
#topbtns .btn kbd{background:#05070c;border-color:#7c5a22;color:#f5dc9a}
/* ---------- minimapa como bússola ---------- */
#mini{border-radius:50% 50% 6px 6px}
#miniC{border:2px solid #7c5a22;box-shadow:0 0 0 2px #05070c,inset 0 0 18px rgba(0,0,0,.85)}
#mini .cring{position:absolute;left:50%;width:198px;height:198px;transform:translateX(-50%);background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22 viewBox=%220 0 200 200%22%3E%3Ccircle cx=%22100%22 cy=%22100%22 r=%2296%22 fill=%22none%22 stroke=%22%237c5a22%22 stroke-width=%223%22/%3E%3Ccircle cx=%22100%22 cy=%22100%22 r=%2292%22 fill=%22none%22 stroke=%22%23e3bd6a%22 stroke-width=%221.5%22/%3E%3Crect x=%2299%22 y=%223%22 width=%222%22 height=%229%22 fill=%22%23e3bd6a%22 transform=%22rotate(0.0 100 100)%22/%3E%3Crect x=%2299%22 y=%223%22 width=%221%22 height=%225%22 fill=%22%237c5a22%22 transform=%22rotate(22.5 100 100)%22/%3E%3Crect x=%2299%22 y=%223%22 width=%222%22 height=%229%22 fill=%22%23e3bd6a%22 transform=%22rotate(45.0 100 100)%22/%3E%3Crect x=%2299%22 y=%223%22 width=%221%22 height=%225%22 fill=%22%237c5a22%22 transform=%22rotate(67.5 100 100)%22/%3E%3Crect x=%2299%22 y=%223%22 width=%222%22 height=%229%22 fill=%22%23e3bd6a%22 transform=%22rotate(90.0 100 100)%22/%3E%3Crect x=%2299%22 y=%223%22 width=%221%22 height=%225%22 fill=%22%237c5a22%22 transform=%22rotate(112.5 100 100)%22/%3E%3Crect x=%2299%22 y=%223%22 width=%222%22 height=%229%22 fill=%22%23e3bd6a%22 transform=%22rotate(135.0 100 100)%22/%3E%3Crect x=%2299%22 y=%223%22 width=%221%22 height=%225%22 fill=%22%237c5a22%22 transform=%22rotate(157.5 100 100)%22/%3E%3Crect x=%2299%22 y=%223%22 width=%222%22 height=%229%22 fill=%22%23e3bd6a%22 transform=%22rotate(180.0 100 100)%22/%3E%3Crect x=%2299%22 y=%223%22 width=%221%22 height=%225%22 fill=%22%237c5a22%22 transform=%22rotate(202.5 100 100)%22/%3E%3Crect x=%2299%22 y=%223%22 width=%222%22 height=%229%22 fill=%22%23e3bd6a%22 transform=%22rotate(225.0 100 100)%22/%3E%3Crect x=%2299%22 y=%223%22 width=%221%22 height=%225%22 fill=%22%237c5a22%22 transform=%22rotate(247.5 100 100)%22/%3E%3Crect x=%2299%22 y=%223%22 width=%222%22 height=%229%22 fill=%22%23e3bd6a%22 transform=%22rotate(270.0 100 100)%22/%3E%3Crect x=%2299%22 y=%223%22 width=%221%22 height=%225%22 fill=%22%237c5a22%22 transform=%22rotate(292.5 100 100)%22/%3E%3Crect x=%2299%22 y=%223%22 width=%222%22 height=%229%22 fill=%22%23e3bd6a%22 transform=%22rotate(315.0 100 100)%22/%3E%3Crect x=%2299%22 y=%223%22 width=%221%22 height=%225%22 fill=%22%237c5a22%22 transform=%22rotate(337.5 100 100)%22/%3E%3Cpath d=%22M100 0 L106 10 L100 16 L94 10 Z%22 fill=%22%23fff0bf%22 stroke=%22%233a2608%22/%3E%3Cpath d=%22M200 100 L190 106 L184 100 L190 94 Z%22 fill=%22%23e3bd6a%22/%3E%3Cpath d=%22M100 200 L94 190 L100 184 L106 190 Z%22 fill=%22%23e3bd6a%22/%3E%3Cpath d=%22M0 100 L10 94 L16 100 L10 106 Z%22 fill=%22%23e3bd6a%22/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none;z-index:2}
#miniZone{font:800 12px Cinzel,serif;color:#f5dc9a;letter-spacing:.06em}
@media (max-width:820px){#mini .cring{width:130px;height:130px}}
/* ---------- textos de destaque ---------- */
#msg{font:800 38px Cinzel,serif;background:linear-gradient(180deg,#fff3c8 15%,#e6bd62 55%,#a87a2a 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 4px #000) drop-shadow(0 0 12px rgba(255,190,80,.35));padding:18px 70px;
  background-color:transparent}
#msg::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%2234%22 viewBox=%220 0 300 34%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 x2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23e3bd6a%22 stop-opacity=%220%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23e3bd6a%22/%3E%3Cstop offset=%221%22 stop-color=%22%23e3bd6a%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x=%220%22 y=%2216.3%22 width=%22300%22 height=%221.4%22 fill=%22url(%23g)%22/%3E%3Cpath d=%22M150 2 L158 17 L150 32 L142 17 Z%22 fill=%22%23fff0bf%22 stroke=%22%233a2608%22/%3E%3Cpath d=%22M150 8 L154.5 17 L150 26 L145.5 17 Z%22 fill=%22%23e3bd6a%22/%3E%3Cpath d=%22M140 17 q-14 -12 -30 -3 q10 -1 14 5 M160 17 q14 -12 30 -3 q-10 -1 -14 5%22 fill=%22none%22 stroke=%22%23e3bd6a%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M140 17 q-14 12 -30 3 M160 17 q14 12 30 3%22 fill=%22none%22 stroke=%22%237c5a22%22 stroke-width=%221.2%22/%3E%3C/svg%3E") center/300px 34px no-repeat;-webkit-text-fill-color:initial}
#toast{color:#f5dc9a}
#itip{background:linear-gradient(180deg,rgba(16,22,34,.98),rgba(6,9,15,.98))}
.eq .ic,.cell,.item .ic{border:1px solid #3a4660;background:radial-gradient(circle at 50% 30%,#1e2a40,#070a12 78%)}
.dslot{border-color:#9c7a3a;background:radial-gradient(circle at 50% 30%,#1e2a40,#070a12 78%)}
.doll{background:radial-gradient(ellipse at 50% 55%,rgba(70,100,150,.22),rgba(6,9,15,.65));border-color:#5c4318}
.pstats{background:rgba(6,9,15,.55);border-color:#5c4318}
#deathO h2{background:linear-gradient(180deg,#ffb0a0,#d8352a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 4px #000)}
#loading{background:radial-gradient(ellipse at 50% 40%,#1a2538,#070a10 70%)}
#loading .lb{height:8px;background:#05070c;box-shadow:0 0 0 1px #8a6a2c,0 0 0 2px #05070c;border-radius:2px}
#loading .lb i{background:linear-gradient(90deg,#7c5a22,#f5dc9a)}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:#070a12}::-webkit-scrollbar-thumb{background:linear-gradient(#5c4318,#3a2a10);border:1px solid #9c7a3a;border-radius:4px}
/* ---------- ecrã inicial ---------- */
#title{background:linear-gradient(90deg,rgba(5,8,14,.92) 0%,rgba(5,8,14,.72) 34%,rgba(5,8,14,.15) 62%,rgba(5,8,14,0) 80%),linear-gradient(0deg,rgba(5,8,14,.75),rgba(5,8,14,0) 30%)}
#title::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:conic-gradient(from 200deg at 72% -8%,transparent 0deg,rgba(255,226,160,.13) 6deg,transparent 12deg,rgba(255,226,160,.09) 20deg,transparent 27deg,rgba(255,226,160,.12) 35deg,transparent 44deg,rgba(255,226,160,.07) 52deg,transparent 60deg),
    radial-gradient(ellipse at 72% 0%,rgba(255,215,140,.28),transparent 55%);mix-blend-mode:screen;animation:rays 9s ease-in-out infinite alternate}
@keyframes rays{from{opacity:.65}to{opacity:1}}
#title::after{content:"";position:fixed;inset:10px;pointer-events:none;border:18px solid transparent;border-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 width=%2272%22 height=%2272%22 viewBox=%220 0 72 72%22%3E%3Cdefs%3E%3Cg id=%22c%22%3E%3Cg%3E%3Cpath d=%22M4 26 V8 Q4 4 8 4 H26%22 fill=%22none%22 stroke=%22%23e3bd6a%22 stroke-width=%222%22/%3E%3Cpath d=%22M9 22 V11 Q9 9 11 9 H22%22 fill=%22none%22 stroke=%22%237c5a22%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M2 2 L10 6 L6 10 Z%22 fill=%22%23e3bd6a%22/%3E%3Cpath d=%22M7 7 m-3.2 0 l3.2 -3.2 l3.2 3.2 l-3.2 3.2 z%22 fill=%22%23fff0bf%22 stroke=%22%233a2608%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M12 4.5 q5 -3 9 0 M4.5 12 q-3 5 0 9%22 fill=%22none%22 stroke=%22%23e3bd6a%22 stroke-width=%221.1%22/%3E%3Ccircle cx=%2216%22 cy=%229%22 r=%221.2%22 fill=%22%23e3bd6a%22/%3E%3Ccircle cx=%229%22 cy=%2216%22 r=%221.2%22 fill=%22%23e3bd6a%22/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cpath d=%22M26 4 H46 M26 9 H46%22 stroke=%22%23e3bd6a%22 stroke-width=%222%22 fill=%22none%22/%3E%3Cpath d=%22M26 9 H46%22 stroke=%22%237c5a22%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M26 68 H46%22 stroke=%22%23e3bd6a%22 stroke-width=%222%22/%3E%3Cpath d=%22M26 63 H46%22 stroke=%22%237c5a22%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M4 26 V46 M68 26 V46%22 stroke=%22%23e3bd6a%22 stroke-width=%222%22/%3E%3Cpath d=%22M9 26 V46 M63 26 V46%22 stroke=%22%237c5a22%22 stroke-width=%221.2%22/%3E%3Cuse xlink:href=%22%23c%22/%3E%3Cuse xlink:href=%22%23c%22 transform=%22translate(72 0) scale(-1 1)%22/%3E%3Cuse xlink:href=%22%23c%22 transform=%22translate(0 72) scale(1 -1)%22/%3E%3Cuse xlink:href=%22%23c%22 transform=%22translate(72 72) scale(-1 -1)%22/%3E%3C/svg%3E") 24 / 18px / 0 stretch;opacity:.75}
.tbox{position:relative;padding:10px 6px 10px 22px}
.tbox::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,transparent,#e3bd6a 15%,#7c5a22 85%,transparent)}
.logo{font:800 clamp(40px,6.4vw,70px)/.95 Cinzel,serif;letter-spacing:.04em;background:linear-gradient(180deg,#fff6d6 8%,#f0cb72 45%,#b0812c 75%,#6e4c14 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #2a1a06) drop-shadow(0 8px 18px rgba(0,0,0,.85));text-shadow:none;text-align:center;width:max-content;max-width:100%}
.logo::before{content:"";display:block;height:34px;margin:0 auto 6px;width:300px;max-width:100%;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%2234%22 viewBox=%220 0 300 34%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 x2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23e3bd6a%22 stop-opacity=%220%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23e3bd6a%22/%3E%3Cstop offset=%221%22 stop-color=%22%23e3bd6a%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x=%220%22 y=%2216.3%22 width=%22300%22 height=%221.4%22 fill=%22url(%23g)%22/%3E%3Cpath d=%22M150 2 L158 17 L150 32 L142 17 Z%22 fill=%22%23fff0bf%22 stroke=%22%233a2608%22/%3E%3Cpath d=%22M150 8 L154.5 17 L150 26 L145.5 17 Z%22 fill=%22%23e3bd6a%22/%3E%3Cpath d=%22M140 17 q-14 -12 -30 -3 q10 -1 14 5 M160 17 q14 -12 30 -3 q-10 -1 -14 5%22 fill=%22none%22 stroke=%22%23e3bd6a%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M140 17 q-14 12 -30 3 M160 17 q14 12 30 3%22 fill=%22none%22 stroke=%22%237c5a22%22 stroke-width=%221.2%22/%3E%3C/svg%3E") center/300px 34px no-repeat}
.logo small{-webkit-text-fill-color:#e9dcb6;color:#e9dcb6;font:700 12px Cinzel,serif;letter-spacing:.42em;margin-top:12px;text-align:center}
.logo small::after{content:"";display:block;height:14px;margin-top:8px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%2214%22 viewBox=%220 0 400 14%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 x2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23e3bd6a%22 stop-opacity=%220%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23e3bd6a%22/%3E%3Cstop offset=%221%22 stop-color=%22%23e3bd6a%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x=%220%22 y=%226.3%22 width=%22400%22 height=%221.4%22 fill=%22url(%23g)%22/%3E%3C/svg%3E") center/100% 14px no-repeat,url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2222%22 height=%2214%22 viewBox=%220 0 22 14%22%3E%3Cpath d=%22M11 1 L17 7 L11 13 L5 7 Z%22 fill=%22%23fff0bf%22 stroke=%22%233a2608%22 stroke-width=%22.8%22/%3E%3Cpath d=%22M1 7 H5 M17 7 H21%22 stroke=%22%23e3bd6a%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M11 3.5 L14.5 7 L11 10.5 L7.5 7 Z%22 fill=%22%23e3bd6a%22/%3E%3C/svg%3E") center/22px 14px no-repeat}
.tag2{color:#cfd3dc;font-style:italic}
.cls{border:1px solid rgba(227,189,106,.28);border-radius:3px;background:linear-gradient(180deg,rgba(28,38,58,.75),rgba(8,12,20,.8))}
.cls:hover{border-color:#e3bd6a}
.cls.on{border-color:#ffe2a0;background:linear-gradient(180deg,rgba(90,67,24,.6),rgba(30,22,8,.75));box-shadow:0 0 0 1px #05070c,0 0 18px rgba(240,190,90,.35),inset 0 0 14px rgba(255,200,90,.2)}
.tbtns .btn{font-size:16px;letter-spacing:.08em;text-transform:uppercase;padding:13px 18px}
.tbtns .btn.gold::before,.tbtns .btn.gold::after{content:"◆";position:absolute;top:50%;transform:translateY(-50%);font-size:10px;color:#ffe7a8}
.tbtns .btn.gold::before{left:14px}.tbtns .btn.gold::after{right:14px}
.feat span{background:rgba(8,12,20,.6);border-color:rgba(227,189,106,.3);border-radius:2px}
#charBox .cchar{border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 20%,#0b111c),rgba(8,12,20,.85) 60%)}
#charBox .cic{background:radial-gradient(circle at 50% 30%,#2a3a58,#080c14)}
/* menu lateral, cartão do herói e novidades */
.tmenu{display:flex;flex-direction:column;gap:2px;margin:14px 0 4px}
.tmenu button{display:flex;align-items:center;gap:12px;background:none;border:0;padding:6px 4px;color:#e9dcb6;font:700 15px Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;text-align:left;transition:color .15s,transform .15s}
.tmenu button svg{width:26px;height:26px;flex:none;filter:drop-shadow(0 1px 1px #000)}
.tmenu button:hover{color:#fff3c8;transform:translateX(4px);text-shadow:0 0 10px rgba(255,200,90,.6)}
.pcard{position:fixed;right:28px;top:28px;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;z-index:11;min-width:230px}
.pcard .pp{width:54px;height:54px;border-radius:50%;border:2px solid #e3bd6a;box-shadow:0 0 0 2px #05070c,0 0 0 4px #7c5a22;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#2a3a58,#080c14)}
.pcard .pp svg{width:40px;height:40px}.pcard b{display:block;font:800 16px Cinzel,serif;color:#fff0c8}.pcard small{color:#c9c3b2;font-size:12px}
.pcard .ban{width:34px;height:52px;margin-left:auto;clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);background:linear-gradient(180deg,#2a3f6a,#16233f);border:0;box-shadow:inset 0 0 0 2px #e3bd6a;display:flex;align-items:flex-start;justify-content:center;padding-top:8px;color:#f5dc9a;font:800 13px Cinzel,serif}
.ncard{position:fixed;right:28px;bottom:28px;width:330px;padding:14px 16px 12px;z-index:11;overflow:hidden}
.ncard .nimg{position:absolute;right:-18px;top:-10px;width:150px;height:150px;opacity:.22;pointer-events:none}.ncard .nimg svg{width:100%;height:100%}
.ncard .nk{font:700 10px Cinzel,serif;letter-spacing:.2em;color:#9fb4d8;text-transform:uppercase}
.ncard h3{margin:4px 0 4px;font:800 20px Cinzel,serif;background:linear-gradient(180deg,#fff3c8,#e6bd62 60%,#a87a2a);-webkit-background-clip:text;background-clip:text;color:transparent;max-width:240px}
.ncard p{margin:0;font-size:12.5px;color:#cfd3dc;min-height:34px;max-width:270px;position:relative}
.ncard .nnav{display:flex;align-items:center;justify-content:space-between;margin-top:10px;position:relative}
.ncard .nnav button{background:none;border:1px solid #7c5a22;color:#f5dc9a;width:26px;height:22px;border-radius:2px}
.ncard .dots{display:flex;gap:6px}.ncard .dots i{width:7px;height:7px;transform:rotate(45deg);background:#3a4660;display:block}.ncard .dots i.on{background:#e3bd6a;box-shadow:0 0 6px #e3bd6a}
@media (max-width:1100px),(max-height:640px){.ncard{display:none}}
@media (max-width:820px){.pcard{display:none}#title::after{display:none}.tbox{padding-left:12px}.logo{width:auto}}
/* ajustes do ecrã inicial */
#title{align-items:safe center}
.tbox{margin-top:24px;margin-bottom:24px}
.logo{font-size:clamp(34px,5vw,58px);white-space:nowrap}
#title .feat{display:none}
.tmenu{flex-direction:row;flex-wrap:wrap;gap:4px 18px;margin:12px 0 0}
.tmenu button{font-size:13px;padding:4px 2px}.tmenu button svg{width:22px;height:22px}
#track{top:266px}
.logo small{white-space:normal}
@media (max-width:600px){.logo small{letter-spacing:.18em;font-size:10.5px}.logo{font-size:30px}}

/* =====================================================================
   Versão aprovada no Claude Design: Ecrã inicial A + HUD A
   ===================================================================== */
/* ---- ecrã inicial ---- */
#title .tbox::before{display:none}
#title .logo{width:440px;max-width:100%;text-align:center;white-space:normal}
#title .logo .l1{display:block;font:800 30px/1 Cinzel,serif;letter-spacing:.32em;margin-top:6px}
#title .logo .l2{display:block;font:700 76px/1.02 'Cinzel Decorative',Cinzel,serif;letter-spacing:.02em}
#title .logo small{font:600 11.5px Cinzel,serif;letter-spacing:.3em;color:#d9cfb6;-webkit-text-fill-color:#d9cfb6}
/* modo menu: só o menu; os formulários aparecem ao escolher uma opção */
#title.tm #tNew,#title.tm #charBox,#title.tm #tContinue,#title.tm #srvBox,#title.tm .tag2,#title.tm .foot,#title.tm #acctBar{display:none!important}
#title:not(.tm) .tmain{display:none}
#title.tm .tmenu{display:none}
.tmain{display:flex;flex-direction:column;gap:6px;margin:34px 0 8px;width:470px;max-width:100%}
.tmain .mi{display:flex;align-items:center;gap:18px;padding:8px 18px 8px 10px;background:none;border:0;color:#efe3c4;font:700 19px Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;text-align:left;cursor:pointer;transition:color .15s,transform .15s}
.tmain .mi:hover{color:#fff3c8;text-shadow:0 0 12px rgba(255,200,90,.6);transform:translateX(4px)}
.tmain .mi small{display:block;font:500 12px Inter,sans-serif;letter-spacing:.02em;text-transform:none;color:#b9b3a3;margin-top:3px;text-shadow:none}
.tmain .mi .mic{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center}
.tmain .mi .mic svg{width:32px;height:32px}
.tmain .mi:disabled{opacity:.4;cursor:default;transform:none}
.tmain .mi.mnew{position:relative;background:linear-gradient(90deg,rgba(150,105,30,.55),rgba(90,60,18,.45) 60%,rgba(40,28,10,0));border-top:1px solid #e3bd6a;border-bottom:1px solid #e3bd6a;padding:12px 60px 12px 12px;color:#fff1c4;text-shadow:0 0 12px rgba(255,200,90,.6)}
.tmain .mi.mnew::after{content:"";position:absolute;right:-12px;top:50%;width:18px;height:18px;transform:translateY(-50%) rotate(45deg);background:#f5dc9a;border:2px solid #6e4c14;box-shadow:0 0 12px rgba(255,210,120,.8)}
.tkeys{display:flex;gap:26px;margin-top:18px;font:500 13px Inter,sans-serif;color:#cfc7b2}
.tkeys span{display:flex;align-items:center;gap:8px}.tkeys i{width:24px;height:24px;border-radius:50%;border:1px solid #e3bd6a;display:flex;align-items:center;justify-content:center;font:700 11px Cinzel,serif;font-style:normal;color:#f5dc9a}
.tback{display:inline-flex;align-items:center;gap:8px;margin:14px 0 10px;background:none;border:0;color:#e3bd6a;font:700 13px Cinzel,serif;letter-spacing:.14em;cursor:pointer;padding:4px 0}
.tback:hover{color:#fff3c8}
#title.tm .tback{display:none}
/* cartão do jogador */
.pcard{border-radius:40px 4px 4px 40px;height:76px;width:340px;box-sizing:border-box;padding:0 12px 0 10px}
.pcard::before{display:none}
.pcard .pp{width:58px;height:58px}
.pcard .ban{width:44px;height:66px;margin-top:22px;padding-top:10px;box-sizing:border-box}
.pcard .ban svg{width:22px;height:22px}
/* novidades com imagem */
.ncard{width:330px;height:200px;padding:0;box-sizing:border-box}
.ncard .nart{position:absolute;inset:0;background:linear-gradient(180deg,#3a3050,#151522 60%,#08090f)}
.ncard .nimg{right:auto;left:50%;top:10px;transform:translateX(-50%);width:120px;height:120px;opacity:.35}
.ncard .nbody{position:absolute;left:0;right:0;bottom:0;padding:12px 16px 10px;background:linear-gradient(0deg,rgba(5,7,12,.96) 55%,rgba(5,7,12,0))}
.ncard h3{font-size:21px;margin:2px 0 2px}
.ncard p{font-size:12px;min-height:0;max-width:none}
.ncard .nnav{position:absolute;left:8px;right:8px;top:62px;margin:0}
.ncard .dots{justify-content:center;margin-top:8px}
@media (max-width:820px){.tmain{margin-top:18px}.tmain .mi{font-size:16px;padding:6px 8px}.tmain .mi.mnew{padding:10px 40px 10px 8px}#title .logo .l2{font-size:52px}#title .logo .l1{font-size:22px}.tkeys{display:none}}

/* ---- HUD A ---- */
body:not(.touch) #pframe{width:330px;min-height:118px;padding:12px 16px 10px 114px;border-radius:60px 4px 4px 60px}
body:not(.touch) #pframe::before{display:none}
body:not(.touch) .pport{left:12px;top:14px;width:88px;height:88px;border:2px solid #e3bd6a;box-shadow:0 0 0 2px #05070c,0 0 0 5px #7c5a22,0 0 16px color-mix(in srgb,var(--pc,#e3bd6a) 45%,transparent)}
body:not(.touch) .pport svg{width:58px;height:58px}
body:not(.touch) .spchip{margin-left:-102px}
body:not(.touch) #autoP{top:150px}
body:not(.touch) #pframe .bar{height:17px}
/* orbes de vida/mana: os valores já estão nas barras do retrato; no lugar delas, poções em orbes à direita */
body:not(.touch) #bottom .orb{display:none}
#potOrbs{position:absolute;right:34px;bottom:34px;display:flex;flex-direction:column;gap:14px;z-index:3}
body.touch #potOrbs{display:none}
#potOrbs button{position:relative;width:58px;height:58px;border-radius:50%;border:2px solid #e3bd6a;box-shadow:0 0 0 2px #05070c,0 0 0 4px #7c5a22,0 6px 14px rgba(0,0,0,.6);padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
#potOrbs button:hover{filter:brightness(1.2)}
#potOrbs button svg{width:30px;height:30px;filter:drop-shadow(0 1px 2px #000)}
#potOrbs .pr{background:radial-gradient(circle at 40% 30%,#ff8a7a,#b0241a 60%,#4a0806)}
#potOrbs .pb{background:radial-gradient(circle at 40% 30%,#8fbaff,#2457c0 60%,#0a1f4a)}
#potOrbs .pg{background:radial-gradient(circle at 40% 30%,#b4f08a,#3a9a2a 60%,#103a0a)}
#potOrbs em{position:absolute;right:-6px;bottom:-4px;font:700 12px Inter,sans-serif;font-style:normal;color:#fff;background:#05070c;border:1px solid #9c7a3a;padding:0 4px}
#potOrbs b{position:absolute;left:4px;top:-4px;font:700 10px Inter,sans-serif;color:#fff;text-shadow:0 1px 2px #000}
/* bússola com pontos cardeais */
#mini .cwrap .cp{position:absolute;font:800 12px Cinzel,serif;color:#e3bd6a;text-shadow:0 1px 2px #000;z-index:3;line-height:1}
#mini .cwrap .cp.n{left:50%;top:-14px;transform:translateX(-50%);font-size:14px;color:#fff0bf}
#mini .cwrap .cp.e{right:-15px;top:50%;transform:translateY(-50%)}
#mini .cwrap .cp.s{left:50%;bottom:-15px;transform:translateX(-50%)}
#mini .cwrap .cp.w{left:-16px;top:50%;transform:translateY(-50%)}
#mini{background:none!important;box-shadow:none!important;padding-top:2px}
#mini::before{display:none}
#mini #coords{margin-top:14px;text-shadow:0 1px 2px #000}
/* missões com título centrado */
#track .ph{text-align:center;border-image:none;border-bottom:0;position:relative;padding-bottom:10px;margin-bottom:6px}
#track .ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#e3bd6a,transparent)}
/* micro-menu ao centro, em faixa */
@media (min-width:1280px){
  body:not(.touch) #topbtns{left:50%;right:auto;transform:translateX(-50%);max-width:none;flex-wrap:nowrap;padding:6px;gap:6px;border:1px solid rgba(227,189,106,.45);background:rgba(7,10,16,.75);box-shadow:0 0 0 1px #05070c}
  body:not(.touch) #topbtns .btn{width:44px;height:44px}
  body:not(.touch) #pvpTag{top:76px!important}
  body:not(.touch) #eventBar{top:84px}
  body:not(.touch) #compass{top:96px!important}
  body:not(.touch) #towerBar,body:not(.touch) #dgBar{top:112px}
  body:not(.touch) #tframe{top:128px}
  body:not(.touch) #raidBar{top:180px!important}
}
#title .logo small{letter-spacing:.24em}
.tmain .mi:focus{outline:none}.tmain .mi:focus-visible{outline:1px solid #e3bd6a;outline-offset:2px}
#miniZone{margin-bottom:10px}