:root {
  --en: #7a1f2b;
  --en-dark: #561520;
  --gold: #c9a227;
  --gold-soft: #e3c86a;
  --kinari: #f6efdc;
  --sumi: #1d1a17;
  --tatami: #b3ab72;
  --tatami-dark: #9d955d;
  --ai: #2b5da8;
  --midori: #2f7a3a;
  --cha: #8a5a14;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(60, 50, 10, .07) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, var(--tatami), var(--tatami-dark));
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  color: var(--sumi);
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}

#stage {
  position: absolute; left: 0; top: 0; width: 720px; height: 1280px;
  transform-origin: 0 0; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(70, 60, 10, .09) 0 2px, transparent 2px 6px),
    radial-gradient(ellipse at 50% 40%, rgba(255, 250, 200, .25), transparent 70%),
    linear-gradient(180deg, #bdb57a, #a39b61);
  box-shadow: 0 0 0 6px var(--en), 0 0 0 8px var(--gold);
}

#screen, #fx, #modal { position: absolute; inset: 0; }
#fx { pointer-events: none; z-index: 50; }
#modal { z-index: 80; pointer-events: none; }
#modal.on { pointer-events: auto; background: rgba(20, 10, 5, .55); }

.scr { position: absolute; inset: 0; }
.scr.scr-img-bg { background-size: cover; background-position: center; background-repeat: no-repeat; }

button { font-family: inherit; cursor: pointer; }

