body {
    margin: 0;
    /* Police unique pour tout le jeu */
    font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
}

button {
    font-family: inherit;
}

.room {
    width: 100%;
    /* Au-dessus des contrôles tactiles (touch.css) ; dvh : hauteur visible, sans la barre d'adresse sur mobile */
    height: calc(100vh - var(--controls-height, 0px));
    height: calc(100dvh - var(--controls-height, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.room .background {
    position: relative;
    /* Couvre tout l'écran en gardant le 16:9 : les bords qui dépassent sont rognés */
    width: max(100vw, calc((100vh - var(--controls-height, 0px)) * (16 / 9)));
    width: max(100vw, calc((100dvh - var(--controls-height, 0px)) * (16 / 9)));
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    /* Le haut et le bas de background.png sont transparents : plafond et parquet */
    background: linear-gradient(to bottom, #ece3c6 50%, #4a2a06 50%);
}

.room .background > img.decor {
    /* Cadrage sur la pièce : on ne garde que la bande y=60..414 de background.png (800x543),
       pour que le parquet descende jusqu'en bas de l'écran */
    position: absolute;
    width: 127.12%;
    height: 153.39%;
    left: -13.56%;
    top: -16.95%;
    z-index: 0;
}

/* Sprites : les PNG font 320x320 avec beaucoup de vide autour du dessin.
   Le conteneur prend la taille du dessin seul (zone cliquable précise),
   l'image est agrandie et décalée pour que le dessin remplisse le conteneur.
   --x0 / --y0 : coin haut-gauche du dessin dans le PNG, --cw / --ch : sa taille. */
/* Sprites cliquables : chacun active un mode */
.room .sprite {
    position: absolute;
    cursor: pointer;
}

.room .sprite img {
    position: absolute;
    width: calc(100% * 320 / var(--cw));
    height: calc(100% * 320 / var(--ch));
    left: calc(-100% * var(--x0) / var(--cw));
    top: calc(-100% * var(--y0) / var(--ch));
    pointer-events: none;        /* Le clic se fait sur le conteneur */
    image-rendering: pixelated;  /* Sprites pixel art nets, sans flou */
}

/* Placement de la scène (en % du décor 16:9) : poste de travail centré */
.room .bureau {
    --x0: 60; --y0: 70; --cw: 170; --ch: 120;
    left: 42.83%;
    top: 67%;
    width: 14.34%;
    height: 18%;
    z-index: 1;
}

.room .computer {
    --x0: 100; --y0: 80; --cw: 100; --ch: 80;
    left: 43.28%;
    top: 55%;
    width: 8.44%;
    height: 12%;
    z-index: 2;
}

.room .handfan {
    --x0: 90; --y0: 110; --cw: 150; --ch: 110;
    left: 50.5%;
    top: 58.2%;
    width: 6.75%;
    height: 8.8%;
    z-index: 3;
}

.room .joueur {
    --x0: 110; --y0: 60; --cw: 90; --ch: 170;
    left: 43.7%;
    top: 63.5%;
    width: 7.59%;
    height: 25.5%;
    z-index: 4;
}

/* Appel urgent : téléphone qui sonne, avec un anneau de compte à rebours */
@property --progress {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

.task-bubble {
    position: absolute;
    z-index: 12;
    width: clamp(56px, 5vw, 84px);
    aspect-ratio: 1;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    /* Anneau : la part orange diminue avec le temps restant */
    background: conic-gradient(#ff6b35 calc(var(--progress) * 360deg), rgba(0, 0, 0, 0.25) 0);
    transition: --progress 1s linear;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* Disque blanc au centre de l'anneau */
.task-bubble::before {
    content: '';
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: #fff;
}

.task-bubble:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.task-bubble .bubble-icon {
    position: relative;
    width: 50%;
    image-rendering: pixelated;
    animation: phone-ring 0.6s ease-in-out infinite;
}

@keyframes phone-ring {
    0%, 50%, 100% { transform: rotate(0); }
    10%, 30%      { transform: rotate(-15deg); }
    20%, 40%      { transform: rotate(15deg); }
}

.task-bubble.burst {
    background: #ff4d4d;
}

.task-bubble.burst::before {
    background: #ff4d4d;
}

.task-bubble.burst span {
    position: relative;
    font-size: 150%;
}