/* LAN内で外部に出られないことがあるため、外部フォントは使わない(端末のフォントを使う)。 */
:root{
  color-scheme:dark;
  --rail:#16100c; --rail2:#231912;
  --felt:#15402f; --felt2:#0b261c; --feltline:rgba(236,224,196,.16);
  --ink:#f0e8d6; --muted:#a8b0a0; --line:rgba(240,232,214,.14);
  --chip:#2b2119; --chip2:#3a2d22;
  --brass:#d9ae57; --brassdim:rgba(217,174,87,.55);
  --card:#f8f3e6; --cardink:#1d1a16; --red:#b3302a;
  --back:#7a2231; --back2:#621a27;
  --sheet:#1d1612;
  --ui:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,-apple-system,sans-serif;
  --idx:"Bodoni 72","Didot","Times New Roman",serif;
}
[hidden]{display:none!important}
html,body{height:100%;margin:0;padding:0}
/* アプリ内ブラウザ(LINE など)でもページ自体はスクロール・引っぱりで動かさない */
html{overflow:hidden;overscroll-behavior:none}
body{background:var(--rail);color:var(--ink);font:14px var(--ui);
  /* WKWebView の Pull to Refresh / ラバーバンド伸縮を無効化する(ページ自体はスクロールさせない)。 */
  overflow:hidden;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ---------- 参加画面 ---------- */
.joinview{height:100%;display:grid;place-items:center;padding:24px 16px;box-sizing:border-box;
  background:radial-gradient(120% 90% at 50% 30%,var(--felt) 0%,var(--felt2) 70%,var(--rail) 100%)}
.joincard{width:100%;max-width:360px;background:rgba(22,16,12,.9);border:1px solid var(--line);border-radius:20px;padding:24px 20px;box-sizing:border-box;
  box-shadow:0 14px 40px rgba(0,0,0,.45)}
.joincard h1{margin:0 0 6px;font-size:20px;text-align:center;letter-spacing:.06em}
#status{margin:0 0 14px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.6}
.joincard label{display:block;margin-bottom:6px;font-size:12px;color:var(--muted);letter-spacing:.08em}
.joincard input{width:100%;box-sizing:border-box;height:46px;padding:0 14px;font:16px var(--ui);color:var(--ink);
  background:var(--chip);border:1px solid var(--line);border-radius:12px;-webkit-user-select:text;user-select:text}
.joincard input:focus{outline:2px solid var(--brass);outline-offset:1px}
.joincard .primary{margin-top:14px}
.joinwait{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;margin-top:14px;font-size:14px;color:var(--ink)}
.spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--brass);border-radius:50%;animation:spin360 .8s linear infinite}
@keyframes spin360{to{transform:rotate(360deg)}}
.error{color:#f1937e;font-size:12.5px;min-height:1.2em;margin:10px 0 0;line-height:1.5}

/* ---------- テーブル画面 ---------- */
#table-section{height:100%}
#app{height:100%;max-width:440px;margin:0 auto;box-sizing:border-box;display:grid;gap:8px;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"side" "table" "tray";
  padding:calc(8px + env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(8px,env(safe-area-inset-left,0px));
  background:linear-gradient(180deg,var(--rail2),var(--rail));position:relative}
.side{grid-area:side;display:flex;flex-direction:column;gap:4px;min-width:0;position:relative;z-index:20}
/* 参加者は上に隠した引き出し。つまみを引っ張ると場の上に重なって出てくる */
.pull{position:relative;height:22px;--dh:0px}
.drawer{position:absolute;left:-8px;right:-8px;top:0;height:var(--dh);overflow:hidden;background:var(--rail2);
  border-radius:0 0 18px 18px;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.drawer-in{display:flex;flex-direction:column;gap:8px;padding:6px 8px 12px}
.grip{position:absolute;left:0;right:0;top:var(--dh);height:22px;padding:0;border:0;background:none;display:grid;place-items:center;touch-action:none;cursor:grab}
.grip::before{content:"";width:46px;height:5px;border-radius:3px;background:var(--muted);opacity:.55;transition:opacity .15s,background .15s}
.grip:hover::before,.grip.hot::before{opacity:1;background:var(--brass)}
.pull.anim .drawer{transition:height .26s cubic-bezier(.3,.7,.3,1)}
.pull.anim .grip{transition:top .26s cubic-bezier(.3,.7,.3,1)}
/* 2段目があることを知らせる、ゆっくり少し開いて閉じる動き(つまみを触ると止まる) */
.pull.nudge .drawer{transition:height 1.2s ease-in-out}
.pull.nudge .grip{transition:top 1.2s ease-in-out}

/* 一番上の行: 履歴(左、残りの幅全部)とメニュー */
.top{display:flex;align-items:center;gap:6px;padding:2px 2px 0}
.top #logStrip{flex:1}
.topbtns{display:flex;gap:6px;flex:none}
.iconbtn{background:var(--chip);border:1px solid var(--line);border-radius:10px;height:34px;padding:0 12px;font-size:13px;font-weight:500}
.iconbtn.help{width:34px;padding:0;font-size:15px;font-weight:700}

.players{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
/* 一度に3人まで。4人目以降は右の画面外に並び、横にスクロールして見る */
.players.scroll{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 16px) / 3);overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain}
.players.scroll::-webkit-scrollbar{display:none}
.players.scroll .pchip{scroll-snap-align:start}
.players.more-r{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.players.more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%);mask-image:linear-gradient(90deg,transparent,#000 12%)}
.players.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.players.edge-l{box-shadow:inset 26px 0 16px -14px var(--brass)}
.players.edge-r{box-shadow:inset -26px 0 16px -14px var(--brass)}
.players .noone{grid-column:2/-1;align-self:center;font-size:12px;color:var(--muted);text-align:center;padding:8px 0}
.pdots{display:flex;justify-content:center;gap:5px;margin-top:-2px}
.pdots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.pdots i.on{background:var(--brass)}
.pchip{display:flex;align-items:center;gap:8px;background:var(--chip);border:1px solid var(--line);border-radius:12px;padding:6px 8px;
  text-align:left;min-width:0;transition:transform .15s,box-shadow .15s}
.pchip .av{flex:none;width:30px;height:30px;border-radius:50%;background:var(--pc);color:#15100c;display:grid;place-items:center;font-weight:700;font-size:14px}
.pchip .meta{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.pchip .pn{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pchip .pc{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:4px}
.pchip.away .av{filter:grayscale(1);opacity:.55}
.pchip.away .pc{color:#f1b37e}
.mini{display:inline-block;width:8px;height:11px;border-radius:2px;background:var(--back);box-shadow:2px -1px 0 -0.5px var(--back2)}
.pchip.hot{box-shadow:0 0 0 2px var(--pc);transform:scale(1.04)}
.pchip.me{border-style:dashed}
.pchip[aria-pressed="true"]{background:var(--chip2);border-color:var(--pc);box-shadow:0 0 0 1px var(--pc)}
.ovhead{font-size:11px;color:var(--muted);letter-spacing:.08em;text-align:center;padding:2px 0 6px}
#overview{border-top:1px solid var(--line);padding-top:8px}
.ovgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:calc(100vh - 330px);overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;padding-bottom:2px}
.ovbox{cursor:pointer;transition:border-color .15s,transform .1s;background:var(--felt2);border:1px solid var(--line);border-radius:10px;padding:5px 6px 6px}
.ovbox.me{cursor:default;border-style:dashed}
.ovbox:not(.me):active{transform:scale(.98);border-color:var(--pc)}
.ovtop{display:flex;align-items:center;gap:5px;font-size:11px;margin-bottom:4px;white-space:nowrap;overflow:hidden}
.ovtop .avd{flex:none;width:16px;height:16px;border-radius:50%;background:var(--pc);color:#15100c;display:grid;place-items:center;font-size:9px;font-weight:700}
.ovtop b{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.ovtop span{color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}
.ovfield{position:relative;border:1px dashed var(--feltline);border-radius:6px;background:rgba(0,0,0,.12);overflow:hidden}
.ovc{position:absolute;border-radius:2px;background:var(--card);color:var(--cardink);font:700 7.5px/1 var(--idx);padding:1px;box-sizing:border-box;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.ovc.r{color:var(--red)}
.ovc.dn{background:repeating-linear-gradient(45deg,var(--back) 0 2px,var(--back2) 2px 4px);border:1px solid var(--card)}
.ovc.pl::after{content:attr(data-n);position:absolute;right:-5px;top:-5px;min-width:12px;height:12px;border-radius:6px;background:var(--brass);color:#1b140c;font:700 8px/12px var(--ui);text-align:center}

/* table */
#table{grid-area:table;position:relative;min-width:0;min-height:0;border-radius:20px;overflow:hidden;touch-action:none;
  --cw:54px;--ch:76px;
  /* 「あなたの場」と「相手の場」の枠の高さ(両方同じ)。JS の layoutFields が、場の幅に合わせて FIELD(1000×320単位)の縦横比で上書きする。
     これは JS が動く前の初期値 */
  --fh:calc((var(--ch) + 18px) * 1.3);
  /* 下の「あなたの場」の帯の高さ(枠 + 上下の余白)。中央の場・相手の場はこの上の残り全部を使う */
  --myz:calc(var(--fh) + 24px);
  background:radial-gradient(120% 90% at 50% 40%,var(--felt) 0%,var(--felt2) 100%);
  box-shadow:inset 0 0 0 6px #2c1f15,inset 0 0 0 7px rgba(255,255,255,.06),inset 0 10px 40px rgba(0,0,0,.45)}
@media (min-width:400px){#table{--cw:58px;--ch:82px}}
#table::before{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:4px 4px}
#world{position:absolute;inset:0}
#myZone{position:absolute;left:0;right:0;bottom:0;height:var(--myz);z-index:2;
  background:linear-gradient(180deg,rgba(11,38,28,0) 0,rgba(11,38,28,.92) 14px)}
#myZone.dragsrc{z-index:4}
#myCards{z-index:1;isolation:isolate;position:absolute;left:14px;right:14px;top:10px;height:var(--fh);border:1.5px dashed var(--feltline);border-radius:14px}
#myCards .zl{position:absolute;right:12px;top:-9px;background:var(--felt2);padding:0 6px;font-size:11px;color:var(--muted);letter-spacing:.12em;border-radius:4px}
/* 表裏・回転のアイコンは、場を広く使えるよう卓からはみ出して画面の右端に置く(位置は JS の layoutIcons) */
#rotIcon,#flipIcon{position:fixed;right:var(--icoR,0px);z-index:3;width:44px;height:44px;border-radius:50%;padding:0;
  border:1.5px solid var(--feltline);background:rgba(0,0,0,.3);color:var(--brass);display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:transform .15s,background .15s,color .15s}
#rotIcon{top:var(--rotTop,auto)}
#flipIcon{top:var(--flipTop,auto)}
#rotIcon span,#flipIcon span{font-size:9.5px;font-weight:700;line-height:1;margin-top:1px;font-variant-numeric:tabular-nums}
#rotIcon.hot,#flipIcon.hot{background:var(--brass);color:#1b140c;transform:scale(1.18)}
#rotIcon.spin svg{animation:spin .45s cubic-bezier(.3,.7,.3,1)}
#flipIcon.spin svg{animation:flipy .45s ease}
@keyframes spin{from{transform:rotate(-90deg)}to{transform:rotate(0)}}
@keyframes flipy{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
.rtip{position:absolute;right:16px;bottom:60px;z-index:6;max-width:230px;background:var(--ink);color:#1b140c;font-size:12.5px;line-height:1.55;
  padding:9px 12px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.rtip::after{content:"";position:absolute;right:22px;bottom:-6px;width:12px;height:12px;background:var(--ink);transform:rotate(45deg)}
.rtip.ftip{bottom:auto;top:64px}
.rtip.ftip::after{bottom:auto;top:-6px}
#fixedLayer{position:absolute;left:0;right:0;top:0;bottom:var(--myz);z-index:2;pointer-events:none}
#fixedLayer .pile{pointer-events:auto}
/* 「中央」の文字: 卓の中心(JS が位置を決める)に、カードより手前に描く */
.centerlbl{position:absolute;z-index:2;transform:translate(-50%,-50%);white-space:nowrap;padding-left:.14em;font-size:11px;color:rgba(240,232,214,.45);letter-spacing:.14em;pointer-events:none;text-shadow:0 0 2px rgba(0,0,0,.7),0 0 4px rgba(0,0,0,.4)}
#cards{position:absolute;inset:0;z-index:1;isolation:isolate}
/* 中央の場は画面より広い1枚のテーブル。ピンチで拡大縮小、何もない所のドラッグで移動 */
#mainClip{position:absolute;left:0;right:0;top:0;bottom:var(--myz);overflow:hidden;z-index:1}
#mainClip.dragsrc{z-index:3}
/* カードを中央の場まで運んでいる時、緑のフィールド全体の枠を縁取って示す */
#mainClip.hot{box-shadow:inset 0 0 0 2px var(--brass)}
#zoom{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
#zoom.anim{transition:transform .3s cubic-bezier(.3,.7,.3,1)}
.boardbg{position:absolute;left:-115%;top:-35%;width:330%;height:170%;border:1.5px dashed rgba(236,224,196,.12);border-radius:28px;
  background:rgba(255,255,255,.012);pointer-events:none}
#minimap{position:absolute;z-index:6;right:10px;top:calc(10px + var(--dcov,0px));padding:4px 4px 3px;border-radius:10px;border:1px solid var(--feltline);
  background:rgba(8,20,14,.82);display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font-size:10px;cursor:pointer}
#minimap canvas{display:block;width:66px;border-radius:5px}
#table.field-open #minimap,#table.field-open .coach{display:none}
#netBanner{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);max-width:min(86%,360px);padding:10px 12px;border-radius:12px;font-size:12.5px;text-align:center;
  background:rgba(22,16,12,.94);border:1px solid rgba(234,120,100,.5);color:#f1b37e;box-shadow:0 8px 24px rgba(0,0,0,.45)}
/* 再接続中のスピナー(メッセージの上側中央) */
#netBanner .spinner{display:block;margin:2px auto 8px}

/* 相手を選ぶと、中央の場の位置・大きさは変えずに、その手前に相手の手札と場を重ねて出す(「あなたの場」を上下反転した形)。
   背景だけ少し透かして後ろの中央の場の様子が見えるようにする(カード自体は透過させない)。
   枠の外(余白)は pointer-events:none にして、中央の場の操作(指での移動・拡大縮小・カードの移動)を通す */
#oppField{--ofb:88px;position:absolute;left:0;right:0;top:0;bottom:var(--myz);z-index:1;visibility:hidden;opacity:0;transition:opacity .2s,visibility 0s .2s;
  background:linear-gradient(0deg,rgba(0,0,0,0) 40%,color-mix(in srgb,var(--pc) 16%,transparent));pointer-events:none}
#oppField .ofhead,#oppField #oppHand,#oppField #oppCards{pointer-events:auto}
/* 相手の場の帯: 「あなたの場」(#myZone)と同じ濃い緑を、枠の上下に同じ余白を付けて敷く(カードの背だけなので、カード自体は透けない) */
#oppField::before{content:"";position:absolute;left:0;right:0;top:calc(var(--ofb) + 8px);height:calc(var(--fh) + 34px);
  background:linear-gradient(180deg,rgba(11,38,28,0) 0,rgba(11,38,28,.88) 14px,rgba(11,38,28,.88) calc(100% - 14px),rgba(11,38,28,0) 100%);pointer-events:none}
#table.field-open #oppField{visibility:visible;opacity:1;transition:opacity .2s;z-index:2}
#oppField.dragsrc{z-index:3}
.ofband{position:absolute;left:0;right:0;top:0;height:var(--ofb);background:var(--rail);
  box-shadow:0 6px 0 #2c1f15,0 7px 0 rgba(255,255,255,.06),0 10px 24px rgba(0,0,0,.45)}
.ofhead{position:absolute;left:16px;right:10px;top:6px;height:26px;display:flex;align-items:center;gap:8px}
.ofav{flex:none;width:26px;height:26px;border-radius:50%;background:var(--pc);color:#15100c;display:grid;place-items:center;font-weight:700;font-size:12.5px}
.ofname{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ofcount{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ofhint{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}
.ofreq{margin-left:auto;display:flex;align-items:center;gap:6px}
.ofreq b{font-size:12px;font-weight:700;white-space:nowrap}
.ofreq button{height:26px;padding:0 12px;border-radius:8px;border:0;background:var(--brass);color:#1b140c;font-weight:700;font-size:12.5px}
.ofreq button+button{background:var(--ink);color:#1b140c}
.ofx{flex:none;width:30px;height:28px;border-radius:9px;background:rgba(0,0,0,.3);border:1px solid var(--feltline);color:var(--ink);font-size:14px}
/* 相手の手札: 名前の行の下の帯(.ohband)に、左右にスクロールできる手札を重ねる。カードは下側が上の帯の下端で隠れ、選ぶと上へ飛び出す。
   飛び出した分が切れないよう、スクロールする枠は帯より上(名前の行の下)から始める */
.ohband{position:absolute;left:14px;right:14px;top:40px;height:calc(var(--ofb) - 40px);border-radius:12px 12px 0 0;background:rgba(0,0,0,.18)}
#oppHand{position:absolute;left:14px;right:14px;top:32px;height:calc(var(--ofb) - 32px);--cw:46px;--ch:65px;display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;padding:0 8px;box-sizing:border-box}
#oppHand::-webkit-scrollbar{display:none}
.ohc{position:relative;flex:none;width:var(--cw);height:var(--ch);margin-top:16px;padding:0;border:0;background:none;transition:transform .12s}
.ohc:last-child{margin-right:8px}
.ohc .card{left:0;top:0}
@media (hover:hover){.ohc:not(.osel):not(.pending):hover{transform:translateY(-4px)}}
/* 依頼の返事待ちの間も、選んでいた時と同じく飛び出したまま */
.ohc.osel,.ohc.pending{transform:translateY(-12px)}
.ohc.osel .back,.ohc.osel .face{outline:3.5px solid var(--brass);outline-offset:1px}
/* 他のプレイヤーが選んでいるカード(その人の色で縁取る) */
.ohc.picked .back{outline:3.5px solid var(--pc);outline-offset:1px}
.ohempty{font-size:11.5px;color:var(--muted);margin-top:16px;line-height:32px}
/* 相手の場の枠は「あなたの場」と同じ幅・高さ(--fh)。その下の残りに中央の山札・捨て札を置く */
#oppCards{position:absolute;left:14px;right:14px;top:calc(var(--ofb) + 18px);height:var(--fh);isolation:isolate;border:1.5px dashed var(--feltline);border-radius:14px}
/* 相手の手札と場の間(場の枠の上端)に、席順で前後のプレイヤーへ切り替えるボタンを置く */
#oppField .ofnav{pointer-events:auto}
.ofnav{position:absolute;top:calc(var(--ofb) + 8px);height:21px;max-width:calc(50% - 30px);padding:0 9px;border-radius:11px;border:1px solid var(--feltline);
  background:var(--felt2);color:var(--ink);font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2}
.ofnav.l{left:24px}
.ofnav.r{right:24px}
.ofnav b{color:var(--pc);font-weight:700}
.ozl{position:absolute;right:12px;bottom:-9px;background:var(--felt2);padding:0 6px;font-size:11px;color:var(--muted);letter-spacing:.12em;border-radius:4px;z-index:0}
.ofempty{position:absolute;top:0;bottom:0;right:0;left:calc(var(--cw) + 20px);display:grid;place-items:center;text-align:center;padding:0 16px;font-size:11.5px;color:var(--muted);line-height:1.5;pointer-events:none;margin:0}
/* あなたの場は右端に表裏・回転のアイコンが重なるので、その分を空ける */
.myempty{right:56px}

.coach{position:absolute;z-index:4;top:calc(10px + var(--dcov,0px));left:12px;right:12px;display:flex;align-items:center;gap:6px;
  background:rgba(12,24,18,.82);border:1px solid var(--feltline);border-radius:14px;padding:6px 6px 6px 12px;font-size:12px;line-height:1.5;color:var(--ink);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.coach span{flex:1;min-width:0}
.coach b{color:var(--brass);font-weight:700}
.coach button{flex:none;background:none;border:0;width:28px;height:28px;border-radius:8px;color:var(--muted);font-size:16px}

/* 山(中央の山札・捨て札・各自の山札) */
#deck{left:18px;bottom:30px;z-index:1}
#discard{right:18px;bottom:30px;z-index:1}
/* 相手の場を開いている間は、山札・捨て札を相手の場と自分の場の間に収まる大きさに縮める(placeFixedPiles)。位置は変えない */
#table.field-open #fixedLayer .pile.empty small{display:none}
#table.field-open #fixedLayer .pile.empty{font-size:10px}
#myPile,#oppPile{z-index:1}
.pile{position:absolute;width:var(--cw);height:var(--ch);touch-action:none;transition:transform .15s}
.pile .stackfx{position:absolute;inset:0;border-radius:7px;background:var(--back2);
  box-shadow:1.5px 1.5px 0 #e7dfcc,3px 3px 0 #d8cfba,4.5px 4.5px 0 #c9c0aa,6px 7px 12px rgba(0,0,0,.45)}
.pile .dcard{position:absolute;inset:0}
.pile .cnt{position:absolute;right:-10px;top:-10px;z-index:3;min-width:24px;height:24px;padding:0 6px;box-sizing:border-box;border-radius:12px;background:var(--brass);color:#1b140c;
  font-weight:700;font-size:12px;display:grid;place-items:center;font-variant-numeric:tabular-nums;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.pile .dlbl{position:absolute;left:0;right:0;top:calc(100% + 8px);text-align:center;font-size:11px;color:var(--muted);letter-spacing:.1em;white-space:nowrap}
.pile.empty{border:1.5px dashed var(--feltline);border-radius:8px;display:grid;place-items:center;font-size:11px;color:var(--muted);text-align:center;line-height:1.4;box-sizing:border-box}
.pile.empty small{display:block;margin-top:4px;font-size:9.5px;opacity:.8;line-height:1.35}
.pile.hot{outline:2px solid var(--brass);outline-offset:4px;border-radius:8px}
.pile.busy .dcard .face,.pile.busy .dcard .back{outline:2px dashed var(--brass);outline-offset:2px}

/* card */
.card{position:absolute;width:var(--cw);height:var(--ch);perspective:700px;
  transform:translateY(var(--ty,0px)) rotate(var(--rot,0deg)) scale(var(--s,1));transition:transform .18s ease}
.card .inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.3,.7,.3,1)}
.card.down .inner{transform:rotateY(180deg)}
.card.down.peek .inner{transform:rotateY(0deg)}
/* 他の人が覗いている伏せ札は、表にめくる(表面は真っ白で中身は見せない)。覗き終わると裏に戻る */
.card.down.watched .inner{transform:rotateY(0deg)}
.card.watched .face{background:#fff}
.card.watched .face>*{visibility:hidden}
.face,.back{position:absolute;inset:0;border-radius:calc(var(--cw)*.13);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face{background:var(--card);color:var(--cardink)}
.face.r{color:var(--red)}
.idx{position:absolute;top:calc(var(--cw)*.07);left:calc(var(--cw)*.08);display:flex;flex-direction:column;align-items:center;
  font-family:var(--idx);font-weight:700;font-size:calc(var(--cw)*.28);line-height:.95;letter-spacing:-.04em}
.idx i{font-style:normal;font-family:var(--ui);font-size:calc(var(--cw)*.22);letter-spacing:0}
.idx.bt{top:auto;left:auto;bottom:calc(var(--cw)*.07);right:calc(var(--cw)*.08);transform:rotate(180deg)}
.pip{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--cw)*.5)}
.jk .jkt{position:absolute;left:calc(var(--cw)*.08);top:calc(var(--cw)*.08);writing-mode:vertical-rl;font-family:var(--idx);font-weight:700;font-size:calc(var(--cw)*.17);letter-spacing:.06em}
.back{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,var(--back) 0 3px,var(--back2) 3px 6px);
  border:calc(var(--cw)*.06) solid var(--card);box-sizing:border-box}
.back::after{content:"";position:absolute;inset:3px;border:1px solid var(--brassdim);border-radius:3px}
/* 中央の場は拡大縮小されるので、縁取りの太さと間隔は --ts(倍率の逆数)を掛けて、画面上で同じ太さに保つ */
.card.sel .face,.card.sel .back{outline:calc(2.5px * var(--ts,1)) solid var(--brass);outline-offset:calc(2px * var(--ts,1))}
.card.pending .back,.card.pending .face,.ohc.pending .back{outline:calc(2px * var(--ts,1)) dashed var(--brass);outline-offset:calc(2px * var(--ts,1));animation:pend 1s ease-in-out infinite}
@keyframes pend{50%{outline-color:transparent}}
.card.watched .face,.card.watched .back{outline:calc(2.5px * var(--ts,1)) solid var(--pc);outline-offset:calc(2px * var(--ts,1))}
/* 自分の手札のうち、他のプレイヤーが選んでいるカード(その人の色で縁取る) */
.hcard.picked .face,.hcard.picked .back{outline:4px solid var(--pc);outline-offset:1px}
/* 他のプレイヤーの操作で動いた・変わったカード。その人の色で全体を薄く覆い、0.5秒そのまま見せてから1秒かけて消す(--fd は受け取ってからの経過ぶんの負の遅れ。描き直しても途中から続く) */
.card.fx::after,.ovc.fx::before{content:"";position:absolute;inset:0;z-index:1;border-radius:calc(var(--cw)*.13);background:var(--fc);opacity:.55;pointer-events:none;
  animation:fxfade 1.5s ease-in var(--fd,0ms) forwards}
.ovc.fx::before{border-radius:inherit}
@keyframes fxfade{0%,33.333%{opacity:.55}to{opacity:0}}
/* 移動中のカードは2倍に拡大(指でマークと数字が隠れないように)し、下のテーブルが見えるよう半透明にする */
.card.peekbig{z-index:99999!important;transition:transform .12s ease}
.card.lifted{--s:2;opacity:.6;z-index:99999!important;transition:transform .12s ease,opacity .12s}
.tcard{touch-action:none;cursor:grab}
/* 中央の場は拡大縮小されるので、ラベルの文字は逆に拡大縮小して常に通常の大きさで見せる */
.eye,.tag{position:absolute;white-space:nowrap;z-index:100000;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:9px;
  background:var(--brass);color:#1b140c;box-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none;
  transform-origin:50% 100%;transform:translate(-50%,calc(-100% - 6px * var(--ts,1))) scale(var(--ts,1))}
.tag{background:var(--pc)}

#flyLayer{position:fixed;inset:0;pointer-events:none;z-index:60}
.fly{position:fixed;z-index:60;pointer-events:none;transform-origin:0 0}
#flyLayer .dragstack{transform:scale(2);opacity:.6;transform-origin:50% 50%}
#flyLayer .dragstack .card{position:absolute;transform:none}
.stackn{position:absolute;right:-10px;top:-12px;z-index:5;min-width:26px;height:24px;padding:0 7px;box-sizing:border-box;border-radius:12px;background:var(--brass);color:#1b140c;font-size:12px;font-weight:700;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}

/* 履歴 */
#logStrip{display:flex;align-items:center;gap:8px;padding:0 12px;height:34px;border-radius:10px;
  background:rgba(0,0,0,.25);border:1px solid var(--line);font-size:12.5px;text-align:left;min-width:0}
#logStrip .dot,.lrow .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--pc)}
#logStrip b{flex:none;font-weight:700}
#logStrip .lt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
#logStrip .more{flex:none;font-size:11px;color:var(--muted)}
#logStrip .empty{color:var(--muted)}
#logStrip.flash{animation:flash .6s ease}
@keyframes flash{0%{background:rgba(217,174,87,.28)}100%{background:rgba(0,0,0,.25)}}

/* 手札は幅が固定された一列。枚数が増えたら重なりを深くし、それでも入らなければ横スクロール */
.tray{grid-area:tray;min-width:0;padding:0;transition:box-shadow .15s}
.tray.hot{box-shadow:inset 0 0 0 2px var(--brass);border-radius:14px}
/* カードを運んでいる時、離すと置かれる場(あなたの場・相手の場)の枠を縁取る */
#myCards.hot,#oppCards.hot{border-style:solid;border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.trayhead{display:flex;align-items:center;gap:8px;padding:0 6px 2px}
.trayhead h2{margin:0;font-size:14px;font-weight:700;white-space:nowrap}
.trayhead h2 span{font-variant-numeric:tabular-nums}
.trayhead .priv{flex:1;min-width:0;display:flex;flex-direction:column;font-size:11px;line-height:1.3;color:var(--muted)}
.trayhead .priv span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trayhead button{background:var(--chip);border:1px solid var(--line);border-radius:9px;height:28px;padding:0 10px;font-size:12px;flex:none}
/* 手札は上半分だけ見せる:カードが画面の下端からのぞく形にして、場を広く取る */
.hand{--cw:62px;--ch:88px;position:relative;display:flex;min-width:0;overflow-x:auto;overflow-y:hidden;padding:18px 10px 0;
  height:calc(var(--ch)*.52 + 18px);box-sizing:border-box;align-items:flex-start;
  background:rgba(0,0,0,.18);border-radius:14px 14px 0 0;scrollbar-width:none;touch-action:pan-x}
.hand::-webkit-scrollbar{display:none}
.hcard{position:relative;flex:none;margin-left:-20px;touch-action:pan-x;cursor:grab}
.hcard:first-child{margin-left:0}
.hcard.sel{--ty:-11px;touch-action:none}
.hcard.ghost{opacity:.25}
#insMark{position:absolute;top:6px;width:4px;height:calc(100% - 6px);margin-left:-2px;border-radius:2px;background:var(--brass);box-shadow:0 0 10px var(--brass);pointer-events:none;z-index:50}
.hand .emptyh{margin:-6px 0 0;font-size:12px;color:var(--muted);line-height:1.5}

/* シート(下から出るパネル) */
#sheetWrap{position:fixed;inset:0;z-index:80}
#sheetWrap .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .2s}
#sheet{position:absolute;left:50%;bottom:0;width:min(440px,100%);max-height:80%;overflow:auto;transform:translate(-50%,100%);transition:transform .22s cubic-bezier(.3,.7,.3,1);
  background:var(--sheet);border-radius:20px 20px 0 0;border:1px solid var(--line);border-bottom:0;
  padding:8px 16px calc(20px + env(safe-area-inset-bottom,0px));box-sizing:border-box}
#sheetWrap.on .backdrop{opacity:1}
#sheetWrap.on #sheet{transform:translate(-50%,0)}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 12px}
#sheet h3{margin:0 0 4px;font-size:17px;font-weight:700;display:flex;align-items:baseline;gap:6px}
#sheet h3 .num{font-family:var(--idx);font-size:24px;color:var(--brass);font-variant-numeric:tabular-nums}
#sheet .sub{margin:0 0 12px;font-size:12.5px;color:var(--muted);line-height:1.6}
.rows{display:flex;flex-direction:column;gap:6px}
.row{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--chip);border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.row b{font-size:14.5px;font-weight:700}
.row small{font-size:12px;color:var(--muted)}
.row.warn{border-color:rgba(234,120,100,.5)}
.row.warn b{color:#f1937e}
.primary{display:block;width:100%;height:48px;border-radius:14px;background:var(--brass);color:#1b140c;border:0;font-weight:700;font-size:15px}
.primary:disabled{opacity:.4;cursor:not-allowed}
.grid{--cw:46px;--ch:65px;display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:12px 8px;padding-top:4px}
.pick{background:none;border:0;padding:0;display:grid;place-items:center;width:var(--cw);height:var(--ch)}
.pick.on .mc{--ty:-6px}
.pick.on .mc .face{outline:2.5px solid var(--brass);outline-offset:2px}
.pickbar{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom,0px));display:flex;gap:8px;margin:14px -16px calc(-20px - env(safe-area-inset-bottom,0px));padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px));background:var(--sheet);border-top:1px solid var(--line)}
.pickbar .primary{flex:1}
.ghostbtn2{flex:none;height:48px;padding:0 14px;border-radius:14px;background:var(--chip2);border:1px solid var(--line);font-size:13.5px}
.stepper{display:flex;align-items:center;justify-content:center;gap:18px;margin:14px 0}
.stepbtn{flex:none;width:44px;height:44px;border-radius:50%;background:var(--chip2);border:1px solid var(--line);color:var(--ink);font-size:20px;font-weight:700}
.stepbtn:disabled{opacity:.35;cursor:not-allowed}
.stepval{min-width:70px;text-align:center}
.stepval b{display:block;font-size:26px;line-height:1.1;color:var(--brass);font-variant-numeric:tabular-nums}
.stepval small{display:block;font-size:11px;color:var(--muted)}
.mc{position:relative}
.askcards{--cw:46px;--ch:65px;display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 14px}
.askcards .mc{position:relative}
.guide{display:grid;grid-template-columns:1fr;gap:3px;font-size:13.5px;margin:0 0 4px}
.guide dt{color:var(--brass);font-weight:700;margin-top:8px}
.guide dd{margin:0;color:var(--ink);line-height:1.55}
.gsec{margin:16px 0 2px;font-size:12px;letter-spacing:.12em;color:var(--muted);font-weight:700;border-bottom:1px solid var(--line);padding-bottom:4px}
.gsec:first-of-type{margin-top:6px}
.lrow{display:flex;align-items:baseline;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.lrow .dot{transform:translateY(-1px)}
/* 名前と本文は1つの文として流し、折り返した行は名前の先頭にそろえる */
.lrow span.t{flex:1;min-width:0;overflow-wrap:anywhere}
.lrow span.t b{margin-right:8px}
.lrow time{flex:none;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ダイアログ(OK で閉じるお知らせ)。シートより上、トーストより下に出す */
#dlgWrap{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:16px;box-sizing:border-box}
#dlgWrap .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
#dlg{position:relative;width:min(320px,100%);background:var(--sheet);border:1px solid var(--line);border-radius:18px;padding:22px 18px 18px;box-sizing:border-box;
  box-shadow:0 14px 40px rgba(0,0,0,.45);text-align:center}
#dlg p{margin:0 0 18px;font-size:14.5px;line-height:1.7}
#toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;z-index:90;max-width:calc(100% - 32px);
  background:#f0e8d6;color:#1b140c;font-size:13px;font-weight:500;padding:9px 14px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.4)}

/* 高さの低い画面: 上の帯・手札・あなたの場を詰めて、場(特に相手の場)の高さを確保する */
@media (max-height:640px){
  .iconbtn{padding:0 10px}
  #oppField{--ofb:66px}
  .ofhead{top:4px}
  .ohband{top:34px}
  #oppHand{top:30px;--cw:38px;--ch:54px}
  .ohc{margin-top:10px}
  .ohc.osel,.ohc.pending{transform:translateY(-6px)}
  .ohempty{margin-top:8px;line-height:28px}
  .hand{--cw:54px;--ch:76px}
}

/* スマホを横向きにした時に出す案内(タブレット・PCは対象外: タッチ専用デバイスでだけ出す) */
.rotateblock{display:none;position:fixed;inset:0;z-index:999999;background:var(--rail);color:var(--ink)}
.rbcard{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;box-sizing:border-box;text-align:center}
.rbcard svg{color:var(--brass);animation:rbspin 1.8s ease-in-out infinite}
.rbcard p{margin:0;font-size:14px;line-height:1.7;color:var(--muted)}
@keyframes rbspin{0%,20%{transform:rotate(0)}50%,70%{transform:rotate(-90deg)}100%{transform:rotate(-90deg)}}
/* orientation メディアクエリは表示領域の縦横比でしか判定できず、iOS でソフトキーボードが出ると縦のまま横画面扱いになってしまうため使わない(判定は app.js 側で、端末の実際の向きを見て html.landscape を付け外しする)。 */
@media (max-width:1000px) and (hover:none) and (pointer:coarse){
  html.landscape .rotateblock{display:block}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.rbcard svg{animation:none}}