*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:Georgia,"Times New Roman",serif;color:#d8e3ec;background:#02070b}.portal-body{background:radial-gradient(ellipse at 50% 0,#12324d 0,#07131d 42%,#02070b 78%);padding:0 18px 45px}.portal-shell{max-width:1460px;margin:0 auto;filter:drop-shadow(0 18px 35px #000)}.hero{height:313px;background-image:linear-gradient(to bottom,transparent 80%,#03090d 100%),url('/static/images/fumblecraft-hero.webp');background-size:cover;background-position:center top;background-repeat:no-repeat;border-left:2px solid #172b39;border-right:2px solid #172b39}.portal-main{position:relative;margin-top:-8px;padding:0 24px 25px;background:linear-gradient(90deg,#071019,#0a151e 48%,#071019);border:2px solid #273844;border-top:0;box-shadow:inset 0 0 45px #000}.portal-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:18px}.wow-frame{position:relative;background:#080d12;border:2px solid #1b2831;box-shadow:0 0 0 2px #6c4a1e,0 0 0 4px #111a20,inset 0 0 0 1px #b18035,inset 0 0 35px #000;margin:16px 4px 8px}.wow-frame:before,.wow-frame:after{content:"◆";position:absolute;top:-12px;color:#b27c2c;text-shadow:0 0 2px #000;font-size:18px;z-index:3}.wow-frame:before{left:-10px}.wow-frame:after{right:-10px}.frame-title{position:relative;width:max-content;min-width:58%;max-width:88%;margin:-18px auto 0;padding:10px 34px 9px;text-align:center;color:#f2c868;font-size:22px;letter-spacing:1.5px;text-shadow:0 2px 2px #000;background:linear-gradient(#152634,#071019);border:1px solid #a16e28;box-shadow:0 0 0 2px #111a20,inset 0 1px #456076;z-index:2}.frame-body{padding:31px 30px 25px}.news-item+.news-item{border-top:1px solid #2c3941;margin-top:18px;padding-top:18px}.news-date{font:11px Arial,sans-serif;color:#8799a8;letter-spacing:.5px}.news-title{color:#f0c35c;margin:6px 0 7px;font-size:19px}.news-text{font:14px/1.55 Arial,sans-serif;color:#b9c5ce;margin:0}.realm-body{display:flex;flex-direction:column;min-height:292px}.realm-row{flex:1}.realm-heading{display:flex;justify-content:center;align-items:center;gap:10px;font:14px Arial,sans-serif;letter-spacing:.5px;color:#c9d4dc}.realm-heading strong{font:700 18px Georgia,"Times New Roman",serif;color:#e8bd5e}.realm-type{padding:2px 7px;border:1px solid #6e522b;color:#d5b46e;font-size:11px;text-transform:uppercase}.realm-dot{width:15px;height:15px;border-radius:50%;background:#888;border:2px solid #26313a;box-shadow:0 0 0 2px #000,0 0 9px #777}.online .realm-dot{background:#55e56a;box-shadow:0 0 0 2px #12391a,0 0 13px #41f35b}.offline .realm-dot{background:#c94b45;box-shadow:0 0 0 2px #481714,0 0 11px #c94b45}.online #realmState{color:#71ed7e}.offline #realmState{color:#d76c65}.population-grid{display:grid;grid-template-columns:1fr 1fr;margin:29px auto 13px;max-width:520px}.population-stat{text-align:center;padding:0 16px}.population-stat+.population-stat{border-left:1px solid #34434e}.population-stat strong{display:block;color:#ffc85d;font-size:45px;line-height:1;text-shadow:0 2px 2px #000,0 0 12px rgba(226,156,42,.2);font-weight:normal}.population-stat span{display:block;margin-top:8px;font:15px Arial,sans-serif;color:#d3dde4}.status-note{text-align:center;font:10px Arial,sans-serif;color:#617582;margin-top:7px}.wow-button{display:flex;align-items:center;justify-content:center;gap:18px;width:92%;margin:17px auto 0;padding:15px 25px;text-decoration:none;color:#ffe18a;font-size:21px;letter-spacing:1px;text-shadow:0 2px 2px #000;border:2px solid #6d4c1d;box-shadow:0 0 0 3px #111,0 0 0 4px #8a6226,inset 0 0 0 2px #4a0b0b,inset 0 2px 4px rgba(255,255,255,.15),0 5px 12px #000;transition:.15s}.wow-button.red{background:linear-gradient(#8f1515,#5c0707 55%,#380303)}.wow-button:hover{filter:brightness(1.25);box-shadow:0 0 0 3px #111,0 0 0 4px #d09a3e,inset 0 0 0 2px #6c1111,0 0 18px rgba(214,65,37,.45)}.wow-button b{font-size:31px;line-height:0;color:#e8ad3c}.about-card{margin-top:25px}.about-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:center}.about-copy-wrap{padding:5px 20px}.about-copy-wrap p{font:15px/1.6 Arial,sans-serif;color:#c4d0d8;margin:0 0 22px}.client-line{display:flex;gap:15px;align-items:center;padding-top:14px;border-top:1px solid #34434e}.client-line span,.rates-title{font:11px Arial,sans-serif;color:#8497a5;letter-spacing:1.5px}.client-line strong{color:#e7bd60;font-size:17px;font-weight:normal}.client-line small{color:#9babb6;font-size:12px}.rates-panel{border-left:1px solid #755628;padding-left:34px}.rates-title{color:#d7ad55;margin-bottom:11px}.rates-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #34434e;border-left:1px solid #34434e}.rate{min-height:65px;padding:10px 12px;border-right:1px solid #34434e;border-bottom:1px solid #34434e;background:rgba(11,19,25,.65)}.rate span{display:block;font:10px Arial,sans-serif;text-transform:uppercase;letter-spacing:1px;color:#8194a2}.rate strong{display:block;color:#efc35f;font-size:16px;font-weight:normal;margin-top:5px}footer{text-align:center;color:#667a89;font:10px Arial,sans-serif;letter-spacing:2px;padding:22px 0 5px}.form-panel{max-width:760px;margin:60px auto;background:linear-gradient(180deg,rgba(13,31,48,.98),rgba(4,13,22,.99));border:1px solid #8e682d;padding:45px;box-shadow:0 0 0 2px #101a23,0 0 0 3px #4f3a1c,0 18px 45px rgba(0,0,0,.7)}.realm-title{text-align:center;color:#d9b15d;letter-spacing:3px;font-weight:normal}.tagline{text-align:center;color:#809bb2;letter-spacing:2px;text-transform:uppercase;font-size:12px;margin-bottom:30px}.field{margin-bottom:20px}.field label{display:block;margin-bottom:7px;color:#c9d9e8;font-size:13px;letter-spacing:1px}.field input{width:100%;padding:13px 14px;border:1px solid #394d5d;background:#07111a;color:#edf7ff;font:15px Arial,sans-serif;outline:none}.field input:focus{border-color:#aa7d35}.form-panel .wow-button{width:100%;border:1px solid #c6943f;background:linear-gradient(#7c5420,#4a2e11 55%,#38220c);cursor:pointer}.form-panel button:disabled{opacity:.55}#message{display:none;margin-top:22px;padding:13px 15px;text-align:center;font:14px Arial,sans-serif}#message.success{display:block;color:#a9e9bb;border:1px solid #34764a;background:rgba(30,100,54,.22)}#message.error{display:block;color:#ffb3a9;border:1px solid #8b4037;background:rgba(120,38,30,.23)}.back{text-align:center;margin-top:22px}.back a{color:#8ba5b9;text-decoration:none;font-size:12px}.back a:hover{color:#d9b15d}
@media(max-width:900px){.portal-body{padding:0 8px 30px}.hero{height:250px;background-size:auto 250px}.portal-main{padding:0 14px 20px}.portal-grid,.about-layout{grid-template-columns:1fr}.rates-panel{border-left:0;border-top:1px solid #755628;padding:20px 0 0}.frame-title{font-size:18px;min-width:70%}.about-copy-wrap{padding:0}.realm-body{min-height:0}}
@media(max-width:560px){.hero{height:180px;background-size:auto 180px}.portal-main{padding:0 8px 16px}.frame-body{padding:27px 17px 20px}.frame-title{font-size:15px;padding:9px 15px;max-width:95%}.population-stat strong{font-size:34px}.population-stat span{font-size:12px}.realm-heading{gap:6px;flex-wrap:wrap}.wow-button{font-size:17px;width:100%}.rates-grid{grid-template-columns:repeat(2,1fr)}.form-panel{margin:25px 12px;padding:30px 20px}}
/* V2.1 — content cards and registration page */
.about-intro{max-width:920px;margin:4px auto 28px;text-align:center;font:15px/1.65 Arial,sans-serif;color:#c4d0d8}.info-grid{display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:16px}.info-tile,.rates-panel{min-height:190px;background:linear-gradient(180deg,rgba(15,25,33,.92),rgba(5,10,14,.96));border:1px solid #3b4a54;box-shadow:inset 0 0 22px #000;padding:22px}.info-tile{display:flex;gap:17px;align-items:flex-start;text-decoration:none;color:inherit;transition:.15s}.tile-icon{flex:0 0 46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid #9b6c26;box-shadow:inset 0 0 0 3px #111,0 0 9px #000;color:#e7b84e;font-weight:bold;font-size:18px;background:#0a1117}.tile-kicker{display:block;font:10px Arial,sans-serif;color:#8295a4;letter-spacing:1.5px;margin-bottom:7px}.info-tile strong{display:block;color:#e8bd5e;font-size:19px;font-weight:normal}.info-tile small{display:block;color:#aebbc4;font:12px/1.5 Arial,sans-serif;margin-top:5px}.info-tile em{display:block;color:#876d3d;font:9px Arial,sans-serif;letter-spacing:1px;margin-top:22px;font-style:normal}.info-tile.disabled{cursor:default;opacity:.88}.rates-panel{border-left:1px solid #765727}.rates-title{text-align:center;font-size:12px}.rates-list{margin-top:12px}.rate-line{display:flex;justify-content:space-between;align-items:center;padding:8px 3px;border-bottom:1px solid #293740;font:12px Arial,sans-serif;color:#98a8b3}.rate-line strong{font:17px Georgia,"Times New Roman",serif;color:#efc35f;font-weight:normal}.register-body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 0,#12324d 0,#07131d 45%,#02070b 82%);color:#d8e3ec;padding:0 18px 55px}.register-shell{max-width:980px;margin:0 auto}.register-hero{display:block;height:260px;background:url('/static/images/fumblecraft-hero.webp') center top/auto 260px no-repeat;filter:drop-shadow(0 12px 20px #000)}.register-frame{max-width:760px;margin:-6px auto 0}.register-content{padding:38px 55px 34px}.register-lead{text-align:center;font:14px/1.6 Arial,sans-serif;color:#aebbc5;margin:0 0 30px}.register-lead strong{color:#e6bc5d;font-family:Georgia,"Times New Roman",serif}.register-content .field{margin-bottom:19px}.register-content .field label{display:block;margin-bottom:7px;color:#b8c7d1;font:11px Arial,sans-serif;letter-spacing:1.4px}.register-content .field input{width:100%;padding:14px;border:1px solid #3a4a55;background:#050b10;color:#edf7ff;font:15px Arial,sans-serif;outline:none;box-shadow:inset 0 2px 7px #000}.register-content .field input:focus{border-color:#a9772f;box-shadow:0 0 0 1px rgba(169,119,47,.25),inset 0 2px 7px #000}.register-button{font-family:Georgia,"Times New Roman",serif;cursor:pointer}.register-button:disabled{opacity:.55;cursor:default}.register-meta{text-align:center;color:#637887;font:9px Arial,sans-serif;letter-spacing:1.7px;margin-top:24px}.back{text-align:center;margin-top:14px}.back a{color:#a57e3e;text-decoration:none;font:11px Arial,sans-serif;letter-spacing:1px}.back a:hover{color:#efc35f}#message{display:none;margin-top:22px;padding:13px 15px;text-align:center;font:14px Arial,sans-serif}#message.success{display:block;color:#a9e9bb;border:1px solid #34764a;background:rgba(30,100,54,.22)}#message.error{display:block;color:#ffb3a9;border:1px solid #8b4037;background:rgba(120,38,30,.23)}
@media(max-width:900px){.info-grid{grid-template-columns:1fr}.register-hero{height:220px;background-size:auto 220px}.register-content{padding:34px 28px 30px}}
@media(max-width:560px){.register-body{padding:0 8px 35px}.register-hero{height:165px;background-size:auto 165px}.register-content{padding:30px 18px 25px}.info-tile,.rates-panel{min-height:0}.about-intro{text-align:left}}
/* V2.2 — Panneaux WoW + boutons de téléchargement */
.info-grid{
gap:20px;
align-items:stretch;
}
.info-tile,
.rates-panel{
position:relative;
min-height:220px;
padding:24px;
overflow:hidden;
background:
radial-gradient(circle at 50% 0,rgba(45,73,91,.18),transparent 55%),
linear-gradient(180deg,#101a21 0%,#070d12 55%,#04080b 100%);
border:1px solid #8a642b;
box-shadow:
0 0 0 2px #101820,
0 0 0 3px #493519,
inset 0 0 0 1px rgba(221,171,77,.16),
inset 0 0 28px #000,
0 7px 16px rgba(0,0,0,.45);
}
.info-tile::before,
.rates-panel::before{
content:"";
position:absolute;
left:8px;
right:8px;
top:8px;
bottom:8px;
pointer-events:none;
border:1px solid rgba(133,105,55,.28);
}
.info-tile::after,
.rates-panel::after{
content:"◆";
position:absolute;
top:-8px;
left:50%;
transform:translateX(-50%);
color:#b47e2d;
font-size:14px;
text-shadow:0 1px 3px #000;
}
.info-tile{
display:flex;
align-items:flex-start;
gap:17px;
}
.info-tile > div:last-child{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
width:100%;
min-height:170px;
}
.tile-icon{
position:relative;
z-index:1;
flex:0 0 50px;
height:50px;
border:1px solid #b27c2c;
box-shadow:
0 0 0 3px #080c0f,
0 0 0 4px #59401d,
inset 0 0 12px #000;
background:radial-gradient(circle,#172936,#080e13 70%);
color:#efc35f;
text-shadow:0 2px 2px #000;
}
.tile-kicker{
color:#b8914b;
}
.info-tile strong{
color:#f0c866;
text-shadow:0 2px 2px #000;
}
.info-tile small{
color:#aebbc4;
}
/* Liens de téléchargement ajoutés dans les cartes */
.info-tile em,
.download-button{
display:flex;
align-items:center;
justify-content:center;
width:100%;
min-height:39px;
margin-top:auto;
padding:9px 12px;
color:#ffe18a;
background:linear-gradient(#8f1515,#5c0707 55%,#380303);
border:1px solid #9a6b29;
box-shadow:
0 0 0 2px #0b0b0b,
0 0 0 3px #6e4c20,
inset 0 0 0 1px #4a0b0b,
inset 0 2px 3px rgba(255,255,255,.12),
0 4px 8px #000;
font:11px Georgia,"Times New Roman",serif;
font-style:normal;
letter-spacing:.8px;
text-align:center;
text-shadow:0 2px 2px #000;
transition:.15s;
}
.info-tile em:hover,
.download-button:hover{
color:#fff0ac;
background:linear-gradient(#ad2020,#710a0a 55%,#470404);
border-color:#d19a3c;
box-shadow:
0 0 0 2px #0b0b0b,
0 0 0 3px #9b702c,
inset 0 0 0 1px #651010,
0 0 13px rgba(191,54,31,.35);
}
.rates-panel{
border-left:1px solid #8a642b;
}
.rates-title{
position:relative;
z-index:1;
color:#e2b958;
font:12px Georgia,"Times New Roman",serif;
letter-spacing:1.8px;
text-shadow:0 2px 2px #000;
}
.rates-list{
position:relative;
z-index:1;
margin-top:17px;
}
.rate-line{
padding:9px 6px;
border-bottom:1px solid #34434e;
}
.rate-line:last-child{
border-bottom:0;
}
.rate-line strong{
color:#f2c75f;
text-shadow:0 2px 2px #000;
}
@media(max-width:900px){
.info-tile,
.rates-panel{
min-height:190px;
}
}
@media(max-width:560px){
.info-grid{
gap:15px;
}
.info-tile,
.rates-panel{
min-height:0;
}
.info-tile > div:last-child{
min-height:155px;
}
}
/* =========================================================
PLAYERBOTS GUIDE
========================================================= */
.playerbots-guide {
max-width: 1100px;
margin: 0 auto;
}
.playerbots-guide .frame-body {
padding: 34px;
}
.guide-intro {
max-width: 800px;
margin: 0 auto 32px;
text-align: center;
}
.guide-intro h1 {
margin: 8px 0 14px;
color: #f0d28a;
font-size: 32px;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow:
0 2px 2px #000,
0 0 10px rgba(191, 132, 44, .25);
}
.guide-intro p {
color: #c9c0aa;
line-height: 1.7;
}
.guide-example {
display: inline-block;
margin-top: 12px;
padding: 12px 18px;
background: #090807;
border: 1px solid #765424;
box-shadow: inset 0 0 8px #000;
}
.guide-example strong {
color: #d7b667;
}
.guide-example code {
margin-left: 8px;
color: #f0d28a;
}
.guide-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0 0 32px;
padding: 16px;
background: rgba(0, 0, 0, .28);
border-top: 1px solid #59421f;
border-bottom: 1px solid #59421f;
}
.guide-nav a {
padding: 8px 12px;
color: #cfae67;
font-size: 12px;
font-weight: 700;
text-decoration: none;
letter-spacing: .5px;
}
.guide-nav a:hover {
color: #fff0ac;
text-shadow: 0 0 7px rgba(255, 208, 94, .45);
}
.guide-section {
margin: 18px 0;
padding: 22px 26px;
background:
linear-gradient(
180deg,
rgba(31, 27, 21, .92),
rgba(12, 11, 9, .96)
);
border: 1px solid #59421f;
box-shadow:
inset 0 0 0 1px #15120d,
inset 0 0 18px rgba(0, 0, 0, .65);
}
.guide-section h2 {
margin: 0 0 10px;
padding-bottom: 8px;
color: #e0bd6d;
font-size: 20px;
text-transform: uppercase;
border-bottom: 1px solid #4b381d;
text-shadow: 0 2px 2px #000;
}
.guide-section p {
margin: 0;
color: #bdb5a5;
line-height: 1.6;
}
.guide-back {
display: flex;
justify-content: center;
margin-top: 32px;
}
.guide-back .wow-button {
width: min(360px, 100%);
}
@media (max-width: 700px) {
.playerbots-guide .frame-body {
padding: 22px 14px;
}
.guide-intro h1 {
font-size: 25px;
}
.guide-nav {
flex-direction: column;
text-align: center;
}
.guide-section {
padding: 18px;
}
}
/* =========================================================
PLAYERBOTS — COMMANDES
========================================================= */
.guide-section-intro {
margin-bottom: 18px !important;
}
.command-list {
margin-top: 18px;
border-top: 1px solid #493719;
}
.command-row {
display: grid;
grid-template-columns: 170px 1fr;
gap: 22px;
padding: 16px 12px;
border-bottom: 1px solid #493719;
}
.command-name {
display: flex;
align-items: center;
}
.command-name code {
display: inline-block;
min-width: 110px;
padding: 7px 12px;
color: #f0d28a;
background: #080706;
border: 1px solid #765424;
box-shadow:
inset 0 0 7px #000,
0 0 0 1px #17120b;
font-size: 14px;
font-weight: 700;
text-align: center;
}
.command-description {
display: flex;
flex-direction: column;
gap: 4px;
}
.command-description strong {
color: #d7b667;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .4px;
}
.command-description span {
color: #aaa292;
font-size: 13px;
line-height: 1.5;
}
@media (max-width: 700px) {
.command-row {
grid-template-columns: 1fr;
gap: 9px;
}
.command-name code {
min-width: 0;
}
}
/* =========================================================
PLAYERBOTS — ADDONS
========================================================= */
.addon-guide-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 22px;
}
.addon-guide-card {
position: relative;
padding: 20px;
background:
linear-gradient(
180deg,
rgba(31, 27, 21, .95),
rgba(10, 9, 8, .98)
);
border: 1px solid #765424;
box-shadow:
inset 0 0 0 1px #17120b,
inset 0 0 16px rgba(0, 0, 0, .7);
text-align: center;
}
.addon-guide-card strong {
display: block;
margin: 8px 0 10px;
color: #e0bd6d;
font-size: 17px;
text-transform: uppercase;
text-shadow:
0 2px 2px #000,
0 0 8px rgba(191, 132, 44, .25);
}
.addon-guide-card p {
margin: 0;
color: #aaa292;
font-size: 13px;
line-height: 1.6;
}
.guide-download {
display: flex;
justify-content: center;
margin-top: 24px;
}
.guide-download .download-button {
display: inline-block;
width: auto;
padding: 10px 24px;
text-decoration: none;
}
@media (max-width: 800px) {
.addon-guide-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
ABOUT — PLAYERBOTS GUIDE
========================================================= */
.about-guide {
display: flex;
justify-content: center;
margin: -4px 0 28px;
}
.about-guide .download-button {
display: inline-block;
width: auto;
padding: 10px 28px;
text-decoration: none;
}
/* =========================================================
REALM — WOTLK BADGE
========================================================= */
.realm-version {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 8px;
color: #bfe9ff;
background:
linear-gradient(
180deg,
rgba(25, 77, 105, .9),
rgba(8, 34, 51, .95)
);
border: 1px solid #477f9d;
box-shadow:
inset 0 0 0 1px #0b2533,
0 0 7px rgba(71, 160, 205, .18);
font-size: 10px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
letter-spacing: .6px;
}