/* Games42 Rusty design. Loaded last so this compact design layer owns the platform chrome. */
:root,
html[data-g42-theme="rusty-light"]{
  --g42-header-height:3.65rem;
  --skin-bg:#d6bc8c;
  --skin-panel:#efd9ae;
  --skin-panel-2:#e2c795;
  --skin-card:#f4deb4;
  --skin-line:#211d18;
  --skin-ink:#171512;
  --skin-muted:#655442;
  --skin-action:#d41459;
  --skin-action-text:#fff8e8;
  --skin-accent:#087f9a;
  --skin-danger:#a51f2d;
  color-scheme:light;
}
html[data-g42-theme="rusty-dark"]{
  --skin-bg:#211d18;
  --skin-panel:#342c23;
  --skin-panel-2:#463a2d;
  --skin-card:#3c3126;
  --skin-line:#e4c991;
  --skin-ink:#fff0d0;
  --skin-muted:#c7ad80;
  --skin-action:#e42b6d;
  --skin-action-text:#fff8e8;
  --skin-accent:#30aec5;
  --skin-danger:#e45d61;
  color-scheme:dark;
}

html{background:var(--skin-bg);color:var(--skin-ink);font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif}
body{padding-top:var(--g42-header-height);background-color:var(--skin-bg);background-image:linear-gradient(rgb(214 188 140/.1),rgb(214 188 140/.1)),url("theme/spielkarten-plakat.webp");background-position:center top;background-size:cover;background-attachment:fixed;color:var(--skin-ink)}
html[data-g42-theme="rusty-dark"] body{background-image:linear-gradient(rgb(17 14 11/.72),rgb(17 14 11/.72)),url("theme/spielkarten-plakat.webp")}
button,input,select,textarea{font-family:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--skin-accent);outline-offset:2px}

