/* 横画面前提のレイアウト。
   左に盤面と手札、右に「いま何を選ぶか」と進行ログを固定で置く。
   カードの大きさは画面の高さから逆算するので、端末が変わっても崩れない。 */
:root{
  --mat:#0d1b30;               /* 盤面の地 */
  --deep:#050a14;
  --line:#2f6ba8;
  --line2:#1b3a5c;
  --glow:#46c8ff;              /* ゾーンの発光 */
  --gold:#f2cd63;
  --text:#e9f1fb;
  --dim:#9db4cc;
  --dim2:#6b8199;
  --me:#46c8ff;
  --opp:#ff6b6b;
  --panel:196px;              /* 右側の幅 */
  --oscale:0.88;              /* 相手側の大きさ（奥は小さく、手前を大きく） */
  --gap:4px;
  /* 端末のノッチ・ホームバーの逃げ。#app がこの分の余白を取るので、
     **カードの大きさもここを差し引いてから決める**。
     引かないと iPhone の横持ちで盤面が入りきらずズレる（左右47px前後・下21px前後）。
     変数にしてあるのは、確認のときに好きな値に差し替えられるようにするため。 */
  --sat:env(safe-area-inset-top, 0px);
  --sab:env(safe-area-inset-bottom, 0px);
  --sal:env(safe-area-inset-left, 0px);
  --sar:env(safe-area-inset-right, 0px);
  /* 盤面は4段（相手モンスター・相手魔法罠・自分魔法罠・自分モンスター）＋手札。
     手札は少し小さくして、盤面のカードを大きく取る。
     **高さと幅の小さい方に合わせる。** 高さだけで決めると、横長で背の低い画面や
     ノッチのある端末で横にはみ出す（実測: 盤面の幅はカード高さの約5.62倍）。 */
  --ch:min(
    calc((100dvh - var(--sat) - var(--sab) - 8px) / 4.42),
    calc((100vw - var(--sal) - var(--sar) - var(--panel) - 12px) / 5.62)
  );
  --cw:calc(var(--ch) * 59 / 86);
  /* 公式マット画像の桝目の比率（カード幅を基準にした余白）。
     この値でグリッドの隙間を作ると、下地の絵と桝がぴったり重なる。 */
  --cgap:calc(var(--cw) * 0.1488);
  --rgap:calc(var(--cw) * 0.0986);
  --hh:calc(var(--ch) * 0.74);
  --hw:calc(var(--hh) * 59 / 86);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* 二度押しの拡大待ちを無くし、押した瞬間に反応させる */
#app,#app *{touch-action:manipulation;}
html,body{margin:0;height:100%;overflow:hidden;}
body{
  background:
    radial-gradient(120% 70% at 50% 42%, rgba(90,205,255,.16), transparent 60%),
    repeating-linear-gradient(115deg, rgba(90,205,255,.045) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(65deg, rgba(90,205,255,.045) 0 1px, transparent 1px 46px),
    linear-gradient(180deg,#1b3355 0%, #16294a 45%, #0d1a30 100%);
  color:var(--text);
  font-family:'Noto Sans JP',system-ui,sans-serif;
  font-size:13px;line-height:1.5;
}
#app{
  display:flex;height:100dvh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ── 左：盤面（デュエルアリーナ風の明るい下地） ── */
#left{
  flex:1;min-width:0;display:flex;flex-direction:column;
  padding:1px 2px 2px;gap:0;position:relative;
  background:
    radial-gradient(70% 46% at 50% 40%, rgba(95,205,255,.28), transparent 70%),
    radial-gradient(60% 50% at 8% 4%, rgba(255,130,95,.16), transparent 62%),
    radial-gradient(60% 55% at 94% 100%, rgba(80,235,205,.18), transparent 60%),
    radial-gradient(80% 60% at 50% 110%, rgba(120,120,255,.14), transparent 60%),
    linear-gradient(180deg,#1a3358 0%,#15294a 42%,#102038 72%,#0c1a2e 100%);
}
/* 賑やかなイラストの下地。対戦開始時に JS が --arena を差し込む。
   ぼかして暗く落とし、マットとカードの邪魔をしない。 */
#left::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--arena, none) center/cover no-repeat;
  filter:blur(6px) brightness(.5) saturate(1.18) contrast(1.02);
}
/* イラストの上に色と光を重ねる：中央のスポット・隅のアクセント光・床のライン。
   ゆっくり息をする。 */
#left::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 26% at 50% 1%, rgba(110,215,255,.34), transparent 72%),
    radial-gradient(28% 34% at 2% 46%, rgba(255,135,95,.20), transparent 72%),
    radial-gradient(28% 34% at 98% 54%, rgba(85,240,210,.20), transparent 72%),
    radial-gradient(120% 78% at 50% 42%, transparent 44%, rgba(6,14,28,.62) 100%),
    repeating-linear-gradient(90deg, rgba(120,215,255,.055) 0 1px, transparent 1px 74px),
    linear-gradient(180deg, rgba(10,22,40,.30) 0%, transparent 26%, transparent 62%, rgba(8,16,30,.5) 100%);
  animation:arenaPulse 6.5s ease-in-out infinite;
}
@keyframes arenaPulse{50%{filter:brightness(1.14);}}
@media (prefers-reduced-motion: reduce){#left::after{animation:none;}}

/* 奥へ傾けたマット。ゾーンと山札はこの上に乗る */
#field{
  flex:1;display:flex;align-items:center;justify-content:center;min-height:0;position:relative;
  z-index:1;perspective:760px;perspective-origin:50% 82%;
}
/* マットは公式と同じ 7列×2段のグリッド。マス＝グリッドのセルなので、
   下地の色柄とカードの位置は原理的にずれない。
   相手側は同じグリッドを縮小して奥に置く（180度回転は board.js が並びで表現）。 */
.mat{
  display:flex;flex-direction:column;align-items:center;gap:0;width:max-content;margin:0 auto;
  /* --matfit と --matdy は描画のたびに JS が実測して入れる（fitMat）。
     枠からはみ出したまま置くと、下の段が手札に潜り込んで押せなくなる。 */
  transform:translateY(var(--matdy,0px)) rotateX(18deg) scale(var(--matfit,1));
  transform-origin:50% 100%;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.55));
}
/* ※ .side はサイドチェンジ画面の列(.scol.side)にも付くので、必ず .mat 配下に限定する */
.mat > .side{
  display:grid;
  grid-template-columns:repeat(7,var(--cw));
  grid-template-rows:repeat(2,var(--ch));
  column-gap:var(--cgap);row-gap:var(--rgap);
  padding:var(--rgap) var(--cgap);
  position:relative;
  background:url(/field.jpg?v=5) 0 0 / 100% 100% no-repeat, #0c0a08;
}
/* 相手側：公式マットの絵を180度回したもの。大きさは奥へ少しだけ縮める */
.mat > .side.flip{
  background-image:url(/field_flip.jpg?v=5);
  transform:scale(var(--oscale));transform-origin:50% 100%;
  /* 縮小で上に空く分を詰める */
  margin-top:calc((var(--oscale) - 1) * (2 * var(--ch) + var(--rgap)));
}
/* 空きマスは下の絵が透けるガラス板。枠色だけゾーン種別で変える */
.mat .card.empty{
  border:1px solid rgba(210,225,245,.28);border-radius:4px;
  background:linear-gradient(160deg,rgba(160,210,255,.10),rgba(40,80,120,.05) 60%,rgba(10,25,45,.08));
  box-shadow:inset 0 0 10px rgba(70,200,255,.10);
}
.mat .mzone .card.empty{border-color:rgba(255,180,120,.45);}
.mat .szone .card.empty{border-color:rgba(120,220,255,.4);}
.mat .fieldzone .card.empty{border-color:rgba(150,235,140,.45);}
.mat .card.empty::after{opacity:.35;}

/* 除外ゾーンはマットに枠が無いので、墓地の外側（自分は右／相手は反対側）に別に作る。
   自分の墓地は右上・相手の墓地は左下に来るので、それぞれ外へ寄せる。 */
.side > .banishcorner{
  position:absolute;z-index:4;
  left:calc(100% + var(--cgap) * .5);top:var(--rgap);
  width:calc(var(--cw) * .68);height:calc(var(--ch) * .68);
}
.side.flip > .banishcorner{
  left:auto;top:auto;
  right:calc(100% + var(--cgap) * .5);bottom:var(--rgap);
}
.side > .pile.banishcorner{
  border-color:rgba(195,150,255,.5);
  background:linear-gradient(160deg,rgba(46,24,68,.44),rgba(22,12,38,.56));
  box-shadow:inset 0 0 12px rgba(150,90,220,.22),0 2px 8px rgba(0,0,0,.4);
}
.side > .banishcorner span{font-size:8px;}
.side > .banishcorner b{font-size:13px;}

