/* Finst's wood, jade and rose identity, in a floating stone arena. */
#arena3d { display:none; }
.view3d {flex-shrink:0;min-height:36px;padding:6px 10px;font-size:11px;border:1px solid var(--line-2);background:var(--panel);color:var(--bone);border-radius:8px;}
.view3d[aria-pressed="true"]{border-color:var(--wood);color:var(--wood-ink);background:linear-gradient(180deg,#2A1F0A,#1A1306);}
/* 黒基調の画面と、夜の闘技場（2026-10、見本画像に合わせた） */
.has-3d {background:var(--ink);}
.has-3d .app {max-width:1040px;gap:10px;}
.has-3d .top {padding:8px 2px 14px;}
.has-3d .brand-img {height:38px;}
.has-3d #arena3d {display:block;position:relative;order:3;height:clamp(310px,49svh,550px);width:100%;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#0A0A0C;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
#arena3d canvas {position:absolute;inset:0;display:block;width:100%;height:100%;}
.arena-overline {position:absolute;top:16px;left:20px;color:var(--wood-ink);font:11px 'Zen Kaku Gothic New',sans-serif;letter-spacing:.23em;pointer-events:none;z-index:1;}
.arena-caption {position:absolute;top:14px;right:18px;color:var(--dim);font-size:11px;z-index:1;}
.arena-caption a {color:inherit;text-underline-offset:4px;}
.has-3d .board {padding:12px 18px;border:1px solid var(--line);background:var(--panel);display:flex;align-items:center;gap:18px;border-radius:12px;}
.has-3d .board[data-active="true"] {border-color:color-mix(in srgb,var(--c) 70%,var(--line));background:color-mix(in srgb,var(--c) 6%,var(--panel));box-shadow:0 0 18px color-mix(in srgb,var(--c) 14%,transparent);}
.has-3d .board-head {margin:0;min-width:150px;flex-wrap:wrap;gap:8px;}
.has-3d .ptag {color:var(--c);}
.has-3d .board .hands {display:none;}
.has-3d .board .hand-row {margin:0 0 0 auto;flex:1;justify-content:flex-end;min-height:48px;}
.has-3d .board .card {max-width:185px;min-height:70px;padding:10px 14px;background:var(--raise);border:1px solid var(--line-2);border-radius:8px;box-shadow:var(--raise-shadow);}
.has-3d .board .card .cname {font-size:17px;}
.has-3d .board .card .cnum {color:var(--dim);}
.has-3d .board .card .ctiming {color:var(--dim);font-size:10px;}
.has-3d .board .card:disabled {opacity:.52;}
.has-3d .board .card.back {flex:0 0 31px;height:43px;min-height:43px;padding:0;border-color:var(--line-2);background:repeating-linear-gradient(45deg,var(--well),var(--well) 4px,var(--line) 4px,var(--line) 5px);}
.has-3d .board .back-count {color:var(--dim);}
.has-3d .mid {order:5;min-height:62px;background:transparent;padding:0 8px;}
.has-3d .mid .cross {width:31px;height:31px;flex-shrink:0;}
.has-3d .log {font-size:15px;}
.has-3d .log .sub {color:var(--dim);font-size:12px;}
.has-3d .bar {padding:0 0 10px;}
.has-3d .bar button {min-height:44px;}
.has-3d .step-bar,.has-3d .panel {border-color:var(--line-2);background:var(--panel);}
.has-3d .step-bar.open {position:sticky;bottom:10px;z-index:9;box-shadow:0 10px 35px rgba(0,0,0,.6);}
/* 3D表示では、カード名の帯を3D盤の下に出して、盤面の演出を隠さない。
   帯はカードの色のまま（以前の暗い帯は、暗い文字と重なって名前が読めなかった） */
.has-3d .fx-band {top:28%;padding:13px 22px;}
/* 暗転は3D盤を中心にかけて、盤上の光を浮かび上がらせる */
.has-3d .fx-back {background:radial-gradient(ellipse at 50% 32%, color-mix(in srgb, var(--fx-c) 34%, transparent) 0%, transparent 56%), rgba(5,5,7,.42);}
.has-3d .fx-name {font-size:clamp(26px,5vw,48px);}
.arena-labels {position:absolute;inset:0;pointer-events:none;}
.arena-hand {position:absolute;transform:translate(-50%,-15%);pointer-events:auto;display:grid;grid-template-columns:auto auto;gap:0 8px;align-items:center;min-width:104px;min-height:50px;padding:5px 10px;border:1px solid var(--line-2);background:rgba(18,18,21,.92);color:var(--bone);border-radius:9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 14px rgba(0,0,0,.6);font-family:'Zen Kaku Gothic New',system-ui,sans-serif;cursor:pointer;}
.arena-hand span {font-size:11px;color:var(--dim);}
.arena-hand b {font-family:'Dela Gothic One',sans-serif;font-size:22px;line-height:1.2;color:var(--hand-color);}
.arena-hand small {grid-column:1/-1;font-size:9px;color:var(--dim);}
.arena-hand:disabled {cursor:default;opacity:.72;}
.arena-hand[data-selected="true"] {border:2px solid var(--hand-color);box-shadow:0 0 20px color-mix(in srgb,var(--hand-color) 35%,transparent);}
.arena-hand[data-target="true"] {border-color:var(--hand-color);background:color-mix(in srgb,var(--hand-color) 16%,#121215);}
.arena-hand:not(:disabled):hover {background:color-mix(in srgb,var(--hand-color) 12%,#121215);border-color:var(--hand-color);}
.arena-hand:focus-visible {outline:3px solid var(--bone);outline-offset:4px;}
.view3d:focus-visible {outline:3px solid var(--bone);outline-offset:4px;}
.lobby-3d-link {display:block;padding:13px;text-align:center;color:var(--wood-ink);border:1.5px solid var(--wood);border-radius:12px;text-decoration:none;background:linear-gradient(180deg,#1A150B,#110E08);font-weight:700;font-size:clamp(13px,4.2vw,16px);letter-spacing:0;white-space:nowrap;box-shadow:0 0 16px rgba(235,170,44,.12);}
@media(min-width:850px){
  .has-3d .app {padding:0 36px 20px;}
  .has-3d .board .hand-row[data-empty="true"] {flex:0 0 auto;}
}
@media(max-width:600px){
  .has-3d {padding:calc(7px + env(safe-area-inset-top)) 9px calc(8px + env(safe-area-inset-bottom));}
  .has-3d .app {gap:7px;}
  .has-3d .top {gap:5px;padding:2px 0 6px;}
  .has-3d .brand-img {height:29px;max-width:132px;object-fit:contain;}
  .has-3d .net-tag {font-size:9px;}
  .has-3d .icon-btn {width:30px;height:32px;font-size:14px;}
  .view3d {padding:4px 7px;font-size:10px;min-height:32px;}
  .has-3d #arena3d {height:clamp(285px,43svh,395px);border-radius:12px;}
  .arena-overline {left:12px;top:12px;font-size:9px;letter-spacing:.17em;}
  .arena-caption {right:12px;top:10px;font-size:10px;}
  .has-3d .board {padding:8px 10px;gap:7px;flex-wrap:wrap;}
  .has-3d .board-head {width:100%;min-width:0;gap:6px;}
  .has-3d .pname {font-size:12px;}
  .has-3d .board .hand-row {width:100%;gap:6px;min-height:25px;}
  .has-3d .board .card {padding:7px 9px;min-height:58px;}
  .has-3d .board .card .cname {font-size:15px;}
  .has-3d .board .card .cnum {font-size:9px;}
  .has-3d .board .card .ctiming {font-size:9px;}
  .has-3d .board .card.back {height:24px;min-height:24px;flex-basis:18px;}
  .has-3d .board .hand-row:has(.back) {position:absolute;right:10px;width:auto;top:6px;}
  .has-3d .board:has(.back) .ptag {margin-left:4px;}
  .arena-hand {min-width:83px;min-height:45px;padding:4px 8px;gap:0 6px;}
  .arena-hand b {font-size:18px;}
  .arena-hand small {font-size:8px;}
  .has-3d .log {font-size:13px;}
  .has-3d .log .sub {font-size:11px;}
  .has-3d .mid {min-height:50px;padding:0 4px;}
}
@media(prefers-reduced-motion:reduce){.arena-hand{transition:none;}}
/* The base game's generic buttons flex; the view switch is a compact toolbar control. */
.view3d {flex:0 0 auto;}
.has-3d .net-tag {flex:1;justify-content:flex-end;color:var(--dim);}

/* Keep the opponent's hand labels in the clear space above the arena. */
.arena-hand[data-side="far"] {transform:translate(-50%,0);}

/* カードを使った瞬間、盤面の上がその色で一瞬光る（arena3d.js の flash が明るさを動かす） */
.arena-flash{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:
    radial-gradient(circle at var(--x,50%) var(--y,50%), var(--c,#fff) 0%, color-mix(in srgb, var(--c,#fff) 40%, transparent) 26%, transparent 62%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c,#fff) 22%, transparent), transparent 80%);
  mix-blend-mode:screen;     /* 黒い盤の上では、光を足す */
  border-radius:inherit;
}
@media (prefers-reduced-motion: reduce){ .arena-flash{display:none;} }