@charset "UTF-8";
:root{
  --bg-base:#211246;
  --nav-bottom:12px;
  --nav-height:91px;
  --shelf-nav-gap:11px;
  --shelf-width:min(calc(90vw + 18px),414px);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg-base);overflow:hidden;overscroll-behavior:none}
body{font-family:"Songti SC","STSong","Noto Serif CJK SC","Noto Serif SC",serif;color:#f5e8cc;-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;touch-action:manipulation}
.magic-app{position:relative;width:100%;height:100dvh;min-height:0;isolation:isolate;overflow:hidden;background:var(--bg-base)}
.background-base,.background-scene,.background-tint{position:absolute;inset:0;pointer-events:none}
.background-base{background:var(--bg-base)}
.background-scene{background:url('assets/bg_scene.webp') center -68px/cover no-repeat;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 46%,transparent 71%);mask-image:linear-gradient(to bottom,#000 0%,#000 46%,transparent 71%);opacity:.96}
.background-tint{background:linear-gradient(180deg,#2210460c 0%,#130d350b 24%,#1c0e4217 40%,#2112462b 55%,#21124600 72%)}
.brand{position:absolute;z-index:5;top:max(49px,env(safe-area-inset-top,0px));left:50%;width:min(100vw,480px);height:104px;transform:translateX(-50%);pointer-events:none;text-align:center}
.brand-art{display:block;width:100%;height:auto;position:absolute;left:0;top:0;object-fit:contain}
.brand-title{position:absolute;top:38%;left:18%;width:64%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-shadow:0 2px 3px #140b2d,0 0 6px #17102c;line-height:1}
.brand-title b{font-size:clamp(21px,5.9vw,28px);font-weight:500;letter-spacing:.14em;white-space:nowrap;color:#f6d9aa}
.brand-title small{margin-top:5px;font-family:Georgia,serif;letter-spacing:.13em;font-size:clamp(7px,1.85vw,9px);white-space:nowrap;color:#f3d6ab}
.shelf{z-index:3;position:absolute;left:50%;bottom:calc(var(--nav-bottom) + var(--nav-height) + var(--shelf-nav-gap));width:var(--shelf-width);aspect-ratio:2 / 3;transform:translateX(-50%);transition:width .22s ease;isolation:isolate}
.shelf-art{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}
.shelf-title{position:absolute;top:7.8%;height:10%;width:72%;left:14%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;pointer-events:none;color:#512d50;text-shadow:0 1px 2px #fff1cc80}
.shelf-title strong{line-height:1.2;font-size:clamp(14px,4.9vw,23px);font-weight:600;letter-spacing:.06em}
.shelf-title em{font-family:Georgia,serif;font-size:clamp(8px,2.4vw,12px);font-weight:400;color:#68516a}
.book-row{position:absolute;left:9%;right:9%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2%;align-items:stretch}
.row-one{top:19.8%;height:24.1%}
.row-two{top:45.2%;height:24.3%}
.book{width:100%;min-width:0;height:100%;position:relative;padding:0;border:0;background:none;display:block;filter:drop-shadow(0 2px 1.5px #15071765)}
.book>img{position:absolute;left:0;top:0;width:100%;height:79%;object-fit:contain;object-position:center bottom;pointer-events:none}
.book-label{position:absolute;left:.5%;bottom:0;display:flex;align-items:center;justify-content:center;width:99%;height:30%;padding:3px 7px 6px;background:url('assets/book_label_gold.png') center/100% 100% no-repeat;white-space:nowrap;color:#453052;font-size:clamp(10px,2.9vw,15px);font-weight:600;text-shadow:0 1px 2px #fff9e3;pointer-events:none}
.book:focus-visible,.tarot:focus-visible,.nav-item:focus-visible{outline:2px solid #f4d78c;outline-offset:2px}
.book:active{transform:translateY(2px)}
.tarot-row{position:absolute;left:8.2%;right:8.2%;top:70.9%;height:18.2%;display:flex;align-items:stretch;gap:1.3%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.tarot-row::-webkit-scrollbar{display:none}
.tarot{position:relative;flex:0 0 19.15%;height:100%;background:transparent;padding:0;border:0;scroll-snap-align:start;filter:drop-shadow(0 2px 2px #110b2966)}
.tarot img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.tarot span{position:absolute;left:4%;right:4%;bottom:12%;font-weight:600;line-height:1;white-space:nowrap;font-size:clamp(9px,2.35vw,12px);color:#45314e;text-align:center;text-shadow:0 1px #fff5d8}
.bottom-nav{z-index:5;position:absolute;bottom:var(--nav-bottom);left:50%;transform:translateX(-50%);width:min(100%,490px);height:var(--nav-height)}
.nav-frame{width:100%;height:100%;position:absolute;inset:0;pointer-events:none}
.nav-items{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;height:100%;width:100%;padding:3px 14px 5px}
.nav-item{border:0;background:none;color:#f1d8a8;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:0;min-height:0;height:100%;font-size:clamp(12px,3.3vw,16px);text-shadow:0 1px 2px #160c31;padding:0;position:relative}
.nav-item img{height:56%;width:74%;object-fit:contain;pointer-events:none}
.nav-item span{line-height:1.1;white-space:nowrap}
.nav-item.selected{color:#fff1c0}
.nav-item.selected::before{content:"";position:absolute;inset:8% 13% 10%;background:radial-gradient(ellipse,#e8b75e38,transparent 72%);z-index:-1;pointer-events:none}
.demo-message{position:absolute;z-index:8;max-width:85%;padding:8px 13px;background:#2b1a4ff0;color:#fff0d6;border:1px solid #b9926a;border-radius:12px;font-size:12px;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-height) + 22px);text-align:center;opacity:0;pointer-events:none;transition:opacity .18s}
.demo-message.show{opacity:1}
:root[data-scale="full"]{--shelf-width:min(calc(100vw + 20px),460px)}
@media(min-width:700px){.magic-app{max-width:440px;margin:auto;box-shadow:0 0 0 1px #957041;}.brand{width:440px}.bottom-nav{max-width:440px}.book-label{font-size:14px}.tarot span{font-size:11px}}
@media(max-height:770px){:root{--nav-height:78px;--nav-bottom:8px;--shelf-nav-gap:9px;--shelf-width:min(calc(90vw + 18px),345px)}.brand{top:max(30px,env(safe-area-inset-top,0px));height:92px}.brand-title{top:36%}.nav-item{font-size:12px}.shelf-title strong{font-size:clamp(13px,4vw,18px)}.book-label{font-size:clamp(9px,2.8vw,13px)}}
@media(prefers-reduced-motion:reduce){.shelf,.demo-message{transition:none}}

@media(max-height:770px){:root[data-scale="full"]{--shelf-width:min(calc(100vw + 20px),383px)}}
@media(max-height:710px){:root{--shelf-width:min(calc(90vw + 18px),270px)}:root[data-scale="full"]{--shelf-width:min(calc(100vw + 20px),300px)}}