/* screens.css — bố cục riêng từng màn (trừ trận đấu, ở battle.css) */

/* ===== 1 · CHỌN BẢN ===== */
.screen--theme { justify-content: center; gap: var(--space-5); }
.hello { text-align: center; font-size: clamp(30px, 9vw, 46px); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.hello .subtitle { font-size: var(--fs-md); background: rgba(255,255,255,.85); padding: 6px 14px; border-radius: var(--radius-lg); }
.themepick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.themecard {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px 14px; border-radius: var(--radius-xl); background: var(--bg-home) center / cover no-repeat, var(--bg-sky); color: var(--color-text);
  border: var(--bw-4) solid #fff; box-shadow: 0 8px 0 var(--color-primary-dark), 0 18px 28px var(--color-shadow);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.themecard:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--color-primary-dark); }
.themecard__burst { display: none; position: absolute; inset: -45%; z-index: -1; background: repeating-conic-gradient(var(--bg-ray) 0 8deg, transparent 8deg 16deg); animation: spin 50s linear infinite; }
.themecard__art { width: 100%; aspect-ratio: 1; display: grid; place-items: center; animation: float 3.4s ease-in-out infinite; }
.themecard:nth-child(2) .themecard__art { animation-delay: -1.6s; }
.themecard__art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px var(--color-shadow)); }
.themecard__name { font-size: clamp(19px, 5.6vw, 28px); }
.themecard__blurb { font-size: var(--fs-xs); font-weight: 800; line-height: 1.25; text-align: center; background: rgba(255,255,255,.88); border-radius: 12px; padding: 4px 8px; }

/* ===== 2 · TRANG CHỦ ===== */
.home__hero { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); }
.hero { display: grid; place-items: center; animation: float 3.2s ease-in-out infinite; }
.home__stats { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; align-items: center; }
.levelbadge {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; background: #fff;
  border: var(--bw-2) solid var(--color-gold); box-shadow: 0 4px 0 var(--color-accent-dark); text-align: left;
}
.levelbadge__medal { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, var(--color-gold-2), var(--color-gold)); color: var(--color-gold-ink); border: 2px solid #fff; }
.levelbadge small { display: block; font-size: 11px; line-height: 1.1; color: var(--color-text-muted); }
.levelbadge b { font-family: var(--font-head); font-size: var(--fs-md); line-height: 1.1; }
.home__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); flex: none; }
.home__row .btn { padding-left: 10px; padding-right: 10px; }

/* ===== 3 · BẢN ĐỒ ===== */
.map { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: var(--space-4); padding: var(--space-3) 0 var(--space-2); isolation: isolate; }
.map::before { content: ""; position: absolute; left: 50%; top: 28px; bottom: 44px; z-index: -1; border-left: 6px dashed rgba(255,255,255,.95); transform: translateX(-3px); filter: drop-shadow(0 2px 0 rgba(0,0,0,.08)); }
.node {
  position: relative; display: flex; align-items: center; gap: var(--space-3); width: 88%; padding: 10px 14px 10px 10px; text-align: left;
  border-radius: var(--radius-xl); background: var(--color-surface-2); color: var(--color-text);
  border: var(--bw-3) solid var(--aura, var(--color-outline)); box-shadow: 0 6px 0 var(--aura, var(--color-outline)), 0 14px 20px var(--color-shadow);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.node:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--aura, var(--color-outline)); }
