/* ============================================================
   投扇興 〜扇、ひとひら舞う〜  style
   漆黒の座敷 / 緋毛氈 / 金箔
   ============================================================ */
:root {
  --lacquer: #161013;      /* 漆黒 */
  --lacquer-2: #221a1c;
  --washi: #f2e6cf;        /* 和紙 */
  --washi-dim: #cdbfa4;
  --gold: #c9a24b;         /* 金 */
  --gold-bright: #eecf7d;
  --shu: #b3341f;          /* 朱 */
  --shu-deep: #7a1420;     /* 緋毛氈 */
  --sumi: #2a231f;
  --serif: "Shippori Mincho B1", serif;
  --brush: "Yuji Syuku", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--lacquer);
  color: var(--washi);
  font-family: var(--serif);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#app {
  position: fixed;
  inset: 0;
  touch-action: none;
  overflow: hidden;
}

#gl, #trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#trail { pointer-events: none; z-index: 2; }

#input-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.hidden { display: none !important; }

/* ---------- レティクル ---------- */
#reticle {
  position: absolute;
  z-index: 4;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  color: var(--gold-bright);
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(238, 207, 125, .45));
  transition: color .2s;
}
#reticle.lock { color: var(--shu); }

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  z-index: 5;
  top: 0; left: 0; right: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  pointer-events: none;
  background: linear-gradient(rgba(12, 8, 10, .55), transparent);
}
#hud-throw {
  font-size: 15px;
  letter-spacing: .35em;
  color: var(--washi-dim);
}
#hud-score {
  font-size: 17px;
  letter-spacing: .2em;
  color: var(--gold-bright);
  margin-left: auto;
  margin-right: 14px;
}
#btn-menu {
  pointer-events: auto;
  background: none;
  border: 1px solid rgba(242, 230, 207, .35);
  color: var(--washi-dim);
  width: 30px; height: 30px;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1;
  font-family: var(--serif);
}

/* ---------- フェーズ案内 ---------- */
#phase-guide {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 108px);
  text-align: center;
  font-size: 13px;
  letter-spacing: .16em;
  padding: 0 10px;
  color: var(--washi-dim);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  pointer-events: none;
  animation: guide-in .6s ease both;
}
@keyframes guide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

#btn-aim-ok {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .4em;
  text-indent: .4em;
  padding: 13px 34px;
  color: var(--lacquer);
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  border: none;
  border-radius: 3px;
  box-shadow: 0 2px 14px rgba(201, 162, 75, .4);
}
#btn-aim-ok:active { transform: translateX(-50%) scale(.96); }

/* ---------- 銘の短冊 ---------- */
#mei-card {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(10, 6, 8, .25), rgba(10, 6, 8, .72));
  animation: card-bg-in .4s ease both;
}
@keyframes card-bg-in { from { opacity: 0; } to { opacity: 1; } }

.tanzaku {
  writing-mode: vertical-rl;
  background:
    linear-gradient(rgba(201,162,75,.10), rgba(201,162,75,0) 30%),
    linear-gradient(165deg, #f7ecd8, #ead9b8);
  color: #241a10;
  padding: 30px 26px;
  height: min(66vh, 480px);
  border: 1px solid rgba(122, 20, 32, .25);
  box-shadow:
    0 0 0 4px rgba(247, 236, 216, .08),
    0 12px 40px rgba(0, 0, 0, .7);
  animation: tanzaku-in .55s cubic-bezier(.2, 1.4, .4, 1) both .15s;
}
.tanzaku > div { margin-left: 12px; }
.tanzaku > div:last-child { margin-left: 0; }
@keyframes tanzaku-in {
  from { opacity: 0; transform: translateY(-26px) rotate(2deg); }
  to   { opacity: 1; transform: none; }
}
#mei-name {
  font-family: var(--brush);
  font-size: clamp(38px, 11vw, 54px);
  letter-spacing: .18em;
  color: #1d1409;
}
#mei-yomi {
  font-size: 12px;
  letter-spacing: .5em;
  color: #6d5b3e;
}
#mei-desc {
  font-size: 14px;
  letter-spacing: .28em;
  color: #45362a;
  padding-top: 24px;
}
#mei-points {
  font-family: var(--brush);
  font-size: clamp(24px, 7vw, 34px);
  letter-spacing: .2em;
  color: var(--shu-deep);
  padding-top: 46px;
}
#mei-points.plus { color: var(--shu-deep); }
#mei-points.zero { color: #7c6f5a; }
#mei-points.minus { color: #26456e; }

