/* Campaign startup stays inside the available game viewport, including short windows. */
#welcome-screen {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: min(400px, calc(100% - 24px)); max-height: calc(100% - 24px);
  padding: 18px; box-sizing: border-box; overflow-y: auto; overflow-x: hidden;
  border: 1px solid #38e9ff99; border-radius: 16px; background: rgb(5 20 40 / .96);
  color: #e0f6ff; box-shadow: 0 16px 40px #0008;
  font: 13px/1.45 Inter,Manrope,system-ui,sans-serif; overscroll-behavior: contain;
}
#welcome-screen h2 { margin: 0 0 4px; color: #a7ff24; font-size: 24px; }
#welcome-screen .welcome-brand { display: flex; align-items: center; justify-content: center; gap: 8px; }
#welcome-screen .welcome-emblem { flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; }
#welcome-screen .welcome-brand .brand-title { flex: 1 1 0; min-width: 0; width: calc(100% - 72px); margin: 0; }
#welcome-screen .welcome-subtitle { margin: 0 0 12px; color: #a6e9ff; font-size: 13px; }
#welcome-screen #playerNameInput { width: 100%; margin: 0 0 8px; padding: 9px; font: inherit; background: #0d2943; color: #effbff; border: 1px solid #38e9ff80; border-radius: 8px; }
#welcome-screen .welcome-direct-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 23px; align-items: center; gap: 10px; margin: 8px 0 10px; }
#welcome-screen .depth-picker { display: flex; flex-direction: column; min-width: 0; gap: 4px; margin: 0; font-size: 12px; }
#welcome-screen .depth-picker span { display: flex; align-items: center; justify-content: space-between; }
#welcome-screen .depth-picker input { display: block; width: 100%; min-width: 0; margin: 0; }
#welcome-screen .welcome-direct-row .tetrais-help-trigger { width: 23px; min-width: 23px; height: 23px; min-height: 23px; padding: 0; margin: 0; }
#welcome-screen .depth-picker output { color: #a7ff24; font-weight: 800; font-size: 15px; }
#welcome-screen .welcome-btn:disabled { opacity: .45; cursor: not-allowed; }
#welcome-screen .welcome-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 10px 0; }
#welcome-screen .welcome-btn { min-width: 0; box-sizing: border-box; width: 100%; min-height: 40px; padding: 8px; margin: 0; font: 700 12px/1.3 Inter,Manrope,system-ui,sans-serif; border-radius: 10px; box-shadow: none; animation: none; transform: none; }
#welcome-screen .campaign-btn { border: 1px solid #a7ff24; background: #a7ff2433; color: #dfffad; }
#welcome-screen .direct-btn { border: 1px solid #38e9ff; background: #38e9ff33; color: #d2faff; }
.campaign-save-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-top: 10px; border-top: 1px solid #38e9ff40; }
.campaign-save-actions button { min-width: 0; min-height: 36px; padding: 5px; border: 1px solid #38e9ff80; border-radius: 8px; background: #38e9ff22; color: #d2faff; font: 600 11px/1.3 system-ui,sans-serif; cursor: pointer; }
.campaign-save-group { display: flex; align-items: center; gap: 3px; min-width: 0; }
.campaign-save-group > button { flex: 1; align-self: stretch; }
.campaign-save-group [data-help-for] { display: flex; flex: 0 0 23px; }
.campaign-save-group .tetrais-help-trigger { width: 23px; min-width: 23px; height: 23px; min-height: 23px; padding: 0; margin: 0; border-radius: 50%; }
.campaign-save-actions #resetCampaignButton { border-color: #d56bff99; background: #d56bff22; color: #f1ceff; }
.campaign-save-actions button:disabled { opacity: .4; cursor: default; }
#campaignSaveStatus { margin: 8px 0 0; color: #c2e0ef; font-size: 12px; overflow-wrap: anywhere; }
#welcome-screen .campaign-local-note { margin: 6px 0 0; color: #a4c2d5; font-size: 11px; }
#welcome-screen #closeWelcomeButton { float: right; margin: 0 0 6px 8px; border: 1px solid #d56bff90; border-radius: 8px; padding: 5px 8px; background: #d56bff22; color: #f0cdff; }
/* The Campaign badge participates in the shared HUD grid (hud.css). */
.campaign-progress-track { height: 8px; margin-top: 4px; overflow: hidden; border: 1px solid #a7ff2480; border-radius: 5px; background: #04152b; }
.campaign-progress-fill { height: 100%; background: #a7ff2466; }
#message-box :is(input,button,label,p) { box-sizing: border-box; max-width: 100%; font: inherit; }
#message-box input { width: 90%; padding: 10px; margin: 8px 0; background: #0c2940; color: #edfbff; border: 1px solid #38e9ff; }
#message-box button { padding: 8px 16px; }
@media (max-height: 480px) { #welcome-screen { padding: 12px; } #welcome-screen h2 { font-size: 20px; } }