/* ==========================================================================
🏰 PORTATOUT — CONFIGURATIONS STRUCTURELLES GLOBALES (PARTIE 1)
========================================================================== */

{
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* Force l'ossature à occuper 100% de la hauteur de l'écran */
html, body {
height: 100%;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #1a1a1a;
color: #ffffff;
display: flex;
flex-direction: column;
}

/* --- Header & Navigation --- */
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2a2a2a;
padding: 1rem 2rem;
position: relative;
border-bottom: 3px solid #ffcc00;
flex-shrink: 0;
}

.logo a {
color: #ffcc00;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
}

.nav-menu ul {
display: flex;
list-style: none;
gap: 1.5rem;
align-items: center;
}

.nav-menu a {
color: #fff;
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}

.nav-menu a:hover {
color: #ffcc00;
}

.btn-auth {
background-color: #ffcc00;
color: #1a1a1a !important;
padding: 0.5rem 1rem;
border-radius: 4px;
font-weight: bold;
}

.btn-auth:hover {
background-color: #ffe066;
}

.menu-toggle, .menu-burger {
display: none;
}

/* ==========================================================================
🏰 LE CONTENEUR CENTRAL (STICKY) & LE FOOTER
========================================================================== */
.container {
padding: 2rem;
flex: 1 0 auto;
width: 100%;
}

.main-footer {
background-color: #2a2a2a;
text-align: center;
padding: 1rem;
font-size: 0.9rem;
color: #aaa;
border-top: 1px solid #333;
flex-shrink: 0;
margin-top: auto;
}

/* ==========================================================================
📱 RESPONSIF MOBILE DE LA STRUCTURE (Écrans inférieurs à 768px)
========================================================================== */
@media (max-width: 768px) {
.menu-burger {
display: flex;
flex-direction: column;
gap: 5px;
cursor: pointer;
}

.menu-burger span {
    width: 25px;
    height: 3px;
    background-color: #fff;
    transition: 0.3s;
}

.nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #2a2a2a;
    border-bottom: 3px solid #ffcc00;
    z-index: 100;
}

.nav-menu ul {
    flex-direction: column;
    padding: 1rem 0;
    gap: 0;
    align-items: center;
}

.nav-menu li {
    width: 100%;
    text-align: center;
}

.nav-menu a {
    display: block;
    padding: 1rem;
    width: 100%;
}

.menu-toggle:checked ~ .nav-menu {
    display: block;
}

.arcade-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
}

.inventory-grid-equipped, 
.inventory-grid-bag {
    grid-template-columns: 1fr !important;
}


}

/* ==========================================================================
📰 STYLES DE LA PAGE D'ACCUEIL (INDEX.PHP)
========================================================================== */
.ephemeride-box {
background-color: #222;
border-left: 5px solid #ffcc00;
padding: 1.5rem;
margin-bottom: 2rem;
border-radius: 4px;
}

.ephemeride-box h2 {
color: #ffcc00;
margin-bottom: 0.5rem;
}

.ephemeride-box .saint {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}

.ephemeride-box .dicton {
font-style: italic;
color: #bbb;
}

.news-section h2 {
margin-bottom: 1rem;
border-bottom: 2px solid #333;
padding-bottom: 0.5rem;
}

.news-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}

.news-card {
background-color: #2a2a2a;
padding: 1.25rem;
border-radius: 4px;
border: 1px solid #444;
}

.news-card h3 {
color: #ffcc00;
margin-bottom: 0.25rem;
}

.news-card small {
color: #888;
display: block;
margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
.news-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}

/* ==========================================================================
🕹️ JOYSTICK EN VRAIE CROIX RÉTRO (CONTRÔLES TACTILES D-PAD)
========================================================================== */
.mobile-controls {
display: block;
position: absolute;
bottom: 15px;
left: 15px;
z-index: 100;
}

.dpad-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}

.pad-btn {
width: 44px;
height: 44px;
background: #ffcc00;
color: #1a1a1a;
border: 2px solid #1a1a1a;
border-radius: 6px;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}

.pad-btn:active {
background: #ffa500;
color: #fff;
}

.pad-center {
width: 44px;
height: 44px;
}

/* ==========================================================================
🧱 COMPOSANTS UNIFORMISÉS D'ARÈNE MINI-JEUX & HUB CENTRALISÉ (PARTIE 2)
========================================================================== */
.hub-body {
background-color: #111111;
color: #ffffff;
min-height: 85vh;
padding: 2rem 1.5rem;
box-sizing: border-box;
}

