/* ===================== WORLD MIXTAPE — Manu Chao × Gen Z ===================== */
:root{
  --ink:#0a0916;          /* deep night */
  --ink2:#141029;
  --paper:#fff7e6;
  --pink:#ff2e92;
  --lime:#c6ff00;
  --cyan:#00e5ff;
  --tang:#ff6d00;
  --violet:#b388ff;
  --yellow:#ffe600;
  --red:#ff1744;
  --land:#221c3f;         /* non-featured countries */
  --land-edge:#3a2f63;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--ink);color:var(--paper);overflow:hidden;
  font-family:"Space Mono",monospace;cursor:crosshair}
body{
  background:
    radial-gradient(circle at 18% 12%, rgba(255,46,146,.20), transparent 42%),
    radial-gradient(circle at 82% 18%, rgba(0,229,255,.18), transparent 44%),
    radial-gradient(circle at 50% 110%, rgba(198,255,0,.16), transparent 48%),
    var(--ink);
}

/* grain + halftone */
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;mix-blend-mode:overlay;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px, transparent .6px);
  background-size:3px 3px}
.noise-svg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:59;opacity:.05}

/* ticker */
.ticker{position:fixed;top:0;left:0;right:0;height:26px;background:var(--lime);color:#0a0916;
  z-index:40;overflow:hidden;border-bottom:3px solid #0a0916;
  font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center}
.ticker__track{white-space:nowrap;will-change:transform;animation:slide 80s linear infinite;padding-left:100%}
@keyframes slide{to{transform:translateX(-50%)}}

/* brand lockup */
.brand{position:fixed;top:42px;left:18px;z-index:35;pointer-events:none}

/* top-right controls: favorites + shuffle */
.topctrls{position:fixed;top:36px;right:14px;z-index:48;display:flex;align-items:flex-start;gap:10px}
.faves-btn{cursor:pointer;display:flex;align-items:center;gap:6px;font-family:"Anton",sans-serif;font-size:15px;
  color:var(--paper);background:#0a0916;border:3px solid var(--pink);border-radius:30px;padding:8px 13px;
  box-shadow:4px 4px 0 var(--yellow);transform:rotate(-2deg);transition:transform .12s}
