/* ルーム装飾（ホストがログインしているときだけ付く）。<html> の data-theme / data-back / data-frame で切り替える。
   選択肢の一覧は public/js/decor-meta.js。ここに無い値は標準の見た目。 */

/* テーマ: 背景と、面の色 */
[data-theme="green"]{--ink:#0F2A1E;--felt:#14382A;--tile:#1D4A37;--line:#2E6B50}
[data-theme="sakura"]{--ink:#2A1520;--felt:#3A1D2D;--tile:#4D2640;--line:#7A3C61}
[data-theme="sea"]{--ink:#0C1F33;--felt:#112B47;--tile:#173A5E;--line:#2A5C8E}
[data-theme="sunset"]{--ink:#2B1810;--felt:#3A2116;--tile:#4C2B1C;--line:#7A4A2E}

/* カードの裏柄 */
[data-back="mint"] .card.back{background:repeating-linear-gradient(45deg,#2ED3A0 0 5px,#139872 5px 10px)}
[data-back="dots"] .card.back{background:radial-gradient(circle,#FFFBF0 22%,transparent 24%) 0 0/9px 9px,#FF4D5E}
[data-back="check"] .card.back{background:conic-gradient(#17151F 25%,#FFC83D 0 50%,#17151F 0 75%,#FFC83D 0) 0 0/12px 12px}
[data-back="night"] .card.back{background:radial-gradient(circle at 30% 30%,#FFC83D 0 2px,transparent 3px),radial-gradient(circle at 70% 65%,#FFFBF0 0 1.5px,transparent 2.5px),#1B2A5C}

/* 映像の枠（点灯中の黄色い枠は box-shadow なので、重ならない） */
[data-frame="neon"] .tile{border-color:#FFC83D;outline:2px solid rgba(255,200,61,.55);outline-offset:1px}
[data-frame="gold"] .tile{border-color:#E8B923;outline:3px solid #7A5A00;outline-offset:0}
[data-frame="rainbow"] .tile{border-color:transparent;background:linear-gradient(var(--tile),var(--tile)) padding-box,conic-gradient(from 0deg,#FF4D5E,#FFC83D,#2ED3A0,#4DB8FF,#6A4DFF,#FF4D5E) border-box}
[data-frame="dash"] .tile{border-style:dashed;border-color:#fff}
[data-frame="round"] .tile{border-radius:40px}

/* 装飾の選択パネル（ロビー） */
.decor{display:grid;gap:10px;padding:14px 16px;border-radius:18px;background:var(--felt);border:3px solid var(--line)}
.decor h3{margin:0;font-size:15px;font-family:var(--disp)}
.decor .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.decor .row>b{flex:0 0 100%;font-size:12px;color:var(--mute)}
.decor .opt{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px 0 8px;border-radius:99px;border:3px solid var(--line);background:var(--tile);color:var(--paper);font:inherit;font-weight:800;font-size:13px;cursor:pointer}
.decor .opt[aria-pressed="true"]{border-color:var(--yel);box-shadow:0 0 0 3px rgba(255,200,61,.25)}
.decor .opt i{width:22px;height:22px;border-radius:50%;border:2px solid #000;flex:none}
.decor .lock{color:var(--mute);font-size:13px;line-height:1.6}

/* ルール設定の保存 */
.presets{display:grid;gap:8px;padding:12px 14px;border-radius:16px;background:var(--felt);border:3px solid var(--line)}
.presets h3{margin:0;font-size:14px;font-family:var(--disp)}
.presets .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.presets .pset{display:inline-flex;align-items:stretch;border-radius:99px;border:3px solid var(--line);background:var(--tile);overflow:hidden}
.presets .pset button{font:inherit;font-weight:800;font-size:13px;color:var(--paper);background:transparent;border:0;min-height:40px;padding:0 12px;cursor:pointer}
.presets .pset button.del{border-left:2px solid var(--line);padding:0 10px;color:var(--mute)}
.presets .save{display:flex;gap:8px}
.presets .save input{flex:1;min-width:0;height:44px;border-radius:12px;border:3px solid var(--line);background:var(--ink);color:var(--paper);padding:0 12px;font:inherit;font-weight:700}

/* マイページ */
.me .slugrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.me .slugrow .pre{color:var(--mute);font-weight:700}
.me .slugrow input{flex:1 1 140px;min-width:0}