@font-face{
  font-family:'ShipporiMincho';
  src:url('fonts/ShipporiMincho-Medium.sub.woff') format('woff');
  font-weight:500;font-display:swap;
}

/* ============================================================
   ドヤ街の音楽祭、恒例のことば遊び。
   まわりは全部やかましい手作りの祭り。句だけが静か。
   UIは太いゴシック、句だけ明朝。判定が出ると画面が夜になる。
   ============================================================ */
:root{
  --washi:#EDE4CC;      /* ガリ版の藁半紙（札） */
  --washi-hi:#FAF4E4;   /* 選ばれた札 */
  --sumi:#17130F;       /* マジックの黒 */
  --usu:#6B5F4A;
  --kei:#9A8B6B;
  --aka:#C3282D;        /* 赤／紅白幕 */
  --shiro:#F2EDDF;      /* 白 */
  --chochin:#E8792B;    /* 提灯の灯 */
  --yoru:#17110C;       /* 夜 */
  --ai:#1B3554;         /* 上の句 */
  --koke:#2C4426;       /* 中の句 */
  --enji:#4A1F26;       /* 下の句 */
  --gap:.34em;
  --pt:env(safe-area-inset-top);
  --pb:env(safe-area-inset-bottom);
  --go:'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  --min:'ShipporiMincho','Hiragino Mincho ProN','Yu Mincho',serif;
}

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

html{height:100%;overflow:hidden}
body{
  position:fixed;inset:0;overflow:hidden;
  width:100%;height:100%;
  background:#C7BE9C url('tatami.webp') repeat;
  background-size:300px 300px;
  color:var(--sumi);
  font-family:var(--go);font-weight:600;
  -webkit-font-smoothing:antialiased;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
}
body::after{            /* 夜の落ち。畳の四隅を沈めて奥行きを出す */
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(128% 84% at 50% 40%,transparent 38%,rgba(30,20,6,.30) 100%);
}

/* ---------- 画面 ---------- */
/* 高さを割合で引き継がない。
   body は position:fixed;inset:0 で正しく全面を占めるが、
   body 自身に height の指定がないと、子の height:100% が解決できず
   中身の高さになってしまう（実機で画面が7割の高さに縮んだ）。
   .app も body と同じく四辺で留める。height は書かない ──
   inset:0 と併記すると height のほうが勝ってしまうため。 */
.app{position:fixed;inset:0;z-index:1}
.screen{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:calc(14px + var(--pt)) 16px calc(14px + var(--pb));
  animation:fade .26s ease both;
}
.screen[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.screen{animation:none}}