.faves-btn:hover{transform:rotate(-2deg) scale(1.05)}
.faves-btn__h{color:var(--pink);font-size:18px;line-height:1}
.faves-btn i{font-style:normal;font-family:"Space Mono",monospace;font-size:12px;font-weight:700;
  background:var(--pink);color:#0a0916;border-radius:8px;padding:0 6px;min-width:14px;text-align:center}

/* shuffle the world — global control + filters */
.shuffle-wrap{display:inline-flex;align-items:stretch;background:var(--yellow);border:3px solid #0a0916;
  border-radius:30px;box-shadow:4px 4px 0 var(--pink);transform:rotate(2deg);transition:transform .12s,box-shadow .12s}
.shuffle-wrap:hover{transform:rotate(2deg) scale(1.04)}
.shuffle{cursor:pointer;display:flex;align-items:center;gap:8px;background:none;border:none;
  font-family:"Anton",sans-serif;font-size:15px;line-height:.92;letter-spacing:.03em;text-transform:uppercase;
  text-align:left;color:#0a0916;padding:8px 10px 8px 14px}
.shuffle__ic{font-size:20px;display:inline-block}
.shuffle__tx b{color:var(--pink);-webkit-text-stroke:.4px #0a0916}
.shuffle.spinning .shuffle__ic{animation:shuf .6s ease-in-out}
@keyframes shuf{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.4)}100%{transform:rotate(360deg) scale(1)}}
.shuffle-filt{cursor:pointer;background:none;border:none;border-left:2.5px solid #0a0916;color:#0a0916;
  font-size:13px;font-weight:700;padding:0 11px;display:flex;align-items:center;border-radius:0 26px 26px 0}
.shuffle-filt.open{background:var(--pink)}
.shuffle-filt.on{background:var(--lime)}
.shuffle-pop{position:fixed;top:90px;right:14px;z-index:49;width:238px;max-width:78vw;
  background:#0a0916;border:3px solid var(--yellow);border-radius:16px;box-shadow:5px 5px 0 var(--pink);
  padding:14px;display:flex;flex-direction:column;gap:9px;transform:rotate(-1deg)}
.shuffle-pop[hidden]{display:none}
.shuffle-pop h4{font-family:"Permanent Marker",cursive;color:var(--yellow);font-size:16px;margin:0 0 2px;transform:rotate(-2deg)}
.shuffle-pop label{display:block;font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 3px 2px}
.shuffle-pop select{width:100%;font-family:"Space Mono",monospace;font-size:13px;padding:7px 8px;border-radius:9px;
  border:2px solid var(--yellow);background:#16123a;color:#fff;cursor:pointer}
.shuffle-go{font-family:"Anton",sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:15px;cursor:pointer;
  color:#0a0916;background:var(--lime);border:3px solid #0a0916;border-radius:22px;padding:9px;box-shadow:3px 3px 0 var(--pink);margin-top:3px}
.shuffle-go:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--pink)}
.shuffle-reset{background:none;border:none;color:var(--paper);opacity:.55;font-family:"Space Mono",monospace;
  font-size:11px;cursor:pointer;text-decoration:underline;align-self:center;padding:0}
.shuffle-empty{color:var(--pink);font-family:"Space Mono",monospace;font-size:11px;text-align:center}
.shuffle-empty[hidden]{display:none}

/* favorites — hearts on rows, player, and the favorites header */
.track__fav{flex:0 0 auto;background:none;border:none;cursor:pointer;font-size:18px;line-height:1;
  color:#3a3460;padding:4px 6px;transition:transform .12s,color .15s}
.track__fav:hover{transform:scale(1.22);color:var(--pink)}
.track__fav.on{color:var(--pink)}
.player__full{flex:0 0 auto;cursor:pointer;background:none;border:none;padding:2px;display:flex;align-items:center;
  color:#6b6486;transition:transform .12s,color .15s}
.player__full.on{color:#1DB954}
.player__full:hover{transform:scale(1.12)}
.player__full svg{width:25px;height:25px;display:block}
.player__fav{flex:0 0 auto;background:none;border:none;cursor:pointer;font-size:21px;line-height:1;
  color:#4a4470;padding:0 4px;transition:transform .12s,color .15s}
.player__fav:hover{transform:scale(1.15);color:var(--pink)}
.player__fav.on{color:var(--pink)}
.jhead__flag--ico{font-size:34px;color:var(--pink);line-height:1}
/* favorites playlist: shuffle / shuffled-exit toggle */
.fav-ctrls{display:flex;gap:6px;padding:2px 2px 12px;margin:2px 0 4px}
.fav-mode{flex:0 0 auto;font-family:"Space Mono",monospace;font-weight:700;font-size:12px;cursor:pointer;
  padding:7px 14px;border-radius:14px;border:2px solid var(--pink);background:transparent;color:var(--pink);
  text-transform:uppercase;letter-spacing:.03em;transition:transform .12s}
.fav-mode:hover{transform:translateY(-1px)}
.fav-mode.on{background:var(--pink);color:#0a0916;transform:rotate(-2deg) scale(1.04);box-shadow:3px 3px 0 #0a0916}
.fav-mode span{margin-left:5px;opacity:.7}
.brand__tape{display:flex;align-items:center;gap:10px}
.brand__logo{width:104px;height:104px;object-fit:contain;transform:rotate(-6deg);
  filter:drop-shadow(3px 3px 0 var(--pink));flex:0 0 auto}
@media (max-width:680px){ .brand__logo{width:62px;height:62px} }
.brand__title{font-family:"Anton",sans-serif;font-weight:400;line-height:.82;margin:0;
  font-size:clamp(34px,7vw,68px);letter-spacing:.01em;color:var(--paper);
  text-shadow:4px 4px 0 var(--pink), 8px 8px 0 rgba(0,0,0,.35);transform:rotate(-3deg)}
.brand__title span{color:var(--yellow);-webkit-text-stroke:2px #0a0916}
.brand__sub{margin:12px 0 0;font-size:14px;max-width:300px;color:var(--paper);
  display:inline-block;font-weight:700;text-shadow:1px 1px 0 #0a0916}
.brand__sub b{color:var(--pink)}

/* map */
.map-wrap{position:fixed;inset:26px 0 0 0;display:block}
#map{width:100%;height:100%;display:block;touch-action:none}
.country{stroke:var(--land-edge);stroke-width:.5px;fill:var(--land);vector-effect:non-scaling-stroke;transition:filter .15s, fill .15s}
.country.feat{stroke:#0a0916;stroke-width:.9px;cursor:pointer;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.6))}
.country.feat:hover{filter:brightness(1.25) drop-shadow(0 0 12px currentColor)}
.country.dim{opacity:.9}
.country.active{stroke:var(--paper);stroke-width:1.6px;filter:brightness(1.35) drop-shadow(0 0 16px currentColor)}

.map-hint{position:fixed;bottom:152px;left:50%;transform:translateX(-50%) rotate(-1deg);z-index:30;
  background:var(--tang);color:#0a0916;font-weight:700;font-size:12px;text-transform:uppercase;
  padding:5px 12px;letter-spacing:.05em;box-shadow:3px 3px 0 #0a0916;pointer-events:none}

/* tooltip */
.tip{position:fixed;z-index:55;pointer-events:none;opacity:0;transform:translate(-50%,-130%) rotate(-3deg);
  font-family:"Permanent Marker",cursive;font-size:17px;padding:3px 10px;background:var(--yellow);
  color:#0a0916;border:2px solid #0a0916;box-shadow:3px 3px 0 #0a0916;transition:opacity .1s;white-space:nowrap}
.tip.feat{background:var(--pink);color:#fff}

/* panel / cassette J-card */
.scrim{position:fixed;inset:0;background:rgba(5,4,12,.55);z-index:44;opacity:0;visibility:hidden;
  transition:opacity .25s;backdrop-filter:blur(2px)}
.scrim.show{opacity:1;visibility:visible}
.panel{position:fixed;top:26px;right:0;bottom:0;width:min(460px,92vw);z-index:46;
  background:var(--ink2);border-left:5px solid var(--lime);
  transform:translateX(105%) ;transition:transform .35s cubic-bezier(.2,.9,.25,1);
  display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(0,0,0,.5)}
.panel.show{transform:translateX(0)}
.panel__close{position:sticky;top:0;align-self:flex-start;margin:12px;z-index:3;
  font-family:"Space Mono";font-weight:700;font-size:12px;background:var(--red);color:#fff;border:2px solid #0a0916;
  padding:7px 12px;cursor:pointer;box-shadow:3px 3px 0 #0a0916;text-transform:uppercase}
.panel__close:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #0a0916}
.panel__inner{overflow-y:auto;padding:0 16px 110px;flex:1;-webkit-overflow-scrolling:touch}

.jhead{position:relative;margin:18px 0 12px}
.jhead__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.jhead__flag{font-size:40px;line-height:1}
/* flat flags */
.flag{height:.8em;width:auto;vertical-align:-.08em;border-radius:2px;display:inline-block;
  box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.jhead__flag .flag{height:30px;border-radius:4px;box-shadow:0 0 0 1.5px #0a0916}
.jhead__name{font-family:"Anton";font-size:clamp(30px,8vw,52px);line-height:.98;margin:0;
  color:#0a0916;background:var(--accent,var(--pink));display:inline-block;padding:6px 12px 8px;
  transform:rotate(-2deg);box-shadow:5px 5px 0 #0a0916;text-transform:uppercase}
.jhead__meta{font-size:12px;color:var(--paper);opacity:.8;margin-top:12px;text-transform:uppercase;letter-spacing:.08em}

/* era / decade selector — cassette tabs */
.eras{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 14px;margin:2px 0 4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.eras::-webkit-scrollbar{display:none}
.era{flex:0 0 auto;font-family:"Space Mono",monospace;font-weight:700;font-size:12px;cursor:pointer;
  background:#1b1540;color:var(--paper);border:2px solid #0a0916;padding:6px 12px;
  text-transform:uppercase;letter-spacing:.04em;box-shadow:2px 2px 0 #0a0916;transition:transform .1s,background .1s}
.era:hover{transform:translateY(-1px)}
.era:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #0a0916}
.era--now{background:var(--lime);color:#0a0916}
.era--empty{opacity:.38}
.era.active{background:var(--accent,var(--pink));color:#0a0916;transform:rotate(-2deg) scale(1.06);
  box-shadow:3px 3px 0 #0a0916;opacity:1}
.era--now.active{background:var(--lime);color:#0a0916}
/* in-country shuffle: a distinct chip + dimmed decades so nothing else looks selected */
.eras.shuffling .era:not(.era--shuf){opacity:.38;filter:saturate(.55)}
.era--shuf{background:var(--accent,var(--pink));color:#0a0916;border:2px solid #0a0916;
  transform:rotate(-2deg) scale(1.06);box-shadow:3px 3px 0 #0a0916;text-transform:uppercase}
.era--shuf span{margin-left:5px;opacity:.7}

/* genre filter — dig the whole catalog by genre */
.genres{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 2px 12px;margin:-2px 0 6px}
.genres::-webkit-scrollbar{display:none}
.genres__lbl{flex:0 0 auto;font-family:"Permanent Marker",cursive;font-size:13px;color:var(--yellow);margin-right:4px;transform:rotate(-2deg)}
.genre{flex:0 0 auto;font-family:"Space Mono",monospace;font-weight:700;font-size:11px;cursor:pointer;text-transform:uppercase;
  background:transparent;color:var(--paper);border:2px solid var(--accent,var(--pink));padding:3px 8px;border-radius:14px;
  display:inline-flex;align-items:center;gap:5px;letter-spacing:.03em;transition:transform .1s,background .1s}
.genre i{font-style:normal;font-size:10px;background:var(--accent,var(--pink));color:#0a0916;padding:0 5px;border-radius:8px;font-weight:700}
.genre:hover{transform:translateY(-1px)}
.genre.active{background:var(--accent,var(--pink));color:#0a0916}
.genre.active i{background:#0a0916;color:var(--paper)}

/* track rows */
.track{display:grid;grid-template-columns:44px 46px 1fr auto 34px;gap:10px;align-items:center;
  padding:8px 6px;border-bottom:1px dashed #3a2f63;cursor:pointer;position:relative;
  animation:pop .35s backwards}
.track:hover{background:rgba(255,255,255,.05)}
.track.playing{background:var(--accent,var(--pink));color:#0a0916;border-radius:6px;border-bottom-color:transparent}
.track.playing .track__art{box-shadow:0 0 0 2px #0a0916}
.track__rank{font-family:"Anton";font-size:17px;color:var(--accent,var(--pink));line-height:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.track.playing .track__rank{color:#0a0916}
.track__art{width:46px;height:46px;border-radius:4px;object-fit:cover;background:#000;border:2px solid #0a0916}
.track__txt{min-width:0}
.track__title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track__artist{font-size:12px;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track__play{font-size:15px;border:none;background:transparent;color:inherit;cursor:pointer}
.track__nf{display:inline-block;font-size:9px;background:var(--cyan);color:#0a0916;padding:0 4px;margin-left:6px;border-radius:3px;vertical-align:middle;font-weight:700}
.track__yr{display:inline-block;font-size:11px;background:var(--accent,var(--pink));color:#0a0916;padding:2px 5px;border-radius:3px;font-weight:700;letter-spacing:.02em}
.track.playing .track__yr{background:#0a0916;color:var(--paper)}
/* slide-in only — never animate opacity, so rows are visible even if animation is paused */
@keyframes pop{from{transform:translateY(10px)}to{transform:none}}

.empty{font-family:"Permanent Marker";font-size:22px;color:var(--yellow);text-align:center;
  margin-top:40px;transform:rotate(-2deg)}
.empty small{display:block;font-family:"Space Mono";font-size:12px;color:var(--paper);opacity:.7;margin-top:10px}

/* player bar */
.player{position:fixed;left:0;right:0;bottom:0;z-index:50;height:78px;display:flex;align-items:center;gap:14px;
  padding:0 14px;background:#0a0916;border-top:4px solid var(--pink);
  transform:translateY(110%);transition:transform .3s}
.player.show{transform:translateY(0)}
.player__art{width:60px;height:60px;flex:0 0 auto;border-radius:6px;object-fit:cover;
  border:2px solid #0a0916;box-shadow:3px 3px 0 var(--accent,var(--pink));background:#1b1540}
.player.playing .player__art{animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-2px) rotate(1.5deg)}}
.player__meta{flex:1;min-width:0}
.player__title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__artist{font-size:11px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* gentle marquee — only applied (.mq) when the line overflows */
.player__title.mq,.player__artist.mq,.track__title.mq,.track__artist.mq{text-overflow:clip}
.mq-track{display:inline-flex;animation:wmq var(--mq-dur,14s) linear infinite;will-change:transform}
.mq-seg{display:inline-block;padding-right:2.6em;white-space:nowrap}
@keyframes wmq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}
.player__bar{height:5px;background:#2a2350;margin-top:6px;border-radius:3px;position:relative;cursor:pointer;touch-action:none}
.player__bar::before{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}  /* bigger hit area */
.player__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lime),var(--cyan));border-radius:3px;transition:width .2s linear;position:relative}
.player__bar i::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 2px #0a0916;transform:translateY(-50%) scale(0);transition:transform .12s}
.player__bar:hover i::after,.player__bar.scrub i::after{transform:translateY(-50%) scale(1)}
.player__bar.scrub i{transition:none}
.player__bar:hover{height:7px;margin-top:5px}
.player__ctrls{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.player__ctrls button{background:transparent;border:none;color:var(--paper);font-size:18px;cursor:pointer;padding:6px}
.player__ctrls .is-big{background:var(--lime);color:#0a0916;width:44px;height:44px;border-radius:50%;
  font-size:18px;border:2px solid #0a0916;box-shadow:3px 3px 0 var(--pink)}
.player__ctrls .is-big:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--pink)}

/* mobile */
@media (max-width:680px){
  .brand{top:32px;left:11px}
  .brand__title{font-size:30px}
  .brand__sub{font-size:10px;max-width:150px;margin-top:8px}
  .topctrls{top:30px;right:9px;gap:6px}
  .faves-btn{font-size:11px;padding:5px 8px;gap:4px}
  .faves-btn__h{font-size:13px}
  .faves-btn i{font-size:11px;padding:0 5px}
  .shuffle{font-size:9px;padding:5px 6px 5px 8px;gap:5px}
  .shuffle__ic{font-size:13px}
  .shuffle__tx b{display:inline-block;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
  .shuffle-filt{padding:0 7px;font-size:11px}
  .shuffle-pop{top:70px;right:9px}
  .panel{top:26px;width:100vw;border-left:none;border-top:5px solid var(--lime)}
  .map-hint{bottom:144px;font-size:11px}
  .player{height:72px;gap:7px;padding:0 7px}
  .player__art{width:40px;height:40px}
  #p-prev,#p-next{display:none}
  .player__full svg{width:22px;height:22px}
  .player__fav{font-size:18px;padding:0 2px}
  .player__ctrls{gap:2px}
  .player__ctrls button{padding:4px;font-size:17px}
  .player__ctrls .is-big{width:36px;height:36px}
}
@media (max-width:680px) and (orientation:portrait){
  /* panel as bottom sheet feel */
  .panel{top:auto;height:82vh;border-top:6px solid var(--lime);border-radius:18px 18px 0 0}
}


/* country list view (alternate to the map) */
.view-toggle{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);z-index:42;cursor:pointer;
  font-family:"Permanent Marker",cursive;font-size:16px;color:#0a0916;background:var(--lime);
  border:3px solid #0a0916;border-radius:24px;padding:8px 18px;box-shadow:4px 4px 0 var(--pink);transition:transform .12s}
.view-toggle:hover{transform:translateX(-50%) scale(1.05)}
.view-toggle:active{transform:translateX(-50%) translateY(2px)}
.clist{display:none;position:absolute;inset:0;overflow-y:auto;padding:24px 16px 160px}
body.list-view .clist{display:block}
body.list-view #map,body.list-view #map-hint,body.list-view .brand{display:none}
.clist__sec{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.clist__item{display:flex;align-items:center;gap:12px;background:none;border:none;cursor:pointer;padding:0;text-align:left;width:max-content;max-width:100%}
.clist__item .flag{height:26px;width:auto;border-radius:3px;box-shadow:0 0 0 1.5px #0a0916;flex:0 0 auto}
.clist__name{font-family:"Anton",sans-serif;font-size:33px;text-transform:uppercase;color:#0a0916;
  background:var(--accent,var(--pink));padding:3px 12px 5px;border-radius:2px;transform:rotate(-1deg);
  box-shadow:3px 3px 0 #0a0916;letter-spacing:.01em;line-height:.95}
.clist__item:hover .clist__name{transform:rotate(-1deg) scale(1.03)}
.clist__soonhdr{font-family:"Permanent Marker",cursive;color:var(--yellow);font-size:15px;margin:26px 0 12px;transform:rotate(-1deg)}
.clist__soon{display:flex;flex-wrap:wrap;gap:7px 16px}
.clist__soon-item{font-family:"Anton",sans-serif;font-size:18px;text-transform:uppercase;color:#4a4470;letter-spacing:.02em}
@media (max-width:680px){
  .clist__name{font-size:30px}
  .clist__soon-item{font-size:15px}
  .view-toggle{bottom:88px;font-size:14px;padding:7px 15px}
}


/* album art lightbox */
.player__art{cursor:zoom-in}
.art-modal{position:fixed;inset:0;z-index:65;display:flex;align-items:center;justify-content:center;
  background:rgba(5,4,12,.9);backdrop-filter:blur(4px);padding:24px}
.art-modal[hidden]{display:none}
.art-modal__img{width:min(86vw,86vh,560px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px;
  border:3px solid #0a0916;box-shadow:8px 8px 0 var(--pink);background:#000}
.art-modal__x{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:var(--lime);color:#0a0916;border:3px solid #0a0916;font-size:20px;font-weight:700;
  box-shadow:3px 3px 0 var(--pink);transition:transform .12s}
.art-modal__x:hover{transform:scale(1.08)}
.art-modal__x:active{transform:translateY(2px)}

.clist__head{margin-bottom:22px}
@media (max-width:680px){
  .view-toggle{display:none}
  .clist__sec{flex-direction:column;flex-wrap:nowrap}
}