:root{
  --hdr: 4vh;
  /* --s は必ずヘッダーを除いた高さ内に収まるよう連動計算 */
  --s: min(10vw, calc((100vh - var(--hdr)) / 8));
  --g: calc(var(--s) * 0.09);
  --left-w: 15vw;
  --log-w: 26vw;
  --cf: max(calc(var(--s)*0.11), 9px);

  /* === ポケポケ風 ソフトパステルパレット === */
  --bg-base:    #faf3e7;
  --bg-panel:   rgba(255,255,255,.9);
  --bg-board:   linear-gradient(135deg,#eaf4ff 0%,#fdeef4 55%,#fff6e3 100%);
  --bg-header:  linear-gradient(180deg,#fff8ee,#faecdd);

  --ink:        #4a3f5c;
  --ink-muted:  #8a7a96;
  --ink-soft:   #c2b6cd;

  --ac-sky:     #a3d2f5;
  --ac-lilac:   #c8b8f0;
  --ac-rose:    #f7b9cf;
  --ac-peach:   #ffc89a;
  --ac-mint:    #b8e3c1;
  --ac-lemon:   #ffe89a;
  --ac-coral:   #f9b3a3;

  --sh-soft:    0 4px 14px rgba(155,134,180,.10);
  --sh-card:    0 6px 22px rgba(155,134,180,.18);
  --sh-deep:    0 10px 30px rgba(155,134,180,.22);
  --ring-soft:  0 0 0 1px rgba(155,134,180,.14);
  --border-soft:1px solid rgba(155,134,180,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-base);color:var(--ink);font-family:'Segoe UI',system-ui,sans-serif;height:100vh;overflow:hidden;user-select:none}

/* ── スクリーン ── */
.screen{display:none;flex-direction:column;align-items:center;justify-content:center;
  height:100vh;gap:2rem;padding:2rem;overflow:hidden}
.screen.on{display:flex}
.g-title{font-size:clamp(1.8rem,5vw,3rem);font-weight:900;background:linear-gradient(90deg,var(--ac-sky),var(--ac-lilac),var(--ac-rose));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.06em}
.g-sub{color:var(--ink-muted);font-size:.85rem;letter-spacing:.2em;text-transform:uppercase}
.pw-wrap{background:var(--bg-panel);border:var(--border-soft);border-radius:1.4rem;padding:2.5rem 3rem;display:flex;flex-direction:column;align-items:center;gap:1.2rem;min-width:260px;box-shadow:var(--sh-soft)}
.pw-wrap h3{color:var(--ink-muted);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
.pw-wrap input{background:#fffaf2;border:1px solid rgba(155,134,180,.25);border-radius:.7rem;color:var(--ink);font-size:2rem;letter-spacing:.7em;padding:.5rem 1.2rem;width:185px;text-align:center;outline:none;transition:border-color .2s,box-shadow .2s}
.pw-wrap input:focus{border-color:var(--ac-sky);box-shadow:0 0 0 3px rgba(163,210,245,.28)}
.st{font-size:.85rem;height:1.2rem;font-weight:600}.st.ok{color:#7ec88a}.st.ng{color:#e88a7a}
.btn-join{background:linear-gradient(135deg,var(--ac-sky),var(--ac-lilac));border:none;border-radius:.85rem;color:#fff;cursor:pointer;font-size:1.05rem;font-weight:700;padding:.85rem 3.5rem;transition:transform .15s,box-shadow .15s;letter-spacing:.04em;text-shadow:0 1px 2px rgba(94,82,142,.35);box-shadow:var(--sh-card)}
.btn-join:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--sh-deep)}
.btn-join:disabled{opacity:.35;cursor:not-allowed}
.spin{width:50px;height:50px;border:3px solid rgba(163,210,245,.25);border-top-color:var(--ac-sky);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lob-title{font-size:1.4rem;color:#5a9fd4;font-weight:700}
.lob-sub{color:var(--ink-muted);font-size:.88rem;text-align:center;max-width:340px;line-height:1.7}
.pid-badge{background:rgba(163,210,245,.18);border:1px solid rgba(163,210,245,.4);border-radius:.55rem;padding:.32rem 1.1rem;color:#5a9fd4;font-size:.85rem;font-weight:600}

/* ── スクリーン: 横向き小画面コンパクト ── */
@media(orientation:landscape) and (max-height:540px){
  .screen{gap:clamp(.35rem,1.2vh,.9rem);padding:clamp(.5rem,1.5vh,1rem) 2rem}
  .g-title{font-size:clamp(1.1rem,3.5vw,1.6rem)}
  .g-sub{display:none}
  .pw-wrap{padding:clamp(.7rem,1.8vh,1.4rem) 1.8rem;gap:.6rem;min-width:220px;border-radius:1rem}
  .pw-wrap h3{font-size:.72rem}
  .pw-wrap input{font-size:1.55rem;padding:.32rem .9rem;width:165px}
  .st{font-size:.75rem;height:1rem}
  .btn-join{padding:.55rem 2.2rem;font-size:.9rem;border-radius:.7rem}
  .fs-hint{font-size:.58rem;margin-top:.1rem}
  .lob-title{font-size:1rem}
  .lob-sub{font-size:.72rem;line-height:1.5;max-width:260px}
  .spin{width:36px;height:36px;border-width:2px}
  .pid-badge{font-size:.75rem;padding:.22rem .8rem}
}

/* ══════════════════════════════
   ゲームグリッド
   ══════════════════════════════ */
#game{
  display:none;
  grid-template-rows:var(--hdr) 1fr;
  grid-template-columns:var(--left-w) 1fr var(--log-w);
  grid-template-areas:"hd hd hd" "left center logcol";
  height:100vh;
  background:var(--bg-base);
}
#game.on{display:grid}

/* ── ヘッダー ── */
.g-header{
  grid-area:hd;display:flex;align-items:center;
  gap:min(1vw,.8rem);padding:0 min(1vw,.8rem);
  background:var(--bg-header);
  border-bottom:var(--border-soft);
  box-shadow:0 2px 10px rgba(155,134,180,.08);
  overflow:hidden;
  backdrop-filter:blur(6px);
}
.g-header-title{font-weight:900;font-size:clamp(.85rem,1.5vw,1.1rem);background:linear-gradient(90deg,var(--ac-sky),var(--ac-lilac));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.1em;white-space:nowrap}
.phase-badge{background:rgba(163,210,245,.22);border:1px solid rgba(163,210,245,.4);border-radius:.35rem;padding:.18rem .65rem;color:#5a9fd4;font-size:clamp(.78rem,1.2vw,.95rem);font-weight:700;white-space:nowrap;flex-shrink:0}
.phase-badge.auto{background:rgba(255,200,154,.25);border-color:rgba(255,200,154,.45);color:#d6884a}
.turn-info{color:var(--ink-muted);font-size:clamp(.75rem,1.1vw,.9rem);white-space:nowrap;flex-shrink:0;font-weight:600}
.phase-msg{color:var(--ink);font-size:clamp(.78rem,1.15vw,.95rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.conn-wrap{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--ink-muted);flex-shrink:0;margin-left:auto;font-weight:600}
.conn-dot{width:8px;height:8px;border-radius:50%}
.conn-dot.ok{background:#7ec88a;box-shadow:0 0 4px rgba(126,200,138,.55)}.conn-dot.ng{background:#e88a7a}.conn-dot.wait{background:#f0c878}
.log-toggle{display:none;align-items:center;justify-content:center;padding:.15rem .5rem;background:rgba(255,255,255,.6);border:var(--border-soft);border-radius:.3rem;cursor:pointer;font-size:.6rem;color:var(--ink-muted);font-weight:600;flex-shrink:0;white-space:nowrap;margin-left:.4rem}
.fs-btn{display:flex;align-items:center;justify-content:center;padding:.15rem .45rem;background:rgba(255,255,255,.6);border:var(--border-soft);border-radius:.3rem;cursor:pointer;font-size:.7rem;color:var(--ink-muted);flex-shrink:0;white-space:nowrap;margin-left:.3rem;transition:color .15s,border-color .15s;line-height:1;user-select:none}
.fs-btn:hover{color:var(--ink);border-color:rgba(155,134,180,.35)}
/* PWAインストール済み/fullscreen時・PCはボタン非表示 */
@media(display-mode:fullscreen),(display-mode:standalone){.fs-btn{display:none}}
.fs-btn{display:none}  /* デフォルト非表示、モバイルのみJSで表示 */
.fs-hint{font-size:.72rem;color:var(--ink-muted);margin-top:.4rem;letter-spacing:.04em;animation:hint-fade 3s ease-in-out 1.5s forwards}
@keyframes hint-fade{0%{opacity:1}100%{opacity:0;visibility:hidden}}
/* iOS / PWA時はヒント非表示 */
.no-fs-hint .fs-hint{display:none}
@media(display-mode:fullscreen),(display-mode:standalone){.fs-hint{display:none}}

/* ── 左パネル (カード画像 + 詳細) ── */
.left-panel{
  grid-area:left;
  display:flex;flex-direction:column;
  padding:var(--g) calc(var(--g)*.7);
  gap:var(--g);
  background:var(--bg-panel);
  border-right:var(--border-soft);
  overflow:hidden;
  box-shadow:var(--sh-soft);
}
.left-lbl{
  font-size:max(calc(var(--s)*0.09),9px);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-muted);flex-shrink:0;
}
.card-preview-wrap{
  width:100%;aspect-ratio:1/1;
  flex-shrink:1;flex-grow:0;
  min-height:calc(var(--s)*1.2);
  max-height:38vh;
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
#card-preview{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#card-preview .card{
  width:auto;height:100%;max-width:100%;aspect-ratio:1/1;
}
.preview-empty{
  width:100%;height:100%;
  background:#fffaf2;
  border:1px dashed rgba(155,134,180,.3);
  border-radius:calc(var(--s)*0.07);
  display:flex;align-items:center;justify-content:center;
  font-size:max(calc(var(--s)*0.1),10px);
  color:var(--ink-soft);text-align:center;line-height:1.6;
}
.card-detail-wrap{
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;
  min-height:calc(var(--s)*1.6);
  display:flex;flex-direction:column;
  scrollbar-width:thin;scrollbar-color:rgba(155,134,180,.4) transparent;
}
.card-detail-wrap::-webkit-scrollbar{width:4px}
.card-detail-wrap::-webkit-scrollbar-thumb{background:rgba(155,134,180,.4);border-radius:2px}
.card-detail-wrap::-webkit-scrollbar-thumb:hover{background:rgba(155,134,180,.6)}
#cd{
  display:flex;flex-direction:column;
  word-break:break-word;overflow-wrap:anywhere;
}

/* ── ボードエリア (中央) ── */
.center{
  grid-area:center;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
  background:
    linear-gradient(rgba(155,134,180,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(155,134,180,.05) 1px,transparent 1px),
    radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.6) 0%,transparent 65%),
    var(--bg-board);
  background-size:calc(var(--s)*0.5) calc(var(--s)*0.5),calc(var(--s)*0.5) calc(var(--s)*0.5),100% 100%,100% 100%;
}
.gameboard{
  display:flex;flex-direction:column;align-items:center;
  gap:calc(var(--g)*0.35);
  flex-shrink:0;
  /* 左右パネル幅の差を打ち消し、前衛2枚の中央を画面中央に揃える */
  transform:translateX(calc((var(--log-w) - var(--left-w)) / 2));
}

/* ── プレイヤーエリア (4×2グリッド: 前衛が中央、シノビ/マナが左右にずれる) ── */
.player-area{
  display:grid;
  grid-template-columns:repeat(4, var(--s));
  grid-template-rows:repeat(2, var(--s));
  gap:var(--g);
  justify-content:center;align-items:center;
}
/* 相手: 後衛(d0,d1)+マナ が右寄り、前衛(b0,b1)+シノビ が左下 */
.player-area.opp{
  grid-template-areas:
    ".   od0 od1 omf"
    "osn ob0 ob1 .  ";
}
.player-area.mine{
  grid-template-areas:
    ".   mb0 mb1 msn"
    "mmf md0 md1 .  ";
}
#od0{grid-area:od0} #od1{grid-area:od1} #omf{grid-area:omf}
#ob0{grid-area:ob0} #ob1{grid-area:ob1} #osn{grid-area:osn}
#mb0{grid-area:mb0} #mb1{grid-area:mb1} #msn{grid-area:msn}
#mmf{grid-area:mmf} #md0{grid-area:md0} #md1{grid-area:md1}

/* ── 横長ステータスパネル (左パネル内) ── */
.pstat-h{
  width:100%;
  display:flex;flex-direction:column;
  padding:calc(var(--g)*0.7) calc(var(--g)*0.8);
  gap:calc(var(--g)*0.35);
  border-radius:calc(var(--s)*0.1);
  border:var(--border-soft);
  background:linear-gradient(165deg,#ffffff,#fff8ee);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--sh-soft);
  overflow:hidden;position:relative;flex-shrink:0;
  transition:box-shadow .3s ease;
}
.pstat-h.opp { background:linear-gradient(170deg,#eaf4ff,#fbfdff 60%,#ffffff); border-color:rgba(163,210,245,.45); }
.pstat-h.mine{ background:linear-gradient(170deg,#f4eeff,#fbfaff 60%,#ffffff); border-color:rgba(200,184,240,.45); }
.pstat-h.opp.turn { box-shadow:0 0 0 2px var(--ac-sky),0 6px 18px rgba(163,210,245,.45),inset 0 1px 0 rgba(255,255,255,.6); }
.pstat-h.mine.turn{ box-shadow:0 0 0 2px var(--ac-lilac),0 6px 18px rgba(200,184,240,.45),inset 0 1px 0 rgba(255,255,255,.6); }

/* 各ステータス行 */
.pstat-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--g)*0.25) calc(var(--g)*0.35);
  border-radius:calc(var(--s)*0.05);
  font-size:max(calc(var(--s)*0.1),10px);
  transition:background .15s;
  background:rgba(255,255,255,.55);
  border-left:3px solid transparent;
  gap:.5em;
}
.pstat-row:hover{background:rgba(255,255,255,.85)}
.pstat-lbl{
  display:flex;align-items:center;gap:.4em;
  color:var(--ink);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  letter-spacing:.02em;
}
.pstat-icon{
  font-size:1.15em;line-height:1;flex-shrink:0;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.7));
}
.pstat-val{
  font-weight:900;font-variant-numeric:tabular-nums;
  flex-shrink:0;line-height:1;
  font-size:1.1em;
}

/* 各ステータスごとのカラー（ポケポケ風パステル） */
.pstat-life{ border-left-color:var(--ac-rose) }
.pstat-life .pstat-icon{ color:#e89bb6 }
.pstat-life .pstat-val{ color:#d6738f;font-size:1.35em;text-shadow:0 1px 0 #fff }
.pstat-bp{ border-left-color:var(--ac-peach) }
.pstat-bp .pstat-icon{ color:#f0a060 }
.pstat-bp .pstat-val{ color:#e89048 }
.pstat-mn{ border-left-color:var(--ac-sky) }
.pstat-mn .pstat-icon{ color:#5a9fd4 }
.pstat-mn .pstat-val{ color:#5a9fd4 }
.pstat-q{ border-left-color:var(--ac-lilac) }
.pstat-q .pstat-icon{ color:#9e88d4 }
.pstat-q .pstat-val{ color:#9e88d4 }

/* ライフバー */
.pstat-lp-bar{
  width:100%;height:max(6px,calc(var(--s)*0.07));
  background:#f4ebd8;border-radius:99px;
  overflow:hidden;box-shadow:inset 0 1px 2px rgba(155,134,180,.2);
  margin-top:calc(var(--g)*-0.15);
}
.pstat-lp-fill{
  height:100%;
  transition:width .6s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(90deg,var(--ac-rose),#e89bb6);
  box-shadow:0 0 6px rgba(247,185,207,.45);
}
.pstat-lp-fill.low{
  background:linear-gradient(90deg,#f0846f,#e6624a);
  box-shadow:0 0 6px rgba(240,132,111,.5);
  animation:lp-pulse 1.2s ease-in-out infinite;
}
@keyframes lp-pulse{0%,100%{opacity:1}50%{opacity:.6}}
.bp-v{color:#e89048}.mn-v{color:#5a9fd4}.dk-v{color:var(--ink-muted)}.ql-v{color:#d6738f}.gv-v{color:var(--ink-soft)}

/* ── 手札行 ── */
:root{ --hs: calc(var(--s) * 1.28); }   /* 手札カードは盤面より大きく */
.hand-row{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--g)*1.1);flex-shrink:0;
  padding:calc(var(--g)*0.5) calc(var(--g)*1);
  height:calc(var(--hs) + var(--g)*0.9);
  border-radius:calc(var(--hs)*0.14);
  background:linear-gradient(180deg,#ffffff,#fff5ec);
  border:var(--border-soft);
  box-shadow:var(--sh-soft),inset 0 1px 0 rgba(255,255,255,.6);
  /* 手札と盤面の間にハッキリした隙間を作る */
  margin:calc(var(--g)*1.6) 0;
  flex-shrink:0;
  /* 盤面と同じだけ横シフトして前衛中央と一直線に揃える */
  transform:translateX(calc((var(--log-w) - var(--left-w)) / 2));
}
.hand-slot{
  width:var(--hs);height:var(--hs);
  position:relative;flex-shrink:0;overflow:visible;
}
.hand-slot .card{width:100%;height:100%;transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .18s;}

/* ── 仕切り線 ── */
.gboard-div{
  width:calc(var(--s)*4 + var(--g)*3);max-width:92vw;
  height:max(0.6vh,5px);flex-shrink:0;
  background:linear-gradient(90deg,transparent 0%,rgba(163,210,245,.35) 15%,rgba(200,184,240,.7) 35%,rgba(247,185,207,.75) 50%,rgba(200,184,240,.7) 65%,rgba(163,210,245,.35) 85%,transparent 100%);
  background-size:200% 100%;
  border-radius:99px;
  box-shadow:0 0 calc(var(--s)*0.1) rgba(200,184,240,.35),inset 0 1px 0 rgba(255,255,255,.6);
  margin:calc(var(--g)*0.25) 0;
  animation:div-shimmer 6s linear infinite;
  position:relative;
}
@keyframes div-shimmer{0%{background-position:0% 0}100%{background-position:200% 0}}

/* ── スロット ── */
.slot{
  width:var(--s);height:var(--s);
  background:radial-gradient(ellipse at center,#fffaf2,#f5ecde);
  border:1px dashed rgba(155,134,180,.3);
  border-radius:calc(var(--s)*0.08);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;overflow:visible;
  transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;
  flex-shrink:0;
  font-size:var(--cf);
  box-shadow:var(--ring-soft);
}
.slot:not(.static):not(:has(.card)):hover{background:radial-gradient(ellipse at center,#ffffff,#fbf2e2);border-color:rgba(155,134,180,.5);transform:translateY(-1px);box-shadow:var(--sh-soft)}
.slot.static{cursor:default;border-style:dotted;opacity:.92}
.slot.ok{
  border-color:var(--ac-sky);border-style:solid;
  background:radial-gradient(ellipse at center,rgba(163,210,245,.18),rgba(163,210,245,.04));
  animation:pulse-ok 1.6s ease-in-out infinite;
}
@keyframes pulse-ok{
  0%,100%{box-shadow:0 0 0 1px rgba(163,210,245,.35),inset 0 0 calc(var(--s)*0.08) rgba(163,210,245,.1)}
  50%{box-shadow:0 0 0 2px var(--ac-sky),0 4px 14px rgba(163,210,245,.4),inset 0 0 calc(var(--s)*0.12) rgba(163,210,245,.18)}
}
.slot-lbl{color:rgba(74,63,92,.4);font-size:max(calc(var(--s)*0.13),11px);font-weight:700;text-align:center;pointer-events:none;line-height:1.35;letter-spacing:.04em}
.slot-cnt{font-size:max(calc(var(--s)*0.13),11px);color:rgba(74,63,92,.45);font-weight:700;margin-top:.04em}

/* フィールドカードのスライドアニメーション */
.slot .card{
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .12s;
}
.card.field-tucked{
  transform:translateY(82%)!important;
  z-index:15;
}
.card.field-tucked:hover{
  transform:translateY(82%) scale(1.02)!important;
  box-shadow:0 4px 12px rgba(155,134,180,.25)!important;
}

/* ── カード ── */
.card{
  width:100%;height:100%;
  border-radius:calc(var(--s)*0.06);
  cursor:pointer;display:flex;flex-direction:column;
  overflow:hidden;position:relative;
  transition:transform .12s,box-shadow .12s;
  font-size:var(--cf);
}
/* ホバー移動は手札カードのみ (フィールドカードは動かさない) */
.hand-slot .card:hover{transform:translateY(-3px) scale(1.05);box-shadow:var(--sh-card),0 0 0 1px rgba(155,134,180,.25);z-index:10}
.card.sel{transform:translateY(calc(var(--s)*-0.08)) scale(1.08)!important;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ac-rose),var(--sh-deep)!important;z-index:20;animation:card-sel 1.8s ease-in-out infinite}
/* 手戻し可能なフィールドカードのホバーヒント */
.card.can-unplace:hover::after{content:'↩ 戻す';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:max(calc(var(--s)*0.1),8px);color:#fff;background:rgba(240,160,96,.92);padding:2px 6px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:20;box-shadow:var(--sh-soft)}
.card.can-unplace:hover{border-color:var(--ac-peach)!important}
@keyframes card-sel{0%,100%{filter:brightness(1)}50%{filter:brightness(1.07)}}
.card.grass  {background:linear-gradient(160deg,#eaf7ec,#c8e9ce 50%,#a8d8a8);border:2px solid #8fc890}
.card.fire   {background:linear-gradient(160deg,#fde6dc,#fbc6b4 50%,#f6a98e);border:2px solid #f08e72}
.card.water  {background:linear-gradient(160deg,#e8f3fc,#cce4f5 50%,#a8c8e8);border:2px solid #7eb1de}
.card.thunder{background:linear-gradient(160deg,#fff8d9,#fde7a3 50%,#fbd968);border:2px solid #efba3f}
.card.back   {background:linear-gradient(160deg,#fbecf3,#e9c8e0 50%,#cda5cd);border:2px solid #b896cc;align-items:center;justify-content:center}
.card.queen.grass  {border:2.5px solid #6fb872;box-shadow:0 0 calc(var(--s)*0.08) rgba(168,216,168,.55)}
.card.queen.fire   {border:2.5px solid #e08260;box-shadow:0 0 calc(var(--s)*0.08) rgba(246,169,142,.55)}
.card.queen.water  {border:2.5px solid #6498c8;box-shadow:0 0 calc(var(--s)*0.08) rgba(168,200,232,.55)}
.card.queen.thunder{border:2.5px solid #d6a020;box-shadow:0 0 calc(var(--s)*0.08) rgba(251,217,104,.55)}

/* カード内部 */
.c-top{display:flex;justify-content:space-between;padding:.3em .3em .1em;flex-shrink:0}
.c-rank{width:1.4em;height:1.4em;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:900;background:rgba(255,255,255,.7);color:var(--ink);line-height:1;box-shadow:0 1px 2px rgba(155,134,180,.2)}
.card.queen .c-rank{background:linear-gradient(135deg,#fff3c4,#fde7a3);color:#a07020;box-shadow:0 0 4px rgba(251,217,104,.6)}
.c-attr{width:1.2em;height:1.2em;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.6em;font-weight:800;box-shadow:0 1px 2px rgba(255,255,255,.5)}
.card.grass  .c-attr{background:#8fc890;color:#fff}
.card.fire   .c-attr{background:#f08e72;color:#fff}
.card.water  .c-attr{background:#7eb1de;color:#fff}
.card.thunder .c-attr{background:#efba3f;color:#fff}
.c-art{flex:1;display:flex;align-items:center;justify-content:center;font-size:.7em;font-weight:700;text-align:center;line-height:1.2;padding:.1em .2em;color:rgba(74,63,92,.55)}
.c-bot{padding:.15em .25em .2em;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.78);backdrop-filter:blur(2px)}
.c-name{font-size:.6em;font-weight:700;color:#3a3245;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.c-pow{font-size:1.1em;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;flex-shrink:0;margin-left:.2em;text-shadow:0 1px 2px rgba(255,255,255,.7)}

/* ── カード詳細 (左パネル) ── */
.cd-name{font-size:clamp(.9rem,1.4vw,1.15rem);font-weight:800;margin-bottom:.3em;line-height:1.25;word-break:break-word;overflow-wrap:anywhere;color:var(--ink)}
.cd-meta{display:flex;align-items:center;gap:.35em;margin-bottom:.3em;flex-wrap:wrap}
.cd-badge{font-size:clamp(.66rem,.95vw,.8rem);padding:.1em .42em;border-radius:.28rem;font-weight:700;white-space:nowrap}
.cd-pow-lbl{font-size:clamp(.58rem,.85vw,.72rem);color:var(--ink-muted);margin-bottom:.05em;letter-spacing:.08em}
.cd-pow{font-size:clamp(1.15rem,2vw,1.6rem);font-weight:900;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1;margin-bottom:.35em}
.cd-eff{
  font-size:clamp(.72rem,1vw,.88rem);color:#5a9fd4;line-height:1.55;
  padding:.45em .6em;background:rgba(163,210,245,.14);
  border-radius:.32rem;border-left:3px solid var(--ac-sky);
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
  hyphens:auto;
}
.cd-evolve{
  font-size:clamp(.66rem,.95vw,.8rem);color:#d6884a;margin-top:.3em;
  padding:.3em .45em;background:rgba(255,200,154,.18);border-radius:.26rem;
  border-left:3px solid var(--ac-peach);
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
  line-height:1.5;
}

/* ── バトルログ列 ── */
.log-col{
  grid-area:logcol;
  display:flex;flex-direction:column;
  background:var(--bg-panel);
  border-left:var(--border-soft);
  overflow:hidden;
  box-shadow:var(--sh-soft);
}
.log-hdr{
  padding:min(1vh,.5rem) min(1.2vw,.8rem);
  font-size:clamp(.7rem,1.1vw,.88rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#5a9fd4;border-bottom:var(--border-soft);flex-shrink:0;
  background:rgba(163,210,245,.18);
}
.battle-log{flex:1;overflow-y:auto;padding:min(1vh,.5rem) min(1.2vw,.7rem);display:flex;flex-direction:column;gap:.18rem;min-height:0}
.battle-log::-webkit-scrollbar{width:5px}.battle-log::-webkit-scrollbar-thumb{background:rgba(155,134,180,.4);border-radius:3px}
.log-e{padding:.22rem .42rem;border-radius:.24rem;font-size:clamp(.78rem,1.05vw,1rem);line-height:1.45}
.log-w{color:#5fa370;background:rgba(184,227,193,.25)}.log-i{color:#5a9fd4;background:rgba(163,210,245,.12)}.log-d{color:#d6884a;background:rgba(255,200,154,.22)}

/* ── オーバーレイ ── */
#win,#disc{position:fixed;inset:0;background:rgba(255,248,238,.94);z-index:100;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;display:none;backdrop-filter:blur(10px)}
#win.on,#disc.on{display:flex}
#win h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;letter-spacing:.04em}
#win h1.won{background:linear-gradient(90deg,var(--ac-sky),var(--ac-lilac));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#win h1.lost{background:linear-gradient(90deg,#f0846f,#f4a878);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#win h1.draw{background:linear-gradient(90deg,var(--ink-muted),var(--ink-soft));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.ov-reason{color:var(--ink-muted);font-size:.88rem;text-align:center}
.ov-stats{background:#ffffffd9;border:var(--border-soft);border-radius:.9rem;padding:.9rem 1.8rem;min-width:min(80vw,290px);box-shadow:var(--sh-soft)}
.ov-row{display:grid;grid-template-columns:72px 1fr 1fr;gap:.5rem;align-items:center;padding:.28rem 0;border-bottom:1px solid rgba(155,134,180,.15)}
.ov-row:last-child{border-bottom:none}
.ov-lbl{font-size:.7rem;color:var(--ink-muted);font-weight:700}
.ov-p1{color:#5a9fd4;font-weight:700;font-size:.88rem;text-align:center}
.ov-p2{color:#9e88d4;font-weight:700;font-size:.88rem;text-align:center}
.ov-win{color:#5fa370!important}
.btn-restart{background:linear-gradient(135deg,var(--ac-sky),var(--ac-lilac));border:none;border-radius:.85rem;color:#fff;cursor:pointer;font-size:.98rem;font-weight:700;padding:.7rem 2.4rem;margin-top:.3rem;letter-spacing:.04em;transition:transform .15s,box-shadow .15s;text-shadow:0 1px 2px rgba(94,82,142,.35);box-shadow:var(--sh-card)}
.btn-restart:hover{transform:translateY(-2px);box-shadow:var(--sh-deep)}
#disc h2{color:#e88a7a;font-size:1.5rem;font-weight:800}

/* ════════════════════════════════
   回転プロンプト (縦向きスマホ)
   ════════════════════════════════ */
#rotate-prompt{
  display:none;
  position:fixed;inset:0;z-index:9999;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.6),transparent 65%),var(--bg-board);
  flex-direction:column;align-items:center;justify-content:center;
  gap:1.8rem;color:var(--ink);text-align:center;padding:2rem;
}
.rotate-icon{
  font-size:5rem;color:var(--ac-sky);
  animation:rot-spin 2.4s cubic-bezier(.4,0,.2,1) infinite;
  filter:drop-shadow(0 4px 12px rgba(163,210,245,.45));
}
@keyframes rot-spin{
  0%,20%{transform:rotate(0) scale(1)}
  50%,70%{transform:rotate(-90deg) scale(1.08)}
  100%{transform:rotate(-90deg) scale(1)}
}
.rotate-title{font-size:1.1rem;font-weight:800;letter-spacing:.08em;background:linear-gradient(90deg,var(--ac-sky),var(--ac-lilac));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.rotate-sub{font-size:.82rem;color:var(--ink-muted);line-height:1.6;max-width:280px}

/* 縦向きスマホでは回転を促す */
@media(orientation:portrait) and (max-width:900px){
  body > *:not(#rotate-prompt){display:none!important}
  #rotate-prompt{display:flex}
}

/* ════════════════════════════════
   横向きスマホ (高さ ≤ 540px)
   --hdr を小さくするだけで --s は自動追従
   サイドパネルを非表示にして中央を全幅化
   ════════════════════════════════ */
@media(orientation:landscape) and (max-height:540px){
  :root{
    --hdr: max(3vh, 22px);
    --left-w: 0px;
    --log-w: 0px;
  }
  #game{
    grid-template-columns: 1fr;
    grid-template-areas: "hd" "center";
  }
  /* 左パネル: ステータスだけ浮動表示、プレビュー/詳細は隠す */
  .left-panel{
    position:fixed; inset:var(--hdr) 0 auto 0;
    display:flex;flex-direction:row;justify-content:space-between;
    background:transparent;border:none;padding:0;gap:0;
    z-index:30;pointer-events:none;
  }
  .left-panel > .card-preview-wrap,
  .left-panel > .card-detail-wrap{ display:none; }
  .left-panel > .pstat-h{
    pointer-events:auto;
    width:auto;max-width:30vw;
    margin:.25rem .4rem;padding:.25rem .4rem;
    gap:.18rem;border-radius:.4rem;
  }
  .left-panel .pstat-name{ font-size:.7rem; }
  .left-panel .pstat-lp-val{ font-size:.78rem; }
  .left-panel .pstat-lp-bar{ height:3px; }
  .left-panel .pstat-badges{ gap:.18rem; }
  .left-panel .pstat-b{ padding:.12rem 0; border-radius:.2rem; }
  .left-panel .pstat-b .bv{ font-size:.62rem; }
  .left-panel .pstat-b .bl{ font-size:.46rem;margin-top:.15em; }
  .log-col{
    display:none;
    position:fixed;bottom:0;left:0;right:0;
    height:45vh;z-index:40;
    background:rgba(10,15,30,.97);
    border-top:1px solid rgba(255,255,255,.1);
  }
  .log-col.mob-on{ display:flex; }
  .log-toggle{ display:flex; }
  .g-header{ gap:.3rem; padding:0 .4rem; }
  .g-header-title{ font-size:.6rem; letter-spacing:.05em; }
  .turn-info{ display:none; }
}