/* ---------- 画面共通（タイトル・結果） ---------- */
#screen-title, #screen-result {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 40px) 24px calc(env(safe-area-inset-bottom, 0px) + 14px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(22, 16, 19, .1), rgba(22, 16, 19, .82) 75%),
    linear-gradient(rgba(22, 16, 19, .25), rgba(22, 16, 19, .55));
}

.title-tate {
  writing-mode: vertical-rl;
  align-self: center;
  margin-top: 4vh;
  display: flex;
  gap: 18px;
  animation: guide-in 1.1s ease both;
}
.title-tate h1 {
  font-family: var(--brush);
  font-weight: 400;
  color: var(--washi);
  text-shadow:
    0 0 26px rgba(238, 207, 125, .28),
    0 3px 10px rgba(0, 0, 0, .8);
}
.title-tate h1 .pre {
  display: block;
  font-size: clamp(17px, 5vw, 24px);
  letter-spacing: .42em;
  color: var(--gold-bright);
  margin-left: 10px;
  padding-top: 8px;
}
.title-tate h1 .main {
  display: block;
  font-size: clamp(64px, 21vw, 110px);
  letter-spacing: .22em;
}
#btn-lang {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 16px;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .08em;
  padding: 7px 14px;
  color: var(--washi-dim);
  background: rgba(242, 230, 207, .05);
  border: 1px solid rgba(201, 162, 75, .4);
  border-radius: 3px;
}
html.en #result-best.new::before { content: "New Best "; }

/* 英語モードの短冊：漢字の銘は残しつつ横組みで読みやすく */
html.en .tanzaku {
  writing-mode: horizontal-tb;
  height: auto;
  min-height: 0;
  max-width: min(340px, 86vw);
  padding: 28px 30px;
}
html.en .tanzaku > div { margin-left: 0; }
html.en #mei-yomi { letter-spacing: .18em; margin-top: 6px; }
html.en #mei-desc { padding-top: 16px; letter-spacing: .03em; line-height: 1.8; }
html.en #mei-points { padding-top: 18px; }

.title-nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  width: 100%;
  animation: guide-in .9s ease both .25s;
}
.title-nav .row { display: flex; gap: 12px; }

.btn-main {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: .5em;
  text-indent: .5em;
  padding: 15px 52px;
  color: var(--lacquer);
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  border: none;
  border-radius: 3px;
  box-shadow: 0 2px 18px rgba(201, 162, 75, .35);
}
.btn-main:active { transform: scale(.96); }

.btn-sub {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .25em;
  text-indent: .25em;
  padding: 11px 22px;
  color: var(--washi);
  background: rgba(242, 230, 207, .06);
  border: 1px solid rgba(201, 162, 75, .55);
  border-radius: 3px;
}
.btn-sub:active { transform: scale(.96); }

.credit {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--washi-dim);
  opacity: .8;
}
.credit a { color: var(--gold); text-decoration: none; }

/* ---------- 結果 ---------- */
#screen-result { justify-content: flex-start; gap: 10px; overflow-y: auto; overflow-x: hidden; }
.result-label {
  font-size: 13px;
  letter-spacing: .6em;
  text-indent: .6em;
  color: var(--washi-dim);
  margin-bottom: 2px;
}
#result-total {
  font-family: var(--brush);
  font-size: clamp(40px, 13vw, 62px);
  color: var(--gold-bright);
  letter-spacing: .1em;
  text-shadow: 0 0 24px rgba(238, 207, 125, .3);
}
#result-rank {
  font-family: var(--brush);
  font-size: 26px;
  letter-spacing: .3em;
  color: var(--washi);
}
#result-comment {
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--washi-dim);
  text-align: center;
  line-height: 2;
}
#result-best {
  font-size: 12px;
  letter-spacing: .25em;
  color: var(--gold);
}
#result-best.new::before { content: "新記録 "; color: var(--shu); }
#result-list {
  list-style: none;
  width: min(320px, 86vw);
  max-height: 24vh;
  overflow-y: auto;
  border-top: 1px solid rgba(201, 162, 75, .3);
  border-bottom: 1px solid rgba(201, 162, 75, .3);
  padding: 6px 4px;
}
#result-list li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: .15em;
  padding: 3px 6px;
  color: var(--washi-dim);
}
#result-list li b { color: var(--washi); font-weight: 500; }
#result-list li span.pt { color: var(--gold-bright); }
#result-list li span.pt.minus { color: #7f9cc4; }

