/* A kártya: a lemezjátszó-kinézetű elem, ami a kezdőlapi bemutatón és a
   játékban is megjelenik. Egyetlen közös hely, két blokk: nagy képernyő (alap)
   és mobil (@media lent) - itt kell módosítani, ha a kinézete változik. */

.kartya{position:relative;
  height:min(84vh,340px);aspect-ratio:1/1.3;max-width:84vw;
  border-radius:16px;padding:7% 7% 0;
  background:linear-gradient(158deg,#2b3346,#141824 62%);
  border:1px solid #4a536b;
  box-shadow:0 40px 90px -24px #000, 0 0 70px -20px rgba(255,209,102,.28),
             inset 0 1px 0 #ffffff1f;
  display:flex;flex-direction:column;align-items:center;
  touch-action:none;user-select:none;transition:box-shadow .2s,transform .2s}
.kartya.huzhato{cursor:grab;-webkit-user-drag:none;-webkit-touch-callout:none}
.kartya.huzhato:hover{transform:translateY(-3px)}
.kartya.indithato{cursor:pointer;-webkit-touch-callout:none}
.kartya.indithato:hover{transform:translateY(-3px)}
.kartya .pgomb{touch-action:manipulation}
.kartya.fog{position:fixed;z-index:80;cursor:grabbing;pointer-events:none;
  transform:rotate(-3deg) scale(.94);box-shadow:0 34px 70px -18px #000;
  transition:opacity .16s,transform .16s,box-shadow .16s}
.kartya.fog.atlatszo{opacity:.2;transform:rotate(-3deg) scale(.8);box-shadow:none}

.korong{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center}
.lemez{position:relative;width:88%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#2a3040 0 17%,#0a0c11 17.5% 100%);
  box-shadow:0 10px 28px -8px #000, inset 0 0 0 1px #ffffff10;
  display:grid;place-items:center}
.barazdak{position:absolute;inset:6%;border-radius:50%;
  background:repeating-radial-gradient(circle,#ffffff0a 0 1px,transparent 1px 4px);
  mask:radial-gradient(circle,transparent 0 26%,#000 27% 100%);
  -webkit-mask:radial-gradient(circle,transparent 0 26%,#000 27% 100%)}
.kartya.porog .lemez{animation:forog 1.8s linear infinite}
@keyframes forog{to{transform:rotate(360deg)}}

.kartya .pgomb{position:relative;z-index:2;width:44%;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;border:0;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#20160a;
  box-shadow:0 10px 26px -8px rgba(255,209,102,.75);transition:.18s}
.kartya .pgomb svg{width:42%;height:42%;margin-left:6%}
.kartya .pgomb:hover:not(:disabled){transform:scale(1.05)}
.kartya .pgomb:disabled{background:none;border:2px solid var(--dim2);color:var(--dim2);
  box-shadow:none;opacity:.5;cursor:not-allowed}
.kartya.porog .pgomb{background:radial-gradient(circle,#e9edf5 0 34%,var(--acc) 35% 100%);
  box-shadow:none;color:transparent;animation:forog 1.8s linear infinite reverse}

.kar{position:absolute;top:2%;right:-2%;width:12%;height:64%;transform-origin:50% 8%;
  transform:rotate(-12deg);transition:transform .8s cubic-bezier(.45,1.3,.4,1);z-index:3}
.kar::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:180%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#5b6377,#2a3040);box-shadow:0 3px 8px -2px #000}
.kar i{position:absolute;top:6%;left:50%;transform:translateX(-50%);
  width:22%;height:100%;background:linear-gradient(180deg,#8b93a7,#5b6377);border-radius:99px}
.kar i::after{content:'';position:absolute;bottom:-6%;left:-90%;width:280%;height:9%;
  background:#8b93a7;border-radius:2px}
.kartya.porog .kar{transform:rotate(23deg)}

.gombsor{display:flex;align-items:center;gap:7%;width:82%;margin-top:6%}
.pot{width:11%;aspect-ratio:1;border-radius:50%;flex:none;
  background:conic-gradient(from 210deg,#8b93a7 0 24%,#39415480 24% 100%);
  box-shadow:inset 0 0 0 2px #12151d, 0 2px 6px -2px #000}
.pot:nth-child(2){background:conic-gradient(from 150deg,#8b93a7 0 18%,#39415480 18% 100%)}
.pot:nth-child(3){background:conic-gradient(from 260deg,#8b93a7 0 30%,#39415480 30% 100%)}
.csuszka{flex:1;height:5px;border-radius:99px;background:#39415480;position:relative}
.csuszka i{position:absolute;left:58%;top:50%;transform:translate(-50%,-50%);
  width:16%;height:14px;border-radius:3px;background:linear-gradient(180deg,#8b93a7,#39415a)}

.kartya .cimke{position:absolute;bottom:5%;left:0;right:0;text-align:center;
  font-size:11.5px;color:var(--dim2);letter-spacing:.04em}
.kartya .ido{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
/* alapból üres a kör (dashoffset 100), és NINCS rajta átmenet: az értéket a
   kliens képkockánként írja, egy transition itt a friss elem 0-ás alapértékéről
   indulva egy teli kört villantana fel */
.kartya .ido path{fill:none;stroke:var(--acc);stroke-linecap:round;opacity:0;
  stroke-dasharray:100;stroke-dashoffset:100;
  filter:drop-shadow(0 0 7px rgba(255,209,102,.75));transition:opacity .25s}
.kartya .ido.fut path{opacity:1}

.kartya.rablo{border-color:var(--steal);background:linear-gradient(158deg,#3a2f4d,#1d1828)}
.kartya.rablo .cimke{color:var(--steal)}

.kartya.tiltott.atlatszo{opacity:.82}
.kartya.tiltott{border-color:#e5484d}
.kartya.tiltott::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:20;
  background:rgba(229,72,77,.5);pointer-events:none}
.kartya.tiltott::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:50%;aspect-ratio:1;border-radius:50%;z-index:21;pointer-events:none;
  background:linear-gradient(#fff 0 0) center/64% 16% no-repeat, #e5484d;
  box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 0 4px rgba(255,255,255,.15)}

.kartya.felfedve{cursor:default;justify-content:flex-start;padding:8% 8% 0;
  animation:fordul .5s ease-out}
.kartya.felfedve .fborito{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;
  background:#0a0c11;box-shadow:0 10px 26px -10px #000}
.kartya.felfedve .fev{margin-top:7%;font-size:clamp(22px,3.4vh,30px);font-weight:800;
  color:var(--acc);line-height:1;font-variant-numeric:tabular-nums}
.kartya.felfedve .fev.jo{color:var(--ok)}
.kartya.felfedve .fcim{margin-top:3px;font-size:12px;font-weight:600;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.kartya.felfedve .felo{font-size:11px;color:var(--dim);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@keyframes fordul{from{transform:rotateY(80deg);opacity:0}to{transform:none;opacity:1}}

.kartya.lerakva{cursor:default;opacity:.75;transform:none;pointer-events:none}

@media(max-width:600px){
  .kartya{height:min(70vh,280px);border-radius:12px}
  .kartya .cimke{font-size:9px;letter-spacing:.08em}
  .csuszka{height:4px}
  .csuszka i{height:11px}
}