
:root{color-scheme:light;--ink:#17364d;--gold:#d7ad52;--blue:#1689d7}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#203e5d;font:15px/1.6 "Yu Gothic",Meiryo,sans-serif}button,input{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.55}button:focus-visible,input:focus-visible{outline:3px solid #c56e00;outline-offset:3px}button{border:0}h1,h2,p{margin:0}h1{font-size:22px}h2{font-size:18px}small{font-size:12px}button,input{min-height:44px}[hidden]{display:none!important}.review{max-width:1040px;margin:auto;padding:18px 22px;color:#fff}.review p{font-size:13px;opacity:.8}.review select{margin-top:8px;padding:7px;max-width:100%;font:inherit}.app{max-width:500px;height:calc(100svh - 126px);min-height:430px;margin:auto;display:flex;flex-direction:column;background:#e9f5fc;border:1px solid #87c7e5;box-shadow:0 12px 45px #08213d55}.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;color:#fff;background:linear-gradient(#268fce,#0965a5);border-bottom:3px solid var(--gold);flex-shrink:0}.level{font-size:18px;line-height:1.2}.xp{height:5px;border:1px solid #c7eaff;border-radius:4px;width:102px;margin-top:8px}.xp i{display:block;width:8%;height:100%;background:white}.balance{display:flex;gap:10px;align-items:center;border:1px solid #9cddff;background:#084c7b;border-radius:24px;padding:4px 16px;font-weight:bold;min-width:95px;justify-content:space-between}.gem{color:#78e2ff;font-size:24px;line-height:1}.body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;background:linear-gradient(#edf8fff0,#e4f4f2ed),url('images/landscape.webp') center/cover}.content{padding:15px;display:grid;gap:13px}.bar{display:flex;gap:10px;justify-content:space-between;align-items:center;min-width:0}.bar h1{min-width:0}.button{padding:8px 15px;border-radius:8px;border:1px solid #8fb7cf;background:linear-gradient(#fff,#dfedf7);font-weight:bold;box-shadow:0 2px 0 #35617c22}.button.primary{background:linear-gradient(#ffe2a0,#f4b641);border-color:#cb9b43;color:#563a15}.link{background:transparent;color:#155d91;text-decoration:underline;text-underline-offset:4px;padding:3px;min-height:44px}.panel{padding:17px;border:1px solid #b3cddd;background:#ffffffed;border-radius:10px;box-shadow:0 3px 0 #32718b15}.date{font-size:12px;color:#496779;font-variant-numeric:tabular-nums}.tag{display:inline-block;padding:2px 9px;border-radius:4px;font-size:11px;background:#e7edf0;color:#435c6c;font-weight:bold}.tag.live{background:#d5f0dd;color:#275b3a}.event{display:flex;gap:14px;text-align:left;align-items:center;padding:16px;width:100%;border:1px solid #b0c6d4;background:linear-gradient(110deg,#fff,#eff6fc);border-radius:10px;box-shadow:0 3px 0 #35617c22}.event>span:last-child{margin-left:auto;font-size:23px}.event h2{font-size:17px}.crest{width:50px;height:50px;display:grid;place-items:center;border:2px solid #dcc078;border-radius:12px;color:#39769a;background:#f9f0d3;flex-shrink:0}.crest svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.event hr{border:0}.placeholder{background:repeating-linear-gradient(135deg,#eff3f6,#eff3f6 10px,#e8eef2 10px,#e8eef2 20px);border:1px dashed #829aa9;border-radius:8px;color:#526976;display:grid;place-items:center;text-align:center;min-height:120px;padding:14px}.hero{height:230px;position:relative;background:url('images/landscape.webp') center/cover;border:2px solid var(--gold);border-radius:12px;overflow:hidden}.hero .placeholder{position:absolute;inset:60px 40px 20px;background:#eef5f6df}.hero h2{position:absolute;top:12px;left:14px;color:#123955;text-shadow:0 1px white}.frame{border:3px double #d0a14c;background:#e7f6fe;border-radius:5px;box-shadow:inset 0 0 0 3px #fff;padding:13px}.frame .frame-title{color:#145b91;text-align:center;border-bottom:1px solid #a7c8d8;padding-bottom:9px;margin-bottom:10px;font-weight:bold}.lineup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.monster{position:relative;min-width:0;background:#c8efff;border:1px solid #67badc;border-radius:8px;padding:7px;text-align:center}.monster.sr{background:#e7d4f4;border-color:#a56ec8}.monster.ssr{background:#fff0b5;border-color:#d3a737}.monster img{width:100%;height:96px;object-fit:contain;display:block}.monster p{font-size:12px;font-weight:bold;overflow-wrap:anywhere}.rarity{font-size:11px;font-weight:bold;color:#fff;background:#137cad;border-radius:3px;padding:1px 7px;display:table}.sr .rarity{background:#8848b7}.ssr .rarity{background:#e1af34;color:#49320a}.draw{display:grid;grid-template-columns:1fr 1fr;gap:10px}.draw .button{font-size:18px;min-height:66px}.notice{text-align:center;font-size:13px;color:#496779}.nav{display:flex;flex-shrink:0;background:linear-gradient(#258bc3,#095583);border-top:3px solid var(--gold);padding:5px 5px max(5px,env(safe-area-inset-bottom))}.nav button{flex:1;min-height:58px;position:relative;background:transparent;color:#d8eaf8;font-size:12px;font-weight:bold;border-right:1px solid #ffffff26}.nav button:last-child{border:0}.nav button[aria-current=page]{color:#fff0a5;background:#ffffff12;border-radius:7px}.nav button[aria-current=page]:after{content:'';height:3px;background:#ffe18a;position:absolute;bottom:1px;left:22%;right:22%}.nav svg{display:block;width:25px;height:25px;margin:0 auto 1px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.back{padding:0 8px 0 0;background:transparent;color:#185d8c;white-space:nowrap}.fields{display:grid;gap:9px}.fields input{width:100%;min-width:0;padding:9px 12px;border:1px solid #92b4cb;border-radius:7px;background:#fff}.fields label{font-weight:bold}.rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}.row{display:flex;align-items:center;gap:10px;padding:10px;background:#fffffff0;border:1px solid #b3d1df;border-radius:8px;min-width:0}.rank{font:bold 16px Arial;width:18px;text-align:center;color:#527487}.avatar{height:51px;width:51px;flex-shrink:0;border:1px solid #c5ac69;border-radius:9px;background:#fff0ba;object-fit:contain}.avatar.empty{background:#edf0f2;border:1px dashed #829aa9;color:#526976;display:grid;place-items:center;font-size:10px;line-height:1.3;text-align:center}.person{min-width:0;flex:1;overflow-wrap:anywhere;font-size:13px;font-weight:bold}.stats{text-align:right;white-space:nowrap;font-size:12px;flex-shrink:0}.stats strong{font-size:15px;display:block}.profilehead{display:flex;align-items:center;gap:12px;margin-bottom:17px}.profilehead h2{font-size:16px;overflow-wrap:anywhere}.puzzle{padding:23px 3px;text-align:center;color:#151d24;background:white}.puzzle p{font-size:18px;margin-bottom:20px}.digits{display:flex;justify-content:center;gap:4px}.digit{width:39px;height:39px;display:grid;place-items:center;border:2px solid currentColor;border-radius:50%;font:bold 26px Arial}.purple{color:#8e48bd}.gold{color:#bb8614}.puzzle small{display:block;margin-top:19px}.profiletext{white-space:pre-line}.blank{min-height:200px}.screen-status{font-size:13px;min-height:21px;overflow-wrap:anywhere}.review-only{font-size:12px;color:#526976;text-align:center}.check{display:flex;justify-content:center;gap:9px;align-items:center}.check strong{font-size:22px;color:#17699b}@media(max-width:520px){.review{padding:9px 12px}.review p{font-size:11px}.review strong{font-size:13px}.review select{font-size:12px;margin-top:3px;padding:3px}.app{height:calc(100svh - 104px);min-height:360px}.content{padding:12px;gap:11px}.hero{height:210px}.monster img{height:76px}.digit{width:36px;height:36px;font-size:24px}.nav button{min-height:53px}.top{padding:10px 14px}}@media(max-width:350px){.digit{width:30px;height:30px;font-size:21px}.digits{gap:3px}.person{font-size:12px}.row{gap:6px;padding:8px}.avatar{width:43px;height:43px}.stats strong{font-size:13px}}
body{height:100svh;display:flex;flex-direction:column}.review{width:100%;flex-shrink:0}.app{width:min(100%,500px);height:auto;min-height:0;flex:1}

.hero{height:clamp(190px,33svh,280px);border-radius:12px;isolation:isolate}
.hero.dark,.archive-link.dark{background:radial-gradient(ellipse at 70% 85%,#555387 0%,#282f55 48%,#19233c 100%);border-color:#b2a6cf}
.hero.ocean,.archive-link.ocean{background:linear-gradient(145deg,#0e436b,#1688ad 65%,#76d5db);border-color:#9edee0}
.hero.classic,.archive-link.classic{background:#6fc9df url('images/landscape.webp') center/cover}
.banner-text{position:absolute;inset:12px auto auto 14px;z-index:2;max-width:85%;pointer-events:none}.banner-text h2{position:static;color:white;text-shadow:0 2px 2px #122c4f;font-size:25px;line-height:1.4;margin-top:5px;letter-spacing:.04em}.banner-text p{color:#f9eece;font-size:12px;text-shadow:0 1px 2px #18243a}.banner-art{position:absolute;right:7px;top:62px;width:85%;height:calc(100% - 70px);object-fit:contain;object-position:75% 50%;filter:drop-shadow(0 3px 2px #0002)}.hero.classic .banner-text h2{color:#163a4e;text-shadow:0 1px white}.hero.classic .banner-text p{color:#254455;text-shadow:0 1px #fff}
.archive-link{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;height:145px;border:2px solid var(--gold);border-radius:11px;text-align:left;color:#fff;overflow:hidden;padding:14px 12px}.archive-link>span:first-child{position:relative;z-index:1;width:64%;text-shadow:0 1px 2px #193651}.archive-link strong{display:block;font-size:20px;line-height:1.5;margin:7px 0 3px}.archive-link small{font-size:11px;white-space:nowrap}.archive-link img{position:absolute;right:8px;bottom:4px;width:43%;height:90%;object-fit:contain}.archive-link.classic{color:#17364d}.archive-link.classic>span:first-child{text-shadow:0 1px #fff}.archive-link .chevron{position:absolute;right:9px;top:8px;font-size:20px;color:#fff}
.archive-frame{position:relative;border:5px double #99753b;border-radius:3px;background:#e4f4df;padding:11px;box-shadow:inset 0 0 0 3px #f6e9bb}.archive-frame:before,.archive-frame:after{content:'';position:absolute;width:14px;height:14px;border:2px solid #8b6b34;transform:rotate(45deg);background:#f7dfa0;z-index:3;pointer-events:none}.archive-frame:before{top:0;left:0}.archive-frame:after{bottom:0;right:0}.detail-period{margin:10px 0}.detail-title{font-size:14px;margin:12px 0 9px}.ocean-detail{border:3px double #2b96b0;background:#e2f4fa}.frame .hero,.ocean-detail .hero{height:230px}.digit.r{color:#1689d7}.digit.sr{color:#8e48bd}.digit.ssr{color:#bb8614}.digits{gap:5px}.digit{flex-shrink:0}.puzzle{padding:28px 0}.profilehead .avatar{width:62px;height:62px}.profilehead>div{min-width:0}.avatar{padding:2px}.avatar.r{background:#d1f0fc;border-color:#60acd0}.avatar.sr{background:#eddefa;border-color:#a177c5}.avatar.ssr{background:#fff1bd;border-color:#cfac4f}.result{width:100%;text-align:left;margin-bottom:8px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:520px){.lineup .monster img{height:clamp(64px,11svh,90px)}.monster p{font-size:11px;line-height:1.4;min-height:31px;display:grid;place-items:center}.banner-text h2{font-size:23px}.banner-art{top:67px;height:calc(100% - 74px)}.archive-link{height:138px}.frame .hero,.ocean-detail .hero{height:205px}.archive-frame{padding:9px}.digit{width:34px;height:34px;font-size:23px}.profilehead h2{font-size:14px}}
@media(max-width:350px){.content{padding:10px}.panel{padding:12px}.digits{gap:3px}.digit{width:29px;height:29px;font-size:20px}.archive-frame{padding:7px}.lineup{gap:5px}.monster{padding:5px}.monster p{font-size:10px}.archive-link strong{font-size:18px}.archive-link small{font-size:10px}.bar h1{font-size:19px}.bar>.button{padding:8px 10px;font-size:12px}.banner-text h2{font-size:22px}}


.content[data-scene="gacha"]{gap:9px}.content[data-scene="gacha"] .hero{height:clamp(155px,24svh,240px)}.content[data-scene="gacha"] .monster img{height:clamp(54px,8svh,76px)}.content[data-scene="gacha"] .draw .button{min-height:54px}.content[data-scene="gacha"] .banner-text h2{margin-top:3px}.content[data-scene="gacha"] .banner-art{top:auto;bottom:9px;right:9px;width:65%;height:88%;object-position:right bottom}

/* Three related illustrated scenes and three recognisable frame shapes. */
.hero.classic,.archive-link.classic{background:#b7dba8 url('background-王道.svg') center/cover}
.hero.ocean,.archive-link.ocean{background:#2a7f9d url('background-水.svg') center/cover}
.hero.dark,.archive-link.dark{background:#354060 url('background-闇.svg') center/cover}
.theme-frame.classic{border:6px double #8f6930;border-radius:3px;box-shadow:inset 0 0 0 3px #f5dfa2}
.theme-frame.classic:before,.theme-frame.classic:after{content:'';position:absolute;width:14px;height:14px;background:#f7dfa0;border:2px solid #8f6930;transform:rotate(45deg);z-index:4;pointer-events:none}.theme-frame.classic:before{top:1px;left:1px}.theme-frame.classic:after{bottom:1px;right:1px}
.theme-frame.ocean{border:5px solid #256f8c;border-radius:25px 5px;box-shadow:inset 0 0 0 3px #b6f4ee,0 0 0 1px #d5f7f3}.theme-frame.ocean:before{content:'';position:absolute;inset:7px;border:2px solid #a7e2df;border-radius:17px 2px;z-index:3;pointer-events:none}.theme-frame.ocean:after{content:'';position:absolute;bottom:9px;left:12px;width:50px;height:11px;border-bottom:4px double #bcece5;border-radius:50%;z-index:3;pointer-events:none}
.theme-frame.dark{border:5px double #b1b1c7;border-radius:0;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px)}.theme-frame.dark:before{content:'';position:absolute;inset:5px;border:1px solid #a5a5c4;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);z-index:3;pointer-events:none}
.hero .banner-art,.content[data-scene="gacha"] .banner-art{top:auto;bottom:0;right:-2px;width:88%;height:96%;object-position:right bottom;z-index:0}
.banner-text{top:12px;left:14px;max-width:90%}.banner-text h2,.hero.classic .banner-text h2{font-size:clamp(21px,5.8vw,27px);color:#fff;paint-order:stroke fill;-webkit-text-stroke:3px #233650;text-shadow:0 2px 2px #152640;margin-top:7px}
.spotlight-rarity{position:absolute;z-index:2;left:14px;bottom:49px;font:bold clamp(33px,9vw,46px)/1 Georgia,serif;letter-spacing:.02em;color:#ffeb9f;paint-order:stroke fill;-webkit-text-stroke:3px #473652;text-shadow:1px 3px #162842}
.spotlight-name{position:absolute;z-index:2;left:14px;bottom:13px;color:white;font-size:clamp(20px,5.8vw,28px);line-height:1.15;paint-order:stroke fill;-webkit-text-stroke:4px #26344b;text-shadow:0 2px 3px #152640;white-space:nowrap}
.gacha-detail{padding:11px}.gacha-detail .hero{height:250px}.gacha-detail .detail-title{font-size:14px}.puzzle-frame{background:#e4f4df}.author-puzzle{min-height:180px;display:flex;flex-direction:column;justify-content:center;color:#5c6e79;background:#f8fbfb}.author-puzzle p{font-size:16px;margin-bottom:0}.author-puzzle small{font-size:11px}
.top-tools{display:flex;gap:9px;align-items:center}.menu-toggle{width:39px;height:39px;min-height:39px;border:1px solid #b3def0;border-radius:9px;background:linear-gradient(#fff,#dbeaf6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.menu-toggle span{width:19px;height:2px;background:#236690}.balance{min-width:85px}.rank{width:25px;flex-shrink:0}
#menu{width:min(350px,calc(100% - 30px));border:2px solid #c4a25f;border-radius:12px;padding:16px;color:var(--ink);background:#f2f8fc;box-shadow:0 10px 35px #10264255}#menu::backdrop{background:#11264099}.menu-entry{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px;margin-top:14px;border:1px solid #a2c6d9;border-radius:8px;background:linear-gradient(#fff,#e0edf7);font-weight:bold}#menu .link{text-decoration:none}
@media(max-width:520px){.gacha-detail .hero{height:230px}.gacha-detail{padding:9px}.spotlight-name{font-size:23px}.spotlight-rarity{font-size:39px}.content[data-scene="gacha"] .hero{height:clamp(165px,25svh,250px)}}
@media(max-width:350px){.spotlight-name{font-size:20px;left:10px}.spotlight-rarity{left:10px;font-size:33px;bottom:44px}.banner-text{left:10px}.banner-text h2,.hero.classic .banner-text h2{font-size:20px}.gacha-detail .hero{height:210px}.top-tools{gap:6px}}
.puzzle-art{width:100%;height:auto;display:block}

 .archive-link.theme-frame.ocean:after{bottom:37px}
/* Archive banners share the gacha frame; dates have their own readable strip. */
.archive-link{height:155px;padding:13px 14px 42px;align-items:center}
.archive-link .archive-copy{width:70%;align-self:center}.archive-link .archive-copy strong{font-size:20px;color:#fff;paint-order:stroke fill;-webkit-text-stroke:3px #263b50;text-shadow:0 1px 2px #263b50;margin:7px 0 0}
.archive-link img{bottom:30px;right:7px;height:calc(100% - 32px);width:44%}
.archive-link .archive-period{position:absolute;bottom:0;left:0;right:0;z-index:3;display:block;min-height:30px;padding:5px 15px;background:#f7fbff;color:#24465b;border-top:1px solid #bbd0dc;font-size:13px;line-height:20px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.025em;text-shadow:none;white-space:nowrap}
.date{font-size:13px;color:#36566b;font-weight:600;line-height:1.6}.detail-period{padding:5px 8px;background:#edf4f8;border-radius:4px;color:#29495f}
@media(max-width:520px){.archive-link{height:150px}.archive-link .archive-copy strong{font-size:20px}}
@media(max-width:350px){.archive-link{height:143px;padding-left:12px}.archive-link .archive-copy strong{font-size:18px}.archive-link .archive-period{font-size:12px;padding-left:13px;letter-spacing:0}}

/* Keep banner copy, imagery and dates inside a safe area beyond the frame. */
.archive-link{height:163px;padding:17px 24px 50px}.archive-link .archive-copy{width:67%}.archive-link .archive-copy strong{font-size:19px;line-height:1.35}.archive-link img{bottom:46px;right:20px;height:calc(100% - 62px);width:40%}
.archive-link .archive-period{left:16px;right:16px;bottom:12px;min-height:27px;padding:4px 9px;line-height:19px;font-size:12px;letter-spacing:0;border:1px solid #b3c9d8;border-radius:3px;background:#f7fbff}
.archive-link .chevron{right:18px;top:14px}.archive-link.theme-frame.ocean:after{display:none}
.archive-link.theme-frame:before,.archive-link.theme-frame:after{pointer-events:none}
.hero .banner-text{left:22px;top:18px}.hero .spotlight-rarity{left:22px;bottom:55px}.hero .spotlight-name{left:22px;bottom:22px;font-size:clamp(18px,5.1vw,26px)}
.hero .banner-art,.content[data-scene="gacha"] .banner-art{right:15px;bottom:14px;height:calc(100% - 32px);width:80%}
.rank-controls{display:grid;gap:10px;background:#fffffff0;padding:12px;border:1px solid #b3cedd;border-radius:9px}.sort-tabs{display:flex;border:1px solid #80afcb;border-radius:7px;overflow:hidden}.sort-tabs button{flex:1;background:#e4eff6;padding:7px;min-height:42px;font-size:13px;font-weight:bold}.sort-tabs button[aria-pressed="true"]{background:#197db7;color:#fff}.rank-summary{display:flex;justify-content:space-between}.rank{font-size:14px;width:27px}.sound-panel{margin-top:15px;padding:12px;border:1px solid #b3cedd;border-radius:8px;background:#fff}h3{font-size:14px;margin:0}.volume-row{display:grid;grid-template-columns:44px minmax(0,1fr) 36px;align-items:center;gap:7px;font-size:12px;margin-top:8px}.volume-row input{width:100%;min-width:0;accent-color:#1689d7}.volume-row output{text-align:right;font-variant-numeric:tabular-nums}#audio-toggle{background:#197db7;color:#fff;border-radius:20px;min-height:30px;min-width:53px;font-size:12px;font-weight:bold}#audio-toggle[aria-checked="false"]{background:#7d8993}#reset-confirm{width:min(350px,calc(100% - 30px));border:2px solid #c4a25f;border-radius:12px;padding:20px;color:var(--ink);background:#f2f8fc}#reset-confirm::backdrop{background:#11264099}#reset-confirm p{margin:16px 0;font-size:14px}.dialog-actions{display:flex;gap:10px}.dialog-actions button{flex:1}
@media(max-width:520px){.archive-link{height:160px}.archive-link .archive-copy strong{font-size:19px}}
@media(max-width:350px){.archive-link{padding-left:20px;height:153px}.archive-link .archive-copy strong{font-size:17px}.archive-link .archive-period{left:13px;right:13px;font-size:11px}.hero .banner-text{left:19px}.hero .spotlight-name{left:19px;font-size:18px}.hero .spotlight-rarity{left:19px}.rank-controls{padding:9px}}
.archive-link .archive-period{left:24px;right:24px;bottom:24px}.archive-link img{bottom:62px;height:calc(100% - 77px)}
@media(max-width:350px){.archive-link .archive-period{left:22px;right:22px;bottom:23px}}

.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.menu-grid button{min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;background:linear-gradient(#fff,#dfedf7);border:1px solid #a6c7dc;border-radius:10px;font-size:13px;font-weight:bold}.menu-grid svg,.clue-icon{width:39px;height:39px;fill:none;stroke:#28648c;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.menu-grid span{white-space:nowrap}.balance-gem{width:23px;height:26px;flex-shrink:0}.initial-event h2{font-size:21px;text-align:center;line-height:1.7;margin:21px 0}.initial-puzzle{padding:17px 10px 25px;border-top:1px solid #dce9ef;border-bottom:1px solid #dce9ef;margin-bottom:20px}.clue-row{display:flex;justify-content:center;align-items:center;gap:24px;margin:16px 0;font-size:27px}.clue-row>.clue-icon{width:42px;height:42px}.initial-answer{text-align:center;font-size:31px;font-weight:bold;letter-spacing:.06em;margin-top:26px}.initial-done{text-align:center;margin-bottom:15px}.knowledge h3{margin-top:22px;font-size:15px}.knowledge p{font-size:14px;margin:6px 0 0;line-height:1.9}.knowledge h2{font-size:18px}#sound-dialog{width:min(350px,calc(100% - 30px));border:2px solid #c4a25f;border-radius:12px;padding:16px;background:#f2f8fc;color:var(--ink)}#sound-dialog::backdrop{background:#11264099}
.initial-event h2{margin:14px 0;line-height:1.5}.initial-puzzle{padding:10px 10px 16px;margin-bottom:14px}.clue-row{margin:10px 0}.initial-answer{margin-top:16px}.initial-event .screen-status:empty{display:none}

.clue-row{display:grid;grid-template-columns:44px 30px 112px;column-gap:18px;align-items:center;justify-content:center;text-align:left}.clue-row>*{justify-self:start}.clue-row>span:nth-child(2){justify-self:center}.clue-row>.clue-icon{width:42px;height:42px}.initial-answer{display:flex;justify-content:center;gap:7px;letter-spacing:0}.initial-answer>span{display:inline-block;position:relative;width:37px;line-height:1.3;text-align:center}.voiced-number .dakuten{position:absolute;right:-7px;top:-7px;font-size:24px;line-height:1;pointer-events:none}.reward-gem{display:inline-block;width:23px;height:25px;vertical-align:middle;flex-shrink:0}.notice .reward-gem{margin:0 5px}.initial-event h2{font-size:20px}#insufficient-dialog{width:min(310px,calc(100% - 30px));border:2px solid #c4a25f;border-radius:12px;padding:24px;color:var(--ink);background:#f2f8fc;text-align:center}#insufficient-dialog::backdrop{background:#11264099}#insufficient-dialog p{display:flex;justify-content:center;align-items:center;gap:5px;margin:0 0 22px}#insufficient-dialog .button{min-width:120px}
@media(max-width:350px){.clue-row{column-gap:14px;grid-template-columns:42px 25px 103px}.initial-event h2{font-size:18px}}

.number-sequence{display:inline-flex;gap:2px;align-items:center;letter-spacing:0;white-space:nowrap}.number-sequence>.puzzle-number{position:relative;display:inline-block;flex:0 0 32px;width:32px;line-height:38px;text-align:center;font-size:28px;font-weight:400;letter-spacing:0}.clue-row{grid-template-columns:44px 30px 108px}.initial-answer.number-sequence{display:flex;justify-content:center;gap:2px;margin-top:3px}.initial-answer.number-sequence>.puzzle-number{width:32px;line-height:38px}.voiced-number .dakuten{position:absolute;top:0;right:-5px;width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;pointer-events:none}.answer-lead{text-align:center;margin:18px 0 2px;font-size:15px}.campaign-lead{display:flex;justify-content:center;align-items:center;gap:4px;white-space:nowrap}.campaign-lead .reward-gem{width:29px;height:32px}.initial-puzzle{border-top:0}.bar h1{overflow-wrap:anywhere}@media(max-width:350px){.clue-row{grid-template-columns:42px 25px 108px}.initial-event .campaign-lead{font-size:17px;gap:2px}.campaign-lead .reward-gem{width:25px;height:28px}.content[data-scene="current-event"]>.bar h1{font-size:17px}}
.preregister-copy>p:not(.date){margin-top:20px;line-height:1.9;font-size:14px}.clear-copy{text-align:center}.clear-copy-image{display:block;width:100%;height:220px;object-fit:contain;margin:15px auto}.clear-copy h3{text-align:left;margin:22px 0 8px}.clear-copy h3+p{text-align:left;font-size:13px;line-height:1.9;padding:12px;background:#edf4f8;border-radius:6px}
.dungeon-tabs{display:flex;gap:5px}.dungeon-tabs button{flex:1;min-width:0;min-height:43px;border:1px solid #9ab6ca;border-radius:6px;background:#f5f9fc;font:inherit;font-size:12px;font-weight:bold;color:#304b62;padding:6px 2px}.dungeon-tabs button[aria-pressed="true"]{color:white;box-shadow:inset 0 1px 2px #0002}.dungeon-overall[aria-pressed="true"]{background:#23769b}.dungeon-fire[aria-pressed="true"]{background:#b84c32}.dungeon-water[aria-pressed="true"]{background:#237baf}.dungeon-dark[aria-pressed="true"]{background:#655185}.attribute-label{display:block;font-size:11px;color:#3e536b;margin-top:3px}

.result-card.unrevealed{padding-top:20px}.summon-egg{display:block;width:100%;aspect-ratio:1}.egg-shell{fill:#e6f3fc;stroke:#4e8eb8;stroke-width:3}.summon-egg.sr .egg-shell{fill:#dfc7f1;stroke:#8b50b8}.summon-egg.ssr .egg-shell{fill:#f5c748;stroke:#af7b16}.summon-egg.ssr{filter:drop-shadow(0 0 4px #f9d567);animation:egg-glow .65s ease-in-out infinite alternate}.result-card.hatched .monster{animation:hatch .18s ease-out}@keyframes egg-glow{to{filter:drop-shadow(0 0 8px #ffeb96);opacity:.82}}@keyframes hatch{from{opacity:.2}to{opacity:1}}@media(prefers-reduced-motion:reduce){.summon-egg.ssr,.result-card.hatched .monster{animation:none}}
.gold-egg-button{display:block;width:100%;padding:0;background:transparent;border:0;border-radius:8px}.gold-egg-button:focus-visible{outline-offset:-3px}.gold-egg-button:active:not(:disabled){transform:none}
 .title-screen{display:grid;place-items:center;width:min(100%,var(--app-width));height:100svh;min-height:0;margin:0 auto;padding:24px;border:0;background:linear-gradient(155deg,#294d73,#1d3857);color:white;overflow:hidden}.title-content{display:flex;flex-direction:column;align-items:center;width:100%;gap:clamp(24px,5svh,48px)}.title-logo{width:clamp(150px,45vw,230px);height:auto;fill:currentColor;shape-rendering:crispEdges}.title-egg{width:clamp(70px,22vw,108px);height:clamp(70px,22vw,108px);fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}.title-prompt{font-family:Consolas,"Courier New",monospace;font-size:clamp(13px,3.6vw,17px);font-weight:bold;letter-spacing:.18em;white-space:nowrap;line-height:1.5}.title-screen:active:not(:disabled){transform:none}.title-screen:focus-visible{outline-offset:-4px}@media(min-width:600px){.title-screen{height:min(900px,100svh)}}@media(max-height:400px){.title-content{gap:16px}.title-logo{width:140px}.title-egg{width:62px;height:62px}.title-prompt{font-size:12px}}
.egg-cracking{animation:none!important;overflow:visible}.egg-cracking .egg-top{transform-origin:50px 60px;animation:egg-split-top .45s ease-in forwards}.egg-cracking .egg-bottom{transform-origin:50px 65px;animation:egg-split-bottom .45s ease-in forwards}@keyframes egg-split-top{to{transform:translate(-6px,-22px) rotate(-12deg);opacity:0}}@keyframes egg-split-bottom{to{transform:translate(5px,17px) rotate(9deg);opacity:0}}@media(prefers-reduced-motion:reduce){.egg-cracking .egg-top,.egg-cracking .egg-bottom{animation:none;opacity:.5}}
:root{--app-width:500px}.app{height:100svh;min-height:0}.review{display:none}.title-screen{max-width:500px}body{min-height:100svh}.app[hidden]{display:none}.draw button{display:grid;place-items:center;gap:3px}.draw small{font-size:12px;display:flex;align-items:center;gap:4px}.draw small svg{width:18px;height:20px}.guarantee{text-align:center;background:#fff9ed;border:1px solid #d2b26d;border-radius:8px;padding:8px}.guarantee p{font-size:12px}.count-track{height:5px;background:#e4d8bd;margin-top:6px;border-radius:4px;overflow:hidden}.count-track i{display:block;height:100%;background:#c88d25}.gacha-actions{display:flex;gap:10px;justify-content:center}.summon-dialog{width:min(440px,calc(100% - 24px));max-height:90svh;overflow:auto;border:2px solid #d2b26d;border-radius:14px;background:#fffdf8;color:var(--ink);padding:20px;text-align:center}.summon-dialog::backdrop{background:#071b32b8}.results{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:18px 0}.result-card{border:1px solid #67badc;background:#d5f2ff;border-radius:7px;padding:4px;min-width:0}.result-card.sr{border-color:#a56ec8;background:#e7d4f4}.result-card.ssr{border-color:#d3a737;background:#fff0b5}.result-card img{width:100%;height:auto}.result-rarity{font-size:11px;font-weight:bold;display:block}.clear-monster{width:min(100%,260px);height:260px;object-fit:contain}.clear-egg{max-width:200px;margin:10px auto}.clear-panel p{margin:10px 0}.clear-panel .button{margin:8px}.game-gacha{gap:9px}.game-gacha .hero{height:clamp(170px,32svh,290px)}.game-gacha .monster img{height:clamp(48px,10svh,86px)}.game-gacha .monster p{font-size:11px}.game-gacha .attribute-label{display:none}.game-gacha .draw button{min-height:62px}.result-card .gold-egg-button{min-height:0}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.gacha-actions:empty{display:none}

.gacha-period-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}.gacha-period-row .date{min-width:0;font-size:11px}.rates-link{flex-shrink:0;min-height:36px;padding:4px 8px;border:1px solid #91b8ce;border-radius:6px;background:#ffffffed;color:#155d91;font-size:12px;font-weight:bold}

.archive-link .archive-period{right:auto;width:max-content;max-width:55%;min-height:0;line-height:17px;padding:5px 9px;font-size:12px}.archive-link img{bottom:18px;right:14px;height:calc(100% - 36px);width:48%}.archive-link .archive-copy{align-self:flex-start;width:60%}.archive-link .archive-copy strong{margin-top:5px}@media(max-width:350px){.archive-link .archive-period{font-size:11px;line-height:16px}.archive-link img{right:12px}}

.archive-link .archive-period{left:24px;right:24px;width:auto;max-width:none;min-height:27px;line-height:19px;padding:4px 9px;font-size:12px}.archive-link img{z-index:4;pointer-events:none;right:14px;bottom:24px;height:calc(100% - 42px);width:40%}@media(max-width:350px){.archive-link .archive-period{left:22px;right:22px;font-size:11px}.archive-link img{right:12px}}

.archive-link .archive-period{right:auto;width:max-content;max-width:calc(100% - 44px);white-space:nowrap}

.rank-summary{justify-content:flex-end}

@keyframes answer-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
.fields input.wrong-answer{border-color:#b34b45;animation:answer-shake .3s ease-in-out}
@media(prefers-reduced-motion:reduce){.fields input.wrong-answer{animation:none;border-color:#b34b45}}

.result{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:20px}.result-summary{display:flex;align-items:center;gap:16px}.result-summary>div{min-width:0}.result .avatar{width:72px;height:72px}.result-summary h2{font-size:20px;line-height:1.4;overflow-wrap:anywhere}.result-summary p{font-size:14px;margin-top:5px}.result .profile-open{width:100%;min-height:50px;font-size:15px;text-align:center;background:linear-gradient(#2996cb,#1475aa);border-color:#0d6698;color:#fff}

.menu-grid #open-clear{grid-column:1/-1;min-height:76px;flex-direction:row}
