/* Appearance picker: native radios also support Tab and arrow keys. */
#pauseOverlay{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:24px 16px;}
.pause-box{width:min(100%,360px);margin:auto;flex-shrink:0;}
.board-themes{border:0;padding:0;margin:24px 0;min-width:0;}
.board-themes legend{width:100%;font-size:15px;font-weight:900;margin-bottom:12px;}
.board-theme-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.board-theme-option{position:relative;cursor:pointer;min-width:0;}
.board-theme-option input{position:absolute;opacity:0;width:1px;height:1px;}
.board-theme-card{display:flex;flex-direction:column;align-items:center;padding:9px 9px 11px;border:2px solid rgba(198,211,255,.35);
  border-radius:18px;background:rgba(255,255,255,.055);transition:border-color 150ms,background 150ms;}
.board-theme-option input:checked + .board-theme-card{border-color:#b1f4f6;background:rgba(181,244,255,.13);}
.board-theme-option input:focus-visible + .board-theme-card{outline:3px solid #fff;outline-offset:4px;}
.board-theme-preview{position:relative;display:block;width:100%;height:106px;overflow:hidden;border-radius:11px;background:radial-gradient(ellipse at 50% 35%,#4479f2,#3a6adf);}
.preview-glass .board-theme-preview{background:radial-gradient(ellipse at 50% 35%,#6953ca,#5e4ac2);}
.board-theme-mini{position:absolute;left:50%;top:0;width:76px;height:76px;transform:translateX(-50%) rotate(225deg);
  --cell:19px;--plate:#2951c2;--well:#2d4498;--well-s1:rgba(4,12,60,.7);--well-s2:rgba(4,12,60,.45);--well-rim:#608cf5;--well-hi:#96baff;}
.board-theme-name{margin-top:9px;font-size:16px;font-weight:900;}
.board-theme-status{margin-top:3px;min-height:15px;font-size:10px;font-weight:800;color:#bcf9f7;visibility:hidden;}
.board-theme-option input:checked + .board-theme-card .board-theme-status{visibility:visible;}
.board-theme-status::before{content:'✓ ';}
.pause-box > .primary{width:100%;}
@media (max-height:600px){.pause-box .over-title{margin-bottom:10px;}.board-themes{margin:14px 0;}.board-theme-preview{height:86px;}.board-theme-mini{top:-10px;}}

/* One SVG per connected shape: no cell seams, bevel facets, or rectangular backing. */
.glass-surface{position:absolute;overflow:visible;pointer-events:none;}
.glass-plate{display:none;}
.preview-glass .glass-plate{display:block;}
html[data-board-theme="glass"]{background-color:#5e4ac2 !important;}
[data-board-theme="glass"] body{background:#5e4ac2 radial-gradient(ellipse 95% 72% at 50% 35%,#6953ca 0%,#604cc3 60%,#5e4ac2 100%) !important;}
[data-board-theme="glass"] :is(#ambient,#sceneTint,#fever){display:none !important;}
[data-board-theme="glass"] #wellLayer .well-set{display:none !important;}
[data-board-theme="glass"] #wellLayer .glass-plate{display:block;}
[data-board-theme="glass"] #app .stage{width:90%;margin:0;justify-self:center;}
[data-board-theme="glass"] .playfield .glass-joined::before,
[data-board-theme="glass"] .playfield .glass-joined::after{visibility:hidden;}
[data-board-theme="glass"] .tray .tray-cell,
[data-board-theme="glass"] #dragLayer .drag-cell{visibility:hidden;}
[data-board-theme="glass"] #dragLayer > .glass-surface{animation:pickUp 200ms cubic-bezier(.3,1.6,.5,1);}
[data-board-theme="glass"] .playfield :is(.block,.ghost,.hi)::before{
  inset:2.8%;border-radius:14%;
  background:radial-gradient(ellipse at 82% 72%,rgba(255,251,232,.11),transparent 85%),linear-gradient(135deg,color-mix(in srgb,var(--glass-color) 65%,transparent),color-mix(in srgb,var(--glass-color) 56%,transparent) 52%,color-mix(in srgb,var(--glass-color) 64%,transparent));
  border:1px solid color-mix(in srgb,var(--glass-color),#fff 64%);
  border-right-color:rgba(255,251,237,.95);border-bottom-color:color-mix(in srgb,var(--glass-color),#fff 78%);
  box-shadow:inset 0 0 8px color-mix(in srgb,var(--glass-color) 40%,transparent),inset 1px 1px 3px color-mix(in srgb,var(--glass-color),#fff 68%),inset -1px -1px 1px rgba(255,253,242,.25),0 0 1.5px color-mix(in srgb,var(--glass-color) 45%,transparent);}
[data-board-theme="glass"] .playfield :is(.block,.ghost,.hi)::after{content:none;}
[data-board-theme="glass"] .c-red{--glass-color:#f0a1b6;}
[data-board-theme="glass"] .c-orange{--glass-color:#d5c260;}
[data-board-theme="glass"] .c-yellow{--glass-color:#c6b761;}
[data-board-theme="glass"] .c-green{--glass-color:#64c185;}
[data-board-theme="glass"] .c-cyan{--glass-color:#61ba7e;}
[data-board-theme="glass"] .c-blue{--glass-color:#9eaff3;}
[data-board-theme="glass"] :is(.c-purple,.c-debug){--glass-color:#a88cff;}
[data-board-theme="glass"] .goal{background:rgba(53,39,133,.12);border-color:#28dadd;color:#85f4f5;}
[data-board-theme="glass"] #pauseOverlay{background:rgba(46,30,111,.64);}
@media (prefers-reduced-motion:reduce){.board-theme-card{transition:none;}[data-board-theme="glass"] #dragLayer > .glass-surface{animation:none;}}

/* 3D: WebGL の canvas（cube3d.js）が、背景・盤面・ブロック・手駒・持っているピースを描く（html の data-gl="on"）。
   読み込みの間（data-gl が無い）は盤面を隠し、WebGL が使えないとき（data-gl="off"）は宝石の見た目のまま遊べる */
.gl-board{position:fixed;left:0;top:0;z-index:0;pointer-events:none;}
html[data-board-theme="3d"]{background-color:#2a3192 !important;}
[data-board-theme="3d"] body{background:#2a3192 radial-gradient(ellipse 95% 60% at 50% 42%,#4650c8 0%,#333aa4 55%,#20256f 100%) !important;}
[data-board-theme="3d"]:not([data-gl="off"]) :is(#ambient,#sceneTint,#fever){display:none !important;}
[data-board-theme="3d"]:not([data-gl="off"]) #wellLayer,
[data-board-theme="3d"]:not([data-gl="off"]) .playfield :is(.block,.ghost,.hi,.well-tint),
[data-board-theme="3d"]:not([data-gl="off"]) .tray .tray-cell,
[data-board-theme="3d"]:not([data-gl="off"]) #dragLayer .drag-cell{visibility:hidden;}
[data-board-theme="3d"] #pauseOverlay{background:rgba(22,24,80,.62);}
.preview-3d .board-theme-preview{background:radial-gradient(ellipse at 50% 42%,#3a40b2,#232873);}
.board-theme-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* 3D は横いっぱいの見本（光の当たり方まで見えるように） */
.board-theme-option.preview-3d{grid-column:1 / -1;}
.preview-3d .board-theme-preview{height:128px;}
.board-theme-option.unavailable{opacity:.45;cursor:default;}
@media (max-height:600px){.preview-3d .board-theme-preview{height:96px;}}