/* Clover bright-fantasy launcher skin. Presentation only; gameplay/auth DOM remains authoritative. */
:root {
  --clover-green:#39b91f; --clover-lime:#89df28; --clover-deep:#174e24;
  --clover-wood:#7a431f; --clover-wood-dark:#4d2915; --clover-cream:#fff4cf;
  --clover-paper:#f8e9bb; --clover-ink:#382413; --clover-gold:#e7b84a;
}
body:not(.msx-game-stage) {
  background:
    linear-gradient(rgba(25,88,51,.12),rgba(4,32,21,.32)),
    url('/assets/clover-monsters-hero.webp') center 38% / cover fixed;
}
body:not(.msx-game-stage)::before {
  content:""; position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 45%,transparent 36%,rgba(5,44,28,.28) 78%,rgba(2,20,12,.58) 100%);
  backdrop-filter:blur(2px) saturate(1.08);
}
.launcher-window {
  width:min(1500px,95vw); height:min(860px,92vh); max-width:none; max-height:none;
  border:4px solid #8b5727; border-radius:24px; background:#f4e6bd;
  box-shadow:0 28px 70px rgba(17,52,25,.42),0 0 0 2px #d9a94f inset,0 0 0 8px rgba(73,42,18,.28);
}
.window-titlebar {
  min-height:58px; padding:8px 20px; color:#fff7dc; border-bottom:3px solid #4e2c18;
  background:linear-gradient(180deg,#a1652d 0%,#7b461f 48%,#5e3219 100%);
  box-shadow:inset 0 2px 0 #d49a52,inset 0 -2px 0 #3c2112;
}
.titlebar-brand {color:#fff6dc;font-size:15px;text-shadow:0 2px 2px #3a1e10;gap:10px;}
.titlebar-brand::before {content:"";width:38px;height:38px;border-radius:50%;background:url('/assets/clover-brand-badge.webp') center/cover;box-shadow:0 0 0 2px #f9dfa1,0 2px 5px #3b2618;}
.titlebar-brand>i {display:none}.tester-scope-chip {background:#087e5f!important;border-color:#b4f7ca!important;color:white!important;}
.btn-theme-toggle {background:linear-gradient(#4e9c31,#286c24);border:1px solid #d2e9a5;color:#fffbe9;border-radius:8px;box-shadow:inset 0 1px 0 #aee487,0 2px 4px #3b261844;}
.btn-theme-toggle:hover {color:#fff;border-color:#fff1b6;filter:brightness(1.08)}
.win-btn {color:#f8e9c5}.win-btn:hover{color:white}

#stage-launcher {grid-template-columns:minmax(0,2.05fr) minmax(400px,.95fr);background:#d6eeb3;}
.launcher-left-panel {padding:0 26px 18px;border-right:5px solid #67401f;background:linear-gradient(#b9e78b 0 58%,#6ca643 58% 100%);overflow:hidden;isolation:isolate;}
.launcher-left-panel::before {content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:61%;background:url('/assets/clover-monsters-hero.webp') center 48%/cover no-repeat;border-bottom:8px solid #6b3b1c;box-shadow:inset 0 -12px 0 #9a6331,0 4px 14px #3b241855;}
.launcher-left-panel::after {content:"";position:absolute;z-index:-1;inset:auto 0 0;height:42%;background:linear-gradient(180deg,rgba(166,206,91,.2),rgba(79,139,55,.78)),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 60px);}
.launcher-left-panel>div:first-child {height:100%;display:flex;flex-direction:column;padding-top:52%;}
.launcher-title-box {display:none}.news-section-title {margin:0 0 10px;padding:9px 16px;color:#fffbe7;background:linear-gradient(#8d582a,#643817);border:2px solid #b98545;border-radius:12px 12px 4px 4px;font-size:14px;text-shadow:0 2px 2px #3f230f;box-shadow:0 3px 0 #4d2b16;}
.news-section-title::before {content:"🍀 ";}
.news-card-list {gap:8px}.news-card {background:linear-gradient(180deg,#fff7db,#f5dfaa);border:2px solid #b78343;border-radius:12px;padding:10px 15px;color:var(--clover-ink);box-shadow:0 2px 0 #8a5429,0 5px 12px #3b281622;}
.news-card:hover {background:#fffbe9;border-color:#76ad35;transform:translateX(3px)}
.news-card-text {color:#392817;font-weight:600}.news-badge.update {background:#168c68;color:white}.news-badge.event {background:#ef920e;color:white}
.server-channel-stats {margin-top:10px;background:linear-gradient(#70451f,#4d2b15);border:2px solid #8f5b2d;border-radius:12px;padding:10px 16px;box-shadow:inset 0 1px 0 #b9824d;color:white;}
.channel-stat-item {color:#f3e7c9}.channel-stat-item strong{color:white}.channel-stat-item strong[style]{color:#b9f65d!important}
.launcher-footer-meta {position:absolute;left:28px;bottom:9px;color:#f4f0d2;text-shadow:0 1px 2px #234620;font-size:10px;}

.launcher-right-panel {position:relative;padding:34px 36px 28px;background:linear-gradient(180deg,rgba(255,247,215,.98),rgba(247,229,181,.98));color:var(--clover-ink);border-left:2px solid #e4c782;box-shadow:inset 0 0 0 3px rgba(255,255,255,.38);}
.launcher-right-panel::before {content:"";position:absolute;top:18px;left:50%;width:92px;height:92px;transform:translateX(-50%);border-radius:50%;background:url('/assets/clover-brand-badge.webp') center/cover;border:4px solid #fff4bf;box-shadow:0 4px 12px #4c3b2344;}
.launcher-right-panel::after {content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 14% 10%,rgba(97,183,41,.12) 0 16px,transparent 17px),radial-gradient(circle at 88% 18%,rgba(97,183,41,.1) 0 12px,transparent 13px);}
.auth-header {margin-top:92px;margin-bottom:18px;justify-content:center;color:#442718;font-size:27px;font-family:'Kanit',sans-serif;text-shadow:0 1px #fff;}
.auth-header i{display:none}.auth-header::before{content:"☘";color:#34a520;font-size:28px}.auth-header::after{content:"Welcome back, Adventurer!";display:block;position:absolute;margin-top:54px;font-size:12px;font-weight:500;color:#7b5230;}
.form-group-launcher {margin-bottom:13px}.form-group-launcher label {color:#3f371f;font-size:11px}.form-group-launcher label::before{content:"🍃 ";font-size:10px}
.input-box-launcher i {color:#62614c}.input-box-launcher input,.input-box-launcher select {background:#fffdf3;border:2px solid #cdbd91;color:#263421;border-radius:10px;padding:11px 14px 11px 42px;box-shadow:inset 0 2px 5px #6c51281c;}
.input-box-launcher input:focus,.input-box-launcher select:focus {border-color:#4fb52e;box-shadow:0 0 0 3px rgba(91,194,51,.14),inset 0 2px 5px #6c51281c;}
.btn-start-game {background:linear-gradient(180deg,#70dc25 0%,#20ac18 55%,#0d8b22 100%);border:3px solid #d8f787;border-radius:13px;padding:13px;color:white;text-shadow:0 2px 2px #286a1d;box-shadow:inset 0 2px 0 #b9fa68,0 0 0 2px #1d8d20,0 6px 12px #375c2233;}
.btn-start-game:hover{box-shadow:inset 0 2px 0 #c9ff7e,0 0 0 2px #1d8d20,0 9px 18px #2c701e44;filter:brightness(1.05)}
#btn-show-register,#btn-cancel-register {background:linear-gradient(#fff9d9,#eee3b4)!important;color:#215b27!important;border:2px solid #bdc988!important;border-radius:11px!important;box-shadow:none!important;}
.packet-inspector {margin-top:12px;background:#173d1e;border:2px solid #667f3f;color:#bafc6b;border-radius:8px;height:78px;box-shadow:inset 0 2px 8px #071c0b;}

@media (max-width:1180px) {
  .launcher-window{width:98vw;height:94vh}.window-titlebar{min-height:52px}.titlebar-brand span:first-of-type{font-size:12px}
  #stage-launcher{grid-template-columns:1.55fr minmax(360px,.9fr)}
  .launcher-left-panel>div:first-child{padding-top:55%}.launcher-right-panel{padding:28px 24px 22px}
}
@media (max-width:820px) {
  body:not(.msx-game-stage){overflow:auto;justify-content:flex-start;background-position:center top}
  .launcher-window{width:100vw;height:auto;min-height:100vh;border-radius:0;border-width:0;overflow:visible}
  #stage-launcher.active{display:flex!important;flex-direction:column}
  .launcher-left-panel{min-height:610px;border-right:0;border-bottom:5px solid #67401f;padding:0 18px 22px}
  .launcher-left-panel::before{height:57%;background-position:center top}.launcher-left-panel>div:first-child{padding-top:360px}
  .launcher-right-panel{min-height:650px}.launcher-right-panel::before{top:16px}
  .titlebar-controls .win-btn{display:none}.window-titlebar{position:sticky;top:0;z-index:90}
}

/* Stage 2 — bright Clover world/channel selector */
#stage-channel-select {
  background:
    linear-gradient(rgba(246,237,196,.88),rgba(222,242,177,.9)),
    url('/assets/clover-monsters-hero.webp') center 40%/cover no-repeat !important;
  color:var(--clover-ink); padding:34px !important;
}
#stage-channel-select::before,#stage-char-select::before {
  content:"";position:absolute;inset:16px;pointer-events:none;border:4px solid #845024;border-radius:22px;
  box-shadow:inset 0 0 0 3px #d6ad63,0 12px 28px #2e4a2533;
}
.stage-title-box {position:relative;z-index:2;padding:14px 28px;border-radius:16px;background:rgba(255,248,215,.94);border:2px solid #b98242;box-shadow:0 5px 0 #75411f55;}
.stage-title-box h2 {color:#4a2a18 !important;text-shadow:0 1px #fff7d1;}
.stage-title-box p,#char-select-subtitle {color:#74563b !important;}
.world-scania-badge {position:relative;z-index:2;background:linear-gradient(#fff9dc,#f0dda4);border:2px solid #aa7838;color:#3e2a18;box-shadow:0 4px 0 #6e421e55;}
.world-scania-badge i {color:#3eae2a !important;}
.world-scania-badge div div:first-child {color:#3c2718 !important;}
.world-scania-badge div div:last-child {color:#6a5a3f !important;}
.channel-grid-list {position:relative;z-index:2;}
.channel-card-btn {background:linear-gradient(180deg,#fff8d7,#edd69b);border:3px solid #a87337;color:#402b19;box-shadow:0 5px 0 #6f421f55,0 8px 16px #42652a22;}
.channel-card-btn:hover,.channel-card-btn.selected {border-color:#4eaf2f;background:linear-gradient(#fbffd9,#d8efa4);box-shadow:0 0 0 3px #a9e06d77,0 8px 0 #57842844;}
.ch-num {color:#4a2a18 !important;}.ch-gauge-bar{background:#6b4926;border-color:#967044}.ch-status-text{color:#3f7f2b}

/* Stage 3 — bright Clover character selector */
#stage-char-select {
  background:
    linear-gradient(rgba(248,241,207,.84),rgba(218,238,172,.9)),
    url('/assets/clover-monsters-hero.webp') center 42%/cover no-repeat !important;
  color:var(--clover-ink);
}
.char-cards-grid {position:relative;z-index:2;}
.char-card-item {background:linear-gradient(155deg,#fff9df,#ecd8a4);border:3px solid #a97539;color:#3f2b18;box-shadow:0 5px 0 #6c421f55,0 8px 18px #35552722;}
.char-card-item:hover {border-color:#6da63d;background:#fffde8;box-shadow:0 7px 0 #54842e44,0 10px 22px #35552733;}
.char-card-item.selected {border-color:#48ad2f;background:linear-gradient(#fffde9,#dff0aa);box-shadow:0 0 0 3px #9de46e77,0 8px 0 #4f862b55;}
.char-avatar-circle {background:#f4e5b7;border:3px solid #a97b43;box-shadow:inset 0 0 0 2px #fff8d9;}
.char-name-label {color:#402a18;}.char-job-tag{color:#298c2b}.char-job-tag span:last-child{color:#6b563c}
.char-location {color:#856c4e}.char-stat-chip {background:#f8edc7;border-color:#c2a36c;}.char-stat-chip span{color:#897457}.char-stat-chip strong{color:#49321e}
.char-resource {background:#f1dfad;border:1px solid #ccb17b}.char-resource span{color:#8a744f}.char-resource strong{color:#4c3820}
.char-point-badge {background:#fff1ad;border-color:#d8b54f;color:#8b6418}
.btn-play-world {background:linear-gradient(#80df2d,#2fb326 55%,#188d2e);color:white;border:3px solid #dff594;box-shadow:inset 0 2px 0 #c7f66f,0 0 0 2px #2b9429,0 7px 14px #34551f44;}
.btn-play-world:hover {box-shadow:inset 0 2px 0 #dbff8b,0 0 0 2px #2b9429,0 10px 20px #34551f55;}

/* Character creation empty state — keep the last onboarding surface on-brand. */
.clover-create-card {
  background:linear-gradient(180deg,#fff9df,#ead39a)!important;
  border:3px solid #a87337!important;
  border-radius:18px!important;
  color:#402a18!important;
  box-shadow:0 7px 0 #70431f55,0 12px 26px #3955262e!important;
}
.clover-create-card h3 {color:#402a18!important;text-shadow:0 1px #fff7d1;}
.clover-create-card p,#create-character-status {color:#7b6547!important;}
.clover-create-card>i {color:#42aa2c!important;}
.clover-create-card input,.clover-create-card select {
  background:#fffdf0!important;color:#3e2b19!important;border:2px solid #c4a36b!important;
  box-shadow:inset 0 2px 5px #6d52211b!important;
}
.clover-create-card input:focus,.clover-create-card select:focus {border-color:#4cae2f!important;outline:none;box-shadow:0 0 0 3px #8bd35b33!important;}
/* Stage 2/3 final brand harmonization */
#stage-channel-select .stage-title-box h2 i,
#stage-char-select .stage-title-box h2 i { color:#42a92d!important; filter:drop-shadow(0 1px 0 #fff6c8); }
#stage-channel-select .stage-title-box,
#stage-char-select .stage-title-box {
  background:linear-gradient(180deg,#fff8d8 0%,#f0d79c 100%);
  border:3px solid #9d692f; box-shadow:inset 0 2px 0 #fff4c4,0 6px 0 #6a401d55,0 10px 22px #24421d22;
}
#stage-channel-select .stage-title-box::before,
#stage-char-select .stage-title-box::before { content:"☘"; color:#3ca72b; margin-right:8px; font-size:18px; }
.channel-card-btn.selected .ch-num,.channel-card-btn:hover .ch-num { color:#2f7e26!important; }
.channel-card-btn.selected .ch-gauge-fill { background:linear-gradient(90deg,#68d52d,#2da62b)!important; }
.channel-card-btn .ch-gauge-fill { box-shadow:0 0 0 1px rgba(255,255,255,.35) inset; }
#stage-char-select .char-job-tag i,.char-point-badge i { color:#3da82c!important; }
#stage-char-select .btn-play-world,#create-character-submit { text-shadow:0 2px 1px #235a1c; }
#stage-char-select .char-card-item.selected .char-name-label { color:#2f6e27!important; }
#stage-char-select .char-card-item.selected .char-avatar-circle { border-color:#4ba832; box-shadow:0 0 0 3px #bdea79aa,inset 0 0 0 2px #fff8d9; }
#stage-channel-select .world-scania-badge { border-radius:14px; }
#stage-char-select .clover-create-card { position:relative; overflow:hidden; }
#stage-char-select .clover-create-card::after { content:""; position:absolute; inset:auto -22px -30px auto; width:110px; height:110px; background:url('/assets/clover-brand-badge.webp') center/cover; opacity:.07; pointer-events:none; }