/* One motion system: short page entrances, spring-like bubbles and glass navigation. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-spring:cubic-bezier(.2,.85,.25,1.12)}
body > nav.glass-dock{
  border-radius:999px!important;
  padding:6px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.19),rgba(235,242,255,.10))!important;
  border-color:rgba(255,255,255,.38)!important;
  backdrop-filter:blur(5px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(5px) saturate(160%)!important;
  box-shadow:0 9px 28px rgba(32,55,91,.13),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(31,48,80,.08)!important;
  isolation:isolate;touch-action:pan-y pinch-zoom;overflow:visible!important;
}
nav.glass-motion-nav{isolation:isolate;position:relative}
.glass-nav-lens{
  position:absolute;left:0;top:0;pointer-events:none;z-index:0;border-radius:999px;box-sizing:border-box;
  background:none;border:0;box-shadow:none;
  opacity:0;
}
.glass-nav-drop{
  position:absolute;inset:0;display:block;pointer-events:none;border-radius:999px;box-sizing:border-box;transform-origin:center;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.13));
  border:1px solid rgba(255,255,255,.42);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.72),inset 0 -1px 1px rgba(57,80,118,.10),0 2px 9px rgba(26,49,83,.08);
  transition:background .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.glass-nav-drop::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(150deg,rgba(255,255,255,.20),transparent 24%,transparent 76%,rgba(255,255,255,.09));pointer-events:none}
.glass-dock.is-holding .glass-nav-drop{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.50);box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 1px 0 1px rgba(128,180,255,.45),inset -1px 0 1px rgba(245,164,202,.28),inset 0 -1px 1px rgba(255,255,255,.5),0 8px 20px rgba(25,45,77,.14)}
.glass-dock.is-holding .dock-btn.active :is(span,small){color:#405575!important}
.glass-dock.is-holding .dock-btn.is-liquid-target :is(span,small){color:#007aff!important}
.glass-dock .dock-icon{transition:transform .28s cubic-bezier(.2,.85,.25,1.08)}
.glass-dock.is-holding .dock-btn.is-liquid-target .dock-icon{transform:translate3d(var(--liquid-icon-x,0px),var(--liquid-icon-y,-1px),0) scale(1.16)}
/* Shared clear material: keep ink opaque while the surface reveals its backdrop. */
body :is(header,#cloudSyncBar,nav:not(.glass-dock),.card,.stat,.folder,.drop-root,.deck-tile,.swipe-card,.study-card,.study-session-zone,.study-session-stage){
  background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(240,247,255,.15))!important;
  backdrop-filter:blur(12px) saturate(155%)!important;-webkit-backdrop-filter:blur(12px) saturate(155%)!important;
  border-color:rgba(255,255,255,.62)!important;
}
body :is(#home>.card,.home-stats .stat){background:linear-gradient(145deg,rgba(255,255,255,.32),rgba(240,247,255,.17))!important}
body #decks :is(.folder,.deck-tile){background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(240,247,255,.15))!important;border-color:rgba(255,255,255,.62)!important;backdrop-filter:blur(12px) saturate(155%)!important;-webkit-backdrop-filter:blur(12px) saturate(155%)!important}
body :is(#profileModal .profile-card,.auth-card,.ai-window,.streak-modal,.explain-box,.edit-card-box,.study-history-card,.study-session-bubble-panel,.more-menu,dialog:not(#streakPage),#streakPage.streak-bubble){
  background:linear-gradient(145deg,rgba(255,255,255,.52),rgba(235,244,255,.32))!important;
  backdrop-filter:blur(22px) saturate(160%)!important;-webkit-backdrop-filter:blur(22px) saturate(160%)!important;
  border-color:rgba(255,255,255,.74)!important;
}
body :is(input,textarea,select,.btn.alt,.icon-btn,.study-session-option,.study-history-btn,.more-menu button){background:rgba(255,255,255,.30)!important}
.glass-motion-nav .dock-btn,.glass-motion-nav .tab{position:relative;z-index:1}
nav.glass-motion-nav .dock-btn.active,nav.glass-motion-nav .tab.active{
  background:transparent!important;border-color:transparent!important;box-shadow:none!important;color:#123c80!important;
}
nav.glass-motion-nav .dock-btn{border:1px solid transparent!important}
.glass-motion-nav .dock-btn.active span,.glass-motion-nav .dock-btn.active small{color:#123c80!important}
nav.glass-motion-nav .tab.active{color:#123c80!important}
.glass-motion-nav .dock-btn,.glass-motion-nav .tab{transition:color .2s ease,background-color .2s ease,scale .24s var(--motion-ease)!important}
.glass-motion-nav .dock-btn:active,.glass-motion-nav .tab:active{scale:.94}
.glass-dock.is-scrubbing{cursor:grabbing;user-select:none;-webkit-user-select:none}
.glass-dock.is-scrubbing .dock-btn{scale:1!important;transform:none!important}
.glass-dock.is-scrubbing .glass-nav-lens{will-change:transform;transition:none!important}
.glass-dock.is-holding .glass-nav-drop{will-change:transform}
.glass-dock.is-holding .dock-btn:active{scale:1!important}
.glass-dock .dock-btn{min-height:52px;padding:6px 4px!important}
.glass-dock .dock-icon{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;line-height:1}
.glass-dock .dock-icon svg{width:27px;height:27px;overflow:visible;transform-origin:center;transform-box:fill-box}
.dock-icon .icon-book,.dock-icon .icon-deck-back,.dock-icon .icon-deck-front,.dock-icon .icon-import-down,.dock-icon .icon-import-up{transform-box:fill-box;transform-origin:center bottom}
.dock-icon .sword-left,.dock-icon .sword-right,.dock-icon .sword-spark{transform-box:view-box;transform-origin:14px 14px}
.dock-icon .sword-spark{opacity:0;stroke:#db9d39;stroke-width:1.6}
.motion-exit-snapshot,.motion-exit-snapshot *{pointer-events:none!important}
html.streak-modal-active{overflow:hidden!important;overscroll-behavior:none}
#streakPage{overscroll-behavior:contain;touch-action:pan-y}
.streak-history-controls{display:flex;gap:4px;padding:4px;border-radius:15px;background:rgba(215,226,243,.55);margin-top:20px}
.streak-history-controls button{flex:1;min-height:40px;border:0;border-radius:12px;background:transparent;color:#536780;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.streak-history-controls button[aria-selected="true"]{background:rgba(255,255,255,.9);color:#183e70;box-shadow:0 2px 8px #294b7014}
.streak-calendar-label{font-size:13px;color:#536780;margin:12px 0 8px}
#streakPage .streak-month{gap:6px}
#streakPage .streak-month .day-dot{padding:8px 2px;font-size:12px;border-radius:12px}
.streak-weekday{text-align:center;font-size:11px;font-weight:800;color:#60718b;padding:4px 0}
#streakPage .day-dot.future{background:rgba(229,235,244,.45);color:#8f9caf}
.streak-history-controls button:focus-visible{outline:2px solid #386dc0;outline-offset:1px}
/* JS holds the real surface open until its exit finishes, including on Safari. */
.js-bubble-motion,.js-bubble-motion>*{transition:none!important}
.js-bubble-motion[data-motion-closing]>*{pointer-events:none!important}
#streakPage.js-bubble-motion[open]{opacity:1;transform:none;animation:none!important}
dialog.js-bubble-motion[open]{opacity:1;transform:none}
#streakPage.js-bubble-motion::backdrop{opacity:1;transition:opacity .28s ease!important}
#streakPage.js-bubble-motion[data-motion-closing]::backdrop{opacity:0!important}

@media(prefers-reduced-motion:no-preference){
  /* Re-rendering data must not replay every card's entrance animation. */
  .card,.stat,.deck-tile,.study-card{animation:none!important}
  :is(#a,#ratings,#deckDetail,#sharedDeckEditor):not(.hidden){animation:siteContentIn .24s var(--motion-ease) both}
  .glass-nav-lens{transition:transform .38s cubic-bezier(.2,.88,.25,1.035),width .32s var(--motion-ease),height .32s var(--motion-ease),opacity .18s ease}
  .glass-nav-lens.lens-initial{transition:none}
  .glass-dock.is-scrubbing .glass-nav-lens{transition:transform .12s ease-out,width .18s ease,height .18s ease}
  :is(#explainOverlay,#editCardOverlay,#studyHistoryOverlay,#cardReviewHistoryOverlay,#studySessionBubble,#battleOverlay,#profileModal,#authGate){
    opacity:1;transition:opacity .24s ease,display .24s allow-discrete;
  }
  :is(#explainOverlay,#editCardOverlay,#studyHistoryOverlay,#cardReviewHistoryOverlay,#studySessionBubble,#battleOverlay,#authGate).hidden,
  #profileModal:not(.open){opacity:0!important;pointer-events:none!important}
  :is(#explainOverlay,#editCardOverlay,#studyHistoryOverlay,#cardReviewHistoryOverlay,#studySessionBubble,#battleOverlay,#profileModal,#authGate)>:is(.explain-box,.edit-card-box,.study-history-card,.study-session-bubble-panel,.battle-fullscreen-shell,.profile-card,.auth-card){
    transform:translateY(0) scale(1);opacity:1;transform-origin:50% 60%;
    transition:transform .32s var(--motion-spring),opacity .22s ease;
  }
  :is(#explainOverlay,#editCardOverlay,#studyHistoryOverlay,#cardReviewHistoryOverlay,#studySessionBubble,#battleOverlay,#authGate).hidden>:is(.explain-box,.edit-card-box,.study-history-card,.study-session-bubble-panel,.battle-fullscreen-shell,.auth-card),
  #profileModal:not(.open)>.profile-card{transform:translateY(14px) scale(.94);opacity:0}
  dialog{
    opacity:0;transform:translateY(14px) scale(.94);
    transition:opacity .22s ease,transform .3s var(--motion-spring),display .3s allow-discrete,overlay .3s allow-discrete;
  }
  dialog[open]{opacity:1;transform:translateY(0) scale(1)}
  #streakPage[open]{animation:none!important}
  dialog::backdrop{opacity:0;transition:opacity .24s ease,display .3s allow-discrete,overlay .3s allow-discrete}
  dialog[open]::backdrop{opacity:1}
  .more-menu{transform-origin:top right;transition:opacity .2s ease,transform .3s var(--motion-spring)!important}
  #medArena{opacity:1;transition:opacity .24s ease,display .24s allow-discrete}
  #medArena[hidden]{opacity:0;pointer-events:none!important}
  #medArena .ma-dialog-wrap:not(.motion-exit-snapshot){animation:siteBackdropIn .22s ease both}
  #medArena .ma-dialog-wrap:not(.motion-exit-snapshot)>.ma-dialog{animation:siteBubbleIn .32s var(--motion-spring) both}
  @keyframes siteBackdropIn{from{opacity:0}to{opacity:1}}
  @keyframes siteBubbleIn{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes siteContentIn{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
  @starting-style{
    :is(#explainOverlay,#editCardOverlay,#studyHistoryOverlay,#cardReviewHistoryOverlay,#studySessionBubble,#battleOverlay,#authGate):not(.hidden),#profileModal.open{opacity:0}
    :is(#explainOverlay,#editCardOverlay,#studyHistoryOverlay,#cardReviewHistoryOverlay,#studySessionBubble,#battleOverlay,#authGate):not(.hidden)>:is(.explain-box,.edit-card-box,.study-history-card,.study-session-bubble-panel,.battle-fullscreen-shell,.auth-card),#profileModal.open>.profile-card{transform:translateY(18px) scale(.92);opacity:0}
    dialog[open]{opacity:0;transform:translateY(18px) scale(.92)}
    dialog[open]::backdrop{opacity:0}
    #medArena:not([hidden]){opacity:0}
  }
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  #streakPage.js-bubble-motion::backdrop{transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important}
}

/* A grounded, illustrated reading room; the session still owns the bear state. */
body .study-session-stage.illustrated-study-room{background:#1e2c40!important;isolation:isolate}
.study-room-art{display:block;width:100%;height:100%;overflow:hidden}
.study-room-art .reader-head{transform-origin:351px 155px}
.study-room-art .reader-eyes{transform-origin:351px 126px}
.study-room-art .reader-breath{transform-origin:351px 265px}
.study-room-art .reader-page{transform-origin:356px 220px}
.study-room-art .reader-paw{transform-origin:306px 216px}
.battle-swords{width:48px;height:48px;overflow:visible}
.battle-swords :is(.sword-left,.sword-right,.sword-spark){transform-box:view-box;transform-origin:14px 14px}
.battle-swords .sword-spark{opacity:0;stroke:#ffe2a0}
@media(prefers-reduced-motion:no-preference){
 body :is(.btn,.folder-action,.deck-action,.study-pause-btn,.battle-primary-btn,.battle-secondary-btn,.ai-head-btn,#themeToggle){transition:background .22s,border-color .22s,box-shadow .22s,scale .24s cubic-bezier(.2,.85,.25,1.25)!important}
 body :is(.btn,.folder-action,.deck-action,.study-pause-btn,.battle-primary-btn,.battle-secondary-btn,.ai-head-btn,#themeToggle):active{scale:.94}
 .card,.deck-tile,.folder,.battle-panel{transition:border-color .25s,box-shadow .25s!important}
 .glass-dock .dock-btn.active .dock-icon svg{animation:dockSelectedFloat 4.5s ease-in-out infinite}
 .battle-swords .sword-left{animation:swordClashLeft 5s ease-in-out infinite}
 .battle-swords .sword-right{animation:swordClashRight 5s ease-in-out infinite}
 .battle-swords .sword-spark{animation:swordClashSpark 5s ease-out infinite}
 .study-room-art .reader-breath{animation:readerBreath 4s ease-in-out infinite}
 .study-room-art .reader-head{animation:readerRead 7s ease-in-out infinite}
 .study-room-art .reader-eyes{animation:readerBlink 5.3s infinite}
 .illustrated-study-room:has(#studyBear.active) .reader-page{animation:readerPageTurn 8s ease-in-out infinite}
 .illustrated-study-room:has(#studyBear.active) .reader-paw{animation:readerPawTurn 8s ease-in-out infinite}
 .reader-steam{animation:readerSteam 3s ease-in-out infinite}
 .reader-lamp-glow{animation:readerLight 6s ease-in-out infinite}
 .illustrated-study-room:has(#studyBear.paused) :is(.reader-head,.reader-page,.reader-paw){animation-play-state:paused}
 @keyframes dockSelectedFloat{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-2px) scale(1.06)}90%{transform:translateY(1px)}}
 @keyframes swordClashLeft{0%,12%,75%,100%{transform:rotate(0)}25%,34%{transform:rotate(-48deg) translateX(-3px)}43%{transform:rotate(12deg)}52%{transform:rotate(-13deg)}62%{transform:rotate(4deg)}}
 @keyframes swordClashRight{0%,12%,75%,100%{transform:rotate(0)}25%,34%{transform:rotate(48deg) translateX(3px)}43%{transform:rotate(-12deg)}52%{transform:rotate(13deg)}62%{transform:rotate(-4deg)}}
 @keyframes swordClashSpark{0%,36%,55%,100%{opacity:0;transform:scale(.3)}43%{opacity:1;transform:scale(1.6)}54%{opacity:0;transform:scale(2)}}
 @keyframes readerBreath{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-1px) scaleY(1.008)}}
 @keyframes readerRead{0%,100%{transform:rotate(-2deg)}35%{transform:rotate(2deg) translateY(2px)}70%{transform:rotate(-1deg) translateY(1px)}}
 @keyframes readerBlink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.08)}}
 @keyframes readerPageTurn{0%,60%,100%{transform:scaleX(1);opacity:0}65%{opacity:1}75%{transform:scaleX(.1);opacity:1}86%{transform:scaleX(-1);opacity:.8}93%{opacity:0}}
 @keyframes readerPawTurn{0%,60%,95%,100%{transform:translate(0,0)}72%{transform:translate(42px,-13px) rotate(-14deg)}85%{transform:translate(18px,-6px)}}
 @keyframes readerSteam{0%{transform:translateY(2px);opacity:0}40%{opacity:.5}100%{transform:translateY(-8px);opacity:0}}
 @keyframes readerLight{0%,100%{opacity:.85}50%{opacity:1}}
}

.study-room-art .reader-page{opacity:0}

/* Chat remains above navigation; only the transcript grows and scrolls. */
html body #aiModal.open .modal-box{height:var(--ai-height,calc(100dvh - 110px))!important;min-height:0!important;max-height:var(--ai-height,calc(100dvh - 110px))!important;display:flex!important;flex-direction:column;overflow:hidden!important}
html body #aiModal.ai-expanded .modal-box{left:8px!important;right:auto!important;top:var(--ai-top,8px)!important;bottom:auto!important;width:calc(100vw - 16px)!important}
html body #aiModal .ai-messages{flex:1 1 0!important;min-height:0!important;max-height:none!important;overflow:auto;overscroll-behavior:contain}
#aiModal :is(.ai-top,.ai-chips,.ai-form,.ai-foot){flex-shrink:0}
html body #aiModal .ai-form textarea{height:68px;min-height:48px!important;max-height:90px!important;margin:0!important}
html body #aiModal .ai-top h2{font-size:20px}
@media(max-height:520px){#aiModal .ai-chips,#aiModal .ai-foot,#aiModal .ai-drag-hint{display:none}#aiModal .ai-top{padding:8px}html body #aiModal .ai-form textarea{height:48px}}
/* The room continues to the bottom edge of its bubble, without a white strip. */
html body #studySessionBubble .study-session-bubble-panel{padding-bottom:0!important;overflow:hidden!important}
html body #studySessionBubble #studySessionBubbleMount .study-session-zone{display:flex!important;flex-direction:column;min-height:0!important;padding-bottom:0!important;overflow:hidden!important}
html body #studySessionBubble #studySessionBubbleMount .study-session-stage.illustrated-study-room{position:relative!important;inset:auto!important;flex:1 0 auto;height:clamp(200px,30dvh,290px)!important;min-height:0!important;width:calc(100% + 36px);margin:16px -18px 0!important;border:0!important;border-radius:0!important;background:#1e2c40!important}
html body #studySessionBubble .study-room-art{width:100%;height:100%}
.study-room-art .reader-standing{display:none;transform:translateX(-110px);transition:transform 1.8s ease-in-out}
.study-room-art #studyBear:not([data-phase="reading"]) .reader-seated{display:none}
.study-room-art #studyBear:not([data-phase="reading"]) .reader-standing{display:inline}
.study-room-art #studyBear:is([data-phase="fetch"],[data-phase="pick"]) .reader-standing{transform:translateX(-170px)}
.study-room-art #studyBear[data-phase="carry"] .reader-standing{transform:translateX(0)}
.study-room-art .reader-carrybook{display:none}
.study-room-art #studyBear:is([data-phase="pick"],[data-phase="carry"]) .reader-carrybook{display:inline}
.study-room-art #studyBear:not([data-phase="idle"]) .reader-phone{display:none}
.illustrated-study-room:not(:has(#studyBear[data-phase="reading"])) :is(.reader-book,.reader-paw,.reader-paw-right,.reader-paw-lines){visibility:hidden}
.illustrated-study-room:not(:has(#studyBear[data-phase="reading"])) .reader-book *{animation:none!important}
@media(prefers-reduced-motion:no-preference){
 #studyBear:is([data-phase="fetch"],[data-phase="carry"]) .reader-standing-bob{animation:readerSteps .36s ease-in-out infinite}
 @keyframes readerSteps{0%,100%{transform:translateY(0) rotate(-1deg);transform-origin:351px 290px}50%{transform:translateY(-3px) rotate(1deg);transform-origin:351px 290px}}
}
@media(max-width:600px){html body #studySessionBubble #studySessionBubbleMount .study-session-stage.illustrated-study-room{width:calc(100% + 20px);margin-left:-10px!important;margin-right:-10px!important}}

.study-room-art:has(#studyBear:is([data-phase="pick"],[data-phase="carry"],[data-phase="reading"])) .shelf-loan-book{opacity:0}