/* ============================================================================= Crownquest — app.css (thin slice) Grounded in the established Crownquest identity: Cinzel display, Inter body, a stone/parchment/gold palette. --accent / --accent2 are set per-page from the town's guild, so the same stylesheet themes Valor (warm) and Vanguard (cool) without a second file. ========================================================================== */ :root{ --stone-950:#141110; --stone-900:#1c1815; --stone-800:#28221d; --stone-700:#3a3128; --parchment:#e8dcc4; --parchment-dim:#a99c82; --gold:#c9a227; /* --accent / --accent2 injected inline on from the guild theme */ --accent:#c9a227; --accent2:#8c2f2f; --gold-food:#8fae6b; --gold-wood:#b98b4e; --gold-stone:#9aa0a6; --gold-metal:#c07a52; } *{box-sizing:border-box;} /* The [hidden] attribute must always win over component display rules (e.g. .build-panel/.sel-controls use display:flex, which otherwise beats the browser default and leaves them visible when they should be closed). */ [hidden]{ display:none !important; } html,body{ margin:0; height:100%; background:var(--stone-950); color:var(--parchment); font-family:'Inter',system-ui,sans-serif; overflow:hidden; } h1,.brand__mark{font-family:'Cinzel',serif;} /* ---------- Top bar ---------- */ .topbar{ position:fixed; inset:0 0 auto 0; z-index:10; height:58px; display:flex; align-items:center; gap:20px; padding:0 18px; background:linear-gradient(180deg, rgba(20,17,16,.96), rgba(20,17,16,.72) 70%, transparent); border-bottom:1px solid var(--stone-700); } .brand{display:flex; flex-direction:column; line-height:1.05;} .brand__mark{ font-size:20px; font-weight:700; letter-spacing:.06em; color:var(--parchment); } .brand__mark::first-letter{color:var(--accent);} .brand__ver{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--parchment-dim);} .identity{margin-left:auto; display:flex; align-items:center; gap:10px;} .identity__governor{font-family:'Cinzel',serif; font-weight:600; font-size:15px;} .guild-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--parchment); background:var(--accent); padding:3px 9px 3px 6px; border-radius:999px; border:1px solid var(--accent2); } .guild-chip .emblem{ width:16px; height:16px; display:block; flex:0 0 auto; } .resources{display:flex; gap:6px; align-items:center;} .res{ font-family:'Cinzel',serif; font-weight:600; font-size:13px; padding:4px 9px 4px 22px; border-radius:5px; background:var(--stone-800); border:1px solid var(--stone-700); position:relative; } .res::before{ content:""; position:absolute; left:7px; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:2px; } .res--gold::before{background:var(--gold);} .res--food::before{background:var(--gold-food); border-radius:50%;} .res--wood::before{background:var(--gold-wood);} .res--stone::before{background:var(--gold-stone); transform:translateY(-50%) rotate(45deg);} .res--metal::before{background:var(--gold-metal);} .res--full{ box-shadow:inset 0 0 0 1px #b5892a; color:#e8c974; } /* ---------- Stage ---------- */ .stage{ position:relative; height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 35%, #241d16 0%, var(--stone-950) 72%); } #board{ display:block; max-width:100%; max-height:100%; touch-action:none; cursor:default; filter:drop-shadow(0 24px 48px rgba(0,0,0,.5)); } #board.panning{cursor:grabbing;} .stage__caption{ position:absolute; top:74px; left:50%; transform:translateX(-50%); text-align:center; pointer-events:none; text-shadow:0 2px 10px rgba(0,0,0,.7); } .stage__caption h1{margin:0; font-size:22px; color:var(--parchment);} .stage__caption h1::after{ content:""; display:block; width:46px; height:2px; margin:7px auto 0; background:var(--accent); } .stage__caption p{margin:6px 0 0; font-size:12px; color:var(--parchment-dim); letter-spacing:.03em;} .hint{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); font-size:11.5px; color:var(--parchment-dim); text-align:center; background:rgba(20,17,16,.7); padding:6px 14px; border-radius:20px; border:1px solid var(--stone-700); } @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} } /* ---------- Chunk 1 additions: logout control + empty state ---------- */ .logout{ margin-left:6px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--parchment-dim); text-decoration:none; padding:5px 10px; border:1px solid var(--stone-700); border-radius:999px; transition:border-color .15s ease, color .15s ease; } .logout:hover{ color:var(--parchment); border-color:var(--accent); } .empty{ margin:auto; text-align:center; max-width:420px; padding:24px; } .empty h1{ font-family:'Cinzel',serif; font-size:24px; margin:0 0 8px; color:var(--parchment); } .empty p{ font-size:13px; color:var(--parchment-dim); line-height:1.5; }