.node--l { align-self: flex-start; } .node--r { align-self: flex-end; }
.node__num {
  width: 62px; height: 62px; flex: none; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-num); font-weight: 800; font-size: 36px; line-height: 1; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25);
  background: radial-gradient(circle at 35% 28%, var(--aura-2, #fff), var(--aura, var(--color-primary)) 70%); border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.node__num .ico { width: 56%; height: 56%; }
.node__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.node__body b { font-family: var(--font-head); font-size: var(--fs-md); line-height: 1.15; }
.node__body small { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.25; }
.medals { display: flex; gap: 6px; margin-top: 5px; }
.node__flag { position: absolute; top: -13px; right: 16px; font-size: 12px; font-weight: 800; color: #fff; background: var(--color-primary); padding: 2px 10px; border-radius: 999px; border: 2px solid #fff; }
.node.is-suggest { animation: node-pulse 1.7s ease-in-out infinite; }
.node--boss { align-self: center; width: 100%; --aura: var(--color-magic); --aura-2: #EAD9FF; background: linear-gradient(180deg, #fff, #F3E9FF); }
.node.is-locked { filter: grayscale(.75); opacity: .78; }

/* ===== 4 · CHỌN NHÂN VẬT ===== */
.pick__chars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.charcard {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 10px; opacity: .82;
  border-radius: var(--radius-lg); background: var(--color-surface-2); color: var(--color-text);
  border: var(--bw-2) solid var(--color-outline); box-shadow: 0 4px 0 var(--color-outline);
  transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.charcard .art--card { width: 58%; }
.charcard__name { font-family: var(--font-head); font-size: var(--fs-sm); line-height: 1.1; text-align: center; }
.charcard small { font-size: 12px; color: var(--color-text-muted); margin-bottom: 3px; }
.charcard.is-selected { opacity: 1; transform: translateY(-3px); border-color: var(--aura); box-shadow: 0 6px 0 var(--aura), 0 0 0 4px var(--aura-2); }
.pick__ranks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.rankbtn {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 58px; text-align: left;
  border-radius: var(--radius-lg); background: var(--color-surface-2); color: var(--color-text);
  border: var(--bw-2) solid var(--color-outline); box-shadow: 0 4px 0 var(--color-outline);
}
.rankbtn .medal { width: 36px; height: 36px; }
.rankbtn > span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rankbtn b { font-family: var(--font-head); font-size: var(--fs-sm); line-height: 1.1; }
.rankbtn em { font-style: normal; font-size: 11.5px; line-height: 1.2; color: var(--color-text-muted); }
.rankbtn.is-selected { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: 0 6px 0 var(--color-primary-dark), 0 0 0 4px var(--color-primary-soft); }
.rankbtn:disabled { opacity: .62; filter: grayscale(.5); }
.screen--pick .btn--cta { margin-top: auto; }
.bosscard { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: var(--space-4); border-radius: var(--radius-xl); background: linear-gradient(180deg, #fff, #F3E9FF); border: var(--bw-3) solid var(--color-magic); box-shadow: 0 6px 0 var(--color-magic); }
.bosscard b { font-family: var(--font-head); font-size: var(--fs-xl); line-height: 1.1; }
.bosscard small { font-size: var(--fs-sm); color: var(--color-text-muted); }
.team { display: flex; justify-content: center; gap: var(--space-2); }

/* ===== 13–17 · MÀN KẾT QUẢ ===== */
.screen--result { align-items: center; justify-content: center; text-align: center; gap: var(--space-3); overflow: hidden; isolation: isolate; }
.rays {
  position: absolute; left: 50%; top: 28%; z-index: -2; width: 200vmax; height: 200vmax; margin: -100vmax 0 0 -100vmax; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,255,255,.6) 0 6deg, transparent 6deg 12deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 34%); mask: radial-gradient(circle, #000 0, transparent 34%);
  animation: spin 36s linear infinite;
}
.rays--strong { background: repeating-conic-gradient(var(--color-accent) 0 6deg, rgba(255,255,255,.75) 6deg 12deg); opacity: .8; }
.confetti-layer { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.confetti { position: absolute; top: -24px; width: 10px; height: 16px; border-radius: 3px; animation: confetti-fall var(--t) linear var(--d) infinite; }
.banner { display: flex; flex-direction: column; align-items: center; font-size: clamp(28px, 8.6vw, 46px); animation: banner-in .7s var(--ease-bounce) both; }
.stars { display: flex; justify-content: center; gap: 10px; }
.bigstar { width: 62px; height: 62px; color: #DCD6E8; }
.bigstar .ico { width: 100%; height: 100%; stroke: #fff; }
.bigstar .ico .fill { stroke-width: 1.2; }
.bigstar.is-on { color: var(--color-gold); filter: drop-shadow(0 4px 0 var(--color-accent-dark)); animation: star-in .55s var(--ease-bounce) both; animation-delay: calc(.35s + var(--i) * .18s); }
.bigstar:nth-child(2) { transform: translateY(-10px) scale(1.12); }
.praise-line {
  max-width: 100%; font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 800; line-height: 1.25; color: var(--color-ink);
  background: rgba(255,255,255,.9); padding: 8px 16px; border-radius: var(--radius-lg);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.rankresult {
  display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 16px 8px 10px; background: #fff; border-radius: var(--radius-lg);
  border: var(--bw-2) solid var(--color-gold); box-shadow: 0 4px 0 var(--color-accent-dark); animation: banner-in .6s var(--ease-bounce) .9s both;
}
.rankresult .medal { width: 44px; height: 44px; }
.rankresult b { display: block; font-family: var(--font-head); font-size: var(--fs-md); line-height: 1.15; }
.rankresult small { font-size: var(--fs-xs); color: var(--color-text-muted); }
.rankresult small b { display: inline; font-size: inherit; color: var(--color-primary-dark); }
.rankresult--hint { border-style: dashed; box-shadow: none; }
.friend {
  position: relative; display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 14px 8px 8px; background: #fff;
  border-radius: var(--radius-lg); border: var(--bw-2) solid var(--color-magic); box-shadow: 0 4px 0 var(--color-magic); animation: banner-in .6s var(--ease-bounce) 1.2s both;
}
.friend b { display: block; font-family: var(--font-head); font-size: var(--fs-md); line-height: 1.15; }
.friend small { font-size: var(--fs-xs); color: var(--color-text-muted); }
.dadnote { max-width: 100%; background: var(--color-surface); border: 2px dashed var(--color-primary); border-radius: var(--radius-lg); padding: 8px 14px; font-family: var(--font-head); font-size: var(--fs-md); color: var(--color-ink); line-height: 1.25; }
.dadnote small { display: block; font-family: var(--font-body); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary-dark); }
.screen--result .btn { flex: none; }
.screen--result .btn--secondary { width: 100%; }
.almost__art .art--hero { width: min(44vw, 190px); }

/* 15 · biến hình */
.evo { position: relative; width: min(68vw, 290px); aspect-ratio: 1; display: grid; place-items: center; }
.evo > * { grid-area: 1 / 1; }
.evo .art--hero { width: 100%; }
.evo__old { animation: evo-old 1.4s var(--ease-soft) forwards; }
.evo__new { opacity: 0; animation: evo-new 1s var(--ease-bounce) 1.2s forwards; }
.evo__flash { width: 120%; height: 120%; border-radius: 50%; background: radial-gradient(circle, #fff 0, var(--aura-2) 38%, transparent 68%); opacity: 0; animation: evo-flash 1.3s ease-out .65s forwards; }
.evo__steps { display: flex; align-items: center; gap: 10px; }
.evo__arrow { color: var(--color-primary); display: grid; }

/* 16 · lên cấp */
.bigmedal {
  width: 150px; height: 150px; display: grid; place-items: center; border-radius: 50%; border: 6px solid #fff;
  background: radial-gradient(circle at 35% 28%, #FFF7C7, var(--color-gold) 58%, #E38B00);
  box-shadow: 0 8px 0 #C47600, 0 0 0 8px rgba(255,214,77,.45), 0 0 60px 14px rgba(255,214,77,.8);
  animation: medal-in .9s var(--ease-bounce) both, glow-pulse 2s ease-in-out 1s infinite;
}
.bigmedal i { width: 84px; height: 84px; color: #fff; filter: drop-shadow(0 3px 0 #C47600); }
.bigmedal .ico { width: 100%; height: 100%; }
.leveltitle { font-size: clamp(28px, 8.6vw, 44px); }

/* 17 · mở game mới */
.worldcard {
  position: relative; overflow: hidden; width: min(100%, 360px); padding: 22px 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-radius: var(--radius-xl); background: linear-gradient(180deg, #C6F5DF, #7FD9A8); border: var(--bw-4) solid #fff;
  box-shadow: 0 8px 0 #3FA873, 0 18px 30px var(--color-shadow); animation: banner-in .7s var(--ease-bounce) .45s both;
}
.worldcard small { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: #1F7A52; }
.worldcard b { font-family: var(--font-head); font-size: var(--fs-xl); line-height: 1.1; color: #0E5A3A; }
.worldcard em { font-style: normal; font-size: var(--fs-sm); color: #1F6A49; }
.worldcard .tagnew { position: static; margin-top: 8px; }
.worldcard__veil { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #5B4BB0, #2D2470); animation: veil-open .9s var(--ease-soft) 1.3s forwards; }
.worldcard__veil i { width: 56px; height: 56px; }
.worldcard__veil .ico { width: 100%; height: 100%; }

/* ===== 18 · BỘ SƯU TẬP ===== */
.colgrid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.colcard { padding: 10px 12px 12px; border-radius: var(--radius-xl); background: var(--color-surface-2); border: var(--bw-3) solid var(--aura); box-shadow: 0 6px 0 var(--aura); }
.colcard header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.colcard__num { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; font-family: var(--font-num); font-weight: 800; font-size: 26px; color: #fff; background: radial-gradient(circle at 35% 28%, var(--aura-2), var(--aura) 70%); border: 3px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,.18); text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.colcard header b { display: block; font-family: var(--font-head); line-height: 1.1; }
.colcard header small { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.2; }
.colcard__forms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.formslot { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 6px; border-radius: var(--radius-md); background: linear-gradient(180deg, #fff, var(--aura-2)); }
.formslot small { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; color: #fff; white-space: nowrap; }
.formslot[data-rank="bronze"] small { background: var(--color-bronze); }
.formslot[data-rank="silver"] small { background: var(--color-silver); }
.formslot[data-rank="gold"] small   { background: var(--color-gold); color: var(--color-gold-ink); }
.formslot[data-rank="diamond"] small { background: linear-gradient(135deg, var(--color-diamond-2), var(--color-diamond) 48%, var(--color-diamond-3)); color: var(--color-diamond-ink); }
.friendgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding-bottom: var(--space-3); }
.friendslot { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.friendslot small { font-size: 11px; line-height: 1.15; background: rgba(255,255,255,.85); border-radius: 8px; padding: 2px 4px; }
.friendslot.is-locked small { color: var(--color-text-muted); }

/* ===== 19 · LẬT THẺ ===== */
.screen--match .subtitle { background: rgba(255,255,255,.85); border-radius: 999px; padding: 4px 14px; align-self: center; }
.matchgrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-xl);
  background: var(--color-success); border: var(--bw-4) solid #fff; box-shadow: 0 6px 0 rgba(0,0,0,.14), inset 0 0 0 3px rgba(255,255,255,.35);
}
.mcard { aspect-ratio: 1; perspective: 600px; }
.mcard__in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s var(--ease-soft); }
.mcard.is-open .mcard__in, .mcard.is-done .mcard__in { transform: rotateY(180deg); }
.mcard__back, .mcard__front {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--radius-md);
  -webkit-backface-visibility: hidden; backface-visibility: hidden; border: var(--bw-2) solid #fff; box-shadow: 0 4px 0 rgba(0,0,0,.18);
}
.mcard__back { background: var(--btn-fill); color: var(--color-accent); }
.mcard__back .ico { width: 46%; height: 46%; }
.mcard__front { transform: rotateY(180deg); background: var(--color-surface); color: var(--color-ink); font-family: var(--font-num); font-weight: 800; font-size: clamp(19px, 6vw, 32px); line-height: 1; white-space: nowrap; }
.mcard[data-kind="a"] .mcard__front { background: #E6F6FF; font-size: clamp(24px, 7.4vw, 38px); }
.mcard.is-done { animation: pair-pop .5s var(--ease-bounce); }
.mcard.is-done .mcard__front { background: linear-gradient(180deg, #FFF9B0, #FFD21F); box-shadow: 0 0 0 3px var(--color-gold), 0 4px 0 #E08A00; }
.matchdone { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; text-align: center; animation: banner-in .6s var(--ease-bounce) both; }

/* ===== 20 · KẾT THÚC NGÀY ===== */
.night { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.night__moon { position: absolute; top: 7%; right: 12%; width: 74px; height: 74px; color: #FFE680; filter: drop-shadow(0 0 18px rgba(255,230,128,.85)); }
.night__star { position: absolute; width: 20px; height: 20px; color: #FFF3B0; animation: twinkle 2.2s ease-in-out infinite; }
.night .ico { width: 100%; height: 100%; }
.night__star.s1 { top: 12%; left: 14%; } .night__star.s2 { top: 26%; left: 30%; width: 14px; height: 14px; animation-delay: -.8s; } .night__star.s3 { top: 20%; right: 34%; width: 16px; height: 16px; animation-delay: -1.5s; }
.sleeper { position: relative; }
.sleeper .art--hero { width: min(52vw, 230px); }
.sleeper .art img { filter: saturate(.8) brightness(.94) drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.sleeper .art::before { opacity: .35; }
.zzz { position: absolute; right: -4px; top: 4%; display: flex; align-items: flex-end; gap: 2px; font-family: var(--font-head); font-weight: 800; color: #fff; }
.zzz i { font-style: normal; animation: zzz 2.4s ease-in-out infinite; }
.zzz i:nth-child(1) { font-size: 20px; } .zzz i:nth-child(2) { font-size: 28px; animation-delay: .3s; } .zzz i:nth-child(3) { font-size: 38px; animation-delay: .6s; }
.endday__title { font-size: clamp(22px, 6.8vw, 36px); }
.screen--endday { --fill-title: linear-gradient(180deg, #fff, #FFE680); --stroke-title: #2D2470; }

/* ===== 21 · GÓC CỦA BỐ ===== */
.screen--parent { max-width: 760px; color: #2A2540; font-weight: 600; }
.pcard { background: #fff; border: 1px solid #E4DEF2; border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: 0 2px 0 #DDD6EC, 0 8px 20px rgba(60,40,120,.07); }
.pcard h2 { font-family: var(--font-head); font-size: var(--fs-md); font-weight: 800; color: #2A2540; margin-bottom: 8px; }
.matrixwrap { overflow-x: auto; }
.matrix { margin: 0 auto; border-collapse: separate; border-spacing: 3px; font-family: var(--font-num); font-weight: 700; }
.matrix th { width: 34px; height: 28px; font-size: 14px; color: #6B6485; }
.matrix td { width: 34px; height: 34px; text-align: center; border-radius: 8px; font-size: 15px; }
[data-tier="none"]   { background: #EFEDF4; color: #8B86A0; }
[data-tier="bronze"] { background: var(--color-bronze-2); color: var(--color-bronze-ink); }
[data-tier="silver"] { background: #C9D6E8; color: var(--color-silver-ink); }
[data-tier="gold"]   { background: #FFD54F; color: var(--color-gold-ink); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 8px; justify-content: center; margin-top: 10px; }
.legend span { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.pcard--chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.statchip { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 12px; line-height: 1.2; color: #5B5475; }
.statchip b { font-family: var(--font-num); font-size: 26px; line-height: 1.1; color: var(--color-primary-dark); }
.pcard--two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.plist { display: flex; flex-direction: column; gap: 4px; }
.plist li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; background: #F6F3FB; font-size: 14px; }
.plist li b { font-family: var(--font-num); font-weight: 700; }
.plist li span { color: #6B6485; }
.plist .plist__empty { justify-content: center; color: #8B86A0; }
.phelp { font-size: 13px; color: #6B6485; margin-bottom: 8px; }
.pnote { display: block; width: 100%; min-height: 64px; padding: 10px 12px; border: 2px solid #D9D2EA; border-radius: 12px; font-size: 16px; font-weight: 600; resize: vertical; background: #FBFAFD; }
.pnote--code { min-height: 54px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; word-break: break-all; color: #6B6485; }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 0; border-top: 1px solid #EEEAF6; font-size: 15px; }
.prow input[type="number"] { width: 72px; height: 40px; text-align: center; font-size: 16px; border: 2px solid #D9D2EA; border-radius: 10px; }
.prow input[type="checkbox"] { width: 26px; height: 26px; accent-color: var(--color-primary); flex: none; }
.prow--btns { flex-wrap: wrap; justify-content: flex-start; }
.pbtn { min-height: 44px; padding: 8px 14px; border-radius: 12px; background: #F1EDFA; border: 2px solid #D9D2EA; font-size: 14px; font-weight: 800; color: #3A3260; }
.pbtn--danger { color: #B3261E; border-color: #F2C5C2; background: #FDF1F0; }

/* ===== THƯ VIỆN MÀN HÌNH ===== */
.screen--gallery { color: #2A2540; }
.gallery { display: grid; grid-template-columns: 1fr; gap: 8px; }
.galitem { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; text-align: left; border-radius: 14px; background: #fff; border: 1px solid #E4DEF2; font-size: 15px; color: #2A2540; }
.galitem b { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary); color: #fff; font-family: var(--font-num); }
.demobar {
  position: fixed; left: 50%; bottom: max(8px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: var(--z-top);
  display: flex; align-items: center; gap: 6px; max-width: calc(100% - 16px); padding: 4px; border-radius: 999px;
  background: rgba(30,24,60,.9); color: #fff; font-size: 12px; font-family: var(--font-body);
}
.demobar__btn { min-height: 38px; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.demobar__n { padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== màn rộng ===== */
@media (min-width: 640px) {
  .pick__chars { grid-template-columns: repeat(4, 1fr); }
  .pick__ranks { grid-template-columns: repeat(4, 1fr); }
  .pick__ranks--two { grid-template-columns: repeat(2, 1fr); }
  .colgrid { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .pcard--two { grid-template-columns: 1fr; } }
/* điện thoại cầm ngang: xếp hai cột để không phải cuộn */
@media (orientation: landscape) and (max-height: 540px) {
  .screen { max-width: 860px; }
  .screen--home { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto auto; column-gap: var(--space-5); align-items: center; }
  .screen--home .topbar { grid-column: 1 / -1; }
  .screen--home .home__hero { grid-row: 2 / 5; }
  .screen--home .art--hero { width: min(34vh + 60px, 220px); }
  .themepick { max-width: 560px; align-self: center; }
  .themecard__art { aspect-ratio: 3 / 2; }
  .pick__chars { grid-template-columns: repeat(4, 1fr); }
  .matchgrid { grid-template-columns: repeat(6, 1fr); max-width: 620px; align-self: center; width: 100%; }
  .map { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .map::before { display: none; }
  .node { width: calc(50% - var(--space-2)); align-self: auto; }
  .node--boss { width: 100%; }
}