/* Bright welcome with a compact cafe header and actions beside the portrait. */
@layer studio {
 body.studio-3d #onlineModal:has(.welcome-scene) .online-dialog {
  width:min(960px,calc(100vw - 24px))!important;display:flex!important;flex-direction:column!important;
  min-height:0!important;background:#faf7ef!important;border:1px solid #c5a15d!important;
  border-radius:22px!important;padding:14px!important;box-shadow:0 20px 65px #0005!important;
 }
 body.studio-3d #onlineModal:has(.welcome-scene) .last-trick-header {
  flex:0 0 auto;background:transparent!important;padding:4px 6px 12px!important;
  border-bottom:1px solid #ded2b9!important;margin-bottom:12px!important;
 }
 body.studio-3d #onlineModal:has(.welcome-scene) .last-trick-header span {
  color:#6c604e!important;-webkit-text-fill-color:#6c604e!important;
 }
 body.studio-3d #onlineModal:has(.welcome-scene) #onlineTitle {
  color:#214c3b!important;-webkit-text-fill-color:#214c3b!important;
 }
 body.studio-3d #onlineModal:has(.welcome-scene) #closeOnlineButton {
  min-height:44px!important;padding:10px 16px!important;border:1px solid #c5a15d!important;
  border-radius:10px!important;background:#fffdf7!important;color:#214c3b!important;
  -webkit-text-fill-color:#214c3b!important;box-shadow:none!important;
 }
 body.studio-3d #onlineModal:has(.welcome-scene) #onlineContent {
  min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain;
  flex:1 1 auto;padding:0!important;background:transparent!important;border:0!important;
 }
 .welcome-scene {
  box-sizing:border-box;display:grid;grid-template-columns:220px minmax(0,1fr);
  align-items:center;gap:28px;padding:0 30px 30px;
  border:1px solid #ded2b9;border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,#fffdf8,#f3ebdc);
 }
 body.studio-3d #onlineModal #onlineContent .welcome-scene :is(p,strong,span,h2) {
  -webkit-text-fill-color:currentColor!important;opacity:1!important;text-shadow:none!important;
 }
 body.studio-3d #onlineModal #onlineContent .welcome-brand {
  grid-column:1/-1;box-sizing:border-box;margin:0 -30px!important;
  min-height:120px;display:grid;place-items:center;padding:22px!important;
  color:#fff9e9!important;text-align:center;
  font:600 clamp(20px,2.5vw,28px)/1.3 Georgia,serif!important;
  background:linear-gradient(#15271c40,#15271c80),url('../assets/welcome-background-1200.webp') center 36%/cover;
 }
 .welcome-player {display:flex;align-items:center;flex-direction:column;gap:10px;min-width:0;}
 .welcome-avatar {
  position:relative;display:grid;place-items:center;flex-shrink:0;width:112px;height:112px;
  overflow:hidden;border-radius:50%;border:3px solid #c5a15d;background:#e8dec8;
  color:#214c3b;font:700 48px/1 Georgia;box-shadow:0 4px 14px #634a1c1a;
 }
 .welcome-avatar-image {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
 body.studio-3d #onlineModal #onlineContent .welcome-name {
  max-width:100%;text-align:center;overflow-wrap:anywhere;color:#303a32!important;
  font:700 22px/1.3 Georgia,serif!important;
 }
 body.studio-3d #onlineModal #onlineContent .welcome-membership {
  color:#72501d!important;background:#eee1bf;border:1px solid #d5bc85;
  border-radius:20px;padding:5px 13px;font:600 13px/1.4 Arial,sans-serif!important;
 }
 body.studio-3d #onlineModal #onlineContent .welcome-greeting {
  min-width:0;padding:12px 0 12px 28px;border-left:1px solid #ded2b9;
 }
 body.studio-3d #onlineModal #onlineContent .welcome-greeting h2 {
  margin:0 0 12px!important;color:#214c3b!important;
  font:700 clamp(30px,3.8vw,44px)/1.15 Georgia,serif!important;letter-spacing:0;text-transform:none;
 }
 body.studio-3d #onlineModal #onlineContent .welcome-greeting p {
  margin:0!important;color:#665b4d!important;font:400 20px/1.5 Arial,sans-serif!important;
 }
 body.studio-3d #onlineModal #onlineContent .welcome-actions {
  display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0!important;
 }
 body.studio-3d #onlineModal #onlineContent .welcome-actions button {
  flex:1 1 180px;min-height:48px!important;padding:12px 18px!important;
  border:1px solid #214c3b!important;border-radius:10px!important;
  background:#214c3b!important;color:#fffdf7!important;-webkit-text-fill-color:#fffdf7!important;
  font:700 16px/1.4 Arial,sans-serif!important;box-shadow:0 3px 8px #214c3b18!important;
 }
 body.studio-3d #onlineModal #onlineContent #welcomeBuyPremiumButton {
  background:#fffaf0!important;color:#72501d!important;-webkit-text-fill-color:#72501d!important;border-color:#c5a15d!important;
 }
 #welcomeContinueButton::after {content:' →';}
 body.studio-3d #onlineModal #onlineContent .welcome-actions button:hover {filter:brightness(1.08);}
 body.studio-3d #onlineModal #onlineContent .welcome-actions button:focus-visible {outline:3px solid #b3842f;outline-offset:3px;}
 @media(max-width:600px) {
  .welcome-scene {grid-template-columns:1fr;gap:18px;padding:0 18px 20px;}
  body.studio-3d #onlineModal #onlineContent .welcome-brand {
   margin:0 -18px!important;min-height:82px;padding:16px!important;font-size:20px!important;
   background-image:linear-gradient(#15271c40,#15271c80),url('../assets/welcome-background-640.webp');
  }
  .welcome-avatar {width:80px;height:80px;font-size:36px;}
  .welcome-player {gap:7px;}
  body.studio-3d #onlineModal #onlineContent .welcome-greeting {padding:0;border:0;text-align:center;}
  body.studio-3d #onlineModal #onlineContent .welcome-greeting h2 {font-size:30px!important;margin-bottom:8px!important;}
  body.studio-3d #onlineModal #onlineContent .welcome-greeting p {font-size:17px!important;}
  body.studio-3d #onlineModal #onlineContent .welcome-actions {margin-top:16px!important;}
 }
}