/* Plateau de combat hexagonal : onglets, layout 3 colonnes, carte + overlays, panneaux contexte (gauche) et controles/etat (droite). */ /* La vue combat a besoin de largeur : le shell s'elargit quand elle est active (classe posee sur par app.js). */ body.view-combat .table-shell { max-width: 105rem; } /* --- Bandeau superieur : selecteur de combats (MJ) --------------------------- */ .board-combats-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; } .board-combats-chips { display: flex; gap: 0.45rem; flex-wrap: wrap; } .board-combat-chip { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.8rem; color: var(--muted-strong); background: var(--surface); font-size: 0.84rem; font-weight: 800; cursor: pointer; } .board-combat-chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-strong); background: rgba(226, 180, 93, 0.08); } .board-combat-chip:hover { border-color: var(--line-strong); } .board-combat-chip:focus-visible, .board-button:focus-visible, .board-button-small:focus-visible, .board-add-chip:focus-visible, .sheet-switch-chip:focus-visible, .board-zoom-button:focus-visible, .board-history-undo:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; } .board-combat-chip-faces { display: inline-flex; } .board-combat-chip-face { width: 1.5rem; height: 1.5rem; border-radius: 50%; overflow: hidden; border: 1px solid var(--line-strong); margin-left: -0.45rem; background: var(--surface-strong); } .board-combat-chip-face:first-child { margin-left: 0; } .board-combat-chip-face img { width: 100%; height: 100%; object-fit: cover; } /* --- Structure de la vue ---------------------------------------------------- */ .board-view { display: grid; gap: 0.9rem; } .board-layout { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr) minmax(16rem, 20rem); grid-template-areas: "context stage controls"; gap: 1rem; align-items: start; } .board-column-context { grid-area: context; display: grid; gap: 0.8rem; } .board-stage { grid-area: stage; } .board-column-controls { grid-area: controls; display: grid; gap: 0.8rem; } @media (max-width: 68rem) { .board-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "context" "controls"; } } .board-empty-view, .board-empty { margin: 0; color: var(--muted); font-size: 0.88rem; } /* Message plein ecran (aucun combat) : centre, lisible meme menu deploye. */ .board-empty-view { max-width: 34rem; margin: clamp(2rem, 14vh, 6rem) auto 0; text-align: center; } /* Bouton "table de demo" sous le message vide (joueur sans combat). */ .board-empty-demo { justify-self: center; margin: 1rem auto 0; } /* --- Carte + overlays ---------------------------------------------------------- */ /* Carte infinie pilotee par la camera : pas de barre de defilement, on glisse pour se deplacer. */ .board-stage { position: relative; /* svh (viewport minimal) : stable quand la barre d'URL mobile se replie au defilement — en vh, la boite grandissait et le SVG (slice) montait en echelle : zoom apparent de la carte. */ height: 72vh; height: 72svh; min-height: 24rem; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); cursor: grab; touch-action: none; user-select: none; } .board-stage.is-dragging { cursor: grabbing; } .board-svg { display: block; width: 100%; height: 100%; } .board-overlay { position: absolute; z-index: 2; } .board-overlay-zoom { top: 0.6rem; right: 0.6rem; display: flex; gap: 0.3rem; } .board-zoom-button { border: 1px solid var(--line-strong); border-radius: 6px; min-width: 1.9rem; padding: 0.25rem 0.5rem; color: var(--text); background: rgba(13, 15, 18, 0.85); font-size: 0.85rem; font-weight: 800; cursor: pointer; } .board-zoom-button:hover, .board-zoom-button:focus-visible { border-color: var(--accent); outline: none; } /* Bouton a etat (👁 champ de vision) : allume quand actif. */ .board-zoom-button[aria-pressed="true"] { border-color: var(--accent-strong); color: var(--accent-strong); background: rgba(241, 198, 109, 0.14); } .board-overlay-hint { left: 50%; bottom: 0.7rem; transform: translateX(-50%); margin: 0; max-width: calc(100% - 2rem); border: 1px solid rgba(226, 180, 93, 0.5); border-radius: 999px; padding: 0.35rem 0.95rem; color: var(--accent-strong); background: rgba(13, 15, 18, 0.88); font-size: 0.78rem; font-weight: 700; text-align: center; pointer-events: none; } /* --- SVG : grille, obstacles, pions ------------------------------------------------ */ .board-cell { fill: rgba(255, 255, 255, 0.03); stroke: var(--line); stroke-width: 1; cursor: pointer; } .board-cell.alt { fill: rgba(255, 255, 255, 0.055); } /* Textures de sol : deux teintes alternees par texture. */ .board-svg[data-ground="pierre"] .board-cell { fill: #2e3238; } .board-svg[data-ground="pierre"] .board-cell.alt { fill: #343a41; } .board-svg[data-ground="terre"] .board-cell { fill: #382d21; } .board-svg[data-ground="terre"] .board-cell.alt { fill: #403428; } .board-svg[data-ground="herbe"] .board-cell { fill: #24382a; } .board-svg[data-ground="herbe"] .board-cell.alt { fill: #2a4030; } .board-svg[data-ground="sable"] .board-cell { fill: #4a3f28; } .board-svg[data-ground="sable"] .board-cell.alt { fill: #52462e; } .board-svg[data-ground="egouts"] .board-cell { fill: #20312d; } .board-svg[data-ground="egouts"] .board-cell.alt { fill: #263a34; } .board-svg[data-ground="machines"] .board-cell { fill: #2a3138; } .board-svg[data-ground="machines"] .board-cell.alt { fill: #303a44; } .board-cell:hover { fill: rgba(226, 180, 93, 0.22); } /* Champ de vision (vue joueur) : cases hors de la ligne de visee voilees. Prioritaire sur les teintes de sol et le survol. */ .board-svg .board-cell.is-fog, .board-svg .board-cell.alt.is-fog, .board-svg .board-cell.is-fog:hover { fill: #0a0c0f; fill-opacity: 0.94; stroke: rgba(255, 255, 255, 0.04); cursor: default; } /* Vue genee par la vegetation : case assombrie (teinte de sol conservee). */ .board-svg .board-cell.is-veil, .board-svg .board-cell.alt.is-veil { filter: brightness(0.6); } /* Cible "difficile a voir" : pion estompe (le -10 reste l'affaire du MJ). */ .board-token-veiled { opacity: 0.5; filter: grayscale(0.35); } .board-obstacle polygon { opacity: 0.82; pointer-events: all; } .board-obstacle.is-clickable { cursor: pointer; } .board-obstacle.is-selected polygon { stroke: var(--accent); stroke-width: 2; } .board-obstacle-label { fill: var(--text); font-size: 10px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; pointer-events: none; paint-order: stroke; stroke: rgba(0, 0, 0, 0.65); stroke-width: 2.5px; } .board-obstacle-glyph { font-size: 20px; text-anchor: middle; dominant-baseline: central; pointer-events: none; } .board-highlight { fill: rgba(226, 180, 93, 0.35); stroke: var(--accent); stroke-width: 1.5; pointer-events: none; } .board-token.is-clickable { cursor: pointer; } .board-token-ring { fill: none; stroke: transparent; stroke-width: 2.5; } .board-overlay-ground { top: 0.6rem; left: 0.6rem; } .board-overlay-ground select { border: 1px solid var(--line-strong); border-radius: 6px; padding: 0.3rem 0.5rem; color: var(--text); background: rgba(13, 15, 18, 0.85); font: inherit; font-size: 0.76rem; font-weight: 700; } .board-weapon-icon { font-size: 0.95rem; flex-shrink: 0; } .gm-npc-title { margin: 1.4rem 0 0.7rem; font-size: 0.78rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } /* Camp : anneau vert (allies) ou rouge (ennemis). */ .board-token[data-allegiance="ally"] .board-token-ring { stroke: rgba(94, 175, 104, 0.85); } .board-token[data-allegiance="enemy"] .board-token-ring { stroke: rgba(198, 84, 72, 0.9); /* Redondance non chromatique (daltonisme) : ennemis en pointilles. */ stroke-dasharray: 4 3; } /* Empreinte au sol des pions multi-cases (mode 2D) : cases teintees couleur de camp sous le visuel. */ .board-token-footprint { fill: rgba(255, 255, 255, 0.06); stroke: none; } .board-token[data-allegiance="ally"] .board-token-footprint { fill: rgba(94, 175, 104, 0.18); } .board-token[data-allegiance="enemy"] .board-token-footprint { fill: rgba(198, 84, 72, 0.18); } /* Fantome de placement : apercu du pion sous le curseur, jamais cliquable (les clics doivent atteindre la case en dessous). */ .board-token-ghost { opacity: 0.55; pointer-events: none; } /* Case occupee (pion ou obstacle) : fantome delave et aureole de rouge — le clic n'y fera rien (curseur interdit en plus). */ .board-token-ghost.is-invalid { opacity: 0.45; filter: grayscale(0.55) drop-shadow(0 0 6px rgba(220, 70, 55, 0.95)); } /* Selection : l'anneau garde la couleur de camp (vert/rouge), juste plus vif, plus epais et en pointilles. */ .board-token.is-selected .board-token-ring { stroke-width: 3.5; stroke-dasharray: 5 3; } .board-token[data-allegiance="ally"].is-selected .board-token-ring { stroke: rgb(122, 214, 133); } .board-token[data-allegiance="enemy"].is-selected .board-token-ring { stroke: rgb(235, 110, 96); } .board-token-border { fill: none; stroke: rgba(0, 0, 0, 0.55); stroke-width: 1.5; } .board-token-disc { stroke: rgba(0, 0, 0, 0.45); stroke-width: 1.5; } .board-token-initials { fill: #fff; font-size: 15px; font-weight: 850; text-anchor: middle; dominant-baseline: central; pointer-events: none; } .board-token-hp rect { fill: rgba(0, 0, 0, 0.72); stroke: var(--line); stroke-width: 0.5; } .board-token-hp text { fill: var(--text); font-size: 9.5px; font-weight: 800; text-anchor: middle; dominant-baseline: central; } /* Code couleur des PV : vert / orange / rouge. */ .board-token-hp[data-level="ok"] text { fill: #8fd694; } .board-token-hp[data-level="warn"] rect { stroke: #d8a03c; } .board-token-hp[data-level="warn"] text { fill: #f0c26a; } .board-token-hp[data-level="low"] rect { stroke: var(--danger); } .board-token-hp[data-level="low"] text { fill: #f0a396; } /* --- Panneaux (gauche et droite) ----------------------------------------------------- */ .board-panel { border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 0.95rem 0.95rem; background: var(--surface-soft); display: grid; gap: 0.65rem; } .board-panel h3 { margin: 0; color: var(--accent); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; } .board-context-head { display: flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; } .board-context-avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; overflow: hidden; border: 1px solid var(--line-strong); flex-shrink: 0; } .board-context-avatar img { width: 100%; height: 100%; object-fit: cover; } .board-stat-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; } .board-stat-label { color: var(--muted); min-width: 4.6rem; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .board-stat-value { font-variant-numeric: tabular-nums; font-weight: 700; } .board-steppers { display: inline-flex; gap: 0.3rem; margin-left: auto; } .board-context-weapon { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.84rem; } .board-context-detail { margin: 0; color: var(--muted); font-size: 0.82rem; } .board-armor-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; } .board-armor-cell { display: grid; justify-items: center; gap: 0.1rem; border: 1px solid var(--line); border-radius: 6px; padding: 0.3rem 0.2rem; background: var(--surface); } .board-armor-zone { color: var(--muted); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; } .board-armor-value { font-size: 0.9rem; font-weight: 800; } .board-context-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 0.6rem; } .board-picker { display: flex; gap: 0.4rem; flex-wrap: wrap; } .board-picker-tab { border: 1px solid var(--line); border-radius: 8px; padding: 0.35rem 0.8rem; color: var(--muted-strong); background: var(--surface); font-size: 0.8rem; font-weight: 700; cursor: pointer; } .board-picker-tab[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-strong); } .board-add-row { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .board-add-row select, .board-add-row input[type="text"] { flex: 1; min-width: 7rem; } .board-add-row input[type="number"] { width: 4.2rem; } .board-paint-form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .board-paint-count { color: var(--muted); font-size: 0.8rem; } .board-obstacle-swatch { width: 0.95rem; height: 0.95rem; border-radius: 4px; border: 1px solid var(--line-strong); flex-shrink: 0; } .board-history { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; font-size: 0.8rem; } .board-history li { display: flex; align-items: baseline; gap: 0.4rem; color: var(--muted-strong); line-height: 1.35; } .board-history li.is-undone .board-history-text { text-decoration: line-through; opacity: 0.55; } .board-history-text { flex: 1; } .board-history-time { color: var(--muted); font-size: 0.7rem; } .board-history-undo { border: 1px solid var(--line); border-radius: 6px; padding: 0.05rem 0.4rem; color: var(--muted-strong); background: var(--surface); font-size: 0.78rem; cursor: pointer; flex-shrink: 0; } .board-history-undo:hover, .board-history-undo:focus-visible { border-color: var(--accent); color: var(--accent-strong); outline: none; } /* Selecteur rapide de fiche (MJ, en haut a droite de la fiche). */ .sheet-gm-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .sheet-switcher { border: 1px solid var(--line); border-radius: 6px; padding: 0.35rem 0.5rem; color: var(--text); background: var(--surface); font: inherit; font-size: 0.82rem; } .board-view input[type="range"] { padding: 0; width: 7rem; accent-color: var(--accent, #e2b45d); } /* Chip "+" de creation de combat et popup. */ .board-combat-chip-add { min-width: 2.2rem; justify-content: center; font-size: 1rem; } .board-dialog { border: 1px solid var(--line-strong); border-radius: 12px; padding: 1.2rem 1.4rem; color: var(--text); background: var(--surface-strong); min-width: 20rem; } .board-dialog::backdrop { background: rgba(0, 0, 0, 0.55); } .board-dialog-form { display: grid; gap: 0.8rem; } .board-dialog-form h3 { margin: 0; font-size: 1rem; } .board-dialog-form input { border: 1px solid var(--line); border-radius: 6px; padding: 0.45rem 0.6rem; color: var(--text); background: var(--surface); font: inherit; } .board-dialog-actions { display: flex; justify-content: end; gap: 0.5rem; } /* Grilles d'ajout avec avatars (PJ disponibles, PNJ connus). */ .board-add-caption { margin: 0; color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .board-add-grid { display: flex; flex-wrap: wrap; gap: 0.35rem; } .board-add-chip { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.7rem 0.25rem 0.3rem; color: var(--muted-strong); background: var(--surface); font-size: 0.78rem; font-weight: 700; cursor: pointer; } .board-add-chip:hover, .board-add-chip:focus-visible { border-color: var(--accent); color: var(--accent-strong); outline: none; } /* Chip arme (placement en cours) : etat selectionne, distinct du survol — fond teinte + double bord, recliquer annule. */ .board-add-chip[aria-pressed="true"] { border-color: var(--accent-strong); color: var(--accent-strong); background: rgba(241, 198, 109, 0.14); box-shadow: inset 0 0 0 1px var(--accent-strong); } .board-add-chip-face { width: 1.6rem; height: 1.6rem; border-radius: 50%; overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface-strong); flex-shrink: 0; } .board-add-chip-face img { width: 100%; height: 100%; object-fit: cover; } /* Armes : fleches et compteur. */ .board-weapon-block { display: grid; gap: 0.35rem; } .board-weapon-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.84rem; } .board-weapon-arrow { border: 1px solid var(--line); border-radius: 6px; min-width: 1.5rem; padding: 0.1rem 0.35rem; color: var(--muted-strong); background: var(--surface); font-weight: 800; cursor: pointer; flex-shrink: 0; } .board-weapon-arrow:hover, .board-weapon-arrow:focus-visible { border-color: var(--accent); outline: none; } .board-weapon-name { flex: 1; line-height: 1.3; } .board-weapon-count { color: var(--muted); font-size: 0.72rem; flex-shrink: 0; } /* Code couleur vert/orange/rouge des valeurs vitales. */ .board-stat-value[data-level="ok"], .ammo[data-level="ok"] { color: #8fd694; } .board-stat-value[data-level="warn"], .ammo[data-level="warn"] { color: #f0c26a; } .board-stat-value[data-level="low"], .ammo[data-level="low"] { color: #f0a396; } /* Jauges de fiche : la barre suit le niveau. */ .sheet-gauge[data-level="ok"] .bar > span { background: #4f9e58; } .sheet-gauge[data-level="warn"] .bar > span { background: #d8a03c; } .sheet-gauge[data-level="low"] .bar > span { background: var(--danger); } /* Grille 2 colonnes des personnages (vue MJ). */ .gm-npc-create { margin: 0 0 1rem; border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--line)); border-radius: 10px; background: var(--surface-soft); } .gm-npc-create > summary { padding: 0.7rem 0.9rem; color: var(--accent-strong); font-weight: 800; cursor: pointer; } .gm-npc-create form { display: grid; grid-template-columns: minmax(12rem, 1fr) auto; gap: 0.6rem; padding: 0 0.9rem 0.9rem; } .gm-npc-create input, .gm-npc-create button { border: 1px solid var(--line); border-radius: 8px; padding: 0.55rem 0.7rem; color: var(--text); background: var(--surface); font: inherit; } .gm-npc-create button { border-color: var(--accent); color: var(--accent-strong); font-weight: 800; cursor: pointer; } .gm-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; } @media (max-width: 46rem) { .gm-npc-create form { grid-template-columns: 1fr; } .gm-card-grid { grid-template-columns: minmax(0, 1fr); } /* Telephone : la fiche du pion selectionne devient un tiroir fixe au-dessus de la barre d'onglets — en flux normal elle vit sous la carte (72svh), invisible sans defiler. Taper la carte deselectionne et referme le tiroir. */ .board-column-context.has-selection { position: fixed; left: 0.45rem; right: 0.45rem; bottom: calc(var(--site-nav-offset-bottom, 0rem) + max(0.45rem, env(safe-area-inset-bottom, 0px))); z-index: 50; max-height: 34svh; overflow-y: auto; border-radius: 12px; box-shadow: 0 -0.6rem 2rem rgba(0, 0, 0, 0.55); } /* Version resserree du panneau dans le tiroir : il couvre la carte, chaque ligne compte. */ .board-column-context.has-selection .board-panel { padding: 0.5rem 0.7rem 0.6rem; gap: 0.32rem; border-radius: 12px; } .board-column-context.has-selection .board-panel h3 { font-size: 0.6rem; } .board-column-context.has-selection .board-context-head { gap: 0.45rem; font-size: 0.88rem; } .board-column-context.has-selection .board-context-avatar { width: 1.9rem; height: 1.9rem; } .board-column-context.has-selection .board-stat-row { font-size: 0.8rem; gap: 0.4rem; } } .gm-card { display: flex; align-items: center; gap: 0.9rem; border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 1rem; color: var(--text); background: var(--surface-soft); font: inherit; text-align: left; cursor: pointer; } .gm-card:hover, .gm-card:focus-visible { border-color: var(--accent); outline: none; } .gm-card-avatar { width: 4rem; height: 4rem; border-radius: 50%; overflow: hidden; border: 2px solid var(--line-strong); flex-shrink: 0; } .gm-card-avatar img { width: 100%; height: 100%; object-fit: cover; } .gm-card-info { display: grid; gap: 0.25rem; } .gm-card-info strong { font-size: 0.98rem; } .gm-card-vitals { display: flex; gap: 0.7rem; font-size: 0.82rem; font-weight: 700; } .gm-card-vitals [data-level="ok"] { color: #8fd694; } .gm-card-vitals [data-level="warn"] { color: #f0c26a; } .gm-card-vitals [data-level="low"] { color: #f0a396; } .gm-card-detail { color: var(--muted); font-size: 0.76rem; } /* Chips de bascule entre fiches (vue MJ, haut de la fiche). */ .sheet-switch-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: end; } .sheet-switch-chip { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.22rem 0.65rem 0.22rem 0.28rem; color: var(--muted-strong); background: var(--surface); font-size: 0.74rem; font-weight: 700; cursor: pointer; } .sheet-switch-chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-strong); } .sheet-switch-chip:hover, .sheet-switch-chip:focus-visible { border-color: var(--line-strong); outline: none; } .sheet-switch-chip-face { width: 1.4rem; height: 1.4rem; border-radius: 50%; overflow: hidden; border: 1px solid var(--line-strong); flex-shrink: 0; } .sheet-switch-chip-face img { width: 100%; height: 100%; object-fit: cover; } /* Compteur d'armes sur la fiche. */ .sheet-weapon-counter { color: var(--muted); font-size: 0.74rem; } /* Selecteur temporaire "Vue : MJ / joueur" dans l'en-tete. */ .table-view-as { margin-right: 0.5rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.28rem 0.6rem; color: var(--muted-strong); background: var(--surface); font: inherit; font-size: 0.72rem; font-weight: 700; } /* --- Boutons et champs ----------------------------------------------------------------- */ .board-button, .board-button-small { border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); background: var(--surface-strong); font-weight: 800; cursor: pointer; } .board-button { padding: 0.5rem 1rem; font-size: 0.84rem; justify-self: start; } .board-button-small { padding: 0.3rem 0.65rem; font-size: 0.74rem; } .board-button:hover, .board-button-small:hover, .board-button:focus-visible, .board-button-small:focus-visible { border-color: var(--accent); outline: none; } .board-button-danger { border-color: rgba(192, 90, 76, 0.55); color: #f0a396; } .board-button-danger:hover, .board-button-danger:focus-visible { border-color: var(--danger); } .board-view input, .board-view select { border: 1px solid var(--line); border-radius: 6px; padding: 0.35rem 0.5rem; color: var(--text); background: var(--surface); font: inherit; font-size: 0.82rem; } .board-view input[type="color"] { padding: 0.1rem; width: 2.4rem; height: 1.9rem; } /* --- Legende de la carte ------------------------------------------------------- */ .board-legend { right: 0.6rem; bottom: 0.6rem; display: grid; gap: 0.25rem; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0.45rem 0.65rem; background: rgba(13, 15, 18, 0.85); font-size: 0.68rem; color: var(--muted-strong); pointer-events: none; } .board-legend-item { display: flex; align-items: center; gap: 0.45rem; } .board-legend-marker { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex-shrink: 0; } .board-legend-marker.is-ally { border: 2px solid rgba(94, 175, 104, 0.9); } .board-legend-marker.is-enemy { border: 2px dashed rgba(198, 84, 72, 0.95); } .board-legend-marker.is-scale { border-radius: 2px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.06); } /* --- Selecteur de sol (vignettes, bas gauche) ------------------------------------ */ .board-overlay-ground { top: auto; bottom: 0.6rem; left: 0.6rem; display: flex; /* Deploiement vers le HAUT : le bouton "Surface" reste en bas. */ flex-direction: column-reverse; gap: 0.35rem; max-height: calc(100% - 1.2rem); overflow-y: auto; } /* Les choix n'apparaissent qu'au survol du selecteur (facon Google Maps) ou apres un clic sur le bouton principal (tactile). */ .board-ground-choices { display: none; flex-direction: column-reverse; gap: 0.35rem; } .board-overlay-ground:hover .board-ground-choices, .board-overlay-ground:focus-within .board-ground-choices, .board-overlay-ground.is-open .board-ground-choices { display: flex; } .board-ground-tile { display: grid; justify-items: center; gap: 0.15rem; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0.3rem 0.4rem; background: rgba(13, 15, 18, 0.85); color: var(--muted-strong); font-size: 0.62rem; font-weight: 700; cursor: pointer; } .board-ground-tile:hover, .board-ground-tile:focus-visible { border-color: var(--accent); outline: none; } .board-ground-tile[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-strong); } .board-ground-swatch { width: 2.2rem; height: 1.5rem; border-radius: 5px; border: 1px solid var(--line); } /* --- Selecteur custom des PNJ connus ----------------------------------------------- */ .board-npc-picker { position: relative; display: grid; gap: 0.3rem; } .board-npc-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border: 1px solid var(--line); border-radius: 8px; padding: 0.35rem 0.6rem; background: var(--surface); color: var(--muted-strong); font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; } .board-npc-trigger:hover, .board-npc-trigger:focus-visible { border-color: var(--accent); outline: none; } /* Popover : la liste se superpose au contenu au lieu d'agrandir le panneau. */ .board-npc-list { position: absolute; top: calc(100% + 0.3rem); left: 0; right: 0; z-index: 6; display: grid; gap: 0.2rem; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0.4rem; background: var(--surface-strong); max-height: 16rem; overflow: auto; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55); } .board-npc-item { border: 1px solid transparent; border-radius: 6px; padding: 0.25rem 0.4rem; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .board-npc-item:hover, .board-npc-item:focus-visible { border-color: var(--accent); background: var(--surface); outline: none; } .board-npc-entry { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .board-npc-face { position: relative; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface-strong); flex-shrink: 0; } .board-npc-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .board-npc-dot { position: absolute; right: -0.1rem; bottom: -0.1rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1.5px solid var(--surface-strong); } .board-npc-dot.is-ally { background: #5eaf68; } .board-npc-dot.is-enemy { background: #c65448; } .board-npc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; } .board-npc-hint { color: var(--accent-strong); font-size: 0.7rem; flex-shrink: 0; } .board-npc-caret { color: var(--muted); } /* --- Peinture d'obstacle : apercu + actions ------------------------------------------ */ .board-highlight-preview { opacity: 0.75; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; } .board-paint-actions { display: flex; gap: 0.5rem; width: 100%; } .board-paint-actions .board-button { flex: 1; justify-self: stretch; text-align: center; } .board-paint-confirm { border-color: rgba(94, 175, 104, 0.7); color: #8fd694; } .board-paint-confirm:hover, .board-paint-confirm:focus-visible { border-color: #5eaf68; } .board-paint-cancel { border-color: rgba(192, 90, 76, 0.55); color: #f0a396; } .board-paint-cancel:hover, .board-paint-cancel:focus-visible { border-color: var(--danger); } /* --- Actions du contexte sur une ligne + listes du joueur ------------------------------ */ .board-context-actions-row { flex-wrap: nowrap; } .board-context-actions-row .board-button-small { flex: 1; text-align: center; white-space: nowrap; } .board-own-list { display: grid; gap: 0.2rem; } .board-own-line { color: var(--muted-strong); font-size: 0.8rem; line-height: 1.35; } /* Bouton Placer grise tant qu'aucune case n'est peinte. */ .board-button:disabled, .board-button-small:disabled { opacity: 0.45; cursor: not-allowed; border-color: var(--line); color: var(--muted); } /* --- Vue fausse 3D (prototype) -------------------------------------------------- */ .board-token-shadow { fill: rgba(0, 0, 0, 0.42); } /* Le socle de camp (ellipse) reprend les styles de l'anneau : couleurs par [data-allegiance], pointilles ennemis. */ .board-token-iso .board-token-ring { stroke-width: 2.5; } .board-token-post { stroke: rgba(0, 0, 0, 0.35); stroke-width: 3; stroke-linecap: round; } .board-svg.is-iso .board-obstacle polygon { opacity: 1; stroke: rgba(0, 0, 0, 0.3); stroke-width: 0.6; } .board-svg.is-iso .board-obstacle.is-selected polygon { stroke: var(--accent); stroke-width: 1.6; } .board-mode-toggle { font-size: 0.72rem; letter-spacing: 0.04em; } /* --- Decor fausse 3D : sprites et eau -------------------------------------------- */ .board-sprite-shadow { fill: rgba(0, 0, 0, 0.4); } .board-sprite-selection { fill: none; stroke: var(--accent-strong); stroke-width: 2; stroke-dasharray: 5 3; } /* Balise du pylone : clignotement lent. */ .board-sprite-light { animation: board-sprite-light 2.4s ease-in-out infinite; } @keyframes board-sprite-light { 0%, 100% { fill-opacity: 1; filter: drop-shadow(0 0 3px rgba(226, 180, 93, 0.9)); } 50% { fill-opacity: 0.35; filter: none; } } /* Eau : surface translucide qui ondule doucement. */ .board-face-eau { fill-opacity: 0.8; animation: board-eau 3.6s ease-in-out infinite; } @keyframes board-eau { 0%, 100% { fill-opacity: 0.8; } 50% { fill-opacity: 0.62; } } .board-eau-vague { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.2; stroke-linecap: round; } /* --- Bibliotheque de lieux (dialog "Charger un lieu") ------------------------ */ .board-map-library { max-width: min(44rem, calc(100vw - 2rem)); } .board-map-library-hint { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.4; } .board-map-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.7rem; max-height: min(24rem, 55vh); overflow-y: auto; } .board-map-card { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; padding: 0; background: var(--surface); cursor: pointer; text-align: left; transition: border-color 150ms ease, transform 150ms ease; } .board-map-card:focus-visible { border-color: var(--accent-strong, #e2b45d); outline: none; transform: translateY(-1px); } @media (hover: hover) { .board-map-card:hover { border-color: var(--accent-strong, #e2b45d); transform: translateY(-1px); } } .board-map-card img { display: block; width: 100%; height: 6.2rem; object-fit: cover; } .board-map-card-name { padding: 0.5rem 0.6rem; color: var(--text); font-size: 0.82rem; font-weight: 700; }