/* Dragon skins. A skin is a colour grade of the dragon art: an SVG gradient map from index.html
   (#skin-gm-<style>: luminance mapped onto the skin palette, so Ember is ember on a red dragon and on a
   blue one alike) plus a glow. The gold mastery outline (.has-mastery, or .skin-mastery alone) stacks
   over any skin. Three parts so a place can slot its own pieces in between:
   --skin-grade (the recolour), --skin-rim (the mastery outline), --skin-glow (the skin's glow).
   The places that give a dragon its own ground shadow keep the skin and add the shadow after it.
   The showcase and the viewer put the dragon on the skin's aura, assets/skins/fx-<style>-{256,512}.webp
   (Codex image_gen, PNG sources next to them). The share image draws the same (tower_scene.py). */
:root { --skin-grade:brightness(1); --skin-rim:brightness(1); --skin-glow:brightness(1); }
.skin-ember { --skin-grade:url(#skin-gm-ember); --skin-glow:drop-shadow(0 0 6px #ff8a3dcc) drop-shadow(0 0 1.5px #ffd08a); }
.skin-frost { --skin-grade:url(#skin-gm-frost); --skin-glow:drop-shadow(0 0 6px #8fe9ffcc) drop-shadow(0 0 1.5px #e6fbff); }
.skin-void { --skin-grade:url(#skin-gm-void); --skin-glow:drop-shadow(0 0 6px #b37bffcc) drop-shadow(0 0 1.5px #e0c8ff); }
.skin-gold { --skin-grade:url(#skin-gm-gold); --skin-glow:drop-shadow(0 0 6px #ffd27acc) drop-shadow(0 0 1.5px #fff3c4); }
.skin-crystal { --skin-grade:url(#skin-gm-crystal); --skin-glow:drop-shadow(0 0 6px #89e8dccc) drop-shadow(0 0 1.5px #f0fff9); }
.skin-pumpkin { --skin-grade:url(#skin-gm-pumpkin); --skin-glow:drop-shadow(0 0 7px #ff8a1fcc) drop-shadow(0 0 1.5px #c79bff); }
.skin-aura { --skin-grade:brightness(1.06); --skin-glow:drop-shadow(0 0 7px var(--c-aqua)) drop-shadow(0 0 1.5px #e6fffb); }
.skin-mastery,.has-mastery { --skin-rim:drop-shadow(0 0 .6px var(--mastery-glow)) drop-shadow(0 0 1.2px var(--mastery-gold)); }
.skin-mastery { --skin-glow:drop-shadow(0 0 7px #efba6155); }
img:is(.skin-ember,.skin-frost,.skin-void,.skin-gold,.skin-crystal,.skin-pumpkin,.skin-aura,.skin-mastery,.has-mastery) { filter:var(--skin-grade) var(--skin-rim) var(--skin-glow); }
:is(.combat-fighters img:not(.is-out),.roster-portrait img,.dragon-sheet__stage img,.lb-dragon__stage img,.tower-slot img,body.game-mode .tower-stack .tower-slot img,.dragon-tile__art img,.pp-dragon__art img,.siege-hero-party img,.sg-hero__party img,.slot-current img):is(.skin-ember,.skin-frost,.skin-void,.skin-gold,.skin-crystal,.skin-pumpkin,.skin-aura,.skin-mastery,.has-mastery) { filter:var(--skin-grade) var(--skin-rim) var(--skin-glow) drop-shadow(0 7px 5px #031626c0); }
.combat-fighters img.is-out:is(.skin-ember,.skin-frost,.skin-void,.skin-gold,.skin-crystal,.skin-pumpkin,.skin-aura,.skin-mastery,.has-mastery) { filter:grayscale(1) brightness(.6) drop-shadow(0 8px 6px #031626dc); }

/* The skin's own colour for its card, tile and viewer. */
.skin-offer--ember { --glow:#ff8a3d; }
.skin-offer--frost { --glow:#8fe9ff; }
.skin-offer--void { --glow:#b37bff; }
.skin-offer--gold { --glow:#ffd27a; }
.skin-offer--crystal { --glow:#6fe3d0; }
.skin-offer--pumpkin { --glow:#ff9a3d; }
.skin-offer--aura { --glow:#5ff0e6; }
.skin-offer--mastery { --glow:#efba61; }

/* Stage: the aura behind, the dragon in front. */
.skin-stage { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1; isolation:isolate; }
.skin-stage__fx { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:contain; pointer-events:none; animation:skin-aura 6s ease-in-out infinite alternate; }
.skin-stage__dragon { position:relative; z-index:2; width:80%; height:80%; object-fit:contain; }
/* The ring is the skin's own colour, so the dragon would melt into it: a dark disc between them and a
   dark contour on the dragon (before its glow) keep the silhouette readable. */
.skin-stage::before { content:""; position:absolute; inset:9%; z-index:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 54%,#041a40e6 0,#041a40b8 42%,#041a4000 70%); }
.skin-stage .skin-stage__dragon { filter:var(--skin-grade) drop-shadow(0 0 .8px #020f2b) drop-shadow(0 0 .8px #020f2b) drop-shadow(0 3px 4px #020f2bcc) var(--skin-rim) var(--skin-glow); }
.skin-stage.is-plain .skin-stage__fx { opacity:.35; filter:saturate(.4); }
.skin-stage--big { width:min(74vw,300px); border-radius:50%; background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--glow,#7fd8ff) 34%,transparent) 0,transparent 64%); }
.skin-stage--big .skin-stage__dragon { width:72%; height:72%; animation:skin-float 3.4s ease-in-out infinite alternate; }
@keyframes skin-aura { from { transform:scale(.96) rotate(-3deg); opacity:.82; } to { transform:scale(1.03) rotate(3deg); opacity:1; } }
@keyframes skin-float { from { transform:translateY(3%); } to { transform:translateY(-3%); } }
@media (prefers-reduced-motion:reduce) { .skin-stage__fx,.skin-stage--big .skin-stage__dragon { animation:none; } }

/* The three skin cards: the title on its own line and the hint under it, so a long title
   («Титулы мастерства») never squeezes against the hint. */
.season-screen .skins-card > .rw-group__head { display:grid; justify-items:start; gap:2px; min-height:0; }
.season-screen .skins-card > .rw-group__head small { white-space:normal; }

/* Season skins card: the stage is the button that opens the viewer. */
.skins-card .skin-offer__look { position:relative; display:block; width:88%; max-width:96px; margin:0; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.skins-card .skin-offer__name { font-size:clamp(10.5px,3.1vw,13px); letter-spacing:-.01em; }
.skins-card .skin-offer__look:active .skin-stage { transform:scale(.96); }
.skins-card .skin-offer__look:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.skins-card .skin-offer__zoom { position:absolute; z-index:2; right:0; bottom:2px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#fff; background:#06264fd9; box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--glow,#7fd8ff) 70%,#fff); }
.skins-card .skin-offer__zoom .icon { width:12px; height:12px; }

/* Mastery titles and owned skins: the same tiles, each opens the viewer. */
.skin-tile { --glow:#7fd8ff; position:relative; min-width:0; display:grid; grid-template-rows:auto auto 1fr; justify-items:center; align-content:start; gap:3px; margin:0; padding:6px 4px 8px;
  border:2px solid color-mix(in srgb,var(--glow) 55%,#ffffff22); border-radius:16px; color:#fff; text-align:center; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
  background:radial-gradient(90% 60% at 50% 30%,color-mix(in srgb,var(--glow) 36%,transparent) 0,transparent 70%),linear-gradient(170deg,#1a5aa0,#0c3770 70%);
  box-shadow:inset 0 2px #ffffff2e,0 3px 0 #082f5e,0 6px 10px #00163d40; transition:transform var(--dur-1,.12s) ease-out; }
.skin-tile:active { transform:translateY(2px); box-shadow:inset 0 2px #ffffff2e,0 1px 0 #082f5e; }
.skin-tile:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.skin-tile .skin-stage { width:88%; max-width:92px; }
.skin-tile strong { max-width:100%; color:#fff; font:normal clamp(10.5px,3.1vw,13px)/1.12 DraklyBlack,'Trebuchet MS',sans-serif; letter-spacing:-.01em; overflow-wrap:break-word; text-shadow:0 2px 0 #0a3d78; }
.skin-tile small { max-width:100%; color:#bfe6ff; font:clamp(10px,2.9vw,11px)/1.2 DraklyBold,'Trebuchet MS',sans-serif; overflow-wrap:break-word; }
.skin-tile.is-worn { border-color:#7fe3a6; }
.skin-tile.is-worn small { color:#9ff0bf; }
.skin-tile .skin-tile__star { position:absolute; z-index:2; top:6px; right:6px; }
.mastery-titles .skin-tile:not(.is-gold) { border-color:#c9d6e399; --glow:#c9d6e3; }

/* Viewer sheet. */
.skin-view { display:grid; justify-items:center; gap:4px; padding:2px 0 4px; text-align:center; }
.skin-view__name { margin:4px 0 0; color:#fff; font:normal 23px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px 0 #0a3d78; }
.skin-view__src { margin:0; color:color-mix(in srgb,var(--glow) 55%,#fff); font:13px/1.25 DraklyBold,'Trebuchet MS',sans-serif; }
.skin-view__worn { margin:0; color:#9ff0bf; font-size:12px; }
.skin-view__pick-head { justify-self:start; margin:10px 0 0; color:#bfe6ff; font:11px/1 DraklyBold,'Trebuchet MS',sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.skin-view__dragons { display:flex; gap:8px; width:100%; padding:2px 2px 6px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; overscroll-behavior-x:contain; }
.skin-view__dragons::-webkit-scrollbar { display:none; }
.skin-view__pick { position:relative; flex:0 0 58px; height:58px; margin:0; padding:3px; border:2px solid #ffffff26; border-radius:14px; background:#06264f99; cursor:pointer; scroll-snap-align:start; -webkit-tap-highlight-color:transparent; }
.skin-view__pick img { width:100%; height:100%; object-fit:contain; }
.skin-view__pick.is-on { border-color:var(--glow); box-shadow:0 0 0 2px color-mix(in srgb,var(--glow) 30%,transparent),0 0 12px color-mix(in srgb,var(--glow) 50%,transparent); }
.skin-view__pick:focus-visible { outline:2px solid #fff; outline-offset:1px; }
.skin-view__dot { position:absolute; top:3px; right:3px; width:9px; height:9px; border-radius:50%; background:#7fe3a6; box-shadow:0 0 0 2px #06264f; }
.skin-view__actions { display:grid; gap:8px; width:100%; margin-top:8px; }
.skin-view__actions .btn { margin:0; }
.skin-view__actions .btn-cta-buy { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px 6px; width:100%; min-height:48px; margin:0; padding:6px 12px; border:0; border-radius:999px;
  color:#ffe2b8; background:#06264fcc; box-shadow:inset 0 0 0 2px #ffd27a99; font:15px/1.15 DraklyBold,'Trebuchet MS',sans-serif; cursor:pointer; }
.skin-view__actions .btn-cta-buy .ui-icon { width:18px; height:18px; }
.skin-view__actions .btn-cta-buy small { color:#ffe2b8cc; font-size:12px; }
.skin-view__hint { margin:0; color:#d6f3ff; font-size:13px; line-height:1.35; }
.skin-view__note { margin:4px 0 0; color:#9cc7e6; font-size:12px; line-height:1.3; }

/* 320-359 px: three tiles still hold the longest one-word name («Пепельный», «Коллекционер»). */
@media (max-width:359px) {
  .season-screen .skins-card .skin-grid { gap:4px; }
  .skins-card .skin-offer,.skin-tile { padding-left:2px; padding-right:2px; }
  .skins-card .skin-offer__name,.skin-tile strong { font-size:10px; letter-spacing:-.02em; }
}

/* "Not enough coins" without a shop (canBuy off): the same pill as the top-up button, icon inline. */
.skins-card .skin-offer .short-note,.skin-view__actions .short-note { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px 4px; width:100%; min-height:38px; margin:0; padding:4px 6px; border-radius:999px;
  color:#ffe2b8; background:#06264fcc; box-shadow:inset 0 0 0 2px #ffd27a66; font:12px/1.15 DraklyBold,'Trebuchet MS',sans-serif; text-align:center; }
.skins-card .skin-offer .short-note .ui-icon,.skin-view__actions .short-note .ui-icon { width:16px; height:16px; flex:none; }
.skin-view__actions .short-note { min-height:48px; font-size:15px; }
.skin-view__worn.is-gold { color:#ffd98a; }