.title-screen{min-height:100svh;display:grid;place-items:center;padding:40px 24px;text-align:center;background:#100d1738}
.title-content{width:min(1050px,100%);padding:60px 32px;background:#1b1822eb;border:1px solid #514356;border-radius:24px;box-shadow:0 24px 80px #0006}
.title-screen h1{font-size:clamp(23px,4vw,48px);line-height:1.65;color:var(--tavern-lime);text-shadow:2px 2px #050407,4px 4px #050407,6px 6px #050407,8px 9px #0008;letter-spacing:0;text-wrap:balance}
.title-screen h1 span{font-size:.8em}.title-eyebrow{font-size:13px;color:var(--tavern-gold);margin:0 0 26px}.title-tagline{font-size:12px;line-height:2.2;color:#ded1e6;margin:30px auto;max-width:680px}.title-actions{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:34px}.title-actions .primary{font-size:16px;padding:22px 35px}.title-actions .small{font-size:12px}
.setup-help{display:block;margin:18px 0 0 auto;font-size:10px}
.how-to-play{width:min(820px,94vw);max-height:90svh;overflow:auto;font-size:12px;line-height:2}.guide-header{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:-28px;padding:12px 0;background:#201b28;z-index:1}.guide-header h2{font-size:20px;margin:0;color:var(--tavern-lime)}.guide-header button{font-size:11px}.how-to-play details{border-top:1px solid #655071;padding:18px 0}.how-to-play summary{cursor:pointer;color:var(--tavern-gold);font-size:13px;line-height:1.9}.how-to-play p,.how-to-play li{font-size:12px;line-height:2}.how-to-play li{margin:12px 0}.how-to-play ul{padding-left:24px}.how-to-play strong{color:#ebd1a5}
@media(max-width:480px){.title-screen{padding:18px}.title-content{padding:38px 18px}.title-screen h1{font-size:23px}.title-tagline{font-size:10px}.title-eyebrow{font-size:10px}.guide-header h2{font-size:15px}.how-to-play{padding:20px}.how-to-play p,.how-to-play li{font-size:11px}}
.setup .role-carousel{grid-template-columns:36px minmax(0,1fr) 36px;gap:10px;align-items:center}
.role-carousel .role-label{grid-column:1/-1;min-height:42px;align-self:start}
.role-carousel .role-option{grid-column:2;grid-row:2;min-height:290px;padding:22px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
.role-carousel .role-option .role-portrait{width:72px;height:80px;margin-bottom:16px}
.role-carousel .role-option strong{font-size:13px}.role-carousel .role-option small{max-width:270px}
.role-arrow{grid-row:2;padding:16px 0;border-radius:10px;border:1px solid #695674;background:#302735;color:var(--tavern-gold);font-size:24px;line-height:1;min-height:56px}
.role-previous{grid-column:1}.role-next{grid-column:3}.role-position{grid-column:1/-1;text-align:center;font-size:9px;line-height:1.9;color:#c9bdce;min-height:35px}
@media(max-width:700px) and (min-width:521px){.setup .player-fields{grid-template-columns:1fr}}
@media(max-width:480px){.setup .role-carousel{grid-template-columns:32px minmax(0,1fr) 32px;gap:8px}.role-carousel .role-option{padding:18px 10px;min-height:285px}.role-carousel .role-option strong{font-size:11px}}
.role-info-button{grid-column:1/-1;justify-self:center;font-size:10px;padding:10px 14px;margin-bottom:8px}
.class-info{width:min(660px,94vw);max-height:90svh;overflow:auto}.class-info-header{display:flex;align-items:center;gap:20px}.class-info-header h2{font-size:20px;color:var(--tavern-lime);line-height:1.7;overflow-wrap:anywhere}.class-info .role-portrait{width:72px;height:80px}.class-info h3,.class-info summary{font-size:12px;color:var(--tavern-gold);line-height:1.9}.class-info p{font-size:12px;line-height:2}.class-info details{border-top:1px solid #655071;padding:16px 0;margin:20px 0}.class-info summary{cursor:pointer}#class-info-tag{color:var(--tavern-purple)}#class-info-mode{padding:14px;border:1px solid #655071;border-radius:10px;background:#302735}#close-class-info{font-size:11px}
@media(max-width:480px){.class-info{padding:20px}.class-info-header{gap:12px}.class-info-header h2{font-size:15px}.class-info p{font-size:11px}.class-info .role-portrait{width:56px;height:62px}}
.title-screen h1 .title-subtitle{white-space:nowrap}
.title-screen h1 .mage-letter,.title-screen h1 .mage-letter-front,.title-screen h1 .mage-peek{font-size:inherit}
.mage-letter{position:relative;display:inline-block;isolation:isolate}
.mage-letter-front{position:relative;z-index:2}
.mage-peek{position:absolute;left:50%;bottom:1em;transform:translateX(-50%);width:1.7em;height:1.08em;overflow:hidden;pointer-events:none;z-index:1;text-shadow:none}
.mage-peek img{display:block;width:100%;height:auto;image-rendering:pixelated;background:transparent;border:0;border-radius:0}