/* Gate 4 applies only to player UI. Approved gun render pixels remain unchanged. */
:root[data-accent=custom]{--soft:var(--accent-soft)}
.app{background:radial-gradient(ellipse at 82% 0,color-mix(in srgb,var(--accent) 13%,transparent),transparent 48%),var(--bg)}
.app .surface{background:transparent}.app .topbar{background:color-mix(in srgb,var(--accent) 4%,#111017ed)}
.app .panel,.app .hero,.app .card,.app .dialog,.app .site-card{border-color:var(--line)}
.app .primary,.app .nav-button[aria-current=page],.app .eyebrow,.app .chart .bar{transition:background-color .15s,color .15s,border-color .15s}
.g4-custom-colour{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.g4-custom-colour label{display:grid;gap:7px;font-weight:700;min-width:0}.g4-custom-colour input{width:100%;min-width:0;min-height:48px;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:6px 10px}.g4-custom-colour input[type=color]{cursor:pointer;padding:4px}.g4-custom-colour small{grid-column:1/-1;color:var(--muted)}.g4-reset{border-top:3px solid var(--line)}.g4-reset button{min-height:48px}
.g1-flag-panel{min-height:230px;overflow:hidden;justify-content:end;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 16%,var(--card)),var(--card))}.g1-flag-panel strong{font-size:clamp(2rem,5vw,3.6rem);line-height:1.04}.g1-player-details h2{overflow-wrap:anywhere}.g1-style{background:color-mix(in srgb,var(--accent) 4%,var(--card))}.g1-style:has(input:checked){border-color:var(--accent);box-shadow:inset 4px 0 var(--accent)}.g1-style strong{font-size:1.15rem}.g1-identity-editor .button-row button{min-height:48px}
.tour-overlay .tour-dialog{display:flex;flex-direction:column;overflow:hidden;max-height:min(640px,calc(100dvh - 24px - env(safe-area-inset-bottom)))}.tour-overlay .dialog-content{min-height:0;overflow-y:auto;overscroll-behavior:contain}.tour-overlay .button-row button{min-height:44px}.tour-resume{bottom:calc(12px + env(safe-area-inset-bottom))}
@media(max-width:760px){.g4-custom-colour{grid-template-columns:1fr}.g4-custom-colour small{grid-column:1}.g1-flag-panel{min-height:190px}.tour-overlay{align-items:end;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}.tour-overlay .tour-dialog{max-height:min(70dvh,calc(100dvh - 24px - env(safe-area-inset-bottom)));width:100%}}
@media(prefers-reduced-motion:reduce){.app .primary,.app .nav-button,.app .eyebrow,.app .chart .bar{transition:none!important}}
.safe-joke-pop{border:1px solid var(--line,#554967);border-radius:16px;background:var(--panel,#211d2c);padding:1rem 1.2rem;margin:1rem 0;max-width:42rem;box-shadow:0 12px 32px #0003}
.safe-joke-pop>div{display:flex;align-items:center;justify-content:space-between;gap:1rem}.safe-joke-pop p{margin:.7rem 0;line-height:1.5}.safe-joke-pop button{min-height:44px}.safe-joke-close{min-width:44px}

/* Walkthrough correction: readable controls and a contained player flag. */
.app .topbar{position:sticky;top:0;z-index:35;min-width:0;backdrop-filter:blur(14px)}
.app .rail{position:sticky;top:0;height:100dvh;align-self:start}
.g1-flag-panel{position:relative;isolation:isolate;overflow:hidden;padding:0;display:flex;min-width:0}
.g1-flag-panel .profile-flag-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.g1-flag-panel .profile-flag-copy{align-self:end;width:100%;padding:1.25rem;background:linear-gradient(transparent,#101014df 45%);color:#fff;text-shadow:0 1px 2px #000a;overflow-wrap:anywhere}
.g1-flag-panel .profile-flag-art[hidden]{display:none}
.plan-site-pick{display:grid;gap:.5rem;min-width:0}
.plan-site-pick button{justify-self:start;min-height:44px}
.loadout-callouts{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.g4-custom-colour{grid-template-columns:minmax(160px,230px) minmax(0,1fr);align-items:center}
.colour-disc{width:min(100%,230px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at center,#f8f8f8 0%,transparent 65%),conic-gradient(red,#ff0,lime,cyan,blue,magenta,red);position:relative;touch-action:none;cursor:crosshair;box-shadow:0 0 0 2px var(--line),0 10px 26px #0006}
.colour-disc:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.colour-disc-knob{position:absolute;left:50%;top:12%;width:24px;height:24px;border:3px solid white;border-radius:50%;box-shadow:0 1px 5px #000b;transform:translate(-50%,-50%);pointer-events:none}
.colour-current{display:inline-block;width:36px;height:36px;vertical-align:middle;margin:.5rem;border:2px solid white;border-radius:50%}
.timed-joke{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:80;max-width:min(340px,calc(100vw - 24px));margin:0;pointer-events:auto}
.timed-joke button{display:grid;place-items:center;min-width:44px;min-height:44px}
@media(max-width:760px){.g4-custom-colour{grid-template-columns:1fr}.app input:not([type=checkbox]):not([type=radio]),.app select,.app textarea{font-size:16px!important}.app .topbar{padding-top:max(8px,env(safe-area-inset-top));}.app .surface,.app .content{min-width:0}.app .panel,.app .hero,.app .form-grid{min-width:0}.app button{min-height:44px}}
@media(max-width:360px){.app .content{padding-inline:10px!important}.g3-mobile-drawer{width:min(288px,calc(100vw - 40px))}}
.colour-current{background:var(--accent)}
/* The earlier desktop rule hides the trigger with !important; restore it at phone widths. */
@media(max-width:760px){.app .topbar .g3-menu-button{display:grid!important;place-items:center}}

/* Calendar uses the same seven-day grid on phones and desktop. */
.g3-calendar .calendar-month-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}.g3-calendar .calendar-month-controls h3{min-width:12ch;text-align:center;margin:0}.g3-calendar .calendar-month-controls button{min-width:44px;min-height:44px}.g3-calendar .calendar-legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--muted)}.g3-calendar .calendar-legend span{display:flex;align-items:center;gap:6px}.g3-calendar .calendar-legend i{width:9px;height:9px;border-radius:2px;background:var(--accent)}.g3-calendar .calendar-legend .calendar-legend-report{background:#ef8585}.g3-calendar .calendar-weekdays,.g3-calendar .calendar-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;min-width:0}.g3-calendar .calendar-weekdays span{text-align:center;font-size:11px;font-weight:800;color:var(--muted)}.g3-calendar .calendar-day{min-width:0;min-height:62px;padding:5px 2px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}.g3-calendar .calendar-day.outside{opacity:.55}.g3-calendar .calendar-day.today{border-style:dashed}.g3-calendar .calendar-day.selected{outline:2px solid var(--accent);outline-offset:1px;background:var(--soft)}.g3-calendar .calendar-day:focus-visible,.g3-calendar .calendar-month-controls button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.g3-calendar .calendar-day-markers{display:flex;flex-direction:column;align-items:center;max-width:100%;line-height:1.1}.g3-calendar .calendar-day-markers small{font-size:10px;white-space:nowrap}.g3-calendar .plan-marker{color:var(--accent)}.g3-calendar .report-marker{color:#f6a4a4}.g3-calendar .calendar-date-details{border-top:1px solid var(--line);padding-top:16px;display:grid;gap:10px;min-width:0}.g3-calendar .calendar-date-details h3{margin:0;overflow-wrap:anywhere}.g3-calendar .calendar-activity{border:1px solid var(--line);border-radius:9px;padding:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.g3-calendar .calendar-activity>div{display:grid;gap:4px;min-width:0}.g3-calendar .calendar-activity strong{overflow-wrap:anywhere}.g3-calendar .calendar-activity small{color:var(--muted)}.g3-calendar .calendar-date-details .button-row{align-items:center;flex-wrap:wrap}.g3-calendar .calendar-date-details .button-row small{color:var(--muted)}
@media(max-width:400px){.g3-calendar{padding:12px 8px}.g3-calendar .calendar-month-grid,.g3-calendar .calendar-weekdays{gap:2px}.g3-calendar .calendar-day{min-height:58px}.g3-calendar .calendar-day-markers small{font-size:8px}.g3-calendar .calendar-month-controls h3{font-size:18px}}
.app .nav-icon{display:inline-grid;place-items:center;width:24px;height:24px;flex:none;line-height:1}
.g1-flag-panel .profile-flag-copy{background:linear-gradient(90deg,rgba(8,9,16,.92),rgba(8,9,16,.68) 56%,transparent),linear-gradient(transparent,rgba(8,9,16,.85) 70%)}

/* Retain each complete local flag inside its panel; keep the saved call sign apart from it. */
.app .g1-player-card{column-gap:clamp(28px,4vw,52px);row-gap:28px}
.app .g1-player-details h2{margin-bottom:24px;line-height:1.12}
.g1-flag-panel{background:#171922}
.g1-flag-panel .profile-flag-art{object-fit:contain;background:#171922}
.g1-flag-panel .profile-flag-copy:empty{display:none}
.safe-identity-banner{display:grid;grid-template-columns:minmax(105px,38%) minmax(0,1fr);align-items:stretch;min-height:130px;margin:18px 0 14px;max-width:780px;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#13151b;isolation:isolate}
.safe-flag-panel{position:relative;min-width:0;min-height:130px;display:grid;place-items:center;background:#171922;color:#c8cad2;text-align:center}
.safe-flag-panel img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.safe-flag-panel img[hidden]{display:none}
.safe-flag-panel span{padding:12px;font-size:14px}
.safe-identity-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:18px 24px 18px 10px;color:#fff;background:linear-gradient(90deg,rgba(13,15,23,.88),#13151b 24%)}
.safe-identity-copy .eyebrow{color:#ddd6eb}
.safe-identity-copy strong{font-size:clamp(1.4rem,3vw,2.55rem);line-height:1.13;overflow-wrap:anywhere;text-shadow:0 2px 7px #000}
@media(max-width:560px){.safe-identity-banner{grid-template-columns:minmax(95px,40%) minmax(0,1fr);min-height:116px}.safe-flag-panel{min-height:116px}.safe-identity-copy{padding:14px 12px 14px 8px}.app .g1-player-card{row-gap:28px}}

/* Published beta tour presentation, adapted to the demo's in-memory dialog. */
.overlay.tour-overlay{position:fixed;inset:0;display:block;pointer-events:none;z-index:120;padding:0}
.tour-overlay .tour-shade{position:fixed;background:rgba(4,4,9,.77);pointer-events:auto}
.tour-overlay .tour-spotlight{position:fixed;border:3px solid var(--accent);border-radius:15px;box-shadow:0 0 0 5px rgba(255,255,255,.17),0 0 28px color-mix(in srgb,var(--accent) 55%,transparent);pointer-events:none}
.tour-overlay .tour-coach{position:fixed;display:flex;flex-direction:column;overflow:hidden;width:min(360px,calc(100vw - 32px));max-height:min(600px,calc(100dvh - 32px));padding:23px;border:1px solid var(--accent);border-radius:16px;background:var(--panel);color:var(--text);box-shadow:0 18px 60px #0009;pointer-events:auto}
.tour-overlay .tour-coach .dialog-heading{border:0;background:transparent;padding:0;order:1}
.tour-overlay .tour-coach .dialog-heading h2{font-size:24px;line-height:1.2;margin:8px 0}
.tour-overlay .tour-coach .dialog-close{position:absolute;right:14px;top:12px;min-width:44px;min-height:44px}
.tour-overlay .tour-coach .dialog-content{display:contents}
.tour-overlay .tour-progress-wrap{order:0;margin:0 46px 0 0;gap:7px}
.tour-overlay .tour-step-count{font-size:12px;color:var(--muted);font-weight:750;letter-spacing:.07em;text-transform:uppercase}
.tour-overlay .tour-progress{height:7px}
.tour-overlay .tour-coach #dialogDescription{order:2;overflow-y:auto;min-height:0;overscroll-behavior:contain;font-size:16px;line-height:1.5;margin:0 0 18px}
.tour-overlay .tour-controls{order:3;display:flex;align-items:center;gap:8px;background:transparent;border:0;padding:0;position:static}
.tour-overlay .tour-controls button{min-height:44px;font-size:14px;flex:initial;width:auto;margin:0}
.tour-overlay .tour-controls .primary{margin-left:auto}
.tour-overlay .tour-never{order:4;min-height:44px;align-self:start;margin-top:8px}
.tour-resume{bottom:calc(18px + env(safe-area-inset-bottom));z-index:121}
@media(max-width:720px){.tour-overlay .tour-coach{left:12px!important;right:12px!important;top:auto!important;bottom:calc(12px + env(safe-area-inset-bottom));width:calc(100vw - 24px);max-height:min(70dvh,calc(100dvh - 24px - env(safe-area-inset-bottom)));padding:16px}.tour-overlay .tour-controls{position:static;background:transparent}.tour-overlay .tour-controls>*{min-height:44px}.tour-resume{bottom:calc(18px + env(safe-area-inset-bottom))}}
@media(max-width:350px){.tour-overlay .tour-coach .dialog-heading h2{font-size:21px}.tour-overlay .tour-controls{gap:3px}.tour-overlay .tour-controls button{padding:0 8px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.tour-overlay .tour-coach,.tour-shade,.tour-spotlight{animation:none!important;transition:none!important}}
.g1-flag-panel .profile-flag-art{z-index:0}
.g1-flag-panel .profile-flag-copy{position:relative;z-index:1}
