/* Round 2: home modes + meta row, HUD chips, power bar, result extras, meta sheets, desktop scale. 8 px grid. */

/* home layout */
#home { gap: 8px; }
.home-main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.home-left, .home-right { display: flex; flex-direction: column; gap: 16px; }
.brand { margin: 0; }
.logo .emblem { width: 48px; height: 48px; }
.logo .word { font-size: 32px; }
.mosaic-card { display: block; width: min(100%, 300px, 36vh); padding: 12px; text-align: start; }
.mosaic-card .ch-row { margin: 8px 4px; font-size: 16px; }
.mosaic-card .bar { display: block; }
#playBtn { width: min(100%, 360px); margin: 0 auto; }
#playBtn .streak-chip { position: static; }
.streak-chip { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: 8px; padding: 0 8px; height: 24px; border-radius: 12px;
  background: rgba(255,255,255,.22); font-style: normal; font-size: 14px; }
.streak-chip svg { width: 16px; height: 16px; }
.modes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: min(100%, 420px); margin: 0 auto; }
.mode-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-radius: 16px;
  background: var(--paper); box-shadow: 0 3px 0 var(--line); font-weight: 800; font-size: 13px; min-height: 80px; }
.mode-tile:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.mode-tile .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.mode-tile .ico svg { width: 24px; height: 24px; }
.m-daily .ico { background: #E7F3F1; color: var(--teal); } .m-rush .ico { background: #FCE3DE; color: #D9443B; }
.m-expert .ico { background: #EFE6FB; color: var(--super); } .m-weekly .ico { background: #FFF1D6; color: #C98A16; }
.m-zen .ico { background: #E3EEFB; color: #3C7DD9; }
.mode-tile .sub { font-size: 12px; color: var(--muted); min-height: 16px; display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
.mode-tile .sub svg { width: 12px; height: 12px; }
.dot { position: absolute; top: 4px; inset-inline-end: 8px; min-width: 12px; height: 12px; border-radius: 8px; background: var(--accent);
  box-shadow: 0 0 0 2px var(--paper); font-style: normal; font-size: 11px; line-height: 12px; color: #fff; padding: 0 3px; }
.dot:not(:empty) { min-width: 18px; height: 18px; line-height: 18px; top: -4px; }
.meta-row { display: flex; justify-content: center; gap: 8px; width: min(100%, 420px); margin: 0 auto; }
.meta-btn { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.meta-btn .ico { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--paper); color: var(--ink);
  box-shadow: 0 2px 0 var(--line); }
.meta-btn:active .ico { transform: scale(.92); }
.meta-btn .dot { top: -4px; inset-inline-end: calc(50% - 30px); }
.plv { position: relative; width: 48px; height: 48px; border-radius: 24px; display: grid; place-items: center;
  background: conic-gradient(var(--gold) var(--p, 0deg), var(--line) 0); }
.plv::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--paper); }
.plv b { position: relative; font-size: 18px; font-weight: 800; color: var(--ink); }

/* HUD */
.hud { gap: 8px; }
.hud-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.level-pill { font-size: 18px; height: 40px; white-space: nowrap; }
.level-pill .tier { white-space: nowrap; }
.board-chips { position: absolute; top: 0; inset-inline-start: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; z-index: 3; pointer-events: none; }
.hud-extra { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hud-chip { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border-radius: 20px; background: var(--paper);
  box-shadow: 0 2px 0 var(--line); font-weight: 800; font-size: 18px; }
.hud-chip svg { width: 20px; height: 20px; color: var(--teal); }
.hud-chip.warn { color: var(--hard); animation: beat 1s infinite; } .hud-chip.warn svg { color: var(--hard); }
.hud-chip.ice { color: #2F7FB5; background: #E3F3FC; } .hud-chip.ice svg { color: #2F7FB5; }
.hud-chip.gear svg { animation: none; }
.hud-chip.gear.soon { background: #FFF1D6; } .hud-chip.gear.soon svg { animation: turn 1s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes beat { 50% { transform: scale(1.08); } }
.board-wrap.frost::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 24px;
  box-shadow: inset 0 0 0 4px rgba(150,210,245,.8), inset 0 0 48px rgba(150,210,245,.55); }
.float-text { position: absolute; left: 50%; top: 32%; transform: translate(-50%, 0); font-style: normal; font-weight: 800; font-size: 28px; color: var(--teal);
  text-shadow: 0 2px 0 #fff; pointer-events: none; animation: floatup 1.1s ease-out forwards; z-index: 4; }
@keyframes floatup { from { opacity: 0; transform: translate(-50%, 16px) scale(.8); } 20% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -48px) scale(1.1); } }
.banner.aim { background: var(--teal); top: auto; bottom: 0; transform: translate(-50%, 0) scale(.9); font-size: 15px; padding: 8px 16px; min-height: 0; }
.banner.aim svg { width: 20px; height: 20px; }
.banner.aim.on { transform: translate(-50%, 0) scale(1); opacity: 1; }

/* power bar */
.boosters { display: flex; gap: 8px; justify-content: center; }
.boosters .boost { flex: 1; max-width: 88px; height: 72px; font-size: 12px; }
.boost svg { width: 26px; height: 26px; }
.p-magnet svg { color: #D9443B; } .p-shuffle svg { color: #C98A16; } .p-reveal svg { color: var(--super); }
.p-freeze svg { color: #2F7FB5; } .p-hammer svg { color: #6B4A2B; } .p-hint svg { color: #C98A16; }
.boost.aiming { background: var(--teal); color: #fff; } .boost.aiming svg { color: #fff; }
.boost.active { background: #E3F3FC; }
.badge svg { width: 14px; height: 14px; color: #fff; }

/* result extras */
.stars { display: flex; justify-content: center; gap: 8px; margin: 0 0 8px; }
.stars i { color: var(--line); } .stars i svg { width: 44px; height: 44px; }
.stars i:nth-child(2) svg { width: 56px; height: 56px; transform: translateY(-8px); }
.stars i.on { color: var(--gold); animation: starin .5s cubic-bezier(.3,1.7,.5,1) both; animation-delay: var(--d); }
@keyframes starin { from { transform: scale(0) rotate(-90deg); opacity: 0; } }
.reward { display: flex; justify-content: center; gap: 8px; }
.streak-c { color: var(--accent); } .streak-c svg { color: var(--accent); width: 22px; height: 22px; }
.next-reward { display: flex; align-items: center; gap: 8px; width: min(100%, 320px); margin: 16px auto 0; padding: 8px 12px; border-radius: 16px; background: var(--bg); font-weight: 800; }
.next-reward .ico svg { width: 28px; height: 28px; color: #C98A16; }
.next-reward .bar { flex: 1; } .next-reward .num { font-size: 14px; color: var(--muted); min-width: 48px; text-align: end; }
.next-reward.ready { background: #FFF1D6; animation: beat 1.2s infinite; } .next-reward.ready .num { color: #C98A16; }
.next-btn { overflow: hidden; }
.next-btn .ring { position: absolute; inset-inline-end: 8px; width: 28px; height: 28px; transform: rotate(-90deg); }
.next-btn .ring circle { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 3; stroke-dasharray: 101; stroke-dashoffset: 101; }
.next-btn.auto .ring circle { animation: ring var(--auto, 5s) linear forwards; }
@keyframes ring { to { stroke-dashoffset: 0; } }
.next-btn:not(.auto) .ring { display: none; }
.big-score { font-size: 72px; font-weight: 800; line-height: 1; margin: 8px 0; color: var(--ink); }
.sub svg { width: 18px; height: 18px; vertical-align: -3px; }
.near { margin: 0 0 16px; font-weight: 800; font-size: 20px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 4px; }
.near svg { width: 20px; height: 20px; }
.event-path { display: flex; justify-content: center; gap: 8px; margin: 8px 0 16px; }
.event-path i { width: 24px; height: 24px; border-radius: 12px; background: var(--line); display: grid; place-items: center; }
.event-path i.on { background: #C98A16; } .event-path i svg { width: 14px; height: 14px; color: #fff; }

/* meta sheets */
.sheet.wide { width: min(100%, 640px); }
.sheet.tall { max-height: 86vh; overflow-y: auto; }
.sheet-head .ends { margin-inline-start: auto; margin-inline-end: 8px; font-size: 14px; font-weight: 700; color: var(--muted); }
.rw { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; font-size: 14px; }
.rw svg { width: 18px; height: 18px; }
.rws { display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: center; }
.rws.center { margin: 8px 0 16px; }
.cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 16px; }
.day { position: relative; padding: 8px 4px; border-radius: 16px; background: var(--bg); display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 72px; }
.day small { font-size: 12px; color: var(--muted); font-weight: 800; }
.day.big { grid-column: span 2; } .day.got { opacity: .55; } .day.now { background: #FFF1D6; box-shadow: inset 0 0 0 2px #E9B44C; }
.day .ok { position: absolute; top: 4px; inset-inline-end: 4px; width: 20px; height: 20px; border-radius: 10px; background: var(--teal); color: #fff; display: grid; place-items: center; }
.day .ok svg { width: 14px; height: 14px; }
.quest { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); text-align: start; }
.q-main { flex: 1; display: flex; flex-direction: column; gap: 8px; font-weight: 800; }
.q-num { font-weight: 800; color: var(--muted); font-size: 14px; }
.quest.claimed { opacity: .5; } .quest.bonus { border: 0; } .quest.bonus .ico svg { width: 32px; height: 32px; color: #C98A16; }
.quest.bonus .rws { flex: 1; justify-content: flex-start; }
.btn.sm { min-height: 40px; padding: 0 12px; font-size: 15px; border-radius: 14px; }
.btn.sm svg { width: 18px; height: 18px; }
.pass-top { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; font-weight: 800; }
.pass-top .bar { flex: 1; }
.tier-badge { min-width: 40px; height: 40px; border-radius: 12px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 18px; }
.tier-badge svg { width: 22px; height: 22px; color: var(--gold); }
.pass-rows { display: flex; gap: 8px; }
.pass-labels { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding-bottom: 8px; font-size: 12px; font-weight: 800; color: var(--muted); }
.pass-labels span { height: 72px; display: grid; place-items: center; } .pass-labels .pl svg { color: #C98A16; }
.pass-scroll { flex: 1; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.tier-col { display: flex; flex-direction: column; align-items: center; gap: 8px; scroll-snap-align: start; }
.tier-col small { font-weight: 800; color: var(--muted); font-size: 12px; }
.tier-col.reached small { color: var(--ink); } .tier-col.cur small { color: var(--accent); }
.tier-cell { position: relative; width: 72px; height: 72px; border-radius: 16px; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.tier-cell.prem { background: #FFF6E3; } .tier-cell.ready { box-shadow: inset 0 0 0 2px var(--accent); animation: beat 1.4s infinite; }
.tier-cell.got { opacity: .5; } .tier-cell.got > svg { width: 24px; height: 24px; color: var(--teal); }
.tier-cell .rw { font-size: 12px; } .tier-cell .rw svg { width: 16px; height: 16px; }
.tier-cell .lk { position: absolute; top: 4px; inset-inline-end: 4px; } .tier-cell .lk svg { width: 14px; height: 14px; color: var(--muted); }
.album { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.alb { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 800; color: var(--muted); text-align: center; }
.alb.lock canvas { filter: grayscale(1) opacity(.35); } .alb.cur span { color: var(--accent); } .alb.done span { color: var(--ink); }
.chest-art { display: grid; place-items: center; margin: 8px 0; } .chest-art svg { width: 88px; height: 88px; color: #C98A16; }
.chest-art.ready svg { animation: wobble 1s infinite; }
@keyframes wobble { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.lv-badge { width: 88px; height: 88px; margin: 0 auto 8px; border-radius: 44px; display: grid; place-items: center; font-size: 40px; font-weight: 800; color: #fff;
  background: radial-gradient(circle at 35% 30%, #FFE29A, var(--gold) 55%, #B9842A); box-shadow: 0 6px 0 #9C6B1A; animation: pop .5s cubic-bezier(.3,1.6,.5,1); }
#game[data-tier="rush"] { background: radial-gradient(circle at 50% 30%, rgba(217,68,59,.06), transparent 60%); }
#game[data-tier="zen"] { background: radial-gradient(circle at 50% 30%, rgba(60,125,217,.08), transparent 60%); }
#game[data-tier="expert"] { background: radial-gradient(circle at 50% 30%, rgba(122,63,209,.07), transparent 60%); }

/* small phones */
@media (max-height: 720px) { .mosaic-card { width: min(100%, 220px, 30vh); } .logo .word { font-size: 26px; } .mode-tile { min-height: 72px; } }

/* desktop: the board uses the screen; home goes two columns */
@media (min-width: 900px) {
  #app { max-width: 1280px; }
  #game { padding: 24px 32px 32px; }
  .hud, .boosters { width: min(100%, 720px); margin-inline: auto; }
  .boosters .boost { max-width: 104px; height: 80px; font-size: 13px; }
  .home-main { flex-direction: row; align-items: center; justify-content: center; gap: 64px; }
  .home-left { width: 420px; } .home-right { width: 420px; }
  .mosaic-card { width: 100%; }
  #home .topbar { position: static; }
  .live-card { width: 168px; left: 0; margin-left: 0; top: 8px; }
  [dir=rtl] .live-card { left: auto; right: 0; }
  .board-chips { top: auto; bottom: 8px; }
}