/*
 * Figurenstil-Grafik V1.5
 * Weiche, plastische Oberflaechen passend zu den gemalten Arman-&-Chani-Figuren.
 * Layout und Spiellogik bleiben unveraendert.
 */
:root{
  --paw-ink:#2f211b;
  --paw-brown:#8d542f;
  --paw-caramel:#d9954e;
  --paw-honey:#ffd66b;
  --paw-cream:#fff7df;
  --paw-paper:#fffaf0;
  --paw-sky:#59c7f5;
  --paw-blue:#1857a6;
  --paw-teal:#1f9b88;
  --paw-green:#5eac55;
  --paw-shadow:rgba(54,31,17,.34);
}

body{font-family:ui-rounded,"Arial Rounded MT Bold",Nunito,Arial,sans-serif;background:#17364f}

.screen:not(#menu):not(.v16GameScreen){
  background:
    radial-gradient(circle at 18% 10%,rgba(255,255,255,.5),transparent 25%),
    radial-gradient(circle at 82% 18%,rgba(255,218,135,.72),transparent 28%),
    linear-gradient(155deg,#65c9ef 0%,#a6e5ed 45%,#7bc86a 100%);
}
.screen:not(#menu):not(.v16GameScreen)::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;
  background:
    radial-gradient(ellipse at 12% 85%,#2d815a 0 7%,transparent 7.5%),
    radial-gradient(ellipse at 88% 88%,#3c9461 0 9%,transparent 9.5%),
    linear-gradient(170deg,transparent 62%,rgba(53,102,60,.28));
}

.card,.landmarkCard,.quizCard,.unescoAtlasCard,.guideCard{
  position:relative;
  border-color:rgba(255,255,255,.94)!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 14% 4%,rgba(255,255,255,.98),transparent 27%),
    linear-gradient(145deg,var(--paw-paper),#f4dfbd)!important;
  color:var(--paw-ink);
  box-shadow:
    0 3px 0 rgba(255,255,255,.74) inset,
    0 -5px 0 rgba(139,82,43,.14) inset,
    0 18px 0 rgba(62,39,24,.16),
    0 32px 70px rgba(37,26,18,.38)!important;
}
.card::after,.landmarkCard::after,.quizCard::after{
  content:"";position:absolute;inset:7px;border:1px solid rgba(143,91,51,.2);border-radius:22px;pointer-events:none;
}
h1,h2,h3{color:#402a20;letter-spacing:.015em}
h1{text-shadow:0 3px 0 #fff,0 6px 14px rgba(84,48,25,.2)}
p{line-height:1.42}

button,.country,.char{
  color:#3b281e;
  border-color:#fff!important;
  border-radius:999px!important;
  background:
    radial-gradient(circle at 28% 12%,rgba(255,255,255,.82),transparent 25%),
    linear-gradient(180deg,#ffe38a 0%,#f6bd45 66%,#d69527 100%)!important;
  box-shadow:
    0 2px 0 rgba(255,255,255,.78) inset,
    0 -3px 0 rgba(126,71,20,.18) inset,
    0 6px 0 #9b6427,
    0 12px 24px rgba(68,39,19,.28)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.65);
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;
}
button:hover:not(:disabled),.country:hover:not(:disabled),.char:hover:not(:disabled){filter:saturate(1.08) brightness(1.05);transform:translateY(-2px)}
button:active:not(:disabled),.country:active:not(:disabled),.char:active:not(:disabled),.ugcButton.pressed{
  transform:translateY(5px);box-shadow:0 2px 0 rgba(255,255,255,.65) inset,0 1px 0 #8d5620,0 5px 12px rgba(68,39,19,.24)!important
}
button:focus-visible{outline:5px solid #1f86dd;outline-offset:3px}
button:disabled,.country.locked{filter:grayscale(.4) saturate(.65);opacity:.62}

#menu .card{
  background:linear-gradient(145deg,rgba(20,54,81,.8),rgba(35,41,73,.88))!important;
  color:#fff;box-shadow:0 3px 0 rgba(255,255,255,.25) inset,0 25px 75px #07101ca8!important;
}
#menu h1,#menu h2,#menu h3{color:#fff}
#menu .v25Lang select{
  border:3px solid #fff;border-radius:999px;padding:9px 14px;background:rgba(255,250,233,.96);color:#34251e;font-weight:900;
  box-shadow:0 5px 0 rgba(33,71,109,.68),0 9px 19px #0004;
}

#worldmap{background:linear-gradient(rgba(18,75,122,.25),rgba(25,100,92,.4)),url('arman-chani-startbild.png') center/cover no-repeat!important}
#worldmap .mapCard{background:linear-gradient(145deg,rgba(255,250,235,.96),rgba(231,244,225,.96))!important}
.worldGrid{gap:15px}
#worldmap .country{
  position:relative;text-align:left;padding:16px 18px 14px 62px!important;min-height:76px;
  background:
    radial-gradient(circle at 15px 12px,rgba(255,255,255,.82),transparent 22px),
    linear-gradient(145deg,#fff8df,#e9d09e)!important;
  border-radius:24px!important;box-shadow:0 2px 0 #fff inset,0 7px 0 #9b713d,0 14px 24px #2437252e!important;
}
#worldmap .country::first-letter{font-size:29px}
#worldmap .country small{color:#77543a;font-family:Arial,sans-serif;line-height:1.25}
#worldmap .country .unescoBadge{text-align:center}

#hud{
  top:6px;padding:6px 10px;gap:7px;border:3px solid #fff!important;border-radius:999px;
  background:linear-gradient(180deg,rgba(33,104,168,.94),rgba(20,67,126,.94))!important;
  box-shadow:0 2px 0 rgba(255,255,255,.28) inset,0 7px 0 rgba(16,50,94,.6),0 13px 28px rgba(18,35,50,.32)!important;
  backdrop-filter:blur(9px) saturate(1.2);
}
#hud span{display:inline-flex;align-items:center;gap:2px}
#hud button{border-radius:999px!important;background:linear-gradient(#fff6c9,#ffd25e)!important;color:#164d8b;box-shadow:0 2px 0 #a66b24!important;text-shadow:none}
#settingsBtn{background:linear-gradient(#ffe88b,#f4b833)!important}
#settingsPanel{background:linear-gradient(145deg,rgba(255,250,236,.98),rgba(240,219,183,.98));border-color:#fff;border-radius:24px;box-shadow:0 10px 0 #7b5335,0 24px 50px #0005}

.ctrl,.ugcButton{
  border:5px solid rgba(255,255,255,.94)!important;
  background:radial-gradient(circle at 34% 24%,#fff,#e1eff1 70%,#abc9d1)!important;
  box-shadow:0 3px 0 #fff inset,0 7px 0 #275584,0 13px 25px #102f5055!important;
}
.ctrl.jump,.ugcJump{background:radial-gradient(circle at 34% 24%,#f1ffc9,#83d558 70%,#4eaa44)!important}
.ctrl.fire,.ugcFire{background:radial-gradient(circle at 34% 24%,#ffe1e8,#ef8ca3 70%,#cf5873)!important}
.ctrl.sit{background:radial-gradient(circle at 34% 24%,#eee7ff,#b9a1ea 70%,#846bb9)!important}

.landmarkCard{overflow:hidden}
.landmarkCard::before{
  content:"";display:block;position:absolute;left:0;right:0;top:0;height:8px;
  background:linear-gradient(90deg,#56b8ee,#f4d35e,#71b75d,#d6884b);
}
.landmarkCard .lmIcon{border-radius:22px;overflow:hidden;background:linear-gradient(#d7eff8,#f3dfb0);box-shadow:0 7px 18px #4e35252f inset,0 6px 12px #3e281c2b}
.landmarkCard h2{color:#743f25}

#memory{background:linear-gradient(rgba(21,75,103,.35),rgba(32,92,72,.58)),url('arman-chani-startbild.png') center/cover no-repeat!important}
.memoryCard{background:linear-gradient(145deg,rgba(255,250,237,.97),rgba(237,220,184,.97))!important}
.memoryTop span,.memoryFact{
  border:2px solid rgba(255,255,255,.9);background:linear-gradient(145deg,#fff9e7,#efd49b);box-shadow:0 3px 0 #bb8c4a,0 7px 15px #52331d1f;
}
.memoryTop span{padding:7px 13px;border-radius:999px}
.memoryFact{border-radius:18px;color:#3b2a12}
.memTile{
  border:4px solid #fff!important;border-radius:22px!important;
  background:
    radial-gradient(circle at 32% 22%,rgba(255,255,255,.42),transparent 24%),
    linear-gradient(145deg,#2f7fb0,#174b79 58%,#103450)!important;
  box-shadow:0 3px 0 #78b8d6 inset,0 7px 0 #0c3457,0 13px 22px #122a3f47!important;
}
.memTile::before{content:"🐾";position:absolute;font-size:clamp(17px,3vw,31px);opacity:.16;transform:rotate(-12deg)}
.memTile.open,.memTile.matched{
  background:linear-gradient(145deg,#fffdf4,#efdcb9)!important;color:#2f211b;box-shadow:0 3px 0 #fff inset,0 7px 0 #a87946,0 13px 22px #4b2f203d!important;
}
.memTile.open::before,.memTile.matched::before{display:none}
.memPic{border-radius:14px;overflow:hidden;background:linear-gradient(#dff4ff,#dcefc8);box-shadow:0 2px 8px #34241725 inset}
.memExplain{color:#513827}
.memKind{border-color:#fff!important;box-shadow:0 2px 0 rgba(95,59,26,.28)!important}

#quiz{background:linear-gradient(rgba(16,91,131,.25),rgba(72,132,77,.42)),url('arman-chani-startbild.png') center/cover no-repeat!important}
.quizAnswers button{background:linear-gradient(145deg,#fffdf5,#e9d8b8)!important;border-radius:20px!important;color:#38271f}
.quizAnswers button.correct{background:linear-gradient(#d9ffd4,#8bdc74)!important}
.quizAnswers button.wrong{background:linear-gradient(#ffe2dd,#f28c80)!important}
.phaseBadge{border-color:#fff;background:rgba(255,248,222,.92);box-shadow:0 4px 0 #9a7042,0 9px 18px #0003}

.unescoAtlasCard{background:linear-gradient(145deg,#fff9e8,#dff0e7)!important}
.unescoHeading,.unescoSite,.guideBox{border-color:#fff;background:linear-gradient(145deg,#fffdf7,#edf1df);box-shadow:0 3px 0 #a8b79d,0 7px 14px #33402e19}
.unescoTab.active{background:linear-gradient(#35aa94,#177968)!important;color:#fff}

.v16Header,.v16Status,.bossTop{
  border-color:#fff!important;border-radius:20px!important;background:linear-gradient(180deg,rgba(26,90,145,.94),rgba(18,52,98,.94))!important;
  box-shadow:0 3px 0 rgba(255,255,255,.3) inset,0 7px 0 rgba(9,37,73,.6),0 14px 25px #0005!important;
}
.v16Header h2,.v16Header p,.bossTop{color:#fff}
.v16Status{color:#fff!important}

#gameToast,#v21SaveToast{border-color:#fff!important;background:linear-gradient(180deg,rgba(42,114,167,.97),rgba(21,68,117,.97))!important;box-shadow:0 4px 0 #173e69,0 13px 28px #0005!important}

@media(max-width:700px){
  #hud{padding:4px 7px;gap:4px}
  .card{border-radius:23px!important}
  #worldmap .country{padding-left:50px!important}
  .memTile{border-radius:15px!important}
}

@media(prefers-reduced-motion:reduce){button,.country,.char{transition:none}}