/* 中央の仕切り */
.divider{
  height:5px;width:80%;position:relative;z-index:2;margin:-2px 0;
  background:linear-gradient(90deg,transparent,rgba(70,200,255,.35) 12%,rgba(70,200,255,.5) 50%,rgba(70,200,255,.35) 88%,transparent);
  box-shadow:0 0 12px rgba(70,200,255,.4);
}
.divider i{
  position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;
  background:radial-gradient(circle,#8fe3ff 0%,#2b6f9c 60%,transparent 70%);
}
.divider i:first-child{left:22%;}
.divider i:last-child{right:22%;}

.cell{width:var(--cw);height:var(--ch);position:relative;}
.side .cell.pressing{transform:scale(.95);}
.side > .pile{width:var(--cw);height:var(--ch);margin:0;}

.card{
  width:100%;height:100%;border-radius:3px;overflow:hidden;position:relative;
  background:rgba(255,255,255,.03);border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;
}
/* タップした瞬間に少し光って、押したことが分かるようにする */
.card{transition:filter .1s ease-out;}
.card.pressing{filter:brightness(1.22);}
/* 空きゾーンはガラスの板のように */
.card.empty{
  border:1px solid rgba(120,215,255,.45);border-radius:5px;
  background:linear-gradient(160deg,rgba(120,215,255,.20) 0%,rgba(70,160,220,.07) 45%,rgba(20,60,100,.10) 100%);
  box-shadow:inset 0 1px 0 rgba(190,240,255,.35),inset 0 0 14px rgba(70,200,255,.16),0 1px 2px rgba(0,0,0,.4);
}
.card.empty::after{
  content:"";width:26%;aspect-ratio:1;transform:rotate(45deg);
  border:1px solid rgba(150,225,255,.45);
}
.szone .card.empty::after{border-radius:50%;transform:none;width:20%;}
.side:first-child .card.empty{
  border-color:rgba(180,150,220,.4);
  background:linear-gradient(160deg,rgba(180,150,220,.16) 0%,rgba(90,70,130,.06) 50%,rgba(40,30,60,.10) 100%);
  box-shadow:inset 0 1px 0 rgba(220,200,240,.25),inset 0 0 14px rgba(150,120,190,.14);
}
.card img{width:100%;height:100%;object-fit:cover;display:block;}
.card.back{
  background:#160a08 url(/back.jpg) center/cover no-repeat;border-color:#9a4327;
}
.card.back::before,.card.back::after{display:none;}
.card.def{transform:rotate(90deg) scale(.7);}
/* 攻守の数値。8.5pxでは小さすぎて読めないと報告があったので、
   カードの大きさに合わせて伸ばし、下地も濃くして読めるようにする。 */
.card .stat{
  position:absolute;left:0;right:0;bottom:0;font-style:normal;
  font-size:clamp(9.5px,calc(var(--ch) * 0.105),14px);
  font-weight:700;letter-spacing:-.02em;line-height:1.35;
  text-align:center;background:rgba(0,0,0,.82);color:#ffe9a8;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
}
.card.mydown{filter:brightness(.62) saturate(.7);}
.card.mydown.pressing{filter:brightness(.8) saturate(.75);}
/* 自分の伏せカードは中身が見えるようにしてあるので、表側のカードと
   見分けが付かなくなる（同じカードを2枚置くと、どちらが表か分からないと報告あり）。
   暗くするだけでなく、はっきり「伏せ」と出す。 */
.card.mydown::after{
  content:"伏せ";position:absolute;top:1px;right:1px;
  font-size:9.5px;font-weight:700;line-height:1.15;padding:2px 4px;border-radius:3px;
  background:rgba(8,14,26,.88);color:#ffe9a8;border:1px solid rgba(245,220,160,.45);
}
/* **伏せてあっても発動できるカードは、暗くしない。**
   brightness を掛けると光り方（outline と box-shadow）まで沈んでしまい、
   発動できるのに気づかれない。「セットすると使えない」という報告が
   いちばん多かったのがこれ（実際には押せば発動できていた）。 */
.card.mydown.sel{
  filter:none;
  outline:2px solid var(--gold);outline-offset:1px;
  box-shadow:0 0 16px rgba(242,205,99,.9), 0 0 0 3px rgba(242,205,99,.3);
}
/* 伏せカードの右上の札を「伏せ」から「発動」に変えて、使えることをはっきり出す。
   モンスターゾーンは反転召喚など別の手があるので、魔法・罠ゾーンだけ。 */
.szone .card.mydown.sel::after{
  content:"発動";
  background:var(--gold);color:#2a1e02;border-color:rgba(255,248,220,.85);
}
.card.pick{outline:2px solid var(--me);outline-offset:1px;box-shadow:0 0 10px rgba(70,200,255,.55);}

/* いま押せるカード */
.card.sel{
  cursor:pointer;outline:2px solid var(--gold);outline-offset:1px;
  box-shadow:0 0 12px rgba(242,205,99,.55);animation:beat 1.7s ease-in-out infinite;
}
.card.sel.pick{outline-color:var(--me);animation:none;}
@keyframes beat{50%{box-shadow:0 0 3px rgba(242,205,99,.2);}}
.card.focus{outline:2px dashed var(--gold);outline-offset:2px;}
.zsel .card.empty{
  cursor:pointer;border-color:var(--gold);
  background:linear-gradient(160deg,rgba(242,205,99,.28),rgba(242,205,99,.08));
  animation:beat 1.7s ease-in-out infinite;
}
.zsel .card.empty::after{content:"＋";color:var(--gold);font-size:15px;line-height:1;border:0;width:auto;}

/* 山札・墓地・除外 */
.pile{
  position:relative;height:calc(var(--ch) * .5);width:calc(var(--ch) * .5 * 59 / 86);margin:0 auto;
  border:1px solid rgba(120,215,255,.4);border-radius:3px;
  background:linear-gradient(150deg,#1e4a75 0%,#12304f 55%,#0d1e38 100%);
  box-shadow:2px 2px 0 rgba(255,255,255,.06),3px 3px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(190,240,255,.3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;
}
/* マット上の束（デッキ・墓地・EX）はセル一杯のカード大。下の絵を活かして枠だけ薄く */
.side > .pile{
  width:var(--cw);height:var(--ch);margin:0;border-radius:4px;
  border:1px solid rgba(210,225,245,.28);
  background:linear-gradient(160deg,rgba(10,20,35,.34),rgba(6,14,26,.5));
  box-shadow:inset 0 0 10px rgba(0,0,0,.4);
}
.side > .pile.grave{border-color:rgba(200,210,220,.4);}
.side > .pile.extra{border-color:rgba(180,150,220,.42);}
.side > .pile.empty0{background:linear-gradient(160deg,rgba(10,20,35,.16),rgba(6,14,26,.24));}
.pile b{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:#eaf6ff;z-index:1;}
.pile span{font-size:7px;color:#9fc6e8;z-index:1;white-space:nowrap;letter-spacing:-.02em;}
.side > .pile b{font-size:15px;color:#fff;text-shadow:0 1px 3px #000,0 0 6px #000;}
.side > .pile span{font-size:9px;color:#e6dcc8;text-shadow:0 1px 2px #000;letter-spacing:0;}
/* 山札はカード裏の絵。枚数が読めるよう下に暗がりを敷く */
.pile.deck,.side > .pile.deck{
  background:#160a08 url(/back.jpg) center/cover no-repeat;border-color:#9a4327;
  overflow:hidden;
}
.pile.deck::before{
  content:"";position:absolute;inset:0;border-radius:3px;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,transparent 35%,rgba(0,0,0,.78) 100%);
}
.pile.deck b{color:#fff;text-shadow:0 1px 3px #000,0 0 6px #000;}
.pile.deck span{color:#ffd7c4;text-shadow:0 1px 2px #000;}
.pile.empty0{background:rgba(255,255,255,.03);border-color:var(--line2);box-shadow:none;}
.pile.empty0 b{color:var(--dim2);}
.pile.tap{cursor:pointer;}
.pile.tap:active{filter:brightness(1.4);}
/* フィールド魔法の枠は縦向き。山札の列に収まる大きさにする */
.fieldzone{width:var(--cw);height:var(--ch);}
.fieldzone .card{width:100%;height:100%;}

/* ライフの名札。傾けない */
.lpplate{
  position:absolute;z-index:9;display:flex;align-items:center;gap:6px;
  padding:4px 10px 4px 4px;border-radius:3px;pointer-events:none;
  background:linear-gradient(100deg,rgba(6,16,30,.94),rgba(10,30,52,.86));
  border:1px solid var(--line2);
  transform:skewX(-12deg);
}
.lpplate > *{transform:skewX(12deg);}
.lpplate.opp{top:0;right:0;border-color:rgba(255,107,107,.45);}
/* 自分の名札は手札の高さまで下げる（除外の山と重ならないように） */
.lpplate.mine{bottom:calc(var(--ch) * -0.46);left:0;border-color:rgba(70,200,255,.5);}
.lpplate .face{
  width:26px;height:26px;flex:0 0 26px;border-radius:2px;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:700;
  background:linear-gradient(160deg,#24405f,#0f1c2e);border:1px solid var(--line2);color:#cfe4f7;
}
.lpplate.opp .face{border-color:rgba(255,107,107,.5);color:#ffc9c9;}
.lpplate .body{display:flex;flex-direction:column;min-width:74px;}
.lpplate .who{font-size:9px;color:var(--dim2);letter-spacing:.08em;display:flex;gap:6px;align-items:baseline;}
.lpplate .hnum{font-style:normal;font-size:9px;color:#8fb6d8;}
.lpplate .lprow{display:flex;align-items:baseline;gap:4px;}
.lpplate .lprow em{font-style:normal;font-size:8.5px;color:var(--dim2);letter-spacing:.1em;}
.lpplate .lp{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;}
.lpplate.mine .lp{color:#7fdcff;}
.lpplate.opp .lp{color:#ff8a8a;}
.lpplate .gauge{display:block;height:3px;margin-top:2px;border-radius:2px;overflow:hidden;background:rgba(0,0,0,.55);}
.lpplate .gauge i{display:block;height:100%;transition:width .5s ease-out;}
.lpplate.mine .gauge i{background:linear-gradient(90deg,#2aa8e0,#7fdcff);}
.lpplate.opp .gauge i{background:linear-gradient(90deg,#c0392b,#ff8a8a);}

#hand{
  display:flex;gap:var(--gap);overflow:visible;align-items:center;justify-content:center;
  height:calc(var(--hh) + 16px);margin-top:-4px;position:relative;z-index:7;
  scrollbar-width:none;flex:0 0 auto;
}
/* 手札の帯は札より横に広く、自分のエクストラと山札の上に乗ってしまう。
   箱そのものは触れないようにして、札だけが反応するようにする。
   （エクストラが開けない・押せないという報告の原因） */
#hand{pointer-events:none;}
#hand .cell,#hand .card{pointer-events:auto;}
#hand::-webkit-scrollbar{display:none;}
#hand .cell{flex:0 0 var(--hw);width:var(--hw);height:var(--hh);}

/* 相手の手札（伏せ札を上部に並べる） */
#ohand{
  display:flex;gap:3px;align-items:flex-start;justify-content:center;
  height:calc(var(--ch) * .38);flex:0 0 auto;position:relative;z-index:6;
  overflow:visible;pointer-events:none;
}
/* 相手の手札が0枚でも高さは確保し続ける（フィールドが上下にずれないように） */
/* **枠の高さ(.38)より大きくしない。** 大きいと overflow:visible ではみ出した分が
   下の盤面に重なり、背の低い画面（iPhone の横持ちなど）で相手の場が隠れる。 */
#ohand .ocell{
  flex:0 0 calc(var(--cw) * .5);width:calc(var(--cw) * .5);height:calc(var(--ch) * .38);
}
#ohand .card.back{width:100%;height:100%;border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.5);}
/* 積まれているチェーン。盤面の右脇に、下から順に積み上げる */
#chain{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  padding:6px 8px;border-bottom:1px solid var(--line2);background:rgba(227,193,90,.06);
  flex:0 0 auto;max-height:82px;overflow-y:auto;
}
#chain[hidden]{display:none;}
.chainttl{
  font-size:10px;color:var(--gold);letter-spacing:.06em;white-space:nowrap;
  width:100%;margin-bottom:1px;
}
.chaincard{
  position:relative;width:30px;cursor:pointer;line-height:0;
  border-radius:2px;overflow:hidden;border:1px solid var(--line2);
}
.chaincard.mine{border-color:var(--me);}
.chaincard.theirs{border-color:var(--opp);}
/* いま解決している段。上から順ではなく、積んだ逆順に光る */
.chaincard.solving{
  border-color:var(--gold);box-shadow:0 0 10px rgba(242,205,99,.85);
  transform:scale(1.14);z-index:2;
}
.chaincard img{width:100%;aspect-ratio:59/86;object-fit:cover;display:block;}
.chaincard i{
  position:absolute;top:0;left:0;font-style:normal;font-size:8px;line-height:1;
  padding:1px 3px;background:rgba(0,0,0,.75);color:var(--gold);border-radius:0 0 3px 0;
}

/* ── 右：操作 ── */
#right{
  width:var(--panel);flex:0 0 var(--panel);
  border-left:1px solid rgba(95,200,255,.32);
  background:linear-gradient(180deg, rgba(24,48,78,.86) 0%, rgba(15,32,54,.82) 55%, rgba(11,24,42,.84) 100%);
  box-shadow:-10px 0 34px rgba(0,0,0,.34), inset 1px 0 0 rgba(130,215,255,.16);
  display:flex;flex-direction:column;min-height:0;
}
#top{
  display:flex;align-items:baseline;gap:6px;padding:6px 8px;
  border-bottom:1px solid rgba(95,200,255,.28);
  background:linear-gradient(180deg, rgba(90,200,255,.14), transparent);
}
#top .ttl{font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.04em;text-shadow:0 0 10px rgba(242,205,99,.4);}
#top .phase{margin-left:auto;font-size:11px;color:var(--me);white-space:nowrap;}
#top .ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 右の欄は上から 見出し・フェイズ帯・チェーン・選ぶところ・ログ の順。
   チェーンが出ている間は縦が足りなくなるので、
   「選ぶところ」には必ず高さを残し、ログの方を縮める。
   ここを 0 まで縮ませると、選択肢がログの下に潜って押せなくなる。 */
#ask{
  padding:8px;border-bottom:1px solid var(--line2);
  flex:1 1 auto;min-height:98px;overflow-y:auto;
  display:flex;flex-direction:column;
}
.asktitle{margin:0 0 2px;font-size:12.5px;font-weight:700;color:var(--gold);}
.askhint{margin:0 0 4px;font-size:10.5px;color:var(--dim2);}
.opts{display:flex;flex-direction:column;gap:4px;overflow-y:auto;min-height:0;}
.opt{
  width:100%;padding:7px 8px;min-height:34px;cursor:pointer;text-align:left;
  background:rgba(70,200,255,.12);border:1px solid var(--line);
  color:var(--text);font:inherit;font-size:11.5px;border-radius:4px;
  display:flex;align-items:center;gap:6px;
}
.opt:active{background:rgba(70,200,255,.3);}
.opt.sub{background:rgba(255,255,255,.05);border-color:var(--line2);color:var(--dim);}
.opt[disabled]{opacity:.45;}
.opt img{width:20px;height:29px;object-fit:cover;border-radius:2px;flex:0 0 20px;}
.askfoot{margin-top:5px;display:flex;gap:4px;}
.askfoot .opt{flex:1;justify-content:center;}

#log{
  list-style:none;margin:0;padding:6px 8px;overflow-y:auto;
  flex:1 1 auto;min-height:40px;max-height:50%;
  font-size:10.5px;color:var(--dim);
}
/* 進行ログは足されるたびに、新着だけふわっと入ってくる */
#log li{
  padding:2px 0;border-bottom:1px solid rgba(27,58,92,.5);
  display:flex;align-items:center;gap:6px;
  animation:logIn .22s ease-out;
}
@keyframes logIn{ from{opacity:0;transform:translateY(-3px);} to{opacity:1;transform:translateY(0);} }
#log li img{
  width:17px;height:25px;flex:0 0 17px;object-fit:cover;border-radius:2px;
  border:1px solid var(--line2);cursor:pointer;
}
#log li span{flex:1;min-width:0;}

/* ── 縦持ちのときの案内 ── */
#rotate{
  position:fixed;inset:0;z-index:60;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--deep);color:var(--dim);
}
#rotate .ricon{
  font-size:52px;color:var(--me);transform:rotate(90deg);
  animation:tip 1.8s ease-in-out infinite;
}
@keyframes tip{0%,100%{transform:rotate(90deg);}50%{transform:rotate(0deg);}}
#rotate .rsub{font-size:12px;color:var(--dim2);max-width:22em;text-align:center;line-height:1.7;}
@media (orientation:portrait){
  #rotate{display:flex;}
}

/* ── 起動中 ── */
#boot{
  position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  background:var(--deep);color:var(--dim);font-size:13px;
}
#boot.done{display:none;}
.bar{width:200px;height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;}
.bar i{display:block;height:100%;width:0;background:var(--me);transition:width .2s;}

@media (max-width:720px){ :root{--panel:186px;} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* カード名の宣言で使う検索欄 */
.namesearch{
  width:100%;padding:7px 8px;margin-bottom:4px;
  background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:4px;
  color:var(--text);font:inherit;font-size:12px;outline:none;
}
.namesearch:focus{border-color:var(--me);}
/* カウンターの増減 */
.step{
  width:26px;height:24px;flex:0 0 26px;border-radius:3px;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid var(--line2);
  color:var(--text);font:inherit;font-size:13px;line-height:1;
}

/* 山札の中身・カード拡大 */
#viewer{
  position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;
  background:rgba(5,10,20,.95);backdrop-filter:blur(3px);
}
#viewer[hidden]{display:none;}
.vhead{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-bottom:1px solid var(--line2);font-size:13px;color:var(--gold);font-weight:700;
}
.vhead button{
  margin-left:auto;padding:6px 14px;cursor:pointer;font:inherit;font-size:12px;
  background:rgba(255,255,255,.07);border:1px solid var(--line2);
  color:var(--text);border-radius:4px;
}
#vbody{
  flex:1;overflow-y:auto;padding:10px;display:flex;flex-wrap:wrap;gap:8px;
  align-content:flex-start;justify-content:center;
}
.vcard{margin:0;width:72px;cursor:pointer;position:relative;}
.vcard img{width:100%;border-radius:3px;border:1px solid var(--line2);display:block;}
.vcard figcaption{font-size:9px;color:var(--dim2);margin-top:2px;line-height:1.25;text-align:center;}
.vcard.big{width:auto;max-width:min(46vw,240px);}
.vcard.big img{width:100%;}
/* 一覧の中で、いま使えるカード（エクストラからの特殊召喚、墓地・除外の起動効果） */
.vcard.usable img{
  border-color:var(--gold);box-shadow:0 0 12px rgba(242,205,99,.6);
  animation:beat 1.7s ease-in-out infinite;
}
.vcard.usable figcaption{color:#ffe9a8;}
.vcard .vtag{
  position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
  font-style:normal;font-size:10px;font-weight:700;white-space:nowrap;
  padding:3px 9px;border-radius:3px;
  background:linear-gradient(180deg,#f2cd63,#c89a2c);color:#221704;
  box-shadow:0 2px 8px rgba(0,0,0,.6);
}
.pile.tap{cursor:pointer;border-color:var(--line);}
.pile.tap:active{background:rgba(70,200,255,.18);}
/* 束の中に使えるカードがあるときは、束そのものを光らせる */
.pile.has{
  border-color:var(--gold);
  box-shadow:0 0 12px rgba(242,205,99,.65),2px 2px 0 rgba(255,255,255,.06);
  animation:beat 1.7s ease-in-out infinite;
}
.pile.has::after{
  content:"";position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px rgba(242,205,99,.9);
}

/* 最初のホーム画面（タップでロビーへ） */
#home{
  position:fixed;inset:0;z-index:66;cursor:pointer;overflow:hidden;
  background:#05060b center/cover no-repeat;
  display:flex;align-items:flex-end;justify-content:center;
  transition:opacity .45s ease;
}
#home[hidden]{display:none;}
/* メニューへ移る間：薄くなりつつも前面に残り、はみ出しタップを吸う */
#home.fadeout{opacity:0;}
#home .hgrad{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(2,7,15,.30) 0%, rgba(2,7,15,.12) 38%, rgba(2,7,15,.55) 72%, rgba(2,7,15,.92) 100%);
}
#home .hinner{position:relative;text-align:center;padding:0 16px 8vh;}
#home h1{
  margin:0;line-height:.95;
  font-family:'Orbitron','Noto Sans JP',sans-serif;font-weight:900;
  font-size:clamp(54px,16vw,124px);letter-spacing:.04em;
  background:linear-gradient(180deg,#ffffff 0%,#cfe8ff 42%,#4fb0ff 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 22px rgba(0,0,0,.85)) drop-shadow(0 0 46px rgba(70,200,255,.45));
}
#home .htap{
  margin:min(7vh,54px) 0 0;font-size:clamp(13px,2.5vh,17px);color:#e2efff;letter-spacing:.2em;
  text-shadow:0 2px 12px rgba(0,0,0,.95);animation:htap 1.5s ease-in-out infinite;
}
@keyframes htap{0%,100%{opacity:.4;}50%{opacity:1;}}
@media (prefers-reduced-motion:reduce){ #home .htap{animation:none;opacity:.9;} }
/* 非公式である断り。読めるが邪魔にならない大きさで画面の一番下に置く。
   ノッチやホームバーの内側に収める。 */
#home .hnote{
  position:absolute;left:0;right:0;
  bottom:max(6px,env(safe-area-inset-bottom));
  margin:0;padding:0 max(14px,env(safe-area-inset-left));
  text-align:center;line-height:1.5;
  font-size:clamp(8.5px,1.5vh,10.5px);
  color:rgba(200,215,235,.5);text-shadow:0 1px 6px rgba(0,0,0,.9);
  pointer-events:none;
}
/* 権利者向けの窓口。断り書きの中だけ触れるようにする
   （ホーム画面はどこを押しても対戦が始まるため） */
#home .hcontact{
  pointer-events:auto;margin-top:3px;
}
#home .hcontact summary{
  display:inline-block;cursor:pointer;list-style:none;
  padding:2px 10px;border-radius:999px;
  border:1px solid rgba(200,215,235,.28);
  color:rgba(200,215,235,.62);
}
#home .hcontact summary::-webkit-details-marker{display:none;}
#home .hcontact summary::marker{content:"";}
#home .hcontact[open] summary{opacity:.6;}
#home .hcontact span{
  display:block;margin-top:4px;line-height:1.7;
  color:rgba(215,228,245,.72);
}
#home .hcontact b{color:#ffe9a8;font-weight:700;user-select:all;}

