/* Responsive presentation. Game rules and network protocol are unchanged. */
:root { color-scheme:dark; }
body.light { color-scheme:light; }
.overlay.hide { visibility:hidden; }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible {
    outline:3px solid var(--primary);outline-offset:4px;
}
.btn:hover {filter:brightness(1.08)}
#s-home {padding:32px 24px;background:radial-gradient(ellipse at 15% 15%,rgba(64,224,208,.07),transparent 48%),var(--bg);}
.home-layout {display:grid;grid-template-columns:minmax(230px,.85fr) minmax(350px,1.2fr) minmax(250px,.95fr);grid-template-areas:'universe play community';max-width:1380px;gap:24px;align-items:start;margin:auto;}
.home-main {grid-area:play;width:100%;max-height:none;overflow:visible;padding:28px;text-align:left;border-radius:24px;}
.brand-line {display:flex;align-items:center;gap:14px;margin-bottom:26px;}
.brand-line .home-logo {width:46px;margin:0;animation:none;flex-shrink:0;}
.brand-line .title-main {font-size:clamp(.95rem,1.4vw,1.25rem);letter-spacing:1.5px;line-height:1.45;text-shadow:none;}
.welcome-title {font-family:'Orbitron',sans-serif;font-size:1.55rem;line-height:1.35;margin:0 0 10px;}
.welcome-copy {font-size:.8rem;line-height:1.7;color:var(--text);opacity:.66;margin:0 0 24px;}
.home-main .input-group {margin-bottom:18px;width:100%;}
.setup-fields {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.play-section {width:100%;padding-top:20px;border-top:1px solid var(--border);}
.section-kicker {font-size:.65rem;font-weight:800;letter-spacing:1.5px;color:var(--primary);text-transform:uppercase;margin:0 0 14px;}
.play-section + .play-section {margin-top:24px;}
.mode-caption {font-size:.75rem;opacity:.65;line-height:1.6;margin:10px 0 0;}
.online-action {background:transparent;color:var(--text);border:1px solid var(--border);box-shadow:none;width:100%;}
.home-tools {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--border);}
.home-tools .tipeee-link img {height:36px;max-width:84px;object-fit:contain;}
.tool-buttons {display:flex;gap:6px;}
.tool-buttons .btn {min-width:44px;min-height:44px;padding:10px;}
.home-side-col {grid-area:community;width:100%;min-width:0;max-width:none;height:740px;max-height:calc(100dvh - 64px);gap:18px;}
.home-side-col .home-rooms,.home-side-col .home-global-chat {border-radius:22px;margin:0;}
.home-panel-title {letter-spacing:1px;font-size:.62rem;}
.home-panel-header {flex-wrap:wrap;gap:8px;}
.count-badge {font-size:.6rem;}
.universe-card {grid-area:universe;border:1px solid rgba(214,173,98,.25);border-radius:24px;padding:26px;overflow:hidden;background:linear-gradient(160deg,rgba(214,173,98,.06),transparent 65%),var(--card);}
.universe-label {font-size:.62rem;text-transform:uppercase;letter-spacing:2px;color:#d6ad62;font-weight:800;margin:0;}
.universe-art {height:210px;display:grid;place-items:center;position:relative;margin:18px 0;isolation:isolate;}
.universe-art::before {content:'';position:absolute;width:175px;height:175px;border:1px solid rgba(214,173,98,.25);border-radius:50%;box-shadow:0 0 65px rgba(214,173,98,.07);}
.universe-art::after {content:'';position:absolute;width:145px;height:145px;border:1px solid rgba(64,224,208,.2);transform:rotate(45deg);border-radius:28px;z-index:-1;}
.universe-art img {width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 0 22px rgba(64,224,208,.2));}
.universe-card h2 {font-family:'Orbitron',sans-serif;font-size:1.1rem;line-height:1.7;letter-spacing:1px;margin:0 0 12px;}
.universe-card p:not(.universe-label) {font-size:.8rem;line-height:1.8;opacity:.7;margin:0 0 22px;}
.book-link {display:flex;align-items:center;justify-content:space-between;gap:10px;color:#e7c78f;text-decoration:none;font-size:.75rem;font-weight:800;line-height:1.6;min-height:48px;border-top:1px solid rgba(214,173,98,.2);padding-top:16px;}
.book-link:hover {color:var(--text);}
.home-version {position:static;opacity:.4;font-size:.6rem;margin:24px auto 0;}
/* Flexible desktop columns prevent the board from disappearing behind chat. */
@media(min-width:1100px) {
    #app {grid-template-columns:220px minmax(0,1fr) 250px;padding:20px;gap:20px;}
    .side-panel {min-width:0;height:calc(100dvh - 40px);overflow-y:auto;}
    .widget {padding:16px;flex-shrink:0;}
    .timer-block {min-width:0;padding:14px 16px;}
    .timer-val {font-size:clamp(1.8rem,2.4vw,2.5rem);}
    .timer-name {font-size:.65rem;}
    .board-container {min-width:0;min-height:0;}
    .board-wrapper {padding:22px;border-radius:28px;flex-shrink:0;}
    #u-sts {font-size:.85rem;margin-bottom:18px;line-height:1.5;}
    .game-legend {padding:14px;margin-top:0;gap:10px;}
    .legend-item {font-size:.65rem;letter-spacing:.5px;}
    .side-panel .btn-danger {font-size:.7rem;}
    .side-panel .widget:last-child {flex-shrink:1;}
    #i-msg {min-width:0;padding:12px;}
}
@media(min-width:1500px) {
    #app {grid-template-columns:260px minmax(0,1fr) 290px;padding:28px;gap:28px;max-width:1800px;margin:auto;}
    .side-panel {height:calc(100dvh - 56px);}
}
@media(max-width:1099px) {
    #s-home {padding:20px 16px;}
    .home-layout {grid-template-columns:minmax(320px,1.2fr) minmax(260px,1fr);grid-template-areas:'play community' 'universe community';max-width:900px;gap:18px;}
    .home-side-col {height:700px;max-height:none;}
    .universe-card {display:grid;grid-template-columns:90px 1fr;column-gap:20px;padding:22px;}
    .universe-label {grid-column:1 / -1;}
    .universe-art {grid-column:1;grid-row:2 / 5;height:110px;margin:10px 0 0;}
    .universe-art img {width:62px;height:62px;}
    .universe-art::before {width:86px;height:86px;}
    .universe-art::after {width:70px;height:70px;border-radius:16px;}
    .universe-card h2 {grid-column:2;font-size:.95rem;margin:12px 0 6px;}
    .universe-card p:not(.universe-label) {grid-column:2;margin-bottom:10px;font-size:.75rem;}
    .book-link {grid-column:2;font-size:.72rem;}
    .mobile-legend {padding:0 4px!important;gap:12px!important;margin:12px 0 0!important;}
    .board-container {padding-bottom:68px!important;}
    #mobile-chat-fab,#mobile-menu-fab {bottom:max(12px,env(safe-area-inset-bottom));width:46px;height:46px;}
    #mobile-menu-drawer {padding-bottom:max(20px,env(safe-area-inset-bottom));}
    .pc.selected {transform:scale(1.1) translateY(-4px);}
    .cl.target::before,.cl.danger-target::before {inset:34%;}
}
@media(max-width:680px) {
    #s-home {padding:16px 12px max(24px,env(safe-area-inset-bottom));}
    .home-layout {display:flex;flex-direction:column;gap:16px;max-width:480px;}
    .home-main {padding:22px;width:100%;border-radius:22px;}
    .brand-line {margin-bottom:20px;gap:12px;}
    .brand-line .title-main {font-size:.95rem;}
    .welcome-title {font-size:1.3rem;}
    .welcome-copy {margin-bottom:20px;}
    .home-side-col {width:100%;max-width:none;height:auto;gap:16px;}
    .home-side-col .home-rooms {min-height:180px;max-height:260px;}
    .home-side-col .home-global-chat {height:300px;min-height:260px;max-height:340px;}
    .universe-card {width:100%;order:3;}
    .setup-fields {grid-template-columns:1fr;gap:0;}
    .btn {font-size:.75rem;padding:14px 16px;}
    .panel:not(.home-main) {max-width:calc(100% - 24px);}
}
@media(max-width:1099px) and (max-height:500px) {
    .board-container {padding-bottom:6px!important;}
    .mobile-legend {display:none!important;}
    #mobile-chat-fab,#mobile-menu-fab {width:40px;height:40px;}
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}
body.light .universe-label,body.light .book-link {color:#865f24;}
/* Official cover artwork: only the front is framed; source images stay intact. */
.universe-card.books-library {display:block;padding:22px;}
.books-library h2 {font-size:1.05rem;margin:14px 0 6px;line-height:1.5;}
.books-library .library-intro {font-size:.73rem!important;margin:0 0 20px!important;}
.books-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;}
.book-card {appearance:none;background:transparent;border:0;padding:0;text-align:left;color:var(--text);font:inherit;cursor:pointer;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;}
.book-cover-slot {display:flex;align-items:flex-start;justify-content:center;width:100%;aspect-ratio:.663;flex-shrink:0;}
.book-card .book-cover-slot .cover-front {height:100%;width:auto;max-width:100%;flex-shrink:0;}
.cover-front {display:block;position:relative;aspect-ratio:.62;overflow:hidden;background:#fafafa;border-radius:2px 5px 5px 2px;box-shadow:0 8px 18px rgba(0,0,0,.3);isolation:isolate;}
.cover-front img {position:absolute;right:0;top:0;height:100%;width:auto;max-width:none;display:block;}
.cover-front img[src$="tome-3.webp"] {right:-2px;top:-2px;height:calc(100% + 4px);}
.cover-front.integrale-cover {aspect-ratio:.663;background:#19948f;}
.integrale-cover img {width:285.714%;height:106.509%;left:-157.738%;top:-3.254%;right:auto;}
.book-card .cover-front {transition:transform .2s,box-shadow .2s;}
.book-card:hover .cover-front {box-shadow:0 12px 24px rgba(0,0,0,.4);}
.book-number {display:block;color:#d6ad62;font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin:10px 0 5px;}
.book-title {display:block;font-size:.68rem;font-weight:600;line-height:1.5;min-height:3em;}
.library-amazon {margin-top:22px;}
#book-dialog {width:min(650px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto;padding:32px;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.6);}
#book-dialog:not([open]) {display:none;}
#book-dialog::backdrop {background:rgba(2,6,23,.85);backdrop-filter:blur(6px);}
.book-dialog-layout {display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:center;}
.book-dialog-copy h2 {font-family:'Orbitron',sans-serif;font-size:1.2rem;line-height:1.6;margin:12px 0 18px;}
.book-dialog-copy p {font-size:.85rem;line-height:1.9;opacity:.8;}
.book-dialog-close {position:absolute;right:12px;top:10px;background:transparent;color:var(--text);border:0;min-width:44px;min-height:44px;font-size:1.5rem;cursor:pointer;border-radius:50%;}
.book-dialog-copy .universe-label {font-size:.65rem;}
@media(max-width:1099px) and (min-width:681px) {
    .books-grid {gap:16px;}
    .book-card {display:grid;grid-template-columns:60px 1fr;column-gap:12px;align-content:start;}
    .book-card .book-cover-slot {grid-row:1 / 3;width:60px;align-self:start;}
    .book-number {margin-top:4px;}
}
@media(max-width:680px) {
    .books-library .books-grid {gap:24px 20px;}
    .books-library .book-title {font-size:.77rem;}
    .books-library .book-number {font-size:.62rem;}
    #book-dialog {padding:48px 24px 28px;}
    .book-dialog-layout {grid-template-columns:1fr;gap:24px;}
    .book-dialog-layout .cover-front {width:min(200px,65vw);margin:auto;}
    .book-dialog-copy h2 {font-size:1.05rem;}
}
body.light .book-number {color:#865f24;}
.brand-line {position:relative;}
.app-version {position:absolute;right:0;bottom:-14px;font-size:.56rem;letter-spacing:.6px;opacity:.55;white-space:nowrap;}
[hidden] {display:none!important;}
select {
    appearance:none;-webkit-appearance:none;
    padding-right:46px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m3 5 4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 16px center;background-size:14px 14px;
}
.mode-picker {padding-top:18px;border-top:1px solid var(--border);}
.play-section[hidden]+.play-section {margin-top:0;}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.home-global-chat {box-shadow:none!important;padding:20px!important;}
.home-side-col .home-global-chat {max-height:none;}
.global-chat-header {padding-bottom:16px;border-bottom:1px solid var(--border);flex-shrink:0;}
.global-chat-heading {display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.global-chat-heading h2 {font-family:'Orbitron',sans-serif;font-size:.78rem;letter-spacing:.4px;margin:0;flex:1;}
.global-chat-header p {font-size:.72rem;line-height:1.6;opacity:.6;margin:12px 0;}
.global-chat-meta {display:flex;justify-content:space-between;gap:8px;font-size:.62rem;opacity:.7;}
#global-chat-status {color:var(--primary);}
.chat-login {margin:14px 0 0;padding:10px 12px;background:rgba(64,224,208,.06);border:1px solid rgba(64,224,208,.15);border-radius:10px;font-size:.7rem;line-height:1.6;flex-shrink:0;}
.chat-login p {margin:0;}
.chat-login.hidden {display:none;}
.global-chat-stage {position:relative;flex:1;min-height:100px;display:flex;margin:16px 0;}
.global-msg-area {flex:1;min-width:0;min-height:0;margin:0;padding:0 3px 0 0;gap:14px;scrollbar-color:var(--border) transparent;}
.global-chat-empty {position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px;padding:12px;pointer-events:none;}
.global-chat-empty i {font-size:1.8rem;color:var(--primary);opacity:.6;}
.global-chat-empty strong {font-size:.75rem;line-height:1.6;}
.global-chat-empty span {font-size:.7rem;line-height:1.8;opacity:.5;max-width:220px;}
.chat-message {display:flex;gap:8px;align-items:flex-start;flex-shrink:0;min-width:0;}
.chat-avatar {width:28px;height:28px;border-radius:9px;background:rgba(64,224,208,.1);color:var(--primary);font-size:.7rem;display:grid;place-items:center;font-weight:800;flex-shrink:0;}
.chat-bubble {background:rgba(255,255,255,.035);border:1px solid var(--border);padding:10px 12px;border-radius:0 12px 12px 12px;flex:1;min-width:0;}
.chat-message.own .chat-bubble {border-color:rgba(64,224,208,.22);background:rgba(64,224,208,.045);}
.chat-message-header {display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px;}
.chat-message-header strong {font-size:.66rem;color:var(--primary);overflow-wrap:anywhere;}
.chat-message-header time {font-size:.58rem;opacity:.4;white-space:nowrap;}
.chat-bubble p {font-size:.76rem;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;margin:0;}
.global-chat-retention {display:flex;justify-content:space-between;gap:8px;font-size:.57rem;line-height:1.6;opacity:.5;flex-shrink:0;margin-bottom:10px;flex-wrap:wrap;}
.global-input-row {margin:0;gap:8px;align-items:center;flex-shrink:0;}
.global-input-row input {min-width:0;padding:12px;border-width:1px;border-radius:12px;}
.global-send-btn {width:44px;height:44px;border-radius:12px;background:var(--primary);color:#031718;box-shadow:none;flex-shrink:0;}
.global-send-btn:hover {background:var(--primary);}
.global-send-btn:disabled {opacity:.3;cursor:default;transform:none;}
.global-composer-hint {display:flex;justify-content:space-between;gap:8px;font-size:.57rem;opacity:.4;margin-top:8px;flex-shrink:0;}
.global-chat-stage .chat-scroll-btn {bottom:4px;}
body.light .chat-bubble {background:rgba(15,23,42,.025);}
@media(max-width:680px) {
    .home-side-col .home-global-chat {height:410px;min-height:340px;max-height:450px;}
}

/* Rétablit le mouvement 3D doux des livres au survol, tout en conservant l'accessibilité clavier */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .books-library .book-card .cover-front{transform-origin:center 75%;transition:transform .35s cubic-bezier(.2,.85,.3,1),box-shadow .35s ease;will-change:transform}
  .books-library .book-card:hover .cover-front,.books-library .book-card:focus-visible .cover-front{transform:perspective(750px) rotateY(-11deg) rotateX(4deg) translateY(-9px) scale(1.045);box-shadow:10px 20px 35px rgba(0,0,0,.52)}
}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}