/* 関連商品（横スクロールの短冊カード） */
#related { width: min(360px, 94vw); margin-top: 6px; }
#related h2 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .5em;
  text-indent: .5em;
  text-align: center;
  color: var(--washi-dim);
  margin-bottom: 6px;
}
.related-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 2px 2px 6px;
}
.related-row a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--washi);
  background: rgba(242, 230, 207, .05);
  border: 1px solid rgba(201, 162, 75, .35);
  border-radius: 3px;
  padding: 5px;
  height: 100%;
}
.related-row a:active { transform: scale(.96); }
.related-row img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  border-radius: 2px;
}
.related-row span {
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .03em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.related-note {
  font-size: 9px;
  color: var(--washi-dim);
  opacity: .6;
  text-align: center;
  margin-top: 2px;
}

/* 広告枠：中身が挿入されるまで畳んでおく */
#ad-slot {
  width: min(336px, 92vw);
  min-height: 0;
  margin-top: 4px;
}
#ad-slot:not(:empty) {
  min-height: 60px;
  background: rgba(242, 230, 207, .04);
  border: 1px dashed rgba(201, 162, 75, .25);
  border-radius: 3px;
}

/* ---------- モーダル ---------- */
.modal {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 6, 8, .7);
  padding: 20px;
}
.modal-inner {
  background: linear-gradient(170deg, var(--lacquer-2), var(--lacquer));
  border: 1px solid rgba(201, 162, 75, .5);
  border-radius: 4px;
  padding: 26px 22px calc(env(safe-area-inset-bottom, 0px) + 20px);
  width: min(420px, 94vw);
  max-height: 84vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .8);
  animation: guide-in .35s ease both;
}
.modal-inner h2 {
  font-family: var(--brush);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: .5em;
  color: var(--gold-bright);
  text-align: center;
}
.modal-note {
  font-size: 12px;
  letter-spacing: .12em;
  line-height: 1.9;
  color: var(--washi-dim);
}
#mei-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
#mei-table tr { border-bottom: 1px solid rgba(201, 162, 75, .16); }
#mei-table td { padding: 7px 4px; letter-spacing: .1em; vertical-align: top; }
#mei-table td.n { color: var(--washi); font-weight: 500; }
#mei-table td.n .d { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; }
#mei-table td.n small { display: block; color: var(--washi-dim); font-weight: 400; margin-top: 2px; font-size: 10px; }
#mei-table td.p { white-space: nowrap; text-align: right; color: var(--gold-bright); }
#mei-table td.p.minus { color: #7f9cc4; }
#mei-table td.d { color: var(--washi-dim); line-height: 1.7; }
#tips-list {
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .08em;
  color: var(--washi-dim);
}
#tips-list b { color: var(--washi); }
.menu-col { display: flex; flex-direction: column; gap: 10px; }
.btn-close { margin-top: 4px; }

/* ---------- 演出 ---------- */
#flash {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(238, 207, 125, .55), transparent 65%);
  opacity: 0;
}
#flash.on { animation: flash-anim .5s ease-out both; }
@keyframes flash-anim { from { opacity: .9; } to { opacity: 0; } }

/* ---------- 銘定表の絵・見本表示 ---------- */
#mei-table tr { cursor: pointer; }
#mei-table tr:active { background: rgba(201, 162, 75, .1); }
#mei-table td.t { width: 64px; padding-right: 8px; }
#mei-table td.t img {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid rgba(201, 162, 75, .35);
  background: var(--lacquer-2);
}
/* 見本表示中は短冊を下へ寄せ、座敷の配置を見せる */
#mei-card.pose {
  align-items: flex-end;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent 45%, rgba(10, 6, 8, .65));
}
/* 縦長の短冊は座敷を隠すので、見本表示では横組みの小さな札にする */
#mei-card.pose .tanzaku {
  writing-mode: horizontal-tb;
  height: auto;
  width: min(330px, 90vw);
  padding: 14px 18px;
  text-align: center;
}
#mei-card.pose .tanzaku > div { margin: 0 0 4px; }
#mei-card.pose #mei-name { font-size: 34px; }
#mei-card.pose::after {
  content: attr(data-hint);
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--washi-dim);
}

