:root{font-family:"Avenir Next",Avenir,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:#183e3c;background:#eee9d9;font-synthesis:none;--green:#24675e;--ink:#183e3c;--orange:#b55639;--paper:#faf6e9}
*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #cc862c;outline-offset:4px}button:disabled{cursor:default}button,fieldset{border:0}button[hidden],[hidden]{display:none!important}button{user-select:none}p{margin:0}#app{position:fixed;inset:0;overflow:hidden;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}#court{position:absolute;width:100%;height:calc(100% - 300px);top:125px;left:0;display:block}.topbar{position:absolute;z-index:3;left:28px;right:28px;top:calc(18px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between}.clubmark{font-family:Georgia,serif;font-size:28px;font-style:italic;font-weight:bold;display:flex;align-items:center;gap:12px}.clubmark>span{font-family:inherit;font-style:normal;font-size:9px;letter-spacing:1.5px;max-width:125px}.quiet{font-size:11px;letter-spacing:.5px;background:transparent;padding:10px 12px;border:1px solid #526b5c55;border-radius:20px;margin-left:5px}.title-copy{position:absolute;top:82px;left:6%;z-index:2;pointer-events:none}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.4px}.title-copy h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(60px,8vw,112px);font-weight:900;letter-spacing:-6px;line-height:.83;margin:17px 0 14px;text-shadow:1px 1px #faf6e9,2px 2px #183e3c,3px 3px #183e3c}.title-copy h1>span{display:block}.title-copy h1>span:nth-child(2){color:var(--orange);padding-left:40px}.logo-ball{font-size:.27em;vertical-align:middle;color:#fff9e7;text-shadow:1px 3px #c39c67;display:inline-block;transform:translate(8px,-8px)}.japanese-title{font-size:11px;letter-spacing:4px;margin:22px 0 10px}.tagline{font-size:14px;letter-spacing:1px}.title-controls{position:absolute;bottom:40px;right:6%;width:330px;z-index:2}.title-controls fieldset{margin:0;padding:0}.title-controls legend{font-size:10px;font-weight:bold;letter-spacing:2px;margin-bottom:10px}.title-controls legend span{letter-spacing:1px;font-size:10px;margin-left:12px;font-weight:normal}.levels{display:flex;border-bottom:1px solid #a3afa0;gap:6px}.levels button{background:transparent;padding:12px 16px;color:#65736b;flex:1;font-family:Georgia,serif;font-size:12px;border-bottom:3px solid transparent}.levels b{font-family:Arial,sans-serif;font-size:14px;margin-left:8px}.levels button[aria-pressed=true]{color:var(--green);border-bottom-color:var(--green);background:#fff8e955}#level-description{font-size:10px;margin:12px 0 16px;letter-spacing:.2px}.primary{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--green);color:#fff9e9;padding:17px 24px;font-weight:700;font-size:15px;border-radius:3px;box-shadow:0 4px 0 #194c46}.primary:hover{background:#19564e}.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #194c46}.title-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:11px}.text-button{background:none;text-decoration:underline;text-underline-offset:4px;font-size:12px;padding:12px}.version{position:absolute;bottom:calc(9px + env(safe-area-inset-bottom));right:18px;font-size:9px;color:#647368;letter-spacing:.7px}.scoreboard{position:absolute;top:calc(65px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:center;gap:22px;z-index:2}.player-label{font-size:10px;letter-spacing:2px;white-space:nowrap}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 5px}.yours{background:#438f83}.theirs{background:#d97855}.scores{display:flex;align-items:center;gap:18px}.scores b{font-family:Georgia,serif;font-size:40px;font-weight:normal;min-width:42px;text-align:center}.scores span{color:#809287}.scoreboard small{position:absolute;top:48px;white-space:nowrap;font-size:8px;letter-spacing:2px}.question-caption{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:#647468}#phrase{font-family:Georgia,serif;font-size:clamp(24px,3vw,35px);margin:12px 0 7px;font-weight:bold;line-height:1.15}#meaning{font-size:15px;line-height:1.6}.timer{height:5px;background:#dce0d1;border-radius:3px;overflow:hidden;margin-top:7px}.timer i{display:block;height:100%;width:100%;background:var(--green);transform-origin:left}.play-controls{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 32px));text-align:center;z-index:2}.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answers button{border:1px solid #b2bca9;background:#faf6e9e8;display:flex;align-items:center;justify-content:center;gap:14px;height:74px;border-radius:4px;color:var(--green);box-shadow:0 4px 0 #b7bead;transition:none}.answers #no{color:var(--orange)}.answers button[aria-pressed=true]{background:var(--green);color:#fff9ec;transform:translateY(2px);box-shadow:0 2px 0 #194c46}.answers #no[aria-pressed=true]{background:var(--orange);color:#fff9ec;box-shadow:0 2px 0 #793b2a}.answer-symbol{font-size:46px;line-height:1;font-weight:700;font-family:Arial,sans-serif}.answers button>span:nth-child(2){font-size:14px;font-weight:700}.answers small{display:block;font-size:9px;font-weight:normal;letter-spacing:1px;margin-top:5px}#combo{font-size:10px;letter-spacing:1px;margin-top:13px}#rally-label{font-family:Georgia,serif;font-size:12px;letter-spacing:2px;color:#486958}#feedback{position:absolute;top:53%;left:50%;transform:translate(-50%,-50%);text-align:center;white-space:nowrap;font-family:Georgia,serif;font-style:italic;font-size:clamp(32px,6vw,66px);font-weight:bold;color:var(--green);text-shadow:0 2px #fff9ec;pointer-events:none;z-index:4}.point-panel{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(510px,calc(100% - 32px));background:var(--paper);border-top:2px solid var(--green);padding:18px 22px;z-index:5;text-align:center;box-shadow:0 5px 40px #183e3c12}#point-title{font-size:13px;font-weight:bold;letter-spacing:1px;color:var(--orange)}#correction-en{font-family:Georgia,serif;font-weight:bold;font-size:24px;margin:10px 0 5px}#correction{font-size:13px;margin-bottom:16px}.point-panel .primary{padding:13px 22px}.overlay{position:absolute;inset:0;background:#183e3c4d;backdrop-filter:blur(5px);z-index:10;display:flex;align-items:center;justify-content:center;overflow:auto;padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom))}.dialog,.result-sheet{background:var(--paper);width:min(520px,100%);padding:34px;border-radius:4px;max-height:100%;overflow:auto;box-shadow:0 16px 60px #112e3e24}.dialog h2{font-family:Georgia,serif;font-size:25px;margin:15px 0 20px}.dialog>p{font-size:12px;line-height:1.8}.dialog ol{padding-left:20px;font-size:14px;line-height:1.8}.dialog li{margin:18px 0}.dialog li small{font-size:11px;display:block;color:#667366}.dialog .primary{margin-top:22px}.dialog .text-button{display:block;margin:auto}.result-sheet{text-align:center}.result-sheet h2{font-family:Georgia,serif;font-size:clamp(34px,7vw,54px);letter-spacing:-2px;margin:16px 0 0}#result-score{font-family:Georgia,serif;font-size:66px;margin:6px 0}#result-stats,#record{font-size:12px;line-height:1.9}.review-heading{text-align:left;border-top:1px solid #c7cbb8;padding-top:20px;margin-top:20px;font-size:11px;letter-spacing:1px}#review-list{text-align:left;max-height:180px;overflow:auto;margin:10px 0 16px}#review-list p{padding:10px 0;border-bottom:1px solid #dedfce;font-size:12px}#review-list strong{font-family:Georgia,serif;font-size:18px;display:block;margin-bottom:5px}#result-hint{font-size:11px;margin:16px 0}#boot{position:absolute;inset:0;display:grid;place-items:center;background:#eee9d9;z-index:30;font-size:14px}#app[data-phase=play] #court,#app[data-phase=point] #court{top:265px;height:calc(100% - 400px)}#app[data-phase=point] .play-controls{visibility:hidden}#app[data-phase=point] #question-panel{opacity:0}#app[data-phase=point] #court{top:120px;height:calc(100% - 335px)}
@media(min-width:900px){#app[data-phase=play] #court{top:195px;height:calc(100% - 315px)}#phrase{font-size:29px}#meaning{font-size:13px}.scoreboard{top:24px}.topbar{top:25px}.title-controls{bottom:55px}#court{left:17%;width:72%;top:90px;height:calc(100% - 170px)}.title-copy{top:120px;left:5%}.play-controls{width:460px}#app[data-phase=play] #court,#app[data-phase=point] #court{left:12%;width:80%}}
@media(max-width:600px){.topbar{left:18px;right:18px;top:calc(12px + env(safe-area-inset-top))}.clubmark{font-size:24px}.clubmark>span{font-size:7px;max-width:105px}.quiet{font-size:10px;padding:8px 10px}.title-copy{left:0;right:0;text-align:center;top:calc(73px + env(safe-area-inset-top))}.title-copy h1{font-size:clamp(44px,13.8vw,68px);letter-spacing:-3px;line-height:.9;margin:14px 0}.title-copy h1>span{display:inline}.title-copy h1>span:nth-child(2){padding-left:0}.logo-ball{display:none}.eyebrow{font-size:8px;letter-spacing:2px}.japanese-title{font-size:10px;letter-spacing:3px;margin:17px 0 8px}.tagline{font-size:12px}.title-controls{left:24px;right:24px;bottom:calc(35px + env(safe-area-inset-bottom));width:auto}.title-controls legend{font-size:9px;margin-bottom:5px}.levels button{padding:10px}#level-description{margin:10px 0 12px;font-size:9px}#court{top:175px;height:calc(100% - 375px)}#feedback{top:53%;font-size:36px}.answers button{gap:8px;height:68px}.answers button>span:nth-child(2){font-size:13px}.answer-symbol{font-size:40px}.dialog,.result-sheet{padding:26px 23px}}
@media(max-height:690px){.title-copy{top:60px}.title-copy h1{font-size:48px;margin:10px 0}.japanese-title{margin:10px 0 6px}.tagline{font-size:10px}.title-controls{bottom:28px}.title-controls .primary{padding:12px 20px}.title-foot{margin-top:4px}#court{top:140px;height:calc(100% - 310px)}.scoreboard{top:45px}.scores b{font-size:30px}.scoreboard small{top:36px}#phrase{font-size:25px;margin:8px 0 4px}#meaning{font-size:13px}#app[data-phase=play] #court{top:203px;height:calc(100% - 328px)}.play-controls{bottom:10px}.answers button{height:56px}#combo{margin-top:8px}.point-panel{bottom:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* コートの切り抜き境界を弱め、タイトルと同じ紙色になじませる。 */
#court{mask-image:linear-gradient(to bottom,transparent,black 8%,black 88%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,black 8%,black 88%,transparent)}
.answers button:disabled{opacity:1;-webkit-text-fill-color:currentColor}
@media(max-width:600px){.title-copy h1{white-space:nowrap}}
@media(max-height:480px) and (min-width:601px){.title-copy{top:70px;left:30px}.title-copy h1{font-size:56px}.title-controls{right:25px;width:300px;bottom:28px}#court{width:55%;height:240px;top:110px}#phrase{font-size:23px}.scoreboard{top:20px}.play-controls{left:auto;right:20px;transform:none;width:310px}#app[data-phase=play] #court{top:95px;left:32%;width:67%;height:190px}#feedback{left:67%;top:48%}.point-panel{width:320px;left:auto;right:20px;transform:none;padding:12px 18px}#app[data-phase=point] #court{top:95px;width:55%;height:260px}}

/* 選択→加速→打撃の強弱を、コート内の反応へ集める。 */
.rally-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;min-height:44px;text-align:left}
#commit{border:1px solid #28675f;background:#28675f;color:#fff8e8;padding:12px 16px;min-height:44px;border-radius:3px;font-size:11px;font-weight:700;white-space:nowrap}
#commit:disabled{color:#627468;background:#e2e3d3;border-color:#bbc3b2}
#combo{margin:5px 0 0;font-size:10px;letter-spacing:.2px}
#charge{display:flex;gap:4px;height:5px;width:90px}#charge i{flex:1;background:#bdc8b7;transform:skewX(-20deg)}#charge i.filled{background:#28776a}
.chance #charge i.filled{background:#c2812f}.chance #rally-label{color:#a26725;font-weight:700}.chance #combo{color:#915b22}
#speed-lines{pointer-events:none;position:absolute;inset:29% 0 19%;opacity:0;z-index:1;background:repeating-conic-gradient(from 12deg at 50% 48%,transparent 0deg 17deg,#285f511f 17.2deg 17.8deg,transparent 18deg 31deg);mask-image:radial-gradient(ellipse,transparent 28%,black 90%);-webkit-mask-image:radial-gradient(ellipse,transparent 28%,black 90%)}
#app[data-action=smash] #speed-lines{opacity:1}
#feedback[data-kind=smash]{font-size:clamp(48px,9vw,110px);color:#bf6734;letter-spacing:-3px;text-shadow:2px 3px #fff6dc,3px 4px #245a50;transform:translate(-50%,-50%) rotate(-7deg)}
#app[data-phase=play] #court{height:calc(100% - 426px)}
@media(min-width:900px){#app[data-phase=play] #court{height:calc(100% - 337px)}}
@media(max-width:600px){.rally-footer{gap:8px}#commit{padding:10px 12px;font-size:10px}#feedback[data-kind=smash]{font-size:65px}}
@media(max-height:690px){.rally-footer{margin-top:5px}#app[data-phase=play] #court{height:calc(100% - 354px)}}
@media(max-height:480px) and (min-width:601px){#app[data-phase=play] #court{height:190px}.rally-footer{gap:6px}#commit{padding:10px;font-size:9px}}
@media(prefers-reduced-motion:reduce){#speed-lines{display:none}#feedback[data-kind=smash]{transform:translate(-50%,-50%);text-shadow:1px 1px #fff6dc}}
/* 打撃の文字は選手と球から離して、アクションを見せる。 */
#feedback{top:calc(335px + env(safe-area-inset-top));font-size:30px;max-width:94%;white-space:normal;line-height:1;text-align:center}
#feedback[data-kind=smash]{font-size:58px}
#app[data-phase=point] #feedback{top:calc(147px + env(safe-area-inset-top))}
@media(min-width:900px){#feedback{left:70%;top:138px;font-size:38px}#feedback[data-kind=smash]{font-size:76px}#app[data-phase=point] #feedback{top:135px}}
@media(max-height:690px){#feedback{top:244px;font-size:26px}#feedback[data-kind=smash]{font-size:46px}}
@media(max-height:480px) and (min-width:601px){#feedback{left:66%;top:111px;font-size:25px}#feedback[data-kind=smash]{font-size:42px}#app[data-phase=point] #feedback{top:94px}}

/* 超次元の瞬間だけ、クラブの静けさを破る。問題と操作は常に読める。 */
#power-status{width:124px;min-height:44px;text-align:right;flex-shrink:0;color:#34635b}
#power-readout{font-size:13px;font-weight:800;letter-spacing:.3px}
#power-status small{display:block;font-size:9px;margin-top:4px}
.power-track{height:5px;background:#c7cbb8;overflow:hidden;margin-top:5px;transform:skewX(-18deg)}
#power-fill{display:block;width:100%;height:100%;background:#c37825;transform-origin:left}
#power-status[data-tier=warp]{color:#ac562e}#power-status[data-tier=warp] #power-readout{font-style:italic}
#charge i.half{background:linear-gradient(90deg,#28776a 50%,#bdc8b7 50%)}
#impact-frame{position:absolute;inset:28% 0 19%;pointer-events:none;z-index:1;opacity:0;border:0 solid #1b534c;clip-path:polygon(0 0,28% 5%,0 12%,0 75%,18% 100%,0 100%,100% 100%,80% 91%,100% 76%,100% 20%,83% 0,100% 0)}
#app[data-burst=hit] #impact-frame{opacity:.75;border-width:0 5px;background:transparent}
#app[data-burst=smash] #impact-frame{opacity:1;border-width:0 10px;background:transparent}
#app[data-burst=point] #impact-frame{opacity:1;border-width:0 8px;background:transparent}
#app[data-burst=charge] #impact-frame{opacity:.8;border-width:0 4px;background:transparent}
#speed-lines{background:repeating-conic-gradient(from 12deg at 50% 48%,transparent 0deg 11deg,#184e4766 11.2deg 11.8deg,transparent 12deg 23deg,#d1933980 23.2deg 23.7deg,transparent 24deg 31deg);mask-image:radial-gradient(ellipse,transparent 27%,#000 90%);-webkit-mask-image:radial-gradient(ellipse,transparent 27%,#000 90%)}
#app[data-burst=hit] #speed-lines{opacity:.6}#app[data-burst=smash] #speed-lines,#app[data-burst=point] #speed-lines{opacity:1}
#feedback[data-kind=smash]{font-size:clamp(31px,9.7vw,70px);color:#fff0bd;letter-spacing:-2px;text-shadow:1px 1px #123d36,2px 2px #123d36,3px 3px #123d36,4px 5px #b96533,5px 7px #b96533;transform:translate(-50%,-50%) rotate(-8deg)}
#feedback[data-kind=point]{font-size:clamp(42px,12vw,76px);color:#b45a31;letter-spacing:-2px;text-shadow:2px 2px #fff2ce,4px 4px #194c43;transform:translate(-50%,-50%) rotate(-5deg)}
#app[data-phase=point] #feedback[data-kind=point]{top:calc(176px + env(safe-area-inset-top))}



#app[data-burst=point] #you-score{color:#b45a31;text-shadow:2px 2px #fff6da}
#app[data-paused=true] *{animation-play-state:paused!important}
@media(min-width:900px){#feedback[data-kind=smash]{font-size:70px}}
@media(max-height:690px){#app[data-phase=point] #feedback[data-kind=point]{top:126px;font-size:42px}}
@media(max-height:480px) and (min-width:601px){#feedback[data-kind=smash]{font-size:40px}#app[data-phase=point] #feedback[data-kind=point]{top:96px;font-size:35px}#power-status{width:104px}}
@media(prefers-reduced-motion:reduce){#impact-frame,#speed-lines{display:none}#feedback[data-kind=smash],#feedback[data-kind=point]{transform:translate(-50%,-50%);text-shadow:1px 1px #f4ebd4}}

#feedback[data-kind=smash],#feedback[data-kind=point]{width:max-content;max-width:calc(100% - 32px);white-space:nowrap}

/* 間違えた時の文字：赤で、次のラリーまで表示したまま */
#feedback[data-kind=miss]{color:#c8452f;font-weight:bold;letter-spacing:1px;text-shadow:0 3px #fff6dc,0 0 14px #fff6dccc}
#app[data-burst=kill] #impact-frame{opacity:1;border-width:0 10px;border-color:#d64a34;background:transparent}
#app[data-burst=kill] #speed-lines{opacity:1}

/* ○（左）と ×（右）の色。ボタン・台の左右・自分の打球の光を同じ色でつなぐ。 */
:root{--maru:#2a8f62;--batsu:#cf5232}
.answers #yes{color:var(--maru);border-color:#2a8f6255}
.answers #no{color:var(--batsu);border-color:#cf523255}
.answers #yes[aria-pressed=true]{background:var(--maru);color:#fff9ec;box-shadow:0 2px 0 #1b5e40}
.answers #no[aria-pressed=true]{background:var(--batsu);color:#fff9ec;box-shadow:0 2px 0 #84321d}

/* タイトルロゴ：一点透視で飛び出す立体の IDIOM SMASH を、球の軌跡が斬る。3D演出と同じ3.4秒の周期で動く（logo.css 由来） */
.title-copy h1.ism-title{margin:0;padding:0;font-size:0;line-height:0;letter-spacing:0;text-shadow:none}
.ism-title svg{display:block;width:100%;height:auto;overflow:visible}
.ism-title .ism-pc{display:none}
.title-copy:has(.ism-title){left:0;right:0;top:calc(46px + env(safe-area-inset-top));text-align:left}
.ism-title .ism-sp{display:block;width:min(100vw,460px);margin:0 auto}
@media (min-width:900px){
  .title-copy:has(.ism-title){left:2%;right:auto;top:60px;width:min(46vw,620px)}
  .ism-title .ism-sp{display:none}.ism-title .ism-pc{display:block;width:100%}
  .title-controls{left:calc(2% + 36px);right:auto;width:min(40vw,440px);bottom:60px}
}
@media (max-height:690px) and (max-width:899px){.ism-title .ism-sp{width:min(88vw,360px)}.title-copy:has(.ism-title){top:34px}}
/* ============================================================
   IDIOM SMASH タイトルロゴのアニメーション
   - クラスなし ……… 完成形（切れてずれた状態）を静止表示
   - .intro ……………… 初回の登場（ページを開いた時に1回）
   - .beat ………………… 2周目以降の打点の再演出（3D演出の1周 3.4秒ごとに付け直す）
   付け直し方： el.classList.remove('intro','beat'); void el.getBoundingClientRect(); el.classList.add('beat');
   時刻は3D演出の1周の頭を0秒とする（打点 1.45秒／ヒットストップ 〜1.62秒／球がカメラに届く 1.86秒）
   ============================================================ */

.ism-logo { overflow: visible; }

/* 変形の基準点：文字は消失点（打点）から、その他は画面座標で指定する */
.ism-logo .ltr, .ism-logo .idl, .ism-logo .idiom, .ism-logo .smash-dn, .ism-logo .root,
.ism-logo .trail, .ism-logo .ball, .ism-logo .shard, .ism-logo .speed { transform-box: view-box; }
.ism-logo .root { transform-origin: 195px 130px; }
.ism-logo .band { transform-box: fill-box; transform-origin: 50% 50%; }

/* ---- 完成形（クラスなしの既定値） ---- */
.ism-logo .smash-dn { transform: translate(9px, -1.8px); }   /* 切り口の下半分のずれ（切り口に沿って右へ滑る）*/
.ism-logo .flash    { opacity: 0; }
.ism-logo .shard    { opacity: 0; }

/* ============================ 初回 .intro ============================ */
/* 0.00〜0.50 スピード線と IDIOM が左から滑り込む */
.ism-logo.intro .speed { animation: ism-speed-in .5s ease-out 0s both; }
.ism-logo.intro .idiom { animation: ism-idiom-in .55s cubic-bezier(.2, 1.5, .4, 1) .05s both; }
/* 0.35〜1.30 SMASH が奥（打点）から1文字ずつ飛び出し、行き過ぎて戻る */
.ism-logo.intro .ltr   { animation: ism-ltr-in .5s cubic-bezier(.25, .9, .35, 1) calc(.35s + var(--i) * .12s) both; }
/* 1.45 打点：閃光と球の軌跡が左から右へ一閃（ヒットストップ中に走りきる） */
.ism-logo.intro .flash { animation: ism-flash .4s ease-out 1.45s both; }
.ism-logo.intro .trail { animation: ism-trail-in .17s cubic-bezier(.1, .8, .2, 1) 1.45s both; }
.ism-logo.intro .ball  { animation: ism-ball-in .17s cubic-bezier(.1, .8, .2, 1) 1.45s both; }
/* 1.62 ヒットストップ明け：下半分がずれ、破片が散り、ロゴ全体が揺れる */
.ism-logo.intro .smash-dn { animation: ism-cut-in .55s cubic-bezier(.2, 1.2, .4, 1) 1.62s both; }
.ism-logo.intro .shard    { animation: ism-shard .7s cubic-bezier(.1, .7, .3, 1) 1.62s both; }
.ism-logo.intro .root     { animation: ism-shake .42s linear 1.62s; }
/* 1.86 球がカメラに届く：朱の和文帯がバンと貼られる */
.ism-logo.intro .band     { animation: ism-band .32s cubic-bezier(.2, 1.4, .4, 1) 1.86s both; }

/* ============================ 再演出 .beat ============================ */
/* 毎回の打点だけ：軽い一閃・切れ目が光る・ずれがズッと動いて戻る・小さな揺れ（登場はくり返さない） */
.ism-logo.beat .flash    { animation: ism-flash-sm .3s ease-out 1.45s; }
.ism-logo.beat .trail    { animation: ism-trail-in .15s cubic-bezier(.1, .8, .2, 1) 1.45s; }
.ism-logo.beat .ball     { animation: ism-ball-in .15s cubic-bezier(.1, .8, .2, 1) 1.45s; }
.ism-logo.beat .smash-dn { animation: ism-cut-beat .42s cubic-bezier(.2, 1.2, .4, 1) 1.62s; }
.ism-logo.beat .root     { animation: ism-shake-sm .26s linear 1.62s; }

/* ============================ keyframes ============================ */
@keyframes ism-speed-in { from { opacity: 0; transform: translateX(-40px); } to { opacity: .8; transform: none; } }
@keyframes ism-idiom-in {
  0%   { opacity: 0; transform: translateX(-340px) skewX(-25deg); }
  60%  { opacity: 1; transform: translateX(14px) skewX(8deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes ism-ltr-in {
  0%   { opacity: 0; transform: scale(.06); }
  15%  { opacity: 1; }
  55%  { transform: scale(1.2); }
  78%  { transform: scale(.94); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes ism-flash {
  0%   { opacity: 0; }
  12%  { opacity: .95; }
  100% { opacity: 0; }
}
@keyframes ism-flash-sm {
  0%   { opacity: 0; }
  15%  { opacity: .6; }
  100% { opacity: 0; }
}
@keyframes ism-trail-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ism-ball-in {
  0%   { opacity: 0; transform: translate(var(--bx), var(--by)); }
  1%   { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes ism-cut-in {
  0%   { transform: translate(0, 0); }
  30%  { transform: translate(18px, -3.6px); }
  60%  { transform: translate(6px, -1.2px); }
  100% { transform: translate(9px, -1.8px); }
}
@keyframes ism-cut-beat {
  0%   { transform: translate(9px, -1.8px); }
  30%  { transform: translate(15px, -3px); }
  100% { transform: translate(9px, -1.8px); }
}
@keyframes ism-shard {
  0%   { opacity: 0; transform: none; }
  1%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
}
@keyframes ism-shake {
  0%   { transform: scale(1.05); }
  15%  { transform: translate(-6px, 4px) scale(1.03); }
  30%  { transform: translate(5px, -4px); }
  45%  { transform: translate(-4px, 2px); }
  60%  { transform: translate(3px, -2px); }
  80%  { transform: translate(-1px, 1px); }
  100% { transform: none; }
}
@keyframes ism-shake-sm {
  0%   { transform: scale(1.02); }
  30%  { transform: translate(-3px, 2px); }
  60%  { transform: translate(2px, -1px); }
  100% { transform: none; }
}
@keyframes ism-band {
  0%   { opacity: 0; transform: scale(2.4) rotate(-14deg); }
  60%  { opacity: 1; transform: scale(.9) rotate(1deg); }
  100% { opacity: 1; transform: none; }
}

/* 動きを減らす設定：完成形を静止表示 */
@media (prefers-reduced-motion: reduce) {
  .ism-logo, .ism-logo * { animation: none !important; }
}


/* イディオム図鑑：集めたカードは緑の縁、宿題は朱の札、まだのものは伏せる */
.book-sheet{max-height:min(86vh,720px);overflow:auto;width:min(92vw,560px)}
#book-count{font-size:12px;letter-spacing:1px;margin:4px 0 10px;color:#536b5d}
#book-list h3{font-size:13px;letter-spacing:2px;margin:14px 0 6px}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:6px}
.book-card{position:relative;padding:8px 10px;border:1px dashed #b2bca9;border-radius:4px;background:#f3eedf;color:#8a9688;min-height:52px}
.book-card strong{display:block;font:italic 700 13px/1.25 Georgia,serif}
.book-card span{display:block;font-size:10px;margin-top:3px;line-height:1.35}
.book-card.got{border:1px solid #2a8f62;background:#fbf8ee;color:#183e3c;box-shadow:0 2px 0 #2a8f6233}
.book-card.homework{border:1px solid #cf5232;background:#fff4ee;color:#5a2a1c}
.book-card em{position:absolute;top:-7px;right:6px;font:normal 700 10px/1 sans-serif;color:#fff;background:#cf5232;padding:3px 6px;border-radius:2px;letter-spacing:1px}
.book-gain{font-size:13px;font-weight:700;color:#2a8f62;margin:6px 0 2px}
#question-label[data-homework=true]{color:#cf5232;font-weight:700}
/* タイトルは3Dの体育館を画面いっぱいに出す。左上のクラブ名は出さない。操作の下には紙色の帯を敷いて読みやすくする。 */
#app[data-phase=title] #court{top:0;left:0;width:100%;height:100%}
#app[data-phase=title] .clubmark{visibility:hidden}
#app[data-phase=title]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(330px,42%);background:linear-gradient(to bottom,#eee9d900,#eee9d9e6 38%,#eee9d9);pointer-events:none;z-index:1}
@media (min-width:900px){#app[data-phase=title]::after{right:auto;width:min(48vw,600px);height:100%;background:linear-gradient(to right,#eee9d9f0 0,#eee9d9cc 55%,#eee9d900)}}

/* 試合画面：問題と○×を1枚の「答えるパネル」にまとめて画面の下へ置く。読む→押すが上から下の短い視線で済む（塾長選定のA案）。 */
.answer-panel{background:#f8f4e8;border:1.5px solid #d6cfba;border-radius:14px;overflow:hidden;box-shadow:0 6px 0 #d9d1bb}
#question-panel{padding:10px 14px 12px;text-align:center}
#question-panel #phrase{margin:10px 0 5px;font-size:clamp(23px,7vw,34px);line-height:1.15}
#question-panel #meaning{font-size:15px;line-height:1.35}
.answer-panel .answers{gap:0;border-top:1.5px solid #d6cfba}
.answer-panel .answers button,.answer-panel .answers #yes,.answer-panel .answers #no{height:64px;border:0;border-radius:0;box-shadow:none}
.answer-panel .answers #yes{background:#e9f1e8;border-right:1.5px solid #d6cfba}
.answer-panel .answers #no{background:#f6e7df}
.answer-panel .answers #yes[aria-pressed=true]{background:var(--maru);transform:none;box-shadow:inset 0 -4px 0 #1b5e40}
.answer-panel .answers #no[aria-pressed=true]{background:var(--batsu);transform:none;box-shadow:inset 0 -4px 0 #84321d}
.rally-tag{position:absolute;z-index:2;left:18px;top:calc(136px + env(safe-area-inset-top));display:flex;align-items:baseline;gap:10px;font-size:10px;letter-spacing:.5px;color:#5d6d64;pointer-events:none}
.play-controls .rally-footer{margin-top:10px}
#app[data-phase=point] .rally-tag{visibility:hidden}
#app[data-phase=play] #court{top:110px;height:calc(100% - 110px - 300px)}
#app[data-phase=point] #court{top:110px;height:calc(100% - 110px - 230px)}
@media(min-width:900px){
  .play-controls{width:620px}
  #question-panel #phrase{font-size:34px}#question-panel #meaning{font-size:17px}
  .rally-tag{left:28px;top:96px}
  #app[data-phase=play] #court,#app[data-phase=point] #court{left:10%;width:80%;top:90px;height:calc(100% - 90px - 290px)}
}
@media(max-height:690px){
  #question-panel{padding:7px 12px 8px}#question-panel #phrase{margin:6px 0 3px;font-size:22px}#question-panel #meaning{font-size:13px}
  .answer-panel .answers button,.answer-panel .answers #yes,.answer-panel .answers #no{height:54px}
  .rally-tag{top:calc(112px + env(safe-area-inset-top))}
  #app[data-phase=play] #court{top:96px;height:calc(100% - 96px - 250px)}
}
@media(max-height:480px) and (min-width:601px){
  .rally-tag{top:auto;bottom:14px;left:20px}
  #app[data-phase=play] #court{top:70px;left:2%;width:58%;height:calc(100% - 100px)}
  .play-controls{width:330px}
}
/* 難易度は大会の名前。番号を小さく上に、大会名を下に置いて4つを1行に収める。 */
.levels button{padding:9px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.1}
.levels button small{font-size:10px}.levels b{margin-left:0;font-size:13px;white-space:nowrap}
/* 版表示はタイトルの紙色の帯より手前に出す（スマホで帯に隠れていた）。 */
.version{z-index:2}
/* 結果シート：画面の高さが足りないときは、宿題リストだけを縮めて中でスクロールし、ボタンを常に画面内に残す。 */
.result-sheet{display:flex;flex-direction:column}
.result-main,.result-side>*{flex:none}
.result-side{display:flex;flex-direction:column;min-height:0;flex:0 1 auto}
.result-side #review-list{flex:0 1 auto;min-height:60px}
.result-side .text-button{align-self:center}
/* 横向きのスマホ：結果シートを左（スコア）と右（宿題・ボタン）の2列にして、スクロールなしで1画面に収める。左上はラボの「戻る」用に空ける。 */
@media(orientation:landscape) and (max-height:540px){
  #result{padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  #result .result-sheet{display:flex;flex-direction:row;gap:26px;align-items:stretch;width:min(720px,100%);padding:18px 24px}
  .result-main{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center}
  .result-side{flex:1.1 1 0;min-width:0;display:flex;flex-direction:column;border-left:1px solid #c7cbb8;padding-left:24px}
  .result-sheet h2{font-size:38px;margin-top:8px}
  #result-score{font-size:46px;margin:2px 0}
  #result-stats,#record{line-height:1.7}
  .result-side .review-heading{border-top:0;padding-top:0;margin-top:0}
  .result-side #review-list{flex:1 1 auto;min-height:44px;max-height:none;margin:6px 0 8px}
  #review-list p{padding:7px 0}#review-list strong{font-size:16px;margin-bottom:3px}
  #result-hint{margin:0 0 10px;text-align:left}
  .result-side .primary{padding:13px 22px}
  .result-side .text-button{padding:8px 12px;align-self:center}
}
/* 横向きのスマホ：タイトルロゴは左、難易度と開始ボタンは右（幅300px）。ロゴが操作欄に重ならない幅にし、左上はラボの「戻る」用に空ける。 */
@media(max-height:480px) and (min-width:601px){
  .title-copy:has(.ism-title){left:max(16px,env(safe-area-inset-left));right:auto;top:calc(48px + env(safe-area-inset-top))}
  .ism-title .ism-sp{display:block;width:min(calc(100vw - 365px - env(safe-area-inset-left) - env(safe-area-inset-right)),360px);margin:0}
  .ism-title .ism-pc{display:none}
  .title-controls{left:auto;right:max(25px,env(safe-area-inset-right));width:300px;bottom:calc(28px + env(safe-area-inset-bottom));background:#eee9d9eb;padding:10px 12px 2px;border-radius:4px;box-shadow:0 6px 24px #183e3c1a}
}