/* Duel Folio コンボ：濃紺を基本に、水色を操作、金色を初動・注目、紫を補助に使う。色だけに頼らず、アイコンと文字を必ず添える。 */
:root{--bg:#0e1a2c;--bg2:#13233a;--panel:#172a43;--panel2:#1f3656;--line:#2e4566;--ink:#eef4fb;--muted:#a3b4c9;--cyan:#6fd6ea;--cyan-ink:#06202f;--gold:#f2c46d;--purple:#c9a2ee;--green:#7fdc9a;--danger:#ff7a83;--req:#ff5c6c;--deep:#0a1424;--shadow:0 8px 24px #0006;--radius:14px;--font:'Yu Gothic UI','Hiragino Sans','Meiryo',system-ui,sans-serif;--fs:15px;color-scheme:dark}
:root[data-theme="light"]{--bg:#eef3f9;--bg2:#e3ebf5;--panel:#ffffff;--panel2:#f2f6fb;--line:#c9d6e6;--ink:#122036;--muted:#4b5e77;--cyan:#0a6b8a;--cyan-ink:#ffffff;--gold:#80560c;--purple:#6b45b0;--green:#1c7a43;--danger:#c4323a;--req:#d0182a;--deep:#dde7f2;--shadow:0 6px 18px #1a325418;color-scheme:light}
:root[data-palette="teal"]{--cyan:#6fe3c4}:root[data-palette="purple"]{--cyan:#c4a8f2}
:root[data-theme="light"][data-palette="teal"]{--cyan:#07705a}:root[data-theme="light"][data-palette="purple"]{--cyan:#6b45b0}
:root[data-font="large"]{--fs:17px}:root[data-font="larger"]{--fs:19px}
:root[data-contrast="high"]{--line:#7f9bbf;--muted:#d3deeb}:root[data-contrast="high"][data-theme="light"]{--line:#5c7392;--muted:#26354a}
:root[data-motion="off"] *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
:root[data-layout="phone"] body{max-width:390px;margin:0 auto;box-shadow:0 0 0 1px var(--line)}
:root[data-layout="tablet"] body{max-width:820px;margin:0 auto;box-shadow:0 0 0 1px var(--line)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1200px 500px at 85% -10%,color-mix(in srgb,var(--cyan) 12%,transparent),transparent),var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs);line-height:1.7;overflow-x:hidden}
a{color:var(--cyan)}img{max-width:100%}button,input,select,textarea{font:inherit;color:inherit}[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:6px}
.icon{flex:none;vertical-align:-3px}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--cyan);color:var(--cyan-ink);padding:8px 12px;border-radius:8px;z-index:99}.skip-link:focus{left:8px}
/* 見出し */
.site-header{flex:none;height:var(--hh);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--deep) 94%,var(--bg));position:relative;z-index:20;padding:0 max(16px,3vw);display:flex;align-items:center}
.site-header-inner{display:flex;align-items:center;gap:14px;width:100%;height:100%}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-size:19px;white-space:nowrap;font-weight:600}.brand b{color:var(--cyan)}.brand small{color:var(--muted);font-size:11px;border:1px solid var(--line);border-radius:6px;padding:0 5px}
.site-nav{display:flex;gap:4px;flex:1;min-width:0}
.site-nav a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:999px;font-weight:700;font-size:14px;white-space:nowrap}
.site-nav a:hover{color:var(--ink);background:color-mix(in srgb,var(--cyan) 10%,transparent)}
.site-nav a[aria-current="page"]{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 16%,transparent)}
.site-nav a.nav-create{background:var(--cyan);color:var(--cyan-ink)}.site-nav a.nav-create[aria-current="page"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 35%,transparent)}
.header-tools{display:flex;gap:6px;align-items:center}
.icon-btn{display:inline-grid;place-items:center;min-width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;text-decoration:none;font-size:18px;line-height:1;padding:0}
.icon-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.account-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--ink);text-decoration:none;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;background:var(--panel)}
.dot-warn{width:8px;height:8px;border-radius:50%;background:var(--gold);display:inline-block}
main{max-width:1360px;margin:0 auto;padding:22px max(16px,3vw) 64px}
h1{font-size:26px;line-height:1.35;margin:0 0 12px}h2{font-size:18px;margin:0 0 10px}h3{font-size:16px;margin:12px 0 8px}
.muted{color:var(--muted)}.small{font-size:.87em}.danger{color:var(--danger)}.ok{color:var(--green)}
.page-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}.page-title h1{margin:0}
.title-icon{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--cyan) 18%,transparent);color:var(--cyan)}
.notice{display:flex;gap:8px;align-items:flex-start;border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--ink);padding:10px 14px;border-radius:12px;margin:0 0 14px}
.notice.error{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.notice.info{border-color:color-mix(in srgb,var(--cyan) 50%,transparent);background:color-mix(in srgb,var(--cyan) 10%,transparent)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.section-head{display:flex;align-items:center;gap:8px;margin:0 0 10px}.section-head h2{margin:0}
/* 見出しの横のボタン（もっと見る など）は折り返さず、長い見出しの方を折り返す */
.section-head>.button,.section-head>a.button{white-space:nowrap;flex:none}.section-head h2{min-width:0}
.badge-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#0b1626;flex:none}
.badge-icon.cyan{background:var(--cyan)}.badge-icon.gold{background:var(--gold)}.badge-icon.purple{background:var(--purple)}.badge-icon.green{background:var(--green)}.badge-icon.red{background:var(--danger)}
:root[data-theme="light"] .badge-icon{color:#fff}
/* ボタン */
.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:8px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-weight:700;cursor:pointer;text-decoration:none;font-size:14px;line-height:1.3;transition:transform .1s,filter .15s}
.button:hover:not(:disabled){filter:brightness(1.12)}.button:active:not(:disabled){transform:translateY(1px)}.button:disabled{opacity:.45;cursor:not-allowed}
.button.primary{background:var(--cyan);border-color:var(--cyan);color:var(--cyan-ink)}
.button.gold{background:var(--gold);border-color:var(--gold);color:#241700}
:root[data-theme="light"] .button.gold{color:#fff}
.button.danger{border-color:var(--danger);color:var(--danger);background:transparent}
.button.small{min-height:34px;padding:4px 11px;font-size:13px;border-radius:10px}.button.ghost{background:transparent}.button.big{min-height:54px;font-size:16px;padding:10px 22px;border-radius:14px}
.button[aria-pressed="true"]{border-color:var(--cyan);color:var(--cyan);background:color-mix(in srgb,var(--cyan) 14%,var(--panel))}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.grow{flex:1}
/* ボタン式の選択 */
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}
.seg button{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--muted);padding:7px 14px;border-radius:9px;font-weight:700;cursor:pointer;min-height:36px;font-size:14px}
.seg.small button{padding:5px 10px;min-height:32px;font-size:13px}
/* 切り替えの文字は折り返さない（狭い画面で1文字ずつ縦に並ぶのを防ぐ） */
.seg button{white-space:nowrap;flex:none}
.seg button[aria-pressed="true"]{background:var(--cyan);color:var(--cyan-ink)}
.seg button:hover:not([aria-pressed="true"]){color:var(--ink);background:color-mix(in srgb,var(--cyan) 10%,transparent)}
/* 入力 */
label.field,.field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);font-weight:700}
.field-name{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:700;font-size:14px}
.req{color:var(--req);font-weight:800;font-size:16px;line-height:1}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=number],input[type=date],select,textarea{width:100%;min-height:44px;padding:9px 12px;border-radius:11px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font-size:15px}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 25%,transparent)}
textarea{min-height:80px;resize:vertical;line-height:1.6}
.checkbox{display:inline-flex;gap:8px;align-items:center;font-size:14px}
/* 横に並ぶ選択肢は、前の文字と次の四角がくっつかないよう間を空ける */
fieldset>label.checkbox{margin-right:14px}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.help-btn{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--cyan);cursor:pointer;padding:0;vertical-align:middle}
.help-btn:hover{border-color:var(--cyan)}
/* ？ボタンは、すぐ前のボタン・文字にくっつかないよう少し離す（並びの間隔がある所でも小さく足すだけ） */
* + .help-btn{margin-left:6px}
/* 追加できる項目 */
.optional-item{margin-bottom:14px;padding:12px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}
.add-chips{display:flex;flex-wrap:wrap;gap:8px}
.add-chip{display:inline-flex;align-items:center;gap:5px;border:1px dashed var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:6px 12px;font-weight:700;cursor:pointer;font-size:13px}
.add-chip:hover{border-color:var(--cyan);color:var(--cyan)}
.num-stepper{display:inline-flex;align-items:center;gap:8px}.num-stepper .icon-btn{width:36px;min-width:36px;height:36px;font-weight:800}.stepper-value{min-width:28px;text-align:center;font-weight:800;font-size:18px}
/* 小さな印 */
.tag{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:12px;color:var(--ink);margin:2px 4px 2px 0;background:var(--panel2);text-decoration:none}
a.tag:hover,button.tag:hover{border-color:var(--cyan)}
.tag .count{color:var(--muted);font-size:11px}
.chip-list{display:flex;flex-wrap:wrap;gap:6px}
.chip-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;background:var(--panel2);color:var(--ink);cursor:pointer;text-decoration:none}
.chip-btn:hover{border-color:var(--cyan)}
.chip-btn[aria-pressed="true"]{background:var(--cyan);color:var(--cyan-ink);border-color:var(--cyan)}
.chip-btn .count{color:var(--muted);font-size:11px;font-weight:400}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;border-radius:999px;padding:2px 9px;font-weight:700}
.badge.public{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
.badge.private,.badge.draft{background:color-mix(in srgb,var(--muted) 18%,transparent);color:var(--muted)}
.badge.trash,.badge.suspended{background:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger)}
.badge.changes{background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold)}
.site-footer{border-top:1px solid var(--line);padding:22px max(16px,3vw);color:var(--muted);font-size:13px;display:flex;gap:14px;flex-wrap:wrap}.site-footer a{color:var(--muted)}
/* ホーム */
.hero{position:relative;overflow:hidden;border-radius:20px;padding:28px;margin-bottom:22px;background:linear-gradient(120deg,color-mix(in srgb,var(--cyan) 22%,var(--panel)),var(--panel) 55%,color-mix(in srgb,var(--purple) 18%,var(--panel)));border:1px solid var(--line);display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:center}
.hero h1{font-size:30px;margin-bottom:8px}.hero .lead{color:var(--muted);margin:0 0 16px}
.flow-steps{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;padding:0;list-style:none}
.flow-steps li{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700}
.flow-steps li .icon{color:var(--cyan)}
.search-big{display:flex;gap:8px}.search-big input{flex:1;min-height:50px;font-size:16px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
.rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rank-list li a{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:10px;text-decoration:none;color:var(--ink);background:var(--bg2)}
.rank-list li a:hover{outline:1px solid var(--cyan)}
.rank-no{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--panel2);font-weight:800;font-size:13px;flex:none}
.rank-list li:nth-child(1) .rank-no{background:var(--gold);color:#241700}.rank-list li:nth-child(2) .rank-no{background:#c9d3de;color:#1a2230}.rank-list li:nth-child(3) .rank-no{background:#d6a26a;color:#2a1600}
.rank-count{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
/* 一覧 */
.combo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.combo-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);text-decoration:none;min-width:0;transition:transform .15s,border-color .15s}
.combo-card:hover{border-color:var(--cyan);transform:translateY(-2px)}
.combo-card .thumb{aspect-ratio:1.9;background:linear-gradient(135deg,var(--deep),var(--panel2));display:grid;place-items:center;color:var(--muted);overflow:hidden}.combo-card .thumb img{width:100%;height:100%;object-fit:cover}
.combo-card .body{padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.combo-card h3{font-size:16px;margin:0;overflow-wrap:anywhere}.combo-card p{margin:0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.meta-line{display:flex;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted);align-items:center}
.meta-pill{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;background:var(--bg2);border:1px solid var(--line)}
.meta-pill.game{color:var(--cyan)}.meta-pill.turn{color:var(--purple)}.meta-pill.starter{color:var(--gold)}.meta-pill.likes{color:var(--danger)}
:root[data-list="list"] .combo-grid{grid-template-columns:1fr}
:root[data-list="list"] .combo-card{flex-direction:row}:root[data-list="list"] .combo-card .thumb{width:200px;flex:none;aspect-ratio:auto}
.ad-slot{border:1px dashed var(--line);border-radius:12px;padding:20px 8px 8px;min-height:90px;position:relative;grid-column:1/-1}.ad-slot::before{content:'AD';position:absolute;top:4px;left:10px;font-size:11px;color:var(--muted)}
.filter-panel{display:flex;flex-direction:column;gap:12px}
.filter-row{display:grid;grid-template-columns:140px 1fr;gap:10px;align-items:center}
.filter-row>.field-name{font-size:13px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.tabs button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:10px 14px;color:var(--muted);font-weight:700;border-bottom:3px solid transparent;cursor:pointer;min-height:44px}
.tabs button[aria-selected="true"]{color:var(--cyan);border-color:var(--cyan)}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:28px 16px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);grid-column:1/-1}
.empty-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--bg2);color:var(--cyan)}.empty-title{margin:0;font-weight:700;color:var(--ink)}
/* 詳細 */
.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px}
.detail-text section{margin-bottom:18px}.detail-text p{margin:2px 0;overflow-wrap:anywhere}
.step-text{padding-left:0;list-style:none}.step-text li{border-left:3px solid var(--line);padding:4px 0 6px 12px;margin-bottom:6px}.step-text .chapter-title{border:0;padding-left:0;font-weight:700;color:var(--gold);margin-top:12px}
.step-text .detail{color:var(--muted);font-size:14px}
.diagram-view{background:var(--deep);border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative}
.diagram-view .viewport{overflow:auto;max-height:78vh;touch-action:pan-x pan-y}.diagram-view svg{display:block}
.zoom-tools{display:flex;gap:6px;padding:8px;border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;background:var(--panel)}
.page-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.card-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.card-thumb{border:1px solid var(--line);border-radius:10px;background:var(--bg2);padding:4px;cursor:pointer;text-align:center;font-size:11px;line-height:1.3;color:var(--ink);position:relative}
.card-thumb:hover{border-color:var(--cyan)}
.card-thumb img,.card-thumb .noimg{width:100%;aspect-ratio:.7;object-fit:contain;border-radius:6px;display:grid;place-items:center;background:var(--panel2);color:var(--muted);overflow:hidden;font-size:11px}
.card-info{display:grid;grid-template-columns:150px 1fr;gap:14px}.card-info img,.card-info .noimg{border-radius:8px;width:150px;aspect-ratio:.7;object-fit:contain;background:var(--panel2);display:grid;place-items:center;color:var(--muted)}
.info-list{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0;font-size:14px}.info-list dt{color:var(--muted)}.info-list dd{margin:0}
.shop-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.shop-link{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700;background:var(--panel2)}
.shop-link:hover{border-color:var(--gold)}.disclosure{font-size:12px;color:var(--muted)}
.a8-banner{display:block;margin-top:8px}.a8-banner img{max-width:100%;height:auto;border-radius:6px}
/* 作成 */
.stepper{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:16px}
.stepper button{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:12px;padding:8px;font-weight:700;cursor:pointer;min-height:52px;font-size:14px}
.stepper button .num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--bg2);font-size:13px;flex:none}
.stepper button[aria-current="step"]{border-color:var(--cyan);color:var(--ink);background:color-mix(in srgb,var(--cyan) 14%,var(--panel))}
.stepper button[aria-current="step"] .num{background:var(--cyan);color:var(--cyan-ink)}
.editor-layout{display:grid;grid-template-columns:290px minmax(0,1fr) minmax(0,.9fr);gap:14px;align-items:start}
.editor-layout>.panel{min-width:0}
/* 広い画面：完成見本は画面の高さに収め、中だけを動かす（長い解説で縦に伸びすぎないように） */
@media (min-width:1101px){.editor-layout>.preview-col{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;overscroll-behavior:contain}}
.card-pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;max-height:60vh;overflow:auto;padding:2px}
.pool-card{border:2px solid transparent;border-radius:10px;background:var(--bg2);padding:4px;cursor:pointer;text-align:center;font-size:11px;line-height:1.3;position:relative;color:var(--ink)}
.pool-card[aria-pressed="true"]{border-color:var(--cyan);box-shadow:0 0 0 2px color-mix(in srgb,var(--cyan) 40%,transparent)}
.pool-card img,.pool-card .noimg{width:100%;aspect-ratio:.7;object-fit:contain;border-radius:6px;display:grid;place-items:center;background:var(--panel2);color:var(--muted);font-size:11px;padding:2px;overflow:hidden}
.pool-card .status{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800}
.status-unknown,.status-candidate{background:var(--gold);color:#241700}.status-confirmed,.status-manual,.status-own-match{background:var(--green);color:#082814}.status-placeholder{background:var(--purple);color:#1d0b33}
.pool-card .copies{position:absolute;top:3px;left:3px;background:#000a;color:#fff;border-radius:6px;padding:0 5px;font-size:11px}
.pool-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:6px 0}
.pool-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:-1px}
.slot-row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.slot{width:78px;border:2px dashed var(--line);border-radius:10px;background:var(--bg2);padding:3px;cursor:pointer;text-align:center;font-size:11px;color:var(--muted);position:relative;line-height:1.25}
.slot.filled{border-style:solid;border-color:color-mix(in srgb,var(--cyan) 50%,var(--line));color:var(--ink)}
.slot img,.slot .noimg{width:100%;aspect-ratio:.7;object-fit:contain;border-radius:6px;display:grid;place-items:center;background:var(--panel2)}
.slot .remove{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:0;background:var(--danger);color:#fff;font-weight:800;cursor:pointer;line-height:1}
.slot.add{display:grid;place-items:center;aspect-ratio:.7;color:var(--cyan);font-weight:700}
.slot-label{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-grid{display:grid;grid-template-columns:repeat(7,minmax(60px,1fr));gap:8px;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--green) 10%,var(--bg2));border:1px solid var(--line)}
.board-grid .slot{width:auto}
.board-grid .zone-label{display:grid;place-items:center;aspect-ratio:.7;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:11px}
.step-list{display:flex;flex-direction:column;gap:12px}
.step-item{border:1px solid var(--line);border-left:6px solid var(--act,var(--line));border-radius:14px;background:var(--bg2);padding:12px}
.step-item[aria-current="true"]{box-shadow:0 0 0 2px var(--cyan)}
.step-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.step-num{font-size:24px;font-weight:800;min-width:34px;color:var(--act,var(--ink))}
.action-btn{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--act,var(--line));border-radius:999px;padding:4px 14px 4px 6px;background:var(--panel);color:var(--ink);font-weight:800;cursor:pointer}
.action-btn .sym,.action-tile .sym{display:inline-grid;place-items:center;min-width:28px;height:28px;border-radius:50%;background:var(--act);color:#0b1626;font-size:12px;font-weight:800;padding:0 4px}
.action-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.action-tile{display:flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:12px;padding:8px;background:var(--bg2);color:var(--ink);font-weight:700;cursor:pointer;text-align:left}
.action-tile:hover,.action-tile[aria-pressed="true"]{border-color:var(--act)}
.step-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.flow-arrow{color:var(--act,var(--muted));display:grid;place-items:center}
.step-tools{display:flex;gap:6px;margin-left:auto}
.page-break-mark{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:-2px 0 8px;padding:4px 10px;border-top:2px dashed var(--line);font-weight:700;font-size:13px;color:var(--muted)}.page-break-mark.manual{border-top-color:var(--cyan);color:var(--ink)}
.split-btn[aria-pressed='true']{border-color:var(--cyan);color:var(--cyan)}
.step-tools .icon-btn{width:36px;min-width:36px;height:36px}
.save-state{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}.save-state.dirty{color:var(--gold)}.save-state.error{color:var(--danger)}
.progress{height:8px;background:var(--line);border-radius:6px;overflow:hidden}.progress>i{display:block;height:100%;background:var(--cyan);width:0}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:8px;justify-content:center;border:2px dashed color-mix(in srgb,var(--cyan) 55%,var(--line));border-radius:18px;padding:30px;background:color-mix(in srgb,var(--cyan) 6%,var(--panel));cursor:pointer;text-align:center;font-weight:700}
.dropzone:hover{background:color-mix(in srgb,var(--cyan) 12%,var(--panel))}.dropzone .icon{color:var(--cyan)}
.start-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px}
.crop-wrap{position:relative;overflow:auto;max-height:66vh;display:grid;place-items:start center;border:1px solid var(--line);border-radius:12px;background:var(--deep)}.crop-wrap canvas{display:block;max-width:none}
.crop-layout{grid-template-columns:300px minmax(0,1fr)}
/* 画面の上に出す枠 */
dialog{border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--ink);max-width:min(720px,94vw);padding:18px;box-shadow:var(--shadow)}dialog::backdrop{background:#000a;backdrop-filter:blur(3px)}
.dialog-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}.dialog-head h2{margin:0;flex:1}.dialog-head>.icon{color:var(--cyan)}
.dialog-foot{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}.dialog-foot .small{margin-right:auto}
.help-dialog p{margin:6px 0;color:var(--ink)}
.picker{width:min(900px,96vw)}
.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;max-height:60vh;overflow:auto;margin-top:10px;padding:2px}
.pick{position:relative;border:2px solid transparent;border-radius:12px;background:var(--bg2);padding:5px;cursor:pointer;color:var(--ink);font-size:12px;line-height:1.3}
.pick[aria-selected="true"]{border-color:var(--cyan)}
.pick img,.pick .noimg{width:100%;aspect-ratio:.7;object-fit:contain;border-radius:7px;display:grid;place-items:center;background:var(--panel2);color:var(--muted)}
.pick-name{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-check{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:var(--cyan);color:var(--cyan-ink);display:grid;place-items:center}
.pref-row{display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.pref-name{font-weight:700}
.table{width:100%;border-collapse:collapse;font-size:14px}.table th,.table td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(150%);display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--cyan);color:var(--ink);padding:10px 16px;border-radius:999px;box-shadow:var(--shadow);z-index:60;max-width:92vw;transition:transform .2s}.toast.show{transform:translateX(-50%) translateY(0)}.toast.error{border-color:var(--danger)}.toast .icon{color:var(--cyan)}.toast.error .icon{color:var(--danger)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.adsbygoogle{display:block}
.action-bar{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
.action-bar>.button,.action-bar>.base-menu>summary{white-space:nowrap}
/* PC・タブレット：投稿のボタンは1行に並べ、幅が足りない時は余白を詰めて全体で縮める（10/25 本人の指示：2行にしない） */
@media (min-width:641px){.action-bar{flex-wrap:nowrap;gap:6px}.action-bar>.button,.action-bar>.base-menu{flex:1 1 auto;min-width:0}.action-bar>.base-menu{min-width:max-content}.action-bar>.button,.action-bar>.base-menu>summary{padding-left:9px;padding-right:9px;justify-content:center}.action-bar>.base-menu>summary{width:100%}}
.side-col>*+*{margin-top:14px}
.span-2{grid-column:span 2}
.export-preview{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.export-thumb{border:1px solid var(--line);border-radius:6px}
.prose{max-width:860px}.prose li{margin:4px 0}.big{font-size:28px;font-weight:800}.pre{white-space:pre-wrap;overflow-wrap:anywhere}
fieldset{border:1px solid var(--line);border-radius:12px;margin:8px 0;padding:8px 12px}legend{color:var(--muted);font-size:13px;padding:0 4px}
.card-preview{border-radius:8px;display:block;margin:0 auto 8px;max-height:220px}
.mobile-only{display:none}
@media (max-width:1100px){.editor-layout{grid-template-columns:250px minmax(0,1fr)}.editor-layout>.preview-col{grid-column:1/-1}.span-2{grid-column:1/-1}}
@media (max-width:900px){.site-nav span{display:none}.site-nav a{padding:9px}.site-nav a.nav-create span{display:inline}}
@media (max-width:820px){.hero,.detail-layout,.stats-grid{grid-template-columns:minmax(0,1fr)}.editor-layout,.crop-layout{grid-template-columns:1fr}.mobile-only{display:block}h1{font-size:22px}.hero h1{font-size:24px}.filter-row{grid-template-columns:1fr}.stepper button .label{display:none}.card-info{grid-template-columns:1fr}.card-info img,.card-info .noimg{margin:0 auto}.board-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.site-header{flex-wrap:wrap}.site-nav{order:3;flex-basis:100%;justify-content:space-around}.brand small{display:none}.combo-grid{grid-template-columns:1fr}main{padding-top:14px}.pref-row{grid-template-columns:1fr}:root[data-list="list"] .combo-card .thumb{width:110px}}
.mt{margin-top:10px}.mt-lg{margin-top:18px}
.a8-pixel{position:absolute;width:1px;height:1px;opacity:0}.a8-box{margin-top:10px}.copy-select{width:78px!important;min-height:30px!important;padding:2px 4px!important;font-size:12px!important;margin-top:4px}.chapter-select{width:auto!important;min-height:34px!important}
.share-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:8px 0}
.share-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:14px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font-weight:700;text-decoration:none;cursor:pointer;font-size:14px}
.share-btn:hover{border-color:var(--cyan)}
.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-weight:900;font-size:15px;color:#fff;letter-spacing:-.5px}
.brand-mark.x{background:#000;border:1px solid #444}.brand-mark.line{background:#06c755;font-size:11px}.brand-mark.discord{background:#5865f2}.brand-mark.menu,.brand-mark.copy{background:var(--cyan);color:var(--cyan-ink)}
.share-fallback{margin-top:8px}.share-title{margin:0 0 4px;overflow-wrap:anywhere}
.brand-mark.logo{background:#fff;border:1px solid var(--line)}.brand-mark.logo img{width:26px;height:26px;object-fit:contain}.brand-mark.logo.x{background:#fff}
/* 「？」の吹き出し：画面を覆わず、ボタンの近くに出す */
.help-pop{position:fixed;margin:0;inset:auto;max-width:min(320px,90vw);padding:12px 14px;border-radius:12px;border:1px solid var(--cyan);background:var(--panel);color:var(--ink);box-shadow:var(--shadow);font-size:13px;line-height:1.6;font-weight:400;z-index:70}
.help-pop::backdrop{background:transparent}
.help-pop p{margin:4px 0}.help-pop .pop-title{font-weight:800;color:var(--cyan);margin-bottom:4px}
.help-pop::before{content:'';position:absolute;top:-7px;left:var(--arrow,16px);width:12px;height:12px;background:var(--panel);border-left:1px solid var(--cyan);border-top:1px solid var(--cyan);transform:rotate(45deg)}
.help-pop.above::before{top:auto;bottom:-7px;transform:rotate(225deg)}
.help-btn[aria-expanded="true"]{background:var(--cyan);color:var(--cyan-ink);border-color:var(--cyan)}
.brand-mark.logo.x img{filter:brightness(0)}
/* 作業の進み具合の帯（切り抜き・読み取り）：画面上部に固定して、どの段階でも見える */
.work-banner{position:sticky;top:8px;z-index:15;display:flex;align-items:center;gap:12px;padding:12px 16px;margin:0 0 14px;border-radius:14px;border:2px solid var(--cyan);background:color-mix(in srgb,var(--cyan) 14%,var(--panel));box-shadow:var(--shadow)}
.work-banner.done{border-color:var(--green);background:color-mix(in srgb,var(--green) 14%,var(--panel))}
.work-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--cyan);color:var(--cyan-ink);flex:none}
.work-banner.done .work-icon{background:var(--green);color:#082814}
.work-banner.ocr .work-icon .icon,.work-banner.crop .work-icon .icon{animation:work-spin 1.6s linear infinite}
@keyframes work-spin{to{transform:rotate(360deg)}}
.work-text{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}.work-text strong{font-size:15px}
.work-text .progress{height:10px}
.dropzone.drag{background:color-mix(in srgb,var(--cyan) 22%,var(--panel));border-style:solid}
.usage-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:10px 0 14px;padding:12px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);position:relative}
.usage-card>.help-btn{position:absolute;top:8px;right:8px;margin:0}
.usage-item{display:flex;flex-direction:column;gap:2px}.usage-item strong{font-size:18px;color:var(--cyan)}
.notice .button{margin-top:6px}

.share-preview{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere}
.share-tags{display:flex;align-items:center;gap:4px;flex-wrap:wrap;color:var(--muted)}.share-tags b{color:var(--cyan)}
.share-mode{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 4px}.share-mode .pref-name{display:flex;align-items:center;gap:6px;font-weight:700}
.share-dialog .progress{margin:6px 0}

.list-switch{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);margin-bottom:12px}
.list-switch a{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:9px;color:var(--muted);font-weight:700;text-decoration:none;min-height:40px}
.list-switch a[aria-current="page"]{background:var(--cyan);color:var(--cyan-ink)}
.thumb.mosaic{display:grid;gap:2px}.thumb.mosaic.n2{grid-template-columns:1fr 1fr}.thumb.mosaic.n3,.thumb.mosaic.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.thumb.mosaic.n3 img:first-child{grid-row:span 2}
.folder-card h3{display:flex;align-items:center;gap:6px}.folder-card h3 .icon{color:var(--green,#2fb37a);flex:none}
.folder-pick-list{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto;margin-bottom:12px}
.folder-pick{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);cursor:pointer;min-height:48px}
.folder-pick:has(input:checked){border-color:var(--cyan)}.folder-pick .icon{color:var(--muted)}
.folder-dialog{width:min(560px,96vw)}
.new-folder{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px;border-radius:12px;border:1px dashed var(--line);margin:8px 0}.new-folder input[type=text]{flex:1;min-width:160px}
.folder-desc{white-space:pre-wrap;overflow-wrap:anywhere}
.folder-edit summary{cursor:pointer;font-weight:700;display:flex;align-items:center;gap:6px;min-height:40px}.folder-edit .field{margin:10px 0}
.folder-item{display:flex;flex-direction:column;gap:6px}.folder-item>.combo-card{flex:1}.folder-item-tools{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.folder-table{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.folder-row-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);text-decoration:none;flex-wrap:wrap}.folder-row-item:hover{border-color:var(--cyan)}.folder-row-item>.icon{color:var(--cyan)}
.plain-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}

.social-login{margin-bottom:8px}.login-sub{font-size:15px;margin:6px 0 10px;color:var(--muted)}
.social-buttons{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.button.social{justify-content:flex-start;gap:12px;background:#fff;color:#1f1f1f;border:1px solid #c9d1dc;font-weight:700;min-height:48px}
.button.social:hover{border-color:var(--cyan)}.button.social img{width:20px;height:20px;object-fit:contain}
.button.social.twitter img{filter:brightness(0)}

.comments{margin-top:16px}.count-chip{font-size:12px;font-weight:800;color:var(--cyan)}
.comment-list{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px}
.comment{padding:10px 12px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}
.comment-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.comment-meta .icon{color:var(--muted)}
.comment-body{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.comment-form{display:flex;flex-direction:column;gap:8px}.comment-form textarea{width:100%}

.money-row{padding:12px;border:1px solid var(--line);border-radius:12px;margin:8px 0;background:var(--bg2);display:flex;flex-direction:column;gap:8px}
.banner-row .row{align-items:center}.banner-preview{max-height:48px;max-width:160px;border-radius:4px}

/* 動かして記録・リプレイ */
.replay-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(90deg,var(--bg2),var(--panel2));margin-bottom:12px}
.replay-bar>.icon{color:var(--cyan)}
/* 説明の文が細い列に押し込まれて1文字ずつ折れないよう、狭い時はボタンを下の行へ回す（10/24） */
.replay-bar>.grow{flex:1 1 240px;min-width:min(100%,220px)}
.replay-bar>.grow>.small{display:block}
.replay-bar>.replay-modes{flex:0 1 auto;flex-wrap:wrap}
.rb-board{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;background:var(--deep);border:1px solid var(--line)}
.rb-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;align-items:start}
/* 置き場の枠は列の幅に合わせる（横の LP 欄が高くても、枠が縦横に広がって隣に重ならない） */
.rb-row>.rb-slot{width:100%;min-width:0}
.rb-emz{}
.rb-slot{aspect-ratio:.7;border-radius:8px;border:1px dashed var(--line);background:var(--bg2);display:grid;place-items:center;overflow:hidden;position:relative;padding:0;color:var(--ink);font:inherit;min-width:0}
.rb-slot.filled{border-style:solid;border-color:var(--cyan);cursor:default}button.rb-slot.filled{cursor:pointer}
.rb-slot.selected{outline:3px solid var(--gold);outline-offset:1px}
.rb-slot img{width:100%;height:100%;object-fit:cover}.rb-slot.defense img{transform:rotate(-90deg) scale(.72)}
.rb-slot.facedown{background:repeating-linear-gradient(45deg,var(--panel2),var(--panel2) 6px,var(--bg2) 6px,var(--bg2) 12px)}
.rb-name{font-size:11px;line-height:1.25;padding:3px;text-align:center;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
/* 名前だけのカード：枠からはみ出さず、上が切れないように（長い名前は末尾を省く） */
.rb-slot>.rb-name{max-height:100%;box-sizing:border-box}
@media (max-width:640px){.rb-name{font-size:9.5px;-webkit-line-clamp:4;padding:2px}}
.rb-empty{font-size:10px;color:var(--muted)}
.rb-ov{position:absolute;bottom:2px;right:2px;font-size:9px;background:var(--gold);color:#1b1b1b;border-radius:4px;padding:0 3px}
.rb-side{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-width:0;overflow:hidden;align-self:center;text-align:center}
@media (max-width:640px){.rb-side .rb-lp{font-size:11px}.rb-side .small{font-size:10px}}.rb-lp{font-weight:800;color:var(--gold)}
.rb-hand{display:flex;flex-direction:column;gap:4px}.rb-hand-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px}
.rb-piles{display:flex;gap:8px;flex-wrap:wrap}.rb-pile summary{cursor:pointer;font-size:13px;display:flex;align-items:center;gap:4px}.rb-pile-list{display:flex;flex-wrap:wrap;gap:4px;padding:6px 0}
.chip-btn.on{border-color:var(--gold);color:var(--gold)}
.rb-player{display:flex;flex-direction:column;gap:8px}.rb-controls{align-items:center}
.rb-label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:700;margin:0}.rb-kind{display:inline-grid;place-items:center;min-width:26px;height:22px;border-radius:6px;color:#111;font-size:12px;font-weight:900;padding:0 4px}
.rb-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,280px);gap:10px}
.rb-steps{margin:0;padding-left:22px;max-height:420px;overflow:auto;font-size:13px}.rb-steps li{padding:3px 0}.rb-steps li.on{color:var(--cyan);font-weight:800}.rb-steps li button{all:unset;cursor:pointer;display:block}
.replay-panel summary{cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px}
/* 図と同じタブの並びに出す、盤面の再生・リプレイ */
.diagram-extra{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:12px 14px}
.replay-head{margin-bottom:6px}.replay-head>.icon{color:var(--cyan)}
.page-tabs .tab-extra{border-style:dashed}.page-tabs .tab-extra[aria-pressed="true"]{border-style:solid}
/* カードの動き：動いたカードを少し光らせる。触れると少し持ち上がる */
.rb-board-box{position:relative}
.rb-slot.filled{transition:transform .16s ease,box-shadow .16s ease}
.rb-slot.filled:hover{transform:translateY(-3px);box-shadow:0 8px 16px rgba(0,0,0,.25)}
.rb-slot.rb-moved{box-shadow:0 0 0 2px var(--gold),0 0 18px color-mix(in srgb,var(--gold) 55%,transparent);transition:box-shadow .5s ease}
.rb-ghost{will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.rb-slot.filled,.rb-slot.filled:hover{transition:none;transform:none}}
.replay-dialog{width:min(1000px,96vw)}
.rp-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px}.rp-layout .rp-log{grid-column:1/-1}
.rp-title{font-size:15px;margin:4px 0 8px}
.rp-choices{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto}
.rp-choice{display:flex;align-items:center;gap:8px;text-align:left;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);cursor:pointer;font:inherit;min-height:44px}
.rp-choice:hover{border-color:var(--cyan)}.rp-choice[aria-pressed="true"]{border-color:var(--gold);background:var(--panel2)}
.rp-choice.kind-end,.rp-choice.kind-pass{color:var(--muted)}.rp-choice.kind-activate .icon,.rp-choice.kind-special .icon{color:var(--purple)}.rp-choice.kind-summon .icon{color:var(--gold)}
.rp-manual{margin-top:12px}.rp-manual summary{cursor:pointer;font-weight:700;display:flex;align-items:center;gap:6px;min-height:40px}
.rp-cards{display:flex;flex-direction:column;gap:6px}
.rp-card{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;border:1px solid var(--line);background:var(--bg2)}.rp-card.missing{border-color:var(--gold)}
.rp-card img,.rp-card .noimg{width:42px;height:60px;object-fit:cover;border-radius:4px;display:grid;place-items:center;background:var(--panel2);flex:none}
.rp-card input[type=search]{margin-top:4px;max-width:280px}
@media (max-width:820px){.rp-layout,.rb-layout{grid-template-columns:1fr}.rb-row{gap:3px}}

.totp-qr{display:inline-block;padding:10px;background:#fff;border-radius:12px;margin:6px 0}.totp-qr svg{display:block}.totp-secret{word-break:break-all;font-size:15px;letter-spacing:.5px}

.badge.sample{background:var(--purple);color:#fff;margin-right:6px;font-size:11px;vertical-align:middle}

/* 管理画面：種類ごとの横メニュー・状態の色分け */
.admin-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start}
.admin-nav{position:sticky;top:12px;display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.admin-nav-group{display:flex;flex-direction:column;gap:2px}.admin-nav-title{font-size:11px;color:var(--muted);font-weight:700;padding:0 8px 2px}
.admin-nav button{all:unset;cursor:pointer;padding:8px 10px;border-radius:9px;font-size:14px;color:var(--ink)}.admin-nav button:hover{background:var(--bg2)}
.admin-nav button[aria-current="true"]{background:var(--cyan);color:var(--cyan-ink);font-weight:700}
.admin-nav-link{font-size:13px;padding:6px 10px;color:var(--cyan);white-space:nowrap}
.admin-nav-select{display:none}
.admin-hero{margin-bottom:12px}.admin-hero h2{margin:0 0 4px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:12px 0}
.stat-card{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}.stat-card strong{font-size:28px}
.admin-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.recent-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}.recent-list li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.health-banner{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid;margin:8px 0 12px}
.health-banner.st-ok{border-color:#2f9e5b;background:color-mix(in srgb,#2f9e5b 12%,var(--panel))}.health-banner.st-warn{border-color:#c99312;background:color-mix(in srgb,#c99312 14%,var(--panel))}.health-banner.st-stop{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,var(--panel))}
.st-dot{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid currentColor;font-weight:900;flex:none}
.health-banner.st-ok .st-dot,.health-list .st-ok .st-dot{color:#2f9e5b}.health-banner.st-warn .st-dot,.health-list .st-warn .st-dot{color:#c99312}.health-banner.st-stop .st-dot,.health-list .st-stop .st-dot{color:var(--danger)}.health-list .st-off .st-dot{color:var(--muted)}
.health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.health-list{list-style:none;padding:0;margin:0}.health-list li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.st-badge{display:inline-block;font-size:11px;font-weight:800;padding:1px 8px;border-radius:999px;border:1px solid}.st-badge.st-ok{color:#2f9e5b}.st-badge.st-warn{color:#b07f0c}.st-badge.st-stop{color:var(--danger)}.st-badge.st-off{color:var(--muted)}
.banner-pick{display:flex;flex-direction:column;gap:4px;max-height:55vh;overflow:auto;margin:8px 0}
.recovery-codes ol{columns:2;font-size:16px}
@media (max-width:820px){.admin-layout{grid-template-columns:1fr}.admin-nav{position:static;flex-direction:row;overflow-x:auto;flex-wrap:nowrap}.admin-nav-group{flex-direction:row;align-items:center;flex:none}.admin-nav-title{display:none}}

.consent-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);max-width:760px;margin:0 auto}.consent-bar .small{flex:1;min-width:220px}

.tagline{margin:0 0 6px;font-size:13px;font-weight:800;letter-spacing:.35em;color:var(--gold)}
.chip-btn.more{border-style:dashed;color:var(--muted)}
.rank-list a .icon{color:var(--muted);flex:none}

.kind-choice{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.deck-group{margin:12px 0}.deck-group h3{margin:0 0 8px;font-size:16px}
.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.deck-card{display:flex;flex-direction:column;gap:4px;align-items:center}.deck-card .copy-select{width:100%}
.badge.kind{background:var(--panel2);color:var(--ink);font-size:11px;margin-right:6px}

.products{margin-top:14px}
.carousel-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,170px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;scrollbar-width:thin}
.product-card{all:unset;cursor:pointer;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;background:var(--bg2);border:1px solid var(--line)}
.product-card:hover,.product-card:focus-visible{border-color:var(--cyan)}
.product-img{aspect-ratio:1;border-radius:10px;background:#fff;display:grid;place-items:center;overflow:hidden;color:var(--muted)}.product-img img{width:100%;height:100%;object-fit:contain}
.product-name{font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.badge.game-ocg{background:#7a2b2b;color:#fff}.badge.game-rush{background:#a8590f;color:#fff}.badge.game-tcg{background:#24497a;color:#fff}
.product-card .badge{align-self:flex-start;font-size:10px}

/* ページの骨組み：見出しは固定の高さで上に置き、本文だけを縦に流す（スクロールバーが見出しにかからない） */
:root{--hh:60px}
html,body{height:100%}
body{display:flex;flex-direction:column;height:100dvh;height:100svh;overflow:hidden}
/* ↑ 画面の高さは、ブラウザの帯がいちばん大きい時の高さ（svh）にする。ページの中だけを動かすので帯は縮まず、下の「戻る・次へ」などが帯に隠れない */
.page-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch}
@media (max-width:520px){:root{--hh:104px}.site-header{padding:6px 12px;align-items:stretch}.site-header-inner{flex-wrap:wrap;row-gap:4px;align-content:center}.site-header-inner .site-nav{order:3;flex-basis:100%;justify-content:space-around}}

/* スマホ・タブレットの崩れの修正 */
.col-switch{margin-bottom:10px}
.filter-fold summary{cursor:pointer;font-weight:700;min-height:40px;display:flex;align-items:center;gap:6px;color:var(--cyan)}
.filter-fold[open] summary{margin-bottom:8px}
@media (max-width:1100px){
  .editor-layout[data-col]>.pool-col,.editor-layout[data-col]>.editor-col,.editor-layout[data-col]>.preview-col{display:none}
  .editor-layout[data-col="pool"]>.pool-col,.editor-layout[data-col="editor"]>.editor-col,.editor-layout[data-col="preview"]>.preview-col{display:block}
  .editor-layout[data-col]{grid-template-columns:1fr}
  #col-switch{display:block}
}
@media (min-width:1101px){#col-switch{display:none}}
@media (max-width:820px){
  .page-title{gap:6px}.page-title h1{font-size:20px;flex:1;min-width:0}.page-title .save-state{order:5;flex-basis:100%;font-size:12px}
  .stepper button{flex-direction:column;gap:2px;padding:6px 4px;font-size:11px}.stepper button .label{display:block}
  .hero{padding:20px}.hero .button.big{width:100%;justify-content:center}
  .action-bar .button{flex:1 1 calc(50% - 8px);justify-content:center;padding:8px 6px;font-size:13px}
  .detail-layout{gap:12px}.zoom-tools{gap:4px}.zoom-tools .button{padding:6px 8px;font-size:12px}
  .grid-form{grid-template-columns:1fr}
  .table{display:block;overflow-x:auto}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.tabs button{flex:none}
  .share-grid{grid-template-columns:repeat(3,1fr)}
  dialog{max-width:calc(100vw - 16px);padding:14px}
  .stat-card strong{font-size:22px}
  .rb-hand-cards{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
}
@media (max-width:520px){
  .site-header-inner .brand span{font-size:17px}.header-tools .icon-btn{min-width:36px;height:36px}.account-chip{max-width:120px;padding:5px 10px}
  main{padding:14px 12px 48px}
  .panel{padding:14px}
  .share-grid{grid-template-columns:repeat(2,1fr)}
  .stepper{gap:4px}
}

/* 行動の選択・カード一覧を格子状に */
.action-dialog{width:min(820px,96vw)}
.action-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.action-tile{min-height:52px}
.pool-tabs{display:flex;gap:4px;flex-wrap:wrap}
.pool-tab{border:1px solid var(--line);background:var(--bg2);color:var(--ink);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.pool-tab .count{font-size:11px;color:var(--muted)}
.pool-tab[aria-selected="true"]{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 16%,var(--panel))}
.pool-tab.tab-ok .count{color:var(--green)}.pool-tab.tab-cand .count{color:var(--gold)}
.pool-card.grp-ok{border-color:color-mix(in srgb,var(--green) 55%,transparent)}.pool-card.grp-cand{border-color:color-mix(in srgb,var(--gold) 65%,transparent)}.pool-card.grp-none{border-style:dashed;border-color:var(--line)}
.status-dict{background:var(--green);color:#082814}.status-unknown{background:var(--line);color:var(--ink)}
.card-pool{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
.text-add-dialog{width:min(560px,96vw)}.text-add-dialog textarea{width:100%;font-family:inherit}

.slot-row.drop-over{outline:2px dashed var(--cyan);outline-offset:4px;border-radius:10px;background:color-mix(in srgb,var(--cyan) 8%,transparent)}
.pool-card[draggable="true"]{cursor:grab}

/* 解説・関連リンク・実績・お知らせ */
.rich-editor{display:flex;flex-direction:column;gap:6px}
.rich-toolbar{display:flex;flex-wrap:wrap;gap:4px}
.rich-btn{min-width:34px;height:32px;padding:0 8px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font-weight:800;font-size:12px;cursor:pointer;display:inline-grid;place-items:center}
.rich-btn:hover{border-color:var(--cyan)}
.rich-area{min-height:160px;max-height:60vh;overflow:auto;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);line-height:1.8}
.rich-area:empty::before{content:attr(data-placeholder);color:var(--muted)}
.rich-area:focus{outline:2px solid var(--cyan);outline-offset:1px}
.rich-view h2,.rich-area h2{font-size:20px;margin:16px 0 6px}.rich-view h3,.rich-area h3{font-size:17px;margin:12px 0 4px}
.rich-view blockquote,.rich-area blockquote{margin:8px 0;padding:6px 12px;border-left:4px solid var(--cyan);background:var(--bg2);border-radius:0 8px 8px 0}
.rich-view{line-height:1.85;overflow-wrap:anywhere}.rich-view a{color:var(--cyan)}
.article-panel{margin:12px 0}
.link-list{list-style:none;padding:0;margin:6px 0;display:flex;flex-wrap:wrap;gap:6px}
.link-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);text-decoration:none;font-size:13px}
.link-chip:hover{border-color:var(--cyan)}.link-chip.kind-x img{filter:brightness(0)}:root[data-theme="dark"] .link-chip.kind-x img{filter:brightness(0) invert(1)}
.links-editor{display:flex;flex-direction:column;gap:6px}.link-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;gap:6px}
@media (max-width:520px){.link-row{grid-template-columns:1fr auto}.link-row input[type=url]{grid-column:1/2}}
.achv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.achv{display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--bg2)}
.achv.on{border-color:color-mix(in srgb,var(--gold) 60%,transparent)}.achv.on .icon{color:var(--gold)}.achv.off{opacity:.55}
.news-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;margin-bottom:12px;border:1px solid var(--line);background:var(--panel)}
.news-bar.kind-maintenance{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,var(--panel))}.news-bar a{flex:1;color:var(--ink);font-weight:700}
.news-mini{list-style:none;padding:0;margin:0}.news-mini li{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.news-mini a{flex:1;color:var(--ink)}
.badge.news-info{background:var(--panel2)}.badge.news-update{background:color-mix(in srgb,var(--cyan) 25%,var(--panel));}.badge.news-maintenance{background:color-mix(in srgb,var(--gold) 30%,var(--panel))}
.news-item h2{margin:6px 0}
/* 問い合わせのやりとり・定期処理の一覧・悪用対策・危ない操作の枠 */
.stack{display:flex;flex-direction:column;gap:10px}
.report-item,.report-thread{margin:12px 0;display:flex;flex-direction:column;gap:10px}
.report-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.thread{display:flex;flex-direction:column;gap:8px}.thread:empty{display:none}
.bubble{border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--bg2);max-width:min(100%,680px)}
.bubble p{margin:4px 0 0}.bubble.from-admin{align-self:flex-end;background:color-mix(in srgb,var(--cyan) 10%,var(--panel));border-color:color-mix(in srgb,var(--cyan) 40%,var(--line))}
.reply-box{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.reply-box textarea{min-height:80px}
.badge.st-open{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger)}
.badge.st-working,.badge.st-hold{background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold)}
.badge.st-done,.badge.st-ok{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
.badge.st-trash,.badge.st-draft{background:color-mix(in srgb,var(--muted) 18%,transparent);color:var(--muted)}
.job-list li{flex-direction:column;align-items:flex-start;gap:4px}.job-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.st-badge,.badge{white-space:nowrap}.table td{overflow-wrap:anywhere}
.danger-zone{margin-top:22px;border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}.danger-zone h2{color:var(--danger)}
/* 紐づけ（コンボ・デッキ・カードリスト） */
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:8px 0}
.link-card{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);min-width:0}
.link-card-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:var(--ink);text-decoration:none}
.link-thumb{flex:none;width:96px;height:50px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:var(--panel2);color:var(--muted)}.link-thumb img{width:100%;height:100%;object-fit:cover}
.link-body{display:flex;flex-direction:column;gap:3px;min-width:0}.link-title{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.link-title .badge{margin-right:6px}
.link-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.link-editor h4{margin:14px 0 6px}.link-section h3{font-size:15px;margin:12px 0 4px}
@media (max-width:560px){.link-grid{grid-template-columns:1fr}.link-thumb{width:72px;height:38px}}
/* 管理画面：表示の確認 */
.preview-wrap{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--bg2);margin-top:12px}
.preview-frame{border:0;transform-origin:0 0;background:var(--bg);display:block}
/* リミットレギュレーション */
.reg-head{margin:6px 0 12px}.reg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:12px}
.reg-sec h2{font-size:17px;margin-bottom:8px}.reg-forbidden h2{color:var(--danger)}.reg-limited h2{color:var(--gold)}.reg-semi_limited h2{color:var(--cyan)}.reg-release_of_restricted h2{color:var(--green)}
.reg-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;max-height:60vh;overflow:auto}.reg-list a{display:block;padding:4px 6px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:14px}.reg-list a:hover{background:var(--bg2)}
/* 言語の切り替え */
.lang-select{display:inline-flex;align-items:center;gap:6px}.lang-select select{min-height:34px;padding:4px 8px;width:auto;font-size:13px}
.site-footer .lang-select{margin-left:auto}
.feed-random{margin:8px 0 4px}#feed-note{margin:6px 0 0}
#sort-box{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* 余白の見直し：入力欄・ボタンの並び・案内が上下でくっつかないようにする（個別の指定があればそちらが優先） */
:where(.panel:not(.report-item):not(.report-thread):not(.link-card), form, #admin-panel, .optional-item, dialog) > :where(.field, label.field, .grid-form, .row, .notice, label.checkbox, fieldset, .money-row, .banner-list, .reply-box, .tabs, .stat-grid, table, ul.recent-list, .link-grid, .reg-grid, .preview-wrap) + :where(.field, label.field, .grid-form, .row, .notice, label.checkbox, fieldset, .money-row, .banner-list, .reply-box, .tabs, .stat-grid, table, ul.recent-list, .link-grid, .reg-grid, .preview-wrap){margin-top:12px}
:where(#admin-panel, .panel, dialog) > h2:not(:first-child){margin-top:22px}
:where(#admin-panel) > p + :where(.row, .grid-form, .field){margin-top:10px}
.row.admin-filter > select{width:auto;flex:0 0 auto}.row.admin-filter > input[type=search]{flex:1 1 220px;width:auto}
.health-banner + .row{margin-top:12px}
/* 設定に紐づく文面は、使っている時だけ見せる */
[data-when]:not(.when-on){display:none}
/* 横に並べた入力欄は上の余白をそろえる（縦の余白の指定を受けない） */
.grid-form > *{margin-top:0}
#main:focus{outline:none}

/* 図の閲覧：倍率を合わせた図を中央に置く */
.viewport > svg.diagram-svg{display:block;margin:0 auto}
.hero-sub{flex-basis:100%;gap:8px}
.step-drop{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;border:2px dashed var(--line);border-radius:12px;color:var(--muted);font-size:14px;text-align:center}.step-drop.drop-over,.slot-row.drop-over,.slot.drop-over{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,transparent)}

/* 動かして記録：デッキの並び（デッキ画像と同じ順）と最初の手札 */
.rp-sticky{position:sticky;top:0;z-index:5;display:flex;flex-direction:column;gap:10px;padding:12px 16px;margin-bottom:14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(6px)}
.rp-handbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rp-handchip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid var(--cyan);background:color-mix(in srgb,var(--cyan) 12%,var(--panel));color:var(--ink);cursor:pointer;font-size:13px;font-weight:700}
.rp-handchip img{width:24px;height:34px;object-fit:cover;border-radius:3px}.rp-handchip .count{color:var(--cyan)}
.rp-section h3{margin:14px 0 8px}
.rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.rp-tile{display:flex;flex-direction:column;gap:5px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);min-width:0}
.rp-tile.off{opacity:.45}.rp-tile.in-hand{border-color:var(--cyan);box-shadow:0 0 0 2px color-mix(in srgb,var(--cyan) 40%,transparent)}
.rp-tile.st-guess{border-color:var(--gold)}.rp-tile.st-missing{border-color:var(--danger)}
.rp-tile-img{position:relative;padding:0;border:0;background:var(--panel2);border-radius:8px;overflow:hidden;cursor:pointer;aspect-ratio:59/86;display:grid;place-items:center;color:var(--muted)}
.rp-tile-img img{width:100%;height:100%;object-fit:cover}
.rp-copies,.rp-inhand{position:absolute;padding:1px 7px;border-radius:999px;font-size:12px;font-weight:800}
.rp-copies{top:4px;right:4px;background:#0d1b2e;color:#fff}.rp-inhand{bottom:4px;left:4px;background:var(--cyan);color:var(--cyan-ink)}
.rp-tile-name{font-size:12px;font-weight:700;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rp-state{font-size:11px}.rp-state.st-ok{color:var(--green)}.rp-state.st-guess{color:var(--gold)}.rp-state.st-missing{color:var(--danger)}
.rp-tile-tools{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.rp-tile-tools .button.small{min-height:30px;padding:4px 8px;font-size:12px}
.rp-pick{display:flex;flex-direction:column;gap:6px;grid-column:1/-1}.rp-pick input{max-width:100%}
.rp-prefs{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.rp-pref{align-items:flex-start}.rp-pref > span{display:flex;flex-direction:column;gap:2px}
.rp-settings summary{cursor:pointer;display:flex;align-items:center;gap:6px}
.rp-seed{max-width:420px}


/* トップ：注目のコンボを大きく見せる（キャッチコピーは置かない） */
.home-hero.rich{grid-template-columns:1.35fr 1fr;align-items:stretch;gap:24px;padding:22px}
.featured{display:flex;flex-direction:column;gap:10px;min-width:0}
.featured-head{display:flex;align-items:center;justify-content:space-between}
.featured-label{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:13px;color:var(--gold)}
.featured-stage{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:1200/630;background:var(--deep);box-shadow:0 14px 40px #0006,0 0 0 1px color-mix(in srgb,var(--cyan) 25%,transparent);isolation:isolate}
.featured-stage img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.featured-stage:hover img{transform:scale(1.03)}
.featured-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,#060c18cc 78%,#060c18f2)}
.featured-meta{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;display:flex;flex-direction:column;gap:6px;color:#fff}
.featured-badges{display:flex;gap:6px;flex-wrap:wrap}
.featured-rank,.featured-kind{font-size:12px;font-weight:800;padding:2px 10px;border-radius:999px;background:#ffffff26;backdrop-filter:blur(6px);color:#fff}
.featured-rank.r1{background:linear-gradient(135deg,#f6d27a,#c9932f);color:#241700}.featured-rank.r2{background:linear-gradient(135deg,#e6edf5,#9fb0c3);color:#1a2230}.featured-rank.r3{background:linear-gradient(135deg,#f0c08f,#b77a3e);color:#2a1600}
.featured-title{font-size:clamp(18px,2vw,24px);line-height:1.35;text-shadow:0 2px 12px #000a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.featured-sub{display:flex;align-items:center;gap:6px;font-size:13px;color:#d9e4f1}.featured-sub .dot{width:3px;height:3px;border-radius:50%;background:#d9e4f1;opacity:.7}
.featured-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.featured-thumb{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;aspect-ratio:1200/630;background:var(--deep);opacity:.65;transition:opacity .2s,border-color .2s}
.featured-thumb img{width:100%;height:100%;object-fit:cover}
.featured-thumb[aria-selected="true"],.featured-thumb:hover{opacity:1;border-color:var(--cyan)}
.featured-empty{display:grid;place-items:center;gap:10px;aspect-ratio:1200/630;border-radius:16px;border:1px dashed var(--line);color:var(--muted)}
.home-hero.rich > div:first-child{display:flex;flex-direction:column;gap:14px}
.home-hero.rich #hero-actions{align-items:center;gap:12px}
.hero-links{flex-basis:100%;margin:2px 0 0;font-size:13px;color:var(--muted)}.hero-links a{color:var(--ink);text-underline-offset:3px}
@media (max-width:960px){.home-hero.rich{grid-template-columns:1fr;padding:14px}.featured-thumbs{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* 見出しの「遊ぶレギュレーション」「表示言語」 */
.header-filters{display:flex;gap:6px;align-items:center;flex:none}
.header-filters select{min-height:34px;height:34px;padding:2px 26px 2px 10px;font-size:12px;font-weight:700;border-radius:999px;width:auto;max-width:150px;background-color:var(--panel)}
@media (max-width:900px){.header-filters select{max-width:112px}}
@media (max-width:520px){:root{--hh:140px}.site-header-inner .brand{margin-right:auto}.header-filters{order:2;flex-basis:100%;gap:6px}.header-filters .hf{flex:1}.header-filters select{max-width:none;width:100%;height:30px;min-height:30px;font-size:12px}.site-header-inner .site-nav{order:3}.header-tools{gap:4px}}
@media (max-width:900px){.site-header-inner .brand span,.site-header-inner .brand small{display:none}.header-filters select{max-width:104px}}
@media (max-width:520px){.site-header-inner .brand span{display:inline}}

/* トップ：サブの操作・種類の切り替え・探すの下の人気のデッキ */
.hero-sub-actions{display:flex;flex-wrap:wrap;gap:8px;flex-basis:100%}
.home-hero.rich .hero-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.home-hero.rich #home-search{flex:none}
.side-rank{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);flex:1;min-height:0}
.side-rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.side-rank-list a{display:flex;gap:10px;align-items:center;padding:6px;border-radius:12px;color:var(--ink);text-decoration:none;background:var(--bg2);border:1px solid transparent}
.side-rank-list a:hover{border-color:var(--cyan)}
.side-thumb{flex:none;width:88px;aspect-ratio:1200/630;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:var(--deep);color:var(--muted)}.side-thumb img{width:100%;height:100%;object-fit:cover}
.side-body{display:flex;flex-direction:column;gap:2px;min-width:0}.side-body strong{font-size:13px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.side-body .badge{align-self:flex-start;font-size:11px}
.side-meta{display:inline-flex;align-items:center;gap:2px;white-space:pre}
.feed-kind{margin-bottom:8px}
.home-hero.rich #hero-actions .button.big{width:auto;flex:1 1 200px}
@media (max-width:520px){.featured-title{font-size:16px}.featured-meta{padding:10px 12px;gap:4px}.featured-sub{font-size:11px;flex-wrap:wrap}.featured-rank,.featured-kind{font-size:11px;padding:1px 8px}}

/* アイコン（決まった絵と色） */
.avatar-dot{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#0b1626;flex:none}
.avatar-dot.big{width:56px;height:56px}
.av-cyan{background:var(--cyan)}.av-gold{background:var(--gold)}.av-purple{background:var(--purple)}.av-green{background:var(--green)}.av-red{background:var(--danger)}.av-blue{background:#7aa7ff}.av-pink{background:#f29ac4}.av-gray{background:#b6c2d2}
.avatar-big{display:flex;align-items:center;gap:12px;margin:6px 0 4px}.avatar-big strong{font-size:18px}
.avatar-pick{display:flex;flex-wrap:wrap;gap:8px}
.avatar-opt{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.avatar-opt[aria-pressed="true"]{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 18%,var(--panel))}
.avatar-color{width:34px;height:34px;border-radius:50%;border:3px solid transparent;cursor:pointer}
.avatar-color[aria-pressed="true"]{border-color:var(--ink)}
.settings-sec{margin-bottom:14px}
.account-chip .avatar-dot{width:20px;height:20px}
@media (max-width:520px){.header-filters select{max-width:none}}

.site-about{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.7}
.filter-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* 動かして記録：画面下に常に出す、場所ごとの中身 */
.rz-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:color-mix(in srgb,var(--panel) 96%,transparent);border-top:1px solid var(--line);backdrop-filter:blur(8px);padding:6px 12px 8px;box-shadow:0 -8px 24px rgba(0,0,0,.25)}
.rz-head{display:flex;align-items:center;gap:6px}
.rz-tabs{display:flex;gap:4px;overflow-x:auto;flex:1;min-width:0}
.rz-tabs button{border:1px solid var(--line);background:var(--bg2);color:var(--ink);border-radius:999px;padding:4px 10px;font-size:13px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;cursor:pointer}
.rz-tabs button[aria-selected="true"]{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 20%,var(--panel))}
.rz-body{margin-top:6px;max-height:140px;overflow:auto}
.rz-bar.closed .rz-body{display:none}
.rz-cards{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.rz-card{flex:none;width:62px;border:1px solid var(--line);border-radius:6px;background:var(--bg2);color:var(--ink);padding:2px;cursor:pointer;display:grid;gap:2px;font:inherit}
.rz-card img{width:100%;aspect-ratio:59/86;object-fit:cover;border-radius:4px}
.rz-noimg{display:grid;place-items:center;aspect-ratio:59/86;font-size:10px;line-height:1.2;overflow:hidden;padding:2px;text-align:center}
.rz-name{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rz-card.selected{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.rz-note{margin:4px 0 0}
.rz-space{padding-bottom:200px}
.rp-cardinfo{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.rp-cardinfo img{width:72px;border-radius:6px;flex:none}
.rp-cardinfo p{margin:4px 0 0}
.rp-desc{white-space:pre-wrap;max-height:9em;overflow:auto}
.rp-startopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:10px}
button.rb-slot.filled.info{cursor:zoom-in}

.problem-list{list-style:none;padding:0;margin:8px 0;display:grid;gap:4px}
.link-btn{all:unset;cursor:pointer;color:var(--danger);display:inline-flex;align-items:center;gap:4px;text-decoration:underline;text-underline-offset:3px}
.link-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.flash-target{animation:flash-target 1.8s ease}
@keyframes flash-target{0%,60%{box-shadow:0 0 0 3px var(--gold)}100%{box-shadow:0 0 0 0 transparent}}
.form-dialog{max-width:440px;width:calc(100% - 32px)}
.start-note{flex-basis:100%;grid-column:1/-1;margin:4px 0 0}.start-note>.help-btn{display:none}

.avatar-img{border-radius:50%;object-fit:cover;flex:none;background:var(--bg2)}
.meta-pill.comments{color:var(--cyan)}.meta-pill.views{color:var(--muted)}
.combo-card .author-line{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.combo-card .author-line .who{display:inline-flex;align-items:center;gap:5px;color:var(--ink);font-weight:600;min-width:0}
.combo-card .author-line .who span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:12em}
.detail-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px;font-size:13px;color:var(--muted)}
.detail-meta .who{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:700;text-decoration:none}
.detail-meta .stat{display:inline-flex;align-items:center;gap:4px}

.notify-kinds{display:grid;gap:4px;margin-top:8px}

/* 会員の一覧 */
.user-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.user-card{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);color:var(--ink);text-decoration:none;box-shadow:var(--shadow);min-width:0}
.user-card:hover{border-color:var(--cyan)}
.user-card.compact{padding:8px 10px;box-shadow:none;background:var(--bg2);gap:4px}
.user-top{display:flex;align-items:center;gap:10px;min-width:0}
.user-name{display:flex;flex-direction:column;min-width:0}.user-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-name .small{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.user-rank{min-width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--gold);color:#1b1b1b;font-weight:900;font-size:12px}
.user-recent{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.user-recent-item{aspect-ratio:1.9;border-radius:8px;overflow:hidden;background:var(--bg2);display:grid;place-items:center;color:var(--muted)}
.user-recent-item img{width:100%;height:100%;object-fit:cover}
.side-users{display:grid;gap:6px}
.profile-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.profile-head h1{margin:0}
.profile-counts{display:flex;gap:12px;color:var(--muted);font-size:13px}
.feed-item-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:4px}

.comment-like{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--bg2);color:var(--muted);border-radius:999px;padding:2px 10px;font-size:12px;cursor:pointer;margin-top:4px}
.comment-like[aria-pressed="true"]{color:var(--danger);border-color:var(--danger)}
/* キーワードのページ（P91） */
.tag-info-row{gap:10px 14px;flex-wrap:wrap;align-items:center}.tag-like[aria-pressed="true"]{color:var(--danger);border-color:var(--danger)}.term-likes{display:inline-flex;align-items:center;gap:3px}
.comment-like:disabled{cursor:default;opacity:.6}
.side-comments{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.side-comments a{display:grid;gap:4px;padding:8px 10px;border-radius:12px;background:var(--bg2);border:1px solid transparent;color:var(--ink);text-decoration:none}
.side-comments a:hover{border-color:var(--cyan)}
.side-comments .c-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.side-comments .c-body{font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.side-comments .c-on{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.icon-btn.small{width:30px;min-width:30px;height:30px}
.rp-tile-tools .icon-btn[aria-pressed="true"]{border-color:var(--cyan);color:var(--cyan)}
.rp-tile.off .rp-tile-tools .icon-btn[aria-pressed="false"]{color:var(--muted)}

.home-social{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0}
.home-social .side-users{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){.home-social{grid-template-columns:1fr}}
@media (max-width:520px){.home-social .side-users{grid-template-columns:1fr}}

.traffic .stat-grid{margin-top:8px}
.traffic-table{width:100%;border-collapse:collapse;font-size:13px}
.traffic-table th,.traffic-table td{padding:3px 6px;text-align:right;border-bottom:1px solid var(--line)}
.traffic-table th:first-child,.traffic-table td:first-child{text-align:left}
.traffic-table .bar-col{width:40%;text-align:left}
.traffic-bars{display:grid;gap:2px}
.traffic-bar{display:block;height:6px;border-radius:3px;background:var(--cyan)}.traffic-bar.u{background:var(--gold)}

/* 管理画面：未対応の件数と、押して移れる項目 */
.nav-badge{margin-left:auto;padding-left:8px;color:var(--danger);font-weight:900;font-size:16px;line-height:1}
[data-tab="reports"]{display:flex;align-items:center;gap:4px}
[data-tab][aria-current="true"] .nav-badge{color:#fff}
.health-list li.go{cursor:pointer;border-radius:10px}
.health-list li.go:hover,.health-list li.go:focus-visible{background:var(--bg2);outline:none}
.health-list .go-arrow{color:var(--muted)}
button.stat-card.go{font:inherit;color:inherit;text-align:left;cursor:pointer;border:1px solid var(--line)}
button.stat-card.go:hover{border-color:var(--cyan)}
.banner-links{display:flex;flex-wrap:wrap;gap:4px 12px}
.banner-links .link-btn{color:inherit}

/* 一覧のカード：横に並べても段がずれないように、各行の高さと行数を決める */
.combo-grid{align-items:stretch}
.combo-card{height:100%}
.combo-card .thumb{position:relative}
.card-rank{position:absolute;left:8px;top:8px;background:rgba(10,20,34,.85);color:#fff;font-weight:900;font-size:12px;border-radius:8px;padding:2px 8px}
.card-rank.r1{background:var(--gold);color:#1b1b1b}.card-rank.r2{background:#c9d3df;color:#1b1b1b}.card-rank.r3{background:#d9a06b;color:#1b1b1b}
.combo-card .body{flex:1;gap:6px}
.card-badges{display:flex;gap:4px;align-items:center;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;min-height:22px}
.card-badges .badge{flex:none}
.card-attr{flex:none;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:1px 6px;background:transparent}
.combo-card .card-title{font-size:15px;line-height:1.4;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em;overflow-wrap:anywhere}
.combo-card .card-summary{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3em}
.card-names{display:flex;gap:4px;align-items:center;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;min-height:24px;color:var(--muted)}
.card-name{flex:0 1 auto;min-width:3.5em;max-width:62%;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;color:var(--ink);background:color-mix(in srgb,var(--cyan) 10%,var(--bg2));border-radius:4px;padding:2px 6px}
.card-more{flex:none;font-size:11px;color:var(--muted)}
.card-foot{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:5px;padding-top:6px;border-top:1px dashed var(--line)}
.card-stats{display:flex;gap:14px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.card-stat{display:inline-flex;align-items:center;gap:4px}
.card-stat:nth-child(2){color:var(--danger)}
/* 投稿・更新の日時：カードの幅に入らない時は「更新」を次の行へ（10/25：長い日時に引っぱられて、数の並びの版が見切れていた） */
.card-dates{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:11.5px;color:var(--muted);min-width:0}
.card-date{display:inline-flex;gap:5px;white-space:nowrap}
.card-date-label{font-weight:700;color:var(--ink);opacity:.75}
.card-date.muted span:last-child{opacity:.6}
@media (max-width:420px){.card-dates{grid-template-columns:1fr}}
/* 日本語以外は見出し（Posted・Updated など）が長いので、入らない時は折り返す */
html:not([lang="ja"]) .card-dates{display:flex;flex-wrap:wrap}

/* 並べ替え・ページ */
.sort-controls{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.sort-field{display:grid;gap:2px}
.sort-field select{min-width:9em}
.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;margin:16px 0}
.pager-info{margin-right:8px}
.pager-btn{min-width:38px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;font:inherit;padding:0 10px}
.pager-btn[aria-current="page"]{background:var(--cyan);border-color:var(--cyan);color:#0b1626;font-weight:800}
.pager-btn:disabled{opacity:.4;cursor:default}
.pager-gap{color:var(--muted)}
.result-part+.result-part::before{content:'／';margin:0 6px;opacity:.5}

/* ランキングの欄（種類→期間） */
.rank-panel{margin-top:14px}
.rank-types{margin:4px 0 8px;overflow-x:auto}
.rank-types .seg{flex-wrap:nowrap}
@media (max-width:640px){.rank-types .seg button{padding:6px 9px;gap:4px;font-size:13px}.rank-types .seg button svg{display:none}}
.rank-note{margin:6px 0}
.rank-body .combo-grid{margin-top:4px}
.comment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.comment-card{display:grid;gap:6px;padding:10px 12px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);color:var(--ink);text-decoration:none;min-width:0}
.comment-card:hover{border-color:var(--cyan)}
.comment-card .c-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden}
.comment-card .c-meta strong{color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.comment-card .c-likes{color:var(--danger)}
.comment-card .c-body{font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:4.5em}
.comment-card .c-on{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.term-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}
.term-list a{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--bg2);border:1px solid transparent;color:var(--ink);text-decoration:none}
.term-list a:hover{border-color:var(--cyan)}
.term-list .term-word{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.term-list .term-last{grid-column:2/4;font-size:11px;margin-top:-4px}
.term-list .rank-no{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--panel2);font-weight:800;font-size:12px}
.term-list li:nth-child(1) .rank-no{background:var(--gold);color:#1b1b1b}
.term-list .rank-count{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}
.browse-row{gap:16px;align-items:end}
.list-switch{overflow-x:auto;flex-wrap:nowrap;max-width:100%}
.list-switch a{white-space:nowrap}

/* 探すの候補：入れ替わる時に少しだけ薄くする。出どころで色を変える */
#home-tags{transition:opacity .18s}
.hint-fade{opacity:.15}
.chip-btn.hint-history svg{color:var(--purple)}.chip-btn.hint-recent svg{color:var(--cyan)}.chip-btn.hint-popular svg{color:var(--gold)}

/* リミットレギュレーション：適用日の選択・ポイント表 */
.reg-date{display:inline-flex;align-items:center;gap:6px}
.reg-note{margin:6px 0 10px}
.reg-points li{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:8px}
.reg-points .pt{display:grid;place-items:center;height:24px;border-radius:6px;background:var(--panel2);font-weight:800;font-variant-numeric:tabular-nums}
.pt-change{display:inline-flex;align-items:center;gap:2px;font-size:12.5px;font-weight:800;padding:2px 8px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.3}
.pt-change.up{color:#fff;background:var(--danger)}.pt-change.down{color:#fff;background:var(--green)}
.reg-legend{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
/* 投稿ごとのレギュレーションの内訳 */
.reg-panel.loading{min-height:120px}
/* 切り抜き：範囲をなぞって枠を作る */
.area-tool{display:flex;flex-direction:column;gap:6px;margin:8px 0;padding:10px 12px;border:1px dashed var(--cyan);border-radius:12px;background:color-mix(in srgb,var(--cyan) 6%,var(--panel))}
.area-tool .field.inline{display:inline-flex;align-items:center;gap:6px}.area-tool .field.inline input{width:64px}
.reg-bd{display:flex;flex-direction:column;gap:8px}
.reg-bd-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.reg-bd-head .icon{color:var(--cyan)}
.reg-bd-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.reg-bd-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);font-size:13px}
.reg-bd-chip b{font-variant-numeric:tabular-nums}
.reg-bd-chip.tone-danger{border-color:var(--danger);color:var(--danger)}.reg-bd-chip.tone-gold{border-color:var(--gold);color:var(--gold)}.reg-bd-chip.tone-cyan{border-color:var(--cyan);color:var(--cyan)}.reg-bd-chip.tone-ok{color:var(--green);border-color:var(--green)}
.reg-bd-total{font-weight:800;font-size:14px;margin-left:2px}
.reg-bd-problems{list-style:none;margin:0;padding:8px 10px;display:flex;flex-direction:column;gap:4px}.reg-bd-problems li{display:flex;gap:6px;align-items:flex-start}
.reg-bd-names summary{cursor:pointer}.reg-bd-names p{margin:4px 0}
.reg-breakdown-box{margin-top:8px}.reg-breakdown-box:empty{display:none}

/* 初動のコスト・制約、自由な項目、手順の⓪ */
.cost-box{display:grid;gap:6px;padding:10px;border:1px dashed var(--line);border-radius:12px}
.cost-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cost-label{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:13px;min-width:11em}
.cost-num{display:inline-flex;align-items:center;gap:4px}.cost-num input{width:6.5em}
.cost-row input.grow{flex:1 1 12em;min-width:0}
.cost-add{justify-self:start;max-width:100%}
.extra-row{display:grid;grid-template-columns:minmax(6em,10em) 1fr auto;gap:6px;align-items:start;margin-bottom:6px}
@media (max-width:520px){.extra-row{grid-template-columns:1fr auto}.extra-row textarea{grid-column:1/2}}
.step-zero{display:flex;gap:10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--cyan) 8%,var(--bg2));border:1px solid var(--line);margin-top:10px}
.step-zero-no{font-size:22px;font-weight:900;color:var(--cyan);line-height:1}
.step-zero-head{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:6px}
.zero-card{position:relative;display:inline-block;width:52px}.zero-card .count{position:absolute;right:2px;bottom:2px;background:var(--gold);color:#1b1b1b;border-radius:4px;font-size:10px;padding:0 3px}
.zero-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;border:1px dashed var(--line);border-radius:999px;padding:3px 10px;align-self:center}
.zero-costs{margin:6px 0 0;padding-left:18px;font-size:12.5px}

/* 動かして記録の準備：名前の行数に関係なく、ボタンを下にそろえて中央に並べる */
.rp-tile-name{min-height:2.6em;text-align:center}
.rp-state{text-align:center}
.rp-tile-tools{justify-content:center;flex-wrap:nowrap;margin-top:auto}
.rp-tile .rp-pick{margin-top:4px}

/* 動かして記録：カード名を決める窓 */
.name-dialog{width:min(560px,calc(100% - 32px))}
.name-dialog-top{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.name-dialog-top img,.name-dialog-top .noimg{width:72px;aspect-ratio:59/86;border-radius:6px;object-fit:cover;flex:none;display:grid;place-items:center;background:var(--bg2)}
.name-dialog h3{margin:10px 0 6px;color:var(--muted)}
.name-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;max-height:240px;overflow:auto;margin-top:6px}
.name-opt{display:flex;align-items:center;justify-content:space-between;gap:6px;text-align:left;font:inherit;font-size:12.5px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg2);color:var(--ink);cursor:pointer;min-width:0}
.name-opt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.name-opt:hover{border-color:var(--cyan)}.name-opt.on{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 14%,var(--bg2))}
.mini-stepper{display:inline-flex;align-items:center;gap:6px}
.rp-tile-tools .icon-btn.need{border-color:var(--danger);color:var(--danger)}
.rp-hint{flex-basis:100%;color:var(--gold)}.rp-hint.ok{color:var(--green)}

/* 公開：チェックの項目を縦一列に */
.check-col{display:grid;gap:8px;margin:10px 0}
.check-line{display:flex;align-items:center;gap:6px}
.range-note{margin:6px 0 0}
.reg-date span{white-space:nowrap}

/* 見出しの遊び方・言語：選んだ文字を枠の中で中央に */
.header-filters select{text-align:center;text-align-last:center;padding-left:22px;padding-right:22px}
.header-filters select option{text-align:left}

/* カード一覧：取り込んだデッキと同じような格子（1行5枚・区分ごと） */
.card-pool{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.card-pool .pool-card{padding:2px;font-size:10px}
.card-pool .pool-card>span:not(.status):not(.copies){display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-pool .pool-card .status{width:16px;height:16px;font-size:9px;top:2px;right:2px}
.card-pool .pool-card .copies{font-size:9px;padding:0 3px;top:2px;left:2px}
.pool-section{grid-column:1/-1;font-size:12px;font-weight:800;color:var(--muted);padding:6px 2px 2px;border-bottom:1px solid var(--line)}
.card-pool .empty-state{grid-column:1/-1}

/* カードの情報の窓：すっきり整理（間隔をそろえる） */
.card-info-v2{grid-template-columns:132px 1fr;align-items:start}
.card-info-v2 img,.card-info-v2 .noimg{width:132px;aspect-ratio:59/86;object-fit:cover}
.card-info-main{display:grid;gap:10px;min-width:0}
.card-info-main .field-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-cands{display:grid;gap:6px;padding:8px 10px;border:1px dashed var(--line);border-radius:10px}
.card-cands p{margin:0}
.info-list.compact{margin:0;row-gap:6px}
.card-actions{gap:8px}
.card-opts{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.card-opts summary{cursor:pointer;color:var(--muted)}
.card-opts[open] summary{margin-bottom:8px}
.card-foot-tools{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
/* ボタンの行がその下の項目とくっつかないように */
dialog .row + .optional, dialog .row + details, dialog .row + .row{margin-top:10px}

/* 動かして記録：候補のカード画像と、カードの詳細の欄 */
.rp-choice.with-card{display:flex;align-items:center;gap:10px;text-align:left}
.rp-choice-img{width:34px;aspect-ratio:59/86;object-fit:cover;border-radius:4px;flex:none;display:grid;place-items:center;background:var(--panel2);color:var(--muted)}
.rp-focus-head{display:flex;gap:10px;align-items:flex-start}
.rp-focus-head img,.rp-focus-head .noimg{width:84px;aspect-ratio:59/86;object-fit:cover;border-radius:6px;flex:none;display:grid;place-items:center;background:var(--panel2)}
.rp-focus .rp-desc{max-height:10em}
.rp-focus .shop-links.compact{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.rp-focus .shop-links.compact .shop-link{font-size:12px;padding:4px 10px}
.rp-ad{margin-top:8px}
.rp-focus-wrap{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.rp-focus-wrap h3{margin:0 0 8px;display:flex;align-items:center;gap:4px;color:var(--muted)}

/* 一覧のいいね（その場で押せる） */
.card-like{font:inherit;border:0;background:transparent;padding:2px 6px;margin:-2px -6px;border-radius:999px;cursor:pointer;color:var(--danger)}
.card-like:hover{background:color-mix(in srgb,var(--danger) 12%,transparent)}
.card-like[aria-pressed="true"] svg{fill:currentColor}
.card-like:disabled{opacity:.6}

/* 見出しの項目：広い画面では文字も、少し狭いと補助の項目は絵だけ、さらに狭いと補助の項目は隠す（フッターから行ける） */
.site-nav{overflow-x:auto;scrollbar-width:none}.site-nav::-webkit-scrollbar{display:none}
.site-nav a.nav-sub{font-weight:600;font-size:13px;padding:8px 10px}
.site-nav a.nav-sub:first-of-type{margin-left:6px}
@media (max-width:1280px){.site-nav a.nav-sub span{display:none}.site-nav a.nav-sub{padding:9px}}
@media (max-width:640px){.site-nav a.nav-sub{display:none}}
.news-top{margin-bottom:12px}

/* 最新の商品：押すと直接ショップへ。発売予定・発売済みの2段。「AD」は画像の隅に小さく */
.product-card{display:flex;flex-direction:column}
.product-main{display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none;flex:1}
.product-main:hover .product-name{text-decoration:underline}
.product-img{position:relative}
.ad-mark{position:absolute;right:4px;bottom:4px;font-size:9px;line-height:1;padding:2px 4px;border-radius:3px;background:rgba(0,0,0,.45);color:#fff;letter-spacing:.04em}
.product-shops{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:6px;font-size:11px}
.product-shops a{color:var(--muted)}
.product-row+.product-row{margin-top:10px}
.product-row-head{display:flex;align-items:center;gap:6px;margin:4px 0 6px}
.product-row-head h3{font-size:15px;margin:0}

/* 広告の印は「AD」と小さく */
.disclosure{font-size:10px;letter-spacing:.06em;opacity:.8}
.ad-slot::before{content:'AD';font-size:10px;letter-spacing:.06em}

/* 未保存の表示：変えた項目に印、画面下に帯（保存・元に戻す・Ctrl+S） */
.is-unsaved{box-shadow:inset 3px 0 0 var(--gold),0 0 0 1px color-mix(in srgb,var(--gold) 55%,transparent);border-radius:8px}
label.checkbox.is-unsaved{padding-left:8px}
.unsaved-bar{position:fixed;left:16px;right:16px;bottom:16px;margin:0 auto;width:fit-content;z-index:60;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;padding:10px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--gold);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.unsaved-text{font-weight:700;font-size:14px}
.unsaved-bar kbd{font:inherit;font-size:11px;opacity:.8;border:1px solid currentColor;border-radius:4px;padding:0 4px;margin-left:4px}

/* 主なリンクの4つの欄 */
.quick-links{display:grid;gap:8px}
.quick-row{display:grid;grid-template-columns:150px 1fr;gap:4px 10px;align-items:center}
.quick-name{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px}
.quick-row.kind-x .quick-name img{filter:brightness(0)}:root[data-theme="dark"] .quick-row.kind-x .quick-name img{filter:brightness(0) invert(1)}
.quick-note{grid-column:2;min-height:1em}
.quick-rest{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
@media (max-width:560px){.quick-row{grid-template-columns:1fr}.quick-note{grid-column:1}}
.link-kind{font-size:11px;font-weight:700;color:var(--muted);border-right:1px solid var(--line);padding-right:6px}
button.link-chip{font:inherit;font-size:13px;cursor:pointer}
/* 質問に答えて解説を作る */
.wizard-dialog{width:min(980px,calc(100vw - 32px))}
.wizard-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.wizard-qs{display:grid;gap:8px;max-height:60vh;overflow:auto;padding-right:4px}
.wizard-preview{border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-height:200px;max-height:60vh;overflow:auto;background:var(--bg2)}
@media (max-width:760px){.wizard-grid{grid-template-columns:1fr}}

/* 投稿ページの上部：題名・概要・主なリンク・紐づいた投稿 */
.detail-head{margin:4px 0 12px}
.detail-kicker{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.detail-kicker .meta-pill.tag{text-decoration:none;color:inherit}
.detail-head h1{font-size:clamp(22px,2.6vw,30px);line-height:1.3;margin:0 0 6px}
.detail-lead{color:var(--muted);margin:0 0 8px;line-height:1.7}
.link-list.compact{margin:6px 0 4px}
/* YouTube の動画の見本の絵 */
.yt-cards{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 4px}
.yt-card{display:flex;flex-direction:column;gap:4px;width:min(240px,100%);color:var(--ink);text-decoration:none}
.yt-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--panel2);border:1px solid var(--line)}
.yt-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}
.yt-card:hover .yt-thumb img{transform:scale(1.04)}
.yt-play{position:absolute;inset:auto auto 8px 8px;display:grid;place-items:center;width:38px;height:28px;border-radius:8px;background:rgba(220,30,30,.92);color:#fff}
/* ニューロンのアプリが無い人向けの「ブラウザ版で開く・アプリを入手」 */
.link-list li.has-help{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.neuron-ways{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}.neuron-ways a{color:var(--cyan);font-weight:700}
.neuron-help{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 10px}.neuron-help a{display:inline-flex;align-items:center;gap:3px;color:var(--cyan);text-decoration:none;font-weight:700}.neuron-help a:hover{text-decoration:underline}
.link-strip-slot{min-height:0}
.link-strip{margin:10px 0 2px;border:1px solid var(--line);border-radius:14px;padding:8px 10px;background:var(--panel)}
.link-strip-head{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;margin-bottom:6px}
.link-strip-track{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.link-strip-item{display:flex;gap:8px;align-items:center;flex:0 0 280px;min-width:0;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--bg2)}
.link-strip-item:hover{border-color:var(--cyan)}
.link-strip-item .link-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:13px}
.link-strip-item .link-body{min-width:0;display:grid}
/* 解説の見出しを読みやすく */
.article-panel .rich-view h2{font-size:19px;padding-left:12px;border-left:4px solid var(--gold);margin:20px 0 8px}
.article-panel .rich-view h2:first-child{margin-top:4px}
.article-panel .rich-view ul{padding-left:1.3em}
.article-panel .rich-view li{margin:2px 0}

/* 右上の名前を押した時のメニュー */
.account-menu{position:fixed;z-index:70;min-width:220px;display:grid;padding:6px;border-radius:12px;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.22)}
.account-menu a{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;color:inherit;text-decoration:none;font-size:14px}
.account-menu a:hover,.account-menu a:focus-visible{background:var(--bg2)}
.me-public{float:right;font-size:13px;margin-top:2px}

/* ログインの表示が名前に変わっても、見出しのほかのボタンが動かないように幅をとっておく */
@media (min-width:641px){.account-chip{min-width:118px;justify-content:center}}

/* 読み込み中は本文を隠し、そろってから静かに出す（ずれを見せない）。JS が動かなくても2秒で出る。 */
main[data-boot]{visibility:hidden;animation:boot-show 0s 2s forwards}
@keyframes boot-show{to{visibility:visible}}
main.booted{animation:boot-fade .16s ease-out}
@keyframes boot-fade{from{opacity:.001}to{opacity:1}}
@media (prefers-reduced-motion:reduce){main.booted{animation:none}}

.product-price{font-size:13px;font-weight:700;color:var(--ink)}
#products-slot2 .products{margin-top:14px}
.products .product-row-head{justify-content:flex-end;margin-top:-40px;margin-bottom:8px;pointer-events:none}
.products .product-row-head button{pointer-events:auto}
main[data-boot]~.site-footer{visibility:hidden}
@media (max-width:640px){.account-chip{min-width:96px;justify-content:center}}

/* トップ以外の商品の紹介：小さな欄と、一覧の間の商品カード */
.products-aside{display:grid;gap:8px}
.pa-head{display:flex;align-items:center;gap:8px}.pa-head h2{font-size:15px;margin:0}
.ad-tag{font-size:10px;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:auto}
.pa-item{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit;padding:6px;border-radius:10px;border:1px solid transparent}
.pa-item:hover{border-color:var(--line);background:var(--bg2)}
.pa-thumb{width:56px;height:56px;flex:none;border-radius:8px;background:#fff;display:grid;place-items:center;overflow:hidden;color:var(--muted)}
.pa-thumb img{width:100%;height:100%;object-fit:contain}
.pa-body{display:grid;gap:2px;min-width:0}.pa-body strong{font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pa-shop{display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:700;color:var(--cyan)}
#reg-products .products-aside{margin-top:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
#reg-products .pa-head{grid-column:1/-1}
.combo-card.product-ad .thumb{position:relative;background:#fff}.combo-card.product-ad .thumb img{object-fit:contain;padding:8px}
.combo-card.product-ad h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 商品カード：名前は3行分の高さをとり、発売日・値段は下にそろえる（横一列で高さをそろえる） */
.product-main .product-name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;min-height:calc(1.4em * 3)}
.product-main>.small{margin-top:auto}

.launch-panel{border-color:var(--gold)}.launch-state{margin:10px 0}

/* 問い合わせ：分類ごとの欄 */
.contact-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 16px;margin:4px 0}
.contact-fields .checkbox{grid-column:1/-1}
.req{color:var(--danger)}

/* パラメータ（五角形などの図） */
.param-rows{display:grid;gap:6px;margin:8px 0}
.param-row{display:grid;grid-template-columns:minmax(120px,2fr) 80px 80px 80px 40px 32px;gap:6px;align-items:center}
.param-row.head span{font-size:12px}
@media (max-width:560px){.param-row{grid-template-columns:1fr 56px 56px 48px 32px 28px}}
.params-preview{max-width:420px;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:8px}
.params-svg{display:block;width:100%;height:auto}
.detail-params{margin:10px 0 4px;max-width:380px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.detail-params figcaption{font-weight:700;font-size:14px;padding:8px 12px 0}

/* 関連リンクのQRコード */
.links-qr{margin:6px 0}
.links-qr>summary{cursor:pointer;font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.links-qr-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.qr-card{display:grid;justify-items:center;gap:4px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:inherit;text-decoration:none;max-width:140px}
.qr-card svg{border-radius:6px}
.qr-card span{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quick-qr{grid-column:2;display:block;line-height:0}
.quick-qr:empty{display:none}
.quick-qr svg{border-radius:4px;border:1px solid var(--line)}
.money-master{border-color:var(--gold);margin-bottom:14px}.money-master .checkbox.big{font-size:15px;gap:10px}.money-master .checkbox.big input{width:20px;height:20px}
/* 作る画面の始め方のボタン：文字を途中で折り返さない（狭い画面では1列に並べる） */
#start-options .button.big{white-space:nowrap}
@media (max-width:640px){#start-options .button.big{width:100%;justify-content:center}}
/* ボタンの文字は単語の途中で1文字だけ折り返さない（全体の決まり） */
.button{word-break:keep-all;overflow-wrap:anywhere}

.frame-field .custom-size{gap:6px;align-items:center;margin-top:6px}.frame-field .custom-size input{width:100px}
.frame-hint{margin:4px 0 0;min-height:1.4em}

/* ユーザーレベル：アイコンの縁・Lv の印・名前の色（段階ごとに華やかに） */
.av-wrap{position:relative;display:inline-flex;flex:none;border-radius:50%}
.av-wrap>.avatar-img,.av-wrap>.avatar-dot{border-radius:50%}
.av-wrap.tier-bronze{box-shadow:0 0 0 2px #b97a44}
.av-wrap.tier-silver{box-shadow:0 0 0 2px #cfd6df,0 0 6px 1px rgba(207,214,223,.65)}
.av-wrap.tier-gold{box-shadow:0 0 0 2px #e6b35a,0 0 10px 2px rgba(230,179,90,.6)}
.av-wrap.tier-platinum{box-shadow:0 0 0 2px #9fe7ff,0 0 12px 3px rgba(159,231,255,.6);animation:lv-glow 3s ease-in-out infinite}
.av-wrap.tier-legend{box-shadow:0 0 0 2.5px #ff6ec7,0 0 14px 4px rgba(255,110,199,.55);animation:lv-rainbow 4s linear infinite}
@keyframes lv-glow{0%,100%{box-shadow:0 0 0 2px #9fe7ff,0 0 10px 2px rgba(159,231,255,.5)}50%{box-shadow:0 0 0 2px #d9b8ff,0 0 16px 4px rgba(217,184,255,.7)}}
@keyframes lv-rainbow{0%{box-shadow:0 0 0 2.5px #ff6ec7,0 0 14px 4px rgba(255,110,199,.55)}25%{box-shadow:0 0 0 2.5px #ffd36e,0 0 14px 4px rgba(255,211,110,.55)}50%{box-shadow:0 0 0 2.5px #6effa8,0 0 14px 4px rgba(110,255,168,.55)}75%{box-shadow:0 0 0 2.5px #6ec7ff,0 0 14px 4px rgba(110,199,255,.55)}100%{box-shadow:0 0 0 2.5px #ff6ec7,0 0 14px 4px rgba(255,110,199,.55)}}
@media (prefers-reduced-motion:reduce){.av-wrap.tier-platinum,.av-wrap.tier-legend{animation:none}}
.av-lvbadge{position:absolute;right:-4px;bottom:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;font-size:10px;font-weight:800;line-height:18px;text-align:center;color:#1b1b1b;background:#e6b35a;border:2px solid var(--panel)}
.tier-bronze .av-lvbadge{background:#c98d55}.tier-silver .av-lvbadge{background:#dfe5ec}.tier-platinum .av-lvbadge{background:linear-gradient(135deg,#9fe7ff,#d9b8ff)}.tier-legend .av-lvbadge{background:linear-gradient(135deg,#ff6ec7,#ffd36e,#6effa8,#6ec7ff)}
.av-crown{position:absolute;left:50%;top:-9px;transform:translateX(-50%);color:#ffd36e;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));line-height:0}
.av-crown svg{fill:currentColor}
.lv-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:1px 7px;border-radius:999px;vertical-align:middle;border:1px solid var(--line);color:var(--muted);background:var(--bg2);white-space:nowrap}
.lv-chip.tier-bronze{color:#8a5426;border-color:#c98d55;background:rgba(201,141,85,.12)}
.lv-chip.tier-silver{color:#5d6a78;border-color:#b9c2cc;background:rgba(207,214,223,.25)}
.lv-chip.tier-gold{color:#7a5410;border-color:#e6b35a;background:rgba(230,179,90,.18)}
.lv-chip.tier-platinum{color:#fff;border-color:transparent;background:linear-gradient(135deg,#5fc8e6,#a77fe0)}
.lv-chip.tier-legend{color:#fff;border-color:transparent;background:linear-gradient(135deg,#ff6ec7,#ffb84d,#3fd98a,#4da6ff);background-size:200% 200%;animation:lv-shift 5s ease infinite}
@keyframes lv-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
:root[data-theme="dark"] .lv-chip.tier-bronze{color:#e0a874}:root[data-theme="dark"] .lv-chip.tier-silver{color:#dfe5ec}:root[data-theme="dark"] .lv-chip.tier-gold{color:#f2c879}
.lv-title{font-size:11px;font-weight:700;margin-left:6px;opacity:.9}
.lv-chip .lv-title{margin-left:2px}
.lv-name.tier-gold{color:#c8901e}
.lv-name.tier-platinum{background:linear-gradient(90deg,#3fb6dc,#9b6fe0);-webkit-background-clip:text;background-clip:text;color:transparent}
.lv-name.tier-legend{background:linear-gradient(90deg,#ff4fb8,#ff9d2e,#2fcf7a,#3a95ff,#ff4fb8);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lv-shift 6s linear infinite}
.level-panel .level-head{display:flex;gap:16px;align-items:center}
.level-panel h2{margin:0;display:flex;align-items:center;gap:8px;font-size:24px}
.lv-bar{height:10px;border-radius:5px;background:var(--bg2);border:1px solid var(--line);overflow:hidden;margin:12px 0 6px}
.lv-bar-fill{display:block;height:100%;background:linear-gradient(90deg,#58c4dc,#e6b35a)}
.level-panel.tier-legend .lv-bar-fill{background:linear-gradient(90deg,#ff6ec7,#ffd36e,#6effa8,#6ec7ff)}
.tier-list{list-style:none;padding:0;display:grid;gap:6px}.tier-list li{display:flex;gap:8px;align-items:center}

/* アップデート情報・使用履歴 */
.update-row{display:grid;grid-template-columns:150px 1fr 32px;gap:6px;margin:6px 0;align-items:center}
.usage-rows{display:grid;gap:6px;margin:6px 0}
.usage-row{display:grid;grid-template-columns:140px 1fr 110px 1.2fr 1fr 80px 32px;gap:6px;align-items:center}
@media (max-width:760px){.usage-row{grid-template-columns:1fr 1fr}.usage-row.head{display:none}.update-row{grid-template-columns:1fr 32px}.update-row input[type=date]{grid-column:1/-1}}
.update-list{list-style:none;padding:0;margin:6px 0;display:grid;gap:6px}
.update-list li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;border-bottom:1px dashed var(--line);padding-bottom:6px}
.update-list time{min-width:86px}
.auto-badge{font-size:10px}
.usage-table td,.usage-table th{font-size:13px}.nowrap{white-space:nowrap}
.table-wrap{overflow-x:auto}

/* 通知のベル・未読の数・通知の一覧 */
.notif-btn{position:relative}
.notif-badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--danger,#d64545);color:#fff;font-size:10px;font-weight:800;line-height:17px;text-align:center;border:2px solid var(--panel);pointer-events:none}
.notif-list{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
.notif>a,.notif>div,.notif>.notif-open{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:inherit;text-decoration:none}
.notif>a:hover,.notif>.notif-open:hover{border-color:var(--cyan)}
.notif>.notif-open{width:100%;font:inherit;text-align:left;cursor:pointer}
.notif.unread>a,.notif.unread>div,.notif.unread>.notif-open{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 7%,var(--panel))}
.notif-icon{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--bg2);color:var(--muted)}
.notif-icon.kind-like,.notif-icon.kind-comment_like{color:var(--danger,#d64545)}.notif-icon.kind-achievement{color:#c8901e}
.notif-body{display:grid;gap:2px;min-width:0;flex:1}
.notif-quote{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--cyan);margin-top:6px}
/* スマホ：見出しの右の道具を1行に収める（使い方はフッターにもある） */
@media (max-width:640px){.header-tools a.icon-btn[href="/help.html"]{display:none}.header-tools{gap:6px}}

.hp-field{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.turnstile-box{margin:8px 0;min-height:0}

/* ショップのボタン：1つなら目立つ1つ、多い時は「すべて見る」 */
.shop-link.single{font-weight:700;border-color:var(--gold)}
.shop-link.more{font:inherit;cursor:pointer;background:transparent}
/* 通知の設定（10/24） */
.notify-table th[scope=row]{font-weight:500;text-align:left}
.notify-table td{text-align:center;width:96px}
.notify-bulk{gap:6px;margin:8px 0}
.notify-settings-link{margin:6px 0}
/* サムネイルにマウスを乗せると少し大きく（10/24）。枠からははみ出さない。動きを減らす設定の人には動かさない。 */
.combo-card .thumb{overflow:hidden}
.combo-card .thumb img{transition:transform .25s ease}
.combo-card:hover .thumb img,.combo-card:focus-within .thumb img{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.combo-card .thumb img{transition:none}.combo-card:hover .thumb img,.combo-card:focus-within .thumb img{transform:none}}
/* 手順の中の同じカードの枚数（10/24） */
.ref-group{position:relative}
.ref-count{position:absolute;top:2px;left:2px;background:#0d1b2e;color:#fff;border:2px solid #fff;border-radius:999px;font-size:11px;font-weight:700;padding:0 5px;line-height:1.5}
/* 初動の形に紐づけたコンボ（10/24） */
.odds-combos{gap:6px;align-items:center;margin-top:6px}
.odds-row-combos{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.odds-row-combos .chip{display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.combo-pick-list{max-height:50vh;overflow:auto;margin:8px 0}
/* ショップのボタン：ショップ名を書いたボタンを、ショップのイメージカラーで（10/24） */
.shop-link.shop-c{justify-content:center;min-width:104px;min-height:32px;padding:5px 12px;border-radius:8px;font-weight:800;color:#fff;border:1px solid transparent;white-space:nowrap}
.shop-link.shop-c.single{min-width:160px}
.product-shops:has(.shop-c){display:grid;grid-template-columns:1fr 1fr;gap:4px}
.product-shops .shop-btn.shop-c{color:#fff;border-radius:8px;font-weight:800;justify-content:center;min-width:0;padding:4px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-c:hover{box-shadow:0 0 0 2px var(--gold);filter:brightness(1.06);border-color:transparent}
.shop-c-amazon{background:#232f3e!important;border-color:#232f3e!important;box-shadow:inset 0 -3px 0 #ff9900}
.shop-c-amazon:hover{box-shadow:inset 0 -3px 0 #ff9900,0 0 0 2px var(--gold)}
.shop-c-rakuten{background:#bf0000!important;border-color:#bf0000!important}
.shop-c-yahoo{background:#ff0033!important;border-color:#ff0033!important}
.shop-c-yauc{background:#fff!important;border-color:#ff0033!important;color:#ff0033!important}
.shop-c-mercari{background:#ff0211!important;border-color:#ff0211!important}
.shop-c-surugaya{background:#1d2088!important;border-color:#1d2088!important}
.shop-c-cardmax{background:#d80000!important;border-color:#d80000!important}
.shop-c-kanabell{background:#e05a00!important;border-color:#e05a00!important}
.shop-c-yuyutei{background:#0090c0!important;border-color:#0090c0!important}
.shop-c-toretoku{background:#0b7a75!important;border-color:#0b7a75!important}
.shop-c-bee{background:#ffd400!important;border-color:#e0b800!important;color:#111!important}
.shop-dialog{width:min(560px,calc(100vw - 32px))}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:8px}

/* ---- スマホの見やすさ・使いやすさの調整（2026-10-21） ---- */
.crop-fine summary{cursor:pointer;font-weight:700;color:var(--cyan);min-height:40px;display:flex;align-items:center}
@media (max-width:520px){
  /* 見出しを3段から2段に：ロゴの横に「遊び方」を置き、言語は表示設定（歯車）とページの下に任せる */
  :root{--hh:100px}
  .site-header-inner .brand{margin-right:0}
  .site-header-inner .brand span{display:none}
  .header-filters{order:1;flex:1 1 0%;flex-basis:0%;min-width:0;max-width:none;gap:4px}
  .header-filters .hf:nth-child(2){display:none}
  .header-filters .hf{flex:1;min-width:0}
  .header-filters select{width:100%;max-width:none;height:34px;min-height:34px;font-size:13px}
  .header-tools{order:2;gap:4px}
  .account-chip{padding:0;width:36px;height:36px;min-width:36px;max-width:36px;justify-content:center;flex:none}.account-chip>span{display:none}
  .site-header-inner{flex-wrap:wrap;column-gap:6px}
  .site-header-inner .site-nav{order:3;flex-basis:100%}
}
@media (max-width:640px){
  /* 作業の進み具合：画面の上に貼り付けず、小さく1つにまとめる（下の内容を隠さない） */
  .work-banner{position:relative;top:auto;flex-wrap:wrap;gap:8px;padding:10px 12px}
  .work-icon{display:none}
  .work-text{flex-basis:100%}.work-text strong{font-size:14px}
  .work-banner>.button,.work-banner>.icon-btn{flex:none}
  .work-banner>.button{flex:1}
  /* 知らせ（トースト）：画面の下に横いっぱいで出す（丸い吹き出しで縦に長くならないように） */
  .toast{left:12px;right:12px;max-width:none;border-radius:14px;transform:translateY(150%);bottom:max(12px,env(safe-area-inset-bottom))}
  .toast.show{transform:translateY(0)}
  /* 会員登録なしの案内：説明文は省いて1行に */
  .guest-notice p{display:none}
  .guest-notice>div{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
  /* 切り抜き：画像を先に、調整の欄はその下に */
  .crop-layout{display:flex;flex-direction:column}
  .crop-layout>#crop-wrap{order:-1}
}

/* 作成：画面の下の「戻る・次へ」 */
.stage-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 6px}
.stage-nav .button{min-height:44px}
@media (max-width:820px){
  .stage-nav{position:sticky;bottom:0;z-index:14;margin:14px -4px 0;padding:10px 8px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
  .stage-nav .button{flex:1;justify-content:center}
  .stage-nav>span{display:none}
  /* カード・編集・完成見本の切り替えは、下へ動かしても見出しの下に残す */
  .col-switch{position:sticky;top:0;z-index:13;padding:6px 0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px)}
}
/* 指で押しやすい大きさ（小さく見える物も、押せる範囲は広げる） */
@media (max-width:640px){
  .help-btn{position:relative}.help-btn::after{content:'';position:absolute;inset:-8px}
  .card-stat{min-height:34px;padding:4px 8px}
  .meta-pill{min-height:30px;display:inline-flex;align-items:center}
  .section-head a.small,.section-head .button.small{min-height:36px}
  .featured-thumb{min-height:40px;height:40px;aspect-ratio:auto;min-width:0}
}
/* お知らせの中のリンクは、文に押しつぶされないように（1文字ずつ縦に並ぶのを防ぐ） */
.notice>a{flex:none;white-space:nowrap;align-self:center}

/* カードを選ぶ窓：画面の高さ（ブラウザの帯を除いた実際の高さ）に収め、カードの一覧だけを動かす。決定は常に見える所に */
.picker{display:flex;flex-direction:column;max-height:calc(100svh - 24px);overflow:hidden}
.picker[open]{display:flex}
.picker .picker-grid{flex:1 1 auto;min-height:120px;max-height:none}
.picker .dialog-foot{flex:none;position:sticky;bottom:0;background:var(--panel);padding-top:10px}
.picker .dialog-head .picker-ok{margin-left:auto}
.picker .dialog-head .picker-ok+.icon-btn{margin-left:4px}
@media (max-width:640px){
  .picker .picker-grid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}.picker .dialog-head h2{font-size:16px}
  /* スマホ：下から出る板にする。高さは、ブラウザの帯がいちばん大きい時の画面の高さ（svh）に収め、中はカードの一覧だけを動かす */
  .picker{position:fixed;inset:auto 0 var(--vv-gap,0px) 0;margin:0;box-sizing:border-box;width:100%;max-width:100%;max-height:min(88svh,calc(var(--vv-h,100svh) - 16px));border-radius:18px 18px 0 0;
    /* 下の余白：端末の切り欠き・ブラウザの帯（大きい画面の高さ − 小さい画面の高さ）の大きい方を足す */
    padding:12px 12px calc(12px + max(env(safe-area-inset-bottom), calc(100lvh - 100svh)))}
  .picker *{box-sizing:border-box}
  .picker .picker-grid{min-height:0}
  .picker .dialog-foot{gap:8px}.picker .dialog-foot .button{flex:1;justify-content:center;min-height:44px}
}

/* 選択肢の多いボタンの並び：パソコンではボタン、スマホでは一覧（選ぶ欄） */
.seg>.seg-select{display:none}
@media (max-width:640px){
  .seg.has-select{display:block;padding:0;border:0;background:none}
  .seg.has-select>button{display:none}
  .seg.has-select>.seg-select{display:block;width:100%;min-height:44px;font-size:15px}
}

/* 追加できる項目：パソコンはボタン、スマホは一覧（選ぶ欄） */
.optional>.add-select{display:none}
@media (max-width:640px){
  .optional>.add-chips{display:none}
  .optional>.add-select:not([hidden]){display:block;width:100%;min-height:44px;font-size:15px;margin-top:6px}
  .optional>.add-chip{display:none}
}
/* スマホの見出し：右端のボタンが切れないよう、ボタンと隙間を少し小さく */
@media (max-width:520px){
  .site-header{padding:6px 10px}
  .site-header-inner{column-gap:5px}
  .site-header-inner .brand img{width:30px;height:30px}
  .header-tools .icon-btn,.account-chip{width:34px;height:34px;min-width:34px;max-width:34px}
  .header-filters select{height:34px;min-height:34px}
}

/* スマホの作成画面：画面1枚に収める。上の手順と下の「戻る・次へ」は動かさず、今の段階の中身だけを中で動かす（ページ全体は動かない） */
@media (max-width:640px){
  body.fit-screen .page-scroll{overflow:hidden;display:flex;flex-direction:column;scrollbar-gutter:auto}
  body.fit-screen .site-footer{display:none}
  body.fit-screen main{flex:1;min-height:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:6px 10px 0}
  body.fit-screen main>*{flex:none}
  body.fit-screen .page-title{flex-wrap:nowrap;margin-bottom:6px;gap:4px}
  body.fit-screen .page-title h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.fit-screen .page-title .title-icon{display:none}
  body.fit-screen .page-title .save-state{order:0;flex-basis:auto;font-size:11px;white-space:nowrap}
  body.fit-screen .page-title .icon-btn{min-width:34px;width:34px;height:34px}
  body.fit-screen .stepper{margin-bottom:6px}
  body.fit-screen .stepper button{min-height:40px;padding:3px 2px;font-size:10.5px;border-radius:10px;gap:0}
  body.fit-screen .stepper button .num{width:18px;height:18px;font-size:11px}
  body.fit-screen #work-banner,body.fit-screen #notice-area{max-height:22svh;overflow-y:auto}
  body.fit-screen #notice-area .notice{margin:0 0 6px}
  body.fit-screen main>section[data-panel]:not([hidden]){flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;margin:0}
  body.fit-screen main>section.panel[data-panel]{padding:10px}
  body.fit-screen .stage-nav{position:static;margin:0 -10px;padding:6px 10px calc(6px + env(safe-area-inset-bottom))}
  body.fit-screen .stage-nav .button{min-height:42px}
  /* 切り抜き：画像は残りの高さに収まる大きさで表示する（拡大した時だけ中で動かす） */
  body.fit-screen .crop-wrap{max-height:44svh}
  body.fit-screen main>section[data-panel]{position:relative}
  /* 会員登録なしの案内は1行に */
  body.fit-screen .guest-notice{padding:6px 10px;align-items:center;gap:8px}
  body.fit-screen .guest-notice>div{flex-wrap:nowrap;justify-content:space-between;flex:1;min-width:0}
  body.fit-screen .guest-notice strong{font-size:12.5px;line-height:1.35}
  body.fit-screen .guest-notice .button{min-height:34px;padding:4px 10px;font-size:12px;flex:none}
  /* 作るもの：1行に */
  body.fit-screen .kind-choice{flex-wrap:nowrap;gap:6px;margin-bottom:8px}
  body.fit-screen .kind-choice>.field-name{display:none}
  body.fit-screen .kind-choice>.seg{flex:1;min-width:0}
  body.fit-screen .kind-choice>.seg button{flex:1;padding:6px 4px;font-size:12.5px;min-height:38px}
  body.fit-screen .dropzone{padding:12px;gap:2px;border-radius:14px}
  body.fit-screen .dropzone svg{width:26px;height:26px}
  /* 始め方：3つを1行に並べ、説明は？で開く */
  body.fit-screen #start-options{grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:6px;margin-top:8px;align-items:stretch}
  body.fit-screen #start-options .button.big{flex-direction:column;gap:2px;white-space:normal;font-size:11.5px;line-height:1.3;padding:6px 4px;min-height:58px;text-align:center}
  body.fit-screen #start-options .start-note{grid-column:auto;margin:0;display:flex;align-items:center}
  body.fit-screen #start-options .start-note>span{display:none}
  body.fit-screen #start-options .start-note>.help-btn{display:inline-grid}
  body.fit-screen #start-options #start-error{grid-column:1/-1}
  body.fit-screen [data-panel=images]>.panel.mt-lg{margin-top:10px;padding:10px}
  /* 会員登録なしの案内は、最初（画像）と最後（保存・公開）の段階だけに出す */
  body.fit-screen main:is([data-stage=crop],[data-stage=steps],[data-stage=diagram]) .guest-notice{display:none}
  /* 手順：カード・編集・完成見本の切り替えは横いっぱい、中の欄は余白を詰める */
  body.fit-screen #col-switch{margin:0 0 6px;padding:0 0 4px}
  body.fit-screen #col-switch .seg{display:flex;width:100%;box-sizing:border-box;flex-wrap:nowrap}
  body.fit-screen #col-switch .seg button{flex:1;justify-content:center;min-height:36px}
  body.fit-screen .editor-layout>.panel,body.fit-screen .editor-layout>.preview-col{padding:10px;border-radius:12px}
  body.fit-screen .editor-col>.tabs{margin:-4px 0 10px;flex-wrap:nowrap}
  body.fit-screen .editor-col>.tabs button{flex:1;justify-content:center;padding:6px 4px;min-height:40px;font-size:13px}
  /* 動かして記録：説明文は？に任せ、見出しとボタンだけ */
  body.fit-screen .replay-bar{padding:8px 10px;gap:6px 8px;margin-bottom:8px}
  body.fit-screen .replay-bar>.grow{flex:1 1 60%}
  body.fit-screen .replay-bar>.grow>.small{display:none}
  /* カードの一覧は、段階の中の動きだけで見る（一覧の中でさらに動かさない） */
  body.fit-screen .card-pool{max-height:none;overflow:visible}
  body.fit-screen #pool-tools{gap:6px}
  body.fit-screen #pool-tools .button{padding:6px 10px;font-size:12.5px;min-height:38px}
  /* 切り抜き：見出しは1行、表示の大きさの切り替えはその下に横いっぱい */
  body.fit-screen #crop-head{flex-wrap:wrap;gap:6px;margin-bottom:6px}
  body.fit-screen #crop-head h2{font-size:16px}
  body.fit-screen #crop-head>.grow{display:none}
  body.fit-screen #crop-head>.seg{flex-basis:100%;display:flex;flex-wrap:nowrap;box-sizing:border-box}
  body.fit-screen #crop-head>.seg button{flex:1;justify-content:center}
  body.fit-screen .crop-layout{gap:8px;margin-top:8px}
  /* 図：図を先に見せ、調整の欄はその下に */
  body.fit-screen .diagram-layout{gap:8px}
  body.fit-screen .diagram-layout>#diagram-editor{order:-1}
  /* 知らせは下の「戻る・次へ」の上に出す */
  body.fit-screen .toast{bottom:calc(64px + env(safe-area-inset-bottom))}
}
/* 保存・公開の段階では、同じ案内が画面の中にあるので上の案内は出さない */
main[data-stage=publish] #notice-area .guest-notice{display:none}

/* 管理画面：狭い画面ではメニューを選択リストにする（ボタンを横に流すと長くなり、右端の文字が縦に折り返されていた） */
@media (max-width:820px){
  .admin-layout{grid-template-columns:minmax(0,1fr)}.admin-main{min-width:0}
  .admin-nav{flex-direction:row;align-items:center;gap:8px;padding:8px;overflow:visible}
  .admin-nav-select{display:block;flex:1;min-width:0;min-height:44px;font-size:15px}
  .admin-nav-group{display:none}
  .admin-nav-link{flex:none;padding:6px 4px}
}
/* スマホの窓（ダイアログ）：画面の高さに収め、見出しと最後のボタンの列は常に見える所に置く（中身だけを動かす） */
@media (max-width:640px){
  dialog[open]:not(.picker){max-height:calc(100svh - 16px);overflow-y:auto;overscroll-behavior:contain}
  dialog[open]:not(.picker)>.dialog-head:first-child{position:sticky;top:-14px;z-index:3;background:var(--panel);margin:-14px 0 8px;padding:14px 0 6px}
  dialog[open]:not(.picker)>:is(.dialog-foot,.row):last-child,dialog[open]:not(.picker)>form>:is(.dialog-foot,.row):last-child{position:sticky;bottom:-14px;z-index:3;background:var(--panel);margin-bottom:-14px;padding:10px 0 14px}
  /* 行動を選ぶ：3列にして1画面に収める */
  .action-dialog .action-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .action-dialog .action-tile{min-height:44px;padding:4px 6px;gap:4px;font-size:12px;line-height:1.25}
  .action-dialog .action-tile .sym{flex:none}
}
/* スマホの「動かして記録」の準備画面：上の手札の帯は低く、デッキのカードは4列の小さな札にする（縦に長くなりすぎないように） */
@media (max-width:640px){
  .rp-sticky{padding:8px 10px;gap:6px;margin-bottom:8px}
  .rp-sticky>.row{flex-wrap:nowrap;gap:6px}
  .rp-sticky>.row>.button.big{flex:1;justify-content:center;min-height:44px;padding:8px 10px;font-size:14px}
  .rp-sticky>.row>a.button{flex:none;min-height:44px;padding:8px 10px;font-size:12.5px}
  .rp-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .rp-tile{padding:3px;gap:3px;border-radius:9px}
  .rp-tile-name{font-size:10.5px;-webkit-line-clamp:1;min-height:0}
  .rp-tile .rp-state{display:none}
  .rp-tile-tools{gap:2px}
  .rp-tile-tools .icon-btn.small{min-width:0;width:22px;height:26px;padding:0}
  .rp-section h3{margin:10px 0 6px;font-size:15px}
}
/* スマホの「動かして記録」の盤面：画面1枚に収める。盤面は上に止めたまま、候補・操作だけを中で動かし、場所の中身の帯は一番下に置く */
@media (max-width:640px){
  body:has(#replay-root>.rp-layout) .site-footer{display:none}
  body:has(#replay-root>.rp-layout) .page-scroll{overflow:hidden;display:flex;flex-direction:column;scrollbar-gutter:auto}
  body:has(#replay-root>.rp-layout) main{flex:1;min-height:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:4px 8px 0}
  body:has(#replay-root>.rp-layout) #page-title{display:none}
  #replay-root:has(>.rp-layout){flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:0!important}
  #replay-root>.rp-layout{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding-bottom:8px}
  #replay-root>.rp-layout>section.panel:first-child{display:contents}
  #replay-root>.rp-layout>section.panel:first-child>.section-head{margin:0}
  #replay-root>.rp-layout .rb-board{position:sticky;top:0;z-index:4;padding:6px;box-shadow:0 6px 14px rgba(0,0,0,.25)}
  #replay-root>.rp-layout .rp-focus-wrap{margin-top:0;padding:8px 10px}
  #replay-root>.rp-layout>section.panel{padding:10px}
  #replay-root>.rz-bar{position:static;flex:none;margin:0 -8px;padding:4px 8px calc(6px + env(safe-area-inset-bottom));box-shadow:none}
  #replay-root>.rz-bar .rz-body{max-height:96px}
}

/* 探す画面の一覧の切り替え：スマホでは選択リストにする */
.list-switch-select{display:none}
@media (max-width:640px){
  .list-switch{display:flex;padding:0;border:0;background:none;overflow:visible;max-width:100%}
  .list-switch>a{display:none}
  .list-switch-select{display:block;width:100%;min-height:44px;font-size:15px;font-weight:700}
}

/* ユーザーの一覧：名前が長い時は名前だけを省略し、「見本」とレベルの札は必ず見せる */
.user-name strong.user-name-line{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.user-name-line>.user-name-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.user-name-line>.badge,.user-name-line>.lv-chip{flex:none}
/* 関連する投稿：「〇〇を使った投稿をもっと見る」はカード名が長いので、狭い画面では見出しの下に折り返す */
.related-panel .section-head{flex-wrap:wrap}
.related-panel .section-head>a.button{white-space:normal;max-width:100%;text-align:left;line-height:1.35}

/* ---- 実績（1000個）：メダル。分類の色（--achv-c）を中心の円に、格（ノーマル〜レジェンド）を外の縁・星・光に ---- */
.achv-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.achv-section .section-head{margin-bottom:8px}
.achv-medal{--achv-c:#3fb6dc;position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;border-radius:14px;border:1px solid color-mix(in srgb,var(--achv-c) 35%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--achv-c) 13%,var(--panel)),var(--panel) 70%);overflow:hidden;min-width:0}
.achv-badge{position:relative;flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff}
.achv-ring{position:absolute;z-index:0;inset:0;border-radius:50%;background:var(--rank-g)}
.achv-badge::before{content:'';position:absolute;z-index:1;inset:4px;border-radius:50%;background:radial-gradient(circle at 32% 26%,color-mix(in srgb,var(--achv-c) 55%,#fff),var(--achv-c) 58%,color-mix(in srgb,var(--achv-c) 62%,#000));box-shadow:inset 0 -3px 6px rgba(0,0,0,.28)}
.achv-badge>.icon{position:relative;z-index:2;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.achv-stars{position:absolute;z-index:3;bottom:-7px;left:50%;transform:translateX(-50%);font-size:10px;line-height:1;letter-spacing:-1px;color:#ffd75e;text-shadow:0 0 2px #000,0 0 1px #000;white-space:nowrap}
.achv-text{display:grid;gap:2px;min-width:0}
.achv-name{font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.achv-detail{margin-left:6px;font-size:12px;font-weight:800;color:color-mix(in srgb,var(--achv-c) 80%,var(--ink))}
.achv-desc{font-size:12px;line-height:1.4;color:var(--muted)}
.achv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:11px;color:var(--muted)}
.achv-rank{font-weight:800;color:var(--rank-c)}
.achv-new{background:#ff4f7b;color:#fff;border-radius:6px;padding:0 6px;font-weight:800}
.achv-progress{display:block;height:6px;margin:3px 0 1px;border-radius:99px;background:var(--bg2);overflow:hidden}
.achv-progress>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--achv-c),color-mix(in srgb,var(--achv-c) 45%,#fff))}
/* もうすぐ達成：まだ取っていないので少し落ち着いた色に */
.achv-medal.is-near .achv-badge{filter:saturate(.45) brightness(.92)}
.achv-medal.is-fresh{box-shadow:0 0 0 2px color-mix(in srgb,#ff4f7b 60%,transparent)}
/* 格ごとの縁の色 */
.rank-normal{--rank-c:#8d9aa8;--rank-g:linear-gradient(135deg,#c3ccd5,#7d8a97)}
.rank-bronze{--rank-c:#c07a3c;--rank-g:linear-gradient(135deg,#f3bd8b,#a8642c 55%,#e9a86c)}
.rank-silver{--rank-c:#8e9bab;--rank-g:linear-gradient(135deg,#ffffff,#9aa6b4 50%,#eef2f6)}
.rank-gold{--rank-c:#cf9a12;--rank-g:linear-gradient(135deg,#fff3b0,#e4ad1f 45%,#a87406 75%,#ffe27a)}
.rank-platinum{--rank-c:#5aa7d9;--rank-g:linear-gradient(135deg,#f2fdff,#9fe7ff 35%,#d9b8ff 70%,#ffffff)}
.rank-diamond{--rank-c:#1fb6e8;--rank-g:conic-gradient(from 0deg,#e9fdff,#6fd6ff,#ffffff,#9fb8ff,#c8f7ff,#e9fdff)}
.rank-legend{--rank-c:#e8509f;--rank-g:conic-gradient(from 0deg,#ff6ec7,#ffb84d,#fff36e,#3fd98a,#4da6ff,#b06eff,#ff6ec7)}
/* 上の格ほど華やかに：ゴールド以上は光が走り、ダイヤ・レジェンドは縁が回り、カード自体も光る */
.achv-medal.rank-gold,.achv-medal.rank-platinum,.achv-medal.rank-diamond,.achv-medal.rank-legend{border-color:color-mix(in srgb,var(--rank-c) 55%,var(--line))}
.achv-medal.rank-platinum{box-shadow:0 0 12px -2px color-mix(in srgb,#9fe7ff 60%,transparent)}
.achv-medal.rank-diamond{box-shadow:0 0 14px -2px color-mix(in srgb,#6fd6ff 70%,transparent)}
.achv-medal.rank-legend{box-shadow:0 0 16px -2px color-mix(in srgb,#ff6ec7 60%,transparent);background:linear-gradient(135deg,color-mix(in srgb,#ff6ec7 14%,var(--panel)),color-mix(in srgb,#4da6ff 10%,var(--panel)))}
.achv-medal.rank-gold::after,.achv-medal.rank-platinum::after,.achv-medal.rank-diamond::after,.achv-medal.rank-legend::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 48%,transparent 60%);transform:translateX(-120%);animation:achv-shine 4.5s ease-in-out infinite}
.achv-medal.rank-diamond .achv-ring,.achv-medal.rank-legend .achv-ring{animation:achv-spin 6s linear infinite}
@keyframes achv-shine{0%,62%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes achv-spin{to{transform:rotate(360deg)}}
:root[data-motion="off"] .achv-medal::after,:root[data-motion="off"] .achv-ring{animation:none!important}
@media (prefers-reduced-motion:reduce){.achv-medal::after,.achv-ring{animation:none!important}}
/* 格ごとの数・絞り込み */
.achv-ranks{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.achv-rank-chip{border-radius:999px;padding:2px 10px;border:1px solid var(--rank-c);color:var(--rank-c);font-weight:800;background:color-mix(in srgb,var(--rank-c) 10%,transparent)}
@media (max-width:640px){.achv-grid{grid-template-columns:1fr}.achv-badge{width:48px;height:48px}}

/* レベル Lv75〜（神話）・Lv100（頂点） */
.av-wrap.tier-mythic{box-shadow:0 0 0 2.5px #ffd36e,0 0 16px 5px rgba(120,90,255,.6);animation:lv-glow-mythic 3.5s ease-in-out infinite}
.av-wrap.tier-apex{box-shadow:0 0 0 3px #fff3b0,0 0 18px 6px rgba(255,211,110,.75);animation:lv-rainbow 3s linear infinite}
@keyframes lv-glow-mythic{0%,100%{box-shadow:0 0 0 2.5px #ffd36e,0 0 14px 4px rgba(120,90,255,.55)}50%{box-shadow:0 0 0 2.5px #b9a2ff,0 0 20px 6px rgba(255,211,110,.6)}}
@media (prefers-reduced-motion:reduce){.av-wrap.tier-mythic,.av-wrap.tier-apex{animation:none}}
.tier-mythic .av-lvbadge{background:linear-gradient(135deg,#2a1b5c,#6b4cff 55%,#ffd36e);color:#fff}.tier-apex .av-lvbadge{background:linear-gradient(135deg,#fff3b0,#ffb84d,#ff6ec7,#6ec7ff);color:#2a1b00}
.lv-chip.tier-mythic{color:#fff;border-color:transparent;background:linear-gradient(135deg,#2a1b5c,#6b4cff 60%,#d4a72c)}
.lv-chip.tier-apex{color:#2a1b00;border-color:transparent;background:linear-gradient(135deg,#fff3b0,#ffb84d,#ff9fd8,#9fdcff);background-size:200% 200%;animation:lv-shift 4s ease infinite}
.lv-name.tier-mythic{background:linear-gradient(90deg,#7a5cff,#d4a72c,#7a5cff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lv-shift 6s linear infinite}
.lv-name.tier-apex{background:linear-gradient(90deg,#e0a91d,#ff6ec7,#3a95ff,#e0a91d);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lv-shift 5s linear infinite}
.level-panel.tier-mythic .lv-bar-fill{background:linear-gradient(90deg,#6b4cff,#ffd36e)}.level-panel.tier-apex .lv-bar-fill{background:linear-gradient(90deg,#ffd36e,#ff6ec7,#6ec7ff)}
/* 一覧の行の「編集」「削除」：その場で操作できるように、行の右端に並べる（狭い画面では題名の下に） */
.row-actions{gap:6px;flex-wrap:nowrap;justify-content:flex-end}
.table .row-actions{justify-content:flex-start}
.row-actions .button.small{min-height:34px;padding:4px 10px}
.folder-row-item .folder-row-link{color:var(--ink);text-decoration:none;min-width:0}
.folder-row-item .folder-row-link:hover strong{text-decoration:underline}
.resume-items{list-style:none;padding:0;margin:0;display:grid;gap:10px}
/* 続きから編集（10/25 本人の指摘：くっついて見える）：絞り込みと一覧の間、行どうしの間を空ける。PC では絞り込みをボタンで（スマホは選ぶ欄） */
.resume-tools{gap:10px;margin:4px 0 14px;align-items:center}
.resume-item{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.resume-item .resume-title{font-weight:700;min-width:0;overflow-wrap:anywhere}
.resume-item .row-actions{margin-left:auto}
@media (max-width:640px){
  .row-actions-table thead{display:none}
  .row-actions-table tr{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 0;border-bottom:1px solid var(--line)}
  .row-actions-table td{border:0;padding:0}
  .row-actions-table td:first-child{grid-column:1/-1;font-weight:700}
  .row-actions-table td:last-child{grid-column:1/-1}
  .row-actions-table .row-actions{justify-content:flex-start}
  .folder-row-item .row-actions{flex-basis:100%;justify-content:flex-start}
}

/* スマホの「動かして記録」：盤面を小さくして、いちばん使う「候補」を広く見せる */
@media (max-width:640px){
  /* 上のメニューの段は隠す（ロゴ・通知・設定の段は残す） */
  body:has(#replay-root>.rp-layout){--hh:56px}
  body:has(#replay-root>.rp-layout) .site-header-inner .site-nav{display:none}
  /* 盤面：置き場の枠は低く、名前は小さく */
  #replay-root>.rp-layout>section.panel:first-child>.section-head{display:none}
  #replay-root>.rp-layout .rb-board{gap:3px;padding:4px;border-radius:10px}
  #replay-root>.rp-layout .rb-row{gap:3px}
  #replay-root>.rp-layout .rb-slot{aspect-ratio:auto;height:40px;border-radius:6px}
  #replay-root>.rp-layout .rb-slot .rb-name{font-size:8.5px;-webkit-line-clamp:3;padding:1px}
  #replay-root>.rp-layout .rb-slot .rb-empty{font-size:8.5px}
  #replay-root>.rp-layout .rb-side .rb-lp{font-size:10px}#replay-root>.rp-layout .rb-side .small{font-size:9px}
  /* 手札：横に並べ、多い時は横に動かす */
  #replay-root>.rp-layout .rb-hand{gap:2px}
  #replay-root>.rp-layout .rb-hand>:first-child{font-size:12px}
  #replay-root>.rp-layout .rb-hand-cards{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
  #replay-root>.rp-layout .rb-hand-cards>*{flex:none;width:46px;height:64px;aspect-ratio:auto}
  #replay-root>.rp-layout .rb-piles{gap:4px 10px;font-size:12px}
  #replay-root>.rp-layout .rb-pile summary{font-size:12px;min-height:28px}
  /* カードの詳細：選んでいない時は出さない。選んだ時は短く（長い文は欄の中で読む） */
  #replay-root>.rp-layout .rp-focus-wrap:has(.rp-focus[data-empty="1"]){display:none}
  #replay-root>.rp-layout .rp-focus-wrap{padding:6px 8px}
  #replay-root>.rp-layout .rp-focus-wrap>h3{display:none}
  #replay-root>.rp-layout .rp-focus-head img,#replay-root>.rp-layout .rp-focus-head .noimg{width:44px}
  #replay-root>.rp-layout .rp-focus .rp-desc{max-height:3.3em;overflow-y:auto;margin:4px 0 0;font-size:12px;line-height:1.1;line-height:1.4}
  #replay-root>.rp-layout .rp-focus-head{gap:8px;align-items:center}
  #replay-root>.rp-layout .rp-focus-head img,#replay-root>.rp-layout .rp-focus-head .noimg{width:34px}
  #replay-root>.rp-layout .rp-focus-head strong{font-size:13px;line-height:1.3}
  #replay-root>.rp-layout .rp-focus-head p{margin:0;font-size:11.5px}
  #replay-root>.rp-layout .rp-focus .shop-links.compact{margin-top:4px}
  /* 候補：見出しは小さく、ボタンは押しやすく */
  #replay-root>.rp-layout>section.panel:nth-of-type(2)>.section-head{margin-bottom:4px}
  #replay-root>.rp-layout>section.panel:nth-of-type(2)>.section-head h2{font-size:16px}
  #replay-root>.rz-bar .rz-cards .rz-card{width:46px}
}

/* 運営のアカウントの印：名前の横に常に出す（なりすまし防止）。ほかの印と見分けやすい色と形 */
.staff-badge{display:inline-flex;align-items:center;gap:3px;flex:none;margin:0 4px;padding:1px 7px 1px 5px;border-radius:999px;font-size:11px;font-weight:800;line-height:1.5;color:#fff;background:linear-gradient(135deg,#0d7aa8,#1aa6c8);box-shadow:0 0 0 1px color-mix(in srgb,#ffffff 35%,transparent) inset;vertical-align:middle;white-space:nowrap}
.staff-badge .icon{flex:none}
h1 .staff-badge{font-size:12px;padding:2px 9px 2px 6px}

/* 運営者だけに出す、見出しの管理画面への入口（運営の印と同じ色） */
.header-tools .admin-link{color:#fff;background:linear-gradient(135deg,#0d7aa8,#1aa6c8);border-color:transparent}
.header-tools .admin-link:hover{filter:brightness(1.1)}
/* 名前の欄：長い名前は「…」で省く。管理画面への入口がある時は、見出しのメニューが欠けないよう少し狭くする */
.account-chip>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (min-width:641px) and (max-width:1500px){.header-tools:has(.admin-link) .account-chip{max-width:124px;min-width:0}}

/* 名前を問わない手札：イラストなしのカード（無地の札） */
.rel-group{padding:10px;margin:8px 0}.rel-link{flex-wrap:wrap;gap:6px;margin:6px 0}.rel-link select{max-width:220px}
.rp-blank-copies{width:72px;padding:4px 6px}
.rp-blank-name{font-size:12px;font-weight:800;padding:6px;text-align:center;line-height:1.3;background:repeating-linear-gradient(135deg,var(--panel2) 0 8px,var(--bg2) 8px 16px)}
.rb-blank-tag{position:absolute;left:3px;bottom:3px;font-size:9px;font-weight:800;padding:0 4px;border-radius:4px;background:var(--panel);color:var(--muted)}
.rb-slot.blank-card{border:1px dashed color-mix(in srgb,var(--muted) 70%,transparent);background:repeating-linear-gradient(135deg,var(--panel2) 0 6px,var(--bg2) 6px 12px);color:var(--muted)}
.rb-slot.blank-card .rb-name{font-weight:700}
.rp-handchip.rp-anychip{border-style:dashed;border-color:var(--muted)}
.rp-blank{display:inline-block;width:24px;height:34px;border-radius:3px;border:1px dashed var(--muted);background:repeating-linear-gradient(135deg,var(--panel2) 0 4px,var(--bg2) 4px 8px)}
.rp-anyadd{min-height:30px;padding:4px 10px;font-size:12px}
/* PCの見出し：幅が足りない時は、ユーザー・規制リスト・お知らせを絵だけにし、さらに狭い時は「作る」以外を絵だけにする（メニューが欠けないように） */
@media (min-width:901px) and (max-width:1699px){.site-nav a{padding:8px 9px;gap:5px}.site-nav a.nav-sub span{display:none}.header-filters select{max-width:128px}}
@media (min-width:901px) and (max-width:1439px){.site-nav a:not(.nav-create) span{display:none}}
@media (min-width:901px) and (max-width:1180px){.site-header-inner .brand span{display:none}.header-filters select{max-width:104px}}
@media (min-width:901px) and (max-width:1023px){.site-nav a.nav-create span{display:none}.site-nav a{padding:8px}.header-filters select{max-width:92px}}
@media (min-width:901px) and (max-width:1023px){.header-tools:has(.admin-link) .account-chip{max-width:84px}}

/* ---- カードのページ（/card/カード名） ---- */
.crumbs{display:flex;flex-wrap:wrap;gap:4px;color:var(--muted);margin-bottom:10px}.crumbs a{color:var(--muted)}
.card-hero{display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);gap:20px;align-items:start}
.card-art{aspect-ratio:59/86;border-radius:12px;overflow:hidden;background:var(--deep);border:1px solid var(--line);box-shadow:var(--shadow)}
.card-art-img{width:100%;height:100%;object-fit:cover;display:block}
.card-art-blank{width:100%;height:100%;display:grid;place-items:center;padding:14px;box-sizing:border-box;text-align:center;font-weight:800;color:var(--muted);background:repeating-linear-gradient(135deg,var(--panel2) 0 10px,var(--bg2) 10px 20px)}
.card-hero-main{display:grid;gap:10px;min-width:0}
.card-title{margin:0;font-size:28px;line-height:1.3;overflow-wrap:anywhere}
.card-tags{display:flex;flex-wrap:wrap;gap:6px}
.card-stat{margin:0;font-weight:700}
.card-score{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px}
.card-score-num{font-size:44px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.card-score-max{font-size:18px;font-weight:800;color:var(--muted)}
.score-stars{position:relative;display:inline-block;width:120px;height:20px;align-self:center}
.score-stars i{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),#ffd36e)}
.score-stars .base{background:var(--bg2);border-radius:999px}.score-stars .fill{z-index:1;border-radius:999px;width:0}
.card-actions{gap:8px;flex-wrap:wrap}
.card-fav[aria-pressed="true"]{border-color:#ff6e9c;color:#ff4f7b;background:color-mix(in srgb,#ff6e9c 12%,var(--panel))}
.card-text .pre{white-space:pre-wrap;line-height:1.75;margin:6px 0 0}
.card-text h2,.card-text h2 .icon{font-size:16px;margin:0}
.card-rating-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:center}
.score-dist{display:grid;gap:4px}
.score-dist-row{display:grid;grid-template-columns:22px minmax(0,1fr) 30px;gap:8px;align-items:center;font-size:12px}
.score-dist-label{text-align:right;font-weight:800;color:var(--muted)}
.score-dist-bar{height:10px;border-radius:999px;background:var(--bg2);overflow:hidden}.score-dist-bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),#ffd36e)}
.card-axes-box .card-axes{width:100%;max-width:420px;height:auto;display:block;margin:0 auto}
.card-review-form .seg{flex-wrap:wrap}
.review-axes-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px}
.review-axis select{width:100%}
.review-list{display:grid;gap:10px}
.review{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.review.mine{border-color:color-mix(in srgb,var(--cyan) 50%,var(--line))}
.review-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.review-score{font-size:13px;color:var(--muted)}.review-score b{font-size:18px;color:var(--gold)}
.review-axes{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.review-body{margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.card-shop .section-head .disclosure{margin-left:auto}
.card-shop .shop-links{display:flex;flex-wrap:wrap;gap:8px}
.card-posts{margin-top:18px}
.card-more .row{gap:8px;flex-wrap:wrap}
#card-body>section{margin-top:14px}
@media (max-width:640px){
  .card-hero{grid-template-columns:110px minmax(0,1fr);gap:12px;padding:12px}
  .card-title{font-size:20px}
  .card-score-num{font-size:34px}
  .score-stars{width:90px}
  .card-rating-grid{grid-template-columns:1fr}
  .card-actions .button{flex:1 1 auto;justify-content:center}
}
/* カード名からカードのページへのリンク（一覧・投稿のカードの窓など） */
.card-page-link{display:inline-flex;align-items:center;gap:4px}
/* カードの評価のランキング・カード名で探す欄・マイページのカード */
.card-rank-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px}
.card-rank-list a{display:grid;grid-template-columns:28px 36px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:6px 10px;border-radius:10px;background:var(--bg2);border:1px solid transparent;color:var(--ink);text-decoration:none}
.card-rank-list a:hover{border-color:var(--cyan)}
.card-rank-list .rank-no,.card-rank-list .card-rank-img{grid-row:1/3}
.card-rank-list .term-word{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.card-rank-list .small{grid-column:3/5}
.card-rank-list li:nth-child(1) .rank-no{background:var(--gold);color:#241700}.card-rank-list li:nth-child(2) .rank-no{background:#c9d3de;color:#1a2230}.card-rank-list li:nth-child(3) .rank-no{background:#d6a26a;color:#2a1600}
.card-rank-img{width:36px;height:52px;border-radius:4px;object-fit:cover;background:var(--panel2);display:block}
.card-rank-img.blank{border:1px dashed var(--line)}
.card-rank-score{font-size:12px;color:var(--muted);white-space:nowrap}.card-rank-score b{font-size:17px;color:var(--gold);margin-right:1px}
.card-search{position:relative;display:flex;align-items:center;gap:6px;flex:1 1 260px;max-width:460px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.card-search input{flex:1;min-width:0;border:0;background:transparent;padding:9px 0;color:var(--ink);font-size:15px;outline:none}
.card-search:focus-within{border-color:var(--cyan)}
.card-suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;list-style:none;margin:0;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card-suggest li{padding:0}.card-suggest li.muted{padding:8px 10px}
.card-suggest a{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none}
.card-suggest a:hover,.card-suggest a:focus{background:var(--panel2)}
.card-tools{margin-bottom:8px}
.my-card-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.my-card-list li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 10px;border-radius:10px;background:var(--bg2)}
.my-card-list li>a{flex:1 1 200px;display:inline-flex;align-items:center;gap:6px;font-weight:700}
@media (max-width:560px){.card-rank-list{grid-template-columns:1fr}.card-search{max-width:none}}
/* カードのページ：枠どうしの間 */
#card-head>*+*,#card-body>*+*{margin-top:16px}
#card-body{margin-top:16px}
.axis-bars .score-dist-row{grid-template-columns:96px 1fr auto}
/* ===== 全体のすっきり化（2026-10-21）：ボタン・切り替え・入力欄を一回り小さく、余白を詰める。ここより前の大きさの指定を上書きする ===== */
.button{min-height:36px;padding:6px 13px;gap:6px;border-radius:10px;font-size:13.5px}
.button.small{min-height:30px;padding:3px 10px;gap:4px;font-size:12.5px;border-radius:8px}
.button.big{min-height:44px;padding:8px 18px;font-size:15px;border-radius:12px}
.button.social{min-height:42px}
.icon-btn{min-width:34px;height:34px;font-size:16px}
.icon-btn.small{width:26px;min-width:26px;height:26px}
.seg{gap:3px;padding:3px;border-radius:10px}
.seg button{min-height:30px;padding:4px 11px;gap:5px;border-radius:8px;font-size:13px}
.seg.small button{min-height:28px;padding:3px 9px;font-size:12.5px}
.chip-btn{padding:3px 10px;font-size:12.5px}
.tabs button{min-height:38px;padding:7px 12px}
.list-switch a{min-height:34px;padding:5px 12px}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=number],input[type=date],select,textarea{min-height:38px;padding:7px 11px;border-radius:9px}
.folder-pick{min-height:42px;padding:8px 10px}
.rp-choice{min-height:40px;padding:7px 10px}
:is(.replay-panel,.rp-manual,.folder-edit,.filter-fold,.crop-fine) summary{min-height:34px}
.stage-nav .button{min-height:38px}
@media (max-width:640px){
  /* スマホ：押しやすさは保ちつつ（30px 以上）、見出しの丸いボタンと下の操作を詰める。入力欄の文字は16px（iPhone で押した時に拡大されないように） */
  input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=number],input[type=date],select,textarea{font-size:16px}
  .header-tools{gap:4px}
  .seg.has-select>.seg-select,.optional>.add-select:not([hidden]),.admin-nav-select,.list-switch-select{min-height:38px;font-size:16px}
  .picker .dialog-foot .button,.rp-sticky>.row>.button.big,.rp-sticky>.row>a.button{min-height:40px}
  body.fit-screen .stage-nav .button{min-height:38px}
  .action-dialog .action-tile{min-height:40px}
}

/* ===== スマホの「動かして記録」（2026-10-21）：候補は外側の1か所だけで動かす（中で二重に動くと最後まで届かなかった）。盤面とカードの詳細は小さく ===== */
.rp-focus-tools{display:none}
@media (max-width:640px){
  #replay-root>.rp-layout .rp-choices{max-height:none;overflow:visible}
  #replay-root>.rp-layout{padding-bottom:24px;scroll-padding-top:220px}
  #replay-root>.rp-layout .rb-slot{height:34px}
  #replay-root>.rp-layout .rb-hand-cards>*{width:38px;height:54px}
  /* カードの詳細：名前の1行だけ。「詳細」で効果の文・ショップを広げ、×で隠す */
  #replay-root>.rp-layout .rp-focus-wrap{padding:4px 6px}
  #replay-root>.rp-layout .rp-focus-head{gap:6px}
  #replay-root>.rp-layout .rp-focus-head img,#replay-root>.rp-layout .rp-focus-head .noimg{width:26px}
  #replay-root>.rp-layout .rp-focus-text{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
  #replay-root>.rp-layout .rp-focus-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  #replay-root>.rp-layout .rp-focus-text p{flex-basis:100%}
  #replay-root>.rp-layout .rp-focus-tools{display:flex;gap:4px;flex:none}
  #replay-root>.rp-layout .rp-focus:not([data-open="1"])>:not(.rp-focus-head){display:none}
  #replay-root>.rp-layout .rp-focus[data-open="1"] .rp-desc{max-height:7em}
  /* 候補の見出しは1行に詰める */
  #replay-root>.rp-layout .rp-title{font-size:14px;margin:2px 0 6px}
  #replay-root>.rp-layout .rp-choices{gap:4px}
}
@media (max-width:640px){#replay-root>.rp-layout>section.panel:nth-of-type(2)>.section-head{display:none}#replay-root>.rp-layout .rb-board{gap:2px}}
/* ===== 見切れの修正（2026-10-21） ===== */
/* 投稿の札の印の行：入り切らない時は次の行へ（右端で切らない） */
.card-badges{flex-wrap:wrap;overflow:visible;white-space:normal;row-gap:3px}
/* ユーザーの名前：印・レベルの横で切らず、2行まで折り返す */
.user-name strong.user-name-line{flex-wrap:wrap;white-space:normal;row-gap:2px}
.user-name-line>.user-name-text{overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
/* 作る画面のカードの一覧：名前を2行まで出す（1行で「…」にしない）。PC の細い欄でも4列にして札を大きく */
.card-pool{grid-template-columns:repeat(auto-fill,minmax(62px,1fr))}
.card-pool .pool-card>span:not(.status):not(.copies){white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip;line-height:1.25;overflow-wrap:anywhere}
/* 到達するカード：最終盤面から自動で使う時の見せ方 */
.goal-auto{margin-bottom:6px}.goal-auto p{margin:0 0 4px;display:flex;align-items:center;gap:2px}
.goal-auto-row{opacity:.8}
/* 動かして記録の下の帯：スマホでは場所のボタンを横いっぱいに等分して、右端で切らない */
@media (max-width:640px){
  .rz-tabs{overflow:visible}
  .rz-tabs button{flex:1 1 0;min-width:0;justify-content:center;padding:3px 4px;font-size:11.5px;line-height:1.15;white-space:normal;text-align:center;gap:2px}
  .rz-tabs button .icon{display:none}
  .card-pool .pool-card>span:not(.status):not(.copies){font-size:10px}
  /* 記録の準備画面の札の名前も2行まで */
  .rp-tile-name{-webkit-line-clamp:2;font-size:10px;line-height:1.2;overflow-wrap:anywhere}
}
@media (max-width:640px){
  /* 作る画面の題名は切らず、保存の知らせの方を短くする */
  body.fit-screen .page-title h1{flex:none;overflow:visible;text-overflow:clip}
  body.fit-screen .page-title .save-state{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
}
.card-pool .pool-card>span:not(.status):not(.copies){-webkit-line-clamp:3}
/* 見出しの「遊び方」「言語」の選択欄：選んでいる文字が欠けないよう、左の余白を詰めて左寄せにし、幅は文字が入る分を確保する（D-007） */
@media (min-width:521px){.header-filters select{text-align:left;text-align-last:left;padding:2px 22px 2px 9px;max-width:134px}}
@media (min-width:521px) and (max-width:1023px){.header-filters select{max-width:136px;font-size:11.5px;padding-right:20px}}
:root[data-layout="phone"] .rp-layout,:root[data-layout="tablet"] .rp-layout{grid-template-columns:1fr}
:root[lang="ja"] .lang-note{display:none}
@media (min-width:521px) and (max-width:1023px){.header-filters .hf:nth-child(2) select{max-width:96px}}
/* 見出し：幅521〜900（タブレットの縦など）は2段にする。1段だとメニューの絵と「遊び方」「言語」の欄が押しつぶされて欠けていた（D-007） */
@media (min-width:521px) and (max-width:900px){
  :root{--hh:104px}
  .site-header{padding:6px 16px;align-items:stretch}
  .site-header-inner{flex-wrap:wrap;row-gap:4px;column-gap:8px;align-content:center}
  .site-header-inner .brand{margin-right:auto}
  .header-filters{order:1}.header-tools{order:2}
  .site-header-inner .site-nav{order:3;flex-basis:100%;justify-content:space-around}
  .header-filters select,.header-filters .hf:nth-child(2) select{max-width:150px;font-size:12px}
}
.link-title-row{display:flex;align-items:center;gap:6px;min-width:0}.link-title-row>.badge{flex:none}.link-title-row>.link-title{flex:1;min-width:0}
/* ===== 2026-10-23 の指摘の直し（見た目） ===== */
/* 選択欄の矢印：縁から離し、どの選択欄も同じ形にする（P12） */
select:not([multiple]):not([size]){appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23708096' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;padding-right:34px}
.header-filters select{padding-right:30px!important;background-position:right 11px center}
/* 探すの入力候補のボタンを入力欄から離す（P15） */
.hint-chips{margin-top:10px}
/* 並べ替え・表示件数・ランダムの下の線をそろえ、一覧との間を空ける（P16・P18・S01） */
#sort-box{align-items:flex-end}
#sort-box .sort-controls{align-items:flex-end}
#sort-box>.button.small,#sort-box .sort-controls+.button{min-height:38px}
.row:has(>#sort-box){margin-bottom:14px;align-items:flex-end}
/* ユーザーを探す：白い背景の中にまとめ、下の線をそろえる（P19） */
.users-tools{align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:8px}
.users-tools .sort-field>.seg{margin:0}
/* 通報の？を隣のボタンとそろえる（P25） */
.report-row{align-items:center;gap:8px;flex-wrap:nowrap}
/* 通知の数字が欠けない（P31） */
.notif-badge{box-sizing:content-box;height:16px;min-width:16px;line-height:16px;top:-5px;right:-5px;padding:0 4px}
/* アップデート情報：畳む・前後の欄と間を空ける（S03・S07） */
details.updates-panel{margin:16px 0}
details.updates-panel>summary{cursor:pointer;list-style:none;margin:0}
details.updates-panel>summary::-webkit-details-marker{display:none}
details.updates-panel>summary::after{content:'';margin-left:auto;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
details.updates-panel[open]>summary::after{transform:rotate(-135deg)}
details.updates-panel>summary h2{margin:0}
.updates-panel+*,.usage-panel+*,.article-panel+*{margin-top:16px}
#detail-text{margin-top:16px}
/* 投稿の画像の縮小表示：見切れさせず全体を入れる（余白は背景の色）（P14） */
.featured-stage img,.featured-thumb img,.link-thumb img,.side-thumb img,.user-recent-item img{object-fit:cover!important;object-position:top!important;background:var(--deep)}
.featured-stage:hover img{transform:none}
.rank-card-mode{margin:6px 0 2px}
/* 規制リスト：適用日の選択欄の有る無しで見出しの行の高さがずれない（選択欄が有る方に合わせる）（P22） */
.reg-head{min-height:40px;align-items:center}
.reg-list a{display:flex;align-items:center;gap:6px}.reg-list a:hover{background:var(--panel2);color:var(--cyan)}
.to-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:60;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 92%,transparent);color:var(--ink);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.18);cursor:pointer;backdrop-filter:blur(6px);transition:transform .15s,opacity .2s}
.to-top:hover{transform:translateY(-2px);border-color:var(--cyan);color:var(--cyan)}
.to-top[hidden]{display:none}
body:has(#replay-root>.rp-layout) .to-top,body.fit-screen .to-top{display:none}
/* 足した項目を消すボタン（右上） */
.optional-item{position:relative}
.optional-item>.optional-remove{position:absolute;top:2px;right:0;z-index:2}
.optional-item>.optional-remove+*{padding-right:36px}
/* 利用規約・個人情報：日本語の本文と英語の本文を表示言語で切り替える */
:root[lang="ja"] .only-en{display:none}
:root:not([lang="ja"]) .only-ja{display:none}
/* アイコンの画像を自分の投稿の切り抜きから選ぶ */
.crop-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;max-height:60vh;overflow:auto;padding:2px}
.crop-opt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);cursor:pointer;min-width:0}
.crop-opt:hover,.crop-opt:focus-visible{border-color:var(--cyan)}
.crop-opt img{width:100%;aspect-ratio:59/86;object-fit:cover;border-radius:6px}
.crop-opt span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar-img{object-position:center 30%}
/* 言語の選択欄：一番長い項目（投稿はすべての言語を表示）に合わせて広がらないよう、言語名に合う幅にする（P13） */
.header-filters .hf-lang select{width:8.5em}
@media (max-width:520px){.header-filters .hf-lang select{width:100%}}
/* 件数が無い時の空の札は出さない（？が右へずれるため。S08） */
.count-chip:empty{display:none}
/* スマホの手順一覧は最初の8つだけ（残りはボタンで開く。S06） */
.step-text.clipped>li:nth-child(n+9){display:none}
.step-more{margin-top:8px}
/* 最終盤面：欄の幅に合わせて縮める（右端の墓地・デッキが見切れないように。P67） */
.board-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(3px,1vw,8px);padding:clamp(6px,1.4vw,12px)}
.board-grid>*{min-width:0}
.board-grid .slot .slot-label,.board-grid .zone-label{overflow:hidden;text-overflow:ellipsis}
/* カードの名前の欄と確定ボタン（P113） */
.name-commit{flex-wrap:nowrap;gap:6px}
.name-commit>input{flex:1;min-width:0}
/* ①の画像（縮小表示・外す）と、カードを消すモード（P58・P40） */
#image-list{flex-direction:column;align-items:stretch}
.source-item{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.source-item canvas{width:64px;height:auto;max-height:110px;object-fit:cover;object-position:top;border-radius:6px;flex:none}
.source-meta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.source-meta strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-pool.deleting .pool-card{position:relative;outline:2px dashed var(--danger);outline-offset:-2px}
.card-pool.deleting .pool-card::after{content:"×";position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--panel) 88%,transparent);font-weight:800;color:var(--danger);font-size:22px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.25)}
/* 公開の設定（畳む）と紙吹雪（P44・P46） */
.publish-opts{border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:var(--bg2)}
.publish-opts>summary{cursor:pointer;display:flex;align-items:center;gap:4px;list-style:none}
.publish-opts[open]>summary{margin-bottom:6px}
.confetti-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9999}
/* 公開した時の知らせ（B02） */
.celebrate-msg{position:fixed;left:50%;top:28%;transform:translate(-50%,-50%);z-index:10000;display:grid;gap:6px;justify-items:center;text-align:center;max-width:min(440px,calc(100vw - 32px));padding:18px 26px;border-radius:14px;background:var(--panel);color:var(--ink);border:2px solid var(--cyan);box-shadow:var(--shadow);cursor:pointer;animation:celebrate-in .35s ease-out}
.celebrate-msg strong{font-size:1.6rem;line-height:1.3}
.celebrate-msg span{font-size:.92rem;color:var(--muted)}
.celebrate-msg.out{opacity:0;transition:opacity .4s}
@keyframes celebrate-in{from{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}
@media (prefers-reduced-motion:reduce){.celebrate-msg{animation:none}}
/* 名前が確かでないカードの行（P47） */
.line-unsure{color:var(--danger);text-decoration:underline dotted;text-underline-offset:3px}
/* その他のURL（Webサイト）の行：表示名とURLの欄を右の列にそろえる（P89） */
.quick-row.kind-web>input{grid-column:2}
@media (max-width:560px){.quick-row.kind-web>input{grid-column:1}}
:root[data-layout="phone"] .quick-row.kind-web>input{grid-column:1}
/* 投稿のページ：自動で作る長い欄は畳む（P110）。リンク・紐づいた投稿の欄（P81） */
.text-fold>summary{cursor:pointer;display:flex;align-items:center;gap:8px;list-style:none;padding:4px 0}
.text-fold>summary::-webkit-details-marker{display:none}
.text-fold>summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s;flex:none}
.text-fold[open]>summary::before{transform:rotate(45deg)}
.text-fold>summary h2{margin:0}
.links-panel{margin-top:14px}
.links-panel>.link-list,.links-panel>.links-wrap{margin-top:8px}
/* 称号：βテスター・古参（P82・P115）。運営の印と並べる */
.title-badges{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.title-badge{display:inline-flex;align-items:center;gap:3px;flex:none;margin:0 2px;padding:1px 7px 1px 5px;border-radius:999px;font-size:11px;font-weight:800;line-height:1.5;color:#fff}
.title-badge .icon{flex:none}
.title-badge.badge-beta{background:linear-gradient(135deg,#6d28d9,#a855f7);box-shadow:0 1px 4px rgba(109,40,217,.35)}
.title-badge.badge-supporter{background:linear-gradient(135deg,#be123c,#f43f5e);box-shadow:0 1px 4px rgba(190,18,60,.35)}
.title-badge.badge-veteran{background:linear-gradient(135deg,#b45309,#f59e0b);box-shadow:0 1px 4px rgba(180,83,9,.35)}
/* すべての実績（P33）：未取得は薄く */
.achv-medal.is-locked{opacity:.6;filter:grayscale(.55)}
.achv-all>summary{cursor:pointer;list-style:none}
.achv-all>summary::-webkit-details-marker{display:none}
.achv-all[open]>summary{margin-bottom:10px}
/* コメントへの返信（P120） */
.comment-replies{margin:6px 0 0 18px;padding-left:12px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.comment-reply{width:100%}
.comment-reply .comment-body{margin:2px 0 0}
.reply-form{width:100%;display:flex;flex-direction:column;gap:6px}
.reply-form textarea{width:100%}
/* カード名の表に無い名前（P114） */
.pool-card.not-in-dict{box-shadow:inset 0 0 0 2px #f59e0b}
.dict-fix:empty{display:none}
.dict-fix{display:flex;flex-direction:column;gap:6px;margin:6px 0}
/* 紐づいた投稿（A06・A07） */
.after-updates{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.after-updates:empty{display:none}
.linked-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.linked-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);color:inherit;text-decoration:none}
.linked-item:hover{border-color:var(--cyan)}
.linked-title{font-weight:700;flex:1;min-width:0}
.linked-meta{flex-basis:auto}
.links-panel{margin-top:0}
/* 種類ごとの印と色（A13）：コンボ＝青緑、デッキ＝金、リスト＝紫 */
.badge.kind{display:inline-flex;align-items:center;gap:3px}
.badge.kind .icon{flex:none}
.badge.kind.kind-combo{background:color-mix(in srgb,#0e7490 18%,var(--panel));color:#0e7490;border:1px solid color-mix(in srgb,#0e7490 40%,transparent)}
.badge.kind.kind-deck{background:color-mix(in srgb,#b45309 18%,var(--panel));color:#b45309;border:1px solid color-mix(in srgb,#b45309 40%,transparent)}
.badge.kind.kind-list{background:color-mix(in srgb,#7c3aed 16%,var(--panel));color:#7c3aed;border:1px solid color-mix(in srgb,#7c3aed 40%,transparent)}
:root[data-theme="dark"] .badge.kind.kind-combo{color:#67e8f9}
:root[data-theme="dark"] .badge.kind.kind-deck{color:#fcd34d}
:root[data-theme="dark"] .badge.kind.kind-list{color:#c4b5fd}
.combo-card.kind-card-combo{border-top:3px solid #0e7490}
.combo-card.kind-card-deck{border-top:3px solid #d97706}
.combo-card.kind-card-list{border-top:3px solid #7c3aed}
/* 記事（10/24：記事にも種類の色と印） */
.badge.kind.kind-article{background:color-mix(in srgb,#be185d 15%,var(--panel));color:#be185d;border:1px solid color-mix(in srgb,#be185d 40%,transparent)}
:root[data-theme="dark"] .badge.kind.kind-article{color:#f9a8d4}
.combo-card.kind-card-article{border-top:3px solid #db2777}
/* 一覧の札：使うカードは絵で（A04）。概要が無い時の空きを詰める */
.combo-card .card-summary:empty{display:none}
/* 代表カード：カードの幅に入りきるよう、絵を少し縮めて並べる（10/25：最後の1枚が見切れていた） */
.card-pics{display:flex;gap:4px;align-items:center;overflow:hidden;min-height:50px;min-width:0}
.card-pics img{flex:1 1 0;min-width:0;max-width:34px;width:34px;height:auto;aspect-ratio:34/50;object-fit:cover;border-radius:3px;background:var(--bg2)}
.card-pics .card-more{flex:none}
.card-pic-name{flex:none;width:34px;height:50px;display:grid;place-items:center;font-size:9px;line-height:1.2;text-align:center;overflow:hidden;border:1px dashed var(--line);border-radius:3px;color:var(--muted);padding:2px}
/* 一覧の見本：横幅いっぱい・上そろえ（下は切れてよい）。何枚かある時は重ねて順に切り替える（A01） */
.combo-card:not(.product-ad) .thumb{position:relative;display:block}
.combo-card:not(.product-ad) .thumb>img{position:absolute;left:0;top:0;width:100%!important;height:auto!important;object-fit:initial!important;background:var(--deep)}
.combo-card:not(.product-ad) .thumb>.icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.thumb-cycle>img{opacity:0;transition:opacity .6s}
.thumb-cycle>img.on{opacity:1}
/* 題名が1行の時に、題名と使うカードの間に空きを作らない（A04）。高さの差は札の下の方で吸収する */
.combo-card .card-title{min-height:0}
/* カードのランキングの絵（A08） */
.term-pic{width:30px;height:44px;object-fit:cover;border-radius:3px;flex:none;background:var(--bg2)}
.term-pic.empty{display:inline-grid;place-items:center;color:var(--muted);border:1px dashed var(--line)}
.term-list a:has(.term-pic){grid-template-columns:28px 30px 1fr auto}
.term-list a:has(.term-pic) .term-last{grid-column:3/5}
.term-list a:has(.term-pic) .term-pic{grid-row:span 2}
/* 一覧の標準の道具（A03） */
.list-kit-tools{align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.list-kit-tools input[type=search]{min-width:12em;width:100%}
.list-kit-nav{margin-top:10px}
:root[data-list="list"] .user-grid{grid-template-columns:1fr}
:root[data-list="list"] .folder-row{grid-template-columns:1fr}
/* トップの表示ずれを防ぐ：注目のコンボの欄は、読み込む前から同じくらいの高さを取っておく */
#featured:empty{aspect-ratio:1200/760;border-radius:16px;background:linear-gradient(135deg,var(--deep),var(--panel2));opacity:.35}
/* 一括の選択と操作（B07） */
.bulk-bar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:8px 12px;margin:0 0 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.bulk-bar .checkbox{margin:0}
.bulk-count{color:var(--muted)}
.bulk-col{width:34px;text-align:center}
.bulk-check{width:18px;height:18px;accent-color:var(--cyan);cursor:pointer;flex:none}
.bulk-list{list-style:none;padding:0;display:grid;gap:6px}.bulk-list li{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.folder-row-item .bulk-check{margin-right:2px}
@media (max-width:600px){.bulk-bar .grow{display:none}.bulk-bar{gap:8px}}
/* 初動率の計算（B04） */
.odds-panel{display:grid;gap:10px}
.odds-big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.odds-big-item{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);text-align:center}
.odds-big-item strong{font-size:1.9rem;line-height:1.2;color:var(--cyan);font-variant-numeric:tabular-nums}
.odds-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.odds-pattern{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:8px;background:var(--panel)}
.odds-pattern-head input{min-width:0}
.odds-cond{display:grid;gap:6px;padding:8px 10px;border-radius:10px;border-left:4px solid var(--green);background:var(--panel2)}
.odds-cond.avoid{border-left-color:var(--danger)}
.odds-cards{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.odds-chip{display:inline-flex;align-items:center;gap:2px;padding:2px 4px 2px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:.92rem}
.odds-panel select.odds-add{width:auto;max-width:100%;min-width:0}
.odds-cond-tail{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.odds-cond-tail>select{width:auto;max-width:100%}
.odds-panel input.odds-min{width:4.6em;flex:none}
.odds-section>summary{cursor:pointer;list-style:none}.odds-section>summary::-webkit-details-marker{display:none}
.odds-section[open]>summary{margin-bottom:10px}
@media (max-width:600px){.odds-big-item strong{font-size:1.5rem}}
.odds-table{width:100%}
.odds-editor{display:grid;gap:10px}
.combo-grid>.bulk-bar{grid-column:1/-1;margin:0}
.folder-item-tools .bulk-check{margin-right:auto}
/* カードのページは見出しに「AD」があるので、中の広告の枠の「AD」は出さない（二重にしない） */
.card-shop .ad-slot::before{display:none}
/* その他のURLのアイコンと表示名（P89：どちらも必須） */
.quick-row.kind-web>.quick-web-meta{grid-column:2;display:flex;gap:6px;align-items:center;min-width:0}
.quick-web-meta select{width:auto;flex:none}.quick-web-meta input{flex:1;min-width:0}
@media (max-width:560px){.quick-row.kind-web>.quick-web-meta{grid-column:1}}
/* 動画で保存（P105）・デッキの登録の決まり（P56） */
.rb-controls .rb-video{margin-left:auto}
.video-dialog{max-width:min(560px,calc(100vw - 32px))}.video-dialog .field{display:grid;gap:6px;margin:10px 0}
.video-progress{width:100%;height:10px}
.deck-options{display:grid;gap:8px;padding:10px 12px;margin-bottom:12px}.deck-options .row{align-items:center;gap:8px;flex-wrap:wrap}
/* トークン（P71） */
.noimg.token{background:#8b919b;color:#111820;font-weight:700;font-size:12px;display:grid;place-items:center;width:100%;height:100%;border-radius:6px}
/* キーカード（P17）：横一列に並べ、多い時は横にずらして見る。自動で選んだ物は薄く */
.slot-row.key-cards{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
.key-auto{display:grid;justify-items:center;gap:2px;opacity:.55}
/* 一緒によく使われるカード（P74） */
.related-cards{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.related-cards li{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel2)}
/* 図の背景（P08） */
.bg-tools{display:grid;gap:8px}.bg-chips{display:flex;flex-wrap:wrap;gap:6px}
.bg-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);cursor:pointer;font-size:13px}
.bg-chip.on{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan) inset}
.bg-swatch{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);flex:none}
.bg-tools input[type=color]{width:44px;height:30px;padding:0;border:1px solid var(--line);border-radius:6px;vertical-align:middle}
/* サイドの入れ替えプラン（P117） */
.side-plan{display:grid;gap:8px;padding:10px 12px;margin:8px 0}.side-plan .row.wrap{flex-wrap:wrap;align-items:center;gap:6px}.mini-copies{width:auto;padding:0 2px;font-size:12px}
/* リプレイの盤面：墓地・除外・EX・デッキを実際の場の位置に（P53）。押すと中身が開く（S12） */
.rb-pile-tile{position:relative;min-width:0}
.rb-pile-tile>summary{list-style:none;cursor:pointer}.rb-pile-tile>summary::-webkit-details-marker{display:none}
.rb-slot.pile{border-style:solid;background:var(--panel2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;text-align:center;padding:2px}
.rb-slot.pile b{font-size:15px;color:var(--cyan)}.rb-pile-name{line-height:1.2;word-break:keep-all}
.rb-pile-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:20;width:min(320px,80vw);max-height:260px;overflow:auto;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:var(--shadow);display:grid;gap:6px}
.rb-row>.rb-pile-tile:first-child .rb-pile-pop{left:0;right:auto}
.rb-pz{grid-template-columns:repeat(3,minmax(0,1fr));max-width:45%}.rb-pz-label{align-self:center;text-align:center}
@media (max-width:640px){.rb-slot.pile{font-size:10px}.rb-slot.pile b{font-size:13px}}
/* 動かして記録：行動するカードを横一列、その下にできること（S11） */
.rp-actors{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;scroll-snap-type:x proximity}
.rp-actor{position:relative;flex:none;width:64px;padding:2px;border:2px solid transparent;border-radius:8px;background:var(--panel2);cursor:pointer;scroll-snap-align:start}
.rp-actor[aria-selected=true]{border-color:var(--cyan)}.rp-actor .rp-choice-img{width:100%;height:auto;display:block;border-radius:5px}
.rp-actor-n{position:absolute;top:2px;right:2px;min-width:18px;height:18px;border-radius:9px;background:var(--cyan);color:var(--cyan-ink);font-size:11px;font-weight:800;display:grid;place-items:center}
.rp-actor-name{margin:4px 0 2px;font-weight:700;color:var(--ink)}
.rp-mark{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--panel2);color:var(--cyan)}
.rp-others{margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
.rp-actor-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:10px;line-height:1.25;margin-top:2px;color:var(--ink);text-align:center;word-break:break-all}
@media (max-width:640px){.rb-slot.pile svg{display:none}.rb-slot.pile{gap:0;line-height:1.1}}
@media (max-width:640px){.rb-slot.pile{font-size:9px}.rb-slot.pile b{font-size:12px}}
/* カードを足すメニュー（P60・S10） */
.add-menu{position:relative;display:inline-block}
.add-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.add-menu>summary::-webkit-details-marker{display:none}
.add-menu-list{position:absolute;left:0;top:calc(100% + 4px);z-index:30;display:grid;gap:4px;min-width:200px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:var(--shadow)}
.add-menu-list .button{justify-content:flex-start;width:100%}
/* 見出しのボタン：PC は「絵＋名前」（幅が足りない時は名前を絵の下に小さく）、スマホは絵だけ（P97） */
@media (min-width:901px) and (max-width:1699px){.site-nav a,.site-nav a.nav-sub{flex-direction:column;gap:1px;padding:4px 7px;font-size:10.5px;line-height:1.15;font-weight:700}.site-nav a span,.site-nav a.nav-sub span,.site-nav a:not(.nav-create) span{display:inline}.site-nav a.nav-create{flex-direction:row;font-size:13px;padding:8px 12px}}
/* 1つだけ選ぶもの（選択肢が4つ以上）は、PC でも選ぶ欄（一覧）にする（P66：縦に長くしない） */
.seg.has-select{display:block;padding:0;border:0;background:none;max-width:460px}
.seg.has-select>button{display:none}
.seg.has-select>.seg-select{display:block;width:100%;min-height:38px}
/* タブの多い並び：スマホでは選ぶ欄で選ぶ（S10・S02） */
.tabs-select{display:none}
@media (max-width:640px){.tabs-select{display:block;width:100%;min-height:40px;margin-bottom:8px}.tabs.has-tabs-select{display:none}}
/* マイページの構成（P88） */
.me-layout{display:grid;gap:16px;align-items:start}
@media (min-width:900px){.me-layout{grid-template-columns:240px minmax(0,1fr)}.me-side{position:sticky;top:calc(var(--hh,60px) + 12px)}}
.me-side{display:grid;gap:12px;min-width:0}
.me-summary{display:grid;gap:10px;padding:14px}.me-who{display:flex;gap:10px;align-items:center}.me-who strong{font-size:16px}
.me-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:0;text-align:center}.me-stats dt{font-size:11px;color:var(--muted);grid-row:1}.me-stats dd{margin:0;font-weight:800;font-size:18px;grid-row:2}
@media (min-width:641px){.tabs.me-menu{display:flex;flex-direction:column;align-items:stretch;gap:2px;overflow:visible;border:1px solid var(--line);border-radius:12px;padding:8px;background:var(--panel)}.tabs.me-menu>button{justify-content:flex-start;text-align:left;border-radius:8px;width:100%}}
.me-group{font-size:11px;font-weight:800;color:var(--muted);padding:8px 8px 2px;letter-spacing:.04em}.me-group:first-child{padding-top:0}
@media (min-width:641px) and (max-width:899px){.tabs.me-menu{flex-direction:row;flex-wrap:wrap}.me-group{display:none}}
/* マイページの表：スマホでは1件ずつの札の形に（S02・P88） */
@media (max-width:640px){.me-main table.table thead{display:none}.me-main table.table,.me-main table.table tbody,.me-main table.table tr,.me-main table.table td{display:block;width:auto}.me-main table.table tr{position:relative;border:1px solid var(--line);border-radius:10px;padding:10px 10px 8px 40px;margin-bottom:8px;background:var(--panel)}.me-main table.table td{border:0;padding:2px 0}.me-main table.table td.bulk-col{position:absolute;left:10px;top:12px;width:auto}.me-main table.table td:first-child:not(.bulk-col){font-weight:700}}
/* 動きとグラデーション（P95）：控えめに。画面の動きを減らす設定の人には動かさない */
.panel{background-image:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 4%,transparent),transparent 140px)}
.button{transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease}
.button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb,var(--cyan) 18%,transparent)}
.combo-card{transition:transform .18s ease,box-shadow .18s ease}.combo-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.site-nav a.nav-create{background-image:linear-gradient(135deg,color-mix(in srgb,var(--cyan) 100%,#fff 0%),color-mix(in srgb,var(--cyan) 75%,var(--purple)))}
.tabs>button[aria-selected=true]{transition:background-color .2s ease,color .2s ease}
@media (prefers-reduced-motion:reduce){.button,.combo-card{transition:none}.button:not(:disabled):hover,.combo-card:hover{transform:none}}
/* 代わりの初動（P65）・版の履歴（P85） */
.alt-starters{display:grid;gap:6px;margin-top:8px}.alt-starter{align-items:center;gap:6px;flex-wrap:wrap}
.version-list{list-style:none;padding:0;margin:0;display:grid;gap:6px}.version-list li{align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
/* トップの作る・探すのボタンの場所を、描く前から空けておく（CLS） */
#hero-actions:empty{min-height:86px}
@media (max-width:640px){#hero-actions:empty{min-height:162px}}
@media (max-width:520px){#hero-actions:empty{min-height:218px}}
/* グループ（P92・P116） */
.team-card-head{display:flex;align-items:center;justify-content:center;position:relative;min-height:96px;background:linear-gradient(135deg,var(--panel-2,rgba(127,127,127,.08)),transparent)}
.team-people{display:grid;gap:8px}.team-person{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.team-invite input{flex:1;min-width:200px}.team-chips{list-style:none;padding:0;margin:0}.team-chips .chip-btn{display:inline-flex;align-items:center;gap:4px}.team-form{display:grid;gap:12px;margin-top:10px}
/* 初動の形のカードの絵（10/24） */
.odds-thumb{display:inline-block;border-radius:4px;object-fit:cover;vertical-align:middle;background:var(--panel-2,rgba(127,127,127,.12))}.odds-thumb.empty{width:34px;height:50px;font-size:9px;line-height:1.2;overflow:hidden;padding:2px;border:1px solid var(--line);color:var(--sub,inherit)}.odds-chip{display:inline-flex;align-items:center;gap:6px}.odds-row-cards{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.odds-add-row{gap:8px;flex-wrap:wrap;align-items:flex-start}.odds-name-input{min-width:180px;flex:1}.odds-pick>summary{list-style:none;cursor:pointer}.odds-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin-top:8px;max-height:340px;overflow:auto;padding:4px}.odds-pick-card{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:1px solid var(--line);border-radius:8px;padding:4px;cursor:pointer;color:inherit}.odds-pick-card .small{font-size:10px;line-height:1.2;text-align:center;overflow:hidden;max-height:2.4em}
/* トップの小さなボタンは横いっぱいに並べ、右に空きを作らない（10/24） */
.hero-sub-actions>.button{flex:1 1 0;justify-content:center;min-width:max-content}
.rank-toc{margin:4px 0 0}.rank-filled{margin:6px 0}
:root:not([data-list="list"]) .rank-body .term-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 14px}
:root[data-list="list"] .comment-grid{grid-template-columns:1fr}
/* この投稿を元に作る（10/24） */
.base-menu{position:relative;display:inline-block}.base-menu>summary{list-style:none;cursor:pointer}.base-menu>summary::-webkit-details-marker{display:none}.base-menu-list{position:absolute;z-index:20;right:0;top:calc(100% + 6px);display:grid;gap:6px;min-width:240px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 8px 24px #0004}
.auto-link{color:inherit;text-decoration:underline dotted;text-underline-offset:3px}.auto-link:hover{color:var(--cyan)}
/* 商品のショップは全部ボタンで（10/24） */
.product-shops .shop-btn{display:inline-flex;align-items:center;padding:3px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);text-decoration:none;font-size:11px;line-height:1.4}.product-shops .shop-btn:hover{border-color:var(--cyan)}.ad-gap{margin:18px 0}
/* 一部だけ直す（P111）：画像の読み込み・切り抜きの段階を隠す */
body[data-edit-mode="part"] .stepper [data-stage="images"],body[data-edit-mode="part"] .stepper [data-stage="crop"]{display:none}.edit-mode-bar{gap:8px;align-items:center;margin:8px 0;flex-wrap:wrap}

/* 募集（10/25） */
.badge.kind.kind-request{background:color-mix(in srgb,#e2a23b 18%,transparent);color:#b5781d;border-color:color-mix(in srgb,#e2a23b 45%,transparent)}
.combo-card.kind-card-request{border-top:3px solid #e2a23b}
.badge.request-status.open{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--ink)}
.badge.request-status.closed{background:var(--bg2);color:var(--muted)}
.request-panel .request-meta{display:flex;align-items:center;gap:6px;margin:4px 0 10px}
.answer-actions{flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.answer-item{display:flex;flex-direction:column;gap:6px}.answer-item.chosen>.combo-card{outline:3px solid var(--gold);outline-offset:2px}
.badge.answer-best{background:color-mix(in srgb,var(--gold) 25%,transparent);color:var(--ink);align-self:flex-start}
.answer-tools{flex-wrap:wrap;gap:6px}
.answer-pick{display:grid;gap:6px;max-height:60vh;overflow:auto}.answer-pick-item{justify-content:flex-start;text-align:left}
.answer-banner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
/* トップの作る（10/26）：種類ごとの作るとシミュレーターの5つを1段に。狭い時は2列で、最後の1つを横いっぱいにして空欄を作らない */
.hero-sub-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.hero-sub-actions>.button{min-width:0;white-space:nowrap;padding-inline:8px}
@media (max-width:640px){.hero-sub-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-sub-actions>.button:last-child{grid-column:1/-1}}
/* ランキングの種類（10/25 本人の指示）：PC では横並びのボタンで切り替える（スマホは選ぶ欄のまま） */
@media (min-width:641px){.rank-types .seg.has-select,.resume-tools .seg.has-select{display:inline-flex;padding:4px;border:1px solid var(--line);background:var(--bg2);max-width:none}.rank-types .seg.has-select>button,.resume-tools .seg.has-select>button{display:inline-flex}.rank-types .seg.has-select>.seg-select,.resume-tools .seg.has-select>.seg-select{display:none}}
/* 商品のカード（10/25）：ショップのボタンの段の数が違っても、発売日・定価の高さをそろえる */
.product-card .product-main{flex:none}

/* ランキングの欄の表示（10/25 本人の指示：横並び・タイル・リストを欄ごとに切り替える） */
.list-kit-count{white-space:nowrap}
.rank-body[data-view="row"] :is(.combo-grid,.user-grid,.comment-grid,.folder-row,.term-list){display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,280px);grid-template-columns:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:10px}
.rank-body[data-view="row"] :is(.combo-grid,.user-grid,.comment-grid,.folder-row,.term-list)>*{scroll-snap-align:start;min-width:0}
.rank-body[data-view="row"] .combo-card{flex-direction:column}.rank-body[data-view="row"] .combo-card .thumb{width:auto;aspect-ratio:1200/630}
.rank-body[data-view="grid"] .combo-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.rank-body[data-view="grid"] .combo-card{flex-direction:column}.rank-body[data-view="grid"] .combo-card .thumb{width:auto;aspect-ratio:1200/630}
.rank-body[data-view="grid"] :is(.user-grid,.folder-row,.comment-grid){grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.rank-body[data-view="grid"] .term-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 14px}
.rank-body[data-view="list"] :is(.combo-grid,.user-grid,.folder-row,.comment-grid){grid-template-columns:1fr}
.rank-body[data-view="list"] .combo-card{flex-direction:row}.rank-body[data-view="list"] .combo-card .thumb{width:200px;flex:none;aspect-ratio:auto}
.rank-body[data-view="list"] .term-list{display:block}
@media (max-width:640px){.rank-body[data-view="row"] :is(.combo-grid,.user-grid,.comment-grid,.folder-row,.term-list){grid-auto-columns:78%}.rank-body[data-view="list"] .combo-card .thumb{width:120px}.list-kit-views{margin-left:0}}

/* 一覧の表示「横並び」（10/25）：表示設定で選ぶと、探す画面・関連する投稿などの一覧も横に流す（ランキングの欄は欄ごとの切り替えが優先） */
:root[data-list="row"] :is(.combo-grid,.user-grid,.folder-row,.comment-grid):not(.rank-body *){display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,280px);grid-template-columns:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:10px}
:root[data-list="row"] :is(.combo-grid,.user-grid,.folder-row,.comment-grid):not(.rank-body *)>*{scroll-snap-align:start;min-width:0}
@media (max-width:640px){:root[data-list="row"] :is(.combo-grid,.user-grid,.folder-row,.comment-grid):not(.rank-body *){grid-auto-columns:78%}}

/* 商品の欄の表示（10/25）：横並び・タイル・リスト */
.products:not([data-view="row"]) .product-row-head{display:none}
.products[data-view="grid"] .carousel-track{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));overflow:visible;scroll-snap-type:none}
.products[data-view="list"] .carousel-track{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));overflow:visible;scroll-snap-type:none}
.products[data-view="list"] .product-card{flex-direction:row;align-items:center;gap:12px}
.products[data-view="list"] .product-main{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:12px;row-gap:3px;align-items:start;flex:1;min-width:0}
.products[data-view="list"] .product-main>*{grid-column:2}
.products[data-view="list"] .product-main .badge{justify-self:start}
.products[data-view="list"] .product-img{width:88px;grid-column:1;grid-row:1 / span 4}
.products[data-view="list"] .product-main .product-name{min-height:0}
.products[data-view="list"] .product-shops{flex:none;max-width:180px;margin-top:0}
@media (max-width:640px){.products[data-view="list"] .carousel-track{grid-template-columns:1fr}.products[data-view="list"] .product-card{flex-wrap:wrap}.products[data-view="list"] .product-shops{max-width:none}.products .section-head{flex-wrap:wrap}}

/* 値の範囲の欄（10/25） */
.range-inputs{display:flex;align-items:center;gap:4px}.range-inputs input{width:92px}
/* 商品の欄の中の一覧の道具（10/25） */
.products .list-kit{margin-top:6px}
/* マウスを重ねると画像を少し大きくする（10/25 本人の指示：投稿の見本だけでなく、商品・カードなど押せる画像は全部） */
:is(.product-img,.pa-thumb,.side-thumb,.featured-thumb,.link-thumb,.user-recent-item,.rp-tile-img){overflow:hidden}
:is(.product-card,.pa-item,.side-thumb,.featured-thumb,.link-thumb,.user-recent-item,.rp-tile-img,.crop-opt,.card-thumb,.pool-card,.slot,.rz-card,.card-pics,.term-list a,.card-rank-list a,.picker-grid button) img{transition:transform .25s ease}
:is(.product-card,.pa-item,.side-thumb,.featured-thumb,.link-thumb,.user-recent-item,.rp-tile-img,.crop-opt,.card-thumb,.pool-card,.slot,.rz-card,.term-list a,.card-rank-list a,.picker-grid button):is(:hover,:focus-visible) img,.card-pics img:hover{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){:is(.product-card,.pa-item,.side-thumb,.featured-thumb,.link-thumb,.user-recent-item,.rp-tile-img,.crop-opt,.card-thumb,.pool-card,.slot,.rz-card,.card-pics,.term-list a,.card-rank-list a,.picker-grid button) img{transition:none;transform:none!important}}

/* カードのページ（10/25）：一緒によく使われるカードを画像付きの札で */
.related-cards.with-pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.related-cards.with-pics li{display:block;padding:0;border:0;background:none}
.related-cards.with-pics a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--ink);text-align:center}
.related-cards.with-pics img,.related-blank{width:72px;height:105px;object-fit:cover;border-radius:6px;background:var(--bg2);transition:transform .25s ease}
.related-blank{display:grid;place-items:center;padding:4px;font-size:10px;font-weight:700;color:var(--muted);border:1px dashed var(--line);overflow:hidden}
.related-cards.with-pics a:hover img,.related-cards.with-pics a:focus-visible img{transform:scale(1.06)}
.related-name{font-size:12px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* このカードを探す：ショップのボタンと広告の枠の間を空ける */
.card-shop>*+*{margin-top:12px}
/* 広告の下の一言 */
.ad-note{margin:6px 0 0;font-size:11px;color:var(--muted);text-align:right}.ad-note a{margin-left:6px;color:inherit}
.footer-ads-note{color:var(--muted);font-size:12px}

/* 一覧の道具の並び（10/25：どの欄も同じ形・同じ高さ） */
.list-kit-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;margin-bottom:12px}
.list-kit-tools>.sort-field{gap:4px;margin:0}
.list-kit-tools>.sort-field.grow{flex:1 1 160px;max-width:300px}
.list-kit-tools select{min-width:7.5em}
.list-kit-tools .range-inputs input{width:76px}
.list-kit-tools .seg{min-height:42px;align-items:center;margin:0}
.list-kit-tools select,.list-kit-tools input{min-height:42px}
.list-kit-tools .list-kit-count{display:flex;align-items:center;min-height:42px;padding:0 2px;align-self:auto}
.list-kit-tools>.list-kit-views{margin-left:auto}
@media (max-width:640px){.list-kit-tools>.sort-field.grow{flex-basis:100%;max-width:none}.list-kit-tools>.list-kit-views{margin-left:0}}

/* 検索画面の並べ替えの欄（10/25：一覧の道具と同じ形・同じ高さ） */
.sort-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px}
.sort-controls>.sort-field{gap:4px;margin:0}
.sort-controls .seg{min-height:42px;align-items:center;margin:0}
.sort-controls select{min-height:42px;min-width:7.5em}
.sort-controls .list-kit-count{display:flex;align-items:center;min-height:42px;padding:0 2px;white-space:nowrap}
.sort-controls>.list-kit-views{margin-left:auto}
#users-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px}
#users-tools .seg{min-height:42px;align-items:center;margin:0}
#users-tools select,#users-tools input{min-height:42px}
#users-tools>.sort-field.grow{flex:1 1 180px;max-width:300px}
#users-tools .list-kit-count{display:flex;align-items:center;min-height:42px;white-space:nowrap}
#users-tools>.list-kit-views{margin-left:auto}
.user-rank.none{background:var(--bg2);color:var(--muted)}
@media (max-width:640px){.sort-controls>.list-kit-views,#users-tools>.list-kit-views{margin-left:0}#users-tools>.sort-field.grow{flex-basis:100%;max-width:none}}
/* 右の列の商品（10/25）：ショップのボタンを全部並べる */
button.pa-item{display:flex;gap:10px;align-items:center;width:100%;box-sizing:border-box;font:inherit;text-align:left;color:inherit;background:none;cursor:pointer}
/* デッキなどのカード名の一覧（テキスト）：コメントの上に小さく畳む（10/25） */
.card-text-list>summary{cursor:pointer}.card-text-list>summary h2{margin:0}
.card-text-list ul{list-style:none;margin:4px 0 10px;padding:0;columns:2 220px;column-gap:24px}.card-text-list li{break-inside:avoid;padding:1px 0}
.card-text-list h3{margin:10px 0 2px}
/* トップの商品（10/25）：札を押すと詳しい窓。札はボタン */
button.product-card{font:inherit;text-align:left;color:inherit;width:100%;box-sizing:border-box}
.product-dialog-info .badge{justify-self:start}
.product-dialog .product-shops{display:flex;flex-wrap:wrap;gap:6px}.product-dialog .product-shops .shop-btn{flex:0 0 auto;min-width:96px;justify-content:center}
.product-dialog{width:min(560px,calc(100vw - 32px))}
.product-dialog .dialog-head h2{font-size:17px;line-height:1.4}
.product-dialog-body{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;align-items:start}
.product-img.big{aspect-ratio:1;border-radius:12px}
.product-dialog-info{display:grid;gap:6px}.product-dialog-info p{margin:0}
.product-dialog .product-shops{margin-top:4px}
@media (max-width:520px){.product-dialog-body{grid-template-columns:1fr}.product-img.big{max-width:220px}}

/* カードのページの見出し（10/25）：右の空いた所に評価のまとめとショップのボタン */
.card-hero{grid-template-columns:minmax(0,236px) minmax(0,1fr) minmax(0,320px)}
.card-hero-side{display:grid;gap:12px;align-content:start;min-width:0}
.card-hero-side .card-axes,.card-hero-side .params-svg{width:100%;max-width:300px;height:auto}
.card-hero-side .score-dist{font-size:12px}
.card-score.empty{align-items:center;gap:10px}
.review-axes-pick{display:grid;gap:4px;margin-top:10px}.review-axes-pick .row input{flex:1;min-width:0;max-width:240px}
.review-axis .row{gap:6px;align-items:center}
@media (max-width:1100px){.card-hero{grid-template-columns:minmax(0,236px) minmax(0,1fr)}.card-hero-side{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
@media (max-width:640px){.card-hero{grid-template-columns:110px minmax(0,1fr)}}
/* 見本の切り替え（10/25 本人の指示：フェードで自然に）。次の絵を上に重ねてゆっくり浮かび上がらせ、前の絵は下に残す（間で背景が透けない） */
/* 10/26：「.combo-card .thumb img」の動き（拡大）の指定に負けてフェードが効かず、パキっと切り替わっていたので、同じ強さで指定する */
.combo-card .thumb.thumb-cycle>img{opacity:0;transition:opacity 1.6s cubic-bezier(.4,0,.2,1),transform .25s ease;z-index:0;will-change:opacity}
.combo-card .thumb.thumb-cycle>img.on{opacity:1;z-index:2}
.combo-card .thumb.thumb-cycle>img.was{opacity:1;z-index:1}
.featured-stage{display:block}
.featured-stage .featured-img{position:absolute;inset:0;width:100%;height:100%;transition:opacity 1.6s cubic-bezier(.4,0,.2,1),transform .6s ease}
.featured-stage .featured-img.leaving{z-index:0}
.featured-stage .featured-img.entering{opacity:0}
.featured-stage .featured-shade,.featured-stage .featured-meta{z-index:2}
@media (prefers-reduced-motion:reduce){.combo-card .thumb.thumb-cycle>img,.featured-stage .featured-img{transition:none}}
/* 使うカード（10/25：カードごとに絵の位置がずれていた）：中身を上そろえにし、名前は2行分の高さを取る */
.card-thumb{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:3px}
.card-thumb-pic{position:relative;display:block}
.card-thumb-count{position:absolute;right:3px;bottom:3px;padding:0 6px;border-radius:999px;background:#0d1b2ee6;color:#fff;font-size:11px;font-weight:800;line-height:1.6;pointer-events:none}
.card-thumb>span:not(.noimg):not(.small):not(.card-thumb-pic){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
/* ほかのレギュレーションでは（10/25）：〇×を畳んで出す */
.reg-others{margin-top:10px}.reg-others>summary{cursor:pointer;color:var(--muted)}
.reg-others ul{list-style:none;margin:6px 0;padding:0;display:grid;gap:4px}
.reg-others li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.reg-mark{width:1.4em;text-align:center}.reg-others li.ok .reg-mark{color:var(--green)}.reg-others li.ng .reg-mark{color:var(--danger)}
/* 実績の詳しい窓（10/25） */
.achv-medal.is-button{cursor:pointer;transition:transform .15s,border-color .15s}
.achv-medal.is-button:hover{transform:translateY(-1px);border-color:var(--achv-c)}
.achv-medal.is-button:focus-visible{outline:2px solid var(--achv-c);outline-offset:2px}
.achv-dialog{width:min(520px,calc(100vw - 32px))}
.achv-dialog>.achv-medal{margin-bottom:12px}
.achv-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0 0 10px;font-size:14px}
.achv-facts dt{color:var(--muted);font-size:12px;padding-top:2px;white-space:nowrap}
.achv-facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.achv-facts .achv-progress{margin-top:6px}
.achv-rarity{display:inline-block;margin-left:8px;padding:0 8px;border-radius:99px;font-size:11px;font-weight:800;background:color-mix(in srgb,var(--achv-c) 18%,var(--bg2));color:color-mix(in srgb,var(--achv-c) 75%,var(--ink))}
.achv-ladder{margin:6px 0 10px}
.achv-ladder summary{cursor:pointer;font-weight:700;font-size:13px;margin-bottom:6px}
.achv-ladder-box{position:relative;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.achv-ladder .table{font-size:13px;margin:0}
.achv-ladder tr.is-current td{background:color-mix(in srgb,var(--achv-c) 14%,transparent);font-weight:700}
.achv-ladder td .icon{color:var(--ok,#3fcf8e)}
/* 投稿の「保存」の窓（10/25） */
.save-as-dialog{width:min(480px,calc(100vw - 32px))}
.save-as-list{display:grid;gap:8px}
.save-as-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:inherit;font:inherit;text-align:left;cursor:pointer}
.save-as-item:hover,.save-as-item:focus-visible{border-color:var(--cyan)}
.save-as-text{display:grid;gap:2px;min-width:0}
/* 「自分の投稿です。」の欄：文字とボタンの高さをそろえる（10/25） */
.notice.own-notice{align-items:center;flex-wrap:wrap}
/* 広告の枠（10/25 本人の指摘：くっついて見える所がある）：上下の欄と同じだけ空ける。並び（グリッド）の中は並びのすき間に任せる。 */
.ad-slot{margin-top:18px;margin-bottom:18px}
:is(.grid,.cards-grid,.item-grid,.list-grid)>.ad-slot{margin:0}
/* 一覧のカードの版の番号：数の並びの右端に小さく（10/25） */
.card-stats .card-ver{margin-left:auto;display:inline-flex;align-items:center;gap:3px;font-size:11.5px;color:var(--muted);white-space:nowrap}
/* リプレイの盤：デッキの札（押すとカードの一覧が開く形）がほかの札より小さくなっていた（10/25 本人の指摘）。ほかの札と同じ大きさにする */
details.rb-side{display:block;align-self:stretch;overflow:visible}
details.rb-side>summary.rb-slot{width:100%;height:100%;box-sizing:border-box}
/* カードの場所のマーク（10/25：展開図・記録の盤・手順の登録で同じ絵と色。zones.mjs） */
.zone-mark{display:inline-grid;place-items:center;flex:none;border-radius:50%;background:var(--zone-c);color:#0d1b2e;border:1.5px solid #0d1b2e;vertical-align:middle;box-sizing:border-box}
.zone-mark .zone-icon{stroke-width:2.6;vertical-align:0}
.rb-slot.pile .zone-mark{margin-bottom:1px}
.rb-deck-count,.rb-hand-head{display:inline-flex;align-items:center;gap:4px}
.rz-tabs [role=tab] .zone-mark{margin-right:4px}
.zone-picker{display:flex;flex-wrap:wrap;gap:6px}
.zone-pick{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 5px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.zone-pick[aria-pressed=true]{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 14%,var(--panel));font-weight:700}
/* 作る画面の図の調整（10/25）：共通の枠・注釈の追加・版の履歴の間隔・版の変化 */
.diagram-common{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.diagram-common .section-head{margin-bottom:6px}
.bg-tools{display:grid;gap:8px}.bg-custom{align-items:center;gap:8px}
.note-add{display:grid;gap:8px}.note-add .button{justify-self:start}
.page-break-tools{display:grid;gap:8px;margin-top:10px}.page-break-tools select{max-width:100%}
.version-history{margin-top:16px}
.ver-change{margin-left:8px;padding:1px 8px;border-radius:999px;background:rgba(0,0,0,.18);font-size:.85em;font-weight:700}
/* 横並びの一覧の左右の丸い矢印（10/25。rail.mjs） */
.rail{position:relative;min-width:0}
.rail-arrow{position:absolute;top:50%;z-index:6;width:42px;height:42px;margin-top:-21px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);box-shadow:0 4px 14px rgba(13,27,46,.22);display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color .15s,transform .15s}
.rail-arrow:hover,.rail-arrow:focus-visible{border-color:var(--cyan);transform:scale(1.06)}
.rail-prev{left:-10px}.rail-next{right:-10px}
@media (max-width:640px){.rail-arrow{width:36px;height:36px;margin-top:-18px}.rail-prev{left:2px}.rail-next{right:2px}}
/* 見本つきの一覧（10/25：背景の色・模様・グラデーション） */
.pick-list{position:relative}
.pick-list>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);cursor:pointer;min-height:44px}
.pick-list>summary::-webkit-details-marker{display:none}
.pick-list-text{flex:1;min-width:0}
.pick-list-panel{position:absolute;z-index:40;top:calc(100% + 4px);left:0;right:0;max-height:340px;overflow:auto;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--shadow);display:grid;gap:4px}
.pick-list-item{display:flex;align-items:center;gap:10px;padding:4px 6px;border:2px solid transparent;border-radius:8px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pick-list-item:hover{background:var(--bg2)}.pick-list-item[aria-selected=true]{border-color:var(--cyan)}
.bg-preview{flex:none;border-radius:6px;border:1px solid var(--line);display:block}
/* 画像の大きさの欄（10/25：その他の一覧がくっついていた） */
.frame-tools{display:grid;gap:8px;margin-bottom:12px}
/* 実績の一覧の道具（10/26：ほかの一覧の道具と同じ形・同じ高さ。探す欄は広め） */
.achv-tools.list-kit-tools>.sort-field.grow{max-width:360px}
/* サーチ・呼び出しの関係（10/26） */
.card-links-tools .seg{flex-wrap:wrap}
.card-links-list{display:grid;gap:14px}
.link-rule,.link-group{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel2)}
.link-rule-head,.link-group-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 6px;font-size:15px}
.link-rule-text{margin:0 0 8px;color:var(--muted)}
.link-chips{display:flex;flex-wrap:wrap;gap:6px}
.link-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;background:var(--panel);color:var(--ink);text-decoration:none;font-size:13px;max-width:100%}
.link-chip>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-chip:hover{border-color:var(--cyan)}
.link-chip-n{font-size:11px;color:var(--muted);white-space:nowrap}
/* 商品のボタンの「AD」（10/26：ボタンの左に置くと、ボタンが見出しより右にずれ、2行目と揃わなかった）：ボタンの上の行に置き、ボタンは左の端から並べる */
.shop-links>.disclosure{flex:0 0 100%;margin:0;line-height:1.2}
/* シミュレーター（10/26） */
.sim-decks{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin:6px 0 10px}
.sim-deck{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel);color:var(--ink);cursor:pointer}
.sim-deck:hover{border-color:var(--cyan)}
.sim-deck.on{border-color:var(--cyan);box-shadow:0 0 0 2px color-mix(in srgb,var(--cyan) 30%,transparent)}
.sim-deck-text{display:grid;gap:2px;flex:1;min-width:0}
.sim-deck-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sim-start{align-items:center;gap:12px}
.rp-opp{margin-bottom:8px;padding-bottom:8px;border-bottom:2px dashed var(--line)}
.rb-side-label{margin:4px 0}
.rb-board.rb-opp{opacity:.97}
.rp-turn-opp{border-color:var(--purple)}
/* 白紙のカード（10/26：種類ごとの色の枠・NO IMAGE・名前・種類の名前。デッキ・コンボ・サーチの関係など共通） */
.blank-face{--bf:#b8c2cf;--bf-ink:#14202e;position:relative;display:flex;flex-direction:column;width:100%;aspect-ratio:59/86;border-radius:6px;padding:5%;background:var(--bf);color:var(--bf-ink);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);font-size:clamp(8px,1.6vw,11px);line-height:1.25;text-align:left}
.blank-face .bf-name{min-height:1.3em;font-weight:800;background:rgba(255,255,255,.55);border-radius:3px;padding:1px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#14202e}
.blank-face .bf-art{flex:1;display:grid;place-items:center;margin:6% 4%;border-radius:2px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.18) 0 6px,rgba(255,255,255,.06) 6px 12px),rgba(0,0,0,.18);color:rgba(255,255,255,.85);font-weight:800;letter-spacing:.06em;font-size:.9em;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.blank-face .bf-kind{font-size:.85em;font-weight:700;background:rgba(255,255,255,.6);border-radius:3px;padding:1px 4px;color:#14202e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blank-face.f-normal{--bf:#d8b65e}
.blank-face.f-effect{--bf:#c8742c}
.blank-face.f-ritual{--bf:#4f86c9}
.blank-face.f-fusion{--bf:#8c5fb6}
.blank-face.f-synchro{--bf:#e9ecef}
.blank-face.f-xyz{--bf:#2a2d33}
.blank-face.f-link{--bf:#2565b0}
.blank-face.f-spell{--bf:#1e9a7e}
.blank-face.f-trap{--bf:#b4407f}
.blank-face.f-token{--bf:#9aa0a6}
.blank-face.f-unknown{--bf:var(--panel2);box-shadow:inset 0 0 0 1px var(--line)}
.blank-face.f-unknown .bf-art{color:var(--muted);background:repeating-linear-gradient(135deg,rgba(127,127,127,.12) 0 6px,transparent 6px 12px)}
.blank-face.f-pendulum{background:linear-gradient(180deg,var(--bf) 0 55%,#1e9a7e 55% 100%)}
.card-face-img{width:100%;aspect-ratio:59/86;object-fit:cover;border-radius:6px;display:block;background:var(--panel2)}
/* サーチ・呼び出しの関係のカード（10/26：画像か白紙のカードで並べる） */
.link-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.link-card{display:grid;gap:4px;align-content:start;color:var(--ink);text-decoration:none;min-width:0}
.link-card:hover .blank-face,.link-card:hover .card-face-img{outline:2px solid var(--cyan);outline-offset:1px}
.link-card-name{font-size:12px;font-weight:700;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.link-card-cond{font-size:11px;color:var(--muted);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.link-more{margin-top:8px}
/* 白紙のカードの大きさ（一覧の小さな絵・盤面の枠の中） */
.card-pic-blank{flex:1 1 0;min-width:0;max-width:34px;width:34px;display:block}
.card-pic-blank .blank-face{font-size:5px;padding:2px;border-radius:3px}
.card-pic-blank .blank-face .bf-name,.card-pic-blank .blank-face .bf-kind{padding:0 1px;border-radius:1px}
.rb-slot>.blank-face{width:100%;height:100%;aspect-ratio:auto;font-size:8px;padding:3px;border-radius:5px}
.rb-slot>.blank-face .bf-art{margin:4% 2%;font-size:.8em}
.card-art-blank>.blank-face{font-size:15px;padding:12px;border-radius:10px;height:100%;aspect-ratio:auto}
.related-blank:has(.blank-face){padding:0;border:0;display:block}
.related-blank>.blank-face{width:72px;height:105px;aspect-ratio:auto;font-size:8px;padding:3px}
/* 画像の位置を直す（10/26） */
.adjust-body{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:8px 0 12px}
.adjust-canvas{width:180px;height:auto;aspect-ratio:59/86;border-radius:8px;background:var(--deep);box-shadow:0 0 0 1px var(--line)}
.adjust-pad{display:grid;grid-template-columns:repeat(3,44px);grid-auto-rows:44px;gap:6px}
.adjust-pad .icon-btn{width:44px;height:44px}
/* 手順の照合（10/26） */
.step-check{margin:4px 0 0;display:flex;align-items:flex-start;gap:4px}
.step-check.ok{color:var(--green)}
.step-check.warn{color:var(--gold)}
/* カードを押すとカードのページへ（10/26） */
a.card-thumb{text-decoration:none;color:inherit}
.card-thumb-pic>.blank-face{width:100%;height:100%;aspect-ratio:auto;font-size:8px;padding:3px}
.odds-thumb-link{display:inline-block;border-radius:4px}
.odds-thumb-link:hover{outline:2px solid var(--cyan);outline-offset:1px}
/* サーチ・呼び出しの関係：場所のマーク・表示の切り替え（10/26） */
.link-route{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;font-weight:700}
.link-route .link-arrow{color:var(--muted)}
.link-route .link-act{margin-left:4px;padding:1px 8px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:.9em}
.link-card-text{display:grid;gap:3px;min-width:0}
.card-links-list.view-row .link-cards{display:flex;overflow-x:auto;gap:10px;padding-bottom:6px;scroll-snap-type:x proximity}
.card-links-list.view-row .link-card{flex:0 0 100px;scroll-snap-align:start}
.card-links-list.view-list .link-cards{grid-template-columns:1fr;gap:6px}
.card-links-list.view-list .link-card{grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px;padding:4px;border-radius:8px}
.card-links-list.view-list .link-card:hover{background:var(--panel)}
.card-links-list.view-list .link-card .blank-face{font-size:5px;padding:2px}
.card-links-list.view-list .link-card-name{-webkit-line-clamp:1}
.card-links-list.view-list .link-route{font-weight:600;font-size:12px}
/* サーチ・呼び出しの関係（10/26 本人の指摘）：カード名を2行分の高さにそろえ、条件の文の位置をそろえる。「当てはまるカードを見る」は1行で出す */
.card-links-list:not(.view-list) .link-card-name{min-height:2.6em}
.link-cards>.button{grid-column:1/-1;justify-self:start;white-space:nowrap}
.card-links-list.view-row .link-cards>.button{flex:none}
/* 目標の初動率（10/26） */
.odds-target{margin:10px 0;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);display:grid;gap:6px}
.odds-target p{margin:0}
.odds-target.ok{border-color:var(--green)}
.odds-target.ok>strong,.odds-target.ok strong:first-child{color:var(--green)}
.odds-target.ng{border-color:var(--gold)}
.odds-target.ng>p>strong{color:var(--danger)}
.odds-target-way{font-size:14px;line-height:1.6}
.odds-target-way .odds-cards{margin-top:4px}
.odds-target-edit{align-items:center;gap:8px;margin-top:8px}
.odds-chip.small{font-size:12px}
/* デッキのつながり・浮いているカード（10/26） */
.deck-links-tools{align-items:flex-end;gap:10px;margin-bottom:8px}
.deck-link-group{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:10px;background:var(--panel2)}
.deck-link-group h3{margin:0 0 8px;display:flex;align-items:center;gap:6px}
.deck-link-alone{border-style:dashed;border-color:var(--gold)}
.deck-link-row{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:start;padding:8px 0;border-top:1px solid var(--line)}
.deck-link-row:first-of-type{border-top:0}
.deck-link-targets{display:grid;gap:8px}
.deck-link-route{display:grid;gap:4px}
.deck-link-cards{display:flex;flex-wrap:wrap;gap:8px}
.deck-link-card{display:grid;gap:3px;width:72px;color:var(--ink);text-decoration:none}
.deck-link-card .blank-face{font-size:6px;padding:3px}
.deck-link-name{font-size:11px;font-weight:700;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.5em}
@media (max-width:640px){.deck-link-row{grid-template-columns:64px minmax(0,1fr)}.deck-link-card{width:60px}}
/* 評価の点数の欄（10/26）：一覧・スライダー・手入力を1行に */
.score-input{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.score-input select{min-width:5em}
.score-input .score-range{flex:1 1 160px;min-width:120px;accent-color:var(--cyan)}
.score-input .score-num{width:4.5em}
/* 会員だけの機能の案内（10/26） */
.member-slot{display:contents}.member-gate h3{margin:0 0 6px}.member-gate p{margin:6px 0}.member-note a{font-weight:700}
/* 関連リンクのQRコード：URL をコピーするボタン（10/26） */
.qr-item{position:relative;display:inline-grid}.qr-item{margin:10px 10px 0 0}.qr-item .qr-copy{position:absolute;top:-10px;right:-10px;background:var(--panel);border:1px solid var(--line);border-radius:999px;width:28px;height:28px;box-shadow:0 2px 6px #0003;display:inline-flex;align-items:center;justify-content:center;padding:0}.qr-item .qr-copy:hover{border-color:var(--cyan)}
/* 1人だけのバッジ（投稿数1位など。10/26） */
.title-badge.badge-top{background:linear-gradient(135deg,#0e7490,#14b8a6);box-shadow:0 1px 4px rgba(14,116,144,.35)}
/* つながるカードの範囲：使わない向きの時は薄く（欄は残して位置をずらさない。10/26） */
.card-links-tools .sort-field.is-off{opacity:.45}
/* デッキのつながり（10/26）：折りたためる欄と、小さなカードの絵 */
details.deck-links>summary{cursor:pointer;list-style:none;margin:0}
details.deck-links>summary::-webkit-details-marker{display:none}
details.deck-links>summary::after{content:'';margin-left:auto;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
details.deck-links[open]>summary::after{transform:rotate(-135deg)}
details.deck-links>summary h2{margin:0}
details.deck-links[open]>summary{margin-bottom:12px}
.deck-links .deck-link-row{grid-template-columns:56px minmax(0,1fr);gap:10px;padding:6px 0}
.deck-links .deck-link-card{width:48px;gap:2px}
.deck-links .deck-link-name{font-size:10px}
.deck-links .deck-link-cards{gap:6px}
/* 折りたためる所には、必ず開く・閉じるの矢印を付ける（10/26 本人の指摘：矢印の無い所があった）。メニュー・選ぶ欄など、ボタンの形のものは除く。 */
details:not(.base-menu):not(.add-menu):not(.pick-list):not(.odds-pick):not(.rb-pile):not(.text-fold)>summary{cursor:pointer;list-style:none}
details:not(.base-menu):not(.add-menu):not(.pick-list):not(.odds-pick):not(.rb-pile):not(.text-fold)>summary::-webkit-details-marker{display:none}
details:not(.base-menu):not(.add-menu):not(.pick-list):not(.odds-pick):not(.rb-pile):not(.text-fold)>summary::after{content:'';display:inline-block;flex:none;width:8px;height:8px;margin:0 4px 3px 8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s;vertical-align:middle}
details:not(.base-menu):not(.add-menu):not(.pick-list):not(.odds-pick):not(.rb-pile):not(.text-fold)[open]>summary::after{transform:rotate(-135deg);margin-bottom:-2px}
/* 欄（panel）の折りたたみは、矢印を右の端に（アップデート情報と同じ） */
details:not(.base-menu):not(.add-menu):not(.pick-list):not(.odds-pick):not(.rb-pile):not(.text-fold).panel>summary{display:flex;align-items:center;gap:8px}
details:not(.base-menu):not(.add-menu):not(.pick-list):not(.odds-pick):not(.rb-pile):not(.text-fold).panel>summary::after{margin-left:auto}
/* デッキのつながりの欄（10/26 本人の指示：初動の絵と同じくらいの大きさ・名前だけの表示） */
.deck-links .deck-link-card{width:38px}
.deck-links .deck-link-name{font-size:9px}
.deck-links .deck-link-row{grid-template-columns:46px minmax(0,1fr)}
.deck-link-chip{display:inline-block;padding:1px 8px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--ink);text-decoration:none;background:var(--panel)}
.deck-links-list.view-list .deck-link-row{grid-template-columns:minmax(120px,200px) minmax(0,1fr);align-items:center}
.deck-links .deck-links-tools{margin:8px 0}
/* コメント（10/26 本人の指摘：書く欄と書かれたコメントが同じ色で紛らわしい）：書かれたコメントは左に色の線、書く欄は白地に点線の枠 */
.comment{border-left:3px solid var(--cyan)}
.comment-form,.reply-form{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.comment-form textarea,.reply-form textarea{background:var(--panel);border:1.5px dashed color-mix(in srgb,var(--muted) 60%,transparent);border-radius:10px}
.comment-form textarea:focus,.reply-form textarea:focus{border-style:solid;border-color:var(--cyan)}
.comment-wait{margin-top:12px}
/* デッキのつながりの道具：PC では横一列に収める（10/26 本人の指示） */
@media (min-width:900px){
  .deck-links .deck-links-tools{display:flex;flex-wrap:nowrap;gap:8px;align-items:flex-end}
  .deck-links .deck-links-tools>.sort-field{min-width:0;flex:0 1 auto}
  .deck-links .deck-links-tools>.sort-field:first-child{flex:1 1 140px}
  .deck-links .deck-links-tools input[type=search]{width:100%;min-width:90px}
  .deck-links .deck-links-tools select{max-width:150px}
}
/* 図のタブの2段（10/26）：上はまとまり、下はその中の図 */
.page-tabs.two-level{display:grid;gap:6px}
.page-tabs.two-level>.page-tabs-groups,.page-tabs.two-level>.page-tabs-sub{display:flex;flex-wrap:wrap;gap:6px}
.page-tabs.two-level>.page-tabs-sub{padding:6px 8px;border-radius:10px;background:var(--bg2);border:1px solid var(--line)}
.page-tabs.two-level>.page-tabs-sub .button{font-size:12px}
/* 図の中のカードは押せる（10/26 本人の指示：押すとカードのページへ）。手の形の印にして、薄く縁取る */
.diagram-svg .node-hit{cursor:pointer}
.diagram-svg .node-hit:hover{stroke:#43b8da;stroke-width:3px;fill:rgba(67,184,218,.08)}
/* 初動率・手札誘発の評価（10/26）：◎ とても良い・〇 OK・△ やや少ない・× 足りない・－ 未設定 */
.odds-rate,.odds-big-item{white-space:nowrap}
.odds-ev{display:block;color:var(--muted);font-weight:400}
.rate-mark{font-weight:800;margin-right:2px}
.rate-great .rate-mark,.rate-great strong{color:#16a34a}
.rate-ok .rate-mark,.rate-ok strong{color:#0e9f8e}
.rate-fair .rate-mark,.rate-fair strong{color:#d97706}
.rate-low .rate-mark,.rate-low strong{color:#dc2626}
.rate-none .rate-mark{color:var(--muted)}
td.rate-great{background:color-mix(in srgb,#16a34a 10%,transparent)}
td.rate-low{background:color-mix(in srgb,#dc2626 8%,transparent)}
/* レベル・運営・バッジの大きさをそろえる（10/26 本人の指摘：レベルだけ少し違った）：枠の太さ・行の高さ・題名の中の大きさを同じに */
.lv-chip{line-height:1.5;margin:0 2px}
.staff-badge,.title-badge{border:1px solid transparent}
h1 .lv-chip,h1 .title-badge,h1 .staff-badge{font-size:12px;padding:2px 9px 2px 7px;margin:0 2px}
/* つながるカードの横並び：まとまりの枠が欄の右にはみ出さないように（10/26 本人の指摘）。中のカードは枠の中で横に送る */
.card-links-list,.card-links-list>*,.card-links-list .link-group,.card-links-list .link-rule{min-width:0;max-width:100%}
.card-links-list.view-row .link-group,.card-links-list.view-row .link-rule{overflow:hidden}
/* 仮のカードの絵：種類（速攻魔法・効果モンスターなど）の文字は欄の中で左右中央に（10/26） */
.blank-face .bf-kind{text-align:center}
/* パラメータの基準と順番（10/26）：マイページの並び。種類ごとのタブ・個別の投稿・項目の無い投稿 */
.scale-tabs{margin:12px 0}.scale-tabs .seg{flex-wrap:wrap}
.scale-range{gap:12px;flex-wrap:wrap}.scale-range .field{max-width:140px}.scale-num{width:100%}
.scale-order{list-style:none;margin:10px 0 4px;padding:0;display:grid;gap:4px}
.scale-item{display:grid;grid-template-columns:32px minmax(0,1fr) auto 48px auto 30px 30px auto;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.scale-item.is-ref{border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
.scale-rank{font-weight:700;text-align:center;color:var(--muted)}
.scale-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.scale-score{text-align:right;font-variant-numeric:tabular-nums}
.scale-more{margin-top:10px}.scale-more summary{cursor:pointer;font-weight:600}
.scale-plain{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.scale-plain li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:4px 8px;border:1px dashed var(--line);border-radius:8px}
.scale-save{position:sticky;bottom:8px;background:var(--bg);padding:8px;border-radius:10px;gap:12px;align-items:center}
@media (max-width:560px){.scale-item{grid-template-columns:24px minmax(0,1fr) 40px 30px 30px}.scale-item>.scale-state{display:none}.scale-item>label{grid-column:2}.scale-item>.button{grid-column:3/6}}
/* 初動のカードにつながる追加の候補（10/26） */
.odds-suggest{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0;padding:6px 8px;border:1px dashed var(--cyan);border-radius:10px}
.odds-suggest>.small{flex-basis:100%}
.odds-suggest-chip{cursor:pointer;border-style:dashed}.odds-suggest-chip:hover{border-color:var(--cyan);color:var(--cyan)}
/* つながりの合計（10/26）：場所と行動の横に「○種類・計○枚」 */
.deck-link-route-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* デッキのつながりの一覧：デッキに入れている枚数（×2）を絵の右下に（10/26） */
.deck-link-card{position:relative}
.deck-link-copies{position:absolute;right:2px;top:calc(var(--dl-h, 0px) + 2px);font-size:11px;font-weight:700;line-height:1;padding:3px 5px;border-radius:999px;background:#0b1220e6;color:#fff;border:1px solid #fff9;pointer-events:none}
.link-sep{color:var(--muted);margin:0 2px}
/* カードのページ：カードの文とつながるカードの間を、ほかの欄の間と同じに（10/26 本人の指摘。会員だけの欄の入れ物が間を消していた） */
.card-text + .member-slot > .panel:first-child,.card-text + .member-slot > .member-gate:first-child{margin-top:16px}
/* 枚数（×2）は、どの画面でもカードの絵の右下にそろえる（10/26 本人の指示） */
.pool-card .copies,.card-pool .pool-card .copies{top:auto;left:auto;right:3px;bottom:3px}
.rp-copies{top:auto;bottom:4px;right:4px}
.ref-count{top:auto;left:auto;right:2px;bottom:2px}
.deck-link-face{position:relative;display:block;width:100%;min-width:0}.deck-link-face>.blank-face,.deck-link-face>img{display:block;width:100%;max-width:100%;box-sizing:border-box}.deck-link-copies{top:auto;bottom:2px;right:2px}
/* カード名の一覧（テキスト）：閉じた時の高さをほかの折りたたみ欄と同じに（10/26 本人の指摘。見出しの下の余白が残っていた） */
details.card-text-list>summary{list-style:none;margin:0}
details.card-text-list>summary::-webkit-details-marker{display:none}
/* 右の列の商品：発売予定と最近発売された商品を、細い線で上下に分ける（10/26 本人の指示） */
.products-aside .pa-head>.help-btn{margin-left:0;flex:none}
.products-aside .pa-sub{margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
/* シミュレーターのデッキの一覧（10/26 本人の指示）：トップと同じカードで、押すと選ぶ。選んだデッキは枠と「使う・相手」の印。 */
.sim-picked{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin:4px 0 10px}
.sim-slot{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel);display:grid;gap:6px;min-width:0}
.sim-slot.on{border-color:var(--cyan);box-shadow:0 0 0 2px color-mix(in srgb,var(--cyan) 25%,transparent)}
.sim-slot-head{display:flex;align-items:center;gap:4px}
.sim-slot .row{flex-wrap:nowrap;align-items:center;gap:8px;min-width:0}
.sim-picked-deck{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.sim-picked-deck img{width:80px;height:42px;object-fit:cover;border-radius:6px;flex:none}
.sim-picked-icon{width:80px;height:42px;border-radius:6px;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,var(--deep),var(--panel2));color:var(--muted)}
.sim-field{display:grid;gap:6px;margin-top:10px;justify-items:start}
.sim-field .field-name{display:inline-flex;align-items:center;gap:4px}
.sim-random{gap:8px 18px;flex-wrap:wrap}
.sim-random-note{color:var(--gold);margin:0;display:flex;align-items:center;gap:4px}
.sim-summary{display:inline-flex;flex-wrap:wrap;gap:4px 14px}
.sim-search{align-items:flex-end;gap:8px;margin:6px 0}
.sim-grid .combo-card{cursor:pointer}
.sim-grid .combo-card.sim-on{border-color:var(--cyan);box-shadow:0 0 0 2px color-mix(in srgb,var(--cyan) 35%,transparent)}
.sim-mark{position:absolute;right:8px;top:8px;display:inline-flex;align-items:center;gap:4px;background:var(--cyan);color:#06121f;font-weight:800;font-size:12px;border-radius:8px;padding:2px 8px}
.badge.sim-where{background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
@media (max-width:640px){.sim-picked{grid-template-columns:1fr}.sim-picked-deck img,.sim-picked-icon{width:64px;height:34px}}
/* カードのページの商品の欄（10/26）：見出しの枠の中なので、枠を重ねずに置く */
.card-hero-side .card-products{margin:0;padding:0;border:0;box-shadow:none;background:transparent}
/* シミュレーターの設定（10/26 本人の指示：縦に長くしない）：遊び方・CPU の強さ・手番を PC では横に並べる。ランダムは各選択肢の中。始めるボタンは画面の下に付いたまま。 */
.sim-set-grid{display:flex;flex-wrap:wrap;gap:12px 36px;align-items:flex-start}
.sim-set-grid>.sim-field{flex:0 1 auto;min-width:0;max-width:100%}
.sim-set-grid>.sim-field p{max-width:340px}
.sim-set-grid .sim-field{margin-top:0}
.sim-set-grid .sim-field p{margin:0}
.sim-slot-head .grow{flex:1}
.sim-rnd[aria-pressed="true"]{background:color-mix(in srgb,var(--gold) 22%,transparent);border-color:var(--gold);color:var(--ink)}
.sim-here{justify-self:start}
.sim-here[aria-pressed="true"]{border-color:var(--cyan);color:var(--cyan)}
.sim-slot-deck{flex-wrap:nowrap}
.sim-bar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:10px 14px;justify-content:space-between;margin-top:16px;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 -6px 20px rgba(0,0,0,.14)}
.sim-bar .sim-summary{flex:1;min-width:0;color:var(--muted)}
.sim-summary-need{color:#d14343;font-weight:700}
@media (max-width:640px){.sim-bar{flex-direction:column;align-items:stretch;padding:8px 64px 8px 10px;border-radius:12px 12px 0 0}.sim-bar .button{justify-content:center}.sim-set-grid{grid-template-columns:1fr;gap:12px}}
/* ===== 見出しの整理（10/26 本人の指示「色々機能が増えたので、ヘッダー等を整理して」） ===== */
/* 探す・作る：名前を押すとページへ、横の小さな矢印でメニュー。2つを1つの丸い項目に見せる */
.site-nav .nav-item{display:inline-flex;align-items:stretch;flex:none;border-radius:999px}
.site-nav .nav-item>a{padding-right:4px}
.site-nav .nav-caret{display:inline-grid;place-items:center;flex:none;width:22px;min-height:30px;margin:0;padding:0 4px 0 0;border:0;border-radius:0 999px 999px 0;background:none;color:var(--muted);cursor:pointer}
.site-nav .nav-caret .icon{transform:rotate(90deg);transition:transform .15s}
.site-nav .nav-caret[aria-expanded="true"] .icon{transform:rotate(-90deg)}
.site-nav .nav-caret:hover{color:var(--ink);background:color-mix(in srgb,var(--cyan) 10%,transparent)}
.site-nav .nav-item>a:hover{border-radius:999px 0 0 999px}
/* 今のページ：名前と矢印をまとめて色を付ける */
.site-nav .nav-item.is-current{background:color-mix(in srgb,var(--cyan) 16%,transparent)}
.site-nav .nav-item.is-current>a[aria-current="page"]{background:none}
.site-nav .nav-item.is-current .nav-caret{color:var(--cyan)}
/* 作る：目立つ色の丸い項目（矢印も同じ色の中、細い線で分ける） */
.site-nav .nav-item-create{background:var(--cyan);background-image:linear-gradient(135deg,var(--cyan),color-mix(in srgb,var(--cyan) 75%,var(--purple)))}
.site-nav .nav-item-create>a.nav-create{background:none;box-shadow:none}
.site-nav .nav-item-create .nav-caret{color:var(--cyan-ink);box-shadow:inset 1px 0 0 color-mix(in srgb,var(--cyan-ink) 30%,transparent)}
.site-nav .nav-item-create .nav-caret:hover{color:var(--cyan-ink);background:color-mix(in srgb,var(--cyan-ink) 12%,transparent)}
.site-nav .nav-item-create.is-current{background:var(--cyan);background-image:linear-gradient(135deg,var(--cyan),color-mix(in srgb,var(--cyan) 75%,var(--purple)));box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 35%,transparent)}
.site-nav .nav-item-create.is-current .nav-caret{color:var(--cyan-ink)}
/* メニューの中身：画面に対して置く（見出しの横並びの枠に切られないように） */
.hmenu{display:inline-flex;align-items:center}
.hmenu-panel{position:fixed;z-index:75;min-width:200px;max-width:calc(100vw - 16px);display:grid;gap:2px;padding:6px;border-radius:12px;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.22)}
.hmenu-panel>a,.hmenu-panel>button,.site-nav .hmenu-panel>a{display:flex;flex-direction:row;align-items:center;gap:8px;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:8px;background:none;box-shadow:none;color:var(--ink);font-size:14px;font-weight:600;line-height:1.3;text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer}
.hmenu-panel>a>.icon,.hmenu-panel>button>.icon{flex:none;color:var(--muted)}
.hmenu-panel>a:hover,.hmenu-panel>button:hover,.hmenu-panel>a:focus-visible,.hmenu-panel>button:focus-visible,.site-nav .hmenu-panel>a:hover{background:var(--bg2);color:var(--ink)}
.hmenu-panel>a[aria-current="page"],.site-nav .hmenu-panel>a[aria-current="page"]{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 12%,transparent)}
.hmenu-panel>a[aria-current="page"]>.icon{color:var(--cyan)}
/* 項目を減らして幅に余裕ができたので、幅961〜1023でも「作る」の名前を出す（それより狭いと横にはみ出す） */
@media (min-width:961px) and (max-width:1023px){.site-nav a.nav-create span{display:inline}}
/* スマホ：6つの項目と2つの矢印が1段に収まるよう、隙間を詰める */
@media (max-width:520px){
  .site-header-inner .site-nav{gap:2px;justify-content:space-between}
  .site-nav .nav-item>a{padding-right:2px}
  .site-nav .nav-caret{width:20px}
}
/* 対戦の盤面（10/26 本人の指示：縦に長くしない・EXモンスターゾーンは2人で共有）：上に相手（180度回した並び）、真ん中に共有の EX モンスターゾーン、下に自分。 */
.rb-duel{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:12px;background:var(--deep);border:1px solid var(--line)}
.rb-duel .rb-half{padding:0;border:0;background:transparent;gap:4px;box-shadow:none;border-radius:0}
.rb-duel .rb-row{gap:4px}
.rb-duel .rb-slot{aspect-ratio:auto;height:clamp(46px,7vh,66px);border-radius:6px}
.rb-duel .rb-slot img{object-fit:contain}
.rb-duel .rb-slot .rb-empty,.rb-duel .rb-slot .rb-name{font-size:10px}
.rb-duel .rb-side .rb-lp{font-size:11px}
.rb-duel .rb-hand{gap:3px}
.rb-duel .rb-hand-cards{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.rb-duel .rb-hand-cards>*{flex:none;width:50px;height:70px;aspect-ratio:auto}
.rb-opp-head{display:flex;align-items:center;gap:8px;min-width:0}
.rb-opp-head .rb-hand{flex-direction:row;align-items:center;gap:8px;min-width:0;flex:1}
.rb-opp-head .rb-hand-head{flex:none}
.rb-duel .rb-opp-head .rb-hand-cards>*{width:26px;height:36px}
.rb-duel .rb-opp-head .rb-slot .rb-name{font-size:0}
.rb-shared{padding:4px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.rb-emz-label{align-self:center;text-align:center;font-size:10px;line-height:1.2}
.rb-theirs{border:1px solid #d1435b}
.rb-theirs img{transform:rotate(180deg)}
.rb-theirs.defense img{transform:rotate(90deg) scale(.72)}
.rb-owner{position:absolute;left:2px;top:2px;font-size:9px;line-height:1.3;background:#d1435b;color:#fff;border-radius:4px;padding:0 3px;z-index:1}
.rb-own-label{display:block}
@media (max-width:640px){
  #replay-root>.rp-layout .rb-duel{position:sticky;top:0;z-index:4;padding:4px;gap:2px;box-shadow:0 6px 14px rgba(0,0,0,.25)}
  #replay-root>.rp-layout .rb-duel .rb-board{position:static;box-shadow:none;padding:0}
  .rb-duel .rb-slot{height:34px}
  .rb-duel .rb-hand-cards>*{width:38px;height:54px}
  .rb-duel .rb-opp-head .rb-hand-cards>*{width:20px;height:28px}
}
/* シミュレーターから開いた時の準備（10/26 本人の指示）：強さ・手番は1行で見せ、最初の手札とデッキのカードはたたむ。 */
.rp-sim-opts>summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;list-style:none}
.rp-sim-opts>summary::-webkit-details-marker{display:none}
.rp-sim-chip{display:inline-block;margin-right:10px;font-weight:700}
.rp-sim-change{display:inline-flex;align-items:center;gap:4px}
.rp-sim-opts[open]>summary .rp-sim-change{display:none}
.rp-sim-opts .cpu-box{margin-top:8px}
.rp-hand-pick>summary{display:flex;align-items:center;gap:6px;flex-wrap:wrap;cursor:pointer}
.rp-hand-pick[open]>summary{margin-bottom:10px}
/* 対戦の操作（10/26 本人の指示）：やり直す・中断する・リプレイで残す・終了する。続きから・引き継いで操作する。 */
.rp-sim-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.sim-resume-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sim-resume-list li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.sim-resume-list .sim-deck-text{flex:1;min-width:180px}
.sim-resume{margin-bottom:16px}
.rb-takeover[disabled]{opacity:.5}
/* 画面の中の確認・お知らせ・入力の小窓（10/26 本人の指示：ブラウザの確認窓は画面の上に出るため、中央に出す。dialog.mjs） */
.ask-dialog{width:min(460px,calc(100vw - 32px));padding:20px}
.ask-dialog[open]{animation:ask-in .14s ease-out}
@keyframes ask-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ask-dialog[open]{animation:none}}
.ask-dialog .ask-body{display:flex;gap:12px;align-items:flex-start}
.ask-dialog .ask-icon{flex:none;color:var(--cyan);margin-top:3px}
.ask-dialog.ask-danger .ask-icon{color:var(--danger)}
.ask-dialog .ask-text{flex:1;min-width:0}
.ask-dialog .ask-title{margin:0 0 6px;font-size:17px}
.ask-dialog .ask-msg{margin:0;white-space:pre-line;line-height:1.75;overflow-wrap:anywhere;max-height:60vh;overflow:auto}
.ask-dialog .ask-input{display:block;width:100%;margin-top:12px;font:inherit}
.ask-dialog .ask-foot{margin-top:18px}
@media (max-width:600px){.ask-dialog{padding:14px}.ask-dialog .ask-foot .button{flex:1;justify-content:center;min-height:44px}}
/* 続きから編集の一括の操作（10/26）：行の先頭に選ぶ欄 */
.resume-item .bulk-check{margin-right:2px}
/* タグ（10/26）：おすすめ・自分のタグ・サイトのタグの候補。押すと付ける・外すを切り替える */
.tag-editor .tag-input-row{flex-wrap:nowrap;gap:8px}
.tag-editor .tag-input-row input{flex:1;min-width:0}
.tag-editor .tag-group{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.tag-editor .tag-group-label{font-weight:700}
.tag-editor .tag-auto-note{display:flex;align-items:center;gap:4px;color:var(--green);margin:0}
.tag-empty-note{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
/* まとめて取り込む（10/26）：始め方のボタンと、進み具合・1つずつの結果の一覧 */
.bulk-start.drag{background:color-mix(in srgb,var(--cyan) 22%,var(--panel));border-style:dashed;border-color:var(--cyan)}
.start-note .help-btn{margin-left:4px}
.bulk-result{grid-column:1/-1;border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.bulk-result[hidden]{display:none}
.bulk-result .bulk-head{gap:6px;align-items:center;flex-wrap:nowrap}
.bulk-result progress{width:100%;height:10px;accent-color:var(--cyan)}
.bulk-result p{margin:0}
.bulk-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:280px;overflow:auto}
.bulk-items li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:6px 8px;border-radius:8px;background:var(--panel);min-width:0}
.bulk-items li.ok>.icon{color:var(--green)}
.bulk-items li.ng>.icon,.bulk-items .bulk-reason{color:var(--danger)}
.bulk-items .bulk-name{font-weight:700;overflow-wrap:anywhere;min-width:0}
.bulk-items li>.button{margin-left:auto}
@media (max-width:640px){
  body.fit-screen #start-options .bulk-result{grid-column:1/-1}
  body.fit-screen .bulk-items{max-height:160px}
}
/* 対戦リプレイ（10/26 本人の指示）：種類の札の色（緑）・一覧の結果の札・投稿のページの上に出すリプレイと対戦の情報 */
.badge.kind.kind-replay{background:color-mix(in srgb,#15803d 16%,var(--panel));color:#15803d;border:1px solid color-mix(in srgb,#15803d 40%,transparent)}
:root[data-theme="dark"] .badge.kind.kind-replay{color:#86efac}
.combo-card.kind-card-replay{border-top:3px solid #16a34a}
.badge.duel-result{background:var(--bg2);color:var(--muted)}
.badge.duel-result.win{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--ink)}
.badge.duel-result.lose{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--ink)}
.replay-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.replay-main>.section-head{margin:0}
.duel-facts{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.duel-fact{display:flex;align-items:baseline;gap:6px;padding:4px 10px;border-radius:999px;background:var(--panel2);font-size:13px;min-width:0;max-width:100%}
.duel-fact dt{color:var(--muted);font-weight:400;flex:none}
.duel-fact dd{margin:0;font-weight:700;overflow-wrap:anywhere;min-width:0}
.duel-fact.result-win dd{color:var(--green)}
.duel-fact.result-lose dd{color:var(--danger)}
@media (max-width:640px){.duel-fact{font-size:12px;padding:3px 8px}}
/* いまの状況の1行（10/26 本人の指示）：盤面の一番上。ターン・誰のターン・フェイズ・チェーン。 */
.rb-status{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;font-size:12px;font-weight:700;color:var(--ink);padding:2px 4px;line-height:1.5}
.rb-status>span+span::before{content:'・';color:var(--muted);font-weight:400}
.rb-status>span:nth-child(2){color:var(--cyan)}
/* 置くゾーンを選ぶ時：置ける枠を光らせて押せるように。選ぶ欄にはカードの絵と名前。 */
.rb-slot.rb-target{border:2px solid var(--gold);background:color-mix(in srgb,var(--gold) 18%,transparent);cursor:pointer;animation:rb-target-pulse 1.4s ease-in-out infinite}
.rb-slot.rb-target:hover,.rb-slot.rb-target:focus-visible{background:color-mix(in srgb,var(--gold) 34%,transparent)}
@keyframes rb-target-pulse{50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 35%,transparent)}}
@media (prefers-reduced-motion:reduce){.rb-slot.rb-target{animation:none}}
.rp-subject{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rp-subject .grow{display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-width:0}
.rp-subject .rp-title{margin:0}
/* 選べる操作が無い時（10/26）：行き止まりにせず、戻る・動かし直すを出す。 */
.rp-stuck p{display:flex;align-items:center;gap:6px;margin:0 0 8px}
@media (max-width:640px){.rb-status{font-size:11px;padding:0 2px}}
/* 一覧のリンクで開いたコメントを少しの間目立たせる（10/26 dot D-016） */
.comment-focus{outline:3px solid var(--gold);outline-offset:3px;border-radius:10px;transition:outline-color .6s}
/* CPU 同士の観戦（10/26 本人の指示）：再生・一時停止・1手進める・速さ・ターンの上限 */
.rp-watch{display:grid;gap:8px;margin:0 0 10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.rp-watch .row{gap:8px;flex-wrap:wrap;align-items:center}
.rp-watch p{margin:0}
.rp-watch-last{color:var(--ink);font-weight:700}
/* マイページの数を押すとそのタブへ（10/26） */
.me-stat{display:grid;gap:2px;justify-items:center;background:none;border:0;border-radius:10px;padding:4px 2px;cursor:pointer;color:inherit;font:inherit}.me-stat:hover,.me-stat:focus-visible{background:var(--panel2)}.me-stat-k{font-size:11px;color:var(--muted)}.me-stat-v{font-size:18px;font-weight:800}
/* 機能のオン・オフ（10/26 本人の指示）：止めた機能のページの案内・運営者だけに見せる印・予約の知らせの帯・管理画面の切り替え */
.feature-stopped{display:grid;justify-items:center;gap:10px;text-align:center;max-width:560px;margin:40px auto;padding:28px 20px}
.feature-stopped h1{font-size:20px;margin:0}
.feature-stopped p{margin:0;color:var(--muted)}
.feature-stopped .row{justify-content:center;flex-wrap:wrap;gap:8px}
.staff-stopped{outline:2px dashed var(--gold);outline-offset:2px;border-radius:8px}
.staff-stopped-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-color:var(--gold)}
.switch-bar span{flex:1;min-width:0}
.admin-tab-head{margin:0 0 12px}
.admin-tab-head .section-head{margin:0}
.admin-tab-head h2{margin:0}
.admin-tab-desc{margin:4px 0 0}
.switch-group{margin:12px 0;display:grid;gap:4px}
.switch-group legend{font-weight:700;padding:0 6px}
.switch-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:6px 8px;border-radius:10px}
.switch-row.changed{background:color-mix(in srgb,var(--gold) 14%,transparent)}
.switch-row .checkbox{margin:0;min-width:min(260px,100%)}
.switch-state{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto}
.switch-presets{gap:8px;align-items:center}
.switch-apply{display:grid;gap:10px;margin-top:12px}
.switch-plan-fields{display:grid;gap:8px}
.switch-count{margin:0}
.switch-plans li{align-items:flex-start;gap:10px}
@media (max-width:640px){.switch-state{margin-left:0}.switch-row{padding:6px 2px}}
.admin-col{min-width:0}
/* まとめて取り込む前の確認（10/27）：何として取り込むかの切り替えと、付けた題名 */
.bulk-result .bulk-kind{gap:6px 8px;align-items:center;flex-wrap:wrap}
.bulk-result .bulk-kind .seg{flex-wrap:wrap}
.bulk-items .bulk-title{color:var(--ink);overflow-wrap:anywhere;min-width:0}
/* 機能のオン・オフの升目（10/27 本人の指示）：縦は機能、横は使う人。行・列・全体でまとめて切り替え。スマホでは表の中だけ横に動かす。 */
.sw-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.sw-grid{border-collapse:separate;border-spacing:0;width:100%;min-width:620px;font-size:14px}
.sw-grid th,.sw-grid td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.sw-grid thead th{position:sticky;top:0;background:var(--panel);z-index:1;font-size:13px;white-space:nowrap}
.sw-grid .sw-name{text-align:left;position:sticky;left:0;background:var(--panel);z-index:1;min-width:210px;font-weight:400}
.sw-grid .sw-name .link-btn{font-weight:700;text-align:left}
.sw-grid .sw-corner{text-align:left;left:0;z-index:2}
.sw-grid .sw-group th{text-align:left;background:var(--bg2);position:sticky;left:0}
.sw-grid .sw-group .link-btn{font-weight:700}
.sw-cell.changed,.sw-linked.changed{background:color-mix(in srgb,var(--gold) 20%,transparent)}
.sw-hit{display:inline-flex;align-items:center;gap:4px;cursor:pointer;min-height:32px;padding:2px 6px;border-radius:8px}
.sw-hit .sw-off{display:none;color:var(--danger);font-weight:700;font-size:12px}
.sw-hit .sw-on{color:var(--green);font-size:12px}
.sw-hit:has(input:not(:checked)) .sw-off{display:inline}
.sw-hit:has(input:not(:checked)) .sw-on{display:none}
.sw-na,.sw-staff{color:var(--muted);font-size:12px}
.sw-dim{opacity:.6}
.sw-grid .switch-state{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:6px}
.rights-mark{display:inline-flex;align-items:center;gap:2px;margin-left:6px}
.rights-badge{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--ink);border:1px solid var(--gold);font-size:11px;padding:1px 6px;border-radius:999px;white-space:nowrap}
@media (max-width:640px){.sw-grid .sw-name{min-width:150px}.sw-grid{font-size:13px}}
/* 管理画面の欄どうしの間（10/27 本人の指摘：「予約」の欄が上の欄とくっついていた）。mt などで間を決めている欄はそのまま。 */
.admin-main>*+.panel:not(.mt):not(.mt-lg),.admin-main>*+section:not(.mt):not(.mt-lg){margin-top:14px}
.sw-grid .link-btn{color:var(--ink);text-decoration:underline dotted;text-underline-offset:3px}
/* 升目の列をそろえる（10/27 本人の指摘：一部の「使える」がずれていた）：列の幅を固定し、どの升目も中央に。行・列・全体の印（混ざっている時は「－」）。 */
.sw-grid{table-layout:fixed;min-width:640px}
.sw-grid col.sw-c-aud{width:120px}
.sw-grid col.sw-c-staff{width:72px}
.sw-grid td.sw-cell{text-align:center}
.sw-grid .sw-hit{justify-content:center}
.sw-grid .sw-hit .sw-on,.sw-grid .sw-hit:has(input:not(:checked)) .sw-off{display:inline-block;min-width:3.4em;text-align:left}
.sw-grid .sw-all{color:var(--muted);font-size:12px}
.sw-tri{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:700}
.sw-grid thead .sw-tri{font-size:13px}
.sw-name-line{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sw-grid .sw-name .switch-state{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 0 26px}
.sw-grid .sw-name .switch-state:empty{display:none}
.sw-rule{margin:10px 0 0}
@media (max-width:640px){.sw-grid{min-width:560px}.sw-grid col.sw-c-aud{width:96px}.sw-grid col.sw-c-staff{width:56px}}
.sw-grid thead th{white-space:normal;line-height:1.3}
/* 分類の行は、横に動かしても名前が見えるように（10/27） */
.sw-grid tr.sw-group th{position:static}.sw-grid tr.sw-group th .sw-tri{position:sticky;left:8px}
/* 次の規制の予想（10/27。運営だけ） */
.ban-predict{margin-top:16px}
.ban-predict .bp-title{font-size:1.1rem;line-height:1.4}
.ban-predict .bp-title .help-btn{vertical-align:middle;margin-left:4px}
.bp-review{margin:8px 0}
.bp-facts{margin:4px 0 10px}
.bp-missing{color:var(--gold);margin-left:4px}
.bp-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.bp-item{display:grid;grid-template-columns:28px 56px 1fr;gap:10px;align-items:start;padding:10px;border:1px solid var(--line);border-radius:var(--radius,10px);background:var(--panel2);min-width:0}
.bp-rank{font-weight:800;font-size:1.05rem;color:var(--muted);text-align:right;padding-top:2px}
.bp-face{display:block;width:56px}
.bp-face .blank-face{font-size:5px;padding:3px;border-radius:4px}
.bp-body{min-width:0}
.bp-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bp-head a{font-weight:700;overflow-wrap:anywhere}
.bp-status{font-size:.75rem}
.bp-status.bp-semi_limited{background:var(--gold);color:#1b1404}
.bp-status.bp-limited{background:var(--danger);color:#fff}
.bp-score-row{display:flex;align-items:center;gap:8px;margin:6px 0 4px}
.bp-bar{flex:1;height:8px;border-radius:4px;background:var(--bg2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.bp-bar-fill{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--cyan),var(--gold))}
.bp-score{min-width:3.2em;text-align:right;font-size:.95rem}
.bp-reasons{margin:0;padding-left:1.1em;font-size:.82rem;line-height:1.45;color:var(--ink)}
.bp-reasons li{overflow-wrap:anywhere}
.bp-card-line{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:6px 0 0}
@media (max-width:640px){.bp-list{grid-template-columns:1fr}.bp-item{grid-template-columns:22px 44px 1fr;gap:8px;padding:8px}.bp-face{width:44px}}
/* 大会の結果の入力（管理画面。10/27） */
.event-rows{display:grid;gap:8px;margin:6px 0}
.event-row{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:end;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.event-row .event-cards{grid-column:1/-1;order:5}
.event-row .event-cards textarea{min-height:60px}
.event-rank{width:100%}
@media (max-width:760px){.event-row{grid-template-columns:64px minmax(0,1fr) auto}.event-row>label:nth-of-type(3){grid-column:1/-1;order:4}}
.event-table td:nth-child(2),.event-table td:nth-child(4),.event-table th{white-space:nowrap}
@media (max-width:640px){.event-table td:nth-child(2){font-size:.8rem}}
/* 規制リストの2段のタブ・カードの画像・予想の割合（10/27） */
.reg-views{margin-bottom:6px}
.reg-views button{font-weight:700}
.reg-card{display:flex;align-items:center;gap:8px;min-width:0;text-decoration:none;color:inherit}
.reg-card:hover .reg-name{text-decoration:underline}
.reg-face{flex:0 0 30px;width:30px}
.reg-face .blank-face{font-size:3px;padding:1px;border-radius:2px}
.reg-face .card-face-img{border-radius:2px}
.reg-name{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.reg-en{display:block;font-size:.72rem;color:var(--muted)}
.reg-list li{display:flex;align-items:center;gap:6px}
.bp-trans{margin:4px 0 2px;line-height:1.5}
.bp-mode{margin:8px 0}
.bp-card-filter{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bp-flat-min{gap:8px;align-items:center;margin:6px 0}
.bp-flat td{vertical-align:middle}
.bp-flat-rank{color:var(--muted);text-align:right;width:2.5em}
.bp-flat-card{display:flex;align-items:center;gap:8px;min-width:0}
.bp-flat-card a:last-child{overflow-wrap:anywhere}
.bp-face-s{flex:0 0 28px;width:28px}
.bp-face-s .blank-face{font-size:3px;padding:1px;border-radius:2px}
.bp-flat-move{white-space:nowrap}
.bp-flat-p{min-width:7em}
.bp-bar-thin{display:block;height:4px;margin-top:3px}
.card-regs{margin-top:12px}
.card-regs h2{font-size:1rem;display:flex;align-items:center;gap:6px}
.card-reg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.card-reg-chip{display:flex;flex-direction:column;gap:1px;padding:5px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);text-decoration:none;color:var(--ink);min-width:6.5em;font-size:.8rem}
.card-reg-chip .crc-label{color:var(--muted);font-size:.72rem}
.card-reg-chip .crc-date{color:var(--muted);font-size:.68rem}
.card-reg-chip.on{border-color:var(--gold)}
.card-reg-chip.reg-forbidden{border-color:var(--danger)}
.card-reg-chip:hover{outline:2px solid var(--cyan);outline-offset:1px}
.card-reg-predict{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.card-reg-predict h3{display:flex;align-items:center;gap:6px;margin:0 0 4px}
.card-reg-plist{margin:0;padding-left:1.1em;font-size:.85rem;line-height:1.55}
@media (max-width:640px){.bp-flat-move{white-space:normal}.card-reg-chip{min-width:calc(50% - 6px)}}
@media (max-width:640px){.bp-flat th:nth-child(5),.bp-flat td:nth-child(5){display:none}.bp-flat td,.bp-flat th{padding:6px 4px}.bp-flat-move{font-size:.78rem}.bp-flat-p{min-width:4.8em}.bp-flat-rank{width:1.6em}.bp-face-s{display:none}}
/* カードの属性・種族・レベルの札（利用者のタグと見た目は同じ。訳せるように別の名前） */
.info-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:12px;color:var(--ink);margin:2px 4px 2px 0;background:var(--panel2)}
/* 規制の予想：カードの枠（全体の並びは行）のどこを押してもカードのページへ（10/27 本人の指示：名前を押した時だけ移っていた） */
.bp-item,.bp-flat tbody tr{position:relative}.bp-item .bp-link::after,.bp-flat tbody tr .bp-link::after{content:"";position:absolute;inset:0;z-index:1}.bp-item:hover,.bp-flat tbody tr:hover{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 6%,var(--panel))}.bp-item,.bp-flat tbody tr{cursor:pointer}
/* 全体の並びの順位の列は折り返さない（英語の「Placement」が縦に1文字ずつ折れていた） */
.bp-flat thead th:first-child,.bp-flat-rank{white-space:nowrap;width:1%}
/* 規制リスト・予想の一覧の道具と表示の切り替え（10/27） */
.reg-tools{margin:8px 0}
.reg-changed .checkbox{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:.85rem}
.reg-change{font-size:.72rem;white-space:nowrap;margin-left:auto}
.reg-change.up{color:var(--danger)}
.reg-change.down{color:var(--green)}
.reg-flat{list-style:none;margin:0;padding:0}
.reg-flat .reg-tile{display:flex;align-items:center;gap:8px;min-width:0}
.reg-flat .reg-badge{font-size:.72rem;white-space:nowrap}
.reg-b-forbidden{background:var(--danger);color:#fff}
.reg-b-limited,.reg-b-limit1{background:var(--gold);color:#1b1404}
.reg-view-list{display:grid;gap:4px}
.reg-view-list .reg-tile{padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.reg-view-list .reg-card{flex:1}
.reg-view-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.reg-view-row{display:grid;grid-auto-flow:column;grid-auto-columns:120px;gap:10px;overflow-x:auto;padding-bottom:6px}
.reg-view-grid .reg-tile,.reg-view-row .reg-tile{flex-direction:column;align-items:stretch;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);text-align:center}
.reg-view-grid .reg-card,.reg-view-row .reg-card{flex-direction:column;gap:6px}
.reg-view-grid .reg-face,.reg-view-row .reg-face{flex:none;width:72px;margin:0 auto}
.reg-view-grid .reg-face .blank-face,.reg-view-row .reg-face .blank-face{font-size:6px;padding:3px;border-radius:4px}
.reg-view-grid .reg-change,.reg-view-row .reg-change{margin:0 auto}
.bp-list.bp-view-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.bp-list.bp-view-grid .bp-reasons{display:none}
.bp-list.bp-view-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);overflow-x:auto;padding-bottom:6px}
@media (max-width:640px){.reg-tools .sort-field{min-width:calc(50% - 6px)}.reg-view-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}.reg-view-grid .reg-face,.reg-view-row .reg-face{width:56px}.bp-list.bp-view-row{grid-auto-columns:85%}}
/* 規制の予想の見込み：1行に1つ（10/27） */
.bp-odds{list-style:none;margin:6px 0 4px;padding:0;display:grid;grid-template-columns:auto minmax(36px,1fr) auto;gap:3px 8px;align-items:center;font-size:.84rem;line-height:1.35}
.bp-odds>li{display:contents}
.bp-odds>li.bp-odds-few{display:block;grid-column:1/-1;font-size:.78rem;cursor:help}
.bp-odds-label{white-space:nowrap}
.bp-odds-bar{height:6px;border-radius:3px;background:var(--bg2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.bp-odds-fill{display:block;height:100%;border-radius:3px;background:var(--muted)}
.bp-odds-up .bp-odds-fill{background:var(--danger)}
.bp-odds-down .bp-odds-fill{background:var(--green)}
.bp-odds-p{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.bp-odds-same{color:var(--muted)}.bp-odds-same .bp-odds-p{font-weight:400}
.bp-basis .help-btn{margin-left:6px}
.bp-flat-p [title]{cursor:help}
.card-reg-plist{list-style:none;padding-left:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.card-reg-plist>li{border:1px solid var(--line);border-radius:var(--radius,10px);background:var(--panel2);padding:8px 10px}
.crp-head{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
.card-reg-plist .bp-reasons{margin-top:4px;font-size:.78rem;color:var(--muted)}
/* 予想の4つの状態（10/27）：規制＝赤・緩和＝緑・いまと同じ＝灰。一番高い行を強調 */
.bp-odds-mark{display:inline-block;width:1.2em;text-align:center;font-size:.8em;margin-right:2px}
.bp-odds-up .bp-odds-label,.bp-odds-up .bp-odds-p{color:var(--danger)}
.bp-odds-down .bp-odds-label,.bp-odds-down .bp-odds-p{color:var(--green)}
.bp-odds-same .bp-odds-fill{background:var(--muted)}
.bp-odds-top .bp-odds-label,.bp-odds-top .bp-odds-p{font-weight:800;font-size:1.06em}
.bp-odds-top .bp-odds-bar{height:9px;box-shadow:inset 0 0 0 1px currentColor}
.bp-odds-top.bp-odds-same .bp-odds-label,.bp-odds-top.bp-odds-same .bp-odds-p{color:var(--ink)}
.bp-sums{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0 2px;font-weight:700;font-variant-numeric:tabular-nums}
.bp-sum-up{color:var(--danger)}.bp-sum-down{color:var(--green)}
.bp-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 8px}
.bp-status.bp-none{background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.bp-status.bp-forbidden{background:#5a0b14;color:#fff}
.bp-move-up{color:var(--danger)}.bp-move-down{color:var(--green)}
/* 目次（10/27）：長いページだけ。本文の横に空きがあれば横に付いてくる目次、無ければ右下の「目次」ボタンから開く（toc.mjs） */
main h2,main [data-toc]{scroll-margin-top:16px}
main h2[tabindex="-1"]:focus,main [data-toc][tabindex="-1"]:focus{outline:none}
.toc-root[hidden]{display:none}
.toc{font-size:13px;line-height:1.45}
.toc-title{margin:0 0 6px 12px;font-size:12px;font-weight:700;color:var(--muted)}
.toc-list{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.toc-list>li{margin:0}
.toc-link{display:block;padding:5px 10px;border-left:2px solid var(--line);border-radius:0 8px 8px 0;color:var(--muted);text-decoration:none;overflow-wrap:anywhere}
.toc-link .toc-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.toc-link:hover{color:var(--ink);background:var(--panel2);text-decoration:none}
.toc-link[aria-current="true"]{color:var(--cyan);border-left-color:var(--cyan);font-weight:700;background:color-mix(in srgb,var(--cyan) 10%,transparent)}
.toc-link:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.toc-root.is-side .toc-btn{display:none}
.toc-root.is-side .toc{position:fixed;z-index:30;top:var(--toc-top,76px);left:var(--toc-left,auto);width:var(--toc-width,240px);max-height:var(--toc-max,70vh);overflow-y:auto;overscroll-behavior:contain;padding:8px 4px 8px 0;scrollbar-width:thin}
.toc-root.is-float .toc-btn{position:fixed;z-index:58;right:max(16px,env(safe-area-inset-right));bottom:calc(72px + env(safe-area-inset-bottom));height:40px;margin:0;padding:0 14px;display:inline-flex;align-items:center;gap:6px;border-radius:20px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 92%,transparent);color:var(--ink);font:inherit;font-size:13px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.18);cursor:pointer;backdrop-filter:blur(6px)}
.toc-root.is-float .toc-btn:hover,.toc-root.is-float.open .toc-btn{border-color:var(--cyan);color:var(--cyan)}
.toc-root.is-float .toc{display:none}
.toc-root.is-float.open .toc{display:block;position:fixed;z-index:59;right:max(16px,env(safe-area-inset-right));bottom:calc(120px + env(safe-area-inset-bottom));width:min(320px,calc(100vw - 32px));max-height:min(60svh,calc(100svh - var(--hh,60px) - 150px));overflow-y:auto;overscroll-behavior:contain;padding:12px 10px 12px 4px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.toc-root.is-float.open .toc-link .toc-text{-webkit-line-clamp:3}
body.fit-screen .toc-root{display:none}
@media print{.toc-root{display:none}}
/* 規制の予想への投票（10/27）：カード1枚ぶんの欄（ban-vote-ui.mjs）とマイページの一覧 */
.bv{margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.bv-head{display:flex;align-items:center;gap:6px;margin-bottom:6px}.bv-title{font-weight:700}
.bv-opts{display:flex;flex-wrap:wrap;gap:6px}
.bv-opt{--bv:var(--muted);min-height:32px;padding:4px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--bv) 55%,var(--line));background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.bv-opt:hover{border-color:var(--bv)}.bv-opt:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.bv-opt.is-mine{background:color-mix(in srgb,var(--bv) 24%,transparent);border-color:var(--bv);font-weight:800}
.bv-opt:disabled{opacity:.6;cursor:wait}.bv-now{color:var(--muted);font-size:11px;margin-left:2px}
.bv-forbidden{--bv:var(--danger)}.bv-limited,.bv-limit1{--bv:var(--gold)}.bv-semi_limited,.bv-limit2{--bv:var(--cyan)}.bv-limit3{--bv:var(--purple)}.bv-none{--bv:var(--green)}
.bv-tally{margin-top:6px}.bv-bars{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.bv-bar-row{display:grid;grid-template-columns:minmax(64px,auto) 1fr 40px;align-items:center;gap:6px}
.bv-bar{height:8px;border-radius:999px;background:color-mix(in srgb,var(--line) 60%,transparent);overflow:hidden}
.bv-bar-fill{display:block;height:100%;background:var(--bv)}.bv-bar-pct{text-align:right}
.bv-count,.bv-login,.bv-note{margin:6px 0 0}
.badge.bv-pick{background:color-mix(in srgb,var(--bv) 20%,transparent);color:var(--ink);border:1px solid var(--bv)}
.bv-my-table td{vertical-align:top}
@media (max-width:640px){.bv-my-table th:nth-child(4),.bv-my-table td:nth-child(4){display:none}}
/* 過去の予想と投票（ban-history-ui.mjs） */
.bh-pick{margin:6px 0 10px}.bh-line{margin:4px 0 8px}
.bh-pred{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 10px}
.bh-p{color:var(--muted)}.bh-p.is-likely{color:var(--ink);font-weight:800}.bh-p.is-likely::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--bv);margin-right:4px;vertical-align:middle}
.bh-changed{color:var(--gold)}.bh-table td{vertical-align:top}
.bv-me{margin:4px 0 10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
@media (max-width:640px){.bh-table th:nth-child(2),.bh-table td:nth-child(2){display:none}}
/* 予想の投票の印と、過去の予想の欄（10/27） */
.bp-voted{font-weight:400;font-size:.9em}
.bp-history{margin-top:14px;border-top:1px solid var(--line);padding-top:8px}
.bp-history>summary{cursor:pointer;font-weight:700;padding:6px 0}
/* 規制リスト・カードのページ・検索の詳しい条件（10/30 担当：規制リスト・カード・検索・タグ） */
/* 規制リスト：前回から変わったカードと変わらないカードの欄を分ける */
.reg-area{margin-top:14px;padding:12px;border-radius:12px;border:1px solid var(--line)}
.reg-area-moved{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 7%,transparent)}
.reg-area-same{background:var(--bg2)}
.reg-area-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.reg-area-head h2{font-size:17px;margin:0}
.reg-area>.reg-grid{margin-top:10px}
.reg-area>.reg-flat,.reg-area>div>.reg-flat{margin-top:10px}
/* 規制リスト：札（禁止・制限など）の位置を、カード名の長さに関わらずそろえる */
.reg-tile-foot{display:flex;flex-direction:column;align-items:center;gap:4px}
.reg-change.none{display:none}
.reg-view-grid .reg-tile,.reg-view-row .reg-tile{height:100%}
.reg-view-grid .reg-tile-foot,.reg-view-row .reg-tile-foot{margin-top:auto;padding-top:6px}
.reg-view-grid .reg-change,.reg-view-row .reg-change{margin:0}
.reg-view-list .reg-tile{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.reg-view-list .reg-tile-foot{display:grid;grid-template-columns:7.5em 9em;align-items:center;justify-items:start;gap:8px}
.reg-view-list .reg-change{margin:0}
.reg-view-list .reg-change.none{display:block}
@media (max-width:640px){.reg-view-list .reg-tile-foot{grid-template-columns:6.5em;justify-items:start;gap:2px}.reg-view-list .reg-change.none{display:none}}
/* 検索の詳しい条件（畳める欄。すっきり見せる） */
.adv-fold{grid-column:1/-1;margin-top:6px;border-top:1px dashed var(--line);padding-top:6px}
.adv-fold>summary{cursor:pointer;font-weight:700;min-height:36px;display:flex;align-items:center;gap:6px;color:var(--cyan)}
.adv-body{display:grid;gap:10px;margin-top:6px}
.adv-lines{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.adv-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%}
.adv-line .adv-card{flex:1 1 200px;min-width:0}
.adv-line select{width:auto;flex:1 1 130px;max-width:100%}
.adv-line .icon-btn{flex:0 0 auto}
.adv-body>.filter-row>input.adv-card{max-width:360px;width:100%}
.adv-tip{margin:0}
/* カードのページ：このカードを使った投稿を探すボタン・テーマ・関連カード */
.card-find{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.card-find-label{display:inline-flex;align-items:center;gap:4px}
.card-find-btns{gap:6px;flex-wrap:wrap}
.card-theme-tags{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.theme-row{gap:6px;flex-wrap:wrap;align-items:center}
.theme-chip{text-decoration:none}
.theme-chip.named{border-style:dashed}
.theme-block{margin-top:12px}
.card-sub-head{font-size:15px;margin:12px 0 8px}
.card-related-used{margin-top:6px}
.theme-cards .related-blank .blank-face{width:100%;height:100%}
/* ==== カードを選ぶ・条件で指定する共通の小窓（card-picker.mjs・cond-picker.mjs。10/30 担当：選ぶ小窓） ==== */
dialog.picker.cpk{width:min(1100px,96vw);max-width:min(1100px,96vw);height:min(880px,calc(100svh - 24px));max-height:calc(100svh - 24px);display:flex;flex-direction:column;gap:8px;padding:16px;overflow:hidden;box-sizing:border-box}
dialog.picker.cpk:not([open]){display:none}
dialog.picker.cpk *{box-sizing:border-box}
dialog.picker.cdp{width:min(860px,96vw);max-width:min(860px,96vw)}
.cpk>.dialog-head{margin-bottom:0;flex:none}
.cpk>.dialog-head h2{font-size:18px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpk .cpk-ok-top{margin-left:auto;flex:none}
.cpk-note{margin:0;flex:none}
.cpk>.name-dialog-top{flex:none;margin:0}
.cpk-tabs{display:flex;gap:6px;flex-wrap:wrap;flex:none;border-bottom:1px solid var(--line);padding-bottom:6px}
.cpk-tab{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;min-height:36px}
.cpk-tab[aria-selected="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--cyan-ink)}
.cpk-tab .count{font-size:11px;opacity:.8;font-weight:600}
.cpk-tools{display:grid;gap:8px;flex:none}
.cpk-search-row{display:flex;align-items:center;gap:8px;min-width:0}
.cpk-search-row>.icon{color:var(--muted);flex:none}
.cpk-search{flex:1;min-width:0;min-height:40px}
.cpk-withtext{flex:none;white-space:nowrap}
.cpk-tool-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.cpk-cond{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.cpk-cond-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-width:0}
.cpk-cond-chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cpk-filters{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:flex-end;min-width:0}
.cpk-filters .sort-field{min-width:0}
.cpk-filters select{max-width:100%}
.cpk-bulk{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:none}
.cpk-selcount{font-weight:700}
.cpk-status{min-height:1.2em;margin-right:auto}
.cpk-status.warn{color:var(--danger)}
.cpk-body{flex:1 1 auto;min-height:120px;overflow:auto;overscroll-behavior:contain;padding:2px;border-top:1px solid var(--line);padding-top:8px}
.cpk-suggest{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.cpk-suggest-chip{display:inline-flex;align-items:center;gap:5px;cursor:pointer;font:inherit;font-size:12.5px;color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 6px}
.cpk-suggest-chip.on{border-color:var(--cyan)}
.cpk-mini{display:inline-flex;width:20px;height:29px;flex:none;border-radius:3px;overflow:hidden}
.cpk-mini img{width:100%;height:100%;object-fit:cover}
.cpk-mini .cpk-noimg{font-size:7px;width:100%;height:100%;display:grid;place-items:center;background:var(--bg2);color:var(--muted);line-height:1;overflow:hidden;text-align:center}
.cpk-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));align-content:start}
.cpk-grid.view-small{gap:6px;grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}
.cpk-grid.view-list{gap:4px;grid-template-columns:1fr}
.cpk-empty{grid-column:1/-1;margin:16px 4px}
.cpk-card{position:relative;display:flex;flex-direction:column;gap:3px;border:2px solid transparent;border-radius:10px;background:var(--bg2);padding:5px;cursor:pointer;color:var(--ink);font:inherit;font-size:12px;line-height:1.3;text-align:center;min-width:0}
.cpk-card:hover{border-color:var(--line)}
.cpk-card.on{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 12%,var(--bg2))}
.cpk-card:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.cpk-face{position:relative;display:block;width:100%;aspect-ratio:59/86;border-radius:6px;overflow:hidden;background:var(--panel2)}
.cpk-face>img{width:100%;height:100%;object-fit:contain;display:block}
.cpk-face>.blank-face{width:100%;height:100%;aspect-ratio:auto;font-size:9px;padding:4px}
.cpk-grid.view-small .cpk-face>.blank-face{font-size:6px;padding:2px}
.cpk-face>.cpk-noimg{width:100%;height:100%;display:grid;place-items:center;color:var(--muted);font-size:11px;padding:4px;text-align:center}
.cpk-copies{position:absolute;left:4px;bottom:4px;background:#000b;color:#fff;border-radius:6px;padding:0 5px;font-size:11px;font-weight:700}
.cpk-check{position:absolute;top:4px;right:4px;min-width:24px;height:24px;padding:0 4px;border-radius:999px;background:var(--cyan);color:var(--cyan-ink);display:grid;place-items:center;font-weight:800;font-size:13px}
.cpk-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpk-grid.view-small .cpk-name{font-size:10.5px}
.cpk-grid.view-list .cpk-card{flex-direction:row;align-items:center;text-align:left;gap:10px;padding:4px 8px}
.cpk-grid.view-list .cpk-face{width:34px;flex:none}
.cpk-grid.view-list .cpk-face>.blank-face{font-size:4px;padding:1px}
.cpk-grid.view-list .cpk-check{top:50%;right:8px;transform:translateY(-50%)}
.cpk-grid.view-list .cpk-copies{font-size:9px;left:1px;bottom:1px;padding:0 3px}
.cpk-grid.view-list .cpk-name{flex:0 1 auto;font-size:13.5px;font-weight:700}
.cpk-grid.view-list .cpk-kind{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:34px}
.cpk-more-row{display:flex;justify-content:center;padding:10px 0}
.cpk-more-row:empty{display:none}
.cpk-tray{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;overflow-x:auto;flex:none;padding:6px 0 2px;border-top:1px solid var(--line);scrollbar-width:thin}
.cpk-tray[hidden]{display:none}
.cpk-tray-label{flex:none}
.cpk-chip{display:inline-flex;align-items:center;gap:5px;flex:none;border:1px solid var(--line);border-radius:999px;background:var(--panel2);padding:2px 4px 2px 4px;font-size:12.5px;max-width:260px}
.cpk-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.cpk-foot{flex:none;margin-top:0;padding-top:8px;border-top:1px solid var(--line)}
.cpk-seg-text{white-space:nowrap}
/* 条件で指定する小窓 */
.cdp-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;gap:12px;align-content:start;padding:2px}
.cdp-rows{display:grid;gap:8px}
.cdp-row{border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:10px;padding:8px 10px;display:grid;gap:8px;background:var(--panel2)}
.cdp-row.mode-or{border-left-color:var(--gold,#d8a93b)}
.cdp-row.mode-not{border-left-color:var(--danger)}
.cdp-row-head{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;min-width:0}
.cdp-field{font-size:14px}
.cdp-chips{display:flex;flex-wrap:wrap;gap:5px}
.cdp-val{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font:inherit;font-size:12.5px;font-weight:700;background:var(--panel);color:var(--ink);cursor:pointer;min-height:32px}
.cdp-val[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--cyan-ink)}
.cdp-val:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.cdp-kinds{display:grid;gap:6px}
.cdp-kind-group{display:grid;grid-template-columns:76px 1fr;gap:6px;align-items:start}
.cdp-kind-group>.small{padding-top:7px}
.cdp-range{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cdp-num{width:96px}
.cdp-text{width:100%;max-width:420px}
.cdp-presets{display:flex;flex-wrap:wrap;gap:5px;width:100%}
.cdp-add-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cdp-quick{display:flex;flex-wrap:wrap;gap:6px}
.cdp-fields{display:grid;gap:8px}
.cdp-result{border-top:1px solid var(--line);padding-top:8px;display:grid;gap:6px}
.cdp-label{margin:0;font-weight:700;overflow-wrap:anywhere}
.cdp-count{margin:0}
.cdp-hits{display:flex;flex-wrap:wrap;gap:6px}
.cdp-hit{display:grid;gap:2px;width:58px;font-size:10px;text-align:center}
.cdp-hit>img,.cdp-hit>.blank-face{width:58px;height:85px;object-fit:contain;border-radius:4px;aspect-ratio:auto;font-size:5px;padding:2px}
.cdp-hit-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdp-all-count{margin:0}
.card-search-pick{flex:none}
.odds-rule{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.odds-rule-label{overflow-wrap:anywhere}
@media (max-width:640px){
  /* スマホ：画面いっぱいに出す。見えている高さ（ブラウザの帯・キーボードを除く）に合わせ、中はカードの一覧だけを動かす */
  dialog.picker.cpk{position:fixed;inset:var(--vv-top,0px) 0 auto 0;margin:0;width:100%;max-width:100%;height:var(--vv-h,100dvh);max-height:var(--vv-h,100dvh);border-radius:0;border:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .cpk>.dialog-head h2{font-size:16px}
  .cpk-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
  .cpk-grid.view-small{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}
  .cpk-seg-text{display:none}
  .cpk-withtext{font-size:12px}
  .cpk-filters{gap:6px 10px}
  .cpk-foot{gap:6px}
  .cpk-foot>.button{flex:1 1 auto;justify-content:center;min-height:44px}
  .cpk-foot>.cpk-status{flex:1 1 100%;order:-1}
  .cdp-kind-group{grid-template-columns:1fr}
  .cdp-kind-group>.small{padding-top:0}
  .cdp-quick{display:none}
  .cdp-num{width:84px}
}
/* 選ぶ小窓：並べ替え・表示の畳み（パソコンでは開いておき、見出しは出さない） */
.cpk-more>summary{display:none}
@media (max-width:640px){
  .cpk-more>summary{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--muted);padding:2px 0}
  .cpk-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .cpk-tabs::-webkit-scrollbar{display:none}
  .cpk-tab{flex:none;padding:4px 10px;min-height:34px;font-size:12.5px}
  .cpk-tool-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .cpk-tool-row::-webkit-scrollbar{display:none}
  .cpk-tool-row>*{flex:none}
  .cpk-cond-chip{max-width:200px}
  .cpk-tools{gap:6px}
  .cpk-foot>.cpk-status:empty{display:none}
  .cpk-foot>.help-btn{flex:none}
}
.cpk-tabs[hidden]{display:none}

/* ==== 規制の予想の画面と投票（10/30 担当：予想の画面と投票） ==== */
/* 見込みの各行：状態・棒・割合・投票（10/30 本人の指示「投票ボタンは、各制限列の横に」）。列は subgrid で行どうしそろえる */
.bp-odds{grid-template-columns:max-content minmax(24px,1fr) max-content;gap:2px 8px}
.bp-odds.has-vote{grid-template-columns:max-content minmax(20px,1fr) max-content minmax(3.6em,max-content)}
.bp-odds>li{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;padding:2px 4px;border-radius:6px}
.bp-odds>li.bp-odds-few{display:block}
/* 強調は一番見込みの高い行だけ（10/30 本人の指示「強調表示するのは、もっとも確率が大きいものに」） */
.bp-odds-top{background:color-mix(in srgb,var(--muted) 16%,transparent)}
.bp-odds-top.bp-odds-up{background:color-mix(in srgb,var(--danger) 16%,transparent)}
.bp-odds-top.bp-odds-down{background:color-mix(in srgb,var(--green) 16%,transparent)}
.bp-odds-top .bp-odds-label,.bp-odds-top .bp-odds-p{font-size:1em}
.bp-odds-same.bp-odds-top .bp-odds-label,.bp-odds-same.bp-odds-top .bp-odds-p{color:var(--ink)}
.bv-cell{display:flex;justify-content:flex-end;min-width:0}
.bv-cell .bv-opt{min-height:26px;padding:1px 9px;font-size:12px;font-weight:700;border-color:color-mix(in srgb,var(--bv) 70%,var(--line));color:var(--ink);background:color-mix(in srgb,var(--bv) 8%,transparent)}
.bv-cell .bv-opt:hover{background:color-mix(in srgb,var(--bv) 22%,transparent)}
.bv-n{display:inline-flex;align-items:center;gap:2px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.bv-n.is-mine{color:var(--ink);font-weight:800}
.bp-odds-box .bv{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:4px 0 2px}
.bp-odds-box .bv .help-btn{width:20px;height:20px}
/* カードの枠全体はカードのページへのリンクのまま、？・投票・中のリンクは押せるように前に出す（10/30 本人の指示：？を押すとカード詳細に行ってしまった） */
.bp-item .help-btn,.bp-item button,.bp-item .bv a,.bp-item .bv-cell,.card-reg-plist .help-btn{position:relative;z-index:2}
/* 状態の札：明るい表示・暗い表示のどちらでも読める色（10/30 本人の指示「いま準制限などの文字が背景色と合わさって非常に見にくい」） */
.bp-status{--st:var(--muted);background:color-mix(in srgb,var(--st) 18%,var(--panel));border:1px solid var(--st);color:var(--ink);font-weight:700}
.bp-status.bp-none{--st:var(--line);background:var(--panel);border-color:var(--line);color:var(--ink)}
.bp-status.bp-semi_limited,.bp-status.bp-limit3{--st:var(--gold);background:color-mix(in srgb,var(--st) 18%,var(--panel));color:var(--ink)}
.bp-status.bp-limited,.bp-status.bp-limit2{--st:var(--danger);background:color-mix(in srgb,var(--st) 16%,var(--panel));color:var(--ink)}
.bp-status.bp-limit1{--st:var(--danger);background:color-mix(in srgb,var(--st) 22%,var(--panel));color:var(--ink)}
.bp-status.bp-forbidden{--st:var(--danger);background:color-mix(in srgb,var(--st) 34%,var(--panel));color:var(--ink)}
/* カード名は1行（長い名前は省いて title に全体。10/30 本人の指示「カード名の長さによって2段表示、段のずれ」） */
.bp-head{flex-wrap:nowrap;min-width:0}
.bp-head .bp-link,.bp-flat-card .bp-link,.bv-my-table .bv-row-link{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.bp-head .bp-link{flex:1 1 auto}
.bp-head .bp-status{flex:0 0 auto}
.bp-flat-card{min-width:0}.bp-flat-card .bp-link{flex:1 1 auto;max-width:22em}
/* 規制の候補・緩和の候補・変化なし（10/30 本人の指示） */
.bp-leans{margin:4px 0 6px;gap:6px;align-items:center}
.bp-lean{display:inline-block;padding:0 7px;border-radius:999px;font-size:.78rem;font-weight:700;border:1px solid var(--line);color:var(--ink)}
.bp-lean-tighten{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.bp-lean-loosen{border-color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent)}
.bp-lean-stay{color:var(--muted)}
.card-reg-plist .bp-sums{margin:4px 0 0}
.crp-head .bp-status{font-size:.75rem}
/* 横並び：列はすべて同じ幅（1枚目だけ狭くなっていた：一覧の列の決まりが残っていたため） */
.bp-list.bp-view-row{grid-template-columns:none;grid-auto-columns:minmax(330px,1fr)}
@media (max-width:640px){.bp-list.bp-view-row{grid-auto-columns:85%}}
/* タイル：番号と絵を上に、中身を全幅に（4つの列が狭くならないように） */
.bp-list.bp-view-grid .bp-item{grid-template-columns:28px 1fr;grid-template-areas:"rank face" "body body"}
.bp-list.bp-view-grid .bp-rank{grid-area:rank}.bp-list.bp-view-grid .bp-face{grid-area:face;width:44px}.bp-list.bp-view-grid .bp-body{grid-area:body}
  .bp-item{grid-template-columns:20px 40px 1fr;gap:6px}.bp-face{width:40px}
  .bp-odds{gap:2px 5px;font-size:.8rem}
  .bp-odds>li{padding:2px}
  .bv-cell .bv-opt{padding:1px 7px}
  .bp-flat-card .bp-link{max-width:11em}
/* マイページの投票：改定ごとのまとめ・行のどこを押してもその予想のページへ（10/30 本人の指示） */
.bv-my-sec h3{font-size:1rem;margin:6px 0}
.bv-my-table tbody tr{position:relative}.bv-my-table .bv-row-link::after{content:"";position:absolute;inset:0;z-index:1}
.bv-my-table tbody tr:hover{background:color-mix(in srgb,var(--cyan) 6%,transparent)}.bv-my-table tbody tr{cursor:pointer}
.bv-my-table .bv-row-link{max-width:18em;font-weight:700}
.badge.bv-open{background:color-mix(in srgb,var(--cyan) 18%,transparent);border:1px solid var(--cyan);color:var(--ink)}
@media (max-width:640px){.bv-my-table td:nth-child(4){display:block}.bv-my-table .bv-row-link{max-width:100%}}
@media (max-width:640px){.me-main table.bv-my-table tr{padding-left:10px}.me-main .bv-my-table td[data-label]::before{content:attr(data-label) "：";color:var(--muted);font-weight:400;margin-right:2px}.me-main .bv-my-table td[data-label] > div{display:inline}.me-main .bv-my-table td[data-label] > div::before{content:" "}}
/* ---- イラストだけの絵とデッキ紹介の印刷（10/30 担当：イラストの切り抜き・印刷） ---- */
.art-face{position:relative;display:block;overflow:hidden;border-radius:4px;background:var(--panel2);flex:none}
.art-face>img{position:absolute;max-width:none;display:block}
.art-face.art-missing{border:1px dashed var(--line)}
.card-pics .art-face.pic-art{flex:1 1 0;min-width:0;max-width:40px;width:40px}
.card-rank-img.rank-art{width:36px;height:36px}
.diagram-view .face-pick{white-space:nowrap}
.diagram-view .face-pick select{min-height:32px;padding:2px 6px;margin-left:6px}
.print-step{margin-top:14px}
.print-step h2{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:18px}
.print-step h3{font-size:15px;margin:16px 0 6px}
.print-search{margin-bottom:10px;flex-wrap:nowrap}.print-search input{flex:1 1 auto;min-width:0}
.print-rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px}
.print-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 10px;border-radius:10px;background:var(--bg2)}
.print-row-art{width:44px;height:44px;border-radius:6px}
.print-row-text{display:grid;min-width:0}.print-row-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.print-picked-list{margin:0;padding-left:22px;display:grid;gap:6px}
.print-picked-item{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:6px 0;border-bottom:1px solid var(--line)}
.print-picked-name{display:grid;flex:1 1 200px;min-width:0}.print-picked-name strong{overflow-wrap:anywhere}
.print-picked-item select{max-width:220px}
.print-picked-tools{gap:2px;flex-wrap:nowrap}
.print-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px 20px}
.print-field{display:grid;gap:6px;align-content:start;min-width:0}
.print-field select{max-width:100%}
.print-num input{width:84px}
.print-checks{gap:4px 14px;flex-wrap:wrap}
.print-preview{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0;align-items:flex-end}
.print-sheet{margin:0;display:grid;gap:4px;justify-items:center;max-width:100%}
.print-sheet svg{max-width:100%;height:auto;box-shadow:0 2px 10px #0004;border:1px solid var(--line);background:#fff}
@media (max-width:640px){.print-grid{grid-template-columns:minmax(0,1fr)}.print-rows{grid-template-columns:minmax(0,1fr)}.print-picked-item select{max-width:100%}.print-sheet{flex:1 1 100%}}
/* 権利の保護（10/30・権利の担当）：フッターの「権利者とは関係がない」の行は、1行を占める */
.footer-rights-note{flex-basis:100%;font-size:12px;color:var(--muted);line-height:1.6}
/* 使い方のページの画像と動画（help.html・10/30 告知と使い方の担当） */
.prose.help-guide{max-width:1120px}
.help-guide .hg-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px 28px;align-items:start;margin:28px 0;padding-top:8px;border-top:1px solid var(--line)}
.help-guide .hg-sec h2{margin-top:10px}
.help-guide .hg-shot{display:block;min-width:0}
.help-guide .hg-shot img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--panel2)}
.help-guide .hg-go{margin-top:12px}
.help-guide .hg-videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:12px 0 8px}
.help-guide .hg-video{margin:0;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);min-width:0}
.help-guide .hg-video figcaption{margin:0 0 10px}
.help-guide .hg-video video{display:block;width:100%;height:auto;border-radius:10px;background:var(--deep)}
.help-guide .hg-video video.hg-sp{display:none}
.help-guide .hg-steps{margin:10px 0 0;padding-left:1.4em}
@media (max-width:860px){.help-guide .hg-sec{grid-template-columns:minmax(0,1fr)}}
  .help-guide .hg-video video.hg-pc{display:none}
  .help-guide .hg-video video.hg-sp{display:block;max-width:340px;margin:0 auto}
  .help-guide .hg-shot img{max-width:340px;margin:0 auto}

/* 作る画面・デッキのつながりの担当（10/30） */
/* 61：公開の処理中の表示 */
.publish-progress{display:flex;align-items:center;gap:8px;margin:8px 0 0;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);font-weight:700}
.publish-progress .spinner{width:16px;height:16px;border-radius:50%;border:3px solid color-mix(in srgb,var(--cyan) 30%,transparent);border-top-color:var(--cyan);animation:df-spin .8s linear infinite;flex:none}
@keyframes df-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.publish-progress .spinner{animation:none;border-top-color:color-mix(in srgb,var(--cyan) 30%,transparent)}}
#publish-area.is-busy button{cursor:progress}
/* 62：画像の無いカード（白紙のカード）が、使ったカードの一覧で小さく潰れていた（高さ100%が効かなかった） */
.card-thumb-pic>.blank-face{height:auto;aspect-ratio:59/86}
/* 60：最終盤面の手札・墓地・除外 */
.board-pile{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.board-pile-head{gap:6px;margin-bottom:6px}
.board-pile .slot-row{flex-wrap:wrap}
/* ㊷㊼：コンボの初動率 */
.odds-note{width:100%;margin:4px 0 6px}
.odds-fixed{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 10px}
.odds-deck-size td:first-child{white-space:nowrap}
/* ===== 一覧・閲覧履歴・目次・使用履歴の担当（10/30） ===== */
/* 使用履歴（戦績）の入力：1試合ずつの枠（create.mjs の usageEditor） */
.usage-rows{display:grid;gap:10px;margin:8px 0}
.usage-entry{margin:0;padding:8px 10px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);min-width:0}
.usage-entry>legend{padding:0 4px}
.usage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.usage-f{display:flex;flex-direction:column;gap:3px;min-width:0}.usage-f>input,.usage-f>select{width:100%;min-width:0}
.usage-f.wide{grid-column:span 2}
.usage-entry-tools{margin-top:8px;gap:6px}
.usage-outcome .seg{display:flex;gap:4px;flex-wrap:nowrap}
.usage-outcome .seg>button{flex:1;min-width:0;min-height:34px;padding:2px 8px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.usage-outcome .seg>button[aria-pressed="true"]{color:var(--cyan-ink);border-color:transparent}
.usage-outcome .oc-win[aria-pressed="true"]{background:var(--green)}.usage-outcome .oc-loss[aria-pressed="true"]{background:var(--danger)}
.usage-outcome .oc-draw[aria-pressed="true"]{background:var(--gold)}.usage-outcome .oc-abort[aria-pressed="true"]{background:var(--muted)}
.usage-sum{margin:4px 0 8px;font-weight:700}
@media (max-width:520px){.usage-grid{grid-template-columns:1fr 1fr}.usage-f.wide,.usage-f.usage-outcome{grid-column:1/-1}}
/* 使用履歴（戦績）の表示（usage-ui.mjs）。㊴：列が細くなって文字が縦に1字ずつ並ばないよう、列の幅を保って横に送る */
.usage-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:6px 0 10px}
.usage-stat{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.usage-stat strong{font-size:20px;color:var(--cyan);line-height:1.2}
.usage-more{margin:6px 0}.usage-more>summary{cursor:pointer;font-weight:700;padding:4px 0}
.usage-table,.usage-mini{width:100%}
.usage-table th,.usage-mini th{white-space:nowrap}
.usage-panel .table td{overflow-wrap:break-word;word-break:normal;min-width:3.5em}
.usage-table td.usage-note{min-width:12em}
.usage-table td:not(.nowrap):not(.usage-note){min-width:7em}
.usage-panel .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:760px){.usage-panel .table{display:table}}
.usage-oc{display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 6px;border-radius:6px;font-weight:800;color:var(--cyan-ink)}
.usage-oc.oc-win{background:var(--green)}.usage-oc.oc-loss{background:var(--danger)}.usage-oc.oc-draw{background:var(--gold)}.usage-oc.oc-abort{background:var(--muted)}
/* 目次を左に（10/30 本人の指示⑰：パソコンの幅では本文の左に付いてくる目次。toc.mjs の tocLeftPlacement） */
body.toc-left main{padding-left:calc(var(--toc-base-pad,0px) + var(--toc-pad,230px))}
.toc-root.is-side .toc{padding:8px 6px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--shadow)}
.toc-root.is-side .toc-title{display:flex;align-items:center;gap:5px;margin:2px 0 6px 6px}
.toc-root.is-side .toc-link{border-left-width:3px;border-radius:8px}
@media print{body.toc-left main{padding-left:0}}
/* 閲覧履歴の画面（history.mjs） */
#history-tabs{margin:4px 0 16px}
.history-table td{vertical-align:top}.history-table .history-title{min-width:12em}
.history-settings{margin-top:16px}.history-settings>summary{cursor:pointer;font-weight:700;display:flex;align-items:center;gap:6px}
.history-settings .checkbox{margin:8px 0}
.history-act{display:inline-flex;align-items:center;gap:4px}
@media (max-width:640px){.history-table th:nth-child(5),.history-table td:nth-child(5),.history-table th:nth-child(6),.history-table td:nth-child(6){display:none}.history-table .history-title{min-width:9em}}

/* ==== 10/30 一般公開の準備（一般公開ボタン・数のまとめ・代わりの案内・友達の招待・管理画面のログイン）==== */
.admin-remember{margin-top:10px;flex-wrap:wrap}
.launch-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:8px 0}
.launch-group{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:0;min-width:0}
.launch-group legend{font-weight:700;padding:0 4px;font-size:13px}
.launch-group .checkbox{display:flex;gap:6px;align-items:flex-start;margin:4px 0;line-height:1.5;overflow-wrap:anywhere}
.launch-texts{display:grid;gap:8px;margin:10px 0}
.launch-text{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--panel2)}
.launch-text summary{cursor:pointer;overflow-wrap:anywhere}
.launch-text .field{display:grid;gap:4px;margin:8px 0}
.launch-text input,.launch-text textarea{width:100%;box-sizing:border-box}
.launch-state-table td,.launch-state-table th{overflow-wrap:anywhere}
.launch-btn{min-width:200px}
.stats-tools{flex-wrap:wrap;gap:10px;align-items:flex-end}
.stats-cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.stats-cards .stat-card{cursor:pointer;text-align:left;font:inherit;color:inherit}
.stats-cards .stat-card strong{font-size:24px}
.stats-cards .stat-card.on{border-color:var(--cyan);box-shadow:0 0 0 2px color-mix(in srgb,var(--cyan) 35%,transparent)}
.stats-chart-box{width:100%;overflow:hidden}
.stats-chart{width:100%;height:220px;display:block}
.stats-bar{fill:var(--cyan);opacity:.85}
.stats-bar:hover{opacity:1}
.stats-axis{fill:var(--muted);font-size:11px}
.stats-max{text-align:right;margin-top:2px}
.stats-raw{margin-top:8px}
.stats-table{font-size:13px}
.stats-table td,.stats-table th{white-space:nowrap}
.stats-mix{list-style:none;margin:6px 0;padding:0;display:grid;gap:6px}
.stats-mix li{display:grid;grid-template-columns:minmax(90px,9em) 1fr auto;gap:8px;align-items:center;font-size:13px}
.stats-mix-label{overflow-wrap:anywhere}
.stats-mix-track{height:10px;border-radius:99px;background:var(--panel2);overflow:hidden}
.stats-mix-bar{display:block;height:100%;background:var(--cyan);border-radius:99px}
.stats-mix-n{color:var(--muted);white-space:nowrap}
@media (max-width:520px){.stats-mix li{grid-template-columns:1fr auto}.stats-mix-track{grid-column:1/-1;order:3}}
.house-ad{display:flex;flex-direction:column;justify-content:center;gap:6px;width:100%;box-sizing:border-box;margin:0 auto;padding:16px 18px;border-radius:12px;border:1px dashed var(--line);background:var(--panel2);color:var(--ink);text-decoration:none;text-align:left;font:inherit;cursor:pointer;min-height:120px}
.house-ad:hover{border-color:var(--cyan)}
.house-ad.wide{flex-direction:row;align-items:center;flex-wrap:wrap;min-height:60px;padding:10px 14px}
.house-ad-brand{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.04em}
.house-ad-title{font-size:16px;line-height:1.4}
.house-ad-text{font-size:13px;color:var(--muted);line-height:1.6}
.house-ad-go{font-size:13px;color:var(--cyan);font-weight:700}
.house-ad.wide .house-ad-go{margin-left:auto}
.ad-slot.ad-house{min-height:0}
.invite-url{flex-wrap:wrap;gap:8px}
.invite-url input{flex:1 1 240px;min-width:0}
.invite-stats{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
/* 友達の招待の特典（10/31）：招待した人・招待から参加した人を並べる。スマホでは縦に */
.invite-gifts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:10px 0}
.invite-gift{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel)}
.invite-gift p{margin:4px 0 0}
.invite-gift-head{display:flex;gap:6px;align-items:center}
.invite-when{margin:0 0 12px}
.invite-sub{font-size:15px;margin:14px 0 6px}
.invite-arrival{align-items:center;flex-wrap:wrap}.invite-arrival>.grow{flex:1 1 240px;min-width:0}
.title-badge.badge-inviter{background:linear-gradient(135deg,#0f766e,#14b8a6);box-shadow:0 1px 4px rgba(15,118,110,.35)}
.title-badge.badge-invited{background:linear-gradient(135deg,#be185d,#f472b6);box-shadow:0 1px 4px rgba(190,24,93,.35)}
/* ==== 10/30 ここまで ==== */

/* ==== デッキの分析（10/30 デッキ分析・構築支援の担当） ==== */
.analysis-entry{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}
.analysis-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.analysis-deck-title{margin:0;font-size:1.25rem;overflow-wrap:anywhere}
.analysis-jump{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px}
.analysis-section,.analysis-settings{margin-top:16px;min-width:0}
.analysis-settings>summary{cursor:pointer}
.analysis-weight input{width:6.5em}
.analysis-table-wrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.analysis-table-wrap table{width:100%}
.analysis-table-wrap .analysis-effects{min-width:560px}
.analysis-table-wrap .analysis-side{min-width:540px}
.analysis-side td:first-child{min-width:8em}
.analysis-table-wrap th,.analysis-table-wrap td{overflow-wrap:anywhere}
.analysis-table-wrap th[scope=row]{font-weight:normal;text-align:left}
.analysis-balance{margin-top:8px}
.analysis-section .mt-sm,.analysis-balance .mt-sm{margin-top:6px}
.analysis-combo,.analysis-issue,.analysis-plan{border:1px solid var(--line);border-radius:var(--radius,10px);padding:10px 12px;margin:10px 0;background:var(--panel2,var(--panel));min-width:0}
.analysis-combo-head{gap:6px;align-items:center}
.analysis-combo-head a{font-weight:600;overflow-wrap:anywhere}
.analysis-combo-add{gap:6px;margin-top:10px}
.analysis-combo-add input{min-width:0;flex:1 1 220px}
.analysis-combo-add select{max-width:100%}
.analysis-unverified{border-left:3px solid var(--gold);padding-left:10px;margin-top:8px}
.analysis-unverified ul,.analysis-needs ul{margin:4px 0;padding-left:1.2em}
.analysis-needs{margin-top:8px}
.analysis-needs summary{cursor:pointer}
.analysis-issue.warn{border-left:4px solid var(--gold)}
.analysis-issue.info{border-left:4px solid var(--cyan)}
.analysis-issue p{margin:6px 0}
.analysis-section .warn,.analysis-needs li.warn{color:var(--danger)}
.odds-chip.missing{border-style:dashed;color:var(--danger)}
.analysis-delta.up{color:var(--green)}
.analysis-delta.down{color:var(--danger)}
.analysis-effects td{vertical-align:top}
.analysis-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:16px;align-items:start}
.analysis-editor{border:1px solid var(--line);border-radius:var(--radius,10px);padding:8px;max-height:560px;overflow-y:auto;min-width:0}
.analysis-edit-row{display:flex;align-items:center;gap:6px;padding:3px 2px;border-bottom:1px solid var(--line);min-width:0}
.analysis-edit-row:last-child{border-bottom:0}
.analysis-edit-row .odds-chip{min-width:0;max-width:62%}
.analysis-edit-row .odds-chip>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.analysis-edit-row.changed{background:rgba(245,214,61,.12)}
.analysis-section .odds-min{max-width:6.5em}
.analysis-edit-n{min-width:1.6em;text-align:center;font-variant-numeric:tabular-nums}
.analysis-changes p{margin:4px 0;overflow-wrap:anywhere}
.analysis-plan p{margin:6px 0;overflow-wrap:anywhere}
@media (max-width:760px){
  .analysis-compare{grid-template-columns:minmax(0,1fr)}
  .analysis-editor{max-height:420px}
  .analysis-weight input{width:5.5em}
}

/* 10/30 表示崩れの点検（本人の指示㉕。scripts/layout-audit.mjs で全ページ・7つの幅・明るい/暗い・3つのログインの状態を測って直した物） */
/* スマホの幅：一覧の道具（並べ替え・絞り込み・表示）を1つのボタンに畳む（tool-fold.mjs）。探す欄は残す。広い画面では何も変えない */
.tool-fold-btn{display:none}
@media (max-width:640px){
  .button.tool-fold-btn{display:flex;align-items:center;justify-content:flex-start;gap:2px;width:100%;flex:1 1 100%;min-height:44px;text-align:left;font-size:13.5px}
  .tool-fold-btn>span:first-child{flex:none}
  .tool-fold-btn .tool-fold-sum{flex:1;min-width:0;margin-left:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-weight:400}
  .tool-fold-btn .tool-fold-mark{flex:none;width:9px;height:9px;margin:0 4px 4px 8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
  .tool-fold-btn[aria-expanded="true"] .tool-fold-mark{transform:rotate(-135deg);margin-bottom:-4px}
  [data-fold="closed"]>:not(.sort-field.grow):not(.tool-fold-btn){display:none!important}
  .sort-controls[data-fold="closed"]{display:none!important}
  .sort-controls+.tool-fold-btn{margin:0 0 12px}
  /* 開いた時は2列に並べて、縦に長くならないようにする */
  [data-fold="open"].list-kit-tools,[data-fold="open"].sort-controls,#users-tools[data-fold="open"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 10px;align-items:end}
  [data-fold="open"]>.sort-field.grow,[data-fold="open"]>.tool-fold-btn,[data-fold="open"]>.list-kit-views,[data-fold="open"]>.sort-field:has(.seg:not(.has-select)){grid-column:1/-1}
  [data-fold="open"]>:has(input[type=checkbox]),[data-fold="open"]>:has(.range-inputs){grid-column:1/-1}
  [data-fold="open"]>.sort-field>select,[data-fold="open"]>label.sort-field select{width:100%;min-width:0}
}
/* スマホ：ログインしている時、見出しの右上の丸に自分の絵が出ていなかった（名前の span と一緒に隠れていた） */
@media (max-width:640px){.account-chip>span.avatar-dot{display:inline-grid}}
/* 右下の「目次」ボタンが、ページの一番下（下の案内のリンク・言語の選択）に重ならないよう、その分だけ下を空ける */
body:has(.toc-root.is-float:not([hidden])) .site-footer{padding-bottom:calc(22px + 112px + env(safe-area-inset-bottom))}/* お知らせの中のボタン（運営の二段階認証の「登録する」など）が、文に押されて1〜2字ずつ折れていた */
.notice>.button{flex:none;white-space:nowrap;align-self:center}
/* 指で操作する端末（スマホ・タブレット）：押せる範囲を 44px 以上にする。見た目の大きさは変えず、見えない押せる範囲（::after）を周りへ広げる。
   位置の指定（position）は :where で一番弱くし、ほかで固定・絶対の位置にしている部品はそのまま。足りない分だけ広げる（44px 以上の物は広げない） */
@media (pointer:coarse){
  :where(.icon-btn,.help-btn,.chip-btn,a.tag,button.tag,.seg button,.card-stat,.pager-btn,.button:not(summary),.tabs button,.toc-btn,.avatar-opt,.avatar-color,.bv-opt,.link-btn,.stepper button,.rail-arrow,button[data-tab]){position:relative}
  :where(.icon-btn,.help-btn,.chip-btn,a.tag,button.tag,.seg button,.card-stat,.pager-btn,.button:not(summary),.tabs button,.toc-btn,.avatar-opt,.avatar-color,.bv-opt,.link-btn,.stepper button,.rail-arrow,button[data-tab])::after{content:'';position:absolute;top:min(0px,calc((100% - 44px) / 2));bottom:min(0px,calc((100% - 44px) / 2));left:min(0px,calc((100% - 44px) / 2));right:min(0px,calc((100% - 44px) / 2))}
  .help-btn::after{inset:auto;top:min(0px,calc((100% - 44px) / 2));bottom:min(0px,calc((100% - 44px) / 2));left:min(0px,calc((100% - 44px) / 2));right:min(0px,calc((100% - 44px) / 2))}
  /* 選ぶ欄・入れる欄・折りたたみの見出し・はみ出しを切っている部品（::after が切れる）は、見た目ごと 44px にする */
  select,input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=number],input[type=date],input[type=range]{min-height:44px!important}
  .header-filters select{height:44px;min-height:44px}
  summary.button,.featured-thumb{min-height:44px}
  .featured-thumb{height:44px}
  details:not(.rb-pile):not(.base-menu):not(.add-menu)>summary:not(.button){min-height:44px;align-content:center}
}/* 320px の幅：見出しの下の並び（7つ）が 21px はみ出し、右端の「マイページ」が切れていた。間と左右の余白を詰めて収める */
@media (max-width:359px){.site-header-inner .site-nav{gap:0}.site-header-inner .site-nav>a:not(.nav-create){padding-left:7px;padding-right:7px}.site-header-inner .site-nav .nav-item-create>a.nav-create{padding-left:10px;padding-right:6px}}/* 表の見出しが、狭い列で「い/い/ね」「実際の/結/果」のように1字ずつ折れていた（管理画面の投稿の表・規制の予想の答え合わせの表など）。見出しは言葉の途中で折らない */
.table th{word-break:keep-all;overflow-wrap:normal}
.bh-table th{white-space:nowrap}/* マイページ（スマホ・タブレット）：1列の並びの幅が中身（通知の設定の表）に引っ張られ、320px の幅で 47px はみ出していた。列の幅を画面に合わせる */
@media (max-width:899px){.me-layout{grid-template-columns:minmax(0,1fr)}.me-main,.me-side{min-width:0}}/* 表の中の操作のボタン（マイページの投稿の一覧など）：横に詰めて並べるため、英語表示のタブレットの幅で「Edit」が1字ずつ折れていた。表の中では折り返して並べ、ボタンの文字は折らない */
.table .row-actions{flex-wrap:wrap}
.table .row-actions>.button{white-space:nowrap}/* 作る画面の上の段（画像・切り抜き・手順・図・保存・公開）の名前が 10.5px で小さすぎた（スマホ） */
@media (max-width:640px){body.fit-screen .stepper button,.stepper button{font-size:11.5px}}
/* 管理画面の2列の欄：320px の幅では 1列の最小 320px が画面より広く、27px はみ出していた */
.admin-two{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
/* スマホ：畳むボタンの入った並べ替えの欄は1行を使い、隣の「全10件」などを押しつぶさない（414px で1字ずつ折れていた） */
@media (max-width:640px){:has(>.sort-controls+.tool-fold-btn){flex:1 1 100%;min-width:0}}/* 盤面の山（除外・EX など）の名前が枠より長い時（「EX（表側）」）は、途中で切らず … で省く */
.rb-pile-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* マイページの左の一覧（スマホでは選ぶ欄に変わる前の一瞬）で、見出し「集めたもの」が1字ずつ折れないように */
@media (max-width:640px){.me-group{white-space:nowrap}}
/* 10/31 本人の指摘「注目のコンボの2行目サムネイルが大きく、人気のデッキ・リストの下に空欄ができる」：件数が少なくても（横幅いっぱいに並べたまま）、高さは5件並んだ時と同じにする */
@media (min-width:641px) and (pointer:fine){.featured-thumbs{container-type:inline-size}.featured-thumb{aspect-ratio:auto;height:calc((100cqw - 32px) / 5 * 630 / 1200)}}
/* 10/31 本人の指摘「シミュレーターをオフにしたが見出しから消えていない」：運営者にだけ見える止めた項目を、薄くして点線の枠を内側に出す（見出しの枠で外側の点線が切れて見えなかった） */
nav a.staff-stopped,.nav-item.staff-stopped,a.button.staff-stopped{opacity:.5;outline-offset:-3px}

/* 自動生成：表示設定の「画面の幅」用（scripts/css-layout-emulation.mjs） */
:root[data-layout="tablet"] .action-bar{flex-wrap:nowrap;gap:6px}
:root[data-layout="tablet"] .action-bar>.button,:root[data-layout="tablet"] .action-bar>.base-menu{flex:1 1 auto;min-width:0}
:root[data-layout="tablet"] .action-bar>.base-menu{min-width:max-content}
:root[data-layout="tablet"] .action-bar>.button,:root[data-layout="tablet"] .action-bar>.base-menu>summary{padding-left:9px;padding-right:9px;justify-content:center}
:root[data-layout="tablet"] .action-bar>.base-menu>summary{width:100%}
:root[data-layout="phone"] .editor-layout{grid-template-columns:250px minmax(0,1fr)}
:root[data-layout="phone"] .editor-layout>.preview-col{grid-column:1/-1}
:root[data-layout="phone"] .span-2{grid-column:1/-1}
:root[data-layout="tablet"] .editor-layout{grid-template-columns:250px minmax(0,1fr)}
:root[data-layout="tablet"] .editor-layout>.preview-col{grid-column:1/-1}
:root[data-layout="tablet"] .span-2{grid-column:1/-1}
:root[data-layout="phone"] .site-nav span{display:none}
:root[data-layout="phone"] .site-nav a{padding:9px}
:root[data-layout="phone"] .site-nav a.nav-create span{display:inline}
:root[data-layout="tablet"] .site-nav span{display:none}
:root[data-layout="tablet"] .site-nav a{padding:9px}
:root[data-layout="tablet"] .site-nav a.nav-create span{display:inline}
:root[data-layout="phone"] .hero,:root[data-layout="phone"] .detail-layout,:root[data-layout="phone"] .stats-grid{grid-template-columns:minmax(0,1fr)}
:root[data-layout="phone"] .editor-layout,:root[data-layout="phone"] .crop-layout{grid-template-columns:1fr}
:root[data-layout="phone"] .mobile-only{display:block}
:root[data-layout="phone"] h1{font-size:22px}
:root[data-layout="phone"] .hero h1{font-size:24px}
:root[data-layout="phone"] .filter-row{grid-template-columns:1fr}
:root[data-layout="phone"] .stepper button .label{display:none}
:root[data-layout="phone"] .card-info{grid-template-columns:1fr}
:root[data-layout="phone"] .card-info img,:root[data-layout="phone"] .card-info .noimg{margin:0 auto}
:root[data-layout="phone"] .board-grid{grid-template-columns:repeat(4,1fr)}
:root[data-layout="tablet"] .hero,:root[data-layout="tablet"] .detail-layout,:root[data-layout="tablet"] .stats-grid{grid-template-columns:minmax(0,1fr)}
:root[data-layout="tablet"] .editor-layout,:root[data-layout="tablet"] .crop-layout{grid-template-columns:1fr}
:root[data-layout="tablet"] .mobile-only{display:block}
:root[data-layout="tablet"] h1{font-size:22px}
:root[data-layout="tablet"] .hero h1{font-size:24px}
:root[data-layout="tablet"] .filter-row{grid-template-columns:1fr}
:root[data-layout="tablet"] .stepper button .label{display:none}
:root[data-layout="tablet"] .card-info{grid-template-columns:1fr}
:root[data-layout="tablet"] .card-info img,:root[data-layout="tablet"] .card-info .noimg{margin:0 auto}
:root[data-layout="tablet"] .board-grid{grid-template-columns:repeat(4,1fr)}
:root[data-layout="phone"] .site-header{flex-wrap:wrap}
:root[data-layout="phone"] .site-nav{order:3;flex-basis:100%;justify-content:space-around}
:root[data-layout="phone"] .brand small{display:none}
:root[data-layout="phone"] .combo-grid{grid-template-columns:1fr}
:root[data-layout="phone"] main{padding-top:14px}
:root[data-layout="phone"] .pref-row{grid-template-columns:1fr}
:root[data-layout="phone"][data-list="list"] .combo-card .thumb{width:110px}
:root[data-layout="phone"] .rb-name{font-size:9.5px;-webkit-line-clamp:4;padding:2px}
:root[data-layout="phone"] .rb-side .rb-lp{font-size:11px}
:root[data-layout="phone"] .rb-side .small{font-size:10px}
:root[data-layout="phone"] .rp-layout,:root[data-layout="phone"] .rb-layout{grid-template-columns:1fr}
:root[data-layout="phone"] .rb-row{gap:3px}
:root[data-layout="tablet"] .rp-layout,:root[data-layout="tablet"] .rb-layout{grid-template-columns:1fr}
:root[data-layout="tablet"] .rb-row{gap:3px}
:root[data-layout="phone"] .admin-layout{grid-template-columns:1fr}
:root[data-layout="phone"] .admin-nav{position:static;flex-direction:row;overflow-x:auto;flex-wrap:nowrap}
:root[data-layout="phone"] .admin-nav-group{flex-direction:row;align-items:center;flex:none}
:root[data-layout="phone"] .admin-nav-title{display:none}
:root[data-layout="tablet"] .admin-layout{grid-template-columns:1fr}
:root[data-layout="tablet"] .admin-nav{position:static;flex-direction:row;overflow-x:auto;flex-wrap:nowrap}
:root[data-layout="tablet"] .admin-nav-group{flex-direction:row;align-items:center;flex:none}
:root[data-layout="tablet"] .admin-nav-title{display:none}
:root[data-layout="phone"]{--hh:104px}
:root[data-layout="phone"] .site-header{padding:6px 12px;align-items:stretch}
:root[data-layout="phone"] .site-header-inner{flex-wrap:wrap;row-gap:4px;align-content:center}
:root[data-layout="phone"] .site-header-inner .site-nav{order:3;flex-basis:100%;justify-content:space-around}
:root[data-layout="phone"] .editor-layout[data-col]>.pool-col,:root[data-layout="phone"] .editor-layout[data-col]>.editor-col,:root[data-layout="phone"] .editor-layout[data-col]>.preview-col{display:none}
:root[data-layout="phone"] .editor-layout[data-col="pool"]>.pool-col,:root[data-layout="phone"] .editor-layout[data-col="editor"]>.editor-col,:root[data-layout="phone"] .editor-layout[data-col="preview"]>.preview-col{display:block}
:root[data-layout="phone"] .editor-layout[data-col]{grid-template-columns:1fr}
:root[data-layout="phone"] #col-switch{display:block}
:root[data-layout="tablet"] .editor-layout[data-col]>.pool-col,:root[data-layout="tablet"] .editor-layout[data-col]>.editor-col,:root[data-layout="tablet"] .editor-layout[data-col]>.preview-col{display:none}
:root[data-layout="tablet"] .editor-layout[data-col="pool"]>.pool-col,:root[data-layout="tablet"] .editor-layout[data-col="editor"]>.editor-col,:root[data-layout="tablet"] .editor-layout[data-col="preview"]>.preview-col{display:block}
:root[data-layout="tablet"] .editor-layout[data-col]{grid-template-columns:1fr}
:root[data-layout="tablet"] #col-switch{display:block}
:root[data-layout="phone"] .page-title{gap:6px}
:root[data-layout="phone"] .page-title h1{font-size:20px;flex:1;min-width:0}
:root[data-layout="phone"] .page-title .save-state{order:5;flex-basis:100%;font-size:12px}
:root[data-layout="phone"] .stepper button{flex-direction:column;gap:2px;padding:6px 4px;font-size:11px}
:root[data-layout="phone"] .stepper button .label{display:block}
:root[data-layout="phone"] .hero{padding:20px}
:root[data-layout="phone"] .hero .button.big{width:100%;justify-content:center}
:root[data-layout="phone"] .action-bar .button{flex:1 1 calc(50% - 8px);justify-content:center;padding:8px 6px;font-size:13px}
:root[data-layout="phone"] .detail-layout{gap:12px}
:root[data-layout="phone"] .zoom-tools{gap:4px}
:root[data-layout="phone"] .zoom-tools .button{padding:6px 8px;font-size:12px}
:root[data-layout="phone"] .grid-form{grid-template-columns:1fr}
:root[data-layout="phone"] .table{display:block;overflow-x:auto}
:root[data-layout="phone"] .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
:root[data-layout="phone"] .tabs button{flex:none}
:root[data-layout="phone"] .share-grid{grid-template-columns:repeat(3,1fr)}
:root[data-layout="phone"] dialog{max-width:calc(100vw - 16px);padding:14px}
:root[data-layout="phone"] .stat-card strong{font-size:22px}
:root[data-layout="phone"] .rb-hand-cards{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
:root[data-layout="tablet"] .page-title{gap:6px}
:root[data-layout="tablet"] .page-title h1{font-size:20px;flex:1;min-width:0}
:root[data-layout="tablet"] .page-title .save-state{order:5;flex-basis:100%;font-size:12px}
:root[data-layout="tablet"] .stepper button{flex-direction:column;gap:2px;padding:6px 4px;font-size:11px}
:root[data-layout="tablet"] .stepper button .label{display:block}
:root[data-layout="tablet"] .hero{padding:20px}
:root[data-layout="tablet"] .hero .button.big{width:100%;justify-content:center}
:root[data-layout="tablet"] .action-bar .button{flex:1 1 calc(50% - 8px);justify-content:center;padding:8px 6px;font-size:13px}
:root[data-layout="tablet"] .detail-layout{gap:12px}
:root[data-layout="tablet"] .zoom-tools{gap:4px}
:root[data-layout="tablet"] .zoom-tools .button{padding:6px 8px;font-size:12px}
:root[data-layout="tablet"] .grid-form{grid-template-columns:1fr}
:root[data-layout="tablet"] .table{display:block;overflow-x:auto}
:root[data-layout="tablet"] .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
:root[data-layout="tablet"] .tabs button{flex:none}
:root[data-layout="tablet"] .share-grid{grid-template-columns:repeat(3,1fr)}
:root[data-layout="tablet"] dialog{max-width:calc(100vw - 16px);padding:14px}
:root[data-layout="tablet"] .stat-card strong{font-size:22px}
:root[data-layout="tablet"] .rb-hand-cards{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
:root[data-layout="phone"] .site-header-inner .brand span{font-size:17px}
:root[data-layout="phone"] .header-tools .icon-btn{min-width:36px;height:36px}
:root[data-layout="phone"] .account-chip{max-width:120px;padding:5px 10px}
:root[data-layout="phone"] main{padding:14px 12px 48px}
:root[data-layout="phone"] .panel{padding:14px}
:root[data-layout="phone"] .share-grid{grid-template-columns:repeat(2,1fr)}
:root[data-layout="phone"] .stepper{gap:4px}
:root[data-layout="phone"] .link-row{grid-template-columns:1fr auto}
:root[data-layout="phone"] .link-row input[type=url]{grid-column:1/2}
:root[data-layout="phone"] .link-grid{grid-template-columns:1fr}
:root[data-layout="phone"] .link-thumb{width:72px;height:38px}
:root[data-layout="phone"] .home-hero.rich{grid-template-columns:1fr;padding:14px}
:root[data-layout="phone"] .featured-thumbs{grid-template-columns:repeat(5,minmax(0,1fr))}
:root[data-layout="tablet"] .home-hero.rich{grid-template-columns:1fr;padding:14px}
:root[data-layout="tablet"] .featured-thumbs{grid-template-columns:repeat(5,minmax(0,1fr))}
:root[data-layout="phone"] .header-filters select{max-width:112px}
:root[data-layout="tablet"] .header-filters select{max-width:112px}
:root[data-layout="phone"]{--hh:140px}
:root[data-layout="phone"] .site-header-inner .brand{margin-right:auto}
:root[data-layout="phone"] .header-filters{order:2;flex-basis:100%;gap:6px}
:root[data-layout="phone"] .header-filters .hf{flex:1}
:root[data-layout="phone"] .header-filters select{max-width:none;width:100%;height:30px;min-height:30px;font-size:12px}
:root[data-layout="phone"] .site-header-inner .site-nav{order:3}
:root[data-layout="phone"] .header-tools{gap:4px}
:root[data-layout="phone"] .site-header-inner .brand span,:root[data-layout="phone"] .site-header-inner .brand small{display:none}
:root[data-layout="phone"] .header-filters select{max-width:104px}
:root[data-layout="tablet"] .site-header-inner .brand span,:root[data-layout="tablet"] .site-header-inner .brand small{display:none}
:root[data-layout="tablet"] .header-filters select{max-width:104px}
:root[data-layout="phone"] .site-header-inner .brand span{display:inline}
:root[data-layout="phone"] .featured-title{font-size:16px}
:root[data-layout="phone"] .featured-meta{padding:10px 12px;gap:4px}
:root[data-layout="phone"] .featured-sub{font-size:11px;flex-wrap:wrap}
:root[data-layout="phone"] .featured-rank,:root[data-layout="phone"] .featured-kind{font-size:11px;padding:1px 8px}
:root[data-layout="phone"] .header-filters select{max-width:none}
:root[data-layout="phone"] .home-social{grid-template-columns:1fr}
:root[data-layout="tablet"] .home-social{grid-template-columns:1fr}
:root[data-layout="phone"] .home-social .side-users{grid-template-columns:1fr}
:root[data-layout="phone"] .card-dates{grid-template-columns:1fr}
:root[data-layout="phone"] .rank-types .seg button{padding:6px 9px;gap:4px;font-size:13px}
:root[data-layout="phone"] .rank-types .seg button svg{display:none}
:root[data-layout="phone"] .extra-row{grid-template-columns:1fr auto}
:root[data-layout="phone"] .extra-row textarea{grid-column:1/2}
:root[data-layout="phone"] .site-nav a.nav-sub span{display:none}
:root[data-layout="phone"] .site-nav a.nav-sub{padding:9px}
:root[data-layout="tablet"] .site-nav a.nav-sub span{display:none}
:root[data-layout="tablet"] .site-nav a.nav-sub{padding:9px}
:root[data-layout="phone"] .site-nav a.nav-sub{display:none}
:root[data-layout="phone"] .quick-row{grid-template-columns:1fr}
:root[data-layout="phone"] .quick-note{grid-column:1}
:root[data-layout="phone"] .wizard-grid{grid-template-columns:1fr}
:root[data-layout="tablet"] .account-chip{min-width:118px;justify-content:center}
:root[data-layout="phone"] .account-chip{min-width:96px;justify-content:center}
:root[data-layout="phone"] .param-row{grid-template-columns:1fr 56px 56px 48px 32px 28px}
:root[data-layout="phone"] #start-options .button.big{width:100%;justify-content:center}
:root[data-layout="phone"] .usage-row{grid-template-columns:1fr 1fr}
:root[data-layout="phone"] .usage-row.head{display:none}
:root[data-layout="phone"] .update-row{grid-template-columns:1fr 32px}
:root[data-layout="phone"] .update-row input[type=date]{grid-column:1/-1}
:root[data-layout="phone"] .header-tools a.icon-btn[href="/help.html"]{display:none}
:root[data-layout="phone"] .header-tools{gap:6px}
:root[data-layout="phone"] /* 見出しを3段から2段に：ロゴの横に「遊び方」を置き、言語は表示設定（歯車）とページの下に任せる */
  :root{--hh:100px}
:root[data-layout="phone"] .site-header-inner .brand{margin-right:0}
:root[data-layout="phone"] .site-header-inner .brand span{display:none}
:root[data-layout="phone"] .header-filters{order:1;flex:1 1 0%;flex-basis:0%;min-width:0;max-width:none;gap:4px}
:root[data-layout="phone"] .header-filters .hf:nth-child(2){display:none}
:root[data-layout="phone"] .header-filters .hf{flex:1;min-width:0}
:root[data-layout="phone"] .header-filters select{width:100%;max-width:none;height:34px;min-height:34px;font-size:13px}
:root[data-layout="phone"] .header-tools{order:2;gap:4px}
:root[data-layout="phone"] .account-chip{padding:0;width:36px;height:36px;min-width:36px;max-width:36px;justify-content:center;flex:none}
:root[data-layout="phone"] .account-chip>span{display:none}
:root[data-layout="phone"] .site-header-inner{flex-wrap:wrap;column-gap:6px}
:root[data-layout="phone"] .site-header-inner .site-nav{order:3;flex-basis:100%}
:root[data-layout="phone"] /* 作業の進み具合：画面の上に貼り付けず、小さく1つにまとめる（下の内容を隠さない） */
  .work-banner{position:relative;top:auto;flex-wrap:wrap;gap:8px;padding:10px 12px}
:root[data-layout="phone"] .work-icon{display:none}
:root[data-layout="phone"] .work-text{flex-basis:100%}
:root[data-layout="phone"] .work-text strong{font-size:14px}
:root[data-layout="phone"] .work-banner>.button,:root[data-layout="phone"] .work-banner>.icon-btn{flex:none}
:root[data-layout="phone"] .work-banner>.button{flex:1}
:root[data-layout="phone"] /* 知らせ（トースト）：画面の下に横いっぱいで出す（丸い吹き出しで縦に長くならないように） */
  .toast{left:12px;right:12px;max-width:none;border-radius:14px;transform:translateY(150%);bottom:max(12px,env(safe-area-inset-bottom))}
:root[data-layout="phone"] .toast.show{transform:translateY(0)}
:root[data-layout="phone"] /* 会員登録なしの案内：説明文は省いて1行に */
  .guest-notice p{display:none}
:root[data-layout="phone"] .guest-notice>div{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
:root[data-layout="phone"] /* 切り抜き：画像を先に、調整の欄はその下に */
  .crop-layout{display:flex;flex-direction:column}
:root[data-layout="phone"] .crop-layout>#crop-wrap{order:-1}
:root[data-layout="phone"] .stage-nav{position:sticky;bottom:0;z-index:14;margin:14px -4px 0;padding:10px 8px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
:root[data-layout="phone"] .stage-nav .button{flex:1;justify-content:center}
:root[data-layout="phone"] .stage-nav>span{display:none}
:root[data-layout="phone"] /* カード・編集・完成見本の切り替えは、下へ動かしても見出しの下に残す */
  .col-switch{position:sticky;top:0;z-index:13;padding:6px 0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px)}
:root[data-layout="tablet"] .stage-nav{position:sticky;bottom:0;z-index:14;margin:14px -4px 0;padding:10px 8px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
:root[data-layout="tablet"] .stage-nav .button{flex:1;justify-content:center}
:root[data-layout="tablet"] .stage-nav>span{display:none}
:root[data-layout="tablet"] /* カード・編集・完成見本の切り替えは、下へ動かしても見出しの下に残す */
  .col-switch{position:sticky;top:0;z-index:13;padding:6px 0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px)}
:root[data-layout="phone"] .help-btn{position:relative}
:root[data-layout="phone"] .help-btn::after{content:'';position:absolute;inset:-8px}
:root[data-layout="phone"] .card-stat{min-height:34px;padding:4px 8px}
:root[data-layout="phone"] .meta-pill{min-height:30px;display:inline-flex;align-items:center}
:root[data-layout="phone"] .section-head a.small,:root[data-layout="phone"] .section-head .button.small{min-height:36px}
:root[data-layout="phone"] .featured-thumb{min-height:40px;height:40px;aspect-ratio:auto;min-width:0}
:root[data-layout="phone"] .picker .picker-grid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
:root[data-layout="phone"] .picker .dialog-head h2{font-size:16px}
:root[data-layout="phone"] /* スマホ：下から出る板にする。高さは、ブラウザの帯がいちばん大きい時の画面の高さ（svh）に収め、中はカードの一覧だけを動かす */
  .picker{position:fixed;inset:auto 0 var(--vv-gap,0px) 0;margin:0;box-sizing:border-box;width:100%;max-width:100%;max-height:min(88svh,calc(var(--vv-h,100svh) - 16px));border-radius:18px 18px 0 0;
    /* 下の余白：端末の切り欠き・ブラウザの帯（大きい画面の高さ − 小さい画面の高さ）の大きい方を足す */
    padding:12px 12px calc(12px + max(env(safe-area-inset-bottom), calc(100lvh - 100svh)))}
:root[data-layout="phone"] .picker *{box-sizing:border-box}
:root[data-layout="phone"] .picker .picker-grid{min-height:0}
:root[data-layout="phone"] .picker .dialog-foot{gap:8px}
:root[data-layout="phone"] .picker .dialog-foot .button{flex:1;justify-content:center;min-height:44px}
:root[data-layout="phone"] .seg.has-select{display:block;padding:0;border:0;background:none}
:root[data-layout="phone"] .seg.has-select>button{display:none}
:root[data-layout="phone"] .seg.has-select>.seg-select{display:block;width:100%;min-height:44px;font-size:15px}
:root[data-layout="phone"] .optional>.add-chips{display:none}
:root[data-layout="phone"] .optional>.add-select:not([hidden]){display:block;width:100%;min-height:44px;font-size:15px;margin-top:6px}
:root[data-layout="phone"] .optional>.add-chip{display:none}
:root[data-layout="phone"] .site-header{padding:6px 10px}
:root[data-layout="phone"] .site-header-inner{column-gap:5px}
:root[data-layout="phone"] .site-header-inner .brand img{width:30px;height:30px}
:root[data-layout="phone"] .header-tools .icon-btn,:root[data-layout="phone"] .account-chip{width:34px;height:34px;min-width:34px;max-width:34px}
:root[data-layout="phone"] .header-filters select{height:34px;min-height:34px}
:root[data-layout="phone"] body.fit-screen .page-scroll{overflow:hidden;display:flex;flex-direction:column;scrollbar-gutter:auto}
:root[data-layout="phone"] body.fit-screen .site-footer{display:none}
:root[data-layout="phone"] body.fit-screen main{flex:1;min-height:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:6px 10px 0}
:root[data-layout="phone"] body.fit-screen main>*{flex:none}
:root[data-layout="phone"] body.fit-screen .page-title{flex-wrap:nowrap;margin-bottom:6px;gap:4px}
:root[data-layout="phone"] body.fit-screen .page-title h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-layout="phone"] body.fit-screen .page-title .title-icon{display:none}
:root[data-layout="phone"] body.fit-screen .page-title .save-state{order:0;flex-basis:auto;font-size:11px;white-space:nowrap}
:root[data-layout="phone"] body.fit-screen .page-title .icon-btn{min-width:34px;width:34px;height:34px}
:root[data-layout="phone"] body.fit-screen .stepper{margin-bottom:6px}
:root[data-layout="phone"] body.fit-screen .stepper button{min-height:40px;padding:3px 2px;font-size:10.5px;border-radius:10px;gap:0}
:root[data-layout="phone"] body.fit-screen .stepper button .num{width:18px;height:18px;font-size:11px}
:root[data-layout="phone"] body.fit-screen #work-banner,:root[data-layout="phone"] body.fit-screen #notice-area{max-height:22svh;overflow-y:auto}
:root[data-layout="phone"] body.fit-screen #notice-area .notice{margin:0 0 6px}
:root[data-layout="phone"] body.fit-screen main>section[data-panel]:not([hidden]){flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;margin:0}
:root[data-layout="phone"] body.fit-screen main>section.panel[data-panel]{padding:10px}
:root[data-layout="phone"] body.fit-screen .stage-nav{position:static;margin:0 -10px;padding:6px 10px calc(6px + env(safe-area-inset-bottom))}
:root[data-layout="phone"] body.fit-screen .stage-nav .button{min-height:42px}
:root[data-layout="phone"] /* 切り抜き：画像は残りの高さに収まる大きさで表示する（拡大した時だけ中で動かす） */
  body.fit-screen .crop-wrap{max-height:44svh}
:root[data-layout="phone"] body.fit-screen main>section[data-panel]{position:relative}
:root[data-layout="phone"] /* 会員登録なしの案内は1行に */
  body.fit-screen .guest-notice{padding:6px 10px;align-items:center;gap:8px}
:root[data-layout="phone"] body.fit-screen .guest-notice>div{flex-wrap:nowrap;justify-content:space-between;flex:1;min-width:0}
:root[data-layout="phone"] body.fit-screen .guest-notice strong{font-size:12.5px;line-height:1.35}
:root[data-layout="phone"] body.fit-screen .guest-notice .button{min-height:34px;padding:4px 10px;font-size:12px;flex:none}
:root[data-layout="phone"] /* 作るもの：1行に */
  body.fit-screen .kind-choice{flex-wrap:nowrap;gap:6px;margin-bottom:8px}
:root[data-layout="phone"] body.fit-screen .kind-choice>.field-name{display:none}
:root[data-layout="phone"] body.fit-screen .kind-choice>.seg{flex:1;min-width:0}
:root[data-layout="phone"] body.fit-screen .kind-choice>.seg button{flex:1;padding:6px 4px;font-size:12.5px;min-height:38px}
:root[data-layout="phone"] body.fit-screen .dropzone{padding:12px;gap:2px;border-radius:14px}
:root[data-layout="phone"] body.fit-screen .dropzone svg{width:26px;height:26px}
:root[data-layout="phone"] /* 始め方：3つを1行に並べ、説明は？で開く */
  body.fit-screen #start-options{grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:6px;margin-top:8px;align-items:stretch}
:root[data-layout="phone"] body.fit-screen #start-options .button.big{flex-direction:column;gap:2px;white-space:normal;font-size:11.5px;line-height:1.3;padding:6px 4px;min-height:58px;text-align:center}
:root[data-layout="phone"] body.fit-screen #start-options .start-note{grid-column:auto;margin:0;display:flex;align-items:center}
:root[data-layout="phone"] body.fit-screen #start-options .start-note>span{display:none}
:root[data-layout="phone"] body.fit-screen #start-options .start-note>.help-btn{display:inline-grid}
:root[data-layout="phone"] body.fit-screen #start-options #start-error{grid-column:1/-1}
:root[data-layout="phone"] body.fit-screen [data-panel=images]>.panel.mt-lg{margin-top:10px;padding:10px}
:root[data-layout="phone"] /* 会員登録なしの案内は、最初（画像）と最後（保存・公開）の段階だけに出す */
  body.fit-screen main:is([data-stage=crop],:root[data-layout="phone"] [data-stage=steps],:root[data-layout="phone"] [data-stage=diagram]) .guest-notice{display:none}
:root[data-layout="phone"] /* 手順：カード・編集・完成見本の切り替えは横いっぱい、中の欄は余白を詰める */
  body.fit-screen #col-switch{margin:0 0 6px;padding:0 0 4px}
:root[data-layout="phone"] body.fit-screen #col-switch .seg{display:flex;width:100%;box-sizing:border-box;flex-wrap:nowrap}
:root[data-layout="phone"] body.fit-screen #col-switch .seg button{flex:1;justify-content:center;min-height:36px}
:root[data-layout="phone"] body.fit-screen .editor-layout>.panel,:root[data-layout="phone"] body.fit-screen .editor-layout>.preview-col{padding:10px;border-radius:12px}
:root[data-layout="phone"] body.fit-screen .editor-col>.tabs{margin:-4px 0 10px;flex-wrap:nowrap}
:root[data-layout="phone"] body.fit-screen .editor-col>.tabs button{flex:1;justify-content:center;padding:6px 4px;min-height:40px;font-size:13px}
:root[data-layout="phone"] /* 動かして記録：説明文は？に任せ、見出しとボタンだけ */
  body.fit-screen .replay-bar{padding:8px 10px;gap:6px 8px;margin-bottom:8px}
:root[data-layout="phone"] body.fit-screen .replay-bar>.grow{flex:1 1 60%}
:root[data-layout="phone"] body.fit-screen .replay-bar>.grow>.small{display:none}
:root[data-layout="phone"] /* カードの一覧は、段階の中の動きだけで見る（一覧の中でさらに動かさない） */
  body.fit-screen .card-pool{max-height:none;overflow:visible}
:root[data-layout="phone"] body.fit-screen #pool-tools{gap:6px}
:root[data-layout="phone"] body.fit-screen #pool-tools .button{padding:6px 10px;font-size:12.5px;min-height:38px}
:root[data-layout="phone"] /* 切り抜き：見出しは1行、表示の大きさの切り替えはその下に横いっぱい */
  body.fit-screen #crop-head{flex-wrap:wrap;gap:6px;margin-bottom:6px}
:root[data-layout="phone"] body.fit-screen #crop-head h2{font-size:16px}
:root[data-layout="phone"] body.fit-screen #crop-head>.grow{display:none}
:root[data-layout="phone"] body.fit-screen #crop-head>.seg{flex-basis:100%;display:flex;flex-wrap:nowrap;box-sizing:border-box}
:root[data-layout="phone"] body.fit-screen #crop-head>.seg button{flex:1;justify-content:center}
:root[data-layout="phone"] body.fit-screen .crop-layout{gap:8px;margin-top:8px}
:root[data-layout="phone"] /* 図：図を先に見せ、調整の欄はその下に */
  body.fit-screen .diagram-layout{gap:8px}
:root[data-layout="phone"] body.fit-screen .diagram-layout>#diagram-editor{order:-1}
:root[data-layout="phone"] /* 知らせは下の「戻る・次へ」の上に出す */
  body.fit-screen .toast{bottom:calc(64px + env(safe-area-inset-bottom))}
:root[data-layout="phone"] .admin-layout{grid-template-columns:minmax(0,1fr)}
:root[data-layout="phone"] .admin-main{min-width:0}
:root[data-layout="phone"] .admin-nav{flex-direction:row;align-items:center;gap:8px;padding:8px;overflow:visible}
:root[data-layout="phone"] .admin-nav-select{display:block;flex:1;min-width:0;min-height:44px;font-size:15px}
:root[data-layout="phone"] .admin-nav-group{display:none}
:root[data-layout="phone"] .admin-nav-link{flex:none;padding:6px 4px}
:root[data-layout="tablet"] .admin-layout{grid-template-columns:minmax(0,1fr)}
:root[data-layout="tablet"] .admin-main{min-width:0}
:root[data-layout="tablet"] .admin-nav{flex-direction:row;align-items:center;gap:8px;padding:8px;overflow:visible}
:root[data-layout="tablet"] .admin-nav-select{display:block;flex:1;min-width:0;min-height:44px;font-size:15px}
:root[data-layout="tablet"] .admin-nav-group{display:none}
:root[data-layout="tablet"] .admin-nav-link{flex:none;padding:6px 4px}
:root[data-layout="phone"] dialog[open]:not(.picker){max-height:calc(100svh - 16px);overflow-y:auto;overscroll-behavior:contain}
:root[data-layout="phone"] dialog[open]:not(.picker)>.dialog-head:first-child{position:sticky;top:-14px;z-index:3;background:var(--panel);margin:-14px 0 8px;padding:14px 0 6px}
:root[data-layout="phone"] dialog[open]:not(.picker)>:is(.dialog-foot,:root[data-layout="phone"] .row):last-child,:root[data-layout="phone"] dialog[open]:not(.picker)>form>:is(.dialog-foot,:root[data-layout="phone"] .row):last-child{position:sticky;bottom:-14px;z-index:3;background:var(--panel);margin-bottom:-14px;padding:10px 0 14px}
:root[data-layout="phone"] /* 行動を選ぶ：3列にして1画面に収める */
  .action-dialog .action-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
:root[data-layout="phone"] .action-dialog .action-tile{min-height:44px;padding:4px 6px;gap:4px;font-size:12px;line-height:1.25}
:root[data-layout="phone"] .action-dialog .action-tile .sym{flex:none}
:root[data-layout="phone"] .rp-sticky{padding:8px 10px;gap:6px;margin-bottom:8px}
:root[data-layout="phone"] .rp-sticky>.row{flex-wrap:nowrap;gap:6px}
:root[data-layout="phone"] .rp-sticky>.row>.button.big{flex:1;justify-content:center;min-height:44px;padding:8px 10px;font-size:14px}
:root[data-layout="phone"] .rp-sticky>.row>a.button{flex:none;min-height:44px;padding:8px 10px;font-size:12.5px}
:root[data-layout="phone"] .rp-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
:root[data-layout="phone"] .rp-tile{padding:3px;gap:3px;border-radius:9px}
:root[data-layout="phone"] .rp-tile-name{font-size:10.5px;-webkit-line-clamp:1;min-height:0}
:root[data-layout="phone"] .rp-tile .rp-state{display:none}
:root[data-layout="phone"] .rp-tile-tools{gap:2px}
:root[data-layout="phone"] .rp-tile-tools .icon-btn.small{min-width:0;width:22px;height:26px;padding:0}
:root[data-layout="phone"] .rp-section h3{margin:10px 0 6px;font-size:15px}
:root[data-layout="phone"] body:has(#replay-root>.rp-layout) .site-footer{display:none}
:root[data-layout="phone"] body:has(#replay-root>.rp-layout) .page-scroll{overflow:hidden;display:flex;flex-direction:column;scrollbar-gutter:auto}
:root[data-layout="phone"] body:has(#replay-root>.rp-layout) main{flex:1;min-height:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:4px 8px 0}
:root[data-layout="phone"] body:has(#replay-root>.rp-layout) #page-title{display:none}
:root[data-layout="phone"] #replay-root:has(>.rp-layout){flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:0!important}
:root[data-layout="phone"] #replay-root>.rp-layout{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding-bottom:8px}
:root[data-layout="phone"] #replay-root>.rp-layout>section.panel:first-child{display:contents}
:root[data-layout="phone"] #replay-root>.rp-layout>section.panel:first-child>.section-head{margin:0}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-board{position:sticky;top:0;z-index:4;padding:6px;box-shadow:0 6px 14px rgba(0,0,0,.25)}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus-wrap{margin-top:0;padding:8px 10px}
:root[data-layout="phone"] #replay-root>.rp-layout>section.panel{padding:10px}
:root[data-layout="phone"] #replay-root>.rz-bar{position:static;flex:none;margin:0 -8px;padding:4px 8px calc(6px + env(safe-area-inset-bottom));box-shadow:none}
:root[data-layout="phone"] #replay-root>.rz-bar .rz-body{max-height:96px}
:root[data-layout="phone"] .list-switch{display:flex;padding:0;border:0;background:none;overflow:visible;max-width:100%}
:root[data-layout="phone"] .list-switch>a{display:none}
:root[data-layout="phone"] .list-switch-select{display:block;width:100%;min-height:44px;font-size:15px;font-weight:700}
:root[data-layout="phone"] .achv-grid{grid-template-columns:1fr}
:root[data-layout="phone"] .achv-badge{width:48px;height:48px}
:root[data-layout="phone"] .row-actions-table thead{display:none}
:root[data-layout="phone"] .row-actions-table tr{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 0;border-bottom:1px solid var(--line)}
:root[data-layout="phone"] .row-actions-table td{border:0;padding:0}
:root[data-layout="phone"] .row-actions-table td:first-child{grid-column:1/-1;font-weight:700}
:root[data-layout="phone"] .row-actions-table td:last-child{grid-column:1/-1}
:root[data-layout="phone"] .row-actions-table .row-actions{justify-content:flex-start}
:root[data-layout="phone"] .folder-row-item .row-actions{flex-basis:100%;justify-content:flex-start}
:root[data-layout="phone"] /* 上のメニューの段は隠す（ロゴ・通知・設定の段は残す） */
  body:has(#replay-root>.rp-layout){--hh:56px}
:root[data-layout="phone"] body:has(#replay-root>.rp-layout) .site-header-inner .site-nav{display:none}
:root[data-layout="phone"] /* 盤面：置き場の枠は低く、名前は小さく */
  #replay-root>.rp-layout>section.panel:first-child>.section-head{display:none}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-board{gap:3px;padding:4px;border-radius:10px}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-row{gap:3px}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-slot{aspect-ratio:auto;height:40px;border-radius:6px}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-slot .rb-name{font-size:8.5px;-webkit-line-clamp:3;padding:1px}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-slot .rb-empty{font-size:8.5px}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-side .rb-lp{font-size:10px}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-side .small{font-size:9px}
:root[data-layout="phone"] /* 手札：横に並べ、多い時は横に動かす */
  #replay-root>.rp-layout .rb-hand{gap:2px}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-hand>:first-child{font-size:12px}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-hand-cards{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-hand-cards>*{flex:none;width:46px;height:64px;aspect-ratio:auto}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-piles{gap:4px 10px;font-size:12px}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-pile summary{font-size:12px;min-height:28px}
:root[data-layout="phone"] /* カードの詳細：選んでいない時は出さない。選んだ時は短く（長い文は欄の中で読む） */
  #replay-root>.rp-layout .rp-focus-wrap:has(.rp-focus[data-empty="1"]){display:none}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus-wrap{padding:6px 8px}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus-wrap>h3{display:none}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus-head img,:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus-head .noimg{width:44px}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus .rp-desc{max-height:3.3em;overflow-y:auto;margin:4px 0 0;font-size:12px;line-height:1.1;line-height:1.4}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus-head{gap:8px;align-items:center}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus-head img,:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus-head .noimg{width:34px}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus-head strong{font-size:13px;line-height:1.3}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus-head p{margin:0;font-size:11.5px}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus .shop-links.compact{margin-top:4px}
:root[data-layout="phone"] /* 候補：見出しは小さく、ボタンは押しやすく */
  #replay-root>.rp-layout>section.panel:nth-of-type(2)>.section-head{margin-bottom:4px}
:root[data-layout="phone"] #replay-root>.rp-layout>section.panel:nth-of-type(2)>.section-head h2{font-size:16px}
:root[data-layout="phone"] #replay-root>.rz-bar .rz-cards .rz-card{width:46px}
:root[data-layout="tablet"] .header-tools:has(.admin-link) .account-chip{max-width:124px;min-width:0}
:root[data-layout="phone"] .card-hero{grid-template-columns:110px minmax(0,1fr);gap:12px;padding:12px}
:root[data-layout="phone"] .card-title{font-size:20px}
:root[data-layout="phone"] .card-score-num{font-size:34px}
:root[data-layout="phone"] .score-stars{width:90px}
:root[data-layout="phone"] .card-rating-grid{grid-template-columns:1fr}
:root[data-layout="phone"] .card-actions .button{flex:1 1 auto;justify-content:center}
:root[data-layout="phone"] .card-rank-list{grid-template-columns:1fr}
:root[data-layout="phone"] .card-search{max-width:none}
:root[data-layout="phone"] /* スマホ：押しやすさは保ちつつ（30px 以上）、見出しの丸いボタンと下の操作を詰める。入力欄の文字は16px（iPhone で押した時に拡大されないように） */
  input[type=text],:root[data-layout="phone"] input[type=email],:root[data-layout="phone"] input[type=password],:root[data-layout="phone"] input[type=search],:root[data-layout="phone"] input[type=url],:root[data-layout="phone"] input[type=number],:root[data-layout="phone"] input[type=date],:root[data-layout="phone"] select,:root[data-layout="phone"] textarea{font-size:16px}
:root[data-layout="phone"] .header-tools{gap:4px}
:root[data-layout="phone"] .seg.has-select>.seg-select,:root[data-layout="phone"] .optional>.add-select:not([hidden]),:root[data-layout="phone"] .admin-nav-select,:root[data-layout="phone"] .list-switch-select{min-height:38px;font-size:16px}
:root[data-layout="phone"] .picker .dialog-foot .button,:root[data-layout="phone"] .rp-sticky>.row>.button.big,:root[data-layout="phone"] .rp-sticky>.row>a.button{min-height:40px}
:root[data-layout="phone"] body.fit-screen .stage-nav .button{min-height:38px}
:root[data-layout="phone"] .action-dialog .action-tile{min-height:40px}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-choices{max-height:none;overflow:visible}
:root[data-layout="phone"] #replay-root>.rp-layout{padding-bottom:24px;scroll-padding-top:220px}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-slot{height:34px}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-hand-cards>*{width:38px;height:54px}
:root[data-layout="phone"] /* カードの詳細：名前の1行だけ。「詳細」で効果の文・ショップを広げ、×で隠す */
  #replay-root>.rp-layout .rp-focus-wrap{padding:4px 6px}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus-head{gap:6px}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus-head img,:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus-head .noimg{width:26px}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus-text{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus-text p{flex-basis:100%}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus-tools{display:flex;gap:4px;flex:none}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus:not([data-open="1"])>:not(.rp-focus-head){display:none}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-focus[data-open="1"] .rp-desc{max-height:7em}
:root[data-layout="phone"] /* 候補の見出しは1行に詰める */
  #replay-root>.rp-layout .rp-title{font-size:14px;margin:2px 0 6px}
:root[data-layout="phone"] #replay-root>.rp-layout .rp-choices{gap:4px}
:root[data-layout="phone"] #replay-root>.rp-layout>section.panel:nth-of-type(2)>.section-head{display:none}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-board{gap:2px}
:root[data-layout="phone"] .rz-tabs{overflow:visible}
:root[data-layout="phone"] .rz-tabs button{flex:1 1 0;min-width:0;justify-content:center;padding:3px 4px;font-size:11.5px;line-height:1.15;white-space:normal;text-align:center;gap:2px}
:root[data-layout="phone"] .rz-tabs button .icon{display:none}
:root[data-layout="phone"] .card-pool .pool-card>span:not(.status):not(.copies){font-size:10px}
:root[data-layout="phone"] /* 記録の準備画面の札の名前も2行まで */
  .rp-tile-name{-webkit-line-clamp:2;font-size:10px;line-height:1.2;overflow-wrap:anywhere}
:root[data-layout="phone"] /* 作る画面の題名は切らず、保存の知らせの方を短くする */
  body.fit-screen .page-title h1{flex:none;overflow:visible;text-overflow:clip}
:root[data-layout="phone"] body.fit-screen .page-title .save-state{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
:root[data-layout="tablet"] .header-filters select{text-align:left;text-align-last:left;padding:2px 22px 2px 9px;max-width:134px}
:root[data-layout="tablet"] .header-filters select{max-width:136px;font-size:11.5px;padding-right:20px}
:root[data-layout="tablet"] .header-filters .hf:nth-child(2) select{max-width:96px}
:root[data-layout="tablet"]{--hh:104px}
:root[data-layout="tablet"] .site-header{padding:6px 16px;align-items:stretch}
:root[data-layout="tablet"] .site-header-inner{flex-wrap:wrap;row-gap:4px;column-gap:8px;align-content:center}
:root[data-layout="tablet"] .site-header-inner .brand{margin-right:auto}
:root[data-layout="tablet"] .header-filters{order:1}
:root[data-layout="tablet"] .header-tools{order:2}
:root[data-layout="tablet"] .site-header-inner .site-nav{order:3;flex-basis:100%;justify-content:space-around}
:root[data-layout="tablet"] .header-filters select,:root[data-layout="tablet"] .header-filters .hf:nth-child(2) select{max-width:150px;font-size:12px}
:root[data-layout="phone"] .header-filters .hf-lang select{width:100%}
:root[data-layout="phone"] .quick-row.kind-web>input{grid-column:1}
:root[data-layout="phone"] .bulk-bar .grow{display:none}
:root[data-layout="phone"] .bulk-bar{gap:8px}
:root[data-layout="phone"] .odds-big-item strong{font-size:1.5rem}
:root[data-layout="phone"] .quick-row.kind-web>.quick-web-meta{grid-column:1}
:root[data-layout="phone"] .rb-slot.pile{font-size:10px}
:root[data-layout="phone"] .rb-slot.pile b{font-size:13px}
:root[data-layout="phone"] .rb-slot.pile svg{display:none}
:root[data-layout="phone"] .rb-slot.pile{gap:0;line-height:1.1}
:root[data-layout="phone"] .rb-slot.pile{font-size:9px}
:root[data-layout="phone"] .rb-slot.pile b{font-size:12px}
:root[data-layout="phone"] .tabs-select{display:block;width:100%;min-height:40px;margin-bottom:8px}
:root[data-layout="phone"] .tabs.has-tabs-select{display:none}
:root[data-layout="tablet"] .tabs.me-menu{display:flex;flex-direction:column;align-items:stretch;gap:2px;overflow:visible;border:1px solid var(--line);border-radius:12px;padding:8px;background:var(--panel)}
:root[data-layout="tablet"] .tabs.me-menu>button{justify-content:flex-start;text-align:left;border-radius:8px;width:100%}
:root[data-layout="tablet"] .tabs.me-menu{flex-direction:row;flex-wrap:wrap}
:root[data-layout="tablet"] .me-group{display:none}
:root[data-layout="phone"] .me-main table.table thead{display:none}
:root[data-layout="phone"] .me-main table.table,:root[data-layout="phone"] .me-main table.table tbody,:root[data-layout="phone"] .me-main table.table tr,:root[data-layout="phone"] .me-main table.table td{display:block;width:auto}
:root[data-layout="phone"] .me-main table.table tr{position:relative;border:1px solid var(--line);border-radius:10px;padding:10px 10px 8px 40px;margin-bottom:8px;background:var(--panel)}
:root[data-layout="phone"] .me-main table.table td{border:0;padding:2px 0}
:root[data-layout="phone"] .me-main table.table td.bulk-col{position:absolute;left:10px;top:12px;width:auto}
:root[data-layout="phone"] .me-main table.table td:first-child:not(.bulk-col){font-weight:700}
:root[data-layout="phone"] #hero-actions:empty{min-height:162px}
:root[data-layout="phone"] #hero-actions:empty{min-height:218px}
:root[data-layout="phone"] .hero-sub-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
:root[data-layout="phone"] .hero-sub-actions>.button:last-child{grid-column:1/-1}
:root[data-layout="tablet"] .rank-types .seg.has-select,:root[data-layout="tablet"] .resume-tools .seg.has-select{display:inline-flex;padding:4px;border:1px solid var(--line);background:var(--bg2);max-width:none}
:root[data-layout="tablet"] .rank-types .seg.has-select>button,:root[data-layout="tablet"] .resume-tools .seg.has-select>button{display:inline-flex}
:root[data-layout="tablet"] .rank-types .seg.has-select>.seg-select,:root[data-layout="tablet"] .resume-tools .seg.has-select>.seg-select{display:none}
:root[data-layout="phone"] .rank-body[data-view="row"] :is(.combo-grid,:root[data-layout="phone"] .user-grid,:root[data-layout="phone"] .comment-grid,:root[data-layout="phone"] .folder-row,:root[data-layout="phone"] .term-list){grid-auto-columns:78%}
:root[data-layout="phone"] .rank-body[data-view="list"] .combo-card .thumb{width:120px}
:root[data-layout="phone"] .list-kit-views{margin-left:0}
:root[data-layout="phone"][data-list="row"] :is(.combo-grid,:root[data-layout="phone"] .user-grid,:root[data-layout="phone"] .folder-row,:root[data-layout="phone"] .comment-grid):not(.rank-body *){grid-auto-columns:78%}
:root[data-layout="phone"] .products[data-view="list"] .carousel-track{grid-template-columns:1fr}
:root[data-layout="phone"] .products[data-view="list"] .product-card{flex-wrap:wrap}
:root[data-layout="phone"] .products[data-view="list"] .product-shops{max-width:none}
:root[data-layout="phone"] .products .section-head{flex-wrap:wrap}
:root[data-layout="phone"] .list-kit-tools>.sort-field.grow{flex-basis:100%;max-width:none}
:root[data-layout="phone"] .list-kit-tools>.list-kit-views{margin-left:0}
:root[data-layout="phone"] .sort-controls>.list-kit-views,:root[data-layout="phone"] #users-tools>.list-kit-views{margin-left:0}
:root[data-layout="phone"] #users-tools>.sort-field.grow{flex-basis:100%;max-width:none}
:root[data-layout="phone"] .product-dialog-body{grid-template-columns:1fr}
:root[data-layout="phone"] .product-img.big{max-width:220px}
:root[data-layout="phone"] .card-hero{grid-template-columns:minmax(0,236px) minmax(0,1fr)}
:root[data-layout="phone"] .card-hero-side{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
:root[data-layout="tablet"] .card-hero{grid-template-columns:minmax(0,236px) minmax(0,1fr)}
:root[data-layout="tablet"] .card-hero-side{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
:root[data-layout="phone"] .card-hero{grid-template-columns:110px minmax(0,1fr)}
:root[data-layout="phone"] .rail-arrow{width:36px;height:36px;margin-top:-18px}
:root[data-layout="phone"] .rail-prev{left:2px}
:root[data-layout="phone"] .rail-next{right:2px}
:root[data-layout="phone"] .deck-link-row{grid-template-columns:64px minmax(0,1fr)}
:root[data-layout="phone"] .deck-link-card{width:60px}
:root[data-layout="phone"] .scale-item{grid-template-columns:24px minmax(0,1fr) 40px 30px 30px}
:root[data-layout="phone"] .scale-item>.scale-state{display:none}
:root[data-layout="phone"] .scale-item>label{grid-column:2}
:root[data-layout="phone"] .scale-item>.button{grid-column:3/6}
:root[data-layout="phone"] .sim-picked{grid-template-columns:1fr}
:root[data-layout="phone"] .sim-picked-deck img,:root[data-layout="phone"] .sim-picked-icon{width:64px;height:34px}
:root[data-layout="phone"] .sim-bar{flex-direction:column;align-items:stretch;padding:8px 64px 8px 10px;border-radius:12px 12px 0 0}
:root[data-layout="phone"] .sim-bar .button{justify-content:center}
:root[data-layout="phone"] .sim-set-grid{grid-template-columns:1fr;gap:12px}
:root[data-layout="phone"] .site-header-inner .site-nav{gap:2px;justify-content:space-between}
:root[data-layout="phone"] .site-nav .nav-item>a{padding-right:2px}
:root[data-layout="phone"] .site-nav .nav-caret{width:20px}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-duel{position:sticky;top:0;z-index:4;padding:4px;gap:2px;box-shadow:0 6px 14px rgba(0,0,0,.25)}
:root[data-layout="phone"] #replay-root>.rp-layout .rb-duel .rb-board{position:static;box-shadow:none;padding:0}
:root[data-layout="phone"] .rb-duel .rb-slot{height:34px}
:root[data-layout="phone"] .rb-duel .rb-hand-cards>*{width:38px;height:54px}
:root[data-layout="phone"] .rb-duel .rb-opp-head .rb-hand-cards>*{width:20px;height:28px}
:root[data-layout="phone"] .ask-dialog{padding:14px}
:root[data-layout="phone"] .ask-dialog .ask-foot .button{flex:1;justify-content:center;min-height:44px}
:root[data-layout="phone"] body.fit-screen #start-options .bulk-result{grid-column:1/-1}
:root[data-layout="phone"] body.fit-screen .bulk-items{max-height:160px}
:root[data-layout="phone"] .duel-fact{font-size:12px;padding:3px 8px}
:root[data-layout="phone"] .rb-status{font-size:11px;padding:0 2px}
:root[data-layout="phone"] .switch-state{margin-left:0}
:root[data-layout="phone"] .switch-row{padding:6px 2px}
:root[data-layout="phone"] .sw-grid .sw-name{min-width:150px}
:root[data-layout="phone"] .sw-grid{font-size:13px}
:root[data-layout="phone"] .sw-grid{min-width:560px}
:root[data-layout="phone"] .sw-grid col.sw-c-aud{width:96px}
:root[data-layout="phone"] .sw-grid col.sw-c-staff{width:56px}
:root[data-layout="phone"] .bp-list{grid-template-columns:1fr}
:root[data-layout="phone"] .bp-item{grid-template-columns:22px 44px 1fr;gap:8px;padding:8px}
:root[data-layout="phone"] .bp-face{width:44px}
:root[data-layout="phone"] .event-row{grid-template-columns:64px minmax(0,1fr) auto}
:root[data-layout="phone"] .event-row>label:nth-of-type(3){grid-column:1/-1;order:4}
:root[data-layout="phone"] .event-table td:nth-child(2){font-size:.8rem}
:root[data-layout="phone"] .bp-flat-move{white-space:normal}
:root[data-layout="phone"] .card-reg-chip{min-width:calc(50% - 6px)}
:root[data-layout="phone"] .bp-flat th:nth-child(5),:root[data-layout="phone"] .bp-flat td:nth-child(5){display:none}
:root[data-layout="phone"] .bp-flat td,:root[data-layout="phone"] .bp-flat th{padding:6px 4px}
:root[data-layout="phone"] .bp-flat-move{font-size:.78rem}
:root[data-layout="phone"] .bp-flat-p{min-width:4.8em}
:root[data-layout="phone"] .bp-flat-rank{width:1.6em}
:root[data-layout="phone"] .bp-face-s{display:none}
:root[data-layout="phone"] .reg-tools .sort-field{min-width:calc(50% - 6px)}
:root[data-layout="phone"] .reg-view-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
:root[data-layout="phone"] .reg-view-grid .reg-face,:root[data-layout="phone"] .reg-view-row .reg-face{width:56px}
:root[data-layout="phone"] .bp-list.bp-view-row{grid-auto-columns:85%}
:root[data-layout="phone"] .bv-my-table th:nth-child(4),:root[data-layout="phone"] .bv-my-table td:nth-child(4){display:none}
:root[data-layout="phone"] .bh-table th:nth-child(2),:root[data-layout="phone"] .bh-table td:nth-child(2){display:none}
:root[data-layout="phone"] .reg-view-list .reg-tile-foot{grid-template-columns:6.5em;justify-items:start;gap:2px}
:root[data-layout="phone"] .reg-view-list .reg-change.none{display:none}
:root[data-layout="phone"] /* スマホ：画面いっぱいに出す。見えている高さ（ブラウザの帯・キーボードを除く）に合わせ、中はカードの一覧だけを動かす */
  dialog.picker.cpk{position:fixed;inset:var(--vv-top,0px) 0 auto 0;margin:0;width:100%;max-width:100%;height:var(--vv-h,100dvh);max-height:var(--vv-h,100dvh);border-radius:0;border:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
:root[data-layout="phone"] .cpk>.dialog-head h2{font-size:16px}
:root[data-layout="phone"] .cpk-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
:root[data-layout="phone"] .cpk-grid.view-small{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}
:root[data-layout="phone"] .cpk-seg-text{display:none}
:root[data-layout="phone"] .cpk-withtext{font-size:12px}
:root[data-layout="phone"] .cpk-filters{gap:6px 10px}
:root[data-layout="phone"] .cpk-foot{gap:6px}
:root[data-layout="phone"] .cpk-foot>.button{flex:1 1 auto;justify-content:center;min-height:44px}
:root[data-layout="phone"] .cpk-foot>.cpk-status{flex:1 1 100%;order:-1}
:root[data-layout="phone"] .cdp-kind-group{grid-template-columns:1fr}
:root[data-layout="phone"] .cdp-kind-group>.small{padding-top:0}
:root[data-layout="phone"] .cdp-quick{display:none}
:root[data-layout="phone"] .cdp-num{width:84px}
:root[data-layout="phone"] .cpk-more>summary{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--muted);padding:2px 0}
:root[data-layout="phone"] .cpk-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
:root[data-layout="phone"] .cpk-tabs::-webkit-scrollbar{display:none}
:root[data-layout="phone"] .cpk-tab{flex:none;padding:4px 10px;min-height:34px;font-size:12.5px}
:root[data-layout="phone"] .cpk-tool-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
:root[data-layout="phone"] .cpk-tool-row::-webkit-scrollbar{display:none}
:root[data-layout="phone"] .cpk-tool-row>*{flex:none}
:root[data-layout="phone"] .cpk-cond-chip{max-width:200px}
:root[data-layout="phone"] .cpk-tools{gap:6px}
:root[data-layout="phone"] .cpk-foot>.cpk-status:empty{display:none}
:root[data-layout="phone"] .cpk-foot>.help-btn{flex:none}
:root[data-layout="phone"] .bp-list.bp-view-row{grid-auto-columns:85%}
:root[data-layout="phone"] .bv-my-table td:nth-child(4){display:block}
:root[data-layout="phone"] .bv-my-table .bv-row-link{max-width:100%}
:root[data-layout="phone"] .me-main table.bv-my-table tr{padding-left:10px}
:root[data-layout="phone"] .me-main .bv-my-table td[data-label]::before{content:attr(data-label) "：";color:var(--muted);font-weight:400;margin-right:2px}
:root[data-layout="phone"] .me-main .bv-my-table td[data-label] > div{display:inline}
:root[data-layout="phone"] .me-main .bv-my-table td[data-label] > div::before{content:" "}
:root[data-layout="phone"] .print-grid{grid-template-columns:minmax(0,1fr)}
:root[data-layout="phone"] .print-rows{grid-template-columns:minmax(0,1fr)}
:root[data-layout="phone"] .print-picked-item select{max-width:100%}
:root[data-layout="phone"] .print-sheet{flex:1 1 100%}
:root[data-layout="phone"] .help-guide .hg-sec{grid-template-columns:minmax(0,1fr)}
:root[data-layout="tablet"] .help-guide .hg-sec{grid-template-columns:minmax(0,1fr)}
:root[data-layout="phone"] .usage-grid{grid-template-columns:1fr 1fr}
:root[data-layout="phone"] .usage-f.wide,:root[data-layout="phone"] .usage-f.usage-outcome{grid-column:1/-1}
:root[data-layout="phone"] .usage-panel .table{display:table}
:root[data-layout="phone"] .history-table th:nth-child(5),:root[data-layout="phone"] .history-table td:nth-child(5),:root[data-layout="phone"] .history-table th:nth-child(6),:root[data-layout="phone"] .history-table td:nth-child(6){display:none}
:root[data-layout="phone"] .history-table .history-title{min-width:9em}
:root[data-layout="phone"] .stats-mix li{grid-template-columns:1fr auto}
:root[data-layout="phone"] .stats-mix-track{grid-column:1/-1;order:3}
:root[data-layout="phone"] .analysis-compare{grid-template-columns:minmax(0,1fr)}
:root[data-layout="phone"] .analysis-editor{max-height:420px}
:root[data-layout="phone"] .analysis-weight input{width:5.5em}
:root[data-layout="phone"] .button.tool-fold-btn{display:flex;align-items:center;justify-content:flex-start;gap:2px;width:100%;flex:1 1 100%;min-height:44px;text-align:left;font-size:13.5px}
:root[data-layout="phone"] .tool-fold-btn>span:first-child{flex:none}
:root[data-layout="phone"] .tool-fold-btn .tool-fold-sum{flex:1;min-width:0;margin-left:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-weight:400}
:root[data-layout="phone"] .tool-fold-btn .tool-fold-mark{flex:none;width:9px;height:9px;margin:0 4px 4px 8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
:root[data-layout="phone"] .tool-fold-btn[aria-expanded="true"] .tool-fold-mark{transform:rotate(-135deg);margin-bottom:-4px}
:root[data-layout="phone"] [data-fold="closed"]>:not(.sort-field.grow):not(.tool-fold-btn){display:none!important}
:root[data-layout="phone"] .sort-controls[data-fold="closed"]{display:none!important}
:root[data-layout="phone"] .sort-controls+.tool-fold-btn{margin:0 0 12px}
:root[data-layout="phone"] /* 開いた時は2列に並べて、縦に長くならないようにする */
  [data-fold="open"].list-kit-tools,:root[data-layout="phone"] [data-fold="open"].sort-controls,:root[data-layout="phone"] #users-tools[data-fold="open"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 10px;align-items:end}
:root[data-layout="phone"] [data-fold="open"]>.sort-field.grow,:root[data-layout="phone"] [data-fold="open"]>.tool-fold-btn,:root[data-layout="phone"] [data-fold="open"]>.list-kit-views,:root[data-layout="phone"] [data-fold="open"]>.sort-field:has(.seg:not(.has-select)){grid-column:1/-1}
:root[data-layout="phone"] [data-fold="open"]>:has(input[type=checkbox]),:root[data-layout="phone"] [data-fold="open"]>:has(.range-inputs){grid-column:1/-1}
:root[data-layout="phone"] [data-fold="open"]>.sort-field>select,:root[data-layout="phone"] [data-fold="open"]>label.sort-field select{width:100%;min-width:0}
:root[data-layout="phone"] .account-chip>span.avatar-dot{display:inline-grid}
:root[data-layout="phone"] .me-layout{grid-template-columns:minmax(0,1fr)}
:root[data-layout="phone"] .me-main,:root[data-layout="phone"] .me-side{min-width:0}
:root[data-layout="tablet"] .me-layout{grid-template-columns:minmax(0,1fr)}
:root[data-layout="tablet"] .me-main,:root[data-layout="tablet"] .me-side{min-width:0}
:root[data-layout="phone"] body.fit-screen .stepper button,:root[data-layout="phone"] .stepper button{font-size:11.5px}
:root[data-layout="phone"] :has(>.sort-controls+.tool-fold-btn){flex:1 1 100%;min-width:0}
:root[data-layout="phone"] .me-group{white-space:nowrap}