/* ---------- 伝える画面（スクショ前提） ---------- */
#btn-card-share {
  position: absolute;
  bottom: max(7vh, calc(env(safe-area-inset-bottom) + 24px));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(22, 16, 19, .7);
  border-color: var(--gold);
  color: var(--gold-bright);
  white-space: nowrap;
}
#share-view {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: max(26px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(14, 9, 11, .82), rgba(14, 9, 11, .35) 34%, transparent 48%),
    linear-gradient(to top, rgba(14, 9, 11, .8), transparent 26%);
  animation: card-bg-in .5s ease both;
}
#share-view .sv-frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(238, 207, 125, .55);
  box-shadow: inset 0 0 0 3px rgba(22, 16, 19, .6), inset 0 0 0 4px rgba(201, 162, 75, .35);
  border-radius: 4px;
}
#share-view.rare .sv-frame {
  border: 2px solid var(--gold-bright);
  box-shadow: inset 0 0 26px rgba(238, 207, 125, .35), 0 0 18px rgba(238, 207, 125, .25);
}
.sv-head, .sv-foot { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sv-title {
  font-family: var(--brush);
  font-size: 15px;
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--washi-dim);
}
#sv-mei {
  font-family: var(--brush);
  font-size: clamp(58px, 19vw, 92px);
  line-height: 1.15;
  letter-spacing: .12em;
  text-indent: .12em;
  color: var(--washi);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .8);
  margin-top: 6px;
}
#share-view.rare #sv-mei {
  background: linear-gradient(170deg, #fffdf2 5%, #ffeeb5 38%, #f3d68a 68%, #e2bd66 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none; /* 影が金のグラデーションの上に描かれて濁るので消す（影は filter で付ける） */
  filter: drop-shadow(0 0 14px rgba(238, 207, 125, .55)) drop-shadow(0 3px 6px rgba(0, 0, 0, .8));
  animation: sv-shine 2.4s ease-in-out infinite alternate;
}
@keyframes sv-shine { from { filter: drop-shadow(0 0 8px rgba(238, 207, 125, .4)) drop-shadow(0 3px 6px rgba(0,0,0,.8)); } to { filter: drop-shadow(0 0 22px rgba(238, 207, 125, .8)) drop-shadow(0 3px 6px rgba(0,0,0,.8)); } }
#sv-yomi { font-size: 13px; letter-spacing: .4em; text-indent: .4em; color: var(--washi-dim); }
#sv-pts {
  font-family: var(--brush);
  font-size: clamp(34px, 11vw, 52px);
  letter-spacing: .15em;
  text-indent: .15em;
  margin-top: 4px;
  color: var(--gold-bright);
  text-shadow: 0 0 16px rgba(238, 207, 125, .45), 0 2px 6px rgba(0, 0, 0, .9);
}
#sv-pts.zero { color: var(--washi-dim); text-shadow: 0 2px 6px rgba(0,0,0,.9); }
#sv-pts.minus { color: #9db6dc; text-shadow: 0 2px 6px rgba(0,0,0,.9); }
#sv-desc { font-size: 13px; letter-spacing: .25em; text-indent: .25em; color: var(--washi); margin-top: 6px; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
#sv-total { font-size: 14px; letter-spacing: .25em; text-indent: .25em; color: var(--gold-bright); text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.sv-brand { width: 150px; height: auto; margin-top: 8px; opacity: .92; filter: drop-shadow(0 1px 4px rgba(0,0,0,.8)); }
#sv-hint { font-size: 11px; letter-spacing: .15em; color: var(--washi-dim); margin: 12px 0 8px; }
.sv-foot .row { display: flex; gap: 10px; pointer-events: auto; }

/* sin1's studio ロゴ（タイトル・結果の下） */
.credit .brand-logo { display: block; width: 132px; height: auto; opacity: .85; }

