body.alice-game { background:linear-gradient(90deg,#f9fbf000,#fffdf5 12%,#fffdf5 88%,#f9fbf000),url('assets/alice-cover.png') center/cover fixed; color:#304b48; }
.alice-game > header,.alice-game > footer { display:none; }
.alice-game #app { width:min(1100px,100%); max-width:1100px; margin:auto; padding:0 18px 18px; min-height:100dvh; background:#fffdf5; }
.al-shell { font-family:Nunito,'Trebuchet MS',sans-serif; letter-spacing:0; }
.al-shell * { box-sizing:border-box; }
.al-shell button,.al-shell a,.al-shell input { font:inherit; }
.al-shell button,.al-shell .button { min-height:48px; border-radius:8px; padding:10px 15px; font-weight:800; cursor:pointer; line-height:1.2; }
.al-shell button:disabled { cursor:default; opacity:1; }
.al-shell :focus-visible { outline:3px solid #bd637c; outline-offset:3px; }
.al-primary { background:#38766e; color:white; border:2px solid #2b655d; box-shadow:0 3px 0 #285f58; }
.al-primary:hover { background:#29665f; }
.al-secondary,.al-back { background:#fffdf6; color:#425b56; border:1px solid #bacdc2; text-decoration:none; }
.al-secondary:hover,.al-back:hover { background:#edf4eb; }
.al-toolbar { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #d6ddd2; }
.al-toolbar > div { flex:1; min-width:0; }
.al-toolbar h1 { margin:0 0 2px; font:800 18px/1.2 'Trebuchet MS',sans-serif; }
.al-toolbar span { font-size:12px; }
.al-toolbar .al-back { white-space:nowrap; font-size:14px; }
.al-sound { width:48px; font-size:24px!important; padding:5px!important; }
.al-motion { display:flex; align-items:center; gap:4px; font-size:12px; cursor:pointer; min-height:48px; }
.al-motion input { accent-color:#38766e; width:18px; height:18px; }
.al-heading { display:flex; align-items:baseline; gap:12px; margin:10px 0 6px; }
.al-heading span { font-size:12px; font-weight:800; color:#6c6b86; }
.al-heading h2 { font-size:22px; line-height:1.2; margin:0; }
.al-condition { background:#fffdf5; border-left:4px solid #d9b87c; padding:10px 14px; font-size:17px; line-height:1.4; }
.al-condition p { margin:0 0 3px; }
.al-condition strong { color:#315f58; }
.al-instruction { font-size:18px; margin:9px 0; line-height:1.25; }
.al-layout { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:16px; align-items:start; }
.al-layout > * { min-width:0; }
.al-paths { display:grid; grid-template-columns:1fr 38px 1fr; align-items:center; gap:8px; margin-bottom:8px; }
.al-path { display:grid; grid-template-columns:1fr auto; gap:2px 5px; text-align:left; min-height:64px!important; background:#fcf8ec; border:2px solid #d9c58d; color:#575349; padding:6px 12px!important; }
.al-path:last-child { border-color:#c9b4d6; background:#f5eef8; color:#60516c; }
.al-path span { grid-column:1/-1; font-size:12px; font-weight:600; }
.al-path strong { font-size:16px; }
.al-path b { font-size:11px; align-self:center; }
.al-path-active { border-color:#43897b!important; background:#e6f3e9!important; }
.al-path:not(:disabled):hover { border-color:#43897b; }
.al-mirror { width:38px; height:56px; }
.al-group-buttons { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:0 24px; }
.al-group-button { display:grid; grid-template-columns:1fr 40px; grid-template-rows:auto auto; padding:5px 10px!important; text-align:left; background:#fffdf6; border:2px solid #cbb6c8; color:#555569; }
.al-group-button:nth-child(2) { border-color:#a5bacf; }
.al-group-button strong { grid-column:2; grid-row:1/3; align-self:center; text-align:right; font-size:25px; }
.al-group-button span { font-size:13px; }
.al-group-button small { font-size:10px; font-weight:500; }
.al-group-button:not(:disabled) { background:#fff6d6; border-color:#a5853f; box-shadow:0 2px 0 #cdbb8b; }
.al-object-view { position:relative; margin-top:5px; }
.al-objects { display:block; width:100%; height:180px; }
.al-tray-label,.al-transfer-label { position:absolute; pointer-events:none; font-size:10px; font-weight:800; line-height:1.1; }
.al-tray-label { top:76%; left:14px; color:#5b7964; }
.al-transfer-label { top:88%; left:15px; width:29%; color:#7d6654; }
.al-sidebar { display:flex; flex-direction:column; align-items:center; justify-content:space-between; min-height:292px; }
.al-friends { display:flex; align-items:flex-end; width:100%; height:188px; padding-top:12px; }
.al-friends svg { width:50%; max-height:170px; }
.al-cat-slot { width:150px; height:80px; }
.al-sidebar:has(.al-keypad) .al-cat-slot { height:40px; }
.al-cat { width:100%; height:100%; }
.al-progress { display:flex; gap:6px; justify-content:center; padding:6px 0; }
.al-progress span { display:grid; place-items:center; width:32px; height:32px; background:#fffaf1; color:#68756b; border:1px solid #d3dbcb; border-radius:50%; font-weight:800; }
.al-progress .al-story-done { background:#dbeedb; border-color:#72a784; color:#326452; }
.al-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; width:100%; }
.al-key { background:#fffaf0; color:#405e58; border:1px solid #a9c1b3; font-size:22px!important; padding:6px!important; height:48px; }
.al-key:hover { background:#e1eee1; }
.al-feedback { display:flex; flex-direction:column; justify-content:center; gap:4px; min-height:78px; margin:8px 0; padding:9px 14px; background:#e4eee6; border-left:4px solid #87ac99; font-size:16px; line-height:1.35; }
.al-feedback strong { font-size:13px; }
.al-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0 0; border-top:1px solid #d5dfd1; }
.al-main-controls { display:flex; flex:1; flex-wrap:wrap; align-items:center; gap:10px; min-width:0; }
.al-tools { display:flex; flex-wrap:nowrap; gap:6px; flex-shrink:0; }
.al-tools button { width:auto; font-size:12px; min-height:48px; padding:6px 10px; }
.al-wait { font-size:15px; font-weight:700; color:#5c6b63; }
.al-expression { display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:27px; font-weight:800; min-height:54px; }
.al-bracket { color:#985f80; font-size:33px; }
.al-signs { display:flex; gap:6px; }
.al-sign { width:49px; height:49px; border:2px solid #ba8f68; background:#fff3ce; font-size:30px!important; padding:0!important; color:#70594a; }
.al-sign:hover { background:#f8dfa0; }
.al-operator { color:#527c71; }
.al-calculator { display:flex; flex-wrap:wrap; align-items:center; gap:5px 12px; max-width:100%; }
.al-answer-label { display:flex; flex-direction:column; position:relative; }
.al-answer-label > span { position:absolute; top:-14px; font-size:10px; font-weight:600; }
.al-answer-label input { width:68px; height:50px; border:2px solid #6e9b88; background:white; color:#31594d; border-radius:6px; text-align:center; font-size:27px; font-weight:800; padding:4px; }
.al-helper-equation { display:flex; align-items:center; gap:7px; font-size:23px; min-height:55px; }
.al-helper-equation > span { font-size:12px; }
.al-helper-saved { font-size:12px; font-weight:700; }
.al-helper-work { display:flex; flex-direction:column; padding-top:8px; }
.al-comparison { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0; }
.al-comparison > div { background:#fbf6e5; padding:8px 12px; border-left:4px solid #d7b863; }
.al-comparison > div:nth-child(2) { background:#f2ebf6; border-color:#b198c5; }
.al-comparison span { display:block; font-size:12px; margin-bottom:3px; }
.al-comparison strong { font-size:24px; }
.al-preference { display:flex; flex-wrap:wrap; gap:6px 18px; padding:3px 0; margin:0; border:0; font-size:13px; }
.al-preference legend { float:left; margin:0 16px 0 0; font-weight:700; padding:12px 0; }
.al-preference label { display:flex; gap:7px; align-items:center; min-height:44px; }
.al-preference input { width:18px; height:18px; accent-color:#477c70; }
.phase-compare .al-objects { height:135px; }
.phase-compare .al-sidebar { min-height:230px; height:230px; }
.phase-compare .al-friends { height:125px; }
.phase-compare .al-friends svg { max-height:125px; }
.phase-compare .al-cat-slot { height:60px; }
.al-intro { text-align:center; padding:24px 0 10px; }
.al-intro > span { color:#7d668f; font-size:14px; font-weight:800; }
.al-intro h2 { font-size:34px; margin:8px 0 10px; }
.al-intro p { max-width:640px; margin:12px auto; line-height:1.5; }
.al-intro .al-cover-image { display:block; width:min(100%,660px); height:auto; aspect-ratio:3/2; object-fit:contain; margin:20px auto 0; border-radius:8px; }
.al-intro-note { font-size:13px; font-weight:800; }
.al-cover-image { width:100%; height:100%; object-fit:cover; }
.al-help { max-width:620px; width:calc(100% - 30px); border:2px solid #b4c3ad; border-radius:8px; padding:24px; color:#36544b; background:#fffdf3; line-height:1.6; }
.al-help::backdrop { background:#243c355e; }
.al-finish,.al-album { padding:20px 0; }
.al-finish { text-align:center; }
.al-finish h2 { font-size:30px; margin:10px 0; }
.al-celebration { display:flex; align-items:flex-end; justify-content:center; max-width:650px; height:230px; margin:auto; }
.al-celebration > svg { width:120px; height:210px; }
.al-tea-table { width:280px; }
.al-tea-table > div { width:180px; height:100px; margin:0 auto -20px; }
.al-tea-table > svg { width:100%; }
.al-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin:18px 0; }
.al-stats > div { display:flex; align-items:center; text-align:left; gap:12px; border-top:2px solid #d4c7dc; padding:12px; }
.al-stats strong { font-size:38px; color:#557f6b; }
.al-stats span { font-size:14px; }
.al-finish-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.al-finish details { text-align:left; padding:15px 0; border-bottom:1px solid #d1ddcc; }
.al-finish summary { cursor:pointer; font-weight:700; min-height:30px; }
.al-bonus-options { display:flex; gap:8px; }
.al-album-page { margin-top:16px; background:#fffdf5; border-left:6px solid #b79dca; padding:24px; line-height:1.6; }
.al-album-answer { font-size:26px; font-weight:800; color:#397667; }
.al-album-nav { display:flex; gap:12px; align-items:center; justify-content:center; margin-top:15px; }
@keyframes al-plate { from { transform:translateY(var(--plate-rise,-82px)); } to { transform:translateY(0); } }
@keyframes al-transfer { from { transform:translate(var(--move-x),var(--move-y)); } to { transform:translate(0,0); } }
@keyframes al-hop { 50% { transform:translateY(-8px) rotate(3deg); } }
.phase-motion .al-moving-plate { animation:al-plate .45s ease-in-out both; }
.phase-motion .al-transfer-motion { animation:al-transfer .45s ease-in-out both; }
.phase-compare .al-friends svg,.al-celebration > svg { animation:al-hop .7s ease 2; }
.al-paused * { animation:none!important; }
@media (min-width:761px) and (max-height:760px) {
  .al-objects { height:150px; }
  .al-sidebar { min-height:275px; }
  .al-sidebar:has(.al-keypad) .al-cat-slot { height:36px; }
  .al-instruction { margin:7px 0; }
  .al-toolbar { padding:5px 0; }
  .al-heading { margin-top:7px; }
  .al-feedback { min-height:78px; margin:6px 0; }
  .al-condition { padding:7px 12px; }
}
@media (max-width:900px) {
  .al-toolbar { flex-wrap:wrap; }
  .al-toolbar h1 { font-size:16px; }
  .al-motion { font-size:11px; }
  .al-layout { grid-template-columns:minmax(0,1fr) 145px; gap:10px; }
  .al-group-buttons { padding:0 15px; gap:18px; }
  .al-tools { width:135px; flex-wrap:wrap; }
  .al-tools button { min-height:48px; }
}
@media (max-width:760px) {
  body.alice-game { background:#fffdf5; }
  .alice-game #app { padding:0 12px 18px; }
  .al-toolbar { gap:6px; }
  .al-toolbar > div { order:-1; flex-basis:100%; padding:5px 0; }
  .al-toolbar .al-back { flex:1; }
  .al-motion { font-size:12px; }
  .al-heading { display:block; }
  .al-heading h2 { font-size:22px; margin:4px 0 8px; }
  .al-condition { font-size:17px; padding:10px; }
  .al-instruction { font-size:18px; }
  .al-play { display:flex; flex-direction:column; }
  .al-play > .al-heading { order:0; }
  .al-condition { order:1; }
  .al-instruction { order:2; }
  .al-layout { display:contents; }
  .al-layout > div { order:3; }
  .al-play > .al-comparison,.al-play > .al-preference { order:4; }
  .al-feedback { order:5; }
  .al-controls { order:6; }
  .al-sidebar { order:7; margin-top:14px; }
  .al-layout > div { width:100%; }
  .al-sidebar { width:100%; min-height:0; flex-direction:row; gap:14px; justify-content:center; flex-wrap:wrap; }
  .al-friends { width:110px; height:100px; padding:0; }
  .al-friends svg { max-height:100px; }
  .al-cat-slot { width:100px; height:65px; }
  .al-progress { width:auto; }
  .al-keypad { width:200px; }
  .al-paths { gap:5px; grid-template-columns:1fr 30px 1fr; }
  .al-mirror { width:30px; }
  .al-path { padding:7px!important; min-height:82px!important; display:flex; flex-direction:column; }
  .al-path span { font-size:12px; }
  .al-path b { align-self:flex-start; min-height:12px; }
  .al-group-buttons { padding:0 8px; gap:12px; }
  .al-group-button { padding:5px!important; grid-template-columns:1fr 28px; }
  .al-group-button span { font-size:12px; }
  .al-group-button small { font-size:9px; }
  .al-group-button strong { font-size:23px; }
  .al-objects { height:165px; }
  .al-tray-label { font-size:8px; left:7px; }
  .al-transfer-label { font-size:8px; left:8px; }
  .al-controls { flex-direction:column; align-items:stretch; }
  .al-main-controls { justify-content:center; }
  .al-main-controls > .al-primary { width:100%; }
  .al-tools { width:100%; max-width:none; flex-wrap:wrap; }
  .al-tools button { width:auto; flex:1; min-height:48px; }
  .al-expression { font-size:25px; gap:5px; justify-content:center; }
  .al-bracket { font-size:29px; }
  .al-calculator { justify-content:center; gap:12px; padding-top:9px; }
  .al-helper-saved { flex-basis:100%; text-align:center; }
  .al-helper-equation { font-size:23px; }
  .al-feedback { min-height:88px; font-size:16px; }
  .al-comparison { grid-template-columns:1fr; }
  .al-comparison strong { font-size:23px; }
  .phase-compare .al-sidebar { height:auto; min-height:0; }
  .phase-compare .al-friends { height:100px; }
  .al-intro h2 { font-size:28px; }
  .al-intro .al-cover-image { max-height:none; aspect-ratio:3/2; }
  .al-intro p { font-size:16px; }
  .al-finish h2 { font-size:26px; }
  .al-stats { grid-template-columns:1fr; gap:0; }
  .al-stats > div { padding:9px; }
  .al-celebration { height:185px; }
  .al-celebration > svg { width:24%; height:170px; }
  .al-tea-table { width:52%; }
  .al-tea-table > div { width:110px; height:70px; }
  .al-album-page { padding:14px; }
  .al-album-nav { flex-wrap:wrap; }
}
.al-narrow .al-objects { height:auto; aspect-ratio:400/418; }
.al-narrow .al-tray-label { top:80%; font-size:9px; }
.al-narrow .al-transfer-label { top:85%; width:25%; font-size:10px; }
@media (prefers-reduced-motion:reduce) { .al-shell * { animation:none!important; scroll-behavior:auto!important; } }