/* Permanent platform header */
#shellbar.shellbar{position:fixed;z-index:100;inset:0 0 auto 0;width:100%;height:var(--g42-header-height);min-height:var(--g42-header-height);max-height:var(--g42-header-height);padding:0 max(.6rem,env(safe-area-inset-right)) 0 max(.55rem,env(safe-area-inset-left));display:flex;align-items:center;gap:.65rem;overflow:visible;border:0;border-bottom:3px solid #070706;border-radius:0;background:#171512;color:#fff2d3;box-shadow:0 3px 0 #d41459,0 7px 18px #0004;isolation:isolate;transition:none}
#shellbar.shellbar::before{content:"";position:absolute;z-index:-1;inset:0;background:repeating-linear-gradient(135deg,transparent 0 8px,#fff1 9px 10px),#171512;opacity:1;transform:none;border:0;border-radius:0;box-shadow:none}
#shellbar .shell-logo{position:relative;align-self:stretch;flex:0 0 4.65rem;width:4.65rem;height:auto;padding:.15rem .25rem .1rem;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;place-items:center;border:0;border-inline:3px solid #070706;border-radius:0;background:#d41459;color:#fff;box-shadow:3px 0 0 #087f9a,-2px 0 0 #171512;transform:rotate(-1deg);overflow:hidden}
#shellbar .shell-logo-number{font:900 1.75rem/.75 Impact,"Arial Black",sans-serif;letter-spacing:-.07em;text-shadow:2px 2px 0 #171512}
#shellbar .shell-logo-word{font:900 .58rem/.9 Impact,"Arial Black",sans-serif;letter-spacing:.12em;text-transform:uppercase}
#shellbar #shellMenu,#shellbar.open #shellMenu{position:static;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:calc(var(--g42-header-height) - .4rem);align-items:center;flex:1 1 auto;width:auto;height:auto;min-width:0;min-height:0;padding:0;gap:.7rem;overflow:visible;opacity:1;visibility:visible;transform:none;pointer-events:auto;background:transparent;white-space:nowrap;transition:none}
#shellbar .shell-room{grid-column:1;grid-row:1;display:flex;align-items:center;min-width:0;min-height:0}
#shellbar #shellRoomChat{display:flex;align-items:center;max-width:13rem;padding:.35rem .5rem;border:0;background:transparent;color:inherit;text-align:left}
#shellbar #shellRoomChat:not(:disabled):hover{background:#fff1}
#shellbar #shellRoomName{display:block;max-width:12rem;overflow:hidden;text-overflow:ellipsis;font:900 .78rem/1 Impact,"Arial Black",sans-serif;letter-spacing:.045em;text-transform:uppercase}
#shellbar #shellStatus{margin:0;color:#9fd39a;font:700 .66rem Arial,sans-serif}
#shellbar .shell-players{grid-column:2;grid-row:1;display:flex;align-items:center;flex-wrap:nowrap;min-width:0;max-width:100%;margin:0;padding:0;gap:.28rem;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
#shellbar .shell-player{flex:0 0 auto;height:1.9rem;min-height:1.9rem;max-width:9rem;padding:0;border:2px solid #080706;border-left:.42rem solid var(--player-color,#655442);border-radius:0;background:#28231d;color:#fff2d3;box-shadow:2px 2px 0 #0008}
#shellbar .shell-player-contact{height:100%;max-width:100%;padding:.25rem .45rem;border:0;background:transparent;color:inherit;font:800 .68rem/1 Arial,sans-serif}
#shellbar .shell-player-contact:hover,#shellbar .shell-player-contact:focus-visible{background:#fff2d322;outline:0}
#shellbar .presence-dot{width:.42rem;height:.42rem;flex-basis:.42rem;box-shadow:0 0 0 1px #171512}
#shellbar .host-crown{color:#f4c14d}
#shellbar .shell-settings{grid-column:3;grid-row:1;position:relative;display:block;align-self:center;margin:0}
#shellbar #shellMenu .shell-settings-toggle{display:grid;place-items:center;width:2.15rem;height:2.15rem;min-width:2.15rem;padding:.38rem;border:2px solid #efd9ae;border-radius:0;background:#28231d;color:#efd9ae;box-shadow:2px 2px 0 #087f9a}
#shellbar #shellMenu .shell-settings-toggle:hover,#shellbar #shellMenu .shell-settings-toggle[aria-expanded="true"]{background:#d41459;color:#fff;border-color:#fff}
#shellbar .shell-settings-toggle svg{width:1.15rem;height:1.15rem;filter:none;transform:none}
#shellbar .shell-settings-toggle .comic-gear path{fill:currentColor;stroke:none}
#shellbar .shell-settings-toggle .comic-gear circle{fill:#171512;stroke:currentColor;stroke-width:1.5}
#shellbar .shell-settings-panel{position:absolute;z-index:110;top:calc(100% + .65rem);right:0;width:min(15rem,calc(100vw - 1rem));padding:.55rem;display:grid;grid-template-columns:1fr;gap:.38rem;border:3px solid #171512;border-radius:0;background:var(--skin-panel);color:var(--skin-ink);box-shadow:6px 6px 0 #171512}
#shellbar .shell-settings-panel[hidden]{display:none}
#shellbar #shellMenu .shell-settings-panel .shell-settings-item{display:grid;grid-template-columns:1.15rem minmax(0,1fr);place-items:center start;width:100%;height:auto;min-height:2.35rem;padding:.45rem .55rem;gap:.55rem;border:2px solid var(--skin-line);border-radius:0;background:transparent;color:var(--skin-ink);font:900 .7rem/1.1 Arial,sans-serif;text-align:left;text-transform:uppercase;box-shadow:none}
#shellbar #shellMenu .shell-settings-panel .shell-settings-item:hover{background:var(--skin-action);color:var(--skin-action-text)}
#shellbar #shellMenu .shell-settings-panel .shell-settings-item:disabled{opacity:.35}
#shellbar #shellMenu .shell-settings-panel .shell-exit-button{color:var(--skin-danger)}
#shellbar .shell-resize-handle,#shellbar .shell-pin-toggle{display:none!important}