/* ---------- 部品 ---------- */
.btn{
  font:inherit;font-family:var(--go);font-weight:700;
  font-size:1rem;letter-spacing:.12em;
  color:var(--sumi);background:var(--washi);
  border:2px solid var(--sumi);border-radius:2px;
  padding:.72em 1.6em;cursor:pointer;
  box-shadow:3px 3px 0 rgba(23,19,15,.28);
  transition:transform .07s,box-shadow .07s,background .12s;
}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(23,19,15,.28)}
.btn:focus-visible{outline:3px solid var(--chochin);outline-offset:2px}
.btn--main{background:var(--aka);color:#FFF6E8;border-color:#5E1113}
.btn--main:disabled{background:#B2A78A;color:#7a7059;border-color:#6f6650;
  box-shadow:none;cursor:default}
.btn--sm{font-size:.85rem;padding:.5em 1.1em;box-shadow:2px 2px 0 rgba(23,19,15,.28)}
/* 進行の釦。紅白幕の白い縞に埋もれるので、橙で統一して「押すところ」を示す。 */
.btn--go{background:var(--chochin);color:var(--sumi);border-color:var(--sumi)}
.btn--go:active{background:#F2A155}
.btn--quiet{background:transparent;border:none;color:var(--sumi);
  font-size:.82rem;box-shadow:none;font-weight:700;
  text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px}
.btn--quiet:active{transform:none;box-shadow:none;opacity:.6}
.btn--back{margin-top:.9rem;flex:0 0 auto;font-size:.85rem;padding:.5em 1.3em;align-self:center}

.tag{
  display:inline-block;min-width:1.7em;text-align:center;
  margin-right:.45em;padding:.14em .2em;
  border-radius:2px;font-size:.74em;letter-spacing:0;
  background:var(--sumi);color:var(--washi);vertical-align:.1em;
}
.tag--aka{background:var(--aka);color:#FFF3E4}
.tag--shiro{background:var(--shiro);color:var(--sumi);box-shadow:inset 0 0 0 2px var(--sumi)}

.clock{display:flex;align-items:baseline;color:var(--sumi)}
.clock__n{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}
.clock.is-urgent .clock__n{color:var(--aka)}

/* 提灯 */
.lantern{display:inline-block;width:1.5em;height:2.1em;vertical-align:middle}
.lantern svg{width:100%;height:100%;display:block}
.lantern .body{fill:#B9AE90;stroke:#3A2F1C;stroke-width:2.5}
.lantern .cap{fill:#3A2F1C}
.lantern .rib{stroke:#3A2F1C;stroke-width:1.4;opacity:.5}
.lantern.is-lit .body{fill:var(--chochin)}
.lantern.is-lit{filter:drop-shadow(0 0 7px rgba(232,121,43,.85))}

/* ---------- 扉 ----------
   あおさぎ(YDW)は使用許諾により、WEBでは
   アウトライン化した上でのみ利用可（禁止事項3：サーバーへのアップロード不可）。
   よって字はSVGパスに変換して置いている。フォント本体は同梱していない。 */
.screen--door{
  background-image:
    radial-gradient(126% 86% at 50% 42%,transparent 30%,rgba(20,10,2,.62) 100%),
    linear-gradient(180deg,rgba(30,18,8,.40) 0%,rgba(30,18,8,.24) 44%,rgba(30,18,8,.56) 100%),
    url('door.webp');
  background-size:cover,cover,cover;
  background-position:center;
  background-repeat:no-repeat;
}
.door{text-align:center;width:100%;max-width:23rem;display:flex;flex-direction:column;align-items:center}
.door__kanban{
  width:96%;max-width:23rem;height:auto;display:block;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.75));
}
.door__title{margin-top:1.1rem;line-height:0}
.door__title img{
  width:100%;max-width:24rem;height:auto;display:inline-block;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.95)) drop-shadow(0 0 30px rgba(0,0,0,.7));
}
.door__sub{margin-top:1rem;line-height:0}
.door__sub img{
  width:92%;max-width:22rem;height:auto;display:inline-block;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,1)) drop-shadow(0 0 14px rgba(0,0,0,.8));
}
.door__acts{margin-top:2rem;display:flex;flex-direction:column;gap:.65rem;align-self:stretch}
.door__foot{margin-top:1.5rem;font-size:.7rem;letter-spacing:.2em;color:#E4D2B0;
  text-shadow:0 2px 6px rgba(0,0,0,.85)}

/* ---------- 文書画面 ---------- */
.screen--doc{flex-direction:column;align-items:center;justify-content:flex-start}
.doc{
  display:flex;flex-direction:column;width:100%;max-width:34rem;height:100%;min-height:0;
  background:var(--washi);border:2px solid var(--sumi);
  box-shadow:4px 4px 0 rgba(23,19,15,.3);
  padding:.9rem 1rem;
}
.doc__title{
  flex:0 0 auto;font-size:1.05rem;font-weight:800;letter-spacing:.22em;text-indent:.22em;
  padding-bottom:.5rem;border-bottom:3px solid var(--sumi);
}
.doc__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:.9rem 0}
.doc__foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding-top:.7rem}
.doc__foot .btn--back{margin-top:.9rem}
.doc__list{list-style:none;counter-reset:n}
.doc__list li{
  counter-increment:n;position:relative;padding-left:2.1em;
  font-size:.88rem;line-height:1.85;margin-bottom:.75rem;font-weight:600;
}
.doc__list li::before{
  content:counter(n);position:absolute;left:0;top:.28em;
  width:1.5em;height:1.5em;line-height:1.5em;text-align:center;
  background:var(--aka);color:#FFF3E4;font-size:.72em;font-weight:800;border-radius:50%;
}
.doc__list b{font-weight:800;background:linear-gradient(transparent 62%,rgba(232,121,43,.55) 62%)}
.doc__note{font-size:.78rem;line-height:1.95;color:var(--usu);margin:.9rem 0 0;
  padding-left:.8rem;border-left:3px solid var(--kei)}
