/* SORISUP SOFT FOREST · 2026-10-21
   Art direction: warm ivory, sage, mist blue, dusty lavender, pale peach.
   Accessibility: restrained saturation, dark readable copy, visible focus,
   no autoplay motion, no overlays/interstitials during normal play. */
:root {
 --sori-cream:#FAF7F2;
 --sori-paper:#FFFCF8;
 --sori-ink:#35434B;
 --sori-muted:#5C6A74;
 --sori-primary:#675878;
 --sori-primary-hover:#59486E;
 --sori-line:#E5E1E1;
 --sori-sage:#DDE9D9;
 --sori-blue:#E0ECF3;
 --sori-lavender:#EAE2F1;
 --sori-peach:#F6E3D9;
 --sori-butter:#F7EDD1;
 --sori-shadow:0 8px 22px rgba(62,68,80,.065);
 --v2-ink:var(--sori-ink);
 --v2-muted:var(--sori-muted);
 --v2-primary:var(--sori-primary);
 --v2-primary-dark:var(--sori-primary-hover);
 --v2-canvas:var(--sori-cream);
 --v2-line:var(--sori-line);
 --v2-card:var(--sori-paper);
 --v2-shadow:var(--sori-shadow);
 --purple:var(--sori-primary);
 --ink:var(--sori-ink);
 color:var(--sori-ink);
 background:var(--sori-cream);
 color-scheme:light;
}
body,.app{background:var(--sori-cream);color:var(--sori-ink)}
.topbar{
 background:rgba(255,252,248,.97);
 border-bottom:1px solid #EDE7E4;
 box-shadow:0 2px 12px rgba(65,71,78,.035);
}
.top-logo{color:var(--sori-ink)}
.top-logo b{color:#71618B}
.logo-flower{
 display:inline-grid;place-items:center;
 width:34px;height:34px;
 background:var(--sori-lavender);
 border:1px solid #DCD2E6;
 border-radius:50%;
 color:#8878A1;font-size:24px;text-shadow:none;
}
.home-button,.top-icon{
 background:#F1EEF3;color:var(--sori-primary);
 border:1px solid #E3DCE8;box-shadow:none;
}
.home-button:focus-visible,.top-icon:focus-visible{
 outline:3px solid #7E6A9E;outline-offset:3px;
}
.home-screen .hero-row{
 min-height:218px;
 padding:clamp(21px,3vw,34px);
 background:
  linear-gradient(90deg,rgba(255,252,249,.96) 0%,rgba(255,252,249,.76) 35%,rgba(255,252,249,.08) 69%),
  url('/assets/sorisup-soft/forest-background.webp') center 60%/cover no-repeat;
 border-radius:26px;border:1px solid #EAE5DF;
 box-shadow:var(--sori-shadow);
 overflow:hidden;display:flex;align-items:flex-start;
}
.home-screen .hero-copy{padding:0;max-width:570px}
.home-screen .hero-copy h1{
 color:#344450;letter-spacing:-.6px;
 text-shadow:0 1px 0 rgba(255,255,255,.65);
}
.home-screen .hero-copy h1 em{color:#72618D}
.home-screen .hero-copy>p{color:#566773;font-weight:700}
.home-screen .mode-grid{gap:clamp(10px,1.6vw,17px)}
.home-screen .mode-card{
 border:1.5px solid var(--sori-line)!important;
 box-shadow:var(--sori-shadow)!important;
 background:var(--sori-paper)!important;
 transition:border-color .12s ease,background-color .12s ease,transform .12s ease!important;
}
.home-screen .mode-card.main-play.pink{background:var(--sori-lavender)!important;border-color:#D9D0E5!important}
.home-screen .mode-card.main-play.yellow{background:var(--sori-butter)!important;border-color:#E9DCB8!important}
.home-screen .mode-card.three-d-launch{background:var(--sori-blue)!important;border-color:#CFDEE9!important}
.home-screen .mode-card.other-play[data-open="sound"]{background:#F0F5EF!important;border-color:#DAE6D9!important}
.home-screen .mode-card.other-play[data-open="game"]{background:#FCF2EC!important;border-color:#EFDFD3!important}
.home-screen .mode-card:hover{border-color:#AE9FBE!important;box-shadow:0 8px 22px rgba(65,70,86,.085)!important}
.home-screen .mode-card:active{transform:scale(.985)!important}
.home-screen .mode-card .mode-art{
 color:transparent!important;font-size:0!important;line-height:0!important;
 background-color:rgba(255,252,250,.65)!important;
 background-repeat:no-repeat!important;background-position:center!important;
 background-size:contain!important;
 border:0!important;
 box-shadow:none!important;filter:none!important;
}
.home-screen .mode-card[data-open="instrument"] .mode-art{background-image:url('/assets/sorisup-soft/icon-piano.webp')!important}
.home-screen .mode-card[data-open="song"] .mode-art{background-image:url('/assets/sorisup-soft/icon-sing.webp')!important}
.home-screen .mode-card[data-open="threeD"] .mode-art{background-image:url('/assets/sorisup-soft/icon-train.webp')!important}
.home-screen .mode-card[data-open="sound"] .mode-art{background-image:url('/assets/sorisup-soft/icon-sounds.webp')!important}
.home-screen .mode-card[data-open="game"] .mode-art{background-image:url('/assets/sorisup-soft/icon-games.webp')!important}
.home-screen .mode-card .mode-text strong{color:#34404B;letter-spacing:-.5px}
.home-screen .mode-card .mode-text small{color:#546775}
.home-screen .other-play-title{color:#3A4951}
.home-youtube-link{background:var(--sori-paper);border-color:#E8E1E1;color:var(--sori-muted)}
.home-youtube-link:hover{background:var(--sori-paper);border-color:#CABDD5}
.three-d-screen .three-d-choice{
 background:var(--sori-paper);border:1.5px solid #E4DFE0;
 box-shadow:var(--sori-shadow);color:var(--sori-ink);
}
.three-d-screen .three-d-choice:nth-child(1){background:#EEF4F5}
.three-d-screen .three-d-choice:nth-child(2){background:#F2EDF6}
.three-d-screen .three-d-choice:nth-child(3){background:#F5F0E8}
.three-d-screen .three-d-choice .three-d-icon{
 font-size:0!important;color:transparent!important;
 background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;
 background-color:rgba(255,255,255,.72);border-radius:21px;border:0;
}
.three-d-screen [data-scene="line5"] .three-d-icon,
.three-d-screen [data-scene="shinkansen"] .three-d-icon{background-image:url('/assets/sorisup-soft/icon-train.webp')!important}
.three-d-screen [data-scene="elevator"] .three-d-icon{background-image:url('/assets/sorisup-soft/icon-elevator.webp')!important}
.three-d-screen .three-d-heading h2,.three-d-screen .three-d-choice strong{color:var(--sori-ink)}
.three-d-screen .three-d-choice small{color:var(--sori-muted)}
.three-d-screen .three-d-choice:hover{border-color:#A797B9}
.three-d-close{background:var(--sori-lavender);color:var(--sori-primary)}
.section-heading h2{color:var(--sori-ink)}
.stage,.song-score-panel,.game-stage,.sound-card{
 border-color:var(--sori-line);
 box-shadow:var(--sori-shadow);
 background:var(--sori-paper);
}
.stage-title>span,.song-message>span{background:var(--sori-lavender);filter:saturate(.55)}
.pick,.song-pick,.game-pick,.category-pick{
 border-color:var(--sori-line);background:var(--sori-paper);color:var(--sori-ink);
}
.pick.selected,.song-pick.selected,.game-pick.selected,.category-pick.selected,
.action-button:not(.secondary){background:var(--sori-primary);border-color:var(--sori-primary-hover);color:#fff;box-shadow:0 2px 0 var(--sori-primary-hover)}
.action-button.secondary{background:var(--sori-butter);border-color:#E3D5B3;color:#564B37;box-shadow:none}
.small-control{background:var(--sori-lavender);color:var(--sori-primary)}
.keyboard.piano-keyboard{
 background:#DFE7E8;border-color:#B4C4C9;box-shadow:0 4px 0 #C5D1D2,inset 0 1px 0 #fff;
}
.keyboard.piano-keyboard .key.piano-white{border-color:#CFDADD;background:linear-gradient(#FFFDF9 76%,#F1F3EF)}
.keyboard.piano-keyboard .key.piano-black{background:linear-gradient(135deg,#52535E,#333945);border-color:#353B44}
.keyboard.piano-keyboard .key.highlight{box-shadow:inset 0 0 0 3px #C3A56D;animation:none}
.keyboard.piano-keyboard .key.piano-white.highlight{background:linear-gradient(#FFF9E9,#E9DAB4)}
.keyboard.piano-keyboard .key.piano-white.pressed{background:#D7E8DE;border-color:#8DB9A1}
.keyboard.piano-keyboard .key.piano-black.pressed{background:#757496}
.progress-track{background:#EDEAE6}
.progress-fill{background:linear-gradient(90deg,#A4C6B2,#9389B4)}
.memory-card{background:var(--sori-blue)}
.memory-card.matched{background:var(--sori-sage);box-shadow:0 2px 0 #B1CDB7}
.sound-emoji,.stage-title>span,.song-message>span,#instrumentEmoji,.section-sticker{filter:saturate(.6)}
.sound-feedback{background:var(--sori-blue);color:#425D6F}
.drawing-canvas{background:var(--sori-paper);border-color:var(--sori-line)}
.toast{background:#445566;color:#fff}
/* Parent/supporter section is optional and never blocks play. */
.shion-langs{background:var(--sori-paper);border-color:#E7DFE5}
.shion-langs button{color:var(--sori-muted)}
.shion-langs button[aria-pressed="true"]{background:var(--sori-lavender);color:#4E4360}
#shionParentButton{
 border:1px solid #DAD0E4;background:#F3EEF7;color:#554865;
 padding-left:45px;min-height:43px;font-weight:800;
}
#shionParentButton::before{
 content:'';position:absolute;left:9px;top:50%;transform:translateY(-50%);
 width:28px;height:28px;
 background:url('/assets/sorisup-soft/icon-parent.webp') center/contain no-repeat;
}
.shion-overlay{background:rgba(43,48,52,.55)}
.shion-dialog{background:var(--sori-paper);color:var(--sori-ink);border:1px solid #E6E0E0;box-shadow:0 18px 55px rgba(29,35,48,.17)}
.shion-close{background:var(--sori-lavender);color:var(--sori-primary)}
.shion-core{background:#F4F2F1;border-color:var(--sori-line)}
.shion-parent-tools button{background:var(--sori-paper);color:var(--sori-primary);border-color:#D7CADF}
.shion-promotion{border-color:var(--sori-line)}
.shion-product{background:#F8F6F4;border-color:var(--sori-line)}
.shion-links a,.shion-links button,.shion-donate{background:var(--sori-lavender);color:var(--sori-primary)}
.shion-answer-grid button,.shion-rest-extend{background:var(--sori-lavender);border-color:#D4C7E3;color:#514363}
.shion-rest-select{background:var(--sori-paper);border-color:#B9AFC5;color:var(--sori-ink)}
.shion-disclosure{background:var(--sori-paper);border-color:var(--sori-line)}
.shion-rest-body{
 background:linear-gradient(160deg,#FFFCF8,#F6F2F8 75%);
 border:1px solid #E5DCE8;
}
.shion-rest-body .shion-sleep-bunny{
 width:min(68vw,280px);max-height:280px;object-fit:contain;
 filter:drop-shadow(0 6px 10px rgba(65,57,83,.09));
}
:where(button,a,input,select):focus-visible{outline:3px solid #76659A!important;outline-offset:3px}
@media(max-width:790px){
 .home-screen .hero-row{
   min-height:167px;padding:20px 16px 18px;
   background-position:center 69%;border-radius:20px;
   background-image:linear-gradient(90deg,rgba(255,252,249,.96),rgba(255,252,249,.63) 60%,rgba(255,252,249,.04)),url('/assets/sorisup-soft/forest-background.webp');
 }
 .home-screen .hero-copy h1{font-size:clamp(27px,7vw,35px)}
 .home-screen .hero-copy>p{font-size:12px}
 .home-screen .mode-card{border-radius:18px}
 .home-screen .mode-card.main-play{min-height:135px}
 .home-screen .mode-card.main-play .mode-art{background-color:transparent!important}
 .home-screen .mode-card.other-play .mode-art{background-color:transparent!important}
 .shion-langs button{min-height:35px}
 .top-logo{font-size:21px}
 .logo-flower{width:29px;height:29px;font-size:21px}
}
@media(orientation:landscape) and (max-height:540px){
 .home-screen .hero-row{min-height:95px;padding:10px 18px;background-position:center 68%}
 .home-screen .hero-copy h1{font-size:27px}
 .home-screen .mode-card.main-play{min-height:130px}
}
@media(prefers-reduced-motion:reduce){
 .home-screen .mode-card{transition:none!important}
 .home-screen .mode-card:active{transform:none!important}
}