/* preview_panel_design.html の12・13・17・33・03をゲームへ適用。 */
.panelDesignChoices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.panelDesignChoice{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-width:0; padding:15px 7px 11px; border:2px solid #e3cfdf; border-radius:15px; background:#fffdf9; cursor:pointer; transition:background .15s,border-color .15s; }
.panelDesignChoice:hover{ border-color:#caa0be; background:#fff6fb; }
.panelDesignChoice:has(input:checked){ border-color:#bb739f; background:#f9e9f3; box-shadow:inset 0 0 0 1px #bb739f; }
.panelDesignChoice:has(input:focus-visible){ outline:3px solid #995dae; outline-offset:3px; }
.panelDesignChoice input{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.panelDesignName{ width:100%; color:#805876; font-size:18px; line-height:1.4; font-weight:900; text-align:center; overflow-wrap:anywhere; }
.panelDesignSample{ display:flex; gap:5px; pointer-events:none; }
.panelSampleTile{ --panel-size:40px; position:relative; isolation:isolate; display:grid; place-items:center; width:40px; height:40px; border-radius:24%; font-style:normal; }
.panelSampleTile > span{ position:relative; z-index:2; font:400 26px/1 'Kotoba Mochiy','Mochiy Pop One',sans-serif; color:#fff; -webkit-text-stroke:3px var(--tile-stroke,#a8641e); paint-order:stroke fill; text-shadow:0 3px 1px #0003; }

/* Androidなどのタップ時に盤面全体へ出るブラウザの強調表示を消す。パネルの選択色は維持する。 */
#board{ -webkit-tap-highlight-color:transparent; }

/* 所有色は素材の共通変数へ渡す。標準デザインも含め色分けは常に有効。 */
#board .cell{ --panel-base:var(--owner-color,var(--tile)); }
#board .cell.lite{ --panel-base:var(--owner-color,var(--tile-lite)); }
#board .cell.f-s{ --panel-base:var(--c-str); }
#board .cell.f-l{ --panel-base:var(--c-lis); }
#board .cell.sel{ --panel-base:var(--sel); }
#board[data-panel-design="current"] .cell{ background:var(--panel-base); }
#board[data-panel-design]:not([data-panel-design="current"]) .cell{ background:transparent; box-shadow:none; isolation:isolate; }
#board[data-panel-design]:not([data-panel-design="current"]) .cell.sel{ background:transparent !important; }
#board[data-panel-design]:not([data-panel-design="current"]) .cell > span{ position:relative; z-index:2; }

/* 素材専用の面に疑似要素を置き、重複選択の「✕」と「済」を維持する。 */
.panelSurface{ --panel-px:calc(var(--panel-size,var(--cell,90px)) / 90); --mat-base:var(--panel-base,var(--tile,#f9c440)); --mat-lite:color-mix(in srgb,var(--mat-base) 45%,white); --mat-shade:color-mix(in srgb,var(--mat-base) 78%,#6f430e); position:absolute; inset:0; z-index:0; display:block; border-radius:inherit; background:var(--mat-base); box-shadow:inset 0 -5px 0 #783c0029,0 4px 8px #8c5a8b29; pointer-events:none; }
.panelSurface::before,.panelSurface::after{ content:''; position:absolute; z-index:1; pointer-events:none; }
#board[data-panel-design="current"] .panelSurface{ display:none; }
#board .cell.ng .panelSurface{ visibility:hidden; }

[data-panel-design="rubber"] .panelSurface{
  background:linear-gradient(145deg,color-mix(in srgb,var(--mat-base) 76%,white),var(--mat-base) 65%);
  box-shadow:inset calc(var(--panel-px) * 1) calc(var(--panel-px) * 2) calc(var(--panel-px) * 2) #ffffff59,inset calc(var(--panel-px) * -1) calc(var(--panel-px) * -5) 0 color-mix(in srgb,var(--mat-shade) 70%,var(--mat-base)),0 calc(var(--panel-px) * 5) calc(var(--panel-px) * 4) #71583926;
}
[data-panel-design="rubber"] .panelSurface::before{ inset:calc(var(--panel-px) * 7); border:calc(var(--panel-px) * 2) solid color-mix(in srgb,var(--mat-shade) 35%,transparent); border-bottom-color:#ffffff59; border-radius:19%; }
[data-panel-design="rubber"] .panelSurface::after{ inset:calc(var(--panel-px) * 11); border-radius:17%; background:radial-gradient(ellipse at top,#ffffff26,transparent 75%); }
[data-panel-design="felt"] .panelSurface{
  background:repeating-linear-gradient(0deg,#ffffff1a 0 calc(var(--panel-px) * 1),transparent calc(var(--panel-px) * 1) calc(var(--panel-px) * 3)),repeating-linear-gradient(90deg,#5b3d2312 0 calc(var(--panel-px) * 1),transparent calc(var(--panel-px) * 1) calc(var(--panel-px) * 3)),linear-gradient(150deg,var(--mat-lite),var(--mat-base) 45%,var(--mat-shade));
  box-shadow:inset calc(var(--panel-px) * 1) calc(var(--panel-px) * 2) calc(var(--panel-px) * 5) #fff6,inset calc(var(--panel-px) * -2) calc(var(--panel-px) * -5) calc(var(--panel-px) * 8) #795a323d,0 calc(var(--panel-px) * 5) calc(var(--panel-px) * 8) #7d615b30;
}
[data-panel-design="felt"] .panelSurface::before{ inset:calc(var(--panel-px) * 7); border:calc(var(--panel-px) * 2) dashed color-mix(in srgb,var(--mat-lite) 85%,white); border-radius:18%; opacity:.9; }
[data-panel-design="felt"] .panelSurface::after{ inset:calc(var(--panel-px) * 2); border-radius:23%; box-shadow:inset 0 0 calc(var(--panel-px) * 4) #fff7; }
[data-panel-design="cotton"] .panelSurface{ background:repeating-linear-gradient(0deg,#fff3 0 calc(var(--panel-px) * 1),transparent calc(var(--panel-px) * 1) calc(var(--panel-px) * 3)),repeating-linear-gradient(90deg,#78552c26 0 calc(var(--panel-px) * 1),transparent calc(var(--panel-px) * 1) calc(var(--panel-px) * 3)),linear-gradient(145deg,var(--mat-lite),var(--mat-base) 70%); box-shadow:inset calc(var(--panel-px) * 2) calc(var(--panel-px) * 3) calc(var(--panel-px) * 7) #fff7,inset calc(var(--panel-px) * -2) calc(var(--panel-px) * -4) calc(var(--panel-px) * 7) #7b5c3238,0 calc(var(--panel-px) * 4) calc(var(--panel-px) * 7) #73543426; }
[data-panel-design="cotton"] .panelSurface::before{ inset:0; border-radius:inherit; background:url("panel-textures/fine.svg") 0 0 / calc(var(--panel-px) * 110) calc(var(--panel-px) * 110); mix-blend-mode:multiply; opacity:.27; }
[data-panel-design="cotton"] .panelSurface::after{ inset:calc(var(--panel-px) * 5); border:calc(var(--panel-px) * 1) dashed #ffffff80; border-radius:20%; }
/* クリアゼリー。保存済み設定を引き継ぐため、内部の識別名 aurora は維持する。 */
[data-panel-design="aurora"] .panelSurface{
  background:linear-gradient(180deg,color-mix(in srgb,var(--mat-lite) 80%,transparent),color-mix(in srgb,var(--mat-base) 87%,transparent) 40%);
}
[data-panel-design="aurora"] .panelSurface::before{ top:calc(var(--panel-px) * 6); left:calc(var(--panel-px) * 9); right:calc(var(--panel-px) * 9); height:calc(var(--panel-px) * 33); border-radius:calc(var(--panel-px) * 14) calc(var(--panel-px) * 14) 50% 50%; background:linear-gradient(#ffffffe6,#ffffff0d); }
[data-panel-design="aurora"] .panelSurface::after{ top:calc(var(--panel-px) * 12); left:calc(var(--panel-px) * 14); width:calc(var(--panel-px) * 14); height:calc(var(--panel-px) * 7); border-radius:50%; background:#fff; opacity:.85; rotate:-24deg; }
[data-panel-design="drawing"] .panelSurface{
  background:color-mix(in srgb,var(--mat-base) 60%,#fffdf4);
  box-shadow:inset 0 calc(var(--panel-px) * 1) 0 #ffffffb3,inset 0 calc(var(--panel-px) * -1) 0 #7b674333,0 calc(var(--panel-px) * 3) 0 color-mix(in srgb,var(--mat-shade) 45%,#e4d9bf),0 calc(var(--panel-px) * 5) calc(var(--panel-px) * 7) #6d5d4326;
}
[data-panel-design="drawing"] .panelSurface::before{ inset:0; border-radius:inherit; background-image:url("panel-textures/fine.svg"); background-size:calc(var(--panel-px) * 128) calc(var(--panel-px) * 128); mix-blend-mode:multiply; opacity:.3; }
[data-panel-design="drawing"] .panelSurface::after{ inset:0; border-radius:inherit; background:url("panel-textures/fibers.svg") 0 0 / calc(var(--panel-px) * 110) calc(var(--panel-px) * 110); opacity:.35; }
#board[data-panel-design="drawing"] .cell:not(.sel):not(.shuf) > span,[data-panel-design="drawing"] .panelSampleTile > span{ text-shadow:0 2px 1px #51412133; }
body.lightMode #board .panelSurface{ box-shadow:inset 0 -4px 0 #783c0029,0 2px 0 #8c5a8b29; }
body.lightMode #board .panelSurface::after{ filter:none; }
@media(prefers-reduced-motion:reduce){ .panelDesignChoice{ transition:none; } }

.panelDesignNotice{ margin:12px 0 0; padding:10px 12px; border-radius:10px; background:#fff4d9; color:#76542e; font-size:15px; line-height:1.6; }
/* 質感の絵はそのまま保持し、動くマスの面だけ一時的に合成対象にする。 */
#board[data-panel-design]:not([data-panel-design="current"]) .cell:is(.jump,.dup,.jig) .panelSurface{ will-change:transform; }