body.rapunzel-game { background:#e5efe2; color:#344d46; }
.rapunzel-game > header,.rapunzel-game > footer { display:none; }
.rapunzel-game #app { width:min(1100px,100%); max-width:1100px; min-height:100dvh; margin:auto; padding:0 18px 18px; background:#fffdf3; }
.rp-shell { font-family:Library,'Trebuchet MS',sans-serif; letter-spacing:0; }
.rp-shell * { box-sizing:border-box; }
.rp-shell button,.rp-shell input,.rp-shell a { font:inherit; }
.rp-shell button,.rp-shell .button { min-height:48px; min-width:48px; padding:10px 14px; border-radius:8px; font-weight:800; cursor:pointer; line-height:1.2; }
.rp-shell button:disabled { cursor:default; opacity:.65; }
.rp-shell :focus-visible { outline:3px solid #a978a8; outline-offset:3px; }
.rp-primary { background:#398278; border:2px solid #28665f; color:white; box-shadow:0 3px 0 #285e57; }
.rp-primary:hover { background:#2d6c65; }
.rp-secondary { background:#fffdf5; border:1px solid #b5c7af; color:#456451; text-decoration:none; }
.rp-secondary:hover { background:#edf4df; }
.rp-toolbar { display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid #d8dec9; }
.rp-toolbar > div { flex:1; min-width:0; }
.rp-toolbar h1 { font:800 18px/1.2 Library,'Trebuchet MS',sans-serif; margin:0 0 3px; }
.rp-toolbar span { font-size:12px; }
.rp-toolbar > a { font-size:14px; white-space:nowrap; }
.rp-sound { width:48px; padding:4px!important; font-size:24px!important; }
.rp-effects { display:flex; gap:5px; align-items:center; font-size:12px; min-height:48px; }
.rp-effects input { accent-color:#398278; width:18px; height:18px; }
.rp-heading { display:flex; align-items:baseline; gap:12px; margin:10px 0 6px; }
.rp-heading > span { font-size:12px; font-weight:800; color:#90709b; }
.rp-heading h2 { font-size:24px; line-height:1.25; margin:0; }
.rp-instruction { background:#f9f2df; border-left:4px solid #d6ba69; padding:9px 13px; font-size:18px; font-weight:700; line-height:1.4; min-height:69px; margin:0 0 8px; display:flex; align-items:center; }
.rp-workspace { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:16px; min-height:340px; align-items:start; }
.rp-workspace > * { min-width:0; }
.rp-garden-mini { height:70px; border-bottom:1px solid #dce6c8; background:#eff6e2; }
.rp-garden { display:block; width:100%; height:100%; }
.rp-board { display:block; width:100%; height:250px; background:#fffaf0; touch-action:pan-y; }
.rp-board text { font-family:Library,'Trebuchet MS',sans-serif; font-weight:700; }
.rp-ruler { cursor:grab; touch-action:none; }
.rp-ruler:active { cursor:grabbing; }
.rp-ruler:focus-visible > rect { stroke:#936ca6; stroke-width:4px; }
[data-rp-cut-zone],.rp-scissors { cursor:crosshair; touch-action:none; }
.rp-scale-note { font-size:12px; color:#737b64; font-weight:700; margin:0; text-align:center; line-height:1.4; }
.rp-desk { display:flex; flex-direction:column; align-items:center; gap:8px; }
.rp-friends { display:flex; align-items:flex-end; width:100%; height:132px; justify-content:center; }
.rp-friends .rp-rapunzel { width:95px; height:132px; }
.rp-friends .rp-pascal { width:85px; height:85px; }
.rp-keypad { display:grid; grid-template-columns:repeat(3,minmax(48px,1fr)); width:100%; gap:5px; }
.rp-key { padding:4px!important; height:48px; font-size:23px!important; background:#fffdf6; color:#436451; border:1px solid #a9c2ab; }
.rp-key:hover { background:#e7f0dc; }
.rp-feedback { display:flex; align-items:center; min-height:80px; background:#e8f0e2; border-left:4px solid #8dad8c; padding:10px 14px; font-size:16px; line-height:1.4; margin:8px 0; }
.rp-controls { display:flex; align-items:center; gap:10px; padding-top:8px; border-top:1px solid #dbe2cd; min-height:84px; }
.rp-main-controls { display:flex; flex:1; flex-wrap:wrap; align-items:center; gap:10px; min-width:0; }
.rp-tools { display:flex; flex-wrap:wrap; gap:6px; flex-shrink:0; max-width:260px; }
.rp-tools button { font-size:13px; }
.rp-align-tools { display:flex; gap:6px; align-items:center; }
.rp-align-tools button { font-size:13px; padding:8px 10px; }
.rp-arrow { width:48px; padding:5px!important; font-size:23px!important; }
.rp-answer-form { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.rp-answer-form > label { display:flex; align-items:center; gap:8px; font-size:21px; }
.rp-answer-form input { width:75px; height:52px; padding:4px; border:2px solid #87a78d; background:white; color:#335f4b; border-radius:6px; font-size:27px; text-align:center; font-weight:800; }
.rp-cut-tools { display:flex; align-items:center; gap:8px; }
.rp-cut-slider { display:flex; flex-direction:column; align-items:center; width:270px; gap:2px; }
.rp-cut-slider > span { font-size:15px; font-weight:800; }
.rp-cut-slider input { width:100%; height:48px; margin:0; appearance:none; background:transparent; accent-color:#8c75aa; touch-action:pan-y; }
.rp-cut-slider input::-webkit-slider-runnable-track { height:6px; background:#ded2e7; border:1px solid #b5a4c7; border-radius:3px; }
.rp-cut-slider input::-webkit-slider-thumb { appearance:none; width:48px; height:48px; margin-top:-22px; border:2px solid #8a70a3; border-radius:6px; background:#c9b5dc; cursor:ew-resize; }
.rp-cut-slider input::-moz-range-track { height:6px; background:#ded2e7; }
.rp-cut-slider input::-moz-range-thumb { width:46px; height:46px; border:2px solid #8a70a3; border-radius:6px; background:#c9b5dc; }
.rp-selected { border-color:#458a76!important; box-shadow:inset 0 0 0 1px #458a76; background:#e5f2d8!important; }
.rp-compare { min-height:270px; }
.rp-spools { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:5px 30px 0; }
.rp-spool-choice { display:flex!important; flex-direction:column; align-items:center; gap:3px!important; padding:6px 10px!important; border:2px solid #d6c8d9; background:#fffaf1; color:#46574c; }
.rp-spool-choice .rp-spool { width:155px; height:125px; max-width:100%; }
.rp-spool-choice strong { font-size:25px; }
.rp-spool-choice > span { font-size:12px; }
.rp-spool-choice:disabled { opacity:1!important; }
.rp-comparison-bars { display:flex; flex-direction:column; gap:9px; padding:10px 30px; }
.rp-comparison-bars > div { display:grid; grid-template-columns:80px 1fr; align-items:center; font-size:16px; }
.rp-comparison-bars i { height:15px; display:block; border:1px solid #9aa88d; border-radius:2px; }
.rp-convert-art { min-height:270px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.rp-convert-art > .rp-spool { width:215px; height:160px; }
.rp-spool-label { display:flex; flex-direction:column; align-items:center; background:#fff8df; border:2px solid #ccb78c; border-radius:6px; padding:7px 18px; margin-top:-12px; }
.rp-spool-label span { font-size:12px; }
.rp-spool-label strong { font-size:27px; }
.rp-convert-equation { font-size:24px; margin:10px 0; }
.rp-convert-equation > strong { color:#8c71a5; }
.rp-intro { text-align:center; padding:22px 0 12px; }
.rp-intro > span { font-size:14px; color:#8b6c99; font-weight:800; }
.rp-intro h2 { font-size:34px; margin:10px 0; line-height:1.25; }
.rp-intro p { max-width:650px; margin:12px auto 16px; line-height:1.5; }
.rp-intro .rp-cover-image { display:block; width:min(100%,660px); height:auto; aspect-ratio:3/2; object-fit:contain; margin:20px auto 0; border-radius:8px; }
.rp-intro > p:last-child { font-size:13px; font-weight:800; }
.rp-cover-image { width:100%; height:100%; object-fit:cover; }
.rp-help { width:calc(100% - 30px); max-width:640px; border:2px solid #b3c3aa; border-radius:8px; padding:24px; background:#fffdf2; color:#395b4b; line-height:1.6; }
.rp-help::backdrop { background:#24473866; }
.rp-finish { text-align:center; padding:18px 0; }
.rp-finish h2 { font-size:30px; margin:8px 0; }
.rp-finish > p { margin:6px 0 16px; }
.rp-celebration { height:280px; position:relative; background:#eff4e1; }
.rp-celebration > div { position:absolute; display:flex; align-items:flex-end; justify-content:center; gap:18px; inset:auto 0 0; }
.rp-celebration .rp-rapunzel { width:130px; height:210px; }
.rp-celebration .rp-pascal { width:130px; height:110px; }
.rp-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin:18px 0; }
.rp-stats > div { display:flex; align-items:center; gap:12px; text-align:left; padding:10px; border-top:2px solid #c8b7da; }
.rp-stats strong { font-size:36px; color:#557c55; }
.rp-stats span { font-size:14px; }
.rp-finish-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.rp-finish details { text-align:left; padding:14px 0; border-bottom:1px solid #d7e0ca; }
.rp-finish summary { font-weight:800; cursor:pointer; min-height:30px; }
.rp-bonus-options { display:flex; gap:10px; flex-wrap:wrap; }
.rp-wait { font-size:16px; font-weight:700; color:#6f7d64; }
.rp-made-bow { animation:rp-bow .7s ease both; }
.rp-cut-piece { animation:rp-piece .7s ease both; }
@keyframes rp-bow { from { opacity:0; } to { opacity:1; } }
@keyframes rp-piece { from { opacity:1; } to { opacity:0; } }
@keyframes rp-cheer { 50% { transform:translateY(-6px) rotate(3deg); } }
.rp-cheer { animation:rp-cheer .65s ease 3; transform-origin:center bottom; }
.rp-paused * { animation:none!important; }
.rp-paused .rp-cut-piece { opacity:0; }
@media (min-width:801px) and (max-height:760px) {
  .rp-toolbar { padding:5px 0; }
  .rp-heading { margin:6px 0; }
  .rp-board { height:220px; }
  .rp-workspace { min-height:310px; }
  .rp-friends { height:105px; }
  .rp-friends .rp-rapunzel { height:105px; }
  .rp-feedback { min-height:78px; margin:6px 0; }
  .rp-instruction { min-height:60px; padding:7px 12px; }
  .rp-compare,.rp-convert-art { min-height:240px; }
}
@media (max-width:1000px) {
  .rp-toolbar { flex-wrap:wrap; }
  .rp-toolbar h1 { font-size:16px; }
  .rp-workspace { grid-template-columns:minmax(0,1fr) 160px; gap:10px; }
  .rp-spools { padding:5px 10px; gap:12px; }
  .rp-controls { flex-wrap:wrap; }
  .rp-cut-slider { width:210px; }
}
@media (max-width:800px) {
  .rapunzel-game #app { padding:0 12px 18px; }
  .rp-toolbar > div { flex-basis:100%; order:-1; padding:4px 0; }
  .rp-toolbar > a { flex:1; }
  .rp-heading { flex-wrap:wrap; gap:4px 10px; }
  .rp-heading h2 { font-size:22px; }
  .rp-heading > span { flex-basis:100%; }
  .rp-instruction { font-size:18px; padding:10px; }
  .rp-workspace { display:flex; flex-direction:column; min-height:0; }
  .rp-main-scene { width:100%; }
  .rp-desk { flex-direction:row; flex-wrap:wrap; align-items:center; width:100%; justify-content:center; }
  .rp-friends { width:140px; height:120px; }
  .rp-friends .rp-rapunzel { width:70px; height:120px; }
  .rp-friends .rp-pascal { width:70px; height:70px; }
  .rp-keypad { width:195px; }
  .rp-feedback { min-height:90px; }
  .rp-controls { flex-direction:column; align-items:stretch; }
  .rp-main-controls { justify-content:center; }
  .rp-tools { width:100%; max-width:none; justify-content:center; }
  .rp-tools button { flex:1; }
  .rp-answer-form { justify-content:center; }
  .rp-stats { grid-template-columns:1fr; gap:0; }
  .rp-intro h2 { font-size:28px; }
  .rp-celebration { height:230px; }
}
@media (max-width:600px) {
  .rp-board { height:auto; aspect-ratio:400/260; }
  .rp-garden-mini { height:60px; }
  .rp-main-controls { flex-direction:column; align-items:stretch; }
  .rp-align-tools { justify-content:center; }
  .rp-align-tools > button:nth-child(2) { flex:1; }
  .rp-answer-form { flex-direction:column; align-items:stretch; }
  .rp-answer-form > label { justify-content:center; font-size:22px; }
  .rp-answer-form > button { width:100%; }
  .rp-cut-tools { justify-content:center; }
  .rp-cut-slider { width:auto; flex:1; min-width:0; }
  .rp-spools { gap:10px; padding:8px 0; }
  .rp-spool-choice { padding:6px!important; }
  .rp-spool-choice .rp-spool { width:130px; height:110px; }
  .rp-spool-choice strong { font-size:24px; }
  .rp-compare { min-height:240px; }
  .rp-comparison-bars { padding:8px 0; }
  .rp-bonus-options { flex-direction:column; }
  .rp-bonus-options button { width:100%; }
  .rp-finish h2 { font-size:27px; }
}
@media (prefers-reduced-motion:reduce) { .rp-shell * { animation:none!important; scroll-behavior:auto!important; } .rp-cut-piece { opacity:0; } }