/* 対戦の始め方 */
#lobby{
  position:fixed;inset:0;z-index:65;display:flex;
  overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px;
  background:
    linear-gradient(180deg, rgba(6,8,18,.62) 0%, rgba(6,8,18,.42) 35%, rgba(4,5,12,.82) 100%),
    url(./home_bg.jpg?v=2) center/cover no-repeat,
    var(--deep);
}
#lobby[hidden]{display:none;}
/* 商業カードゲームのメインメニュー風。画面に必ず収める（flex列＋高さ上限）。
   配置：左上ロゴ・左下ユーザー名／右上左AI対戦・右上右デッキ／右下オンライン。 */
.lbox{
  position:relative;margin:auto;
  width:min(940px,96vw);max-height:calc(100dvh - 30px);
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(12px,2.2vh,20px);
  background:linear-gradient(158deg, rgba(13,22,42,.87), rgba(7,12,26,.83));
  border:1px solid rgba(110,205,255,.32);border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(150,220,255,.2);
  backdrop-filter:blur(7px);
}
#ver{
  position:fixed;right:10px;bottom:8px;z-index:66;
  font-size:10px;letter-spacing:.03em;color:var(--dim2);opacity:.6;pointer-events:none;
}
/* 中断した対戦へ戻る帯（ロビーの一番上） */
#resumeBar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:10px;padding:8px 12px;border-radius:8px;
  background:linear-gradient(90deg,rgba(242,205,99,.16),rgba(242,205,99,.05));
  border:1px solid rgba(242,205,99,.45);
}
#resumeBar[hidden]{display:none;}
#resumeText{flex:1;min-width:180px;font-size:12.5px;color:var(--gold);}
#resumeBar .lbtn{flex:0 0 auto;min-width:104px;padding:8px 14px;}
/* 縦の狭い端末では、下の並びを押し下げないように小さく出す */
@media (max-height:470px){
  #resumeBar{padding:5px 10px;margin-bottom:6px;gap:6px;}
  #resumeText{min-width:120px;font-size:11px;}
  #resumeBar .lbtn{min-width:82px;padding:6px 10px;font-size:11.5px;}
}

.lreport{
  position:fixed;left:10px;bottom:6px;z-index:66;
  padding:4px 9px;font:inherit;font-size:10.5px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:11px;
  color:var(--dim2);opacity:.75;
}
.lreport:active{opacity:1;background:rgba(255,255,255,.14);}

.lgrid{
  flex:1;min-height:0;display:grid;gap:clamp(8px,1.6vh,13px);
  grid-template-columns:1.35fr 1fr 1fr;
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
}
.lbrand {grid-area:1 / 1 / 2 / 2;}
/* 左下：Discord の案内＋ユーザーネームの縦積み。下端に寄せる。 */
.lleft  {grid-area:2 / 1 / 3 / 2;min-width:0;
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;}
.lsolo  {grid-area:1 / 2 / 2 / 3;}
.ldeckg {grid-area:1 / 3 / 2 / 4;}
.lonline{grid-area:2 / 2 / 3 / 4;}

/* 左上：ロゴ */
.lbrand{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:6px 8px;
}
.lmark{
  font-family:'Orbitron','Noto Sans JP',sans-serif;font-weight:900;
  font-size:clamp(34px,7.2vh,64px);line-height:.84;letter-spacing:.02em;
  background:linear-gradient(180deg,#ffffff,#c6e9ff 46%,#4fb0ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(80,200,255,.4));
}
.ltag{
  font-family:'Orbitron','Noto Sans JP',sans-serif;font-weight:700;
  font-size:clamp(8px,1.3vh,10px);letter-spacing:.4em;color:#8fd0ff;text-indent:.4em;
}
.lbrand .sub{margin:3px 0 0;font-size:clamp(9px,1.4vh,11px);color:var(--dim2);letter-spacing:.03em;}

/* 左下：ユーザーネーム（タップで編集） */
.luser{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding:10px 12px;border-radius:11px;cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(120,190,240,.22);
}
.luser:hover{border-color:rgba(150,220,255,.55);}
.unameShow{
  font-size:clamp(14px,2.4vh,19px);font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.unameShow.unset{color:var(--dim2);font-weight:500;}
.unameShow::before{content:"👤 ";font-size:.8em;}
#uname{
  padding:8px 10px;font:inherit;font-size:15px;font-weight:600;color:var(--text);
  background:rgba(0,0,0,.45);border:1px solid var(--me);border-radius:8px;outline:none;width:100%;
}
#uname::placeholder{color:var(--dim2);font-weight:400;}

/* 右側パネル */
.lgroup{
  display:flex;flex-direction:column;gap:clamp(6px,1.2vh,10px);min-height:0;
  padding:clamp(10px,1.8vh,15px);border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid rgba(120,190,240,.2);
}
.lonline{
  background:linear-gradient(180deg, rgba(70,150,220,.15), rgba(30,70,130,.06));
  border-color:rgba(120,205,255,.32);
}
.lgh{
  margin:0;font-size:clamp(9px,1.3vh,10px);font-weight:700;letter-spacing:.15em;color:#8fc4e6;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
}
.lgh::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(120,200,255,.35),transparent);}

.lrow{display:flex;gap:8px;flex:0 0 auto;}
.lgroup > .lbtn{flex:0 0 auto;width:100%;}
.lrow > .lbtn{flex:1 1 0;width:auto;}
.lbtn{
  --bg1:rgba(80,170,235,.18);--bg2:rgba(58,138,208,.09);--bd:rgba(120,205,255,.42);
  padding:clamp(9px,1.7vh,13px) 14px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  color:var(--text);border:1px solid var(--bd);border-radius:9px;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  box-shadow:inset 0 1px 0 rgba(180,230,255,.16), 0 2px 8px rgba(0,0,0,.3);
  transition:transform .1s, box-shadow .15s, background .15s, border-color .15s;
}
.lbtn:hover{transform:translateY(-1px);border-color:rgba(150,220,255,.75);}
.lbtn:active{transform:translateY(0);background:linear-gradient(180deg,rgba(90,180,240,.32),rgba(70,150,215,.2));}
.lbtn.ghost{--bg1:rgba(255,255,255,.055);--bg2:rgba(255,255,255,.02);--bd:rgba(165,195,220,.3);color:var(--dim);font-weight:500;}
.lbtn.ghost:hover{color:var(--text);}
.lbtn.primary{
  align-items:flex-start;display:flex;flex-direction:column;gap:0;
  --bd:rgba(255,216,122,.65);
  background:linear-gradient(180deg,#ffd968,#f0a93a 55%,#e08a2a);
  color:#241704;box-shadow:0 6px 18px rgba(240,160,60,.34), inset 0 1px 0 rgba(255,255,255,.42);
}
.lbtn.primary b{font-size:15px;font-weight:800;letter-spacing:.03em;display:flex;align-items:center;gap:7px;}
.lbtn.primary b::before{content:"▶";font-size:9px;}
.lbtn.primary i{font-style:normal;font-size:10px;font-weight:600;opacity:.72;}
.lbtn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(240,160,60,.5), inset 0 1px 0 rgba(255,255,255,.5);}
.lbtn.primary:active{transform:translateY(0);background:linear-gradient(180deg,#f0c255,#d98525);}

.lpick{
  display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;flex:0 0 auto;
  background:rgba(0,0,0,.28);border:1px solid rgba(120,205,255,.22);
}
#pickName{
  flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#pickName.ng{color:#ffb46b;}
#pickName.ok{color:#8fe0ff;}

#joinCode{
  flex:1;min-width:0;padding:10px 12px;font:inherit;font-size:15px;letter-spacing:.22em;text-align:center;
  background:rgba(0,0,0,.4);border:1px solid rgba(150,180,205,.32);color:var(--text);border-radius:9px;
  outline:none;text-transform:uppercase;
}
#joinCode::placeholder{letter-spacing:.06em;color:var(--dim2);}
#joinCode:focus{border-color:var(--me);box-shadow:0 0 0 2px rgba(70,200,255,.25);}
#btnJoin{flex:0 0 72px;}

.ldeck{
  display:block;padding:8px 10px;text-align:center;cursor:pointer;flex:0 0 auto;
  background:rgba(0,0,0,.22);border:1px dashed rgba(150,180,205,.32);border-radius:9px;
  color:var(--dim2);font-size:10.5px;transition:border-color .15s,color .15s;
}
.ldeck:hover,.ldeck.on{border-color:var(--me);color:var(--text);}
.ldeck.ok{border-style:solid;border-color:var(--me);color:var(--me);}

.lmsg{margin:auto 0 0;font-size:11.5px;color:var(--me);min-height:1.1em;line-height:1.6;text-align:center;}
.lmsg b{font-size:22px;letter-spacing:.3em;color:var(--gold);display:block;margin:3px 0;}
.linstall{margin:0;font-size:10px;text-align:center;flex:0 0 auto;}

/* 縦持ち・狭い画面：ゾーンを縦に積む */
/* 幅の狭い画面では縦1列に積む。ただし**縦向きのときだけ**。
   横向きスマホ（iPhone SE だと 667×375）で1列にすると、
   高さが足りずに下半分が画面の外へ出てしまう。 */
@media (max-width:680px) and (min-height:560px){
  .lbox{width:min(440px,94vw);max-height:calc(100dvh - 12px);overflow-y:auto;}
  .lgrid{display:flex;flex-direction:column;gap:10px;}
  .lbrand{align-items:center;text-align:center;padding-bottom:4px;}
}

/* カードを大きく見たときの説明 */
#vbody.detail{flex-wrap:nowrap;align-items:flex-start;gap:16px;padding:14px;}
.vtext{flex:1;min-width:0;max-width:520px;}
.vmeta{margin:0 0 6px;font-size:11px;color:var(--gold);letter-spacing:.04em;}
.vbody{margin:0;font-size:12.5px;line-height:1.9;color:var(--text);white-space:normal;}

/* メニューは右の欄のいちばん下に置く（スマホだと上の角は親指が届きにくい）。 */
.mini{
  margin-left:6px;padding:2px 8px;cursor:pointer;font:inherit;font-size:13px;line-height:1;
  background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--dim);border-radius:4px;
}
.mini.bgm{margin-left:auto;color:var(--me);}
.mini.bgm.off{color:var(--dim2);position:relative;}
.mini.bgm.off::after{
  content:"";position:absolute;left:50%;top:50%;width:120%;height:1.5px;
  background:currentColor;transform:translate(-50%,-50%) rotate(-32deg);
}
#btnMenu.menubtn{
  margin-top:auto;flex:0 0 auto;width:100%;
  padding:12px 8px;border:0;border-top:1px solid var(--line2);
  background:rgba(255,255,255,.05);color:var(--text);
  font:inherit;font-size:12px;letter-spacing:.06em;cursor:pointer;
}
#btnMenu.menubtn:active{background:rgba(70,200,255,.18);}
#menu{padding:6px 8px;display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--line2);}
#menu[hidden]{display:none;}
#menu .opt{flex:1;justify-content:center;min-height:34px;font-size:11px;}

/* ロビーの下、アプリの入れ方への案内 */
.linstall{margin:4px 0 0;font-size:10.5px;text-align:center;}
.linstall a{color:var(--dim2);text-decoration:none;border-bottom:1px solid var(--line2);}
.linstall a:hover{color:var(--me);border-color:var(--me);}
/* 対戦相手が集まる場所への案内。ここが一番押してほしいので目立たせる */
.ldiscord{margin:0;text-align:center;flex:0 0 auto;}
.ldiscord[hidden]{display:none;}
.ldiscord a{
  display:inline-block;padding:6px 16px;border-radius:999px;
  font-size:11.5px;font-weight:700;text-decoration:none;
  color:#dfe6ff;background:rgba(88,101,242,.22);
  border:1px solid rgba(120,132,255,.55);
}
.ldiscord a:active{background:rgba(88,101,242,.45);}
/* 非公式である断り。ロビーの一番下に小さく */
.lnote{
  margin:3px 0 0;text-align:center;line-height:1.5;
  font-size:clamp(8px,1.3vh,9.5px);color:rgba(190,205,225,.42);
}

/* ── サイドチェンジ ── */
#side{
  position:fixed;inset:0;z-index:62;display:flex;flex-direction:column;
  background:radial-gradient(120% 70% at 50% 0%,rgba(70,200,255,.10),transparent 60%),var(--deep);
}
#side[hidden]{display:none;}
.shead{
  display:flex;align-items:center;gap:12px;padding:8px 14px;
  border-bottom:1px solid var(--line2);
}
#sttl{font-size:14px;font-weight:700;color:var(--gold);letter-spacing:.04em;}
#shint{font-size:11.5px;color:var(--dim2);}
/* サイドチェンジの持ち時間（オンライン対戦だけ） */
#stimer{
  margin-left:auto;display:flex;align-items:baseline;gap:5px;
  padding:3px 12px;border-radius:999px;
  background:rgba(8,18,34,.9);border:1px solid var(--line);
}
#stimer[hidden]{display:none;}
#stimer b{font-size:17px;font-weight:700;color:var(--text);letter-spacing:.03em;}
#stimer i{font-style:normal;font-size:10.5px;color:var(--dim2);}
/* 残り1分を切ったら赤く */
#stimer.warn{background:rgba(120,16,16,.92);border-color:#ff8a8a;
  animation:idlePulse 1s ease-in-out infinite alternate;}
