/* AA polish: effects, phone ergonomics, onboarding, sheets, reveal, combat. Loaded after app.css. */
@keyframes shakeA { 0%,100% { transform: none; } 20% { transform: translate(-6px, 3px) rotate(-.6deg); } 40% { transform: translate(6px, -3px) rotate(.6deg); } 60% { transform: translate(-4px, -2px); } 80% { transform: translate(4px, 2px); } }
.shake { animation: shakeA .35s linear !important; }
@keyframes hitA { 0% { filter: brightness(2.2) saturate(0); } 100% { filter: none; } }
.hitflash { animation: hitA .35s ease-out; }
@keyframes floatUp { 0% { transform: translate(-50%, 0) scale(.5); opacity: 0; } 15% { transform: translate(-50%, -10px) scale(1.3); opacity: 1; } 100% { transform: translate(-50%, -80px) scale(1); opacity: 0; } }
.floattext { position: fixed; z-index: 100; pointer-events: none; font-family: var(--serif); font-weight: 800; font-size: 1.9rem; color: var(--paper); -webkit-text-stroke: 2px var(--sumi); paint-order: stroke fill; text-shadow: 0 3px 0 var(--sumi); animation: floatUp 1s ease-out forwards; }
.floattext.crit { color: var(--gold-2); font-size: 2.6rem; } .floattext.heal { color: #9fe29a; } .floattext.you { color: #ff8e76; }
@keyframes spinIn { from { transform: rotate(-12deg) scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ray { to { transform: rotate(360deg); } }

/* compact top: ribbon shrinks on scroll and in landscape */
.rankbar { transition: padding .2s, gap .2s; }
.rankbar.compact { padding: .25rem .8rem; gap: .4rem; }
.rankbar.compact .rankchip { padding: .1rem .55rem .1rem .15rem; min-height: 36px; }
.rankbar.compact .rankchip .num { font-size: 1rem; min-width: 2.5rem; padding: .15rem .3rem; }
.rankbar.compact .rankchip .lbl { font-size: .68rem; } .rankbar.compact .rankchip .lbl b { font-size: .72rem; }
.rankbar.compact .rankchip .lbl .sc { display: none; }
@media (max-height: 520px) {
  .topbar { padding-top: .25rem; padding-bottom: .25rem; } .rankbar { padding: .2rem .8rem; }
  .rankbar .rankchip .num { font-size: 1rem; } .rankbar .rankchip .lbl .sc { display: none; }
  .nav { --bnav: 48px; } .nav a { height: 48px; flex-direction: row; gap: .35rem; width: auto; padding: 0 .9rem; } .nav a .k { font-size: 1.1rem; }
  main { padding-bottom: 70px; } .banner { min-height: 100px; }
}

/* 44px tap targets on touch screens */
.btn, .tabs button, input, select, .btn.small, .nav a, .userbtn, .rankchip { min-height: 44px; }
.userbtn { width: 44px; height: 44px; }
.slot { min-width: 56px; }
.authbox { margin: 1.2rem 16px; }
@media (min-width: 480px) { .authbox { margin: 1.5rem auto; } }
main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
@media (min-width: 761px) and (min-height: 521px) { .userbtn { width: auto; } .btn, .tabs button { min-height: 40px; } .btn.small { min-height: 34px; } .nav a { min-height: 46px; } .rankchip { min-height: 0; } main { padding-left: 1.4rem; padding-right: 1.4rem; } }

/* More sheet */
.sheet-back { position: fixed; inset: 0; z-index: 70; background: rgba(8,12,24,.65); animation: rise .15s both; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; background: var(--paper) var(--grain); border-top: 4px solid var(--sumi); border-radius: 18px 18px 0 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); box-shadow: 0 -8px 0 rgba(217,67,43,.8); animation: sheetUp .28s cubic-bezier(.2,.9,.3,1) both; max-height: 80vh; overflow: auto; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.sheet .tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 76px; padding: .5rem; border: 3px solid var(--sumi); border-radius: var(--hand); background: var(--paper-2); color: var(--ink); text-decoration: none; font-weight: 800; box-shadow: 3px 3px 0 var(--sumi); }
.sheet .tile .k { font-family: var(--serif); font-size: 1.7rem; line-height: 1; color: var(--red); }
.sheet .tile:active { transform: translate(2px, 2px); box-shadow: none; }
.sheet .row { margin-top: .8rem; }

/* onboarding + install */
.onb-back { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 30%, rgba(47,93,138,.95), rgba(8,12,24,.97)); animation: rise .3s both; overflow: auto; }
.onb { width: min(460px, 100%); text-align: center; color: var(--paper); }
.onb .sun { width: 120px; height: 120px; margin: 0 auto 1rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9a73, var(--red) 60%); box-shadow: 0 0 60px rgba(217,67,43,.8); animation: breathe 5s ease-in-out infinite; display: grid; place-items: center; font-family: var(--serif); font-size: 3rem; font-weight: 800; }
.onb h2 { color: var(--gold-2); font-size: 1.7rem; text-shadow: 0 2px 0 var(--sumi); }
.onb p { font-size: 1.05rem; min-height: 4.2em; }
.onb .dots { display: flex; gap: 8px; justify-content: center; margin: 1rem 0; }
.onb .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(246,237,218,.35); } .onb .dots i.on { background: var(--gold); transform: scale(1.3); }
.onb .step { animation: pop .4s both; }
.installbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; padding: .6rem .8rem; border: 3px solid var(--gold); border-radius: var(--hand); background: rgba(10,15,30,.7); color: var(--paper); }
.installbar b { color: var(--gold-2); }

