.rf-stage{background:var(--cubicle);border:10px solid var(--trim);border-radius:14px;padding:16px;margin:16px 0;min-height:320px}
.rf-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.rf-bar button{min-height:48px;padding:0 20px;font:700 18px var(--font);border-radius:999px;border:0;cursor:pointer}
#rf-tap{background:#C2332E;color:#fff}#rf-tap:disabled{opacity:.5;cursor:default}
#rf-play{background:var(--navy);color:#fff}
#rf-clock{margin-left:auto;font-variant-numeric:tabular-nums;color:#fff;font-weight:700;background:var(--navy);border-radius:999px;padding:4px 12px}
#rf-feed{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.rf-msg{background:var(--paper);color:var(--ink);border-radius:12px;padding:8px 12px;display:grid;grid-template-columns:48px 1fr;gap:4px 12px;align-items:start}
.rf-msg img{width:48px;height:48px;object-fit:contain;border-radius:50%;background:var(--wall);grid-row:span 2}
.rf-msg b{font-size:14px;color:var(--slate);overflow-wrap:anywhere}
.rf-big{font-size:22px;font-weight:700;color:var(--navy)}.rf-card{background:var(--memo);border-radius:4px;padding:12px;font-weight:700}
@media (prefers-reduced-motion:no-preference){.rf-msg{animation:rf-in .2s ease-out}@keyframes rf-in{from{opacity:0}to{opacity:1}}}
/* --- Game art (web-art/game). Offsets from web-art/README.md, as % of the frame size. --- */
.rf-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rf-stage{min-height:0}
.rf-phone{position:relative;width:100%;max-width:340px;margin:0 auto}
.rf-frame{display:block;width:100%;height:auto}
/* phone screen: x=24 y=50 272x500 of 340x620 */
.rf-screen{position:absolute;left:7.0588%;top:8.0645%;width:80%;height:80.6452%;overflow-y:auto;background:var(--wall);border-radius:4px;padding:6px;box-sizing:border-box;scroll-behavior:smooth}
.rf-screen #rf-feed{gap:6px}
.rf-screen .rf-msg{grid-template-columns:32px 1fr;gap:2px 8px;padding:6px 8px;font-size:13px;line-height:1.35}
.rf-screen .rf-msg img{width:32px;height:32px}
.rf-screen .rf-msg b{font-size:11px}
.rf-result{display:flex;align-items:center;gap:16px;margin:8px 0 16px}
.rf-badge{width:112px;height:112px;flex:0 0 112px}
.rf-result .rf-big{margin:0}
.rf-sub{margin:16px 0 8px}
.rf-email,.rf-lesson{position:relative;margin:0 0 20px;container-type:inline-size}
/* email inner white area: x=22 y=66 876x532 of 940x640 */
.rf-email-in{position:absolute;left:2.3404%;top:10.3125%;width:93.1915%;height:83.125%;overflow-y:auto;padding:12px 16px;box-sizing:border-box;color:var(--ink)}
.rf-clues{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rf-clue{display:grid;gap:4px;padding:0 0 10px;border-bottom:1px solid #ddd}
.rf-clue:last-child{border-bottom:0}
.rf-clue-from .rf-clue-text{font-weight:700;overflow-wrap:anywhere}
.rf-clue-note{font-size:14px;color:var(--slate)}
.rf-pills{display:flex;flex-wrap:wrap;gap:6px}
/* pills: @2x art shown at 50% of 1x, 36 px tall */
.rf-pill{height:36px;width:auto;display:block}
/* lesson card: text at x=140 of 1200, lines from y~205; Poppins Bold navy */
.rf-lesson-bg{display:block;width:100%;height:auto}
.rf-lesson-text{position:absolute;left:11.6667%;top:29%;width:48%;height:50%;margin:0;color:#1F3A5F;font-weight:700}
.rf-lesson-list{margin:0;padding:0 0 0 1.2em;font-size:2.8333cqw;line-height:1.3;display:grid;gap:.45em}
.rf-lesson-safe{position:absolute;left:0;top:96%;margin:0;font-weight:400;font-size:1.6cqw;color:var(--slate)}
@media (max-width:640px){
  .rf-stage{padding:10px;border-width:6px}
  .rf-email-in{padding:6px 8px}
  .rf-clue-text{font-size:13px}.rf-clue-note{font-size:12px}
  .rf-badge{width:80px;height:80px;flex-basis:80px}
  .rf-result .rf-big{font-size:18px}
  /* card too small to overlay readably: keep the art, put the text on paper below it */
  .rf-lesson-text{position:static;width:auto;height:auto;background:var(--paper);border-radius:0 0 8px 8px;padding:12px 16px}
  .rf-lesson-list{font-size:18px}
  .rf-lesson-safe{position:static;font-size:14px;margin-top:8px}
}
@media (max-width:640px){
  /* email frame too small to hold the clues at phone width: keep the frame's title bar (top 66 px of 940) and let the white area grow */
  .rf-email .rf-frame{aspect-ratio:940/66;height:auto;object-fit:cover;object-position:top}
  .rf-email-in{position:static;width:auto;height:auto;overflow:visible;background:#fff;border:solid #D6D2C6;border-width:0 6px 6px;padding:10px 12px}
}