.hub-container {
max-width: 1100px;
margin: 0 auto;
text-align: center;
}

.hub-title {
color: #ffcc00;
font-size: 2.5rem;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 1px;
}

.hub-subtitle {
color: #aaaaaa;
font-size: 1.1rem;
margin-bottom: 3rem;
}

.arcade-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
gap: 30px !important;
margin-bottom: 2rem;
}

.arcade-card {
background: #1a1a24 !important;
border: 2px solid #2c2c35 !important;
border-radius: 12px !important;
padding: 25px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
box-sizing: border-box;
}

.arcade-card:hover {
border-color: #ffcc00 !important;
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(255, 204, 0, 0.15);
}

.arcade-card.card-eligible-active {
border-color: #ffcc00 !important;
}

.arcade-icon {
font-size: 3rem;
margin-bottom: 15px;
}

.game-title {
color: #ffcc00;
font-size: 1.4rem;
margin: 0 0 10px 0;
font-weight: bold;
}

.game-desc {
color: #cccccc;
font-size: 0.9rem;
line-height: 1.5;
text-align: center;
margin-bottom: 20px;
}

.game-xp-badge {
position: absolute;
top: 15px;
right: 15px;
background: rgba(255, 204, 0, 0.15);
border: 1px solid #ffcc00;
color: #ffcc00;
padding: 4px 10px;
font-size: 0.75rem;
font-weight: bold;
border-radius: 4px;
text-transform: uppercase;
}

/* --- Roue Impériale --- */
.wheel-available-badge {
position: absolute;
top: 15px;
left: 15px;
background: #ef4444;
color: #ffffff;
font-size: 10px;
font-weight: bold;
padding: 4px 10px;
border-radius: 20px;
box-shadow: 0 0 10px #ef4444;
text-transform: uppercase;
animation: pulse_badge 1.5s infinite;
}

@keyframes pulse_badge {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}

.roue-canvas-wrapper {
position: relative;
display: inline-block;
margin: 10px 0 20px 0;
width: 190px;
height: 190px;
}

#roueCanvas {
border: 3px solid #ffcc00;
border-radius: 50%;
background: #111111;
}

#aiguilleRoue {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 18px solid #ef4444;
z-index: 10;
}

#messageConsoleRoue {
font-size: 0.85rem;
font-weight: bold;
color: #ffcc00;
margin-bottom: 15px;
min-height: 18px;
}

/* ==========================================================================
🧱 COMPOSANTS UNIFORMISÉS DU MODULE TAVERNE & COMMU - PORTATOUT
========================================================================== */
.taverne-container {
max-width: 800px;
margin: 2rem auto;
background: #2a2a2a;
padding: 2rem;
border-radius: 8px;
border: 1px solid #444;
box-sizing: border-box;
}

.rgpd-box {
text-align: center;
padding: 2rem 1rem;
}

.rgpd-box h2 {
color: #ffcc00;
margin-bottom: 1rem;
margin-top: 0;
}

.rgpd-box p {
margin-bottom: 1.5rem;
line-height: 1.6;
color: #fff;
}

.chat-window {
background: #1a1a1a;
height: 400px;
overflow-y: auto;
padding: 1rem;
border-radius: 4px;
border: 1px solid #555;
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
box-sizing: border-box;
}

.chat-message {
border-bottom: 1px solid #333;
padding-bottom: 0.5rem;
line-height: 1.4;
}

.chat-time {
color: #888;
font-size: 0.8rem;
margin-right: 6px;
}

.chat-text {
color: #fff;
margin-left: 5px;
}

.chat-empty {
color: #666;
text-align: center;
margin-top: 150px;
font-style: italic;
}

.chat-form-inline {
display: flex;
gap: 1rem;
}

.chat-input-text {
flex-grow: 1;
padding: 0.8rem;
background: #1a1a1a;
border: 1px solid #555;
color: #ffffff;
border-radius: 4px;
font-size: 1rem;
}

.chat-input-text[disabled] {
opacity: 0.5;
cursor: not-allowed;
}