.doc__qr{display:flex;align-items:center;gap:.9rem;margin-top:1.3rem;padding-top:1rem;border-top:2px dashed var(--kei)}
.doc__qr img{width:82px;height:82px;display:block;background:#fff;padding:5px;border:1px solid var(--kei)}
.doc__url{display:inline-block;padding:.35em 0;font-size:.72rem;line-height:1.8;
  color:var(--usu);text-decoration:none;border-bottom:2px solid var(--kei)}
.doc__link{margin-top:1rem;font-size:.8rem;text-align:center}
.doc__link a{display:inline-block;color:var(--sumi);text-decoration:none;font-weight:700;
  border-bottom:2px solid var(--aka);padding:.4em .2em .15em;letter-spacing:.04em}

.opt{margin-bottom:1.5rem}
.opt__label{font-size:.82rem;letter-spacing:.18em;font-weight:800;margin-bottom:.55rem;
  display:inline-block;background:var(--sumi);color:var(--washi);padding:.2em .7em}
.opt__row{display:flex;gap:.45rem;flex-wrap:wrap}
.chip{
  font:inherit;font-family:var(--go);font-weight:700;font-size:.86rem;letter-spacing:.06em;
  background:var(--washi-hi);color:var(--sumi);
  border:2px solid var(--sumi);border-radius:2px;
  padding:.5em 1em;cursor:pointer;box-shadow:2px 2px 0 rgba(23,19,15,.25);
}
.chip[aria-pressed="true"]{background:var(--aka);color:#FFF3E4;border-color:#5E1113;box-shadow:none}
.chip:active{transform:translate(1px,1px)}
.chip:focus-visible{outline:3px solid var(--chochin);outline-offset:2px}
.opt__hint{font-size:.76rem;color:var(--usu);line-height:1.85;margin-top:.55rem;white-space:pre-line}

.names{display:flex;flex-direction:column;gap:.5rem}
.names__row{display:flex;align-items:center;gap:.7rem}
.names__row span{flex:0 0 3.6em;font-size:.78rem;color:var(--usu);font-weight:700}
.names__row input{
  flex:1 1 auto;min-width:0;
  font:inherit;font-family:var(--go);font-weight:700;font-size:1rem;
  color:var(--sumi);background:var(--washi-hi);
  border:2px solid var(--sumi);border-radius:2px;padding:.45em .6em;
  -webkit-user-select:text;user-select:text;
}
.names__row input::placeholder{color:#a89b7d;font-weight:700;opacity:1}
.names__row input:focus{outline:none;border-color:var(--aka);box-shadow:0 0 0 3px rgba(195,40,45,.2)}

/* ---------- 句帳 ---------- */
.ki{padding:.85rem 0;border-bottom:2px dashed var(--kei)}
.ki:first-child{padding-top:0}
.ki__no{font-size:.72rem;letter-spacing:.22em;font-weight:800;color:var(--usu);margin-bottom:.45rem}
.ki__ku{
  position:relative;padding-left:2.2rem;font-family:var(--go);font-weight:600;
  font-size:.9rem;line-height:1.75;color:var(--usu);margin-bottom:.45rem;
}
.ki__ku:last-child{margin-bottom:0}
.ki__ku::before{
  content:attr(data-pos);position:absolute;left:0;top:.12em;
  min-width:1.6em;text-align:center;padding:.08em .2em;border-radius:2px;
  font-family:var(--go);font-size:.66rem;font-weight:800;
  background:#BCB093;color:var(--washi);
}
.ki__ku.is-win{color:var(--sumi)}
.ki__ku.is-win::before{background:var(--aka);color:#FFF3E4}
.ki__by{margin-left:.6em;font-family:var(--go);font-size:.72rem;font-weight:700;color:var(--usu)}
.ki__src{display:flex;gap:.8em;align-items:baseline;margin:.25rem 0 .55rem 2.2rem}
.ki__src::before{content:'元ネタ';font-size:.6rem;font-weight:800;letter-spacing:.14em;color:#9A8B6B}
.ki__src a{
  color:var(--usu);text-decoration:none;
  font-size:.68rem;font-weight:700;font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--kei);padding:.3em .1em .1em;
}
.ki__src a:active{color:var(--aka);border-bottom-color:var(--aka)}
.doc__lead{flex:0 0 auto;font-size:.74rem;color:var(--usu);padding-top:.6rem;line-height:1.7}
.ki__empty{font-size:.86rem;color:var(--usu);line-height:2}

/* ---------- 取組 ---------- */
.lineup{text-align:center;width:100%;max-width:23rem;
  background:var(--washi);border:2px solid var(--sumi);
  box-shadow:5px 5px 0 rgba(23,19,15,.3);padding:1.4rem 1.2rem 1.2rem}
.lineup__eyebrow small{display:block;margin-top:.3em;font-size:.62em;letter-spacing:.14em;opacity:.72;font-weight:700}
.lineup__eyebrow{font-size:.82rem;letter-spacing:.26em;text-indent:.26em;font-weight:800;
  display:inline-block;background:var(--sumi);color:var(--washi);padding:.25em 1em}
.lineup__bout{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:1.2rem}
.lineup__side{display:flex;align-items:center;gap:.35em;min-width:0;flex:1 1 0}
.lineup__side--aka{justify-content:flex-end}
.lineup__side--shiro{justify-content:flex-start}
/* 折り返すと「上村朔之／介」のように割れるので、一行に固定して縮める */
.lineup__who{
  font-size:clamp(.95rem,5.2vw,1.55rem);font-weight:800;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.lineup__vs{flex:0 0 auto;font-size:.78rem;font-weight:800;color:var(--usu)}
.lineup__pos{flex:0 0 auto}
.lineup__gyoji{margin-top:.9rem;font-size:.9rem;letter-spacing:.12em;font-weight:700;color:var(--usu)}
/* 先手＝前の回戦に勝った側。先に選び、先に読む。 */
.lineup__first{margin-top:.35rem;font-size:.86rem;letter-spacing:.12em;font-weight:800;color:var(--aka)}
/* 遊び方の選択 */
.modes{display:flex;flex-direction:column;gap:.6rem;margin-top:.5rem}
.mode{
  width:100%;text-align:left;font-family:var(--go);
  background:var(--washi);border:2px solid var(--sumi);
  box-shadow:3px 3px 0 rgba(23,19,15,.28);
  padding:.7rem .85rem;cursor:pointer;color:var(--sumi);
}
.mode b{display:block;font-size:1.05rem;font-weight:800;letter-spacing:.06em;margin-bottom:.2em}
.mode span{display:block;font-size:.74rem;font-weight:600;line-height:1.7;color:var(--usu)}
.mode[aria-pressed="true"]{background:var(--chochin);border-color:var(--sumi)}
.mode[aria-pressed="true"] span{color:rgba(23,19,15,.78)}
.mode:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(23,19,15,.28)}

/* 千秋楽 */
.lineup__eyebrow--big{font-size:1.4rem;letter-spacing:.5em;text-indent:.5em}
.end__note{margin-top:.9rem;font-size:.8rem;font-weight:700;color:var(--usu);line-height:1.8}
.end__three{display:flex;justify-content:center;gap:1.1rem;margin-top:1rem;flex-wrap:wrap}
.end__three span{font-size:1.15rem;font-weight:800;letter-spacing:.04em}
.end__ku{display:flex;flex-direction:column;gap:.7rem;margin-top:1.1rem;width:100%}
.end__ku p{
  font-family:var(--go);font-weight:700;font-size:.92rem;line-height:1.75;
  background:var(--washi);border:2px solid var(--sumi);
  box-shadow:3px 3px 0 rgba(23,19,15,.26);
  padding:.6rem .7rem;text-align:center;
}
.end__ku em{display:block;font-style:normal;font-size:.68rem;color:var(--usu);margin-top:.3em}
.end__toast{
  margin-top:1.4rem;font-size:.92rem;font-weight:800;line-height:2;letter-spacing:.04em;
}
.end__link{
  display:inline-block;margin-top:1rem;font-size:.8rem;font-weight:800;letter-spacing:.08em;
  color:var(--sumi);background:var(--chochin);border:2px solid var(--sumi);
  box-shadow:3px 3px 0 rgba(23,19,15,.3);padding:.5em 1.1em;text-decoration:none;
}
/* 星取表 */
.end__chart{margin-top:1rem;width:100%;display:flex;flex-direction:column;gap:.25rem}
.end__row{display:flex;align-items:center;justify-content:center;gap:.6rem;font-size:.74rem;font-weight:700}
.end__row b{flex:0 0 5.5em;text-align:right;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.end__row i{font-style:normal;color:var(--usu);font-size:.74rem}

.lineup__stars{
  display:flex;justify-content:center;gap:.6rem;
  margin:1.2rem 0;padding:.85rem .3rem;
  background:rgba(23,19,15,.07);border-top:2px solid var(--sumi);border-bottom:2px solid var(--sumi);
}
.star-col{display:flex;flex-direction:column;align-items:center;gap:.25em;
  font-size:.72rem;font-weight:700;color:var(--sumi);flex:1 1 0;min-width:0}
.star-col__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.star-col__marks{display:flex;gap:.15em}
.lineup .btn--main{width:100%}
.lineup__sub{display:flex;justify-content:center;gap:1.6rem;margin-top:.9rem}

/* ---------- 回転ラッパ ---------- */
.rot{transform-origin:50% 50%;width:100%;height:100%}
.rot.is-flipped{transform:rotate(180deg)}

/* ---------- 選札 ---------- */
.screen--pick{padding:0}
.pick{
  display:flex;flex-direction:column;height:100%;
  padding:calc(10px + var(--pt)) 14px calc(10px + var(--pb));
}
.pick__bar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:.35rem .6rem;background:var(--washi);border:2px solid var(--sumi);
  box-shadow:3px 3px 0 rgba(23,19,15,.28);
}
.pick__who{font-size:.9rem;font-weight:800;letter-spacing:.06em;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick__bar-right{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
/* 引き直し。使い切ると沈んで押せなくなる。 */
.btn--redeal{
  font-size:.76rem;padding:.42em .9em;letter-spacing:.06em;
  background:var(--chochin);color:var(--sumi);border:2px solid var(--sumi);
  box-shadow:2px 2px 0 rgba(23,19,15,.3);
}
.btn--redeal:active{transform:translate(2px,2px);box-shadow:none}
.btn--redeal:disabled{
  background:#8E8468;color:#5C5442;border-color:#5C5442;
  box-shadow:none;opacity:.75;cursor:default;
}
.pick__rows{
  flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:.7rem;padding:.6rem 0;
}
/* min-height:0 を付けると、札の最小高さより段が縮んで中身がはみ出し、
   次の段の見出しが札の上に乗る。auto にして、入らないときは巻物側で送る。 */
.pick-sec{display:flex;flex-direction:column;gap:.3rem;flex:1 1 auto}
.pick-sec__label{
  flex:0 0 auto;align-self:flex-start;
  font-size:.66rem;letter-spacing:.2em;font-weight:800;
  background:var(--sumi);color:var(--washi);padding:.16em .8em;
}
.fuda{
  flex:1 1 auto;min-height:2.4rem;position:relative;
  display:flex;align-items:center;
  padding:.4rem .7rem .4rem 1rem;
  background:var(--washi);
  border:2px solid var(--sumi);
  box-shadow:3px 3px 0 rgba(23,19,15,.26);
  font-family:var(--go);font-weight:700;
  font-size:clamp(.8rem,3.6vw,.96rem);line-height:1.45;
  text-align:left;color:var(--sumi);cursor:pointer;
  transition:transform .08s,box-shadow .08s,background .12s;
}
.fuda::before{                       /* 選ばれると引かれる朱の線 */
  content:'';position:absolute;left:0;top:0;bottom:0;width:.34rem;
  background:var(--aka);transform:scaleY(0);transform-origin:50% 50%;
  transition:transform .16s cubic-bezier(.2,.9,.3,1);
}
.fuda:focus-visible{outline:3px solid var(--chochin);outline-offset:2px}
.fuda[aria-pressed="true"]{
  background:var(--washi-hi);
  box-shadow:5px 5px 0 rgba(23,19,15,.34);
  transform:translate(-1px,-1px);
}
.fuda[aria-pressed="true"]::before{transform:scaleY(1)}
.fuda.is-down,.fuda.is-down[aria-pressed="true"]{
  transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(23,19,15,.26);
}
.fuda[data-kind="h"]{color:var(--ai)}
.fuda[data-kind="b"]{color:var(--koke)}
.fuda[data-kind="t"]{color:var(--enji)}

.pick__foot{
  flex:0 0 auto;display:flex;flex-direction:column;gap:.5rem;
  padding:.5rem .6rem .6rem;background:var(--washi);
  border:2px solid var(--sumi);box-shadow:3px 3px 0 rgba(23,19,15,.28);
}
.pick__line{font-family:var(--go);font-weight:700;
  font-size:.9rem;line-height:1.6;min-height:1.6em;text-align:center}
.pick__line .f{margin-right:var(--gap)}
.pick__line .f:last-child{margin-right:0}
.pick__line .h{color:var(--ai)}
.pick__line .b{color:var(--koke)}
.pick__line .t{color:var(--enji)}
.pick__line .ph{color:#a89b7d}
.pick__foot .btn{width:100%}

/* ---------- 出番 ---------- */
.screen--bout{padding:0}
.bout{display:flex;flex-direction:column;height:100%;width:100%}
.side{
  flex:1 1 0;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.7rem;padding:1rem;position:relative;transition:opacity .2s;
}
.side--w{transform:rotate(180deg);padding-top:calc(1rem + var(--pt))}
.side--e{padding-bottom:calc(1rem + var(--pb))}
.side__tag{position:absolute;bottom:.6rem;left:1rem;font-size:.76rem;font-weight:700;color:var(--sumi)}
/* 読み上げの指示。空いた側に、読み手のほうを向けて出す。
   側そのものが180度回っているので、中で更に180度返すと読み手を向く。 */
.side__call{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  pointer-events:none;padding:1rem}
.side.is-calling .side__call{display:flex;animation:fade .3s ease both}
.side__call span{
  transform:rotate(180deg);
  background:var(--chochin);color:var(--sumi);
  border:3px solid var(--sumi);
  box-shadow:5px 5px 0 rgba(23,19,15,.4);
  padding:.9em 1.1em .8em;
  font-size:clamp(1.02rem,4.9vw,1.4rem);font-weight:800;
  line-height:1.7;text-align:center;letter-spacing:.03em;
}
/* 勝負のコツ。読む直前がいちばん効く。 */
.side__call em{
  display:block;margin-top:.7em;padding-top:.6em;
  border-top:2px solid rgba(23,19,15,.35);
  font-style:normal;font-weight:700;
  font-size:.66em;line-height:1.65;letter-spacing:0;
}
.card-sentence{
  width:100%;position:relative;
  font-family:var(--go);font-weight:700;
  font-size:clamp(1rem,4.3vw,1.4rem);line-height:1.7;
  text-align:center;
  background:var(--washi);border:2px solid var(--sumi);
  box-shadow:4px 4px 0 rgba(23,19,15,.3);
  color:var(--sumi);padding:.85rem .7rem;cursor:default;
  transition:box-shadow .1s,transform .08s;
}
.card-sentence .f{margin-right:var(--gap)}
.card-sentence .f:last-child{margin-right:0}
.card-sentence .h{color:var(--ai)}
.card-sentence .b{color:var(--koke)}
.card-sentence .t{color:var(--enji)}

/* 相手の句。同じ座布団だが一段引いて置く。 */
.card-sentence--sub{
  font-size:clamp(.76rem,3.1vw,1rem);line-height:1.65;
  padding:.6rem .7rem .5rem;
  background:rgba(237,228,204,.66);
  border-style:dashed;box-shadow:none;
  opacity:.72;
}
.card-sentence--sub::before{
  content:'相手';position:absolute;top:-2px;left:-2px;
  background:var(--sumi);color:var(--washi);
  font-size:.58rem;font-weight:800;letter-spacing:.12em;
  padding:.12em .55em;
}
.bout.is-judging .card-sentence{cursor:pointer;box-shadow:6px 6px 0 rgba(23,19,15,.34)}
.bout.is-judging .card-sentence:active{transform:translate(3px,3px);box-shadow:3px 3px 0 rgba(23,19,15,.34)}
.bout.is-judging .card-sentence:focus-visible{outline:3px solid var(--chochin);outline-offset:3px}
.bout.is-judging .card-sentence--sub{opacity:.86;box-shadow:3px 3px 0 rgba(23,19,15,.26)}
.side.is-dim .card-sentence{opacity:.2}

/* 紅白幕 */
.bout__band{flex:0 0 auto;position:relative;min-height:5.6rem;display:flex;align-items:center}
.maku{
  position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    var(--aka) 0 30px,var(--shiro) 30px 60px);
  box-shadow:inset 0 5px 9px -5px rgba(0,0,0,.6),inset 0 -5px 9px -5px rgba(0,0,0,.6);
  border-top:2px solid var(--sumi);border-bottom:2px solid var(--sumi);
}
/* 白の番のときは、帯ごと返して読み手に向ける */
.bout__inner.is-flip{transform:rotate(180deg)}
.bout__inner{
  position:relative;z-index:1;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;padding:.45rem .8rem;
}
.bout__msg{
  max-width:100%;
  font-size:.82rem;font-weight:800;letter-spacing:.08em;line-height:1.4;text-align:center;
  background:var(--sumi);color:var(--washi);padding:.3em .8em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 読み上げ中は、誰の番かを枠いっぱいに大きく出す */
.bout__msg--big{font-size:clamp(1.15rem,5.4vw,1.6rem);padding:.32em .9em;letter-spacing:.04em}
/* 判定は選者への呼びかけなので、押すところと同じ橙にする */
.bout.is-judging .bout__msg{background:var(--chochin);color:var(--sumi);font-size:.95rem;padding:.45em 1em}

/* ---------- 一句（夜） ---------- */
.screen--reveal{
  /* position は書かない。.screen の absolute+inset:0 をそのまま活かす。
     relative にすると inset:0 が効かず通常の流れに戻り、高さが中身なりになる。
     しかも fitKu は tanzaku の実測から字の大きさを決めるので、
     「高さが中身で決まり、中身が高さで決まる」循環になって、
     句の長さしだいで画面が縮んでいた。
     absolute でも位置の基準にはなるので、relative は要らない。 */
  padding:0;
  background:var(--yoru);
  animation:dusk .5s ease both;
}
@keyframes dusk{from{background-color:#8d8058}to{background-color:var(--yoru)}}
.reveal{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  height:100%;width:100%;
  padding:calc(24px + var(--pt)) 20px calc(50px + var(--pb));
}
/* 提灯の灯。幕より上に敷く。
   灯が幕の下にあると、平板な夜色の幕が「灯の上の暗い板」として見えてしまう。
   上に敷けば、幕は夜の上の夜になり、見えない。クリックは透過。 */
.reveal::after{
  content:'';position:absolute;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(62% 38% at 50% 46%,rgba(232,121,43,.28) 0%,transparent 74%);
}
.tanzaku{
  height:100%;width:100%;
  display:flex;align-items:stretch;justify-content:center;gap:1.6rem;
}
/* 同じ句を上下から二本。どちら側からも読める。 */
.col{
  height:100%;display:flex;flex-direction:row-reverse;align-items:flex-end;gap:.7rem;
}
/* 後手（相手向き）の柱。
   iOSは回転のかかった要素を合成レイヤーに乗せ、中の子のアニメーションが
   全部終わると、レイヤーを畳んで通常描画へ戻す。その畳み直しの瞬間に
   回転の基準点が丸め直され、柱ごとサブピクセル単位で「ずれる」。
   ずれるのが後手だけ・時々だけなのは、畳むタイミングの競争だから。
   will-change でレイヤーを常設にすれば、畳み直し自体が起きない。
   （IMAGE CRUSH DRIVE でも「will-change は外すと逆に落ちる」ことを確認済み） */
.col--flip{transform:rotate(180deg) translateZ(0);will-change:transform}
/* 三つの断片が、ここで初めて一本の句になる。色も隙間も捨てる。

   「上から書かれていく」は、一文字ずつの透明度でつくる。
   位置・大きさ・レイアウトは最初から確定していて、動く物が存在しない。
   幕を被せる方式は、背景が写真のとき「写真を塗りつぶす板」に見えるのでやめた。
   文字自身が浮かぶなら、背景に何があってもそのまま透ける。 */
.col__ku{
  writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;
  max-height:100%;white-space:nowrap;
  font-family:var(--min);font-weight:500;
  letter-spacing:.06em;line-height:1;
  font-size:26px;                     /* app.js が字数に応じて上書き */
}
/* 「灯っていく」は色だけで作る。
   opacity は合成器（コンポジタ）で処理されるため、動いている間だけ
   文字が合成レイヤーに乗り、終わると降りる。iOSは合成上の文字と
   通常描画の文字でラスタライズが僅かに違うので、降りた瞬間に
   字が描き直され、「微妙にカクッ」と見える。
   color と text-shadow は塗りだけの性質で、レイヤーの昇降が起きない。
   文字は最初から最後まで通常描画に居続けるので、描き直しの瞬間が無い。 */
.col__ku span{
  color:transparent;text-shadow:none;
  animation:inkin .5s ease both;
}
@keyframes inkin{
  to{color:#F7EEDC;text-shadow:0 0 26px rgba(232,121,43,.45)}
}

/* 千社札 */
.senja{
  will-change:transform;
  flex:0 0 auto;margin-bottom:.2rem;
  writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;
  background:#F5EBD6;color:#17130F;
  font-family:var(--go);font-weight:800;
  padding:.6em .34em;font-size:1rem;letter-spacing:.16em;line-height:1;
  box-shadow:inset 0 0 0 2px #17130F,inset 0 0 0 5px #F5EBD6,inset 0 0 0 7px #17130F,
             0 3px 12px rgba(0,0,0,.6);
  transform-origin:50% 50%;
  animation:paste .42s 1.3s cubic-bezier(.18,1.3,.4,1) both;
}
@keyframes paste{
  0%{transform:scale(1.9) rotate(-12deg);opacity:0;filter:blur(3px)}
  62%{transform:scale(.95) rotate(-4deg);opacity:1;filter:blur(0)}
  100%{transform:scale(1) rotate(-4deg);opacity:1;filter:blur(0)}
}
/* ゲスト。句が立ったあと、勝った側から現れて喋る。 */
.guest{
  will-change:transform;
  position:absolute;z-index:0;height:auto;
  opacity:.9;filter:brightness(.84) saturate(.94);
  pointer-events:none;
}
.guest[hidden]{display:none}
.guest--e{                       /* 赤が勝ち：町内会長が下から */
  left:-4%;bottom:0;width:82%;max-width:460px;
  animation:rise .8s 2s cubic-bezier(.2,.85,.3,1) both;
}
.guest--w{                       /* 白が勝ち：ユーヤが上から、180度返して */
  right:-2%;top:0;width:58%;max-width:330px;
  transform:rotate(180deg);      /* 動きが効かない場合でも向きは保つ */
  animation:rise-flip .8s 2s cubic-bezier(.2,.85,.3,1) both;
}
@keyframes rise{
  from{transform:translateY(42%);opacity:0}
  to{transform:translateY(0);opacity:.9}
}
@keyframes rise-flip{
  from{transform:rotate(180deg) translateY(42%);opacity:0}
  to{transform:rotate(180deg) translateY(0);opacity:.9}
}
/* 出典。全部終わってから、最後に届く。 */
.reveal__foot{
  position:absolute;z-index:4;left:0;right:0;bottom:calc(12px + var(--pb));
  display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem;
  padding:0 15px;pointer-events:none;
}
.reveal__foot > *{pointer-events:auto}
#btnNextRound{animation:fade .6s ease both;box-shadow:3px 3px 0 rgba(0,0,0,.5)}
/* 隠している間も場所は確保する。
   display:none で消すと、その間だけ日付（右）が左へ詰まり、
   釦が現れた瞬間に右へ押し出されて見える。 */
#btnNextRound[hidden]{display:block;visibility:hidden;pointer-events:none}
.sources{text-align:right;animation:fade .8s ease both}
.sources[hidden]{display:block;visibility:hidden;pointer-events:none}
.sources__label{
  font-size:.6rem;font-weight:800;letter-spacing:.28em;text-indent:.28em;
  color:#8E7550;margin-bottom:.1em;
}
.sources__links{display:flex;gap:.85em;align-items:baseline;justify-content:flex-end}
.sources a{
  color:#BC9A66;text-decoration:none;
  font-size:.7rem;font-weight:700;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  border-bottom:1px solid rgba(188,154,102,.5);
  padding:.35em .15em .15em;
}
.sources a:active{color:var(--chochin);border-bottom-color:var(--chochin)}
@media (prefers-reduced-motion:reduce){
  .screen--reveal{animation:none}
  .sources{animation:fade .3s 2.2s ease both}
  .guest--e{animation:fade .4s 1.6s ease both;opacity:.9}
  .guest--w{animation:fade .4s 1.6s ease both;opacity:.9;transform:rotate(180deg)}
  .col__ku span{animation-duration:.12s}
  .senja{animation:fade .3s .3s ease both}
}

/* ---------- 優勝 ---------- */
/* おじさん。「今日も面白かったな、最高やった」
   切り抜きの下端が切れているので、画面の下端に合わせて隠す。 */
.ojisan{
  /* 字幕（画像の左25%あたりが中心）を画面のセンターに合わせる。
     自身の幅の-25%だけ戻せば、端末の幅によらず字幕が真ん中に来る。
     右肩は画面の縁で見切れる。枠の外から声をかけてくる立ち位置。 */
  position:absolute;left:50%;bottom:0;transform:translateX(-28%);
  width:min(112%,33rem);height:auto;z-index:0;pointer-events:none;
  animation:fade .5s .4s ease both;
}
.screen--end{align-items:flex-start;padding-top:calc(16px + var(--pt))}
.end{position:relative;z-index:1;text-align:center;width:100%;max-width:22rem;
  background:var(--washi);border:2px solid var(--sumi);
  box-shadow:5px 5px 0 rgba(23,19,15,.3);padding:1.2rem 1.1rem 1rem}
.end__lanterns{display:flex;justify-content:center;gap:.5rem;margin-bottom:1rem}
.end__eyebrow{font-size:.84rem;letter-spacing:.34em;text-indent:.34em;font-weight:800;
  display:inline-block;background:var(--aka);color:#FFF3E4;padding:.25em 1.1em}
.end__name{font-size:clamp(2rem,12vw,3.4rem);font-weight:800;letter-spacing:.04em;
  margin:1rem 0 .2rem;line-height:1.2;word-break:break-word}
.end__acts{margin-top:1.2rem;display:flex;flex-direction:row;justify-content:center;gap:.6rem}
.end__acts .btn{flex:1 1 0;font-size:.92rem;padding:.7em .4em;white-space:nowrap}

/* ---------- iPad ---------- */
@media (min-width:700px){
  .btn{font-size:1.2rem;padding:.8em 2em}
  .btn--sm{font-size:1rem}
  .doc{padding:1.6rem 1.8rem}
  .doc__title{font-size:1.4rem}
  .doc__list li{font-size:1.12rem;line-height:1.95}
  .doc__note{font-size:1rem}
  .fuda{font-size:1.32rem;min-height:3.6rem;padding-left:1.2rem}
  .pick-sec__label{font-size:.86rem}
  .pick__who{font-size:1.2rem}
  .pick__line{font-size:1.2rem}
  .card-sentence{font-size:clamp(1.5rem,3.2vw,2.1rem);padding:1.2rem 1rem}
  .card-sentence--sub{font-size:clamp(1rem,2.2vw,1.4rem)}
  .card-sentence--sub::before{font-size:.76rem}
  .bout__msg{font-size:1.05rem}
  .bout__msg--big{font-size:2.1rem}
  .bout__band{min-height:5rem}
  .maku{background:repeating-linear-gradient(90deg,var(--aka) 0 52px,var(--shiro) 52px 104px)}
  .lineup{max-width:32rem;padding:2rem}
  .lineup__who{font-size:2.1rem}
  .door{max-width:30rem}
  .senja{font-size:1.4rem}
  .end{max-width:30rem}
  .lantern{width:1.9em;height:2.6em}
  .guest--e{width:62%;max-width:620px}
  .guest--w{width:44%;max-width:440px}
  .side__call span{font-size:1.9rem;padding:1em 1.5em;border-width:4px}
}