/* ゲームアプリらしい見た目（style.css のあとに読む） */
:root {
  --gold1: #ffe39a; --gold2: #f0b44c; --gold3: #b97a1f;
  --card: linear-gradient(180deg, rgba(48,40,32,.92), rgba(28,23,18,.94));
  --card-line: rgba(255, 220, 160, .14);
  --glow: 0 0 0 1px rgba(255,220,160,.12), 0 10px 30px rgba(0,0,0,.35);
}
body { font-feature-settings: "palt"; }
.ic { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.18em; }
.ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn.big { display: flex; flex-direction: column; gap: 2px; }
.btn.big .ic { width: 1.2em; height: 1.2em; }
.btn.gold { background: linear-gradient(180deg, var(--gold1), var(--gold2) 60%, #e39a32); color: #3a2400; text-shadow: 0 1px 0 rgba(255,255,255,.35); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 6px 18px rgba(240,180,76,.4); }
.btn.gold.big { flex-direction: row; font-size: 18px; letter-spacing: .04em; }
.btn.gold.big small { margin-left: 6px; }
.btn.primary { box-shadow: inset 0 -3px 0 rgba(0,0,0,.15), 0 6px 18px rgba(217,140,67,.35); }
.btn.sm { padding: 8px 12px; font-size: 13px; border-radius: 12px; }
.round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--card-line); background: rgba(24,20,16,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: grid; place-items: center; position: relative; font-size: 20px; color: var(--text); }
.round .dot, .menu-list .badge { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: #ff6b5a; }
.login .logo, .dl .logo { font-size: 46px; color: var(--accent2); }

/* ---- 部屋の上の表示 ---- */
.hud { gap: 8px; }
.room-name { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 8px; background: rgba(24,20,16,.72); border-color: var(--card-line); }
.rn-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(180deg, #4a3a2a, #2c241c); color: var(--gold1); font-size: 18px; box-shadow: inset 0 0 0 1px rgba(255,220,160,.15); }
.rn-t { display: grid; line-height: 1.25; font-size: 15px; }
.rankchip { display: grid; gap: 4px; padding: 6px 10px; border-radius: 14px; border: 1px solid var(--card-line); background: rgba(24,20,16,.72); backdrop-filter: blur(12px); min-width: 64px; }
.rankchip .lv { font-size: 11px; color: var(--gold1); font-weight: 700; letter-spacing: .05em; }
.rankchip .lv b { font-size: 17px; margin-left: 2px; color: #fff; }
.xpbar { display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #7fd3ff, #b48cff); border-radius: inherit; }
.xpbar.big { height: 10px; margin: 6px 0 4px; }
.streak { display: inline-flex; align-items: center; gap: 4px; padding: 8px 11px; background: rgba(24,20,16,.72); border-color: var(--card-line); }
.streak .ic { color: #ff8a4c; }
.side-tools { position: absolute; right: 12px; top: calc(var(--safe-t) + 116px); display: grid; gap: 10px; }
.rooms { top: calc(var(--safe-t) + 66px); right: 70px; }
.rooms button { display: inline-flex; align-items: center; gap: 5px; background: rgba(24,20,16,.72); border-color: var(--card-line); backdrop-filter: blur(10px); }
.rooms button.on { background: linear-gradient(180deg, var(--gold1), var(--gold2)); color: #3a2400; }
.rooms button.locked { opacity: .6; }
.rooms button small { font-size: 10px; margin-left: 2px; color: var(--gold1); }
.dock .testfill { margin: -2px auto 0; font-size: 12px; display: inline-flex; gap: 4px; align-items: center; color: var(--muted); }

/* ---- 下から出る画面 ---- */
.sheet { background: linear-gradient(180deg, #2c241c, #1d1813 40%); border-top: 1px solid var(--card-line); padding-top: 10px; box-shadow: 0 -12px 40px rgba(0,0,0,.5); }
.sheet .grab { width: 40px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.18); margin: 0 auto 10px; }
.sh-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sh-head h3 { margin: 0; font-size: 18px; }
.sh-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.sh-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(180deg, #4a3a2a, #2c241c); color: var(--gold1); box-shadow: inset 0 0 0 1px rgba(255,220,160,.18); flex: none; }
.sh-ic.gold { background: linear-gradient(180deg, var(--gold1), var(--gold2)); color: #3a2400; }
.sh-back { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--card-line); background: rgba(255,255,255,.05); display: grid; place-items: center; font-size: 20px; }
.empty { color: var(--muted); font-size: 14px; text-align: center; padding: 18px 8px; }

/* ジャンル */
.genregrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.genre { display: grid; justify-items: center; gap: 4px; padding: 12px 4px 10px; border-radius: 16px; border: 1px solid var(--card-line); background: var(--card); box-shadow: var(--glow); }
.genre .g-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: rgba(255,220,160,.08); color: var(--gold1); }
.genre b { font-size: 12px; }
.genre small { font-size: 10px; color: var(--muted); }
.genre.done { opacity: .45; }
.genre:active { transform: scale(.96); }

/* 3つの候補 */
.candgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.cand { position: relative; display: grid; gap: 6px; padding: 8px 8px 10px; border-radius: 18px; border: 1px solid var(--card-line); background: var(--card); box-shadow: var(--glow); text-align: center; transition: transform .15s, box-shadow .15s; }
.cand b { font-size: 12px; line-height: 1.35; min-height: 2.7em; }
.cand.on { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--gold2), 0 14px 30px rgba(240,180,76,.35); }
.cand.rare { background: linear-gradient(180deg, rgba(90,62,120,.6), rgba(30,22,34,.95)); }
.badge-rare { position: absolute; top: 6px; left: 6px; display: inline-flex; gap: 2px; align-items: center; padding: 2px 6px; border-radius: 99px; font-size: 10px; font-weight: 800; background: linear-gradient(180deg, #f6d6ff, #b48cff); color: #3a1a55; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.chips i { font-style: normal; font-size: 9.5px; padding: 1px 6px; border-radius: 99px; background: rgba(255,255,255,.08); color: var(--muted); }
.thumb { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #4b4036, #251f19 75%); }
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb.none { display: grid; place-items: center; font-size: 26px; color: var(--muted); }

/* 雰囲気 */
.stylegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.stylecard { display: grid; gap: 4px; padding: 8px 8px 12px; border-radius: 18px; border: 1px solid var(--card-line); background: var(--card); text-align: left; }
.stylecard .sw { height: 64px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.stylecard b { font-size: 15px; padding: 0 4px; }
.stylecard span:last-child { font-size: 12px; color: var(--muted); padding: 0 4px; }
.stylecard.on { box-shadow: 0 0 0 2px var(--gold2), 0 10px 26px rgba(240,180,76,.3); }

/* 模様がえ */
.editbar { position: absolute; left: 0; right: 0; bottom: calc(var(--tab-h) + var(--safe-b)); padding: 12px 14px; background: linear-gradient(180deg, rgba(29,24,19,.0), rgba(29,24,19,.92) 22%); display: grid; gap: 8px; }
.eb-top { display: flex; justify-content: space-between; align-items: center; }
.eb-top b { display: inline-flex; gap: 6px; align-items: center; font-size: 16px; }
.eb-top .cap { font-size: 13px; color: var(--muted); background: rgba(255,255,255,.07); padding: 4px 10px; border-radius: 99px; }
.eb-top .cap b { color: var(--gold1); font-size: 14px; }
.eb-hint { margin: 0; font-size: 12px; color: var(--muted); }
.eb-btns { display: grid; grid-template-columns: .8fr 1fr 1.4fr 1fr; gap: 8px; }
.eb-btns .btn { font-size: 13px; padding: 11px 6px; }
.float-bar { position: absolute; left: 50%; top: calc(var(--safe-t) + 120px); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 16px; background: rgba(24,20,16,.88); border: 1px solid var(--card-line); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0,0,0,.4); z-index: 5; max-width: calc(100% - 24px); }
.float-bar .fb-name { font-size: 13px; font-weight: 700; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.float-bar button { display: inline-flex; gap: 4px; align-items: center; border: 0; border-radius: 11px; padding: 8px 10px; background: rgba(255,255,255,.08); font-size: 13px; font-weight: 700; }
.float-bar .x { background: none; color: var(--muted); }
.invgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.inv-item { position: relative; display: grid; gap: 5px; padding: 6px 6px 8px; border-radius: 16px; border: 1px solid var(--card-line); background: var(--card); text-align: center; }
.inv-item b { font-size: 11.5px; line-height: 1.3; }
.inv-item.on { box-shadow: 0 0 0 2px var(--gold2); }
.inv-item .cnt { position: absolute; top: 8px; right: 8px; font-style: normal; font-size: 11px; font-weight: 800; background: var(--gold2); color: #3a2400; padding: 0 6px; border-radius: 99px; }
.seg.kinds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; background: rgba(255,255,255,.06); padding: 4px; border-radius: 12px; margin-bottom: 12px; }
.seg.kinds button { border: 0; background: none; padding: 8px 0; border-radius: 9px; font-size: 13px; color: var(--muted); }
.seg.kinds button.on { background: var(--accent); color: #2a1706; font-weight: 700; }

/* 科目 */
.subjgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.subj { display: grid; justify-items: center; gap: 4px; padding: 12px 2px 10px; border-radius: 16px; border: 1px solid var(--card-line); background: var(--card); }
.subj .s-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(180deg, #f3b874, #d98a3f); color: #2a1706; }
.subj b { font-size: 12px; }
.subj small { font-size: 10px; color: var(--accent2); }
.subj.soon { opacity: .4; }
.subj.soon .s-ic { background: rgba(255,255,255,.08); color: var(--muted); }

/* お知らせ */
.news-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; font-size: 16px; }
.news-list li { display: flex; gap: 8px; align-items: center; }
.news-list .ic { color: var(--ok); }

/* 写真 */
body.photo-mode #app, body.photo-mode #toast { display: none; }
.photo-ui { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.photo-ui > * { pointer-events: auto; }
.photo-ui .close { position: absolute; top: calc(var(--safe-t) + 12px); left: 12px; }
.photo-ui .shutter { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 28px); transform: translateX(-50%); width: 76px; height: 76px; border-radius: 50%; border: 4px solid #fff; background: rgba(255,255,255,.18); display: grid; place-items: center; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.photo-ui .shutter i { width: 58px; height: 58px; border-radius: 50%; background: #fff; }
.photo-ui .ph-hint { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 116px); text-align: center; font-size: 12px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); margin: 0; pointer-events: none; }
.photo-ui.flash::after { content: ''; position: fixed; inset: 0; background: #fff; animation: flash .3s forwards; }
@keyframes flash { to { opacity: 0; } }
.photo-preview { position: fixed; inset: 0; z-index: 30; background: rgba(10,8,6,.92); display: grid; place-items: center; padding: 20px; gap: 16px; align-content: center; }
.photo-preview img { max-width: 100%; max-height: 70vh; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.6); border: 6px solid #f5f0e6; }
.pp-btns { display: flex; gap: 10px; }

/* メニュー・記録 */
.profile-card { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 20px; background: linear-gradient(135deg, rgba(120,90,50,.55), rgba(40,32,24,.9)); border: 1px solid var(--card-line); box-shadow: var(--glow); margin-bottom: 14px; }
.pc-lv { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; align-content: center; background: linear-gradient(180deg, var(--gold1), var(--gold2)); color: #3a2400; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); flex: none; }
.pc-lv span { font-size: 11px; font-weight: 800; line-height: 1; }
.pc-lv b { font-size: 28px; line-height: 1; }
.pc-main { flex: 1; min-width: 0; }
.pc-main > b { font-size: 16px; }
.pc-main small { color: var(--muted); font-size: 12px; }
.menu-list { display: grid; gap: 8px; }
.menu-list button { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--card-line); background: var(--card); text-align: left; font-size: 16px; }
.menu-list button > .ic:first-child { font-size: 22px; color: var(--gold1); }
.menu-list span { flex: 1; display: grid; }
.menu-list small { font-size: 12px; color: var(--muted); }
.menu-list .badge { position: static; display: grid; place-items: center; width: 22px; height: 22px; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; }
.bar .sync { font-size: 12px; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
.stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.stats4 div { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--card-line); background: var(--card); }
.stats4 .ic { color: var(--gold1); font-size: 18px; }
.stats4 b { font-size: 20px; }
.stats4 span { font-size: 11px; color: var(--muted); }
h3.sec { font-size: 14px; color: var(--muted); margin: 18px 4px 8px; font-weight: 700; }
.unit-list { display: grid; gap: 8px; }
.unit-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--card-line); }
.unit-row > span { text-align: right; font-weight: 700; font-size: 14px; display: grid; }
.unit-row small { font-size: 11px; color: var(--ok); font-weight: 500; }
.ubar { position: relative; height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.ubar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.ubar .all { background: rgba(255,207,122,.35); }
.ubar .ok { background: linear-gradient(90deg, #8bd17c, #c4ef8d); }

/* 図鑑 */
.zk-total { font-size: 14px; color: var(--muted); }
.zk-total b { color: var(--gold1); font-size: 20px; }
.zk-progress { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 12px; }
.zk-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold1)); }
.zk-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; scrollbar-width: none; }
.zk-tabs button { flex: none; display: inline-flex; gap: 4px; align-items: center; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--card-line); background: rgba(255,255,255,.05); font-size: 13px; }
.zk-tabs button.on { background: linear-gradient(180deg, var(--gold1), var(--gold2)); color: #3a2400; font-weight: 700; }
.zk-genre { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; width: 100%; padding: 12px; margin-bottom: 8px; border-radius: 16px; border: 1px solid var(--card-line); background: var(--card); text-align: left; }
.zk-genre .g-ic { grid-row: 1 / 4; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; background: rgba(255,220,160,.08); color: var(--gold1); }
.zk-genre .zk-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin: 6px 0 2px; }
.zk-genre .zk-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold1)); }
.zk-genre small { font-size: 12px; color: var(--muted); }
.zk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.zk-item { position: relative; display: grid; gap: 5px; padding: 6px 6px 8px; border-radius: 16px; border: 1px solid var(--card-line); background: var(--card); text-align: center; }
.zk-item b { font-size: 11.5px; line-height: 1.3; }
.zk-item.locked .thumb img { filter: brightness(0) opacity(.35); }
.zk-item.locked b { color: var(--muted); }
.zk-item .lock { position: absolute; top: 10px; right: 10px; color: var(--muted); }
.zk-item.rare.have { box-shadow: 0 0 0 1.5px #b48cff; }

/* フレンド・管理者 */
.addf { display: flex; gap: 8px; margin-bottom: 8px; }
.addf input { flex: 1; min-width: 0; background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 12px; padding: 12px; color: var(--text); font-size: 16px; }
.frow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--card-line); background: var(--card); margin-bottom: 8px; }
.frow > b { flex: 1; display: grid; font-size: 15px; min-width: 0; }
.frow small { font-size: 11.5px; color: var(--muted); font-weight: 500; display: inline-flex; gap: 3px; align-items: center; }
.av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: linear-gradient(180deg, #4a3a2a, #2c241c); color: var(--gold1); flex: none; }
.acard { padding: 12px; border-radius: 16px; border: 1px solid var(--card-line); background: var(--card); margin-bottom: 10px; display: grid; gap: 8px; }
.ac-top { display: flex; align-items: center; gap: 10px; }
.ac-top b { flex: 1; font-size: 16px; }
.lvb { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: linear-gradient(180deg, var(--gold1), var(--gold2)); color: #3a2400; }
.ac-stats, .ac-units { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.ac-stats span, .ac-units span { display: inline-flex; gap: 3px; align-items: center; padding: 3px 8px; border-radius: 99px; background: rgba(255,255,255,.06); }
.ac-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.ac-foot .ac-btns { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.ac-foot .ac-btns .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
.ac-foot small { color: var(--muted); font-size: 11.5px; }
.visiting .hud .round { flex: none; }

/* 問題 */
.qprog { flex: 1; height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; margin: 0 12px; }
.qprog i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold1)); transition: width .4s; }
.tag { display: inline-flex; gap: 3px; align-items: center; }
.xpgain { display: inline-flex; justify-self: center; gap: 6px; align-items: center; font-weight: 800; color: #b9a2ff; background: rgba(180,140,255,.12); padding: 4px 12px; border-radius: 99px; }
.xpgain b { color: var(--gold1); }
.master, .gold-t { display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.warnbox { display: flex; gap: 6px; align-items: flex-start; }
.rankup { display: grid; justify-items: center; gap: 2px; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, rgba(180,140,255,.3), rgba(127,211,255,.18)); font-size: 16px; }
.rankup .ic { font-size: 26px; color: #d2c2ff; }
.rankup b { font-size: 26px; color: #fff; }
.rankup small { color: var(--muted); }
.xp-line { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #b9a2ff; }
.xp-line .xpbar { flex: 1; height: 8px; }
.streak-t { display: inline-flex; gap: 4px; align-items: center; justify-content: center; }
.streak-t .ic { color: #ff8a4c; }

/* ---- タイトル画面 ---- */
.brand, .t-logo { font-family: "Cormorant Garamond", "Times New Roman", serif; font-weight: 600; letter-spacing: .32em; }
.login .brand { font-size: 40px; margin: 6px 0 2px; padding-left: .32em; color: var(--gold1); text-shadow: 0 0 24px rgba(255,207,122,.35); }
.title-screen { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; gap: 10px; cursor: pointer; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 35%, var(--t1), var(--t2) 60%, #0b0907); transition: opacity .9s ease; }
.title-screen.t-morning { --t1: #f6dcae; --t2: #6d5a49; }
.title-screen.t-day { --t1: #e9e2d0; --t2: #55606b; }
.title-screen.t-sunset { --t1: #f0a46a; --t2: #5a3424; }
.title-screen.t-night { --t1: #3b4466; --t2: #141826; }
.t-glow { position: absolute; width: 140vmax; height: 140vmax; left: 50%; top: 40%; transform: translate(-50%, -50%); background: conic-gradient(from 0deg, rgba(255,240,210,.0), rgba(255,240,210,.12), rgba(255,240,210,0) 30%); animation: spin 24s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.t-logo { position: relative; margin: 0; font-size: clamp(52px, 17vw, 120px); color: #fffaf0; padding-left: .32em; text-shadow: 0 2px 30px rgba(255,220,170,.55), 0 0 2px rgba(255,255,255,.6); }
.t-logo span { display: inline-block; opacity: 0; transform: translateY(14px); filter: blur(8px); animation: rise 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }
.t-sub { position: relative; margin: 0; color: rgba(255,250,240,.75); font-size: 13px; letter-spacing: .2em; opacity: 0; animation: fadein 1s 1.2s forwards; }
@keyframes fadein { to { opacity: 1; } }
.t-bottom { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 64px); display: grid; justify-items: center; gap: 14px; }
.t-tap { margin: 0; color: #fffaf0; font-size: 15px; letter-spacing: .3em; opacity: 0; animation: fadein .8s 1.8s forwards, breathe 2.4s 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .35; } }
.t-load { width: 120px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
.t-load i { display: block; height: 100%; width: 0; background: rgba(255,250,235,.9); transition: width .6s ease; }
.t-gear { position: absolute; top: calc(var(--safe-t) + 14px); right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.18); color: #fffaf0; font-size: 20px; display: grid; place-items: center; z-index: 2; }
.title-screen.t-go .t-tap { animation: none; opacity: 1; }
.title-screen.t-out { opacity: 0; pointer-events: none; }
.t-settings { z-index: 3; cursor: default; }
.t-settings .lbl { color: var(--muted); font-size: 13px; margin: 0 0 6px; }
.t-settings .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: rgba(255,255,255,.06); padding: 4px; border-radius: 12px; margin-bottom: 14px; }
.t-settings .seg button { border: 0; background: none; padding: 9px; border-radius: 9px; color: var(--muted); }
.t-settings .seg button.on { background: var(--accent); color: #2a1706; font-weight: 700; }
.t-settings .btn.big { margin-top: 8px; width: 100%; }
.t-logo { white-space: nowrap; font-size: clamp(44px, 13vw, 110px); letter-spacing: .22em; padding-left: .22em; }
.float-bar button { white-space: nowrap; flex: none; }
.float-bar .fb-name { max-width: 34vw; }

/* 部屋がたくさんあるので、ボタンの列は横にすべらせる */
.rooms { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rooms::-webkit-scrollbar { display: none; }
.rooms button { flex: 0 0 auto; }
.rooms button.homebtn { border-color: var(--gold1); color: var(--gold1); font-weight: 700; }
.rooms button.homebtn.villa { background: linear-gradient(180deg, rgba(64,150,170,.85), rgba(30,96,120,.85)); color: #fff; border-color: rgba(255,255,255,.35); }
.t-sub { display: none; } /* タイトルの説明文は出さない（本人の希望） */
.genregrid.three { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.genregrid.three .genre { padding: 16px 6px 14px; position: relative; }
.genregrid.three .g-ic { width: 52px; height: 52px; font-size: 28px; border-radius: 16px; }
.genregrid.three b { font-size: 14px; }
.g-new { font-style: normal; font-size: 10px; font-weight: 700; color: #3a2400; background: linear-gradient(180deg, var(--gold1), var(--gold2)); padding: 2px 7px; border-radius: 99px; margin-top: 2px; }

/* ログインボーナス */
.lb-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 14px; }
.lb-cell { position: relative; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--card-line); background: var(--card); display: grid; place-items: center; align-content: center; gap: 1px; font-size: 18px; color: var(--muted); }
.lb-cell small { font-size: 10px; font-weight: 700; }
.lb-cell.big { color: var(--gold1); background: linear-gradient(180deg, rgba(120,90,50,.6), rgba(40,32,24,.9)); }
.lb-cell.ticket4 { color: #f6d6ff; background: linear-gradient(180deg, rgba(120,80,160,.7), rgba(40,26,50,.95)); }
.lb-cell.done { opacity: .55; }
.lb-cell .stamp { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 26px; color: #ff6b5a; background: rgba(0,0,0,.25); border-radius: inherit; }
.lb-cell.today { box-shadow: 0 0 0 2px var(--gold2), 0 0 18px rgba(240,180,76,.5); opacity: 1; }
.lb-cell.today .stamp { animation: stamp .5s .3s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes stamp { from { transform: scale(2.2); opacity: 0; } to { transform: none; opacity: 1; } }
.lb-get { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; margin-bottom: 12px; color: var(--text); }
.lb-get .ic { color: var(--gold1); font-size: 22px; }

/* 週間ランキング */
.rk-term { color: var(--muted); font-size: 13px; margin: 0 4px 12px; }
.rk-mecard { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; margin-bottom: 14px; background: linear-gradient(135deg, rgba(120,90,50,.55), rgba(40,32,24,.9)); border: 1px solid var(--card-line); }
.rk-mecard > div { flex: 1; display: grid; }
.rk-mecard small { color: var(--muted); font-size: 12px; }
.rk-mecard > .ic { font-size: 22px; color: var(--gold1); }
.rk-pos { font-size: 30px; font-weight: 800; color: var(--gold1); min-width: 56px; text-align: center; }
.rk-pos small { font-size: 13px; margin-left: 2px; }
.rk-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--card-line); background: var(--card); margin-bottom: 8px; }
.rk-row b { flex: 1; font-size: 15px; }
.rk-row span:last-child { display: grid; text-align: right; font-weight: 800; }
.rk-row small { font-size: 11px; color: var(--ok); font-weight: 500; }
.rk-row.me { box-shadow: 0 0 0 2px var(--gold2); }
.rk-n { width: 30px; text-align: center; font-weight: 800; color: var(--muted); }
.medal { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #3a2400; }
.medal.m1 { background: linear-gradient(180deg, #ffe9a0, #e7b23c); box-shadow: 0 0 12px rgba(240,190,70,.6); }
.medal.m2 { background: linear-gradient(180deg, #f2f2f2, #a9a9a9); }
.medal.m3 { background: linear-gradient(180deg, #f1c49b, #b8763f); }

/* チケット */
.ticket-svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.ticket-svg .tk-shine { animation: tkshine 3.2s ease-in-out infinite; }
@keyframes tkshine { 0%, 55% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(320px) skewX(-20deg); } }
.ticket-svg.mini { width: 88%; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.ticket-svg.big { width: min(260px, 70vw); margin: 0 auto; }

/* ログインボーナスの画面 */
.lb-screen { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px);
  background: radial-gradient(90% 60% at 50% 25%, rgba(120,84,40,.95), rgba(20,16,12,.97) 70%); opacity: 0; transition: opacity .4s; overflow-y: auto; }
.lb-screen.show { opacity: 1; }
.lb-rays { position: absolute; left: 50%; top: 26%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,226,150,.10) 0 8deg, rgba(255,226,150,0) 8deg 20deg); animation: spin 40s linear infinite; pointer-events: none; }
.lb-inner { position: relative; width: min(440px, 100%); display: grid; gap: 12px; justify-items: center; text-align: center; }
.lb-kicker { margin: 0; font-family: "Cormorant Garamond", serif; letter-spacing: .45em; font-size: 16px; color: var(--gold1); padding-left: .45em; }
.lb-day { margin: -4px 0 0; font-size: 22px; }
.lb-day b { font-size: 54px; color: #fff; text-shadow: 0 0 24px rgba(255,210,120,.7); margin-right: 4px; }
.lb-reward { display: grid; gap: 10px; justify-items: center; animation: pop .7s .2s cubic-bezier(.3,1.5,.5,1) both; }
.lb-reward p { margin: 0; font-size: 16px; }
.lb-reward.lbk-ticket4 .ticket-svg { filter: drop-shadow(0 0 22px rgba(180,140,255,.7)); }
.lb-reward.lbk-ticket .ticket-svg { filter: drop-shadow(0 0 22px rgba(240,180,76,.6)); }
.lb-gbig { display: flex; align-items: center; gap: 10px; font-size: 44px; color: var(--gold1); }
.lb-gbig span { font-size: 34px; font-weight: 900; color: #fff; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.lb-screen .lb-grid { width: 100%; grid-template-columns: repeat(6, 1fr); }
.lb-cell .lb-g { font-size: 16px; }
.lb-cell.big { padding: 2px; }
.lb-cell.big small { position: absolute; top: 3px; left: 5px; }
.lb-next { margin: 0; color: var(--muted); font-size: 13px; }
.lb-next b { color: var(--gold1); }
.lb-screen .btn.big { width: 100%; }
/* カレンダーは1行5日（5日ごとのチケットの日が、どの行もいちばん右に来る） */
.lb-screen .lb-grid { grid-template-columns: repeat(5, 1fr); }

/* お知らせ */
.news-card { padding: 14px; border-radius: 16px; border: 1px solid var(--card-line); background: var(--card); margin-bottom: 10px; }
.news-card.unread { box-shadow: 0 0 0 1.5px var(--gold2); }
.news-card h3 { margin: 4px 0 6px; font-size: 16px; }
.news-card p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text); opacity: .9; }
.nc-top { display: flex; gap: 8px; align-items: center; }
.nc-top small { color: var(--muted); font-size: 12px; }
.nc-new { font-style: normal; font-size: 10px; font-weight: 900; padding: 2px 7px; border-radius: 99px; background: #ff6b5a; color: #fff; }
.news-form { display: grid; gap: 10px; }
.news-form input, .news-form textarea, .news-form select { background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 12px; padding: 12px; color: var(--text); font: inherit; font-size: 16px; resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.admin .compose { width: 100%; margin-bottom: 14px; flex-direction: row; }

/* ゲージと「家具を買う」を1本のカプセルに */
.dock { justify-items: center; gap: 6px; padding-bottom: 12px; }
.capsule { display: flex; align-items: center; gap: 10px; min-width: min(300px, 86vw); padding: 7px 14px 7px 7px; border-radius: 999px;
  border: 1px solid var(--card-line); background: rgba(24,20,16,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35); text-align: left; color: var(--text); transition: transform .12s; }
.capsule:active { transform: scale(.97); }
.capsule .ring { --p: 0; width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 20px; color: var(--gold1);
  background: radial-gradient(closest-side, #241d16 76%, transparent 78% 100%), conic-gradient(var(--gold2) calc(var(--p) * 1%), rgba(255,255,255,.12) 0); }
.capsule .cap-t { flex: 1; display: grid; line-height: 1.3; }
.capsule .cap-t b { font-size: 15px; }
.capsule .cap-t small { font-size: 11.5px; color: var(--muted); }
.capsule > .ic:last-child { color: var(--muted); }
.capsule.ready { background: linear-gradient(180deg, var(--gold1), var(--gold2) 60%, #e39a32); color: #3a2400; border-color: transparent; animation: pulse 1.8s infinite; }
.capsule.ready .ring { color: #3a2400; background: rgba(255,255,255,.45); }
.capsule.ready .cap-t small, .capsule.ready > .ic:last-child { color: #5a3a08; }
.dock .testfill { font-size: 11.5px; padding: 2px 8px; }

/* 下のアイコン：絵をきっちり真ん中に */
.tabbar .ti { display: grid; place-items: center; }
.tabbar .ti .ic { width: 26px; height: 26px; }
.tabbar .ti .ic svg { width: 26px; height: 26px; }
.tabbar button.center .ti .ic { width: 28px; height: 28px; }
.tabbar button.center .ti .ic svg { width: 28px; height: 28px; }
.tabbar .ti svg { display: block; }

.lvctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lvctl > button:not(.btn) { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--card-line); background: rgba(255,255,255,.06); display: grid; place-items: center; font-size: 18px; }
.lvctl .lvv { min-width: 56px; text-align: center; font-size: 18px; color: var(--gold1); }
.lvctl .lvin { width: 64px; background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 10px; padding: 8px; color: var(--text); font-size: 16px; }
.admin-only .lbl { display: inline-flex; gap: 6px; align-items: center; color: var(--accent2); }

.ru-tickets { display: flex; gap: 10px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.ru-tickets span { display: grid; justify-items: center; gap: 2px; width: 92px; }
.ru-tickets b { font-size: 14px; color: #fff; }

/* 持ち物 */
.seg.bagtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: rgba(255,255,255,.06); padding: 4px; border-radius: 14px; margin-bottom: 12px; }
.seg.bagtabs button { display: inline-flex; gap: 6px; justify-content: center; align-items: center; border: 0; background: none; padding: 10px; border-radius: 11px; color: var(--muted); font-size: 14px; }
.seg.bagtabs button.on { background: linear-gradient(180deg, var(--gold1), var(--gold2)); color: #3a2400; font-weight: 700; }
.bag-n { font-size: 10.5px; color: var(--accent2); }
.bag-n.full { color: var(--muted); }
.bag-items { display: grid; gap: 8px; }
.bag-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--card-line); background: var(--card); }
.bag-row.zero { opacity: .45; }
.bag-art { width: 84px; flex: none; display: grid; place-items: center; }
.bag-art .ticket-svg.mini { width: 100%; }
.bag-t { flex: 1; display: grid; }
.bag-t small { font-size: 11.5px; color: var(--muted); }
.bag-cnt { font-size: 20px; color: var(--gold1); }
.shard { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; transform: rotate(45deg); }
.shard .ic { transform: rotate(-45deg); }
.shard.s4 { background: linear-gradient(135deg, #e7d4ff, #8e63e6); color: #2e1650; box-shadow: 0 0 14px rgba(180,140,255,.5); }
.shard.s5 { background: linear-gradient(135deg, #fff1b8, #e3a92f); color: #4a2c00; box-shadow: 0 0 14px rgba(240,190,70,.6); }
.shard.ex { background: linear-gradient(135deg, #ffe0b0, #d98c43); color: #3a2400; transform: none; border-radius: 14px; }
.shard.ex .ic { transform: none; }

.res .row2.after { margin-top: 4px; }
.res .row2.after .btn { padding: 14px 8px; font-size: 15px; }

.fb-card.done { opacity: .55; }
.fb-card .nc-top b { font-size: 14px; }
.fb-kind { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; }
.fb-kind.bug { background: rgba(255,122,107,.25); color: #ffb3a8; }
.fb-kind.request { background: rgba(127,211,255,.2); color: #a8e2ff; }
.fb-card .done-btn { margin-top: 10px; }
.admin-btns { margin-bottom: 14px; }
.admin-btns .btn { padding: 12px 6px; font-size: 13.5px; }

/* 家具（まとめ） */
.hub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hub-card { position: relative; display: grid; gap: 4px; justify-items: start; text-align: left; padding: 16px 14px; border-radius: 20px; border: 1px solid var(--card-line); background: var(--card); box-shadow: var(--glow); min-height: 118px; overflow: hidden; }
.hub-card b { font-size: 16px; }
.hub-card small { font-size: 12px; color: var(--muted); }
.hub-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: rgba(255,220,160,.1); color: var(--gold1); margin-bottom: 4px; }
.hub-card.buy, .hub-card.gacha { grid-column: span 2; min-height: 104px; }
.hub-card.buy.ready { background: linear-gradient(135deg, rgba(255,214,120,.95), rgba(225,150,50,.95)); color: #3a2400; }
.hub-card.buy.ready small { color: #5a3a08; }
.hub-card.buy.ready .hub-ic { background: rgba(255,255,255,.45); color: #3a2400; }
.hub-bar { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.hub-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold1)); }
.hub-card.gacha { background: linear-gradient(135deg, rgba(90,60,140,.9), rgba(30,22,40,.95)); }
.hub-card.gacha .hub-art { position: absolute; right: -6px; top: 14px; width: 120px; transform: rotate(-10deg); }
.seg.soc .badge { position: static; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #ff6b5a; color: #fff; font-style: normal; font-size: 11px; margin-left: 4px; }

/* ガチャ */
.bn-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; }
.bn-tabs button { flex: none; display: inline-flex; gap: 4px; align-items: center; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--card-line); background: rgba(255,255,255,.05); font-size: 13px; }
.bn-tabs button.on { background: linear-gradient(180deg, var(--gold1), var(--gold2)); color: #3a2400; font-weight: 700; }
.bn-tabs button.lim.on { background: linear-gradient(180deg, #d9c6ff, #8e63e6); color: #1d0f3a; }
.banner { position: relative; overflow: hidden; border-radius: 22px; padding: 18px 16px 14px; margin-bottom: 14px; min-height: 190px; border: 1px solid var(--card-line); }
.banner.b-standard { background: linear-gradient(135deg, #6b4a22, #2a1f15); }
.banner.b-starry { background: radial-gradient(120% 90% at 70% 10%, #2b3f8a, #0b1028 70%); }
.banner.b-rock { background: linear-gradient(135deg, #3a0a14, #0c0c0c); }
.banner.b-band { background: radial-gradient(90% 70% at 80% 0%, rgba(255,70,90,.55), transparent 60%), radial-gradient(70% 60% at 10% 100%, rgba(255,170,60,.35), transparent 60%), linear-gradient(160deg, #1a0d12, #050405); }
.banner.b-gothic { background: linear-gradient(135deg, #3a0d1e, #120a12); }
.banner.b-wa { background: linear-gradient(135deg, #5a1a1a, #1c1010); }
.bn-glow { position: absolute; inset: -40%; background: radial-gradient(circle at 70% 30%, rgba(255,240,200,.18), transparent 50%); animation: spin 30s linear infinite; }
.banner h3 { position: relative; margin: 0 0 4px; font-size: 22px; letter-spacing: .04em; }
.banner p { position: relative; margin: 0 0 10px; font-size: 12.5px; color: rgba(255,250,240,.8); }
.bn-tag { position: relative; display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 99px; background: #ff6b5a; color: #fff; margin-bottom: 6px; }
.bn-picks { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bn-picks .thumb { border-radius: 12px; background: rgba(0,0,0,.25); }
.pull-btns { display: grid; gap: 8px; }
.pull-btns .btn { display: flex; align-items: center; gap: 12px; justify-content: flex-start; text-align: left; padding: 10px 14px; font-size: 16px; }
.pull-btns .btn .ticket-svg.mini { width: 62px; flex: none; }
.pull-btns .btn span { display: grid; }
.pull-btns .btn small { font-size: 11.5px; font-weight: 600; opacity: .8; }
.pull-btns .btn:disabled { opacity: .45; animation: none; }
.btn.special { background: linear-gradient(135deg, #e7d4ff, #8e63e6); color: #1d0f3a; }
.have-t { text-align: center; color: var(--muted); font-size: 13px; margin: 10px 0; }
.have-t b { color: var(--gold1); font-size: 16px; }
.shards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.shard-btn { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border-radius: 16px; border: 1px solid var(--card-line); background: var(--card); font-size: 13px; }
.shard-btn b { color: var(--gold1); }
.shard-btn small { font-size: 11px; color: var(--muted); }
.shard-btn:disabled { opacity: .5; }
.rates { font-size: 12.5px; color: var(--muted); margin: 6px 4px 0; }
.rates summary { cursor: pointer; }
.zk-item.r5.have { box-shadow: 0 0 0 1.5px #ffd36a, 0 0 14px rgba(255,200,90,.35); }
.zk-item.r4.have { box-shadow: 0 0 0 1.5px #b48cff; }

/* ガチャを引く演出 */
.pull-ov { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; align-content: center; gap: 18px; padding: 20px; background: radial-gradient(circle at 50% 40%, rgba(40,30,22,.96), rgba(6,5,4,.98)); opacity: 0; transition: opacity .3s; overflow-y: auto; }
.pull-ov.show { opacity: 1; }
.pull-ov { --c: #7fd3ff; }
.pull-ov.r4 { --c: #c69bff; }
.pull-ov.r5 { --c: #ffd36a; }
.po-rays { position: absolute; left: 50%; top: 42%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 18%, transparent) 0 6deg, transparent 6deg 18deg); animation: spin 18s linear infinite; opacity: .0; transition: opacity .6s; pointer-events: none; }
.pull-ov.open .po-rays { opacity: 1; }
.po-box { position: relative; width: 150px; height: 130px; animation: shake2 1.2s ease-in-out infinite; }
.po-body { position: absolute; left: 10px; right: 10px; bottom: 0; height: 90px; border-radius: 12px; background: linear-gradient(180deg, #8a5a2a, #4a2f17); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--c) 60%, #000), 0 0 40px color-mix(in srgb, var(--c) 55%, transparent); }
.po-lid { position: absolute; left: 0; right: 0; top: 18px; height: 34px; border-radius: 10px; background: linear-gradient(180deg, #a06a33, #6a4320); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--c) 60%, #000); transition: transform .6s cubic-bezier(.3,1.4,.5,1); z-index: 2; }
.po-light { position: absolute; left: 50%; top: 40px; width: 20px; height: 20px; border-radius: 50%; transform: translateX(-50%); background: var(--c); box-shadow: 0 0 40px 20px var(--c); opacity: .0; transition: opacity .4s, transform .6s; }
@keyframes shake2 { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-3deg); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } }
.po-tap { margin: 0; color: #fff; letter-spacing: .2em; animation: breathe 1.6s ease-in-out infinite; }
.pull-ov.open .po-box { animation: none; transform: scale(.6); opacity: 0; transition: transform .6s .3s, opacity .4s .5s; }
.pull-ov.open .po-lid { transform: translateY(-60px) rotate(-18deg); }
.pull-ov.open .po-light { opacity: 1; transform: translateX(-50%) scale(6); }
.pull-ov.open .po-tap { display: none; }
.po-cards { display: none; width: min(440px, 100%); gap: 8px; }
.pull-ov.open .po-cards { display: grid; }
.po-cards.one { grid-template-columns: minmax(0, 220px); justify-content: center; }
.po-cards.ten { grid-template-columns: repeat(3, 1fr); }
.po-cards.ten .po-card:nth-child(10) { grid-column: 2; }
.po-card { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 8px 6px 10px; border-radius: 16px; background: linear-gradient(180deg, rgba(60,50,40,.95), rgba(25,20,16,.98)); border: 1.5px solid rgba(127,211,255,.6); opacity: 0; transform: rotateY(90deg) scale(.8); animation: flipin .5s forwards; }
.po-card.r4 { border-color: #c69bff; box-shadow: 0 0 18px rgba(198,155,255,.45); }
.po-card.r5 { border-color: #ffd36a; box-shadow: 0 0 26px rgba(255,211,106,.65); background: linear-gradient(180deg, rgba(110,80,30,.95), rgba(35,26,14,.98)); }
@keyframes flipin { to { opacity: 1; transform: none; } }
.po-card .stars { font-size: 12px; color: #ffd36a; letter-spacing: 1px; }
.po-card.r3 .stars { color: #7fd3ff; }
.po-card.r4 .stars { color: #d6bcff; }
.po-card .thumb { width: 100%; }
.po-card b { font-size: 11.5px; line-height: 1.3; }
.po-new { font-style: normal; font-size: 10px; font-weight: 900; padding: 1px 7px; border-radius: 99px; background: #ff6b5a; color: #fff; }
.po-dup { font-style: normal; font-size: 10px; color: var(--muted); }
.po-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; width: min(440px, 100%); }

/* 模様がえ：ふつう／上から */
.editbar .eb-view { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: rgba(255,255,255,.07); padding: 4px; border-radius: 12px; margin: 0 0 10px; }
.editbar .eb-view button { border: 0; background: none; padding: 7px 0; border-radius: 9px; font-size: 13px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; }
.editbar .eb-view button svg { width: 16px; height: 16px; }
.editbar .eb-view button.on { background: var(--accent); color: #2a1706; font-weight: 700; }

/* 部屋の名前を変える */
.room-name { cursor: pointer; }
.room-name .rn-edit { display: inline-flex; margin-left: 5px; opacity: .55; vertical-align: -2px; }
.room-name .rn-edit svg { width: 13px; height: 13px; }
.rename-sheet .rn-input { width: 100%; box-sizing: border-box; font-size: 17px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--card-line, rgba(255,255,255,.18)); background: rgba(255,255,255,.06); color: inherit; margin: 4px 0 12px; }
.rename-sheet .eb-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }

/* 家具を買う：ジャンルは横長の行で、中身の3つを先に見せる */
.genrelist { display: grid; gap: 10px; margin-bottom: 6px; }
.genre-row { display: grid; grid-template-columns: 46px 1fr auto 16px; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 18px; border: 1px solid var(--card-line); background: var(--card); box-shadow: var(--glow); text-align: left; color: inherit; }
.genre-row:active { transform: scale(.98); }
.genre-row .g-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: rgba(255,220,160,.08); color: var(--gold1); }
.genre-row .g-t { display: grid; gap: 3px; min-width: 0; }
.genre-row .g-t b { font-size: 15px; }
.genre-row .g-t small { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.genre-row .g-new { margin: 0; padding: 1px 6px; font-size: 9.5px; letter-spacing: .04em; }
.genre-row .g-peek { display: flex; gap: 4px; }
.genre-row .g-peek .thumb { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.05); display: grid; place-items: center; }
.genre-row .g-peek .thumb img, .genre-row .g-peek .thumb canvas { width: 100%; height: 100%; object-fit: contain; }
.genre-row > svg { width: 16px; height: 16px; color: var(--muted); }
.cand b { word-break: auto-phrase; line-break: strict; font-size: 12px; }
.cand .chips { flex-wrap: nowrap; overflow: hidden; }
.rn-t .rn-n { display: flex; align-items: center; gap: 4px; }

.cand .chips i { white-space: nowrap; }
/* 部屋えらび（左上の部屋名から） */
.room-name .rn-edit svg { transform: rotate(90deg); }
.room-pop { position: absolute; z-index: 30; top: calc(var(--safe-t, 0px) + 70px); left: 12px; right: 12px; padding: 12px; border-radius: 20px; background: rgba(24,20,16,.9); border: 1px solid var(--card-line); backdrop-filter: blur(14px); box-shadow: 0 18px 40px rgba(0,0,0,.45); animation: rpIn .18s ease-out; }
@keyframes rpIn { from { opacity: 0; transform: translateY(-8px); } }
.rp-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; font-size: 14px; }
.rp-rename { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--gold1); background: rgba(255,220,160,.08); border: 0; padding: 6px 10px; border-radius: 99px; }
.rp-rename svg { width: 14px; height: 14px; }
.rp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rp-room { display: grid; justify-items: center; gap: 3px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--card-line); background: rgba(255,255,255,.04); color: inherit; }
.rp-room b { font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-room small { font-size: 10px; color: var(--muted); }
.rp-room .rp-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,220,160,.08); color: var(--gold1); font-size: 18px; }
.rp-room.on { background: linear-gradient(180deg, var(--gold1), var(--gold2)); color: #3a2400; border-color: transparent; }
.rp-room.on small { color: #5a3b0c; }
.rp-room.on .rp-ic { background: rgba(0,0,0,.12); color: #3a2400; }
.rp-room.lock { opacity: .55; }
.rp-home { margin-top: 10px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px; border-radius: 14px; border: 1px solid var(--gold1); background: none; color: var(--gold1); font-weight: 700; }
.rp-home.villa { background: linear-gradient(180deg, rgba(64,150,170,.85), rgba(30,96,120,.85)); color: #fff; border-color: rgba(255,255,255,.35); }
.rp-home.lock { opacity: .6; border-color: var(--card-line); color: var(--muted); font-weight: 500; }
.rp-home small { font-size: 10px; margin-left: 4px; }
.rp-home svg { width: 16px; height: 16px; }
/* ログボ：ふつうの日のごほうび（家具の引きかえ券）を、欠けずに大きく */
.lb-gbig { padding: 14px 26px; border-radius: 20px; line-height: 1; background: linear-gradient(180deg, rgba(120,90,50,.55), rgba(40,32,24,.9)); border: 1px solid rgba(255,220,160,.35); box-shadow: 0 0 26px rgba(240,180,76,.35); overflow: visible; }
.lb-gbig svg { display: block; width: 48px; height: 48px; flex: none; }
.lb-screen .lb-cell { aspect-ratio: 1.2; }

/* 家具の画面：赤丸は「ここに何かある」カードにだけ */
.hub-card { position: relative; }
.hub-card > .dot { position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: #ff5a4a; box-shadow: 0 0 0 2px rgba(24,20,16,.9); }

/* Lv100 までの道のり */
.rr-sheet { display: flex; flex-direction: column; max-height: 88vh; }
.rr-top { text-align: center; padding-bottom: 10px; }
.rr-now { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.rr-now small { font-size: 12px; color: var(--muted); }
.rr-now b { font-size: 38px; color: #fff; text-shadow: 0 0 18px rgba(255,210,120,.55); }
.rr-now span { color: var(--muted); }
.rr-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin: 6px 4px; }
.rr-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold1)); border-radius: inherit; }
.rr-sub { margin: 6px 0 8px; font-size: 13px; color: var(--muted); }
.rr-sub b { color: var(--gold1); font-size: 15px; }
.rr-legend { display: flex; justify-content: center; gap: 12px; font-size: 11px; color: var(--muted); }
.rr-legend span { display: inline-flex; align-items: center; gap: 4px; }
.rr-legend .ticket-svg { width: 28px; height: auto; }
.rr-road { list-style: none; margin: 0; padding: 6px 4px 6px 0; overflow-y: auto; flex: 1; min-height: 200px; position: relative; }
.rr-row { display: grid; grid-template-columns: 52px 26px 1fr; align-items: center; gap: 8px; min-height: 46px; position: relative; }
.rr-row::before { content: ""; position: absolute; left: 64px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.1); }
.rr-row.got::before { background: linear-gradient(var(--gold2), var(--gold1)); }
.rr-lv { text-align: right; font-weight: 800; font-size: 17px; color: var(--muted); }
.rr-lv small { font-size: 10px; margin-right: 2px; font-weight: 600; }
.rr-node { position: relative; z-index: 1; width: 18px; height: 18px; margin-left: 3px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: #1c1814; display: grid; place-items: center; color: #3a2400; }
.rr-node svg { width: 12px; height: 12px; }
.rr-row.got .rr-node { background: var(--gold1); border-color: var(--gold1); }
.rr-row.got .rr-lv { color: var(--gold1); }
.rr-row.got .rr-gifts { opacity: .45; }
.rr-row.next .rr-node { border-color: var(--gold1); box-shadow: 0 0 0 4px rgba(240,180,76,.25); animation: rrPulse 1.6s infinite; }
.rr-row.next .rr-lv { color: #fff; }
@keyframes rrPulse { 50% { box-shadow: 0 0 0 8px rgba(240,180,76,.08); } }
.rr-row.mile { min-height: 58px; }
.rr-row.mile .rr-node { width: 22px; height: 22px; margin-left: 1px; }
.rr-row.gold5 { min-height: 70px; }
.rr-row.gold5 .rr-lv { font-size: 22px; color: #ffd98a; }
.rr-gifts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.04); }
.rr-row.mile .rr-gifts { background: rgba(160,120,255,.1); }
.rr-row.gold5 .rr-gifts { background: linear-gradient(90deg, rgba(231,184,74,.18), rgba(231,184,74,.04)); border: 1px solid rgba(231,184,74,.4); }
.rr-gifts .ticket-svg { width: 40px; height: auto; }
.rr-row.gold5 .rr-gifts .ticket-svg:first-child { width: 58px; }
.rr-gifts i { font-style: normal; font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; }
.rr-gifts .rr-room { color: #8fd6e8; font-weight: 700; }
.rr-gifts .rr-room svg { width: 13px; height: 13px; }
.rr-gifts .rr-cap { margin-left: auto; }
.rr-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 10px; }
.subjgrid { grid-template-columns: repeat(3, 1fr); }

/* 備え付けの物の種類 */
.seg.kinds { grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); }
.fixlist { display: grid; gap: 12px; margin-bottom: 10px; max-height: 50vh; overflow-y: auto; }
.fix-row b { display: block; font-size: 13px; margin: 0 0 6px 2px; }
.fix-vs { display: flex; flex-wrap: wrap; gap: 6px; }
.fix-v { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 99px; border: 1px solid var(--card-line); background: rgba(255,255,255,.04); color: inherit; font-size: 12px; }
.fix-v i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.fix-v.on { border-color: var(--gold1); background: rgba(240,180,76,.18); color: var(--gold1); font-weight: 700; }

/* 4択の問題 */
.quiz.choice .problem { white-space: normal; line-height: 1.8; }
.cards.ch4 { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cards.ch4 .fcard { text-align: left; font-size: 15px; padding: 13px 14px; line-height: 1.5; font-family: inherit; }
.nf-adm { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 4px 0 10px; }

/* ===== ガチャの演出（pullfx.js） ===== */
.pfx { --c: #7fd3ff; position: fixed; inset: 0; z-index: 70; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c) 14%, #0c0a08), #040303 75%); opacity: 0; transition: opacity .35s, background .8s; touch-action: none; user-select: none; }
.pfx.show { opacity: 1; }
.pfx.r4 { --c: #c69bff; }
.pfx.r5 { --c: #ffd36a; }
.pfx-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.pfx-skip { position: absolute; top: calc(var(--safe-t, 0px) + 14px); right: 14px; z-index: 9; display: inline-flex; align-items: center; gap: 2px; padding: 7px 10px 7px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.35); color: rgba(255,255,255,.8); font-size: 12px; }
.pfx-skip svg { width: 14px; height: 14px; }
.pfx-stage { position: relative; z-index: 2; display: grid; place-items: center; gap: 22px; width: 100%; }
/* チケット */
.pfx-ticket { position: relative; width: min(300px, 78vw); animation: tkIn .7s cubic-bezier(.2,1.3,.4,1) both, tkFloat 2.4s 0.7s ease-in-out infinite; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--c) 70%, transparent)); transition: transform .1s; }
.pfx-ticket .ticket-svg { width: 100%; height: auto; display: block; }
@keyframes tkIn { from { transform: translateY(80px) scale(.6) rotate(-8deg); opacity: 0; } }
@keyframes tkFloat { 50% { translate: 0 -8px; } }
.pfx-ticket.tear { animation: tkTear .65s ease-in forwards; }
.pfx-ticket.tear .pfx-cut { opacity: 1; }
.pfx-cut { position: absolute; left: 50%; top: -6%; bottom: -6%; width: 3px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 18px 6px #fff; opacity: 0; transition: opacity .15s; }
@keyframes tkTear { 30% { transform: scale(1.06); } 100% { transform: translateY(-60px) scale(1.2); opacity: 0; filter: brightness(3) blur(2px); } }
.pfx-hint { margin: 0; color: rgba(255,255,255,.85); font-size: 13px; letter-spacing: .15em; animation: breathe 1.6s ease-in-out infinite; }
.pfx-hint::before { content: "↑"; display: block; text-align: center; font-size: 22px; animation: upArrow 1.2s ease-in-out infinite; }
@keyframes upArrow { 50% { transform: translateY(-8px); } }
/* 光の玉 */
.pfx-orb { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; opacity: 0; transform: translateY(160px) scale(.2); pointer-events: none; }
.pfx-orb i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, var(--c) 45%, color-mix(in srgb, var(--c) 40%, transparent) 70%, transparent 72%); box-shadow: 0 0 60px 20px color-mix(in srgb, var(--c) 70%, transparent), 0 0 140px 50px color-mix(in srgb, var(--c) 35%, transparent); animation: orbPulse 1s ease-in-out infinite; transition: background .3s, box-shadow .3s; }
.pfx-orb.in { animation: orbRise 1.3s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes orbRise { to { opacity: 1; transform: translateY(-30px) scale(1); } }
@keyframes orbPulse { 50% { transform: scale(1.08); } }
.pfx-orb.charge { animation: none; opacity: 1; transform: translateY(-30px) scale(1); }
.pfx-orb.charge i { animation: orbShake .08s linear infinite; }
@keyframes orbShake { 0% { translate: -3px 1px; } 50% { translate: 3px -2px; } 100% { translate: -1px 2px; } }
.pfx-orb.pop { animation: orbPop .45s ease-out forwards; }
@keyframes orbPop { from { opacity: 1; transform: translateY(-30px) scale(1); } to { opacity: 0; transform: translateY(-30px) scale(3.2); } }
/* ★5：光の柱・ゆれ・星 */
.pfx-pillars { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s; }
.pfx-pillars i { position: absolute; bottom: 0; width: 18vw; height: 120vh; background: linear-gradient(0deg, color-mix(in srgb, var(--c) 55%, transparent), transparent 85%); filter: blur(6px); transform-origin: bottom center; animation: pillar 2.4s ease-in-out infinite; }
.pfx-pillars i:nth-child(1) { left: 8%; transform: rotate(-14deg); }
.pfx-pillars i:nth-child(2) { left: 41%; animation-delay: .4s; }
.pfx-pillars i:nth-child(3) { right: 8%; transform: rotate(14deg); animation-delay: .8s; }
@keyframes pillar { 50% { opacity: .55; } }
.pfx.gold .pfx-pillars { opacity: 1; }
.pfx.gold .pfx-stage { animation: quake .5s linear 2; }
@keyframes quake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, -2px); } 80% { transform: translate(4px, 3px); } }
.pfx-stars { position: absolute; left: 0; right: 0; top: calc(50% + 70px); display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.pfx-stars i { font-style: normal; font-size: 34px; color: #ffd36a; text-shadow: 0 0 18px #ffb84a; opacity: 0; transform: scale(3); animation: starStamp .35s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes starStamp { to { opacity: 1; transform: none; } }
.pfx-flash { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }
/* ★5の見せ場 */
.pfx-spot { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; background: radial-gradient(circle at 50% 40%, rgba(90,64,20,.9), rgba(6,4,2,.96) 70%); opacity: 0; transition: opacity .35s; }
.pfx-spot.on { opacity: 1; }
.pfx-spot.hide { display: none; }
.sp-rays { position: absolute; left: 50%; top: 40%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(255,211,106,.16) 0 7deg, transparent 7deg 20deg); animation: spin 20s linear infinite; pointer-events: none; }
.sp-item { position: relative; width: min(240px, 62vw); animation: spItem .8s cubic-bezier(.2,1.4,.4,1) both; filter: drop-shadow(0 0 40px rgba(255,200,90,.7)); }
.sp-item .thumb { background: radial-gradient(circle, rgba(255,230,170,.35), transparent 70%); }
@keyframes spItem { from { transform: scale(.3) rotate(-10deg); opacity: 0; } }
.sp-stars { position: relative; font-size: 22px; letter-spacing: 4px; color: #ffd36a; text-shadow: 0 0 14px #ffb84a; animation: fadeUp .5s .35s both; }
.sp-name { position: relative; font-size: 22px; color: #fff; text-shadow: 0 0 20px rgba(255,200,90,.8); animation: fadeUp .5s .5s both; padding: 0 20px; }
.pfx-spot .po-new, .pfx-spot .po-dup { position: relative; animation: fadeUp .5s .6s both; }
.sp-tap { position: relative; margin: 14px 0 0; color: rgba(255,255,255,.6); font-size: 12px; animation: breathe 1.6s 1s ease-in-out infinite; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }
/* カード */
.pfx-cards { position: relative; z-index: 4; display: grid; gap: 8px; width: min(440px, calc(100% - 24px)); perspective: 900px; }
.pfx-cards.hide { display: none; }
.pfx-cards.one { grid-template-columns: minmax(0, 230px); justify-content: center; }
.pfx-cards.ten { grid-template-columns: repeat(5, 1fr); }
.pc { aspect-ratio: .68; cursor: pointer; opacity: 0; }
.pc.deal { animation: deal .45s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes deal { from { opacity: 0; transform: translateY(60px) rotate(-6deg) scale(.7); } to { opacity: 1; transform: none; } }
.pc-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,1.3,.5,1); }
.pc.flip .pc-in { transform: rotateY(180deg); }
.pc-back, .pc-front { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.pc-back { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #2a2219 0 6px, #231c15 6px 12px); border: 1.5px solid rgba(255,220,160,.35); color: rgba(255,220,160,.6); font-size: 22px; }
.pc.r4 .pc-back { box-shadow: 0 0 18px rgba(198,155,255,.7), inset 0 0 20px rgba(198,155,255,.45); border-color: #c69bff; }
.pc.r5 .pc-back { box-shadow: 0 0 26px rgba(255,211,106,.9), inset 0 0 26px rgba(255,211,106,.55); border-color: #ffd36a; }
.pc.tease .pc-in { animation: tease .15s linear infinite; }
@keyframes tease { 0% { transform: translate(-2px, 0) rotate(-1deg); } 50% { transform: translate(2px, -1px) rotate(1deg); } 100% { transform: none; } }
.pc-front { transform: rotateY(180deg); display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; align-items: center; gap: 2px; padding: 6px 4px 8px; text-align: center; background: linear-gradient(180deg, rgba(60,50,40,.98), rgba(25,20,16,1)); border: 1.5px solid rgba(127,211,255,.6); }
.pc.r4 .pc-front { border-color: #c69bff; box-shadow: inset 0 0 18px rgba(198,155,255,.35); }
.pc.r5 .pc-front { border-color: #ffd36a; background: linear-gradient(180deg, rgba(120,88,30,.98), rgba(35,26,14,1)); box-shadow: inset 0 0 22px rgba(255,211,106,.45); }
.pc .stars { font-size: 10px; letter-spacing: 0; color: #7fd3ff; }
.pc.r4 .stars { color: #d6bcff; }
.pc.r5 .stars { color: #ffd36a; }
.pc .thumb { width: 100%; background: none; }
.pc b { font-size: 10px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pfx-cards.one .pc b { font-size: 14px; }
.pfx-cards.one .pc .stars { font-size: 16px; }
.pc .po-new, .pc .po-dup { font-size: 9px; }
.pfx-btns { position: absolute; z-index: 8; left: 16px; right: 16px; bottom: calc(var(--safe-b, 0px) + 22px); display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; animation: fadeUp .4s both; }
.pfx-btns.hide { display: none; }

.bn-sample { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px; padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 700; backdrop-filter: blur(6px); }
.bn-sample svg { width: 16px; height: 16px; }

/* 更新のための再起動（アップデート画面） */
.update-ov { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; align-content: center; gap: 12px; padding: 24px; text-align: center; color: #fff; background: radial-gradient(circle at 50% 38%, #3a2a18, #0b0806 72%); opacity: 0; transition: opacity .35s; }
.update-ov.show { opacity: 1; }
.up-glow { position: absolute; left: 50%; top: 36%; width: 120vmax; height: 120vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(255,210,140,.08) 0 6deg, transparent 6deg 18deg); animation: spin 24s linear infinite; pointer-events: none; }
.up-logo { position: relative; margin: 0; font-family: "Cormorant Garamond", serif; font-size: 52px; letter-spacing: .28em; padding-left: .28em; font-weight: 600; text-shadow: 0 0 30px rgba(255,200,120,.55); }
.up-ver { position: relative; margin: 0; font-size: 13px; color: rgba(255,255,255,.6); }
.up-ver span { margin: 0 4px; }
.up-ver b { color: var(--gold1, #f0b44c); }
.up-bar { position: relative; width: min(260px, 70vw); height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 10px; }
.up-bar i { position: absolute; inset: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold2, #d98a2b), var(--gold1, #f0b44c)); box-shadow: 0 0 12px rgba(240,180,76,.7); animation: upFill 2.8s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes upFill { to { width: 100%; } }
.up-t { position: relative; margin: 0; font-size: 15px; font-weight: 700; }
.up-notes { position: relative; list-style: none; margin: 8px 0 0; padding: 12px 16px; display: grid; gap: 6px; text-align: left; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,220,160,.18); font-size: 13px; }
.up-notes li { display: flex; align-items: center; gap: 8px; }
.up-notes svg { width: 14px; height: 14px; color: var(--gold1, #f0b44c); }
.up-s { position: relative; margin: 6px 0 0; font-size: 11.5px; color: rgba(255,255,255,.5); }

/* ガチャの切りかえ：代表の家具のアイコン（限定が左・恒常が右） */
.bn-tabs { gap: 10px; padding: 4px 2px 6px; }
.bn-tabs .bn-tab { display: grid; justify-items: center; gap: 5px; padding: 0; border: 0; background: none; border-radius: 0; font-size: 11.5px; color: var(--muted); }
.bn-tabs .bn-tab.on, .bn-tabs .bn-tab.lim.on { background: none; color: #fff; }
.bt-art { position: relative; display: grid; place-items: center; width: 74px; height: 74px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 6px 14px rgba(0,0,0,.35); transition: transform .15s, box-shadow .2s; }
.bt-art .thumb { width: 86%; background: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.bn-tab.on .bt-art { transform: translateY(-2px); box-shadow: 0 0 0 2.5px var(--gold1), 0 0 18px rgba(240,180,76,.55); }
.bn-tab.lim.on .bt-art { box-shadow: 0 0 0 2.5px #ff7a8e, 0 0 20px rgba(255,90,120,.55); }
.bn-tab:not(.on) .bt-art { filter: saturate(.6) brightness(.75); }
.bt-rib { position: absolute; top: 5px; left: 5px; display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px 1px 4px; border-radius: 99px; font-style: normal; font-size: 9px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #ff5a6e, #c8233c); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.bt-rib svg { width: 9px; height: 9px; }
.bn-tab b { font-size: 11.5px; }

/* 記録：教科の切りかえ */
.rec-subj { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 4px; }
.rec-subj button { display: grid; justify-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 14px; border: 1px solid var(--card-line); background: var(--card); color: inherit; }
.rec-subj .ic2 { font-size: 20px; color: var(--gold1); }
.rec-subj b { font-size: 13px; }
.rec-subj small { font-size: 10.5px; color: var(--muted); }
.rec-subj button.on { background: linear-gradient(180deg, var(--gold1), var(--gold2)); color: #3a2400; border-color: transparent; }
.rec-subj button.on .ic2, .rec-subj button.on small { color: #4a2c00; }
.unit-row { grid-template-columns: minmax(56px, 8.5em) 1fr auto; } .unit-row > b { font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* ログボ：スマホの画面に入りきらないとき、上のごほうびが下のカレンダーに隠れないように。
   入りきらなければ画面ごとスクロール（光の筋は画面に固定して、スクロールの大きさに入れない） */
.lb-screen { overflow-y: auto; align-items: safe center; place-items: safe center; }
.lb-screen .lb-rays { position: fixed; }
.lb-inner > * { flex: none; min-height: min-content; }
.lb-reward { min-height: max-content; }
.lb-screen .lb-grid { gap: 5px; margin-bottom: 4px; }
.lb-screen .lb-cell { aspect-ratio: 1.45; border-radius: 10px; }
.lb-screen .lb-cell .ticket-svg.mini { width: 78%; height: auto; }
.lb-day b { font-size: 46px; }
.lb-gbig { padding: 10px 22px; }
.lb-gbig svg { width: 40px; height: 40px; }

/* ===== ガチャの演出：注文書と設計図 ===== */
.bpfx { --c: #7fd3ff; background: radial-gradient(circle at 50% 40%, #1b2230, #07080b 75%); }
.bpfx .od { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; align-content: center; gap: 14px; transition: transform .35s ease-in, opacity .3s; }
.bpfx .od.out { transform: translateY(-110%); opacity: 0; }
.od-paper { position: relative; width: min(300px, 80vw); background: #f5f0e4; color: #2a2620; border-radius: 4px; padding: 18px 18px 16px; box-shadow: 0 18px 40px rgba(0,0,0,.55); animation: odIn .45s cubic-bezier(.2,1.3,.4,1) both; font-family: "Zen Kaku Gothic New", system-ui, sans-serif; }
@keyframes odIn { from { transform: translateY(30px) rotate(-3deg); opacity: 0; } }
.od-paper h3 { margin: 0 0 10px; text-align: center; font-size: 17px; letter-spacing: .3em; border-bottom: 2px solid #2a2620; padding-bottom: 6px; }
.od-row { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 6px 2px; border-bottom: 1px dotted #9a8f7c; font-size: 13px; }
.od-row span { color: #7a705e; }
.od-sign { position: relative; margin-top: 14px; height: 104px; border: 1.5px dashed #9a8f7c; border-radius: 6px; background: rgba(255,255,255,.5); }
.od-sign small { position: absolute; left: 8px; top: 6px; font-size: 11px; color: #9a8f7c; pointer-events: none; transition: opacity .2s; }
.od.writing .od-sign small { opacity: 0; }
.od-sign canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.od-ok { position: absolute; right: 18px; bottom: 30px; width: 76px; height: 76px; border: 3px solid #c3282d; border-radius: 50%; color: #c3282d; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 18px; letter-spacing: .1em; transform: rotate(-14deg) scale(2.4); opacity: 0; pointer-events: none; }
.od-ok.on { transition: transform .22s cubic-bezier(.5,0,.6,1.4), opacity .15s; transform: rotate(-14deg) scale(1); opacity: .9; }
.od-hint { margin: 0; color: rgba(242,239,233,.75); font-size: 13px; animation: odHint 1.6s ease-in-out infinite; }
@keyframes odHint { 50% { opacity: .45; } }

.bpfx .bp { position: absolute; inset: 0; z-index: 2; background-color: #0d1a2e; background-image: linear-gradient(rgba(127,211,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(127,211,255,.09) 1px, transparent 1px), linear-gradient(rgba(127,211,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(127,211,255,.16) 1px, transparent 1px); background-size: 14px 14px, 14px 14px, 70px 70px, 70px 70px; transform-origin: 50% 0; transform: scaleY(0); transition: transform .55s cubic-bezier(.3,1.15,.5,1), opacity .25s; box-shadow: inset 0 0 120px color-mix(in srgb, var(--c) 18%, transparent); }
.bpfx .bp.on { transform: none; }
.bpfx .bp.out { opacity: 0; }
.bpfx.r5 .bp { box-shadow: inset 0 0 0 2px rgba(255,211,106,.35), inset 0 0 140px rgba(255,211,106,.22); }
.bp-art { position: absolute; left: 50%; top: 40%; width: min(86vw, 52vh, 460px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.bpfx .bp.ten .bp-art, .bpfx .bp.one .bp-grid { display: none; }
.bp-lines, .bp-real, .bp-ghost { position: absolute; inset: 0; width: 100%; height: 100%; }
.bp-real { object-fit: contain; clip-path: inset(0 0 100% 0); transition: clip-path 1s ease-in-out; }
.bp.real .bp-real { clip-path: inset(0 0 0 0); }
.bp-lines { transition: clip-path 1s ease-in-out, opacity .4s 1s; clip-path: inset(0 0 0 0); }
.bp.real .bp-lines { clip-path: inset(100% 0 0 0); }
.bp-ghost { display: none; }
.bp.ghosted .bp-ghost { display: block; animation: ghostIn 1.1s ease-out both; }
.bp-ghost img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) drop-shadow(0 0 1px var(--c)) drop-shadow(0 0 1px var(--c)) drop-shadow(0 0 3px var(--c)); }
@keyframes ghostIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.bp.ghosted.real .bp-ghost { transition: clip-path 1s ease-in-out; clip-path: inset(100% 0 0 0); }
.bp-dims { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transition: opacity .4s; }
.bp-dims path { fill: none; stroke: rgba(190,225,255,.75); stroke-width: .35; vector-effect: non-scaling-stroke; }
.bp-dt, .bp-dt2 { position: absolute; transform: translate(-50%, 4px); font-family: "Oswald", sans-serif; font-size: 12px; color: rgba(205,232,255,.95); opacity: 0; transition: opacity .4s; white-space: nowrap; }
.bp-dt2 { transform: translate(6px, -50%); }
.bp.dimmed .bp-dims, .bp.dimmed .bp-dt, .bp.dimmed .bp-dt2 { opacity: 1; }
.bp.real .bp-dims, .bp.real .bp-dt, .bp.real .bp-dt2 { opacity: .35; }
.bp-scan { position: absolute; left: -12%; right: -12%; height: 3px; top: 0; background: var(--c); box-shadow: 0 0 18px 5px var(--c); opacity: 0; }
.bp.real .bp-scan { animation: bpScan 1s ease-in-out forwards; }
@keyframes bpScan { 0% { top: 0; opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.bp-stamp { position: absolute; right: 9%; top: calc(var(--safe-t, 0px) + 70px); width: 92px; height: 92px; border: 3.5px solid #e5322d; border-radius: 50%; color: #e5322d; display: grid; place-items: center; text-align: center; font-style: normal; font-weight: 700; font-size: 19px; line-height: 1.1; letter-spacing: .08em; transform: rotate(-14deg) scale(2.4); opacity: 0; pointer-events: none; }
.bp-stamp small { display: block; font-size: 10px; letter-spacing: 0; }
.bp-stamp.r4 { border-color: #c69bff; color: #c69bff; }
.bp.stamped .bp-stamp:not(:empty) { transition: transform .3s cubic-bezier(.5,0,.6,1.4), opacity .2s; transform: rotate(-14deg) scale(1); opacity: .92; }
.bp-name { position: absolute; left: 16px; right: 16px; top: calc(40% + min(43vw, 26vh, 230px) + 12px); text-align: center; display: grid; gap: 2px; opacity: 0; transform: translateY(10px); transition: .4s; color: #fff; }
.bp-name i { font-style: normal; color: var(--c); letter-spacing: .2em; font-size: 16px; }
.bp-name b { font-size: 21px; letter-spacing: .05em; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.bp-name small { font-size: 11.5px; color: rgba(205,232,255,.7); margin-top: 6px; }
.bp.named .bp-name { opacity: 1; transform: none; }
.bp.ten .bp-name, .bp.ten .bp-stamp { display: none; }
.bp-tb { position: absolute; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); width: min(190px, 52vw); border: 1px solid rgba(127,211,255,.5); display: grid; grid-template-columns: auto 1fr; font-family: "Oswald", "Zen Kaku Gothic New", sans-serif; font-size: 10.5px; color: rgba(205,232,255,.9); }
.bp-tb span { padding: 2px 6px; border-bottom: 1px solid rgba(127,211,255,.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-tb span:nth-child(odd) { border-right: 1px solid rgba(127,211,255,.3); color: rgba(205,232,255,.6); }
.bp-tb span:nth-last-child(-n+2) { border-bottom: 0; }
.bp-msg { position: absolute; left: 0; right: 0; top: 40%; text-align: center; margin: 0; color: rgba(205,232,255,.75); font-size: 13px; letter-spacing: .2em; }
.bp-grid { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(92vw, 480px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 6px; }
.bg-c { position: relative; aspect-ratio: .8; border: 1px solid rgba(127,211,255,.3); border-radius: 4px; background: rgba(13,26,46,.6); transition: background .4s, border-color .4s; }
.bg-c canvas { position: absolute; inset: 6%; width: 88%; height: 88%; transition: clip-path .7s ease-in-out; clip-path: inset(0 0 0 0); }
.bg-c .bg-real { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; clip-path: inset(0 0 100% 0); transition: clip-path .7s ease-in-out; }
.bg-c.wait::after { content: "？"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(205,232,255,.45); font-size: 18px; }
.bg-c.real::after { display: none; }
.bg-c.real { background: color-mix(in srgb, var(--cc) 18%, rgba(13,26,46,.8)); border-color: var(--cc); }
.bg-c.real canvas { clip-path: inset(100% 0 0 0); }
.bg-c.real .bg-real { clip-path: inset(0 0 0 0); }
.bg-c i { position: absolute; left: 0; right: 0; bottom: -16px; text-align: center; font-style: normal; font-size: 9px; color: var(--cc); opacity: 0; transition: opacity .3s; }
.bg-c.real i { opacity: 1; }
.bp.ten .bp-tb { opacity: .7; }
.bp-ghost { display: none !important; }
.pc.open .pc-in { transition: none; }
/* 10連：光の線が紙全体をなぞる */
.bp-sweep { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); box-shadow: 0 0 22px 6px var(--c); opacity: 0; pointer-events: none; z-index: 3; }
.bp.ten.real .bp-sweep { animation: bpSweep 1.1s ease-in-out forwards; }
@keyframes bpSweep { 0% { top: 18%; opacity: 1; } 92% { opacity: 1; } 100% { top: 68%; opacity: 0; } }

/* BGM の設定（1.7.0） */
.bgm-set .lbl { display: inline-flex; align-items: center; gap: 6px; }
.bgm-set .lbl .ic, .bgm-set .lbl svg { width: 18px; height: 18px; }
.bgm-vol, .bgm-track { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; }
.bgm-vol input { flex: 1; min-width: 0; accent-color: var(--sk-accent, #d8c3a0); }
.bgm-vol b { width: 2.4em; text-align: right; font-variant-numeric: tabular-nums; }
.bgm-track select { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--sk-card-line, rgba(255,255,255,.12)); background: var(--sk-card, #222); color: var(--sk-text, #f2efe9); font: inherit; }

/* 教科 → ジャンル → 単元 えらび（1.8.0） */
.subj-sheet .sh-head .sc-back { flex: none; }
.sc-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; margin: 4px 0 6px; padding-right: 2px; }
.sc-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--sk-card-line, var(--card-line)); background: var(--sk-card, var(--card)); color: var(--sk-text, inherit); font: inherit; }
.sc-row .sc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sc-row .sc-t b { font-size: 14.5px; }
.sc-row .sc-t small { font-size: 11.5px; color: var(--sk-muted, var(--muted)); }
.sc-bar { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 2px; }
.sc-bar i { display: block; height: 100%; background: var(--sk-accent, #d8c3a0); }
.sc-n { font-size: 12px; color: var(--sk-muted, var(--muted)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-row > .ic:last-child { width: 16px; height: 16px; opacity: .6; }
.sc-resume { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 4px 0 8px; padding-block: 12px; }
.sc-resume small { font-size: 11px; opacity: .8; }

/* 勉強 ⇄ パズル の切りかえ（1.8.2） */
.sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.sheet-foot .link.close { margin: 0; }
.mode-switch { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--sk-card-line, rgba(255,255,255,.14)); background: var(--sk-icon-bg, rgba(255,255,255,.06)); color: var(--sk-text, inherit); text-decoration: none; font-size: 13px; }
.mode-switch .ic { width: 16px; height: 16px; }

/* プロフィール（1.9.0） */
.avatar { display: inline-block; width: 40px; height: 40px; border-radius: 50%; flex: none; }
.avatar svg { width: 100%; height: 100%; display: block; }
.avatar.big { width: 92px; height: 92px; }
.frow .avatar.av, .ac-top .avatar.av { width: 40px; height: 40px; }
.pc-tap { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.pc-tap > .ic:last-child { width: 18px; height: 18px; opacity: .6; flex: none; }
.pc-av { width: 56px; height: 56px; }
.pc-main { flex: 1; min-width: 0; }
.pc-lvs { margin-left: 8px; font-size: 12px; font-weight: 600; opacity: .75; }
.title-chip { display: inline-flex; align-items: center; gap: 4px; margin: 3px 0 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #3a2400; background: linear-gradient(180deg, #f6d27a, #e0a94a); border: 0; }
.title-chip.big { font-size: 13px; padding: 4px 10px 4px 12px; cursor: pointer; }
.title-chip .ic { width: 13px; height: 13px; }
.pf-head { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 20px; background: var(--sk-card, var(--card)); border: 1px solid var(--sk-card-line, var(--card-line)); margin-bottom: 12px; }
.pf-avbtn { position: relative; border: 0; background: none; padding: 0; cursor: pointer; flex: none; }
.pf-av { width: 84px; height: 84px; }
.pf-edit { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--sk-btn-bg, #f2efe9); color: var(--sk-btn-fg, #17171a); }
.pf-edit .ic { width: 15px; height: 15px; }
.pf-who { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.pf-who > b { font-size: 20px; }
.pf-who small { color: var(--sk-muted, var(--muted)); font-size: 12px; }
.pf-sec { margin-top: 18px; }
.pf-sec .sec { display: flex; align-items: center; gap: 6px; }
.pf-sec .sec small { margin-left: auto; font-size: 12px; color: var(--sk-muted, var(--muted)); font-weight: 500; }
.pf-radar { display: grid; place-items: center; color: var(--sk-text, #f2efe9); }
.pf-radar .radar { width: min(100%, 280px); height: auto; }
.pf-list { display: flex; flex-direction: column; gap: 6px; }
.pf-row { display: grid; grid-template-columns: 6.5em 1.6em 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--sk-card, var(--card)); border: 1px solid var(--sk-card-line, var(--card-line)); }
.pf-row b { font-size: 14px; display: flex; flex-direction: column; line-height: 1.25; }
.pf-row b small { font-size: 10px; font-weight: 500; color: var(--sk-muted, var(--muted)); }
.pf-row > small { font-size: 11.5px; color: var(--sk-muted, var(--muted)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-rank { font-weight: 800; text-align: center; font-size: 15px; }
.pf-rank.r-S { color: #f2c14e; } .pf-rank.r-A { color: #f29b6a; } .pf-rank.r-B { color: #8fd3a8; } .pf-rank.r-C { color: #9cc3ff; } .pf-rank.r-D, .pf-rank.r-E { color: var(--sk-muted, var(--muted)); }
.pf-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.pf-bar i { display: block; height: 100%; background: #f2b84b; }
.pf-bar.g i { background: #6cbf8a; }
.pf-note { font-size: 11.5px; color: var(--sk-muted, var(--muted)); margin: 8px 2px 0; }
.pf-titles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pf-t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; font: inherit; color: var(--sk-text, inherit); background: var(--sk-card, var(--card)); border: 1px solid var(--sk-card-line, var(--card-line)); min-width: 0; }
.pf-t b { font-size: 13.5px; }
.pf-t small { font-size: 10.5px; color: var(--sk-muted, var(--muted)); line-height: 1.35; }
.pf-t:not(.got) { opacity: .55; }
.pf-t.got b { color: #f2c14e; }
.pf-t.on { border-color: #f2c14e; box-shadow: inset 0 0 0 1px #f2c14e; }
.av-preview { display: grid; place-items: center; margin: 4px 0 12px; }
.av-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.av-pick { position: relative; border: 2px solid transparent; border-radius: 50%; padding: 2px; background: none; aspect-ratio: 1; }
.av-pick .avatar { width: 100%; height: 100%; }
.av-pick.on { border-color: var(--sk-accent, #d8c3a0); }
.av-pick:disabled .avatar { filter: grayscale(1) brightness(.55); }
.av-lock { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; font-size: 10px; font-weight: 700; color: #fff; }
.av-lock .ic { width: 14px; height: 14px; }
.av-colors { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px 0; }
.av-col { width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; }
.av-col.on { border-color: var(--sk-text, #fff); }
.ac-title { display: block; font-size: 11px; font-weight: 600; color: #f2c14e; }
@media (max-width: 380px) { .pf-row { grid-template-columns: 5.5em 1.4em 1fr auto; } .av-grid { grid-template-columns: repeat(4, 1fr); } }

/* ほかの人のプロフィールを開く（1.9.1） */
.rk-row { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.rk-row .rk-av { width: 34px; height: 34px; }
.rk-row b { display: flex; flex-direction: column; min-width: 0; }
.rk-title { font-size: 10.5px; font-weight: 600; color: #f2c14e; }
.pf-open { cursor: pointer; }
button.pf-open { border: 0; background: none; padding: 0; display: inline-flex; flex: none; }

/* ポイントのランキング（1.9.2） */
.rk-term small { display: block; font-size: 11.5px; opacity: .8; margin-top: 2px; }
.rk-pts { font-size: 17px; font-variant-numeric: tabular-nums; }
.rk-pts small, .rk-pt small { font-size: 11px; margin-left: 2px; font-weight: 600; }
.rk-row span:last-child > small { font-weight: 500; font-size: 11px; color: var(--sk-muted, var(--muted)); }
.rk-mecard .rk-av { width: 40px; height: 40px; }
.rk-mecard b { display: flex; align-items: baseline; gap: 10px; }
.rk-pt { font-size: 18px; color: var(--sk-accent, #d8c3a0); font-variant-numeric: tabular-nums; }

/* ガチャのアイコンの星のまたたき（1.10.0） */
@keyframes avTw { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
.avatar .av-tw { animation: avTw 2.4s ease-in-out infinite; }
.avatar .av-tw:nth-of-type(2n) { animation-delay: -1.2s; }
@media (prefers-reduced-motion: reduce) { .avatar .av-tw { animation: none } }
.av-sub { display: flex; align-items: center; gap: 6px; margin: 16px 0 8px; font-size: 14px; }
.av-sub .ic { width: 16px; height: 16px; color: #e6c068; }
.av-sub small { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--sk-muted, var(--muted)); }
.av-sheet { max-height: 88vh; overflow-y: auto; }
.av-pick.g:disabled .avatar { filter: grayscale(.6) brightness(.5); }
.thumb.avatar-thumb { display: block; width: 100%; height: 100%; }
.thumb.avatar-thumb svg { width: 100%; height: 100%; }
.av-col { box-shadow: 0 0 0 1px rgba(255,255,255,.28); }

/* ガチャ：引いた回数のごほうび（1.10.1） */
.gc-reward { margin: 4px 0 10px; padding: 12px 14px; border-radius: 16px; background: var(--sk-card, var(--card)); border: 1px solid var(--sk-card-line, var(--card-line)); }
.gc-reward:empty { display: none; }
.gr-head { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.gr-head .ic { width: 16px; height: 16px; color: #e6c068; }
.gr-head small { margin-left: auto; color: var(--sk-muted, var(--muted)); font-size: 12px; }
.gr-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 10px 0 6px; }
.gr-it { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.gr-it .avatar { width: 100%; max-width: 48px; height: auto; aspect-ratio: 1; filter: grayscale(.7) brightness(.55); }
.gr-it.got .avatar { filter: none; }
.gr-it.next .avatar { filter: none; opacity: .75; outline: 2px dashed #e6c068; outline-offset: 2px; border-radius: 50%; }
.gr-it i { font-style: normal; font-size: 10.5px; color: var(--sk-muted, var(--muted)); font-variant-numeric: tabular-nums; }
.gr-it.got i { color: #e6c068; }
.gr-next { margin: 2px 0 0; font-size: 12.5px; text-align: center; }
.gr-next b { color: #e6c068; }

/* 勉強｜パズル の切りかえ（1.11.0） */
.solve-wrap { position: relative; }
.mode-toggle { pointer-events: auto; display: flex; padding: 3px; border-radius: 999px; background: var(--sk-panel, rgba(18,18,21,.7)); border: 1px solid var(--sk-panel-line, rgba(255,255,255,.12)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin-bottom: 6px; }
.mode-toggle button { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 0; border-radius: 999px; background: none; color: var(--sk-muted, #bbb); font: 700 12px var(--sk-font, sans-serif); }
.mode-toggle button .ic { width: 14px; height: 14px; }
.mode-toggle button.on { background: var(--sk-btn-bg, #f2efe9); color: var(--sk-btn-fg, #17171a); }
.mt-n { position: absolute; top: -6px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #e86f5a; color: #fff; font: 700 10px/16px sans-serif; font-style: normal; text-align: center; }
/* 下から出る画面の、右上の × */
.sh-head { position: relative; }
.sh-x { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--sk-card-line, rgba(255,255,255,.12)); background: var(--sk-icon-bg, rgba(255,255,255,.06)); color: var(--sk-text, #f2efe9); padding: 0; }
.sh-x .ic { width: 16px; height: 16px; }
.sheet-foot:empty { display: none; }
/* スタディサイドのパズルの回数 */
.pz-tix { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; padding: 10px 12px; margin: 0 0 10px; border-radius: 14px; background: var(--sk-card, var(--card)); border: 1px solid #e6c068; }
.pz-tix .ic { grid-row: span 2; width: 22px; height: 22px; color: #e6c068; }
.pz-tix b { color: #e6c068; font-size: 16px; }
.pz-tix small { color: var(--sk-muted, var(--muted)); font-size: 11.5px; }
.pz-tix.empty { border-color: var(--sk-card-line, var(--card-line)); }

/* 家具を買う：たたんで部屋を見る（1.11.0） */
.sh-fold { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--sk-card-line, rgba(255,255,255,.14)); background: var(--sk-icon-bg, rgba(255,255,255,.06)); color: var(--sk-text, #f2efe9); white-space: nowrap; font: 700 12px var(--sk-font, sans-serif); }
.sh-fold .ic { width: 15px; height: 15px; }
.cand-sheet.folded .candgrid, .cand-sheet.folded .pv-tip, .cand-sheet.folded .sh-head p { display: none; }
.cand-sheet.folded { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.cand-sheet.folded .sh-head { margin-bottom: 8px; }

/* 1.11.1：切りかえは右下のボタンの上に「のせる」（横幅をとらず、左下のボタンを押しつぶさない） */
.hotbar .solve-wrap .mode-toggle { position: absolute; right: 0; bottom: calc(100% + 6px); margin: 0; white-space: nowrap; pointer-events: auto; background: rgba(18, 18, 21, .78); border-color: rgba(255, 255, 255, .14); }
.hotbar .mode-toggle button { padding: 5px 9px; font-size: 11.5px; color: rgba(242, 239, 233, .72); }
.hotbar .mode-toggle button.on { background: #f2efe9; color: #17171a; }
.hotbar .mode-toggle button .ic { width: 13px; height: 13px; }

/* 管理者：補填（1.11.2） */
.comp-form { display: flex; flex-direction: column; gap: 8px; max-height: 62vh; overflow-y: auto; }
.comp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 12px; background: var(--sk-card, var(--card)); border: 1px solid var(--sk-card-line, var(--card-line)); font-size: 14px; }
.comp-row span { display: flex; flex-direction: column; }
.comp-row small { font-size: 11px; color: var(--sk-muted, var(--muted)); }
.comp-row input { width: 76px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--sk-card-line, rgba(255,255,255,.18)); background: rgba(0,0,0,.25); color: inherit; font: inherit; text-align: right; }
.comp-row.col { flex-direction: column; align-items: stretch; }
.comp-row.col input { width: 100%; text-align: left; }
.comp-sum { list-style: none; margin: 8px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.comp-sum li { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--sk-card, var(--card)); }
.comp-sum .ic { width: 16px; height: 16px; color: #e6c068; }
.gb-lv { display: grid; place-items: center; align-content: center; font-weight: 800; font-size: 16px; line-height: 1; }
.gb-lv small { font-size: 9px; }
.sheet.comp-sheet { background: #18181c; backdrop-filter: none; -webkit-backdrop-filter: none; max-height: 92vh; display: flex; flex-direction: column; }
.sheet.comp-sheet .comp-form { max-height: none; flex: 1; min-height: 0; }
/* 管理者：記録を元に戻す（1.12.0） */
.sheet.rs-sheet { background: #18181c; backdrop-filter: none; -webkit-backdrop-filter: none; max-height: 88vh; display: flex; flex-direction: column; }
.rs-list { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 0 8px; min-height: 0; flex: 1; }
.rs-one { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rs-one b { font-size: 14px; }
.rs-one span { font-size: 12.5px; opacity: .75; }
.rs-one:active { background: rgba(230,192,104,.15); }
/* まちがえた問題を解き直す（1.12.0） */
.sc-wrong { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px; margin: 0 0 10px; border-radius: 14px; border: 1px solid rgba(232,120,96,.45); background: rgba(232,120,96,.12); color: var(--sk-text, inherit); font: inherit; cursor: pointer; }
.sc-wrong .sc-wic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(232,120,96,.25); color: #f0a08c; flex: none; }
.sc-wrong .sc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sc-wrong .sc-t b { font-size: 14.5px; }
.sc-wrong .sc-t small { font-size: 12px; opacity: .75; }
.sc-wrong .sc-wn { font-weight: 700; color: #f0a08c; font-size: 14px; }
/* 解説：えらんだ答えがちがう理由・くわしい解説（1.12.0） */
.why-wrong { text-align: left; border-radius: 12px; padding: 10px 12px; background: rgba(232,120,96,.12); border: 1px solid rgba(232,120,96,.35); }
.why-wrong b { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #f0a08c; }
.why-wrong b .ic { width: 15px; height: 15px; flex: none; }
.why-wrong p { margin: 4px 0 0; font-size: 14px; line-height: 1.7; }
.detail-ex { text-align: left; border-radius: 12px; background: rgba(255,255,255,.06); padding: 0 12px; }
.detail-ex summary { display: flex; align-items: center; gap: 6px; padding: 10px 0; font-size: 13.5px; font-weight: 700; cursor: pointer; list-style: none; }
.detail-ex summary::-webkit-details-marker { display: none; }
.detail-ex summary::after { content: '＋'; margin-left: auto; opacity: .6; }
.detail-ex[open] summary::after { content: '－'; }
.detail-ex summary .ic { width: 15px; height: 15px; }
.detail-ex .ex-list { margin: 0 0 10px; }
/* 勉強レポート（1.12.0） */
.report .stats4 div { position: relative; }
.report .stats4 small { font-size: 11px; opacity: .7; }
.report .stats4 small.up { color: #8fd19e; opacity: 1; }
.report .stats4 small.down { color: #f0a08c; opacity: 1; }
.rp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--card); border: 1px solid var(--card-line); margin-bottom: 10px; }
.rp-tabs button { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; padding: 8px; border-radius: 9px; cursor: pointer; opacity: .65; }
.rp-tabs button.on { background: rgba(230,192,104,.18); color: var(--gold1, #e6c068); opacity: 1; }
.rp-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.rp-nav div { display: grid; justify-items: center; }
.rp-nav b { font-size: 17px; }
.rp-nav small { font-size: 12px; opacity: .7; }
.rp-nav button[disabled] { opacity: .25; }
.rp-comment { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(230,192,104,.1); font-size: 14px; line-height: 1.5; }
.rp-comment .ic { color: var(--gold1, #e6c068); flex: none; width: 18px; height: 18px; }
.rp-card { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--card-line); background: var(--card); margin-bottom: 12px; }
.rp-card h3 { margin: 0 0 10px; font-size: 14.5px; display: flex; align-items: baseline; gap: 8px; }
.rp-card h3 small { font-size: 11.5px; font-weight: 500; opacity: .6; }
.rp-card h3.weak { color: #f0a08c; }
.rp-card h3.strong { color: #8fd19e; }
.rp-bars { width: 100%; height: 110px; display: block; }
.rp-bars .bg { fill: rgba(255,255,255,.06); }
.rp-bars .v { fill: var(--gold1, #e6c068); }
.rp-bars .now { fill: #f4d58a; }
.rp-days { display: flex; }
.rp-days span { flex: 1; text-align: center; font-size: 11px; opacity: .6; }
.rp-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.rp-row + .rp-row { border-top: 1px solid rgba(255,255,255,.06); }
.rp-row > b { width: 4.5em; font-size: 13.5px; flex: none; }
.rp-row .ic2 .ic { width: 18px; height: 18px; color: var(--gold1, #e6c068); }
.rp-bar { flex: 1; height: 8px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.rp-bar i { display: block; height: 100%; background: var(--gold1, #e6c068); border-radius: 99px; }
.rp-n { font-weight: 700; font-size: 13.5px; text-align: right; display: grid; min-width: 3.6em; }
.rp-n small { font-weight: 500; font-size: 11px; opacity: .65; }
.rp-rank { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.rp-rank.weak { background: rgba(240,160,140,.18); color: #f0a08c; }
.rp-rank.strong { background: rgba(143,209,158,.18); color: #8fd19e; }
.rp-ut { flex: 1; min-width: 0; display: grid; }
.rp-ut b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-ut small { font-size: 11.5px; opacity: .65; }
.empty.sm { font-size: 12.5px; padding: 6px 0; margin: 0; }
.report .rp-save { margin: 4px 0 8px; }
/* はじめての人の案内（1.12.0） */
.tour { position: fixed; inset: 0; z-index: 9000; }
.tour-hole { position: fixed; box-shadow: 0 0 0 9999px rgba(8,8,12,.72); border: 2px solid #e6c068; pointer-events: none; transition: all .28s ease; }
.tour.center { background: rgba(8,8,12,.72); }
.tour-card { box-sizing: border-box; position: fixed; background: #1d1c23; color: #f4f1ea; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 14px 16px 12px; box-shadow: 0 12px 40px rgba(0,0,0,.45); transition: top .28s, bottom .28s, left .28s; }
.tour.center .tour-card { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(320px, calc(100vw - 32px)); }
.tour-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; opacity: .7; }
.tour-skip { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 4px; }
.tour-title { display: block; font-size: 17px; margin: 4px 0 6px; color: #e6c068; }
.tour-text { margin: 0 0 12px; font-size: 14px; line-height: 1.65; }
.tour-foot { display: flex; justify-content: space-between; align-items: center; }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.25); }
.tour-dots i.on { background: #e6c068; width: 16px; }
.tour-next { min-width: 96px; }
/* 期間限定イベント（1.12.0） */
.round.evbtn { position: relative; color: #bfe3ff; background: radial-gradient(circle at 50% 40%, rgba(120,190,255,.35), rgba(30,40,70,.75)); border-color: rgba(160,210,255,.5); animation: ev-glow 2.6s ease-in-out infinite; }
@keyframes ev-glow { 50% { box-shadow: 0 0 0 4px rgba(150,205,255,.18), 0 0 18px rgba(150,205,255,.45); } }
.sheet.ev-sheet { background: linear-gradient(180deg, #1b2438, #15151c 46%); max-height: 90vh; overflow-y: auto; }
.ev-ic { background: rgba(150,205,255,.18) !important; color: #bfe3ff !important; }
.ev-pv { margin-left: 8px; font-size: 11px; padding: 2px 8px; border-radius: 99px; background: rgba(240,160,140,.2); color: #f0a08c; vertical-align: middle; }
.ev-desc { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; opacity: .85; }
.ev-meter { padding: 12px 14px; border-radius: 16px; background: rgba(150,205,255,.08); border: 1px solid rgba(150,205,255,.2); margin-bottom: 12px; }
.ev-num { display: flex; align-items: baseline; gap: 6px; }
.ev-num b { font-size: 30px; color: #dff1ff; }
.ev-num span { font-size: 13px; opacity: .8; }
.ev-bar { position: relative; height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); margin: 8px 0 8px; }
.ev-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #8fc9ff, #e6f4ff); }
.ev-tick { position: absolute; top: -3px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: rgba(255,255,255,.25); }
.ev-tick.on { background: #ffd76a; }
.ev-meter small { font-size: 11.5px; opacity: .7; line-height: 1.5; display: block; }
.ev-list { display: flex; flex-direction: column; gap: 6px; }
.ev-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
.ev-row.can { border-color: rgba(255,215,106,.55); background: rgba(255,215,106,.1); }
.ev-row.got { opacity: .55; }
.ev-at { width: 40px; flex: none; text-align: center; font-weight: 800; color: #bfe3ff; font-size: 14px; }
.ev-row .thumb, .ev-row .gb-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.06); }
.ev-row .thumb img, .ev-row .thumb canvas { width: 100%; height: 100%; object-fit: contain; }
.ev-nm { flex: 1; min-width: 0; display: grid; }
.ev-nm b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-nm small { font-size: 11px; color: #ffd76a; }
.ev-st { font-size: 12px; opacity: .75; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.ev-st .ic { width: 14px; height: 14px; }
.ev-row .ev-tk > * { width: 40px !important; height: auto !important; max-height: 30px; }
.ev-row .ev-tk svg { width: 40px; height: 26px; }
.ev-claim { white-space: nowrap; flex: none; }
/* 模様がえ：矢印で少しずつ動かす・置いている家具の一覧（1.12.0） */
.nudge { position: absolute; right: 12px; top: calc(var(--safe-t, 0px) + 178px); z-index: 5; display: grid; grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(3, 42px); gap: 4px; padding: 6px; border-radius: 18px; background: rgba(24,20,16,.82); border: 1px solid var(--card-line); backdrop-filter: blur(10px); touch-action: none; user-select: none; -webkit-user-select: none; }
.nudge button { border: 0; border-radius: 12px; background: rgba(255,255,255,.1); color: #f4f1ea; display: grid; place-items: center; touch-action: none; }
.nudge button:active { background: rgba(230,192,104,.35); }
.nudge button .ic { width: 20px; height: 20px; }
.nudge [data-d="0,1"] { grid-area: 1 / 2; } .nudge [data-d="0,1"] .ic { transform: rotate(-90deg); }
.nudge [data-d="-1,0"] { grid-area: 2 / 1; } .nudge [data-d="-1,0"] .ic { transform: rotate(180deg); }
.nudge .ng-c { grid-area: 2 / 2; display: grid; place-items: center; opacity: .45; }
.nudge .ng-c .ic { width: 18px; height: 18px; }
.nudge [data-d="1,0"] { grid-area: 2 / 3; }
.nudge [data-d="0,-1"] { grid-area: 3 / 2; } .nudge [data-d="0,-1"] .ic { transform: rotate(90deg); }
.pl-sheet .pl-list h4 { margin: 12px 0 6px; font-size: 13px; display: flex; gap: 6px; align-items: baseline; opacity: .85; }
.pl-sheet .pl-list h4 small { font-size: 11px; opacity: .6; }
.pl-sheet .pl-item.on { border-color: #e6c068; }
/* 提供割合：家具ごとの確率（1.12.0） */
.sheet.rates-sheet { max-height: 88vh; overflow-y: auto; }
.odds-h { margin: 12px 0 6px; font-size: 13.5px; }
.odds { display: flex; flex-direction: column; }
.odds-g { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 2px 4px; border-bottom: 1px solid rgba(255,255,255,.12); }
.odds-g b { color: var(--gold1, #e6c068); }
.odds-g small { font-size: 11.5px; opacity: .7; }
.odds-r { display: flex; justify-content: space-between; gap: 10px; padding: 5px 2px; font-size: 12.5px; border-bottom: 1px solid rgba(255,255,255,.05); }
.odds-r span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odds-r i { font-style: normal; font-size: 10.5px; margin-left: 6px; padding: 1px 6px; border-radius: 99px; background: rgba(230,192,104,.18); color: #e6c068; }
.odds-r b { font-variant-numeric: tabular-nums; flex: none; }
/* 通報・ブロック・復元コード・エラーの記録など（1.12.0） */
.pf-safety { display: flex; justify-content: center; gap: 18px; margin: 18px 0 8px; }
.pf-safety .link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; opacity: .7; }
.pf-safety .ic { width: 15px; height: 15px; }
.rp-reasons { display: grid; gap: 6px; margin: 4px 0 10px; }
.rp-reasons label { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 14px; }
.rp-detail { width: 100%; box-sizing: border-box; min-height: 70px; font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--card-line); background: rgba(0,0,0,.25); color: inherit; margin-bottom: 10px; }
.pr-report { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; opacity: .6; margin: 2px auto 0; }
.pr-report .ic { width: 13px; height: 13px; }
.rc-code { font: 800 26px/1.3 ui-monospace, Menlo, monospace; letter-spacing: .08em; text-align: center; padding: 16px; margin: 6px 0 10px; border-radius: 14px; background: rgba(230,192,104,.12); border: 1px dashed rgba(230,192,104,.6); color: #f4d58a; user-select: all; }
.settings .val.warn { color: #f0a08c; }
.bl-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,.06); }
.pr-form, .pr-sheet form { display: grid; gap: 10px; }
.pr-form label { display: grid; gap: 4px; font-size: 13px; }
.pr-form input { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--card-line); background: rgba(0,0,0,.25); color: inherit; }
.login .forgot { margin-top: 2px; font-size: 13px; opacity: .75; }
.login .agree { font-size: 12px; }
.login .agree a { color: var(--gold1, #e6c068); }
.er-row { border-bottom: 1px solid rgba(255,255,255,.07); padding: 8px 2px; }
.er-row summary { cursor: pointer; display: grid; gap: 2px; }
.er-row summary b { font-size: 13px; word-break: break-all; }
.er-row summary small { font-size: 11px; opacity: .65; }
.er-row pre { white-space: pre-wrap; word-break: break-all; font-size: 10.5px; opacity: .75; margin: 6px 0 0; }
.sheet.er-sheet { max-height: 88vh; overflow-y: auto; }
/* 集中モード：操作の途中は、関係ない物をかくす（1.12.0） */
body.focus .tabbar, body.focus .home > header.hud, body.focus .side-tools, body.focus .mode-toggle, body.focus .hint, body.focus .dock { display: none !important; }
body.focus .editbar { bottom: 0; padding-bottom: calc(10px + var(--safe-b, 0px)); gap: 6px; }
body.focus .editbar .eb-view { margin: 0 0 4px; }
body.focus .float-bar { top: calc(var(--safe-t, 0px) + 12px); }
body.focus .nudge { top: calc(var(--safe-t, 0px) + 72px); }
/* 設定の中のリンク（利用規約など）は、ほかの行と同じ見た目に */
a.row-item { color: inherit; text-decoration: none; display: flex; align-items: center; }
a.row-item .lbl { flex: 1; }