#stimer.warn b{color:#fff;}
#stimer.warn i{color:#ffd9d9;}
/* 抜ける口（降参）は、決定の左に小さく置く */
#sgiveup{
  margin-left:auto;padding:6px 12px;cursor:pointer;font:inherit;font-size:12px;
  border-radius:5px;white-space:nowrap;
}
#sok{
  margin-left:8px;padding:8px 18px;cursor:pointer;font:inherit;font-size:13px;
  background:rgba(70,200,255,.16);border:1px solid var(--line);
  color:var(--text);border-radius:5px;
}
#sok[disabled]{opacity:.4;cursor:default;}
#sok:not([disabled]):active{background:rgba(70,200,255,.32);}
.sbody{flex:1;display:flex;gap:10px;padding:10px 12px;min-height:0;}
.scol{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;}
.scol.side{flex:0 0 34%;border-left:1px solid var(--line2);padding-left:10px;}
.scol h3{
  margin:0 0 6px;font-size:11px;font-weight:700;color:var(--dim);
  letter-spacing:.06em;display:flex;gap:6px;align-items:baseline;
}
.scol h3 b{font-size:14px;color:var(--text);font-variant-numeric:tabular-nums;}
.scol h3 b.bad{color:var(--opp);}
.sgrid{
  flex:1;overflow-y:auto;display:flex;flex-wrap:wrap;gap:4px;
  align-content:flex-start;min-height:0;padding-bottom:6px;
}
.scard{
  width:calc(var(--ch) * 0.52);cursor:pointer;position:relative;flex:0 0 auto;
  border-radius:3px;overflow:hidden;border:1px solid var(--line2);line-height:0;transition:transform .1s cubic-bezier(.3,.85,.35,1);
}
.scard img{width:100%;display:block;aspect-ratio:59/86;object-fit:cover;}
.scard:active{outline:2px solid var(--gold);transform:scale(.94);}
.scard.moved{outline:2px solid var(--me);outline-offset:-2px;}
/* 先攻・後攻を選ぶときは、デッキの列を隠して選択肢だけ出す */
#side.choose .scol h3,#side.choose .scol.side,#side.choose .scol:nth-child(2),#side.choose #sok{display:none;}
#side.choose .sbody{align-items:center;justify-content:center;}
#side.choose .sgrid{flex:0 0 auto;flex-direction:column;gap:10px;align-items:center;}
#side.choose .opt{min-width:200px;justify-content:center;font-size:14px;padding:12px;}

/* ── 進行中の印 ── */
/* 対象に取られたカード。小さな札だけだと気づかれない（報告あり）ので、
   枠ごと光らせて、どれが狙われているか一目で分かるようにする。 */
.card.tgt{
  outline:2px solid #ff7d52;outline-offset:1px;
  box-shadow:0 0 14px rgba(255,125,82,.75);
  /* ゆっくり息をさせて、狙われていることに気づけるようにする */
  animation:tgtBeat 1.1s ease-in-out infinite;
}
@keyframes tgtBeat{50%{box-shadow:0 0 24px rgba(255,125,82,1);}}
/* **対象に取られた自分の伏せカードは暗くしない。**
   伏せカードには brightness が掛かっていて、橙の輪まで沈んでしまい
   どれが狙われているのか分からなかった（同名の伏せが2枚あると特に）。 */
.card.mydown.tgt{filter:none;}
.card.tgt::before{
  content:"対象";position:absolute;top:1px;left:1px;z-index:2;
  font-size:9.5px;font-weight:700;line-height:1.15;padding:2px 4px;border-radius:3px;
  background:rgba(224,86,40,.96);color:#fff;letter-spacing:.04em;
  box-shadow:0 1px 4px rgba(0,0,0,.5);
}
.card.atk{outline:2px solid var(--opp);box-shadow:0 0 12px rgba(224,119,79,.6);}
.card.atkd{outline:2px dashed var(--opp);outline-offset:1px;}

/* ライフの増減をその場に浮かべる */
.pinfo{position:relative;}
.lpfx{
  position:absolute;left:0;right:0;top:30px;pointer-events:none;
  font-style:normal;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  animation:lpup 1.5s ease-out forwards;
}
.lpfx.minus{color:#ff8a6a;}
.lpfx.plus{color:#8ae0a8;}
@keyframes lpup{
  0%{opacity:0;transform:translateY(6px);}
  15%{opacity:1;}
  100%{opacity:0;transform:translateY(-18px);}
}

/* 進行の書き起こし。誰の行いかで色を変える */
#log li.turn{color:var(--gold);font-weight:700;border-bottom-color:rgba(227,193,90,.3);padding:3px 0 2px;}
#log li.dim{color:var(--dim2);}
#log li.me,#log li.p0{color:#bfe9d0;}
#log li.opp,#log li.p1{color:#f0c6ae;}
#log li.dmg{font-weight:700;}
#log li.solve{color:#a9e6ff;font-weight:700;}

/* ── フェイズの帯 ── */
#phasebar{
  display:flex;flex-direction:column;gap:3px;padding:6px 8px;
  border-bottom:1px solid var(--line2);background:rgba(0,0,0,.2);
}
#phasebar .phrow{display:flex;gap:3px;}
/* バトルの何段目か */
#phasebar .phstep{
  font-size:9.5px;color:var(--gold);letter-spacing:.06em;text-align:center;
  padding:1px 0;border-radius:2px;background:rgba(227,193,90,.10);
}
/* 進む先。指で押すので大きく取る */
#phasebar .phgo{
  width:100%;padding:11px 0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;
  border-radius:5px;letter-spacing:.04em;
}
#phasebar .phgo.bp{
  background:linear-gradient(180deg,rgba(255,124,82,.30),rgba(255,124,82,.16));
  border:1px solid #ff7d52;color:#ffd9c9;
}
#phasebar .phgo.bp:active{background:rgba(255,124,82,.5);}
#phasebar .phgo.m2{background:rgba(70,200,255,.18);border:1px solid var(--line);color:var(--text);}
#phasebar .phgo.m2:active{background:rgba(70,200,255,.36);}
#phasebar .phgo.endturn{
  background:rgba(227,193,90,.14);border:1px solid var(--gold);color:var(--gold);
}
#phasebar .phgo.endturn:active{background:rgba(227,193,90,.3);}
#phasebar .ph{
  flex:1;min-width:0;padding:5px 0;font:inherit;font-size:10px;font-weight:700;
  letter-spacing:.04em;border-radius:3px;cursor:default;
  background:rgba(255,255,255,.04);border:1px solid var(--line2);color:var(--dim2);
}
#phasebar .ph.now{background:rgba(227,193,90,.18);border-color:var(--gold);color:var(--gold);}
#phasebar .ph.can{cursor:pointer;background:rgba(70,200,255,.16);border-color:var(--line);color:var(--text);}
#phasebar .ph.can:active{background:rgba(70,200,255,.34);}
#phasebar .ph.now.can{border-color:var(--gold);}
#phasebar .endturn{
  width:100%;margin-top:2px;padding:7px 0;cursor:pointer;font:inherit;font-size:11.5px;
  background:rgba(227,193,90,.14);border:1px solid var(--gold);color:var(--gold);border-radius:4px;
}
#phasebar .endturn:active{background:rgba(227,193,90,.3);}
#phasebar.mine{box-shadow:inset 3px 0 0 var(--me);}
#phasebar:not(.mine){box-shadow:inset 3px 0 0 var(--opp);}

/* チェーンを聞く量。盤面の右下（自分の墓地の下・手札の右）に常に出しておき、
   一押しで 要所だけ → 毎回 → 聞かない と回す。
   メニューの奥に入れると、対戦の最中に変えられない。 */
#chainmode{
  position:absolute;right:3px;bottom:3px;z-index:10;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:5px 9px;cursor:pointer;font:inherit;line-height:1.15;
  border-radius:5px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,26,46,.96),rgba(6,16,30,.96));
  box-shadow:0 3px 10px rgba(0,0,0,.6);
}
#chainmode i{font-style:normal;font-size:8px;color:var(--dim2);letter-spacing:.08em;}
#chainmode b{font-size:11.5px;font-weight:700;color:var(--text);white-space:nowrap;}
#chainmode:active{background:rgba(70,200,255,.28);}
#chainmode[data-mode="key"]{border-color:var(--line);}
#chainmode[data-mode="key"] b{color:#9fe0ff;}
#chainmode[data-mode="all"]{border-color:var(--gold);}
#chainmode[data-mode="all"] b{color:var(--gold);}
#chainmode[data-mode="off"]{border-color:#6b8199;}
#chainmode[data-mode="off"] b{color:var(--dim2);}

/* ── 演出 ── */
#left{position:relative;}
#arrow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:8;}
#arrow[hidden]{display:none;}
#arrow line{stroke:#ff7d52;stroke-width:3;stroke-linecap:round;opacity:.9;}
#arrow polygon{fill:#ff7d52;opacity:.95;}

/* 攻撃が通ったときのビーム＋着弾 */
#beam{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:15;}
#beam[hidden]{display:none;}
#beam .bcore{stroke:#fff3c4;stroke-width:4;stroke-linecap:round;}
#beam .bglow{stroke:#ff5a5a;stroke-width:12;stroke-linecap:round;opacity:.55;filter:blur(1px);}
#beam .bhit{fill:#ffd23a;}
#beam.run .bcore{animation:beamcore .5s ease-out forwards;}
#beam.run .bglow{animation:beamcore .5s ease-out forwards;}
#beam.run .bhit{transform-origin:center;transform-box:fill-box;animation:beamhit .55s .22s ease-out forwards;}
@keyframes beamcore{
  0%{opacity:0;}
  18%{opacity:1;}
  55%{opacity:1;}
  100%{opacity:0;}
}
@keyframes beamhit{
  0%{opacity:0;transform:scale(.2);}
  35%{opacity:1;transform:scale(1.5);}
  100%{opacity:0;transform:scale(2.6);}
}
.lpplate.dmg{animation:lpdmg .6s ease-out;}
@keyframes lpdmg{
  0%,100%{transform:translate(0,0);}
  15%{transform:translate(-3px,1px);box-shadow:0 0 22px rgba(255,60,60,.9);}
  40%{transform:translate(3px,-1px);box-shadow:0 0 22px rgba(255,60,60,.7);}
  70%{transform:translate(-2px,0);}
}
@media (prefers-reduced-motion: reduce){
  #beam.run .bcore,#beam.run .bglow,#beam.run .bhit{animation-duration:.01s;}
  .lpplate.dmg{animation:none;}
}

/* ターンの切り替わり。画面を横切る帯で大きく知らせる。
   小さく出すと、相手の番がいつ終わったのか分からなくなる。 */
#banner{
  position:absolute;left:0;right:0;top:calc(50% - var(--ch) * 0.42);height:calc(var(--ch) * 0.84);
  z-index:14;pointer-events:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
#banner[hidden]{display:none;}
#banner::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(70,200,255,.22) 30%,
                    rgba(70,200,255,.30) 50%, rgba(70,200,255,.22) 70%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(2,7,15,.93) 12%,
                    rgba(2,7,15,.97) 50%, rgba(2,7,15,.93) 88%, transparent 100%);
  border-top:2px solid rgba(120,225,255,.95);
  border-bottom:2px solid rgba(120,225,255,.95);
  box-shadow:0 0 34px rgba(70,200,255,.55), inset 0 0 30px rgba(70,200,255,.22);
}
#banner.opp::before{
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,107,107,.22) 30%,
                    rgba(255,107,107,.30) 50%, rgba(255,107,107,.22) 70%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(2,7,15,.93) 12%,
                    rgba(2,7,15,.97) 50%, rgba(2,7,15,.93) 88%, transparent 100%);
  border-top-color:rgba(255,150,150,.95);border-bottom-color:rgba(255,150,150,.95);
  box-shadow:0 0 34px rgba(255,107,107,.55), inset 0 0 30px rgba(255,107,107,.22);
}
#banner span{
  position:relative;display:flex;align-items:baseline;gap:12px;
  font-size:clamp(19px, 4.2vh, 30px);font-weight:800;letter-spacing:.18em;
  color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 18px rgba(70,200,255,.6);
  white-space:nowrap;
}
#banner.opp span{text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 18px rgba(255,107,107,.6);}
#banner span i{
  font-style:normal;font-size:.5em;letter-spacing:.22em;font-weight:700;
  color:var(--gold);text-shadow:0 1px 6px rgba(0,0,0,.9);
}
#banner.run::before{animation:bnrband var(--bnr-dur,1.9s) cubic-bezier(.2,.8,.2,1) forwards;}
#banner.run span{animation:bnrtext var(--bnr-dur,1.9s) cubic-bezier(.2,.8,.2,1) forwards;}
@keyframes bnrband{
  0%{opacity:0;transform:scaleX(0);}
  12%{opacity:1;transform:scaleX(1);}
  86%{opacity:1;transform:scaleX(1);}
  100%{opacity:0;transform:scaleX(1);}
}
@keyframes bnrtext{
  0%{opacity:0;transform:translateX(-14%) skewX(-8deg);}
  16%{opacity:1;transform:translateX(0) skewX(0);}
  86%{opacity:1;transform:translateX(0) skewX(0);}
  100%{opacity:0;transform:translateX(8%) skewX(0);}
}
/* フェイズ帯。バトルは赤で強調 */
#banner.quick span{font-size:clamp(17px, 3.6vh, 26px);letter-spacing:.16em;}
#banner.quick.battle::before{
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,90,90,.28) 30%, rgba(255,90,90,.4) 50%, rgba(255,90,90,.28) 70%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(2,7,15,.94) 12%, rgba(2,7,15,.98) 50%, rgba(2,7,15,.94) 88%, transparent 100%);
  border-top-color:rgba(255,150,150,.95);border-bottom-color:rgba(255,150,150,.95);
  box-shadow:0 0 38px rgba(255,90,90,.6), inset 0 0 30px rgba(255,90,90,.25);
}
#banner.quick.battle span{text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 20px rgba(255,90,90,.7);}
@media (prefers-reduced-motion: reduce){
  #banner.run::before,#banner.run span{animation-duration:.01s;animation-fill-mode:none;}
}

/* 帯は消えるので、いま誰の番かは盤面にも残しておく。
   手番の側だけライフ名札が光り、待っている側は沈む。 */
.lpplate{transition:opacity .25s, box-shadow .25s, border-color .25s;}
#field[data-turn] .lpplate{opacity:.5;}
#field[data-turn="0"] .lpplate[data-player="0"],
#field[data-turn="1"] .lpplate[data-player="1"]{opacity:1;}
#field[data-turn="0"] .lpplate.mine[data-player="0"],
#field[data-turn="1"] .lpplate.mine[data-player="1"]{
  border-color:var(--me);box-shadow:0 0 0 1px rgba(70,200,255,.35), 0 0 16px rgba(70,200,255,.35);
}
#field[data-turn="0"] .lpplate.opp[data-player="0"],
#field[data-turn="1"] .lpplate.opp[data-player="1"]{
  border-color:var(--opp);box-shadow:0 0 0 1px rgba(255,107,107,.35), 0 0 16px rgba(255,107,107,.35);
}
/* 手番の側の陣地に、うっすら光を重ねる（下地の絵は消さないよう ::after で被せる） */
.mat .side::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  opacity:0;transition:opacity .3s;mix-blend-mode:screen;
  background:radial-gradient(100% 120% at 50% 50%, rgba(70,200,255,.16), transparent 72%);
}
#field[data-turn="0"] .side[data-player="0"]::after,
#field[data-turn="1"] .side[data-player="1"]::after{opacity:1;}
#field[data-mine="0"][data-turn="0"] .side[data-player="0"]::after,
#field[data-mine="0"][data-turn="1"] .side[data-player="1"]::after{
  background:radial-gradient(100% 120% at 50% 50%, rgba(255,107,107,.14), transparent 72%);
}

