:root{
  --page_bg:#17345e;
  --page_bg_image:none;
  --page_overlay:linear-gradient(180deg,rgba(8,24,52,.22),rgba(8,24,52,.1));
  --panel_bg:#f7e6bb;
  --panel_header_bg:#e34a52;
  --card_bg:#fff5dc;
  --hud_bg:#fff9eb;
  --button_bg:linear-gradient(180deg,#4fd1ff,#2ba8f7);
  --button_hover_bg:linear-gradient(180deg,#8be94a,#63cb1e);
  --button_danger_bg:linear-gradient(180deg,#ff8d95,#e44e58);
  --button_locked_bg:linear-gradient(180deg,#d8d8d8,#bdbdbd);
  --button_text:#ffffff;
  --accent1:#4fd1ff; --accent2:#8be94a; --accent3:#e44e58;
  --text_primary:#5c3713; --text_muted:#85613f;
  --canvas_bg:linear-gradient(180deg,#fff8ea,#f8e8c0);
  --tile_color:#f8eac5; --tile_edge:#c9963b; --tile_active:#f8eac5; --tile_locked:#f8eac5;
  --arrow_color:#ffffff; --arrow_outline:#3a7fc9; --hint_glow:#8be94a; --error_glow:#ea4b55;
  --font-body:"Trebuchet MS","Segoe UI",sans-serif; --font-heading:"Trebuchet MS","Segoe UI",sans-serif;
  --window_asset:none; --ribbon_asset:none; --button_blue_asset:none; --button_green_asset:none; --button_red_asset:none; --button_gray_asset:none;
}
*{box-sizing:border-box} html,body{margin:0;padding:0;min-height:100%} body{font-family:var(--font-body);color:var(--text_primary);background:var(--page_bg)} a{text-decoration:none;color:inherit}
input,textarea,select,button{font:inherit}
.page-bg{position:fixed;inset:0;background:var(--page_overlay),var(--page_bg_image),var(--page_bg);background-size:cover;background-position:center;z-index:-1}
.page-shell{max-width:1440px;margin:0 auto;padding:0 18px 28px}
.topbar,.hud,.ui-window{position:relative;background:var(--panel_bg);border:3px solid #e0b56a;border-radius:24px;box-shadow:0 10px 26px rgba(60,34,8,.18), inset 0 2px 0 rgba(255,255,255,.7)}
.topbar,.hud{max-width:1440px;margin:16px auto 12px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 24px}
.brand{display:flex;align-items:center;gap:12px;font:900 34px var(--font-heading)}
.brand span{background:linear-gradient(90deg,#8e69ff,#f39b62);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-logo{height:44px;width:auto}
.topnav{display:flex;gap:18px;flex-wrap:wrap;font-weight:900}
.topnav a{padding:8px 2px;border-bottom:2px solid transparent}.topnav a:hover{border-color:#d59156}
.hud{display:flex;gap:10px;flex-wrap:wrap;padding:12px}
.hud-pill{background:var(--hud_bg);border:2px solid #e0b56a;padding:10px 16px;border-radius:999px;font-weight:900}
.notice{padding:14px 18px;border-radius:16px;margin-bottom:16px;font-weight:700}.notice.ok{background:#dff8da;color:#26592a}.notice.err{background:#ffdfe0;color:#7b2027}
.ui-window{padding:20px}
.window-ribbon{display:inline-flex;align-items:center;justify-content:center;min-width:220px;min-height:68px;padding:10px 30px 16px;border-radius:18px 18px 8px 8px;background:linear-gradient(180deg,#f45b61,#d83f47);color:#fff;font:900 30px var(--font-heading);text-shadow:0 2px 0 rgba(120,14,14,.35);box-shadow:0 6px 0 rgba(139,25,31,.15)}
.page-card,.game-stage{padding:24px}.content-grid{display:grid;gap:18px}
.hero-grid{display:grid;grid-template-columns:250px minmax(0,1fr) 250px;gap:18px;margin-top:16px;align-items:start}
.side-panel.small{padding:18px}.side-panel h3,.page-card h1,.page-card h2,.level-card h3{font:900 24px var(--font-heading);margin:0 0 14px}
.play-area{position:relative;min-height:760px;padding:18px;background:var(--card_bg)}
.babylon-host{height:720px;border-radius:26px;overflow:hidden;background:var(--canvas_bg);position:relative;border:4px solid #e4bd7b}
.babylon-host canvas{width:100%!important;height:100%!important;display:block}
.overlay-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,90%);padding:24px;border-radius:24px;background:rgba(255,248,231,.98);border:3px solid #dfb468;box-shadow:0 18px 36px rgba(71,43,12,.22);z-index:4;text-align:center}
.overlay-panel.hidden{display:none}.overlay-panel p{font-size:18px;line-height:1.45;color:var(--text_muted)}
.overlay-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}.overlay-actions .ui-btn{width:auto;min-width:170px}
.stars{display:flex;justify-content:center;gap:10px;margin:8px 0 14px}.star{font-size:48px;line-height:1;filter:drop-shadow(0 3px 0 rgba(171,121,17,.18))}.star.off{opacity:.22}
.win-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 6px}.reward-line{font-weight:900;font-size:18px;color:var(--text_primary);margin-top:8px}
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:12px 22px;border:none;border-radius:18px;background:var(--button_bg);color:var(--button_text);font:900 24px var(--font-heading);text-shadow:0 2px 0 rgba(0,0,0,.18);cursor:pointer;box-shadow:0 7px 0 rgba(74,44,16,.24);text-align:center}
.ui-btn:hover{transform:translateY(1px)} .ui-btn:active{transform:translateY(3px);box-shadow:0 4px 0 rgba(74,44,16,.24)}
.ui-btn.primary{background:var(--button_bg)} .ui-btn.accent{background:var(--button_hover_bg)} .ui-btn.danger{background:var(--button_danger_bg)} .ui-btn.locked{background:var(--button_locked_bg);cursor:not-allowed;opacity:.95}
.ui-btn .btn-icon{width:28px;height:28px;object-fit:contain;display:block}
.side-panel .ui-btn,.admin-links .ui-btn,.auth-card .ui-btn,.shop-card .ui-btn{width:100%;margin-bottom:12px}
.counters{display:grid;gap:10px;margin-top:10px}
.level-grid,.shop-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.level-card,.shop-card{overflow:hidden;padding:0;background:var(--card_bg);border:2px solid #e5c48f;border-radius:24px;box-shadow:0 8px 18px rgba(52,33,9,.08)}
.level-card img{width:100%;height:180px;object-fit:cover;display:block}.level-card-body,.shop-card .inner{padding:18px}
.tag{display:inline-flex;padding:8px 12px;border-radius:999px;background:var(--hud_bg);border:2px solid rgba(201,137,73,.35);font-weight:900;margin:0 0 12px}.tag.locked{background:#ececec}
.auth-wrap{display:grid;place-items:center;min-height:60vh}.auth-card{width:min(540px,100%);padding:24px;display:grid;gap:12px}
.auth-card input,.form-row input,.design-grid input,.design-grid textarea,.form-grid input,.list-editor input,.page-card textarea,.page-card select{width:100%;padding:12px 14px;border-radius:14px;border:2px solid rgba(201,137,73,.35);background:#fff8e8}
.form-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.design-grid,.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.design-grid textarea{min-height:220px;grid-column:1/-1}
.design-grid label,.editor-layout label{display:grid;gap:6px;font-weight:800}.list-editor{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;align-items:center}.list-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(201,137,73,.35)}
.editor-layout{display:grid;grid-template-columns:380px minmax(0,1fr);gap:18px;align-items:start}.editor-pane{display:grid;gap:12px}.editor-preview .babylon-host{height:540px}.editor-json{min-height:180px;font-family:ui-monospace,Consolas,monospace}
.small-muted{color:var(--text_muted);font-size:14px}.inline-actions{display:flex;gap:10px;flex-wrap:wrap}
hr{border:none;border-top:1px solid rgba(201,137,73,.35);margin:14px 0} code{background:#fff8e8;padding:2px 6px;border-radius:8px}
@media (max-width:1100px){.hero-grid,.editor-layout{grid-template-columns:1fr}.play-area{order:-1}.babylon-host{height:520px}.editor-preview .babylon-host{height:420px}}
@media (max-width:760px){.topbar{padding:16px;flex-direction:column;align-items:flex-start;gap:10px}.brand{font-size:29px}.form-row,.design-grid,.form-grid,.list-editor{grid-template-columns:1fr}.babylon-host{height:420px}.ui-btn{font-size:20px;padding:12px 18px}.ui-btn .btn-icon{width:24px;height:24px}}
.copy-uid{margin-left:8px;border:none;border-radius:10px;padding:6px 10px;background:#fff;color:var(--text_primary);font-weight:800;cursor:pointer}
.hud-with-avatar{align-items:center}.hud-user{display:flex;align-items:center;gap:12px;margin-right:8px}
.avatar-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#fff7df;border:4px solid #ddb15b;box-shadow:0 4px 10px rgba(0,0,0,.12);width:64px;height:64px;min-width:64px;min-height:64px}
.avatar-face{font-size:calc(100% + 14px);line-height:1}.frame-frame_none{border-color:#ddb15b}.frame-frame_gold{border-color:#f0c33c; box-shadow:0 0 0 4px rgba(240,195,60,.15),0 4px 12px rgba(0,0,0,.12)}
.frame-frame_fire{border-color:#ff7f50; box-shadow:0 0 0 4px rgba(255,127,80,.18),0 4px 12px rgba(0,0,0,.12)}
.frame-frame_star{border-color:#7e67ff; box-shadow:0 0 0 4px rgba(126,103,255,.16),0 4px 12px rgba(0,0,0,.12)}
.frame-frame_legend{border-color:#3fd1aa; box-shadow:0 0 0 4px rgba(63,209,170,.16),0 4px 12px rgba(0,0,0,.12)}
.profile-head{display:flex;gap:18px;align-items:center;margin-bottom:14px}
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.catalog-item{display:grid;gap:8px;padding:12px;border:2px solid rgba(201,137,73,.35);border-radius:16px;background:#fff8e8;text-align:center}
.catalog-item.locked{opacity:.55}.catalog-avatar{font-size:40px}.frame-preview{width:62px;height:62px;margin:0 auto}
.leaderboard{display:grid;gap:10px}.leader-row{display:grid;grid-template-columns:2fr 1.2fr 1fr 1fr 1fr;gap:12px;align-items:center;padding:12px 10px;border-bottom:1px solid rgba(201,137,73,.35)}.leader-main{display:flex;align-items:center;gap:10px}.leader-main .avatar-badge{width:52px;height:52px;min-width:52px;min-height:52px}
.goals-strip{display:flex;gap:10px;flex-wrap:wrap}.goal-pill{display:flex;gap:8px;align-items:center;background:var(--hud_bg);border:2px solid #e0b56a;padding:10px 14px;border-radius:999px;font-weight:900}
@media (max-width:760px){.leader-row{grid-template-columns:1fr}.profile-head{flex-direction:column;align-items:flex-start}}

.svg-icon{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 0 rgba(0,0,0,.18));flex:0 0 auto}
.btn-icon.svg-icon{width:28px;height:28px}
.avatar-badge{overflow:hidden;position:relative}
.avatar-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:999px}
.frame-frame_none{box-shadow:0 0 0 3px rgba(221,177,91,.28),0 4px 10px rgba(0,0,0,.12)}
.frame-frame_gold{box-shadow:0 0 0 3px rgba(240,195,60,.24),0 0 0 6px rgba(240,195,60,.12),0 4px 12px rgba(0,0,0,.12)}
.frame-frame_fire{box-shadow:0 0 0 3px rgba(255,127,80,.24),0 0 0 6px rgba(255,127,80,.1),0 4px 12px rgba(0,0,0,.12)}
.frame-frame_star{box-shadow:0 0 0 3px rgba(126,103,255,.24),0 0 0 6px rgba(126,103,255,.1),0 4px 12px rgba(0,0,0,.12)}
.frame-frame_legend{box-shadow:0 0 0 3px rgba(63,209,170,.24),0 0 0 6px rgba(63,209,170,.1),0 4px 12px rgba(0,0,0,.12)}
.donation-editor{grid-template-columns:.6fr 1fr .8fr 1.5fr 1fr 1fr 1fr}
.donation-editor select{width:100%;padding:12px 14px;border-radius:14px;border:2px solid rgba(201,137,73,.35);background:#fff8e8}
@media (max-width:760px){
  .avatar-badge{border-width:4px;box-shadow:0 0 0 3px rgba(221,177,91,.25),0 4px 10px rgba(0,0,0,.16)}
  .hud-user .avatar-badge{width:60px!important;height:60px!important;min-width:60px;min-height:60px}
  .hud-with-avatar{display:grid;grid-template-columns:1fr;align-items:start}
  .hud-user{margin-right:0}
  .babylon-host:fullscreen,.babylon-host:-webkit-full-screen{height:100dvh!important;border-radius:0}
  .donation-editor{grid-template-columns:1fr}
}


/* Telegram WebApp mode */
.tg-quickbar{display:none}
.tg-webapp body,.tg-webapp .app-body{padding-top:0}
.tg-webapp .page-bg{background:linear-gradient(180deg,var(--tg-bg, #17345e), #102544)}
.tg-webapp .topbar{position:sticky;top:0;z-index:40;margin:0 auto 8px;border-radius:0 0 22px 22px;max-width:100%;padding:12px 16px;background:rgba(255,248,231,.96);backdrop-filter:blur(12px)}
.tg-webapp .brand{font-size:26px}.tg-webapp .brand-logo{height:34px}
.tg-webapp .topnav{gap:10px;font-size:14px;font-weight:800}.tg-webapp .topnav a{padding:8px 12px;border:2px solid rgba(213,145,86,.22);border-radius:999px;background:rgba(255,255,255,.65)}
.tg-webapp .hud{margin:8px auto;padding:10px}.tg-webapp .hud-pill{padding:8px 12px;font-size:14px}
.tg-webapp .game-stage{padding:14px}.tg-webapp .window-ribbon{min-height:54px;font-size:22px;padding:8px 22px 12px}
.tg-webapp .hero-grid{grid-template-columns:minmax(0,1fr);gap:12px}.tg-webapp .side-panel.small{padding:14px}
.tg-webapp .play-area{order:-1;padding:10px;min-height:auto}.tg-webapp .babylon-host{height:min(68dvh,720px);border-radius:22px}
.tg-webapp .overlay-panel{width:min(94vw,520px);padding:18px;border-radius:20px}
.tg-webapp .overlay-panel p{font-size:16px}
.tg-webapp .ui-btn{min-height:52px;font-size:20px;border-radius:16px}
.tg-webapp .ui-btn.primary{background:var(--tg-button,var(--button_bg));color:var(--tg-button-text,var(--button_text))}
.tg-webapp .tg-quickbar{display:none}
@media (max-width:900px){
  .tg-webapp .topnav{display:none}
  .tg-webapp .tg-quickbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;position:sticky;top:74px;z-index:35;max-width:1440px;margin:0 auto 8px;padding:0 10px}
  .tg-webapp .tg-quickbar a{display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:14px;background:rgba(255,248,231,.94);border:2px solid rgba(213,145,86,.18);font-weight:900;font-size:13px;box-shadow:0 6px 14px rgba(0,0,0,.08)}
  .tg-webapp .hud-with-avatar{grid-template-columns:1fr 1fr;gap:8px}.tg-webapp .hud-user{grid-column:1 / -1}
  .tg-webapp .avatar-badge{width:56px!important;height:56px!important;min-width:56px;min-height:56px}
}
@media (max-width:760px){
  .tg-webapp .topbar{padding:10px 12px;gap:8px}.tg-webapp .brand{font-size:22px}
  .tg-webapp .tg-quickbar{top:66px;padding:0 8px}
  .tg-webapp .play-area{padding:8px}.tg-webapp .babylon-host{height:min(62dvh,560px)}
  .tg-webapp .side-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tg-webapp .side-panel h3,.tg-webapp .side-panel .counters{grid-column:1/-1}
  .tg-webapp .side-panel .ui-btn{margin:0;width:100%}
}