/* Premium pass: game-icons, legendary entrance, device fixes. */

/* ---------- devices ---------- */
html, body { height: 100%; height: 100dvh; overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
#game, #stage, .plaque, .btn, .hand-card, .card, .power, .hs-medal, .bld-tile, .bcard2 { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
input, textarea { -webkit-user-select: text; user-select: text; }
#menu, #heroes, #builder, #stats, #rules, #picker { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.hs-bar { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

/* ---------- game-icons (masks so they can be coloured like metal) ---------- */
.gi { display: inline-block; width: 1em; height: 1em; background: linear-gradient(160deg, #fff4c8 0%, #f0c050 45%, #a8740e 100%);
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .8)); }

/* ---------- legendary entrance ---------- */
.epic-dim { position: absolute; inset: 0; z-index: 85; background: radial-gradient(ellipse at 50% 50%, rgba(40, 20, 0, .55), rgba(0, 0, 0, .88)); pointer-events: none; }
.epic-card { position: absolute; z-index: 88; border-radius: 22px; background-size: cover; background-position: center; pointer-events: none; transform-style: preserve-3d;
  box-shadow: 0 0 0 4px #2a1604, 0 0 0 9px #e8c46a, 0 0 0 11px #fff6c8, 0 0 0 14px #8a5a10, 0 0 80px 20px rgba(255, 200, 80, .75), 0 40px 80px #000; }
.epic-card::before, .epic-card::after { content: ''; position: absolute; width: 74px; height: 74px; top: -40px; left: 50%; transform: translateX(-50%) rotate(45deg); border-radius: 12px;
  background: radial-gradient(circle at 35% 30%, #fff, #ff4a3a 40%, #6a0b05); box-shadow: 0 0 0 5px #e8c46a, 0 0 0 8px #2a1604, 0 0 30px rgba(255, 80, 40, .9); }
.epic-card::after { top: auto; bottom: -40px; background: radial-gradient(circle at 35% 30%, #fff, #4ab0ff 40%, #0b2a6a); box-shadow: 0 0 0 5px #e8c46a, 0 0 0 8px #2a1604, 0 0 30px rgba(60, 160, 255, .9); }
.epic-shine { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 62%); background-size: 260% 100%; animation: epicshine 1.4s ease-in-out .3s 2; }
@keyframes epicshine { from { background-position: 150% 0; } to { background-position: -60% 0; } }
.epic-title { position: absolute; left: 50%; z-index: 89; pointer-events: none; font-family: var(--font-title); font-size: 52px; letter-spacing: 3px; white-space: nowrap; }
.epic-title span { background: linear-gradient(100deg, #f3cf6e, #fff 40%, #f0c050 70%, #ffe08a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #3a1d02) drop-shadow(0 0 30px rgba(255, 190, 70, 1)); }
.epic-name { position: absolute; left: 50%; z-index: 89; pointer-events: none; white-space: nowrap; font-family: var(--font-card); font-size: 34px; color: #fff4d6; text-shadow: 0 3px 4px #000, 0 0 20px rgba(255, 190, 70, .9); }
#stage.port .epic-title { font-size: 72px; }
#stage.port .epic-name { font-size: 46px; }