/* Guilde des aventuriers — the portal's presentation, independent of USB and auth. */
:root { --gold:#b88b4d; --gold-lt:#e5bd7d; --text:#ede4d4; --muted:#c0b39e; --panel:#141413; --border:#56432c; }
body { background:#0c0c0b url('/portail/assets/guild-hall.png') center top / cover fixed no-repeat; }
.workspace { display:block; min-height:100svh; padding:0 clamp(20px,4.2vw,72px); max-width:1720px; margin:auto; }
.sidebar { position:relative; top:auto; height:auto; overflow:visible; display:flex; flex-direction:row; align-items:center; gap:24px; padding:22px 28px; background:linear-gradient(135deg,#121311f5,#080909f5); border:1px solid #8e6a3f70; border-top:0; box-shadow:0 12px 35px #0008; }
.sidebar .brand { margin:0; flex-shrink:0; }
.sidebar .brand img { width:190px; image-rendering:auto; }
.sidebar .brand small { font-size:.6rem; letter-spacing:.22em; }
.sidebar .nav-heading,.sidebar-bottom>p,.sidebar-bottom>.shard-label { display:none; }
.sidebar nav { display:flex; flex:1; flex-wrap:wrap; align-items:center; justify-content:center; gap:0; }
.sidebar nav button { display:flex; align-items:center; justify-content:center; gap:9px; padding:10px 13px; border:0; border-radius:0; font-family:var(--body); font-size:1.1rem; white-space:nowrap; }
.sidebar nav button+button { border-left:1px solid #76624366; }
.sidebar nav button svg { width:24px; height:24px; flex-shrink:0; color:var(--gold-lt); }
.sidebar nav button[aria-current] { background:linear-gradient(0deg,#c9933a16,transparent); box-shadow:0 2px var(--gold); color:#ffe0a5; }

.sidebar-bottom { flex-shrink:0; margin:0; padding:0 0 0 18px; border:0; border-left:1px solid #76624366; }
.sidebar-bottom .shard-balance { gap:6px; font-size:1.15rem; color:var(--gold-lt); }
.sidebar-bottom strong { font:400 1.45rem/1.3 var(--body); }
.sidebar-bottom img { width:28px; height:38px; }
.sidebar-bottom #logout { font-size:.85rem; display:block; margin:5px auto 0; }
.content { max-width:none; padding:0; }
.topbar.guild-connection { position:relative; top:auto; z-index:auto; min-height:192px; margin:28px 0 30px; padding:26px 36px; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(190px,.8fr) minmax(100px,.65fr); gap:26px; border:1px solid #b490587d; border-radius:2px 12px 2px 12px; background:linear-gradient(90deg,#0d0f0ffe 48%,#0c0e0ec7 68%,#0c0e0e38),url('/portail/assets/guild-hall.png') right 12% / cover; box-shadow:0 10px 26px #0006; }
.guild-connection .watch-presence { gap:24px; }
.guild-connection .watch-presence-icon { width:84px; height:116px; border:0; border-radius:0; background:transparent; color:var(--gold-lt); }
.guild-connection .watch-presence-icon svg { width:78px; height:100px; stroke-width:1.25; }
.guild-connection .watch-presence[data-state='connected'] .watch-presence-icon { border:0; box-shadow:none; }
.guild-connection .watch-presence-check { width:20px; height:20px; right:0; bottom:8px; background:#42c981; }
.guild-connection .watch-presence-copy { gap:8px; }
.guild-connection .watch-presence-name { font:500 clamp(1.35rem,2.2vw,2.05rem)/1.3 var(--heading); color:#f3e5c9; margin:0; }
.guild-connection #connection-state { font-size:1.2rem; color:var(--text); }
.guild-connection #connection-state::before { content:''; display:inline-block; width:10px; height:10px; border-radius:50%; background:#988d7d; margin-right:10px; }
.guild-connection [data-state='connected'] #connection-state::before { background:#42c981; box-shadow:0 0 12px #42c98130; }
.guild-connection [data-state='connecting'] #connection-state::before,.guild-connection [data-state='updating'] #connection-state::before { background:#e5bd7d; }
.watch-description { font-size:.98rem; line-height:1.45; color:var(--muted); max-width:430px; }
.connection-actions { border-left:1px solid #b490587d; padding-left:26px; }
.connection-actions .button { width:100%; font-size:1.05rem; }
.guild-motto { text-align:right; color:#edc982; font:400 .72rem/2.1 var(--heading); letter-spacing:.16em; text-shadow:0 2px 6px #000; }
.guild-motto span { display:block; font-size:1.5rem; }
.guild-section-title { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); }
.action-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; padding-top:10px; }
.action-grid .guild-function { position:relative; align-items:center; text-align:center; min-height:470px; padding:34px 22px 24px; border:1px solid #b89458; border-radius:3px 8px 5px 11px; background:radial-gradient(ellipse at top,#ffffff06,transparent 70%),linear-gradient(130deg,#1c1d1bfa,#0c0e0dfc); box-shadow:inset 0 0 0 3px #15150f,inset 0 0 0 4px #94713b60,0 12px 28px #0009; }
.guild-function::before { content:'✧'; position:absolute; top:-17px; left:calc(50% - 17px); display:grid; place-items:center; width:34px; height:34px; border:1px solid #d2b17c; border-radius:50%; background:radial-gradient(circle at 35% 25%,#8b6c3e,#342816 70%); box-shadow:0 3px 6px #000b,inset 0 0 0 3px #b48a4540; color:#f5d29a; font-size:1.25rem; }
.action-grid .function-heading { flex-direction:column; gap:25px; margin:0 0 18px; width:100%; }
.action-grid .function-icon { position:relative; width:126px; height:126px; border:1px solid #aa813444; border-radius:50%; background:radial-gradient(circle,#9b703312,transparent 65%); margin-top:2px; }
.action-grid .function-icon::after { content:'✧'; position:absolute; bottom:-15px; left:calc(50% - 7px); color:#907244; font-size:20px; }
.action-grid .function-icon svg { width:78px; height:78px; stroke-width:1.1; filter:drop-shadow(0 2px 2px #000); }
.action-grid .function-icon img { width:66px; height:90px; }
.action-grid h3 { font-family:var(--body); font-size:2rem; font-weight:400; color:#f4e7cc; }
.action-grid .guild-function p { font-size:1.14rem; line-height:1.45; margin:0 0 14px; max-width:255px; }
.action-grid .button { align-self:stretch; justify-content:center; margin-top:auto; padding:13px 10px; font-family:var(--body); font-size:1.09rem; line-height:1.4; color:#1c160d; border:1px solid #e2c18e; border-radius:5px; background:linear-gradient(115deg,#e4bc7a,#bd914d 70%,#d1a767); box-shadow:inset 0 1px 0 #fff7,0 4px 9px #0007; }
.action-grid .button:not(:disabled):hover { background:linear-gradient(115deg,#f6d69c,#d3a762); transform:translateY(-1px); }
.action-grid .button:disabled { opacity:.64; }
.guild-card-caption { color:#bbae95; font:400 .59rem/1.8 var(--heading); letter-spacing:.16em; margin-top:23px; min-height:32px; display:grid; place-items:center; }
.reward-balance { border:1px solid #8e724b; border-radius:4px; padding:6px 10px; justify-content:center; width:100%; line-height:1.25; font-size:1rem; margin:0 0 16px; }
.reward-balance img { width:20px; height:25px; }
.reward-balance strong { font:600 1rem var(--body); }
.legacy-card { margin-top:32px; padding:0; background:#101211d9; border:1px solid #7a63394d; border-left:0; border-right:0; border-radius:0; }
.legacy-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 4px; cursor:pointer; list-style:none; }
.legacy-summary::-webkit-details-marker { display:none; }
.legacy-summary .function-heading { margin:0; }
.legacy-summary .function-icon,.legacy-summary .eyebrow { display:none; }
.legacy-summary h2 { font:400 1.12rem var(--body); color:var(--text); margin:0; }
.legacy-chevron { font-size:1.4rem; color:var(--gold-lt); }
.legacy-card[open]>.legacy-summary .legacy-chevron { transform:rotate(180deg); }
.legacy-card[open] { padding:0 24px 24px; }
.legacy-summary:focus-visible { outline:2px solid var(--gold-lt); outline-offset:4px; }
.footer { margin-top:28px; padding:24px 0 30px; border:0; }
.page-heading { padding-top:12px; }
.login-brand { background:linear-gradient(90deg,#090b0ba8,#090b0b50),url('/portail/assets/guild-hall.png') 78% center/cover; }
.login-form-wrap { background:#0c0e0ef2; }
.login-form h2 { color:#f3e5c9; }
@media(min-width:1500px) { .action-grid .guild-function { min-height:510px; padding:40px 28px 25px; } .action-grid .function-heading { gap:28px; } .action-grid .function-icon { width:142px; height:142px; } }
@media(max-width:1200px) { .sidebar { flex-wrap:wrap; justify-content:space-between; padding:18px 22px; gap:14px; } .sidebar nav { order:3; flex-basis:100%; justify-content:space-between; } .sidebar-bottom { display:flex; gap:18px; align-items:center; } .sidebar-bottom #logout { margin:0; } .guild-motto { display:none; } .topbar.guild-connection { grid-template-columns:minmax(0,1fr) 260px; padding:24px; } .action-grid { gap:14px; } .action-grid .guild-function { padding:30px 16px 18px; } .action-grid .button { font-size:1rem; } }
@media(max-width:950px) { .workspace { padding:0 24px; } .action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 22px; } .action-grid .guild-function { min-height:415px; } .sidebar nav button { font-size:1rem; padding:10px; } .sidebar nav button svg { width:20px; }  .topbar.guild-connection { grid-template-columns:minmax(0,1fr) 210px; gap:18px; } .guild-connection .watch-presence { gap:14px; } .guild-connection .watch-presence-icon { width:60px; } .guild-connection .watch-presence-icon svg { width:58px; } .connection-actions { padding-left:18px; } }
@media(max-width:650px) { body { background-attachment:scroll; background-size:auto 1100px; } .workspace { padding:0 16px; } .sidebar { margin:0 -16px; padding:16px; } .sidebar .brand img { width:140px; } .sidebar .brand small { font-size:.5rem; } .sidebar-bottom { padding:0; border:0; display:block; } .sidebar-bottom .shard-balance { font-size:.95rem; } .sidebar-bottom strong { font-size:1.2rem; } .sidebar-bottom #logout { margin:6px 0 0; font-size:.78rem; } .sidebar nav { justify-content:flex-start; gap:6px 0; } .sidebar nav button { flex:1 0 30%; padding:8px 5px; font-size:.95rem; border:0!important; } .sidebar nav button svg { width:18px; }  .topbar.guild-connection { grid-template-columns:1fr; margin:20px 0 24px; padding:22px 18px; gap:18px; background-position:70% top; } .guild-connection .watch-presence-icon { height:86px; } .guild-connection .watch-presence-icon svg { height:80px; } .guild-connection .watch-presence-name { font-size:1.3rem; } .guild-connection #connection-state { font-size:1.06rem; } .watch-description { font-size:.96rem; } .connection-actions { border:0; padding:0; } .connection-actions .button { width:100%; } .action-grid { grid-template-columns:1fr; gap:28px; } .action-grid .guild-function { min-height:0; padding:30px 24px 20px; } .action-grid .function-heading { gap:15px; } .action-grid .function-icon { width:98px; height:98px; } .action-grid .function-icon svg { width:62px; height:62px; } .action-grid .function-icon img { width:50px; height:72px; } .action-grid h3 { font-size:1.8rem; } .action-grid .guild-function p { max-width:100%; flex:auto; margin-bottom:22px; } .action-grid .button { font-size:1.15rem; } .guild-card-caption { min-height:0; margin-top:18px; } .legacy-card[open] { padding:0 14px 18px; } .footer { flex-direction:column; gap:4px; } }
@media(prefers-reduced-motion:reduce) { .action-grid .button { transition:none; transform:none!important; } }

/* Official Runara case and strap, illustrated from the owner's product photo. */
.guild-connection .watch-presence-icon.official-watch { width:128px; height:192px; }
.official-watch-image { display:block; width:100%; height:100%; object-fit:contain; transition:opacity .25s; }
.watch-presence[data-state='disconnected'] .official-watch-image { opacity:.75; }
.guild-connection .official-watch .watch-presence-check,.official-watch-off { position:absolute; right:0; bottom:32px; width:25px; height:25px; border:2px solid #101211; border-radius:50%; font:700 16px/21px system-ui,sans-serif; text-align:center; }
.official-watch-off { color:#eee5d3; background:#5d5951; }
.watch-link-screen { position:absolute; top:23%; left:25%; width:50%; height:33%; display:none; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:3px; color:#a5ffcb; background:radial-gradient(ellipse,#27894f75,#0e2d1b99); box-shadow:inset 0 0 12px #68ffad22; pointer-events:none; }
.guild-connection .official-watch .watch-link-screen svg { width:58%; height:auto; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.watch-link-screen>span { font:700 clamp(7px,.7vw,10px)/1 system-ui,sans-serif; letter-spacing:.12em; }
.watch-presence[data-state='connected'] .watch-link-screen { display:flex; }
.watch-presence[data-state='connected'] .official-watch-image { opacity:1; filter:drop-shadow(0 0 9px #e5bd7d80); }
.watch-presence[data-state='connected'] .official-watch::before { content:''; position:absolute; inset:8% -8%; z-index:-1; border-radius:42%; background:radial-gradient(ellipse,#d4ad5338,transparent 72%); animation:runara-connected-glow 2.6s ease-in-out infinite; }
.guild-connection .official-watch { isolation:isolate; }
.guild-connection .watch-presence[data-state='connected'] #connection-state { width:fit-content; padding:4px 12px; color:#b7f6d2; background:#19472c99; border:1px solid #70d99c88; border-radius:20px; font-weight:600; }
@keyframes runara-connected-glow { 0%,100% { opacity:.45; transform:scale(.95); } 50% { opacity:1; transform:scale(1.12); } }
@media(prefers-reduced-motion:reduce) { .watch-presence[data-state='connected'] .official-watch::before { animation:none; opacity:.75; } }
.guild-connection .official-watch .watch-presence-check { color:#081b0d; background:#42c981; }
@media(max-width:950px) { .guild-connection .watch-presence-icon.official-watch { width:100px; height:150px; } }
@media(max-width:650px) { .guild-connection .watch-presence-icon.official-watch { width:86px; height:129px; } .guild-connection .official-watch .watch-presence-check,.official-watch-off { bottom:18px; right:-2px; } }

.review-badge { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; margin-left:7px; border-radius:999px; background:#b94235; color:#fff; font:700 12px/1 system-ui,sans-serif; box-shadow:0 0 0 1px #f1c98b66; flex-shrink:0; }
.review-badge[hidden] { display:none; }