/* 結果画面：上から順にじっくり出す（visibility も一緒に動かし、出るまではタップできない） */
#screen-result.reveal > * { animation: sr-rise 1.1s ease-out both; animation-delay: var(--d, 0s); }
@keyframes sr-rise {
  from { opacity: 0; transform: translateY(10px); visibility: hidden; }
  to   { opacity: 1; transform: none; visibility: visible; }
}

/* 伝える画面のボタン：画像付きで共有（主）／Xでポスト／戻る */
.sv-foot .row { align-items: stretch; }
.sv-foot .row .btn-sub { padding: 10px 14px; letter-spacing: .15em; text-indent: .15em; background: rgba(22,16,19,.72); }
#btn-sv-share {
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15;
  font-size: 19px; color: #241a10; border-color: var(--gold-bright);
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)) !important;
  box-shadow: 0 0 14px rgba(238,207,125,.35);
}
#btn-sv-share small { font-size: 10px; letter-spacing: .2em; text-indent: .2em; }
#btn-sv-back { padding: 10px 12px !important; }

/* 銘定表：コツと出現率（参考値） */
#mei-table td.n .tip { display: block; margin-top: 5px; font-size: 11px; font-weight: 400; line-height: 1.6; color: var(--washi-dim); letter-spacing: .05em; }
#mei-table td.n .rate { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 400; color: var(--gold); letter-spacing: .05em; }

/* 月間番付 */
#rank-submit { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; width: min(92vw, 360px); }
#rank-submit.hidden { display: none; }
#rank-name { flex: 1 1 150px; min-width: 0; padding: 9px 10px; font: inherit; font-size: 15px; color: var(--washi);
  background: rgba(22,16,19,.72); border: 1px solid rgba(201,162,75,.5); border-radius: 2px; }
#btn-rank-send { padding: 9px 14px; }
#rank-msg { flex-basis: 100%; margin: 0; min-height: 1.2em; text-align: center; font-size: 12px; color: var(--washi-dim); }
#rank-list { list-style: none; margin: 4px 0 8px; padding: 0; }
#rank-list li { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 2px 8px; align-items: center;
  padding: 8px 2px; border-bottom: 1px solid rgba(201,162,75,.16); }
#rank-list .no { color: var(--gold-bright); text-align: center; }
#rank-list .nm { color: var(--washi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rank-list .tt { color: var(--gold-bright); white-space: nowrap; text-align: right; }
#rank-list .mm { grid-column: 2 / 3; font-size: 11px; color: var(--washi-dim); }
#rank-list .ck { font-size: 11px; color: var(--washi-dim); }
#rank-list .ck.ok { color: #9fc38f; }
#rank-list .ck.ng { color: #d98b7a; }
#rank-list button { grid-column: 3 / 4; padding: 4px 10px; font-size: 12px; }
#rank-list li.more { display: block; padding: 0 0 4px 2.6em; border: 0; }
#rank-list li.more button.btn-more { all: unset; cursor: pointer; font-size: 11px; color: var(--washi-dim); }
#rank-list li.sub { opacity: .85; padding-left: 0; }
#rank-list li.sub.hidden { display: none; }
#rank-list .empty { display: block; text-align: center; color: var(--washi-dim); border: 0; }

/* 版（表座敷の右下に小さく。押すと更新内容のブログへ） */
#app-ver { position: absolute; right: 12px; bottom: 10px; font-size: 10px; letter-spacing: .08em; color: var(--washi-dim); opacity: .6; text-decoration: none; }

/* 投げた後の札：上半分に横組みで出し、下半分で座敷が回って形を見せる */
#mei-card.top {
  align-items: flex-start;
  padding-top: calc(max(12px, env(safe-area-inset-top)) + 46px);
  background: linear-gradient(to bottom, rgba(10, 6, 8, .72), rgba(10, 6, 8, .25) 42%, transparent 55%);
}
#mei-card.top .tanzaku {
  writing-mode: horizontal-tb;
  height: auto;
  width: min(330px, 88vw);
  padding: 16px 18px 14px;
  text-align: center;
}
#mei-card.top .tanzaku > div { margin: 0 0 4px; }
#mei-card.top #mei-name { font-size: clamp(34px, 10vw, 44px); }
#mei-card.top #mei-desc { padding-top: 6px; }
#mei-card.top #mei-points { padding-top: 8px; }