/* Layout: a grimoire desk. Players across the top, the casting stage in the middle, your hand at the bottom, log and card tracker on the side. One dark look by design. */
:root{
  color-scheme: dark;
  --ink:#16131f; --panel:#1f1b2d; --panel2:#29243b; --line:#3d3656;
  --fg:#efe7d4; --muted:#a69fbb; --gold:#d9b46c; --gold-dim:#8a7444;
  --fire:#ea6a3f; --water:#4e9de3; --wind:#4cc094; --none:#b8acd9;
  --heal:#f0d77a; --tool:#c58ae8; --curse:#e0566b; --good:#86d394; --bad:#e0566b;
  --f-display:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --r:10px;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{background:var(--ink);color:var(--fg);font-family:var(--f-body);font-size:14px;line-height:1.6;
  background-image:radial-gradient(1200px 500px at 50% -200px,#2c2545 0%,transparent 70%);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding-block:16px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:14px}
header{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
h1{font-family:var(--f-display);font-weight:800;font-size:22px;margin:0;letter-spacing:.04em;text-wrap:balance}
h1 small{font-size:12px;color:var(--muted);font-family:var(--f-body);font-weight:500;margin-left:6px;letter-spacing:0}
.hstats{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;align-items:center}
.pill{border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pill b{color:var(--fg)}
.pill.cycle{border-color:var(--gold-dim);color:var(--gold)}
.pill.off{border-color:var(--bad);color:var(--bad)}
.btn{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 14px;cursor:pointer;font-weight:500}
.btn:hover:not(:disabled){border-color:var(--gold-dim)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--gold);color:#1b1608;border-color:var(--gold);font-weight:700}
.btn.primary:hover:not(:disabled){filter:brightness(1.08)}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn.small{padding:4px 10px;font-size:12px}

.players{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.pl{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:6px;position:relative;text-align:left}
.pl.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.pl.dead{opacity:.38}
.pl.targetable{cursor:pointer;border-style:dashed;border-color:var(--gold)}
.pl.targetable:hover{background:var(--panel2)}
.pl.chosen{background:var(--panel2);border-style:solid}
.pl-top{display:flex;align-items:baseline;gap:6px}
.pl-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{font-size:10px;letter-spacing:.08em;border:1px solid var(--line);border-radius:4px;padding:0 5px;color:var(--muted);white-space:nowrap}
.tag.off{color:var(--bad);border-color:var(--bad)}
.pl-hand{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.hp{display:flex;align-items:center;gap:8px}
.hpbar{flex:1;height:6px;background:var(--panel2);border-radius:3px;overflow:hidden}
.hpbar i{display:block;height:100%;background:var(--good);transition:width .4s}
.hpbar i.mid{background:var(--heal)} .hpbar i.low{background:var(--bad)}
.hpnum{font-variant-numeric:tabular-nums;font-weight:700;min-width:44px;text-align:right}
.badges{display:flex;flex-wrap:wrap;gap:4px}
.badge{font-size:11px;padding:0 6px;border-radius:4px;background:var(--panel2);color:var(--muted)}
.badge.silence{color:var(--tool)} .badge.fam{color:var(--wind)}
.badge.disp{color:var(--fg)} .badge.nodisp{color:var(--bad)}
.chips{display:flex;flex-wrap:wrap;gap:4px;font-size:11px}
.chips .lbl{color:var(--muted)}
.chip{border-radius:4px;padding:0 6px;border:1px solid currentColor}

.e-fire{color:var(--fire)} .e-water{color:var(--water)} .e-wind{color:var(--wind)} .e-none{color:var(--none)}
.e-heal{color:var(--heal)} .e-tool{color:var(--tool)} .e-calamity{color:var(--curse)} .e-shield{color:var(--fg)} .e-counter{color:var(--gold)}

.main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
@media (max-width:900px){.main{grid-template-columns:minmax(0,1fr)}}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}
.stage{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-height:300px;display:flex;flex-direction:column;gap:12px}
.stage h2{font-family:var(--f-display);font-size:19px;margin:0;font-weight:800;text-wrap:balance}
.stage p{margin:0}
.muted{color:var(--muted)}
.timer{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}
.timer.hurry{color:var(--bad);font-weight:700}
.steps{display:flex;gap:6px;flex-wrap:wrap;font-size:12px}
.step{padding:2px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.step.on{border-color:var(--gold);color:var(--gold)}
.step.ok{color:var(--fg)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.verdict{font-family:var(--f-display);font-weight:800;font-size:15px;padding:2px 12px;border-radius:6px;border:1px solid}
.verdict.true{color:var(--gold);border-color:var(--gold)}
.verdict.false{color:var(--tool);border-color:var(--tool)}
.declbox{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.arrow{color:var(--muted);font-size:20px}
.lines{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:2px}
.hint{font-size:12px;color:var(--muted)}
.warn{color:var(--tool);font-weight:700}

.hand{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.hand-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hand-head h3{margin:0;font-family:var(--f-display);font-size:16px}
.cards{display:flex;gap:8px;flex-wrap:wrap}
.card{--c:var(--fg);width:112px;min-height:150px;border-radius:9px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:9px 9px 8px;text-align:left;position:relative;cursor:default;transition:transform .12s,border-color .12s}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;border-radius:9px 9px 0 0;background:var(--c)}
.card.el-fire{--c:var(--fire)} .card.el-water{--c:var(--water)} .card.el-wind{--c:var(--wind)} .card.el-none{--c:var(--none)}
.card.el-heal{--c:var(--heal)} .card.el-tool{--c:var(--tool)} .card.el-calamity{--c:var(--curse)} .card.el-counter{--c:var(--gold)}
.card .c-type{font-size:10px;letter-spacing:.08em;color:var(--c);margin-top:2px}
.card .c-name{font-family:var(--f-display);font-weight:800;font-size:14px;line-height:1.3}
.card .c-pow{margin-top:auto;font-size:24px;font-weight:700;color:var(--c);font-variant-numeric:tabular-nums;line-height:1}
.card .c-desc{font-size:11px;color:var(--muted);line-height:1.4}
.card .c-flag{position:absolute;top:8px;right:8px;font-size:10px;color:var(--muted)}
button.card.pickable{cursor:pointer;border-color:var(--gold-dim)}
button.card.pickable:hover{transform:translateY(-3px);border-color:var(--gold)}
button.card:disabled{opacity:.35}
.card.sel-decl{outline:2px solid var(--gold);outline-offset:2px}
.card.sel-act{outline:2px dashed var(--tool);outline-offset:2px}
.card.fresh .c-flag{color:var(--gold)}
.card.mini{width:96px;min-height:122px}
@media (max-width:480px){.card{width:calc(33.3% - 6px);min-height:138px}.card.mini{width:96px}}

.side{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;min-width:0}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs button{flex:1;background:none;border:0;padding:9px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent}
.tabs button.on{color:var(--fg);border-bottom-color:var(--gold)}
.sidebody{padding:10px 12px;max-height:560px;overflow:auto;font-size:12.5px}
.log{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}
.log li{border-left:2px solid var(--line);padding-left:8px}
.log li.decl{border-color:var(--gold-dim)}
.log li.res{border-color:var(--tool)}
.log li.sys{border-color:var(--curse);color:var(--muted)}
.log li.turn{border-color:transparent;color:var(--gold);font-weight:700;padding-left:0;margin-top:4px}
table.trk{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.trk td,table.trk th{padding:3px 4px;border-bottom:1px solid var(--line);text-align:left}
table.trk th{font-weight:500;color:var(--muted);font-size:11px}
table.trk td.n,table.trk th.n{text-align:right}
table.trk tr.zero td{color:var(--muted);opacity:.6}

.overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 92%,transparent);display:flex;align-items:center;justify-content:center;z-index:20;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.dialog{background:var(--panel);border:1px solid var(--gold-dim);border-radius:14px;padding:22px;max-width:640px;width:100%;max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:14px}
.dialog h2{font-family:var(--f-display);margin:0;font-size:22px;text-wrap:balance}
.dialog h3{font-family:var(--f-display);margin:6px 0 0;font-size:15px;color:var(--gold)}
.dialog ul{margin:0;padding-left:18px}

.setup{max-width:560px;width:100%;margin:20px auto 0;display:flex;flex-direction:column;gap:18px}
.hero{display:flex;flex-direction:column;gap:6px}
.hero h1{font-size:34px}
.hero p{margin:0;color:var(--muted);max-width:60ch}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;color:var(--muted)}
input.txt{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:9px 12px;color:var(--fg);font:inherit;width:100%;min-width:0}
input.code{text-transform:uppercase;letter-spacing:.2em;font-variant-numeric:tabular-nums}
.box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px}
.roomcode{font-family:var(--f-display);font-size:40px;font-weight:800;letter-spacing:.18em;color:var(--gold);line-height:1}
.share{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.share code{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:5px 8px;font-size:12px;word-break:break-all;user-select:all}
.seats{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.seats li{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.seats li .nm{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.triangle{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-family:var(--f-display);font-weight:800}
.err{color:var(--bad)}
/* ===== logo: LIAR is drawn twice, slightly off (a lie is a double image); CAST is solid gold ===== */
:root{--f-logo:"Cinzel","Trajan Pro","Times New Roman",serif}
.logo{display:inline-flex;align-items:center;gap:.32em;line-height:1;font-family:var(--f-logo);font-weight:900;letter-spacing:.06em;font-size:22px;white-space:nowrap}
.logo .sigil{width:1.25em;height:1.25em;flex:none}
.logo .liar{color:var(--tool);text-shadow:.08em -.03em 0 color-mix(in srgb,var(--tool) 38%,transparent)}
.logo .cast{color:var(--gold)}
.logo.big{font-size:52px}
.logo-sub{font-family:var(--f-body);font-size:13px;color:var(--muted);letter-spacing:.3em;margin-top:6px}
@media (max-width:480px){.logo.big{font-size:40px}}
.hero .sigil{animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== card art: an element emblem as a watermark, a tint rising from the corner ===== */
.card{background:radial-gradient(130% 90% at 100% 100%,color-mix(in srgb,var(--c) 20%,transparent),transparent 62%),linear-gradient(180deg,var(--panel2),var(--panel));overflow:hidden}
.card .c-art{position:absolute;right:-10px;bottom:-10px;width:70px;height:70px;color:var(--c);opacity:.2;pointer-events:none}
.card .c-type{display:flex;align-items:center;gap:4px}
.card .c-type svg{width:12px;height:12px}
.card > *:not(.c-art){position:relative}
.card .c-flag{position:absolute}

/* ===== motion ===== */
.casting{animation:cast 1.6s ease-in-out infinite}
@keyframes cast{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 0%,transparent)}50%{box-shadow:0 0 22px 2px color-mix(in srgb,var(--c) 55%,transparent)}}
.anim .flip{animation:flip .55s .25s both}
@keyframes flip{from{transform:perspective(600px) rotateY(90deg);opacity:0}to{transform:none;opacity:1}}
.anim .verdict{animation:stamp .4s .75s both}
@keyframes stamp{from{transform:scale(2.4) rotate(-10deg);opacity:0}60%{transform:scale(.9) rotate(2deg);opacity:1}to{transform:none}}
.anim .lines li{animation:rise .35s both;animation-delay:calc(1s + var(--i) * .18s)}
@keyframes rise{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}
.verdict.true{box-shadow:0 0 18px color-mix(in srgb,var(--gold) 40%,transparent)}
.verdict.false{box-shadow:0 0 18px color-mix(in srgb,var(--tool) 40%,transparent)}
.players .pl.hit{animation:hit .55s .8s both}
@keyframes hit{0%{transform:none}15%{transform:translateX(-6px);box-shadow:0 0 0 2px var(--bad) inset,0 0 24px color-mix(in srgb,var(--bad) 50%,transparent)}35%{transform:translateX(5px)}55%{transform:translateX(-3px)}75%{transform:translateX(2px)}100%{transform:none}}
.players .pl.healed{animation:healed .9s .8s both}
@keyframes healed{0%,100%{box-shadow:none}40%{box-shadow:0 0 0 2px var(--good) inset,0 0 24px color-mix(in srgb,var(--good) 45%,transparent)}}
.float{position:absolute;right:56px;top:22px;font-weight:800;font-size:22px;font-variant-numeric:tabular-nums;pointer-events:none;animation:floatUp 1.4s .8s both;text-shadow:0 2px 8px var(--ink)}
.float.dmg{color:var(--bad)} .float.heal{color:var(--good)}
@keyframes floatUp{0%{transform:translateY(8px) scale(.6);opacity:0}20%{transform:scale(1.15);opacity:1}70%{opacity:1}100%{transform:translateY(-22px);opacity:0}}
.card.drawn{animation:drawn .5s both}
@keyframes drawn{from{transform:translateY(-24px) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
.pl.active{animation:turnGlow 2.4s ease-in-out infinite}
@keyframes turnGlow{0%,100%{box-shadow:0 0 0 1px var(--gold) inset}50%{box-shadow:0 0 0 1px var(--gold) inset,0 0 18px color-mix(in srgb,var(--gold) 30%,transparent)}}
.result{font-family:var(--f-display);font-size:30px;font-weight:800;margin:0;animation:stamp .5s both}
.result.win{color:var(--gold)}

/* ===== the table: opponents across the top, the field in the middle, you and your hand at the bottom ===== */
.table{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto auto 1fr auto;max-width:1100px;margin:0 auto;
  padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));padding-block:10px 0;gap:10px}
.topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topbar .room{font-family:var(--f-logo);font-weight:700;letter-spacing:.15em;color:var(--muted);font-size:13px;border:1px solid var(--line);border-radius:6px;padding:1px 8px}
.foes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.arena{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px 12px;min-height:250px;border-radius:18px;
  background:radial-gradient(60% 70% at 50% 50%,color-mix(in srgb,var(--gold) 9%,transparent),transparent 70%),radial-gradient(closest-side,transparent 80%,color-mix(in srgb,var(--gold) 14%,transparent) 81%,transparent 83%) center/min(70vw,420px) min(70vw,420px) no-repeat}
.mine{position:sticky;bottom:0;z-index:5;display:flex;align-items:flex-end;gap:12px;padding:10px 0 max(12px,env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,transparent,var(--ink) 30%)}
.hand-row{display:flex;gap:8px;overflow-x:auto;padding:14px 4px 4px;flex:1;min-width:0;scrollbar-width:thin}
.hand-row .card{flex:none}

/* seats */
.seat{position:relative;display:flex;gap:10px;align-items:center;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 12px 8px 8px;width:220px;min-width:0}
.seat.mine{width:230px;flex:none;align-self:center}
.seat.dead{opacity:.35;filter:grayscale(.7)}
.seat .av{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:20px;
  background:radial-gradient(circle at 35% 30%,var(--panel2),var(--ink));border:2px solid var(--line);color:var(--fg)}
.seat.active .av{border-color:var(--gold);box-shadow:0 0 14px color-mix(in srgb,var(--gold) 45%,transparent)}
.seat .sv{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.nm-row{display:flex;align-items:center;gap:5px;min-width:0}
.pname{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.role{font-size:10px;color:var(--gold);border:1px solid var(--gold-dim);border-radius:4px;padding:0 5px;white-space:nowrap;margin-left:auto}
.seat .hpnum{min-width:26px;font-size:15px}
.sts{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.st{display:inline-flex;align-items:center;gap:2px}
.st svg{width:13px;height:13px}
.st.disp{color:var(--fg)} .st.disp.none{color:var(--bad)} .st.fam{color:var(--wind)} .st.sil{color:var(--tool)}
.known{display:flex;gap:3px;flex-wrap:wrap}
.kn{width:18px;height:18px;border-radius:4px;border:1px solid currentColor;display:grid;place-items:center}
.kn svg{width:12px;height:12px}
button.seat.pickable{cursor:pointer;border-color:var(--gold);animation:pick 1.2s ease-in-out infinite}
@keyframes pick{0%,100%{box-shadow:0 0 0 1px var(--gold)}50%{box-shadow:0 0 0 1px var(--gold),0 0 20px color-mix(in srgb,var(--gold) 45%,transparent)}}
.seat.chosen{border-color:var(--tool);box-shadow:0 0 0 2px var(--tool)}
.seat.hit{animation:hit .55s both}
.seat.healed{animation:healed .9s both}
.seat .float{right:14px;top:6px;animation-delay:0s}

/* arena contents */
.prompt{font-family:var(--f-display);font-weight:800;font-size:20px;text-align:center;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;text-wrap:balance}
.prompt.small{font-size:15px}
.help{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);font:700 12px var(--f-body);color:var(--muted);cursor:help}
.center{text-align:center;justify-content:center}
.preview{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.card.ghost{display:grid;place-items:center;color:var(--muted);border-style:dashed;font-size:26px}
.casting-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}
.cast-info .who{font-weight:700;font-size:16px}
.cast-info .what{color:var(--muted)}
.reveal{display:flex;flex-direction:column;align-items:center;gap:10px}
.reveal .who{font-size:14px}
.reveal .lines{font-size:13px;color:var(--muted);padding:0;list-style:none;text-align:center}
.card.big{width:132px;min-height:178px}
.card.big .c-name{font-size:16px}
.card.big .c-pow{font-size:32px}
.card.big .c-art{width:96px;height:96px}
.rbtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.rbtn{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:84px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);cursor:pointer;font-size:13px;font-weight:700}
.rbtn svg{width:26px;height:26px}
.rbtn:hover:not(:disabled){border-color:var(--gold);transform:translateY(-2px)}
.rbtn:disabled{opacity:.35;cursor:not-allowed}
.rbtn.danger{color:var(--bad)} .rbtn.gold{color:var(--gold)}
.rbtn.el-fire{color:var(--fire)} .rbtn.el-water{color:var(--water)} .rbtn.el-wind{color:var(--wind)}
.rbtn span{color:var(--fg)}
.result{text-align:center}

/* cards without the long text */
.card{width:96px;min-height:132px}
.card.mini{width:84px;min-height:112px}
.card .c-pow{font-size:26px}

/* log / tracker drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(360px,100%);z-index:18;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:-10px 0 30px rgba(0,0,0,.4)}
.drawer .sidebody{max-height:none;flex:1}
.drawer .tabs .x{flex:none;width:44px;font-size:18px}

/* tooltip */
.tip{position:fixed;z-index:40;max-width:260px;background:var(--panel2);border:1px solid var(--gold-dim);border-radius:10px;padding:8px 11px;font-size:12.5px;line-height:1.55;
  display:flex;flex-direction:column;gap:2px;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.tip b{font-family:var(--f-display);font-size:14px;color:var(--gold)}
.tip span{white-space:pre-line;color:var(--fg)}

/* effects layer */
#fx{position:fixed;inset:0;pointer-events:none;z-index:15;overflow:hidden}
.fx{position:absolute;left:0;top:0;border-radius:50%;will-change:transform,opacity}
.fx.orb{background:radial-gradient(circle,#fff 0 18%,var(--c) 40%,transparent 72%);box-shadow:0 0 18px 6px color-mix(in srgb,var(--c) 70%,transparent)}
.fx.spark{background:var(--c);box-shadow:0 0 8px 2px color-mix(in srgb,var(--c) 70%,transparent)}
.fx.ring{border:3px solid var(--c)}
.fx.flash{background:radial-gradient(circle,color-mix(in srgb,var(--c) 70%,transparent),transparent 65%)}
.fx.bubble{border:2px solid var(--c);background:radial-gradient(circle,transparent 55%,color-mix(in srgb,var(--c) 35%,transparent) 75%,transparent 76%);box-shadow:0 0 24px color-mix(in srgb,var(--c) 50%,transparent),inset 0 0 24px color-mix(in srgb,var(--c) 40%,transparent)}
.fx.rune{border:2px dashed var(--c);box-shadow:0 0 16px color-mix(in srgb,var(--c) 50%,transparent),inset 0 0 0 6px transparent,inset 0 0 0 7px color-mix(in srgb,var(--c) 60%,transparent)}
.fx.shard{border-radius:2px;background:linear-gradient(135deg,#fff,var(--c));clip-path:polygon(50% 0,100% 60%,30% 100%,0 40%)}
.fx.mirror{border-radius:12px;border:3px solid var(--c);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 30%,transparent),transparent);box-shadow:0 0 30px color-mix(in srgb,var(--c) 60%,transparent)}
.fx.puff{background:radial-gradient(circle,color-mix(in srgb,var(--c) 50%,#000) ,transparent 70%)}

@media (max-width:600px){
  .seat{width:calc(50% - 5px);padding:6px 8px 6px 6px;gap:7px}
  .seat .av{width:34px;height:34px;font-size:16px}
  .seat.mine{width:auto;flex-direction:column;gap:4px;padding:6px}
  .seat.mine .sv .known,.seat.mine .nm-row .role{display:none}
  .mine{gap:8px}
  .arena{min-height:200px;padding:12px 4px}
  .prompt{font-size:17px}
  .card{width:82px;min-height:116px}
  .card.big{width:110px;min-height:150px}
  .topbar .logo{font-size:18px}
  .topbar .hstats{gap:6px}
  .wide-only{display:none}
  .seat .tag:not(.off){display:none}
}
.drawer-extra{padding:8px 12px;border-bottom:1px solid var(--line)}

/* phones: players two per row, the stage only as tall as its content, so the hand stays close */
@media (max-width:600px){
  .players{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pl{padding:8px 10px;gap:4px}
  .pl .hpnum{min-width:0}
  .stage{min-height:0;padding:14px}
  .wrap{gap:10px}
}
/* 「演出：オフ」を選んだときだけ動きを止める（OSの設定には従わない。演出が見えなくなる人が多かったため） */
.calm *{transition:none!important;animation:none!important}

/* ===== reveal: the declared card first, then it glows (true) or turns into the real card (false) ===== */
.rv-slot{position:relative;width:132px;height:178px;flex:none}
.rv-face{position:absolute;inset:0;transition:opacity .25s,transform .25s,filter .25s}
.rv-face .card{width:100%;height:100%;min-height:0}
.rv-face.act{opacity:0;transform:scale(.5)}
.rv-slot.swapped .rv-face.decl{opacity:0;transform:scale(1.3);filter:blur(8px)}
.rv-slot.swapped .rv-face.act{opacity:1;transform:none;animation:boing .65s cubic-bezier(.3,1.6,.5,1) both}
@keyframes boing{0%{opacity:0;transform:scale(.3) rotate(-8deg)}60%{opacity:1;transform:scale(1.18) rotate(3deg)}100%{opacity:1;transform:none}}
.rv-slot.truth .rv-face.decl .card{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 30px color-mix(in srgb,var(--gold) 55%,transparent);animation:truthUp 1.2s ease-out both}
@keyframes truthUp{0%{transform:none}30%{transform:scale(1.16) translateY(-6px)}100%{transform:scale(1.04)}}
.rv-slot.broken .rv-face{opacity:0;transform:scale(.8) rotate(6deg)}
.rv-slot .verdict{position:absolute;top:-16px;right:-46px;opacity:0;background:var(--ink);z-index:2}
.rv-slot .verdict.on{opacity:1;animation:stamp .45s both}
.rv-cap{font-family:var(--f-display);font-weight:800;font-size:19px;min-height:1.6em;text-align:center;text-wrap:balance}
.rv-cap.gold{color:var(--gold)} .rv-cap.purple{color:var(--tool)} .rv-cap.red{color:var(--bad)} .rv-cap.green{color:var(--good)}
.rv-cap.pop{animation:capPop .4s both}
@keyframes capPop{from{transform:translateY(8px) scale(.94);opacity:0}to{transform:none;opacity:1}}
.reveal .lines{opacity:0;transition:opacity .4s}
.reveal.done .lines{opacity:1}
.fx.rays{border-radius:50%;background:repeating-conic-gradient(color-mix(in srgb,var(--c) 55%,transparent) 0 6deg,transparent 6deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%)}
@media (max-width:600px){.rv-slot{width:110px;height:150px}.rv-slot .verdict{right:-34px}.rv-cap{font-size:16px}}
/* ===== title & lobby: starry sky, a slowly turning gold magic circle, gilded frames ===== */
.magic-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(90% 60% at 50% 0%,#3a2366 0%,transparent 60%),radial-gradient(70% 50% at 50% 100%,#2a1240 0%,transparent 70%),linear-gradient(180deg,#120d22,#0b0816)}
.magic-bg .stars{position:absolute;inset:-50%;background-image:
  radial-gradient(1.2px 1.2px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 120px,#e9dcff,transparent),radial-gradient(1.5px 1.5px at 160px 60px,#fff6d6,transparent),
  radial-gradient(1px 1px at 230px 180px,#fff,transparent),radial-gradient(1.2px 1.2px at 300px 90px,#d9c8ff,transparent);background-size:340px 220px;opacity:.7;animation:drift 120s linear infinite}
@keyframes drift{to{transform:translate(340px,220px)}}
.magic-bg .mc-wrap{position:absolute;left:50%;top:44%;width:min(110vw,980px);aspect-ratio:1;transform:translate(-50%,-50%);color:var(--gold);opacity:.22;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--gold) 60%,transparent))}
.magic-bg .mc{width:100%;height:100%;animation:spin 160s linear infinite}
.magic-bg .motes i{position:absolute;bottom:-10px;left:var(--x);width:4px;height:4px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px 2px color-mix(in srgb,var(--gold) 70%,transparent);animation:mote var(--d) linear var(--s) infinite;opacity:0}
@keyframes mote{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-105vh) translateX(30px);opacity:0}}
.lux-page{position:relative;z-index:1}
.setup.wide{max-width:680px}
.lux{position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 88%,transparent),color-mix(in srgb,var(--ink) 92%,transparent));
  border:1px solid var(--gold-dim);border-radius:16px;padding:22px 20px 20px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 80%,transparent),0 0 0 5px color-mix(in srgb,var(--gold) 35%,transparent),0 20px 50px rgba(0,0,0,.5);backdrop-filter:blur(6px)}
.lux::before,.lux::after{content:"✦";position:absolute;top:-11px;color:var(--gold);font-size:16px;text-shadow:0 0 10px var(--gold)}
.lux::before{left:18px} .lux::after{right:18px}
.lux-title{font-family:var(--f-display);font-weight:800;font-size:17px;letter-spacing:.12em;color:var(--gold);text-align:center;display:flex;align-items:center;gap:12px;justify-content:center;list-style:none;cursor:default}
.lux-title::before,.lux-title::after{content:"";height:1px;flex:1;max-width:90px;background:linear-gradient(90deg,transparent,var(--gold-dim))}
.lux-title::after{background:linear-gradient(90deg,var(--gold-dim),transparent)}
details.lux summary{cursor:pointer}
details.lux summary::-webkit-details-marker{display:none}
.lux-btn{background:linear-gradient(180deg,#f0d38f,#c99a4a);border-color:#f0d38f;box-shadow:0 0 18px color-mix(in srgb,var(--gold) 45%,transparent);letter-spacing:.06em}
.lux-split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.lux-split{grid-template-columns:1fr}}
.center-box{align-items:center;text-align:center}
.lux .roomcode{font-size:46px;text-shadow:0 0 22px color-mix(in srgb,var(--gold) 50%,transparent)}
.lux-hero{align-items:center;text-align:center;gap:8px}
.lux-hero p{text-align:center;margin:0 auto}
.lineup{display:flex;justify-content:center;align-items:flex-end;margin-bottom:4px;height:118px}
.lineup .lu{width:84px;height:84px;margin:0 -10px;border-radius:50%;box-shadow:0 0 0 2px var(--gold-dim),0 8px 20px rgba(0,0,0,.5);animation:float 4s ease-in-out infinite}
.lineup .lu2{width:112px;height:112px;z-index:2;box-shadow:0 0 0 3px var(--gold),0 0 30px color-mix(in srgb,var(--gold) 45%,transparent)}
.lineup .lu1,.lineup .lu3{width:96px;height:96px;z-index:1}
.lineup .lu0{animation-delay:-1s} .lineup .lu1{animation-delay:-2s} .lineup .lu3{animation-delay:-3s} .lineup .lu4{animation-delay:-.5s}
@keyframes float{50%{transform:translateY(-6px)}}
.avatar{width:100%;height:100%;display:block;border-radius:50%}
.me-preview{display:flex;align-items:center;gap:14px;justify-content:center}
.me-preview .avatar{width:84px;height:84px;box-shadow:0 0 0 2px var(--gold),0 0 24px color-mix(in srgb,var(--gold) 40%,transparent)}
.me-preview b{display:block;font-family:var(--f-display);font-size:20px}
.avpick{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
@media (max-width:560px){.avpick{grid-template-columns:repeat(4,1fr)}}
.avopt{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-size:11px;color:var(--muted)}
.avopt .avatar{width:100%;max-width:64px;aspect-ratio:1;height:auto;box-shadow:0 0 0 1px var(--line);transition:transform .15s,box-shadow .15s}
.avopt:hover .avatar{transform:translateY(-2px)}
.avopt.on{color:var(--gold)}
.avopt.on .avatar{box-shadow:0 0 0 2px var(--gold),0 0 16px color-mix(in srgb,var(--gold) 55%,transparent)}
.lux-seats li{background:color-mix(in srgb,var(--panel2) 80%,transparent);border-color:color-mix(in srgb,var(--gold) 25%,var(--line));padding:8px 12px}
.lux-seats li .avatar{width:44px;height:44px;flex:none}
.lux-seats li.me{border-color:var(--gold)}
.lux-seats li .nm small{display:block;font-weight:400;font-size:11px;color:var(--muted)}
.lux-seats li.empty{border-style:dashed;opacity:.55}
.lux-seats .slot{width:44px;height:44px;border-radius:50%;border:1px dashed var(--gold-dim);flex:none}
.tag.gold{color:var(--gold);border-color:var(--gold-dim)}

/* ===== match seats: bigger portrait, HP, hand and known cards ===== */
.seat{width:250px;gap:12px;padding:10px 14px 10px 10px;align-items:flex-start}
.seat .portrait{position:relative;width:72px;height:72px;flex:none}
.seat .portrait .avatar{box-shadow:0 0 0 2px var(--line)}
.seat.active .portrait .avatar{box-shadow:0 0 0 3px var(--gold),0 0 22px color-mix(in srgb,var(--gold) 55%,transparent)}
.seat .portrait .role{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);background:var(--ink);margin:0}
.seat.mine .portrait{width:92px;height:92px}
.seat .hp{gap:6px}
.seat .heart{color:var(--bad);font-size:16px;line-height:1}
.seat .hpnum{font-size:24px;min-width:0;line-height:1}
.seat .hpbar{height:8px}
.sts{gap:12px;font-size:14px}
.st b{font-size:16px;color:var(--fg)}
.st svg{width:16px;height:16px}
.backs{display:inline-flex;align-items:center;gap:0}
.backs i{width:11px;height:16px;border-radius:2px;margin-right:-5px;background:linear-gradient(135deg,#4b2b8f,#2a1d4f);border:1px solid var(--gold-dim)}
.backs b{margin-left:9px;font-size:16px}
.known{gap:4px}
.kn{width:auto;height:auto;padding:1px 6px 1px 4px;gap:3px;display:inline-flex;align-items:center;font-size:11.5px;border-radius:5px;background:color-mix(in srgb,currentColor 10%,transparent)}
.kn svg{width:12px;height:12px}
.kn.peek{border-style:dashed}
.me-col{display:flex;flex-direction:column;gap:8px;align-items:stretch;flex:none}
.pass-btn{font-weight:700}
.stackpick{display:flex;gap:6px;align-items:center;justify-content:center}
.chipbtn{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:3px 12px;cursor:pointer;font-weight:700}
.chipbtn.on{border-color:var(--gold);color:var(--gold);box-shadow:0 0 12px color-mix(in srgb,var(--gold) 35%,transparent)}
.stackwrap{position:relative;display:inline-block}
.times{position:absolute;right:-10px;top:-10px;z-index:3;background:var(--gold);color:#1b1608;font-weight:800;border-radius:999px;padding:1px 8px;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.rv-face .times{right:-12px;top:-12px}
[data-hand] .card{touch-action:none;cursor:grab}
[data-hand] .card.dragging{z-index:30;cursor:grabbing;box-shadow:0 14px 30px rgba(0,0,0,.6);transition:none;opacity:.95;pointer-events:none}
[data-hand] .card.drop-before{box-shadow:-6px 0 0 -2px var(--gold)}
[data-hand] .card.drop-after{box-shadow:6px 0 0 -2px var(--gold)}
@media (max-width:600px){
  .seat{width:calc(50% - 5px);gap:8px;padding:8px}
  .seat .portrait{width:52px;height:52px}
  .seat.mine .portrait{width:64px;height:64px}
  .seat .hpnum{font-size:20px}
  .seat.mine{flex-direction:row;width:auto}
  .seat.mine .sv{min-width:84px}
  .hand-row{flex-wrap:wrap;overflow:visible}
  .mine{flex-direction:column;align-items:stretch;position:static;background:none}
  .me-col{flex-direction:row;align-items:center}
  .lineup .lu{width:60px;height:60px}.lineup .lu2{width:82px;height:82px}.lineup .lu1,.lineup .lu3{width:70px;height:70px}
}

/* ===== spell effects ===== */
.fx.orb2{box-shadow:0 0 26px 8px color-mix(in srgb,var(--c) 65%,transparent)}
.fx.tor{border-radius:50%;filter:blur(.5px)}
.fx.wave{border-radius:50% 50% 12% 12% / 70% 70% 20% 20%;background:linear-gradient(180deg,#e8fbff 0,#8fdcff 12%,#4e9de3 45%,#1d4f99 100%);box-shadow:0 0 30px color-mix(in srgb,#4e9de3 60%,transparent)}
.fx.blade{border-radius:0 100% 0 100%;background:linear-gradient(135deg,#c8f7a8,#4cc094 55%,#1f6b45);box-shadow:0 0 14px #4cc094}
.fx.slash{border-radius:4px;background:linear-gradient(90deg,transparent,#f0fff8,transparent);box-shadow:0 0 12px #4cc094}
/* ===== fields: one of three stages behind the table ===== */
.field-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.field-bg svg{position:absolute;inset:0;width:100%;height:100%}
.field-bg.f0{background:radial-gradient(60% 50% at 80% 15%,#2a3570 0%,transparent 70%),radial-gradient(1.2px 1.2px at 30px 40px,#fff,transparent) 0 0/180px 140px,radial-gradient(1px 1px at 110px 90px,#cfd8ff,transparent) 0 0/220px 160px,linear-gradient(180deg,#0d1230,#151a3d 60%,#0a0c1f)}
.field-bg.f1{background:radial-gradient(50% 40% at 50% 100%,#5a1a10 0%,transparent 70%),radial-gradient(30% 40% at 10% 50%,#3a0e0a,transparent 70%),radial-gradient(30% 40% at 90% 50%,#3a0e0a,transparent 70%),linear-gradient(180deg,#140505,#22090a 60%,#0e0303)}
.field-bg.f1 ellipse{animation:flicker 1.8s ease-in-out infinite}
@keyframes flicker{50%{opacity:.35}}
.field-bg.f2{background:radial-gradient(50% 40% at 50% 60%,#14402c 0%,transparent 70%),radial-gradient(40% 30% at 50% 0%,#1d5a3d,transparent 70%),linear-gradient(180deg,#07150f,#0b2318 60%,#040c08)}
.table{position:relative;z-index:1}
.arena{background:radial-gradient(60% 70% at 50% 50%,color-mix(in srgb,var(--ink) 55%,transparent),transparent 75%),radial-gradient(closest-side,transparent 80%,color-mix(in srgb,var(--gold) 16%,transparent) 81%,transparent 83%) center/min(70vw,420px) min(70vw,420px) no-repeat}
.seat{background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(4px);flex-wrap:wrap}

/* opponent hands: known cards face up, the rest as sleeves */
.ohand{display:flex;flex-basis:100%;padding-left:2px;margin-top:2px}
.oc{--c:var(--fg);width:40px;height:56px;border-radius:5px;margin-right:-8px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;box-shadow:0 2px 6px rgba(0,0,0,.4);overflow:hidden}
.oc::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--c)}
.oc.el-fire{--c:var(--fire)} .oc.el-water{--c:var(--water)} .oc.el-wind{--c:var(--wind)} .oc.el-none{--c:var(--none)} .oc.el-heal{--c:var(--heal)} .oc.el-tool{--c:var(--tool)} .oc.el-counter{--c:var(--gold)} .oc.el-calamity{--c:var(--curse)}
.oc .oc-ic{width:16px;height:16px;color:var(--c)}
.oc em{font-style:normal;font-size:8.5px;line-height:1.1;text-align:center;padding:0 2px;color:var(--fg);word-break:break-all}
.oc.peek{border-style:dashed;border-color:var(--tool)}
.oc.sleeve{background:repeating-linear-gradient(45deg,#3a2470 0 4px,#2a1a52 4px 8px);border-color:var(--gold-dim)}
.oc.sleeve::before{display:none}
.oc.sleeve::after{content:"✦";color:var(--gold);font-size:13px;opacity:.85}
.oc:hover{transform:translateY(-4px);z-index:2}

/* the winner is shown only after the last spell finishes */
.reveal:not(.done) ~ .after-reveal{visibility:hidden}
.after-reveal{display:flex;flex-direction:column;align-items:center;gap:10px}
.reveal.done ~ .after-reveal{animation:stamp .6s both}
@media (max-width:600px){.oc{width:32px;height:46px;margin-right:-9px}.oc em{display:none}}
/* ===== luxurious animated fields (same language as the lobby) ===== */
.field-bg{--fc:var(--gold)}
.field-bg.f0{--fc:#9fb4ff} .field-bg.f1{--fc:#ffb26b} .field-bg.f2{--fc:#8fe0b6}
.field-bg .stars{position:absolute;inset:-50%;background-image:radial-gradient(1.2px 1.2px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 120px,#e9dcff,transparent),radial-gradient(1.5px 1.5px at 160px 60px,#fff6d6,transparent),radial-gradient(1px 1px at 230px 180px,#fff,transparent);background-size:300px 210px;opacity:.45;animation:drift 140s linear infinite}
.field-bg.f1 .stars{opacity:.15}
.field-bg .rays{position:absolute;left:50%;top:-30%;width:160vmax;height:160vmax;transform:translateX(-50%);background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--fc) 9%,transparent) 0 4deg,transparent 4deg 18deg);
  -webkit-mask:radial-gradient(circle at 50% 30%,#000 0,transparent 55%);mask:radial-gradient(circle at 50% 30%,#000 0,transparent 55%);animation:spin 240s linear infinite;opacity:.8}
.field-bg .mc-wrap{position:absolute;left:50%;top:52%;width:min(90vw,760px);aspect-ratio:1;transform:translate(-50%,-50%) perspective(900px) rotateX(58deg);color:var(--fc);opacity:.35;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--fc) 70%,transparent))}
.field-bg .mc-wrap .mc{width:100%;height:100%;animation:spin 90s linear infinite}
.field-bg .motes i{position:absolute;bottom:-10px;left:var(--x);width:4px;height:4px;border-radius:50%;background:var(--fc);box-shadow:0 0 10px 2px color-mix(in srgb,var(--fc) 70%,transparent);animation:mote var(--d) linear var(--s) infinite;opacity:0}
.field-bg .veil{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,transparent 40%,rgba(0,0,0,.55) 100%)}
.field-bg svg{filter:drop-shadow(0 0 30px rgba(0,0,0,.6))}
/* doom: once calamity cards are shuffled in, the stage turns ominous */
.field-bg.doom{--fc:#ff3b4e}
.field-bg.doom .veil{background:radial-gradient(70% 60% at 50% 50%,transparent 30%,rgba(90,0,10,.65) 100%);animation:doomPulse 3.2s ease-in-out infinite}
.field-bg.doom::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(120,0,20,.25),transparent 40%,rgba(60,0,10,.45));mix-blend-mode:multiply}
.field-bg.doom .stars{filter:hue-rotate(-60deg) saturate(3);opacity:.3}
@keyframes doomPulse{50%{opacity:.7}}
.table.doom .arena{box-shadow:inset 0 0 80px rgba(160,0,30,.25)}

/* ===== the field row: arena in the middle, deck and graveyard on its right ===== */
.table{grid-template-rows:auto auto 1fr auto}
.arena-wrap{position:relative;display:flex;align-items:center;justify-content:center;gap:16px}
.arena-wrap .arena{flex:1;min-width:0}
.piles{display:flex;flex-direction:column;gap:16px;align-items:center;flex:none;width:110px}
.deckpile,.grave{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:help}
.deckpile .stack{position:relative;width:70px;height:96px}
.deckpile .stack i{position:absolute;left:0;bottom:calc(var(--k) * 2px);width:70px;height:96px;border-radius:7px;border:1px solid var(--gold-dim);
  background:radial-gradient(circle at 50% 50%,transparent 0 18px,rgba(217,180,108,.35) 19px 20px,transparent 21px),repeating-linear-gradient(45deg,#3a2470 0 5px,#2a1a52 5px 10px);box-shadow:0 1px 0 #120c26}
.deckpile .stack i:last-child::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);font-size:20px;text-shadow:0 0 10px var(--gold)}
.deckpile.doom .stack i{border-color:#8e1d26;background:radial-gradient(circle at 50% 50%,transparent 0 16px,rgba(255,59,78,.5) 17px 18px,transparent 19px),repeating-linear-gradient(-45deg,#3a0610 0 4px,#14020a 4px 9px);box-shadow:0 1px 0 #000,0 0 14px rgba(255,40,60,.25)}
.deckpile.doom .stack i:last-child::after{content:"☠";color:#ff3b4e;text-shadow:0 0 12px #ff3b4e;animation:doomPulse 2s ease-in-out infinite}
.deckpile b,.grave b{font-size:20px;font-variant-numeric:tabular-nums;margin-top:4px}
.deckpile span,.grave span{font-size:11px;color:var(--muted);letter-spacing:.2em}
.grave{cursor:pointer}
.grave .stack{width:70px;height:96px;display:grid;place-items:center}
.grave .stack .card{width:70px;min-height:96px;transform:rotate(-6deg);filter:saturate(.6) brightness(.85);pointer-events:none}
.grave .stack .card .c-name{font-size:10px}
.grave-pop{display:none;position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);width:min(360px,80vw);max-height:70vh;overflow:auto;z-index:25;
  background:var(--panel);border:1px solid var(--gold-dim);border-radius:14px;padding:14px;box-shadow:0 20px 50px rgba(0,0,0,.6);flex-direction:column;gap:10px;text-align:left;font-size:12.5px}
.grave:hover .grave-pop{display:flex}
.grave-pop .kn b{margin-left:4px;color:var(--muted)}

/* ===== you sit in the middle, your hand fanned above you ===== */
.mine{flex-direction:column;align-items:center;gap:6px}
.mine .hand-row{justify-content:center;flex:none;max-width:100%;padding-top:16px}
.me-col{flex-direction:row;align-items:center;gap:12px;justify-content:center}
.seat.mine{width:auto;min-width:260px}

/* bigger opponent hands */
.oc{width:52px;height:72px;margin-right:-10px;border-radius:6px}
.oc .oc-ic{width:20px;height:20px}
.oc em{font-size:9.5px}
.oc.sleeve::after{font-size:16px}
.seat{width:300px}

@media (max-width:760px){
  .arena-wrap{flex-direction:column}
  .piles{flex-direction:row;width:auto;gap:24px}
  .deckpile .stack,.deckpile .stack i,.grave .stack,.grave .stack .card{width:52px;height:72px;min-height:72px}
  .grave-pop{right:auto;left:50%;top:auto;bottom:calc(100% + 10px);transform:translateX(-50%)}
  .seat{width:calc(50% - 5px)}
  .oc{width:38px;height:54px;margin-right:-9px}
}
/* keep the hand and your seat below the field instead of floating over it */
.mine{position:relative;background:none;padding-bottom:max(14px,env(safe-area-inset-bottom,0px))}
.seat.mine{flex-direction:row;align-items:center;min-width:0;width:auto;padding:8px 16px 8px 8px}
.seat.mine .portrait{width:80px;height:80px}
.arena{min-height:300px}
/* ===== no overlapping labels =====
   ×N badge: top-left corner of the card / verdict stamp: centered under the card / 宣言・実際 tag: top-right inside */
.times{right:auto;left:-10px;top:-10px}
.rv-face .times{right:auto;left:-12px;top:-12px}
.rv-slot{margin-bottom:24px}
.rv-slot .verdict{top:auto;right:0;left:0;bottom:-22px;margin:0 auto;width:max-content}
.card.mini .c-flag{font-size:9px;top:6px;right:6px}
.card .c-type{max-width:calc(100% - 34px);overflow:hidden;white-space:nowrap}
.seat .float{left:6px;right:auto;top:20px;width:76px;text-align:center;z-index:3}
.seat.mine .float{width:84px}
.preview .verdict{flex:none}

/* rich spell parts */
.fx.screen{left:0;top:0;right:0;bottom:0;width:auto!important;height:auto!important;margin:0!important;border-radius:0;mix-blend-mode:screen}
.fx.pillar-outer{border-radius:50% 50% 35% 35%/30% 30% 8% 8%;background:linear-gradient(to top,#fff3c4 0,#ffb43d 14%,#ff6a1a 40%,rgba(210,40,10,.75) 70%,transparent);filter:blur(3px);box-shadow:0 0 70px 20px rgba(255,110,30,.55)}
.fx.pillar-core{border-radius:50% 50% 40% 40%/25% 25% 8% 8%;background:linear-gradient(to top,#ffffff 0,#fff1a8 25%,#ffc23d 55%,transparent);filter:blur(2px);mix-blend-mode:screen}
.fx.leaf{border-radius:0 100% 0 100%;background:linear-gradient(135deg,#d6ffc0,var(--c));box-shadow:0 0 8px color-mix(in srgb,var(--c) 70%,transparent)}
.fx.svgfx{border-radius:0;filter:drop-shadow(0 0 18px rgba(80,170,255,.35))}
/* ===== graveyard panel: on the right edge of the screen, every card as a picture tile, no scrolling ===== */
.grave-pop{position:fixed;left:auto;right:max(16px,env(safe-area-inset-right,0px));top:50%;bottom:auto;transform:translateY(-50%);width:min(470px,calc(100vw - 32px));max-height:none;overflow:visible;padding:14px 14px 12px;gap:10px}
.grave-pop.inline{position:static;display:flex;transform:none;width:auto;box-shadow:none;border:0;padding:0;background:none}
.gp-head{display:flex;justify-content:space-around;font-family:var(--f-display);color:var(--gold);letter-spacing:.1em}
.gp-head b{font-size:22px;margin-left:4px;color:var(--fg)}
.gp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.gt{--c:var(--fg);display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 3px 4px;border-radius:8px;border:1px solid color-mix(in srgb,var(--c) 40%,var(--line));
  background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%),var(--panel2)}
.gt.el-fire{--c:var(--fire)} .gt.el-water{--c:var(--water)} .gt.el-wind{--c:var(--wind)} .gt.el-none{--c:var(--none)} .gt.el-heal{--c:var(--heal)} .gt.el-tool{--c:var(--tool)} .gt.el-counter{--c:var(--gold)} .gt.el-calamity{--c:var(--curse)} .gt.el-shield{--c:var(--fg)}
.gt-art{position:relative;width:34px;height:34px;display:grid;place-items:center;color:var(--c)}
.gt-art svg{width:28px;height:28px;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 60%,transparent))}
.gt-art b{position:absolute;right:-8px;bottom:-4px;font-size:11px;background:var(--ink);border-radius:6px;padding:0 3px;color:var(--fg)}
.gt span{font-size:9.5px;line-height:1.15;text-align:center;min-height:2.3em;display:flex;align-items:center}
.gt.gone{opacity:.38;filter:grayscale(.6)}
.pips{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;max-width:62px}
.pips i,.gp-legend i{width:7px;height:7px;border-radius:50%;display:inline-block}
i.p-used{background:#e0566b} i.p-left{background:var(--gold);box-shadow:0 0 5px var(--gold)} i.p-mine{background:#f5f0ff} i.p-seen{background:var(--tool)}
.gp-legend{display:flex;justify-content:center;gap:12px;font-size:11px;color:var(--muted);flex-wrap:wrap}
.gp-legend span{display:inline-flex;align-items:center;gap:4px}
@media (max-width:760px){.grave-pop:not(.inline){display:none!important}.gp-grid{grid-template-columns:repeat(4,1fr)}}
/* ===== each stage has its own moving parts ===== */
/* 星詠みの天文台 */
.field-bg .moon{position:absolute;right:9%;top:7%;width:min(16vw,150px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fffbe8,#e9dfb8 45%,#b9ae86 70%);box-shadow:0 0 60px 20px rgba(255,246,214,.25),0 0 160px 60px rgba(160,180,255,.12);animation:moonGlow 6s ease-in-out infinite}
@keyframes moonGlow{50%{box-shadow:0 0 80px 26px rgba(255,246,214,.32),0 0 200px 80px rgba(160,180,255,.16)}}
.field-bg .orrery{position:absolute;left:50%;top:50%;width:min(80vw,680px);aspect-ratio:1;transform:translate(-50%,-50%) perspective(800px) rotateX(62deg)}
.field-bg .orrery svg{width:100%;height:100%;overflow:visible}
.orrery .orb1{animation:spin 24s linear infinite} .orrery .orb2{animation:spin 15s linear infinite reverse} .orrery .orb3{animation:spin 9s linear infinite}
.field-bg .constel{position:absolute;inset:0;width:100%;height:100%}
.twinkle{animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.2}}
.shooting i{position:absolute;top:var(--y);left:-20%;width:160px;height:2px;background:linear-gradient(90deg,transparent,#fff);border-radius:2px;transform:rotate(-18deg);opacity:0;animation:shoot var(--d) linear var(--s) infinite}
@keyframes shoot{0%{transform:translate(0,0) rotate(-18deg);opacity:0}2%{opacity:1}12%{transform:translate(140vw,-40vh) rotate(-18deg);opacity:0}100%{opacity:0}}
/* 紅蓮の古城 */
.field-bg .rose{position:absolute;left:50%;top:5%;width:min(22vw,200px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:conic-gradient(from 0deg,#ff3b4e,#ffb26b,#c0394f,#ff7a1a,#7a1020,#ffb26b,#ff3b4e);-webkit-mask:radial-gradient(circle,#000 62%,transparent 64%);mask:radial-gradient(circle,#000 62%,transparent 64%);opacity:.55;filter:blur(.5px);animation:spin 80s linear infinite;box-shadow:0 0 60px rgba(255,120,60,.4)}
.field-bg .beam{position:absolute;left:50%;top:10%;width:min(50vw,460px);height:90%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,170,100,.22),transparent 80%);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);animation:beam 7s ease-in-out infinite}
@keyframes beam{50%{opacity:.55}}
.field-bg .banner{position:absolute;top:0;width:min(9vw,80px);height:42%;background:linear-gradient(180deg,#5a0d18,#8e1d26 60%,#5a0d18);clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);transform-origin:50% 0;animation:sway 5s ease-in-out infinite;box-shadow:inset 0 0 0 2px #d9b46c}
.field-bg .banner.l{left:14%} .field-bg .banner.r{right:14%;animation-delay:-2.5s}
.field-bg .banner::after{content:"✦";position:absolute;left:50%;top:40%;transform:translateX(-50%);color:#d9b46c;font-size:22px}
@keyframes sway{50%{transform:rotate(2.5deg) skewX(2deg)}}
.field-bg .torch{position:absolute;top:44%;width:40px;height:80px}
.field-bg .torch.l{left:6%} .field-bg .torch.r{right:6%}
.field-bg .torch i{position:absolute;left:50%;bottom:0;width:30px;height:60px;transform:translateX(-50%);border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 75%,#fff3c4,#ffb43d 35%,#ff6a1a 60%,transparent 72%);filter:blur(1px);animation:flame .35s ease-in-out infinite alternate}
.field-bg .torch i+i{width:70px;height:110px;opacity:.35;filter:blur(8px);animation-duration:.5s}
@keyframes flame{to{transform:translateX(-50%) scale(1.08,1.15) skewX(4deg)}}
.field-bg .rune-floor{position:absolute;left:50%;top:58%;width:min(90vw,760px);aspect-ratio:1;transform:translate(-50%,-50%) perspective(900px) rotateX(64deg);color:#ff6a1a;opacity:.4;filter:drop-shadow(0 0 16px #ff6a1a)}
.field-bg .rune-floor .mc{width:100%;height:100%;animation:spin 70s linear infinite reverse}
.motes.ember i{position:absolute;bottom:-10px;left:var(--x);width:3px;height:3px;border-radius:50%;background:#ffb26b;box-shadow:0 0 8px 2px rgba(255,120,40,.8);animation:mote var(--d) linear var(--s) infinite;opacity:0}
/* 翠の神殿 */
.field-bg .shafts i{position:absolute;top:-10%;left:var(--x);width:8vw;height:120%;background:linear-gradient(180deg,rgba(200,255,210,.22),transparent 75%);transform:skewX(-14deg);filter:blur(6px);animation:shaft 9s ease-in-out var(--s) infinite}
@keyframes shaft{50%{opacity:.35;transform:skewX(-10deg) translateX(20px)}}
.field-bg .leaves i{position:absolute;top:-6%;left:var(--x);width:14px;height:9px;border-radius:0 100% 0 100%;background:linear-gradient(135deg,#c8f7a8,#3f9c72);animation:fall var(--d) linear var(--s) infinite;opacity:0}
@keyframes fall{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:.9}100%{transform:translate(80px,110vh) rotate(var(--r));opacity:.2}}
.field-bg .flies i{position:absolute;left:var(--x);top:var(--y);width:5px;height:5px;border-radius:50%;background:#e6ffb0;box-shadow:0 0 12px 4px rgba(200,255,120,.6);animation:fly 4s ease-in-out var(--s) infinite}
@keyframes fly{0%,100%{transform:translate(0,0);opacity:.1}30%{opacity:1}50%{transform:translate(18px,-22px);opacity:.8}80%{opacity:.2}}
.field-bg .pool{position:absolute;left:50%;bottom:0;width:min(80vw,700px);height:18%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 100%,rgba(120,220,170,.25),transparent 70%)}
.field-bg .pool i{position:absolute;left:50%;bottom:20%;width:120px;height:24px;margin-left:-60px;border:1px solid rgba(180,255,210,.5);border-radius:50%;animation:ripple 4s ease-out infinite}
.field-bg .pool i:nth-child(2){animation-delay:1.3s} .field-bg .pool i:nth-child(3){animation-delay:2.6s}
@keyframes ripple{from{transform:scale(.2);opacity:.9}to{transform:scale(4);opacity:0}}
/* doom keeps each stage's identity but tints it blood red */
.field-bg.doom .moon{background:radial-gradient(circle at 38% 35%,#ffd0c8,#c0394f 50%,#5a0d18 75%);box-shadow:0 0 80px 30px rgba(255,40,60,.35)}
.field-bg.doom .leaves i{background:linear-gradient(135deg,#ff9a8a,#5a0d18)}
.field-bg.doom .flies i{background:#ff6b7a;box-shadow:0 0 12px 4px rgba(255,40,60,.6)}
.field-bg.doom .torch i{filter:blur(1px) hue-rotate(-25deg) saturate(1.6)}
/* drawing a card: it floats out of the deck face down, turns over big above your hand, then flies into its slot */
.drawfly{position:fixed;left:0;top:0;z-index:16;pointer-events:none;will-change:transform}
.drawfly .card{box-shadow:0 0 0 2px var(--gold),0 0 40px rgba(217,180,108,.75),0 20px 40px rgba(0,0,0,.6)}
.drawfly .sleeveface{position:absolute;inset:0;border-radius:9px;border:1px solid var(--gold-dim);background:radial-gradient(circle,transparent 0 22px,rgba(217,180,108,.4) 23px 24px,transparent 25px),repeating-linear-gradient(45deg,#3a2470 0 5px,#2a1a52 5px 10px);animation:unveil .35s ease-in forwards}
.drawfly .sleeveface::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);font-size:26px}
@keyframes unveil{to{opacity:0;transform:scaleX(0)}}
.drawfly .drawtag{position:absolute;left:50%;top:-26px;transform:translateX(-50%);font-family:var(--f-display);font-weight:800;color:var(--gold);letter-spacing:.3em;text-shadow:0 0 12px var(--gold);opacity:0;animation:rise .3s forwards}
.card.landed{animation:landed .5s ease-out}
@keyframes landed{0%{box-shadow:0 0 0 2px var(--gold),0 0 30px var(--gold)}100%{box-shadow:none}}
/* ===== your hand: cards nobody has seen wear a dark frame, known ones are marked ===== */
[data-hand] .card.concealed{border:2px solid #07050c;box-shadow:inset 0 0 0 3px rgba(0,0,0,.55),inset 0 0 18px rgba(0,0,0,.6)}
[data-hand] .card.exposed{border:2px solid color-mix(in srgb,var(--tool) 70%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--tool) 40%,transparent)}

[data-hand] .card.sel-decl{outline:2px solid var(--gold)} [data-hand] .card.sel-act{outline:2px dashed var(--tool)}

/* ===== HP: just the number, colored as it drops ===== */
.seat .hp{align-items:baseline;gap:5px}
.seat .hpnum{font-size:30px;font-weight:800;color:var(--good);text-shadow:0 0 12px color-mix(in srgb,currentColor 35%,transparent)}
.seat .hpnum.mid{color:var(--heal)} .seat .hpnum.low{color:var(--bad);animation:lowhp 1.2s ease-in-out infinite}
@keyframes lowhp{50%{opacity:.6}}
.seat .hpmax{font-size:12px;color:var(--muted)}

/* ===== dispel charges: faceted crystals that glow while they last ===== */
.dgems{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 6px;border-radius:999px;background:linear-gradient(90deg,rgba(80,10,20,.6),rgba(30,10,30,.4));border:1px solid rgba(255,90,110,.35)}
.dg-label{font-family:var(--f-logo);font-size:8px;letter-spacing:.18em;color:#ffb0b8}
.dgems i{width:14px;height:18px;clip-path:polygon(50% 0,100% 30%,100% 70%,50% 100%,0 70%,0 30%);background:linear-gradient(160deg,#3a2430,#1a0d14);box-shadow:inset 0 0 0 1px #5a3a44;opacity:.7}
.dgems i.on{background:linear-gradient(160deg,#fff2f4 0,#ff6b7a 30%,#c0142c 65%,#ffd28a 100%);opacity:1;filter:drop-shadow(0 0 6px #ff3b4e);animation:gem 2.4s ease-in-out infinite}
.dgems i.on+i.on{animation-delay:-1.2s}
@keyframes gem{50%{filter:drop-shadow(0 0 12px #ff3b4e) brightness(1.25)}}

/* ===== the call to cast evolves into 真詠唱 / 虚詠唱 ===== */
.pword{display:inline-block}
.pword.evolve.true{color:var(--gold);text-shadow:0 0 16px color-mix(in srgb,var(--gold) 70%,transparent)}
.pword.evolve.false{color:var(--tool);text-shadow:0 0 16px color-mix(in srgb,var(--tool) 70%,transparent)}
.pword.evolve.true.anim{animation:evoTrue .9s cubic-bezier(.2,1.4,.4,1) both}
.pword.evolve.false.anim{animation:evoFalse .9s cubic-bezier(.2,1.4,.4,1) both}
@keyframes evoTrue{0%{transform:scale(.8);filter:brightness(3) blur(3px);letter-spacing:.6em}50%{transform:scale(1.25);filter:brightness(1.8)}100%{transform:none;filter:none;letter-spacing:normal}}
@keyframes evoFalse{0%{transform:scale(1.3) skewX(-20deg);filter:blur(6px);opacity:0}40%{transform:scale(.9) skewX(8deg);opacity:1}70%{transform:scale(1.08) skewX(-3deg)}100%{transform:none}}
.cast-btn.true{background:linear-gradient(180deg,#f8e2a6,#c99a4a);box-shadow:0 0 20px color-mix(in srgb,var(--gold) 55%,transparent)}
.cast-btn.false{background:linear-gradient(180deg,#d9b0f2,#7a3fb0);border-color:#d9b0f2;color:#fff;box-shadow:0 0 20px color-mix(in srgb,var(--tool) 55%,transparent)}

/* the declared card trembles while the true-cast power builds */
.rv-slot.charging{animation:charge .09s linear infinite}
@keyframes charge{0%{transform:translate(1px,0)}25%{transform:translate(-1px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(-1px,0)}}
.rv-slot.charging .rv-face.decl .card{box-shadow:0 0 30px color-mix(in srgb,var(--gold) 60%,transparent)}

/* red lightning */
.zapfx path.zo{fill:none;stroke:#ff2a44;stroke-width:6;stroke-linejoin:round;opacity:.55;filter:blur(3px)}
.zapfx path.zi{fill:none;stroke:#ffe3e7;stroke-width:2;stroke-linejoin:round}
.fx.zapfx{filter:drop-shadow(0 0 10px #ff2a44)}

/* ===== oracle eye / thief glove: the hand appears face down, then the seen cards turn translucent and show ===== */
.peek-ov{background:radial-gradient(60% 50% at 50% 45%,rgba(60,20,90,.65),rgba(5,3,10,.94))}
.peek{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:100%}
.peek-title{font-family:var(--f-display);font-weight:800;font-size:26px;color:var(--tool);letter-spacing:.2em;text-shadow:0 0 20px var(--tool);animation:capPop .6s both}
.peek-who{display:flex;align-items:center;gap:10px;font-weight:700;animation:capPop .6s .2s both}
.peek-who .avatar{width:48px;height:48px;box-shadow:0 0 0 2px var(--tool)}
.peek-hand{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pk{position:relative;width:132px;height:178px;animation:pkIn .5s both}
.pk:nth-child(2){animation-delay:.08s} .pk:nth-child(3){animation-delay:.16s} .pk:nth-child(4){animation-delay:.24s} .pk:nth-child(5){animation-delay:.32s} .pk:nth-child(6){animation-delay:.4s}
@keyframes pkIn{from{transform:translateY(30px) scale(.8);opacity:0}}
.pk .card{width:100%;height:100%;min-height:0}
.pk-sleeve{position:absolute;inset:0;border-radius:9px;border:1px solid var(--gold-dim);background:radial-gradient(circle,transparent 0 26px,rgba(217,180,108,.45) 27px 28px,transparent 29px),repeating-linear-gradient(45deg,#3a2470 0 6px,#2a1a52 6px 12px)}
.pk-sleeve::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);font-size:28px}
.pk.show .pk-sleeve{animation:seeThrough 1.4s var(--d) ease-in-out forwards}
.pk.show .card{animation:pkGlow 1.4s var(--d) both}
@keyframes seeThrough{0%{opacity:1;filter:none}35%{opacity:.85;filter:drop-shadow(0 0 18px var(--tool)) brightness(1.4)}100%{opacity:0;filter:blur(6px) brightness(1.6)}}
@keyframes pkGlow{0%,40%{box-shadow:none}70%{box-shadow:0 0 0 2px var(--tool),0 0 40px var(--tool)}100%{box-shadow:0 0 0 2px var(--tool),0 0 18px color-mix(in srgb,var(--tool) 60%,transparent)}}
@media (max-width:600px){.pk{width:88px;height:120px}}
/* ===== your hand: hidden cards sit in shadow, known cards are lit and carry an open eye ===== */
[data-hand] .card.concealed{filter:brightness(.82) saturate(.85)}
[data-hand] .card.concealed .c-art{opacity:.14}
[data-hand] .card.concealed::after{content:"";position:absolute;inset:0;border-radius:8px;background:linear-gradient(180deg,rgba(5,3,10,.45),transparent 40%,rgba(5,3,10,.35));pointer-events:none}
[data-hand] .card.exposed{transform:translateY(-8px);filter:none;box-shadow:0 0 0 2px var(--tool),0 0 22px color-mix(in srgb,var(--tool) 65%,transparent)}
[data-hand] .card.exposed:hover{transform:translateY(-11px)}
.card .eye{position:absolute;top:-10px;left:50%;margin-left:-13px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;z-index:4;
  background:radial-gradient(circle,#f1dcff,#8a5cf6);color:#2a0d3d;box-shadow:0 0 12px var(--tool);animation:eyePulse 2.4s ease-in-out infinite}
.card .eye svg{width:17px;height:17px}
@keyframes eyePulse{50%{box-shadow:0 0 20px 3px var(--tool)}}

/* ===== opponents: avatar box, their hand below it as real cards and sleeves ===== */
.foes{align-items:flex-start;gap:18px}
.foe{display:flex;flex-direction:column;align-items:center;gap:8px}
.foe .seat{width:auto;min-width:240px}
.ohand{display:flex;justify-content:center;padding:0 10px;margin:0}
.ohand .card.oh{width:66px;min-height:92px;margin:0 -9px;padding:6px;flex:none;box-shadow:0 4px 10px rgba(0,0,0,.5);transition:transform .15s}
.ohand .card.oh .c-name{font-size:10px} .ohand .card.oh .c-pow{font-size:17px} .ohand .card.oh .c-type{font-size:8px} .ohand .card.oh .c-art{width:44px;height:44px}
.ohand .card.oh:hover{transform:translateY(-8px) scale(1.06);z-index:3}
.ohand .card.oh.peek{box-shadow:0 0 0 2px var(--tool),0 0 14px var(--tool)}
.card.sleeve-card{background:radial-gradient(circle,transparent 0 13px,rgba(217,180,108,.45) 14px 15px,transparent 16px),repeating-linear-gradient(45deg,#3a2470 0 5px,#2a1a52 5px 10px)!important;border-color:var(--gold-dim)}
.card.sleeve-card::before{display:none}
.card.sleeve-card::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);font-size:16px}
.table.doom .card.sleeve-card{background:radial-gradient(circle,transparent 0 13px,rgba(255,59,78,.5) 14px 15px,transparent 16px),repeating-linear-gradient(-45deg,#3a0610 0 4px,#14020a 4px 9px)!important;border-color:#8e1d26}
.table.doom .card.sleeve-card::after{content:"☠";color:#ff3b4e}

/* ===== servants float beside their summoner ===== */
.seat.has-servant{margin-right:46px}
.servant-wrap{position:absolute;right:-58px;top:50%;width:62px;height:62px;margin-top:-31px;z-index:4;animation:hover 3s ease-in-out infinite}
.servant-wrap .servant{width:100%;height:100%;overflow:visible}
.servant-wrap b{position:absolute;right:-2px;bottom:-4px;font-size:11px;background:var(--ink);border:1px solid var(--line);border-radius:999px;padding:0 6px}
.servant-wrap::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--sc) 45%,transparent),transparent 70%);animation:svGlow 2.4s ease-in-out infinite}
.servant-wrap.sv-fire{--sc:#ff7a1a} .servant-wrap.sv-water{--sc:#4e9de3} .servant-wrap.sv-forest{--sc:#4cc094} .servant-wrap.sv-light{--sc:#fff1a8} .servant-wrap.sv-dark{--sc:#8a5cf6}
@keyframes hover{50%{transform:translateY(-7px)}}
@keyframes svGlow{50%{opacity:.5;transform:scale(1.15)}}
.servant .sv-flame{transform-origin:66px 34px;animation:flame .3s ease-in-out infinite alternate}
.servant .sv-wing{transform-origin:30px 44px;animation:flap .5s ease-in-out infinite alternate} .servant .sv-wing.r{transform-origin:50px 44px}
@keyframes flap{to{transform:scaleY(.6)}}
.servant .sv-halo{animation:twinkle 2s ease-in-out infinite}
.servant .sv-eye{animation:twinkle 1.6s ease-in-out infinite}
.servant .sv-wave{animation:twinkle 1.4s ease-in-out infinite}
.seat.mine .servant-wrap{right:-62px}

/* ===== waiting: the avatar thinks, no sentence ===== */
.thinking{display:flex;align-items:center;gap:12px;justify-content:center}
.thinking .th-av{width:76px;height:76px;border-radius:50%;box-shadow:0 0 0 2px var(--gold-dim),0 0 24px color-mix(in srgb,var(--gold) 30%,transparent);animation:float 3s ease-in-out infinite}
.thinking.small .th-av{width:48px;height:48px}
.thinking .th-side{display:flex;flex-direction:column;gap:4px}
.thinking .th-nm{font-weight:700}
.dots{display:inline-flex;gap:5px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:dot 1.2s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.2s} .dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-6px)}}

/* ===== the declared card on the field gathers power ===== */
.cast-card{position:relative}
.cast-card .aura{position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-115px 0 0 -115px;pointer-events:none;z-index:0}
.cast-card .aura i{position:absolute;inset:0;border-radius:50%;border:2px dashed color-mix(in srgb,var(--c) 80%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--c) 50%,transparent),inset 0 0 24px color-mix(in srgb,var(--c) 35%,transparent);animation:spin 6s linear infinite}
.cast-card .aura i:nth-child(2){inset:22px;border-style:dotted;animation-duration:4s;animation-direction:reverse}
.cast-card .aura i:nth-child(3){inset:-14px;border:0;background:repeating-conic-gradient(color-mix(in srgb,var(--c) 35%,transparent) 0 3deg,transparent 3deg 24deg);-webkit-mask:radial-gradient(circle,transparent 40%,#000 60%,transparent 72%);mask:radial-gradient(circle,transparent 40%,#000 60%,transparent 72%);animation:spin 10s linear infinite,auraPulse 1.4s ease-in-out infinite}
@keyframes auraPulse{50%{opacity:.4;transform:scale(1.06)}}
.cast-card .card{position:relative;z-index:1}
.cast-card.landed .card{animation:landed .6s ease-out}
/* ===== your hand (revised): hidden cards are dim, known cards are bright with just an eye mark ===== */
[data-hand] .card.concealed{filter:brightness(.62) saturate(.7)}
[data-hand] .card.concealed:hover:not(:disabled){filter:brightness(.85) saturate(.9)}
[data-hand] .card.exposed{transform:none;box-shadow:none;border:1px solid var(--line);filter:brightness(1.08)}
[data-hand] .card.exposed:hover{transform:translateY(-3px)}
.card .eye{top:6px;left:auto;right:6px;margin:0;width:22px;height:22px;animation:none;box-shadow:0 0 8px color-mix(in srgb,var(--tool) 70%,transparent)}
.card .eye svg{width:15px;height:15px}
.card:has(.eye) .c-flag{right:32px}

/* ===== who casts at whom, without words ===== */
.seat.caster{box-shadow:0 0 0 2px var(--gold),0 0 30px color-mix(in srgb,var(--gold) 45%,transparent)}
.seat.caster .portrait::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px dashed var(--gold);animation:spin 5s linear infinite;pointer-events:none}
.seat.targeted::after{content:"";position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;pointer-events:none;z-index:5;
  background:radial-gradient(circle,transparent 0 30px,rgba(255,60,80,.9) 31px 33px,transparent 34px 54px,rgba(255,60,80,.7) 55px 56px,transparent 57px),
    conic-gradient(from 0deg,transparent 0 40deg,rgba(255,60,80,.95) 40deg 50deg,transparent 50deg 130deg,rgba(255,60,80,.95) 130deg 140deg,transparent 140deg 220deg,rgba(255,60,80,.95) 220deg 230deg,transparent 230deg 310deg,rgba(255,60,80,.95) 310deg 320deg,transparent 320deg);
  -webkit-mask:radial-gradient(circle,#000 0 58px,transparent 60px);mask:radial-gradient(circle,#000 0 58px,transparent 60px);animation:reticle 1.6s ease-in-out infinite}
@keyframes reticle{0%{transform:scale(1.25) rotate(0);opacity:0}30%{transform:scale(1) rotate(45deg);opacity:1}100%{transform:scale(.95) rotate(90deg);opacity:.85}}
.seat.selfcast .portrait::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,transparent 55%,rgba(240,215,122,.6) 70%,transparent 75%);animation:auraPulse 1.4s ease-in-out infinite;pointer-events:none}
.seat.late.hit{animation-delay:.55s} .seat.late.healed{animation-delay:.45s} .seat.late .float{animation-delay:.55s}

/* ===== servants: bigger, and they fly around their summoner ===== */
.seat.has-servant{margin-right:0}
.servant-wrap{right:auto;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;animation:orbit 11s ease-in-out infinite;pointer-events:auto}
.seat.mine .servant-wrap{right:auto}
.servant-wrap .servant{animation:hover 1.6s ease-in-out infinite}
@keyframes orbit{
  0%{transform:translate(170px,-10px)} 15%{transform:translate(120px,-70px)} 30%{transform:translate(0,-95px)}
  45%{transform:translate(-130px,-60px)} 50%{transform:translate(-175px,-5px)} 65%{transform:translate(-120px,55px)}
  80%{transform:translate(0,75px)} 95%{transform:translate(150px,40px)} 100%{transform:translate(170px,-10px)}}
.servant-wrap.attacking .servant{animation:lunge .6s ease-out}
@keyframes lunge{30%{transform:scale(1.4) translateY(-10px);filter:brightness(1.8) drop-shadow(0 0 14px var(--sc))}100%{transform:none}}
.servant-wrap b{transform:none}
@media (max-width:760px){.servant-wrap{width:70px;height:70px;margin:-35px 0 0 -35px}
  @keyframes orbit{0%{transform:translate(90px,-10px)}25%{transform:translate(0,-60px)}50%{transform:translate(-90px,0)}75%{transform:translate(0,50px)}100%{transform:translate(90px,-10px)}}}
/* illustrated avatars: one sheet of 8 portraits, each shown as a round crop around the face */
.avatar.avimg{display:block;flex:none;border-radius:50%;background-repeat:no-repeat;background-size:400% 400%;background-color:#120c26}

/* the scrollbar never comes and goes (the page height changes during spells), so it stays put */


/* ===== illustrated cards: the picture fills the card, dark bands keep the text readable ===== */
.card.has-img .c-img{position:absolute;inset:0;border-radius:inherit;z-index:0}
.card.has-img .c-img::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(8,6,16,.82) 0%,rgba(8,6,16,.15) 34%,rgba(8,6,16,0) 55%,rgba(8,6,16,.75) 100%)}
.card.has-img .c-art{display:none}
.card.has-img > :not(.c-img){z-index:1}
.card.has-img .c-name,.card.has-img .c-type,.card.has-img .c-pow,.card.has-img .c-flag{text-shadow:0 1px 3px #000,0 0 8px #000}
.card.has-img{border-color:color-mix(in srgb,var(--c) 55%,var(--line))}

/* ===== illustrated stages: a slow drift over the painted background ===== */
.field-bg .field-img{position:absolute;inset:-4%;filter:blur(1.4px) saturate(1.15);animation:kenburns 50s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.08) translate(-1.5%,-1%)}}
.field-bg .veil{background:radial-gradient(75% 65% at 50% 50%,rgba(8,6,16,.38) 30%,rgba(8,6,16,.75) 100%)}
.field-bg.doom .veil{background:radial-gradient(70% 60% at 50% 50%,rgba(40,0,10,.25) 30%,rgba(60,0,15,.75) 100%)}
.field-bg .clouds i{position:absolute;top:var(--y);left:-40vw;width:var(--w);height:9vh;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.35),transparent 70%);filter:blur(6px);animation:cloud var(--d) linear var(--s) infinite}
@keyframes cloud{to{transform:translateX(150vw)}}
.motes.sky i{position:absolute;bottom:-10px;left:var(--x);width:4px;height:4px;border-radius:50%;background:#fff6d6;box-shadow:0 0 10px 3px rgba(255,246,214,.7);animation:mote var(--d) linear var(--s) infinite;opacity:0}
.doomember i{background:#ff3b4e!important;box-shadow:0 0 10px 3px rgba(255,40,60,.8)!important}

/* illustrated servants: a round portrait with an elemental glow */
.servant.svimg{display:block;width:100%;height:100%;border-radius:50%;border:2px solid var(--sc);box-shadow:0 0 18px var(--sc),inset 0 0 10px rgba(0,0,0,.4)}
/* ===== one centre line: opponents, field, hand and you all share the page's centre =====
   the deck/graveyard and the pass button sit outside that line instead of pushing things sideways */
.arena-wrap{display:block}
.arena-wrap .arena{width:100%}
.piles{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:2}
.me-col{position:relative}
.me-col .pass-btn{position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%);white-space:nowrap}
@media (max-width:760px){
  .arena-wrap{display:flex;flex-direction:column;align-items:center}
  .piles{position:static;transform:none}
  .me-col .pass-btn{position:static;transform:none}
}
/* opponents: every seat the same width so the row is balanced */
.foe{width:290px;flex:none}
.foe .seat{width:100%;min-width:0;box-sizing:border-box}
@media (max-width:760px){.foe{width:calc(50% - 9px)}}

/* ===== the duel fits the screen: no page scrollbar during a game (desktop) ===== */
body.ingame{overflow:hidden;height:100dvh}
body.ingame .table{height:100dvh;min-height:0;overflow:hidden;grid-template-rows:auto auto minmax(0,1fr) auto}
body.ingame .arena{min-height:0}
@media (max-width:760px){body.ingame{overflow:auto;height:auto} body.ingame .table{height:auto;overflow:visible}}
#field{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ===== everything about two sizes bigger, scaled to the screen height ===== */
:root{--cw:clamp(92px,11.5vh,134px)}
.card{width:var(--cw);min-height:calc(var(--cw)*1.38)}
.card.mini{width:calc(var(--cw)*.86);min-height:calc(var(--cw)*1.18)}
.card.big{width:calc(var(--cw)*1.32);min-height:calc(var(--cw)*1.8)}
.card .c-name{font-size:calc(var(--cw)*.14)} .card .c-pow{font-size:calc(var(--cw)*.27)} .card .c-type{font-size:calc(var(--cw)*.095)}
.rv-slot{width:calc(var(--cw)*1.32);height:calc(var(--cw)*1.8)}
.ohand .card.oh{width:calc(var(--cw)*.72);min-height:calc(var(--cw)*1)}
.ohand .card.oh .c-name{font-size:calc(var(--cw)*.1)} .ohand .card.oh .c-pow{font-size:calc(var(--cw)*.17)}
.seat .portrait{width:clamp(70px,9.5vh,104px);height:clamp(70px,9.5vh,104px)}
.seat.mine .portrait{width:clamp(80px,11vh,120px);height:clamp(80px,11vh,120px)}
.foe{width:330px}
.seat .hpnum{font-size:34px}
.deckpile .stack,.deckpile .stack i,.grave .stack,.grave .stack .card{width:calc(var(--cw)*.82);height:calc(var(--cw)*1.13);min-height:calc(var(--cw)*1.13)}
.piles{width:calc(var(--cw)*1.1)}

/* ===== hidden and known cards look the same; known ones only carry the eye ===== */
[data-hand] .card.concealed,[data-hand] .card.concealed:hover:not(:disabled){filter:none}
[data-hand] .card.concealed::after{content:none}
[data-hand] .card.concealed .c-art{opacity:.2}
[data-hand] .card.exposed{filter:none}

/* ===== graveyard panel in the new art style ===== */
.grave-pop{background:linear-gradient(180deg,#2a1d52,#140d2b);border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(20,13,43,.9),0 0 0 5px var(--gold-dim),0 24px 60px rgba(0,0,0,.7);width:min(560px,calc(100vw - 32px))}
.gp-head{background:linear-gradient(90deg,transparent,rgba(217,180,108,.25),transparent);border-radius:8px;padding:4px 0}
.gt{background:none;border:0;padding:0;gap:3px}
.gt-art{width:100%;aspect-ratio:146/182;height:auto;border-radius:6px;border:1px solid color-mix(in srgb,var(--c) 70%,#000);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.gt-art.img svg{display:none}
.gt-art b{right:3px;bottom:3px;font-size:12px}
.gt span{min-height:0;font-size:10px;font-weight:700}
.gt.gone .gt-art{filter:grayscale(1) brightness(.45)}

/* ===== 災厄の刻: the same stage slowly turns ominous ===== */
.field-bg .field-img{transition:filter 5s ease}
.field-bg.doom .field-img{filter:blur(1.4px) saturate(1.5) hue-rotate(-40deg) brightness(.55) contrast(1.2)}
.field-bg .doomtint{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 45%,rgba(120,0,30,.15),rgba(60,0,20,.65));opacity:0;transition:opacity 5s ease;mix-blend-mode:multiply}
.field-bg.doom .doomtint{opacity:1;animation:doomPulse 3.2s ease-in-out 5s infinite}
.field-bg .doomfx{opacity:0;transition:opacity 4s ease 1s}
.field-bg.doom .doomfx{opacity:1}
.doom-banner{position:fixed;inset:0;z-index:30;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle,rgba(60,0,15,.55),transparent 70%);animation:dbFade 4.2s ease both}
.db-in{display:flex;flex-direction:column;align-items:center;gap:6px}
.db-sub{font-size:16px;letter-spacing:.3em;color:#ffb0b8;animation:capPop .6s .3s both}
.db-title{font-family:var(--f-display);font-weight:800;font-size:clamp(48px,9vw,110px);letter-spacing:.2em;color:#ff3b4e;text-shadow:0 0 30px #ff1a3a,0 0 80px rgba(255,30,60,.6),0 4px 0 #3a0610;animation:dbSlam .9s .4s cubic-bezier(.2,1.6,.4,1) both}
.db-note{font-family:var(--f-logo);font-size:22px;color:#ffd28a;letter-spacing:.2em;animation:capPop .5s 1.1s both}
@keyframes dbSlam{0%{transform:scale(2.6);opacity:0;filter:blur(10px)}60%{transform:scale(.92);opacity:1;filter:none}100%{transform:none}}
@keyframes dbFade{0%,85%{opacity:1}100%{opacity:0}}

/* a servant appearing for the first time */
.servant-wrap.summon .servant{animation:summonIn 1.2s cubic-bezier(.2,1.4,.4,1) .5s both}
@keyframes summonIn{0%{transform:scale(0) rotate(-90deg);opacity:0;filter:brightness(4)}70%{transform:scale(1.2);opacity:1}100%{transform:none;filter:none}}
/* ===== ルール設定（ロビー） ===== */
.lux.cfg summary{cursor:pointer;list-style:none}
.lux.cfg summary::-webkit-details-marker{display:none}
.lux.cfg summary::after{content:'▾';margin-left:.5em;opacity:.6}
.lux.cfg[open] summary::after{content:'▴'}
.cfg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 18px;margin:12px 0 6px}
.cfg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(240,215,122,.14)}
.cfg-row span{font-size:.92em;opacity:.9}
.cfg-row select{background:#1a1530;color:var(--fg);border:1px solid rgba(240,215,122,.4);border-radius:8px;padding:5px 8px;font:inherit;font-size:.9em;max-width:60%}
.cfg-row b{color:var(--gold);font-weight:600;font-size:.92em;text-align:right}

/* ===== チーム ===== */
.tag.team{cursor:pointer;border:1px solid currentColor;font-weight:700}
.tag.team:disabled{cursor:default;opacity:.85}
.tag.team.t0,.st.team.t0{color:#7cc4ff;background:rgba(60,140,255,.16)}
.tag.team.t1,.st.team.t1{color:#ff8a8a;background:rgba(255,70,70,.16)}
.st.team{font-size:.72em;font-weight:800;padding:1px 6px;border-radius:6px;border:1px solid currentColor;letter-spacing:.05em}
.seat.team-0 .portrait{box-shadow:0 0 0 3px rgba(80,160,255,.75),0 0 14px rgba(80,160,255,.45)}
.seat.team-1 .portrait{box-shadow:0 0 0 3px rgba(255,90,90,.75),0 0 14px rgba(255,90,90,.45)}
.seat.ally::before{content:'味方';position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:.66em;font-weight:800;color:#0b1430;background:#7cc4ff;padding:1px 8px;border-radius:99px;z-index:3}
.st.pact{color:#f0d77a}.st.goat{color:#c58ae8}.st.frozen{color:#bfe9ff}
.st.pact svg,.st.goat svg,.st.frozen svg{width:16px;height:16px}

/* ===== チュートリアル：校長先生 ===== */
.tut-btn{border-color:rgba(240,215,122,.6)!important;color:var(--gold)!important}
.tutor{position:fixed;left:16px;top:72px;z-index:60;display:flex;gap:10px;align-items:flex-start;max-width:min(380px,calc(100vw - 32px));animation:tutIn .45s cubic-bezier(.2,.8,.3,1.2) both;pointer-events:none}
.tutor *{pointer-events:auto}
.tutor-av{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.tutor-av span{font-size:.7em;color:var(--gold);font-weight:700;text-shadow:0 1px 3px #000}
.hm-svg{width:78px;height:78px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.tutor-say{position:relative;background:linear-gradient(180deg,#fffaf0,#f3e6c4);color:#2b2140;border:2px solid #c9a640;border-radius:14px;padding:10px 14px 10px;box-shadow:0 10px 30px rgba(0,0,0,.45);font-size:.92em;line-height:1.6}
.tutor-say::before{content:'';position:absolute;left:-10px;top:22px;border:8px solid transparent;border-right-color:#c9a640}
.tutor-say p{margin:0 0 4px}
.tutor-say .btn{margin-top:4px;float:right;background:#2b2140;color:#fff6d6;border-color:#c9a640}
.tutor-mini{position:fixed;left:16px;top:72px;z-index:60;background:none;border:0;padding:0;cursor:pointer;animation:tutIn .3s both}
.tutor-mini .hm-svg{width:52px;height:52px}
@keyframes tutIn{from{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:none}}
.tut-glow{position:relative;z-index:5;animation:tutGlow 1.1s ease-in-out infinite!important;outline:3px solid #ffe27a;outline-offset:3px}
@keyframes tutGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,226,122,.9),0 0 18px rgba(255,226,122,.6)}50%{box-shadow:0 0 0 8px rgba(255,226,122,0),0 0 34px rgba(255,226,122,.9)}}
@media (max-width:760px){.tutor{top:auto;bottom:calc(var(--cw,92px)*1.5 + 90px);left:8px}.hm-svg{width:56px;height:56px}.tutor-say{font-size:.85em}}
/* 相手が多いときは1列のまま、席と手札を詰める（2段にして場に重ならないように） */
body.ingame .foes{flex-wrap:nowrap}
.foes .foe{width:min(330px, calc((100vw - 40px - (var(--nf) - 1)*14px) / var(--nf)));min-width:0}
.foes[style*="--nf:3"],.foes[style*="--nf:4"],.foes[style*="--nf:5"]{gap:14px}
.foes[style*="--nf:3"] .ohand .card.oh{margin:0 calc(var(--cw)*-.17)}
.foes[style*="--nf:4"] .ohand .card.oh,.foes[style*="--nf:5"] .ohand .card.oh{width:calc(var(--cw)*.58);min-height:calc(var(--cw)*.8);margin:0 calc(var(--cw)*-.2)}
.foes[style*="--nf:4"] .seat .portrait,.foes[style*="--nf:5"] .seat .portrait{transform:scale(.85)}
.foes[style*="--nf:5"] .seat .pname{font-size:.85em}
/* ===== 新しい絵：フィールドの背景（中央が広場） ===== */
.field-bg .field-img{background-size:cover;background-position:center 60%;background-repeat:no-repeat;filter:blur(.6px) saturate(1.1)}
.field-bg.doom .field-img{filter:blur(.6px) saturate(1.5) hue-rotate(-40deg) brightness(.55) contrast(1.2)}
.field-bg .veil{background:radial-gradient(80% 70% at 50% 55%,rgba(8,6,16,.18) 25%,rgba(8,6,16,.62) 100%)}
.c-img{background-repeat:no-repeat}

/* ===== 新しい絵：詠唱・応答・パスのボタン（左に紋章、右の板に文字） ===== */
.cast-btn.true,.cast-btn.false,.rbtn.art,.pass-btn.art{--img:none;background:var(--img) center/100% 100% no-repeat!important;border:0!important;box-shadow:none!important;color:#fff!important;text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.8);font-weight:800;letter-spacing:.06em;min-width:190px;height:70px;padding:0 18px 0 74px!important;border-radius:0!important;display:inline-flex;align-items:center;justify-content:center;filter:drop-shadow(0 6px 12px rgba(0,0,0,.55));transition:transform .15s,filter .15s}
.cast-btn.true:hover:not(:disabled),.cast-btn.false:hover:not(:disabled),.rbtn.art:hover:not(:disabled),.pass-btn.art:hover{transform:translateY(-3px) scale(1.03);filter:drop-shadow(0 8px 16px rgba(0,0,0,.6)) brightness(1.12)}
.cast-btn.true{--img:url('/art/ui/btn-true.png?v=1');color:#4a2c00!important;text-shadow:0 1px 0 #fff6d6}
.cast-btn.false{--img:url('/art/ui/btn-false.png?v=1')}
.rbtn.art{flex-direction:row;gap:0;font-size:15px;min-width:170px;height:62px;padding-left:64px!important}
.rbtn.art svg{display:none}
.rbtn.art span{color:inherit}
.rbtn.art[data-kind="take"]{--img:url('/art/ui/btn-take.png?v=1');color:#1e2a3a!important;text-shadow:0 1px 0 #fff}
.rbtn.art[data-kind="dispel"]{--img:url('/art/ui/btn-dispel.png?v=1')}
.rbtn.art[data-kind="reverse"]{--img:url('/art/ui/btn-reverse.png?v=1');color:#4a2c00!important;text-shadow:0 1px 0 #fff6d6}
.rbtn.art.el-fire{--img:url('/art/ui/btn-shield-fire.png?v=1')}
.rbtn.art.el-water{--img:url('/art/ui/btn-shield-water.png?v=1')}
.rbtn.art.el-wind{--img:url('/art/ui/btn-shield-forest.png?v=1')}
.pass-btn.art{--img:url('/art/ui/btn-pass.png?v=1');min-width:130px;height:48px;padding-left:46px!important;font-size:14px}
.cast-btn.true:disabled,.cast-btn.false:disabled,.rbtn.art:disabled{filter:grayscale(.8) brightness(.6);opacity:.7}
@media (max-width:760px){.cast-btn.true,.cast-btn.false{min-width:150px;height:56px;padding-left:58px!important}.rbtn.art{min-width:140px;height:52px;padding-left:52px!important;font-size:13px}}.tutor-av .hm-img{width:118px;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));margin-top:-10px}
.tutor-mini img{width:62px;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
@media (max-width:760px){.tutor-av .hm-img{width:76px}}
/* ===== 立ち絵 ===== */
.stand{display:block;object-fit:cover;object-position:50% 15%;border-radius:14px}
.stand-fb{display:grid;place-items:center;background:radial-gradient(circle,#2a2150,#120c24)}
.stand-fb .avatar{width:70%;height:auto;aspect-ratio:1}
/* キャラ選択：選んだ魔法使いを大きく */
.me-preview .stand-big{width:150px;aspect-ratio:9/20;object-fit:cover;object-position:50% 10%;border-radius:16px;border:2px solid var(--gold);box-shadow:0 0 30px color-mix(in srgb,var(--gold) 45%,transparent),0 12px 30px rgba(0,0,0,.5);animation:standIn .5s cubic-bezier(.2,.8,.3,1.2) both}
@keyframes standIn{from{opacity:0;transform:translateX(-24px) scale(.94)}to{opacity:1;transform:none}}
@media (max-width:760px){.me-preview .stand-big{width:110px}}

/* 決闘開始 */
.duel-intro{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;gap:2vw;overflow:hidden;cursor:pointer;animation:diIn .35s ease both}
.duel-intro.out{animation:diOut .6s ease forwards}
.di-bg{position:absolute;inset:-4%;background-size:cover;background-position:center;filter:brightness(.65) saturate(1.2);animation:kenburns 6s ease-out both}
.duel-intro::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,transparent 30%,rgba(0,0,0,.7));pointer-events:none}
.di-side{position:relative;z-index:1;display:flex;gap:1vw;align-items:flex-end}
.di-fig{display:flex;flex-direction:column;align-items:center;gap:6px;animation:diFig .7s cubic-bezier(.2,.8,.3,1.1) calc(var(--k)*.15s + .15s) both}
.di-side.r .di-fig{animation-name:diFigR}
.di-fig .stand{width:clamp(110px,15vw,230px);aspect-ratio:9/20;border:2px solid rgba(255,230,160,.8);box-shadow:0 0 40px rgba(255,120,60,.45),0 20px 40px rgba(0,0,0,.6)}
.di-nm{font-weight:800;font-size:clamp(13px,1.4vw,18px);color:#fff;text-shadow:0 2px 6px #000;background:rgba(0,0,0,.45);padding:2px 12px;border-radius:99px}
.di-vs{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;animation:diVs .6s cubic-bezier(.2,1.4,.4,1) .55s both}
.di-vs span{font-family:var(--f-display);font-size:clamp(48px,8vw,110px);font-weight:900;color:#fff3c4;-webkit-text-stroke:2px #8a2a10;text-shadow:0 0 30px #ff7a1a,0 0 60px #ff3b1a,0 6px 0 #4a1006}
.di-vs small{font-weight:800;color:#ffe9b0;letter-spacing:.3em;text-shadow:0 2px 6px #000;font-size:clamp(12px,1.4vw,18px)}
@keyframes diIn{from{opacity:0}to{opacity:1}}
@keyframes diOut{to{opacity:0;transform:scale(1.06)}}
@keyframes diFig{from{opacity:0;transform:translateX(-30vw) skewX(-8deg)}to{opacity:1;transform:none}}
@keyframes diFigR{from{opacity:0;transform:translateX(30vw) skewX(8deg)}to{opacity:1;transform:none}}
@keyframes diVs{from{opacity:0;transform:scale(3) rotate(-12deg)}to{opacity:1;transform:none}}
@media (max-width:760px){.duel-intro{flex-direction:column;gap:8px}.di-fig .stand{width:22vw}}

/* 大技のカットイン：左から立ち絵、斜めの光の帯 */
.cutin{position:fixed;inset:0;z-index:85;pointer-events:none;overflow:hidden}
.ci-band{position:absolute;left:-10%;right:-10%;top:38%;height:30%;transform:skewY(-6deg);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 85%,#000),color-mix(in srgb,var(--c) 40%,transparent) 60%,transparent);box-shadow:0 0 60px var(--c);animation:ciBand 1.5s cubic-bezier(.2,.8,.3,1) both}
.cutin .ci-fig{position:absolute;left:2vw;bottom:0;height:min(88vh,720px);width:auto;aspect-ratio:9/20;border-radius:0;object-position:50% 0;-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent),linear-gradient(0deg,transparent,#000 12%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 70%,transparent);filter:drop-shadow(0 0 24px var(--c));animation:ciFig 1.5s cubic-bezier(.2,.8,.3,1) both}
.ci-text{position:absolute;left:calc(2vw + min(88vh,720px)*.42);top:44%;display:flex;flex-direction:column;animation:ciText 1.5s cubic-bezier(.2,.8,.3,1) both}
.ci-text b{font-family:var(--f-display);font-size:clamp(28px,4.6vw,64px);color:#fff;-webkit-text-stroke:1.5px rgba(0,0,0,.6);text-shadow:0 0 20px var(--c),0 4px 0 rgba(0,0,0,.5);white-space:nowrap}
.ci-text span{font-weight:800;color:#fff;text-shadow:0 2px 4px #000;letter-spacing:.2em}
@keyframes ciBand{0%{transform:skewY(-6deg) scaleX(0);transform-origin:0 50%;opacity:0}15%{transform:skewY(-6deg) scaleX(1);opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes ciFig{0%{transform:translateX(-40vw);opacity:0}18%{transform:translateX(0);opacity:1}75%{transform:translateX(3vw);opacity:1}100%{transform:translateX(8vw);opacity:0}}
@keyframes ciText{0%{transform:translateX(30vw);opacity:0}22%{transform:none;opacity:1}78%{opacity:1}100%{transform:translateX(-4vw);opacity:0}}
@media (max-width:760px){.cutin .ci-fig{height:60vh}.ci-text{left:40vw;top:40%}}

/* 勝敗：左に大きく、勝ちは喜び、負けは悔しさ */
.reveal:not(.done) ~ .result-stand{visibility:hidden}
.result-stand{position:fixed;left:2vw;bottom:0;z-index:40;pointer-events:none;animation:rsIn .8s cubic-bezier(.2,.8,.3,1.1) both}
.reveal:not(.done) ~ .result-stand{animation:none}
.result-stand .stand{height:min(80vh,680px);width:auto;aspect-ratio:9/20;border-radius:18px 18px 0 0;object-position:50% 0;-webkit-mask-image:linear-gradient(0deg,transparent,#000 14%);mask-image:linear-gradient(0deg,transparent,#000 14%)}
.result-stand.win .stand{box-shadow:0 0 60px rgba(255,214,110,.55);border:2px solid rgba(255,225,140,.85);border-bottom:0}
.result-stand.lose .stand{filter:saturate(.6) brightness(.8);border:2px solid rgba(140,150,200,.5);border-bottom:0}
.rs-word{position:absolute;left:50%;top:6%;transform:translateX(-50%) rotate(-6deg);font-family:var(--f-display);font-weight:900;font-size:clamp(30px,4vw,56px);letter-spacing:.08em;white-space:nowrap}
.result-stand.win .rs-word{color:#fff3c4;text-shadow:0 0 24px #ffb43d,0 4px 0 #7a4a00}
.result-stand.lose .rs-word{color:#c9d2ff;text-shadow:0 0 20px #3a4aa0,0 4px 0 #1a1f40}
@keyframes rsIn{from{opacity:0;transform:translateX(-30vw)}to{opacity:1;transform:none}}
@media (max-width:760px){.result-stand .stand{height:46vh}.result-stand{opacity:.9}}
/* 背景が透明な立ち絵（ゼノ）は、後ろに氷色の光を敷く */
img.stand[src*=".png"],img.stand-big[src*=".png"]{background:radial-gradient(circle at 50% 30%,#bfe2ff 0%,#5b8fe0 35%,#1b2a6b 80%)}
/* 応答ボタンは1列に収め、手札に重ならないように（数が多いときは少しずつ縮む） */
.rbtns:has(.rbtn.art){flex-wrap:nowrap;gap:6px;max-width:100%}
.rbtn.art{flex:0 1 158px;min-width:118px;height:52px;padding:0 10px 0 50px!important;font-size:13.5px;white-space:nowrap}
@media (max-width:760px){.rbtns:has(.rbtn.art){flex-wrap:wrap}.rbtn.art{flex-basis:46%;min-width:0;height:46px;padding-left:44px!important;font-size:12.5px}}/* 応答の場面：宣言のカードを左、応答ボタンを右に並べて、場の高さに収める */
.arena:has(> .rbtns){display:grid;grid-template-columns:auto minmax(0,auto);grid-template-rows:auto auto;column-gap:22px;row-gap:8px;align-content:center;justify-content:center;align-items:center}
.arena:has(> .rbtns) > .casting-row{grid-row:1 / span 2;grid-column:1}
.arena:has(> .rbtns) > .prompt{grid-column:2;grid-row:1;align-self:end;justify-content:flex-start}
.arena:has(> .rbtns) > .rbtns{grid-column:2;grid-row:2;align-self:start;flex-wrap:wrap;justify-content:flex-start;max-width:min(500px,58vw)}
@media (max-width:760px){.arena:has(> .rbtns){grid-template-columns:1fr}.arena:has(> .rbtns) > *{grid-column:1!important;grid-row:auto!important}.arena:has(> .rbtns) .cast-card .card.big{transform:scale(.8)}}
/* ===== 競技ルール ===== */
.cfg-presets{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0 2px}
.btn.preset{border-color:rgba(240,215,122,.45)}
.btn.preset.on{background:linear-gradient(180deg,#f8e2a6,#c99a4a);color:#2b1a00;border-color:#f8e2a6}
.comp-note{text-align:center;color:var(--gold);font-size:.85em;line-height:1.6}
.pill.comp{color:#2b1a00;background:linear-gradient(180deg,#f8e2a6,#c99a4a);border-color:#f8e2a6;font-weight:800}
.st.drain{color:var(--curse)}
/* サーヴァントを選ぶ */
.sv-pick{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:6px 0}
.sv-pick-l{font-size:.85em;color:var(--gold);font-weight:700;margin-right:4px}
.sv-opt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 6px;border-radius:12px;border:1px solid var(--line);background:rgba(20,14,40,.75);color:var(--fg);cursor:pointer;font-size:11px;font-weight:700;transition:transform .15s}
.sv-opt .servant{width:44px;height:44px}
.sv-opt:hover{transform:translateY(-2px);border-color:var(--gold)}
.sv-opt.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 16px color-mix(in srgb,var(--gold) 50%,transparent)}
.st.clock{font-size:.75em;font-weight:700;color:#cfe3ff;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 背景が透明な立ち絵の後ろに、その人の色の光を敷く */
img.stand[data-av],img.stand-big[data-av]{--sb1:#e9dcff;--sb2:#7a4fc9;--sb3:#1c1238;background:radial-gradient(circle at 50% 28%,var(--sb1) 0%,var(--sb2) 38%,var(--sb3) 82%)}
img[data-av="1"]{--sb1:#ffd7b0;--sb2:#d4462a;--sb3:#2a0a08}
img[data-av="2"]{--sb1:#e3f6ff;--sb2:#3f8fe0;--sb3:#0b1f45}
img[data-av="3"]{--sb1:#e8ffe9;--sb2:#3fa06a;--sb3:#0a2416}
img[data-av="4"]{--sb1:#ffb3c0;--sb2:#7a1630;--sb3:#12060d}
img[data-av="5"]{--sb1:#ffe1a8;--sb2:#e2621f;--sb3:#2a0d04}
img[data-av="6"]{--sb1:#bfe2ff;--sb2:#5b8fe0;--sb3:#1b2a6b}
img[data-av="7"]{--sb1:#e3c8ff;--sb2:#6b2fb0;--sb3:#14081f}
/* ===== 立ち絵：紫の下地はやめて、背景が透明なまま重ねる ===== */
img.stand[data-av],img.stand-big[data-av],img.stand[src*=".png"]{background:none!important}
.stand{object-fit:contain!important;object-position:50% 100%!important;border-radius:0}

/* ===== キャラ選択：大きな舞台の上に、選んだ魔法使いを大きく ===== */
.sel-show{position:relative;display:flex;align-items:flex-end;gap:20px;min-height:min(62vh,560px);margin:6px 0 14px;border-radius:20px;overflow:hidden;border:1px solid color-mix(in srgb,var(--c) 60%,transparent);box-shadow:0 0 0 1px rgba(240,215,122,.25),0 18px 50px rgba(0,0,0,.55)}
.ss-scene{position:absolute;inset:0;background:var(--scene) center 60%/cover;filter:blur(2px) saturate(1.15) brightness(.75);transform:scale(1.06)}
.ss-aura{position:absolute;inset:0;background:radial-gradient(45% 70% at 32% 70%,color-mix(in srgb,var(--c) 55%,transparent),transparent 70%),linear-gradient(90deg,transparent 40%,rgba(8,6,18,.82) 78%),linear-gradient(0deg,rgba(8,6,18,.6),transparent 35%)}
.sel-show .stand-big{position:relative;z-index:1;height:min(60vh,540px);width:auto;max-width:62%;aspect-ratio:auto;object-fit:contain;object-position:50% 100%;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--c) 70%,transparent)) drop-shadow(0 12px 20px rgba(0,0,0,.6));animation:standIn .55s cubic-bezier(.2,.8,.3,1.2) both;margin-left:2%}
.ss-info{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding:0 22px 28px 0;flex:1;min-width:0}
.ss-info b{font-family:var(--f-display);font-size:clamp(28px,4vw,44px);color:#fff;text-shadow:0 0 18px var(--c),0 3px 0 rgba(0,0,0,.5)}
.ss-info span{color:#f0e6c8;font-weight:700}
.ss-info em{font-style:normal;color:var(--gold);font-weight:800;margin-top:8px}
.ss-info small{color:#e6def7;line-height:1.6;font-size:.88em}
@media (max-width:760px){.sel-show{min-height:380px;flex-direction:column;align-items:stretch}.sel-show .stand-big{height:300px;max-width:100%;margin:0 auto}.ss-info{padding:0 16px 16px}.ss-aura{background:radial-gradient(60% 50% at 50% 45%,color-mix(in srgb,var(--c) 55%,transparent),transparent 70%),linear-gradient(0deg,rgba(8,6,18,.85),transparent 50%)}}

/* ===== 大技のカットイン：左半分いっぱいに、キャラを切らずに全部見せる ===== */
.cutin .ci-fig{position:absolute!important;left:0;bottom:0;top:0;height:100vh!important;width:50vw!important;max-width:50vw;aspect-ratio:auto!important;object-fit:contain!important;object-position:30% 100%!important;-webkit-mask-image:none!important;mask-image:none!important;background:none!important;filter:drop-shadow(0 0 26px var(--c)) drop-shadow(0 0 60px color-mix(in srgb,var(--c) 50%,transparent))}
.ci-band{top:30%;height:44%}
.ci-text{left:44vw!important;top:42%!important}
@media (max-width:760px){.cutin .ci-fig{width:70vw!important;max-width:70vw}.ci-text{left:40vw!important}}

/* ===== 勝敗：文字はキャラに重ねず、右横に ===== */
.result-stand{display:flex;align-items:flex-end;left:1vw}
.result-stand .stand{height:min(86vh,760px)!important;width:auto!important;max-width:42vw;aspect-ratio:auto!important;border:0!important;box-shadow:none!important;-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 0 30px rgba(255,214,110,.45))}
.result-stand.lose .stand{filter:saturate(.6) brightness(.8) drop-shadow(0 0 20px rgba(120,130,200,.4))}
.rs-word{position:static!important;transform:rotate(-4deg)!important;align-self:center;margin-left:-1vw;writing-mode:vertical-rl;font-size:clamp(44px,6vw,88px)!important;letter-spacing:.2em}

/* ===== 奥義カード ===== */
.card.ult{border-color:#f0d77a!important;box-shadow:0 0 0 2px #f0d77a,0 0 18px rgba(240,215,122,.55)!important}
.card.ult .c-img{background-position:50% 10%!important}
.card.ult .c-type{color:#2b1a00;background:linear-gradient(90deg,#f8e2a6,#c99a4a);border-radius:4px;padding:0 4px}

/* ===== 奥義のカットイン：画面の真ん中に、思い切り ===== */
.ultin{position:fixed;inset:0;z-index:95;pointer-events:none;overflow:hidden;display:grid;place-items:center}
.ui-dark{position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--c) 35%,#000) 0%,rgba(4,2,10,.92) 70%);animation:uiDark 2.6s ease both}
.ui-rays{position:absolute;left:50%;top:55%;width:220vmax;height:220vmax;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--c) 55%,transparent) 0 5deg,transparent 5deg 15deg);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 55%);mask-image:radial-gradient(circle,#000 0,transparent 55%);animation:uiRays 2.6s linear both}
.ui-burst{position:absolute;left:50%;top:55%;width:40vmin;height:40vmin;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0,color-mix(in srgb,var(--c) 80%,#fff) 25%,transparent 70%);animation:uiBurst 2.6s cubic-bezier(.2,.8,.3,1) both}
.ui-fig{position:absolute;left:50%;bottom:0;height:104vh;width:auto;max-width:92vw;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 0 30px var(--c)) drop-shadow(0 0 80px color-mix(in srgb,var(--c) 60%,transparent));animation:uiFig 2.6s cubic-bezier(.2,.9,.25,1.15) both}
.ui-text{position:absolute;left:50%;top:12%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;animation:uiText 2.6s cubic-bezier(.2,.9,.3,1.2) both;white-space:nowrap}
.ui-kicker{font-weight:900;letter-spacing:.6em;color:#fff3c4;text-shadow:0 0 14px var(--c);font-size:clamp(16px,2vw,26px)}
.ui-text b{font-family:var(--f-display);font-size:clamp(54px,9vw,140px);line-height:1;color:#fff;-webkit-text-stroke:2px color-mix(in srgb,var(--c) 60%,#000);text-shadow:0 0 30px var(--c),0 0 70px var(--c),0 6px 0 rgba(0,0,0,.6)}
.ui-who{margin-top:6px;font-weight:800;color:#fff;letter-spacing:.3em;text-shadow:0 2px 6px #000}
.ui-flash{position:absolute;inset:0;background:#fff;animation:uiFlash 2.6s ease both}
@keyframes uiDark{0%{opacity:0}8%{opacity:1}85%{opacity:1}100%{opacity:0}}
@keyframes uiRays{0%{opacity:0;transform:translate(-50%,-50%) rotate(0)}12%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(40deg)}}
@keyframes uiBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.6)}40%{opacity:.6;transform:translate(-50%,-50%) scale(2.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.4)}}
@keyframes uiFig{0%{opacity:0;transform:translateX(-50%) translateY(14%) scale(.6)}14%{opacity:1;transform:translateX(-50%) scale(1.08)}22%{transform:translateX(-50%) scale(1)}80%{opacity:1;transform:translateX(-50%) scale(1.04)}100%{opacity:0;transform:translateX(-50%) scale(1.25)}}
@keyframes uiText{0%,16%{opacity:0;transform:translateX(-50%) scale(2.6)}26%{opacity:1;transform:translateX(-50%) scale(1)}82%{opacity:1;transform:translateX(-50%) scale(1.03)}100%{opacity:0;transform:translateX(-50%) scale(.9)}}
@keyframes uiFlash{0%{opacity:0}10%{opacity:.85}22%{opacity:0}100%{opacity:0}}

/* ===== バン＆ピック ===== */
.draft-title{font-size:1.3em;font-weight:800;color:#fff;margin:4px 0}
.draft-seats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;list-style:none;padding:0;margin:8px 0}
.draft-seats li{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:12px;background:rgba(20,14,40,.7);border:1px solid var(--line)}
.draft-seats li.now{border-color:var(--gold);box-shadow:0 0 14px rgba(240,215,122,.45)}
.draft-seats li .avatar,.draft-seats .slot.q{width:40px;height:40px}
.draft-seats .slot.q{display:grid;place-items:center;border-radius:50%;background:#2a2150;color:var(--gold);font-weight:800}
.draft-seats small{display:block;color:var(--muted);font-size:.8em}
.draft-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0}
.dc{position:relative;display:flex;flex-direction:column;align-items:stretch;padding:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,#221a44,#120c24);cursor:pointer;color:var(--fg);transition:transform .15s,box-shadow .15s}
.dc:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 0 0 2px var(--gold),0 14px 30px rgba(0,0,0,.5)}
.dc.sel{box-shadow:0 0 0 3px var(--gold),0 0 30px rgba(240,215,122,.6)}
.dc:disabled{cursor:default}
.dc-art{height:clamp(180px,30vh,300px);display:block;background:radial-gradient(60% 60% at 50% 70%,rgba(240,215,122,.25),transparent 70%)}
.dc-art .stand{width:100%;height:100%}
.dc-nm{display:flex;flex-direction:column;padding:6px 10px 0;text-align:left}
.dc-nm b{font-size:1.1em}.dc-nm small{color:var(--muted);font-size:.78em}
.dc-ult{padding:2px 10px 10px;text-align:left;color:var(--gold);font-size:.8em;font-weight:700}
.dc.banned,.dc.picked{filter:grayscale(.7) brightness(.55)}
.dc-stamp{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%) rotate(-12deg);font-weight:900;font-size:1.4em;padding:4px 14px;border:3px solid;border-radius:8px;background:rgba(0,0,0,.6);white-space:nowrap;filter:none}
.dc-stamp.ban{color:#ff5a6e;border-color:#ff5a6e}.dc-stamp.pick{color:#f0d77a;border-color:#f0d77a}
.dc.mybanned{filter:none;box-shadow:0 0 0 3px #ff5a6e}
@media (max-width:760px){.draft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dc-art{height:200px}}
/* 奥義の名前は顔に重ねず、下の方に */
.ui-text{top:auto!important;bottom:7%}
.ui-text .ui-kicker{order:0}

/* ===== ステージ・特性 ===== */
.pill.stage{color:#2b1a00;background:linear-gradient(180deg,#d8f0ff,#8fb8e0);border-color:#d8f0ff;font-weight:800}
.st.veil{color:#ff7aa0}.st.blade{color:#ff9a3d}
.st.veil svg,.st.blade svg{width:16px;height:16px}
.di-stage{display:block;margin-top:8px;font-style:normal;font-weight:700;color:#fff;background:rgba(0,0,0,.5);padding:4px 14px;border-radius:99px;font-size:clamp(11px,1.2vw,15px);text-shadow:0 1px 3px #000}
.ss-info em + small{margin-bottom:4px}
/* ===== 2026-10 改修 ===== */
/* シーフグローブ・オラクルアイ：裏面と表面を同じ大きさに（カードの大きさの指定に負けないように） */
.peek-hand .pk{width:calc(var(--cw)*1.32);height:calc(var(--cw)*1.8)}
.peek-hand .pk .card,.peek-hand .pk .card.big{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0}
.peek-hand .pk-sleeve{z-index:2}
@media (max-width:600px){.peek-hand .pk{width:calc(var(--cw)*1);height:calc(var(--cw)*1.36)}}

/* 手札：7枚までは1段、8枚以上はあぶれた分が2段目 */
.hand-row.two{display:flex;flex-direction:column;align-items:center;gap:6px;overflow:visible;padding-top:10px}
.hand-row.two .hr{display:flex;gap:8px;justify-content:center;flex-wrap:nowrap}
.hand-row.two .card{width:calc(var(--cw)*.86);min-height:calc(var(--cw)*1.16)}
.hand-row.two .card .c-name{font-size:calc(var(--cw)*.12)} .hand-row.two .card .c-pow{font-size:calc(var(--cw)*.22)}
@media (max-width:760px){.hand-row.two .card{width:calc(var(--cw)*.74);min-height:calc(var(--cw)*1)}}

/* 種類だけ見えている相手の手札 */
.card.hintcard{position:relative}
.card.hintcard .hc-label{position:absolute;left:4%;right:4%;bottom:10%;padding:3px 2px;border-radius:6px;text-align:center;font-weight:800;font-size:calc(var(--cw)*.1);line-height:1.15;color:#fff;background:var(--hc);box-shadow:0 0 10px var(--hc);text-shadow:0 1px 2px rgba(0,0,0,.7)}
.card.hintcard{box-shadow:0 0 0 2px var(--hc) !important}
.h-fire{--hc:var(--fire)} .h-water{--hc:var(--water)} .h-wind{--hc:var(--wind)} .h-none{--hc:var(--none)} .h-heal{--hc:var(--heal)} .h-tool{--hc:var(--tool)} .h-shield{--hc:var(--gold)} .h-calamity{--hc:var(--curse)}

/* 奥義カード：キャラの奥義の絵 */
.card.ult .c-img{background-size:cover!important;background-position:50% 18%!important}

/* チュートリアル：校長先生の言葉を大きく太く */
.tutor{max-width:min(500px,calc(100vw - 32px))}
.tutor-say{font-size:1.12em;font-weight:700;line-height:1.7;padding:14px 18px}
.tutor-say .btn{font-size:15px;padding:8px 22px;font-weight:800}
@media (max-width:760px){.tutor-say{font-size:1em}}

/* チーム戦：味方は自分の隣に */
.mine.with-allies{flex-wrap:wrap}
.allies{display:flex;align-items:flex-end;gap:10px;flex:none;position:relative;padding:18px 10px 6px;border-radius:14px;background:linear-gradient(180deg,rgba(80,160,255,.1),rgba(80,160,255,.03));border:1px solid rgba(120,180,255,.35)}
.allies-l{position:absolute;top:-9px;left:12px;font-size:11px;font-weight:800;letter-spacing:.2em;color:#cfe3ff;background:#1a2550;padding:1px 10px;border-radius:99px;border:1px solid rgba(120,180,255,.5)}
.allies .foe{width:auto;min-width:0}
.allies .seat{min-width:0}
.allies .ohand .card.oh{width:calc(var(--cw)*.5);min-height:calc(var(--cw)*.7);margin:0 calc(var(--cw)*-.16)}
@media (max-width:760px){.allies{width:100%;justify-content:center}}

/* 決闘開始：チーム戦（チームごとに左右）とバトルロイヤル（全員が横一列） */
.duel-intro.teamvs .di-side{flex-direction:column;align-items:center;gap:10px}
.duel-intro.teamvs .di-figs{display:flex;gap:1vw;align-items:flex-end}
.di-team{font-family:var(--f-display);font-weight:900;font-size:clamp(18px,2.4vw,34px);letter-spacing:.2em;color:#fff;padding:4px 24px;border-radius:8px;text-shadow:0 2px 6px #000;animation:capPop .6s .3s both}
.di-side.t0 .di-team{background:linear-gradient(90deg,#1f5fd1,#46a0ff);box-shadow:0 0 30px rgba(70,160,255,.7)}
.di-side.t1 .di-team{background:linear-gradient(90deg,#c22a2a,#ff6a3d);box-shadow:0 0 30px rgba(255,90,60,.7)}
.di-side.t0 .di-fig .stand{border-color:rgba(120,190,255,.9);box-shadow:0 0 40px rgba(70,160,255,.55),0 20px 40px rgba(0,0,0,.6)}
.di-side.t1 .di-fig .stand{border-color:rgba(255,150,120,.9);box-shadow:0 0 40px rgba(255,90,60,.55),0 20px 40px rgba(0,0,0,.6)}
.duel-intro.royale{flex-direction:column;justify-content:center}
.di-row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:0;width:min(96vw,1500px);height:72vh}
.di-slot{position:relative;overflow:hidden;clip-path:polygon(12% 0,100% 0,88% 100%,0 100%);margin:0 -3%;display:flex;align-items:flex-end;justify-content:center;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 45%,transparent),rgba(0,0,0,.35));animation:diSlot .6s cubic-bezier(.2,.8,.3,1.1) calc(var(--k)*.12s + .1s) both}
.di-slot::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 10%,rgba(255,255,255,.35) 11%,transparent 13% 87%,rgba(255,255,255,.35) 88%,transparent 90%);pointer-events:none}
.di-slot .di-fig{animation:none}
.di-slot .di-fig .stand{width:100%;height:68vh;aspect-ratio:auto;object-fit:contain;object-position:50% 100%;border:0;box-shadow:none;filter:drop-shadow(0 0 18px var(--c))}
.di-slot .di-nm{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);white-space:nowrap}
@keyframes diSlot{from{opacity:0;transform:translateY(40px) skewX(-8deg)}to{opacity:1;transform:none}}
.royale-title{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;text-align:center}
.royale-title span{font-size:clamp(40px,7vw,104px)!important;letter-spacing:.06em;white-space:nowrap}
@media (max-width:760px){.di-row{height:60vh}.di-slot .di-fig .stand{height:56vh}.royale-title span{font-size:11vw!important}}

/* 勝敗：立ち絵は画面のど真ん中。文字は左右に1文字ずつ */
.result-stand.center{left:0;right:0;bottom:0;top:0;display:flex;align-items:flex-end;justify-content:center;gap:2vw}
.result-stand.center .stand{max-width:60vw;height:min(92vh,860px)!important;position:relative;z-index:1}
.result-stand.center .rs-word{position:relative!important;z-index:2;writing-mode:horizontal-tb;align-self:center;margin:0!important;transform:none!important;font-size:clamp(64px,11vw,170px)!important;letter-spacing:0;animation:rsWord .7s cubic-bezier(.2,1.4,.4,1) .5s both}
.result-stand.center .rs-word.r{animation-delay:.65s}
.rs-glow{position:absolute;left:50%;bottom:-10vh;width:80vh;height:80vh;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,220,140,.45),transparent 65%);animation:rsGlow 3s ease-in-out infinite}
.result-stand.lose .rs-glow{background:radial-gradient(circle,rgba(120,130,220,.35),transparent 65%)}
@keyframes rsWord{from{opacity:0;transform:scale(2.4)!important}to{opacity:1}}
@keyframes rsGlow{50%{opacity:.6}}
.after-reveal{position:relative;z-index:45}
@media (max-width:760px){.result-stand.center .stand{height:70vh!important;max-width:70vw}.result-stand.center .rs-word{font-size:15vw!important}}

/* 待機室：背景は選んでいるマップ（ランダムならキャラのフィールド）、左に選んでいるキャラを大きく */
.lobby-bg{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;filter:brightness(.55) saturate(1.1)}
.lobby-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,5,20,.2),rgba(8,5,20,.55) 45%,rgba(8,5,20,.75))}
.lobby-hero{position:fixed;left:0;bottom:0;top:0;width:min(40vw,640px);z-index:1;pointer-events:none;display:flex;align-items:flex-end;justify-content:center}
.lh-aura{position:absolute;left:50%;bottom:8vh;width:70%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 55%,transparent),transparent 68%);filter:blur(8px);animation:rsGlow 4s ease-in-out infinite}
.lh-fig{position:relative;height:min(94vh,900px);max-width:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 0 24px color-mix(in srgb,var(--c) 70%,transparent));animation:lhIn .7s cubic-bezier(.2,.8,.3,1.1) both}
.lobby-hero .avatar.big{position:relative;width:60%;height:auto;margin-bottom:20vh}
.lh-info{position:absolute;left:24px;bottom:24px;display:flex;flex-direction:column;gap:2px;text-shadow:0 2px 8px #000}
.lh-info b{font-family:var(--f-display);font-size:clamp(26px,3vw,44px);color:#fff}
.lh-info span{color:var(--gold);font-weight:700}
.lh-info em{font-style:normal;font-size:13px;color:#e8ddff;background:rgba(0,0,0,.45);padding:2px 12px;border-radius:99px;margin-top:6px;align-self:flex-start}
@keyframes lhIn{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
.lobby-page{margin-left:min(36vw,580px)}
.lobby-page .setup.wide{max-width:760px}
@media (max-width:900px){.lobby-hero{position:relative;width:100%;height:46vh;top:auto}.lh-fig{height:46vh}.lobby-page{margin-left:0}}
.rs-fig{position:relative;display:flex;align-items:flex-end;justify-content:center;max-width:62vw}
.result-stand.center .rs-fig .stand{position:relative!important;left:auto!important;max-width:62vw}
.result-stand.center .rs-word{position:absolute!important;top:42%;transform:translateY(-50%)!important}
.result-stand.center .rs-word.l{right:100%;margin-right:1vw!important}
.result-stand.center .rs-word.r{left:100%;margin-left:1vw!important}
@media (max-width:760px){.rs-fig,.result-stand.center .rs-fig .stand{max-width:66vw}}
.result-stand.center .rs-fig{flex:none;max-width:none}
.result-stand.center .rs-fig .stand{max-width:none!important;height:min(90vh,62vw,860px)!important;width:auto!important}
.result-stand.center .rs-word{white-space:nowrap;width:auto}
.result-stand.center .rs-word.l{left:auto!important}.result-stand.center .rs-word.r{right:auto!important}
.rs-btns{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);z-index:3;pointer-events:auto;text-shadow:0 1px 4px #000}
.pill.stage{min-height:0;padding:3px 10px;display:inline-flex;flex-direction:row;gap:0;border-radius:99px}
.royale-title{inset:0!important;top:0!important;left:0!important;transform:none!important;animation:none!important;display:flex;flex-direction:column;align-items:center;justify-content:center}.royale-title > *{animation:diVs .6s cubic-bezier(.2,1.4,.4,1) .55s both}
.me-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:nowrap;max-width:100%}
.with-allies .me-col .pass-btn{position:static;transform:none}
.with-allies .me-col{flex-direction:row;align-items:center;gap:10px}
.allies{padding:12px 8px 4px;gap:8px}
.allies .seat .portrait{width:56px!important;height:56px!important}
.allies .ohand{max-width:calc(var(--cw)*2.4);overflow:hidden}
@media (max-width:760px){.me-row{flex-wrap:wrap}.allies{width:auto}}
.fx.sprite{border-radius:0;height:auto;margin:0;max-width:none;filter:drop-shadow(0 0 18px rgba(255,255,255,.25))}
.fx.sprite{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}

/* 小技の絵：背景が暗いので、明るい光の部分だけを重ねて見せる */
.fx.sprite.glow{mix-blend-mode:screen;filter:none;-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}

/* ===== 相手の席も、自分の席と同じく枠の中を透明に ===== */
.table .seat{background:none}

/* ===== 自分の席の横のボタン（詠唱・パス・受ける・ディスペル） ===== */
.me-col .act-bar{position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%);display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:max-content;max-width:min(430px,calc(50vw - 170px))}
.act-bar .pass-btn{position:static!important;transform:none!important}
.act-bar .cast-btn{min-width:0;height:48px;padding:0 18px;font-size:15px}
.act-bar .rbtn.art{flex:none;min-width:150px}
.with-allies .me-col .act-bar{position:static;transform:none;max-width:none}
@media (max-width:760px){.me-col .act-bar{position:static;transform:none;max-width:100%;width:100%;justify-content:center}.act-bar .rbtn.art{min-width:0;flex:1 1 40%}}

/* ===== 応答：使える手札（シールド・リバース）が光り、1回目で浮き、2回目で発動 ===== */
[data-hand] .card.resp-dim{opacity:.45;filter:saturate(.5)}
[data-hand] .card.resp-ok{box-shadow:0 0 0 2px var(--gold),0 0 18px color-mix(in srgb,var(--gold) 55%,transparent);animation:respGlow 1.4s ease-in-out infinite;cursor:pointer}
[data-hand] .card.resp-ok.armed{transform:translateY(-16px) scale(1.06);box-shadow:0 0 0 3px #fff3c4,0 0 28px var(--gold);animation:none;z-index:2}
[data-hand] .card.resp-ok.armed .c-flag{background:var(--gold);color:#2a1a00}
@keyframes respGlow{50%{box-shadow:0 0 0 2px var(--gold),0 0 30px color-mix(in srgb,var(--gold) 80%,transparent)}}
.resp-hint{text-align:center;font-size:13px;color:var(--gold);margin-top:4px}

/* ===== 押した瞬間の手応え。返事が来るまでは押せない ===== */
.pressed{transform:scale(.93)!important;filter:brightness(1.35)!important;transition:transform .08s,filter .08s}
body.acting .act-bar button,body.acting [data-hand] button.card{pointer-events:none}
body.acting .act-bar button:not(.pressed){opacity:.55}/* 応答の場面：宣言のカードを左、見出しとヒントを右に並べて、場の高さに収める */
.arena:has(> .resp-side){display:flex;flex-direction:row;align-items:center;justify-content:center;gap:22px;min-height:0}
.arena:has(> .resp-side) > .casting-row{flex:none}
.arena:has(> .resp-side) .cast-card .card.big{max-height:100%}
.resp-side{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.resp-side .prompt{justify-content:flex-start;margin:0}
.resp-side .resp-hint{text-align:left;line-height:1.5}
@media (max-width:760px){.arena:has(> .resp-side){gap:10px}.arena:has(> .resp-side) .cast-card .card.big{transform:scale(.8)}}/* 手札が2段のときは、場の大きなカードを少し小さくして手札と重ならないように */
body:has(.hand-row.two) .arena .card.big{zoom:.8}/* スマホ：席の下にボタンを並べ、手札は画面の幅で折り返す（横にはみ出さない） */
@media (max-width:760px){
  .me-col{flex-wrap:wrap;max-width:100%}
  .act-bar .cast-btn{height:44px;padding:0 12px;font-size:14px}
  .hand-row.two{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px}
  .hand-row.two .hr{display:contents}
}/* 相手の手札が多いとき（7枚以上）：重ねて、画面の幅からはみ出さないように */
.ohand.many{max-width:100%}
.ohand.many .card.oh{margin:0}
.ohand.many .card.oh + .card.oh{margin-left:min(calc(var(--cw)*-.18), calc((100vw - 40px - var(--n)*var(--cw)*.72) / (var(--n) - 1)))}
.foes:not([style*="--nf:1"]) .ohand.many .card.oh + .card.oh{margin-left:min(calc(var(--cw)*-.3), calc((100vw / 2 - 40px - var(--n)*var(--cw)*.72) / (var(--n) - 1)))}
/* ===== 山札・墓地の枚数：背景に溶けないよう、暗い札に白い数字 ===== */
.deckpile b,.grave b{display:inline-block;min-width:2.2em;text-align:center;padding:1px 10px;border-radius:999px;background:rgba(10,7,26,.82);border:1px solid var(--gold-dim);color:#fff7e0;text-shadow:0 1px 2px #000;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.deckpile span,.grave span{padding:1px 8px;border-radius:6px;background:rgba(10,7,26,.7);color:#e9e2ff;text-shadow:0 1px 2px #000;letter-spacing:.15em}
/* 墓地にカーソルを合わせている間は、墓地の一覧を手札より手前に */
.piles:has(.grave:hover){z-index:60}
body:has(.grave:hover) .mine{z-index:1}
.grave:hover .grave-pop{z-index:61}

/* ===== 自分の番：真詠唱・虚詠唱などのボタンは手札のすぐ上 ===== */
.decl-bar{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:0 auto -4px;position:relative;z-index:3}
.decl-bar .cast-btn{min-width:0;height:48px;padding:0 20px;font-size:15px}
@media (max-width:760px){.decl-bar{gap:6px}.decl-bar .cast-btn{height:44px;padding:0 12px;font-size:14px}}
/* ===== 決闘開始の立ち絵：人数に合わせて大きく。枠は絵と同じ縦2:横3 ===== */
.duel-intro:not(.royale) .di-fig .stand{height:var(--figh,60vh);width:auto;aspect-ratio:2/3;max-width:none;object-fit:cover!important;object-position:50% 0!important;background:radial-gradient(80% 60% at 50% 40%,rgba(255,255,255,.12),rgba(0,0,0,.25));border-radius:14px}
@media (max-width:760px){.duel-intro:not(.royale) .di-fig .stand{height:min(32vh, calc(var(--figh,60vh) * .55));width:auto}}
/* ===== カード名：言葉の切れ目でだけ折り返し、長い行はカードの幅に収まる大きさに ===== */
.card{container-type:inline-size}
.card .c-name .nm{display:block;word-break:keep-all;overflow-wrap:normal;line-height:1.2;font-size:min(1em, calc(84cqi / var(--len, 6)))}
.card.ult .c-name{letter-spacing:.3em}.gt{container-type:inline-size}
.gt .gt-nm .nm{display:block;word-break:keep-all;overflow-wrap:normal;line-height:1.2;font-size:min(1em, calc(92cqi / var(--len, 6)))}
/* ===== カードの枠：強さの段階で変える（★1 控えめ／★2 銀／★3 金／☠ 赤黒） ===== */
.card .c-frame{position:absolute;inset:3px;border-radius:7px;pointer-events:none;z-index:2}
.card.tier-1{border-color:rgba(150,140,185,.45)}
.card.tier-2{border:1.5px solid #aeb8cc}
.card.tier-2 .c-frame{border:1px solid rgba(220,228,242,.55);box-shadow:inset 0 0 0 1px rgba(20,24,40,.5)}
.card.tier-3{border:2px solid #e2bd62}
.card.tier-3 .c-frame{border:1px solid rgba(255,226,150,.75);box-shadow:inset 0 0 0 1px rgba(60,40,0,.45),inset 0 0 14px rgba(255,205,110,.28)}
.card.tier-3 .c-frame::before,.card.tier-3 .c-frame::after{content:"";position:absolute;left:50%;width:7px;height:7px;background:#f3d27e;transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 6px rgba(255,215,120,.8)}
.card.tier-3 .c-frame::before{top:0}
.card.tier-3 .c-frame::after{top:100%}
.card.tier-doom{border:2px solid #6e0f1c;background-color:#12060a}
.card.tier-doom .c-frame{border:1px solid rgba(190,30,50,.6);box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),inset 0 0 16px rgba(150,0,20,.45)}
.card.mini .c-frame{inset:2px}
/* 小さいカード（相手の手札・墓地）は飾りの菱形を省く */
.ohand .card .c-frame::before,.ohand .card .c-frame::after,.grave .card .c-frame::before,.grave .card .c-frame::after{display:none}
/* ===== ロビー：左にキャラ、右に部屋の情報。タイトルは左上 ===== */
.lobby-top{position:fixed;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:12px max(18px,env(safe-area-inset-right,0px)) 12px max(18px,env(safe-area-inset-left,0px));background:linear-gradient(180deg,rgba(8,5,20,.75),transparent)}
.lobby-top h1{margin:0;font-size:22px}
.lobby-top .hstats{margin-left:auto;display:flex;gap:8px}
.lobby-hero{width:min(42vw,680px)}
.lh-fig{height:min(88vh,860px)}
.lh-info{left:28px;bottom:28px}
.lh-change{position:absolute;left:50%;bottom:calc(min(88vh,860px) * .4);transform:translateX(-50%);pointer-events:auto;z-index:3;white-space:nowrap;font-size:15px;padding:10px 22px;box-shadow:0 6px 20px rgba(0,0,0,.55)}
.lobby-page{margin-left:min(42vw,680px);min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:72px 28px 24px;box-sizing:border-box}
.lobby-page .setup.wide{max-width:620px;width:100%;gap:14px}
.room-box{padding:14px 18px!important}
.room-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.room-box .roomcode{font-size:40px}
.room-box .hint{margin:4px 0 0}
.lobby-page .lux-seats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lobby-page .lux-seats li{padding:6px 10px;min-height:52px}
.lobby-page .lux-seats li .avatar,.lobby-page .lux-seats .slot{width:38px;height:38px}
/* キャラクター変更の一覧 */
.charpick-bg{position:fixed;inset:0;z-index:40;background:rgba(5,3,14,.6)}
.charpick{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:41;width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box}
@media (max-width:900px){
  .lobby-top{position:sticky;background:rgba(8,5,20,.8)}
  .lobby-hero{position:relative;width:100%;height:44vh}
  .lh-fig{height:44vh}
  .lh-change{bottom:auto;top:52%;font-size:13px;padding:8px 16px}
  .lh-info{left:16px;bottom:12px}
  .lobby-page{margin-left:0;min-height:0;padding:12px 12px 24px;display:block}
}
@media (max-width:480px){.lobby-page .lux-seats{grid-template-columns:1fr}.lobby-top h1{font-size:18px}.lobby-top .hstats .btn{padding:4px 8px}}
/* 立ち絵の左右の端が切れて見えないよう、ふちをぼかす */
.lh-fig{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(0deg,transparent,#000 6%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(0deg,transparent,#000 6%);mask-composite:intersect}

/* ===== 見やすさ：場の文字は、どの背景でも読めるように「帯」の上に出す ===== */
/* 公開中の一行：色ごとの帯。真詠唱は金の帯に濃い文字、虚詠唱は紫の帯に白い文字 */
.rv-cap:not(:empty){display:inline-block;padding:6px 18px;border-radius:10px;background:rgba(10,7,24,.86);border:1px solid rgba(255,255,255,.18);color:#fff;text-shadow:0 1px 2px #000;box-shadow:0 6px 18px rgba(0,0,0,.55);max-width:min(92vw,640px)}
.rv-cap.gold:not(:empty){background:linear-gradient(180deg,#ffe9a8,#e0b24f);border-color:#fff3c8;color:#3a2400;text-shadow:0 1px 0 rgba(255,255,255,.6);box-shadow:0 0 22px rgba(255,205,90,.55),0 6px 18px rgba(0,0,0,.55)}
.rv-cap.purple:not(:empty){background:linear-gradient(180deg,#5b2aa8,#33106e);border-color:#c9a2ff;color:#fff;text-shadow:0 1px 3px #000;box-shadow:0 0 22px rgba(160,90,255,.55),0 6px 18px rgba(0,0,0,.55)}
.rv-cap.red:not(:empty){background:linear-gradient(180deg,#9c1d2b,#5a0c16);border-color:#ff9aa5;color:#fff}
.rv-cap.green:not(:empty){background:linear-gradient(180deg,#1f7a4c,#0e4a2c);border-color:#9ff0c4;color:#fff}
.reveal{display:flex;flex-direction:column;align-items:center}
/* 真詠唱・虚詠唱のハンコ：色の地に文字をはっきり */
.rv-slot .verdict.true{background:linear-gradient(180deg,#ffe9a8,#e0b24f);color:#3a2400;border-color:#fff3c8}
.rv-slot .verdict.false{background:linear-gradient(180deg,#6a34c2,#3a127d);color:#fff;border-color:#d4b2ff}
/* 場の見出し（詠唱するカード・応答など）と注意書き */
.arena .prompt{background:rgba(10,7,24,.72);padding:4px 16px;border-radius:12px;width:max-content;max-width:100%;margin-left:auto;margin-right:auto;text-shadow:0 1px 3px #000;box-sizing:border-box}
.arena .warn,.resp-hint,.di-stage{background:rgba(10,7,24,.78);padding:3px 12px;border-radius:8px;text-shadow:0 1px 2px #000}
.resp-hint{color:#ffe19a}
.thinking .th-nm{text-shadow:0 1px 3px #000}
.pword.evolve.false{color:#d8b8ff}
/* ===================================================================
   スマホ：縦でも横でも、決闘の画面をスクロールなしで1画面に収める
   =================================================================== */
/* --- 共通（縦長のスマホ・横長のスマホ） --- */
@media (max-width:760px), (max-height:500px){
  body.ingame{overflow:hidden!important;height:100dvh!important}
  body.ingame .table{height:100dvh!important;min-height:0;overflow:hidden!important;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;padding:4px 8px max(4px,env(safe-area-inset-bottom,0px));gap:4px;box-sizing:border-box}
  body.ingame .arena-wrap{position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  body.ingame .arena{min-height:0;max-height:100%;overflow:visible}
  /* 山札と墓地：場の右上に小さく */
  body.ingame .piles{position:absolute!important;right:0;top:0;transform:none!important;flex-direction:column;gap:4px;width:auto;z-index:4}
  body.ingame .deckpile .stack,body.ingame .deckpile .stack i,body.ingame .grave .stack,body.ingame .grave .stack .card{width:calc(var(--cw)*.55);height:calc(var(--cw)*.76);min-height:calc(var(--cw)*.76)}
  body.ingame .deckpile b,body.ingame .grave b{font-size:13px;padding:0 6px;margin-top:2px}
  body.ingame .deckpile span,body.ingame .grave span{font-size:9px}
  /* 手札：1段に収まるよう、枚数に合わせて縮む */
  body.ingame .hand-row{flex-wrap:nowrap!important;overflow:visible;justify-content:center;gap:4px;padding:6px 0 2px;max-width:100%}
  body.ingame .hand-row .card,body.ingame .hand-row.two .card{flex:0 1 var(--cw);width:auto;min-width:0;min-height:0;aspect-ratio:1/1.38}
  body.ingame .hand-row.two{flex-direction:column;align-items:center;gap:4px}
  body.ingame .hand-row.two .hr{display:flex!important;flex-wrap:nowrap;justify-content:center;gap:4px;width:100%}
  body.ingame .card .c-pow{font-size:calc(var(--cw)*.3)}
  body.ingame .card .c-type{font-size:calc(var(--cw)*.11)}
  /* 席：顔とHPを小さく */
  body.ingame .seat{padding:4px 8px 4px 4px;gap:6px}
  body.ingame .seat .portrait,body.ingame .seat.mine .portrait{width:44px;height:44px}
  body.ingame .seat .hpnum{font-size:22px}
  body.ingame .foe{gap:4px}
  body.ingame .me-row{gap:8px}
  body.ingame .act-bar,body.ingame .decl-bar{gap:6px}
  body.ingame .act-bar .btn,body.ingame .decl-bar .btn,body.ingame .act-bar .rbtn.art,body.ingame .pass-btn.art{height:38px;min-width:0;font-size:13px;padding-top:0;padding-bottom:0}
  body.ingame .rbtn.art{padding-left:38px!important;padding-right:12px}
  body.ingame .pass-btn.art{min-width:88px;padding-left:36px!important}
  body.ingame .prompt{font-size:15px}
  body.ingame .rv-cap{font-size:14px}
  body.ingame .rv-slot,body.ingame .card.big{width:calc(var(--cw)*1.2);height:calc(var(--cw)*1.66);min-height:0}
}
/* --- 縦長のスマホ --- */
@media (max-width:760px) and (min-height:501px){
  :root{--cw:min(15.5vw,7.4vh)}
  body.ingame .me-row{flex-wrap:nowrap}
  body.ingame .me-col{flex-wrap:nowrap}
  body.ingame .me-col .act-bar{width:auto;flex-wrap:wrap;justify-content:flex-start}
}
/* --- 横長のスマホ（高さが低い） --- */
@media (max-height:500px){
  :root{--cw:13vh}
  body.ingame .table > header{padding:0;min-height:0}
  body.ingame .table > header .logo{font-size:14px}
  body.ingame .table > header .btn,body.ingame .table > header .pill{padding:2px 8px;font-size:11px}
  /* 相手：席と手札を横に並べる */
  body.ingame .foes{gap:8px}
  body.ingame .foe{flex-direction:row;align-items:center;width:auto!important}
  body.ingame .foe .seat{width:auto}
  body.ingame .ohand .card.oh{width:calc(var(--cw)*.6);min-height:calc(var(--cw)*.84)}
  /* 自分：手札の左に席、右にボタン */
  body.ingame .mine{flex-direction:row!important;align-items:flex-end;justify-content:center;gap:10px;padding:0}
  body.ingame .mine .hand-row{order:2;flex:0 1 auto}
  body.ingame .mine .decl-bar{position:absolute;bottom:calc(var(--cw)*1.38 + 14px);left:50%;transform:translateX(-50%);z-index:5}
  body.ingame .mine .me-row{order:1;flex:none}
  body.ingame .me-col{position:static}
  body.ingame .me-col .act-bar{position:fixed;right:8px;bottom:8px;left:auto;top:auto;transform:none;width:auto;max-width:40vw;justify-content:flex-end;z-index:6}
  body.ingame .seat .hpnum{font-size:18px}
  body.ingame .seat .portrait,body.ingame .seat.mine .portrait{width:36px;height:36px}
}@media (max-width:760px), (max-height:500px){
  body.ingame .mine .hand-row{width:100%;box-sizing:border-box}
}
@media (max-width:760px) and (min-height:501px){
  :root{--cw:min(17.5vw,8.6vh)}
  body.ingame .me-row,body.ingame .me-col{flex-wrap:wrap!important;justify-content:center;width:100%}
  body.ingame .me-col .act-bar{width:100%!important;justify-content:center;flex-wrap:nowrap}
  body.ingame .seat.mine{width:auto;max-width:100%}
}
@media (max-height:500px){body.ingame .table{padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}}

/* ===== ロビー：キャラは左の空きの、上下左右の真ん中に ===== */
.lobby-hero{top:58px;bottom:0;align-items:center;justify-content:center}
.lh-stage{position:relative;height:min(calc(100dvh - 130px),820px);aspect-ratio:2/3;max-width:92%;display:flex;align-items:center;justify-content:center}
.lh-stage .lh-fig{height:100%;width:auto;max-width:100%;object-fit:contain}
.lh-stage .lh-aura{bottom:auto;top:50%;transform:translate(-50%,-50%)}
.lh-stage .lh-change{position:absolute;left:50%;top:58%;bottom:auto;transform:translateX(-50%)}
.lh-info{left:50%;transform:translateX(-50%);bottom:14px;align-items:center;text-align:center}
.lh-info em{align-self:center}
@media (max-width:900px){.lobby-hero{top:auto}.lh-stage{height:44vh}.lh-stage .lh-change{top:56%}}

/* ===== キャラの絵は、どこで出しても四辺をフェード ===== */
.stand,.stand-big,.lh-fig,.ui-fig,.rs-fig .stand,.di-fig .stand,.result-stand .stand{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(0deg,transparent,#000 9%,#000 91%,transparent)!important;
  -webkit-mask-composite:source-in!important;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(0deg,transparent,#000 9%,#000 91%,transparent)!important;
  mask-composite:intersect!important}
/* ===== 手札が2段のとき：カードが小さいので、種類の文字は省いて、名前・印・数字が重ならないように ===== */
.card .c-type{white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:100%}
.hand-row.two .card .c-type{display:none}
.hand-row.two .card .c-flag{top:4px;right:4px;left:auto;font-size:9px;padding:1px 5px;max-width:calc(100% - 8px);white-space:nowrap;overflow:hidden}
.hand-row.two .card .c-name{margin-top:14px}
.hand-row.two .card .c-pow{bottom:2px}

/* ===== ロビー：キャラは「画面の左端」と「右のパネルの左端」のちょうど真ん中に ===== */
@media (min-width:901px){
  .lobby-hero{width:calc(min(42vw,680px) + 28px + max(0px, (100vw - min(42vw,680px) - 56px - 620px) / 2))}
}
/* ===== 勝敗：「勝利」「敗北」は立ち絵の上（顔に重ねない） ===== */
.rs-col{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.result-stand.center .rs-word.top{position:relative!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;margin:0 0 -1vh!important;font-size:clamp(56px,9vh,130px)!important;letter-spacing:.12em;line-height:1;z-index:2}
.result-stand.center .rs-col .rs-fig .stand{height:min(76vh,62vw,740px)!important}
@media (max-width:760px){.result-stand.center .rs-word.top{font-size:13vw!important}.result-stand.center .rs-col .rs-fig .stand{height:62vh!important}}

/* ===== バトルロイヤル：タイトルは顔より下（体のあたり）に ===== */
.royale-title{justify-content:flex-end!important;padding-bottom:22vh;box-sizing:border-box}
.royale-title span{font-size:clamp(34px,5.6vw,84px)!important;background:rgba(8,5,20,.55);padding:0 .4em;border-radius:12px}
@media (max-width:760px){.royale-title{padding-bottom:18vh}}

/* ===== ロビー：対戦の形の切り替え（3人以上） ===== */
.mode-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}
.mode-opt{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 6px;border-radius:10px;border:1px solid var(--line);background:rgba(20,14,40,.7);color:var(--fg);cursor:pointer;font:inherit}
.mode-opt b{font-family:var(--f-display);font-size:15px}
.mode-opt small{font-size:11px;color:var(--muted)}
.mode-opt.on{border-color:var(--gold);background:linear-gradient(180deg,rgba(90,60,10,.55),rgba(40,25,5,.6));box-shadow:0 0 14px rgba(255,200,90,.35)}
.mode-opt.on b{color:var(--gold)}
.mode-opt:disabled{cursor:default}
.mode-opt:disabled:not(.on){opacity:.55}

/* ===== チーム戦：席の札がはみ出さないよう1列に ===== */
.lobby-page .lux-seats.team{grid-template-columns:1fr}
.lux-seats li{min-width:0;flex-wrap:wrap}
.lux-seats li .tag{flex:none}
.royale-title small{background:rgba(8,5,20,.75);padding:2px 12px;border-radius:8px;margin-top:6px;color:#fff;text-shadow:0 1px 2px #000}

/* ===== ロゴ（絵） ===== */
.logo.logo-img{display:block;height:34px;width:auto;max-width:100%;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));-webkit-user-select:none;user-select:none}
.logo.logo-img.big{height:auto;width:min(620px,88vw);margin:0 auto;filter:drop-shadow(0 6px 24px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(160,100,255,.25))}
.lobby-top .logo.logo-img{height:40px}
.topbar .logo.logo-img{height:30px}
@media (max-width:760px){.logo.logo-img{height:26px}.lobby-top .logo.logo-img{height:30px}}
@media (max-height:500px){body.ingame .topbar .logo.logo-img{height:20px}}
.lobby-top .logo.logo-img{height:44px}.topbar .logo.logo-img{height:32px}
@media (max-width:760px){.lobby-top .logo.logo-img{height:32px}.topbar .logo.logo-img{height:26px}}

/* ===== スマホ：トップ画面のキャラ選択は、立ち絵を大きく、枠の真ん中に ===== */
@media (max-width:760px){
  .sel-show .stand-big{height:min(58vh,460px)!important;max-width:100%!important;margin:18px auto 0!important;display:block}
  .sel-show .ss-info{padding-top:8px}
}
/* ===== スマホ：ロビーの上のバーは画面に固定せず、キャラの上に置く。募集中の枠は小さく ===== */
@media (max-width:900px){
  .lobby-top{position:absolute!important;top:0;left:0;right:0;background:linear-gradient(180deg,rgba(8,5,20,.85),rgba(8,5,20,0))}
  .lobby-hero{margin-top:56px}
  .room-box{padding:8px 12px!important}
  .room-box .lux-title{font-size:13px;margin-bottom:2px}
  .room-box .roomcode{font-size:26px!important}
  .room-box .room-row{gap:10px}
  .room-box .hint{font-size:11px;margin-top:2px}
}@media (max-width:900px){
  .lobby-top{flex-wrap:nowrap;padding:8px 10px;gap:6px}
  .lobby-top .logo.logo-img{height:26px}
  .lobby-top .hstats{gap:4px;flex-wrap:nowrap}
  .lobby-top .hstats .btn{padding:4px 7px;font-size:11px;white-space:nowrap}
  .lobby-hero{margin-top:46px}
  /* 募集中の枠：見出しと部屋コードとコピーを1行に。説明は省く */
  .room-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px}
  .room-box::before,.room-box::after{display:none}
  .room-box .lux-title{width:100%;margin:0;font-size:12px}
  .room-box .roomcode{font-size:22px!important;letter-spacing:.12em}
  .room-box .btn.small{padding:3px 8px;font-size:11px}
  .room-box .hint{display:none}
}
/* ===== 決闘中の「中断」：スマホでも右上にいつも出す（いちばん右） ===== */
.topbar .stop-btn{order:99;margin-left:2px;border-color:rgba(255,120,130,.55);color:#ffd4d8}
@media (max-width:760px), (max-height:500px){
  body.ingame .topbar{flex-wrap:nowrap}
  body.ingame .topbar .hstats{flex-wrap:nowrap;gap:4px;margin-left:auto}
  body.ingame .topbar .btn.small{padding:3px 7px;font-size:11px;white-space:nowrap}
  body.ingame .topbar .pill{padding:2px 7px;font-size:11px}
}@media (max-width:480px){
  body.ingame .topbar .room,body.ingame .topbar .pill.cycle{display:none}
  body.ingame .topbar .logo.logo-img{height:22px}
  body.ingame .topbar{gap:6px;padding-left:6px;padding-right:6px}
}
/* ロビーの上のバーは、PCでも画面に固定しない（スクロールで右のパネルの見出しに重ならないように） */
.lobby-top{position:absolute!important}

/* ===== スマホ横向き（高さが低い）のロビー：PCと同じく、左にキャラ・右にパネル ===== */
@media (max-height:500px) and (min-width:600px){
  .lobby-hero{position:fixed!important;left:0;top:0;bottom:0;height:auto!important;width:38vw!important;margin-top:0!important;align-items:center;justify-content:center}
  .lh-stage{height:calc(100dvh - 24px)!important;max-width:100%}
  .lh-stage .lh-change{top:60%;font-size:12px;padding:6px 12px}
  .lh-info{bottom:6px}
  .lh-info b{font-size:20px}
  .lh-info em{display:none}
  .lobby-page{margin-left:38vw!important;padding:52px 12px 16px!important;display:block!important;min-height:0}
  .lobby-top{left:38vw!important}
}
/* ===== 改行：日本語は言葉のまとまり（文節）で折り返す。行末に1〜2文字だけ残る折り返しも避ける ===== */
html{line-break:strict;overflow-wrap:anywhere}
body{text-wrap:pretty}
@supports (word-break:auto-phrase){ body{word-break:auto-phrase} }
h1,h2,h3,.lux-title,.prompt,.rv-cap,.resp-hint,.hint,.warn,.tip-body,.tip,.rules p,.rules li{text-wrap:balance}
/* 名前やボタンの文字は途中で折り返さない */
.btn,.rbtn,.tag,.pill,.mode-opt b,.seat .nm,.lux-seats li .nm,.di-nm,.lh-info b,.roomcode,.c-type{word-break:keep-all;overflow-wrap:normal}
/* スマホ横向き：席を1列にして、名前が「…」で切れないように */
@media (max-height:500px) and (min-width:600px){ .lobby-page .lux-seats{grid-template-columns:1fr} }
/* 手札の印（防ぐ・詠唱・実際など）は右下に置いて、左上の種類の文字と重ねない */
[data-hand] .card .c-flag{top:auto!important;bottom:6px;right:6px;left:auto!important}

/* ===== 印（詠唱・実際・防ぐ）はどのカードでも右下に。左上の種類と名前に重ねない ===== */
.card .c-flag{top:auto!important;bottom:5px;right:5px;left:auto!important}

/* ===== スマホ（縦・横）：相手が2人以上のとき、席を小さくまとめる（名前・HP・ディスペルが1行ずつ収まるように） ===== */
@media (max-width:760px), (max-height:500px){
  body.ingame .foes:not([style*="--nf:1"]){gap:4px}
  body.ingame .foes:not([style*="--nf:1"]) .foe{width:calc((100% - (var(--nf) - 1)*4px) / var(--nf))!important;min-width:0;flex:none}
  body.ingame .foes:not([style*="--nf:1"]) .seat{flex-direction:column;align-items:center;text-align:center;padding:4px 2px;gap:2px;width:100%;min-width:0}
  body.ingame .foes:not([style*="--nf:1"]) .seat .portrait{width:36px;height:36px}
  body.ingame .foes:not([style*="--nf:1"]) .sv{width:100%;min-width:0;align-items:center}
  body.ingame .foes:not([style*="--nf:1"]) .nm-row{justify-content:center;max-width:100%}
  body.ingame .foes:not([style*="--nf:1"]) .nm-row .tag{display:none}
  body.ingame .foes:not([style*="--nf:1"]) .pname{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  body.ingame .foes:not([style*="--nf:1"]) .hp{white-space:nowrap;justify-content:center}
  body.ingame .foes:not([style*="--nf:1"]) .hpnum{font-size:18px!important}
  body.ingame .foes:not([style*="--nf:1"]) .hpmax{font-size:10px}
  body.ingame .foes:not([style*="--nf:1"]) .dg-label{display:none}
  body.ingame .foes:not([style*="--nf:1"]) .dgems{padding:1px 4px}
  body.ingame .foes:not([style*="--nf:1"]) .servant-wrap{transform:scale(.7);transform-origin:top right}
  /* 相手の手札：席の幅の中で重ねて並べる */
  body.ingame .foes:not([style*="--nf:1"]) .ohand{max-width:100%;padding:0;justify-content:center;overflow:visible}
  body.ingame .foes:not([style*="--nf:1"]) .ohand .card.oh{width:calc(var(--cw)*.5);min-height:calc(var(--cw)*.7);margin:0}
  body.ingame .foes:not([style*="--nf:1"]) .ohand .card.oh + .card.oh{margin-left:min(calc(var(--cw)*-.25), calc((100% - var(--n,5)*var(--cw)*.5) / (var(--n,5) - 1)))}
  body.ingame .foes:not([style*="--nf:1"]) .ohand .card.oh .c-name,body.ingame .foes:not([style*="--nf:1"]) .ohand .card.oh .c-type,body.ingame .foes:not([style*="--nf:1"]) .ohand .hc-label{font-size:8px}
}
/* ===== ★1：控えめな銅の枠（銀・金より一段落ちるが、寂しくならないように） ===== */
.card.tier-1{border:1.5px solid #9a6a45}
.card.tier-1 .c-frame{border:1px solid rgba(214,160,112,.5);box-shadow:inset 0 0 0 1px rgba(30,16,8,.55)}
@media (max-width:760px), (max-height:500px){ body.ingame .grave .stack .card .c-name, body.ingame .grave .stack .card .c-type, body.ingame .grave .stack .card .c-pow{display:none} body.ingame .piles{top:6px} }

/* スマホ横：詠唱のボタンは右下（パスの上）に出して、手札に重ねない。手番の札が席からはみ出さないように */
@media (max-height:500px){
  body.ingame .mine .decl-bar{position:fixed!important;left:auto!important;right:8px;bottom:54px!important;transform:none!important;flex-direction:column;align-items:stretch;gap:4px;z-index:7}
  body.ingame .mine .decl-bar .btn{height:34px!important;font-size:12px}
  body.ingame .seat.mine{padding-bottom:12px}
  body.ingame .foes:not([style*="--nf:1"]) .foe{flex-direction:column!important}
}
/* ===== キャラの絵の四辺フェード：カットインと校長先生も（前の「マスクなし」の指定より強く） ===== */
.cutin .stand.ci-fig,.ult-in .ui-fig,.tutor .hm-img,.dc-art .stand,.result-stand .rs-fig .stand,.duel-intro .di-fig .stand,.lobby-hero .lh-fig,.sel-show .stand-big{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(0deg,transparent,#000 9%,#000 91%,transparent)!important;
  -webkit-mask-composite:source-in!important;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(0deg,transparent,#000 9%,#000 91%,transparent)!important;
  mask-composite:intersect!important}

/* ===== スマホ（縦・横）：小さくまとめた相手の席では「手番」の札を出さない（席の金色の光で分かる） ===== */
@media (max-width:760px), (max-height:500px){
  body.ingame .foes:not([style*="--nf:1"]) .seat .role{display:none}
}
/* ===== スマホ横：山札と墓地は右上に横並び。右下のボタンと重ねない ===== */
@media (max-height:500px){
  body.ingame .piles{position:fixed!important;top:40px!important;right:8px!important;bottom:auto!important;flex-direction:row!important;gap:8px;align-items:flex-start}
  body.ingame .piles .deckpile,body.ingame .piles .grave{flex-direction:row;gap:4px;align-items:center}
  body.ingame .deckpile .stack,body.ingame .deckpile .stack i,body.ingame .grave .stack,body.ingame .grave .stack .card{width:calc(var(--cw)*.4);height:calc(var(--cw)*.56);min-height:calc(var(--cw)*.56)}
}
/* お知らせの小窓（奪ったカードなど）：暗い板の上に文字を出す */
.overlay .dialog{background:linear-gradient(180deg,#24183f,#130c26);border:1px solid var(--gold-dim);box-shadow:0 20px 60px rgba(0,0,0,.7)}@media (max-height:500px){
  body.ingame .piles{top:46%!important;transform:translateY(-50%)!important;flex-direction:column!important;gap:6px}
  body.ingame .arena .reveal{flex-direction:row;gap:14px;justify-content:center}
  body.ingame .arena .rv-cap{font-size:13px;max-width:44vw}
}@media (max-height:500px){
  body.ingame .foes .seat{flex-direction:column;align-items:center;text-align:center;padding:4px 6px;gap:2px;min-width:0;width:auto!important}
  body.ingame .foes .seat .portrait{width:36px;height:36px}
  body.ingame .foes .sv{align-items:center}
  body.ingame .foes .nm-row .tag,body.ingame .foes .seat .role,body.ingame .foes .dg-label{display:none}
  body.ingame .foes .hp{white-space:nowrap;justify-content:center}
  body.ingame .foes .hpnum{font-size:18px!important}
  body.ingame .foes .foe{width:auto!important;min-width:110px}
}
/* ===== サーヴァント：顔の切り抜きを、金の枠の丸いメダルに ===== */
.servant.svimg{border:2px solid #e8c36a!important;box-shadow:0 0 0 1px rgba(60,40,0,.8),0 0 14px var(--sc),inset 0 0 8px rgba(0,0,0,.45)!important}
.fx.sv-full{position:absolute;left:0;top:0;height:auto;max-width:none;border-radius:0;filter:drop-shadow(0 0 22px rgba(255,255,255,.35));pointer-events:none}
/* ===================================================================
   描いてもらった枠（金と紫の宝石）
   ・パネルと小窓：辺の真ん中の飾りを消した枠を伸ばして使い、真ん中の宝石は伸ばさずに重ねる
   ・枠の絵は内側（余白の上）に描くので、中身の位置は変わらない
   =================================================================== */
.lux,.overlay .dialog{--fb:52px;--fi:7px;border-width:1px!important;border-style:solid!important;border-color:transparent!important;border-radius:0!important;box-shadow:0 20px 50px rgba(0,0,0,.5)!important;
  border-image-source:url('/art/ui/frame-panel-clean.webp?v=1');border-image-slice:196;border-image-width:var(--fb);border-image-repeat:stretch;
  background:
    url('/art/ui/frame-panel-gt.webp?v=1') center top/var(--fb) var(--fb) no-repeat,
    url('/art/ui/frame-panel-gb.webp?v=1') center bottom/var(--fb) var(--fb) no-repeat,
    url('/art/ui/frame-panel-gl.webp?v=1') left center/var(--fb) var(--fb) no-repeat,
    url('/art/ui/frame-panel-gr.webp?v=1') right center/var(--fb) var(--fb) no-repeat,
    linear-gradient(180deg,rgba(32,22,58,.92),rgba(14,9,30,.95)) center/calc(100% - var(--fi)*2) calc(100% - var(--fi)*2) no-repeat!important}
.lux::before,.lux::after{content:none!important}
.overlay .dialog{--fb:44px;border-image-source:url('/art/ui/frame-dialog-clean.webp?v=1');border-image-slice:142;
  background:
    url('/art/ui/frame-dialog-gt.webp?v=1') center top/var(--fb) var(--fb) no-repeat,
    url('/art/ui/frame-dialog-gb.webp?v=1') center bottom/var(--fb) var(--fb) no-repeat,
    url('/art/ui/frame-dialog-gl.webp?v=1') left center/var(--fb) var(--fb) no-repeat,
    url('/art/ui/frame-dialog-gr.webp?v=1') right center/var(--fb) var(--fb) no-repeat,
    linear-gradient(180deg,#24183f,#130c26) center/calc(100% - var(--fi)*2) calc(100% - var(--fi)*2) no-repeat!important;
  padding:28px 26px!important}
.room-box,.lobby-page .lux-seats + *{--fb:40px}
@media (max-width:760px){.lux{--fb:40px}.overlay .dialog{--fb:36px}}

/* ===== 席のプレート（PC）：左の丸に肖像、右の帯に名前・HP・ディスペル ===== */
@media (min-width:761px) and (min-height:501px){
  .table .seat{--sh:116px;--lw:calc(var(--sh)*1.292);--rw:calc(var(--sh)*.388);
    height:var(--sh);min-height:var(--sh);box-sizing:border-box;border:0!important;border-radius:0!important;backdrop-filter:none!important;
    padding:0 calc(var(--rw)*.55) 0 calc(var(--sh)*.2)!important;gap:calc(var(--lw) - var(--sh)*.82)!important;align-items:center!important;flex-wrap:nowrap!important;
    background:
      url('/art/ui/plate-l.webp?v=1') left center/auto 100% no-repeat,
      url('/art/ui/plate-r.webp?v=1') right center/auto 100% no-repeat,
      url('/art/ui/plate-g.webp?v=1') calc(50% + (var(--lw) - var(--rw))/2) center/auto 100% no-repeat,
      url('/art/ui/plate-m.webp?v=1') calc(var(--lw) - 1px) center/calc(100% - var(--lw) - var(--rw) + 2px) 100% no-repeat!important;
    min-width:calc(var(--lw) + var(--rw) + 120px)}
  .table .seat.active{background:
      url('/art/ui/plate-active-l.webp?v=1') left center/auto 100% no-repeat,
      url('/art/ui/plate-active-r.webp?v=1') right center/auto 100% no-repeat,
      url('/art/ui/plate-active-g.webp?v=1') calc(50% + (var(--lw) - var(--rw))/2) center/auto 100% no-repeat,
      url('/art/ui/plate-active-m.webp?v=1') calc(var(--lw) - 1px) center/calc(100% - var(--lw) - var(--rw) + 2px) 100% no-repeat!important;
    box-shadow:none!important;animation:none!important}
  .table .seat.mine{--sh:124px}
  .table .seat .portrait,.table .seat.mine .portrait{width:calc(var(--sh)*.6)!important;height:calc(var(--sh)*.6)!important;flex:none}
  .table .seat .sv{min-width:0;gap:1px}
  .table .seat .hpnum{font-size:26px}
  .table .seat .hpbar{display:none}
}
/* 真ん中の宝石に見出しや席が重ならないよう、内側の余白を広げる */
.lux{padding:36px 28px 30px!important}
.room-box{padding:26px 24px 20px!important}
@media (max-width:900px){.room-box{padding:22px 18px 14px!important}}
@media (min-width:761px) and (min-height:501px){
  /* 帯の中に収まるよう、名前を1行目、HPとディスペルを2行目に並べる */
  .table .seat .sv{display:grid!important;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;row-gap:0;padding-top:2px}
  .table .seat .sv > .nm-row{grid-column:1 / -1;line-height:1.1}
  .table .seat .sv .pname{font-size:14px}
  .table .seat .nm-row .tag{display:none}
  .table .seat .hp{line-height:1}
  .table .seat .hpnum{font-size:24px!important}
  .table .seat .sts{justify-content:flex-start;flex-wrap:nowrap}
}
@media (min-width:761px) and (min-height:501px){ .table .seat{min-width:calc(var(--lw) + var(--rw) + 175px)!important} .table .seat .dg-label,.table .seat .dgems{white-space:nowrap} .foes .foe{width:auto!important;min-width:0} }
@media (min-width:761px) and (min-height:501px){
  /* 相手が多いときは、席のプレートを小さく */
  .foes[style*="--nf:3"] .seat{--sh:98px;min-width:calc(var(--lw) + var(--rw) + 140px)!important}
  .foes[style*="--nf:4"] .seat{--sh:86px;min-width:calc(var(--lw) + var(--rw) + 110px)!important}
  .foes[style*="--nf:5"] .seat{--sh:76px;min-width:calc(var(--lw) + var(--rw) + 92px)!important}
  .foes[style*="--nf:4"] .dg-label,.foes[style*="--nf:5"] .dg-label{display:none}
  .foes[style*="--nf:4"] .hpnum,.foes[style*="--nf:5"] .hpnum{font-size:19px!important}
  .foes[style*="--nf:4"] .pname,.foes[style*="--nf:5"] .pname{font-size:12px!important}
}@media (min-width:761px) and (min-height:501px){
  /* 相手が4人以上：画面の幅を人数で割った幅に収める */
  .foes[style*="--nf:4"] .foe,.foes[style*="--nf:5"] .foe{width:calc((100% - (var(--nf) - 1)*12px) / var(--nf))!important;flex:none;min-width:0}
  .foes[style*="--nf:4"] .seat,.foes[style*="--nf:5"] .seat{min-width:0!important;width:100%!important}
  .foes[style*="--nf:5"] .seat{--sh:70px}
  .foes[style*="--nf:4"],.foes[style*="--nf:5"]{gap:12px!important;justify-content:center}
}
@media (min-width:761px) and (min-height:501px){ .table .seat .hp{white-space:nowrap;display:flex;align-items:baseline;gap:2px} .foes[style*="--nf:4"] .hpmax,.foes[style*="--nf:5"] .hpmax{display:none} .foes[style*="--nf:4"] .seat .sv,.foes[style*="--nf:5"] .seat .sv{column-gap:4px} }

.overlay .dialog{padding:40px 44px 34px!important}
@media (max-width:760px){.overlay .dialog{padding:34px 30px 28px!important}}

@media (max-width:900px){.lux{--fb:34px}.room-box{--fb:24px!important;padding:16px 26px 12px!important}}

/* ===================================================================
   描いてもらったボタン（紫＝普通・金＝大事・赤＝危険・細い紫＝小さい）
   左端・右端はそのまま、真ん中は伸ばす。絵のボタン（受ける・パス・真詠唱など）はそのまま
   =================================================================== */
.btn:not(.art):not(.cast-btn){--bh:40px;--k:.687;--cap:calc(var(--bh)*var(--k));
  height:var(--bh);min-height:0;min-width:calc(var(--cap)*2 + 2em);padding:0 calc(var(--cap)*.8)!important;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  border:0!important;border-radius:0!important;box-shadow:none!important;color:#f3eaff!important;font-weight:700;text-shadow:0 1px 2px #000;
  background:url('/art/ui/b-normal-l.webp?v=1') left center/auto 100% no-repeat,url('/art/ui/b-normal-r.webp?v=1') right center/auto 100% no-repeat,url('/art/ui/b-normal-m.webp?v=1') calc(var(--cap) - 1px) center/calc(100% - var(--cap)*2 + 2px) 100% no-repeat!important}
.btn.small:not(.art):not(.cast-btn){--bh:30px;--k:.984;font-size:12px;
  background:url('/art/ui/b-small-l.webp?v=1') left center/auto 100% no-repeat,url('/art/ui/b-small-r.webp?v=1') right center/auto 100% no-repeat,url('/art/ui/b-small-m.webp?v=1') calc(var(--cap) - 1px) center/calc(100% - var(--cap)*2 + 2px) 100% no-repeat!important}
.btn.primary:not(.art):not(.cast-btn),.btn.lux-btn:not(.art):not(.cast-btn){--bh:44px;--k:.689;color:#3a2400!important;text-shadow:0 1px 0 rgba(255,245,210,.7);
  background:url('/art/ui/b-primary-l.webp?v=1') left center/auto 100% no-repeat,url('/art/ui/b-primary-r.webp?v=1') right center/auto 100% no-repeat,url('/art/ui/b-primary-g.webp?v=1') center center/auto 100% no-repeat,url('/art/ui/b-primary-m.webp?v=1') calc(var(--cap) - 1px) center/calc(100% - var(--cap)*2 + 2px) 100% no-repeat!important}
.btn.danger:not(.art),.btn.stop-btn,.btn[data-a="kick"],.btn[data-a="leave"]{--k:.931;color:#fff!important;
  background:url('/art/ui/b-danger-l.webp?v=1') left center/auto 100% no-repeat,url('/art/ui/b-danger-r.webp?v=1') right center/auto 100% no-repeat,url('/art/ui/b-danger-m.webp?v=1') calc(var(--cap) - 1px) center/calc(100% - var(--cap)*2 + 2px) 100% no-repeat!important}
.btn:not(.art):not(.cast-btn):hover:not(:disabled){filter:brightness(1.15)}
.btn:not(.art):not(.cast-btn):disabled{filter:grayscale(.7) brightness(.75);opacity:.75}
.btn:not(.art):not(.cast-btn).on{filter:brightness(1.2) drop-shadow(0 0 6px rgba(255,210,120,.5))}
@media (max-width:760px), (max-height:500px){
  body.ingame .topbar .btn.small:not(.art){--bh:26px;font-size:11px}
  .lobby-top .btn.small:not(.art){--bh:26px;font-size:11px}
}.btn.small:not(.art):not(.cast-btn){min-width:0;padding:0 calc(var(--cap)*.62)!important}
@media (max-width:760px), (max-height:500px){
  body.ingame .topbar .btn.small:not(.art){--bh:24px;font-size:10.5px;padding:0 calc(var(--cap)*.55)!important;letter-spacing:0}
  body.ingame .topbar .hstats{gap:2px!important}
}
@media (max-width:480px){ body.ingame .topbar [data-a="calm"]{display:none} }
/* ===================================================================
   描いてもらった小さな部品：ディスペルの宝石・HPのハート・狙いの印・墓地の台座
   =================================================================== */
.dgems i{clip-path:none!important;box-shadow:none!important;width:13px!important;height:16px!important;opacity:.9;
  background:url('/art/ui/gem-off.webp?v=1') center/contain no-repeat!important;animation:none!important;filter:none!important}
.dgems i.on{background-image:url('/art/ui/gem-on.webp?v=1')!important;opacity:1;filter:drop-shadow(0 0 4px rgba(255,50,70,.75))!important;animation:gemGlow 2.4s ease-in-out infinite!important}
@keyframes gemGlow{50%{filter:drop-shadow(0 0 8px rgba(255,70,90,.95)) brightness(1.15)}}
.seat .heart{display:inline-block;width:1.05em;height:1em;font-size:18px!important;color:transparent!important;text-shadow:none!important;vertical-align:-2px;
  background:url('/art/ui/heart.webp?v=1') center/contain no-repeat;filter:drop-shadow(0 0 3px rgba(255,40,60,.6))}
/* 狙いの印：肖像に重ねて、ゆっくり回る */
.seat.targeted::after{content:none!important}
.seat.targeted .portrait{position:relative}
.seat.targeted .portrait::after{content:"";position:absolute;inset:-30%;pointer-events:none;z-index:5;
  background:url('/art/ui/target.webp?v=1') center/contain no-repeat;filter:drop-shadow(0 0 6px rgba(255,40,60,.8));animation:reticleSpin 2.4s ease-in-out infinite}
@keyframes reticleSpin{0%{transform:scale(1.3) rotate(-30deg);opacity:0}25%{transform:scale(1) rotate(0);opacity:1}100%{transform:scale(.96) rotate(40deg);opacity:.9}}
/* 墓地の台座：カードは台座の上に置かれる */
.grave .stack{background:url('/art/ui/grave-base.webp?v=1') center 85%/118% auto no-repeat;overflow:visible}
.grave .stack .card.ghost{background:none!important;border:0!important;box-shadow:none!important;font-size:0}
.dgems i{width:15px!important;height:19px!important}
@media (min-width:761px) and (min-height:501px){ .table .seat.targeted,.table .seat.caster,.table .seat.pickable{box-shadow:none!important;outline:0!important} .table .seat.pickable:hover{filter:brightness(1.15)} }

/* ===================================================================
   決めの場面の文字と印（描いてもらった絵）。文字そのものは読み上げ用に残し、見た目は絵にする
   =================================================================== */
/* 真詠唱・虚詠唱のハンコ：カードの右上に、封蝋が押される */
.rv-slot .verdict{width:74px!important;height:74px!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  background:center/contain no-repeat!important;color:transparent!important;text-shadow:none!important;font-size:0!important;
  top:-26px!important;right:-34px!important;left:auto!important;bottom:auto!important;margin:0!important}
.rv-slot .verdict.true{background-image:url('/art/ui/seal-true.webp?v=1')!important;filter:drop-shadow(0 0 14px rgba(255,200,80,.8))}
.rv-slot .verdict.false{background-image:url('/art/ui/seal-false.webp?v=1')!important;filter:drop-shadow(0 0 14px rgba(170,90,255,.8))}
@media (max-width:760px), (max-height:500px){.rv-slot .verdict{width:52px!important;height:52px!important;top:-18px!important;right:-22px!important}}
/* 決闘開始の VS */
.duel-intro:not(.royale) .di-vs > span:first-child{display:block;width:clamp(150px,22vw,320px);aspect-ratio:1000/445;font-size:0!important;color:transparent!important;text-shadow:none!important;-webkit-text-stroke:0!important;
  background:url('/art/ui/word-vs.webp?v=1') center/contain no-repeat;filter:drop-shadow(0 4px 18px rgba(0,0,0,.7))}
/* 勝利・敗北 */
.result-stand.center .rs-word.top{font-size:0!important;color:transparent!important;text-shadow:none!important;width:min(560px,80vw);aspect-ratio:1000/331;background:center/contain no-repeat;margin-bottom:-2vh!important}
.result-stand.win .rs-word.top{background-image:url('/art/ui/word-win.webp?v=1');filter:drop-shadow(0 0 24px rgba(255,200,80,.6))}
.result-stand.lose .rs-word.top{background-image:url('/art/ui/word-lose.webp?v=1');aspect-ratio:1000/384;filter:drop-shadow(0 0 20px rgba(140,80,220,.5))}
/* ===== 校長先生の吹き出し：羊皮紙の巻物（四隅と左の尾はそのまま、真ん中を伸ばす） ===== */
.tutor-say{border-style:solid!important;border-color:transparent!important;border-radius:0!important;box-shadow:none!important;background:none!important;
  border-image:url('/art/ui/bubble.webp?v=1') 100 150 100 215 fill / 26px 36px 26px 52px stretch!important;
  padding:14px 26px 14px 40px!important;color:#2b1c0c!important;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}
.tutor-say .btn{float:right}
@media (max-width:760px){.tutor-say{border-image-width:22px 30px 22px 44px!important;padding:12px 20px 12px 34px!important}}

/* ===== 小さな札（あなた・ホスト・CPU など）：金の縁の紫の札。チームの札は色で分かるよう今のまま ===== */
.tag:not(.team){--th:18px;--tc:calc(var(--th)*.52);height:var(--th);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  padding:0 calc(var(--tc)*.8)!important;border:0!important;border-radius:0!important;color:#eadcff!important;font-size:10px;text-shadow:0 1px 2px #000;
  background:url('/art/ui/tagplate-l.webp?v=1') left center/auto 100% no-repeat,url('/art/ui/tagplate-r.webp?v=1') right center/auto 100% no-repeat,url('/art/ui/tagplate-m.webp?v=1') calc(var(--tc) - 1px) center/calc(100% - var(--tc)*2 + 2px) 100% no-repeat!important}
.tag.gold:not(.team){color:#ffe7a8!important}
.tutor-say{padding:26px 30px 18px 46px!important}
@media (max-width:760px){.tutor-say{padding:22px 24px 14px 38px!important}}

/* ===== 状態のアイコン（描いてもらった金の丸いメダル）。数字は右下に重ねる ===== */
.st.veil,.st.sil,.st.pact,.st.goat{position:relative;display:inline-block;width:26px;height:26px;padding:0!important;border:0!important;border-radius:50%!important;background:center/contain no-repeat!important;box-shadow:0 0 6px rgba(0,0,0,.6);vertical-align:middle}
.st.veil > svg,.st.sil > svg,.st.pact > svg,.st.goat > svg{display:none}
.st.veil{background-image:url('/art/ui/st-veil.webp?v=1')!important}
.st.sil{background-image:url('/art/ui/st-silence.webp?v=1')!important}
.st.pact{background-image:url('/art/ui/st-pact.webp?v=1')!important}
.st.goat{background-image:url('/art/ui/st-goat.webp?v=1')!important}
.st.veil b,.st.sil b,.st.goat b{position:absolute;right:-5px;bottom:-4px;min-width:14px;height:14px;padding:0 2px;border-radius:7px;background:#140c26;border:1px solid #e8c36a;color:#fff;font-size:9px;line-height:12px;text-align:center}
.st.frozen{position:relative;display:inline-block;width:26px;height:26px;padding:0!important;border:0!important;border-radius:50%!important;background:url('/art/ui/st-frozen.webp?v=1') center/contain no-repeat!important;box-shadow:0 0 6px rgba(0,0,0,.6);vertical-align:middle}
.st.frozen > svg{display:none}

/* ===== 席のプレート：肖像を金の丸の真ん中に合わせる（丸の中心は、プレートの高さに対して左から58%・上から54%、直径62%） ===== */
@media (min-width:761px) and (min-height:501px){
  .table .seat{padding-left:calc(var(--sh)*.273)!important;gap:calc(var(--lw) - var(--sh)*.913)!important}
  .table .seat .portrait,.table .seat.mine .portrait{width:calc(var(--sh)*.62)!important;height:calc(var(--sh)*.62)!important;transform:translateY(calc(var(--sh)*.04));margin:0!important}
}
/* ===== 決闘の画面の横幅を、画面の幅に必ず収める（中身が広くても列が広がらない） ===== */
body.ingame .table{grid-template-columns:minmax(0,1fr)!important;max-width:100vw;box-sizing:border-box}
body.ingame .table > *{min-width:0;max-width:100%}
/* 少し狭いPC（〜1100px）：上のバーを詰める */
@media (max-width:1100px){
  body.ingame .topbar{flex-wrap:nowrap;gap:6px}
  body.ingame .topbar .room{display:none}
  body.ingame .topbar .hstats{flex-wrap:nowrap;gap:3px;margin-left:auto;min-width:0}
  body.ingame .topbar .btn.small:not(.art){--bh:26px;font-size:11px;padding:0 calc(var(--cap)*.55)!important}
}
@media (max-width:900px){ body.ingame .topbar [data-a="calm"]{display:none} }
/* ===== 少し狭いPC（761〜1100px）で相手が4人以上：プレートは入りきらないので、小さくまとめた席にする ===== */
@media (min-width:761px) and (max-width:1100px) and (min-height:501px){
  .foes[style*="--nf:4"] .seat,.foes[style*="--nf:5"] .seat{background:linear-gradient(180deg,rgba(40,26,70,.88),rgba(16,10,32,.9))!important;border:1px solid rgba(232,195,106,.55)!important;border-radius:12px!important;
    height:auto!important;min-height:0!important;flex-direction:column!important;align-items:center!important;text-align:center;padding:5px 4px!important;gap:2px!important}
  .foes[style*="--nf:4"] .seat .portrait,.foes[style*="--nf:5"] .seat .portrait{width:40px!important;height:40px!important;transform:none!important}
  .foes[style*="--nf:4"] .seat .sv,.foes[style*="--nf:5"] .seat .sv{display:flex!important;flex-direction:column;align-items:center;width:100%;min-width:0}
  .foes[style*="--nf:4"] .pname,.foes[style*="--nf:5"] .pname{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .foes[style*="--nf:4"] .seat .role,.foes[style*="--nf:5"] .seat .role{display:none}
  .foes[style*="--nf:4"] .ohand .card.oh,.foes[style*="--nf:5"] .ohand .card.oh{width:calc(var(--cw)*.5);min-height:calc(var(--cw)*.7)}
  .foes[style*="--nf:4"] .ohand .card.oh + .card.oh,.foes[style*="--nf:5"] .ohand .card.oh + .card.oh{margin-left:calc(var(--cw)*-.32)}
  .foes[style*="--nf:4"] .ohand,.foes[style*="--nf:5"] .ohand{max-width:100%;overflow:hidden;justify-content:center}
}
@media (min-width:761px) and (max-width:1100px){
  body.ingame .piles{transform:translateY(-35%) scale(.8)!important;transform-origin:right center}
}
@media (min-width:761px) and (max-width:1100px) and (min-height:501px){ .foes[style*="--nf:4"] .ohand .card.oh,.foes[style*="--nf:5"] .ohand .card.oh{margin-right:0!important;margin-left:0} .foes[style*="--nf:4"] .ohand .card.oh + .card.oh,.foes[style*="--nf:5"] .ohand .card.oh + .card.oh{margin-left:calc(var(--cw)*-.32)!important} .foes[style*="--nf:4"] .ohand,.foes[style*="--nf:5"] .ohand{width:auto;align-self:center;overflow:visible} }

.grave:hover .stack .card{filter:none!important}

/* ===== 3つ目のチーム（チーム翠） ===== */
.tag.team.t2,.st.team.t2{color:#8fe3a8;background:rgba(60,200,110,.16)}
.di-side.t2 .di-team{background:linear-gradient(90deg,#1f8a4c,#4cd08a);box-shadow:0 0 30px rgba(70,220,130,.7)}
.duel-intro.three{gap:1vw}
.duel-intro.three .di-vs span{font-size:0!important;width:clamp(90px,12vw,170px)!important}
/* ===== 応答：シールドは相性で光り方を変える（◎ 緑の強い光／○ 青の光／△ 赤く弱い光）、リバースは金 ===== */
[data-hand] .card.resp-ok.resp-good{box-shadow:0 0 0 2px #5fe39a,0 0 22px rgba(80,230,150,.85)!important;animation:respGood 1.1s ease-in-out infinite!important}
[data-hand] .card.resp-ok.resp-same{box-shadow:0 0 0 2px #6fb6ff,0 0 16px rgba(90,170,255,.6)!important;animation:none!important}
[data-hand] .card.resp-ok.resp-bad{box-shadow:0 0 0 2px #d0505a,0 0 10px rgba(220,70,80,.45)!important;animation:none!important;filter:saturate(.75) brightness(.92)}
[data-hand] .card.resp-ok.resp-good .c-flag{background:#2f9e63;color:#fff}
[data-hand] .card.resp-ok.resp-bad .c-flag{background:#9e2f3a;color:#fff}
[data-hand] .card.resp-ok.armed{transform:translateY(-16px) scale(1.06)!important}
@keyframes respGood{50%{box-shadow:0 0 0 2px #8ff5c0,0 0 34px rgba(100,255,170,1)}}
/* ===== 席のプレート：帯のつなぎ目の縦線をなくし、自分の番は帯の上下まで光る ===== */
@media (min-width:761px) and (min-height:501px){
  .table .seat{background:
      url('/art/ui/plate-l.webp?v=1') left center/auto 100% no-repeat,
      url('/art/ui/plate-r.webp?v=1') right center/auto 100% no-repeat,
      url('/art/ui/plate-g.webp?v=1') calc(50% + (var(--lw) - var(--rw))/2) center/auto 100% no-repeat,
      url('/art/ui/plate-m.webp?v=1') calc(var(--lw) - 14px) center/calc(100% - var(--lw) - var(--rw) + 28px) 100% no-repeat!important}
  .table .seat.active{background:
      url('/art/ui/plate-active-l.webp?v=1') left center/auto 100% no-repeat,
      url('/art/ui/plate-active-r.webp?v=1') right center/auto 100% no-repeat,
      url('/art/ui/plate-active-g.webp?v=1') calc(50% + (var(--lw) - var(--rw))/2) center/auto 100% no-repeat,
      url('/art/ui/plate-active-m.webp?v=1') calc(var(--lw) - 14px) center/calc(100% - var(--lw) - var(--rw) + 28px) 100% no-repeat!important;
    filter:drop-shadow(0 0 5px rgba(255,205,100,.75)) drop-shadow(0 0 12px rgba(255,180,60,.45))}
}
/* ===== チーム戦：味方の席 ===== */
/* 青い四角の囲みとチームの札（蒼・紅）はなくす */
.allies{background:none!important;border:0!important;padding:0!important;border-radius:0!important}
body.ingame .st.team{display:none!important}
.allies-l{top:-16px;left:50%;transform:translateX(-50%);background:rgba(10,7,24,.8);border-color:rgba(232,195,106,.6);color:#f3e2b0}
/* 自分の席と味方の席の高さをそろえる（味方の手札は、味方の席の上に小さく扇形に） */
.me-row{align-items:flex-end!important}
.allies .ally-box{display:flex;flex-direction:column-reverse;align-items:center;gap:4px}
.allies .ohand{max-width:none!important;overflow:visible!important;padding:0!important;justify-content:center}
.allies .ohand .card.oh{width:calc(var(--cw)*.42)!important;min-height:calc(var(--cw)*.58)!important;margin:0!important}
.allies .ohand .card.oh + .card.oh{margin-left:calc(var(--cw)*-.24)!important}
@media (min-width:761px) and (min-height:501px){
  .allies .seat{--sh:124px}
  .allies .seat .portrait{width:calc(var(--sh)*.62)!important;height:calc(var(--sh)*.62)!important}
}.allies .ally-box{flex-direction:row!important;align-items:center!important;gap:6px}
.allies .ohand{flex-wrap:nowrap}
.allies-l{left:24%!important}.allies .ally-box{flex-direction:column-reverse!important;align-items:flex-end!important}
.allies .ohand{margin-right:calc(var(--cw)*.5)}.overlay .dialog{--fi:19px}
@media (max-width:760px){.overlay .dialog{--fi:15px}}
.allies-l{left:auto!important;right:0!important;top:-6px!important;transform:none!important}/* 吹き出し：上の真ん中の宝石と右下の飾りに文字やボタンがかからないよう、内側を広げる */
.tutor-say{padding:42px 40px 26px 50px!important}
.tutor-say .btn{margin:6px -6px 0 0}
@media (max-width:760px){.tutor-say{padding:34px 30px 20px 40px!important}}/* チュートリアル（PC）：校長先生は画面の左、相手の席と自分の手札のあいだに出す（席や手札の文字に重ねない） */
@media (min-width:761px){
  .tutor{top:calc(var(--cw,120px)*1.55 + 40px)!important;max-width:min(330px,calc(100vw - 32px))!important}
  .tutor-say{font-size:1em!important}
}
/* ===== 右上のステージ名：「ステージ」の小さな見出しと、金の文字の名前（絵が届くまでの仮） ===== */
.topbar .pill.stage{display:inline-flex;align-items:baseline;gap:6px;padding:2px 12px!important;border:1px solid rgba(232,195,106,.7)!important;border-radius:6px!important;
  background:linear-gradient(180deg,rgba(40,26,70,.92),rgba(16,10,32,.92))!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 10px rgba(232,195,106,.25)}
.topbar .pill.stage small{font-size:9px;letter-spacing:.2em;color:#b9a8d8}
.topbar .pill.stage b{font-family:var(--f-display);font-size:14px;color:#f3d27e;text-shadow:0 0 6px rgba(243,210,126,.5)}
/* 奥義のカットインの背景：縞模様の光線は控えめに（専用の絵が届くまで） */
.ultin .ui-rays{opacity:.35;filter:blur(2px)}.duel-intro.three .di-fig .stand{height:min(42vh,14vw)!important}
.duel-intro.three .di-figs{gap:.6vw}
.duel-intro.three .di-vs{flex:none}
@media (max-width:760px){.duel-intro.three .di-fig .stand{height:20vh!important}}/* カットインの立ち絵：四角い地の色を出さない（四辺のフェードだけ） */
.cutin .ci-fig,.cutin .stand.ci-fig{background:none!important;border:0!important;box-shadow:none!important}
/* 公開：カードの右に説明の帯を出して、下の手札に重ねない */
body.ingame .arena .reveal{flex-direction:row!important;align-items:center;justify-content:center;gap:18px}
body.ingame .arena .rv-cap{max-width:min(40vw,420px)}/* 相手が多いとき：山札と墓地が相手の手札に重ならないよう、少し下げる */
@media (min-width:761px) and (min-height:501px){ body.ingame:has(.foes[style*="--nf:4"]) .piles,body.ingame:has(.foes[style*="--nf:5"]) .piles{top:62%!important} }/* チーム戦：肖像のまわりの青・赤の四角い枠はなくし、肖像は丸く */
.seat.team-0 .portrait,.seat.team-1 .portrait,.seat.team-2 .portrait{box-shadow:none!important;outline:0!important}
.seat .portrait{border-radius:50%}
/* スマホ：自分の席と味方の席を横に並べる（味方の手札は味方の席の上に小さく） */
@media (max-width:760px), (max-height:500px){
  body.ingame .mine.with-allies .me-row{flex-wrap:nowrap!important;align-items:flex-end!important;gap:6px}
  body.ingame .mine.with-allies .me-col{flex:1 1 50%;min-width:0;flex-wrap:wrap!important}
  body.ingame .mine.with-allies .allies{flex:1 1 50%;min-width:0;width:auto!important}
  body.ingame .allies .ally-box{flex-direction:column-reverse!important;align-items:center!important;width:100%}
  body.ingame .allies .seat{width:100%!important;min-width:0}
  body.ingame .allies-l{top:-14px!important;right:4px!important}
  body.ingame .mine.with-allies .seat .pname{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}@media (max-width:480px){
  body.ingame .topbar .pill.stage small{display:none}
  body.ingame .topbar .pill.stage{padding:1px 7px!important}
  body.ingame .topbar .pill.stage b{font-size:12px}
  body.ingame .mine.with-allies .dg-label{display:none}
  body.ingame .act-bar .rbtn.art span{white-space:nowrap;font-size:12px}
}
/* ===== チュートリアルの吹き出し：横長にして、行数を少なく（縦に引き伸ばさない） ===== */
@media (min-width:761px){
  .tutor{top:calc(50% - 130px)!important;max-width:min(600px,calc(100vw - 32px))!important}
  .tutor-say{max-width:500px;font-size:1.02em!important;line-height:1.6}
}

/* ===== 小窓（中断・お知らせなど）：紫の板を枠の内側にきっちり収め、文字は真ん中にそろえる ===== */
.overlay .dialog{text-align:center;align-items:center;gap:10px!important;padding:44px 52px 36px!important;min-width:min(380px,calc(100vw - 32px))}
.overlay .dialog{background-size:var(--fb) var(--fb),var(--fb) var(--fb),var(--fb) var(--fb),var(--fb) var(--fb),calc(100% - 38px) calc(100% - 50px)!important;
  background-position:center top,center bottom,left center,right center,center center!important}
.overlay .dialog h2{font-size:20px;margin:0;letter-spacing:.06em}
.overlay .dialog > p{margin:0;font-size:13px}
.overlay .dialog .row{justify-content:center;gap:14px;margin-top:6px}
@media (max-width:760px){.overlay .dialog{padding:38px 36px 30px!important}}/* 小窓は、校長先生の吹き出しより手前に出す */
.overlay{z-index:120!important}
/* ===== 奥義のカットイン：まず背景が広がり、そのあとキャラ・奥義名が出る ===== */
.ultin{--d:.6s}
.ultin .ui-rays{display:none}
.ui-bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:uiBg 3.2s cubic-bezier(.2,.8,.3,1) both}
.ultin .ui-dark{background:radial-gradient(circle at 50% 55%,transparent 30%,rgba(4,2,10,.55) 100%)!important;animation:uiDark 3.2s ease both!important}
.ultin .ui-burst{animation-delay:var(--d)!important}
.ultin .ui-fig{animation-delay:var(--d)!important}
.ultin .ui-text{animation-delay:var(--d)!important}
.ultin .ui-flash{animation-delay:var(--d)!important}
@keyframes uiBg{0%{opacity:0;transform:scale(1.25)}14%{opacity:1}22%{transform:scale(1.04)}85%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
/* ===== トップ：部屋を作る／入るの高さをそろえる ===== */
.lux-split{align-items:stretch}
.lux-split .field{display:flex;flex-direction:column;justify-content:flex-end}
.lux-split .field label{white-space:nowrap}
.lux-split .field .row{align-items:center;flex-wrap:nowrap}
.lux-split .field .txt{height:44px;box-sizing:border-box}
.lux-split .field .btn:not(.art){--bh:44px!important;--k:.689}

/* ===== キャラクター変更：選んでいるキャラの特性と奥義 ===== */
.cp-info{margin-top:6px;padding:12px 16px;border-radius:10px;background:rgba(10,7,24,.55);border:1px solid rgba(232,195,106,.3);text-align:left}
.cp-name{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.cp-name b{font-family:var(--f-display);font-size:20px;color:#fff}
.cp-name span{color:var(--gold);font-size:12px;font-weight:700}
.cp-info dl{margin:0;display:grid;gap:3px}
.cp-info dt{color:#f3d27e;font-weight:700;font-size:13px;margin-top:4px}
.cp-info dt small{color:#b9a8d8;font-weight:400;margin-left:4px}
.cp-info dd{margin:0;font-size:12.5px;color:#e8e0ff;line-height:1.6}
/* ===== 右上のステージ名：描いてもらった札（左の丸に紋章、右の帯に「ステージ」と名前） ===== */
.topbar .pill.stage{--sw:150px;width:var(--sw);height:calc(var(--sw)*.36);box-sizing:border-box;flex:none;
  display:inline-flex!important;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1.05;
  padding:0 calc(var(--sw)*.07) 0 calc(var(--sw)*.34)!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  background:center/100% 100% no-repeat!important;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.topbar .pill.stage.sp-0{background-image:url('/art/ui/stage-0.webp?v=1')!important}
.topbar .pill.stage.sp-1{background-image:url('/art/ui/stage-1.webp?v=1')!important}
.topbar .pill.stage.sp-2{background-image:url('/art/ui/stage-2.webp?v=1')!important}
.topbar .pill.stage.sp-none{background-image:url('/art/ui/stage-none.webp?v=1')!important}
.topbar .pill.stage small{display:block!important;font-size:8px;letter-spacing:.25em;color:#d9cfee;text-shadow:0 1px 2px #000}
.topbar .pill.stage b{font-size:15px;color:#ffe39a;text-shadow:0 0 6px rgba(255,210,120,.6),0 1px 2px #000;white-space:nowrap}
@media (max-width:1100px){.topbar .pill.stage{--sw:118px}.topbar .pill.stage b{font-size:12px}.topbar .pill.stage small{font-size:7px}}
@media (max-width:480px){.topbar .pill.stage{--sw:96px}.topbar .pill.stage small{display:none!important}.topbar .pill.stage b{font-size:11px}}
.topbar .pill.stage{--sw:180px}.topbar .pill.stage b{font-size:17px}.topbar .pill.stage small{font-size:9px}
@media (max-width:1100px){.topbar .pill.stage{--sw:130px}.topbar .pill.stage b{font-size:13px}}
@media (max-width:480px){.topbar .pill.stage{--sw:100px}.topbar .pill.stage b{font-size:11px}}

/* 応答で1回押したカードが浮き上がっても、上の端が切れないように（手札の行で切り抜かない） */
[data-hand],.hand-row,.hand-row.two .hr{overflow:visible!important}
[data-hand] .card.resp-ok.armed{z-index:5;position:relative}
/* ===== トップ画面の背景：描いてもらった1枚絵。真ん中のパネルが読めるよう、ふちを少し暗く ===== */
.magic-bg .top-art{position:absolute;inset:0;background-size:cover;background-position:center;animation:topArt 30s ease-in-out infinite alternate}
.magic-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 80% at 50% 45%,rgba(8,5,20,.15),rgba(8,5,20,.55))}
@keyframes topArt{from{transform:scale(1.03)}to{transform:scale(1.09) translateY(-1%)}}
.magic-bg .motes{z-index:1}

/* ===================================================================
   スマホ横向き（高さが低い）の決闘画面：席の形をそろえる（前の指定をここでまとめて上書き）
   ・相手の席：左に顔、右に名前・HP・ディスペルの横長の札。手札は札の下に重ねて並べる
   ・HPの「30/30」は1行で、文字の下端をそろえる
   =================================================================== */
@media (max-height:500px){
  body.ingame .foes{display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;align-items:flex-start!important;gap:10px!important}
  body.ingame .foes .foe{flex:0 1 auto!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;width:auto!important;min-width:0!important;gap:3px!important}
  body.ingame .foes .seat{flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;box-sizing:border-box;width:auto!important;min-width:124px!important;max-width:100%;padding:4px 10px 4px 5px!important;gap:6px!important}
  body.ingame .foes .seat .portrait{flex:none;width:36px!important;height:36px!important}
  body.ingame .foes .sv{flex:1 1 auto;width:auto!important;min-width:0!important;align-items:flex-start!important;gap:1px!important}
  body.ingame .foes .nm-row{justify-content:flex-start!important;max-width:100%;line-height:1.1}
  body.ingame .foes .pname{font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
  body.ingame .foes .hp{display:flex!important;align-items:baseline!important;justify-content:flex-start!important;gap:2px!important;white-space:nowrap;line-height:1}
  body.ingame .foes .hp .heart{align-self:center}
  body.ingame .foes .hpnum{font-size:17px!important;line-height:1}
  body.ingame .foes .hpmax{display:inline!important;font-size:10px!important;line-height:1}
  body.ingame .foes .sts{justify-content:flex-start!important;gap:4px}
  body.ingame .foes .dgems{padding:1px 4px!important}
  body.ingame .foes .dgems i{width:10px!important;height:13px!important}
  /* 相手の手札：札の下に、少しずつ重ねて真ん中に */
  body.ingame .foes .ohand{display:flex!important;justify-content:center!important;width:auto!important;max-width:none!important;padding:0!important;overflow:visible!important}
  body.ingame .foes .ohand .card.oh{flex:none;width:calc(var(--cw)*.42)!important;min-height:calc(var(--cw)*.58)!important;height:calc(var(--cw)*.58);margin:0!important}
  body.ingame .foes .ohand .card.oh + .card.oh{margin-left:calc(var(--cw)*-.26)!important}
  /* 自分の席：HPの「/30」を数字の下端にそろえる */
  body.ingame .seat.mine .hp{display:flex;align-items:baseline;gap:2px;white-space:nowrap;line-height:1}
  body.ingame .seat.mine .hp .heart{align-self:center}
  body.ingame .seat.mine .hpnum,body.ingame .seat.mine .hpmax{line-height:1}
  /* 山札と墓地：右下のボタンを縦に積むので、左の空き（相手の席と自分の席のあいだ）に置く */
  body.ingame .piles{top:calc(50% + 22px)!important;left:8px!important;right:auto!important}
  /* 右下のボタン（パス・見送る・ディスペル・真詠唱・虚詠唱）は縦に積んで、手札はその左までに収める */
  body.ingame .mine .hand-row{padding-right:132px!important}
  body.ingame .me-col .act-bar.resp{flex-direction:column!important;align-items:stretch!important;gap:4px!important;width:124px!important;max-width:124px!important}
  body.ingame .me-col .act-bar.resp .rbtn.art{flex:none!important;width:100%!important;min-width:0!important;height:36px!important;font-size:12px!important;padding-left:36px!important;padding-right:8px!important}
  body.ingame .me-col .act-bar .pass-btn.art{width:124px!important;min-width:0!important}
  body.ingame .mine .decl-bar{width:124px!important;bottom:52px!important}
  body.ingame .mine .decl-bar .cast-btn{width:100%!important;min-width:0!important;height:36px!important;padding-left:40px!important;padding-right:8px!important;font-size:12px!important}
}
/* ===== スマホ縦向き：応答のボタン（見送る・ディスペル）は絵の縦横比のまま並べる（横に引き伸ばさない） ===== */
@media (max-width:760px) and (min-height:501px){
  body.ingame .me-col .act-bar.resp{justify-content:center!important;gap:10px!important;flex-wrap:nowrap!important}
  body.ingame .me-col .act-bar.resp .rbtn.art{flex:0 0 auto!important;width:min(42vw,170px)!important;min-width:0!important;height:auto!important;aspect-ratio:190/66;padding:0 8px 0 calc(min(42vw,170px)*.27)!important;font-size:13px!important}
  body.ingame .me-col .act-bar .pass-btn.art{flex:0 0 auto!important;width:min(40vw,160px)!important;height:auto!important;aspect-ratio:190/66}
  body.ingame .decl-bar .cast-btn.true,body.ingame .decl-bar .cast-btn.false{flex:0 0 auto!important;width:min(40vw,160px)!important;min-width:0!important;height:auto!important;aspect-ratio:190/66;padding:0 8px 0 calc(min(40vw,160px)*.3)!important}
  /* 相手の手札：中身が分かっているカードは、となりのカードに隠さない */
  body.ingame .foes .ohand .card.oh:not(.sleeve-card) + .card.oh,body.ingame .foes .ohand .card.oh.hintcard + .card.oh{margin-left:calc(var(--cw)*-.06)!important}
}
/* 上のバー：幅の狭いスマホでは「ルール」をしまって（ログの中にある）、ボタンどうしの間をあける */
@media (max-width:480px){
  body.ingame .topbar .wide-only{display:none!important}
  body.ingame .topbar .hstats{gap:6px!important}
}
/* ===== スマホ横向き：はみ出し・小さすぎるカードの直し =====
   ・iPhoneの横向きは左右にノッチや角の丸みがあるので、その分だけ内側に寄せる（safe-area）
   ・自分の席は余白が0になっていて、顔が枠の左にはみ出していた
   ・カードを大きく：手札は高さの17%、相手の手札もカードの絵が分かる大きさに */
@media (max-height:500px){
  :root{--cw:min(17vh,9vw)}
  body.ingame .table{padding-left:max(8px,env(safe-area-inset-left,0px))!important;padding-right:max(8px,env(safe-area-inset-right,0px))!important}
  body.ingame .seat.mine{padding:6px 12px 14px 8px!important;gap:8px!important;box-sizing:border-box}
  body.ingame .seat.mine .portrait{flex:none;margin:0!important}
  body.ingame .me-col .act-bar{right:max(10px,calc(env(safe-area-inset-right,0px) + 6px))!important;bottom:max(8px,env(safe-area-inset-bottom,0px))!important}
  body.ingame .mine .decl-bar{right:max(10px,calc(env(safe-area-inset-right,0px) + 6px))!important}
  body.ingame .piles{left:max(8px,env(safe-area-inset-left,0px))!important}
  body.ingame .mine .hand-row{padding-right:calc(138px + env(safe-area-inset-right,0px))!important;padding-top:10px!important}
  body.ingame .hand-row .card .c-name{font-size:calc(var(--cw)*.13)}
  body.ingame .foes .ohand .card.oh{width:calc(var(--cw)*.62)!important;min-height:calc(var(--cw)*.86)!important;height:calc(var(--cw)*.86)}
  body.ingame .foes .ohand .card.oh + .card.oh{margin-left:calc(var(--cw)*-.34)!important}
  body.ingame .foes .ohand .card.oh .c-name{font-size:8px!important}
  /* 中身が分かっているカード（表向き・種類だけ見えるカード）は、となりのカードに隠さない */
  body.ingame .foes .ohand .card.oh:not(.sleeve-card) + .card.oh,body.ingame .foes .ohand .card.oh.hintcard + .card.oh{margin-left:calc(var(--cw)*-.08)!important}
  /* 応答で1回押したシールド：浮き上がりは控えめにして、上の端が欠けないように */
  body.ingame [data-hand] .card.resp-ok.armed{transform:translateY(-8px) scale(1.04)!important}
  /* 上のバーは低く（ステージ名の札を小さく）、場の高さを空ける */
  body.ingame .topbar .pill.stage{--sw:96px!important}
  body.ingame .topbar .pill.stage small{display:none!important}
  body.ingame .topbar .pill.stage b{font-size:11px!important}
  /* 相手が2人までなら、手札は席の右に並べて（縦に積まない）、真ん中の場を広くとる */
  body.ingame .foes:is([style*="--nf:1"],[style*="--nf:2"]) .foe{flex-direction:row!important;align-items:center!important;gap:6px!important}
  body.ingame .foes:is([style*="--nf:1"],[style*="--nf:2"]){gap:18px!important}
  /* 勝利・敗北：文字の絵は高さに合わせて小さくし、立ち絵と合わせて画面に収める */
  .result-stand.center .rs-word.top{width:auto!important;height:24vh!important;max-width:80vw;margin-bottom:-1vh!important}
  .result-stand.center .rs-col .rs-fig .stand{height:66vh!important}
  .result-stand.center .rs-col{justify-content:flex-end;padding-bottom:0}
}
/* ===== 絶対零度の書で凍ったカード：青白く曇らせ、右上に氷の印と残りターン ===== */
.card.locked,[data-hand] .card.locked:disabled{opacity:1!important;filter:grayscale(.55) brightness(.75) sepia(.25) hue-rotate(170deg)!important;box-shadow:0 0 0 2px #bfe6ff,0 0 14px rgba(150,210,255,.7)!important}
.card.locked::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(200,235,255,.45),rgba(120,180,230,.15) 45%,rgba(200,235,255,.35));box-shadow:inset 0 0 0 2px rgba(190,230,255,.8);pointer-events:none;z-index:3}
.card .c-lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;display:flex;align-items:center;gap:2px;padding:2px 7px;border-radius:10px;background:rgba(20,60,110,.92);border:1px solid #bfe6ff;color:#e6f6ff;font-size:13px;font-weight:700;line-height:1.2;box-shadow:0 0 10px rgba(150,210,255,.8)}
.card .c-lock svg{width:14px;height:14px}
.card.mini .c-lock{font-size:10px;padding:1px 4px}
.card.mini .c-lock svg{width:9px;height:9px}
/* ===== ルール説明：枠の中だけをスクロールし（文字が枠の上にはみ出さない）、「閉じる」は枠の下にいつも出す。文章は左揃え ===== */
.overlay:has(.rules-dlg){align-items:center!important;overflow:hidden!important}
.overlay .dialog.rules-dlg{display:flex!important;flex-direction:column;align-items:stretch!important;text-align:left!important;width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:hidden!important;padding:30px 30px 18px!important;gap:0!important;box-sizing:border-box}
.rules-dlg h2{text-align:center;margin:0 0 10px;flex:none}
.rules-dlg .rules-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 6px 6px 2px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 10px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(180deg,transparent,#000 10px,#000 calc(100% - 14px),transparent)}
.rules-dlg section{margin:0 0 14px}
.rules-dlg h3{font-size:15px;margin:0 0 4px;color:var(--gold,#ffd27a);text-align:left}
.rules-dlg p{margin:0;line-height:1.7;text-align:left;text-wrap:pretty}
.rules-dlg .rules-dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:6px 0 0;line-height:1.6}
.rules-dlg .rules-dl dt{font-weight:800;white-space:nowrap}
.rules-dlg .rules-dl dt.gold{color:#ffd27a}.rules-dlg .rules-dl dt.purple{color:#d7b4ff}
.rules-dlg .rules-dl dd{margin:0}
.rules-dlg .rules-tip{margin-top:4px;font-size:12.5px}
.rules-dlg .rules-foot{flex:none;display:flex;justify-content:center;padding-top:12px;border-top:1px solid rgba(255,215,140,.18);margin-top:4px}
@media (max-width:760px){.overlay .dialog.rules-dlg{padding:26px 20px 14px!important}.rules-dlg p,.rules-dlg .rules-dl{font-size:14px}}

/* ===== ダメージの揺れ：顔のアイコンが、ダメージの大きさで3段階にぐらぐら揺れる（3段階目は画面全体も揺れる・client.js） ===== */
.seat.shake-1 .portrait{animation:shake1 .42s ease-out}
.seat.shake-2 .portrait{animation:shake2 .6s ease-out}
.seat.shake-3 .portrait{animation:shake3 .85s ease-out}
@keyframes shake1{0%,100%{transform:none}20%{transform:translateX(-3px) rotate(-3deg)}40%{transform:translateX(3px) rotate(3deg)}60%{transform:translateX(-2px) rotate(-1.5deg)}80%{transform:translateX(1px)}}
@keyframes shake2{0%,100%{transform:none}12%{transform:translate(-7px,2px) rotate(-8deg) scale(1.05)}28%{transform:translate(7px,-2px) rotate(7deg)}44%{transform:translate(-5px,1px) rotate(-5deg)}60%{transform:translate(4px,0) rotate(3deg)}78%{transform:translate(-2px,0) rotate(-1deg)}}
@keyframes shake3{0%,100%{transform:none;filter:none}8%{transform:translate(-12px,4px) rotate(-14deg) scale(1.12);filter:brightness(1.8) saturate(1.4)}20%{transform:translate(12px,-5px) rotate(12deg) scale(1.08)}32%{transform:translate(-10px,3px) rotate(-10deg)}46%{transform:translate(8px,-2px) rotate(7deg)}60%{transform:translate(-6px,2px) rotate(-4deg);filter:none}76%{transform:translate(3px,0) rotate(2deg)}88%{transform:translate(-1px,0)}}
html.calm .seat[class*="shake-"] .portrait{animation:none}

/* ===== カットインの立ち絵：絵の枠を絵と同じ縦横比にして、四辺のフェードが絵の端にかかるようにする ===== */
.cutin .ci-fig{height:min(100vh,75vw)!important;width:auto!important;max-width:none!important;top:auto!important;bottom:0!important}
.ultin .ui-fig{height:min(104vh,138vw)!important;width:auto!important;max-width:none!important}

/* ===== PC：相手が4〜5人のとき、席の札は中身の幅に（横に引き伸ばさない） ===== */
@media (min-width:761px) and (min-height:501px){
  body.ingame .foes:is([style*="--nf:4"],[style*="--nf:5"]){justify-content:space-evenly!important}
  body.ingame .foes:is([style*="--nf:4"],[style*="--nf:5"]) .foe{flex:0 0 auto!important;width:auto!important;min-width:0!important}
  body.ingame .foes:is([style*="--nf:4"],[style*="--nf:5"]) .seat{width:auto!important;min-width:0!important}
}

/* ===== 奥義の演出の部品（絵が無いときに、光と図形で描く・fx.js の ultFx） ===== */
.fx.ultov{position:fixed!important;inset:0!important;left:0!important;top:0!important;width:100vw!important;height:100vh!important;margin:0!important;border-radius:0!important;transform:none!important;pointer-events:none;z-index:60}
.fx.ultov.crimson{background:radial-gradient(70% 70% at 50% 50%,rgba(255,80,20,.25),rgba(120,0,0,.75))}
.fx.ultov.flash{background:#fff2d0}
.fx.ultov.tide{background:linear-gradient(180deg,rgba(40,140,255,.15),rgba(10,60,160,.55))}
.fx.ultov.dusk{background:radial-gradient(60% 60% at 50% 40%,rgba(80,20,110,.2),rgba(8,0,20,.92))}
.fx.ultov.frost{background:radial-gradient(75% 75% at 50% 50%,transparent 40%,rgba(200,240,255,.85));box-shadow:inset 0 0 120px rgba(220,248,255,.9)}
.fx.ultov.abyss{background:radial-gradient(60% 60% at 50% 55%,rgba(90,20,140,.25),rgba(10,0,20,.85))}
.fx.ultring{border-radius:50%;border:2px solid var(--c);box-shadow:0 0 18px var(--c),inset 0 0 18px var(--c)}
.fx.ultring.star{border-style:dashed}
.fx.ultring.abyss{background:radial-gradient(closest-side,rgba(10,0,20,.95),rgba(120,40,200,.5) 70%,transparent);border-width:3px}
.fx.ultmeteor{border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff6c8,#ffb03a 30%,#ff3b1a 60%,transparent 72%);box-shadow:0 0 60px #ff4a1a,0 0 140px #ff2a00}
.fx.ultwave{border-radius:45% 55% 0 0/60% 60% 0 0;background:linear-gradient(180deg,rgba(220,245,255,.95),rgba(80,170,255,.9) 25%,rgba(20,80,200,.85));box-shadow:0 -10px 40px rgba(180,230,255,.8)}
.fx.ultpillar{border-radius:60px 60px 10px 10px;background:linear-gradient(0deg,rgba(124,255,154,.0),rgba(124,255,154,.85) 30%,rgba(230,255,200,.95));box-shadow:0 0 50px #7cff9a;transform-origin:50% 100%}
.fx.ultmoon{border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff0fb,#ff9fd8 45%,#a24aff 75%,transparent 78%);box-shadow:0 0 80px #e07bff}
.fx.ultblade{border-radius:50% 50% 2px 2px;background:linear-gradient(0deg,#ff3b1a,#ffd24a 60%,#fffbe8);box-shadow:0 0 14px #ff8a2a}
.fx.ultcrystal{clip-path:polygon(50% 0,92% 25%,92% 75%,50% 100%,8% 75%,8% 25%);background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(170,225,255,.7) 45%,rgba(90,170,240,.6));box-shadow:0 0 40px #bfe9ff}
.fx.ultchain{border-radius:6px;background:repeating-linear-gradient(90deg,#2a1440 0 10px,#7a4aa8 10px 14px,#2a1440 14px 22px);box-shadow:0 0 12px #a65cff}
.fx.spark.star{clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.fx.spark.leaf{border-radius:0 80% 0 80%}
.fx.sprite.ultfx{-webkit-mask-image:none;mask-image:none;z-index:61}

/* === ノワール「宵闇の帳」を赤黒く禍々しく === */
.fx.ultov.dusk{background:radial-gradient(60% 60% at 50% 35%,rgba(140,0,10,.3),rgba(40,0,4,.75) 55%,rgba(5,0,0,.94))}
.fx.ultmoon{background:radial-gradient(circle at 38% 38%,#ff6a50,#b8101e 40%,#4a0006 72%,transparent 78%);box-shadow:0 0 70px #9a0010,0 0 160px rgba(80,0,0,.8)}
.fx.sprite.ultfx[data-n^="ult4-"]{filter:drop-shadow(0 0 22px rgba(150,0,10,.55))}

/* === ルールの小窓：見出しを枠の線より下へ、本文の最終行を薄くしない === */
.overlay .dialog.rules-dlg{padding:48px 34px 18px!important}
.rules-dlg h2{margin:0 0 8px}
.rules-dlg .rules-body{-webkit-mask-image:none;mask-image:none;padding-bottom:2px}
.rules-dlg section{margin:0 0 10px}
@media (max-width:760px){.overlay .dialog.rules-dlg{padding:44px 24px 14px!important}}
@media (max-height:500px){.overlay .dialog.rules-dlg{padding:40px 30px 12px!important}}

/* === トップのキャラ選び：名前を改行しない。枠は全キャラ同じ幅で、4文字の名前が入る幅を下限にする（端末の文字が大きくても枠ごと広がる） === */
.avpick{font-size:11px;grid-template-columns:repeat(8,minmax(4.6em,1fr));gap:8px 6px;justify-content:center}
@media (max-width:560px){.avpick{grid-template-columns:repeat(4,minmax(4.6em,1fr))}}
.avopt{font-size:1em}

/* === トップのキャラ選び（大きな立ち絵の右の欄）：欄の幅は全キャラ共通、名前は1行（4文字まで入る大きさ） === */
@media (min-width:761px){
  .sel-show{min-height:0}
  .sel-show .ss-info{flex:0 0 200px;width:200px;padding-right:18px;box-sizing:border-box;margin-left:-40px}
  /* 立ち絵は欄の下に40px もぐらせて大きく出す。枠の高さは立ち絵に合わせる（上に空きを作らない） */
  .sel-show .stand-big{flex:0 0 auto;width:calc(100% - 180px - 2%);max-width:none;height:auto;aspect-ratio:683/1024;max-height:min(60vh,540px)}
  .ss-info b{white-space:nowrap;font-size:clamp(28px,3.4vw,40px)}
}
@media (min-width:761px) and (max-height:500px){.sel-show .stand-big{width:auto;max-width:calc(100% - 180px - 2%)}}
@media (max-width:760px){.ss-info b{white-space:nowrap}}
.avopt > span:last-child{white-space:nowrap;line-height:1.5}
/* ===================================================================
   仕上げ（2026-10-31）：素の箱だった字幕・案内を金の枠に、真偽の判子、手札の沈め方、
   応答ボタンのはみ出し、顔に重なる印、手番の表示
   =================================================================== */
/* 字幕（〜の詠唱を公開…／真詠唱！／〜を召喚した）と応答の案内：小窓と同じ金と紫の枠で囲む */
.rv-cap:not(:empty),
.resp-side .prompt.small,
.resp-side .resp-hint,
.arena .warn{
  border-style:solid!important;border-color:transparent!important;border-width:1px!important;border-radius:0!important;
  border-image:url('/art/ui/frame-dialog-clean.webp?v=1') 142 / 16px stretch!important;
  background:linear-gradient(180deg,rgba(36,24,64,.95),rgba(16,10,34,.96)) center/calc(100% - 6px) calc(100% - 6px) no-repeat!important;
  box-shadow:0 8px 22px rgba(0,0,0,.55)!important;padding:8px 22px!important;color:#f3ecff!important;text-shadow:0 1px 3px #000!important}
.resp-side .resp-hint{padding:6px 18px!important;color:#ffe19a!important}
/* 色つきの字幕は、塗りつぶさずに枠の中を色で染め、文字を光らせる */
.rv-cap.gold:not(:empty){background:radial-gradient(ellipse at 50% 50%,rgba(150,105,20,.55),rgba(40,26,6,.96) 75%) center/calc(100% - 6px) calc(100% - 6px) no-repeat!important;
  color:#ffe9a8!important;text-shadow:0 0 12px rgba(255,200,80,.85),0 1px 2px #000!important;box-shadow:0 0 26px rgba(255,200,80,.35),0 8px 22px rgba(0,0,0,.55)!important}
.rv-cap.purple:not(:empty){background:radial-gradient(ellipse at 50% 50%,rgba(110,50,200,.6),rgba(26,10,52,.96) 75%) center/calc(100% - 6px) calc(100% - 6px) no-repeat!important;
  color:#ecdcff!important;text-shadow:0 0 12px rgba(180,120,255,.9),0 1px 2px #000!important;box-shadow:0 0 26px rgba(160,90,255,.35),0 8px 22px rgba(0,0,0,.55)!important}
.rv-cap.red:not(:empty){background:radial-gradient(ellipse at 50% 50%,rgba(170,30,50,.6),rgba(46,6,14,.96) 75%) center/calc(100% - 6px) calc(100% - 6px) no-repeat!important;
  color:#ffd9de!important;text-shadow:0 0 12px rgba(255,80,100,.85),0 1px 2px #000!important}
.rv-cap.green:not(:empty){background:radial-gradient(ellipse at 50% 50%,rgba(30,130,80,.6),rgba(6,36,22,.96) 75%) center/calc(100% - 6px) calc(100% - 6px) no-repeat!important;
  color:#dcffe9!important;text-shadow:0 0 12px rgba(90,230,150,.8),0 1px 2px #000!important}
body.ingame .rv-cap{font-size:16px}
@media (max-width:760px), (max-height:500px){
  .rv-cap:not(:empty),.resp-side .prompt.small,.resp-side .resp-hint,.arena .warn{border-image-width:12px!important;padding:5px 14px!important}
  body.ingame .arena .rv-cap{font-size:13px}
}

/* 真偽の判子：カードの上に大きく押し付け、まわりが一瞬暗くなる */
.verdict-big{position:fixed;inset:0;z-index:84;pointer-events:none}
.verdict-big .vb-dim{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 15%,rgba(0,0,0,.6) 70%);animation:vbDim 1.3s ease-out both}
.verdict-big.true .vb-dim{background:radial-gradient(circle at 50% 50%,rgba(255,210,100,.18) 10%,rgba(20,12,0,.6) 70%)}
.verdict-big.false .vb-dim{background:radial-gradient(circle at 50% 50%,rgba(150,80,255,.16) 10%,rgba(10,0,24,.65) 70%)}
.vb-seal{position:absolute;width:min(220px,46vw);aspect-ratio:1;margin:calc(min(220px,46vw)/-2) 0 0 calc(min(220px,46vw)/-2);display:grid;place-items:center;animation:vbSlam 1.3s cubic-bezier(.2,.9,.3,1) both}
.vb-seal i{position:absolute;inset:0;background:center/contain no-repeat}
.verdict-big.true .vb-seal i{background-image:url('/art/ui/seal-true.webp?v=1');filter:drop-shadow(0 0 30px rgba(255,200,80,.9))}
.verdict-big.false .vb-seal i{background-image:url('/art/ui/seal-false.webp?v=1');filter:drop-shadow(0 0 30px rgba(170,90,255,.9))}
.vb-seal b{position:absolute;top:100%;left:50%;transform:translate(-50%,-30%);white-space:nowrap;font-family:var(--f-display);font-weight:900;font-size:clamp(30px,5vw,54px);letter-spacing:.12em;-webkit-text-stroke:1.5px rgba(0,0,0,.55)}
.verdict-big.true .vb-seal b{color:#ffe7a0;text-shadow:0 0 22px rgba(255,190,60,.95),0 4px 0 rgba(70,40,0,.8)}
.verdict-big.false .vb-seal b{color:#e6d2ff;text-shadow:0 0 22px rgba(160,80,255,.95),0 4px 0 rgba(30,0,60,.8)}
@keyframes vbSlam{0%{transform:scale(2.6) rotate(-14deg);opacity:0}14%{transform:scale(.92) rotate(3deg);opacity:1}22%{transform:scale(1.04) rotate(0)}30%{transform:scale(1)}78%{transform:scale(1);opacity:1}100%{transform:scale(.55) translate(30%,-40%);opacity:0}}
@keyframes vbDim{0%{opacity:0}12%{opacity:1}70%{opacity:.8}100%{opacity:0}}
html.calm .verdict-big{display:none}

/* 虚詠唱の前ぶれ：カードが不穏に揺らぎ、紫の影がちらつく */
.rv-slot.wavering{animation:waver .16s steps(2) infinite}
.rv-slot.wavering .rv-face.decl .card{box-shadow:0 0 34px rgba(140,60,255,.7),0 0 4px rgba(0,0,0,.9)!important;filter:saturate(.7) brightness(.85) hue-rotate(-12deg)}
@keyframes waver{0%{transform:translate(-2px,0) skewX(-1.5deg)}50%{transform:translate(2px,1px) skewX(1.5deg)}100%{transform:translate(-1px,-1px)}}

/* 応答できない手札：白く透けさせず、暗く沈める */
[data-hand] .card.resp-dim{opacity:1!important;filter:brightness(.42) saturate(.55)!important}

/* PC：応答のボタンが画面の右からはみ出さないよう、縦に並べる */
@media (min-width:761px) and (min-height:501px) and (max-width:1300px){
  body.ingame .me-col .act-bar.resp{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px}
  body.ingame .me-col .act-bar.resp .rbtn.art{min-width:150px}
}

/* 狙いの印は顔を隠さないよう、真ん中を抜いた輪にして外側に回す */
.seat.targeted .portrait::after{inset:-38%!important;
  -webkit-mask-image:radial-gradient(circle,transparent 36%,#000 44%);mask-image:radial-gradient(circle,transparent 36%,#000 44%)}
/* 使い魔は顔の上を回らず、肖像の右上に小さく控える */
.servant-wrap{left:auto!important;right:auto!important;top:-14px!important;margin:0!important;width:58px!important;height:58px!important;animation:hover 3s ease-in-out infinite!important}
.seat .servant-wrap{left:-30px!important;top:8px!important}
@media (max-width:760px), (max-height:500px){.servant-wrap,.seat .servant-wrap{width:42px!important;height:42px!important;left:-22px!important;top:2px!important}}

/* 手番の表示：小さな顔と文字だけだったものを、席と同じ金の名前板にのせる */
.thinking{position:relative;padding:8px 22px 8px 12px;gap:12px;
  border-style:solid;border-color:transparent;border-width:1px;border-image:url('/art/ui/frame-dialog-clean.webp?v=1') 142 / 16px stretch;
  background:linear-gradient(180deg,rgba(36,24,64,.92),rgba(16,10,34,.94)) center/calc(100% - 6px) calc(100% - 6px) no-repeat;box-shadow:0 8px 22px rgba(0,0,0,.5)}
.thinking .th-av{box-shadow:0 0 0 2px #e6c27a,0 0 0 4px rgba(40,20,70,.9),0 0 22px rgba(255,200,90,.45)!important}
.thinking .th-nm{font-family:var(--f-display);font-size:17px;color:#ffe7a8;letter-spacing:.06em}
/* 応答・回復・魔道具の絵（art/respfx）：四辺をぼかさず、そのまま重ねる */
.fx.sprite.respfx{-webkit-mask-image:none;mask-image:none;z-index:60;filter:drop-shadow(0 0 14px rgba(255,255,255,.2))}
/* 押せない手札も同じく、白く透けさせず暗く沈める */
[data-hand] button.card:disabled:not(.locked){opacity:1!important;filter:brightness(.42) saturate(.55)!important}
/* 光の柱と呪いの煙は、上の端が絵の外で切れないよう、上へ向かって溶かす */
.fx.sprite.respfx[data-n="heal-pillar"],.fx.sprite.respfx[data-n="curse-smoke"]{-webkit-mask-image:linear-gradient(0deg,#000 60%,transparent);mask-image:linear-gradient(0deg,#000 60%,transparent)}
.fx.sprite.respfx[data-n="heal-pillar"]{mix-blend-mode:screen}

/* ===== 相手の手札：表向き（中身が知られた）カードが文字の分だけ高くなり、同じ列の裏向きカードまで縦に伸びていたのを止める ===== */
.ohand{align-items:flex-start}
.ohand .card.oh{height:0!important;overflow:hidden} /* 高さは各画面の min-height で決まる（中身では伸ばさない） */

/* ===== インストール確認の小窓：長い文字が金ボタン中央の飾りと重なるので、飾りを外す ===== */
.install-dlg p{margin:0 0 8px}
.install-dlg .rules-foot{display:flex;gap:10px;justify-content:center}
.install-dlg .btn.primary:not(.art){padding:0 26px;
  background:url('/art/ui/b-primary-l.webp?v=1') left center/auto 100% no-repeat,url('/art/ui/b-primary-r.webp?v=1') right center/auto 100% no-repeat,url('/art/ui/b-primary-m.webp?v=1') calc(var(--cap) - 1px) center/calc(100% - var(--cap)*2 + 2px) 100% no-repeat!important}
/* ===== 試合結果のシェア ===== */
.rs-btns{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.share-ov{z-index:200}
.share-dlg{max-width:min(720px,94vw)}
.share-img{display:block;width:100%;height:auto;border-radius:8px;margin:8px 0;box-shadow:0 6px 24px #0008}
.share-dlg .row{flex-wrap:wrap}
@media (max-height:500px){ .share-dlg{max-width:min(560px,94vw);max-height:94vh;overflow:auto} .share-img{max-height:56vh;width:auto;max-width:100%;margin:6px auto} }
/* ===== ボタンを押したときにへこむ（すべてのボタン・押せる札や席） =====
   transform は位置合わせに使っている要素があるので、重ねがけできる translate / scale で動かす */
button:not(:disabled):active,
[data-a]:not(.overlay):not(.charpick-bg):not(button):active{translate:0 3px;scale:.93;filter:brightness(.72) saturate(1.1);transition-duration:.04s!important}
.btn:not(:disabled):active{box-shadow:inset 0 3px 8px #000a,0 0 0 1px #0006!important}
.seat[data-a]:active,.grave[data-a]:active{scale:.985;translate:0 1px}
/* ===== 連勝の節目でシェアを勧める ===== */
.rs-news{flex-basis:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;animation:rsNewsIn .7s cubic-bezier(.2,1.4,.4,1) both}
.rs-news b{font-family:var(--f-display);font-weight:800;font-size:clamp(20px,3.2vw,30px);letter-spacing:.08em;
  background:linear-gradient(180deg,#fffbe6 0%,#f6dc96 45%,#d6a24a 60%,#8c5a22 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 4px #000) drop-shadow(0 0 14px #e7b85a88);text-shadow:none}
.rs-news span{font-size:13px;color:#f3e3b5;letter-spacing:.1em}
.share-btn.hot{animation:shareGlow 1.6s ease-in-out infinite}
@keyframes shareGlow{0%,100%{filter:drop-shadow(0 0 2px #f6dc9600) brightness(1)}50%{filter:drop-shadow(0 0 10px #f6dc96) drop-shadow(0 0 22px #e7b85a) brightness(1.18)}}
@keyframes rsNewsIn{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@media (max-height:500px){ .rs-news b{font-size:18px} .rs-news span{font-size:11px} }
@media (prefers-reduced-motion:reduce){ .share-btn.hot{animation:none;filter:drop-shadow(0 0 8px #f6dc96)} .rs-news{animation:none} }
.rs-news{flex-basis:100%;min-width:min(520px,92vw);margin:0 0 4px;padding:8px 24px 7px;
  background:linear-gradient(90deg,#0b081600,#0b0816e6 18%,#0b0816e6 82%,#0b081600);
  border-image:linear-gradient(90deg,#f3d58a00,#f3d58a,#f3d58a00) 1;border-width:1px 0;border-style:solid}

/* ===== 配信モード ===== */
.btn.stream-on{color:#ffd9de;filter:drop-shadow(0 0 6px #ff4d6d99)}
.btn.stream-on::first-letter{color:#ff6b81}
/* ===== 観戦：見る人を切り替えて手札を見る ===== */
.hand-row.watch-row{flex-direction:column;align-items:center;gap:6px}
.watch-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center}
.watch-tabs .btn.on{filter:drop-shadow(0 0 6px #f6dc96) brightness(1.15)}
.watch-cards{display:flex;gap:6px;justify-content:center;flex-wrap:nowrap;max-width:100%;overflow-x:auto}.watch-tabs{position:relative;z-index:2;background:#0b0816d9;border:1px solid #d9b46c66;border-radius:999px;padding:3px 10px}
.watch-tabs .muted{color:#f3e3b5;font-size:12px;letter-spacing:.08em}
/* ===== 部屋をさがす・だれでも参加の設定 ===== */
.browse-cta{display:flex;flex-direction:column;align-items:center;gap:4px;margin:6px 0 12px}
.browse-cta .btn{min-width:240px}
.pub-panel{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #d9b46c33}
.pub-toggle{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;border-radius:10px;border:1px solid #d9b46c55;background:#0b081699;color:var(--fg);cursor:pointer;font:inherit}
.pub-toggle b{font-family:var(--f-display);letter-spacing:.06em}
.pub-toggle small{font-size:11px;color:var(--muted)}
.pub-toggle.on{border-color:#f3d58a;background:linear-gradient(180deg,#3a2410cc,#120a04cc);box-shadow:0 0 14px #e7b85a55}
.pub-toggle.on b{color:#f6dc96}
.pub-sel{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pub-info{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;margin:8px 0 0}
.tag.concept{border:1px solid currentColor;background:#0b081699}
.tag.c-casual{color:#9fd3ff}.tag.c-beginner{color:#9be3a6}.tag.c-serious{color:#ff8c8c}.tag.c-chill{color:#d8b6ff}.tag.c-stream{color:#ffb86b}
.browse .browse-bar{justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.browse .chips{display:flex;gap:6px;flex-wrap:wrap}
.browse .chip.on{filter:drop-shadow(0 0 6px #f6dc96) brightness(1.15)}
.room-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.room-card{display:grid;grid-template-columns:minmax(120px,170px) 1fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid #d9b46c44;border-radius:12px;background:linear-gradient(180deg,#1a1230cc,#0b0816cc)}
.room-card.dim{opacity:.72}
.rc-host{display:flex;align-items:center;gap:8px;min-width:0}
.rc-host .avatar{width:44px;height:44px;flex:none;border-radius:50%;box-shadow:0 0 0 2px #d9b46c88}
.rc-host b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-host small{color:var(--muted);font-size:11px}
.rc-tags{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.rc-rule{font-size:12px;color:#cfc6e6}
.rc-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.rc-count{font-size:12px;color:var(--muted);text-align:right}
.rc-count b{font-size:20px;color:var(--fg);font-family:var(--f-display)}
.rc-count small{display:block;font-size:10px}
.rs-state{font-size:11px;padding:1px 8px;border-radius:999px}
.rs-state.open{background:#2e6b3a;color:#d9ffe0}.rs-state.full{background:#5a2a2a;color:#ffd9d9}.rs-state.play{background:#3a3a5a;color:#dcdcff}
.browse-empty{text-align:center;padding:18px 0}
@media (max-width:760px){
  .room-card{grid-template-columns:1fr auto;grid-template-areas:"host side" "main main"}
  .rc-host{grid-area:host}.rc-side{grid-area:side}.rc-main{grid-area:main}
  .pub-sel{grid-template-columns:1fr}
}
/* ===== 席のプレートの幅を手札の枚数で変えない（相手の手札が増えると席が横に伸びていた） ===== */
@media (min-width:761px) and (min-height:501px){
  .foes:not([style*="--nf:4"]):not([style*="--nf:5"]) .foe .seat{width:auto!important;align-self:center}
}
@media (max-height:500px){
  body.ingame .allies .ally-box .seat{width:auto!important;align-self:center}
}

/* ===== 募集のしかた（作り直し）：描いたボタンを並べて選ぶ ===== */
.pub-panel{gap:6px;margin-top:12px;padding-top:12px;border-top:0;position:relative}
.pub-panel::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,#d9b46c00,#d9b46c,#d9b46c00)}
.pub-head{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:6px;font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:.14em;color:#e9cf8f}
.pub-head::before,.pub-head::after{content:"";flex:0 1 70px;height:1px;background:linear-gradient(90deg,#d9b46c00,#d9b46c)}
.pub-head::after{background:linear-gradient(90deg,#d9b46c,#d9b46c00)}
.pub-seg,.pub-nums,.pub-concepts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pub-seg .btn{min-width:150px}
.pub-nums .btn.primary,.pub-concepts .btn.primary{--bh:34px!important}
.pub-nums .btn{min-width:56px!important}
.pub-note{margin:2px 0 0;text-align:center;font-size:12px;color:#cfc6e6}
.pub-note b{color:#f6dc96;font-weight:700}
.tag.c-series{color:#7fe0d6}.tag.c-quick{color:#ffe07a}
@media (max-width:760px),(max-height:500px){ .pub-seg .btn{min-width:120px} .pub-concepts .btn{font-size:11px} }