#flash{
  position:absolute;left:0;right:0;top:0;bottom:0;z-index:11;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  pointer-events:none;
}
#flash[hidden]{display:none;}
#flash img{
  width:calc(var(--ch) * 1.25);border-radius:4px;
  box-shadow:0 0 26px rgba(227,193,90,.55),0 8px 26px rgba(0,0,0,.6);
}
#flash span{
  padding:3px 14px;border-radius:3px;font-size:13px;font-weight:700;
  background:rgba(5,12,24,.88);color:var(--gold);
}
/* 解決の名乗り。発動（金）と見分けがつくよう青にする */
#flash.solve img{box-shadow:0 0 26px rgba(70,200,255,.6),0 8px 26px rgba(0,0,0,.6);}
#flash.solve span{color:#a9e6ff;border-bottom:2px solid rgba(70,200,255,.7);}
#flash.run{animation:fl 0.95s ease-out forwards;}
@keyframes fl{
  0%{opacity:0;transform:scale(.86);}
  15%{opacity:1;transform:scale(1);}
  70%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(1.04);}
}

/* 盤面の隅に出す「はい／いいえ」 */
#confirm{
  position:absolute;right:8px;bottom:calc(var(--hh) + 14px);z-index:10;
  padding:8px 10px;border-radius:6px;max-width:min(58%,300px);
  background:rgba(5,12,24,.94);border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,.55);
  transition:opacity .16s ease, transform .16s cubic-bezier(.24,.86,.34,1);
}
#confirm[hidden]{display:none;}
@starting-style{ #confirm:not([hidden]){opacity:0;transform:translateY(8px) scale(.95);} }
.ctitle{margin:0 0 4px;font-size:11.5px;color:var(--gold);font-weight:700;}
.cnote{margin:0 0 6px;font-size:10px;color:var(--dim2);}
.crow{display:flex;gap:6px;}
.cbtn{
  flex:1;padding:9px 14px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;
  background:rgba(70,200,255,.2);border:1px solid var(--line);color:var(--text);border-radius:4px;
}
.cbtn.no{background:rgba(255,255,255,.06);border-color:var(--line2);color:var(--dim);}
.cbtn[disabled]{opacity:.4;cursor:default;}
.cbtn:active{background:rgba(70,200,255,.36);}

/* 手札を扇のように */
#hand{overflow:visible;padding-top:8px;}
#hand .cell{
  transform:rotate(var(--rot,0deg)) translateY(var(--dy,0));
  transform-origin:50% 160%;margin:0 -5px;transition:transform .14s ease-out;
}
/* 押した瞬間だけ、元の傾き・持ち上がりはそのままに少し縮める */
#hand .cell.pressing{transform:rotate(var(--rot,0deg)) translateY(var(--dy,0)) scale(.95);}
#hand .cell:hover{z-index:30!important;}
#hand .card{transition:transform .14s ease-out, filter .1s ease-out;}
#hand .card.sel{transform:translateY(-9px);}
#hand .cell:hover .card{transform:translateY(-9px);}
.lbtn.sub{background:rgba(255,255,255,.05);border-color:var(--line2);color:var(--dim);flex:0 0 40%;}

/* 絵の無いカード（トークンなど） */
.card.noart{
  background:linear-gradient(150deg,#24405f 0%,#16283f 60%,#0f1c2e 100%);
  border-color:var(--line);
}
.noartname{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:9px;line-height:1.2;text-align:center;padding:2px;
  color:#cfe4f7;
}
.vcard.noartbig{
  display:flex;align-items:center;justify-content:center;text-align:center;
  width:150px;aspect-ratio:59/86;border-radius:5px;font-size:13px;color:#cfe4f7;
  background:linear-gradient(150deg,#24405f 0%,#16283f 60%,#0f1c2e 100%);
  border:1px solid var(--line);
}
.vcard.noartsmall{
  aspect-ratio:59/86;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#24405f 0%,#16283f 60%,#0f1c2e 100%);
  border:1px solid var(--line);border-radius:3px;
}

/* ── チェーンの確認 ── */
#chaindlg{
  position:absolute;left:50%;bottom:calc(var(--hh) + 10px);transform:translateX(-50%);
  z-index:14;width:min(94%,620px);padding:10px 12px 12px;border-radius:8px;
  background:rgba(5,12,24,.96);border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.6);
  transition:opacity .18s ease, transform .18s cubic-bezier(.24,.86,.34,1);
}
#chaindlg[hidden]{display:none;}
@starting-style{ #chaindlg:not([hidden]){opacity:0;transform:translateX(-50%) translateY(10px) scale(.97);} }
.cdtext{margin:0 0 8px;font-size:12.5px;color:var(--text);line-height:1.5;text-align:center;}
.cdtext b{color:var(--gold);}
/* 何に対して聞かれているか（召喚に対して／処理が終わった時／ダメージ計算時 など） */
.cdwhen{
  display:block;margin-bottom:3px;padding-bottom:3px;font-size:11px;color:#a9e6ff;
  border-bottom:1px solid rgba(70,200,255,.25);
}
.cdwhen b{color:#ffe9a8;}
.cdcards{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:10px;max-height:46vh;overflow-y:auto;}
.cdcard{
  position:relative;width:calc(var(--ch) * 0.62);cursor:pointer;line-height:0;
  border-radius:3px;overflow:hidden;border:2px solid transparent;
}
.cdcard img{width:100%;aspect-ratio:59/86;object-fit:cover;display:block;}
.cdcard.on{border-color:var(--gold);box-shadow:0 0 12px rgba(242,205,99,.6);}
.cdcard.ghost{cursor:default;opacity:.5;filter:grayscale(.4);}
.cdcard.ghost:hover{opacity:.72;}
.cdghostlabel{flex-basis:100%;text-align:center;font-size:10px;color:var(--dim,#8a8f98);margin:6px 0 2px;}
.cdcard i{
  position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:8.5px;
  text-align:center;background:rgba(0,0,0,.82);color:#ffe9a8;padding:2px 2px;
  white-space:nowrap;letter-spacing:-.03em;line-height:1.1;
  /* 名前も入れるので、長いものは端を省いて枠から溢れさせない */
  overflow:hidden;text-overflow:ellipsis;
}
.cdcard.on i{background:rgba(90,66,0,.9);color:#fff3cf;}
.cdbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.cdbtns button{
  flex:1 1 0;min-width:120px;max-width:210px;padding:12px 0;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:700;
  border-radius:5px;border:1px solid var(--line2);
  background:rgba(255,255,255,.06);color:var(--dim);
}
.cdbtns button.go{background:rgba(70,200,255,.22);border-color:var(--line);color:var(--text);}
.cdbtns button.go:active{background:rgba(70,200,255,.45);}
.cdbtns button.sub:active{background:rgba(255,255,255,.16);}
.cdbtns button[disabled]{opacity:.4;cursor:default;}

/* チェーンが積まれていない「ただの発動できるタイミング」は、
   相手の発動に割り込む場面と見分けがつくように、金色ではなく落ち着いた枠にする。 */
#chaindlg.free{border-color:var(--line2);box-shadow:0 8px 24px rgba(0,0,0,.55);}
#chaindlg.free .cdcard.on{border-color:var(--glow);box-shadow:0 0 12px rgba(70,200,255,.55);}
#chaindlg.chainy::before{
  content:"チェーン";
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  padding:1px 12px;border-radius:9px;font-size:9px;font-weight:700;letter-spacing:.18em;
  background:linear-gradient(180deg,#f2cd63,#c89a2c);color:#221704;
}

/* ターンとフェイズのバッジ（盤面の右） */
#turnbadge{
  position:absolute;right:6px;top:34%;transform:translateY(-50%);z-index:9;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 12px;pointer-events:none;
  background:linear-gradient(160deg,rgba(242,205,99,.22),rgba(120,90,20,.28));
  border:1px solid var(--gold);border-radius:4px;
  clip-path:polygon(50% 0%,100% 22%,100% 78%,50% 100%,0% 78%,0% 22%);
  min-width:74px;
}
#turnbadge[hidden]{display:none;}
#turnbadge b{font-size:11px;color:var(--gold);letter-spacing:.06em;}
#turnbadge span{font-size:13px;font-weight:700;color:#fff6d8;}
#turnbadge.opp{
  background:linear-gradient(160deg,rgba(255,107,107,.22),rgba(120,30,30,.3));
  border-color:var(--opp);
}
#turnbadge.opp b{color:#ffb3b3;}

/* ── カードの説明（左の帯） ── */
#cardinfo{
  position:fixed;z-index:60;
  left:calc(4px + env(safe-area-inset-left));top:calc(4px + env(safe-area-inset-top));
  bottom:calc(4px + env(safe-area-inset-bottom));width:min(34%,264px);
  display:flex;flex-direction:column;border-radius:5px;overflow:hidden;
  background:linear-gradient(180deg,rgba(6,16,30,.97),rgba(8,22,40,.95));
  border:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.6);
  transition:opacity .16s ease, transform .18s cubic-bezier(.24,.86,.34,1);
}
#cardinfo[hidden]{display:none;}
@starting-style{ #cardinfo:not([hidden]){opacity:0;transform:translateX(-10px);} }
.cihead{
  display:flex;align-items:center;gap:6px;padding:6px 8px;
  background:linear-gradient(90deg,rgba(70,200,255,.22),rgba(70,200,255,.05));
  border-bottom:1px solid var(--line);
}
.ciname{flex:1;font-size:12px;font-weight:700;color:var(--text);line-height:1.3;}
#ciClose{
  width:22px;height:22px;flex:0 0 22px;cursor:pointer;font:inherit;font-size:14px;line-height:1;
  background:rgba(255,255,255,.08);border:1px solid var(--line2);color:var(--dim);border-radius:3px;
}
.cibody{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;}
.cipic{text-align:center;}
.cipic img{width:64%;max-width:130px;border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.6);}
.cipic.noart{
  height:110px;display:flex;align-items:center;justify-content:center;border-radius:4px;
  background:linear-gradient(150deg,#24405f,#0f1c2e);border:1px solid var(--line);color:#cfe4f7;font-size:12px;
}
.cikind{
  margin:0;padding:3px 6px;border-radius:3px;font-size:10.5px;color:var(--gold);
  background:rgba(242,205,99,.10);border:1px solid rgba(242,205,99,.28);text-align:center;
}
.citext{margin:0;font-size:11.5px;line-height:1.75;color:var(--text);white-space:normal;}

/* 手札の攻守は出さない（重なって読みにくいだけ） */
#hand .card .stat{display:none;}

/* カード1枚にいくつも操作があるときに出る小さな一覧。
   位置は指の近くに置くので、必ず fixed で浮かせること。 */
#pop{
  /* 選択肢の間隔を広めに取る。隣を押してしまい
     「召喚のつもりがセットになった」という報告があったため。 */
  position:fixed;z-index:58;display:flex;flex-direction:column;gap:7px;padding:6px;
  border-radius:6px;background:rgba(8,18,34,.98);border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,.7);
  transition:opacity .12s ease, transform .14s cubic-bezier(.24,.86,.34,1.05);
}
@starting-style{ #pop{opacity:0;transform:scale(.92) translateY(4px);} }
/* どのカードを押したのかの見出し。押し間違いに気づけるように出す */
#pop .popttl{
  display:block;max-width:190px;padding:2px 4px 4px;
  font-size:11.5px;font-weight:700;color:var(--gold);
  border-bottom:1px solid var(--line2);margin-bottom:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#pop button{
  min-width:132px;padding:11px 14px;cursor:pointer;font:inherit;font-size:13px;
  background:rgba(70,200,255,.18);border:1px solid var(--line);
  color:var(--text);border-radius:4px;text-align:left;white-space:nowrap;
}
#pop button.sub{background:rgba(255,255,255,.06);border-color:var(--line2);color:var(--dim);}
#pop button:active{background:rgba(70,200,255,.4);}

/* ── 時間切れの知らせ（オンライン対戦） ── */
#idlewarn{
  position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:30;
  display:flex;align-items:baseline;gap:8px;padding:6px 16px;border-radius:999px;
  background:rgba(120,16,16,.92);border:1px solid #ff8a8a;
  box-shadow:0 6px 20px rgba(0,0,0,.55);pointer-events:none;white-space:nowrap;
  animation:idlePulse 1s ease-in-out infinite alternate;
}
#idlewarn[hidden]{display:none;}
#idlewarn b{font-size:19px;font-weight:700;color:#fff;letter-spacing:.04em;}
#idlewarn span{font-size:11.5px;color:#ffd9d9;}
#idlewarn.opp{background:rgba(20,50,90,.92);border-color:#7fc7ff;animation:none;}
#idlewarn.opp b{color:#eaf6ff;}
#idlewarn.opp span{color:#bfe2ff;}
@keyframes idlePulse{from{box-shadow:0 6px 20px rgba(0,0,0,.55);} to{box-shadow:0 0 22px rgba(255,90,90,.75);}}

/* 盤面のカードを選ばせているときの見出し。

   窓を出す場面（墓地やデッキの中から選ぶ）と、盤面で選ぶ場面が続けて来ると、
   見た目が大きく変わるので「進まなくなった」と受け取られる。
   盤面で選ぶときも、何を選ぶのかを中央にはっきり出す。
   盤面のカードを押せなくならないよう、触れないようにしておくこと。 */
#picknote{
  position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:29;
  max-width:min(92%,520px);padding:5px 16px;border-radius:999px;
  background:rgba(58,44,8,.94);border:1px solid var(--gold);
  box-shadow:0 6px 20px rgba(0,0,0,.5);pointer-events:none;
  text-align:center;
}
#picknote[hidden]{display:none;}
#picknote b{
  font-size:13px;font-weight:700;color:#ffe9a8;letter-spacing:.02em;
  display:block;line-height:1.35;
}
@media (max-height:560px){
  #picknote{padding:3px 12px;top:3px;}
  #picknote b{font-size:11px;}
}

/* ── 不具合の報告 ── */
#reportBox{
  position:fixed;inset:0;z-index:85;display:flex;align-items:center;justify-content:center;
  padding:14px;background:rgba(3,7,14,.72);backdrop-filter:blur(2px);
  transition:opacity .16s ease;
}
#reportBox[hidden]{display:none;}
@starting-style{ #reportBox:not([hidden]){opacity:0;} }
.rpinner{
  width:min(94%,380px);padding:16px;border-radius:8px;
  background:rgba(8,18,34,.98);border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,.7);
  transition:transform .16s cubic-bezier(.24,.86,.34,1);
}
@starting-style{ #reportBox:not([hidden]) .rpinner{transform:scale(.94) translateY(6px);} }
.rpinner h3{margin:0 0 12px;font-size:14px;color:var(--gold);}
.rplab{display:block;margin:0 0 4px;font-size:11.5px;color:var(--dim);}
.rplab span{font-size:10px;color:var(--dim2);}
#rpCard,#rpDesc{
  width:100%;padding:8px 9px;margin-bottom:12px;box-sizing:border-box;
  background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:4px;
  color:var(--text);font:inherit;font-size:13px;outline:none;resize:none;
}
#rpDesc{height:88px;line-height:1.5;}
#rpCard:focus,#rpDesc:focus{border-color:var(--me);}
.rpmsg{margin:-4px 0 8px;font-size:11.5px;color:var(--me);min-height:1.2em;}
.rpmsg.bad{color:#ff8a8a;}
.rpbtns{display:flex;gap:10px;}
.rpbtns button{flex:1;padding:11px 0;text-align:center;justify-content:center;}

/* ── デッキを作る・選ぶ画面 ──────────────────────
   横画面の狭い高さに収めるため、左に中身・右に検索の2列。
   カードは小さくして枚数が一目で分かるようにする。 */
#dscr{
  position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0c1a2e 0%,var(--deep) 100%);
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#dscr[hidden]{display:none;}
.dhead{
  display:flex;align-items:center;gap:6px;padding:6px 8px;flex:0 0 auto;
  border-bottom:1px solid var(--line2);background:rgba(6,14,28,.9);
}
.dhead .dttl{font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.08em;}
#dname{
  flex:1;min-width:0;padding:6px 8px;font:inherit;font-size:12.5px;border-radius:4px;
  background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--text);
}
.dbtn{
  padding:7px 11px;cursor:pointer;font:inherit;font-size:11.5px;font-weight:700;
  border-radius:4px;white-space:nowrap;
  background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--dim);
}
.dbtn.go{background:rgba(70,200,255,.2);border-color:var(--line);color:var(--text);}
.dbtn.go:active{background:rgba(70,200,255,.42);}
.dbtn.sub:active{background:rgba(255,255,255,.16);}
.dbtn[disabled]{opacity:.4;}

