/* ÉPOPÉE — Hubs à icônes directes (Salon et Arène). Une icône = un toucher = l'écran s'ouvre. */
.hub-surface{width:min(1100px,100%);display:flex;flex-direction:column;align-items:center;gap:22px}
.hub-grid{width:100%;display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.hub-grid.salon .hub-tile.big,.hub-grid.arena .hub-tile.big{grid-column:span 3}
.hub-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;min-height:44px;padding:16px 14px 18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,#1a2433e6,#111823e6);color:#f4eee0;text-align:center;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;-webkit-user-select:none;user-select:none;touch-action:manipulation;font:inherit}
.hub-tile:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 14px 34px #0007,0 0 0 1px #dfb76840 inset}
.hub-tile:active{transform:scale(.98)}
.hub-tile:focus-visible{outline:3px solid #f0c575;outline-offset:4px}
.hub-tile.big{flex-direction:row;justify-content:center;gap:26px;padding:18px 26px;text-align:left}
.hub-art{display:flex;align-items:center;justify-content:center;width:100%;height:clamp(110px,15vw,180px);overflow:hidden}
.hub-tile.big .hub-art{width:min(380px,48%);height:clamp(150px,20vw,240px)}
.hub-art img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 12px 18px #0009);pointer-events:none}
.hub-art.round img{height:92%;max-height:92%;aspect-ratio:1;border-radius:50%;object-fit:cover}
.hub-art.portrait img{object-fit:contain}
.hub-text strong{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(21px,2.2vw,27px);font-weight:600;color:#f6e7c4;line-height:1.15}
.hub-text small{display:block;margin-top:5px;color:var(--muted);font-size:13px;line-height:1.4}
.hub-badge{position:absolute;top:10px;right:10px;padding:3px 9px;border:1px solid var(--gold);border-radius:999px;background:#0e141dee;color:var(--gold);font-size:12px;font-weight:700}
.hub-level{display:grid;place-items:center;height:92%;max-width:100%;aspect-ratio:1;border:2px solid var(--gold);border-radius:50%;background:radial-gradient(circle,#2a3446,#121925);box-shadow:0 0 30px #dfb76830}
.hub-level b{font-family:Georgia,serif;font-size:clamp(40px,5vw,58px);color:var(--gold);line-height:1}
.hub-level small{color:var(--muted);letter-spacing:3px;text-transform:uppercase;font-size:11px;margin-top:-18px}
.hub-glyph{font-size:64px;filter:grayscale(.2) sepia(.6)}
.account-btn{border:1px solid var(--line);background:#121a27;color:var(--gold);border-radius:999px;padding:9px 16px;min-height:40px;font-size:13px;white-space:nowrap;max-width:44vw;overflow:hidden;text-overflow:ellipsis}
.account-btn:hover{border-color:var(--gold)}
.copyright{color:#7d8290;letter-spacing:1px}
.account-dialog .account-body{display:grid;gap:12px}
.account-form{display:grid;gap:12px}.account-form label{display:grid;gap:6px;font-size:14px;color:#e9ddc6}
.account-form input{background:#0e1723;border:1px solid #67728290;color:#fff;border-radius:6px;padding:12px;font-size:16px}
.account-actions{display:flex;gap:10px;flex-wrap:wrap}.account-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:0}.account-facts div{background:#1d2532;border-radius:8px;padding:10px}.account-facts dt{font-size:12px;color:var(--muted)}.account-facts dd{margin:4px 0 0;color:var(--gold)}
#salon-toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translate(-50%,30px);opacity:0;pointer-events:none;z-index:60;max-width:min(560px,calc(100% - 32px));background:#151d2a;border:1px solid var(--gold);color:#f4eee0;border-radius:12px;padding:12px 18px;font-size:14px;transition:.3s;box-shadow:0 12px 30px #0008}
#salon-toast.on{opacity:1;transform:translate(-50%,0)}
.daily-reward{display:grid;grid-template-columns:90px 1fr;gap:6px 16px;align-items:center;text-align:left;margin:16px 0;padding:14px;border:1px solid var(--line);border-radius:12px;background:#121a27}
.daily-reward img{grid-row:span 2;width:90px;filter:drop-shadow(0 8px 12px #0008)}.daily-reward p{margin:0}
.wheel-aside{font-size:13px;color:var(--muted);line-height:1.6;margin:6px 0}.ranked-note{color:var(--gold)!important}
.ladder{width:min(760px,100%);text-align:center}.ladder-tabs{display:flex;gap:10px;justify-content:center;margin:18px 0}.ladder-tabs [aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.ladder-scroll{overflow-x:auto}.ladder table{width:100%;border-collapse:collapse}.ladder th,.ladder td{padding:10px;border-bottom:1px solid var(--line)}.ladder tr.me td{color:var(--gold);font-weight:700}
@media (max-width:820px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hub-grid.salon .hub-tile.big,.hub-grid.arena .hub-tile.big{grid-column:span 2}.hub-art{height:130px}}
@media (max-width:520px){header{padding:14px 16px;gap:10px;flex-wrap:wrap}.header-note,time{display:none}main{padding:18px 16px 28px}.hub-tile{padding:12px 10px 14px;border-radius:14px}.hub-tile.big{flex-direction:column;text-align:center;gap:8px;padding:14px}.hub-tile.big .hub-art{width:100%;height:150px}.hub-art{height:104px}.hub-text strong{font-size:19px}.hub-text small{font-size:12px}.hub-badge{top:6px;right:6px;font-size:11px}footer{flex-wrap:wrap;justify-content:center;text-align:center}.daily-reward{grid-template-columns:64px 1fr}.daily-reward img{width:64px}}
@media (prefers-reduced-motion:reduce){.hub-tile{transition:none}.hub-tile:hover{transform:none}}