/* ROOKIE LIFE 作り込み版 — 水彩と色鉛筆の絵本（紙の質感・やさしい昼の光） */
:root {
    --pen: #5C4433;
    --ink: #4A3A2C;
    --mute: #8A7663;
    --paper: #FFF9EC;
    --paper2: #FFF2DA;
    --leaf: #6DBE45;
    --leafD: #4E9A2E;
    --leafL: #E3F4D3;
    --sun: #FFD25A;
    --sunD: #E9A923;
    --sky: #9AD3F2;
    --skyD: #3A9BDC;
    --peach: #FFBBA0;
    --peachD: #F08A6A;
    --red: #E8604C;
    --hr: 20px 26px 18px 24px / 24px 18px 26px 20px;
    --hr2: 14px 18px 12px 16px / 16px 12px 18px 14px;
    --sh: 0 4px 0 rgba(92, 68, 51, .28);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --disp: "Fredoka", "Zen Maru Gothic", sans-serif;
    --body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
    --hand: "Yusei Magic", "Zen Maru Gothic", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--paper); color: var(--ink); font-family: var(--body); font-weight: 500; touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; touch-action: manipulation; cursor: pointer; }
input { font: inherit; user-select: text; -webkit-user-select: text; touch-action: manipulation; }
.rk-backdrop { position: fixed; inset: 0; background: radial-gradient(circle at 20% 20%, #DDF2FC, transparent 50%), radial-gradient(circle at 80% 80%, #E3F4D3, transparent 50%), radial-gradient(circle at 80% 20%, #FFF0D2, transparent 45%), var(--paper); }
.rk-backdrop::after { content: ""; position: absolute; inset: 0; background: var(--grain); }
.rk-stage {
    position: fixed; left: 50%; top: 50%; width: 375px; height: 750px;
    transform: translate(-50%, -50%); overflow: hidden;
    background: var(--paper) var(--grain); border-radius: 22px;
    box-shadow: 0 0 0 2px rgba(92, 68, 51, .12), 0 30px 80px rgba(92, 68, 51, .22);
    container-type: size;
}
.rk-stage.rk-full { border-radius: 0; box-shadow: none; }
.rk-stage [hidden] { display: none !important; }
.rk-stage.shake { animation: rkShake .34s cubic-bezier(.36, .07, .19, .97); }
@keyframes rkShake { 10%, 90% { transform: translate(calc(-50% - var(--shk)), -50%); } 20%, 80% { transform: translate(calc(-50% + var(--shk)), calc(-50% + 1px)); } 30%, 50%, 70% { transform: translate(calc(-50% - var(--shk)), calc(-50% - 1px)); } 40%, 60% { transform: translate(calc(-50% + var(--shk)), -50%); } }
.rk-stage.hitstop * { animation-play-state: paused !important; transition-duration: 0s !important; }

/* 色の小札 */
.c-plan { --c: #E8604C; --cl: #FDE3DC; --ct: #C2412E; }
.c-tech { --c: #3A9BDC; --cl: #DDF0FB; --ct: #1F72AE; }
.c-idea { --c: #9B6FD6; --cl: #EDE3FA; --ct: #7346B8; }
.c-talk { --c: #F2B33D; --cl: #FDF0D2; --ct: #A0700E; }

/* ───── 共通 ───── */
.rk-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; padding: max(4cqw, env(safe-area-inset-top)) 5cqw max(4cqw, env(safe-area-inset-bottom)); text-align: center; }
.rk-screen > * { flex: none; }
.rk-scroll { overflow-y: auto; touch-action: pan-y; justify-content: flex-start; overscroll-behavior: contain; }
.rk-row { display: flex; gap: 3cqw; justify-content: center; flex-wrap: wrap; }
.rk-grow { flex: 1; }
.rk-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4em;
    min-height: 48px; padding: .55em 1.8em .6em; text-decoration: none; color: var(--ink);
    font: 900 clamp(15px, 4.6cqw, 22px)/1.2 var(--body); letter-spacing: .06em; word-break: keep-all;
    border: 2.5px solid var(--pen); border-radius: var(--hr); box-shadow: var(--sh);
    background: var(--grain), #FFFDF6; transition: transform .1s, box-shadow .1s, filter .2s;
}
.rk-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(92, 68, 51, .28); }
.rk-btn-main { color: #fff; background: var(--grain), radial-gradient(circle at 30% 25%, #B2E187, #78C64E 45%, #5DAE37); text-shadow: 0 2px 0 #3E7F24, 0 0 6px rgba(62, 127, 36, .4); }
.rk-btn-sun { background: var(--grain), radial-gradient(circle at 30% 25%, #FFF0A8, #FFD25A 50%, #F5BC32); }
.rk-btn-sub { background: var(--grain), #FFFDF6; }
.rk-btn-l { font-size: clamp(18px, 6.2cqw, 30px); padding: .45em 2.4em .5em; }
.rk-btn-s { font-size: clamp(14px, 4cqw, 19px); padding: .4em 1.3em .45em; }
.rk-btn-xs { min-height: 44px; font-size: clamp(13px, 3.6cqw, 17px); padding: .3em 1.2em; }
.rk-btn:disabled { filter: grayscale(.8); opacity: .55; cursor: default; }
.rk-icon-btn { flex: none; min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0 .5em; border: 2.5px solid var(--pen); border-radius: var(--hr2); background: var(--grain), #FFFDF6; box-shadow: 0 3px 0 rgba(92, 68, 51, .25); font: 700 clamp(16px, 5cqw, 24px)/1 var(--disp); color: var(--ink); }
.rk-icon-btn:active { transform: translateY(2px); box-shadow: none; }
.rk-sound { display: flex; gap: .2em; align-items: center; font-size: clamp(12px, 3.4cqw, 16px); }
.rk-sound span { font-size: 1.2em; color: var(--leafD); }
.rk-sound.off span { color: var(--mute); }
.rk-sound.off b { color: var(--mute); }
.rk-link-btn { min-height: 44px; background: none; border: 0; padding: .3em .6em; text-decoration: underline; text-underline-offset: 3px; font: 700 clamp(12px, 3.4cqw, 15px)/1 var(--body); color: var(--mute); }
.rk-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font: 700 clamp(12px, 3.4cqw, 15px)/1 var(--body); text-underline-offset: 3px; }
.rk-topbar { width: 100%; display: flex; align-items: center; gap: 2.6cqw; }
.rk-screen-h { flex: 1; text-align: left; font-size: clamp(19px, 6cqw, 30px) !important; --deco: linear-gradient(170deg, #4E9A2E 10%, #6DBE45 50%, #E9A923 95%); }
/* 画数の多い漢字がつぶれないよう、画面見出しは白ふちを細くする */
.rk-screen-h::before { -webkit-text-stroke-width: .11em; }

/* ゲーム調の文字（水彩の塗り＋白い太フチ＋鉛筆の輪郭） */
.rk-deco { position: relative; display: inline-block; margin: 0; color: transparent; font: 900 clamp(26px, 9cqw, 48px)/1.15 var(--body); letter-spacing: .04em; white-space: nowrap; }
.rk-deco::before, .rk-deco::after { content: attr(data-t); position: absolute; left: 0; top: 0; white-space: nowrap; }
.rk-deco::before { color: #fff; -webkit-text-stroke: .2em #fff; paint-order: stroke fill; filter: drop-shadow(1.5px 0 0 var(--pen)) drop-shadow(-1.5px 0 0 var(--pen)) drop-shadow(0 1.5px 0 var(--pen)) drop-shadow(0 -1.5px 0 var(--pen)) drop-shadow(0 .08em 0 rgba(92, 68, 51, .35)); }
.rk-deco::after { background: var(--deco, linear-gradient(170deg, #8BD15F 10%, #FFD25A 55%, #FF9C6E 95%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rk-deco.sky { --deco: linear-gradient(170deg, #7CC8F2 10%, #9B9BF0 60%, #C99BE6 95%); }
.rk-deco.peach { --deco: linear-gradient(170deg, #FFB08C 10%, #F27A66 60%, #E8604C 95%); }
.rk-deco.pen { --deco: linear-gradient(var(--ink), var(--ink)); }

/* 吹き出し（手描きの紙） */
.rk-bubble { position: absolute; margin: 0; z-index: 4; background: #fff; border: 2.5px solid var(--pen); border-radius: var(--hr2); padding: .5em .8em .55em; font: 400 clamp(13px, 3.8cqw, 18px)/1.45 var(--hand); text-align: left; word-break: keep-all; overflow-wrap: anywhere; box-shadow: 0 3px 0 rgba(92, 68, 51, .2); }
.rk-bubble::after { content: ""; position: absolute; width: 13px; height: 13px; background: #fff; border: solid var(--pen); border-width: 0 2.5px 2.5px 0; bottom: -8.5px; left: 70%; transform: rotate(45deg) skew(8deg, 8deg); }
.rk-bubble:empty { display: none; }
.rk-bubble.pop { animation: rkPop .38s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes rkPop { from { opacity: 0; transform: scale(.7); } }

/* 人物（画像でも SVG でも同じ箱に入れる） */
.rk-fig-box { position: relative; aspect-ratio: 200 / 260; }
.rk-fig-box .fig { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center bottom; overflow: visible; }
.rk-fig-box.bob .fig { animation: rkBob 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.rk-fig-box.jump .fig { animation: rkJump .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rkBob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-1.2%) scale(1.012, .988); } }
@keyframes rkJump { 0% { transform: scale(1.06, .9); } 40% { transform: translateY(-8%) scale(.96, 1.05); } 100% { transform: none; } }
.rk-fig-box .c-blink { animation: rkBlink 4.4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes rkBlink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
.rk-face { position: relative; flex: none; width: 11cqw; height: 11cqw; border-radius: 50%; overflow: hidden; background: var(--cl, #FFF2DA); border: 2.5px solid var(--pen); }
.rk-face .fig { position: absolute; width: var(--fs, 190%); height: auto; left: var(--fx, -45%); top: var(--fy, -44%); max-width: none; animation: none; }
.rk-jobbadge { position: absolute; left: 30%; top: 64%; width: 13%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: #fff; border: 2px solid var(--pen); font: 700 clamp(12px, 3cqw, 14px)/1 var(--disp); }

/* ───── タイトル ───── */
.rk-title { justify-content: flex-start; gap: 2cqw; padding-top: max(4cqw, env(safe-area-inset-top)); }
.rk-title > * { position: relative; }
.rk-title-bg { position: absolute !important; inset: 0; overflow: hidden; }
.rk-title-bg .title-svg, .rk-title-bg img { width: 100%; height: 100%; display: block; object-fit: cover; }
.rk-title-bg::after { content: ""; position: absolute; inset: 0; background: var(--grain), linear-gradient(180deg, transparent 55%, rgba(255, 249, 236, .75) 72%, rgba(255, 249, 236, .95)); }
.rk-title .rk-sound { position: absolute; top: max(3cqw, env(safe-area-inset-top)); right: 3cqw; z-index: 3; }
.rk-title-logo { width: 84cqw; aspect-ratio: 3 / 2; margin-top: 6cqw; animation: rkFloat 3.6s ease-in-out infinite; }
@keyframes rkFloat { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-1.5cqw) rotate(1deg); } }
.rk-title-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 1.2cqw 1.6cqw rgba(92, 68, 51, .18)); }
.rk-title-text { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; transform: rotate(-4deg); }
.rk-title-text .rk-deco { font: 700 21cqw/.92 var(--disp); letter-spacing: .01em; }
.rk-title-text .t2 { margin-left: 22cqw; --deco: linear-gradient(170deg, #7CC8F2 10%, #6DBE45 60%, #4E9A2E 95%); }
.rk-title-text small { margin-top: 1.4cqw; font: 900 4.4cqw/1 var(--body); letter-spacing: .32em; padding: .45em .5em .45em .8em; background: #fff; border: 2.5px solid var(--pen); border-radius: var(--hr2); box-shadow: 0 3px 0 rgba(92, 68, 51, .2); transform: rotate(3deg); }
.rk-title-text::before { content: ""; position: absolute; left: 47%; top: -2%; width: 7cqw; height: 7cqw; background: radial-gradient(ellipse 40% 60% at 30% 60%, #8BD15F 60%, transparent 62%), radial-gradient(ellipse 40% 60% at 72% 40%, #6DBE45 60%, transparent 62%); transform: rotate(-10deg); }
.rk-title-cast { flex: 1 1 auto !important; min-height: 28cqw; width: 100%; display: flex; justify-content: center; align-items: flex-end; position: relative; }
.rk-title-hero { position: relative; z-index: 2; height: 100%; max-height: 62cqw; aspect-ratio: 200 / 260; }
.rk-title-hero .rk-fig-box { width: 100%; height: 100%; }
.rk-title-bubble { bottom: 70%; left: 74%; white-space: nowrap; animation: rkPop .5s cubic-bezier(.34, 1.56, .64, 1) .6s backwards; }
.rk-title-bubble::after { left: 18%; }
.rk-peek { position: absolute !important; left: -5cqw; right: -5cqw; bottom: -2cqw; display: flex; justify-content: space-between; pointer-events: none; }
.rk-peek .rk-fig-box { width: 19cqw; animation: rkPeek 4.8s ease-in-out infinite; transform-origin: 50% 100%; }
.rk-peek .rk-fig-box:nth-child(2) { animation-delay: -1.2s; margin-top: 8cqw; }
.rk-peek .rk-fig-box:nth-child(3) { animation-delay: -2.4s; margin-top: 8cqw; }
.rk-peek .rk-fig-box:nth-child(4) { animation-delay: -3.6s; }
@keyframes rkPeek { 0%, 100% { transform: translateY(10%) rotate(-3deg); } 50% { transform: translateY(0) rotate(3deg); } }
.rk-catch { margin: 0; font: 900 clamp(15px, 4.8cqw, 25px)/1.4 var(--body); letter-spacing: .04em; word-break: keep-all; text-shadow: 0 0 .3em #fff, 0 0 .6em #fff, 0 0 1em #fff; }
.rk-title-btns { display: flex; flex-direction: column; gap: 2.4cqw; align-items: center; }
.rk-title-btns .rk-btn-main { animation: rkPulse 1.8s ease-in-out infinite; }
@keyframes rkPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.rk-title-stats { display: flex; gap: 1.6cqw; justify-content: center; flex-wrap: wrap; font: 700 clamp(12px, 3.1cqw, 14px)/1 var(--body); }
.rk-title-stats span { display: flex; align-items: center; gap: .3em; background: rgba(255, 255, 255, .9); border: 2px solid rgba(92, 68, 51, .25); border-radius: 999px; padding: .4em .8em; white-space: nowrap; }
.rk-title-stats b { font: 600 1.15em/1 var(--disp); color: var(--leafD); }
.rk-title-stats .ic { width: 1.4em; height: 1.4em; }
.rk-note { margin: 0; font-size: clamp(12px, 3cqw, 14px); color: var(--mute); line-height: 1.6; word-break: keep-all; }

/* ───── 新人さんえらび ───── */
.rk-select { justify-content: flex-start; overflow-y: auto; touch-action: pan-y; gap: 3.4cqw; background: linear-gradient(180deg, #E3F4D3, transparent 30%); }
.rk-looks { width: 100%; display: grid; grid-template-columns: 1fr; gap: 2.6cqw; }
.rk-look { position: relative; display: grid; grid-template-columns: 17cqw 1fr; align-items: center; gap: 1.6cqw; text-align: left; min-height: 48px; padding: 1.6cqw 2cqw; background: var(--grain), #FFFDF6; border: 2.5px solid var(--pen); border-radius: var(--hr); box-shadow: var(--sh); transition: transform .12s; }
.rk-look .rk-fig-box { width: 17cqw; }
.rk-look b { display: block; font: 900 clamp(14px, 4.4cqw, 21px)/1.2 var(--body); }
.rk-look small { display: block; margin-top: .3em; font: 500 clamp(12px, 3.2cqw, 14px)/1.45 var(--body); color: var(--mute); }
.rk-look > span { padding-right: 7.5cqw; }
.rk-look .rk-seg { display: inline-block; }
.rk-look.on { background: var(--grain), #F0FADF; box-shadow: 0 4px 0 var(--leafD), 0 0 0 4px var(--leaf); transform: translateY(-1px); }
.rk-look.on::after { content: "✓"; position: absolute; right: 2cqw; top: 1.6cqw; width: 6.4cqw; height: 6.4cqw; display: grid; place-items: center; border-radius: 50%; background: var(--leaf); color: #fff; font: 700 3.6cqw/1 var(--disp); border: 2px solid var(--pen); }
.rk-name { width: 100%; display: flex; align-items: center; gap: 2.4cqw; font: 900 clamp(13px, 4cqw, 19px)/1 var(--body); }
.rk-name input { flex: 1; min-width: 0; min-height: 46px; padding: 0 .8em; border: 2.5px solid var(--pen); border-radius: var(--hr2); background: #fff; color: var(--ink); font: 700 clamp(15px, 4.6cqw, 21px)/1 var(--body); outline: none; }
.rk-name input:focus { box-shadow: 0 0 0 4px var(--sun); }
.rk-name small { font: 500 clamp(12px, 2.8cqw, 13px)/1 var(--body); color: var(--mute); white-space: nowrap; }
.rk-modes { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.rk-mode { min-height: 48px; padding: 1.6cqw 2cqw; border: 2.5px solid var(--pen); border-radius: var(--hr2); background: var(--grain), #FFFDF6; text-align: left; box-shadow: 0 3px 0 rgba(92, 68, 51, .25); }
.rk-mode b { display: block; font: 900 clamp(13px, 3.9cqw, 18px)/1.2 var(--body); }
.rk-mode small { display: block; margin-top: .3em; font: 500 clamp(12px, 3.2cqw, 13.5px)/1.4 var(--body); color: var(--mute); }
.rk-mode.on { background: var(--grain), #FFF4C9; box-shadow: 0 3px 0 var(--sunD), 0 0 0 3.5px var(--sun); }
.rk-mode:disabled { opacity: .55; filter: grayscale(.6); }
.rk-carry { width: 100%; text-align: left; padding: 2.2cqw 3cqw; border-radius: var(--hr2); background: var(--grain), #FFF4E6; border: 2px dashed rgba(92, 68, 51, .4); font: 500 clamp(12px, 3.2cqw, 14.5px)/1.6 var(--body); }
.rk-carry:empty { display: none; }
.rk-carry b { color: var(--peachD); }

/* ───── あそびかた ───── */
.rk-howto { justify-content: flex-start; gap: 2.6cqw; overflow-y: auto; touch-action: pan-y; background: linear-gradient(180deg, #DDF0FB, transparent 35%); }
.rk-steps { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 2.2cqw; }
.rk-steps li { position: relative; display: flex; gap: 2.4cqw; align-items: center; text-align: left; padding: 2.4cqw 3cqw; background: var(--grain), #FFFDF6; border: 2.5px solid var(--pen); border-radius: var(--hr); box-shadow: var(--sh); }
.rk-steps li .ic { width: 11cqw; height: 11cqw; flex: none; }
.rk-steps p { margin: 0; font: 500 clamp(12.5px, 3.7cqw, 17.5px)/1.65 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.rk-steps b { font-weight: 900; color: var(--leafD); }
.rk-steps em { font-style: normal; font-weight: 900; color: var(--ct); background: var(--cl); border-radius: 999px; padding: .02em .45em; white-space: nowrap; }

/* ───── プレイ ───── */
.rk-play { justify-content: flex-start; gap: 1.6cqw; padding: max(2.2cqw, env(safe-area-inset-top)) 3cqw max(2.6cqw, env(safe-area-inset-bottom)); background: linear-gradient(180deg, #E3F4FC, transparent 24%); }
.rk-hud { width: 100%; display: flex; align-items: center; gap: 1.6cqw; }
.rk-chap { font: 900 clamp(12px, 3.3cqw, 16px)/1 var(--body); padding: .55em .8em; border-radius: var(--hr2); background: var(--chapc, var(--leafL)); border: 2.5px solid var(--pen); white-space: nowrap; }
.rk-day { display: flex; align-items: baseline; gap: .25em; padding: .3em .7em; background: #fff; border: 2.5px solid var(--pen); border-radius: var(--hr2); font-size: clamp(12px, 3.4cqw, 16px); }
.rk-day small { font: 600 max(12px, .72em)/1 var(--disp); letter-spacing: .1em; color: var(--mute); }
.rk-day b { font: 700 1.55em/1 var(--disp); color: var(--peachD); font-variant-numeric: tabular-nums; }
.rk-half { display: flex; align-items: center; gap: .35em; font: 900 clamp(12px, 3.4cqw, 16px)/1 var(--body); padding: .55em .75em .55em .5em; border-radius: var(--hr2); border: 2.5px solid var(--pen); background: #FFF0A8; white-space: nowrap; }
.rk-half::before { content: ""; width: 1.05em; height: 1.05em; border-radius: 50%; background: radial-gradient(circle, #FFB703 42%, #FFE07A 44% 56%, transparent 58%), repeating-conic-gradient(#F5A623 0 14deg, transparent 14deg 45deg); }
.rk-half.pm { background: #CDEBFA; }
.rk-half.pop, .rk-day.pop { animation: rkPop .4s cubic-bezier(.34, 1.56, .64, 1); }
.rk-hud .rk-icon-btn { min-width: 44px; min-height: 44px; font-size: clamp(15px, 4.4cqw, 22px); }
.rk-hud .rk-sound { font-size: clamp(12px, 3.2cqw, 14px); }

.rk-track { width: 100%; display: flex; gap: .6cqw; padding: 0 .4cqw 3cqw; }
.rk-track i { position: relative; flex: 1; height: 1.9cqw; min-height: 6px; border-radius: 999px; background: rgba(92, 68, 51, .12); transition: background .3s; }
.rk-track i.done { background: var(--tc); }
.rk-track i.now { background: var(--tc); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--pen); animation: rkNow 1s ease-in-out infinite alternate; }
@keyframes rkNow { to { transform: scaleY(1.45); } }
.rk-track i[data-m]::after { content: attr(data-m); position: absolute; top: 2.6cqw; left: 50%; transform: translateX(-50%); font: 900 clamp(12px, 3.2cqw, 13px)/1 var(--body); white-space: nowrap; color: var(--ink); background: #fff; border: 1.5px solid var(--pen); padding: .2em .4em; border-radius: 6px; }
.rk-track i.last[data-m]::after { left: auto; right: -.4cqw; transform: none; }

.rk-scene { position: relative; width: 100%; flex: 1 1 auto !important; min-height: 32cqw; border-radius: var(--hr); border: 2.5px solid var(--pen); overflow: hidden; background: var(--grain), #FFFDF6; box-shadow: var(--sh); }
.rk-scene.busy { cursor: pointer; }
.rk-sc-art { position: absolute; inset: 0; transition: opacity .3s; }
.rk-sc-art.fade { opacity: 0; }
.rk-sc-art .scene-svg, .rk-sc-art .scene-img { width: 100%; height: 100%; display: block; object-fit: cover; }
.rk-sc-senior { position: absolute !important; left: 4%; bottom: 3%; height: 70%; z-index: 1; animation: rkIn .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes rkIn { from { opacity: 0; transform: translateX(-20%) scale(.9); } }
.rk-sc-rookie { position: absolute !important; left: 50%; bottom: 2%; height: 76%; transform: translateX(-50%); z-index: 2; transition: left .4s cubic-bezier(.3, 1.3, .5, 1); }
.rk-scene.duo .rk-sc-rookie { left: 64%; }
.rk-marks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.rk-mark { position: absolute; font: 700 clamp(16px, 6cqw, 30px)/1 var(--disp); color: var(--peachD); text-shadow: 0 0 4px #fff, 0 0 8px #fff; animation: rkMark 1.4s ease-out forwards; }
.rk-mark.zzz { color: var(--skyD); }
@keyframes rkMark { 0% { opacity: 0; transform: translateY(2cqw) scale(.6); } 20% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4cqw); } }
.rk-place { position: absolute; left: 2.2cqw; bottom: 2.2cqw; margin: 0; z-index: 3; font: 900 clamp(12px, 3.2cqw, 14px)/1 var(--body); background: #fff; border: 2px solid var(--pen); border-radius: var(--hr2); padding: .45em .75em; }
.rk-place::before { content: ""; display: inline-block; width: .65em; height: .65em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--red); margin-right: .45em; }
.rk-sc-bubble { top: 2.6cqw; left: 2.6cqw; max-width: 62%; }
.rk-combo { position: absolute; right: 2.4cqw; top: 2.4cqw; z-index: 4; display: flex; flex-direction: column; align-items: center; padding: .4em .7em .5em; border-radius: var(--hr2); background: var(--grain), #FFF0A8; border: 2.5px solid var(--pen); box-shadow: 0 3px 0 rgba(92, 68, 51, .25); transform: rotate(4deg); }
.rk-combo small { font: 900 clamp(12px, 3.2cqw, 13px)/1 var(--body); }
.rk-combo b { font: 700 clamp(18px, 6.4cqw, 30px)/1 var(--disp); color: var(--peachD); }
.rk-combo.bump { animation: rkBump .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rkBump { 0% { transform: rotate(4deg) scale(1.5); } 100% { transform: rotate(4deg) scale(1); } }
.rk-busy-tag { position: absolute; right: 2.4cqw; bottom: 2.2cqw; margin: 0; z-index: 3; font: 900 clamp(12px, 3.2cqw, 14px)/1 var(--body); color: #fff; background: var(--peachD); border: 2px solid var(--pen); border-radius: var(--hr2); padding: .45em .7em; transform: rotate(-3deg); }
.rk-pops { position: absolute; left: 0; right: 0; top: 60%; height: 0; z-index: 5; pointer-events: none; }
.rk-pop { position: absolute; left: 50%; font: 900 clamp(12px, 3.9cqw, 19px)/1 var(--body); white-space: nowrap; color: var(--ct, var(--ink)); background: var(--cl, #fff); border: 2px solid var(--pen); border-radius: var(--hr2); padding: .35em .7em .4em; box-shadow: 0 3px 0 rgba(92, 68, 51, .2); animation: rkFloatUp 1.6s cubic-bezier(.2, .8, .3, 1) forwards; }
.rk-pop b { font: 700 1.1em/1 var(--disp); margin-left: .25em; }
.rk-pop.sub { font-size: clamp(12px, 3.1cqw, 15px); background: #fff; }
.rk-pop.bond { color: #D2475F; background: #FFE6EA; }
@keyframes rkFloatUp { 0% { opacity: 0; transform: translate(-50%, 4cqw) scale(.6); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.06); } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -8cqw) scale(1); } }
.rk-banner { position: absolute; left: 0; right: 0; top: 26%; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: .3em; pointer-events: none; animation: rkBanner 1.55s ease forwards; }
.rk-banner small { font: 900 clamp(12px, 3.4cqw, 17px)/1 var(--body); background: #fff; border: 2px solid var(--pen); border-radius: var(--hr2); padding: .4em 1em; }
.rk-banner b { font-size: clamp(30px, 11cqw, 58px); }
.rk-banner img { width: 70cqw; height: auto; }
@keyframes rkBanner { 0% { opacity: 0; transform: scale(1.5) rotate(-4deg); } 14% { opacity: 1; transform: scale(1) rotate(-3deg); } 80% { opacity: 1; transform: scale(1) rotate(-3deg); } 100% { opacity: 0; transform: scale(.92) translateY(-4cqw) rotate(-3deg); } }
.rk-skip-hint { position: absolute; right: 2.2cqw; bottom: 2.2cqw; margin: 0; z-index: 3; font: 700 clamp(12px, 3.2cqw, 13px)/1 var(--body); color: var(--mute); background: rgba(255, 255, 255, .9); padding: .4em .7em; border-radius: 999px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.rk-scene.busy .rk-skip-hint { opacity: 1; }
.rk-scene.busy .rk-busy-tag { opacity: 0; }

.rk-gauges { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.rk-gauge { display: flex; align-items: center; gap: 1.2cqw; min-width: 0; background: #fff; border: 2px solid var(--pen); border-radius: 999px; padding: .9cqw 2cqw .9cqw 1.2cqw; font: 900 clamp(12px, 3.2cqw, 14.5px)/1 var(--body); }
.rk-gauge i { flex: 1; min-width: 0; height: 2.4cqw; min-height: 7px; background: rgba(92, 68, 51, .1); border-radius: 999px; overflow: hidden; }
.rk-gauge em { display: block; height: 100%; width: 50%; border-radius: inherit; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.rk-gauge b { font: 700 1.12em/1 var(--disp); min-width: 1.8em; text-align: right; font-variant-numeric: tabular-nums; }
.rk-g-name { white-space: nowrap; }
.rk-g-ic { flex: none; width: 1.6em; height: 1.6em; }
.rk-g-ic .ic { width: 100%; height: 100%; display: block; }
.rk-g-mood em { background: linear-gradient(90deg, #FFB3BF, #F27A66); }
.rk-g-hp em { background: linear-gradient(90deg, #C4E8A0, #6DBE45); }
.rk-g-hp.low em { background: linear-gradient(90deg, #FFE07A, #F5A623); }
.rk-g-hp.low { animation: rkLow 1s ease-in-out infinite alternate; }
@keyframes rkLow { to { border-color: #F5A623; box-shadow: 0 0 0 3px rgba(245, 166, 35, .35); } }
.rk-gauge.bump { animation: rkGauge .4s ease; }
@keyframes rkGauge { 50% { transform: scale(1.04); } }

.rk-stats { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw 2.4cqw; padding: 1.8cqw 2.4cqw 2cqw; background: var(--grain), #FFFDF6; border: 2.5px solid var(--pen); border-radius: var(--hr); box-shadow: var(--sh); position: relative; }
.rk-stats::before { content: ""; position: absolute; left: 50%; top: -2.2cqw; width: 18cqw; height: 4.4cqw; transform: translateX(-50%) rotate(-3deg); background: repeating-linear-gradient(90deg, rgba(154, 211, 242, .75) 0 6px, rgba(255, 255, 255, .55) 6px 9px); border-radius: 2px; }
.rk-stat { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 1.4cqw; row-gap: .8cqw; min-width: 0; }
.rk-stat .rk-face { grid-row: span 2; width: 10.4cqw; height: 10.4cqw; }
.rk-stat-top { display: flex; align-items: baseline; gap: .4em; min-width: 0; }
.rk-stat-name { font: 900 clamp(12px, 3.2cqw, 14px)/1 var(--body); color: var(--ct); white-space: nowrap; }
.rk-stat-v { margin-left: auto; font: 700 clamp(13px, 4.1cqw, 20px)/1 var(--disp); font-variant-numeric: tabular-nums; }
.rk-stat-r { font: 700 clamp(12px, 3.7cqw, 18px)/1 var(--disp); color: var(--c); width: 1.1em; text-align: center; }
.rk-stat-bar { grid-column: 2 / -1; display: flex; align-items: center; gap: 1cqw; min-width: 0; }
.rk-stat-bar i { flex: 1; height: 1.7cqw; min-height: 6px; background: rgba(92, 68, 51, .1); border-radius: 999px; overflow: hidden; }
.rk-stat-bar em { display: block; height: 100%; width: 0; background: var(--c); border-radius: inherit; transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.rk-hearts { display: flex; gap: .15em; font-size: clamp(12px, 3.2cqw, 13px); line-height: 1; letter-spacing: -.05em; }
.rk-hearts span { color: rgba(92, 68, 51, .2); }
.rk-hearts span.on { color: #F27A66; }
.rk-stat.up .rk-stat-v { animation: rkUp .6s ease; color: var(--ct); }
@keyframes rkUp { 40% { transform: scale(1.35); } }
.rk-stat.love .rk-hearts { animation: rkUp .6s ease; }

.rk-ask { width: 100%; margin: .2cqw 0 0; text-align: left; font: 900 clamp(13px, 3.9cqw, 19px)/1.2 var(--body); display: flex; align-items: center; gap: .5em; }
.rk-ask::before { content: ""; width: 1.2em; height: .55em; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--peach) 0 4px, #fff 4px 6px); transform: rotate(-6deg); }
.rk-acts { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 1.9cqw; }
.rk-act { position: relative; display: grid; grid-template-columns: 10cqw 1fr; column-gap: 2cqw; row-gap: 1cqw; align-items: center; text-align: left; min-height: 48px; padding: 1.6cqw 1.8cqw 1.7cqw; background: var(--grain), #FFFDF6; border: 2.5px solid var(--pen); border-radius: var(--hr); box-shadow: var(--sh); transition: transform .1s, box-shadow .1s, opacity .2s, filter .2s; }
.rk-act:nth-child(even) { border-radius: 24px 18px 26px 20px / 18px 26px 20px 24px; }
.rk-act:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(92, 68, 51, .28); }
.rk-act-ic { width: 10cqw; height: 10cqw; border-radius: 30% 40% 34% 44%; background: var(--tint, #F4F1EA); display: grid; place-items: center; }
.rk-act-ic .ic { width: 88%; height: 88%; }
.rk-act-name { font: 900 clamp(12px, 3.35cqw, 16.5px)/1.25 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.rk-act-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6cqw; font: 900 clamp(12px, 3.2cqw, 13px)/1 var(--body); }
.rk-act-tags span { padding: .3em .45em .32em; border-radius: 6px; color: var(--ct, var(--ink)); background: var(--cl, #F1EEE6); white-space: nowrap; }
.rk-act-tags .t-hp { background: #F1EEE6; }
.rk-act-tags .t-hp.plus { background: #E3F4D3; color: var(--leafD); }
.rk-act-tags .t-mood { background: #FFE6EA; color: #C2412E; }
.rk-act-tags .t-bond { background: #FFE6EA; color: #D2475F; }
.rk-key { position: absolute; top: .4cqw; right: 1cqw; font: 600 clamp(9px, 2.2cqw, 11px)/1 var(--disp); color: #C4B6A4; display: none; }
@media (hover: hover) and (pointer: fine) { .rk-key { display: block; } }
.rk-act:disabled { cursor: default; filter: grayscale(.9); opacity: .5; }
.rk-act.need::after { content: "体力が足りない"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-5deg); font: 900 clamp(12px, 3.2cqw, 14px)/1 var(--body); color: #fff; background: var(--pen); padding: .45em .8em; border-radius: var(--hr2); white-space: nowrap; }
.rk-acts.lock { pointer-events: none; }
.rk-acts.lock .rk-act:not(.pick) { opacity: .55; }
.rk-act.pick { opacity: 1; transform: translateY(3px); box-shadow: 0 1px 0 rgba(92, 68, 51, .28), 0 0 0 4px var(--sun); }
.rk-act.hint { animation: rkHint 1.2s ease-in-out infinite; }
@keyframes rkHint { 50% { box-shadow: var(--sh), 0 0 0 4px var(--leaf); } }
.coach-on .rk-act:not(.coach-ok) { opacity: .35; pointer-events: none; }
.coach-target { position: relative; z-index: 31 !important; box-shadow: var(--sh), 0 0 0 4px #fff, 0 0 0 7px var(--sunD) !important; animation: rkHint2 1.2s ease-in-out infinite; }
@keyframes rkHint2 { 50% { box-shadow: var(--sh), 0 0 0 4px #fff, 0 0 0 10px var(--sun) !important; } }

/* ───── ダイアログ ───── */
.rk-sheet { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: safe center; padding: max(4cqw, env(safe-area-inset-top)) 4cqw max(4cqw, env(safe-area-inset-bottom)); background: rgba(255, 249, 236, .72); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
.rk-sheet-card { position: relative; flex: none; width: 100%; max-width: 92cqw; display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; padding: 5cqw 5cqw 5cqw; text-align: center; background: var(--grain), #FFFDF6; border: 2.5px solid var(--pen); border-radius: var(--hr); box-shadow: 0 6px 0 rgba(92, 68, 51, .28); animation: rkCardIn .45s cubic-bezier(.34, 1.56, .64, 1); }
.rk-sheet-card::before, .rk-sheet-card::after { content: ""; position: absolute; top: -2.6cqw; width: 20cqw; height: 5cqw; border-radius: 2px; }
.rk-sheet-card::before { left: 8cqw; transform: rotate(-6deg); background: repeating-linear-gradient(90deg, rgba(255, 187, 160, .8) 0 7px, rgba(255, 255, 255, .5) 7px 10px); }
.rk-sheet-card::after { right: 8cqw; transform: rotate(5deg); background: repeating-radial-gradient(circle at 4px 4px, rgba(255, 255, 255, .7) 0 1.5px, transparent 2px 8px), rgba(154, 211, 242, .78); }
@keyframes rkCardIn { from { opacity: 0; transform: translateY(8cqw) scale(.92) rotate(-1deg); } }
.rk-tag { margin: 0; font: 600 clamp(12px, 3.2cqw, 14px)/1 var(--disp); letter-spacing: .2em; color: #fff; background: var(--tagc, var(--leafD)); padding: .55em 1.2em .5em 1.4em; border-radius: var(--hr2); }
.rk-sheet h2 { margin: 0; font: 900 clamp(18px, 5.6cqw, 28px)/1.35 var(--body); word-break: keep-all; background: linear-gradient(transparent 62%, rgba(255, 210, 90, .65) 62%); padding: 0 .2em; }
.rk-sheet p { margin: 0; }
.rk-ev-who { display: flex; align-items: center; gap: 3cqw; }
.rk-ev-who .rk-face { width: 24cqw; height: 24cqw; }
.rk-ev-img .ic, .rk-ev-img img { width: 24cqw; height: 24cqw; display: block; }
.rk-ev-name { font: 900 clamp(12px, 3.2cqw, 15px)/1.3 var(--body); color: var(--mute); }
.rk-ev-text { font: 500 clamp(13.5px, 3.9cqw, 18.5px)/1.75 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.rk-chips { display: flex; flex-wrap: wrap; gap: 1.4cqw; justify-content: center; }
.rk-chips:empty { display: none; }
.rk-chip { font: 900 clamp(12px, 3.5cqw, 17px)/1 var(--body); padding: .45em .8em .5em; border-radius: var(--hr2); color: var(--ct, var(--ink)); background: var(--cl, #fff); border: 2px solid var(--pen); animation: rkPop .4s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.rk-chip b { font: 700 1.08em/1 var(--disp); margin-left: .2em; }
.rk-chip.c-hp { background: #E3F4D3; color: var(--leafD); }
.rk-chip.c-mood { background: #FFE6EA; color: #C2412E; }
.rk-chip.c-bond { background: #FFE6EA; color: #D2475F; }
.rk-chip.c-secret { background: #FFF0A8; color: var(--ink); }
.rk-chip:nth-child(2) { animation-delay: .08s; } .rk-chip:nth-child(3) { animation-delay: .16s; } .rk-chip:nth-child(4) { animation-delay: .24s; } .rk-chip:nth-child(5) { animation-delay: .32s; }
.rk-choices { width: 100%; display: flex; flex-direction: column; gap: 2cqw; margin-top: .6cqw; }
.rk-choice { width: 100%; min-height: 52px; text-align: left; display: flex; flex-direction: column; gap: .4em; padding: 2.2cqw 3.2cqw; background: var(--grain), #fff; border: 2.5px solid var(--pen); border-radius: var(--hr2); box-shadow: 0 4px 0 rgba(92, 68, 51, .25); font: 900 clamp(13px, 4cqw, 19px)/1.3 var(--body); }
.rk-choice small { font: 500 clamp(12px, 3.2cqw, 14px)/1.35 var(--body); color: var(--mute); }
.rk-choice:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(92, 68, 51, .25); }
.rk-choice.with-face { flex-direction: row; align-items: center; gap: 3cqw; }
.rk-choice.with-face .rk-face { width: 13cqw; height: 13cqw; }
.rk-choice.with-face > span { display: flex; flex-direction: column; gap: .35em; }
.rk-sheet .rk-btn { margin-top: 1cqw; }
.rk-miss { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.4cqw; }
.rk-miss li { display: flex; align-items: center; gap: 2cqw; padding: .5em .8em; border-radius: var(--hr2); background: #F7F2E8; text-align: left; font: 700 clamp(12px, 3.6cqw, 16.5px)/1.35 var(--body); }
.rk-miss li .ic { width: 7cqw; height: 7cqw; flex: none; filter: grayscale(1) opacity(.3); }
.rk-miss li.done .ic { filter: none; animation: rkStar .5s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.rk-miss li:nth-child(2).done .ic { animation-delay: .25s; } .rk-miss li:nth-child(3).done .ic { animation-delay: .5s; }
@keyframes rkStar { from { transform: scale(0) rotate(-90deg); } }
.rk-miss li span { flex: 1; }
.rk-miss li b { font: 600 max(12px, .8em)/1 var(--disp); color: #fff; background: var(--peachD); border-radius: 999px; padding: .35em .6em; }
.rk-chap-no { font: 600 clamp(12px, 3.6cqw, 17px)/1 var(--disp); letter-spacing: .3em; color: var(--mute); }
.rk-chap-name { font-size: clamp(21px, 7.2cqw, 36px) !important; }
.rk-chap-lead { font: 500 clamp(13px, 3.8cqw, 18px)/1.7 var(--body); word-break: keep-all; }
.rk-grid2 { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 2.2cqw; }
.rk-subj { min-height: 52px; display: flex; flex-direction: column; align-items: center; gap: 1cqw; padding: 2.4cqw 1.6cqw; background: var(--grain), #fff; border: 2.5px solid var(--pen); border-radius: var(--hr2); box-shadow: 0 4px 0 rgba(92, 68, 51, .25); }
.rk-subj:active { transform: translateY(3px); box-shadow: none; }
.rk-subj b { font: 900 clamp(12px, 3.6cqw, 17px)/1.3 var(--body); color: var(--ct); word-break: keep-all; }
.rk-subj span { font: 700 clamp(15px, 4.8cqw, 23px)/1 var(--disp); }
.rk-subj small { font: 500 clamp(12px, 3.2cqw, 13px)/1.3 var(--body); color: var(--mute); }
.rk-rows { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.4cqw; }
.rk-rows li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 2cqw; padding: 1.2cqw 2.4cqw; border-radius: var(--hr2); background: #F7F2E8; text-align: left; }
.rk-rows .n { font: 900 clamp(12px, 3.6cqw, 17px)/1 var(--body); color: var(--ct); }
.rk-rows .f { font: 900 clamp(12px, 3.2cqw, 13px)/1 var(--body); color: var(--peachD); }
.rk-rows .v { font: 700 clamp(14px, 4.2cqw, 20px)/1 var(--disp); justify-self: end; }
.rk-rows .s { width: 9cqw; height: 9cqw; display: grid; place-items: center; font: 900 7.4cqw/1 var(--body); color: var(--red); opacity: 0; }
.rk-rows .s.on { opacity: 1; animation: rkStamp .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rkStamp { from { opacity: 0; transform: scale(2.4) rotate(-20deg); } }
.rk-grade { display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; animation: rkPop .45s cubic-bezier(.34, 1.56, .64, 1); }
.rk-medal { position: relative; width: 22cqw; height: 22cqw; display: grid; place-items: center; font: 700 13cqw/1 var(--disp); color: #fff; text-shadow: 0 2px 0 #B07600, 0 0 8px rgba(176, 118, 0, .4); background: var(--grain), radial-gradient(circle at 35% 30%, #FFF0A8, #FFD25A 50%, #F5A623); border: 2.5px solid var(--pen); border-radius: 50%; box-shadow: 0 4px 0 rgba(92, 68, 51, .3), 0 0 0 2cqw rgba(255, 210, 90, .3); }
.rk-medal.c { background: var(--grain), radial-gradient(circle at 35% 30%, #E3F4D3, #9BD06A 55%, #6DBE45); text-shadow: 0 2px 0 #3E7F24; }
/* 最終課題 */
.rk-final-req { width: 100%; display: flex; flex-direction: column; gap: 1.2cqw; }
.rk-meter { position: relative; height: 7cqw; min-height: 24px; border-radius: 999px; background: #F1EADB; border: 2.5px solid var(--pen); overflow: hidden; }
.rk-meter em { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #C4E8A0, #6DBE45); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.rk-meter em.great { background: linear-gradient(90deg, #FFE07A, #F5A623); }
.rk-meter i { position: absolute; top: -2px; bottom: -2px; width: 3px; background: var(--pen); }
.rk-meter i::after { content: attr(data-l); position: absolute; top: 50%; left: 6px; transform: translateY(-50%); font: 900 clamp(12px, 3.2cqw, 13px)/1 var(--body); color: var(--ink); white-space: nowrap; }
.rk-meter span { position: absolute; right: 2cqw; top: 50%; transform: translateY(-50%); font: 700 clamp(12px, 3.6cqw, 17px)/1 var(--disp); }
.rk-helps { width: 100%; display: flex; gap: 2cqw; justify-content: center; flex-wrap: wrap; }
.rk-help { min-height: 48px; display: flex; align-items: center; gap: 1.4cqw; padding: .5cqw 2.4cqw .5cqw .8cqw; border: 2.5px dashed var(--pen); border-radius: 999px; background: #fff; font: 900 clamp(12px, 3.2cqw, 15px)/1.2 var(--body); }
.rk-help .rk-face { width: 9cqw; height: 9cqw; }
.rk-help.on { border-style: solid; background: #FFF0A8; box-shadow: 0 0 0 3px var(--sun); }
.rk-help:disabled { opacity: .4; }
.rk-rounds { display: flex; gap: 2cqw; }
.rk-rounds span { width: 9cqw; height: 9cqw; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--pen); background: #fff; font: 900 5cqw/1 var(--body); color: var(--red); }
.rk-rounds span.now { background: #FFF0A8; }
.rk-big-stamp { font: 900 18cqw/1 var(--body); color: var(--red); animation: rkStamp .4s cubic-bezier(.3, 1.6, .5, 1); text-shadow: 0 0 0 transparent; }

/* ───── 遊びながらの案内 ───── */
.rk-coach { position: absolute; left: 2.6cqw; right: 2.6cqw; z-index: 32; pointer-events: none; top: var(--coachY, 20%); transition: top .35s ease; }
.rk-coach-box { display: flex; gap: 2.4cqw; align-items: flex-start; padding: 2.6cqw 3cqw; background: var(--grain), #FFFDF6; border: 2.5px solid var(--pen); border-radius: var(--hr); box-shadow: 0 5px 0 rgba(92, 68, 51, .28); pointer-events: auto; animation: rkCardIn .4s cubic-bezier(.34, 1.56, .64, 1); }
.rk-coach-face { flex: none; }
.rk-coach-face .rk-face { width: 14cqw; height: 14cqw; }
.rk-coach-body { flex: 1; min-width: 0; text-align: left; }
.rk-coach-text { margin: 0; font: 500 clamp(13px, 3.8cqw, 18px)/1.6 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.rk-coach-text b { color: var(--leafD); font-weight: 900; }
.rk-coach-btns { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; margin-top: .6cqw; }

/* ───── 配属発表・エンディング ───── */
.rk-cere { background: #FFF6DA; overflow: hidden; padding: 0; }
.rk-rays { position: absolute !important; left: 50%; top: 42%; width: 260cqh; height: 260cqh; margin: -130cqh 0 0 -130cqh; background: radial-gradient(circle, #FFF8E4 0%, #FFF1C8 22%, #FFE7A8 48%); opacity: .9; }
@keyframes rkSpin { to { transform: rotate(360deg); } }
.rk-cere-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; padding: max(6cqw, env(safe-area-inset-top)) 5cqw max(4cqw, env(safe-area-inset-bottom)); text-align: center; overflow-y: auto; touch-action: pan-y; }
.rk-cere-in > * { flex: none; }
.rk-cere-day { margin: 0; font: 600 clamp(12px, 3.2cqw, 15px)/1 var(--disp); letter-spacing: .24em; background: var(--pen); color: #fff; padding: .55em 1.2em .5em 1.4em; border-radius: var(--hr2); }
.rk-cere-sub { margin: 0; font: 700 clamp(13px, 4cqw, 19px)/1.6 var(--body); text-shadow: 0 0 .3em #fff, 0 0 .6em #fff; word-break: keep-all; }
.rk-cc-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.rk-cc { display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; padding: 2.4cqw 1.6cqw; background: var(--grain), #fff; border: 2.5px solid var(--pen); border-radius: var(--hr); box-shadow: var(--sh); transition: transform .15s, box-shadow .15s, opacity .3s; }
.rk-cc .rk-face { width: 22cqw; height: 22cqw; }
.rk-cc span { font: 900 clamp(12px, 3.4cqw, 16px)/1.25 var(--body); word-break: keep-all; }
.rk-cc.on { transform: scale(1.07) rotate(-1deg); box-shadow: var(--sh), 0 0 0 5px var(--c); }
.landed .rk-cc:not(.win) { opacity: .25; transform: scale(.9); }
.rk-cc.win { transform: scale(1.1); box-shadow: var(--sh), 0 0 0 6px var(--c), 0 0 5cqw var(--c); }
.rk-end-art { position: relative; width: 100%; aspect-ratio: 400 / 250; border-radius: var(--hr); overflow: hidden; border: 2.5px solid var(--pen); background: #fff; box-shadow: var(--sh); animation: rkReveal .7s cubic-bezier(.34, 1.56, .64, 1); }
.rk-end-art .scene-svg, .rk-end-art .scene-img { width: 100%; height: 100%; display: block; object-fit: cover; }
.rk-end-art .rk-fig-box { position: absolute; bottom: 2%; height: 74%; }
.rk-end-art .e-rookie { left: 54%; }
.rk-end-art .e-senior { left: 18%; }
.rk-end-art.best { box-shadow: var(--sh), 0 0 0 4px #fff, 0 0 0 7px var(--sun); }
@keyframes rkReveal { from { opacity: 0; transform: scale(.4) rotate(-8deg); } }
.rk-end-type { display: flex; gap: 2cqw; align-items: center; justify-content: center; flex-wrap: wrap; }
.rk-end-badge { font: 700 clamp(13px, 4cqw, 19px)/1 var(--disp); letter-spacing: .14em; color: #fff; padding: .45em .9em; border-radius: var(--hr2); border: 2px solid var(--pen); background: var(--leafD); }
.rk-end-badge.best { background: var(--grain), radial-gradient(circle at 30% 30%, #FFE07A, #F5A623); color: var(--ink); }
.rk-end-word img { width: 66cqw; height: auto; }
.rk-cere-name { font-size: clamp(26px, 8.6cqw, 44px) !important; --deco: linear-gradient(170deg, var(--c2, #FFB08C) 10%, var(--c) 80%); }
.rk-end-title { margin: 0; font: 900 clamp(15px, 4.8cqw, 23px)/1.4 var(--body); }
.rk-end-text { margin: 0; padding: 3cqw 4cqw; text-align: left; font: 400 clamp(14px, 4.1cqw, 19px)/1.85 var(--hand); background: var(--grain), #fff; border: 2px solid rgba(92, 68, 51, .3); border-radius: var(--hr2); background-image: var(--grain), repeating-linear-gradient(transparent 0 calc(1.85em - 1px), rgba(154, 211, 242, .5) calc(1.85em - 1px) 1.85em); }
.rk-cere-chr { width: 40cqw; }

/* ───── 結果 ───── */
.rk-result { padding: 0; background: linear-gradient(180deg, #E3F4D3, var(--paper) 28%); }
.rk-res-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 3cqw; padding: max(4cqw, env(safe-area-inset-top)) 5cqw max(5cqw, env(safe-area-inset-bottom)); overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
.rk-res-in > * { flex: none; }
.rk-res-logo { width: 46cqw; height: auto; }
.rk-res-logo-t { font-size: clamp(22px, 7cqw, 34px) !important; }
.rk-panel { position: relative; width: 100%; text-align: left; padding: 3.2cqw 4cqw 3.6cqw; background: var(--grain), #FFFDF6; border: 2.5px solid var(--pen); border-radius: var(--hr); box-shadow: var(--sh); }
.rk-panel-h { margin: 0 0 1.8cqw; display: flex; align-items: center; gap: .5em; font: 900 clamp(14px, 4.4cqw, 21px)/1.2 var(--body); }
.rk-panel-h::before { content: ""; width: 1.1em; height: .55em; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--leaf) 0 4px, #fff 4px 6px); transform: rotate(-6deg); }
.rk-panel-h b { margin-left: auto; font: 700 1em/1 var(--disp); color: var(--leafD); }
.rk-score { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1cqw 3cqw; }
.rk-score small { font: 900 clamp(12px, 3.2cqw, 15px)/1 var(--body); color: var(--mute); }
.rk-score .tot { display: block; font: 700 clamp(36px, 12.5cqw, 62px)/1 var(--disp); font-variant-numeric: tabular-nums; }
.rk-score .best { font: 700 clamp(12px, 3.2cqw, 15px)/1 var(--body); color: var(--mute); display: flex; gap: .5em; align-items: center; }
.rk-score .best em { font: 600 .9em/1 var(--disp); font-style: normal; color: #fff; background: var(--peachD); padding: .35em .6em; border-radius: 999px; animation: rkPop .5s cubic-bezier(.34, 1.56, .64, 1) 1s backwards; }
.rk-rank { display: flex; flex-direction: column; align-items: center; gap: 1cqw; }
.rk-rank .rk-medal { animation: rkReveal .7s cubic-bezier(.34, 1.56, .64, 1) .3s backwards; }
.rk-rank span { font: 900 clamp(12px, 3.2cqw, 15px)/1.2 var(--body); white-space: nowrap; }
.rk-radar { width: 100%; height: auto; display: block; }
.rk-radar .poly { transform-box: view-box; transform-origin: 160px 150px; animation: rkGrow 1s cubic-bezier(.2, .9, .3, 1.15) backwards; }
@keyframes rkGrow { from { transform: scale(0); opacity: 0; } }
.rk-legend { margin: .6cqw 0 0; display: flex; gap: 3.4cqw; justify-content: center; font: 700 clamp(12px, 3.2cqw, 14px)/1 var(--body); color: var(--mute); }
.rk-legend span { display: flex; align-items: center; gap: .4em; }
.rk-legend span::before { content: ""; width: 1.5em; height: .7em; border-radius: 3px; border: 2px dashed var(--lc); }
.rk-legend span.solid::before { border-style: solid; background: var(--lc); opacity: .7; }
.rk-match-lead { margin: 0 0 1.6cqw; font: 700 clamp(12px, 3.6cqw, 17px)/1.4 var(--body); color: var(--mute); }
.rk-match-job { display: flex; align-items: center; gap: 3cqw; }
.rk-match-job .rk-face { width: 24cqw; height: 24cqw; }
.rk-match-job > div { min-width: 0; }
.rk-match-type { margin: 0 0 .4em; font: 900 clamp(12px, 3.2cqw, 14px)/1.2 var(--body); color: var(--ct); }
.rk-match-name { margin: 0; font: 900 clamp(18px, 5.6cqw, 28px)/1.25 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.rk-reason { margin: 2.4cqw 0 0; padding: .7em .9em; border-radius: var(--hr2); background: var(--cl); font: 700 clamp(13px, 3.8cqw, 17.5px)/1.65 var(--body); }
.rk-desc { margin: 2cqw 0; font: 500 clamp(13px, 3.7cqw, 17px)/1.75 var(--body); }
.rk-bars { display: flex; flex-direction: column; gap: 1.2cqw; }
.rk-bar { display: grid; grid-template-columns: 9.4em 1fr 3em; align-items: center; gap: .7em; font: 700 clamp(12px, 3.2cqw, 14px)/1 var(--body); white-space: nowrap; }
.rk-bar i { height: 1.1em; background: rgba(92, 68, 51, .1); border-radius: 999px; overflow: hidden; }
.rk-bar em { display: block; height: 100%; border-radius: inherit; width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.rk-bar span:last-child { text-align: right; font: 700 1em/1 var(--disp); }
.rk-small { margin: 2cqw 0 0; font-size: clamp(12px, 3.2cqw, 13.5px); color: var(--mute); line-height: 1.6; }
.rk-bonds { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw 2.6cqw; }
.rk-bonds > div { display: flex; align-items: center; gap: 1.6cqw; min-width: 0; font: 700 clamp(12px, 3.2cqw, 14.5px)/1.3 var(--body); }
.rk-bonds .rk-face { width: 10cqw; height: 10cqw; }
.rk-bonds small { display: block; color: var(--mute); font-weight: 500; font-size: 12px; }
.rk-res-btns { width: 100%; display: flex; flex-direction: column; gap: 2.6cqw; align-items: center; padding: 1cqw 0 2cqw; }
.rk-res-btns .rk-btn { min-width: 74cqw; }
.rk-new-mems { display: flex; gap: 2cqw; overflow-x: auto; padding: 1cqw .5cqw 2cqw; touch-action: pan-x; }
.rk-new-mems .rk-polar { width: 26cqw; flex: none; }

/* ───── アルバム ───── */
.rk-album { justify-content: flex-start; gap: 2.4cqw; background: linear-gradient(180deg, #FDF0D2, transparent 30%); }
.rk-tabs { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; }
.rk-tab { min-height: 44px; padding: .4em .2em; border: 2.5px solid var(--pen); border-radius: var(--hr2) var(--hr2) 6px 6px; background: #FFFDF6; font: 900 clamp(12px, 3.3cqw, 15px)/1.2 var(--body); word-break: keep-all; }
.rk-tab.on { background: var(--sun); transform: translateY(-2px); }
.rk-alb-body { width: 100%; flex: 1 1 auto !important; min-height: 0; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; padding: 1cqw .6cqw 4cqw; text-align: left; }
.rk-alb-count { margin: 0 0 2cqw; font: 700 clamp(12px, 3.5cqw, 16px)/1.4 var(--body); color: var(--mute); }
.rk-alb-count b { font: 700 1.2em/1 var(--disp); color: var(--leafD); }
.rk-polars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw 2.4cqw; }
.rk-polar { display: flex; flex-direction: column; gap: 1cqw; padding: 1.6cqw 1.6cqw 2.2cqw; background: #fff; border-radius: 4px; box-shadow: 0 2px 0 rgba(92, 68, 51, .15), 0 4px 10px rgba(92, 68, 51, .12); transform: rotate(var(--rot, -2deg)); border: 1.5px solid rgba(92, 68, 51, .18); min-height: 44px; text-align: left; }
.rk-polar:nth-child(3n+2) { --rot: 1.6deg; } .rk-polar:nth-child(3n) { --rot: -1deg; }
.rk-polar .mem-img, .rk-polar .lock { width: 100%; aspect-ratio: 1; display: block; border-radius: 2px; object-fit: cover; }
.rk-polar .lock { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #F4EEE2 0 8px, #EEE6D6 8px 16px); font: 700 8cqw/1 var(--disp); color: #CDBFA9; }
.rk-polar b { font: 400 clamp(12px, 3.2cqw, 13.5px)/1.35 var(--hand); color: var(--ink); }
.rk-polar.off b { color: #B9AC98; }
.rk-ends { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; }
.rk-end-card { min-height: 44px; display: flex; flex-direction: column; gap: 1cqw; padding: 1.6cqw; background: var(--grain), #fff; border: 2.5px solid var(--pen); border-radius: var(--hr2); text-align: left; }
.rk-end-card .thumb { position: relative; aspect-ratio: 400 / 250; border-radius: 8px; overflow: hidden; background: #F4EEE2; }
.rk-end-card .thumb .scene-svg, .rk-end-card .thumb .scene-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rk-end-card.off .thumb { filter: grayscale(1) opacity(.35); }
.rk-end-card b { font: 900 clamp(12px, 3.2cqw, 15px)/1.3 var(--body); }
.rk-end-card small { font: 600 clamp(12px, 3.2cqw, 13px)/1 var(--disp); letter-spacing: .1em; color: var(--mute); }
.rk-end-card.best small { color: var(--sunD); }
.rk-pedia-list { display: flex; flex-direction: column; gap: 2.6cqw; }
.rk-pedia { padding: 2.6cqw 3cqw; background: var(--grain), #fff; border: 2.5px solid var(--pen); border-radius: var(--hr); box-shadow: var(--sh); }
.rk-pedia-h { display: flex; align-items: center; gap: 2.4cqw; margin-bottom: 1.4cqw; }
.rk-pedia-h .rk-face { width: 13cqw; height: 13cqw; }
.rk-pedia-h b { display: block; font: 900 clamp(15px, 4.6cqw, 22px)/1.25 var(--body); color: var(--ct); }
.rk-pedia-h small { font: 700 clamp(12px, 3.2cqw, 13.5px)/1.3 var(--body); color: var(--mute); }
.rk-pedia-p { margin: 1.4cqw 0 0; padding: .7em .9em; border-radius: var(--hr2); background: var(--cl); }
.rk-pedia-p strong { display: block; margin-bottom: .3em; font: 900 clamp(12px, 3.5cqw, 16px)/1.3 var(--body); }
.rk-pedia-p p { margin: 0; font: 500 clamp(12.5px, 3.6cqw, 16.5px)/1.7 var(--body); }
.rk-pedia-p.off { background: #F4EEE2; color: #A99A86; }
.rk-hist { display: flex; flex-direction: column; gap: 2cqw; }
.rk-hist > div { display: grid; grid-template-columns: 12cqw 1fr auto; gap: 2.4cqw; align-items: center; padding: 1.6cqw 2.4cqw; background: #fff; border: 2px solid rgba(92, 68, 51, .3); border-radius: var(--hr2); }
.rk-hist .rk-face { width: 12cqw; height: 12cqw; }
.rk-hist b { display: block; font: 900 clamp(13px, 3.8cqw, 17px)/1.3 var(--body); }
.rk-hist small { display: block; font: 500 clamp(12px, 3.2cqw, 13px)/1.45 var(--body); color: var(--mute); }
.rk-hist em { font: 700 clamp(15px, 4.6cqw, 22px)/1 var(--disp); font-style: normal; }
.rk-empty { padding: 6cqw 2cqw; text-align: center; color: var(--mute); font: 500 clamp(13px, 3.8cqw, 17px)/1.7 var(--body); }
.rk-zoom { display: flex; flex-direction: column; align-items: center; gap: 2cqw; }
.rk-zoom .rk-polar { width: 70cqw; }
.rk-zoom .rk-polar b { font-size: clamp(14px, 4.4cqw, 20px); }

/* ───── 粒子・ワイプ・読み込み ───── */
.rk-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }
.rk-wipe { position: absolute; inset: -10%; z-index: 50; pointer-events: all; background: var(--grain), radial-gradient(circle at 40% 40%, #fff6, transparent 40%), var(--wc); clip-path: circle(0% at var(--wx) var(--wy)); }
.rk-wipe.in { animation: rkWipeIn .36s cubic-bezier(.6, 0, .4, 1) forwards; }
.rk-wipe.out { clip-path: circle(150% at var(--wx) var(--wy)); animation: rkWipeOut .38s cubic-bezier(.6, 0, .4, 1) forwards; }
@keyframes rkWipeIn { to { clip-path: circle(150% at var(--wx) var(--wy)); } }
@keyframes rkWipeOut { to { clip-path: circle(0% at 50% 50%); opacity: .4; } }
.rk-loading { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 2cqw; background: var(--grain), var(--paper); font: 600 clamp(12px, 3.2cqw, 15px)/1 var(--disp); letter-spacing: .3em; color: var(--mute); transition: opacity .4s; }
.rk-loading i { width: 4cqw; height: 4cqw; border-radius: 50%; background: var(--leaf); animation: rkDot .9s ease-in-out infinite alternate; }
.rk-loading i:nth-child(2) { background: var(--sun); animation-delay: .15s; }
.rk-loading i:nth-child(3) { background: var(--sky); animation-delay: .3s; }
.rk-loading span { margin-left: 2cqw; }
@keyframes rkDot { to { transform: translateY(-3cqw); } }
.rk-loading.off { opacity: 0; pointer-events: none; }

/* 低い画面（375×667 など）では詰める */
@container (min-aspect-ratio: 1/1.95) {
    .rk-play { gap: 1.2cqw; }
    .rk-act { padding: 1.1cqw 1.6cqw 1.2cqw; row-gap: .7cqw; }
    .rk-act-ic { width: 8.6cqw; height: 8.6cqw; }
    .rk-act { grid-template-columns: 8.6cqw 1fr; }
    .rk-stats { padding: 1.2cqw 2.2cqw 1.4cqw; row-gap: 1cqw; }
    .rk-stat .rk-face { width: 9cqw; height: 9cqw; }
    .rk-track { padding-bottom: 2.6cqw; }
    .rk-title-logo { margin-top: 3cqw; width: 76cqw; }
}
/* ───── 生成画像が届いたとき（ui-img: 枠の画像／fig-img: 人物の画像） ───── */
.ui-img .rk-btn-main, .ui-img .rk-btn-sun, .ui-img .rk-btn-sub {
    background: none; box-shadow: none; border: 0 solid transparent; border-width: 0 1.5em;
    border-image: url(assets/ui_btn_green.webp) 0 22% fill / 0 1.5em stretch;
    padding-left: .4em; padding-right: .4em; filter: drop-shadow(0 3px 2px rgba(92, 68, 51, .22));
}
.ui-img .rk-btn-sun { border-image-source: url(assets/ui_btn_sun.webp); }
.ui-img .rk-btn-sub { border-image-source: url(assets/ui_btn_cream.webp); }
.ui-img .rk-btn:active { transform: translateY(2px) scale(.98); box-shadow: none; }
.ui-img .rk-btn-main { text-shadow: 0 2px 0 #3E7F24, 0 0 6px rgba(62, 127, 36, .5); }
.ui-img .rk-sheet-card { background: none; border: 22px solid transparent; border-image: url(assets/ui_card.webp) 14% fill / 22px stretch; box-shadow: none; filter: drop-shadow(0 6px 6px rgba(92, 68, 51, .18)); padding: 2cqw 1.6cqw 2.6cqw; }
.ui-img .rk-sheet-card::before { background: url(assets/ui_tape_peach.webp) center / 100% 100% no-repeat; height: 6cqw; top: -5cqw; }
.ui-img .rk-sheet-card::after { background: url(assets/ui_tape_blue.webp) center / 100% 100% no-repeat; height: 6cqw; top: -5cqw; }
.ui-img .rk-medal { width: 26cqw; height: 28cqw; border: 0; border-radius: 0; box-shadow: none; padding-bottom: 6cqw; background: url(assets/ui_rosette.webp) center / contain no-repeat; color: #F08A6A; text-shadow: 0 0 3px #fff, 0 2px 0 #fff; }
.ui-img .rk-medal.c { background: url(assets/ui_rosette.webp) center / contain no-repeat; color: var(--leafD); filter: hue-rotate(60deg) saturate(.8); }
.fig-img .rk-face.img.senior .fig { --fs: 185%; --fx: -42%; --fy: -8%; }
.fig-img .rk-face.img.rookie .fig { --fs: 150%; --fx: -25%; --fy: 4%; }
.fig-img .rk-sc-senior { height: 88%; bottom: 1%; left: 2%; }
.fig-img .rk-sc-rookie { height: 70%; }
.fig-img .rk-end-art .e-senior { height: 90%; left: 12%; }
.fig-img .rk-end-art .e-rookie { height: 70%; }
.fig-img .rk-peek .rk-fig-box { width: 17cqw; }
.fig-img .rk-fig-box img.fig { filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .6)); }
@media (prefers-reduced-motion: reduce) {
    .rk-title-logo, .rk-title-btns .rk-btn-main, .rk-rays, .rk-fig-box.bob .fig, .rk-peek .rk-fig-box { animation: none; }
}