/* TypeRally の名札。TARGETLET の着せ替え（style.css）は変えずに、名前に関わる所だけを上書きする。
   見た目の作り直しは着せ替えの回でやる。 */
.sheet::after{content:""}
.masthead a.chip{text-decoration:none; display:inline-flex; align-items:center}
.masthead a.chip[hidden]{display:none}
/* 言葉を選ぶ欄（17言語）。スマホの幅でも上の並びが横にはみ出さないように、幅を抑えて、足りなければ折り返す */
#selLang{max-width:8.2em; text-overflow:ellipsis}
.masthead .chrome:has(#selLang){flex-wrap:wrap; justify-content:flex-end; row-gap:6px}
/* 苦手な単語（土台の上だけ）。赤い札＝引っかかった物差し。右の数字＝苦手度（0〜100） */
.weak-panel .weak-formula{margin:-8px 0 10px; font-size:calc(13px * var(--proj)); color:var(--ink-soft)}
.weak-row{grid-template-columns:2.2em 1fr auto}
.weak-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
.weak-chip{font-size:calc(14px * var(--proj)); line-height:1.5; padding:1px 11px; border:1.5px solid var(--rule-strong); border-radius:999px; color:var(--ink-soft); background:var(--paper-2)}
.weak-chip.hot{background:var(--red); border-color:var(--red); color:#fff; font-weight:800}
.weak-why{margin-top:8px; font-size:calc(15px * var(--proj)); font-weight:700; color:var(--ink-soft)}
.weak-why.hot{color:var(--red)}
.weak-score{display:grid; justify-items:end; gap:2px; min-width:4.6em}
.weak-score b{font-family:var(--disp); font-size:calc(34px * var(--proj)); line-height:1; color:var(--red)}
.weak-score span{font-size:calc(11px * var(--proj)); font-weight:700; color:var(--ink-soft)}
.weak-bar{display:block; width:4.6em; height:6px; background:var(--rule); border-radius:3px; overflow:hidden}
.weak-bar i{display:block; height:100%; background:var(--red)}
@media (max-width:560px){ .weak-row{grid-template-columns:1.8em 1fr} .weak-score{grid-column:2; justify-items:start; grid-auto-flow:column; align-items:baseline; gap:8px} .weak-bar{align-self:center} }
/* スマホの幅では、部屋のコードの字を少し小さくする（W や M の多いコードで、画面から横にはみ出していた） */
@media (max-width:480px){ .roomcode{font-size:clamp(40px, 13vw, 64px); padding:8px 16px 10px; max-width:100%; box-sizing:border-box} }
/* ── 表彰台の絵（土台の上だけ。html に .tr-art が付く）──
   絵は TYPERALLY/art/ で作った物（台 1枚・額縁3つ・メダル3つ・杯）。台の絵は横:縦 = 2.6361:1、段の高さは 銀 0.8291・金 1・銅 0.712（art.json）。
   段の高さを絵の幅から決めるので、.podium を入れ物（container）にして cqw で測る。 */
/* 台の幅は、画面の高さからも決める（優勝者の名前から台の下まで、先生の画面の1画面に入れる） */
.tr-art .podium{container-type:inline-size; gap:0; max-width:min(980px, max(520px, calc((100vh - 545px) * 2.6361))); background:url(/p/art/podium.webp) center bottom / 100% auto no-repeat}
.tr-art .step-block{border:0; border-radius:0; background:none !important; box-shadow:none; align-items:center; padding-top:2.4cqw}
.tr-art .step.first .step-block{height:37.93cqw}
.tr-art .step.second .step-block{height:31.45cqw}
.tr-art .step.third .step-block{height:27.01cqw}
.tr-art .step.empty .step-block{opacity:1}
.tr-art .step-rank{font-size:7.2cqw; color:#fff; text-shadow:0 .04em 0 rgba(0,0,0,.35), 0 0 .5em rgba(0,0,0,.25); -webkit-text-stroke:.012em rgba(0,0,0,.35)}
/* 名前は額縁の中に（金・銀・銅）。額縁の絵は9つに切って、名前の長さに合わせて伸ばす。字は段の幅に合わせて小さくし、語の途中では折らない */
.tr-art .step-name{position:relative; box-sizing:border-box; max-width:96%; margin:.5em 0 .1em; padding:.05em .2em; color:#1a2238; line-height:1.2;
  font-size:clamp(13px,4.2cqw,42px); word-break:keep-all; overflow-wrap:anywhere; text-wrap:balance;
  border-style:solid; border-width:.62em .7em; border-image:url(/p/art/frame-silver.webp) 26% 15.5% fill / .62em .7em stretch}
.tr-art .step.first .step-name{font-size:clamp(14px,4.9cqw,50px); border-image-source:url(/p/art/frame-gold.webp)}
.tr-art .step.third .step-name{border-image-source:url(/p/art/frame-bronze.webp)}
.tr-art .step.is-mine .step-name{color:#0b3ea8; text-decoration:none}
/* メダルは、額縁の左上の角に掛ける（縦に場所を取らない。先生の画面で、台まで1画面に入るように） */
.tr-art .step-name::before{content:""; position:absolute; left:-1.25em; top:-1.5em; width:1.25em; aspect-ratio:320 / 529; background:url(/p/art/medal-silver.webp) center / contain no-repeat; filter:drop-shadow(0 .05em .08em rgba(0,0,0,.3))}
.tr-art .step.first .step-name::before{background-image:url(/p/art/medal-gold.webp); width:1.4em; left:-1.35em; top:-1.7em}
.tr-art .step.third .step-name::before{background-image:url(/p/art/medal-bronze.webp)}
.tr-art .step-flag{font-size:clamp(24px,4.2cqw,52px); line-height:1}
.tr-art .step-score{margin-bottom:2px}
/* 優勝の杯は見出しの横に。優勝者の大きな名前は少し小さくして、台まで1画面に入れる */
.tr-art .podium-title{display:flex; align-items:center; justify-content:center; gap:.4em}
.tr-art .podium-title::before{content:""; flex:none; width:clamp(40px,4.6vw,72px); aspect-ratio:320 / 395; background:url(/p/art/trophy.webp) center / contain no-repeat}
.tr-art .podium-champ{font-size:clamp(34px,5.4vw,76px); margin:2px 0 8px}

/* ── 団体戦と Versus の結果にも絵（土台の上だけ）──
   団体戦: 上位3チームの表彰台（app.js の teamPodium。骨組みが個人戦と同じなので、上の絵がそのまま載る）。大きなチームのしるしは台の上に出るので、上の1つは畳む。 */
.tr-art .team-results .team-win-icon{display:none}
.tr-art .team-podium{margin-top:6px}
/* Versus: 王冠の絵文字を杯の絵に、勝った人の名前を金の額縁に、1〜3位の段の数字をメダルに。段はメダルが入る高さにする */
.tr-art .vs-crown{font-size:0; width:62px; aspect-ratio:320 / 395; margin:0 auto 2px; background:url(/p/art/trophy.webp) center / contain no-repeat; filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.tr-art .vs-winname{display:inline-block; box-sizing:border-box; max-width:92%; margin-top:10px; padding:.05em .35em; color:#1a2238; font-size:22px; line-height:1.25; word-break:keep-all; overflow-wrap:anywhere;
  border-style:solid; border-width:.62em .7em; border-image:url(/p/art/frame-gold.webp) 26% 15.5% fill / .62em .7em stretch}
.tr-art .vs-step.r1 .vs-block{height:132px}
.tr-art .vs-step.r2 .vs-block{height:108px}
.tr-art .vs-step.r3 .vs-block{height:92px}
.tr-art .vs-step.r1 .vs-block b, .tr-art .vs-step.r2 .vs-block b, .tr-art .vs-step.r3 .vs-block b{font-size:0; width:30px; aspect-ratio:320 / 529; background:url(/p/art/medal-gold.webp) center / contain no-repeat; filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.tr-art .vs-step.r2 .vs-block b{background-image:url(/p/art/medal-silver.webp)}
.tr-art .vs-step.r3 .vs-block b{background-image:url(/p/art/medal-bronze.webp)}


/* ── 呼び名の「おまかせ」・ロビーのしるし（土台の上だけ）── */
.jfw .nick-dice{align-self:flex-start; margin-top:4px; font-size:calc(13px * var(--proj))}
.pchip .pmark{font-size:1.15em; line-height:1}
/* 先生のロビーの参加用 QR（部屋の番号のすぐ下・真ん中） */
.vs-qr.live-qr{margin:10px auto 6px; border-color:var(--ink)}
/* 生徒のロビーの「あなたのしるし」 */
.mymark{display:flex; align-items:center; justify-content:center; gap:10px; margin:6px 0 10px; font-weight:800}
.mymark-e{font-size:calc(40px * var(--proj)); line-height:1}

/* ═══════════════════════════════════════════════════════════════════════
   TypeRally の着せ替え（2026-10-07・Stage 4・2回目「やわらかい紙」）
   見本の絵（生成りの紙・丸い角・やわらかい影・金茶の差し色・明朝の題字・ぼかした写真の背景）の方向。
   決め事: 機能と遊び方は今のまま／絵にあって今は無い物（発音記号・覚えた／わからない）は入れない／
           先生が映す画面（ロビー・レース・表彰台・Versus）は、写真を敷かず、字を濃く大きく保つ／書体は端末の物だけ。
   土台の上だけ（html に .tr-art）。TARGETLET として動かす時は、元の着せ替えのまま。
   作り: style.css の着せ替えの変数を上書きし、飾り（斜めの帯・四隅の鉤・余白の英字）を外す。部品（DOM）は変えない。
   場面は :has() で見分ける（映す画面＝部屋の番号・レースの表・表彰台・Versus が在る時）。
   ═══════════════════════════════════════════════════════════════════════ */
html.tr-art:root{
  --paper:#f7f2ea; --paper-2:#fffaf3; --paper-3:#efe6d8;
  --ink:#141a23; --ink-soft:#3f4854; --rule:#d2c3a8; --rule-strong:#a8956f;
  --red:#cc2b20; --navy:#1b3a66; --gold:#c08a1e; --green:#1f6e4c;
  --cover:#1c2430; --cover-deep:#11161d; --band:#1c2430;
  --acc:#141a23; --acc-2:#283241; --hot:#8a5d0c; --on-acc:#ffffff;
  --panel:#fffbf5; --panel-line:#b7a37c; --panel-shadow:0 16px 30px -20px rgba(60,42,14,.55);
  --card-shadow:0 10px 22px -16px rgba(60,42,14,.55); --card-shadow-hover:0 18px 30px -16px rgba(60,42,14,.7); --card-border-image:none; --card-radius:14px;
  --glow:rgba(28,36,48,.35); --glow-soft:rgba(197,154,74,.30); --hot-glow:rgba(200,55,45,.25);
  --en-label:#5a5140; --ds:#2f2b24; --icon:#8a5d0c; --sub:#4a443a; --foot:#5a5140;
  --chip-line:#a8956f; --chip-bg:#fffbf5; --badge-bg:#1c2430; --badge-shadow:none;
  --tag-bg:transparent; --tag-fg:#1c2430; --tag-line:transparent;
  --bar-glow:none; --score-glow:none;
  --code-bg:#fffbf5; --code-fg:#141a23; --code-line:#141a23; --code-shadow:0 16px 34px -24px rgba(70,52,24,.5); --code-ts:none;
  --tile-hover:#f3e9d8; --ghost-hover:#f3e9d8;
  --let-bg:transparent; --let-fg:#a06c0a; --let-shadow:none; --let-ts:none;
  --rule-filter:none; --wm-fill:transparent; --wm-line:transparent; --tag-tr:""; --tag-br:""; --shadow:none; --deco:none;
  --photo:url(/p/art/bg-day.webp); --veil:rgba(247,242,234,.66); --celebrate:url(/p/art/celebrate.webp);
  --board:#1c2430; --board-ink:#fffaf3; --board-rail:rgba(255,255,255,.14); --board-gold:#e9c36a;
  --min:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Songti SC",Georgia,"Times New Roman",serif;
  --disp:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Songti SC","Times New Roman",serif;   /* 数字が並び数字の書体だけ（Georgia は 1・2・0 が小さく下がって、部屋の番号が読みにくい） */
}
@media (prefers-color-scheme: dark){
  html.tr-art:root:not([data-theme="light"]){
    --paper:#0e1116; --paper-2:#171c24; --paper-3:#222a35;
    --ink:#e9edf2; --ink-soft:#9aa5b4; --rule:#2a323e; --rule-strong:#4a5565;
    --red:#ff6b61; --navy:#7fb6ff; --gold:#e9c36a; --green:#45e0a0;
    --cover:#e9c36a; --cover-deep:#b99646; --band:#e9edf2;
    --acc:#e9c36a; --acc-2:#f3d58d; --hot:#e9c36a; --on-acc:#1a1408;
    --panel:#171c24; --panel-line:#2a323e; --panel-shadow:0 14px 30px -22px rgba(0,0,0,.8);
    --card-shadow:0 10px 24px -20px rgba(0,0,0,.8); --card-shadow-hover:0 18px 32px -18px rgba(0,0,0,.9); --card-border-image:none; --card-radius:14px;
    --glow:rgba(0,0,0,.5); --glow-soft:rgba(233,195,106,.28); --hot-glow:rgba(255,107,97,.3);
    --en-label:#8e99a8; --ds:#b9c2ce; --icon:#e9c36a; --sub:#9aa5b4; --foot:#8e99a8;
    --chip-line:#3a4452; --chip-bg:#171c24; --badge-bg:#e9c36a; --badge-shadow:none;
    --tag-bg:transparent; --tag-fg:#e9edf2; --tag-line:transparent;
    --bar-glow:none; --score-glow:none;
    --code-bg:#171c24; --code-fg:#e9edf2; --code-line:#2a323e; --code-shadow:0 16px 34px -24px rgba(0,0,0,.9); --code-ts:none;
    --tile-hover:#222a35; --ghost-hover:#222a35;
    --let-bg:transparent; --let-fg:#e9c36a; --let-shadow:none; --let-ts:none;
    --rule-filter:none; --wm-fill:transparent; --wm-line:transparent; --tag-tr:""; --tag-br:""; --shadow:none; --deco:none;
    --photo:url(/p/art/bg-night.webp); --veil:rgba(14,17,22,.55); --celebrate:none;
    --board:#05070a; --board-ink:#e9edf2; --board-rail:rgba(255,255,255,.12); --board-gold:#e9c36a;
  }
}
html.tr-art:root[data-theme="dark"]{
    --paper:#0e1116; --paper-2:#171c24; --paper-3:#222a35;
    --ink:#e9edf2; --ink-soft:#9aa5b4; --rule:#2a323e; --rule-strong:#4a5565;
    --red:#ff6b61; --navy:#7fb6ff; --gold:#e9c36a; --green:#45e0a0;
    --cover:#e9c36a; --cover-deep:#b99646; --band:#e9edf2;
    --acc:#e9c36a; --acc-2:#f3d58d; --hot:#e9c36a; --on-acc:#1a1408;
    --panel:#171c24; --panel-line:#2a323e; --panel-shadow:0 14px 30px -22px rgba(0,0,0,.8);
    --card-shadow:0 10px 24px -20px rgba(0,0,0,.8); --card-shadow-hover:0 18px 32px -18px rgba(0,0,0,.9); --card-border-image:none; --card-radius:14px;
    --glow:rgba(0,0,0,.5); --glow-soft:rgba(233,195,106,.28); --hot-glow:rgba(255,107,97,.3);
    --en-label:#8e99a8; --ds:#b9c2ce; --icon:#e9c36a; --sub:#9aa5b4; --foot:#8e99a8;
    --chip-line:#3a4452; --chip-bg:#171c24; --badge-bg:#e9c36a; --badge-shadow:none;
    --tag-bg:transparent; --tag-fg:#e9edf2; --tag-line:transparent;
    --bar-glow:none; --score-glow:none;
    --code-bg:#171c24; --code-fg:#e9edf2; --code-line:#2a323e; --code-shadow:0 16px 34px -24px rgba(0,0,0,.9); --code-ts:none;
    --tile-hover:#222a35; --ghost-hover:#222a35;
    --let-bg:transparent; --let-fg:#e9c36a; --let-shadow:none; --let-ts:none;
    --rule-filter:none; --wm-fill:transparent; --wm-line:transparent; --tag-tr:""; --tag-br:""; --shadow:none; --deco:none;
    --photo:url(/p/art/bg-night.webp); --veil:rgba(14,17,22,.55); --celebrate:none;
    --board:#05070a; --board-ink:#e9edf2; --board-rail:rgba(255,255,255,.12); --board-gold:#e9c36a;
}

/* ── 地: 落ち着いた画面には、ぼかした写真を薄く敷く。映す画面には敷かない ── */
.tr-art body{background:linear-gradient(var(--veil),var(--veil)), var(--photo) top center / cover no-repeat fixed, var(--paper)}
.tr-art:has(.roomcode, .race-tracks, .podium-screen, .vs-root, .team-tracks, .team-cards) body{background:var(--paper)}
.tr-art body::before{display:none}
.tr-art header.masthead{padding:20px 0 14px}
.tr-art header.masthead::after,.tr-art footer.colophon::after{content:none}
.tr-art .wordmark{font-family:var(--min); font-weight:800; font-size:calc(29px * var(--proj)); letter-spacing:.01em; text-transform:none}
.tr-art .wordmark .let{padding:0; margin-left:0; border-radius:0}
.tr-art .sub{letter-spacing:.04em; font-weight:500}
.tr-art .rule-double{height:0; margin-bottom:26px; background:none; border-top:1.5px solid var(--rule-strong)}
.tr-art .rule-double::after{display:none}
.tr-art footer.colophon{background:none; border-top:1.5px solid var(--rule-strong); padding-top:14px; margin-top:48px}

/* ── 小さな札（上の並び・切り替え） ── */
.tr-art .chip{border-radius:8px}
.tr-art .masthead .chip{color:var(--ink); border:1.5px solid var(--chip-line); background:var(--chip-bg); font-weight:700; letter-spacing:.03em; padding:6px 13px}
.tr-art .masthead .chip:hover{color:var(--ink); border-color:var(--rule-strong); background:var(--tile-hover); box-shadow:none}
.tr-art .masthead .chip[aria-pressed="true"]{background:var(--acc); color:var(--on-acc); border-color:var(--acc); box-shadow:none}
.tr-art .masthead #btnSound{border-radius:8px}
.tr-art .masthead #btnSound::before{background:var(--ink)}
.tr-art .masthead #btnSound[aria-pressed="true"]::before{background:var(--on-acc)}
.tr-art .masthead .vol{accent-color:var(--ink)}
.tr-art .cfgrow .chip{color:var(--ink); border:1.5px solid var(--chip-line); background:var(--chip-bg); padding:7px 18px; letter-spacing:.02em; font-weight:700}
.tr-art .cfgrow .chip:hover{color:var(--ink); border-color:var(--rule-strong); background:var(--tile-hover); box-shadow:none}
.tr-art .cfgrow .chip[aria-pressed="true"]{background:var(--acc); color:var(--on-acc); border-color:var(--acc); box-shadow:none}
.tr-art .section-choices .chip[aria-pressed="true"]{background:var(--acc); color:var(--on-acc); border-color:var(--acc)}
.tr-art .cfgl{color:var(--ink-soft); font-weight:700}

/* ── 面（本の表紙・カード）: 細い枠・丸い角・やわらかい影 ── */
.tr-art .setcard,.tr-art .card{border:1.5px solid var(--panel-line); border-radius:18px; box-shadow:var(--panel-shadow); background:var(--panel)}
.tr-art .setcard h2{font-family:var(--min); font-weight:800; letter-spacing:.01em; font-size:calc(28px * var(--proj))}
.tr-art .setcard::after{content:none}
.tr-art .setcard::before{background:var(--acc); color:var(--on-acc); border:0; box-shadow:0 12px 22px -14px var(--glow)}
.tr-art .mode,.tr-art .mode:hover{background:var(--panel)}
.tr-art #app > .modes > .mode,.tr-art #app > .modes > .mode:hover{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='13' fill='%23141a23'/%3E%3Cpath d='M12 9.5l4.5 4.5-4.5 4.5' fill='none' stroke='%23fffbf5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px bottom 12px / 26px 26px no-repeat, var(--panel)}
.tr-art .mode{border:1.5px solid var(--panel-line); border-radius:14px; box-shadow:var(--card-shadow)}
.tr-art .mode:hover{transform:translateY(-3px); border-color:var(--ink); box-shadow:var(--card-shadow-hover)}
.tr-art .mode .no,.tr-art .mode:hover .no{color:var(--hot); font-weight:700; letter-spacing:.08em}
.tr-art .mode .nm{font-family:var(--min); font-weight:800}
.tr-art .mode .en,.tr-art .mode:hover .en{font-family:var(--jp); letter-spacing:.14em; font-weight:800}
.tr-art .mode .ds,.tr-art .mode:hover .ds{font-weight:600}
.tr-art .setmeta{color:var(--ink-soft); font-weight:600}
/* 6つのモードの線画を太くする（細い線は、薄い面の上で見えにくかった） */
.tr-art #app > .modes > .mode:nth-child(1){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E")}
.tr-art #app > .modes > .mode:nth-child(2){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 21v-4.2C4.6 15.3 3.5 13 3.5 10.5 3.5 6 7.2 2.5 11.8 2.5c4.3 0 7.4 3 7.7 6.9l1.7 3.1c.2.4 0 .8-.4.8h-1.3v2.4c0 1.1-.9 2-2 2h-2V21'/%3E%3Cg transform='translate(6.4 4.3) scale(.43)' stroke-width='3.1'%3E%3Cpath d='M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z'/%3E%3Cpath d='M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z'/%3E%3Cpath d='M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4'/%3E%3C/g%3E%3C/svg%3E")}
.tr-art #app > .modes > .mode:nth-child(3){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E")}
.tr-art #app > .modes > .mode:nth-child(4){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='2.5' width='15' height='19' rx='2'/%3E%3Cpath d='M8 7.5h1M11.5 7.5h4.5M8 12h1M11.5 12h4.5M8 16.5h1M11.5 16.5h4.5'/%3E%3C/svg%3E")}
.tr-art #app > .modes > .mode:nth-child(5){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E")}
.tr-art #app > .modes > .mode:nth-child(6){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
.tr-art .tile{border:1.5px solid var(--panel-line); border-radius:12px; box-shadow:var(--card-shadow)}
.tr-art .tile:hover{border-color:var(--rule-strong); box-shadow:var(--card-shadow-hover)}
.tr-art .tile.sel{color:#1c2430}
.tr-art .card .face.en{font-family:var(--disp); font-weight:700}
.tr-art .answer-review{border:1px solid var(--panel-line); border-radius:18px; box-shadow:0 30px 60px -30px rgba(40,30,10,.6)}

/* ── 演習面 ── */
.tr-art .theme-tag{border:0; border-left:3px solid var(--gold); border-radius:0; box-shadow:none; background:none; padding:1px 2px 1px 10px; letter-spacing:.05em}
.tr-art .bar{height:6px; border-radius:999px; background:var(--paper-3)}
.tr-art .bar i{background:var(--gold); box-shadow:none}
.tr-art .score{text-shadow:none}
.tr-art .review{border-top:1px solid var(--rule-strong)}

/* ── 押す物: 墨の面・丸い角。押すと少し沈む ── */
.tr-art .btn{border-radius:10px; letter-spacing:.04em; background:var(--acc); color:var(--on-acc); border:0; box-shadow:0 12px 22px -14px var(--glow)}
.tr-art .btn:hover{transform:translateY(-1px); box-shadow:0 16px 26px -14px var(--glow)}
.tr-art .btn:active{transform:translateY(1px); box-shadow:0 6px 12px -8px var(--glow)}
.tr-art .btn:disabled{transform:none; box-shadow:none; opacity:.45}
.tr-art .btn.ghost{background:var(--panel); color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule-strong)}
.tr-art .btn.ghost:hover{background:var(--tile-hover); color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule-strong); transform:none}

/* ── 対戦のまわり（映す画面）: 字は濃く大きく ── */
.tr-art .roomcode{border-radius:18px; border:2px solid var(--code-line); font-family:var(--disp); font-weight:700; letter-spacing:.14em}
.tr-art .pchip{border-radius:999px; border:1px solid var(--chip-line); background:var(--panel); font-weight:700}
.tr-art .jf{border-bottom-color:var(--ink)}
.tr-art .jf:focus{border-bottom-color:var(--gold)}
.tr-art .jfl{color:var(--ink-soft)}
.tr-art .stamp{border-radius:16px; background:var(--acc); color:var(--on-acc); box-shadow:0 18px 40px -16px var(--glow)}
.tr-art .stamp.miss{background:var(--red); color:#fff}
.tr-art .streak{border-radius:999px; background:var(--gold); color:#1c2430}
.tr-art .warn{border-radius:10px}
.tr-art .insights-panel{border:1px solid var(--panel-line); border-radius:18px; box-shadow:var(--panel-shadow); background:var(--panel)}
.tr-art .vs-qr.live-qr{border:1px solid var(--panel-line); border-radius:14px; box-shadow:var(--card-shadow)}
.tr-art .mymark .chip{border:1px solid var(--chip-line); background:var(--panel); color:var(--ink)}
/* レースの表（先生の画面）＝スコアボード: 墨の面に金の帯。落ち着いた言葉のまま、ここだけ賑やかにする */
.tr-art .host-tracks{background:var(--board); color:var(--board-ink); border:0; border-radius:20px; padding:20px 26px 22px; box-shadow:0 26px 50px -30px rgba(20,16,8,.9)}
.tr-art .host-tracks .race-heading{color:var(--board-ink)}
.tr-art .host-tracks .racer{font-size:20px; min-height:60px}
.tr-art .host-tracks .racer-label{color:var(--board-ink); font-weight:700}
.tr-art .host-tracks .racer-rail{height:16px; border-radius:999px; background:var(--board-rail); border-right:3px solid var(--board-gold); overflow:visible}
.tr-art .host-tracks .racer-fill{border-radius:999px; background:linear-gradient(90deg,#8f6f32,var(--board-gold))}
.tr-art .host-tracks .racer.is-leading .racer-fill{background:linear-gradient(90deg,var(--board-gold),#fff1c4); box-shadow:0 0 18px rgba(233,195,106,.7)}
.tr-art .host-tracks .racer.is-leading .racer-label{color:var(--board-gold)}
.tr-art .host-tracks .racer-count{font-family:var(--disp); font-size:24px; font-weight:700; color:var(--board-gold)}
.tr-art .host-tracks .racer-flag{font-size:36px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.tr-art .host-tracks .racer-reset .racer-fill{background:var(--red)}
.tr-art .host-tracks .racer.near-goal .racer-count{color:#ffd9a8}
/* 表彰台: 紙吹雪とリボンの絵を後ろに敷く */
.tr-art .podium-wrap{background:var(--celebrate) top center / cover no-repeat; border-radius:20px; padding:22px 12px 0}
.tr-art .podium-title{font-family:var(--min); letter-spacing:.08em; color:var(--ink)}
.tr-art .podium-champ{font-family:var(--min); font-weight:800}

/* ── 棚・設定など（土台の画面）── */
.tr-art .pcard{border:1.5px solid var(--panel-line); border-radius:18px; box-shadow:var(--panel-shadow); background:var(--panel)}
.tr-art dialog.dlg{border:1px solid var(--panel-line); border-radius:18px; box-shadow:0 40px 80px -40px rgba(30,22,8,.7)}
.tr-art .input,.tr-art select.input{border-radius:10px; border-color:var(--chip-line); background:var(--panel)}
.tr-art .hero h2,.tr-art .shelfhead h2{font-family:var(--min); font-weight:800}
/* 棚: 本を1行ずつ並べる（左に小さな表紙の絵・名前と問題数・タグ・最後に使った日・右に「⋯」） */
.tr-art .shelf{grid-template-columns:1fr; gap:10px; padding:0}
.tr-art .book{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto; grid-template-areas:"badge badge badge" "title tags foot" "count tags foot"; align-items:center; column-gap:18px; row-gap:2px;
  min-height:0; padding:14px 58px 14px 88px; border:1.5px solid var(--panel-line); border-radius:14px; box-shadow:var(--card-shadow); background:var(--panel)}
.tr-art .book:hover,.tr-art .book:focus-visible{transform:translateY(-2px); box-shadow:var(--card-shadow-hover)}
.tr-art .book::after{display:none}
.tr-art .book::before{content:""; position:absolute; left:16px; top:50%; width:56px; height:56px; margin-top:-28px; border-radius:10px; background:var(--paper-3) var(--cover-img, none) center / cover no-repeat; border:1.5px solid var(--panel-line); box-shadow:0 6px 12px -8px rgba(40,30,10,.6)}
.tr-art .book .bt{grid-area:title; padding-right:0; font-size:17px; -webkit-line-clamp:2}
.tr-art .book .bn{grid-area:count; margin-top:0}
.tr-art .book .btags{grid-area:tags; margin-top:0}
.tr-art .book .bfoot{grid-area:foot; margin-top:0; padding-top:0; text-align:right; white-space:nowrap}
.tr-art .book .bsample,.tr-art .book .bnoshare,.tr-art .book .blenient{grid-area:badge; justify-self:start; margin:0 0 4px}
.tr-art .book .bsample{border-radius:6px; background:var(--gold); color:#1c2430}
.tr-art .book .bnoshare,.tr-art .book .blenient{border-radius:6px}
.tr-art .book .btag,.tr-art .pill{border-radius:6px; color:var(--ink); border:1px solid var(--chip-line); background:var(--paper)}
.tr-art .book .bpin{left:8px; top:-6px; background:var(--gold)}
.tr-art .book .bmenu{right:12px; top:50%; margin-top:-16px; width:34px; height:34px; border-radius:8px; border:1px solid var(--chip-line); background:var(--panel)}
@media (max-width:640px){
  .tr-art .book{grid-template-columns:minmax(0,1fr); grid-template-areas:"badge" "title" "count" "tags" "foot"; padding:12px 52px 12px 76px}
  .tr-art .book::before{left:12px; width:48px; height:48px; margin-top:-24px}
  .tr-art .book .bfoot{text-align:left}
}

/* ── 更新のお知らせ（UPDATED!）: 同じ言葉で ── */
.tr-art .un-back{background:rgba(28,36,48,.6)}
.tr-art .un-card{border:1px solid var(--panel-line); border-radius:22px; box-shadow:0 40px 90px -40px rgba(20,14,4,.8); background:var(--panel)}
.tr-art .un-art{background:var(--paper-3)}
.tr-art .un-date{background:var(--gold); color:#1c2430; border:3px solid #fffaf3; box-shadow:0 8px 16px -8px rgba(40,30,10,.6); font-family:var(--disp)}
.tr-art .un-band{background:#1c2430; color:#fffaf3; border-top:0; border-bottom:3px solid var(--gold)}
.tr-art .un-stamp{font-family:var(--disp); letter-spacing:.08em; text-shadow:none}
.tr-art .un-kicker{background:#fffaf3; color:#1c2430; border-radius:999px; font-weight:700}
.tr-art .un-item{border:1px solid var(--panel-line); border-radius:14px; background:var(--paper)}
.tr-art .un-tag{border-radius:6px; background:var(--gold); color:#1c2430}
.tr-art .un-tag[data-kind="up"]{background:var(--acc); color:var(--on-acc)}
.tr-art .un-h{font-family:var(--min)}
.tr-art .un-ok{border-radius:10px; background:var(--acc); color:var(--on-acc); border:0; box-shadow:0 12px 22px -14px var(--glow)}
.tr-art .un-ok:hover{background:var(--acc-2)}
.tr-art .un-ok:active{transform:translateY(1px); box-shadow:0 6px 12px -8px var(--glow)}
.tr-art .un-ok:focus-visible{outline:3px solid var(--gold)}
/* 参加のしかた（先生のロビー・番号の下） */
.howto{margin:10px 0 14px; padding:12px 18px; border-radius:14px; background:var(--paper-3); color:var(--ink); font-weight:700; font-size:calc(17px * var(--proj)); line-height:1.7}
.howto b{display:block; font-size:calc(13px * var(--proj)); color:var(--ink-soft); letter-spacing:.06em; margin-bottom:2px}
.howto ol{margin:0; padding:0; list-style:none; counter-reset:howto; display:flex; flex-wrap:wrap; gap:4px 26px}
.howto li{counter-increment:howto; display:flex; align-items:center; gap:8px}
.howto li::before{content:counter(howto); flex:none; width:1.6em; height:1.6em; border-radius:50%; display:grid; place-items:center; background:var(--gold); color:#1c2430; font-family:var(--disp); font-size:.85em}
/* 先生のロビー: 部屋の番号の右に参加用の QR を並べる（縦に積むと「はじめる」が画面の下へ押し出される）。狭い画面では折り返す */
.coderow{display:flex; align-items:stretch; gap:22px; margin-bottom:6px}
.coderow .roomcode{flex:1 1 0; min-width:0; margin:0; display:flex; align-items:center; justify-content:center; font-size:clamp(44px, 9.2vw, 118px)}
.coderow .vs-qr.live-qr{flex:none; margin:0; width:150px; align-self:center}
@media (max-width:720px){ .coderow{flex-wrap:wrap; justify-content:center} .coderow .roomcode{flex:1 1 100%} }