/* 一覧を出しているときは編集の部品を隠す（逆も同じ） */
#dscr[data-view="list"] #dedit,
#dscr[data-view="list"] #dname,
#dscr[data-view="list"] #dback,
#dscr[data-view="list"] #dsave,
#dscr[data-view="list"] #dstatus{display:none;}
#dscr[data-view="edit"] #dlist,
#dscr[data-view="edit"] .dttl,
#dscr[data-view="edit"] #dnew{display:none;}

#dlist{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;}
.drow{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;
  background:rgba(255,255,255,.04);border:1px solid var(--line2);
}
.drow.on{border-color:var(--gold);background:rgba(227,193,90,.10);}
.drow .dname{font-size:13px;font-weight:700;color:var(--text);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.drow .dnum{font-size:10.5px;color:var(--dim2);white-space:nowrap;}
.drow .dok{font-size:10px;padding:2px 7px;border-radius:9px;white-space:nowrap;}
.drow .dok.ok{background:rgba(70,200,255,.18);color:#9fe0ff;}
.drow .dok.ng{background:rgba(255,107,107,.18);color:#ff9a9a;}
.dbtns{display:flex;gap:4px;flex:0 0 auto;}

#dedit{flex:1;min-height:0;display:flex;gap:8px;padding:8px;}
#ddeck{flex:1.35;min-width:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;}
#dsearch{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;
  border-left:1px solid var(--line2);padding-left:8px;}
#dqName{
  padding:8px 9px;font:inherit;font-size:12.5px;border-radius:4px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--text);
}
#dfilters{display:flex;gap:3px;}
#dfilters button{
  flex:1;padding:6px 0;cursor:pointer;font:inherit;font-size:10px;font-weight:700;
  border-radius:3px;background:rgba(255,255,255,.05);
  border:1px solid var(--line2);color:var(--dim2);transition:background .12s, border-color .12s, color .12s, transform .1s cubic-bezier(.3,.85,.35,1);
}
#dfilters button.on{background:rgba(70,200,255,.2);border-color:var(--line);color:var(--text);}
#dfilters button:active{transform:scale(.93);background:rgba(70,200,255,.3);}
#dcount{margin:0;font-size:10px;color:var(--dim2);}
#dresults{flex:1;min-height:0;overflow-y:auto;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:4px;align-content:start;}

.dbin{display:flex;flex-direction:column;gap:3px;}
.dbinh{display:flex;align-items:baseline;gap:8px;font-size:11px;}
.dbinh b{color:var(--gold);letter-spacing:.06em;}
.dbinh span{color:var(--dim2);font-variant-numeric:tabular-nums;}
.dbinh span.ng{color:#ff9a9a;font-weight:700;}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:3px;}
.dempty{margin:0;font-size:10.5px;color:var(--dim2);grid-column:1/-1;}

.dcard{margin:0;position:relative;cursor:pointer;line-height:0;transition:transform .1s cubic-bezier(.3,.85,.35,1);}
.dcard img{width:100%;aspect-ratio:59/86;object-fit:cover;display:block;
  border-radius:3px;border:1px solid var(--line2);}
.dcard figcaption{
  font-size:8px;line-height:1.2;color:var(--dim2);margin-top:1px;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dcard:active img{outline:2px solid var(--glow);}
.dcard:active{transform:scale(.94);}
.dcard.full img{filter:grayscale(.7) brightness(.6);}
.dcard.noart{background:rgba(255,255,255,.05);border-radius:3px;min-height:40px;}
.dbadge{
  position:absolute;top:1px;right:1px;font-style:normal;font-size:8px;font-weight:700;
  padding:1px 4px;border-radius:7px;background:rgba(0,0,0,.8);color:#ffe9a8;
}
.dbadge.full{background:rgba(255,107,107,.9);color:#fff;}
.dbadge.lim{background:rgba(227,193,90,.9);color:#221704;}

#dstatus{margin:0;padding:6px 10px;font-size:11.5px;flex:0 0 auto;
  border-top:1px solid var(--line2);}
#dstatus.ok{color:#9fe0ff;}
#dstatus.ng{color:#ff9a9a;}
#dflash{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:75;
  padding:9px 18px;border-radius:6px;font-size:12.5px;font-weight:700;
  background:rgba(5,12,24,.97);border:1px solid var(--gold);color:var(--gold);
}
#dflash[hidden]{display:none;}

/* ロビーの「使うデッキ」 */
.lrow.lpick{align-items:center;gap:8px;}
#pickName{flex:1;min-width:0;font-size:11.5px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#pickName.ok{color:#9fe0ff;}
#pickName.ng{color:#ff9a9a;}

/* デッキ編集：カードの入れ先（メイン／EX か サイドか） */
#dto{display:flex;align-items:center;gap:3px;}
#dto span{font-size:9.5px;color:var(--dim2);flex:0 0 auto;letter-spacing:.06em;}
#dto button{
  flex:1;padding:6px 0;cursor:pointer;font:inherit;font-size:10px;font-weight:700;
  border-radius:3px;background:rgba(255,255,255,.05);
  border:1px solid var(--line2);color:var(--dim2);transition:background .12s, border-color .12s, color .12s, transform .1s cubic-bezier(.3,.85,.35,1);
}
#dto button.on{background:rgba(70,200,255,.2);border-color:var(--line);color:var(--text);}
#dto button:active{transform:scale(.93);background:rgba(70,200,255,.3);}
/* サイドに入れているあいだは、右側の枠の色を変えて取り違えを防ぐ */
#dscr[data-to="side"] #dsearch{border-left-color:var(--gold);}
#dscr[data-to="side"] #dto button.on{background:rgba(227,193,90,.22);border-color:var(--gold);color:var(--gold);}
/* 一覧での名前の書き換え */
.drename{
  flex:1;min-width:0;padding:4px 6px;font:inherit;font-size:12.5px;font-weight:700;
  border-radius:3px;background:rgba(255,255,255,.1);border:1px solid var(--gold);color:var(--text);
}

/* めくられて公開されたカード。
   強欲で謙虚な壺の3枚や、サーチして手札に加えたカードは公開情報なので、
   見逃さないよう大きく出す（伏せカードとは扱いが違う）。 */
/* ドローフェイズの演出 */
#drawanim{
  position:fixed;inset:0;z-index:79;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.2vh;
  background:radial-gradient(60% 50% at 50% 46%, rgba(255,90,40,.14), transparent 70%), rgba(2,6,14,.66);
}
#drawanim[hidden]{display:none;}
#drawanim .dwrap{position:relative;width:min(calc(var(--ch) * 0.9), 32vw);aspect-ratio:59/86;}
#drawanim .ddeck{
  position:absolute;inset:0;border-radius:7px;border:1px solid #9a4327;
  background:#160a08 url(/back.jpg) center/cover no-repeat;
  box-shadow:4px 5px 0 rgba(0,0,0,.5), 0 0 30px rgba(255,90,40,.4);
}
#drawanim .dcard{position:absolute;inset:0;border-radius:7px;overflow:hidden;opacity:0;
  box-shadow:0 8px 24px rgba(0,0,0,.6), 0 0 26px rgba(255,200,120,.4);}
#drawanim .dcard img{width:100%;height:100%;object-fit:cover;display:block;}
#drawanim .dtext{
  color:#ffe0c8;font-size:clamp(13px,2.4vh,17px);letter-spacing:.2em;
  text-shadow:0 2px 12px #000;animation:htap 1.4s ease-in-out infinite;
}
#drawanim.go .dtext{opacity:0;}
#drawanim.go .ddeck{animation:ddeckpush .55s ease-out forwards;}
#drawanim.go .dcard{animation:dcardslide .74s cubic-bezier(.2,.7,.25,1) forwards;}
@keyframes ddeckpush{0%{transform:none;}28%{transform:translateY(-7px) scale(1.02);}100%{transform:translateY(0) scale(1);opacity:.55;}}
@keyframes dcardslide{
  0%{opacity:0;transform:translateY(-3%) scale(.95);}
  22%{opacity:1;transform:translateY(0) scale(1);}
  100%{opacity:1;transform:translateY(46vh) scale(1.06);}
}
@media (prefers-reduced-motion:reduce){
  #drawanim.go .ddeck,#drawanim.go .dcard{animation-duration:.01s;}
}

#reveal{
  position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);z-index:13;
  padding:10px 14px 12px;border-radius:8px;pointer-events:none;
  background:rgba(4,10,20,.94);border:1px solid var(--gold);
  box-shadow:0 10px 34px rgba(0,0,0,.7),0 0 24px rgba(242,205,99,.25);
  max-width:92%;
}
#reveal[hidden]{display:none;}
#reveal .rvttl{
  margin:0 0 7px;text-align:center;font-size:12px;font-weight:700;color:var(--gold);
  letter-spacing:.06em;
}
#reveal .rvcards{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;}
#reveal .rvcard{position:relative;width:calc(var(--ch) * 0.62);line-height:0;}
#reveal .rvcard img{
  width:100%;aspect-ratio:59/86;object-fit:cover;display:block;border-radius:3px;
  border:1px solid var(--line2);
}
/* 実際に手札へ加わった1枚は目立たせる */
#reveal .rvcard.took img{border-color:var(--gold);box-shadow:0 0 14px rgba(242,205,99,.8);}
#reveal .rvcard i{
  position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:8.5px;
  text-align:center;background:rgba(0,0,0,.78);color:#ffe9a8;padding:1px 0;
}
#reveal.run{animation:rvfade 1.8s ease-out forwards;}
@keyframes rvfade{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.92);}
  10%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  86%{opacity:1;}
  100%{opacity:0;}
}
/* ログに並べる小さなカード */
#log li .logcards{display:flex;gap:2px;flex-wrap:wrap;}
#log li .logcards img{width:15px;height:22px;border-radius:1px;border:1px solid var(--line2);cursor:pointer;}
#log li .logcards img.took{border-color:var(--gold);}

/* 窓の畳みボタン。
   相手のサイクロンが何を狙っているかは盤面を見ないと分からないのに、
   窓が盤面を隠してしまうので、一時的に小さくできるようにする。 */
#cdfold{
  position:absolute;top:-11px;right:8px;z-index:2;
  padding:2px 10px;cursor:pointer;font:inherit;font-size:10px;font-weight:700;
  border-radius:9px;border:1px solid var(--line);
  background:rgba(8,18,34,.98);color:var(--dim);
}
#cdfold:active{background:rgba(70,200,255,.3);}
/* 畳んだ状態：見出しの1行だけ残して、中身と操作を隠す */
#chaindlg.folded{width:auto;max-width:min(70%,420px);padding:6px 10px 8px;}
#chaindlg.folded .cdcards,
#chaindlg.folded .cdbtns{display:none;}
#chaindlg.folded .cdtext{margin:0;font-size:11px;opacity:.85;}
#chaindlg.folded .cdwhen{margin-bottom:0;padding-bottom:0;border-bottom:0;}

/* 発動をやめて戻すボタン。押し間違えないよう、決定とは色を分ける */
.opt.undoback,.cdbtns button.sub.undoback{
  border-color:#8a6a3a;color:#e8c98a;background:rgba(140,100,50,.16);
}
.opt.undoback:active{background:rgba(140,100,50,.35);}

/* ═══ ゲーム内ボタンをダークファンタジー調に ═══
   下地は暗い焦げ茶、枠は金の細線、四隅に金のコーナー飾り。 */
