/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {
    font-family: Ninteeneightyseven;
    src: url(NineteenEightySeven-MzMJ.ttf);
}
@font-face {
    font-family: 'JMH Typewriter';
    src: url('jmh_typewriter/JMH Typewriter.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'JMH Typewriter';
    src: url('jmh_typewriter/JMH Typewriter-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}
body {
 font-family: "Ninteeneightyseven", serif;
    color: #f5e9d4;
    cursor: url('https://cdn.cursors-4u.net/previews/hot-chocolate-00405427-32.webp') 32 32, auto !important;
    margin: 0;
    padding: 20px;
    display: flex;
    min-height: 100vh;
}

/* SIDEBAR */
.sidebar {
    position: relative;
    width: 220px;
    flex-shrink: 0;
    margin-right: 20px;
    padding: 20px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 0.7em;

    background: url("https://opengameart.org/sites/default/files/woodtile.png"), #1b0f07;
    background-size: 64px;
    background-blend-mode: multiply;

    border: 18px solid transparent;
    border-image: url("https://opengameart.org/sites/default/files/frame_2.png") 40 round;

    box-shadow: 
        0 0 25px #7a4e1f inset,
        0 0 12px #000;

    border-radius: 10px;
    color: #f3e2c0;
    height: fit-content;
}

.sidebar:before,
.sidebar:after {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    background-size: cover;
    opacity: 0.9;
}

.sidebar:before {
    background-image: url("https://opengameart.org/sites/default/files/ornament-corner.png");
    top: -12px;
    left: -12px;
}

.sidebar:after {
    background-image: url("https://opengameart.org/sites/default/files/ornament-corner.png");
    bottom: -12px;
    right: -12px;
    transform: rotate(180deg);
}

.sidebar h2 {
    text-align: center;
    background: linear-gradient(#3a2b1a, #1f160e);
    padding: 8px;
    border-radius: 8px;
    border: 3px ridge #5c4025;
    color: #ffe7b6;
    margin-bottom: 15px;
    text-shadow: 1px 1px 3px #000;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 0.7em;
}

/* INFORMATIONS AUTEUR */
.author-info {
    background: rgba(26, 15, 8, 0.8);
    border: 2px ridge #5c4025;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
}

.author-info h3 {
    color: #FFD700;
    margin: 8px 0;
    font-size: 1.1em;
    text-shadow: 2px 2px 4px #000;
}

.author-info p {
    color: #E6D3B7;
    font-size: 0.8em;
    line-height: 1.3;
    margin: 8px 0;
}

.stats {
    margin-top: 10px;
    border-top: 1px solid #5c4025;
    padding-top: 8px;
}

.stat {
    color: #B8860B;
    font-size: 0.7em;
    margin: 3px 0;
    text-shadow: 1px 1px 2px #000;
    font-weight: bold;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar li {
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebar li:before {
    content: "";
    width: 16px;
    height: 16px;
    background-image: url("https://opengameart.org/sites/default/files/book.png");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.9;
}

.sidebar a {
    text-decoration: none;
    color: #ffefcc;
    font-weight: bold;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(70, 40, 20, 0.35);
    border: 2px inset #5c3a1e;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: inline-block;
    max-width: 100%;
    font-size: 0.7em;
}

.sidebar a:hover {
    background: rgba(90, 60, 30, 0.5);
    border: 2px outset #8b5e2e;
    color: #fff4dd;
}

.sidebar a.big {
    font-size: 1.4em;
}

/* COLONNE POÈME (droite) */
.poem-sidebar {
    position: relative;
    width: 220px;
    flex-shrink: 0;
    margin-left: 20px;
    padding: 20px;
    word-wrap: break-word;
    overflow-wrap: break-word;

    background: url("https://opengameart.org/sites/default/files/woodtile.png"), #1b0f07;
    background-size: 64px;
    background-blend-mode: multiply;

    border: 18px solid transparent;
    border-image: url("https://opengameart.org/sites/default/files/frame_2.png") 40 round;

    box-shadow:
        0 0 25px #7a4e1f inset,
        0 0 12px #000;

    border-radius: 10px;
    color: #f3e2c0;
    align-self: flex-start;
}

.poem-sidebar:before,
.poem-sidebar:after {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    background-size: cover;
    opacity: 0.9;
}

.poem-sidebar:before {
    background-image: url("https://opengameart.org/sites/default/files/ornament-corner.png");
    top: -12px;
    left: -12px;
}

.poem-sidebar:after {
    background-image: url("https://opengameart.org/sites/default/files/ornament-corner.png");
    bottom: -12px;
    right: -12px;
    transform: rotate(180deg);
}

.poem-sidebar h2 {
    text-align: center;
    background: linear-gradient(#3a2b1a, #1f160e);
    padding: 8px;
    border-radius: 8px;
    border: 3px ridge #5c4025;
    color: #ffe7b6;
    margin-bottom: 15px;
    text-shadow: 1px 1px 3px #000;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 0.7em;
}

.poem-title {
    font-family: 'JMH Typewriter', 'Courier New', monospace;
    font-size: 0.95em;
    font-weight: bold;
    color: #FFD700;
    text-align: center;
    margin-bottom: 14px;
    text-shadow: 1px 1px 3px #000;
    letter-spacing: 1px;
}

.poem-text {
    font-family: 'JMH Typewriter', 'Courier New', monospace;
    font-size: 0.82em;
    line-height: 1.7;
    white-space: pre-wrap;
    color: #f0e0c0;
    margin: 0;
}

.poem-author {
    font-family: 'JMH Typewriter', 'Courier New', monospace;
    font-size: 0.75em;
    color: #B8A070;
    text-align: right;
    font-style: italic;
    margin-top: 14px;
    border-top: 1px solid #5c4025;
    padding-top: 8px;
}

.poem-link {
    display: block;
    text-align: center;
    margin-top: 16px;
    text-decoration: none;
    color: #ffefcc;
    font-weight: bold;
    font-size: 0.65em;
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(70, 40, 20, 0.35);
    border: 2px inset #5c3a1e;
}

.poem-link:hover {
    background: rgba(90, 60, 30, 0.5);
    border: 2px outset #8b5e2e;
    color: #fff4dd;
}

/* HEADER RPG OLD SCHOOL */
.header {
    margin-bottom: 20px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.header-spacer {
    -webkit-flex: 1;
    flex: 1;
}

.header .title-frame {
    margin: 0;
}

.header-button {
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    text-align: center;
}

.header-button-label {
    font-size: 9px;
    color: #c9b48a;
    margin: 0 0 3px;
    padding: 0;
    max-width: 88px;
    line-height: 1.2;
    word-wrap: break-word;
    font-family: "Ninteeneightyseven", serif;
    display: block;
}

.header-button img {
    display: block;
    image-rendering: pixelated;
}

.title-frame {
    width: fit-content;
    margin: 0 auto 20px;
    position: relative;
    
    /* Fond texture bois */
    background: 
        url("https://opengameart.org/sites/default/files/woodtile.png"),
        linear-gradient(135deg, #3E2723 0%, #5D4037 50%, #3E2723 100%);
    background-size: 40px, cover;
    background-blend-mode: overlay;
    
    /* Cadre doré simple */
    border: 6px solid #FFD700;
    border-radius: 8px;
    
    padding: 25px 40px;
    
    box-shadow: 
        0 0 0 2px #B8860B,
        0 0 0 4px #8B4513,
        0 0 15px rgba(0,0,0,0.8),
        inset 0 0 20px rgba(139,69,19,0.4);
    
    image-rendering: pixelated;
}

/* Ornements d'angles dorés simples */
.title-frame::before,
.title-frame::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: linear-gradient(45deg, #FFD700 0%, #B8860B 100%);
    border: 2px solid #8B4513;
    border-radius: 50%;
    image-rendering: pixelated;
}

.title-frame::before {
    top: -8px;
    left: -8px;
}

.title-frame::after {
    bottom: -8px;
    right: -8px;
}

.title-frame h1 {
    margin: 0;
    padding: 0;
    color: #FFE4B5;
    text-shadow: 
        1px 1px 0px #8B4513,
        2px 2px 4px rgba(0,0,0,0.8);
    font-family: "Ninteeneightyseven", serif;
    font-size: 1.8em;
    text-align: center;
    font-weight: bold;
}

.title-frame img {
    vertical-align: middle;
    margin-right: 12px;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.7));
}



/* CONTENU PRINCIPAL */
.container {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* ZONE DE JEU RPG */
.game-area {
    width: 100%;
    margin: 0 auto;
    position: relative;
    flex: 1;
}

.tavern-scene {
    width: 100%;
    max-width: 800px;
    height: 570px; /* Réduit de 600px à 550px pour couper le bas */
    margin: 0 auto;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 6px solid #4a3c28;
    box-shadow: 
        0 0 20px rgba(0,0,0,0.8),
        0 0 40px #1a1a1a inset;
    image-rendering: pixelated;
}

.tavern-background {
    width: 100%;
    height: 100%;
    background-image: url("tavern.gif");
    background-size: cover;
    background-position: center top; /* Focus sur le haut de l'image */
    background-repeat: no-repeat;
    position: relative;
}

.tavern-interior {
    position: relative;
    width: 800px; /* Largeur fixe pour la taverne */
    height: 500px;
    margin: 0 auto;
}

/* PERSONNAGES */
.character {
    position: absolute;
    transition: all 0.2s ease;
    z-index: 10;
    cursor: pointer;
}

.character:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
}

.sprite {
    width: 72px;  /* 150% de 48px */
    height: 72px;
    position: relative;
    transition: all 0.2s ease;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    overflow: hidden;
    border-radius: 2px; /* Pour masquer les bords blancs si présents */
}

/* Sprites temporaires - masqués quand real-sprite est actif */
.barman-sprite:not(.real-sprite) {
    background-color: #8B4513;
    border: 1px solid #654321;
    position: relative;
}

.barman-sprite:not(.real-sprite)::before {
    content: "🍺";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2em;
}

.warrior-sprite:not(.real-sprite) {
    background-color: #4169E1;
    border: 1px solid #2F4F4F;
    position: relative;
}

.warrior-sprite:not(.real-sprite)::before {
    content: "⚔️";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1em;
}

.mage-sprite:not(.real-sprite) {
    background-color: #4B0082;
    border: 1px solid #2F2F2F;
    position: relative;
}

.mage-sprite:not(.real-sprite)::before {
    content: "🔮";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1em;
}

.merchant-sprite:not(.real-sprite) {
    background-color: #B8860B;
    border: 1px solid #8B7355;
    position: relative;
}

.merchant-sprite:not(.real-sprite)::before {
    content: "💰";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1em;
}

/* Classes pour utiliser les sprites individuels découpés */
.barman-sprite.real-sprite {
    background-image: url("sprites/barman.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 72px;
    height: 72px;
}

.warrior-sprite.real-sprite {
    background-image: url("sprites/warrior.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 72px;
    height: 72px;
}

.mage-sprite.real-sprite {
    background-image: url("sprites/mage.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 72px;
    height: 72px;
}

.merchant-sprite.real-sprite {
    background-image: url("sprites/merchant.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 72px;
    height: 72px;
}

/* Animation des sprites */
.sprite.animate {
    transform: translateY(-2px);
}

/* Étiquettes de noms */
.name-tag {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #FFD700;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: bold;
    border: 1px solid #8B4513;
    text-shadow: 1px 1px 2px #000;
    white-space: nowrap;
    image-rendering: pixelated;
}

/* BOÃŽTES DE DIALOGUE */
.dialogue-box {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    background: 
        linear-gradient(145deg, #2C1810 0%, #3A2415 50%, #2C1810 100%),
        url("https://opengameart.org/sites/default/files/woodtile.png");
    background-size: cover, 60px;
    background-blend-mode: overlay;
    
    border: 6px solid #8B4513;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 
        0 0 30px #1a0f08 inset,
        0 0 20px #000;
    
    z-index: 1000;
    opacity: 0;
    transform: translateX(-50%) translateY(100px);
    transition: all 0.3s ease;
}

.dialogue-box.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dialogue-box.hidden {
    display: none;
}

.dialogue-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.dialogue-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(145deg, #444 0%, #666 50%, #444 100%);
    border-radius: 50%;
    border: 3px solid #8B4513;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.dialogue-text {
    flex: 1;
}

.dialogue-name {
    color: #FFD700;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 8px;
    text-shadow: 2px 2px 4px #000;
}

.dialogue-message {
    color: #E6D3B7;
    line-height: 1.4;
    margin-bottom: 15px;
    font-size: 0.95em;
}

.dialogue-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.dialogue-btn {
    background: linear-gradient(145deg, #8B4513 0%, #A0522D 50%, #8B4513 100%);
    color: #FFE4B5;
    border: 2px solid #654321;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    box-shadow: 
        0 2px 4px rgba(0,0,0,0.3),
        0 0 10px #4a3728 inset;
    transition: all 0.2s ease;
}

.dialogue-btn:hover {
    background: linear-gradient(145deg, #A0522D 0%, #CD853F 50%, #A0522D 100%);
    border-color: #8B4513;
    transform: translateY(-1px);
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.4),
        0 0 15px #6b5127 inset;
}

.dialogue-btn:active {
    transform: translateY(0);
    box-shadow: 
        0 1px 2px rgba(0,0,0,0.3),
        0 0 5px #3a2612 inset;
}

.main {
    background: url("https://opengameart.org/sites/default/files/oldpaper.jpg");
    background-size: cover;

    padding: 20px;
    border-radius: 12px;

    border: 6px ridge #6b4a29;

    box-shadow:
        0 0 20px #7a5a34 inset,
        0 0 10px #000;

    color: #3b2616;
}

.main h3 {
    font-family: "Bookman Old Style", serif;
    color: #3a1f0f;
}

/* FOOTER */
.footer {
    margin-top: 30px;
    text-align: center;
    background: rgba(15, 10, 5, 0.8);

    padding: 15px;
    border-radius: 10px;
    border: 3px groove #5a3c22;

    box-shadow:
        0 0 10px #3a2615 inset,
        0 0 5px #000;

    color: #e7d3b5;
}

/* HR DÉCORATIVE */
hr {
    border: 0;
    height: 10px;
    background: url("https://opengameart.org/sites/default/files/decowood.png") repeat-x;
    margin: 20px 0;
}

/* CREDITS PAGE */
.credits-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.credits-frame {
    background-color: #e8e8e8;
    border-radius: 15px;
    padding: 40px;
    max-width: 600px;
    width: 100%;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.3),
        0 2px 5px rgba(0, 0, 0, 0.2);
    border: 2px solid #d0d0d0;
}

.credits-frame h1 {
    color: #333;
    text-align: center;
    margin-bottom: 30px;
    font-family: 'JMH Typewriter', 'Courier New', monospace;
    font-size: 2.2em;
    font-weight: normal;
    letter-spacing: 1px;
    text-shadow: none;
}

.credits-content {
    color: #444;
    font-family: 'JMH Typewriter', 'Courier New', monospace;
    font-size: 1.1em;
    line-height: 1.6;
    text-align: justify;
    margin: 0;
}

.credits-content p {
    margin-bottom: 20px;
    font-style: normal;
}

/* WALKMAN PLAYER */
.walkman-player {
    position: relative;
    width: 260px;
    height: 175px;
    margin: 20px -30px 10px -30px;
    background: rgba(0,0,0,0.6);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 
        0 0 15px rgba(0,0,0,0.8),
        inset 0 0 10px #000;
}

.walkman-bg {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    filter: brightness(0.9);
}

/* Conteneur des boutons */
.walkman-controls {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 5px;
}

/* Boutons stylisés rétro */
.walkman-controls button {
    width: 45px;
    height: 35px;
    background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 2px solid #444;
    border-radius: 4px;
    color: #888;
    cursor: pointer;
    font-size: 0.8em;
    transition: all 0.2s;
    box-shadow: 
        inset 0 -2px 4px rgba(0,0,0,0.5),
        0 1px 2px rgba(0,0,0,0.8);
}

.walkman-controls button:hover {
    background: linear-gradient(145deg, #3a3a3a 0%, #2a2a2a 100%);
    color: #FFD700;
    border-color: #666;
}

.walkman-controls button:active {
    transform: scale(0.95);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}

/* Affichage du titre */
.track-display {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    color: #0f0;
    font-family: "Courier New", monospace;
    font-size: 9px;
    text-transform: uppercase;
    width: 180px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    background: rgba(0,0,0,0.8);
    padding: 3px 5px;
    border: 1px solid #333;
    border-radius: 2px;
    text-shadow: 0 0 3px #0f0;
}

/* Animation défilement du titre */
@keyframes scroll-text {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.track-display.scrolling {
    animation: scroll-text 12s linear infinite;
}

/* Player YouTube caché */
#youtube-player {
    position: absolute;
    top: -9999px;
    pointer-events: none;
}

/* STYLES POUR LA PAGE GRIMPE */
.grimpe-content {
    max-width: 900px;
    margin: 0 auto;
}

/* Photo principale */
.photo-container {
    width: 100%;
    margin-bottom: 30px;
    text-align: center;
}

.main-photo {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

/* Texte typewriter */
.grimpe-text {
    font-family: 'JMH Typewriter', 'Courier New', monospace;
    font-size: 1.1em;
    line-height: 1.8;
    color: #3b2616;
    margin-bottom: 40px;
    padding: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
}

.grimpe-text p {
    margin-bottom: 20px;
    text-align: justify;
}

/* Galerie photos glaciers */
.photos-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.gallery-photo {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.gallery-photo:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
}

/* Responsive */
@media (max-width: 768px) {
    .photos-gallery {
        grid-template-columns: 1fr;
    }
    
    .grimpe-text {
        padding: 15px;
        font-size: 1em;
    }
}