/* マイルーム（myroom.html。2026-11-07）：スマホ（390px）を先に。hub.css の上に重ねる */
.mr-page{background:#eef2ef;color:#1f2e33}
.mr-main{padding-top:12px;padding-bottom:24px;display:grid;gap:14px}
.mr-card{background:#fff;border-radius:18px;padding:16px;box-shadow:0 4px 16px rgba(0,0,0,.06);min-width:0;overflow-wrap:anywhere}
.mr-card h2{margin:0 0 10px;font-size:18px}
.mr-card h3{margin:12px 0 6px;font-size:15px}
.mr-hero{display:grid;gap:12px;background:linear-gradient(160deg,#1d2f28,#14211c);color:#eef3ef;border-radius:22px;padding:16px;box-shadow:0 10px 28px rgba(0,0,0,.18);min-width:0}
.mr-avatar{display:flex;justify-content:center;background:radial-gradient(circle at 50% 40%,rgba(255,217,106,.25),transparent 65%);border-radius:18px;padding:8px}
.mr-avatar svg{width:min(240px,60vw);height:auto}
.mr-who{min-width:0}
.mr-kicker{margin:0;font-size:12px;font-weight:800;letter-spacing:.2em;color:#ffd96a}
.mr-who h1{margin:2px 0 6px;font-size:24px;line-height:1.3;overflow-wrap:anywhere}
.mr-who h1 span{font-size:14px;font-weight:700;opacity:.8;margin-left:4px}
.mr-badge{display:inline-block;margin:0 0 8px;padding:2px 10px;border-radius:99px;background:#ffd96a;color:#2a1e08;font-weight:800;font-size:13px}
.mr-note{margin:8px 0 0;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.1);font-size:13px}
.mr-hero a{color:#ffe08a}
.mr-social{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0}
.mr-heart{min-height:44px;min-width:72px;padding:0 14px;border-radius:99px;border:2px solid #ff8fa8;background:transparent;color:#ffb3c4;font:inherit;font-weight:800;font-size:16px;cursor:pointer}
.mr-heart.on{background:#ff5c85;border-color:#ff5c85;color:#fff;display:inline-flex;align-items:center;justify-content:center}
.mr-heart:disabled{opacity:.6;cursor:default}
.mr-num{min-height:44px;padding:0 10px;border:0;border-radius:12px;background:rgba(255,255,255,.1);color:inherit;font:inherit;font-size:13px;cursor:pointer}
.mr-num b{font-size:16px;margin-right:2px}
.mr-req{background:#ffd96a;color:#2a1e08}
.mr-share{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.mr-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.mr-tabs button{min-height:40px;padding:0 14px;border-radius:99px;border:1px solid rgba(0,0,0,.15);background:#fff;font:inherit;font-weight:700;cursor:pointer;color:#1f2e33}
.mr-tabs button.on{background:#1f3b2c;color:#fff;border-color:#1f3b2c}
.mr-sub button{min-height:34px;font-size:13px}
.mr-stage{min-height:200px;border-radius:14px;background:linear-gradient(180deg,#dfe9e3,#c9d8cf);display:flex;align-items:center;justify-content:center;overflow:hidden}
.mr-stage canvas{display:block;width:100%;height:auto}
.mr-stage2d{padding:12px;width:100%}
.mr-chips{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mr-chips li{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mr-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:#fff;font-size:13px;font-weight:700}
.mr-chip i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
.mr-stats{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mr-stats li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:8px 10px;border-radius:12px;background:#f3f6f4;font-size:14px}
.mr-stats b{min-width:4em}
.mr-cls{font-weight:800;color:#2f7d5b}
.mr-title{margin:0 0 6px}
.mr-teams{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mr-teams li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;padding:8px 10px;border-radius:12px;background:#f3f6f4;font-size:14px}
.mr-sp{font-weight:800;min-width:3.5em}
.mr-teams select{min-height:40px;max-width:100%;font:inherit}
.mr-count{font-size:14px;color:#2f7d5b}
.mr-bar{height:8px;border-radius:99px;background:#e3ebe6;overflow:hidden;margin:0 0 10px}
.mr-bar i{display:block;height:100%;background:linear-gradient(90deg,#3fae6a,#ffd96a)}
.mr-grp{margin:6px 0}
.mr-grp summary{cursor:pointer;font-weight:800;min-height:40px;display:flex;align-items:center;gap:6px}
.mr-items{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.mr-item{border-radius:12px;background:#f3f6f4;min-width:0}
.mr-item>*,.mr-item a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;text-decoration:none;color:inherit}
.mr-item.on{background:#fff7dd;box-shadow:inset 0 0 0 2px #ffd96a}
.mr-item.off{opacity:.55}
.mr-pic{display:flex;align-items:center;justify-content:center;width:64px;height:64px}
.mr-pic svg{width:64px;height:64px}
.mr-ghost{border-radius:50%;background:#cfd8d3;color:#fff;font-weight:800;font-size:24px;width:48px;height:48px}
.mr-sw{width:40px;height:40px;border-radius:50%;border:2px solid rgba(0,0,0,.12)}
.mr-lab{font-size:12px;font-weight:700;text-align:center;line-height:1.3}
.mr-people{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mr-people li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:#f3f6f4}
.mr-people a{font-weight:800;color:inherit;flex:1;min-width:6em}
.mr-modes{display:grid;gap:6px}
.mr-modes .check{display:flex;align-items:center;gap:8px;min-height:44px}
@media (min-width:760px){
  .mr-main{grid-template-columns:1fr 1fr;align-items:start}
  .mr-hero{grid-column:1 / -1;grid-template-columns:300px 1fr;align-items:center}
  .mr-avatar svg{width:260px}
  .mr-list,.mr-main>.mr-card:has(#mrColT){grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){.mr-stage canvas{animation:none}}
/* 上の帯：この画面は写真の上に重ねないので、色を付けて上にとどめる */
.mr-page .h-top{position:sticky;background:#14211c;box-shadow:0 2px 10px rgba(0,0,0,.2)}
/* ボタン（hub.css に .btn が無いので、この画面の分だけ） */
.mr-page .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:99px;border:1px solid rgba(0,0,0,.15);background:#fff;color:#1f2e33;font:inherit;font-weight:800;font-size:14px;text-decoration:none;cursor:pointer}
.mr-page .btn.primary{background:#2f7d5b;border-color:#2f7d5b;color:#fff}
.mr-page .btn.plain{background:transparent;border-color:transparent;text-decoration:underline}
.mr-page .btn:disabled{opacity:.6;cursor:default}
.mr-hero .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.mr-hero .btn.primary{background:#ffd96a;border-color:#ffd96a;color:#2a1e08}
.mr-page .form-error{margin:0;padding:10px 12px;border-radius:12px;background:#fde8e4;color:#9b2c1c;font-weight:700}
.mr-page .form-ok{margin:0;padding:10px 12px;border-radius:12px;background:#e6f4ea;color:#1f5b3a;font-weight:700}
.mr-page .tag{display:inline-block;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.15);font-size:12px;font-weight:700}
.mr-page .small{font-size:13px}