:root{
  --g-line:#c6a05c;
  --g-line-hi:#f2d99f;
  --g-text:#f0dcae;
  --g-fill:linear-gradient(180deg, rgba(40,31,16,.74), rgba(17,12,6,.72));
  --g-fill-sub:linear-gradient(180deg, rgba(28,24,16,.62), rgba(13,10,6,.6));
  --g-fill-on:linear-gradient(180deg, rgba(224,187,110,.34), rgba(150,110,48,.22));
}
.opt,
.cbtn,
.cdbtns button,
#phasebar .phgo,
#pop button,
#sok,
.dbtn,
#btnMenu.menubtn,
#chainmode,
#cdfold{
  position:relative;
  background:var(--g-fill);
  border:1px solid var(--g-line);
  color:var(--g-text);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), inset 0 1px 0 rgba(245,220,160,.12), 0 2px 6px rgba(0,0,0,.42);
  letter-spacing:.03em;
  transition:background .14s, box-shadow .16s, border-color .16s, color .14s, transform .1s cubic-bezier(.3,.85,.35,1);
}
/* 四隅の金飾り（内側の枠を四隅だけ見せる） */
.opt::after,
.cbtn::after,
.cdbtns button::after,
#phasebar .phgo::after,
#pop button::after,
#sok::after,
.dbtn::after,
#btnMenu.menubtn::after,
#chainmode::after{
  content:"";position:absolute;inset:3px;pointer-events:none;border-radius:2px;
  border:1px solid rgba(245,220,160,.5);
  -webkit-mask:
    linear-gradient(#000,#000) 0 0/7px 7px no-repeat,
    linear-gradient(#000,#000) 100% 0/7px 7px no-repeat,
    linear-gradient(#000,#000) 0 100%/7px 7px no-repeat,
    linear-gradient(#000,#000) 100% 100%/7px 7px no-repeat;
          mask:
    linear-gradient(#000,#000) 0 0/7px 7px no-repeat,
    linear-gradient(#000,#000) 100% 0/7px 7px no-repeat,
    linear-gradient(#000,#000) 0 100%/7px 7px no-repeat,
    linear-gradient(#000,#000) 100% 100%/7px 7px no-repeat;
}
.opt:hover,
.cbtn:not([disabled]):hover,
.cdbtns button:not([disabled]):hover,
#phasebar .phgo:hover,
#pop button:hover,
#sok:not([disabled]):hover,
.dbtn:hover,
#btnMenu.menubtn:hover,
#chainmode:hover{
  border-color:var(--g-line-hi);color:#fff4dc;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), inset 0 1px 0 rgba(245,220,160,.2), 0 0 12px rgba(224,187,110,.32);
}
.opt:active,
.cbtn:not([disabled]):active,
.cdbtns button:not([disabled]):active,
#phasebar .phgo:active,
#pop button:active,
#sok:not([disabled]):active,
.dbtn:active,
#btnMenu.menubtn:active,
#chainmode:active{
  background:var(--g-fill-on);color:#fffaf0;border-color:var(--g-line-hi);transform:scale(.965);
}
/* 控えめ系（キャンセル・いいえ・サブ）は銀寄りに落とす */
.opt.sub,
.cbtn.no,
.cdbtns button.sub,
#pop button.sub,
.dbtn.sub{
  --g-line:#8a7a5a;color:#cdbc98;background:var(--g-fill-sub);
}
.opt.sub::after,
.cbtn.no::after,
.cdbtns button.sub::after,
#pop button.sub::after,
.dbtn.sub::after{border-color:rgba(210,195,160,.34);}
/* 決定・発動などの主ボタンは金を強める */
.cbtn:not(.no),
.cdbtns button.go,
#sok,
.dbtn.go{
  --g-line:var(--g-line-hi);
  background:linear-gradient(180deg, rgba(232,196,120,.28), rgba(150,108,44,.16));
  color:#fff2d6;
}
/* バトルフェイズへ は赤みの金 */
#phasebar .phgo.bp{
  --g-line:#d98f5c;color:#ffd9c0;
  background:linear-gradient(180deg, rgba(150,70,40,.42), rgba(60,24,14,.5));
}
#phasebar .phgo.endturn{
  --g-line:var(--g-line-hi);color:#fff0d0;
  background:linear-gradient(180deg, rgba(232,196,120,.3), rgba(150,108,44,.18));
}
/* フェイズ表示チップも金寄りに */
#phasebar .ph.can{
  background:linear-gradient(180deg, rgba(40,31,16,.6), rgba(17,12,6,.6));
  border-color:var(--g-line);color:var(--g-text);
}
#phasebar .ph.can:active{background:var(--g-fill-on);}
/* 小さい ♪ ボタンは飾り無しで色だけ合わせる */
.mini{
  background:var(--g-fill-sub);border-color:var(--g-line);color:var(--g-text);
}
.mini.bgm{color:var(--g-line-hi);}
#right{border-left-color:rgba(200,165,95,.34);}
#ask{border-bottom-color:rgba(200,165,95,.22);}
.asktitle,.mini,#top .ttl{font-family:'Cinzel','Noto Sans JP',serif;}
/* メインフェイズ2へ も金系に統一 */
#phasebar .phgo.m2{
  --g-line:var(--g-line);
  background:linear-gradient(180deg, rgba(40,31,16,.7), rgba(17,12,6,.68));
  border:1px solid var(--g-line);color:var(--g-text);
}
/* 「発動をやめる」は琥珀色でハッキリ分ける（テーマ適用後にもう一度指定） */
.opt.undoback,.cdbtns button.sub.undoback{
  border-color:#c98b3a !important;color:#ffdca6 !important;
  background:linear-gradient(180deg, rgba(150,95,35,.32), rgba(90,55,18,.28)) !important;
}
.opt.undoback::after,.cdbtns button.sub.undoback::after{border-color:rgba(255,200,140,.55);}

/* ═══ メニュー画面のボタン・パネルもダークファンタジー調に（強め） ═══ */
#lobby .lgroup,
#lobby .luser{
  background:linear-gradient(180deg, rgba(34,26,14,.82), rgba(14,10,6,.8));
  border:1px solid var(--g-line);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), inset 0 1px 0 rgba(245,220,160,.12), 0 6px 20px rgba(0,0,0,.45);
  position:relative;
}
#lobby .lgroup::before,
#lobby .luser::before{
  content:"";position:absolute;inset:5px;pointer-events:none;border-radius:3px;
  border:1px solid rgba(245,220,160,.4);
  -webkit-mask:
    linear-gradient(#000,#000) 0 0/13px 13px no-repeat,
    linear-gradient(#000,#000) 100% 0/13px 13px no-repeat,
    linear-gradient(#000,#000) 0 100%/13px 13px no-repeat,
    linear-gradient(#000,#000) 100% 100%/13px 13px no-repeat;
          mask:
    linear-gradient(#000,#000) 0 0/13px 13px no-repeat,
    linear-gradient(#000,#000) 100% 0/13px 13px no-repeat,
    linear-gradient(#000,#000) 0 100%/13px 13px no-repeat,
    linear-gradient(#000,#000) 100% 100%/13px 13px no-repeat;
}
#lobby .lonline{
  background:linear-gradient(180deg, rgba(46,34,16,.82), rgba(18,12,6,.8));
  border-color:var(--g-line-hi);
}
#lobby .lgh{color:var(--g-line-hi);font-family:'Cinzel','Noto Sans JP',serif;letter-spacing:.16em;}
#lobby .lgh::after{background:linear-gradient(90deg,rgba(245,220,160,.5),transparent);}

/* ボタン本体 */
#lobby .lbtn{
  position:relative;
  background:linear-gradient(180deg, rgba(44,34,17,.92), rgba(18,13,7,.92));
  border:1px solid var(--g-line);
  color:var(--g-text);
  border-radius:7px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), inset 0 1px 0 rgba(245,220,160,.14), 0 3px 10px rgba(0,0,0,.5);
  letter-spacing:.04em;
  transition:background .14s, box-shadow .16s, border-color .16s, color .14s, transform .1s;
}
#lobby .lbtn::after{
  content:"";position:absolute;inset:3px;pointer-events:none;border-radius:3px;
  border:1px solid rgba(245,220,160,.55);
  -webkit-mask:
    linear-gradient(#000,#000) 0 0/10px 10px no-repeat,
    linear-gradient(#000,#000) 100% 0/10px 10px no-repeat,
    linear-gradient(#000,#000) 0 100%/10px 10px no-repeat,
    linear-gradient(#000,#000) 100% 100%/10px 10px no-repeat;
          mask:
    linear-gradient(#000,#000) 0 0/10px 10px no-repeat,
    linear-gradient(#000,#000) 100% 0/10px 10px no-repeat,
    linear-gradient(#000,#000) 0 100%/10px 10px no-repeat,
    linear-gradient(#000,#000) 100% 100%/10px 10px no-repeat;
}
#lobby .lbtn:hover{
  transform:translateY(-1px);border-color:var(--g-line-hi);color:#fff4dc;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), inset 0 1px 0 rgba(245,220,160,.22), 0 0 16px rgba(224,187,110,.4), 0 4px 12px rgba(0,0,0,.5);
}
#lobby .lbtn:active{
  transform:translateY(0) scale(.98);
  background:linear-gradient(180deg, rgba(224,187,110,.34), rgba(150,110,48,.24));
  color:#fffaf0;border-color:var(--g-line-hi);
}
#lobby .lbtn.ghost{
  background:linear-gradient(180deg, rgba(28,24,16,.7), rgba(12,10,6,.66));
  border-color:#8a7856;color:#cdbc98;
}
#lobby .lbtn.ghost::after{border-color:rgba(210,195,160,.34);}
#lobby .lbtn.ghost:hover{color:#f0e2c0;border-color:var(--g-line);}

/* 主ボタン「AIと対戦」は鍛造した金の板 */
#lobby .lbtn.primary{
  border:1px solid #ffe6ac;color:#2a1c06;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #ffdf8f 0%, #f0b352 46%, #d98f2f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 6px rgba(120,70,10,.4),
    0 6px 18px rgba(230,160,60,.45), 0 0 0 1px rgba(90,55,15,.5);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
#lobby .lbtn.primary::after{border-color:rgba(120,74,20,.6);inset:4px;}
#lobby .lbtn.primary b{color:#241704;}
#lobby .lbtn.primary b::before{content:"▶";color:#5a3a12;}
#lobby .lbtn.primary i{color:#4a3212;opacity:.85;}
#lobby .lbtn.primary:hover{
  transform:translateY(-1px);border-color:#fff2d4;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 6px rgba(120,70,10,.4),
    0 10px 26px rgba(240,180,80,.6), 0 0 0 1px rgba(90,55,15,.55);
}
#lobby .lbtn.primary:active{
  transform:translateY(0) scale(.98);
  background:linear-gradient(180deg, #f0c877, #cf8a2c);
}

/* 入力欄・チップも同じ質感に */
#lobby #joinCode,
#lobby #uname{
  background:rgba(0,0,0,.5);border:1px solid var(--g-line);color:var(--g-text);border-radius:6px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5);
}
#lobby #joinCode::placeholder,#lobby #uname::placeholder{color:#9a8a68;}
#lobby #joinCode:focus,#lobby #uname:focus{
  border-color:var(--g-line-hi);box-shadow:inset 0 2px 6px rgba(0,0,0,.5), 0 0 0 2px rgba(224,187,110,.3);
}
#lobby .lpick{
  background:rgba(0,0,0,.34);border:1px solid var(--g-line);border-radius:7px;
}
#lobby #pickName{color:var(--g-text);}
#lobby .ldeck{
  background:rgba(0,0,0,.28);border:1px dashed #8a7856;color:#b6a482;border-radius:7px;
}
#lobby .ldeck:hover,#lobby .ldeck.on{border-color:var(--g-line-hi);color:#f0e2c0;}
#lobby .unameShow{color:var(--g-text);}
#lobby .unameShow.unset{color:#9a8a68;}

/* ロゴも金に寄せる */
#lobby .lmark{
  background:linear-gradient(180deg,#ffffff,#f6e2b0 44%,#d5aa5e);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.75)) drop-shadow(0 0 24px rgba(224,187,110,.45));
}
#lobby .ltag{color:var(--g-line-hi);}

/* ═══ 背景未設定だった画面にもネオンの下地を敷く ═══ */
#dscr,#side,#boot,#rotate{
  background:
    linear-gradient(180deg, rgba(6,8,18,.80) 0%, rgba(6,8,18,.62) 34%, rgba(4,5,12,.88) 100%),
    url(./home_bg.jpg?v=2) center/cover no-repeat,
    var(--deep) !important;
}
/* デッキ画面。マス（カード）が乗るので下地はうっすら暗くする程度でよい */
#dscr{
  background:
    linear-gradient(180deg, rgba(6,8,16,.42) 0%, rgba(6,8,16,.34) 40%, rgba(3,4,10,.66) 100%),
    url(./home_bg.jpg?v=2) center/cover no-repeat,
    var(--deep) !important;
}
/* 一覧・編集の中身は透過にして下地を見せる */
#dlist.decklist,#dedit,#ddeck,#dsearch,#dresults,#dlist{background:transparent;}
body{
  background:
    linear-gradient(180deg, rgba(6,8,18,.72), rgba(4,5,12,.92)),
    url(./home_bg.jpg?v=2) center/cover no-repeat,
    linear-gradient(180deg,#141f38 0%, #0f1a30 50%, #0a1424 100%);
}

/* ═══ メニュー画面：パネルを廃止して背景に直接ボタンとロゴを載せる ═══ */
#lobby{
  background:
    linear-gradient(180deg, rgba(8,10,20,.14) 0%, rgba(6,8,16,.10) 42%, rgba(3,4,10,.52) 100%),
    url(./home_bg.jpg?v=2) center/cover no-repeat,
    var(--deep);
}
.lbox{
  background:none !important;border:0 !important;box-shadow:none !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  padding:clamp(10px,2vh,18px);
}
/* グループの下敷きを全部消す（枠飾りも） */
#lobby .lgroup,
#lobby .lonline,
#lobby .luser{
  background:none !important;border:0 !important;box-shadow:none !important;padding:4px 2px;
}
#lobby .lgroup::before,
#lobby .luser::before{display:none !important;}

/* 文字は影を付けて画像の上でも読めるように */
#lobby .lgh{
  color:#f2e0b4;text-shadow:0 1px 4px rgba(0,0,0,.92), 0 0 3px rgba(0,0,0,.8);
}
#lobby .lgh::after{background:linear-gradient(90deg, rgba(242,224,180,.55), transparent);}
#lobby .lbrand .sub,
#lobby .lmsg,
#lobby .ltag,
#lobby #pickName,
#lobby .linstall a{
  text-shadow:0 1px 4px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.7);
}
#lobby .lmark{
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.95)) drop-shadow(0 0 26px rgba(224,187,110,.5));
}

/* ユーザーネームはタップできると分かるよう、ボタンと同じ金枠にする */
#lobby .luser{
  padding:9px 12px !important;border-radius:7px;cursor:pointer;
  background:linear-gradient(180deg, rgba(44,34,17,.86), rgba(18,13,7,.86)) !important;
  border:1px solid var(--g-line) !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), 0 3px 12px rgba(0,0,0,.5) !important;
}
#lobby .luser:hover{border-color:var(--g-line-hi) !important;}
#lobby .unameShow{color:var(--g-text);text-shadow:0 1px 3px rgba(0,0,0,.8);}

/* デッキ画像の読み込み欄も、背景の上で浮くように軽く締める */
#lobby .ldeck{
  background:rgba(8,6,3,.5);border:1px dashed rgba(210,190,150,.5);color:#e8dcc0;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
#lobby .lpick{background:rgba(8,6,3,.5) !important;border:1px solid var(--g-line) !important;}

/* ランダムマッチ 検索中 */
#btnRandom.searching{
  border-color:var(--g-line-hi) !important;color:#fff4dc !important;
  background:linear-gradient(180deg, rgba(224,187,110,.34), rgba(150,110,48,.22)) !important;
  animation:mmPulse 1.1s ease-in-out infinite;
}
@keyframes mmPulse{50%{box-shadow:0 0 18px rgba(224,187,110,.6), inset 0 0 0 1px rgba(0,0,0,.4);}}
@media (prefers-reduced-motion:reduce){#btnRandom.searching{animation:none;}}

/* ランダムマッチはメインなので大きく・目立たせる */
#lobby .lonline{gap:7px;}
#lobby #btnRandom{
  flex:1 1 auto;min-height:clamp(56px,12vh,110px);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(17px,2.8vh,24px);font-weight:800;letter-spacing:.1em;
  border:1px solid #ffe7b0 !important;color:#241704 !important;border-radius:9px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, #ffe199 0%, #f2b455 44%, #db8e2c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75), inset 0 -3px 8px rgba(120,70,10,.42),
    0 10px 30px rgba(232,162,62,.5), 0 0 0 1px rgba(90,55,15,.5) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
#lobby #btnRandom::before{content:"⚔ ";font-size:.85em;}
#lobby #btnRandom::after{border-color:rgba(120,74,20,.55) !important;inset:4px !important;}
#lobby #btnRandom:hover{
  transform:translateY(-2px);border-color:#fff3d6 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85), inset 0 -3px 8px rgba(120,70,10,.42),
    0 16px 40px rgba(240,180,80,.65), 0 0 0 1px rgba(90,55,15,.55) !important;
}
#lobby #btnRandom:active{transform:translateY(0) scale(.98);background:linear-gradient(180deg,#f2c877,#cf8a2c) !important;}
/* AIと対戦は少し控えめにしてランダムマッチを主役に */
#lobby .lbtn.primary{
  background:linear-gradient(180deg, rgba(60,48,26,.9), rgba(24,17,9,.9)) !important;
  color:var(--g-text) !important;border:1px solid var(--g-line) !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), 0 3px 10px rgba(0,0,0,.5) !important;
}
#lobby .lbtn.primary b{color:#f2e0b4 !important;}
#lobby .lbtn.primary b::before{color:var(--g-line-hi) !important;}
#lobby .lbtn.primary i{color:#c8b48c !important;}
#lobby .lbtn.primary:hover{border-color:var(--g-line-hi) !important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), 0 0 14px rgba(224,187,110,.35) !important;}

