/* ORIGINAL FILE: shell.css */
:root{--ink:#3b2846;--ink-soft:#756077;--gold:#d9b477;--goldlight:#f7dba5;--midnight:#19142e;--paper:#fff0ce;--line:#caa373;--nav-h:72px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overscroll-behavior:none}body{background:#100c21;color:#f9e6bf;font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible{outline:2px solid #f3c782;outline-offset:2px}[hidden]{display:none!important}.student-shell{position:relative;isolation:isolate;width:100%;height:100vh;height:100dvh;max-width:680px;margin:0 auto;display:flex;flex-direction:column;padding:calc(var(--safe-top) + 13px) 19px calc(var(--safe-bottom) + 16px);background:#191735 url('assets/ambient.webp') center center/100% 100% no-repeat;overflow:hidden}.shell-border{pointer-events:none;position:absolute;inset:calc(var(--safe-top) + 10px) 12px calc(var(--safe-bottom) + 11px);border:1px solid rgba(230,187,126,.68);border-radius:29px;box-shadow:0 0 0 1px rgba(255,236,198,.08),inset 0 0 0 1px rgba(80,50,95,.4)}.brand-head{height:72px;flex:0 0 72px;display:flex;align-items:center;justify-content:center;position:relative;padding:0 36px}.brand-lockup{text-align:center;line-height:1.1;text-shadow:0 2px 8px rgba(0,0,0,.46)}.brand-lockup strong{display:block;color:#ffdfa2;font-size:24px;font-weight:750;letter-spacing:.18em;padding-left:.18em}.brand-lockup small{display:block;margin-top:7px;font:10px Georgia,serif;letter-spacing:.25em;color:#e7cda2}.brand-ornament{position:absolute;left:9px;top:24px;color:#d6a85d}.brand-access{position:absolute;right:6px;top:7px;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#756398 0,#342352 56%,#18152d 100%);border:2px solid #d9a660;box-shadow:inset 0 0 0 2px #422d5b,0 3px 8px #07030e80;color:#f9dc9f;font-size:25px}.module-head{min-height:49px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 13px 7px 10px;flex:0 0 auto}.module-eyebrow{font:10px Georgia,serif;letter-spacing:.18em;color:#dbc69f}.module-head h1{font-size:19px;letter-spacing:.09em;margin:3px 0 0;color:#fff0cc}.module-actions{display:flex;align-items:center;gap:7px}.small-gold-btn,.dark-chip{border:1px solid #d1ab78;background:linear-gradient(140deg,#36264e,#261a3d);color:#fbe9cd;border-radius:22px;padding:8px 11px;font-size:12px;white-space:nowrap}.module-actions .small-gold-btn{font-size:11px}.main-stage{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#aa8966 #231b3b;padding:0 8px 12px;position:relative}.main-stage::-webkit-scrollbar,.internal-scroll::-webkit-scrollbar{width:4px}.main-stage::-webkit-scrollbar-thumb,.internal-scroll::-webkit-scrollbar-thumb{background:#bd996b;border-radius:8px}.main-nav{display:grid;grid-template-columns:repeat(4,1fr);height:var(--nav-h);flex:0 0 var(--nav-h);border:1px solid #a57c5f;border-radius:19px;background:linear-gradient(180deg,rgba(65,45,89,.97),rgba(24,16,47,.98));box-shadow:inset 0 2px 7px #94729f45,0 -5px 15px #110c2260;position:relative;z-index:2;overflow:hidden}.main-nav button{min-width:0;color:#d0b5cd;background:transparent;border:0;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;font-size:12px;letter-spacing:.05em;position:relative}.main-nav button+button:before{content:"";position:absolute;left:0;top:21%;height:58%;width:1px;background:#947b8250}.main-nav button[aria-current="page"]{color:#f9d89a;background:linear-gradient(180deg,#bb965d18,#e6ba8321)}.main-nav button[aria-current="page"]:after{content:"";height:2px;width:38px;background:#ebc37c;position:absolute;top:0;box-shadow:0 0 8px #e0b777}.nav-icon{height:25px;width:25px;display:block}.nav-icon svg{width:100%;height:100%;display:block}.demo-flag{position:absolute;bottom:calc(var(--safe-bottom) + 1px);left:22px;right:22px;text-align:center;font-size:8px;letter-spacing:.1em;opacity:.5;pointer-events:none;z-index:5}
/* Shared materials */
.paper{position:relative;color:var(--ink);border-radius:18px;border:1px solid #cfa878;background:radial-gradient(ellipse at 28% 12%,rgba(255,255,255,.85),transparent 65%),radial-gradient(ellipse at 70% 87%,#f1d4a7a0,transparent 60%),linear-gradient(130deg,#fff1d6,#f6e4c5);box-shadow:inset 0 0 0 4px #f0dcbd80,inset 0 0 0 5px #cfa67580,0 8px 20px #0d091f55}.paper:before,.paper:after{content:'✦';position:absolute;color:#b58a5d;opacity:.74;font-size:13px;pointer-events:none}.paper:before{top:7px;left:12px}.paper:after{bottom:7px;right:12px}.paper-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px}.paper-head h2{font-size:17px;letter-spacing:.06em;margin:0}.paper-head small{font-size:11px;color:#866b78}.kicker{display:block;font:10px Georgia,serif;letter-spacing:.17em;color:#92715b}.primary-btn,.secondary-btn,.text-action{border-radius:13px;border:1px solid #d4a66d;min-height:43px;padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center}.primary-btn{background:linear-gradient(#68497e,#32204d);color:#ffecbd;box-shadow:inset 0 1px #af95ba,0 3px 9px #1e102455;font-weight:700}.secondary-btn{background:linear-gradient(#fff1d2,#edcf9e);color:#4f3453;font-weight:700}.text-action{border:0;background:transparent;color:#694975;padding:4px 2px;min-height:34px}.action-row{display:flex;gap:8px;align-items:center}.action-row>*{flex:1}.fine-rule{display:flex;align-items:center;gap:12px;text-align:center;color:#d2aa72;font-size:11px;margin:11px 0}.fine-rule:before,.fine-rule:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#e3bc83,transparent)}.muted{color:#8a7286}.light-muted{color:#e2c9d4}.dark-panel{border:1px solid rgba(223,179,112,.5);border-radius:16px;background:linear-gradient(135deg,rgba(82,52,105,.75),rgba(27,20,55,.88));box-shadow:inset 0 1px #ab82aa43,0 6px 18px #0d092050}.small-status{font-size:11px;color:#e5caa9}.badge{padding:4px 8px;border-radius:99px;background:#714f7440;color:#f5d69e;font-size:11px;border:1px solid #bea17687}
/* Today */
.today-main{display:flex;flex-direction:column;gap:13px}.daily-paper{padding:24px 19px 18px;min-height:267px;overflow:hidden}.daily-paper .paper-head{position:relative;z-index:1}.daily-illustration{position:absolute;width:132px;right:-15px;bottom:42px;opacity:.82;transform:rotate(5deg);filter:drop-shadow(0 8px 8px #49305738)}.daily-illustration img{width:100%;height:auto;display:block}.daily-wish{font-size:12px;color:#8f6771;margin:0 0 7px}.daily-heading{font-size:20px;margin:0 0 14px;letter-spacing:.04em;position:relative;z-index:1}.choice-row{display:flex;gap:8px;max-width:230px;position:relative;z-index:1}.choice-row button{flex:1;border:1px solid #c8a071;background:#fff7df9c;padding:6px 2px;border-radius:12px;color:#6a4d59}.choice-row button b{display:block;font:700 21px Georgia,serif}.choice-row button small{display:block;font-size:10px}.choice-row button.sel{background:linear-gradient(#583a71,#392454);color:#ffeac0;border-color:#d4aa77}.daily-counter{display:flex;gap:9px;margin:10px 0 8px;max-width:290px;position:relative;z-index:1}.daily-counter span{flex:1;text-align:center;border-right:1px solid #d5b78e;color:#71556b;font-size:11px}.daily-counter span:last-child{border:0}.daily-counter b{display:block;font-size:21px;color:#493255}.daily-cta{width:100%;margin-top:10px;position:relative;z-index:1}.today-curr{padding:14px 18px}.current-lines{display:grid;gap:7px}.current-lines div{display:flex;justify-content:space-between;align-items:center;gap:9px;font-size:12px}.current-lines b{color:#6a4c63}.current-lines span{color:#826872}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-link{min-height:95px;padding:14px 13px;display:flex;align-items:flex-start;justify-content:space-between;gap:6px;text-align:left;color:#fbe3b9}.quick-link strong{font-size:14px;display:block}.quick-link small{display:block;color:#dfc5d8;font-size:11px;margin-top:9px}.quick-link .star{font-size:25px;color:#edc17e}.quick-link .mini-cover{width:45px;align-self:flex-end;filter:drop-shadow(1px 4px 5px #0005)}.mini-cover img{width:100%}
/* Shelf */
.shelf-intro{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 7px 13px}.shelf-intro span{font-size:11px;color:#e3c2ab}.shelf-intro strong{display:block;font-size:16px;margin-top:4px}.shelf-display{padding:16px 14px 17px;overflow:hidden}.shelf-display .paper-head{margin-bottom:15px}.book-covers{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;padding:0 5px}.course-cover{min-width:0;min-height:181px;position:relative;border-radius:5px 13px 13px 5px;border:2px solid #e2bc7a;box-shadow:-5px 5px 0 #59436a,0 8px 15px #20132a85,inset 0 0 0 3px #f6d69a70;background:radial-gradient(ellipse at 30% 25%,#8073ad80,transparent 68%),linear-gradient(110deg,#433264,#28204e);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;color:#f8dfa6;padding:22px 5px;letter-spacing:.02em}.course-cover.school{background:radial-gradient(ellipse at 40% 35%,#658a9590,transparent 67%),linear-gradient(110deg,#2c5766,#283f5d)}.course-cover:before{content:"";position:absolute;inset:8px;border:1px solid #dfbd80a8;border-radius:4px 9px 9px 4px;pointer-events:none}.course-cover:after{content:"✦    ☾    ✦";position:absolute;bottom:13px;font-size:10px;letter-spacing:.12em}.course-emblem{font-size:33px;line-height:1;color:#efd39d;text-shadow:0 2px 5px #16112f}.course-cover strong{font-size:17px;font-weight:700}.course-cover small{font:11px Georgia,serif;letter-spacing:.08em}.course-cover .spine{position:absolute;left:0;top:0;bottom:0;width:11px;background:linear-gradient(90deg,#1b1430a9,#e6bf8560,#150e275c);border-right:1px solid #e2ba85a6}.shelf-foot{height:10px;border-radius:50%;margin:12px 0 0;background:linear-gradient(#67445c,#382a43);border:1px solid #c9a16b7a;box-shadow:0 3px 9px #1c102f66}.shelf-menus{padding:16px 17px}.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.scope-chip{border:1px solid #bda087;border-radius:10px;background:#fff7e3b8;padding:10px 8px;color:#604a60;min-height:48px;font-size:12px;text-align:left}.scope-chip small{font-size:10px;display:block;color:#997c7e;margin-top:2px}.handbook{display:flex;gap:13px;padding:11px 13px;align-items:center;text-align:left;color:#f6dfbc;width:100%}.handbook img{width:65px;height:88px;object-fit:contain;filter:drop-shadow(0 3px 7px #0005)}.handbook strong{display:block;font-size:14px}.handbook small{display:block;font-size:11px;color:#d4bad4;margin-top:6px}
/* Dictation */
.practice-intro{padding:16px 19px 18px;min-height:188px;overflow:hidden}.practice-intro .practice-img{position:absolute;right:6px;top:10px;width:106px;height:150px;object-fit:contain;filter:drop-shadow(0 5px 5px #47316c66);pointer-events:none}.practice-intro h2{font-size:19px;margin:8px 0 12px;line-height:1.45;position:relative;z-index:1;max-width:75%}.practice-intro p{font-size:12px;color:#786073;margin:0 0 12px;position:relative;z-index:1;max-width:72%}.practice-entry{padding:16px 16px}.practice-status{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:12px 0}.practice-status div{text-align:center;border-right:1px solid #cfb28e}.practice-status div:last-child{border:0}.practice-status b{display:block;color:#583653;font-size:22px}.practice-status span{font-size:11px;color:#7c6574}.practice-actions{display:grid;gap:9px}.practice-action{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 14px;color:#fae5c2;min-height:66px;width:100%}.practice-action .action-sign{flex:0 0 35px;font-size:24px;color:#efd092;text-align:center}.practice-action strong{display:block;font-size:14px}.practice-action small{display:block;margin-top:4px;font-size:11px;color:#d7bfd4}.practice-action.subtle{opacity:.85;min-height:54px}.practice-action.subtle .action-sign{font-size:20px}
/* Growth */
.growth-summary{padding:16px 14px 13px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:8px}.metric{text-align:center;padding:5px 3px;border-right:1px solid #dab793}.metric:last-child{border:0}.metric b{display:block;font:700 23px Georgia,serif;color:#58385d}.metric span{display:block;font-size:10px;color:#886d83;margin-top:4px}.chart-paper{padding:15px 12px}.period-tabs{display:flex;gap:4px}.period-tabs button{font-size:11px;padding:5px 10px;border-radius:16px;border:1px solid #cca875;background:#fffae7;color:#59415d}.period-tabs button.active{background:#61456c;color:#ffe6b8}.chart-legend{font-size:10px;color:#886f77;display:flex;gap:14px;margin:4px 2px 10px}.chart-legend span:before{content:"";display:inline-block;width:9px;height:9px;background:#8a6aa3;border-radius:3px;margin-right:4px}.chart-legend .bad:before{background:#c87d85}.chart{display:flex;align-items:end;justify-content:space-between;gap:3px;height:169px;border-bottom:1px solid #b58b73;padding:0 2px}.chart-col{flex:1;border:0;background:transparent;color:#63516e;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:5px;height:100%;min-width:0;padding:0 0 5px}.chart-number{font:11px Georgia,serif;color:#584360}.bar{display:flex;flex-direction:column;justify-content:flex-end;width:min(22px,85%);min-height:1px;border-radius:5px 5px 0 0;overflow:hidden;box-shadow:inset 0 1px #fff8}.bar .good{background:linear-gradient(#a88ac1,#79619a)}.bar .bad{background:linear-gradient(#e19d94,#bc6e83)}.chart-col small{font:10px Georgia,serif}.chart-col:focus-visible{outline:2px solid #724c95}.course-progress{padding:14px 16px}.course-track{margin:11px 0}.course-track .label{display:flex;justify-content:space-between;color:#795b70;font-size:12px}.course-track .track{height:7px;background:#dac7a7;border-radius:10px;overflow:hidden;margin-top:6px}.course-track .fill{height:100%;background:linear-gradient(90deg,#7e628f,#cba76f);border-radius:10px}
/* Inner list and overlay */
.list-view{padding:14px 15px 17px;min-height:100%}.list-view h2{font-size:17px;margin:5px 0 13px;color:#4b3652}.list-view .search{width:100%;border:1px solid #bea081;border-radius:12px;padding:11px 12px;background:#fff8e9;font-size:16px;color:#482c4d}.word-row{padding:11px 8px;border-bottom:1px solid #d7bfa091;width:100%;text-align:left;background:transparent;color:#493252;border-radius:0;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:0;border-left:0;border-right:0}.word-row strong{display:block;font:700 17px Georgia,serif}.word-row small{display:block;margin-top:4px;color:#806576;font-size:11px}.word-row em{font-size:13px;color:#b18c5d}.subhead-line{display:flex;align-items:center;gap:10px}.back-link{border:1px solid #cdb084;color:#684e67;background:#fff5dd;border-radius:20px;padding:8px 13px;font-size:12px}.inline-form{display:flex;gap:8px;align-items:center;margin:9px 0}.inline-form select{border:1px solid #c5a57f;background:#fff8e9;color:#503953;border-radius:9px;padding:10px 8px;min-width:0;flex:1;font-size:16px}.callout-info{font-size:11px;color:#916e6f;margin:9px 0}.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;padding-bottom:calc(20px + var(--safe-bottom))}.shade{position:absolute;inset:0;background:rgba(12,8,27,.74);backdrop-filter:blur(4px)}.overlay-paper{position:relative;width:min(370px,calc(100vw - 28px));max-height:min(82dvh,680px);overflow:auto;padding:25px 23px 23px;border:2px solid #c5a071;border-radius:17px;background:radial-gradient(ellipse at 20% 10%,#fff9eb,transparent 80%),linear-gradient(#fff0d2,#efd0a8);color:#503752;box-shadow:0 12px 38px #000a,inset 0 0 0 5px #f5dfba}.overlay-paper h2{font-size:19px;margin:0 0 15px}.overlay-paper p{font-size:13px;line-height:1.7}.overlay-paper .close{float:right;border:0;background:#ece0be;border-radius:50%;width:35px;height:35px;font-size:22px;color:#674763}.overlay-paper .opt-row{display:flex;gap:7px;margin:11px 0}.overlay-paper .opt-row button{flex:1;min-height:40px}.demo-tag{font-size:10px;color:#997a7b}.empty-day{font-size:13px;line-height:1.6;color:#7a6379}
@media(max-height:760px){.student-shell{padding-top:calc(var(--safe-top) + 10px)}.brand-head{height:60px;flex-basis:60px}.brand-lockup strong{font-size:21px}.brand-access{top:5px;width:42px;height:42px}.module-head{min-height:43px}.daily-paper{min-height:240px}.main-nav{height:65px;flex-basis:65px}.main-stage{padding-bottom:8px}}@media(max-width:365px){.student-shell{padding-left:16px;padding-right:16px}.brand-lockup strong{font-size:21px}.book-covers{gap:11px}.course-cover{min-height:160px}.daily-illustration{width:112px;opacity:.65}.daily-heading{font-size:18px}.main-nav{height:66px;flex-basis:66px}}
@media(min-width:700px){body{background:#141024}.student-shell{border-left:1px solid #b18c68;border-right:1px solid #b18c68}}
@media print{.brand-head,.main-nav,.module-head,.shell-border,.demo-flag,.brand-access{display:none!important}.student-shell{height:auto;overflow:visible;max-width:none;background:white;color:black;padding:0}.main-stage{overflow:visible}.paper,.dark-panel{box-shadow:none}button{display:none!important}}
/* V1 main-pages visual refinement: do not overlap actual task values. */
.daily-illustration{width:59px;right:12px;top:52px;bottom:auto;opacity:.72;pointer-events:none}
.shelf-intro{padding:2px 7px 8px}
.shelf-display{padding:13px 14px 13px}
.book-covers{gap:13px}
.course-cover{min-height:153px;gap:8px;padding:18px 5px}
.course-cover .course-emblem{font-size:28px}
.course-cover strong{font-size:16px}
.shelf-menus{padding:12px 16px}
.shelf-menus .paper-head{margin-bottom:9px}
.scope-chip{min-height:44px;padding:7px 8px}
.handbook{padding:8px 12px}
.handbook img{width:50px;height:66px}


/* ORIGINAL FILE: frame.css */
/* Magic Wordbook · Student shared frame candidate V2 · 2026-10-30
   Applies the SAME exterior shell to four main pages and immersive book/rules.
   Interior layouts & original artwork remain distinct and unchanged.
*/
:root {
  --mw-frame-x: clamp(13px, 3.5vw, 17px);
  --mw-frame-top: calc(env(safe-area-inset-top, 0px) + 12px);
  --mw-frame-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  --mw-frame-radius: 31px;
  --mw-frame-ink: rgba(224, 180, 114, .67);
  --mw-frame-inner: rgba(255, 232, 191, .10);
  --mw-brand-height: 65px;
  --mw-navbar-height: 74px;
  --mw-shell-content-x: clamp(15px, 4.1vw, 19px);
}
/* Both stylesheets own layout-specific shells; only shared geometry is imposed. */
.student-shell,
body.mobile-direct .phone {
  width: 100%; max-width: 680px; height: 100dvh; min-height: 0;
  margin: 0 auto; border: 0; border-radius: 0;
  box-shadow: none; overflow: hidden;
  background-color: #191735;
}
.student-shell {
  padding: calc(var(--mw-frame-top) + 6px) var(--mw-shell-content-x)
           calc(var(--mw-frame-bottom) + 7px);
  background-image: url('assets/ambient.webp');
  background-position: center; background-size: cover;
}
/* Exactly the same inset, stroke and corner shape, independent of page type. */
.student-shell .shell-border,
body.mobile-direct .phone::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  inset: var(--mw-frame-top) var(--mw-frame-x) var(--mw-frame-bottom) !important;
  border: 1px solid var(--mw-frame-ink);
  border-radius: var(--mw-frame-radius) !important;
  background: transparent;
  box-shadow: 0 0 0 1px var(--mw-frame-inner), inset 0 0 0 1px rgba(64, 39, 82, .37);
  pointer-events: none;
  width: auto; height: auto;
}
.student-shell .shell-border { z-index: 9; }
body.mobile-direct .phone::before { z-index: 30; }
/* Four main pages: slightly larger working area, brand top alignment and fixed nav. */
.student-shell .brand-head {
  height: var(--mw-brand-height); flex: 0 0 var(--mw-brand-height);
  padding: 0 41px;
}
.student-shell .brand-lockup strong { font-size: 23px; }
.student-shell .brand-lockup small { margin-top: 6px; }
.student-shell .brand-access { right: 7px; top: 8px; }
.student-shell .module-head { padding-left: 9px; padding-right: 10px; }
.student-shell .main-stage { padding: 0 4px 10px; }
.student-shell .main-nav {
  height: var(--mw-navbar-height); flex: 0 0 var(--mw-navbar-height);
  margin: 0 1px; border-radius: 18px;
}
.student-shell .demo-flag { display: none; }
/* Immersive book, tarot and rule scroll: no screenshot-like phone bezel.
   Previous 440px/height-dependent phone width was not device-width safe. */
body.mobile-direct .phone { --pw: 100vw !important; --ph: 100dvh !important; }
body.mobile-direct .night-sky {
  background-image: url('assets/ambient.webp');
  background-position: center; background-size: cover;
}
body.mobile-direct .app-head {
  flex: 0 0 calc(var(--mw-brand-height) + 9px);
  height: calc(var(--mw-brand-height) + 9px);
  padding: calc(var(--mw-frame-top) + 4px) 23px 1px;
  align-items: center;
}
body.mobile-direct .app-heading { transform: translateY(4px); }
body.mobile-direct .app-head .mini-round { transform: translateY(4px); }
body.mobile-direct .app-heading strong { font-size: 23px; letter-spacing: .18em; }
body.mobile-direct .app-heading small { font-size: 10px; letter-spacing: .24em; margin-top: 6px; }
body.mobile-direct .progress {
  flex: 0 0 30px; height: 30px; transform: none;
  padding: 2px calc(var(--mw-frame-x) + 15px) 0;
  gap: 7px;
}
body.mobile-direct .page-buttons {
  flex: 0 0 calc(58px + var(--mw-frame-bottom));
  min-height: 0; gap: 8px;
  padding: 3px calc(var(--mw-frame-x) + 5px) calc(var(--mw-frame-bottom) + 6px);
}
body.mobile-direct .page-buttons button { min-width: 0; }
body.mobile-direct .bottom-nav { margin: 0 calc(var(--mw-frame-x) + 4px) calc(var(--mw-frame-bottom) + 2px); }
/* The tarot selection/directory are full-screen immersive scenes; frame is overlaid,
   therefore the same gold ring remains visible above the starfield. */
@media(max-height: 700px) {
  body.mobile-direct .app-head { flex-basis: 58px; height: 58px; }
  body.mobile-direct .page-buttons { flex-basis: calc(52px + var(--mw-frame-bottom)); }
  .student-shell .brand-head { height: 58px; flex-basis: 58px; }
  .student-shell .main-nav { height: 66px; flex-basis: 66px; }
}
/* Rule scenes retain a compact version of the shared brand without duplicating a large header. */
body.mobile-direct .tarot-screen {padding:calc(var(--mw-frame-top) + 2px) calc(var(--mw-frame-x) + 2px) calc(var(--mw-frame-bottom) + 4px)}
body.mobile-direct .tarot-bar {position:relative; flex:0 0 43px}
body.mobile-direct .tarot-brand-lockup {position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(54vw,225px);text-align:center;line-height:1.13;pointer-events:none;white-space:nowrap;text-shadow:0 2px 8px #0006}
body.mobile-direct .tarot-brand-lockup strong {display:block;color:#ffdfa2;font-size:17px;letter-spacing:.13em}
body.mobile-direct .tarot-brand-lockup small {display:block;margin-top:4px;color:#e7cda2;font:8px Georgia,serif;letter-spacing:.18em}


/* ORIGINAL FILE: layout_refinement_v3.css */
/* Magic Wordbook · Student UI material/layout refinement V3 · candidate 2026-10-30
   Outer gold frame from frame.css is authoritative.  Inner containers are
   unframed watercolor paper/leather materials, not extra nested gold frames.
   No changes to illustrated book, tarot face/back or scroll artwork.
*/
:root {
  --mw-paper-light:#fff1d4;
  --mw-paper-middle:#f8e7c9;
  --mw-paper-shadow:rgba(12,8,29,.23);
  --mw-leather-shadow:rgba(8,6,25,.31);
  --mw-main-section-gap:11px;
}
/* One shell stroke. Keep branding in the shell, not around every content block. */
.student-shell .shell-border{border:1px solid var(--mw-frame-ink)!important}
.student-shell .brand-head{flex-basis:var(--mw-brand-height);height:var(--mw-brand-height)}
.student-shell .brand-lockup{transform:translateY(1px)}
.student-shell .module-head{min-height:42px;padding:0 10px 8px;align-items:center}
.student-shell .module-head h1{font-size:18px;margin:1px 0 0;line-height:1.35}
.student-shell .module-eyebrow{font-size:9px;letter-spacing:.16em}
/* The 'Today' eyebrow repeated the word Today immediately below: suppress only there. */
.student-shell[data-tab="today"] .module-eyebrow{display:none}
.student-shell .module-actions{gap:6px}
.student-shell .main-stage{padding:2px 5px 9px}
.student-shell .today-main{gap:var(--mw-main-section-gap)}
/* Watercolor/paper is the separator. No CSS stroke, inset double line or corner border. */
.student-shell .paper{
  border:none!important;
  outline:none;
  border-radius:19px;
  background-color:var(--mw-paper-middle);
  background-image:
    radial-gradient(ellipse 135% 65% at -18% -22%,rgba(255,255,255,.86),transparent 66%),
    radial-gradient(ellipse 85% 68% at 108% 115%,rgba(224,178,123,.30),transparent 77%),
    radial-gradient(ellipse 45% 85% at 89% 21%,rgba(237,201,161,.21),transparent 72%),
    radial-gradient(ellipse 44% 44% at 5% 93%,rgba(243,204,163,.18),transparent 74%),
    linear-gradient(124deg,#ffefd0,#fff3df 49%,#f5dfba);
  box-shadow:0 5px 13px var(--mw-paper-shadow), inset 0 1px 0 rgba(255,255,248,.57);
}
.student-shell .paper::before,.student-shell .paper::after{display:none!important}
.student-shell .paper-head{margin-bottom:9px;align-items:center}
.student-shell .paper-head h2{font-size:17px;line-height:1.38}
.student-shell .paper-head small{white-space:nowrap}
/* Reuse the visual feel of purple leather without an extra decorative outline. */
.student-shell .dark-panel{
  border:none!important;
  background-color:#33264f;
  background-image:
    radial-gradient(ellipse 125% 160% at -15% -50%,rgba(183,145,209,.23),transparent 73%),
    radial-gradient(ellipse 95% 120% at 120% 110%,rgba(26,12,57,.48),transparent 81%),
    linear-gradient(136deg,rgba(72,51,103,.96),rgba(33,25,65,.96));
  box-shadow:0 5px 12px var(--mw-leather-shadow), inset 0 1px 0 rgba(219,188,232,.20);
}
/* Main nav is ONE functional leather platform, not another golden frame. */
.student-shell .main-nav{
  border:none!important;
  border-radius:17px;
  background-image:linear-gradient(180deg,#48305b,#241a40 93%);
  box-shadow:0 5px 13px rgba(5,3,22,.33),inset 0 1px 0 rgba(234,201,230,.15);
  margin:0 1px 1px;
}
.student-shell .main-nav button+button::before{background:rgba(195,167,187,.18)}
/* Today: preserve all useful task information but remove duplicate heading layers. */
.student-shell .daily-paper{padding:18px 19px 16px;min-height:0}
.student-shell .daily-paper .paper-head{margin-bottom:7px}
.student-shell .daily-paper .paper-head h2{font-size:18px;margin:3px 0 0}
.student-shell .daily-paper .kicker{font-size:9px;letter-spacing:.14em}
.student-shell .daily-heading{margin:2px 0 12px;font-size:18px;line-height:1.4}
.student-shell .daily-wish{margin:2px 0 6px;font-size:12px}
.student-shell .daily-counter{margin:11px 0 7px}
.student-shell .daily-cta{margin-top:7px}
.student-shell .daily-illustration{width:58px;right:13px;top:51px;opacity:.69}
.student-shell .today-curr{padding:12px 16px 13px}
.student-shell .today-curr .paper-head{margin-bottom:9px}
.student-shell .quick-grid{gap:10px}
.student-shell .quick-link{min-height:82px;padding:12px 13px;border-radius:16px}
.student-shell .quick-link small{margin-top:7px}
/* Never spend a child's first-screen area on prototype disclaimers. Documentation still carries them. */
.student-shell .today-main>p.small-status{display:none}
/* Shelf: book covers ARE illustrated physical objects, but section backgrounds have no frames. */
.student-shell .shelf-intro{padding:3px 6px 9px}
.student-shell .shelf-intro strong{font-size:15px}
.student-shell .shelf-display{padding:14px 15px 13px}
.student-shell .shelf-menus{padding:13px 16px}
.student-shell .shelf-foot{border:0;height:7px;margin-top:10px;opacity:.75}
.student-shell .scope-grid{gap:9px}
.student-shell .scope-chip{
  border:none!important;
  border-radius:11px;
  background:linear-gradient(145deg,rgba(255,252,233,.88),rgba(242,217,182,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 2px 5px rgba(110,74,58,.13);
  min-height:46px;
}
.student-shell .handbook{min-height:84px;border-radius:16px}
/* Dictation: distinct watercolor practice sheet and borderless leather action strips. */
.student-shell .practice-intro{padding:15px 18px 15px;min-height:177px}
.student-shell .practice-intro h2{margin:8px 0 9px;font-size:18px}
.student-shell .practice-intro p{margin-bottom:8px}
.student-shell .practice-entry{padding:14px 16px 15px}
.student-shell .practice-actions{gap:8px}
.student-shell .practice-action{min-height:62px;border-radius:15px;padding:9px 14px}
.student-shell .practice-action.subtle{min-height:53px}
/* Growth: columns and chart markers keep gentle rules for data comprehension,
   but the panels themselves lose their frame. */
.student-shell .growth-summary{padding:14px 15px 12px}
.student-shell .growth-summary>.callout-info{display:none}
.student-shell .chart-paper{padding:15px 14px 16px}
.student-shell .chart{height:164px}
.student-shell .course-progress{padding:14px 16px 14px}
/* List: same paper material as root pages, no additional nested outline. */
.student-shell .list-view{padding:15px 16px 18px}
/* Tablet/large screen decorative corners remain a single shell boundary. */
@media(max-height:760px){
  .student-shell .module-head{min-height:38px;padding-bottom:5px}
  .student-shell .daily-paper{padding:14px 16px 13px}
  .student-shell .today-main{gap:8px}
  .student-shell .quick-link{min-height:72px}
  .student-shell .main-nav{min-height:60px}
}
/* Immersive card gallery: retain full art, raise the fan and align its center
   with the selected main card without an extra border/title plaque. */
body.mobile-direct .tarot-gallery{padding-bottom:clamp(24px,3.8dvh,42px)}
body.mobile-direct .tarot-grid{transform:translateY(-clamp(10px,1.7dvh,22px));transform-origin:center bottom}
body.mobile-direct .tarot-hero{height:min(66%,560px);max-height:66%}
/* Preserve intrinsic painted scroll. Correct only typographic safe zone and actions. */
body.mobile-direct .modal-panel.rule .modal-content{inset:16.2% 17.5% 14.3%}
body.mobile-direct .modal-panel.rule .modal-title{padding:0 2px;min-height:40px;font-size:14px;line-height:1.35}
body.mobile-direct .modal-panel.rule .modal-scroll{margin-top:7px;padding:8px 2px 5px;font-size:14px;line-height:1.79}
body.mobile-direct .modal-panel.rule .modal-scroll h4{margin:12px 0 7px}
body.mobile-direct .modal-panel.rule .modal-scroll button.word-chip{padding:7px 11px;font-size:13px}
body.mobile-direct .modal-panel.rule .modal-actions{justify-content:center;align-items:center;gap:8px;padding-top:7px;flex-wrap:nowrap}
body.mobile-direct .modal-panel.rule .modal-actions button{font-size:11px;min-height:35px;padding:7px 9px;white-space:nowrap}
@media(max-width:375px){
 body.mobile-direct .modal-panel.rule .modal-content{inset:16.2% 17% 14.3%}
 body.mobile-direct .modal-panel.rule .modal-actions button{font-size:10px;padding:7px}
}
@media(prefers-reduced-motion:reduce){body.mobile-direct .tarot-grid{transition:none}}
/* Second visual pass: avoid extra prologue rows and keep the third action visible
   on short iPhones without scrolling the whole application. */
.student-shell .shelf-intro{padding:2px 5px 9px}
.student-shell .shelf-intro>div>span,.student-shell .shelf-intro>.badge{display:none}
.student-shell .shelf-intro strong{display:block;font-size:13px;font-weight:500;margin:0;color:#dfc6cf}
.student-shell .practice-intro .kicker{display:none}
.student-shell .practice-intro{min-height:0;padding:13px 17px 12px}
.student-shell .practice-intro h2{margin:3px 0 8px}
.student-shell .practice-entry{padding:12px 15px 12px}
.student-shell .practice-entry .paper-head{margin-bottom:5px}
.student-shell .practice-status{margin:6px 0 8px}
.student-shell .practice-action{min-height:57px}
.student-shell .practice-action.subtle{min-height:50px}
@media(max-height:770px){
 .student-shell .practice-intro{padding:10px 15px 10px}
 .student-shell .practice-intro h2{font-size:16px}
 .student-shell .practice-entry{padding:10px 14px}
 .student-shell .practice-action{min-height:52px}
}


/* ORIGINAL FILE: position_calibration_v4.css */
/* Magic Wordbook Student — V4 position calibration / shell-wide shift 2026-10-30
   Approved V2 gold frame, starfield and all original PNG/WebP art are preserved.
   This stylesheet is AFTER frame.css & layout_refinement_v3.css.
   PRIMARY REQUIREMENT: whole gold frame and ALL in-frame content shift +10px;
   do not move full-viewport backdrop, fixed centered Tips/Memo/rule overlays,
   or change the inter-element spacing of the underlying book.
*/
:root { --mw-position-offset-y: 10px; }
/* The same +10px top and bottom offset means the frame retains its height.
   On iPhones with a safe-area inset it also preserves their bottom home-indicator
   clearance; bottom: safe + (12 - 10)px.
*/
:root {
  --mw-frame-top: calc(env(safe-area-inset-top, 0px) + 12px + var(--mw-position-offset-y));
  --mw-frame-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px - var(--mw-position-offset-y));
}
/* The four root pages rely on their shell padding derived from the shared
   variables. The frame and all flex contents move as one, exactly 10px.
   Do not add transforms to individual sections: they would move twice. */
.student-shell {scroll-padding-top:0}
/* Explicit single source of spacing; do not add another decorative border. */
.student-shell .shell-border { inset: var(--mw-frame-top) var(--mw-frame-x) var(--mw-frame-bottom) !important; }
/* The main word-library already has a Chinese module title; English eyebrow
   duplicates the page identity and pushes the course books too low. */
.student-shell[data-tab="words"] .module-eyebrow {display:none}
/* Immersive book is a fixed-height flex screen: visually offset its existing
   regions rather than resize the original illustrated book or its hotspots. */
body.mobile-direct .phone > .app-head,
body.mobile-direct .phone > .progress,
body.mobile-direct .phone > .book-stage,
body.mobile-direct .phone > .page-buttons,
body.mobile-direct .phone > .grading-b,
body.mobile-direct .phone > .bottom-nav {
  position:relative;
  top:var(--mw-position-offset-y);
}
/* frame.css calculates top-based padding with --mw-frame-top, so subtract our
   offset inside this one region to avoid +20px on the header text. */
body.mobile-direct .app-head {
  padding-top:calc(var(--mw-frame-top) - var(--mw-position-offset-y) + 4px);
}
/* Likewise preserve bottom button height and padding while translating them. */
body.mobile-direct .page-buttons {
  flex-basis:calc(58px + var(--mw-frame-bottom) + var(--mw-position-offset-y));
  padding-bottom:calc(var(--mw-frame-bottom) + var(--mw-position-offset-y) + 6px);
}
/* The rules scene overlays the whole book. Its own content and title move down
   10px together, while the underlying night sky continues edge-to-edge. */
body.mobile-direct .tarot-screen {
  inset:var(--mw-position-offset-y) 0 calc(-1 * var(--mw-position-offset-y));
  height:100%;
}
/* Correct the real-device review's oversized blank gap between the hero card
   and the fanned chooser. V3 was only moving the fan about 14px. This one moves
   it a visible, bounded amount. Does not change card art, rotation or gestures. */
body.mobile-direct .tarot-grid {
  transform:translateY(calc(-1 * clamp(45px, 5.4dvh, 60px)));
  transform-origin:center bottom;
}
/* The compact tarot brand needs the same top breathing space as the main header;
   keep the hero/directory readable by reusing existing bar height. */
body.mobile-direct .tarot-brand-lockup {top:7px}
/* On small screens keep the fan inside the content area, not under the bottom
   gold stroke; keep all scrollable content internal. */
@media(max-height:730px){
  body.mobile-direct .tarot-grid {transform:translateY(-36px)}
  body.mobile-direct .tarot-brand-lockup {top:4px}
}
/* No visual motion for users requesting reduced animation, but position is kept. */
@media(prefers-reduced-motion:reduce){
  body.mobile-direct .tarot-grid {transition:none!important}
}


/* ORIGINAL FILE: frame_bottom_v41.css */
/* Magic Wordbook · frame-only bottom extension V4.1
   Keep V4 top, all inner positions and all four corners' radius unchanged.
   Extend ONLY the bottom golden frame stroke down by six CSS pixels.
   Works for all four main pages and immersive word/tarot/rule views.
*/
:root { --mw-frame-bottom-extension: 6px; }
.student-shell .shell-border,
body.mobile-direct .phone::before {
  bottom: calc(var(--mw-frame-bottom) - var(--mw-frame-bottom-extension)) !important;
}