/* ═══════════════════════════════════════════════
   games/janggi.css — 하자하자 가족 장기
   ═══════════════════════════════════════════════ */

#janggi-play.pg-hidden{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

.jg-shell{
  width:100%;max-width:430px;
  background:linear-gradient(180deg,#FFF9E9 0%,#EEF7FF 100%);
  border:2px solid #D6E4EA;border-radius:24px;padding:12px;
  box-shadow:0 8px 24px rgba(38,78,110,.14);
}
.jg-topbar{
  width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:6px;margin-bottom:10px;
}
.jg-player{
  display:flex;align-items:center;gap:6px;min-width:0;
  background:#fff;border:1.5px solid #D8EAF5;border-radius:14px;
  padding:6px 8px;box-shadow:0 3px 0 rgba(26,46,68,.05);
}
.jg-player:last-child{justify-content:flex-end;text-align:right;}
.jg-avatar{
  width:31px;height:31px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:18px;flex:0 0 auto;
}
.jg-avatar.han{background:#DBEBFF;}
.jg-avatar.cho{background:#FFE2DF;}
.jg-player-text{min-width:0;}
.jg-player-name{font-size:11px;font-weight:900;color:var(--navy);white-space:nowrap;}
.jg-player-sub{font-size:9px;color:#71859A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jg-turn-badge{
  flex:0 0 auto;background:#FFF3D6;border:2px solid #FFD66A;border-radius:999px;
  padding:6px 9px;font-size:11px;font-weight:900;color:#795700;white-space:nowrap;
  animation:jgTurnPulse 1.7s ease-in-out infinite;
}
@keyframes jgTurnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

.jg-scoreline{
  display:flex;justify-content:center;align-items:center;gap:8px;
  min-height:26px;margin:-2px 0 7px;color:#64788C;font-size:10px;font-weight:800;
}
.jg-scoreline .cho{color:#D94A42;}.jg-scoreline .han{color:#2871BC;}

.jg-board{
  position:relative;width:100%;max-width:400px;aspect-ratio:8/9;
  margin:0 auto;border:5px solid #A9652C;border-radius:16px;
  background:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.45),transparent 28%),
    linear-gradient(135deg,#F4D99D 0%,#E9BF72 100%);
  box-shadow:0 7px 0 #80471F,0 12px 24px rgba(69,43,24,.22);
  touch-action:manipulation;overflow:hidden;user-select:none;-webkit-user-select:none;
}
.jg-grid{
  position:absolute;inset:6%;
  background-image:
    linear-gradient(rgba(92,52,25,.82) 1.5px,transparent 1.5px),
    linear-gradient(90deg,rgba(92,52,25,.82) 1.5px,transparent 1.5px);
  background-size:12.5% 11.111111%;
  background-position:0 0;
  border-right:1.5px solid rgba(92,52,25,.82);
  border-bottom:1.5px solid rgba(92,52,25,.82);
}
.jg-palace-line{
  position:absolute;height:1.5px;background:rgba(92,52,25,.82);
  width:35.355%;transform-origin:0 50%;pointer-events:none;z-index:1;
}
.jg-palace-line.tl{left:37.5%;top:0;transform:rotate(45deg);}
.jg-palace-line.tr{left:62.5%;top:0;transform:rotate(135deg);}
.jg-palace-line.bl{left:37.5%;top:77.7778%;transform:rotate(45deg);}
.jg-palace-line.br{left:62.5%;top:77.7778%;transform:rotate(135deg);}
.jg-river-label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:1;color:rgba(112,63,27,.24);font-family:serif;font-size:clamp(13px,4.5vw,19px);
  font-weight:900;letter-spacing:.55em;white-space:nowrap;pointer-events:none;
}
.jg-cell{
  position:absolute;z-index:4;transform:translate(-50%,-50%);
  width:12.5%;aspect-ratio:1;border:0;padding:0;margin:0;background:transparent;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;font-family:serif;
}
.jg-cell::before{
  content:'';position:absolute;width:25%;height:25%;border-radius:50%;
  background:rgba(52,196,124,.88);border:2px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 3px rgba(52,196,124,.20),0 2px 6px rgba(25,120,76,.25);
  opacity:0;transform:scale(.4);transition:.14s ease;
}
.jg-cell.jg-move::before{opacity:1;transform:scale(1);}
.jg-cell.jg-capture::before{
  width:72%;height:72%;background:rgba(255,255,255,.24);opacity:1;transform:scale(1);
  border:4px solid #FF4F5E;box-shadow:0 0 0 4px rgba(255,79,94,.18);
}
.jg-cell.jg-selected::after,
.jg-cell.jg-hint-from::after{
  content:'';position:absolute;inset:3%;border:3px solid #FFB000;border-radius:50%;
  box-shadow:0 0 0 4px rgba(255,176,0,.22);animation:jgSelect .85s ease-in-out infinite alternate;
}
.jg-cell.jg-hint-to::after{border-color:#34C47C;box-shadow:0 0 0 4px rgba(52,196,124,.22);}
@keyframes jgSelect{from{transform:scale(.9)}to{transform:scale(1.04)}}
.jg-cell.jg-last{background:radial-gradient(circle,rgba(255,215,64,.48),transparent 66%);}
.jg-cell.jg-check{background:radial-gradient(circle,rgba(255,70,70,.55),transparent 68%);animation:jgCheck .7s alternate infinite;}
@keyframes jgCheck{to{filter:saturate(1.5) brightness(1.08)}}

.jg-piece{
  position:relative;z-index:5;width:84%;height:84%;
  display:flex;align-items:center;justify-content:center;
  clip-path:polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%);
  background:linear-gradient(145deg,#FFF9E8,#E7C98D);
  border-radius:22%;font-size:clamp(17px,6.1vw,28px);font-weight:900;line-height:1;
  filter:drop-shadow(0 3px 1px rgba(65,36,18,.34));
  box-shadow:inset 0 0 0 2px rgba(118,73,34,.55),inset 0 0 7px rgba(255,255,255,.7);
  transition:transform .34s cubic-bezier(.2,.85,.25,1.18),filter .18s;
}
.jg-face{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease,opacity .12s ease;
}
.jg-front{transform:scaleX(1);opacity:1;}
.jg-back{
  z-index:2;transform:scaleX(0);opacity:0;
  font-family:'Noto Sans KR','Malgun Gothic',sans-serif;
  font-size:.72em;font-weight:1000;letter-spacing:-.08em;
  background:linear-gradient(145deg,#FFF7DC,#DFC07D);
  text-shadow:0 1px 0 #fff;
}
.jg-piece.han{color:#2169AF;text-shadow:0 1px 0 #fff;}
.jg-piece.cho{color:#D5433B;text-shadow:0 1px 0 #fff;}
.jg-piece.king{width:96%;height:96%;font-size:clamp(19px,6.8vw,31px);background:linear-gradient(145deg,#FFF8DC,#DBB66E);}
.jg-selected .jg-piece{
  transform:translateY(-7%) scale(1.08);
  filter:drop-shadow(0 7px 2px rgba(65,36,18,.27));
  animation:jgPieceFlip .34s ease both;
}
.jg-selected .jg-front{transform:scaleX(0);opacity:0;}
.jg-selected .jg-back{transform:scaleX(1);opacity:1;transition-delay:.13s;}
@keyframes jgPieceFlip{
  0%{transform:translateY(-2%) scale(1) scaleX(1)}
  48%{transform:translateY(-7%) scale(1.08) scaleX(.08)}
  100%{transform:translateY(-7%) scale(1.08) scaleX(1)}
}
.jg-piece.arrive{animation:jgArrive .25s cubic-bezier(.2,.9,.3,1.25);}
@keyframes jgArrive{0%{transform:scale(.45);opacity:.25}75%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

.jg-piece.jg-moving-rook{animation:jgRookMove .42s cubic-bezier(.16,.8,.22,1.05) both;}
.jg-piece.jg-moving-cannon{z-index:15;animation:jgCannonMove .52s cubic-bezier(.2,.72,.22,1) both;}
.jg-piece.jg-moving-horse{z-index:14;animation:jgHorseMove .46s cubic-bezier(.2,.78,.2,1) both;}
.jg-piece.jg-moving-elephant{z-index:13;animation:jgElephantMove .48s cubic-bezier(.2,.75,.24,1) both;}
.jg-piece.jg-moving-soldier{animation:jgSoldierMove .32s cubic-bezier(.16,.85,.22,1.16) both;}
.jg-piece.jg-moving-royal{animation:jgRoyalMove .4s cubic-bezier(.2,.75,.22,1) both;}
.jg-piece.jg-moving-normal{animation:jgNormalMove .4s cubic-bezier(.2,.8,.22,1) both;}
@keyframes jgRookMove{
  0%{transform:translate(var(--jg-dx),var(--jg-dy)) scale(.98)}
  72%{transform:translate(0,0) scale(1.06)}
  100%{transform:translate(0,0) scale(1)}
}
@keyframes jgCannonMove{
  0%{transform:translate(var(--jg-dx),var(--jg-dy)) scale(.96) rotate(-7deg);filter:drop-shadow(0 3px 1px rgba(65,36,18,.3))}
  46%{transform:translate(var(--jg-mx),var(--jg-my)) scale(1.2) rotate(8deg);filter:drop-shadow(0 18px 7px rgba(65,36,18,.22))}
  82%{transform:translate(0,3px) scale(1.1) rotate(-2deg)}
  100%{transform:translate(0,0) scale(1) rotate(0)}
}
@keyframes jgHorseMove{
  0%{transform:translate(var(--jg-dx),var(--jg-dy)) scale(.96) rotate(-5deg)}
  52%{transform:translate(var(--jg-mx),var(--jg-my)) scale(1.09) rotate(6deg)}
  100%{transform:translate(0,0) scale(1) rotate(0)}
}
@keyframes jgElephantMove{
  0%{transform:translate(var(--jg-dx),var(--jg-dy)) scale(.96) rotate(-4deg)}
  48%{transform:translate(var(--jg-mx),var(--jg-my)) scale(1.05) rotate(4deg)}
  100%{transform:translate(0,0) scale(1)}
}
@keyframes jgSoldierMove{
  0%{transform:translate(var(--jg-dx),var(--jg-dy)) scale(.92)}
  76%{transform:translate(0,0) scale(1.12)}
  100%{transform:translate(0,0) scale(1)}
}
@keyframes jgRoyalMove{
  0%{transform:translate(var(--jg-dx),var(--jg-dy)) scale(.98)}
  55%{transform:translate(var(--jg-mx),var(--jg-my)) scale(1.04)}
  100%{transform:translate(0,0) scale(1)}
}
@keyframes jgNormalMove{
  0%{transform:translate(var(--jg-dx),var(--jg-dy))}
  100%{transform:translate(0,0)}
}
.jg-land-fx{
  position:absolute;z-index:3;transform:translate(-50%,-50%);width:11%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;border:3px solid rgba(128,72,28,.48);
  animation:jgLand .56s ease-out forwards;
}
.jg-land-fx.cannon{border-width:5px;border-color:rgba(255,104,55,.72);box-shadow:0 0 18px rgba(255,113,50,.52);}
@keyframes jgLand{0%{opacity:.95;transform:translate(-50%,-50%) scale(.28)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.75)}}
.jg-screen-flash::after{
  content:'퐁!';position:absolute;z-index:18;left:50%;top:-32%;transform:translateX(-50%);
  color:#FF6B35;font:1000 clamp(9px,3vw,14px)/1 'Noto Sans KR',sans-serif;
  text-shadow:0 2px 0 #fff;animation:jgScreenPop .62s ease-out forwards;pointer-events:none;
}
@keyframes jgScreenPop{0%{opacity:0;transform:translate(-50%,10px) scale(.5)}35%{opacity:1;transform:translate(-50%,-5px) scale(1.2)}100%{opacity:0;transform:translate(-50%,-22px) scale(.9)}}

.jg-legend{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;width:100%;margin-top:12px;
}
.jg-legend-item{
  display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #D8EAF5;
  border-radius:11px;padding:7px 8px;font-size:9px;font-weight:800;color:#60758A;
}
.jg-legend-dot{width:12px;height:12px;border-radius:50%;background:#34C47C;border:2px solid #fff;box-shadow:0 0 0 2px rgba(52,196,124,.3);}
.jg-legend-ring{width:15px;height:15px;border-radius:50%;border:3px solid #FF4F5E;}
.jg-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px;}
.jg-control-btn{
  border:0;border-radius:11px;padding:9px 4px;font-family:inherit;font-size:10px;
  font-weight:900;cursor:pointer;color:#fff;box-shadow:0 3px 0 rgba(26,46,68,.13);
}
.jg-control-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(26,46,68,.13);}
.jg-control-btn.hint{background:#34C47C;}.jg-control-btn.undo{background:#5B8DEF;}
.jg-control-btn.resign{background:#EF6A6A;}.jg-control-btn.home{background:#6D7E91;}
.jg-control-btn:disabled{opacity:.42;cursor:default;transform:none;}

.jg-options{
  width:100%;max-width:360px;background:#fff;border:1px solid var(--border);
  border-radius:14px;padding:12px;text-align:left;
}
.jg-option-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;font-weight:800;color:var(--navy);}
.jg-select{border:1.5px solid var(--border);border-radius:10px;padding:8px 10px;background:#fff;color:var(--navy);font-family:inherit;font-weight:800;}
.jg-rules{width:100%;max-width:360px;background:#FFF9E9;border:1px solid #EBCB8C;border-radius:14px;text-align:left;overflow:hidden;}
.jg-rules summary{padding:11px 13px;cursor:pointer;font-size:12px;font-weight:900;color:#74501F;}
.jg-rules-body{padding:0 13px 12px;font-size:11px;line-height:1.75;color:#6B5A43;}
.jg-rules-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-top:7px;}
.jg-rule-chip{background:#fff;border-radius:8px;padding:5px 7px;border:1px solid #ECD9B5;}

@media(max-width:380px){
  .jg-shell{padding:9px;border-radius:18px}.jg-player{padding:5px}.jg-avatar{display:none}
  .jg-turn-badge{padding:5px 7px;font-size:10px}.jg-piece{font-size:clamp(16px,6vw,23px)}
  .jg-controls{gap:4px}.jg-control-btn{font-size:9px;padding:8px 2px}
}