/* ═══ みんなの作品＝王さまの宝物庫・使った人の声＝えっけんの間（★2026-11-12 TAKURO「パターン2で」）═══
   見本＝配布ポータル/作品と声_デザイン案_2026-11-11/f_ousama.html。動き＝rpg.js・絵＝/img/rpg/
   ドット絵は「絵の1画素＝画面の4画素」（人は 64×128・顔は 6画素）。窓＝金のわく（9つに切って使う画像 win_gold.png・角 20px）。
   みんなの作品と使った人の声の画面（.view.rpg）の中だけに効かせる（ほかの画面と、大きく見る窓・書き直しの窓は前のまま） */
.rpg{--rg:#f2d27a;--rg2:#c9a24a;--rtx:#fbefd0;--rsub:#d8c39a;--rdk:#1a0f08;
  background:linear-gradient(rgba(14,10,8,.8),rgba(14,10,8,.88)),url(/img/rpg/castle_wall.png) 0 0/64px 64px;color:var(--rtx);
  overflow-x:clip}   /* 絵の後ろの光（左右に 12% はみ出す）で、ページがよこに動かないように（clip＝スクロールの箱にはしない） */
.rpg .rpg-scene img,.rpg .px{image-rendering:pixelated;image-rendering:crisp-edges}
.rpg-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ── 場面（玉座の間・えっけんの間）＝画面の幅いっぱい ── */
.rpg-hd{position:relative;padding-bottom:4px}
.rpg-scene{position:relative;height:600px;overflow:hidden;background:url(/img/rpg/castle_wall.png) 0 0/64px 64px;image-rendering:pixelated}
.rpg-scene::before{content:"";position:absolute;left:0;right:0;top:380px;bottom:0;background:url(/img/rpg/castle_floor.png) 0 0/64px 64px;image-rendering:pixelated;box-shadow:inset 0 12px 0 #2e3136,inset 0 16px 0 #6f737a}
.rpg-scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,0) 40%,rgba(0,0,0,.38))}
.rpg-throne::after{background:radial-gradient(340px 300px at 50% 250px,rgba(255,214,120,.26),transparent 70%),radial-gradient(160px 160px at calc(50% - 160px) 200px,rgba(255,170,70,.22),transparent 70%),radial-gradient(160px 160px at calc(50% + 160px) 200px,rgba(255,170,70,.22),transparent 70%),linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,0) 40%,rgba(0,0,0,.38))}
.rpg-audience{height:560px}
.rpg-audience::before{top:330px}
.rpg-audience::after{background:radial-gradient(170px 170px at calc(50% - 394px) 186px,rgba(255,170,70,.24),transparent 70%),radial-gradient(170px 170px at calc(50% + 394px) 186px,rgba(255,170,70,.24),transparent 70%),radial-gradient(300px 220px at calc(50% - 400px) 330px,rgba(255,214,120,.18),transparent 70%),linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,0) 40%,rgba(0,0,0,.42))}
.rpg-stage{position:absolute;left:50%;top:0;width:1120px;height:100%;transform:translateX(-50%);z-index:1}
.rpg-stage > *{position:absolute;display:block}
/* 玉座の間の物（1120px の舞台の中の場所） */
.rpg-throne .r-pl1{left:120px;top:124px}.rpg-throne .r-pl2{left:936px;top:124px}
.rpg-throne .r-rd1{left:254px;top:36px}.rpg-throne .r-rd2{left:786px;top:36px}
.rpg-throne .r-bn1{left:266px;top:44px}.rpg-throne .r-bn2{left:798px;top:44px}
.rpg-throne .r-t1{left:416px;top:150px}.rpg-throne .r-t2{left:672px;top:150px}.rpg-throne .r-t3{left:40px;top:180px}.rpg-throne .r-t4{left:1048px;top:180px}
.r-carpet{left:464px;top:356px;width:192px;height:244px;background:url(/img/rpg/carpet_edge.png) 0 0/32px 64px repeat-y,url(/img/rpg/carpet.png) 32px 0/64px 64px}
.r-carpet::after{content:"";position:absolute;right:0;top:0;width:32px;height:100%;background:url(/img/rpg/carpet_edge.png) 0 0/32px 64px repeat-y;transform:scaleX(-1)}
.r-step1{left:392px;top:348px;width:336px;height:32px;background:linear-gradient(#a3a9b1 0 4px,#8e949c 4px 26px,#5c6168 26px)}
.r-step2{left:432px;top:320px;width:256px;height:28px;background:linear-gradient(#b0b6be 0 4px,#9aa0a8 4px 22px,#666b73 22px)}
.rpg-throne .r-throne{left:508px;top:178px}
.rpg-throne .r-king{left:528px;top:196px}
.r-g1{left:344px;top:262px}.r-g2{left:720px;top:262px;transform:scaleX(-1)}
.r-rod{width:80px;height:8px;background:#3a2a1a;box-shadow:0 4px 0 #1a120a}
.r-rod::before,.r-rod::after{content:"";position:absolute;top:-2px;width:8px;height:12px;background:#c9a24a;box-shadow:inset 0 -3px 0 #8a6a22}
.r-rod::before{left:-6px}.r-rod::after{right:-6px}
.r-torch{width:32px;height:72px;--fw:32px;background:url(/img/rpg/torch.png) 0 0/64px 72px;image-rendering:pixelated;animation:rpgfl .5s steps(2) infinite}
.r-sh{width:64px;height:12px;border-radius:50%;background:rgba(0,0,0,.35)}
.rpg-throne .r-shk{left:528px;top:316px}.r-shg1{left:340px;top:378px}.r-shg2{left:716px;top:378px}
/* えっけんの間の物 */
.rpg-audience .r-pl1{left:20px;top:74px}.rpg-audience .r-pl2{left:1036px;top:74px}
.rpg-audience .r-rd1{left:308px;top:36px}.rpg-audience .r-rd2{left:732px;top:36px}
.rpg-audience .r-bn1{left:320px;top:44px}.rpg-audience .r-bn2{left:744px;top:44px}
.rpg-audience .r-t1{left:150px;top:150px}.rpg-audience .r-t2{left:938px;top:150px}
.r-rug{left:0;top:336px;width:1120px;height:128px;background:url(/img/rpg/carpet_edge_t.png) 0 0/64px 32px repeat-x,url(/img/rpg/carpet_edge_b.png) 0 100%/64px 32px repeat-x,url(/img/rpg/carpet.png) 0 0/64px 64px}
.rpg-audience .r-throne{left:92px;top:264px}
.rpg-audience .r-king{left:112px;top:290px}
.rpg-audience .r-shk{left:112px;top:410px}
.r-folk{top:272px;z-index:2;width:64px;height:128px;cursor:pointer}   /* z-index＝足もとの影と輪（-1）が、じゅうたんの下に隠れない */
.r-folk img{display:block;width:64px;height:128px}
.r-folk::after{content:"";position:absolute;left:2px;right:2px;bottom:-6px;height:12px;border-radius:50%;background:rgba(0,0,0,.35);z-index:-1}
.r-folk.on::before{content:"";position:absolute;left:-12px;right:-12px;bottom:-12px;height:20px;border-radius:50%;border:4px dashed var(--rg);z-index:-1}
.r-folk.s0{left:300px}.r-folk.s1{left:430px}.r-folk.s2{left:560px}.r-folk.s3{left:690px}.r-folk.s4{left:820px}.r-folk.s5{left:950px}
.r-bub{position:absolute;left:50%;bottom:138px;transform:translateX(-50%);z-index:4;min-width:40px;padding:0 6px;text-align:center;font:18px/28px var(--pix);color:#111;white-space:nowrap;
  border:8px solid transparent;border-image:url(/img/rpg/bubble.png) 8 fill / 8px / 0 stretch;image-rendering:pixelated}
.r-bub::after{content:"";position:absolute;left:50%;bottom:-16px;margin-left:-4px;width:8px;height:8px;background:#111;box-shadow:0 -4px 0 #111}
.r-bub.hit{background:var(--rg);border:4px solid #1a0f08;border-image:none;padding:2px 10px}
@keyframes rpgfl{to{background-position:calc(var(--fw) * -2) 0}}
@keyframes rpgbob{50%{transform:translateY(-4px)}}
@keyframes rpgnudge{50%{transform:translateX(4px)}}
@keyframes rpghop{50%{transform:translateY(4px)}}
.r-bob{animation:rpgbob 1.4s steps(1) infinite}
.r-bob.d1{animation-delay:.35s}.r-bob.d2{animation-delay:.7s}.r-bob.d3{animation-delay:1.05s}
.r-g2.r-bob{animation:none}
/* 左上の「まち › 作品」と、上の看板（この画面の見出し） */
.rpg .rpg-crumb{position:absolute;left:clamp(14px,2vw,28px);top:16px;z-index:3;color:#e8dcc0;text-shadow:0 2px 0 rgba(0,0,0,.6)}
.rpg .rpg-crumb a{color:#fff3d6;border-bottom-color:rgba(255,243,214,.5)}
.rpg-plaque{position:absolute;left:50%;top:16px;z-index:3;transform:translateX(-50%);margin:0;padding:2px 18px 4px;text-align:center;white-space:nowrap;
  border:20px solid transparent;border-image:url(/img/rpg/win_gold.png) 20 fill / 20px / 0 stretch;image-rendering:pixelated;
  font:400 25px/1.25 var(--pix);color:var(--rg);filter:drop-shadow(0 6px 0 rgba(0,0,0,.4))}
.rpg-plaque span{display:block;font-size:13px;color:var(--rsub)}
/* ── 金の窓・名前の札・顔・会話・コマンド ── */
.rpg-win{position:relative;border:20px solid transparent;border-image:url(/img/rpg/win_gold.png) 20 fill / 20px / 0 stretch;image-rendering:pixelated;
  color:var(--rtx);font-family:var(--pix);filter:drop-shadow(0 6px 0 rgba(0,0,0,.38))}
.rpg-nm{position:absolute;left:4px;top:-50px;z-index:3;padding:0 8px;font:15px/1.7 var(--pix);color:var(--rg);white-space:nowrap;
  border:20px solid transparent;border-image:url(/img/rpg/win_gold.png) 20 fill / 20px / 0 stretch;image-rendering:pixelated}
.rpg-talk{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;width:min(1120px,calc(100% - 40px));margin:-150px auto 0}
.rpg-talk1{grid-template-columns:minmax(0,1fr);margin-top:-118px}   /* えっけんの間＝会話の窓だけ（国の人の足もとにかからない高さ） */
/* 中身は名前の札の下から（札＝窓の内がわの上から 16px まで下りてくる・★11/12 測って直した＝前は顔の四角の上のふちと文の1行目の頭が札にかくれていた） */
.rpg-msg{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:start;min-height:150px;padding:24px 14px 26px}
.rpg-msg p{margin:0;font-size:19px;line-height:1.9;color:var(--rtx)}
/* 顔の四角＝どの顔（王さま 72×81・国の人 96×90）でも、4辺が全部見える大きさ（★11/12 TAKURO「王さまの四角の下が無い」＝前は絵が四角より大きかった） */
.rpg-face{display:grid;place-items:center;width:112px;height:112px;background:#120a06;border:4px solid var(--rg2);box-shadow:inset 0 0 0 2px #000,0 0 0 2px #000}
.rpg-face img{display:block;max-width:96px;max-height:96px;image-rendering:pixelated}
.rpg-more{position:absolute;right:16px;bottom:8px;width:28px;height:20px;background:url(/img/rpg/more.png) 0 0/28px 20px no-repeat;image-rendering:pixelated;animation:rpghop .8s steps(1) infinite}
.rpg-cmd{display:flex;flex-direction:column;justify-content:center;padding:6px 14px}
.rpg-cmd a{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--rtx);text-decoration:none;font-size:18px;line-height:1.4}
.rpg-cmd a::before{content:"";flex:none;width:20px;height:28px}
.rpg-cmd a small{display:block;font-size:12px;color:var(--rsub)}
.rpg-cmd a span{display:block}
.rpg-cmd a:hover,.rpg-cmd a:focus-visible{color:#fff}
.rpg-cmd a:hover::before,.rpg-cmd a:focus-visible::before,.rpg-cmd:not(:hover):not(:focus-within) a:first-child::before{background:url(/img/rpg/cur.png) 0 0/20px 28px no-repeat;image-rendering:pixelated;animation:rpgnudge .8s steps(1) infinite}
.rpg-cmd a:focus-visible{outline:3px solid var(--rg);outline-offset:2px}
/* ── 宝物庫（作品の一覧）＝金のわくの絵と、金の名札 ── */
.rpg .vw{padding-top:56px}
.rpg .wk-list{position:relative}
.rpg .wk-head{margin-bottom:28px}
.rpg .wk-cnt{color:var(--rtx);font-size:1.05rem}
.rpg .wk-cnt b{color:var(--rg)}
.rpg .chips{gap:10px}
.rpg .chips button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:2px 10px;font-size:15px;color:var(--rtx);background:none;border-radius:0;box-shadow:none;
  border:20px solid transparent;border-image:url(/img/rpg/win_gold.png) 20 fill / 20px / 0 stretch;image-rendering:pixelated;opacity:.72;filter:grayscale(.45)}
.rpg .chips button small{color:var(--rsub);font-size:13px}
.rpg .chips button:hover{opacity:1;filter:none}
.rpg .chips button[aria-pressed="true"]{opacity:1;filter:drop-shadow(0 0 6px rgba(242,210,122,.55));color:#fff;background:none}
.rpg .chips button[aria-pressed="true"] small{color:var(--rg)}
.rpg .chips button:focus-visible{outline:3px solid var(--rg);outline-offset:2px}
.rpg #wkChips button::before{content:"";flex:none;width:24px;height:24px;background:url(/img/px/guidebook.png) center/24px 24px no-repeat;image-rendering:pixelated}
.rpg #wkChips button[data-k="発電所"]::before{background-image:url(/img/px/plant_builder_icon.png)}
.rpg #wkChips button[data-k="送電・変電"]::before{background-image:url(/img/px/substation_builder.png)}
.rpg #wkChips button[data-k="工場"]::before{background-image:url(/img/px/install_box.png)}
.rpg #wkChips button[data-k="街・くらし"]::before{background-image:url(/img/px/house_style_modern.png)}
.rpg #wkChips button[data-k="電車"]::before{background-image:url(/img/px/enecra_trn_line_builder.png)}
.rpg #wkChips button[data-k="そのほか"]::before{background-image:url(/img/px/photo_frame.png)}
.rpg .wk-tagchips{margin-top:4px}
.rpg .wk-tagchips button{min-height:36px;font-size:13px;padding:0 6px;border-width:16px;border-image-width:16px}
.rpg .chips-l{color:var(--rsub)}
.rpg .wk-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:58px 44px;align-items:start}
.rpg .wk-cards .wk{position:relative;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;text-align:center;align-items:center}
.rpg .wk-cards .wk::before{content:"";position:absolute;left:-12%;right:-12%;top:-40px;bottom:-10px;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 60% at 50% 20%,rgba(255,206,120,.2),transparent 72%)}
.rpg .wk-cards .wk-ph{z-index:1;width:100%;aspect-ratio:auto;border:20px solid transparent;border-image:url(/img/rpg/win_gold.png) 20 fill / 20px / 0 stretch;image-rendering:pixelated;background:none;overflow:visible;filter:drop-shadow(0 10px 0 rgba(0,0,0,.4))}
.rpg .wk-cards .wk-ph img{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;image-rendering:auto;background:#120a06}
.rpg .wk-cards .wk-ph.tall img{object-fit:contain}
.rpg .wk-cards .wk-ph:hover img{transform:none}
.rpg .wk-cards .wk-ph:hover{filter:drop-shadow(0 10px 0 rgba(0,0,0,.4)) drop-shadow(0 0 10px rgba(242,210,122,.45))}
.rpg .wk-cards .wk-ph:focus-visible{outline:3px solid var(--rg);outline-offset:6px}
.rpg .wk-cards .wk-tag{left:6px;top:6px;font-size:12px;background:var(--rg);border-color:#1a0f08}
.rpg .wk-cards .wk-n{right:6px;bottom:6px;font:12px var(--pix);background:rgba(26,15,8,.88);border-radius:0;padding:1px 7px}
.rpg .wk-cards .wk-tx{position:relative;z-index:1;flex:none;display:inline-flex;flex-direction:column;align-items:center;gap:2px;max-width:100%;margin-top:14px;padding:6px 16px 7px;
  background:linear-gradient(#f4dc94,#c9a24a);border:4px solid #1a0f08;color:#2a1a0a;box-shadow:0 6px 0 rgba(0,0,0,.4)}
.rpg .wk-cards .wk-t{margin:0;font-size:15px;color:#2a1a0a}
.rpg .wk-cards .wk-c{display:none}
.rpg .wk-cards .wk-by{margin:0;justify-content:center;font-size:12px;color:#5a3d12}
.rpg .wk-cards .wk-by b{font-size:12px;color:#3a2408}
.rpg .wk-cards .wk-by b.anon{color:#6a4a1a}
/* 1ページ目のいちばん新しい作品＝大きなわく（★ あたらしい 作品＝★2026-11-13 TAKURO「たからもの って文言も違和感ある」） */
.rpg .wk-cards.p1 .wk:first-child{grid-column:span 2;grid-row:span 2}
.rpg .wk-cards.p1 .wk:first-child .wk-t{font-size:20px}
.rpg .wk-cards.p1 .wk:first-child .wk-ph::after{content:"★ あたらしい 作品";position:absolute;left:-30px;top:-2px;z-index:3;font:15px var(--pix);color:#fff6d8;background:#b8262e;padding:5px 14px;border:4px solid #1a0f08;box-shadow:0 4px 0 rgba(0,0,0,.4);white-space:nowrap}
.rpg:lang(en) .wk-cards.p1 .wk:first-child .wk-ph::after{content:"★ Newest creation"}
/* ★2026-11-12 送る前の確認のカードは1枚＝上の3列（せまい画面は2列）が効いて、1列分の細さにつぶれていた（狭い画面では題名が2字ずつ折れた）。
   一覧と同じ見た目のまま、幅は map.css の .wk-prev と同じ「300px まで」に戻す。分身の顔（.wk-av）も、ニックネームの行のまん中に */
.rpg .wk-cards.wk-prev{grid-template-columns:minmax(0,300px)}
.rpg .wk-cards .wk-by .wk-av{align-self:center}
.rpg .wk-none,.rpg .wk-note{background:rgba(26,15,8,.85);color:var(--rtx);border:2px solid var(--rg2);border-radius:0}
.rpg .wk-note.ng{background:#4a1410;color:#ffd8cc;border-color:#d0303a}
.rpg #wkEmpty{background:rgba(26,15,8,.85);color:var(--rtx);border:2px dashed var(--rg2)}
.rpg .wk-pager{margin-top:44px;gap:8px}
.rpg .wk-pager button{min-width:44px;height:44px;color:var(--rtx);background:#1a0f08;border:3px solid var(--rg2);border-radius:0;box-shadow:0 4px 0 #000}
.rpg .wk-pager button:hover{background:#2a1810}
.rpg .wk-pager button[aria-current="page"]{background:var(--rg);color:#1a0f08;border-color:var(--rg)}
.rpg .wk-pager .gap{color:var(--rsub)}
/* ── 送る・あなたが送った作品・感想のフォーム＝金のわくの紙（中は前のまま＝紙の色の作り） ── */
.rpg .wk-cols{margin-top:64px}
.rpg .form-card,.rpg .vo-form{color:var(--ink2);background:var(--card);background-clip:padding-box;border:20px solid transparent;border-radius:0;box-shadow:none;
  border-image:url(/img/rpg/win_gold.png) 20 / 20px / 0 stretch;image-rendering:pixelated;filter:drop-shadow(0 8px 0 rgba(0,0,0,.4))}
.rpg .form-card *,.rpg .vo-form *{image-rendering:auto}
/* ── えっけんの間の「こえの きろく」と、感想のフォーム ── */
.rpg .vo-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;margin-top:20px}
/* ★2026-11-13 TAKURO「感想の左側が空いてるけどわざと？」＝左の列は「こえの きろく」（載せた声の一覧）の場所。
   声がまだ1つも無い時は、その窓を出さない（hidden）ので、広い画面で左が空いていた。
   その時は列を作らず、フォームだけを真ん中に置く（声が載ると rpg.js が窓を出す＝前の2列に戻る） */
.rpg .vo-grid:has(> .vo-col > .rpg-log[hidden]){grid-template-columns:minmax(0,1fr)}
.rpg .vo-grid:has(> .vo-col > .rpg-log[hidden]) > .vo-col{display:none}
.rpg .vo-grid:has(> .vo-col > .rpg-log[hidden]) > .vo-form{width:min(100%,720px);justify-self:center}
.rpg-log{padding:24px 8px 6px}
.rpg .vo-list{display:block}
.rpg .vo-list .vo{display:grid;grid-template-columns:48px minmax(0,1fr);gap:2px 14px;align-items:start;width:100%;margin:0;padding:10px 8px;text-align:left;
  font:15px/1.75 var(--pix);color:var(--rtx);background:none;border:0;border-top:2px solid rgba(201,162,74,.28);border-radius:0;box-shadow:none;cursor:pointer}
.rpg .vo-list .vo:first-child{border-top:0}
.rpg .vo-list .vo img{grid-row:span 2;width:48px;height:45px;image-rendering:pixelated}
.rpg .vo-list .vo .who{color:var(--rg);font-size:14px;line-height:1.5}
.rpg .vo-list .vo .tx{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}   /* 名前の下に文（長い声は3行まで・全部は上の会話の窓） */
.rpg .vo-list .vo:hover{background:rgba(201,162,74,.1)}
.rpg .vo-list .vo[aria-pressed="true"]{background:rgba(201,162,74,.2)}
.rpg .vo-list .vo:focus-visible{outline:3px solid var(--rg);outline-offset:-3px}
.rpg-audience .r-folk:hover img{filter:drop-shadow(0 0 6px rgba(242,210,122,.7))}
/* ── 中くらいの画面 ── */
@media (max-width:1180px){
  .rpg-talk{grid-template-columns:minmax(0,1fr) 300px}
  .rpg-talk1{grid-template-columns:minmax(0,1fr)}   /* えっけんの間＝会話の窓だけ（★11/13 前はここで右に 300px の空きの列ができ、761〜1180px で窓が半分の幅になっていた） */
  .rpg .vo-grid{grid-template-columns:1fr}
}
/* ── 王さまの文を3行に（★2026-11-13 TAKURO「王さまの文字を3行になるようにして」）──
   文は index.html の文の中の改行（
）の所で折る＝3行。いちばん長い行＝29 字分（19px で 551px・英語は 57 字で 542px）。
   折るのは、その行が入る幅の時だけ（white-space:pre-line）。入らないスマホの細い画面（610px 未満）は、今までどおり自然に折る。
   ならべ方は場面（.rpg-hd）の幅で決める（サイドのメニューがある画面では、場面の幅＝画面の幅 − 238px）:
     1160px 以上＝今までどおり（会話の窓とコマンドの窓を横にならべる・文の幅 572px）
     1120〜1159px＝コマンドの窓を 300px に（文の幅 562〜601px・1366px の画面など）
     800〜1119px＝会話の窓を上・コマンドを下に横1列（820px までで真ん中）。前は右のコマンドの窓に押されて、文の幅が 100〜450px（5〜21 行）の細い窓になっていた
     800px 未満（スマホをのぞく）＝上と同じならべ方で、顔の四角と字を小さく（字 16px・文の幅 478px から）
   スマホ（760px まで）のならべ方は今までどおり。🚨窓の幅・顔・字の大きさを変えたら、3行が入るかを測り直す（いちばん長い行の幅 ≦ 文の幅） */
.v-works .rpg-hd{container:rpghd/inline-size}
/* スマホの細い画面で自然に折る時も、言葉の切れ目（空白と「、」「。」のあと）で折る（前は「と／どけて」「か／ざっておる」のように言葉の中で折れていた。長くて入らない時は overflow-wrap で折れる） */
.v-works .rpg-msg .lead{word-break:keep-all}
/* えっけんの間の王さまの文（声がまだ無い時）も同じ（★11/13 前は「来／ておらぬ」と折れていた。送ってくれた人の声は .lead ではない＝前のまま） */
.v-voices .rpg-msg .lead{word-break:keep-all}
@media (min-width:760.02px){
  .v-works .rpg-msg .lead{white-space:pre-line}
  @container rpghd (max-width:1159.98px){
    .v-works .rpg-talk{grid-template-columns:minmax(0,1fr) 300px}
  }
  @container rpghd (max-width:1119.98px){
    .v-works .rpg-talk{grid-template-columns:minmax(0,1fr);gap:24px;width:min(820px,calc(100% - 40px))}
    .v-works .rpg-cmd{flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;column-gap:8px;padding:4px 10px}
  }
  @container rpghd (max-width:799.98px){
    .v-works .rpg-msg{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:22px 8px 24px}
    .v-works .rpg-msg p{font-size:16px}
    .v-works .rpg-face{width:76px;height:76px}
    .v-works .rpg-face img{max-width:64px;max-height:64px}
  }
}
@media (min-width:610px) and (max-width:760px){.v-works .rpg-msg .lead{white-space:pre-line}}
/* ── せまい画面（スマホ）＝舞台は 390px・物を減らす ── */
@media (max-width:760px){
  .rpg-scene{height:520px}.rpg-scene::before{top:330px}
  .rpg-audience{height:480px}.rpg-audience::before{top:270px}
  .rpg-stage{width:390px}
  .rpg-throne .r-pl1,.rpg-throne .r-pl2,.rpg-throne .r-t3,.rpg-throne .r-t4,.r-g1,.r-g2,.r-shg1,.r-shg2,.rpg-throne .r-rd1,.rpg-throne .r-rd2,.rpg-throne .r-bn1,.rpg-throne .r-bn2{display:none}
  .r-carpet{left:99px;top:306px}
  .r-step1{left:27px;top:298px}.r-step2{left:67px;top:270px}
  .rpg-throne .r-throne{left:143px;top:128px}.rpg-throne .r-king{left:163px;top:146px}.rpg-throne .r-shk{left:163px;top:266px}
  .rpg-throne .r-t1{left:40px;top:110px}.rpg-throne .r-t2{left:318px;top:110px}
  .rpg-audience .r-pl1,.rpg-audience .r-pl2,.rpg-audience .r-rd1,.rpg-audience .r-rd2,.rpg-audience .r-bn1,.rpg-audience .r-bn2,.rpg-audience .r-throne{display:none}
  .rpg-audience .r-t1{left:16px;top:96px}.rpg-audience .r-t2{left:342px;top:96px}
  .r-rug{width:390px;top:276px}
  .rpg-audience .r-king{left:14px;top:230px}.rpg-audience .r-shk{left:14px;top:350px}
  .r-folk{top:222px}
  .r-folk.s0{left:100px}.r-folk.s1{left:190px}.r-folk.s2{left:280px}.r-folk.s3,.r-folk.s4,.r-folk.s5{display:none}
  .rpg-plaque{font-size:18px;padding:0 10px}
  .rpg-plaque span{font-size:11px}
  .rpg .rpg-crumb{display:none}
  .rpg-talk{grid-template-columns:1fr;gap:26px;width:calc(100% - 20px);margin-top:-110px}
  .rpg-talk1{margin-top:-96px}
  .rpg-msg{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:22px 8px 24px}
  .rpg-msg p{font-size:15px}
  .rpg-face{width:76px;height:76px}
  .rpg-face img{max-width:64px;max-height:64px}
  .rpg .wk-cards{grid-template-columns:1fr 1fr;gap:34px 16px}
  .rpg .wk-cards.wk-prev{grid-template-columns:minmax(0,300px)}
  .rpg .wk-cards.p1 .wk:first-child{grid-row:auto}
  .rpg .wk-cards .wk-t{font-size:13px}
  .rpg .wk-cards.p1 .wk:first-child .wk-ph::after{left:-14px;font-size:13px;padding:3px 10px}
  .rpg .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}
  .rpg .chips button{flex:none}
}
/* せまい画面（320〜369px）＝舞台（390px）の左右が切れるので、えっけんの間の王さまと国の人を内がわへ寄せる（★11/12 320px で王さまが左のはしで切れていた） */
@media (max-width:369px){
  .rpg-audience .r-king,.rpg-audience .r-shk{left:38px}
  .rpg-audience .r-t1{left:40px}.rpg-audience .r-t2{left:334px}
  .r-folk.s0{left:114px}.r-folk.s1{left:198px}.r-folk.s2{left:282px}
}
/* 色を強くする表示（Windows のコントラスト）＝絵のわくが消えるので、線で区切る */
@media (forced-colors:active){
  .rpg-win,.rpg-plaque,.rpg .chips button,.rpg .wk-cards .wk-ph,.rpg .form-card,.rpg .vo-form{border:3px solid CanvasText;border-image:none}
  .rpg .chips button[aria-pressed="true"]{outline:3px solid Highlight}
  .rpg .vo-list .vo[aria-pressed="true"]{outline:3px solid Highlight}
}
@media (prefers-reduced-motion:reduce){.r-torch,.r-bob,.rpg-more,.rpg-cmd a::before{animation:none !important}}