:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark;--base:#101721;--panel:#19222c;--raised:#222c36;--raised2:#2b3440;--stroke:#35404c;--muted:#a4b0bd;--cream:#f3f0e8;--gold:#e1b97e;--gold-dark:#8a6844;--sage:#a3c5b4;--danger:#f8a8a8;--shadow:0 16px 55px #03090f70}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:radial-gradient(ellipse at 75% -20%,#233545 0,transparent 47%),var(--base);color:var(--cream);font-size:15px;line-height:1.48}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit}a{color:var(--gold)}a:hover{color:#ffe0ad}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}h1,h2,h3,p{margin:0}h1,h2,h3,.serif{font-family:Georgia,"Times New Roman",serif;font-weight:500}h1{font-size:clamp(25px,3vw,36px);line-height:1.15;letter-spacing:-.02em}h2{font-size:23px}h3{font-size:19px}.muted{color:var(--muted)}.small{font-size:12px}.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-weight:750;font-size:10px;color:var(--gold)}.font-icon{font-size:23px;line-height:1}.body-copy{white-space:pre-line;color:#d9dfe4}.pill{display:inline-flex;align-items:center;gap:6px;border-radius:99px;background:#b8915f1d;border:1px solid #c2985c58;color:#eed1a5;padding:4px 10px;font-size:11px;font-weight:750}.pill.neutral{background:#93a8bb15;border-color:#7d8d9f30;color:var(--muted)}.pill.success{background:#639e831c;border-color:#639e8352;color:var(--sage)}.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border-radius:10px;border:1px solid var(--stroke);background:var(--raised);color:var(--cream);padding:10px 15px;font-weight:650;line-height:1.2;min-height:41px;text-decoration:none;transition:background .15s,border .15s}.btn:hover{background:#313e49;color:var(--cream)}.btn-primary{background:#dfb97d;color:#1b1b18;border-color:#e4c28d}.btn-primary:hover{background:#efcf9a;color:#1b1b18}.btn-quiet{border:0;background:transparent;color:var(--muted)}.btn-quiet:hover{background:#293440;color:var(--cream)}.btn-small{min-height:31px;padding:7px 10px;font-size:12px}.btn:disabled{opacity:.5;cursor:not-allowed}.icon-btn{border:0;background:transparent;display:grid;place-items:center;border-radius:9px;padding:8px;min-width:35px;color:var(--muted)}.icon-btn:hover{background:var(--raised);color:var(--cream)}.field{display:flex;flex-direction:column;gap:7px;margin:0 0 16px}.field label{font-size:12px;color:#c5c9ce;font-weight:700}.field input,.field select,.field textarea,.select{width:100%;min-height:43px;color:var(--cream);background:#131d26;border:1px solid #44505c;border-radius:9px;padding:10px 12px;outline:none}.field textarea{resize:vertical;min-height:90px}.field input::placeholder,.field textarea::placeholder{color:#8996a2}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold)}.check{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--muted);font-size:13px}.check input{accent-color:var(--gold)}.action-row{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.stack{display:flex;flex-direction:column;gap:16px}.split{display:flex;justify-content:space-between;align-items:center;gap:12px}.divider{height:1px;background:var(--stroke);margin:20px 0}.loading-screen{min-height:100dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:var(--muted)}.brand-mark{font-family:Georgia,serif;display:grid;place-items:center;border:1px solid #d9b27f65;background:radial-gradient(#d9b27f20,transparent);width:42px;height:42px;border-radius:12px;color:var(--gold);font-size:26px}.auth-page{min-height:100dvh;display:grid;grid-template-columns:1fr 1fr}.auth-aside{padding:70px clamp(32px,6vw,110px);display:flex;justify-content:center;flex-direction:column;gap:28px;background:radial-gradient(ellipse at 40% 65%,#31404d 0,transparent 56%),linear-gradient(135deg,#161f28,#1b2934 65%,#141b24);border-right:1px solid var(--stroke)}.auth-aside h1{font-size:clamp(45px,5vw,76px)}.auth-aside p{max-width:380px;color:#bac7d1;font-size:17px;line-height:1.65}.auth-features{display:flex;flex-direction:column;gap:14px;margin-top:18px;color:#d9cbb8;font-size:14px}.auth-features span::before{content:'✦';margin-right:12px;color:var(--gold)}.auth-main{display:flex;align-items:center;justify-content:center;padding:32px}.auth-box{width:100%;max-width:390px}.auth-box h2{font-size:30px;margin-bottom:10px}.auth-box .lead{color:var(--muted);margin-bottom:32px}.auth-box .btn-primary{width:100%;margin-top:6px}.auth-note{font-size:12px;color:var(--muted);margin-top:20px}.auth-error{color:var(--danger);font-size:13px;margin:12px 0}.app-shell{height:100dvh;display:grid;grid-template-columns:252px minmax(0,1fr)}.side-nav{display:flex;flex-direction:column;border-right:1px solid #35414c;background:#151e27;min-width:0}.brand{display:flex;align-items:center;gap:10px;padding:26px 20px 22px;text-align:left}.brand .brand-mark{width:36px;height:36px;font-size:21px;flex:none}.brand-name{font-family:Georgia,serif;font-size:20px;line-height:1.05}.brand-sub{color:var(--gold);font-weight:800;letter-spacing:.12em;font-size:9px;text-transform:uppercase}.campaign-switch{border:1px solid var(--stroke);background:#1c2731;border-radius:12px;margin:0 14px 20px;padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}.campaign-switch:hover{background:#27333e}.campaign-switch strong{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.campaign-switch small{font-size:11px;color:var(--muted);display:block}.nav-list{display:flex;flex-direction:column;gap:5px;padding:0 12px}.nav-button{border:0;background:transparent;border-radius:10px;color:#aeb9c4;text-align:left;padding:12px 14px;display:flex;align-items:center;gap:12px;width:100%;font-weight:700;font-size:13px}.nav-button:hover{background:#26313c;color:var(--cream)}.nav-button.active{background:#b28f5a25;color:#f6d3a1}.nav-button .nav-icon{width:21px;text-align:center;font-size:19px;font-weight:400}.nav-button .dot{margin-left:auto;background:var(--gold);color:#19202b;border-radius:100px;min-width:19px;height:19px;display:grid;place-items:center;font-size:10px}.side-bottom{margin-top:auto;padding:20px 14px}.account{border-top:1px solid var(--stroke);padding-top:16px;display:flex;align-items:center;gap:12px}.avatar{background:linear-gradient(140deg,#aa8251,#5e4b3d);color:#fff6e9;border-radius:50%;height:34px;width:34px;display:grid;place-items:center;flex:none;font-size:13px;font-weight:800}.account-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.main-shell{min-height:0;display:flex;flex-direction:column;overflow:hidden}.top-bar{height:80px;min-height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,3.5vw,54px);border-bottom:1px solid #26343e;background:#131c2490}.top-breadcrumb{font-size:12px;color:var(--muted)}.top-bar h1{font-size:24px;margin-top:2px}.top-right{display:flex;align-items:center;gap:12px}.content{overflow-y:auto;flex:1;padding:32px clamp(18px,3.5vw,54px) 80px;scrollbar-color:#44505c transparent}.content.chat-content{padding:0;overflow:hidden}.page-limit{max-width:1100px;margin:0 auto}.section-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.section-header h2{margin-top:6px}.intro{font-size:14px;color:var(--muted);max-width:750px}.panel{border-radius:16px;border:1px solid var(--stroke);background:linear-gradient(150deg,#1d2831,#18222c);padding:24px}.panel + .panel{margin-top:16px}.panel-title{font-size:16px;font-weight:750;margin-bottom:8px}.panel p{color:#b7c1c9;line-height:1.7}.hero-card{position:relative;min-height:240px;padding:37px;border:1px solid #a889605c;border-radius:19px;background:radial-gradient(circle at 83% 24%,#a07b5029,transparent 42%),linear-gradient(128deg,#273845,#192731 64%);display:flex;justify-content:space-between;gap:20px;align-items:center;overflow:hidden}.hero-card::after{position:absolute;content:'✧';font-family:Georgia,serif;font-size:230px;right:0;bottom:-120px;color:#d8b78413;pointer-events:none}.hero-card h1{font-size:clamp(30px,4vw,45px);max-width:550px;margin:10px 0}.hero-card p{color:#d9d1c8;max-width:540px}.hero-card .btn{margin-top:22px;position:relative;z-index:1}.hero-count{position:relative;z-index:1;flex:none;align-self:flex-end;font-family:Georgia,serif;font-size:78px;color:#dabb8b60}.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0}.stat{border-radius:14px;border:1px solid var(--stroke);background:#1a252e;padding:20px}.stat strong{display:block;font-family:Georgia,serif;font-weight:400;font-size:33px;color:var(--cream)}.stat span{font-size:12px;color:var(--muted)}.two-col{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr);gap:18px}.list-card{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--stroke)}.list-card:last-child{border:0}.tile-icon{width:41px;height:41px;border-radius:11px;background:#ac895b25;color:#dbb887;display:grid;place-items:center;font-size:20px;flex:none}.list-card strong{display:block;font-weight:750}.list-card small{display:block;color:var(--muted);margin-top:4px}.list-card .grow{flex:1;min-width:0}.empty{padding:35px 20px;text-align:center;border:1px dashed var(--stroke);border-radius:13px;color:var(--muted)}.empty strong{display:block;color:var(--cream);margin:8px 0;font-size:16px}.empty .btn{margin-top:15px}.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:15px}.place-card{border:1px solid var(--stroke);border-radius:16px;background:#1b2731;overflow:hidden;text-align:left;display:flex;flex-direction:column}.place-card:hover{border-color:#a7895e}.place-art{height:132px;background:radial-gradient(circle at 70% 40%,#a5876033,transparent 50%),repeating-linear-gradient(35deg,#283a46,#283a46 3px,#263744 4px,#263744 14px);display:grid;place-items:center;overflow:hidden;color:#d2b388;font-family:Georgia,serif;font-size:58px}.place-art img{width:100%;height:100%;object-fit:cover}.place-body{padding:18px}.place-body strong{font-family:Georgia,serif;font-weight:500;font-size:24px}.place-body p{font-size:13px;color:var(--muted);margin-top:5px}.place-detail{max-width:930px}.cover-large{height:250px;border-radius:15px;overflow:hidden;background:linear-gradient(115deg,#283d47,#172733);display:grid;place-items:center;font:96px Georgia,serif;color:#d9bb8e;margin-bottom:22px}.cover-large img{height:100%;width:100%;object-fit:cover}.entry{padding:19px 0;border-bottom:1px solid var(--stroke)}.entry:last-child{border-bottom:0}.entry h3{font-size:20px;margin-bottom:6px}.entry .body-copy{font-size:14px;line-height:1.75}.resource{padding:18px 20px;border:1px solid var(--stroke);border-radius:13px;background:#1a252e;margin-bottom:12px;display:flex;gap:16px;align-items:flex-start}.resource h3{font:700 16px Inter,ui-sans-serif,system-ui,sans-serif;margin:0 0 5px}.resource .desc{font-size:13px;color:var(--muted);margin-top:7px;white-space:pre-wrap}.resource audio{max-width:100%;width:100%;margin:11px 0}.resource .res-actions{margin-left:auto;display:flex;gap:7px}.filter-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}.filter-chip{border:1px solid var(--stroke);background:transparent;color:var(--muted);border-radius:999px;padding:7px 13px;font-size:12px}.filter-chip.active{color:#211c16;background:var(--gold);border-color:var(--gold)}.chat-shell{height:100%;display:grid;grid-template-columns:315px minmax(0,1fr)}.thread-list{border-right:1px solid var(--stroke);background:#19222b;display:flex;flex-direction:column;min-height:0}.thread-list-head{padding:23px 18px 15px;border-bottom:1px solid var(--stroke);display:flex;align-items:center;justify-content:space-between}.thread-list-head h2{font-size:24px}.threads{overflow-y:auto;padding:10px}.thread{border:0;background:transparent;width:100%;border-radius:11px;padding:14px 12px;color:var(--cream);display:flex;align-items:center;gap:11px;text-align:left}.thread:hover{background:#293540}.thread.active{background:#38434e}.thread .avatar{width:40px;height:40px}.thread-details{flex:1;min-width:0}.thread-details strong{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:13px}.thread-details small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;margin-top:3px}.thread time{font-size:10px;color:var(--muted);align-self:start}.unread{background:var(--gold);color:#251b13;border-radius:15px;font-size:10px;font-weight:800;padding:2px 6px}.thread-pane{min-height:0;min-width:0;display:flex;flex-direction:column;background:linear-gradient(155deg,#15202a,#121b24)}.thread-top{height:77px;min-height:77px;border-bottom:1px solid var(--stroke);display:flex;align-items:center;gap:13px;padding:0 23px}.thread-top strong{display:block}.thread-top span{display:block;color:var(--muted);font-size:11px}.message-scroll{min-height:0;overflow-y:auto;flex:1;padding:22px clamp(18px,3vw,42px);display:flex;flex-direction:column;gap:13px}.message{max-width:min(70%,600px);display:flex;flex-direction:column;gap:5px;align-self:flex-start}.message.own{align-self:flex-end}.message-label{font-size:11px;color:var(--muted);margin:0 9px}.message.own .message-label{text-align:right}.bubble{border:1px solid #3a4854;border-radius:16px 16px 16px 4px;padding:12px 16px;background:#2b3742;color:#eef1f4;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.6}.message.own .bubble{background:#3d4138;border:1px solid #77704f;border-radius:16px 16px 4px 16px}.bubble img{max-width:min(100%,360px);max-height:400px;object-fit:contain;border-radius:10px;display:block;margin-top:9px}.bubble p{margin:0}.bubble .attached{display:block;margin-top:6px}.compose{border-top:1px solid var(--stroke);padding:15px 23px 20px;display:flex;align-items:flex-end;gap:10px;background:#19242d}.compose textarea{border-radius:14px;flex:1;min-width:0;background:#283541;color:var(--cream);border:1px solid #455461;padding:12px 15px;min-height:49px;max-height:140px;resize:vertical}.compose textarea::placeholder{color:#9ba9b4}.compose button{min-width:46px;height:47px}.chat-welcome{display:grid;place-items:center;color:var(--muted);flex:1;text-align:center;padding:32px}.person{display:flex;align-items:center;gap:14px;padding:15px;border:1px solid var(--stroke);border-radius:12px;background:#1d2831}.person .info{flex:1}.person small{color:var(--muted);display:block}.mobile-nav{display:none}.mobile-only{display:none}.toast{position:fixed;bottom:22px;right:22px;z-index:60;padding:12px 16px;border:1px solid var(--gold-dark);background:#30343a;border-radius:12px;box-shadow:var(--shadow);color:var(--cream);opacity:0;pointer-events:none;transition:opacity .2s;max-width:330px}.toast.visible{opacity:1}.toast.error{border-color:#b57474;color:#fbd1d1}dialog{color:var(--cream);border:1px solid #56616a;background:#1c2731;border-radius:18px;box-shadow:var(--shadow);width:min(92vw,490px);max-height:90dvh;padding:0;overflow-y:auto}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}.modal-body{padding:28px}.modal-head{display:flex;align-items:start;justify-content:space-between;margin-bottom:19px}.modal-head h2{font-size:27px}.modal-head p{color:var(--muted);font-size:13px;margin-top:6px}.modal-body form .action-row{margin-top:20px}.callout{font-size:12px;border-left:3px solid #b68d61;background:#ad885a14;padding:12px 15px;color:#d1bc9e;border-radius:0 7px 7px 0}.busy{opacity:.6;pointer-events:none}
@media(max-width:950px){.app-shell{grid-template-columns:76px minmax(0,1fr)}.brand{padding:24px 20px}.brand-text,.campaign-switch strong,.campaign-switch small,.campaign-switch .down,.nav-button .nav-label,.side-bottom .account-name,.side-bottom .account .muted{display:none}.campaign-switch{height:44px;justify-content:center;margin:0 12px 20px;padding:8px}.campaign-switch .font-icon{display:block}.nav-button{justify-content:center}.side-bottom{padding:12px}.side-bottom .account{justify-content:center}.side-bottom .icon-btn{margin:auto}}
@media(min-width:951px){.campaign-switch .font-icon{display:none}}
@media(max-width:690px){.app-shell{display:flex;flex-direction:column}.side-nav{display:none}.top-bar{height:61px;min-height:61px;padding:0 18px}.top-bar h1{font-size:21px}.content{padding:23px 17px 92px}.content.chat-content{padding:0 0 65px}.mobile-nav{display:flex;position:fixed;z-index:20;bottom:0;left:0;right:0;align-items:stretch;justify-content:space-between;background:#19242ded;border-top:1px solid #3b4753;backdrop-filter:blur(16px);padding:7px 5px calc(9px + env(safe-area-inset-bottom))}.mobile-nav button{background:none;border:0;color:#aeb7bf;min-width:54px;flex:1;display:flex;align-items:center;gap:3px;flex-direction:column;font-size:10px;padding:5px 2px}.mobile-nav button.active{color:var(--gold)}.mobile-nav button span{font-size:21px}.mobile-only{display:inline-flex}.auth-page{grid-template-columns:1fr}.auth-aside{padding:26px 26px 22px;gap:8px;border-right:0;border-bottom:1px solid var(--stroke)}.auth-aside h1{font-size:34px}.auth-aside p{font-size:13px;line-height:1.4}.auth-features{display:none}.auth-main{padding:34px 24px}.hero-card{padding:25px;min-height:210px}.hero-count{display:none}.hero-card h1{font-size:32px}.stats-grid{grid-template-columns:repeat(3,1fr);gap:8px}.stat{padding:12px}.stat strong{font-size:27px}.two-col{grid-template-columns:1fr}.chat-shell{display:block;height:100%}.thread-list,.thread-pane{height:100%}.chat-shell.has-active .thread-list{display:none}.chat-shell:not(.has-active) .thread-pane{display:none}.thread-top{height:65px;min-height:65px;padding:0 14px}.message-scroll{padding:15px 13px}.message{max-width:90%}.compose{padding:10px 10px 12px;gap:6px}.compose textarea{min-height:44px}.compose button{min-width:40px;height:44px;padding:7px}.tiles{grid-template-columns:1fr}.resource{padding:16px}.resource .res-actions{align-self:flex-start}.cover-large{height:200px}.section-header{align-items:start}.panel{padding:19px}}
@media(min-width:691px){.chat-shell:not(.has-active) .thread-pane{display:flex}}
/* Dice & connected characters */
.dice-top-button{white-space:nowrap;background:#a18c6524;border-color:#7e674b;color:#f0d6a2}
.dice-presets{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:10px 0 20px}
.die-preset{border:1px solid #79674e;background:#2c3235;border-radius:10px;color:#f2d29a;min-height:45px;font-size:12px;font-weight:750;padding:6px 3px}
.die-preset:focus-visible,.die-preset:hover{outline:2px solid #b69b6b;outline-offset:1px;background:#4a3c2b}
.dice-result{margin-top:13px;padding:13px 16px;border:1px solid #806647;border-radius:14px;background:linear-gradient(120deg,#394235,#212f38);display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center}
.dice-heading{font-size:13px;font-weight:750}.dice-heading span{display:block;color:#bbc3c8;font-size:11px;font-weight:400}
.dice-detail{font-size:13px;color:#dfcaa8;grid-column:1}.dice-total{font-family:Georgia,serif;font-size:40px;line-height:1;color:#f4d298;grid-column:2;grid-row:1/span 2;min-width:40px;text-align:center}
.roll-history-row{display:flex;gap:15px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--stroke);padding:15px 4px}.roll-history-row:last-child{border:0}.roll-history-row strong{display:block}.roll-history-row small{display:block;font-size:12px;color:var(--muted);margin-top:5px}.roll-history-row>span{color:#e9ca93;font:32px Georgia,serif}
.char-side{display:grid;grid-template-columns:1fr 1fr 75px;gap:10px}
.ability-fields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-top:8px}.stat-field input{width:100%;min-width:0;text-align:center;padding:8px 2px}.stat-field label{font-size:11px;color:var(--muted);font-weight:750}
.field-label{display:block;font-size:12px;font-weight:650;margin-top:14px}
.ability-compact{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}.ability-compact>div{display:flex;flex-direction:column;align-items:center;min-width:55px;background:#273640;padding:8px 12px;border:1px solid #42515b;border-radius:12px}.ability-compact small{font-size:10px;color:#c0c7d0}.ability-compact strong{font-size:23px;font-family:Georgia,serif}.ability-compact span{font-size:12px;color:#d9bf8f}
.ddb-small{display:inline-block;font-size:12px;color:#e6c594;margin-top:7px;text-decoration:underline;text-underline-offset:2px}.character-member{min-width:0}
@media(max-width:690px){.dice-top-button{font-size:12px;padding:6px 10px}.die-preset{min-height:42px}.char-side{grid-template-columns:1fr 1fr}.char-side>.field:last-child{grid-column:1/span 2}.ability-fields{gap:4px}.stat-field label{font-size:10px}.stat-field input{padding:8px 0;font-size:12px}.mobile-nav button{min-width:46px;font-size:9px}.mobile-nav button span{font-size:18px}}
.ability-checks{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:0 0 14px}.ability-checks .small{flex:0 0 100%;color:var(--muted)}.ability-checks .btn{font-size:11px;padding:5px 9px}
.load-earlier{align-self:center;border:1px solid var(--stroke);border-radius:999px;background:#263641;color:#ebd0a3;padding:8px 17px;font-size:12px;cursor:pointer;margin:4px auto 12px}.load-earlier:hover{border-color:#b6a381}

/* Installable phone companion refinements */
.install-auth-link{margin-top:13px;width:100%;border:1px solid var(--stroke)}
.install-preview{display:flex;align-items:center;gap:16px;border:1px solid var(--stroke);padding:14px;border-radius:13px;background:#28323b}
.install-preview img{border-radius:13px;flex:none}
.install-preview strong{display:block;font:22px Georgia,serif}
.install-preview small{display:block;color:var(--muted);font-size:12px;margin-top:5px}
.install-warning{margin-top:12px;color:#f2c17d;line-height:1.5}
@media(max-width:690px){
  .top-bar{padding-top:env(safe-area-inset-top);height:calc(61px + env(safe-area-inset-top));min-height:calc(61px + env(safe-area-inset-top))}
  .top-right{gap:5px}
  .mobile-nav{padding-bottom:calc(9px + env(safe-area-inset-bottom))}
  .chat-shell,.message-scroll{overscroll-behavior:contain}
  .compose{padding-bottom:calc(12px + env(safe-area-inset-bottom));}
  .compose textarea{font-size:16px;}
  .field input,.field textarea,.field select{font-size:16px}
  dialog{max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px)}
  .auth-page{min-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
}

/* v0.4: message composer anchored to conversation viewport; only history scrolls. */
.app-shell{height:100dvh;min-height:0;overflow:hidden}
.main-shell{height:100%;min-height:0;overflow:hidden}
.content.chat-content{display:flex;flex:1 1 0;height:0;min-height:0;overflow:hidden;padding:0}
.chat-shell{height:100%;min-height:0;min-width:0;flex:1 1 0;overflow:hidden}
.thread-list,.thread-pane{height:100%;min-height:0;overflow:hidden}
.thread-pane{display:flex;flex-direction:column}
.thread-top{flex:0 0 auto}
.message-scroll{flex:1 1 0;min-height:0;height:0;overflow-y:auto;overscroll-behavior:contain}
.compose{flex:0 0 auto;position:relative;bottom:0;z-index:2;background:#19242d}
.notify-panel{padding:18px;background:#15212b;border:1px solid var(--stroke);border-radius:12px}
.notify-panel strong{display:block;margin-bottom:5px}.notify-panel p{margin:6px 0 15px}
.notification-state{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.notify-panel .check{margin:0 0 10px}
@media(max-width:690px){
 .content.chat-content{padding:0 0 calc(67px + env(safe-area-inset-bottom));}
 .chat-shell{height:100%}.thread-pane,.thread-list{height:100%;min-height:0}
 .compose{padding-bottom:calc(10px + env(safe-area-inset-bottom));}
}

@media(max-width:690px){.top-right .dice-top-button,.top-right #rolePill{display:none}}

/* Native-inspired phone layout. Navigation and composer occupy separate fixed regions. */
.permission-welcome{display:flex;flex-direction:column;gap:15px}
.permission-welcome>p:first-of-type{font-size:15px;line-height:1.6;color:var(--cream)}
.permission-art{width:64px;height:64px;display:grid;place-items:center;border-radius:19px;background:linear-gradient(130deg,#d4a568,#8a6844);font-size:34px;color:#17212b}
.permission-preview{display:flex;align-items:center;gap:12px;background:#202f3b;border:1px solid #53606a;border-radius:15px;padding:13px 12px}
.permission-preview>div{display:flex;flex:1;flex-direction:column;gap:2px}
.permission-preview strong{font-size:13px}.permission-preview small,.permission-time{font-size:11px;color:#abb9c6}
.permission-bell{font-size:24px;background:#344b5b;border-radius:12px;padding:5px 10px}
.permission-yes{min-height:52px;width:100%;font-size:15px}.permission-later{width:100%;min-height:43px}
.more-menu{display:flex;flex-direction:column;gap:7px}
.more-option{background:#23313f;border:1px solid #3b4d5b;border-radius:14px;padding:16px 12px;color:#f3f0e8;display:flex;align-items:center;gap:15px;text-align:left}
.more-option>span{font-size:25px;min-width:31px;text-align:center;color:var(--gold)}.more-option>div{flex:1}
.more-option strong,.more-option small{display:block}.more-option small{font-size:11px;color:var(--muted);margin-top:3px}
@media(max-width:690px){
 body{background:#111a23;font-size:15px;overscroll-behavior:none}
 .app-shell{height:100dvh;overflow:hidden}
 .main-shell{flex:1;min-height:0;overflow:hidden;background:#111a23}
 .top-bar{background:#111a23;border-bottom:1px solid #33404b;padding:0 16px;min-height:64px;height:64px}
 .top-breadcrumb{display:none}.top-bar h1{margin:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:21px;font-weight:750;letter-spacing:-.025em}
 .top-right{gap:3px}.top-right .icon-btn{color:#d8dde1;font-size:21px;min-width:42px;min-height:44px}
 .top-right #mobileInstall{display:none}.top-right #mobileCampaign{font-size:18px}
 .content{background:#111a23;padding:18px 14px calc(91px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior-y:contain}
 .content.chat-content{padding:0 0 calc(71px + env(safe-area-inset-bottom));overflow:hidden;min-height:0}
 .mobile-nav{background:#18232e;box-shadow:0 -8px 24px #050a0e40;border-top:1px solid #3a4651;padding:7px 4px calc(9px + env(safe-area-inset-bottom));min-height:69px}
 .mobile-nav button{position:relative;min-height:52px;justify-content:center;gap:1px;font-weight:600;color:#9eafbb}
 .mobile-nav button.active{color:#e1b97e}
 .mobile-tab-icon{font-size:23px;line-height:26px;font-weight:500}.mobile-tab-label{font-size:11px;letter-spacing:-.01em}
 .mobile-unread{position:absolute;top:-2px;right:18px;border-radius:100px;background:#d4ab75;color:#15202b;font-weight:800;padding:1px 6px}
 .stats-grid{gap:8px;margin:14px 0}.stat{background:#1c2833;border-radius:12px;border-color:#33414d}
 .stat span{font-size:11px}.hero-card{min-height:175px;padding:22px;border-radius:17px}
 .hero-card h1{font-size:29px}.panel{border-radius:15px;background:#1b2732;box-shadow:none}
 .resource{border-radius:13px;background:#1b2834;flex-wrap:wrap;padding:15px}
 .resource .grow{min-width:0;flex:1}.resource .res-actions{margin-left:55px}
 .chat-shell{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 .thread-list,.thread-pane{min-height:0;height:100%;width:100%;overflow:hidden}
 .thread-list{background:#111a23;border:0}.thread-list-head{padding:16px 15px;background:#111a23}
 .threads{padding:0 8px}.thread{padding:16px 12px;min-height:72px;border-radius:11px}
 .thread .avatar{width:47px;height:47px;font-size:17px}.thread-details strong{font-size:15px}.thread-details small{font-size:12px}
 .thread-pane{display:flex;flex-direction:column}.thread-top{height:62px;min-height:62px;background:#16212c;padding:0 12px}
 .message-scroll{flex:1 1 0;min-height:0;height:0;overflow-y:auto;overscroll-behavior-y:contain}
 .compose{flex:0 0 auto;position:relative;margin-top:auto;background:#17232e;border-top-color:#354450;padding:9px 9px calc(10px + env(safe-area-inset-bottom));align-items:end}
 .compose textarea{background:#273642;border-radius:20px;min-height:43px;padding:10px 15px;font-size:16px}
 .compose button{border-radius:14px;height:43px;min-width:43px}
 .modal-body{padding:23px 19px}.modal-head h2{font-size:24px}
 dialog{width:min(95vw,460px);border-radius:20px}
}
@media(max-width:690px) and (display-mode:standalone){.top-right #mobileInstall{display:none}}/* v0.6: Chronicle Messenger. Focused conversations, legible surfaces and tactile dice. */
:root {
  color-scheme: dark;
  --base:#0c121e;--panel:#172233;--raised:#202c3e;--raised2:#29364a;
  --stroke:#34435a;--muted:#a3b2c8;--cream:#f5f7fc;
  --gold:#e6bd86;--gold-dark:#9d7548;--sage:#8bd6b3;
  --brand:#b3aafa;--brand-strong:#c9c2ff;--shadow:0 24px 70px #0408129c;
}
html,body{background:var(--base);color:var(--cream);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px}
body{background:linear-gradient(125deg,#111c2d,#0b121e 65%)}
h1,h2,h3,.serif{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.028em;font-weight:730}
button,input,textarea,select{font-family:inherit}
a{color:#c4b9ff}
a:hover{color:#ded7ff}
:focus-visible{outline:3px solid var(--brand)!important;outline-offset:3px!important}
.btn{border-color:#3d4d65;background:#243248;border-radius:12px;transition:background .18s ease,transform .14s ease,border-color .18s ease}
.btn:hover{background:#30435d}
.btn:active,.icon-btn:active{transform:scale(.97)}
.btn-primary{background:#b6adff;border-color:#c8c0ff;color:#171730;font-weight:780;box-shadow:0 5px 15px #7b68e31b}
.btn-primary:hover{background:#cec7ff;color:#141425}
.btn-quiet{background:transparent;border-color:transparent;color:#c1cadb}
.btn-quiet:hover{background:#263347;color:#f8f9fe}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.icon-btn{color:#c4d0df;border-radius:12px;transition:background .15s}
.icon-btn:hover{background:#26364b;color:#fff}
.eyebrow{color:#b5acf9;font-size:11px;letter-spacing:.115em}
.muted{color:#aab8ca}
.loading-screen{color:#acb9d2}
.app-shell{grid-template-columns:250px minmax(0,1fr);height:100dvh;max-height:100dvh;background:#0c131f}
.side-nav{background:linear-gradient(180deg,#121e2e,#101827 75%);border-right:1px solid #2a394d;box-shadow:none}
.brand{padding:28px 22px 22px;gap:12px}
.brand-mark{background:linear-gradient(145deg,#b7a8ff,#6a64af);border:0;color:#fff;width:41px;height:41px;border-radius:14px;box-shadow:0 10px 22px #7363c43c;font-size:23px}
.brand .brand-mark{height:41px;width:41px;font-size:24px}
.brand-name{font-family:inherit;font-weight:800;font-size:20px;letter-spacing:-.065em}
.brand-sub{font-size:9px;letter-spacing:.11em;color:#a8a1d8;line-height:1.3;margin-top:4px}
.campaign-switch{border:1px solid #314056;background:#1c293d;margin:3px 13px 24px;padding:12px 13px;border-radius:14px}
.campaign-switch strong{font-size:13px;max-width:180px;color:#ecf0f9}
.campaign-switch small{font-size:9px;letter-spacing:.13em;color:#8696ae;font-weight:700;margin-bottom:4px}
.campaign-switch .down{color:#a5b4ca}
.nav-list{gap:5px;padding:0 11px}
.nav-button{border:1px solid transparent;border-radius:13px;min-height:46px;font-size:13px;font-weight:680;color:#a7b6cb;gap:13px;padding:11px 14px}
.nav-button .nav-icon{display:grid;place-items:center;width:24px;color:#93a6c0}
.nav-button:hover{background:#233248;color:#fff}
.nav-button.active{background:linear-gradient(90deg,#383653,#292e46);border-color:#615d89;color:#e8e3ff;box-shadow:inset 3px 0 #c6b9ff}
.nav-button.active .nav-icon{color:#c1b6ff}
.nav-button .dot{margin-left:auto;background:#aca2ff;color:#181735}
.side-bottom{padding:18px 15px 22px}
.side-bottom .account{border-top:1px solid #2c3b52;padding-top:18px}
.avatar{background:linear-gradient(150deg,#6b7caa,#49446d);color:#f7f5ff;box-shadow:inset 0 0 0 1px #ffffff25;letter-spacing:.02em}
.group-avatar{background:linear-gradient(145deg,#555486,#343a69);color:#dcd8ff}
.account-name{font-size:13px}
.main-shell{background:#101927;min-width:0;min-height:0;overflow:hidden}
.top-bar{background:#121e2c;border-bottom:1px solid #2a384b;height:72px;min-height:72px;padding:0 clamp(18px,3vw,44px)}
.top-bar h1{font-size:21px;margin-top:3px;font-weight:780}
.top-breadcrumb{font-size:11px;color:#9baac0}
.breadcrumb-divider{padding:0 5px;color:#54657e}
.top-right{gap:8px}
.dice-top-button{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;background:#2d3448;border-color:#514c71;color:#ded5ff;font-size:12px}
.dice-top-button:hover{background:#3c3a59}
.content{padding:30px clamp(18px,3.2vw,44px) 80px;background:#101927;overscroll-behavior:contain}
.content.chat-content{padding:0;overflow:hidden;flex:1 1 0;height:0;min-height:0}
.app-shell.chat-view .top-bar{display:none}
.page-limit{max-width:1020px}
.panel{border-color:#304159;background:#172536;border-radius:18px;box-shadow:0 10px 30px #080d1722}
.panel h2{font-size:20px}
.hero-card{background:radial-gradient(ellipse at 82% 24%,#8073d544,transparent 44%),linear-gradient(120deg,#272a51,#182a41);border-color:#50517b;border-radius:22px;min-height:245px}
.hero-card h1{font-size:clamp(32px,4vw,43px);letter-spacing:-.045em;font-weight:820}
.hero-card p{color:#c9d3e8}
.hero-card::after{color:#c6baff14}
.home-intro-label{display:inline-flex;align-items:center;gap:7px;color:#d3c8ff;font-size:11px;letter-spacing:.13em;font-weight:760}
.hero-count{color:#afa2ef9c}
.campaign-quick-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.quick-tile{border:1px solid #35465b;border-radius:18px;padding:18px 19px;background:#1a293a;display:flex;align-items:center;text-align:left;gap:14px;min-width:0;color:#d8e1f2;transition:background .17s ease}
.quick-tile:hover{background:#26384e}
.quick-tile>span:nth-child(2){flex:1;min-width:0}
.quick-tile strong,.quick-tile small{display:block}
.quick-tile strong{font-size:14px;color:#f5f6fb}
.quick-tile small{font-size:12px;color:#9cacc2;margin-top:3px}
.quick-tile-icon{background:#333854;color:#c7baff;width:45px;height:45px;border-radius:13px;display:grid;place-items:center;flex:none}
.resource{background:#1b2a3d;border-color:#394b64}
.resource .res-actions{flex-wrap:wrap}
.filter-chip.active{background:#bdb4fb;border-color:#c8beff;color:#191835}
/* Messenger desktop layout */
.chat-shell{display:grid;grid-template-columns:minmax(290px,350px) minmax(0,1fr);height:100%;overflow:hidden;min-height:0}
.thread-list{height:100%;background:#131e2c;border-right:1px solid #2d3b50;min-height:0;overflow:hidden}
.thread-list-head{display:flex;align-items:center;justify-content:space-between;padding:28px 23px 16px;border:0;gap:16px;background:#131e2c}
.thread-list-head h2{font-size:28px;letter-spacing:-.055em;margin:3px 0 1px;font-weight:800}
.thread-list-head p{font-size:12px;color:#95a7bd;margin-top:3px;max-width:210px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.thread-list-kicker{color:#a99fe8;font-size:10px;letter-spacing:.09em;font-weight:800;display:flex;align-items:center;gap:6px}
.new-message-btn{height:44px;width:44px;border-radius:14px;display:grid;place-items:center;background:#b9b0ff;border:0;color:#141428;box-shadow:0 6px 18px #756bcb27;flex:none}
.new-message-btn:hover{background:#dad3ff}
.chat-search{margin:0 14px 14px;border:1px solid #33455d;background:#1e2c3f;border-radius:13px;display:flex;align-items:center;padding:0 12px;gap:9px;color:#8294af;min-height:43px;flex:none}
.chat-search input{border:none;background:none;color:#f3f6fd;width:100%;min-height:41px;outline:none;font-size:13px}
.chat-search input::placeholder{color:#8b9cb5}
.chat-search:focus-within{border-color:#9486db;box-shadow:0 0 0 3px #a79bf21c}
.threads{padding:0 9px 10px;flex:1;overflow-y:auto;min-height:0;scrollbar-color:#41536b transparent}
.thread{padding:14px 11px;margin:2px 0;min-height:70px;border:1px solid transparent;border-radius:14px;display:flex;gap:12px;align-items:center;transition:background .16s}
.thread:hover{background:#25364a}
.thread.active{background:#292f49;border-color:#565580;box-shadow:inset 3px 0 #ada4fc}
.thread .avatar{height:46px;width:46px;font-size:15px}
.thread .group-avatar svg{width:21px}
.thread-details{min-width:0;flex:1}
.thread-name-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.thread-name-row strong{font-size:14px;font-weight:730;color:#f4f6fd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread-name-row time{flex:none;color:#92a2bb;font-size:10px;white-space:nowrap}
.thread-preview{display:block;margin-top:5px;color:#9eadc1;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread .unread{background:#a79bff;color:#18182d;min-width:19px;height:19px;padding:2px 5px;line-height:15px;font-size:10px;align-self:center}
.thread-search-empty{padding:30px 14px;color:#97a6bd;text-align:center;font-size:13px}
.thread-list-footer{flex:none;padding:12px 18px;border-top:1px solid #28384c;color:#8193ad;font-size:11px;display:flex;align-items:center;gap:7px}
.thread-pane{background:radial-gradient(ellipse at 80% 0%,#2227454b,transparent 40%),#0f1826;display:flex;flex-direction:column;min-width:0;min-height:0;height:100%}
.thread-top{flex:0 0 auto;height:76px;min-height:76px;background:#172333dc;border-bottom:1px solid #2d3b51;gap:12px;padding:0 26px}
.thread-heading-avatar .avatar{width:42px;height:42px}
.thread-heading{flex:1;min-width:0}
.thread-heading strong{font-size:15px;font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread-heading span{font-size:12px;color:#9eafc6;margin-top:4px}
.thread-dice-btn{border:1px solid #5b527e;border-radius:12px;background:#302b4a;color:#dfd4ff;display:inline-flex;align-items:center;gap:7px;padding:9px 13px;font-size:12px;font-weight:760;flex:none}
.thread-dice-btn:hover{background:#443b65}
.message-scroll{height:0;flex:1 1 0;min-height:0;padding:23px clamp(16px,3vw,35px) 26px;gap:0;overscroll-behavior:contain;scrollbar-color:#334157 transparent;display:flex;flex-direction:column}
.day-marker{display:flex;justify-content:center;margin:22px 0 20px;flex:none}
.day-marker:first-child{margin-top:3px}
.day-marker span{font-size:11px;color:#bec9dc;padding:6px 14px;border-radius:999px;background:#243248;border:1px solid #34435b;font-weight:700;letter-spacing:.01em}
.message{max-width:min(77%,630px);gap:0;margin-bottom:13px}
.message.grouped{margin-top:-7px}
.message.own{align-self:flex-end}
.message-label{font-size:11px;color:#b5bed1;margin:0 11px 6px;font-weight:740}
.message.own .message-label{color:#b4a8ea}
.bubble{border:1px solid #35465d;border-radius:19px 19px 19px 7px;padding:11px 15px;background:#253448;color:#f2f5fb;font-size:14px;line-height:1.6;overflow-wrap:anywhere;box-shadow:0 5px 17px #050d1728}
.message.own .bubble{border-color:#666099;background:#43416c;color:#f8f7ff;border-radius:19px 19px 7px 19px}
.message.grouped:not(.own) .bubble{border-top-left-radius:9px}
.message.grouped.own .bubble{border-top-right-radius:9px}
.message-time{color:#8194ad;font-size:10px;margin:5px 10px 0}
.message.own .message-time{text-align:right}
.message.own .bubble a{color:#f4e7ff}
.bubble p{line-height:1.5}
.bubble img{border-radius:14px}
.empty-conversation{margin:auto;text-align:center;padding:24px;color:#a2b2c9}
.empty-conversation strong{display:block;color:#f1f3fd;font-size:17px;margin-top:12px}
.empty-conversation p{margin-top:5px;font-size:13px}
.empty-chat-emblem{margin:auto;width:62px;height:62px;background:#2e3551;color:#c4b8fb;border-radius:20px;display:grid;place-items:center}
.chat-welcome{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:35px;color:#9eaec4}
.chat-welcome h2{font-size:22px;color:#f4f5fd}
.chat-welcome p{max-width:320px;margin-bottom:10px}
.welcome-icon{height:76px;width:76px;display:grid;place-items:center;border-radius:25px;background:#2d3551;color:#c3b8ff;margin-bottom:4px}
.compose{flex:0 0 auto;display:flex;align-items:flex-end;gap:9px;background:#162234;border-top:1px solid #304056;padding:13px 22px 16px;margin-top:auto;bottom:0;z-index:3}
.compose-field{border:1px solid #405169;background:#253449;border-radius:21px;flex:1;min-width:0;display:flex;align-items:center;padding:0 13px;transition:border-color .15s}
.compose-field:focus-within{border-color:#988be6;box-shadow:0 0 0 3px #9993ee17}
.compose textarea{min-height:44px;height:44px;max-height:130px;background:none;border:none;padding:12px 2px;color:#f7f8fe;font-size:14px;line-height:20px;resize:none;width:100%;overflow-y:auto;outline:none}
.compose textarea:focus-visible{outline:none!important}
.compose textarea::placeholder{color:#9baac0}
.compose-action,.compose-dice,.compose-send{height:44px;width:44px;min-width:44px;flex:none;display:grid;place-items:center;border-radius:15px;border:0}
.compose-action,.compose-dice{background:#26364c;color:#c2cee0}
.compose-dice{color:#d4c5fc}
.compose-action:hover,.compose-dice:hover{background:#384a64;color:#fff}
.compose-send{background:#b8aeff;color:#1e1a3b;box-shadow:0 5px 18px #8072f52f}
.compose-send:hover{background:#cec7ff}
.compose-send:disabled{opacity:.35;box-shadow:none;cursor:default}
/* Dice tray */
dialog{background:#182437;border-color:#405069;color:#f8f8fe;box-shadow:var(--shadow);border-radius:24px;width:min(96vw,550px);max-height:90dvh}
dialog::backdrop{background:#050913c2;backdrop-filter:blur(8px)}
.modal-body{padding:26px 27px 27px}
.modal-head{gap:13px;margin-bottom:17px}
.modal-head h2{font-size:24px;font-weight:800}
.dice-form{display:flex;flex-direction:column;gap:13px}
.dice-hint{font-size:13px;color:#b5c2d5;line-height:1.5}
.dice-picker{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.die-preset{height:79px;min-height:79px;border-radius:15px;background:#26364c;border:1px solid #3c4c65;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;color:#e9ecff;transition:background .14s,transform .13s}
.die-preset:hover{background:#3e4164;border-color:#aba3ea;outline:none}
.die-preset:active{transform:scale(.94)}
.die-symbol{font-size:28px;font-family:Inter,system-ui;color:#d0c5ff;line-height:1.05;font-weight:450}
.die-preset strong{font-size:12px;color:#e9e6ff;font-weight:850}
.dice-tray-title{display:flex;justify-content:space-between;align-items:center;margin-top:3px}
.dice-tray-title strong{font-size:13px;letter-spacing:.01em}
#dieCount{display:inline-grid;place-items:center;border-radius:999px;padding:1px 8px;background:#37375a;color:#ddd4ff;margin-left:5px;font-size:11px}
.dice-tray{border:1px solid #394a60;border-radius:15px;min-height:62px;padding:5px 10px;background:#131e2e}
.dice-tray-empty{padding:15px 7px;color:#8195b0;font-size:12px;text-align:center}
.dice-tray-row{display:flex;align-items:center;gap:10px;padding:7px 3px;min-height:47px}
.dice-tray-row+.dice-tray-row{border-top:1px solid #283a50}
.dice-chip{width:44px;height:37px;border-radius:10px;background:#3a3b63;display:grid;place-items:center;color:#ddd4ff;font-size:13px;font-weight:850}
.dice-count-name{flex:1;color:#b4c1d3;font-size:12px}
.dice-stepper,.modifier-stepper{display:inline-flex;align-items:center;gap:4px}
.dice-stepper button,.modifier-stepper button{width:34px;height:34px;border-radius:10px;border:1px solid #3f516a;background:#27364a;color:#dbe3f5;display:grid;place-items:center}
.dice-stepper button:hover,.modifier-stepper button:hover{background:#40506c}
.dice-stepper strong{width:23px;text-align:center;font-weight:800}
.dice-sum{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 0}
.dice-formula{font-size:16px;color:#e5ddff;font-weight:830;flex:1;min-width:0;overflow-wrap:anywhere}
.modifier-stepper{flex:none}
.modifier-stepper label{font-size:11px;color:#aab8cb;margin-right:3px}
.modifier-stepper input{width:53px;height:34px;min-height:34px;text-align:center;border-radius:9px;background:#162335;border:1px solid #4e6079;color:#f7f8ff;padding:0 3px;font-size:13px;appearance:textfield}
.modifier-stepper input::-webkit-outer-spin-button,.modifier-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ability-checks{margin:0;gap:7px}
.ability-checks .small{font-weight:740;font-size:12px;color:#b3c0d2}
.ability-chip{background:#272e4c;color:#c9bfff;border:1px solid #464267;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:750}
.ability-chip:hover{background:#38315b}
.dice-mode-box{display:flex;flex-direction:column;gap:8px}
.dice-mode-box>span{font-size:12px;font-weight:760;color:#dce3ef}
.dice-mode-box small{font-size:11px;color:#8fa1ba}
.dice-mode-options{background:#111d2b;display:grid;grid-template-columns:repeat(3,1fr);padding:4px;gap:4px;border-radius:13px;border:1px solid #3c4c62}
.dice-mode-options button{border:0;border-radius:9px;background:none;color:#acb9cb;font-size:12px;font-weight:750;padding:10px 4px;min-height:38px}
.dice-mode-options button.active{background:#a49cf0;color:#19172f}
.dice-mode-options button:disabled{color:#64758d;opacity:.5;cursor:default}
.advanced-dice{font-size:12px;color:#aebbd1}
.advanced-dice summary{cursor:pointer;color:#b9b0f5;padding:2px 0}
.advanced-dice .field{margin:12px 0 0}
.dice-form .field{margin:0;gap:6px}
.dice-form .field label{font-size:12px;color:#bdcadd}
.dice-form .field input,.dice-form .field select{border-radius:12px;min-height:43px;background:#1c2a3c;border-color:#40516b}
.dice-action-footer{position:sticky;bottom:-27px;z-index:5;padding:14px 0 13px;background:linear-gradient(180deg,#182437dd,#182437 25%);margin:0}
.dice-submit{min-height:49px;width:100%;font-size:15px;letter-spacing:-.01em}
.dice-preview .dice-result{margin-top:0}
.dice-shared-note{margin-top:9px;color:#a9cbbf;display:flex;align-items:center;gap:5px;font-size:12px}
.dice-result{padding:13px 15px;border:1px solid #6d5b9c;border-radius:15px;background:linear-gradient(120deg,#31304f,#1b2c41);display:grid;grid-template-columns:1fr auto;gap:7px 15px;align-items:start;margin-top:10px}
.dice-heading{font-size:13px;color:#f7f5ff;font-weight:800;min-width:0}
.dice-heading span{font-size:11px;color:#b1bbd5;margin-top:4px}
.dice-detail{grid-column:1;display:flex;flex-wrap:wrap;gap:6px}
.roll-die-group{display:flex;align-items:center;flex-wrap:wrap;gap:7px;width:100%;font-size:12px}
.roll-type{font-weight:790;color:#d1c5ff;min-width:34px}
.roll-values{display:inline-flex;gap:4px;flex-wrap:wrap;align-items:center}
.roll-values b{display:inline-grid;place-items:center;min-width:25px;min-height:25px;padding:2px 6px;border:1px solid #8172b5;border-radius:7px;background:#3c3b68;color:#f4ecff;font-size:12px}
.roll-values small{font-weight:660;color:#bdc7dd}
.roll-modifier{font-size:11px;color:#d5c6fc}
.dice-total{grid-column:2;grid-row:1/span 2;align-self:center;text-align:center;color:#fff;font:800 35px/1 Inter,system-ui,sans-serif;min-width:56px}
.dice-total small{display:block;font-size:9px;font-family:inherit;color:#b4a9ec;letter-spacing:.11em;margin-bottom:6px}
.roll-history-row{border-bottom-color:#334358}
.roll-history-row>span{color:#cbbcff;font-family:inherit;font-weight:830}
.roll-history-row small{color:#9cacc3}
.more-option{background:#1f2d42;border-color:#3b4d66}
.more-option>span{color:#c4b9ff;min-width:34px;display:grid;place-items:center}
.more-option:hover{background:#2b3a55}
.more-option>svg{color:#9aabc2}
@media(min-width:691px) and (max-width:950px){
 .app-shell{grid-template-columns:78px minmax(0,1fr)}
 .chat-shell{grid-template-columns:minmax(260px,320px) minmax(0,1fr)}
 .brand{padding:20px 17px}
 .nav-button{justify-content:center;padding:11px}
 .nav-button .nav-label,.brand-text,.campaign-switch strong,.campaign-switch small{display:none}
 .thread-top{padding:0 15px}
 .compose{padding:12px}
}
@media(max-width:690px){
 html,body{height:100%;overflow:hidden}
 .app-shell{display:flex;flex-direction:column;height:100dvh;max-height:100dvh;overflow:hidden}
 .side-nav{display:none}
 .main-shell{flex:1 1 0;height:auto;min-height:0;min-width:0;background:#101927}
 .app-shell.chat-view .top-bar{display:none}
 .top-bar{min-height:calc(61px + env(safe-area-inset-top));height:calc(61px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 18px 0;background:#142032;border-bottom:1px solid #304059}
 .top-bar h1{font-size:22px}
 .top-right{gap:4px}
 .top-right .icon-btn{min-width:39px;min-height:42px}
 .content{padding:19px 15px calc(91px + env(safe-area-inset-bottom));overscroll-behavior:contain}
 .content.chat-content{height:0;min-height:0;flex:1 1 0;overflow:hidden;padding:0 0 calc(69px + env(safe-area-inset-bottom))}
 .app-shell.thread-open .content.chat-content{padding:0;}
 .mobile-nav{display:flex;position:fixed;z-index:21;bottom:0;left:0;right:0;min-height:calc(66px + env(safe-area-inset-bottom));padding:7px 4px calc(6px + env(safe-area-inset-bottom));border-top:1px solid #303f57;background:#151f30;box-shadow:0 -6px 26px #070b1438;backdrop-filter:blur(15px)}
 .mobile-nav button{flex:1;min-width:0;min-height:52px;padding:4px 1px;gap:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#96a8c3;font-size:11px;font-weight:700}
 .mobile-nav button.active{color:#c3b6ff}
 .mobile-nav button svg{height:23px;width:23px}
 .mobile-tab-label{font-size:11px;line-height:1.2}
 .mobile-unread{position:absolute;top:-3px;right:26%;background:#aea3ff;color:#15152d;border:0}
 .chat-shell{height:100%;display:flex;flex-direction:column;overflow:hidden;min-height:0}
 .thread-list,.thread-pane{height:100%;min-height:0;width:100%;overflow:hidden}
 .chat-shell.has-active .thread-list{display:none}
 .chat-shell:not(.has-active) .thread-pane{display:none}
 .thread-list{background:#111c2a;border:0}
 .thread-list-head{padding:calc(23px + env(safe-area-inset-top)) 20px 17px;min-height:116px;background:#111c2a}
 .thread-list-head h2{font-size:30px}
 .thread-list-head p{font-size:12px}
 .chat-search{margin:0 15px 12px;height:46px;min-height:46px}
 .threads{padding:0 10px}
 .thread{padding:15px 12px;min-height:74px;margin:0 0 3px;gap:13px}
 .thread .avatar{height:48px;width:48px}
 .thread-name-row strong{font-size:15px}
 .thread-preview{font-size:13px}
 .thread-list-footer{display:none}
 .thread-top{min-height:calc(66px + env(safe-area-inset-top));height:calc(66px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 13px 0;gap:10px;background:#172335}
 .thread-heading-avatar .avatar{width:39px;height:39px}
 .thread-heading strong{font-size:15px}
 .thread-heading span{font-size:11px}
 .thread-dice-btn{height:39px;width:41px;padding:0;justify-content:center}
 .thread-dice-btn>span{display:none}
 .back-convo{height:40px;width:35px;min-width:35px;padding:5px}
 .message-scroll{padding:14px 14px 19px;overflow-y:auto;min-height:0;height:0;flex:1 1 0}
 .message{max-width:88%;margin-bottom:11px}
 .message-label{font-size:11px}
 .bubble{font-size:14px;border-radius:17px 17px 17px 6px;padding:10px 13px}
 .message.own .bubble{border-radius:17px 17px 6px 17px}
 .compose{margin-top:auto;position:relative;bottom:0;min-height:calc(68px + env(safe-area-inset-bottom));padding:9px 10px calc(11px + env(safe-area-inset-bottom));gap:6px;background:#172335;border-top:1px solid #34435a;flex:0 0 auto}
 .compose-field{border-radius:19px;padding:0 10px}
 .compose textarea{height:43px;min-height:43px;max-height:116px;font-size:16px;padding:10px 0}
 .compose-action,.compose-dice,.compose-send{width:41px;height:43px;min-width:41px;border-radius:14px}
 .compose-action svg,.compose-dice svg,.compose-send svg{width:21px;height:21px}
 .hero-card{border-radius:18px;padding:25px 22px;min-height:220px}
 .hero-card h1{font-size:31px}
 .hero-count{display:none}
 .campaign-quick-row{grid-template-columns:1fr;gap:9px}
 .quick-tile{padding:13px 15px;border-radius:15px}
 .quick-tile-icon{height:42px;width:42px}
 .resource{border-radius:14px}
 .panel{border-radius:16px}
 .section-header{gap:12px;flex-wrap:wrap}
 .section-header .btn{min-height:40px}
 dialog{position:fixed;inset:auto 0 0!important;margin:0!important;width:100vw;max-width:none;max-height:calc(94dvh - env(safe-area-inset-top));border-radius:25px 25px 0 0;border-bottom:0;overflow-y:auto;overscroll-behavior:contain}
 .modal-body{padding:22px 19px calc(22px + env(safe-area-inset-bottom))}
 .modal-head h2{font-size:23px}
 .dice-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
 .die-preset{min-height:70px;height:70px;border-radius:13px}
 .die-symbol{font-size:26px}
 .dice-sum{align-items:start;flex-direction:column;gap:12px}
 .modifier-stepper{align-self:flex-end}
 .dice-action-footer{bottom:calc(-22px - env(safe-area-inset-bottom));padding:13px 0 calc(16px + env(safe-area-inset-bottom))}
 .dice-form{gap:12px}
 .dice-hint{font-size:13px}
 .dice-result{grid-template-columns:minmax(0,1fr) auto}
 .more-option{border-radius:14px;padding:15px}
 .auth-page{grid-template-columns:1fr;overflow-y:auto;max-height:100dvh}
 .auth-aside{padding:26px 23px 20px}
 .auth-aside h1{font-size:35px}
 .auth-main{padding:26px 23px}
}
@media(min-width:691px){.thread-list,.thread-pane{display:flex}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Each die face shows its own live count after repeated taps. */
.die-preset{position:relative;isolation:isolate}
.die-selected-count{position:absolute;top:4px;right:5px;min-width:23px;height:23px;display:grid;place-items:center;border-radius:999px;background:#b9adff;color:#13162b;border:2px solid #26364c;font-size:12px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.die-selected-count[hidden]{display:none}
.die-preset.queued{border-color:#b9adff;background:#34355d;box-shadow:inset 0 0 0 1px #b9adff2b}
.die-preset.queued .die-symbol{color:#c5bcff}
@media(max-width:690px){.die-selected-count{top:3px;right:3px}}
.auth-waitlist{margin-top:24px;padding-top:20px;border-top:1px solid var(--border,#d9c9b5)}.auth-waitlist>p{font-size:.86rem;line-height:1.55;margin:8px 0 14px}.auth-waitlist .btn{width:100%}.waitlist-entries{list-style:none;margin:0;padding:0}.waitlist-entry{display:grid;gap:5px;padding:12px 0;border-bottom:1px solid var(--border,#ddd);overflow-wrap:anywhere}