/* 検索中（＝キャンセル表示）は赤にする */
#lobby #btnRandom.searching{
  border:1px solid #ff9a8a !important;color:#fff2ee !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #d94b3a 0%, #b32b1f 52%, #8a1d14 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 8px rgba(90,10,5,.5),
    0 10px 30px rgba(210,50,40,.5), 0 0 0 1px rgba(80,15,10,.55) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  animation:mmPulseRed 1.1s ease-in-out infinite;
}
#lobby #btnRandom.searching::before{content:"■ ";font-size:.7em;}
#lobby #btnRandom.searching::after{border-color:rgba(255,180,170,.55) !important;}
#lobby #btnRandom.searching:hover{
  transform:translateY(-2px);border-color:#ffc4bb !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 8px rgba(90,10,5,.5),
    0 16px 40px rgba(230,70,55,.65), 0 0 0 1px rgba(80,15,10,.6) !important;
}
@keyframes mmPulseRed{50%{box-shadow:
  inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 8px rgba(90,10,5,.5),
  0 0 26px rgba(255,90,70,.7), 0 0 0 1px rgba(80,15,10,.55) !important;}}
@media (prefers-reduced-motion:reduce){#lobby #btnRandom.searching{animation:none;}}

/* ランダムマッチの枠を太めに */
#lobby #btnRandom{border-width:2.5px !important;}
#lobby #btnRandom.searching{border-width:2.5px !important;}
#lobby #btnRandom::after{inset:5px !important;border-width:1.5px !important;}

/* ユーザーネーム枠：横幅そのまま・高さを大きく縮める・下端に合わせる */
#lobby .luser{
  align-self:end;height:auto;min-height:0;flex:0 0 auto;
  flex-direction:row;align-items:center;gap:8px;
  padding:6px 11px !important;border-radius:6px;
}
#lobby .luser .lgh{flex:0 0 auto;font-size:9px;letter-spacing:.1em;}
#lobby .luser .lgh::after{display:none;}
#lobby .luser .unameShow{
  flex:1;min-width:0;font-size:clamp(12px,2vh,15px);font-weight:700;
}
#lobby .luser #uname{flex:1;min-width:0;padding:5px 8px;font-size:13px;width:auto;}
/* 縦積みの中では align-self:end が「右寄せ」になってしまうので戻す */
#lobby .lleft > .luser{align-self:stretch;}

/* ═══ デッキ一覧：代表カード＋名前のマス（マスターデュエル風） ═══ */
#dscr[data-view="list"] .dhead #dnew{display:none;}
#dlist.decklist{
  flex:1;overflow-y:auto;padding:12px;display:grid;align-content:start;
  grid-template-columns:repeat(auto-fill, minmax(118px, 1fr));
  gap:12px;
}
.dbox{
  position:relative;display:flex;flex-direction:column;cursor:pointer;
  padding:0;border-radius:10px;overflow:hidden;font:inherit;text-align:center;
  background:linear-gradient(180deg, rgba(30,24,14,.9), rgba(14,10,6,.92));
  border:2px solid var(--g-line);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.5);
  transition:transform .1s, border-color .15s, box-shadow .15s;
}
.dbox:hover{transform:translateY(-2px);border-color:var(--g-line-hi);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), 0 0 16px rgba(224,187,110,.4), 0 8px 20px rgba(0,0,0,.55);}
.dbox.on{border-color:var(--g-line-hi);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), 0 0 0 2px rgba(242,217,159,.5), 0 8px 20px rgba(0,0,0,.55);}
.dbox-art{
  width:100%;aspect-ratio:4/3;background:#0b0906;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#8a7a5a;font-size:12px;font-weight:700;
  border-bottom:1px solid rgba(0,0,0,.6);
}
.dbox-art img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;}
.dbox-name{
  padding:6px 6px 2px;font-size:12px;font-weight:700;color:var(--g-text);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em;
}
.dbox-date{padding:0 6px 7px;font-size:9.5px;color:#9a8a68;font-variant-numeric:tabular-nums;}
.dbox-badge{
  position:absolute;top:5px;left:5px;padding:2px 7px;border-radius:9px;
  font-size:9px;font-weight:800;letter-spacing:.05em;
  background:linear-gradient(180deg,#f2d99f,#d9a94e);color:#241704;box-shadow:0 1px 4px rgba(0,0,0,.6);
}
.dbox-warn{
  position:absolute;top:5px;right:5px;padding:2px 6px;border-radius:9px;
  font-size:9px;font-weight:700;background:rgba(200,60,45,.92);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.6);
}
/* ＋ 新しいデッキ */
.dbox-new{
  align-items:center;justify-content:center;gap:8px;min-height:150px;
  border-style:dashed;background:linear-gradient(180deg, rgba(24,20,12,.7), rgba(10,8,5,.72));
}
.dbox-plus{font-size:38px;line-height:1;color:var(--g-line-hi);text-shadow:0 0 14px rgba(224,187,110,.5);}
.dbox-newlabel{font-size:11px;font-weight:700;color:var(--g-text);letter-spacing:.06em;}

/* デッキを選んだときのポップアップ */
#dmenu{
  position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(3,4,10,.72);backdrop-filter:blur(3px);
}
.dmenu-box{
  width:min(340px,92%);border-radius:14px;padding:16px;
  background:linear-gradient(180deg, rgba(34,26,15,.98), rgba(15,11,7,.98));
  border:2px solid var(--g-line-hi);
  box-shadow:0 24px 60px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.5);
}
.dmenu-head{display:flex;gap:12px;align-items:center;margin-bottom:14px;}
.dmenu-art{width:64px;height:64px;flex:0 0 64px;border-radius:8px;overflow:hidden;background:#0b0906;border:1px solid var(--g-line);}
.dmenu-art img{width:100%;height:100%;object-fit:cover;object-position:center 20%;}
.dmenu-info{min-width:0;}
.dmenu-ttl{font-size:15px;font-weight:800;color:#fff2d6;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.dmenu-sub{margin-top:3px;font-size:10.5px;color:#c8b48c;}
.dmenu-btns{display:flex;gap:6px;margin-bottom:6px;}
.dmenu-btns .dbtn{flex:1;padding:12px 0;font-size:13px;}
.dmenu-btns2{display:flex;gap:6px;margin-bottom:12px;}
.dmenu-btns2 .dbtn{flex:1;padding:8px 0;font-size:10.5px;}
.dmenu-x{
  width:100%;padding:9px 0;cursor:pointer;font:inherit;font-size:11px;
  background:none;border:1px solid var(--g-line);color:#c8b48c;border-radius:7px;
}
.dmenu-x:active{background:rgba(224,187,110,.2);}

/* 「確認」画面 */
#dview{
  position:absolute;inset:0;z-index:21;display:flex;align-items:center;justify-content:center;
  padding:14px;background:rgba(3,4,10,.8);backdrop-filter:blur(3px);
}
.dview-box{
  width:min(760px,96%);max-height:92%;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg, rgba(28,22,13,.99), rgba(12,9,6,.99));
  border:2px solid var(--g-line-hi);box-shadow:0 24px 60px rgba(0,0,0,.75);
}
.dview-head{
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--g-line);
  font-size:14px;font-weight:800;color:#fff2d6;
}
.dview-head button{margin-left:auto;padding:6px 14px;cursor:pointer;font:inherit;font-size:11px;
  background:rgba(255,255,255,.06);border:1px solid var(--g-line);color:#c8b48c;border-radius:6px;}
.dview-body{flex:1;overflow-y:auto;padding:12px 14px;}
.dview-body h4{margin:12px 0 6px;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--g-line-hi);}
.dview-body h4:first-child{margin-top:0;}
.dview-body h4 b{color:#fff;}
.dview-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:5px;}
.dview-cards .dcard{margin:0;cursor:pointer;}
.dview-cards .dcard img{width:100%;aspect-ratio:59/86;object-fit:cover;border-radius:3px;border:1px solid var(--line2);display:block;}
.dview-cards .dcard figcaption{font-size:8px;color:var(--dim2);text-align:center;line-height:1.1;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dview-foot{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--g-line);}
.dview-foot .dbtn{flex:1;padding:11px 0;font-size:12.5px;}

/* ═══ マッチ決着の大表示 ═══ */
#matchend{
  position:fixed;inset:0;z-index:90;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(10,14,26,.72), rgba(3,4,10,.95)),
    url(./home_bg.jpg?v=2) center/cover no-repeat, #05060b;
  animation:meFade .4s ease;
}
#matchend[hidden]{display:none;}
@keyframes meFade{from{opacity:0;}}
.meinner{text-align:center;position:relative;}
#meTtl{
  margin:0;line-height:1.1;letter-spacing:.06em;
  font-family:'Cinzel','Noto Serif JP','Noto Sans JP',serif;font-weight:900;
  font-size:clamp(34px,8vw,74px);
  background:linear-gradient(180deg,#ffffff,#dfe9ff 45%,#9fb6d8);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 20px rgba(0,0,0,.8));
}
#matchend.win #meTtl{
  background:linear-gradient(180deg,#fff6da,#ffd873 45%,#e0a12f);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 4px 20px rgba(0,0,0,.8)) drop-shadow(0 0 40px rgba(240,190,90,.55));
}
#matchend.lose #meTtl{
  background:linear-gradient(180deg,#ffd9d3,#ff8f82 45%,#c23a2c);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 4px 20px rgba(0,0,0,.85)) drop-shadow(0 0 34px rgba(220,70,55,.45));
}
#meScore{
  margin:14px 0 0;font-size:clamp(14px,2.6vh,20px);font-weight:700;
  color:#e8eef8;letter-spacing:.12em;text-shadow:0 2px 10px rgba(0,0,0,.9);
}
#matchend .metap{
  margin:min(9vh,60px) 0 0;font-size:clamp(12px,2vh,15px);letter-spacing:.22em;color:#cdd9ea;
  text-shadow:0 2px 10px rgba(0,0,0,.95);animation:htap 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){#matchend .metap{animation:none;opacity:.85;}#matchend{animation:none;}}

/* サイドチェンジ中は下の盤面・操作パネルを隠す（KONAMIマットが透けないように） */
#app:has(> #side:not([hidden])) > #left,
#app:has(> #side:not([hidden])) > #right{ visibility:hidden; }

/* ── 対戦の再生の操作 ───────────────────────── */
/* 触ったら出て、しばらくすると引っ込む（動画の再生画面と同じ） */
#rbar{ opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease;
  position:fixed; left:50%;
  bottom:calc(6px + env(safe-area-inset-bottom)); z-index:70;
  width:min(680px, calc(100vw - 16px));
  background:rgba(10,13,22,.94); border:1px solid var(--g-line, #2a3350);
  border-radius:12px; padding:6px 10px 8px;
  transform:translateX(-50%) translateY(8px); }
#rbar.on{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
#rbar .rrow{ display:flex; gap:6px; align-items:center; margin-top:5px; }
#rbar button{ background:#1b2237; color:#dfe6f5; border:1px solid #2a3350;
  border-radius:8px; padding:6px 11px; font:inherit; font-size:13px; line-height:1; }
#rbar button:active{ background:#26304a; }
#rbar #rpos{ margin-left:auto; color:#8f9bb8; font-size:12px; font-variant-numeric:tabular-nums; }
/* つまみは指で掴める大きさにする */
#rseek{ -webkit-appearance:none; appearance:none; width:100%; height:22px;
  background:transparent; display:block; margin:0; }
#rseek::-webkit-slider-runnable-track{ height:5px; border-radius:3px; background:#2a3350; }
#rseek::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; margin-top:-7px;
  border-radius:50%; background:var(--g-line-hi, #f2d99f); border:1px solid #6b5528; }
#rseek::-moz-range-track{ height:5px; border-radius:3px; background:#2a3350; }
#rseek::-moz-range-thumb{ width:18px; height:18px; border-radius:50%;
  background:var(--g-line-hi, #f2d99f); border:1px solid #6b5528; }

/* ── 横向きにしたスマホ向けの詰め直し ───────────────────
   端末を横にすると高さが 360〜440px しかない（iPhone 16 で393px）。
   ふだんの配置は2行に「1fr ずつ」で押し込むので、入りきらない分が
   そのまま溢れて下の文字やボタンと重なっていた（実機で確認）。

   ここでは「行は中身なりの高さ」にしたうえで、余白と文字を高さに応じて
   縮める。**この指定はファイルの最後に置くこと**。前に置くと、
   後ろにある通常の指定に上書きされて効かない（実際にそうなった）。 */
@media (max-height:560px){
  /* ノッチ（画面の切り欠き）とホームバーの内側に収める。
     横向きでは切り欠きが左右どちらかに来るので、左右とも空ける。 */
  #lobby{
    align-items:flex-start;
    padding:6px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  }
  #lobby .lbox{
    max-height:none;width:min(940px,98vw);
    padding:clamp(7px,1.6vh,11px) clamp(9px,2vw,14px);gap:clamp(4px,1vh,7px);
  }
  /* 中身なりの高さにする（1fr だと縮められて溢れる） */
  #lobby .lgrid{flex:0 0 auto;grid-template-rows:auto auto;gap:clamp(4px,1.1vh,8px);}
  #lobby .lgroup,
  #lobby .luser{padding:clamp(5px,1.3vh,9px) clamp(7px,1.2vw,11px);gap:clamp(3px,.9vh,6px);}
  #lobby .lgh{font-size:clamp(8px,1.9vh,10px);}
  #lobby .lbtn{padding:clamp(6px,1.6vh,10px) 12px;font-size:clamp(11px,2.9vh,13px);}
  #lobby .lbtn.primary b{font-size:clamp(12px,3.2vh,15px);}
  #lobby .lbtn.primary i{font-size:clamp(8px,2vh,10px);}
  #lobby .lpick{padding:clamp(4px,1vh,7px) 9px;}
  #lobby #pickName{font-size:clamp(10px,2.6vh,12px);}
  #lobby #joinCode{padding:clamp(6px,1.6vh,10px) 10px;font-size:clamp(12px,3.2vh,15px);}
  #lobby .ldeck{padding:clamp(4px,1vh,7px) 8px;font-size:clamp(9px,2.3vh,11px);}
  #lobby .lmsg{min-height:0;font-size:10.5px;}
  #lobby .lbrand .lmark{font-size:clamp(26px,7vh,40px);}
  #lobby .lbrand .ltag{font-size:clamp(8px,1.8vh,10px);}
  #lobby .lbrand .sub{font-size:clamp(8px,1.9vh,10px);}
  #lobby .linstall{margin:0;font-size:clamp(9px,2.2vh,10.5px);}
  #lobby #resumeBar{margin-bottom:0;padding:clamp(4px,1.1vh,7px) 10px;}
  #lobby #resumeText{font-size:clamp(10px,2.5vh,12px);}
  #lobby #resumeBar .lbtn{min-width:78px;}
  #lobby .lreport{
    bottom:max(3px,env(safe-area-inset-bottom));left:max(5px,env(safe-area-inset-left));
    padding:3px 8px;font-size:9.5px;
  }
  #lobby #ver{bottom:max(3px,env(safe-area-inset-bottom));right:max(5px,env(safe-area-inset-right));}

  /* 対戦画面：下の「チェーン確認」の帯を薄くして、手札の下端が隠れないようにする。
     横向きスマホでは高さ数pxが効いてくるので、帯の厚みぶんを手札に回す。 */
  #chainmode{padding:2px 8px;}
  #chainmode i{font-size:7.5px;}
  #chainmode b{font-size:10.5px;}
  #hand{margin-bottom:7px;}
}