/* The 'Play now' modal reuses the SAME PHP world-card component and showcase classes. */
#portalModal .modal--worlds {
  width:min(740px,100%);
  padding:25px;
  background:
    radial-gradient(ellipse at 52% -20%,#2e796444,transparent 57%),
    linear-gradient(155deg,#2d302d,#172a27 55%,#242624);
  border:2px solid #c0ac77;
  border-radius:16px;
  box-shadow:0 28px 75px #000c,inset 0 0 0 4px #102c22;
  overflow-x:hidden;
}
#portalModal .modal--worlds h2#modalTitle{
  font-size:clamp(24px,4vw,33px);
  font-weight:900;
  text-align:center;
  color:#f4d59b;
  margin:3px 36px 0;
  text-shadow:0 2px 9px #000a;
}
#portalModal .modal--worlds #modalLead {
  text-align:center;
  color:#c5ddc9;
  margin:2px auto 13px;
  font-size:12px;
}
#portalModal .modal--worlds .modal-close{
  top:10px;
  left:13px;
  border:1px solid #b2a47880;
  border-radius:50%;
  width:34px;
  height:34px;
  padding:0;
  line-height:29px;
  background:#142e27;
  color:#ecd39d;
  font-size:25px;
}
#portalModal .modal-worlds.world-showcase{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:13px;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  max-width:none;
}
#portalModal .modal-worlds.world-showcase::before,
#portalModal .modal-worlds.world-showcase::after{display:none}
#portalModal .modal-worlds.world-showcase .world-card{
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:0;
  padding:14px 18px 17px;
  border-radius:14px;
}
#portalModal .modal-worlds.world-showcase .world-card__topbar{margin-bottom:7px}
#portalModal .modal-worlds.world-showcase .world-card .world-top{padding-bottom:11px}
#portalModal .modal-worlds.world-showcase .world-card .world-emblem{
  width:60px;
  height:60px;
  flex-basis:60px;
  font-size:32px;
  border-radius:14px;
}
#portalModal .modal-worlds.world-showcase .world-card h3{font-size:30px}
#portalModal .modal-worlds.world-showcase .world-card .world-metrics{
  margin:12px 0;
  gap:10px;
}
#portalModal .modal-worlds.world-showcase .world-card .world-metric{
  min-height:76px;
  padding:10px 12px;
}
#portalModal .modal-worlds.world-showcase .world-card .world-metric strong.metric-count{font-size:27px}
#portalModal .modal-worlds.world-showcase .world-card .world-metric strong.metric-date{font-size:20px}
#portalModal .modal-worlds.world-showcase .world-card .action-btn{min-height:43px;padding:8px 13px}
@media(max-width:600px){
  #portalModal{padding:10px}
  #portalModal .modal--worlds{width:100%;max-height:calc(100dvh - 22px);padding:18px 12px}
  #portalModal .modal--worlds h2#modalTitle{font-size:27px}
  #portalModal .modal--worlds #modalLead{margin-bottom:11px;font-size:11px}
  #portalModal .modal-worlds.world-showcase{gap:10px}
  #portalModal .modal-worlds.world-showcase .world-card{padding:12px 11px 13px}
  #portalModal .modal-worlds.world-showcase .world-card .world-top{gap:10px;padding-bottom:10px}
  #portalModal .modal-worlds.world-showcase .world-card .world-emblem{height:53px;width:53px;flex-basis:53px;font-size:27px}
  #portalModal .modal-worlds.world-showcase .world-card h3{font-size:28px}
  #portalModal .modal-worlds.world-showcase .world-card .world-metrics{gap:7px;margin:11px 0}
  #portalModal .modal-worlds.world-showcase .world-card .world-metric{padding:9px 8px;min-height:70px}
  #portalModal .modal-worlds.world-showcase .world-card .world-metric small{font-size:10px}
  #portalModal .modal-worlds.world-showcase .world-card .world-metric strong.metric-date{font-size:16px}
  #portalModal .modal-worlds.world-showcase .world-card .world-metric strong.metric-count{font-size:24px}
  #portalModal .modal-worlds.world-showcase .world-card .action-btn{min-height:42px;padding:8px 9px;font-size:12px}
}
@media(max-width:350px){
 #portalModal{padding:6px}
 #portalModal .modal--worlds{padding:17px 9px}
 #portalModal .modal-worlds.world-showcase .world-card .world-metric strong.metric-date{font-size:14px}
}