/* Named destinations preserve the native pixel game instead of a mode toggle. */
.game-invitation{grid-column:1/-1;display:grid;grid-template-columns:144px 1fr;gap:24px;align-items:center;padding:18px;border:1px solid #dbe1d5;border-radius:8px;background:#f0f2eb;}
.game-invitation-preview{display:block;overflow:hidden;border-radius:4px;background:#252744;}
.game-invitation-preview img{display:block;width:100%;height:100px;object-fit:cover;image-rendering:pixelated;}
.game-invitation h2{margin:0 0 6px;font:400 28px/1.2 'DM Serif Display',Georgia,serif;color:#1a1a1a;}
.game-invitation p{margin:0 0 10px;color:#6b6b6b;font:400 15px/1.6 Inter,system-ui,sans-serif;}
.game-entry-link{display:inline-flex;align-items:center;gap:20px;color:#2d7a3a;text-underline-offset:4px;font:600 14px/1.5 Inter,system-ui,sans-serif;}
.game-entry-link:hover{color:#245f2e;}
.game-entry-link:focus-visible,.game-invitation-preview:focus-visible{outline:3px solid #2d7a3a;outline-offset:5px;}
.app>header>.game-exit-nav{order:4;flex:none;margin:0;align-self:center;}
.game-portfolio-exit{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:8px 12px;box-sizing:border-box;border:2px solid var(--cream,#f4f0e0);background:#2a3a9c;color:var(--cream,#f4f0e0);text-decoration:none;font:400 9px/1.5 var(--px);white-space:nowrap;box-shadow:inset 0 0 0 2px #161c6a;}
.game-portfolio-exit:hover{background:#3548c0;}
.game-portfolio-exit:focus-visible,.quest-case-link:focus-visible,.title-portfolio-link:focus-visible{outline:3px solid var(--teal,#58b5a8);outline-offset:4px;}
.app>header>.brand .role-tag{font-size:12px;letter-spacing:0;}
.title-portfolio-link{display:inline-flex;min-height:44px;align-items:center;justify-content:center;padding:8px;color:var(--cream,#f4f0e0);text-underline-offset:5px;font:400 9px/1.7 var(--px);margin-top:12px;}
#side .list .quest-has-case{display:grid;grid-template-columns:minmax(0,1fr);gap:0;background:rgba(0,0,0,.15);}
#side .quest-case-link{display:flex;align-items:center;min-height:38px;padding:8px 12px 8px 30px;color:var(--gold,#ffd84a);text-underline-offset:4px;font:400 8px/1.7 var(--px);}
#side .quest-case-link:hover{background:rgba(255,216,74,.1);}
.quest-direct-note{font:400 13px/1.4 var(--txt);color:var(--dim,#a9b0e8);padding-top:10px;margin:12px 0 0;border-top:1px solid #5b64c8;}
.game-navigation-example{display:flex;align-items:center;flex-wrap:wrap;gap:20px;padding:22px 0;}
.pixel-exit-example{display:inline-flex;padding:13px 16px;background:#2a3a9c;border:2px solid #f4f0e0;outline:2px solid #161c6a;color:#f4f0e0;font:400 10px/1.6 'Press Start 2P',monospace;}
.game-navigation-example p{margin:0;color:#6b6b6b;}
@media(min-width:641px){
 .app>header{display:flex;flex-wrap:nowrap;gap:12px;}
 .app>header>.brand{margin-right:auto;min-width:0;}
 .app>header>.game-header-actions{width:auto;gap:8px;margin:0;}
 .app>header>.toggle{order:3;width:auto;}
}
@media(max-width:640px){
 .app>header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;padding:10px 14px;}
 .app>header>.brand{grid-column:1;grid-row:1;margin:0;min-width:0;}
 .app>header>.brand h1{font-size:10px;}
 .app>header>.brand .role-tag{font-size:11px;}
 .app>header>.game-exit-nav{grid-column:2;grid-row:1;justify-self:end;}
 .game-portfolio-exit{font-size:8px;padding:8px 9px;gap:6px;}
 .app>header>.game-header-actions{grid-column:1;grid-row:2;justify-self:start;width:auto;gap:8px;margin:0;}
 .app>header>.game-header-actions>button{width:44px;min-width:44px;flex:0 0 44px;height:44px;padding:0;}
 .app>header>.game-header-actions .hk,.app>header .rl-full{display:none;}
 .app>header .rl-short{display:inline;}
 .app>header>.toggle{grid-column:2;grid-row:2;justify-self:end;min-height:44px;width:auto;padding:8px 12px;font-size:8px;}
 .app>header>.toggle .hk{display:none;}
}
@media(max-width:600px){
 .game-invitation{grid-template-columns:100px 1fr;gap:16px;padding:14px;}
 .game-invitation-preview img{height:110px;}
 .game-invitation h2{font-size:24px;}
 .game-invitation p{font-size:13px;}
 .game-entry-link{font-size:13px;min-height:44px;}
 #side .quest-case-link{min-height:44px;}
}
@media(max-width:359px){
 .app>header{padding-left:10px;padding-right:10px;gap:9px;}
 .app>header>.brand h1{font-size:9px;}
 .app>header>.brand .role-tag{font-size:10px;}
 .game-portfolio-exit{font-size:7px;padding-left:7px;padding-right:7px;gap:4px;}
 .game-invitation{grid-template-columns:1fr;}
 .game-invitation-preview img{height:100px;}
}

/* Editorial welcome card over the original, playable pixel-art house. */
:is(.map,body)>.title{align-items:flex-start;justify-content:flex-end;gap:0;padding:clamp(20px,4vw,44px);text-align:left;background:linear-gradient(0deg,rgba(8,10,30,.32),rgba(8,10,30,.04) 70%);}
.game-welcome-card{flex:none;width:min(650px,100%);max-height:100%;overflow-y:auto;box-sizing:border-box;padding:36px 40px;background:rgba(25,28,50,.96);border:2px solid #727b9a;border-radius:8px;box-shadow:0 14px 35px rgba(5,7,25,.22);letter-spacing:normal;}
.game-welcome-eyebrow{font:400 11px/1.7 var(--px);letter-spacing:.02em;color:#e7cf79;margin-bottom:22px;}
.game-welcome-card h2{font:400 clamp(34px,4.4vw,52px)/1.12 'DM Serif Display',Georgia,serif;letter-spacing:-.02em;color:#f4efda;margin:0 0 24px;text-shadow:none;text-wrap:balance;}
.game-welcome-card p{font:400 17px/1.8 Inter,system-ui,sans-serif;letter-spacing:normal;color:#c6c6d4;max-width:58ch;margin:0 0 28px;text-shadow:none;}
.game-welcome-actions{display:flex;align-items:center;gap:22px 28px;flex-wrap:wrap;}
.game-welcome-card .game-welcome-actions .start{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:52px;padding:15px 20px;margin:0;font:400 11px/1.7 var(--px);color:#24213a;background:#ead990;border:1px solid #cfbd73;box-shadow:0 3px 0 #9d8956;border-radius:3px;animation:none;}
.game-welcome-card .game-welcome-actions .start:hover{background:#f2e3a9;}
.game-welcome-card .game-welcome-actions .start:active{transform:translateY(2px);box-shadow:0 1px 0 #9d8956;}
.game-welcome-actions .title-portfolio-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:0;padding:4px 0;font:400 15px/1.6 Inter,system-ui,sans-serif;letter-spacing:normal;color:#e1e1ed;text-decoration:underline;text-underline-offset:6px;}
.game-welcome-actions .title-portfolio-link:hover{color:#f4efda;}
@media(max-width:600px){
 :is(.map,body)>.title{padding:18px;justify-content:center;}
 .game-welcome-card{padding:25px 24px;}
 .game-welcome-eyebrow{font-size:9px;margin-bottom:17px;}
 .game-welcome-card h2{font-size:36px;margin-bottom:20px;}
 .game-welcome-card p{font-size:15px;line-height:1.75;margin-bottom:24px;}
 .game-welcome-actions{gap:16px;}
 .game-welcome-card .game-welcome-actions .start{font-size:10px;padding:14px 17px;}
 .game-welcome-actions .title-portfolio-link{font-size:14px;}
 .welcome-heading-break{display:none;}
}
@media(max-width:380px){
 :is(.map,body)>.title{padding:14px;}
 .game-welcome-card{padding:22px 20px;}
 .game-welcome-card h2{font-size:32px;}
 .game-welcome-card p{font-size:14px;}
}
@media(max-height:540px){
 :is(.map,body)>.title{padding:14px;}
 .game-welcome-card{padding:20px 26px;}
 .game-welcome-eyebrow{font-size:9px;margin-bottom:10px;}
 .game-welcome-card h2{font-size:32px;margin-bottom:12px;}
 .game-welcome-card p{font-size:14px;line-height:1.6;margin-bottom:16px;}
 .game-welcome-card .game-welcome-actions .start{min-height:44px;font-size:9px;padding:10px 15px;}
}

/* Pixel-native start card; no editorial serif or smooth button treatment. */
:is(.map,body)>.title .game-welcome-card{width:min(700px,100%);border:2px solid var(--cream,#f4f0e0);border-radius:0;background:linear-gradient(rgba(35,43,105,.97),rgba(17,23,65,.98));box-shadow:0 0 0 2px #8a8fc8,0 0 0 5px #0b0d30,6px 7px 0 5px rgba(7,9,27,.35);padding:30px 32px;image-rendering:pixelated;}
.game-welcome-card .game-welcome-eyebrow{font:400 9px/1.8 var(--px);letter-spacing:0;color:var(--gold,#ffd84a);margin-bottom:20px;}
:is(.map,body)>.title .game-welcome-card h2{font:400 clamp(17px,2.4vw,24px)/1.6 var(--px);letter-spacing:0;word-spacing:-.2em;color:var(--cream,#f4f0e0);text-shadow:2px 2px 0 #0b0d30;margin:0 0 19px;text-wrap:initial;}
:is(.map,body)>.title .game-welcome-card p{font:400 21px/1.45 var(--txt);letter-spacing:.015em;color:#d0d3f0;text-shadow:1px 1px 0 #0b0d30;margin:0 0 24px;max-width:52ch;}
.game-welcome-card .game-welcome-actions{gap:18px 22px;}
.game-welcome-card .game-welcome-actions .start{border:0;border-radius:0;min-height:48px;padding:13px 17px;color:#2a1a06;background:var(--gold,#ffd84a);font:400 10px/1.8 var(--px);box-shadow:0 0 0 2px #0b0d30,0 4px 0 2px #a5822a;animation:none;}
.game-welcome-card .game-welcome-actions .start:hover{background:#ffe578;}
.game-welcome-card .game-welcome-actions .start:active{transform:translateY(3px);box-shadow:0 0 0 2px #0b0d30,0 1px 0 2px #a5822a;}
.game-welcome-card .game-welcome-actions .title-portfolio-link{border:2px solid #a9b0e8;border-radius:0;min-height:48px;padding:11px 13px;color:var(--cream,#f4f0e0);background:#202963;font:400 8px/1.8 var(--px);letter-spacing:0;text-decoration:none;box-shadow:inset 0 0 0 2px #161c6a;}
.game-welcome-card .game-welcome-actions .title-portfolio-link:hover{background:#3548c0;border-color:var(--cream,#f4f0e0);}
/* Only the invitation's text has padding. The game preview is full bleed. */
.game-invitation{padding:0;gap:0;grid-template-columns:190px minmax(0,1fr);align-items:stretch;overflow:hidden;}
.game-invitation>.game-invitation-preview{position:relative;min-height:150px;align-self:stretch;border-radius:0;}
.game-invitation-preview picture{position:absolute;inset:0;display:block;width:100%;height:100%;}
.game-invitation-preview img{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center;}
.game-invitation>div{padding:22px 26px;min-width:0;}
@media(max-width:600px){
 :is(.map,body)>.title .game-welcome-card{padding:25px 22px;}
 :is(.map,body)>.title .game-welcome-card h2{font-size:17px;line-height:1.65;}
 :is(.map,body)>.title .game-welcome-card p{font-size:19px;line-height:1.45;}
 .game-welcome-card .game-welcome-eyebrow{font-size:8px;}
 .game-welcome-card .game-welcome-actions{align-items:stretch;gap:16px;}
 .game-welcome-card .game-welcome-actions .start{font-size:9px;}
 .game-welcome-card .game-welcome-actions .title-portfolio-link{font-size:7px;}
 .game-invitation{grid-template-columns:120px minmax(0,1fr);padding:0;gap:0;}
 .game-invitation>.game-invitation-preview{min-height:160px;}
 .game-invitation>div{padding:18px;}
 .game-invitation-preview img{height:100%;}
}
@media(max-width:380px){
 :is(.map,body)>.title .game-welcome-card{padding:22px 18px;}
 :is(.map,body)>.title .game-welcome-card h2{font-size:15px;}
 :is(.map,body)>.title .game-welcome-card p{font-size:18px;}
 .game-welcome-card .game-welcome-actions{flex-direction:column;}
 .game-welcome-card .game-welcome-actions .title-portfolio-link{justify-content:center;}
 .game-invitation{grid-template-columns:1fr;padding:0;}
 .game-invitation>.game-invitation-preview{height:135px;min-height:135px;}
 .game-invitation-preview img{height:100%;}
}
@media(max-height:540px){
 :is(.map,body)>.title .game-welcome-card{padding:20px 24px;}
 .game-welcome-card .game-welcome-eyebrow{margin-bottom:10px;}
 :is(.map,body)>.title .game-welcome-card h2{font-size:17px;line-height:1.5;margin-bottom:12px;}
 :is(.map,body)>.title .game-welcome-card p{font-size:18px;margin-bottom:18px;}
}

/* Keep the invitation sentence and action on one line when space permits. */
.game-invitation .game-invitation-line{display:flex;align-items:baseline;gap:10px 20px;flex-wrap:wrap;}
.game-invitation .game-invitation-line p{margin:0;}
.game-invitation .game-invitation-line .game-entry-link{gap:8px;white-space:nowrap;min-height:0;}
@media(pointer:coarse){.game-invitation .game-invitation-line .game-entry-link{min-height:44px;align-items:center;}}

/* Compact white invitation with a wider, edge-to-edge game view. */
.game-invitation{grid-template-columns:280px minmax(0,1fr);background:#fff;border-color:#dedfd9;min-height:124px;}
.game-invitation>.game-invitation-preview{min-height:124px;}
.game-invitation>div{display:flex;flex-direction:column;justify-content:center;padding:18px 26px;}
.game-invitation h2{margin-bottom:7px;}
.game-invitation .game-invitation-line{display:flex;flex-direction:row;justify-content:flex-start;align-items:baseline;padding:0;}
@media(max-width:900px){.game-invitation{grid-template-columns:240px minmax(0,1fr);}.game-invitation>div{padding:16px 22px;}}
@media(max-width:600px){.game-invitation{grid-template-columns:150px minmax(0,1fr);min-height:132px;}.game-invitation>.game-invitation-preview{min-height:132px;}.game-invitation>div{padding:16px;}.game-invitation .game-invitation-line{gap:7px 14px;}}
@media(max-width:380px){.game-invitation{grid-template-columns:1fr;}.game-invitation>.game-invitation-preview{height:115px;min-height:115px;}.game-invitation>div{padding:17px 19px;}}

/* Welcome actions share a single button box, independent of label length. */
:is(.map,body)>.title .game-welcome-card .game-welcome-actions{align-items:center;}
:is(.map,body)>.title .game-welcome-card .game-welcome-actions :is(.start,.title-portfolio-link){box-sizing:border-box;height:52px;min-height:52px;max-height:52px;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding-top:0;padding-bottom:0;line-height:1.5;}
:is(.map,body)>.title .game-welcome-card .game-welcome-actions .start{position:relative;min-width:164px;padding-left:32px;padding-right:32px;}
:is(.map,body)>.title .game-welcome-card .game-welcome-actions .start>span{position:absolute;right:13px;top:50%;transform:translateY(-50%);}
@media(max-width:380px){:is(.map,body)>.title .game-welcome-card .game-welcome-actions{align-items:stretch;}:is(.map,body)>.title .game-welcome-card .game-welcome-actions :is(.start,.title-portfolio-link){width:100%;}}

/* Named portfolio exit sits at the outer right; Quest Log stays beside it. */
.app>header{padding-right:max(16px,env(safe-area-inset-right));}
.app>header>.game-exit-nav{margin:0;justify-self:end;}
.app>header>.game-exit-nav .game-portfolio-exit{justify-content:center;text-align:center;gap:0;padding-left:13px;padding-right:13px;}
@media(max-width:640px){
 .app>header{grid-template-columns:minmax(0,1fr) auto auto;gap:10px 12px;padding-right:max(14px,env(safe-area-inset-right));}
 .app>header>.brand{grid-column:1;grid-row:1;}
 .app>header>.toggle{grid-column:2;grid-row:1;justify-self:end;width:auto;min-width:88px;}
 .app>header>.game-exit-nav{grid-column:3;grid-row:1;justify-self:end;}
 .app>header>.game-header-actions{grid-column:1/-1;grid-row:2;justify-self:end;width:auto;justify-content:flex-end;}
}
@media(max-width:599px){
 .app>header{grid-template-columns:minmax(0,1fr) auto auto;}
 .app>header>.brand{grid-column:1/3;grid-row:2;}
 .app>header>.game-header-actions{grid-column:3;grid-row:2;justify-self:end;}
 .app>header>.toggle{padding:8px;min-width:88px;}
 .app>header>.game-exit-nav .game-portfolio-exit{font-size:8px;min-width:132px;padding-left:9px;padding-right:9px;}
}
@media(max-width:359px){
 .app>header{gap:9px;padding-right:max(10px,env(safe-area-inset-right));}
 .app>header>.game-exit-nav .game-portfolio-exit{font-size:7px;min-width:120px;}
}

/* Same typography on both welcome actions; longer labels get more width. */
:is(.map,body)>.title .game-welcome-card .game-welcome-actions{--welcome-action-font-size:10px;}
:is(.map,body)>.title .game-welcome-card .game-welcome-actions :is(.start,.title-portfolio-link){font-family:var(--px);font-size:var(--welcome-action-font-size);font-weight:400;line-height:1.5;white-space:nowrap;letter-spacing:0;}
@media(max-width:600px){:is(.map,body)>.title .game-welcome-card .game-welcome-actions{--welcome-action-font-size:9px;}}

/* A quiet separator clarifies the two ways into the portfolio. */
:is(.map,body)>.title .game-welcome-card .game-welcome-actions{flex-wrap:nowrap;gap:18px;}
.game-welcome-actions .game-choice-or{flex:none;align-self:center;color:var(--dim,#a9b0e8);font:400 9px/1.5 var(--px);text-align:center;letter-spacing:0;}
.app>header>.game-exit-nav{margin-left:20px;}
@media(max-width:640px){.app>header>.game-exit-nav{margin-left:4px;grid-column:3;grid-row:1;justify-self:end;}}
@media(max-width:600px){
 :is(.map,body)>.title .game-welcome-card .game-welcome-actions{flex-direction:column;align-items:stretch;gap:14px;}
 :is(.map,body)>.title .game-welcome-card .game-welcome-actions :is(.start,.title-portfolio-link){width:100%;}
 .game-welcome-actions .game-choice-or{font-size:8px;}
}

/* Portfolio exit leads the desktop controls; every control shares one box. */
.app>header{align-items:center;}
.app>header>.game-header-actions{align-items:center;}
.app>header :is(.rulesbtn,.mutebtn,.toggle,.game-portfolio-exit){display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:44px;min-height:44px;margin-top:0;margin-bottom:0;border:2px solid var(--cream,#f4f0e0);box-shadow:inset 0 0 0 2px #161c6a;line-height:1.5;}
@media(min-width:641px){
 .app>header>.brand{order:0;}
 .app>header>.game-exit-nav{order:1;margin-left:0;margin-right:20px;}
 .app>header>.game-header-actions{order:2;}
 .app>header>.toggle{order:3;}
}
@media(max-width:640px){.app>header>.game-exit-nav{margin-left:4px;margin-right:0;}}

/* Identity stays upper left; portfolio precedes the game controls. */
.app>header{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:12px;align-items:center;}
.app>header>.brand{grid-column:1;grid-row:1;order:0;justify-self:start;margin:0;text-align:left;align-items:flex-start;}
.app>header>.game-exit-nav{grid-column:2;grid-row:1;order:0;justify-self:end;margin:0 20px 0 0;}
.app>header>.game-header-actions{grid-column:3;grid-row:1;order:0;justify-self:end;width:auto;margin:0;}
.app>header>.toggle{grid-column:4;grid-row:1;order:0;justify-self:end;margin:0;width:auto;}
.app>header>.game-exit-nav .game-portfolio-exit{background:transparent;box-shadow:none;}
.app>header>.game-exit-nav .game-portfolio-exit:hover{background:transparent;color:var(--gold,#ffd84a);}
/* On compact headers, portfolio is the upper-right exit; quests sit below. */
@media(max-width:640px){
 .app>header{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px 14px;}
 .app>header>.brand{grid-column:1;grid-row:1;justify-self:start;}
 .app>header>.game-exit-nav{grid-column:2;grid-row:1;justify-self:end;margin:0;}
 .app>header>.toggle{grid-column:2;grid-row:2;justify-self:stretch;width:100%;}
 .app>header>.game-header-actions{grid-column:1;grid-row:2;justify-self:end;gap:8px;}
}
@media(max-width:440px){
 .app>header{column-gap:8px;padding-left:12px;padding-right:12px;}
 .app>header>.brand h1{font-size:10px;}
 .app>header>.brand .role-tag{font-size:11px;}
 .app>header>.toggle{font-size:8px;min-width:88px;padding:8px;}
 .app>header>.game-exit-nav .game-portfolio-exit{font-size:8px;min-width:132px;padding:8px 9px;}
}

/* In the single-column project list, the invitation uses project-card rhythm. */
@media(max-width:700px){
 .work-grid>.game-invitation{grid-template-columns:1fr;border:1px solid var(--border);border-radius:10px;background:#fff;}
 .work-grid>.game-invitation>.game-invitation-preview{height:clamp(160px,48vw,240px);min-height:0;}
 .work-grid>.game-invitation>.work-card-copy{display:block;padding:1.5rem;font:inherit;}
 .work-grid>.game-invitation h2{font:400 1.9rem/1.2 var(--font-serif);letter-spacing:-.01em;margin:0 0 .75rem;}
 .work-grid>.game-invitation .game-invitation-line{display:contents;}
 .work-grid>.game-invitation .game-invitation-line p{font-size:16px;line-height:1.6;color:var(--text);margin:0 0 1.25rem;}
 .work-grid>.game-invitation .game-invitation-line .game-entry-link{display:inline;font-family:inherit;font-size:14px;font-weight:600;line-height:inherit;min-height:0;margin:0;padding:0;letter-spacing:normal;}
}

.game-invitation .game-entry-link,.game-invitation .game-entry-link:hover{text-decoration:none;}

/* Keep the invitation action on its own third row at every width. */
.game-invitation .game-invitation-line{display:block;}
.game-invitation .game-invitation-line p{margin:0 0 1.25rem;}
.game-invitation .game-invitation-line .game-entry-link{display:table;margin:0;padding:0;}
@media(max-width:700px){.work-grid>.game-invitation .game-invitation-line .game-entry-link{display:table;}}

/* A full-bleed mobile interlude separates play from the project cards. */
@media(max-width:700px){
 .work-grid>.game-invitation{width:calc(100% + 4rem);margin-inline:-2rem;border:0;border-radius:0;background:transparent;overflow:hidden;}
 .work-grid>.game-invitation>.game-invitation-preview{height:clamp(144px,40vw,210px);min-height:0;border-radius:0;}
 .work-grid>.game-invitation>.work-card-copy{padding:1.5rem calc(3.5rem + 1px);}
}

@media(max-width:700px){.work-grid>.game-invitation{border-bottom:1px solid var(--border);}}

@media(max-width:640px){.app>header>.toggle{font-size:9px;}}

/* Cover the header and world until an explicit welcome choice. */
body>.title{position:fixed;inset:0;z-index:1000;background:rgba(15,25,85,.65);box-sizing:border-box;}
body>.title[hidden]{display:none;}

/* Stronger opening veil and identical pixel type on both choices. */
body>#title{background:rgba(7,12,49,.88);}
#title .game-welcome-actions :is(#start,.title-portfolio-link){font:400 var(--welcome-action-font-size,10px)/1.5 "Press Start 2P","Courier New",monospace;letter-spacing:0;text-transform:none;-webkit-font-smoothing:antialiased;}

/* Center the opening choice across the full viewport. */
body>#title{align-items:center;justify-content:center;text-align:left;}

/* Give the primary action a clear typographic lead. */
#title .game-welcome-actions #start{font-size:calc(var(--welcome-action-font-size,10px) + 2px);}

/* Let the identity breathe at mobile widths with enough room. */
@media(min-width:441px) and (max-width:640px){
 .app>header>.brand h1{font-size:12px;}
 .app>header>.brand .role-tag{font-size:14px;}
}
@media(min-width:360px) and (max-width:440px){
 .app>header>.brand h1{font-size:11px;}
 .app>header>.brand .role-tag{font-size:13px;}
}