/* Luminous: khung app (nền phòng, topbar, rail, dock, sidebar) theo design-concepts/luminous-ui-20
   Chỉ đổi giao diện; giữ nguyên breakpoint gốc của styles.css (rail/side chỉ từ 1024px, dock dưới 1024px). */

/* ========== 1. Nền phòng vẽ tay ========== */
body{background:url('../assets/lum/app/bg.webp') center/cover fixed,linear-gradient(135deg,#fef5ed,#ffe8d9)}
body::before{content:'';position:fixed;inset:0;background:rgba(255,248,238,.35);pointer-events:none;z-index:0}
.app{position:relative;z-index:1}

/* ========== 2. Topbar: avatar + Lv + EXP, viên tài nguyên ========== */
.topbar{background:linear-gradient(180deg,rgba(255,250,243,.96),rgba(255,236,222,.94));border-bottom:3px solid var(--wood-dark);box-shadow:0 3px 8px rgba(110,60,40,.15)}
.brand{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;gap:8px}
.brand .logo{display:none}
#avatarContainer{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.avatar-ring{position:relative;display:block;width:46px;height:46px;border-radius:50%;overflow:hidden;border:3px solid var(--wood-dark);background:radial-gradient(circle at 50% 35%,#fff 0,#ffe3ec 70%);box-shadow:0 3px 8px rgba(110,60,40,.28),inset 0 0 0 2px #f6c58c}
#avatarCanvas{display:block;width:100%;height:100%}
#xpInfo{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
#lvlBadge{font:800 13px/1 'Baloo 2',sans-serif;color:#fff;background:linear-gradient(180deg,#8a4b2a,#5a3a22);padding:3px 8px 2px;border-radius:999px;border:2px solid #f6c58c;box-shadow:0 2px 3px rgba(90,58,34,.3)}
#xpBar{display:block;width:84px;height:10px;border-radius:999px;background:#f3e4dc;border:2px solid var(--wood-dark);overflow:hidden}
#xpFill{display:block;height:100%;width:0;background:linear-gradient(180deg,#ff9cc0,#ff4f8b);border-radius:999px;transition:width .3s}

.chip{background:linear-gradient(180deg,#fffdf9,#fff3e6);border:3px solid var(--wood-dark);box-shadow:0 3px 6px rgba(110,60,40,.2),inset 0 2px 0 rgba(255,255,255,.7);font-family:'Baloo 2',sans-serif;height:34px;padding:0 10px}
.chip b{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:14px}
.chip::after{width:22px;height:22px;background:url('../assets/lum/ui/plus.webp') center/contain no-repeat,linear-gradient(135deg,#66bb6a,#4caf50);border:2px solid #388e3c;box-shadow:0 2px 4px rgba(76,175,80,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.chips{flex-wrap:nowrap;gap:6px;min-width:0}

/* ========== 3. Rail gỗ óc chó (desktop) ========== */
.rail button[data-arena-open] i{background-image:url('../assets/lum/ui/m_arena.webp')!important}
.rail button[data-sheet="stock"] i{background-image:url('../assets/lum/ui/m_stock.webp')!important}
.rail button[data-sheet="book"] i{background-image:url('../assets/lum/ui/m_ledger.webp')!important}
.rail button[data-sheet="story"] i{background-image:url('../assets/lum/ui/m_story.webp')!important}
.rail button[data-sheet="map"] i{background-image:url('../assets/lum/ui/m_careers.webp')!important}
.rail button[data-sheet="life"] i{background-image:url('../assets/lum/ui/m_map.webp')!important}
.rail button[data-sheet="friends"] i{background-image:url('../assets/lum/ui/m_friends.webp')!important}
.rail button[data-sheet="ranking"] i{background-image:url('../assets/lum/ui/m_trophy.webp')!important}
.rail button[data-sheet="market"] i{background-image:url('../assets/lum/ui/m_market.webp')!important}
.rail button[data-sheet="shop"] i{background-image:url('../assets/lum/ui/m_shop.webp')!important}
.rail button[data-sheet="quests"] i{background-image:url('../assets/lum/ui/m_quest.webp')!important}
.rail button[data-sheet="more"] i{background-image:url('../assets/lum/ui/gear.webp')!important}

@media (min-width:1024px){
  :root{--rail:172px}
  /* rail chạy suốt chiều cao như concept; topbar + side nằm bên phải */
  .app{grid-template-columns:var(--rail) minmax(0,1fr) var(--side);grid-template-areas:"rail top top" "rail play side"}
  body.scene-active .app{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "play"}
  .brand-text{display:none}

  .rail{position:relative;gap:5px;padding:74px 12px 16px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;border-right:0;
    background:
      repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 9px,rgba(255,220,170,.04) 9px 11px,transparent 11px 17px),
      linear-gradient(90deg,#4a3020 0,#6b4630 18%,#5c3b27 50%,#6b4630 82%,#4a3020 100%);
    box-shadow:inset -4px 0 0 #3a2416,inset 4px 0 0 #7d5638,4px 0 14px rgba(60,30,10,.35)}
  .rail::-webkit-scrollbar{display:none}
  .rail::before{content:'';position:absolute;top:8px;left:10px;right:10px;height:60px;background:url('../assets/lum/app/wordmark.webp') center/contain no-repeat;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));pointer-events:none}
  .rail button{flex:0 0 auto;height:auto;min-height:48px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;padding:5px 8px;border-radius:14px;
    background:linear-gradient(180deg,#fffaf2,#f6e3cc);border:2px solid #3a2416;color:var(--ink);
    box-shadow:0 3px 0 #2c1a0f,0 4px 6px rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.8);transition:transform .15s}
  .rail button i{flex:0 0 34px;width:34px;height:34px;margin:0;font-size:0!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
  .rail button span{flex:1;font:800 13px/1.15 'Baloo 2',sans-serif;color:#4a2c1a;text-align:left;white-space:normal}
  .rail button:hover:not(.on){background:linear-gradient(180deg,#fff,#fbeedd);transform:translateX(2px)}
  .rail button.on{background:linear-gradient(180deg,#ff9cc0,#ff5d93);border-color:#fff;color:#fff;box-shadow:0 0 0 2px #e0457c,0 0 14px rgba(255,120,170,.75),0 3px 0 #b8325f,inset 0 2px 0 rgba(255,255,255,.5)}
  .rail button.on span{color:#fff;text-shadow:0 1px 1px rgba(150,30,70,.6)}
  .rail button{position:relative}
  .rail button .dot{top:3px;right:auto;left:34px;width:11px;height:11px}
  .rail button.on i{filter:drop-shadow(0 1px 2px rgba(120,20,60,.4))}
}
@media (min-width:1024px) and (max-height:820px){
  .rail{gap:4px;padding-top:66px}.rail::before{height:52px}
  .rail button{min-height:44px;padding:3px 8px}.rail button i{flex-basis:30px;width:30px;height:30px}
}

/* ========== 4. Dock gỗ (điện thoại / máy tính bảng) ========== */
@media (max-width:1023px){
  .dock{background:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 10px),linear-gradient(180deg,#6b4630,#4a3020);border-top:3px solid #3a2416;box-shadow:0 -3px 12px rgba(0,0,0,.25),inset 0 2px 0 #7d5638}
  .dock button{border-radius:12px;color:#fff9f2}
  .dock button.on{background:linear-gradient(180deg,rgba(255,156,192,.95),rgba(255,93,147,.95));box-shadow:0 0 10px rgba(255,120,170,.6),inset 0 1px 0 rgba(255,255,255,.5)}
  .dock button span{color:#fff9f2;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.55)}
  .dock i{width:30px;height:30px;font-size:0!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
  .dock button[data-arena-open] i{background-image:url('../assets/lum/ui/m_arena.webp')!important}
  .dock button[data-sheet="stock"] i{background-image:url('../assets/lum/ui/m_stock.webp')!important}
  .dock button[data-sheet="life"] i{background-image:url('../assets/lum/ui/m_map.webp')!important}
  .dock button[data-sheet="story"] i{background-image:url('../assets/lum/ui/m_story.webp')!important}
  .dock button[data-sheet="shop"] i{background-image:url('../assets/lum/ui/m_shop.webp')!important}
  .dock button[data-sheet="quests"] i{background-image:url('../assets/lum/ui/m_quest.webp')!important}
  .dock button[data-sheet="more"] i{background-image:url('../assets/lum/ui/gear.webp')!important}
  #avatarContainer{position:relative;gap:0}
  #xpInfo{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);z-index:2;pointer-events:none}
  #lvlBadge{font-size:10px;padding:2px 5px 1px;border-width:1.5px;white-space:nowrap}
  #xpBar{display:none}
  .brand-text{display:none}
}

/* ========== 5. Khung gỗ quanh canvas ========== */
.stage{border-radius:18px;border:4px solid var(--wood-dark);box-shadow:inset 0 0 0 3px #8b6f47,0 6px 16px rgba(110,60,40,.3);background:#f1dfcd}

/* ========== 6. Thanh cảnh: viên tiệm + chip trò chơi ========== */
.shop-pill{background:linear-gradient(180deg,#fffaf2,#fbe9d6);border:3px solid var(--wood-dark);box-shadow:0 3px 8px rgba(110,60,40,.25),inset 0 2px 0 rgba(255,255,255,.6);border-radius:999px}
.shop-ico{background:var(--accent-soft);border:2px solid var(--wood-dark)}
.shop-txt b{font-family:'Baloo 2',sans-serif;font-weight:800}
.play-tools .chip{border-width:2.5px}
.play-tools .chip.ghost{background:rgba(255,249,242,.88)}

/* ========== 7. Cột phải: thẻ kem như concept ========== */
@media (min-width:1024px){
  .side{background:transparent;border-left:0;padding:12px 14px 14px 6px;scrollbar-width:thin;scrollbar-color:var(--wood-dark) transparent}
  .side .side-sec{background:linear-gradient(180deg,#fffcf7,#fff4e8);border:3px solid var(--wood);border-radius:16px;padding:11px 13px;margin-bottom:11px;box-shadow:0 4px 10px rgba(110,60,40,.18),inset 0 2px 0 #fff}
  .side h3{font:800 15px/1.2 'Baloo 2',sans-serif;color:#4a2c1a;display:flex;align-items:center;gap:6px}
  .side h3 button{margin-left:auto;padding:3px 11px;min-height:0;border-radius:999px;border:2px solid #c2185b;background:linear-gradient(180deg,#ff9cc0,#ff5d93);color:#fff;font:800 11px/1.4 'Baloo 2',sans-serif;box-shadow:0 2px 0 #b8325f,inset 0 1px 0 rgba(255,255,255,.5)}
  /* nút toàn màn hình: nằm trong vùng chơi, không đè cột phải */
  body:not(.scene-active):not(.fullscreen-game) .fullscreen-float{right:calc(var(--side) + 22px);bottom:22px}
}

/* ========== 8. Nút chung ========== */
h1,h2,h3,h4,.btn,.chip b,.shop-txt b{font-family:'Baloo 2',sans-serif}
.btn.pri,.btn.acc{background:linear-gradient(180deg,#ff9cc0,#ff5d93);border:3px solid #c2185b;color:#fff;box-shadow:0 4px 0 #b8325f,0 6px 12px rgba(233,30,99,.3),inset 0 2px 0 rgba(255,255,255,.45)}
.btn.good{background:linear-gradient(180deg,#8fe06a,#56b84a);border:3px solid #3d8f35;color:#fff;box-shadow:0 4px 0 #2f7a2a,inset 0 2px 0 rgba(255,255,255,.4)}

/* icon vẽ tay trong HTML (main.js lico/heartIco) */
.lico{display:inline-block;width:20px;height:20px;object-fit:contain;vertical-align:-4px;flex:0 0 auto;filter:drop-shadow(0 1px 1px rgba(90,58,34,.25))}
.lico.off{filter:grayscale(1);opacity:.35}
.side-sec h3 .lico{width:22px;height:22px;margin-right:2px}
.lhearts{display:inline-flex;gap:1px;vertical-align:middle}
.lhearts .lico{width:14px;height:14px;vertical-align:0}
.tile i .lico{width:30px;height:30px}
/* khung avatar gỗ tròn */
.avatar-ring::after{content:'';position:absolute;inset:-3px;background:url('../assets/lum/ui/round_frame.webp') center/100% 100% no-repeat;pointer-events:none;-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%)}
.em .lico,.mission-chest .em .lico{width:30px;height:30px;vertical-align:middle}
.mission-chest .em .lico{width:40px;height:40px}
.btn .lico{width:18px;height:18px;vertical-align:-3px}
.btn.big .lico{width:24px;height:24px;vertical-align:-6px}
.sec .lico{width:20px;height:20px}
@media (min-width:1024px){
  /* rail = tấm ván gỗ dây leo (ui/sidebar_board) phủ lên nền gỗ cũ */
  .rail{background:url('../assets/lum/ui/sidebar_board.webp') center top/100% 100% no-repeat,linear-gradient(90deg,#4a3020 0,#6b4630 18%,#5c3b27 50%,#6b4630 82%,#4a3020 100%)}
  .side .side-sec.account-progress{position:relative}
  .side .side-sec.account-progress::after{content:'';position:absolute;right:-6px;top:-12px;width:24px;height:70px;background:url('../assets/lum/ui/vine.webp') top center/contain no-repeat;pointer-events:none;transform:rotate(6deg)}
}

/* Nút giữa sân khấu: xếp ngang, gọn sát đáy để không che quầy gọi món */
.cta{flex-direction:row;flex-wrap:wrap;justify-content:center;width:min(94%,470px);bottom:10px;gap:6px}
.cta .btn{width:auto;flex:1 1 0;min-width:0;white-space:nowrap}
.cta .btn.big{flex:1.7 1 0}
.cta::after{content:'';flex-basis:100%;order:2;height:0}
.cta small{order:3}
.tray[hidden],.cta[hidden]{display:none!important}
@media(max-width:380px){.cta{width:96%;gap:5px}.cta .btn{white-space:normal;line-height:1.15;font-size:13px;padding-left:8px;padding-right:8px;min-height:46px}.cta .btn .lico{width:18px;height:18px}}

/* Nút toàn màn hình nằm trong hàng chip trên sân khấu, không che HUD trong cảnh */
.fullscreen-float{display:none!important}
.play-tools .fullscreen-quick{background:rgba(255,249,242,.88)!important}
/* Điện thoại: 5 ô chỉ số trên cùng vừa đủ 1 hàng (ẩn nút + vì chạm ô vẫn mở bảng nạp) */
@media (max-width:560px){
  .topbar .chips{gap:4px}
  .topbar .chips .chip{height:30px;padding:0 6px 0 3px;border-width:2.5px;font-size:11px;gap:2px}
  .topbar .chips .chip::after{display:none}
  .topbar .chips .chip b{font-size:12.5px}
  .topbar .chips .chip::before{width:17px!important;height:17px!important}
  .topbar #fundChip span{display:none}
}
/* Máy rất hẹp (≤360px): ép 5 ô chỉ số + hàng chip cảnh vừa một hàng */
@media (max-width:360px){
  .topbar .chips{gap:2px}
  .topbar .chips .chip{padding:0 4px 0 2px;border-width:2px}
  .topbar .chips .chip b{font-size:11.5px}
  .topbar .chip-clock,.topbar .chip-clock span{font-size:10px!important;letter-spacing:-.2px}
  .topbar .chips .chip::before{width:15px!important;height:15px!important}
  .play-tools{gap:2px;flex:0 0 auto}
  .play-tools .chip.quick-game,.play-tools .fullscreen-quick{width:28px;justify-content:center}
  .play-tools .chip{padding:0 4px}
  .play-tools #onlineBtn .lico{width:16px;height:16px}
}
/* Lịch điểm danh: điện thoại không phải kéo ngang */
@media (max-width:480px){.login-calendar{grid-template-columns:repeat(5,minmax(0,1fr));overflow-x:visible;gap:5px}}