*{margin:0;padding:0;box-sizing:border-box;}
body{background:#1a1a2e;color:#d0c8b0;font-family:'Hiragino Kaku Gothic Pro','Yu Gothic',sans-serif;font-size:12px;overflow-x:hidden;}
.screen{display:none;width:100vw;height:100vh;}
.screen.active{display:flex;}
#turnScreen{flex-direction:column;align-items:center;justify-content:center;background:#111;}
#turnScreen h1{font-size:32px;color:#f0e6d0;margin-bottom:20px;}
#turnScreen button{padding:16px 48px;font-size:20px;background:#5a4a2a;color:#f0e6d0;border:2px solid #8a7d5a;border-radius:8px;cursor:pointer;}
#lobbyScreen{flex-direction:column;align-items:center;justify-content:flex-start;background:linear-gradient(180deg,#1a1a2e 0%,#2a1a3e 40%,#1a2a3e 70%,#111 100%);overflow-y:auto;padding-top:30px;}
#gameScreen{flex-direction:column;height:100vh;}
.top-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:#111;border-bottom:1px solid #333;}
.life{font-size:18px;font-weight:bold;}
.phase-info{color:#aaa;font-size:11px;}
.board{flex:1;display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;position:relative;}
.board-logo{width:200px;height:200px;opacity:0.4;pointer-events:none;margin:-100px auto -100px;position:relative;z-index:1;}
.board-logo img{width:100%;height:100%;border-radius:50%;}
.field-row{display:flex;align-items:center;min-height:100px;padding:4px;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;z-index:2;}
.opponent-field{background:rgba(139,0,0,0.1);border-bottom:1px solid #333;}
.my-field{background:rgba(0,80,0,0.1);border-top:1px solid #333;}
.mana-zone{display:flex;align-items:center;min-height:40px;padding:4px 8px;gap:4px;background:rgba(80,80,0,0.1);border-top:1px solid #333;flex-wrap:wrap;}
.mana-zone .label{color:#888;font-size:10px;margin-right:4px;}
.hand-zone{display:flex;align-items:center;min-height:110px;padding:4px 8px;gap:4px;background:rgba(0,0,80,0.1);border-top:1px solid #333;overflow-x:auto;}
.hand-zone .label{color:#888;font-size:10px;margin-right:4px;}
.mini-card{width:80px;min-height:95px;border-radius:6px;padding:4px;cursor:pointer;position:relative;font-size:9px;border:2px solid #555;background:#2c2c3a;flex-shrink:0;}
.mini-card:hover{border-color:#f0e6d0 !important;}
.mini-card.tapped{transform:rotate(90deg);margin:10px 15px;opacity:0.7;}
.mini-card .mc-name{font-weight:bold;font-size:10px;color:#f0e6d0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-card .mc-cost{position:absolute;top:2px;right:2px;background:#5a4a2a;color:#f0e6d0;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:bold;}
.mini-card .mc-pt{position:absolute;bottom:2px;right:2px;left:2px;background:#5a4a2a;color:#f0e6d0;border-radius:4px;padding:1px 4px;font-size:9px;font-weight:bold;text-align:right;}
.mini-card .mc-type{color:#888;font-size:8px;margin-top:2px;}
.mini-card .mc-text{color:#aaa;font-size:7px;margin-top:2px;line-height:1.3;max-height:36px;overflow:hidden;}
.mini-card.selected{border-color:#ffd700;box-shadow:0 0 12px 4px #ffd700,0 0 24px 8px rgba(255,215,0,0.4);animation:selectPulse 1s ease-in-out infinite;}
@keyframes selectPulse{0%,100%{box-shadow:0 0 12px 4px #ffd700,0 0 24px 8px rgba(255,215,0,0.4);}50%{box-shadow:0 0 16px 6px #ffd700,0 0 32px 12px rgba(255,215,0,0.5);}}
.mini-card.type-support{background:#1a2a1a;border-color:#5a9a5a;}
.mini-card.type-enchant{background:#2a1a2e;border-color:#9a5aaa;}
.mini-card.type-evil{background:#2a1a1a;border-color:#8a3030;}
.mini-card.type-kiyaku{background:#2a1a0a;border-color:#cc6600;}
.mini-card.type-hero{border-color:#d4a54a;}
.mini-card.type-heroine{border-color:#e06080;}
.mini-card.mana-card{width:46px;min-height:24px;padding:2px;font-size:7px;min-height:auto;}
.mini-card.mana-card .mc-name{font-size:7px;}
.mini-card.mana-tapped{opacity:0.4;}
.mini-card.face-down{background:#333;border-color:#444;}
.controls{display:flex;gap:6px;padding:8px 12px;background:#111;border-top:1px solid #333;flex-wrap:wrap;}
.controls button{padding:5px 12px;font-size:11px;background:#3a3a50;color:#d0c8b0;border:1px solid #555;border-radius:4px;cursor:pointer;}
.controls button:hover{background:#5a5a70;}
.controls button.primary{background:#5a4a2a;border-color:#8a7d5a;}
#log{position:fixed;right:0;bottom:0;width:200px;height:150px;background:rgba(0,0,0,0.9);padding:8px;overflow-y:auto;font-size:13px;border-left:1px solid #333;border-top:1px solid #333;border-radius:8px 0 0 0;z-index:100;}
#logToggle{display:none;}
#log .entry{padding:2px 0;border-bottom:1px solid #222;color:#999;}
.modal{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.8);z-index:200;flex-direction:column;align-items:center;justify-content:center;}
.modal.active{display:flex;}
.modal-content{background:#2c2c3a;border:2px solid #8a7d5a;border-radius:12px;padding:20px;max-width:700px;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.modal-content h3{color:#f0e6d0;margin-bottom:12px;}
.modal-cards{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0;}
.modal button{padding:8px 20px;margin:4px;font-size:12px;background:#5a4a2a;color:#f0e6d0;border:2px solid #8a7d5a;border-radius:6px;cursor:pointer;}
.modal-card{background:#2c2c3a;padding:8px;border:1px solid #8a7d5a;border-radius:6px;cursor:pointer;min-width:80px;text-align:center;font-size:11px;color:#d0c8b0;}
.modal-card:hover{border-color:#f0e6d0;}
.modal-card b{color:#f0e6d0;}
.grave-count{font-size:10px;color:#888;}
#toasts{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:150;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;}
.toast{background:rgba(20,20,40,0.95);border:1px solid #8a7d5a;border-radius:8px;padding:8px 20px;color:#f0e6d0;font-size:14px;font-weight:bold;animation:toastIn 0.6s ease,toastOut 0.8s ease 3.5s forwards;white-space:nowrap;}
.toast.damage{border-color:#cc3030;color:#ff6060;}
.toast.heal{border-color:#30aa30;color:#60ff60;}
.toast.summon{border-color:#d4a54a;color:#f0e6d0;}
.toast.effect{border-color:#5a9a5a;color:#b0e0b0;}
.toast.destroy{border-color:#cc3030;color:#ff4040;}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
@keyframes toastOut{from{opacity:1;}to{opacity:0;}}

/* カードポップアップ */
#cardPopup{display:none;position:fixed;z-index:300;pointer-events:none;gap:12px;}
#cardPopup.active{display:flex;}
#cardPopup .card{width:280px;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.7);position:relative;flex-shrink:0;}
#cardPopup .card-creature{background:linear-gradient(135deg,#2c2c3a,#3a3a50);border:2px solid #666;}
#cardPopup .card-enchant{background:linear-gradient(135deg,#2a1a2e,#3e2a4a);border:2px solid #9a5aaa;}
#cardPopup .card-support{background:linear-gradient(135deg,#1a2e1a,#2a4a2a);border:2px solid #5a8a5a;}
#cardPopup .card-evil{background:linear-gradient(135deg,#2e1a1a,#4a2a2a);border:2px solid #aa4444;}
#cardPopup .card-kiyaku{background:linear-gradient(135deg,#2e1a00,#4a2a00);border:2px solid #cc6600;}
#cardPopup .card-hero{border-color:#d4a54a;}
#cardPopup .card-heroine{border-color:#e06080;}
#cardPopup .card-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:rgba(0,0,0,0.3);}
#cardPopup .card-name{font-size:16px;font-weight:bold;color:#f0e6d0;}
#cardPopup .card-cost{background:#5a4a2a;color:#f0e6d0;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:bold;border:2px solid #8a7d5a;}
#cardPopup .card-enchant .card-cost{background:#4a2a5a;border-color:#9a5aaa;}
#cardPopup .card-support .card-cost{background:#2a4a2a;border-color:#5a8a5a;}
#cardPopup .card-evil .card-cost{background:#4a2a2a;border-color:#aa4444;}
#cardPopup .card-kiyaku .card-cost{background:#4a2a00;border-color:#cc6600;}
#cardPopup .card-art{height:160px;background:#222233;display:flex;align-items:center;justify-content:center;color:#555;font-size:13px;border-top:1px solid rgba(255,255,255,0.05);border-bottom:1px solid rgba(255,255,255,0.05);}
#cardPopup .card-type{padding:6px 14px;font-size:11px;color:#c0b89a;background:rgba(0,0,0,0.25);border-bottom:1px solid rgba(255,255,255,0.05);}
#cardPopup .card-type .tag{display:inline-block;background:rgba(255,255,255,0.08);border-radius:4px;padding:2px 6px;margin-right:4px;font-size:10px;}
#cardPopup .card-type .tag-hero{border:1px solid #d4a54a;color:#d4a54a;}
#cardPopup .card-type .tag-heroine{border:1px solid #e06080;color:#e06080;}
#cardPopup .card-type .tag-normal{border:1px solid #888;color:#aaa;}
#cardPopup .card-type .tag-enchant{border:1px solid #9a5aaa;color:#b88ac8;}
#cardPopup .card-type .tag-support{border:1px solid #5a8a5a;color:#7ab87a;}
#cardPopup .card-type .tag-evil{border:1px solid #aa4444;color:#cc6666;}
#cardPopup .card-type .tag-kiyaku{border:1px solid #cc6600;color:#ff8833;}
#cardPopup .card-text{padding:10px 14px;font-size:11px;color:#d0c8b0;line-height:1.6;min-height:80px;}
#cardPopup .card-text .keyword{color:#e8c060;font-weight:bold;}
#cardPopup .card-text .cost-inline{color:#aaa;font-style:italic;}
#cardPopup .card-text .card-flavor{color:#888;font-size:10px;font-style:italic;margin-top:8px;display:block;}
#cardPopup .card-footer{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:rgba(0,0,0,0.3);}
#cardPopup .card-pt{background:#5a4a2a;color:#f0e6d0;border-radius:6px;padding:4px 12px;font-size:18px;font-weight:bold;border:2px solid #8a7d5a;}
#cardPopup .card-pt.modified{color:#e8c060;}
#cardPopup .card-status{font-size:10px;color:#aaa;}
#cardPopup .card-status .st-dmg{color:#ff4040;}
#cardPopup .card-status .st-buff{color:#e8c060;}
#cardPopup .card-enchant-info{padding:8px 14px;background:rgba(80,0,120,0.25);border-top:1px solid rgba(154,90,170,0.3);font-size:10px;color:#c8a8e0;}
#cardPopup .card-enchant-info .enchant-label{font-weight:bold;color:#b88ac8;margin-bottom:3px;}
#cardPopup .card-enchant-info .enchant-item{margin:2px 0;line-height:1.4;}
#cardPopup .card-enchant-info .enchant-desc{color:#999;font-size:9px;}

/* ==== レアリティ演出（外枠） ==== */
@keyframes ur-outline {
  0%{outline-color:#ff6080;}
  25%{outline-color:#a060ff;}
  50%{outline-color:#60c0ff;}
  75%{outline-color:#60ffa0;}
  100%{outline-color:#ff6080;}
}
/* ポップアップ */
#cardPopup .rarity-r,#cardPopup .rarity-ur{outline:4px solid #d4a54a;outline-offset:2px;animation:shine-shadow 3.5s ease-in-out infinite;}
#cardPopup .rarity-r .card-name{background:linear-gradient(90deg,#d4a54a,#f0d080,#d4a54a);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shine-text 3s linear infinite;}
#cardPopup .rarity-ur .card-name{background:linear-gradient(90deg,#c8a070,#a0b080,#80a0b0,#b090b0,#c8a070);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shine-text 4s linear infinite;font-size:18px;}
@keyframes shine-text{0%{background-position:0% center;}100%{background-position:200% center;}}
@keyframes shine-shadow{0%{box-shadow:0 0 6px rgba(212,165,74,0.3);}50%{box-shadow:0 0 14px rgba(240,208,128,0.6);}100%{box-shadow:0 0 6px rgba(212,165,74,0.3);}}


/* デッキエディタ */
#deckEditor{max-height:400px;overflow-y:auto;margin:0 auto;}
#deckEditor h3{color:#f0e6d0;margin-bottom:8px;text-align:center;}
.deck-cards{display:flex;flex-direction:column;gap:4px;}
.deck-card{background:#2c2c3a;border:1px solid #444;border-radius:6px;padding:6px 10px;font-size:11px;color:#d0c8b0;}
.deck-card.in-deck{border-color:#8a7d5a;background:#3a3a4a;}
.deck-card b{color:#f0e6d0;font-size:12px;}
.deck-card button{padding:2px 10px;font-size:11px;background:#3a3a50;color:#d0c8b0;border:1px solid #555;border-radius:4px;cursor:pointer;margin:0 2px;}
.deck-card button:hover{background:#5a5a70;}
.deck-card.deck-creature{border-left:3px solid #6688aa;}
.deck-card.deck-support{border-left:3px solid #5a8a5a;}
.deck-card.deck-enchantment{border-left:3px solid #9a5aaa;}
.deck-card.deck-creature.in-deck{background:#2e3a50;}
.deck-card.deck-support.in-deck{background:#2a3a2a;}
.deck-card.deck-enchantment.in-deck{background:#3a2e4a;}
.deck-section-header{width:100%;color:#f0e6d0;font-size:13px;font-weight:bold;padding:8px 12px;margin-top:8px;background:rgba(90,74,42,0.25);border-left:4px solid #8a7d5a;border-radius:0 6px 6px 0;}
.deck-save-bar{position:sticky;bottom:0;background:#1a1a2e;padding:10px 0;z-index:10;}
.deck-save-bar button{display:block;margin:0 auto;padding:8px 24px;font-size:14px;background:#5a4a2a;color:#f0e6d0;border:2px solid #8a7d5a;border-radius:8px;cursor:pointer;}

/* PC向けレイアウト拡張 */
@media (min-width: 769px) {
  .field-row{min-height:170px;padding:8px 10px;gap:8px;}
  .mana-zone{min-height:48px;padding:5px 10px;}
  .hand-zone{min-height:125px;padding:5px 10px;}
  .mini-card{width:95px;min-height:110px;padding:5px;font-size:10px;}
  .mini-card .mc-name{font-size:11px;}
  .mini-card .mc-cost{width:20px;height:20px;font-size:10px;}
  .mini-card .mc-pt{font-size:10px;}
  .mini-card.mana-card{width:58px;min-height:30px;padding:3px;font-size:9px;}
  .mini-card.mana-card .mc-name{font-size:9px;}
  .grave-count{font-size:12px;color:#aaa;}
  .controls{padding:10px 16px;gap:8px;}
  .controls button{padding:8px 20px;font-size:13px;border-width:2px;border-radius:6px;}
  .controls button.primary{font-size:14px;padding:10px 24px;}
}

/* スマホ対応 */
@media (max-width: 768px) {
  body{font-size:14px;}
  .top-bar{padding:10px 12px;}
  .life{font-size:22px;}
  .phase-info{font-size:13px;}
  .grave-count{font-size:12px;}

  .mini-card{width:70px;min-height:80px;padding:3px;font-size:10px;border-width:2px;}
  .mini-card .mc-name{font-size:11px;}
  .mini-card .mc-cost{width:20px;height:20px;font-size:10px;}
  .mini-card .mc-pt{font-size:10px;padding:2px 4px;}
  .mini-card .mc-text{font-size:8px;}
  .mini-card.mana-card{width:40px;min-height:22px;font-size:8px;}

  .field-row{min-height:90px;padding:4px 2px;gap:3px;}
  .hand-zone{min-height:90px;padding:4px;gap:3px;}
  .mana-zone{min-height:36px;padding:4px;gap:3px;}

  .controls{padding:8px;gap:6px;}
  .controls button{padding:10px 16px;font-size:14px;min-height:44px;}

  #log{width:200px;height:150px;font-size:11px;display:none;}
  #log.log-open{display:block;}
  #logToggle{display:block;position:fixed;right:8px;bottom:8px;z-index:101;background:#5a4a2a;color:#f0e6d0;border:1px solid #8a7d5a;border-radius:6px;padding:6px 10px;font-size:11px;cursor:pointer;}

  .modal-content{max-width:95vw;padding:14px;margin:10px;}
  .modal-content h3{font-size:16px;}
  .modal button{padding:12px 20px;font-size:14px;min-height:44px;}
  .modal-card{min-width:70px;font-size:12px;padding:10px;}

  #cardPopup .card{width:240px;}
  #cardPopup .card-name{font-size:14px;}
  #cardPopup .card-cost{width:28px;height:28px;font-size:14px;}
  #cardPopup .card-text{font-size:12px;padding:8px 10px;}
  #cardPopup .card-art{height:120px;}

  #turnScreen h1{font-size:24px;}
  #turnScreen button{padding:16px 40px;font-size:18px;}

  #lobbyScreen button{min-height:44px;}
  #lobbyScreen input{font-size:16px;padding:10px 14px;}

  #deckEditor{max-height:50vh;}
  .deck-card{padding:8px 10px;font-size:13px;}
  .deck-card b{font-size:14px;}
  .deck-card button{padding:6px 14px;font-size:13px;min-height:36px;}

  .toast{font-size:12px;padding:6px 14px;}
}

/* ==== アニメーションオーバーレイ ==== */
#animOverlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  z-index:2000;
  align-items:center;
  justify-content:center;
}
#animOverlay.active{display:flex;}
#animBox{
  max-width:500px;
  width:90%;
  text-align:center;
}
.anim-entry{
  padding:14px 24px;
  background:linear-gradient(135deg,#1a2a1a,#2a3a2a);
  border:2px solid #5a8a5a;
  border-radius:10px;
  color:#d0c8b0;
  font-size:16px;
  font-weight:bold;
  letter-spacing:1px;
  box-shadow:0 4px 24px rgba(0,0,0,0.6);
  opacity:0;
  transform:scale(0.8) translateY(20px);
  transition:opacity 0.3s, transform 0.3s;
}
.anim-entry.anim-in{
  opacity:1;
  transform:scale(1) translateY(0);
}
.anim-entry.anim-out{
  opacity:0;
  transform:scale(1.05) translateY(-10px);
}
.anim-entry.anim-chain{
  background:linear-gradient(135deg,#3a2a10,#4a3a18);
  border-color:#ccaa33;
  color:#ffdd55;
  box-shadow:0 0 30px rgba(200,170,50,0.5);
  font-size:18px;
}
.anim-entry.anim-destroy{
  background:linear-gradient(135deg,#3a1a1a,#4a2020);
  border-color:#cc4444;
  color:#ff8888;
  box-shadow:0 0 30px rgba(200,50,50,0.5);
}
.anim-entry.anim-damage{
  background:linear-gradient(135deg,#3a1a1a,#4a2020);
  border-color:#cc4444;
  color:#ff5555;
}
.anim-entry.anim-heal{
  background:linear-gradient(135deg,#1a2a1a,#1a3a2a);
  border-color:#44aa66;
  color:#55ff88;
}
.anim-sub{
  font-size:13px;
  margin-top:6px;
  opacity:0.85;
}
.combat-stage{
  display:flex;align-items:center;justify-content:center;
  position:relative;width:420px;height:220px;max-width:95vw;margin:0 auto;
}
.combat-card{
  position:absolute;width:110px;height:150px;
  border-radius:6px;overflow:hidden;border:2px solid #fff;
  background:#2a2a4a;z-index:1;
}
.combat-card-img{width:100%;height:70%;overflow:hidden;}
.combat-card-img img{width:100%;height:100%;object-fit:cover;}
.combat-card-name{
  padding:2px 4px;background:rgba(0,0,0,0.85);width:100%;text-align:center;
  font-size:11px;height:30%;display:flex;align-items:center;justify-content:center;
  color:#f0e6d0;
}
.combat-player-label{color:#ff8800;}
.combat-player-sil{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#333;
}
.combat-player-sil svg{width:40px;height:56px;fill:#888;}
.combat-left{left:20px;top:20px;}
.combat-right{right:20px;top:20px;}
.combat-result-text{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  font-size:20px;font-weight:bold;color:#fff;opacity:0;
  text-shadow:0 0 8px #000,0 0 16px #ff0000,0 0 30px #ff0000;
  white-space:nowrap;z-index:2;
  background:rgba(0,0,0,0.6);padding:4px 12px;border-radius:4px;
}
.anim-slam-right{animation:slamRight 0.6s ease-in-out forwards;}
.anim-slam-left{animation:slamLeft 0.6s ease-in-out forwards;}
.anim-shake{animation:combatShake 0.3s 0.4s ease-in-out;}
.anim-result-show{animation:resultPop 0.4s 0.5s ease-out forwards;}
@keyframes slamRight{
  0%{transform:translateX(0);}
  40%{transform:translateX(100px) scale(1.1);}
  50%{transform:translateX(100px) scale(1.15);}
  60%{transform:translateX(100px) scale(1.1);}
  100%{transform:translateX(0) scale(1);}
}
@keyframes slamLeft{
  0%{transform:translateX(0);}
  40%{transform:translateX(-100px) scale(1.1);}
  50%{transform:translateX(-100px) scale(1.15);}
  60%{transform:translateX(-100px) scale(1.1);}
  100%{transform:translateX(0) scale(1);}
}
@keyframes combatShake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(6px);}
  40%{transform:translateX(-6px);}
  60%{transform:translateX(4px);}
  80%{transform:translateX(-3px);}
}
@keyframes resultPop{
  0%{opacity:0;transform:translateX(-50%) scale(0.5);}
  60%{opacity:1;transform:translateX(-50%) scale(1.2);}
  100%{opacity:1;transform:translateX(-50%) scale(1);}
}