/* Dungeons product reset: one composition layer for five explicit work modes. */
:root { --night:#10120f; --panel:#181b17; --panel-raised:#20241e; --line:#3b4037; --ink:#f3eddf; --muted:#aaa99d; --gold:#d6ad5c; --gold-light:#f0cf8e; --green:#82a978; --red:#bd6963; --blue:#789ab0; --shadow:0 22px 60px rgb(0 0 0 / 28%); }
body { background:radial-gradient(circle at 8% 0,rgb(214 173 92 / 8%),transparent 30rem),linear-gradient(180deg,#121510,#0d0f0c 62%); }
body::before { background:none; }
.site-header { min-height:4.25rem; grid-template-columns:minmax(10rem,1fr) auto minmax(15rem,1fr); padding:.55rem clamp(.8rem,2.5vw,2.5rem); border-color:rgb(255 255 255 / 8%); background:rgb(14 16 13 / 94%); }
.brand-mark { width:2.35rem; height:2.35rem; border:1px solid var(--gold); border-radius:.55rem; clip-path:none; background:transparent; color:var(--gold-light); font:1rem Georgia,serif; }
.brand strong { font-size:1rem; letter-spacing:.01em; }
.brand small { font-size:.62rem; }
.mode-nav { gap:.18rem; padding:.22rem; border:1px solid rgb(255 255 255 / 7%); border-radius:.65rem; background:rgb(255 255 255 / 2%); }
.mode-nav a { padding:.48rem .68rem; border-radius:.42rem; color:var(--muted); font-size:.76rem; font-weight:760; }
.mode-nav a:hover { color:var(--ink); }
.mode-nav a[aria-current="page"] { background:var(--ink); color:#151610; }
.identity-controls { align-items:center; }
.header-messages { padding:.45rem .6rem; color:var(--muted); font-size:.76rem; font-weight:760; }
.header-messages[aria-current="page"] { color:var(--gold-light); }
.page { padding-top:2.2rem; }
.mode-page { width:min(1240px,calc(100% - 2rem)); }
.mode-header,.messages-mode-header { display:flex; align-items:end; justify-content:space-between; gap:2rem; padding:clamp(1rem,3vw,2.5rem) 0 2rem; border-bottom:1px solid var(--line); }
.mode-header h1,.messages-mode-header h1 { max-width:15ch; font-size:clamp(2.15rem,5vw,4.6rem); letter-spacing:-.045em; }
.mode-header p:not(.mode-label),.messages-mode-header p:not(.mode-label) { max-width:48rem; margin:.85rem 0 0; color:var(--muted); line-height:1.6; }
.mode-label { margin:0 0 .55rem; color:var(--gold); font-size:.68rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.mode-launcher { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:1rem 0 2.5rem; border:1px solid var(--line); border-radius:.7rem; overflow:hidden; }
.mode-launcher a { display:grid; min-height:8.5rem; align-content:space-between; gap:.35rem; padding:1rem; border-right:1px solid var(--line); background:rgb(255 255 255 / 1.5%); color:var(--ink); }
.mode-launcher a:last-child { border-right:0; }
.mode-launcher a:hover { background:rgb(214 173 92 / 8%); }
.mode-launcher span { color:var(--gold); font:700 .7rem/1 ui-monospace,monospace; }
.mode-launcher strong { align-self:end; font:600 1.15rem/1.1 Georgia,serif; }
.mode-launcher small { color:var(--muted); }
.mode-section { margin-top:2rem; }
.mode-section-head,.mode-toolbar { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:.8rem; }
.mode-toolbar { align-items:center; margin:1.1rem 0; padding:.8rem 0; border-bottom:1px solid var(--line); }
.mode-toolbar div { display:grid; gap:.2rem; }
.mode-toolbar span { color:var(--muted); font-size:.78rem; }
.mode-card-grid,.ux-campaign-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.mode-empty,.ux-empty { grid-column:1/-1; padding:2rem; border:1px dashed var(--line); border-radius:.65rem; color:var(--muted); }
.mode-empty strong { display:block; color:var(--ink); font:600 1.2rem Georgia,serif; }
.mode-empty p { margin:.4rem 0 1rem; }
.dmless-entry { display:grid; grid-template-columns:minmax(0,1fr) minmax(20rem,.8fr); gap:.8rem; margin-top:1rem; }
.dmless-entry form,.dmless-entry aside { padding:clamp(1rem,3vw,2rem); border:1px solid var(--line); border-radius:.65rem; background:var(--panel); }
.dmless-entry aside { background:rgb(214 173 92 / 5%); }
.dmless-entry aside p:not(.mode-label),.dmless-entry li { color:var(--muted); line-height:1.55; }
.dmless-entry aside ul { padding-left:1.2rem; }
.ux-campaign-card { display:flex; min-height:13rem; flex-direction:column; justify-content:space-between; gap:1rem; padding:1rem; border:1px solid var(--line); border-radius:.65rem; background:var(--panel); box-shadow:none; }
.ux-campaign-card:hover { border-color:rgb(214 173 92 / 45%); }
.ux-campaign-card.invite { border-color:var(--gold); }
.ux-campaign-card.completed { opacity:.72; }
.ux-campaign-card h3 { margin:.65rem 0 0; }
.ux-campaign-card p { margin:.35rem 0 0; color:var(--muted); font-size:.8rem; line-height:1.45; }
.ux-campaign-card .meta { display:grid; gap:.22rem; margin-top:.7rem; font-size:.7rem; }
.ux-campaign-card-actions,.ux-quick-row { display:flex; flex-wrap:wrap; gap:.4rem; }
.campaign-shell { position:sticky; top:4.25rem; z-index:30; width:min(1480px,calc(100% - 1rem)); margin:0 auto .75rem; border-bottom:1px solid var(--line); background:rgb(16 18 15 / 96%); }
.campaign-shell-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.72rem .25rem .45rem; }
.campaign-shell-identity { display:flex; min-width:0; align-items:center; gap:1rem; }
.campaign-shell-back { color:var(--muted); font-size:.72rem; font-weight:760; }
.campaign-shell-identity h1 { max-width:none; overflow:hidden; font-size:1.18rem; text-overflow:ellipsis; white-space:nowrap; }
.campaign-shell-identity p { margin:.15rem 0 0; color:var(--muted); font-size:.7rem; }
.campaign-shell-actions,.campaign-shell-tabs { display:flex; gap:.35rem; }
.campaign-shell-tabs { overflow-x:auto; padding-bottom:.5rem; }
.campaign-shell-tabs a { flex:0 0 auto; padding:.48rem .65rem; border-radius:.4rem; color:var(--muted); font-size:.74rem; font-weight:780; }
.campaign-shell-tabs a[aria-current="page"] { background:rgb(214 173 92 / 10%); color:var(--gold-light); }
body[data-page="campaign"] .page.game-page { width:min(1480px,calc(100% - 1rem)); padding-top:.1rem; }
.campaign-turn-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.6rem 0; padding:.7rem .8rem; border:1px solid rgb(214 173 92 / 28%); border-radius:.55rem; background:#141713; }
.campaign-turn-copy { display:flex; align-items:baseline; gap:.7rem; }
.campaign-turn-copy span { color:var(--muted); font-size:.78rem; }
.turn-context-drawer { position:fixed; inset:0 0 0 auto; z-index:80; width:min(38rem,94vw); overflow:auto; padding:1rem; border-left:1px solid var(--line); background:var(--panel); box-shadow:-20px 0 55px rgb(0 0 0 / 45%); }
.turn-context-drawer[hidden] { display:none; }
.turn-context-drawer-head { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding-bottom:.8rem; background:var(--panel); }
body[data-page="manage-campaign"] .page,body[data-page="create-campaign"] .page { width:min(1320px,calc(100% - 2rem)); padding-top:1rem; }
.campaign-section-header { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin:.5rem 0 1rem; }
.campaign-section-header p { color:var(--muted); }
.campaign-role-grid,.campaign-scene-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.campaign-asset-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; }
.campaign-role-card { display:grid; grid-template-columns:4.5rem minmax(0,1fr) auto; gap:.8rem; align-items:center; padding:.8rem; border:1px solid var(--line); border-radius:.55rem; background:var(--panel); }
.campaign-role-card img { width:4.5rem; height:4.5rem; border-radius:.45rem; object-fit:cover; }
.campaign-scene-card,.campaign-asset-card { overflow:hidden; border:1px solid var(--line); border-radius:.55rem; background:var(--panel); }
.campaign-scene-card img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.campaign-asset-card img { width:100%; aspect-ratio:1; object-fit:contain; padding:.5rem; background:#10130f; }
.campaign-scene-card-copy,.campaign-asset-card-copy { padding:.8rem; }
body[data-page="messages"] .page { width:min(1320px,calc(100% - 1rem)); padding-top:.5rem; }
.messages-mode-header { align-items:center; padding:.9rem 0 1.1rem; }
.messages-mode-header h1 { max-width:none; font-size:clamp(1.7rem,3.5vw,2.8rem); }
.dnd-message-sdk-surface.full { display:grid; grid-template-columns:minmax(17rem,21rem) minmax(0,1fr); min-height:calc(100dvh - 12rem); overflow:hidden; border:1px solid var(--line); border-radius:.65rem; background:var(--panel); }
.dnd-message-sdk-surface.full .dnd-message-room-list { border-right:1px solid var(--line); }
.dnd-message-section-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.dnd-message-head-actions { display:flex; align-items:center; gap:.3rem; }
.dnd-message-conversation { display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; min-height:0; }
.dnd-message-thread { min-height:0; overflow-y:auto; }
.optional { color:var(--muted); font-size:.7rem; font-weight:500; }
body[data-page="character"] .page,body[data-page="journal"] .page { width:min(1240px,calc(100% - 2rem)); padding-top:.5rem; }
.character-layout-header { display:grid; grid-template-columns:6rem minmax(0,1fr); gap:1rem; align-items:center; padding:1rem; border:1px solid var(--line); border-radius:.65rem; background:var(--panel); }
.character-layout-header img { width:6rem; height:6rem; border-radius:.5rem; object-fit:cover; }
.character-layout-header h2 { font-size:clamp(1.7rem,4vw,2.8rem); }
.character-overview-grid,.ux-journal-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(18rem,.8fr); gap:.8rem; margin-top:.8rem; align-items:start; }
.character-item-sections { display:grid; gap:.8rem; }
.character-item-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }
.character-item-card { padding:.65rem; border:1px solid var(--line); border-radius:.45rem; background:#111410; }
.character-item-art { position:relative; aspect-ratio:1; }
.character-item-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.ux-journal-side { position:sticky; top:9rem; }
@media (max-width:1050px) { .site-header{grid-template-columns:auto 1fr}.mode-nav{grid-column:1/-1;grid-row:2;justify-content:center;overflow-x:auto}.identity-controls{grid-column:2;grid-row:1}.mode-launcher{grid-template-columns:repeat(2,1fr)}.mode-launcher a:nth-child(2){border-right:0}.mode-launcher a:nth-child(-n+2){border-bottom:1px solid var(--line)}.mode-card-grid,.ux-campaign-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px) { .site-header{position:static}.brand small,.identity-controls select{display:none}.mode-nav{justify-content:flex-start}.mode-header,.messages-mode-header{align-items:flex-start;flex-direction:column;gap:1rem}.mode-launcher,.mode-card-grid,.ux-campaign-grid,.campaign-role-grid,.campaign-scene-grid,.character-overview-grid,.ux-journal-grid,.dmless-entry{grid-template-columns:1fr}.mode-launcher a{min-height:6.5rem;border-right:0;border-bottom:1px solid var(--line)}.mode-launcher a:last-child{border-bottom:0}.campaign-shell{position:static}.campaign-shell-back{display:none}.campaign-asset-grid,.character-item-grid{grid-template-columns:repeat(2,1fr)}.dnd-message-sdk-surface.full{grid-template-columns:1fr}.dnd-message-sdk-surface.full .dnd-message-room-list{border-right:0;border-bottom:1px solid var(--line)}.ux-journal-side{position:static} }