/* Homepage and room surfaces */
.masthead{min-height:clamp(13rem,28vw,23rem);padding:clamp(2rem,6vw,5rem);display:flex;align-items:center;justify-content:center;border-bottom:4px solid #171512;background:transparent;color:#171512;text-align:center;box-shadow:0 5px 0 #087f9a;overflow:hidden}
.masthead::before{content:"SPIELABEND";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);font:900 clamp(4rem,16vw,13rem)/.8 Impact,"Arial Black",sans-serif;letter-spacing:-.04em;color:#efd9ae88;-webkit-text-stroke:2px #17151233;white-space:nowrap}
.masthead::after{content:"42";right:4%;bottom:-.25em;color:#d4145930;font-size:clamp(12rem,31vw,29rem)}
.masthead h1{padding:.15em .24em .08em;border:clamp(.15rem,.4vw,.3rem) solid #171512;background:#d41459;color:#fff5df;font:900 clamp(3rem,9vw,7.5rem)/.82 Impact,"Arial Black",sans-serif;letter-spacing:-.055em;text-transform:uppercase;box-shadow:.1em .1em 0 #087f9a;text-shadow:.04em .04em 0 #171512;transform:rotate(-2deg)}
.masthead-collage{display:none}
.desk-v2{max-width:82rem;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.2vw,2rem);margin:-2.4rem auto 0;padding:0 clamp(1rem,3vw,2rem) 3rem}
.desk-v2 .card{min-height:22rem;aspect-ratio:auto;padding:clamp(1.3rem,2.5vw,2rem);border:3px solid var(--skin-line);border-radius:.2rem;background:rgb(239 217 174/.96);color:var(--skin-ink);box-shadow:8px 8px 0 #171512;transform:none}
.desk-v2 .card:nth-child(2){background:rgb(226 199 149/.97);transform:rotate(.4deg)}
.desk-v2 .card:nth-child(3){background:rgb(212 20 89/.95);color:#fff5df;transform:rotate(-.35deg)}
.card h2,.section-head h2,.room-view h1,.room-view h2{font-family:Impact,"Arial Black",Arial,sans-serif;letter-spacing:.015em;text-transform:uppercase}
.card-no{color:currentColor;font-family:Impact,"Arial Black",sans-serif;opacity:.18}
.card input,.card select{border-bottom:3px solid currentColor;color:inherit}
.card input:focus,.card select:focus{box-shadow:0 4px 0 var(--skin-accent)}
.primary,.ink,.room-tile button,.private-chat form button{border:3px solid #171512;border-radius:0;background:var(--skin-action);color:var(--skin-action-text);box-shadow:4px 4px 0 #171512;transition:transform .12s,box-shadow .12s}
.primary:hover,.ink:hover,.room-tile button:hover,.private-chat form button:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 #171512}
.primary:active,.ink:active,.room-tile button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #171512}
.random-room-name{border-width:3px;border-radius:0}
.mobile-home-tabs,.mobile-room-tabs{border:3px solid var(--skin-line);border-radius:0;background:var(--skin-panel);box-shadow:4px 4px 0 #171512}
.mobile-home-tabs button[aria-selected="true"],.mobile-room-tabs button[aria-selected="true"]{background:var(--skin-action);color:#fff;box-shadow:2px 2px 0 #171512}
.catalog-section{background:rgb(214 188 140/.82);border-top:4px solid #171512}
.catalog{max-width:82rem;margin:auto}
.game-card,.vote-card{border:3px solid #171512;border-radius:.25rem;box-shadow:7px 7px 0 #171512;transform:none}
.game-card:nth-child(even){transform:none}
.game-card-front::after{background:linear-gradient(180deg,transparent 22%,rgba(10,8,6,.25) 58%,rgba(10,8,6,.92))}
.game-card-back{background-color:#f4deb4;background-image:repeating-linear-gradient(0deg,transparent 0 27px,#087f9a44 28px 29px);color:#171512}
.card-info{border:3px solid #171512!important;border-radius:.15rem!important;background:#efd9ae!important;color:#171512!important;box-shadow:3px 3px 0 #171512!important}
.room-view{position:fixed;z-index:20;inset:var(--g42-header-height) 0 0;padding:clamp(1rem,4vw,3.5rem);background-color:var(--skin-bg);background-image:linear-gradient(rgb(214 188 140/.25),rgb(214 188 140/.25)),url("theme/spielkarten-plakat.webp");background-position:center;background-size:cover;color:var(--skin-ink)}
html[data-g42-theme="rusty-dark"] .room-view{background-image:linear-gradient(rgb(17 14 11/.78),rgb(17 14 11/.78)),url("theme/spielkarten-plakat.webp")}
.room-view .room-top{max-width:88rem;padding:1.25rem 1.5rem;border:3px solid var(--skin-line);background:rgb(239 217 174/.94);color:var(--skin-ink);box-shadow:7px 7px 0 #171512}
.room-view .room-title{margin:.15rem 0;font-size:clamp(2.2rem,6vw,5.4rem);color:var(--skin-ink)}
.room-view .room-grid>aside{border:3px solid var(--skin-line);background:rgb(239 217 174/.94);color:var(--skin-ink);box-shadow:7px 7px 0 #171512}
.room-view .member{border-bottom:2px solid color-mix(in srgb,var(--skin-line) 30%,transparent)}
.room-view .member button{color:var(--skin-ink)}
.room-view .room-actions button{border:2px solid var(--skin-line);border-radius:0;background:transparent;color:var(--skin-ink)}
.room-view .room-actions .primary{border:3px solid #171512;background:var(--skin-action);color:#fff}
.room-view [data-room-panel="games"]>.eyebrow{display:inline-block;padding:.35rem .55rem;background:#171512;color:#efd9ae}

/* Dialogs, private chat and notices share the same poster-card language. */
.join-dialog,.shell-dialog,.private-chat{border:3px solid #171512;border-radius:0;background:var(--skin-panel);color:var(--skin-ink);box-shadow:8px 8px 0 #171512}
.join-dialog::backdrop,.shell-dialog::backdrop{background:rgb(15 12 9/.78)}
.private-chat{z-index:105;left:auto;right:max(.7rem,env(safe-area-inset-right));background:#211d18;color:#fff0d0}
.private-chat textarea{border:2px solid #efd9ae;background:#171512;color:#fff0d0}
.chat-message{border-left:4px solid var(--skin-accent);background:#342c23}
.chat-message.mine{border-color:var(--skin-action);background:#493327}
.message-notice{z-index:106;top:calc(var(--g42-header-height) + .65rem);left:auto;right:max(.7rem,env(safe-area-inset-right));border:3px solid #171512;border-left:7px solid var(--skin-action);border-radius:0;background:#efd9ae;color:#171512;box-shadow:6px 6px 0 #171512}
.theme-grid-base{grid-template-columns:repeat(3,minmax(0,1fr))}
.theme-choice{border:2px solid var(--skin-line);border-radius:0;background:transparent;color:var(--skin-ink);box-shadow:3px 3px 0 #171512}
.theme-choice[aria-pressed="true"]{background:var(--skin-action);color:#fff}
.theme-preview{background:repeating-linear-gradient(135deg,var(--skin-panel-2) 0 8px,var(--skin-card) 8px 16px)!important}

.shell iframe,.shell.collapsed iframe{position:fixed;inset:var(--g42-header-height) 0 0;width:100%;height:calc(100dvh - var(--g42-header-height));border:0;background:#fff}

@media(max-width:720px){
  :root{--g42-header-height:3.4rem}
  body{background-image:linear-gradient(rgb(214 188 140/.12),rgb(214 188 140/.12)),url("theme/spielkarten-plakat-mobile.webp")}
  #shellbar.shellbar,#shellbar.shellbar.open{top:0;left:0;width:100%;height:var(--g42-header-height);min-height:var(--g42-header-height);max-height:var(--g42-header-height);padding-inline:.35rem;align-items:center;border-radius:0}
  #shellbar .shell-logo{flex-basis:3.65rem;width:3.65rem;transform:none}
  #shellbar .shell-logo-number{font-size:1.48rem}
  #shellbar .shell-logo-word{font-size:.48rem}
  #shellbar #shellMenu,#shellbar.open #shellMenu{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:calc(var(--g42-header-height) - .3rem);width:auto;height:auto;min-width:0;padding:0;gap:.25rem}
  #shellbar .shell-room{display:none}
  #shellbar .shell-players{grid-column:1;grid-row:1;padding:0}
  #shellbar .shell-settings{grid-column:2;grid-row:1}
  #shellbar .shell-player{max-width:6.5rem;height:1.75rem;min-height:1.75rem}
  #shellbar .shell-player-contact{padding:.2rem .35rem;font-size:.62rem}
  #shellbar #shellMenu .shell-settings-toggle{width:2rem;height:2rem;min-width:2rem}
  #shellbar .shell-settings-panel{top:calc(100% + .55rem)}
  .masthead{min-height:13.5rem;padding:2rem 1rem}
  .masthead h1{font-size:clamp(2.75rem,16vw,4.6rem)}
  .desk-v2{margin:-1.15rem auto 0}
  .mobile-home-tabs{top:calc(var(--g42-header-height) + .45rem)}
  .room-view{inset:var(--g42-header-height) 0 0;background-image:linear-gradient(rgb(214 188 140/.28),rgb(214 188 140/.28)),url("theme/spielkarten-plakat-mobile.webp")}
  .room-view .room-top{padding:1rem}
  .room-view .room-title{font-size:clamp(2rem,12vw,3.4rem)}
  .theme-grid-base{grid-template-columns:1fr}
  .private-chat{right:.5rem;width:calc(100vw - 1rem)}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Beat the former skin layer's ID selectors; this is the single final header authority. */
html[data-g42-theme] #shellbar.shellbar{background:#171512;border:0;border-bottom:3px solid #070706;border-radius:0;box-shadow:0 3px 0 #d41459,0 7px 18px #0004}
html[data-g42-theme] #shellbar.shellbar::before{inset:0;border:0;border-radius:0;background:repeating-linear-gradient(135deg,transparent 0 8px,#fff1 9px 10px),#171512;box-shadow:none;opacity:1;transform:none}
html[data-g42-theme] #shellbar.shellbar .shell-logo{width:4.65rem;height:auto;padding:.15rem .25rem .1rem;border:0;border-inline:3px solid #070706;border-radius:0;background:#d41459;color:#fff;box-shadow:3px 0 0 #087f9a,-2px 0 0 #171512;transform:rotate(-1deg)}
html[data-g42-theme] #shellbar.shellbar #shellMenu,html[data-g42-theme] #shellbar.shellbar.open #shellMenu{display:grid;opacity:1;visibility:visible;transform:none;pointer-events:auto;background:transparent}
html[data-g42-theme] #shellbar.shellbar #shellMenu .shell-settings-toggle{width:2.15rem;height:2.15rem;min-width:2.15rem;padding:.38rem;border:2px solid #efd9ae;border-radius:0;background:#28231d;color:#efd9ae;box-shadow:2px 2px 0 #087f9a;opacity:1;pointer-events:auto;transform:none}
html[data-g42-theme] #shellbar.shellbar #shellMenu .shell-settings-toggle:is(:hover,:focus-visible,[aria-expanded="true"]){border:2px solid #fff;background:#d41459;color:#fff}
html[data-g42-theme] #shellbar.shellbar .shell-settings-toggle .comic-gear path{fill:currentColor;stroke:none}
html[data-g42-theme] #shellbar.shellbar .shell-settings-toggle .comic-gear circle{fill:#171512;stroke:currentColor;stroke-width:1.5}
html[data-g42-theme] #shellbar.shellbar .shell-player{border:2px solid #080706;border-left:.42rem solid var(--player-color,#655442);border-radius:0;background:#28231d;color:#fff2d3;box-shadow:2px 2px 0 #0008}
html[data-g42-theme] #shellbar.shellbar #shellMenu .shell-player-contact{color:#fff2d3;font-weight:800}
html[data-g42-theme] #shellbar.shellbar .presence-dot{box-shadow:0 0 0 1px #171512}
@media(max-width:720px){
  html[data-g42-theme] #shellbar.shellbar .shell-logo{width:3.65rem;transform:none}
  html[data-g42-theme] #shellbar.shellbar:not(.has-room) #shellMenu{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:calc(var(--g42-header-height) - .3rem)}
  html[data-g42-theme] #shellbar.shellbar:not(.has-room) .shell-room{display:none}
  html[data-g42-theme] #shellbar.shellbar:not(.has-room) .shell-players{grid-column:1;grid-row:1}
  html[data-g42-theme] #shellbar.shellbar:not(.has-room) .shell-settings{grid-column:2;grid-row:1}
}