.role-admin { color: #ff3333; }
.role-mod { color: #33ccff; }
.role-user { color: #ffcc00; }

/* ==========================================================================
🧱 COMPOSANTS UNIFORMISÉS DU MODULE INVENTAIRE & ARSENAL - PORTATOUT
========================================================================== */
.inventory-container {
max-width: 900px;
margin: 2rem auto;
background: #2a2a2a;
padding: 2rem;
border-radius: 8px;
border: 1px solid #444;
color: #fff;
box-sizing: border-box;
}

.inventory-header {
text-align: center;
margin-bottom: 2rem;
}

.inventory-header h2 {
color: #ffcc00;
font-size: 2rem;
margin-bottom: 0.5rem;
margin-top: 0;
}

.inventory-header p {
color: #aaa;
margin: 0;
}

.inventory-container h3 {
color: #ffcc00;
border-bottom: 1px solid #444;
padding-bottom: 0.5rem;
margin-top: 2rem;
}

.inventory-grid-equipped,
.inventory-grid-bag {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.inventory-card {
background: #1a1a1a;
border: 1px solid #333;
padding: 1rem;
border-radius: 6px;
display: flex;
gap: 1rem;
align-items: center;
box-sizing: border-box;
}

.inventory-card.equipped {
background: rgba(255, 204, 0, 0.04);
border: 1px solid #ffcc00;
}

.item-icon {
font-size: 2.3rem;
line-height: 1;
flex-shrink: 0;
}

.item-details {
flex-grow: 1;
min-width: 0;
}

.item-details h4 {
margin: 0;
color: #fff;
font-size: 1.05rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.inventory-card.equipped .item-details h4 {
color: #ffcc00;
}

.item-slot {
color: #888;
font-size: 0.75rem;
text-transform: uppercase;
display: block;
margin-top: 2px;
}

.inventory-card.equipped .item-slot {
color: #ccaa33;
}

.item-desc {
margin: 4px 0 0 0;
color: #ccc;
font-size: 0.85rem;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.inventory-empty-dashed {
color: #aaa;
font-style: italic;
grid-column: 1 / -1;
background: #1a1a1a;
padding: 1.5rem;
border-radius: 4px;
border: 1px dashed #555;
text-align: center;
margin: 0;
}

/* ==========================================================================
🌌 COMPOSANTS UNIFORMISÉS DE L'ARÈNE SPATIALE (SPACE.PHP) — PORTATOUT
========================================================================== */
.space-body {
background-color: #111111; color: #fff; padding: 2rem 1.5rem;
display: flex; flex-direction: column; align-items: center; justify-content: center;
box-sizing: border-box; font-family: sans-serif; min-height: 85vh;
}
.space-back-navigation { width: 100%; max-width: 800px; text-align: left; margin-bottom: 1rem; }
.space-top-header { width: 100%; max-width: 500px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.space-title-lbl { font-size: 1.4rem; font-weight: bold; color: #ffcc00; text-align: center; width: 100%; }
.space-dashboard { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 500px; margin-bottom: 15px; }
.space-stat-card { background: #1a1a24; border: 2px solid #ffcc00; border-radius: 8px; padding: 12px 20px; font-size: 0.9rem; line-height: 1.5; display: flex; justify-content: space-around; align-items: center; }
.highlight-blue, .highlight-yellow { color: #ffcc00; font-weight: bold; }
.space-divider-line { border-left: 1px solid #444; height: 18px; margin: 0 10px; }
.space-lives-lbl { color: #ef4444; font-weight: bold; }

.game-container-space { position: relative; background: #000; border: 3px solid #ffcc00; border-radius: 8px; box-shadow: 0 0 35px rgba(255, 204, 0, 0.15); overflow: hidden; width: 100%; max-width: 800px; aspect-ratio: 16 / 9; margin: 0 auto; box-sizing: border-box; }
#spaceCanvas { display: block; width: 100%; height: 100%; background-color: #000; }

.overlay-space { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.92); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; padding: 10px; box-sizing: border-box; }
.overlay-space h2 { color: #ffcc00; font-size: 1.8rem; margin: 0 0 5px 0; text-shadow: 0 0 10px rgba(255, 204, 0, 0.6); font-weight: bold; }
.overlay-space p { font-size: 0.95rem; color: #ccc; margin: 0 0 20px 0; text-align: center; max-width: 90%; line-height: 1.4; }
.action-btn-space { background: linear-gradient(135deg, #ffcc00 0%, #b39200 100%); color: #1a1a1a; border: none; padding: 12px 28px; font-size: 14px; font-weight: bold; border-radius: 4px; cursor: pointer; box-shadow: 0 4px 15px rgba(255, 204, 0, 0.2); text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s; -webkit-appearance: none; }
.action-btn-space:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255, 204, 0, 0.4); }

.space-mobile-controls { display: none; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 800px; margin: 15px auto 5px auto; box-sizing: border-box; }
@media (max-width: 768px) {
.space-mobile-controls { display: grid; }
.game-container-space { border-width: 2px; }
}
.ctrl-btn-space { background: #111116; border: 1px solid #2c2c35; color: #fff; padding: 16px 0; border-radius: 6px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.1s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; }
.ctrl-btn-space:active { background: #222; border-color: #ffcc00; color: #ffcc00; transform: scale(0.95); }
.btn-fire-space { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); border-color: #b91c1c; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }
.btn-fire-space:active { background: #b91c1c; border-color: #ef4444; color: #fff; }
.status-msg-space { font-weight: bold; font-size: 13px; margin-top: 10px; min-height: 18px; text-align: center; color: #ffcc00; }

/* ==========================================================================
⚜️ ACCENTS ET BOUTONS GOTHIQUE ET SÉMANTIQUE GÉNÉRAUX EXTENSIBLES
========================================================================== */
.btn-play,
.btn-royal-submit,
.btn-royal-send {
background: linear-gradient(135deg, #ffcc00 0%, #b39200 100%) !important;
color: #1a1a1a !important;
text-decoration: none !important;
padding: 10px 24px !important;
font-size: 0.95rem !important;
font-weight: bold !important;
border-radius: 4px !important;
transition: opacity 0.15s;
width: 80% !important;
text-align: center !important;
box-sizing: border-box;
border: none !important;
cursor: pointer !important;
display: inline-block !important;
-webkit-appearance: none;
}

.btn-royal-send {
width: auto !important;
padding: 0.8rem 1.5rem !important;
font-size: 1rem !important;
}

.btn-royal-submit {
width: auto !important;
padding: 0.8rem 2rem !important;
font-size: 1.1rem !important;
}

.btn-royal-submit:hover {
background: #ffe066;
}

.btn-royal-equip {
background: #ffcc00;
color: #1a1a1a;
border: none;
padding: 0.4rem 0.8rem;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
transition: 0.2s;
-webkit-appearance: none;
white-space: nowrap;
}

.btn-royal-equip:hover {
background: #ffe066;
}

.btn-royal-unequip {
background: #444;
color: #fff;
border: 1px solid #555;
padding: 0.4rem 0.8rem;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
transition: 0.2s;
-webkit-appearance: none;
white-space: nowrap;
}

.btn-royal-unequip:hover {
background: #555;
border-color: #666;
}

.btn-play:hover:not(:disabled),
.btn-royal-submit:hover,
.btn-royal-send:hover:not(:disabled),
.btn-royal-equip:hover,
.btn-royal-unequip:hover {
opacity: 0.9;
box-shadow: 0 0 8px rgba(255, 204, 0, 0.3);
}

.btn-play:disabled,
.btn-play.btn-wheel-disabled,
.btn-royal-send:disabled {
background: #44444a !important;
color: #888888 !important;
cursor: not-allowed !important;
border: 1px solid #2c2c35 !important;
background-image: none !important;
box-shadow: none !important;
opacity: 1 !important;
}

.btn-play.btn-auth-required {
background: #ff3333 !important;
color: #ffffff !important;
background-image: none !important;
}

.alert-box-success {
background: #115511;
color: #fff;
padding: 0.8rem;
margin-bottom: 1.5rem;
border-radius: 4px;
font-weight: bold;
border-left: 4px solid #22aa22;
text-align: center;
}

.alert-box-error {
background: #661111;
color: #fff;
padding: 0.8rem;
margin-bottom: 1rem;
border-radius: 4px;
font-weight: bold;
border-left: 4px solid #ff3333;
}

.warning-login {
background: rgba(255, 51, 51, 0.15);
border: 1px solid #ff3333;
color: #ff9999;
padding: 1rem;
border-radius: 6px;
margin-bottom: 2rem;
font-size: 0.95rem;
text-align: left;
}

.form-no-margin { margin: 0; flex-shrink: 0; }
.text-gold { color: #ffcc00; }
.text-center { text-align: center; }
.font-monospace { font-family: monospace; }

/* ==========================================================================
🎯 CORRECTION DU BOUTON DE RETOUR D'ARÈNE (SPACE.PHP)
========================================================================== */
.space-back-navigation {
width: 100%;
max-width: 800px;
text-align: left;
margin-bottom: 1.5rem;
}

.space-back-navigation a {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 204, 0, 0.1);
color: #ffcc00 !important;
text-decoration: none;
font-weight: bold;
font-size: 0.95rem;
padding: 0.6rem 1.2rem;
border: 1px solid rgba(255, 204, 0, 0.4);
border-radius: 4px;
transition: all 0.2s ease-in-out;
}

.space-back-navigation a:hover {
background: #ffcc00;
color: #1a1a1a !important;
box-shadow: 0 0 10px rgba(255, 204, 0, 0.4);
transform: translateX(-3px);
}

/* ==========================================================================
THÈMES SAISONNIERS, ÉVÉNEMENTS & HEADER UI
========================================================================== */
body.theme-automne { background: #1c1107; color: #f97316; }
body.theme-automne .main-header { border-bottom: 2px solid #7c2d12; background: #291405; }
body.theme-hiver { background: #0b1329; color: #38bdf8; }
body.theme-hiver .main-header { border-bottom: 2px solid #1e3a8a; background: #0f172a; }
body.theme-printemps { background: #081c10; color: #4ade80; }
body.theme-printemps .main-header { border-bottom: 2px solid #15803d; background: #0d2e1a; }
body.theme-ete { background: #1a1705; color: #facc15; }
body.theme-ete .main-header { border-bottom: 2px solid #a16207; background: #2e2808; }

/* Surcharges Prio */
body.event-halloween { background: radial-gradient(circle at top, #4c0519 0%, #1a0505 100%) !important; color: #f97316; }
body.event-halloween .main-header { border-bottom: 2px solid #9f1239 !important; }
body.event-noel { background: radial-gradient(circle at top, #022c22 0%, #064e3b 100%) !important; }
body.event-noel .main-header { border-bottom: 2px solid #f87171 !important; }

body.festa-anniversaire { background: radial-gradient(circle at top, #2e1065 0%, #090514 100%) !important; }
body.festa-anniversaire .main-header { border-bottom: 2px solid #eab308 !important; box-shadow: 0 0 15px rgba(234,179,8,0.3); }

/* Styles UI (Menus déroulants) */
.dropdown-menu { position: relative; display: inline-block; }
.dropdown-menu .submenu {
display: none; position: absolute; top: 100%; left: 0;
background: #1a1a1e; border: 1px solid #444; padding: 0.5rem 0;
border-radius: 6px; list-style: none; min-width: 210px;
box-shadow: 0 4px 12px rgba(0,0,0,0.7); z-index: 1000;
}
.dropdown-menu .submenu li a {
color: #ddd; text-decoration: none; display: block;
padding: 0.5rem 1rem; font-size: 0.9rem; transition: background 0.2s, color 0.2s;
}
.dropdown-menu .submenu li a:hover { background: #ffcc00; color: #111; }
.dropdown-menu:hover .submenu, .dropdown-menu.active .submenu { display: block; }

/* BARRE DE PROGRESSION XP */
.xp-progress-bar {
width: 100px; height: 6px; background: #333; border-radius: 3px;
display: inline-block; vertical-align: middle; margin-left: 10px;
overflow: hidden; position: relative;
}
.xp-progress-fill {
height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24);
border-radius: 3px; transition: width 0.4s ease-out;
}

/* =======================================================
PORTATOUT - STYLES DE L'AUBERGE (ACCUEIL)
======================================================= */
:root {
--or-royal: #f59e0b;
--or-eclat: #fbbf24;
--fond-carte: #111827;
--bordure-or: rgba(245, 158, 11, 0.35);
}
.royaume-container {
max-width: 1180px;
margin: 1.5rem auto 3rem auto;
padding: 0 16px;
font-family: system-ui, -apple-system, sans-serif;
color: #e5e7eb;
}
.hero-royaume {
background: radial-gradient(circle at 50% 20%, #1e293b 0%, #0b0f19 100%);
border: 1px solid var(--bordure-or);
border-radius: 12px;
padding: 40px 20px;
text-align: center;
box-shadow: 0 15px 40px rgba(0,0,0,0.8), inset 0 0 60px rgba(245, 158, 11, 0.05);
position: relative;
overflow: hidden;
margin-bottom: 2rem;
}
.hero-royaume::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 4px;
background: linear-gradient(90deg, transparent, var(--or-royal), transparent);
}
.titre-royaume {
font-size: 2.8rem; font-weight: 900; letter-spacing: 2px;
text-transform: uppercase; color: #fff; margin: 0;
text-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
}
.sous-titre-royaume {
color: #94a3b8; font-size: 1.15rem; margin: 10px auto 25px auto;
max-width: 650px; line-height: 1.6;
}
.ruban-ephem-direct {
display: inline-flex; align-items: center; gap: 15px;
background: rgba(17, 24, 39, 0.9); border: 1px solid var(--or-royal);
border-radius: 50px; padding: 10px 24px; color: #fff;
text-decoration: none; font-size: 0.95rem;
box-shadow: 0 0 25px rgba(245, 158, 11, 0.25); transition: all 0.25s ease;
}
.ruban-ephem-direct:hover {
transform: translateY(-2px) scale(1.02); background: #1f2937;
box-shadow: 0 0 35px rgba(245, 158, 11, 0.45);
}
.card-installer-app {
background: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
border: 1px solid #10b981; border-radius: 10px; padding: 18px 24px;
margin-bottom: 2rem; display: flex; justify-content: space-between;
align-items: center; flex-wrap: wrap; gap: 15px;
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.2);
}
.btn-installer-declic {
background: #10b981; color: #022c22; font-weight: 900;
padding: 10px 22px; border-radius: 6px; font-size: 0.95rem;
cursor: pointer; border: none; display: inline-flex;
align-items: center; gap: 8px; box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
transition: all 0.2s ease;
}
.btn-installer-declic:hover { background: #34d399; transform: scale(1.03); }
.card-almanach-appel {
background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
border: 2px solid #6366f1; border-radius: 10px; padding: 24px;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 20px; margin-bottom: 2.5rem; text-decoration: none;
color: #fff; box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
transition: all 0.2s ease;
}
.card-almanach-appel:hover {
transform: translateY(-3px); border-color: var(--or-royal);
box-shadow: 0 12px 35px rgba(245, 158, 11, 0.3);
}
.grille-royaume {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px; margin-bottom: 2.5rem;
}
.carte-royaume {
background: var(--fond-carte); border: 1px solid #30363d;
border-radius: 10px; padding: 22px; display: flex; flex-direction: column;
justify-content: space-between; box-shadow: 0 6px 18px rgba(0,0,0,0.5);
transition: transform 0.2s ease, border-color 0.2s ease;
}
.carte-royaume:hover { transform: translateY(-4px); border-color: var(--or-royal); }
.carte-royaume h3 { margin: 0 0 10px 0; color: var(--or-royal); font-size: 1.25rem; display: flex; align-items: center; gap: 8px; }
.carte-royaume p { color: #cbd5e1; font-size: 0.92rem; line-height: 1.6; margin: 0 0 15px 0; }
.btn-lien-action {
display: inline-block; background: #1f2937; color: var(--or-eclat);
font-weight: bold; font-size: 0.88rem; padding: 8px 16px;
border-radius: 6px; text-decoration: none; border: 1px solid rgba(245, 158, 11, 0.4);
align-self: flex-start; transition: background 0.2s ease;
}
.btn-lien-action:hover { background: var(--or-royal); color: #111; }
.grivoiserie-box {
background: #1c1408; border-left: 4px solid var(--or-royal);
padding: 14px 18px; border-radius: 6px; margin-bottom: 2rem;
color: #fde68a; font-style: italic; font-size: 0.95rem;
}

/* =======================================================
PORTATOUT - MODULE MÉTÉO (CHRONIQUES CÉLESTES)
======================================================= */
.meteo-box { max-width: 820px; margin: 2.5rem auto; background: #19130e; border: 2px solid #b45309; border-radius: 12px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.7), inset 0 0 15px rgba(180, 83, 9, 0.2); color: #fff; font-family: monospace; text-align: center; }
.meteo-header { border-bottom: 1px solid #78350f; padding-bottom: 1.2rem; margin-bottom: 1.5rem; }
.meteo-header h2 { color: #ffcc00; margin: 0 0 5px 0; font-size: 1.8rem; letter-spacing: 1px; }
.select-domaine { background: #090604; color: #ffcc00; border: 1px solid #b45309; padding: 8px 16px; border-radius: 6px; font-family: monospace; font-size: 1rem; cursor: pointer; margin-top: 10px; }
.carte-actuelle { background: #0d0906; border: 1px solid #b45309; border-radius: 8px; padding: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; margin-bottom: 2rem; }
.meteo-icone-hero { font-size: 4.5rem; line-height: 1; }
.meteo-temp-hero { font-size: 3rem; color: #ffcc00; font-weight: bold; }
.meteo-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; width: 100%; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px dashed #78350f; }
.detail-item label { font-size: 0.8rem; color: #a8a29e; display: block; text-transform: uppercase; }
.detail-item span { font-size: 1.2rem; color: #fef08a; font-weight: bold; }
.previsions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; margin-top: 1rem; }
.jour-card { background: #0d0906; border: 1px solid #451a03; border-radius: 6px; padding: 10px; }
.jour-card:hover { border-color: #ffcc00; }
.jour-titre { font-size: 0.85rem; color: #a8a29e; margin-bottom: 5px; }

/* =======================================================
PORTATOUT - MODULE DONJON (ARENE 2.5D & CHAT)
======================================================= */
.donjon-wrapper { background-color: #0d0d12; color: #eee; font-family: monospace; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 20px 10px; min-height: 80vh; border-radius: 8px; margin-bottom: 2rem; box-shadow: 0 0 30px rgba(0,0,0,0.8); }
.donjon-wrapper h1 { font-size: 1.5rem; margin-bottom: 15px; color: #e5c158; text-shadow: 0 2px 4px rgba(0,0,0,0.8); font-family: 'Georgia', serif; text-transform: uppercase; }
#game-container { border: 4px solid #3a3226; box-shadow: 0 10px 30px rgba(0,0,0,0.9), inset 0 0 15px rgba(0,0,0,0.8); background: #000; position: relative; }
#donjonCanvas { display: block; image-rendering: pixelated; outline: none; }
.debug-bar { width: 800px; margin-top: 4px; font-size: 0.85rem; color: #2ecc71; display: flex; justify-content: space-between; }
#chat-panel { width: 800px; margin-top: 15px; background: #14141e; border: 2px solid #3a3226; border-radius: 4px; display: flex; flex-direction: column; box-shadow: 0 4px 15px rgba(0,0,0,0.7); }
#chat-header { background: #241e17; padding: 6px 10px; font-size: 0.85rem; font-weight: bold; color: #e5c158; display: flex; justify-content: space-between; border-bottom: 1px solid #3a3226; }
#chat-messages { height: 120px; overflow-y: auto; padding: 8px; font-size: 0.85rem; line-height: 1.4; display: flex; flex-direction: column; gap: 4px; background: #09090f; }
.msg-system { color: #3498db; font-style: italic; }
.msg-player { color: #ecf0f1; }
.msg-author { color: #e67e22; font-weight: bold; }
#chat-form { display: flex; border-top: 1px solid #3a3226; background: #181824; }
#chat-pseudo { width: 140px; padding: 8px; background: #111118; border: none; border-right: 1px solid #3a3226; color: #f39c12; font-family: monospace; font-size: 0.85rem; }
#chat-input { flex: 1; padding: 8px 10px; background: #111118; border: none; color: #fff; font-family: monospace; font-size: 0.85rem; outline: none; }
#chat-btn { background: #3a3226; color: #e5c158; border: none; padding: 0 16px; font-family: monospace; font-weight: bold; cursor: pointer; font-size: 0.85rem; }
#chat-btn:hover { background: #544634; }
.almanach-gazette-container {
max-width: 1000px;
margin: 0 auto;
font-family: 'Georgia', serif;
color: #2c2c2c;
background: #fdfbf7;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.gazette-header {
text-align: center;
border-bottom: 2px solid #333;
margin-bottom: 25px;
padding-bottom: 10px;
}

.gazette-header h2 {
font-size: 2rem;
margin: 0;
color: #1a1a1a;
letter-spacing: 1px;
}

.gazette-subtitle {
font-style: italic;
color: #666;
font-size: 0.95rem;
}

.gazette-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}

.gazette-card {
background: #ffffff;
border: 1px solid #e3dec9;
border-left: 5px solid #8c7b65;
border-radius: 6px;
padding: 18px;
position: relative;
box-shadow: 0 2px 5px rgba(0,0,0,0.02);
transition: transform 0.2s ease;
}

.gazette-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

/* Couleurs spécifiques par catégorie */
.gazette-card.loi { border-left-color: #d97706; }
.gazette-card.record { border-left-color: #059669; }
.gazette-card.people { border-left-color: #7c3aed; }
.gazette-card.histoire { border-left-color: #b45309; }
.gazette-card.tech { border-left-color: #2563eb; }

.card-icon {
font-size: 1.8rem;
float: right;
opacity: 0.85;
}

.card-tag {
font-family: 'sans-serif';
font-size: 0.7rem;
font-weight: bold;
letter-spacing: 0.5px;
color: #555;
background: #f3f0e6;
padding: 3px 6px;
border-radius: 3px;
}

.card-year {
font-family: 'sans-serif';
font-size: 0.75rem;
color: #888;
margin-left: 8px;
}

.card-title {
font-size: 1.15rem;
margin: 10px 0 8px 0;
color: #1f1f1f;
}

.card-main-text {
font-size: 0.92rem;
line-height: 1.5;
color: #444;
margin-bottom: 12px;
}

.card-secondary-text {
font-size: 0.85rem;
font-style: italic;
background: #faf8f2;
border-left: 3px solid #dcd6c5;
margin: 0;
padding: 8px 12px;
color: #665;
border-radius: 0 4px 4px 0;
}

/* =========================================
L'ARMADA DU ROYAUME (Mini-Jeu)
========================================= */
.armada-body { color: #fff; padding: 2rem; max-width: 950px; margin: 0 auto; font-family: 'Segoe UI', Tahoma, sans-serif; }
.armada-header { text-align: center; margin-bottom: 2rem; }
.armada-title { color: var(--or-royal, #ffcc00); font-family: 'Georgia', serif; font-size: 2.8rem; margin-bottom: 0.5rem; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }
.armada-subtitle { color: #94a3b8; font-size: 1.1rem; }
.armada-card { background: var(--carte-fond, #13131a); border: 3px solid var(--carte-bordure, #22222d); border-radius: 12px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); }

.armada-workspace { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; margin-top: 20px; align-items: flex-start; }
.armada-chantier { background: #181b26; padding: 25px; border-radius: 8px; border: 1px solid #283347; min-width: 280px; }
.armada-chantier h3 { color: var(--or-royal, #ffcc00); margin-top: 0; font-family: 'Georgia', serif; border-bottom: 1px solid #334155; padding-bottom: 15px; margin-bottom: 20px; font-size: 1.4rem; text-align: center;}

.navire-item { background: #1e293b; padding: 15px; margin-bottom: 12px; border-radius: 6px; cursor: pointer; font-weight: bold; border: 2px solid transparent; transition: 0.2s; color: #cbd5e1; text-align: center; font-size: 1.1rem; }
.navire-item:hover:not(.place) { background: #334155; transform: scale(1.02); }
.navire-item.actif { border-color: var(--or-royal, #ffcc00); background: #334155; color: var(--or-royal, #ffcc00); box-shadow: 0 0 15px rgba(255,204,0,0.2); }
.navire-item.place { background: #0f172a; color: #475569; text-decoration: line-through; cursor: not-allowed; border-color: #0f172a; }

.armada-grille { display: grid; grid-template-columns: repeat(10, 45px); grid-template-rows: repeat(10, 45px); gap: 2px; background: #0f172a; padding: 6px; border-radius: 6px; border: 4px solid #334155; box-shadow: inset 0 0 20px rgba(0,0,0,0.8); }
.cellule-eau { background: #0369a1; width: 45px; height: 45px; border-radius: 3px; cursor: crosshair; transition: background 0.1s; }
.cellule-eau:hover { background: #0ea5e9; }
.hover-valide { background: #22c55e !important; }
.hover-invalide { background: #ef4444 !important; }
.navire-pose { background: #8b5cf6 !important; box-shadow: inset 0 0 15px rgba(0,0,0,0.6); border: 1px solid #a78bfa; }

.btn-royal { background: var(--or-royal, #ffcc00); color: #111; border: none; padding: 15px 30px; font-weight: bold; font-size: 1.2rem; border-radius: 6px; cursor: pointer; text-transform: uppercase; transition: transform 0.2s, background 0.2s; box-shadow: 0 4px 15px rgba(255, 204, 0, 0.4); display: inline-block; text-decoration: none;}
.btn-royal:hover { transform: translateY(-2px); background: #facc15; }
.btn-secondaire { background: #475569; color: #fff; border: none; padding: 12px 15px; border-radius: 6px; cursor: pointer; width: 100%; font-weight: bold; font-size: 1rem; transition: 0.2s; margin-top: 20px;}
.btn-secondaire:hover { background: #64748b; }