.btn {
  min-height: 64px; min-width: 120px; padding: 10px 26px; border-radius: 12px;
  font-size: 30px; font-weight: 700; letter-spacing: .06em;
  border: 3px solid var(--gold); color: var(--kinari);
  background: linear-gradient(180deg, #933042, var(--en) 55%, var(--en-dark));
  box-shadow: 0 5px 0 #3b0e16, 0 8px 18px rgba(0, 0, 0, .35);
  transition: transform .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #3b0e16; }
.btn.sub { background: linear-gradient(180deg, #fbf5e4, #e9dfc2); color: var(--en); }
.btn.small { min-height: 48px; min-width: 88px; font-size: 24px; padding: 6px 14px; }
.btn.big { font-size: 40px; min-height: 92px; min-width: 340px; }
.btn[disabled] { opacity: .45; }

.topbar {
  position: absolute; left: 0; right: 0; top: 0; height: 84px; display: flex; align-items: center; gap: 14px;
  padding: 0 16px; background: linear-gradient(180deg, var(--en), var(--en-dark));
  border-bottom: 4px solid var(--gold); color: var(--kinari); z-index: 5;
}
.topbar h2 { margin: 0; font-size: 34px; letter-spacing: .1em; flex: 1; text-align: center; }
.topbar .btn { font-size: 24px; min-height: 52px; min-width: 104px; padding: 4px 12px; }

/* ---------- タイトル ---------- */
.title .heri { position: absolute; left: 0; right: 0; height: 40px; background:
  repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 22px) center / 100% 10px no-repeat,
  linear-gradient(180deg, var(--en), var(--en-dark)); }
.title .heri.top { top: 0; } .title .heri.bottom { bottom: 0; }
.title-card {
  position: absolute; left: 160px; top: 190px; width: 400px; height: 640px; border-radius: 10px;
  background: linear-gradient(160deg, #fffaf0, var(--kinari) 60%, #eadfc0);
  border: 10px solid var(--gold); box-shadow: 0 0 0 4px var(--en), 0 24px 40px rgba(0, 0, 0, .4);
  display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 18px;
  animation: floatCard 4s ease-in-out infinite;
}
.title-main { writing-mode: vertical-rl; font-size: 96px; font-weight: 900; letter-spacing: .12em; color: var(--sumi); }
.title-sub { writing-mode: vertical-rl; font-size: 26px; color: var(--en); letter-spacing: .12em; max-height: 560px; }
.title-start { position: absolute; left: 0; right: 0; top: 900px; display: flex; justify-content: center; }
.title-note { position: absolute; left: 0; right: 0; top: 1040px; text-align: center; font-size: 24px; color: var(--kinari); text-shadow: 0 2px 3px #000; z-index: 3; background: rgba(40,20,10,.55); padding: 8px 0; }
.dummy-note { position: absolute; left: 20px; right: 20px; bottom: 60px; text-align: center; font-size: 22px; color: #fff; background: rgba(122, 31, 43, .85); padding: 6px; border-radius: 8px; }
@keyframes floatCard { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
.falling { position: absolute; inset: 0; overflow: hidden; }
.fall-card {
  position: absolute; top: -140px; width: 70px; height: 96px; border-radius: 3px;
  background: var(--kinari); border: 3px solid var(--gold); box-shadow: 0 6px 10px rgba(0, 0, 0, .3);
  writing-mode: vertical-rl; font-size: 22px; display: flex; align-items: center; justify-content: center; color: var(--sumi);
  animation: fall linear infinite;
}
@keyframes fall { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(1480px) rotate(540deg); } }

/* ---------- メニュー ---------- */
.menu-list { position: absolute; left: 0; right: 0; top: 84px; bottom: 0; overflow-y: auto; padding: 18px 26px 40px; display: flex; flex-direction: column; gap: 14px; }
.mode-card {
  display: flex; align-items: center; gap: 18px; text-align: left; width: 100%; min-height: 108px; padding: 12px 18px;
  border-radius: 10px; border: 3px solid var(--gold); background: linear-gradient(180deg, #fffaf0, var(--kinari));
  box-shadow: 0 5px 0 #8f7a3c, 0 8px 14px rgba(0, 0, 0, .25); color: var(--sumi);
}
.mode-card:active { transform: translateY(3px); }
.mode-card .num { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--en); color: var(--kinari); font-size: 32px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 3px solid var(--gold); }
.mode-card .mode-icon { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.mode-card .txt { flex: 1; }
.mode-card .t { font-size: 32px; font-weight: 900; }
.mode-card .d { font-size: 22px; color: #4b3d2a; margin-top: 4px; }
.mode-card .n { flex: none; font-size: 22px; color: var(--en); font-weight: 700; border: 2px solid var(--en); border-radius: 8px; padding: 4px 8px; }

/* ---------- セットアップ ---------- */
.setup-body { position: absolute; left: 0; right: 0; top: 84px; bottom: 150px; overflow-y: auto; padding: 18px 26px; }
.setup-desc { font-size: 24px; line-height: 1.6; background: rgba(255, 250, 235, .88); border-radius: 10px; padding: 12px 16px; border: 2px solid var(--gold); margin-bottom: 16px; }
.opt { margin-bottom: 16px; }
.opt-label { font-size: 26px; font-weight: 900; color: var(--kinari); text-shadow: 0 2px 2px rgba(0, 0, 0, .6); margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  min-height: 56px; min-width: 96px; padding: 6px 16px; font-size: 26px; font-weight: 700; border-radius: 10px;
  border: 3px solid var(--gold); background: var(--kinari); color: var(--en);
}
.chip.on { background: var(--en); color: var(--kinari); box-shadow: inset 0 0 0 3px var(--gold-soft); }
.setup-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, transparent, rgba(40, 20, 10, .35)); }
.seat-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 26px; color: var(--kinari); text-shadow: 0 2px 2px rgba(0, 0, 0, .6); }

/* ---------- 札 ---------- */
.fuda {
  position: absolute; border-radius: 3px; background: linear-gradient(170deg, #fffbee, var(--kinari) 55%, #ece2c4);
  border: 2px solid var(--gold); box-shadow: 0 3px 5px rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer;
  transition: left .35s ease, top .35s ease, transform .35s ease, opacity .3s;
  touch-action: none;
}
.fuda-txt { writing-mode: vertical-rl; white-space: pre; line-height: 1.12; font-weight: 700; color: var(--sumi); letter-spacing: .02em; pointer-events: none; }
.fuda.wood {
  border-radius: 9px; border: 2px solid #5b3a1a;
  background:
    repeating-linear-gradient(95deg, rgba(90, 50, 15, .18) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(88deg, rgba(255, 230, 180, .15) 0 5px, transparent 5px 17px),
    linear-gradient(180deg, #d8a86a, #b98446);
}
.fuda.wood .fuda-txt { font-weight: 900; color: #1b0f05; font-family: "Hiragino Sans", "Yu Gothic", sans-serif; }
.fuda.iroha { flex-direction: column; justify-content: flex-start; padding-top: 6%; }
.iroha-circle { border-radius: 50%; border: 3px solid var(--en); color: var(--en); display: flex; align-items: center; justify-content: center; font-weight: 900; background: #fff8ea; pointer-events: none; }
.iroha-yomi { margin-top: 4%; padding: 0 4px; line-height: 1.1; text-align: center; color: #3a2d1d; overflow: hidden; pointer-events: none; }
.fuda.gone { opacity: .12; }
.fuda.shake { animation: shake .4s; background: #f3b7b0; }
.fuda.cpuote { animation: cpuote .6s; }
.fuda.blink { animation: blink .8s infinite; box-shadow: 0 0 0 4px #fff27a, 0 0 18px #ffe25a; }
.fuda.hint { box-shadow: 0 0 0 5px var(--gold), 0 0 24px var(--gold-soft); }
.fuda.wrong { background: #f0a7a0; }
@keyframes shake { 0%, 100% { margin-left: 0; } 20% { margin-left: -7px; } 40% { margin-left: 7px; } 60% { margin-left: -5px; } 80% { margin-left: 5px; } }
@keyframes cpuote { 0% { box-shadow: 0 0 0 0 rgba(230, 40, 40, .9); } 50% { box-shadow: 0 0 0 8px rgba(230, 40, 40, .9); background: #f7c3bd; } 100% { box-shadow: 0 0 0 0 rgba(230, 40, 40, 0); } }
@keyframes blink { 50% { filter: brightness(1.25); } }

/* ---------- 対局画面 ---------- */
.view { position: absolute; overflow: visible; }
.view.flipped { transform: rotate(180deg); }
.zone-bg { position: absolute; border: 2px dashed rgba(255, 245, 210, .45); border-radius: 10px; }
.zone-name { position: absolute; font-size: 20px; color: rgba(255, 250, 230, .92); text-shadow: 0 1px 2px #000; }
.hud { position: absolute; left: 0; right: 0; top: 0; height: 84px; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: linear-gradient(180deg, var(--en), var(--en-dark)); border-bottom: 4px solid var(--gold); z-index: 6; }
.hud .btn { font-size: 22px; min-height: 52px; min-width: 88px; padding: 4px 10px; }
.badges { flex: 1; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.badge { font-size: 22px; font-weight: 700; color: #fff; padding: 4px 10px; border-radius: 8px; border: 2px solid var(--gold); white-space: nowrap; }
.band {
  position: absolute; left: 0; right: 0; background: linear-gradient(180deg, #2a2420, var(--sumi) 50%, #2a2420);
  border-top: 3px solid var(--gold); border-bottom: 3px solid var(--gold); color: #fff; z-index: 4; overflow: hidden;
}
.band-line { position: absolute; left: 0; right: 0; padding: 6px 18px; display: flex; flex-direction: column; justify-content: center; }
.band-line.flipped { transform: rotate(180deg); }
.band .kana { font-size: 36px; line-height: 1.25; letter-spacing: .04em; min-height: 45px; word-break: break-all; }
.band .kana .kim { color: var(--gold-soft); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; text-decoration-thickness: 3px; }
.band .kanji { font-size: 22px; color: #d9d2c0; margin-top: 2px; min-height: 26px; }
.band .author { font-size: 22px; color: var(--gold-soft); min-height: 26px; }
.band .ctrl { display: flex; gap: 12px; margin-top: 6px; align-items: center; }
.twop .band .kana { font-size: 27px; min-height: 34px; }
.twop .band .kanji, .twop .band .author { font-size: 18px; min-height: 20px; }
.large-font .band .kana { font-size: 42px; }
.large-font.twop .band .kana { font-size: 31px; }
.score2p { position: absolute; font-size: 24px; font-weight: 900; color: #fff; padding: 4px 12px; border-radius: 8px; border: 2px solid var(--gold); z-index: 3; pointer-events: none; }
.edge { position: absolute; z-index: 3; color: #fff; font-size: 20px; font-weight: 700; padding: 4px 8px; border-radius: 6px; border: 2px solid var(--gold); pointer-events: none; }
.stop2p { position: absolute; right: 8px; z-index: 7; }

.toast { position: absolute; left: 60px; right: 60px; text-align: center; font-size: 34px; font-weight: 900; color: #fff; padding: 10px; border-radius: 12px;
  background: rgba(122, 31, 43, .92); border: 3px solid var(--gold); animation: toast 1.3s forwards; }
.toast.good { background: rgba(30, 80, 150, .92); }
@keyframes toast { 0% { opacity: 0; transform: scale(.8); } 15% { opacity: 1; transform: scale(1.05); } 25% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.flyer { position: absolute; }
.spark { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-soft); }

/* ---------- 結果 ---------- */
.result-box { position: absolute; left: 50px; right: 50px; top: 170px; padding: 30px; border-radius: 14px; background: linear-gradient(180deg, #fffaf0, var(--kinari)); border: 8px solid var(--gold); box-shadow: 0 0 0 4px var(--en), 0 20px 30px rgba(0, 0, 0, .35); text-align: center; }
.result-box h1 { margin: 0 0 12px; font-size: 76px; color: var(--en); letter-spacing: .12em; }
.result-box .rows { font-size: 30px; line-height: 1.7; }
.result-btns { position: absolute; left: 0; right: 0; bottom: 120px; display: flex; flex-direction: column; align-items: center; gap: 22px; }

/* ---------- 坊主めくり ---------- */
.bz-center { position: absolute; left: 0; right: 0; top: 330px; height: 560px; }
.bz-deck, .bz-field { position: absolute; top: 150px; width: 120px; height: 170px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; }
.bz-deck { left: 36px; color: var(--kinari); border: 4px solid var(--gold); background: repeating-linear-gradient(45deg, #6a1a25 0 8px, #7a1f2b 8px 16px); box-shadow: 4px 4px 0 #4a0f18, 8px 8px 0 #3a0a12; }
.bz-deck.has-card-back { background: url('./img/card_back.jpg') center/cover no-repeat, repeating-linear-gradient(45deg, #6a1a25 0 8px, #7a1f2b 8px 16px); }
.bz-field { right: 36px; color: var(--en); border: 3px dashed var(--kinari); background: rgba(255, 250, 230, .35); }
.bz-field.has-card-back { background: url('./img/card_back.jpg') center/cover no-repeat; border-style: solid; }
.bz-field b, .bz-deck b { font-size: 40px; }
.bz-card { position: absolute; left: 190px; top: 40px; width: 340px; height: 480px; border-radius: 8px; border: 6px solid var(--gold); background: var(--kinari); box-shadow: 0 16px 30px rgba(0, 0, 0, .4); overflow: hidden; }
.bz-card canvas, .bz-card .portrait-img { width: 100%; height: 100%; display: block; object-fit: cover; }
.bz-card.flip { animation: flipIn .45s ease-out; }
@keyframes flipIn { 0% { transform: rotateY(90deg) scale(.8); } 100% { transform: rotateY(0) scale(1); } }
.bz-seat { position: absolute; width: 300px; min-height: 120px; padding: 10px; border-radius: 12px; background: rgba(255, 250, 235, .9); border: 3px solid var(--gold); text-align: center; }
.bz-seat.turn { box-shadow: 0 0 0 5px var(--en), 0 0 24px #fff2a0; }
.bz-seat .nm { font-size: 26px; font-weight: 900; }
.bz-seat .ct { font-size: 40px; font-weight: 900; color: var(--en); }
.bz-seat .stack { height: 20px; margin: 4px auto 0; background: repeating-linear-gradient(90deg, var(--kinari) 0 5px, var(--gold) 5px 7px); border-radius: 3px; }
.bz-msg { position: absolute; left: 20px; right: 20px; top: 890px; text-align: center; font-size: 34px; font-weight: 900; color: #fff; text-shadow: 0 2px 4px #000; min-height: 48px; }
.bz-draw { position: absolute; left: 0; right: 0; top: 1130px; display: flex; justify-content: center; }
.bz-flyer { position: absolute; width: 44px; height: 62px; border-radius: 3px; background: var(--kinari); border: 2px solid var(--gold); }

/* ---------- 道場 ---------- */
.dojo-info { position: absolute; left: 20px; right: 20px; top: 820px; padding: 14px 18px; border-radius: 12px; background: rgba(255, 250, 235, .95); border: 3px solid var(--gold); font-size: 24px; line-height: 1.5; }
.dojo-info .big { font-size: 34px; font-weight: 900; color: var(--en); }

/* ---------- 図鑑・記録 ---------- */
.list { position: absolute; left: 0; right: 0; top: 84px; bottom: 0; overflow-y: auto; padding: 16px 20px 40px; }
.list-item { display: block; width: 100%; text-align: left; min-height: 80px; margin-bottom: 10px; padding: 12px 16px; border-radius: 10px; border: 3px solid var(--gold); background: linear-gradient(180deg, #fffaf0, var(--kinari)); color: var(--sumi); font-size: 28px; font-weight: 700; }
.list-item small { display: block; font-size: 20px; font-weight: 400; color: #5a4a35; margin-top: 4px; }
.list-item .read { float: right; font-size: 18px; color: var(--en); border: 2px solid var(--en); border-radius: 6px; padding: 0 6px; }
.poem-row { display: flex; gap: 12px; align-items: flex-start; }
.poem-row .no { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--en); color: var(--kinari); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.page { position: absolute; left: 0; right: 0; top: 84px; bottom: 0; overflow-y: auto; padding: 20px 26px 60px; }
.page .sheet { background: linear-gradient(180deg, #fffaf0, var(--kinari)); border: 4px solid var(--gold); border-radius: 12px; padding: 22px; box-shadow: 0 8px 16px rgba(0, 0, 0, .3); }
.page h3 { font-size: 30px; color: var(--en); margin: 18px 0 6px; border-left: 8px solid var(--gold); padding-left: 10px; }
.page p { font-size: 25px; line-height: 1.75; margin: 6px 0; white-space: pre-wrap; }
.page .play-btn { display: flex; justify-content: center; margin-top: 26px; }
.rec-table { width: 100%; border-collapse: collapse; font-size: 22px; background: rgba(255, 250, 235, .95); }
.rec-table th, .rec-table td { border: 1px solid #b89d52; padding: 6px 4px; text-align: center; }
.rec-table th { background: var(--en); color: var(--kinari); }
.sec-title { font-size: 28px; font-weight: 900; color: var(--kinari); text-shadow: 0 2px 2px rgba(0, 0, 0, .6); margin: 20px 0 10px; }

.dialog { position: absolute; left: 60px; right: 60px; top: 420px; padding: 28px; border-radius: 14px; background: var(--kinari); border: 6px solid var(--gold); box-shadow: 0 0 0 4px var(--en); text-align: center; }
.dialog p { font-size: 30px; line-height: 1.6; margin: 0 0 22px; }
.dialog .row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.cta { position: absolute; inset: 0; z-index: 60; background: rgba(40, 10, 15, .72); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; }
.cta .cta-main { font-size: 64px; font-weight: 900; color: var(--kinari); letter-spacing: .1em; text-shadow: 0 4px 8px #000; text-align: center; line-height: 1.4; }
.cta .cta-sub { font-size: 30px; color: var(--gold-soft); text-align: center; line-height: 1.6; }