/* pull reveal */
.reveal-back { position: fixed; inset: 0; z-index: 88; display: grid; place-items: center; padding: 16px; background: rgba(6,9,20,.93); overflow: auto; animation: rise .25s both; }
.reveal { width: min(640px, 100%); text-align: center; color: var(--paper); }
.reveal .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .8rem; margin: 1rem 0; }
.rcard { position: relative; border: 3px solid var(--sumi); border-radius: var(--hand); background: var(--paper-2); color: var(--ink); padding: .4rem; opacity: 0; animation: spinIn .5s cubic-bezier(.2,.9,.3,1.2) forwards; box-shadow: 3px 3px 0 var(--sumi); }
.rcard .art { width: 100%; height: auto; aspect-ratio: 1; }
.rcard b { display: block; font-size: .78rem; margin-top: .25rem; }
.rcard.epic { border-color: var(--violet); box-shadow: 0 0 18px var(--violet), 3px 3px 0 var(--sumi); }
.rcard.legendary { border-color: var(--gold); box-shadow: 0 0 28px var(--gold), 3px 3px 0 var(--sumi); background: linear-gradient(#fff3c4, var(--gold-2)); }
.rcard .tag { position: absolute; top: -8px; right: -6px; background: var(--red); color: var(--paper); font-size: .6rem; font-weight: 800; padding: 0 .4rem; border-radius: 6px; text-transform: uppercase; }

/* combat arena */
.arena { display: grid; gap: .8rem; }
.fighters { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: center; }
.fighter { text-align: center; transition: transform .15s; } .fighter .art { margin: 0 auto .3rem; width: 84px; height: 84px; }
.fighter.hit { transform: translateX(var(--kb, 10px)); }
.vs { font-family: var(--serif); font-weight: 800; font-size: 1.6rem; color: var(--red); text-shadow: 2px 2px 0 var(--gold); }
.timing { position: relative; height: 28px; border: 3px solid var(--sumi); border-radius: 14px; background: linear-gradient(90deg, #8a2a18, var(--gold) 38%, #6fe36f 50%, var(--gold) 62%, #8a2a18); overflow: hidden; }
.timing .mk { position: absolute; top: -2px; bottom: -2px; width: 8px; margin-left: -4px; background: var(--paper); border: 2px solid var(--sumi); border-radius: 4px; }
.abil { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; }
.abil .btn { min-height: 64px; font-size: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.abil .btn small { font-weight: 600; opacity: .9; font-size: .72rem; }
@media (orientation: landscape) and (max-height: 520px) {
  .arena { grid-template-columns: 1.2fr 1fr; align-items: start; } .arena .log { display: none; }
  .abil { grid-template-columns: repeat(2, 1fr); } .abil .btn { min-height: 72px; }
  .fighter .art { width: 60px; height: 60px; }
}

/* map: fills the phone viewport */
@media (max-width: 760px) { .mapwrap { height: calc(100vh - 330px); min-height: 320px; } .mapwrap .legend { display: none; } }
/* landscape phones: give the screen to the game */
@media (max-height: 520px) {
  .mapwrap { height: calc(100vh - 150px); min-height: 200px; } .mapwrap .legend { display: none; }
  main > h1 { display: none; }
  .demo-flag { display: none; }
  .brand .seal { width: 26px; height: 26px; }
  .topbar { border-bottom-width: 2px; box-shadow: 0 2px 0 var(--red); }
  .rankchip { min-height: 36px; } .rankchip .num { padding: .1rem .3rem; }
  .wallet .w { padding: .05rem .5rem .05rem .15rem; }
  .userbtn { width: 36px; height: 36px; min-height: 36px; }
  .banner { display: none; }
  main { padding-top: .5rem; }
}