/* ひとりのページだけで使う画面（ホーム・帯・結果に足す物と記録）。調合台と結果は ui.js が持つ。共通部品（.ui-*）の見た目は /ui.css のまま */
html,body{margin:0;height:100%;overscroll-behavior:none}
.shell-stage.ic{background:var(--bg)}
.ic .big{width:100%;min-height:88px;font-size:26px}

/* ホーム（共通の shell.home の中身）。世界観は画材屋のアトリエ: 水色の画用紙の地・木のパレット・弁柄のボタン。main.js の THEME と同じ */
.ic .sh-art{background:var(--bg);outline:3px solid var(--wood)}
/* 題字: 太筆でひと引きした藍の絵の具の帯に、全部同じ白で書いた字（SVG。main.js drawLogo） */
.ic-logo{display:block;height:76px;width:auto;overflow:visible}
.ic-logo text{font-family:"Yusei Magic",sans-serif}
/* 背景: 下の縁の作業机（地平線）に転がるチューブと筆。下の余白の中だけ */
.ic-bd-desk{position:absolute;left:0;bottom:0;width:100%;height:40px;overflow:visible}
/* sub のボタン（相手をさがす・下の段・帯）: 淡い水色の札に墨の線。大きさが変わらないよう outline で線を引く */
.ic .ui-btn.sub{background:var(--card);color:var(--ink);border-color:transparent;box-shadow:none;outline:2px solid var(--ink);outline-offset:-2px}
.ic .ui-btn.sub:hover{background:var(--wash)}
/* 窓（遊び方・設定など）の見出し: 画用紙の綴じ目のような木の色の線 */
.ic .sh-box{background:var(--card)}
.ic .sh-box header{border-bottom:2px solid var(--wood);margin-bottom:8px}
/* 遊んでいる最中の帯: 下に木の色の線 */
.ic .sh-bar{border-bottom:2px solid var(--wood);background:var(--bg)}
.ic .sh-room .ui-note{line-height:1.4}
.ic .sh-foot{flex-wrap:wrap}

/* 詳しく・設定（共通の小さなウィンドウ shell.panel の中身） */
.ic-det p{font-size:18px;line-height:1.6;margin-bottom:6px}
.ic-det .ic-keys{font-size:16px;color:var(--sub)}
.ic-det .line{font-size:18px;margin:0}
.ic-det .line>span:first-child{min-width:0;overflow-wrap:anywhere}
.ic-det .line>span.mono{flex:none}
.ic-det .line.me{font-weight:700}
.ic .ic-det .rc-cap:first-child{margin-top:0}

/* 遊んでいる最中（共通の帯の下に場を置く）。帯の今の回は入りきらなければ文字を小さくする（main.js fitText） */
.ic .sc.ic-field{padding-top:76px}
.ic .sh-bar .sh-info2{flex:1;min-width:0;white-space:nowrap;overflow:hidden}

/* 結果（共通の shell.result に足す、見本とあなたの横並び） */
.ic-rx{display:flex;gap:20px;align-items:flex-start}
.sh-port .ic-rx{flex-direction:column;align-items:center}
.ic-rsw{flex:none;display:flex;width:240px;height:150px;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--rule)}
.sh-port .ic-rsw{width:420px;height:220px}
.ic-rsw>div{flex:1;position:relative}
.ic-rinfo{width:400px;font-size:18px;display:flex;flex-direction:column;gap:2px}
.ic-verdict{font-size:22px;font-weight:700}
.ic-cap{font-size:16px;font-weight:700;color:var(--sub);margin-top:6px}
.ic-plog{display:flex;gap:8px}
.ic-plog>span{display:flex;flex-direction:column;align-items:center;width:56px;font-size:16px}
.ic-plog .pair{width:100%;height:28px}
.ic-res h2{font-family:var(--ui-display);font-size:56px}

/* 記録と設定（詳しく・設定の窓の中） */
.ic .rc-cap{font-size:17px;font-weight:700;color:var(--sub);margin:16px 0 8px}
.ic .ic-set .rc-cap:first-child{margin-top:0}
.ic .rc-days{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.ic .rc-days>div{display:flex;flex-direction:column;align-items:center;gap:2px}
.ic .rc-days .pair{width:100%;height:40px}
.ic .rc-days b{font-size:20px;font-weight:500}
.ic .rc-days small{font-size:14px;color:var(--sub)}
.ic .rc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:10px}
.ic .rc-tiles>div{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:2px solid var(--rule)}
.ic .rc-tiles small{font-size:15px;font-weight:700;color:var(--sub);white-space:nowrap}
.ic .rc-tiles b{font-size:34px;font-weight:500;line-height:1.2;white-space:nowrap}
.ic .rc-tiles i{font-style:normal;font-size:16px;margin-left:4px;color:var(--sub)}
.ic .seg{display:flex;gap:6px}
.ic .seg button{flex:1}
.ic .rc-name{display:flex;gap:10px;align-items:center}
.ic .rc-name b{flex:1;min-width:0;font-size:22px;overflow-wrap:anywhere}