/* どっち派？（/dotchi/。2026-11-13）。共通の部品は va.css、決まりは リポジトリ直下の DESIGN.md。接頭辞は dt-。
   並び：題名の段 → 見せ場（2つの陣営の旗が向かい合う・VS・割合の帯・団員証と陣営パワー・実況席）→ みんなのおすすめゲーム → 前のお題と次のお題 → 遊び方。
   見せ場は紙・帯・札の語彙で：地は2つの陣営の色で斜めに塗り分け、インクの帯が旗の後ろを貫通。VS はぎざぎざの札と黄緑の稲妻（この画面の黄緑は、これ1点だけ）。
   陣営の色は dotchi.json の color（--c。見せ場の地は --ca・--cb）。数字は Outfit（--en）、字間は詰めない。 */

.dt-n{font-family:var(--en);letter-spacing:0}
.dt-ph .lead .nb{white-space:nowrap}
@media (max-width:520px){.dt-ph .lead .nb{white-space:normal}}

/* ===== 見せ場：2つの陣営の色で斜めに塗り分けた地＋両端の網点。はみ出す帯は切る（clip＝フォーカスやスクロールで横にずれない） ===== */
.dt-stage{position:relative;overflow:hidden;overflow:clip;border-bottom:var(--bd);padding:24px 0 44px;
  background:linear-gradient(102deg,color-mix(in srgb,var(--ca,#ee5a36) 13%,transparent) 0 50%,color-mix(in srgb,var(--cb,#139e93) 13%,transparent) 50% 100%),var(--paper) var(--grain)}
.dt-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(21,21,21,.11) 1.5px,transparent 1.9px);background-size:11px 11px;
  -webkit-mask-image:linear-gradient(102deg,#000,transparent 22%,transparent 78%,#000);mask-image:linear-gradient(102deg,#000,transparent 22%,transparent 78%,#000)}
.dt-stage>.va-in{position:relative}

/* 上の段：お題の札と期間 */
.dt-top-in{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-bottom:22px}
.dt-term{font-weight:900;font-size:14.5px;line-height:1.4;color:var(--ink)}
.dt-term .dt-n{font-weight:700}
.dt-term em{font-style:normal;font-family:var(--px);font-weight:400;font-size:11px;color:var(--paper2);background:var(--ink);padding:1px 7px;margin-left:10px;vertical-align:2px}

/* ===== 2つの旗と VS（スマホ：横に2つ並べ、VS は間の上に重ねる。PC：旗・VS・旗の3列） ===== */
.dt-ring{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch;padding:4px 0 6px}
.dt-band{position:absolute;z-index:0;left:50%;top:46%;width:130vw;margin-left:-65vw;transform:rotate(-6deg);--tape-h:38px;box-shadow:0 4px 0 rgba(21,21,21,.16)}
.dt-flag{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;background:var(--paper2);border:var(--bd);box-shadow:var(--sh);transition:box-shadow .2s}
.dt-flag.a{transform:rotate(-1.6deg)}
.dt-flag.b{transform:rotate(1.6deg)}
.dt-flag .hd{position:relative;overflow:hidden;background:var(--c);color:#fff;padding:11px 11px 13px;border-bottom:var(--bd)}
.dt-flag .hd::after{content:"";position:absolute;right:-10px;bottom:-10px;width:70%;height:90%;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.26) 1.6px,transparent 2px);background-size:9px 9px;
  -webkit-mask-image:linear-gradient(135deg,transparent 30%,#000);mask-image:linear-gradient(135deg,transparent 30%,#000)}
.dt-flag.b .hd{text-align:right}
.dt-flag.b .hd::after{right:auto;left:-10px;-webkit-mask-image:linear-gradient(225deg,transparent 30%,#000);mask-image:linear-gradient(225deg,transparent 30%,#000)}
.dt-flag .en{position:relative;font-family:var(--en);font-weight:800;font-size:10px;line-height:1.3;letter-spacing:.1em;opacity:.92;margin-bottom:3px}
.dt-flag h3{position:relative;font-weight:900;font-size:clamp(18px,5vw,26px);line-height:1.2;letter-spacing:-.04em;font-feature-settings:"palt";text-shadow:2px 2px 0 rgba(21,21,21,.28)}
.dt-flag h3 span{display:inline-block;max-width:100%}
.dt-flag .bd{display:flex;flex-direction:column;align-items:flex-start;gap:9px;flex:1;padding:11px 11px 13px}
.dt-flag.b .bd{align-items:flex-end;text-align:right}
.dt-flag .say{font-weight:700;font-size:13px;line-height:1.6;color:var(--ink)}
.dt-flag .kinds{display:flex;flex-wrap:wrap;gap:5px}
.dt-flag.b .kinds{justify-content:flex-end}
.dt-flag .kinds .va-tag{font-size:10.5px;padding:0 6px;white-space:normal}
.dt-join{margin-top:auto;align-self:stretch;background:var(--c);color:#fff;font-size:14px;padding:10px 8px;white-space:normal}
.dt-join[aria-pressed="true"]{background:var(--ink);color:var(--paper2);box-shadow:3px 3px 0 var(--c)}
.dt-flag.ask{box-shadow:var(--sh-l)}
.dt-flag.mine{box-shadow:6px 6px 0 var(--ink),0 0 0 4px color-mix(in srgb,var(--c) 30%,transparent)}
.dt-ribbon{position:absolute;z-index:2;top:-12px;right:-6px;font-family:var(--px);font-size:11px;line-height:1.5;color:var(--paper2);background:var(--ink);padding:1px 8px;transform:rotate(4deg);box-shadow:2px 2px 0 var(--c);white-space:nowrap}
.dt-flag.b .dt-ribbon{right:auto;left:-6px;transform:rotate(-4deg)}
/* 終わったお題：勝ち・健闘・引き分けのスタンプ（旗の下の外側の角に。字に重ねないよう、スマホでは旗の下に場所を空ける） */
.dt-flag.res .bd{padding-bottom:74px}
.dt-flag .dt-stamp.res{position:absolute;z-index:2;right:-8px;bottom:-14px;width:88px;transform:rotate(-12deg)}
.dt-flag.b .dt-stamp.res{right:auto;left:-8px;transform:rotate(10deg)}

/* VS：ぎざぎざの札＋黄緑の稲妻（スマホでは2つの旗の間の上に重ねる） */
.dt-vs{position:absolute;z-index:3;left:50%;top:44px;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none}
.dt-vs .in{position:relative;display:block;width:100%;height:100%;transform:rotate(-8deg)}
.dt-vs svg{position:absolute;display:block}
.dt-vs .burst{inset:0;width:100%;height:100%}
.dt-vs b{position:absolute;inset:0;display:grid;place-items:center;font-family:"Unbounded",sans-serif;font-weight:800;font-size:17px;letter-spacing:0;color:var(--paper2);padding-top:1px}

/* 旗が入ってくる（最初の1回だけ）：左の旗は左から、右の旗は右から。VS はそのあとに飛び出す */
[data-motion="on"] .dt-ring.enter .dt-flag.a{animation:dt-in-a .7s var(--ease) .08s backwards}
[data-motion="on"] .dt-ring.enter .dt-flag.b{animation:dt-in-b .7s var(--ease) .08s backwards}
[data-motion="on"] .dt-ring.enter .dt-vs .in{animation:dt-pop .5s cubic-bezier(.2,1.6,.4,1) .55s backwards}
@keyframes dt-in-a{from{opacity:0;transform:translateX(-70px) rotate(-7deg)}}
@keyframes dt-in-b{from{opacity:0;transform:translateX(70px) rotate(7deg)}}
@keyframes dt-pop{from{opacity:0;transform:scale(.2) rotate(-50deg)}}
@media (prefers-reduced-motion:reduce){.dt-ring .dt-flag,.dt-ring .dt-vs .in{animation:none!important}}

/* ===== 割合の帯（1本の帯）と、のこりの日数 ===== */
.dt-meter{position:relative;z-index:1;margin-top:30px}
.dt-meter[hidden]{display:none}
.dt-nums{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:10px;margin-bottom:10px}
.dt-nums .a{text-align:left}
.dt-nums .b{text-align:right}
.dt-nums .nm{display:block;font-weight:900;font-size:11.5px;line-height:1.35;color:var(--ink);margin-bottom:2px}
.dt-nums .v{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
.dt-nums .a .v b,.dt-nums .b .v b{font-family:var(--en);font-weight:800;font-size:40px;line-height:1;letter-spacing:0;color:color-mix(in srgb,var(--c) 82%,#151515)}
.dt-nums .v b.none{color:var(--mute)!important}
.dt-nums .v small{font-family:var(--en);font-weight:700;font-size:16px;letter-spacing:0;color:var(--ink)}
.dt-nums .mid{text-align:center;padding-bottom:2px}
.dt-nums .mid .v b{font-family:var(--en);font-weight:800;font-size:26px;line-height:1;letter-spacing:0;color:var(--ink)}
.dt-nums .mid .v small{font-family:var(--jp);font-weight:900;font-size:12px}
.dt-nums .mid .w{display:block;font-weight:900;font-size:17px;line-height:1.2;color:var(--ink)}
.dt-nums .mid em{display:block;font-style:normal;font-family:var(--px);font-size:10.5px;line-height:1.5;color:var(--mute);margin-top:3px;white-space:nowrap}
.dt-bar{position:relative;display:flex;height:24px;border:var(--bd);background:var(--paper2);box-shadow:var(--sh)}
.dt-bar i{display:block;height:100%;flex:none;background:var(--c);transition:width 1.1s var(--ease)}
.dt-bar i.a{background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.2) 0 4px,transparent 4px 10px)}
.dt-bar i.b{margin-left:auto;border-left:var(--bd);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0 4px,transparent 4px 10px)}
.dt-bar .half{position:absolute;left:50%;top:-9px;bottom:-9px;border-left:2px dashed var(--ink);margin-left:-1px}
.dt-bar.empty i{opacity:.3}
.dt-bar.sm{height:14px;box-shadow:3px 3px 0 var(--ink)}
.dt-bar.sm .half{top:-5px;bottom:-5px}
@media (prefers-reduced-motion:reduce){.dt-bar i{transition:none}}
.dt-meter-note{font-family:var(--px);font-size:12px;line-height:1.7;color:var(--ink2);margin-top:14px;text-align:center}

/* ===== 陣営に入る（確かめ）／団員証と陣営パワー／結果 ===== */
.dt-act{position:relative;z-index:1;margin-top:34px}
.dt-act[hidden]{display:none}
.dt-confirm{max-width:640px;margin:0 auto;background:var(--paper2);border:var(--bd);box-shadow:var(--sh-l);padding:18px 16px 20px;text-align:center}
.dt-confirm .q{font-weight:900;font-size:clamp(22px,4.4vw,32px);line-height:1.3;letter-spacing:-.04em;color:var(--ink);font-feature-settings:"palt"}
.dt-confirm .q:focus{outline:none}
.dt-confirm .q b{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--c) 45%,transparent) 62%)}
.dt-confirm .q span,.dt-confirm .q b span{display:inline-block}
.dt-confirm .warn{font-weight:700;font-size:14.5px;line-height:1.7;color:var(--ink);margin-top:8px}
.dt-confirm .acts{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:16px}
.dt-confirm .va-btn.sm:hover i{transform:translateX(-3px)}
.dt-go{background:var(--c);color:#fff;width:100%;font-size:18px;padding:15px 18px;box-shadow:6px 6px 0 var(--ink);white-space:normal}
.dt-go:hover{box-shadow:8px 8px 0 var(--ink)}
.dt-go:active{box-shadow:1px 1px 0 var(--ink)}
.dt-go:disabled{cursor:progress;background:color-mix(in srgb,var(--c) 30%,var(--paper2));color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:none}

.dt-pass{display:grid;gap:26px}
/* 団員証：陣営の色の帯・陣営の名前・入った日・送ったパワーの日数・今日のスタンプ（押す前は点線） */
.dt-card{position:relative;background:var(--paper2);border:var(--bd);box-shadow:var(--sh-l);transform:rotate(-1.2deg)}
.dt-card .hd{display:flex;align-items:baseline;gap:9px;background:var(--c);color:#fff;padding:7px 14px 6px;border-bottom:var(--bd);line-height:1.4;white-space:nowrap;overflow:hidden}
.dt-card .hd b{font-weight:900;font-size:15px;letter-spacing:.04em}
.dt-card .hd .e{font-family:var(--en);font-weight:800;font-size:9.5px;letter-spacing:.1em}
.dt-card .hd .u{margin-left:auto;font-family:var(--en);font-weight:800;font-size:10px;letter-spacing:.06em}
.dt-card .bd{position:relative;min-height:148px;padding:14px 14px 16px}
.dt-card .nm{font-weight:900;font-size:clamp(22px,6vw,28px);line-height:1.2;letter-spacing:-.04em;color:var(--ink);font-feature-settings:"palt";padding-right:96px}
.dt-card .nm span{display:inline-block}
.dt-card dl{display:flex;gap:22px;margin-top:14px}
.dt-card dt{font-family:var(--px);font-size:11px;line-height:1.4;color:var(--mute)}
.dt-card dd{font-family:var(--en);font-weight:800;font-size:24px;line-height:1.2;color:var(--ink)}
.dt-card dd small{font-family:var(--jp);font-weight:900;font-size:12px;margin-left:5px}
.dt-stamp{display:block;pointer-events:none}
.dt-stamp svg{display:block;width:100%;height:auto}
.dt-card .dt-stamp{position:absolute;right:-6px;top:2px;width:108px;transform:rotate(-11deg)}
.dt-stamp-ph{position:absolute;right:12px;top:14px;display:grid;place-items:center;width:80px;aspect-ratio:1;border:2px dashed var(--mute);border-radius:50%;font-family:var(--px);font-size:10.5px;line-height:1.35;text-align:center;color:var(--mute);transform:rotate(-11deg)}
[data-motion="on"] .dt-stamp.fresh{animation:dt-press .5s cubic-bezier(.2,1.5,.4,1) .16s backwards}
@keyframes dt-press{from{opacity:0;transform:rotate(-26deg) scale(1.9)}55%{opacity:1}to{opacity:1;transform:rotate(-11deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.dt-stamp.fresh{animation:none!important}}

/* 陣営パワーを送る：今日の日付・おすすめのゲーム（名前で探して1つ）・送るボタン */
.dt-send{display:grid;gap:16px;align-content:start;background:var(--paper2);border:var(--bd);box-shadow:var(--sh);padding:16px 14px 20px}
.dt-send-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:2px solid var(--ink);padding-bottom:8px}
.dt-send-h b{font-weight:900;font-size:18px;line-height:1.3;color:var(--ink)}
.dt-send-h span{font-family:var(--px);font-size:12px;color:var(--mute);white-space:nowrap}
.dt-pick{display:grid;gap:10px}
.dt-pick .q{font-weight:900;font-size:15.5px;line-height:1.5;color:var(--ink)}
.dt-pick .q small{display:block;font-family:var(--px);font-weight:400;font-size:11px;line-height:1.6;color:var(--mute)}
.dt-q{display:grid;gap:6px}
.dt-q span{justify-self:start;font-family:var(--px);font-size:11.5px;line-height:1.5;color:var(--paper2);background:var(--ink);padding:1px 9px}
.dt-q input{width:100%;min-width:0;font:inherit;font-weight:700;font-size:16px;line-height:1.4;padding:10px 12px;border:var(--bd);border-radius:0;background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--ink);-webkit-appearance:none;appearance:none}
.dt-q input::placeholder{color:var(--mute);font-weight:500}
.dt-q input:focus-visible{outline-offset:3px}
.dt-opts-h{font-family:var(--px);font-size:11.5px;line-height:1.6;color:var(--mute);margin-bottom:8px}
.dt-opt-list{display:flex;flex-wrap:wrap;gap:8px}
.dt-opt{font:inherit;font-weight:700;font-size:13.5px;line-height:1.3;padding:7px 11px;border:var(--bd);background:var(--paper);color:var(--ink);box-shadow:2px 2px 0 var(--ink);cursor:pointer;text-align:left;max-width:100%;overflow-wrap:anywhere;transition:transform .15s,box-shadow .15s,background .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.dt-opt:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
@media (hover:hover) and (pointer:fine){.dt-opt:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);background:color-mix(in srgb,var(--c) 16%,var(--paper2))}}
.dt-chosen{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 12px;border:2px dashed var(--ink);background:color-mix(in srgb,var(--c) 10%,var(--paper2))}
.dt-chosen b{font-weight:900;font-size:20px;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.dt-chosen .va-tag{background:var(--c)}
.dt-unpick{margin-left:auto;font:inherit;font-weight:700;font-size:13px;color:var(--ink);background:none;border:0;padding:4px 0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dt-ts:empty{display:none}
.dt-err{font-weight:700;font-size:14px;line-height:1.65;color:var(--coral-d);background:var(--coral-l);border:2px solid var(--coral-d);padding:8px 12px}
.dt-err[hidden]{display:none}
/* 送った後 */
.dt-sent-h{font-weight:900;font-size:clamp(25px,3.2vw,38px);line-height:1.25;letter-spacing:-.04em;color:var(--ink);font-feature-settings:"palt"}
.dt-sent-h:focus{outline:none}
.dt-sent-h span{display:inline-block}
.dt-said{font-size:14px;line-height:1.75;color:var(--ink2)}
.dt-mypick{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.dt-mypick .va-tag{background:var(--c)}
.dt-mypick b{font-weight:900;font-size:19px;color:var(--ink);overflow-wrap:anywhere}
.dt-next{display:grid;gap:2px}
.dt-next b{font-weight:900;font-size:clamp(18px,2vw,23px);line-height:1.4;color:var(--ink)}
.dt-next small{font-family:var(--px);font-size:12px;line-height:1.6;color:var(--mute)}
.dt-send .acts{display:flex;flex-wrap:wrap;gap:12px}
.dt-send .acts .va-btn{font-size:14px;padding:10px 14px}

/* 終わったお題の結果 */
.dt-result{max-width:900px;margin:0 auto;background:var(--paper2);border:var(--bd);box-shadow:var(--sh-l);padding:22px 18px 24px;text-align:center}
.dt-win{font-weight:900;font-size:clamp(28px,5.4vw,56px);line-height:1.2;letter-spacing:-.04em;color:var(--ink);font-feature-settings:"palt"}
.dt-win span,.dt-win b span{display:inline-block}
.dt-win b{background:linear-gradient(transparent 60%,color-mix(in srgb,var(--c,#ee5a36) 45%,transparent) 60%)}
.dt-win.quiet{font-size:clamp(20px,3vw,30px)}
.dt-result .cheer{max-width:44em;margin:12px auto 0;font-weight:700;font-size:15px;line-height:1.85;color:var(--ink)}
.dt-result .you{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;margin-top:16px;padding-top:14px;border-top:2px dashed var(--line);font-size:14px;line-height:1.7;color:var(--ink2)}
.dt-result .you b{font-weight:900;color:var(--ink)}
.dt-result .you small{font-weight:700;margin-left:4px}
.dt-result .you>span:not(.va-tag){display:inline-block}
.dt-result .dt-meter-note{margin-top:0}

/* ===== 実況席（2羽）：ぽぷり＝実況（左）、しるべ＝解説（右）。2羽とも内側を向く ===== */
.dt-desk{position:relative;z-index:1;display:grid;gap:16px;margin-top:38px}
.dt-desk .who{display:grid;align-items:end;gap:12px}
.dt-desk .who.a{grid-template-columns:auto minmax(0,1fr)}
.dt-desk .who.b{grid-template-columns:minmax(0,1fr) auto}
.dt-b{position:relative;display:block;flex:none;width:62px}
.dt-b.b{width:50px}
.dt-b img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 0 rgba(21,21,21,.14))}
.dt-b .va-plate{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%) rotate(-3deg);padding:1px 7px 2px}
.dt-b .va-plate b{font-size:12.5px}
.dt-b .va-plate small{font-size:9.5px}
.dt-b.b .va-plate{transform:translateX(-50%) rotate(3deg)}
.dt-desk .va-say{font-size:14px;line-height:1.65;padding:10px 14px;margin-bottom:14px}
.dt-desk .va-say::before{top:auto;bottom:14px}
.dt-desk .va-say b{background:linear-gradient(transparent 64%,rgba(238,90,54,.28) 64%)}
.dt-desk .who.b .va-say b{background:linear-gradient(transparent 64%,rgba(19,158,147,.3) 64%)}

/* 準備中 */
.dt-empty{grid-column:1/-1;padding:28px 20px;border:2px dashed var(--mute);background:var(--paper2)}
.dt-empty p{font-size:15px;line-height:1.8}
.dt-empty b{display:block;font-weight:900;font-size:22px;color:var(--ink)}

/* ===== みんなのおすすめゲーム：陣営ごとの列。ゲームを押すと、よく配信しているタレントが開く ===== */
.dt-cols{display:grid;gap:40px}
.dt-col{min-width:0}
.dt-col-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;background:var(--c);color:#fff;border:var(--bd);box-shadow:var(--sh);padding:9px 14px 10px;transform:rotate(-.8deg)}
.dt-col.b .dt-col-h{transform:rotate(.8deg)}
.dt-col-h .en{font-family:var(--en);font-weight:800;font-size:10px;letter-spacing:.1em}
.dt-col-h b{font-weight:900;font-size:22px;line-height:1.25;letter-spacing:-.03em;font-feature-settings:"palt"}
.dt-col-h b span{display:inline-block}
.dt-col-h .va-tag{background:var(--ink);font-size:11px;align-self:center}
.dt-col-sub{font-family:var(--px);font-size:11.5px;line-height:1.6;color:var(--mute);margin:16px 0 8px}
.dt-glist{border-top:var(--bd)}
.dt-g{border-bottom:2px dashed var(--line)}
.dt-g summary{display:grid;grid-template-columns:26px minmax(0,1fr) auto;column-gap:10px;row-gap:5px;align-items:center;padding:12px 0;cursor:pointer;list-style:none}
.dt-g summary::-webkit-details-marker{display:none}
.dt-g summary:focus-visible{outline-offset:3px}
.dt-g .no{grid-row:1/span 2;font-family:var(--en);font-weight:800;font-size:22px;line-height:1;color:var(--ink);text-align:center}
.dt-g .nm{grid-column:2;font-weight:900;font-size:17px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.dt-g .sh{grid-column:2;grid-row:2;display:flex;align-items:center;gap:8px;min-width:0}
.dt-g .sh .bar{flex:1;max-width:240px;height:9px;border:2px solid var(--ink);background:var(--paper2)}
.dt-g .sh .bar i{display:block;height:100%;background:var(--c)}
.dt-g .pc{font-family:var(--en);font-weight:800;font-size:15px;line-height:1;letter-spacing:0;color:var(--ink);white-space:nowrap}
.dt-g .pc small{font-family:var(--en);font-weight:700;font-size:11px;margin-left:3px}
.dt-g .tg{grid-column:3;grid-row:1/span 2;display:inline-flex;align-items:center;gap:6px;font-family:var(--px);font-size:11.5px;line-height:1.4;color:var(--ink);border:var(--bd);background:var(--paper2);padding:4px 8px;box-shadow:2px 2px 0 var(--ink);white-space:nowrap}
.dt-g .tg i{font-style:normal;transition:transform .2s var(--ease)}
.dt-g details[open] .tg{background:var(--ink);color:var(--paper2)}
.dt-g details[open] .tg i{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.dt-g summary:hover .nm{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}}
.dt-tals-wrap{padding:2px 0 20px}
.dt-tals-wrap .cap{font-family:var(--px);font-size:11px;line-height:1.5;color:var(--mute);margin-bottom:10px}
.dt-tals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
.dt-tal{display:flex;flex-direction:column;gap:6px;min-width:0}
.dt-tal .va-yt{box-shadow:3px 3px 0 var(--ink)}
.dt-tal .nm{font-weight:900;font-size:15px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin-top:4px;overflow-wrap:anywhere}
.dt-tal .nm a{text-decoration:none}
.dt-tal .nm a:hover{color:var(--coral-d);text-decoration:underline;text-underline-offset:3px}
.dt-tal .og .va-tag{font-size:10.5px;padding:0 6px;white-space:normal}
.dt-tal .acts{display:grid;gap:7px;margin-top:auto;padding-top:4px}
.dt-tal .va-btn.sm{font-size:12px;padding:7px 8px;white-space:normal;box-shadow:2px 2px 0 var(--ink)}
.dt-tal [data-mine][aria-pressed="true"]{background:var(--coral)}
.dt-none{font-size:14px;line-height:1.75;color:var(--ink2)}
.dt-load{font-family:var(--px);font-size:12.5px;line-height:1.7;color:var(--mute);padding:6px 0}
.dt-src{margin-top:30px}

/* ===== 前のお題の結果と、次のお題の予告 ===== */
.dt-more-grid{display:grid;gap:30px}
.dt-more-grid>:only-child{max-width:760px}   /* 1枚だけのときは、右を空けたまま横に伸ばさない */
.dt-more .tag{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-bottom:16px}
.dt-more .when{font-family:var(--px);font-size:12px;color:var(--mute)}
.dt-mvs{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.dt-mvs span{display:inline-block;background:var(--c);color:#fff;font-weight:900;font-size:16px;line-height:1.3;letter-spacing:-.02em;padding:6px 10px;border:var(--bd);font-feature-settings:"palt"}
.dt-mvs span span{display:inline-block;background:none;border:0;padding:0}
.dt-mvs b{font-family:"Unbounded",sans-serif;font-weight:800;font-size:13px;color:var(--ink)}
.dt-prev{padding:18px 18px 20px}
.dt-prev .dt-pwin{font-weight:900;font-size:21px;line-height:1.4;color:var(--ink);margin:14px 0 12px}
.dt-prev .dt-pwin b{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--c,#ee5a36) 45%,transparent) 62%)}
.dt-pnums{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--en);font-weight:800;font-size:18px;color:var(--ink)}
.dt-pnums small{font-weight:700;font-size:12px;margin-left:3px}
.dt-prev .acts{margin-top:16px}
/* 予告：インクの貼り紙。日付を大きく */
.dt-poster{position:relative;background:var(--ink) var(--grain);color:var(--paper2);border:var(--bd);box-shadow:8px 8px 0 var(--coral);padding:20px 18px 24px;transform:rotate(.8deg)}
.dt-poster .when{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font-family:var(--jp);font-size:15px;font-weight:900;color:var(--paper2);margin-bottom:16px}
.dt-poster .when b{font-family:var(--en);font-weight:800;font-size:58px;line-height:1;letter-spacing:0}
.dt-poster .dt-mvs b{color:var(--paper2)}
.dt-poster .dt-mvs span{border-color:var(--paper2)}
.dt-poster .says{display:grid;gap:4px;margin-top:16px;font-weight:700;font-size:13.5px;line-height:1.7;color:#d8d3c6}
.dt-poster .says span::before{content:"── ";font-family:var(--px);color:#8f8a7e}
.dt-poster.none .when{font-size:22px}

/* ===== 遊び方（フクロウのことば）。vote の決まりと同じ形 ===== */
.dt-rules{display:grid;grid-template-columns:minmax(0,1fr);max-width:1000px}
.dt-rules ul{margin:0}
.dt-rules .va-say{background:var(--paper2);padding:6px 18px 8px;font-weight:500}
.dt-rules .va-say::before{display:none}
.dt-rules li{position:relative;font-size:14.5px;line-height:1.8;color:var(--ink2);padding:11px 0 11px 34px}
.dt-rules li+li{border-top:1.5px dashed var(--line)}
.dt-rules li::before{content:"──";position:absolute;left:0;top:11px;font-family:var(--px);color:var(--coral-d)}
.dt-rules li b{font-weight:900;color:var(--ink)}
.dt-rules .who{order:-1;justify-self:end;position:relative;z-index:1;width:74px;margin-right:12px}
.dt-rules .dt-b{width:100%}
.dt-rules .dt-b .va-plate{left:auto;right:3px;transform:rotate(3deg);transform-origin:right bottom}

/* ===== 広い画面 ===== */
@media (min-width:560px){
  .dt-tals{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dt-card .nm{padding-right:120px}
  .dt-card .dt-stamp{width:124px}
  .dt-go{width:auto;min-width:320px;justify-self:start}
  .dt-confirm .dt-go{min-width:0}
}
@media (min-width:900px){
  .dt-stage{padding:34px 0 56px}
  .dt-top-in{margin-bottom:30px}
  .dt-term{font-size:16px}
  .dt-ring{grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);gap:0;align-items:center;padding:10px 0}
  .dt-band{--tape-h:46px;top:50%;margin-top:-23px}
  .dt-flag .hd{padding:16px 22px 18px}
  .dt-flag .en{font-size:12px;margin-bottom:6px}
  .dt-flag h3{font-size:clamp(32px,3.6vw,50px);line-height:1.12;text-shadow:3px 3px 0 rgba(21,21,21,.28)}
  .dt-flag .bd{padding:16px 22px 20px;gap:12px}
  .dt-flag .say{font-size:16px}
  .dt-flag .kinds .va-tag{font-size:12px;padding:0 8px}
  .dt-join{align-self:flex-start;font-size:16px;padding:12px 20px}
  .dt-flag.b .dt-join{align-self:flex-end}
  .dt-flag.a{transform:rotate(-2deg)}
  .dt-flag.b{transform:rotate(2deg)}
  .dt-ribbon{font-size:12.5px;padding:2px 10px;top:-14px}
  .dt-flag.res .bd{padding-bottom:20px;padding-right:130px}
  .dt-flag.b.res .bd{padding-right:22px;padding-left:130px}
  .dt-flag .dt-stamp.res{width:136px;right:-20px;bottom:-30px}
  .dt-flag.b .dt-stamp.res{left:-20px}
  .dt-vs{position:relative;left:auto;top:auto;margin:0 auto;width:118px;height:118px;grid-column:2;grid-row:1}
  .dt-vs b{font-size:32px}
  .dt-meter{margin-top:42px;max-width:1080px;margin-inline:auto}
  .dt-nums .nm{font-size:13.5px}
  .dt-nums .a .v b,.dt-nums .b .v b{font-size:60px}
  .dt-nums .v small{font-size:20px}
  .dt-nums .mid .v b{font-size:36px}
  .dt-nums .mid .v small{font-size:14px}
  .dt-nums .mid .w{font-size:22px}
  .dt-nums .mid em{font-size:11.5px}
  .dt-bar{height:32px}
  .dt-act{margin-top:46px}
  .dt-pass{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:44px;align-items:start;max-width:1180px;margin:0 auto}
  .dt-card .bd{min-height:170px;padding:18px 18px 20px}
  .dt-send{padding:20px 22px 24px}
  .dt-confirm{padding:24px 28px 26px}
  .dt-confirm .acts{flex-direction:row;justify-content:center}
  .dt-desk{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;max-width:1100px;margin:52px auto 0}
  .dt-b{width:92px}
  .dt-b.b{width:74px}
  .dt-b .va-plate{bottom:-8px}
  .dt-b .va-plate b{font-size:14px}
  .dt-b .va-plate small{font-size:10px}
  .dt-desk .va-say{font-size:15px;padding:13px 18px;margin-bottom:22px}
  .dt-desk .va-say::before{bottom:20px}
  .dt-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
  .dt-col-h b{font-size:26px}
  .dt-more-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:start}
  .dt-more-grid>:only-child{grid-column:1/-1}
  .dt-poster{padding:26px 28px 30px}
  .dt-poster .when b{font-size:76px}
  .dt-prev{padding:24px 26px 26px}
  .dt-rules{grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end}
  .dt-rules .va-say{padding:10px 26px 12px}
  .dt-rules .va-say::before{display:block;background:var(--paper2);top:auto;bottom:34px}
  .dt-rules li{font-size:15.5px;padding:13px 0 13px 38px}
  .dt-rules li::before{top:13px}
  .dt-rules .who{order:0;justify-self:auto;width:118px;margin:0;padding-bottom:14px}
  .dt-rules .dt-b .va-plate{left:50%;right:auto;transform:translateX(-50%) rotate(3deg);transform-origin:center}
}
@media (min-width:900px) and (max-width:1179px){.dt-tals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){
  .dt-rules{max-width:none}
  .dt-rules ul{columns:2;column-gap:48px;column-rule:1.5px dashed var(--line)}
  .dt-rules li{break-inside:avoid}
  .dt-rules li:nth-child(3){border-top:0}
}

/* 2026-11-15 運営者の直し：タレントの札のサムネイルはタレントのページへ（ここでは再生しない）。動画は、そのゲームの配信。送る箱はボタンだけ */
.dt-tal .dt-th{display:block;aspect-ratio:16/9;border:var(--bd);box-shadow:3px 3px 0 var(--ink);overflow:hidden;background:var(--ink);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.dt-tal .dt-th img{display:block;width:100%;height:100%;object-fit:cover}
.dt-tal .dt-th:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.dt-tal .vt{font-size:11.5px;font-weight:700;line-height:1.5;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dt-send-say{font-weight:700;font-size:14.5px;line-height:1.7;color:var(--ink)}

/* ===== 2026-11-15 お題は月1（判断 DTFREQ）：次のお題の最初の7日は、いちばん上に前のお題の結果の札 ===== */
.dt-flash[hidden]{display:none}
.dt-flash{margin:0 auto 26px;max-width:1180px}
.dt-flash-in{position:relative;display:grid;gap:10px;background:var(--paper2);border:var(--bd);box-shadow:8px 8px 0 var(--ink);padding:18px 18px 20px}
.dt-flash .tag{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.dt-flash .when{font-family:var(--px);font-size:12px;color:var(--mute)}
.dt-flash .ttl{font-weight:900;font-size:15px;line-height:1.5;color:var(--ink2)}
.dt-flash .win{font-weight:900;font-size:clamp(24px,3.4vw,38px);line-height:1.25;letter-spacing:-.04em;color:var(--ink);font-feature-settings:"palt"}
.dt-flash .win b{background:linear-gradient(transparent 60%,color-mix(in srgb,var(--c,#ee5a36) 45%,transparent) 60%)}
.dt-flash .win span,.dt-flash .win b span{display:inline-block}
.dt-flash .res .dt-bar{margin-top:10px}
.dt-flash .dt-pnums{font-size:15px;gap:12px}
.dt-flash .dt-pnums span{font-family:var(--jp);font-weight:900;font-size:13px}
.dt-flash .dt-pnums .dt-n{font-family:var(--en);font-size:18px;margin-left:4px}
.dt-flash .you{font-weight:700;font-size:14px;line-height:1.7;color:var(--ink2);padding-top:10px;border-top:2px dashed var(--line)}
.dt-flash .you b{font-weight:900;color:var(--ink);margin:0 2px}
.dt-flash .acts{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.dt-flash .acts small{font-family:var(--px);font-size:11.5px;color:var(--mute)}
@media (min-width:900px){
  .dt-flash-in{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:36px;padding:22px 28px 24px;align-items:center}
  .dt-flash .tag,.dt-flash .ttl{grid-column:1}
  .dt-flash .res{grid-column:2;grid-row:1/span 3}
  .dt-flash .you{grid-column:1/-1}
  .dt-flash .acts{grid-column:1/-1}
}

/* 団員証：お題の日ごとのマス（送った日＝陣営の色、今日＝太い枠、送らなかった日＝薄く、先の日＝点線）。下の段の空きを埋める */
.dt-days{margin-top:16px;padding-top:12px;border-top:2px dashed var(--line)}
.dt-days .cap{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.dt-days .cap span{font-family:var(--px);font-size:11px;color:var(--mute)}
.dt-days .cap small{font-family:var(--en);font-weight:700;font-size:11px;color:var(--mute)}
.dt-days ol{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;list-style:none;margin:0;padding:0}
.dt-days li{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;font-family:var(--en);font-weight:700;font-size:10px;line-height:1;color:var(--ink)}
.dt-days li.will{border:1.5px dashed #bdb8ab;color:#a7a297}
.dt-days li.miss{background:var(--paper);color:#bdb8ab}
.dt-days li.today{border:2.5px solid var(--ink);font-weight:800}
.dt-days li.on{background:var(--c);color:#fff;font-weight:800;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 70%,#151515)}
/* 団員証は、送る箱と同じ高さにそろえる */
.dt-pass{align-items:stretch}
.dt-card .bd{min-height:0}

/* 予告の札：1枚だけのときは横長（日付は左、陣営と一言は右）。右の空白を作らない */
.dt-poster .l,.dt-poster .r{min-width:0}
.dt-poster .when .to{flex-basis:100%;font-family:var(--px);font-weight:400;font-size:12px;color:#bdb8ab}
.dt-more-grid.one>:only-child{max-width:none}
@media (min-width:900px){
  .dt-more-grid.one .dt-poster{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:48px;align-items:center;transform:rotate(.4deg);padding:28px 36px 30px}
  .dt-more-grid.one .dt-poster .when{margin-bottom:0}
  .dt-more-grid.one .dt-poster .r{padding-left:40px;border-left:2px dashed #5d5a52}
  .dt-more-grid.one .dt-poster .dt-mvs>span{font-size:20px;padding:8px 14px}
  .dt-more-grid.one .dt-poster .says{font-size:15px}
}
.dt-pass .dt-send{display:flex;flex-direction:column}
.dt-pass .dt-send .dt-go,.dt-pass .dt-send .acts{margin-top:auto}
@media (min-width:560px){.dt-pass .dt-send .dt-go{align-self:flex-start}}
.dt-send-mid{display:flex;align-items:center;gap:18px}
.dt-send-mid .dt-stamp.ghost{flex:none;width:96px;opacity:.3;transform:rotate(-11deg)}
.dt-send-say small{display:block;margin-top:4px;font-family:var(--px);font-weight:400;font-size:11.5px;line-height:1.6;color:var(--mute)}
@media (min-width:900px){.dt-send-mid{flex:1;gap:24px}.dt-send-mid .dt-stamp.ghost{width:128px}}

/* ===== 陣営のみんなの、好きなゲーム（2026-11-15。判断 DTLIKE）===== */
.dt-likes[hidden]{display:none}
.dt-like-ask[hidden]{display:none}
.dt-like-ask{margin-bottom:28px}
.dt-like-q{display:grid;gap:12px;max-width:980px;padding:16px 16px 18px;background:var(--paper2);border:var(--bd);box-shadow:var(--sh)}
.dt-like-q .q b{display:block;font-weight:900;font-size:19px;line-height:1.4;color:var(--ink)}
.dt-like-q .q small{display:block;font-family:var(--px);font-size:11.5px;line-height:1.6;color:var(--mute)}
.dt-like-q .dt-opt.on{background:var(--c);color:#fff}
.dt-like-q .dt-opt:disabled{cursor:progress}
.dt-like-in{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;font-weight:700;font-size:14.5px;line-height:1.7;color:var(--ink)}
.dt-like-done{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:12px 16px;border:2px dashed var(--ink);background:color-mix(in srgb,var(--c) 10%,var(--paper2));max-width:980px}
.dt-like-done:focus{outline:none}
.dt-like-done .va-tag{background:var(--c)}
.dt-like-done b{font-weight:900;font-size:20px;color:var(--ink)}
.dt-like-done small{font-family:var(--px);font-size:11.5px;color:var(--mute)}
.dt-like-board .empty{padding:26px 10px;text-align:center;font-weight:700;font-size:14px;line-height:1.8;color:var(--ink2)}

/* 案 a：寄せ書き（陣営ごとの板に、ゲームの付箋が点々と。傾きと高さは、ゲームの id から決める＝開くたびに変わらない） */
.dt-boards{display:grid;gap:26px}
.dt-board{position:relative;background:color-mix(in srgb,var(--c) 9%,var(--paper));border:var(--bd);box-shadow:var(--sh-l);padding:0 0 20px;
  background-image:radial-gradient(color-mix(in srgb,var(--c) 22%,transparent) 1.2px,transparent 1.6px);background-size:16px 16px}
.dt-board .hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;background:var(--c);color:#fff;border-bottom:var(--bd);padding:9px 14px 10px}
.dt-board .hd b{font-weight:900;font-size:19px;line-height:1.3;letter-spacing:-.02em}
.dt-board .hd b span{display:inline-block}
.dt-board .hd>span{font-weight:700;font-size:13px}
.dt-board .notes{list-style:none;margin:0;padding:22px 14px 6px;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:14px 12px}
.note{position:relative;display:grid;justify-items:center;gap:2px;min-width:0;max-width:100%;padding:10px 14px 9px;background:#fffdf3;border:2px solid var(--ink);box-shadow:3px 3px 0 rgba(21,21,21,.85);transform:translateY(var(--dy)) rotate(var(--r));text-align:center}
.note::before{content:"";position:absolute;left:50%;top:-8px;width:34px;height:13px;margin-left:-17px;background:color-mix(in srgb,var(--c) 55%,#fff);opacity:.85;transform:rotate(-4deg)}
.note b{font-weight:900;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.note small{font-family:var(--en);font-weight:800;font-size:11px;color:var(--mute)}
.note.l b{font-size:21px}.note.m b{font-size:16.5px}.note.s b{font-size:13.5px}
.note.me{background:var(--c)}
.note.me b,.note.me small{color:#fff}
.note i{position:absolute;right:-10px;top:-12px;font-style:normal;font-weight:900;font-size:10.5px;background:var(--ink);color:#fff;padding:1px 6px;transform:rotate(8deg)}
[data-motion="on"] .note{animation:dt-note .55s cubic-bezier(.2,1.4,.4,1) calc(var(--i) * 90ms) backwards}
@keyframes dt-note{from{opacity:0;transform:translateY(calc(var(--dy) - 18px)) rotate(calc(var(--r) * 3)) scale(.8)}}
@media (prefers-reduced-motion:reduce){.note{animation:none!important}}
@media (min-width:900px){.dt-boards{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}.dt-board{min-height:260px}.dt-board.a{transform:rotate(-.6deg)}.dt-board.b{transform:rotate(.6deg)}}

.dt-like-q .dt-q{max-width:520px}