/* The phone owns scrolling; the page surrounding it never scrolls. */
:root{--phone-gap:8px;--phone-bezel:5px}.app{width:calc(100% - var(--phone-gap)*2);max-width:430px;height:calc(var(--app-height,100dvh) - var(--phone-gap)*2);max-height:calc(var(--app-height,100dvh) - var(--phone-gap)*2);margin:var(--phone-gap) auto!important;border:var(--phone-bezel) solid #17263e!important;border-radius:34px!important;padding-top:22px;padding-bottom:7px;position:relative;isolation:isolate;box-shadow:0 9px 26px #10233b1c,0 0 0 1px #6e7c8c,inset 0 0 0 1px #ffffff90;overflow:hidden;background:#fffdf6}.app:before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);height:5px;width:44px;background:#17263e;border-radius:6px;z-index:8;pointer-events:none}.app:after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);height:3px;width:90px;background:#17263e;border-radius:4px;z-index:8;pointer-events:none}main{padding:14px 17px 22px;scrollbar-width:none}main::-webkit-scrollbar{display:none}nav{border-top:1px solid #d4dedb;padding-top:8px;padding-bottom:calc(11px + env(safe-area-inset-bottom,0px));background:#fffdf6}nav button{font-size:10px}.nav-icon{height:28px;width:41px}.nav-icon .pixel-icon{width:17px;height:17px}.app.login-mode main{padding:12px 23px calc(18px + env(safe-area-inset-bottom,0px))}.app.login-mode .login-kicker{font-size:9px;letter-spacing:.3px}.brand-kicker{display:none}header{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid #d7ded4;gap:8px}header:after{width:36px;height:2px;bottom:-1px}h1{font-size:24px;line-height:1.5;letter-spacing:-.8px;gap:7px}header p{font-size:11px;line-height:1.6}header .mascot{width:37px;height:37px;box-shadow:2px 2px 0 #d0dcce}.home-progress{display:flex;align-items:center;gap:10px;width:100%;border:1px solid #d7dfd4;background:#f4f6ed;padding:10px 11px;text-align:left;box-shadow:none}.home-level{display:inline-flex;align-items:center;gap:5px;font:11px/1.5 var(--pixel);color:#786023;white-space:nowrap}.home-level .pixel-icon{width:14px;height:14px;color:#c89b34}.home-progress-body{display:grid;gap:5px;flex:1;font-size:11px;color:#63725f}.home-track{display:block;width:100%;height:4px;background:#dce4d8}.home-track i{display:block;height:100%;background:#c6a347}.home-progress-arrow{font:19px var(--pixel);color:#869083}.sim-heading{font-size:16px;margin:22px 0 10px}.sim-card{border:1px solid #9aaeaa;padding:10px;box-shadow:3px 3px 0 #dce7d8}.tabs{border:0;background:#edf0e6;padding:3px;gap:2px}.tabs button{font-size:10px;line-height:1.6;padding:10px 0;min-height:35px}.tabs .active{box-shadow:none;background:#263c4d;color:#fff6d6}.scenario-select{display:flex;align-items:center;gap:10px;margin:10px 0 8px;font-size:11px;color:#738074}.scenario-select>span{white-space:nowrap}.scenario-select select{width:100%;min-width:0;border:1px solid #c3cec3;background:#fffef9;color:var(--navy);padding:8px 26px 8px 9px;font:11px/1.5 var(--pixel);border-radius:0;min-height:35px}.scenario-select select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.sim-status{display:block;min-height:30px;padding:6px 9px;margin:7px 0;color:#fff8df;background:#344b51}.sim-status strong{display:block;width:100%;max-width:none;text-align:center;font-size:11px;line-height:1.55;color:#fff6ce}canvas{border:1px solid #a8b8a2;max-width:100%}.controls{align-items:center;gap:6px;margin:8px 0}.controls>button{border:0;box-shadow:none;background:#f0f3e9;padding:8px 9px;min-height:35px;font-size:10px}.controls>button:first-child{font-weight:700;background:#eaf0e0}.sim-extra{position:relative;margin-left:auto;flex-shrink:0;color:#7b887c}.sim-extra summary{cursor:pointer;font:10px/1.5 var(--pixel);padding:9px 5px;min-height:35px;list-style:none}.sim-extra summary::-webkit-details-marker{display:none}.sim-extra summary:after{content:' ▾'}.sim-extra[open] summary:after{content:' ▴'}.sim-extra button{position:absolute;right:0;bottom:calc(100% + 3px);z-index:4;min-width:95px;padding:11px;border:1px solid #bacabd;background:#fffef5;box-shadow:2px 2px 0 #d2dfcb;white-space:nowrap;font-size:10px}.rule-strip{font-weight:400;font-size:12px;padding:9px 10px;line-height:1.7;border-left:2px solid #8aa380;background:#f0f5e8}.underlink{margin-top:6px;text-align:right}.underlink button{font-size:11px;padding:8px 0;text-decoration:none;font-weight:600;min-height:32px}.home-find{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:14px 12px;border:1px solid #dfddc0;background:#fff9e7;margin-top:19px;font-size:12px;text-align:left}.home-find>span:first-child{display:flex;align-items:center;gap:8px;font-weight:650}.home-find .pixel-icon{width:16px;height:16px;color:#ac8438}.home-find>span:last-child{font-size:10px;color:#8c805e;white-space:nowrap}.snack-entry{border:1px solid #d7dccc;background:#f3f5e7;color:#6b774d;white-space:nowrap;padding:8px;font:10px/1.6 var(--pixel);box-shadow:none}.chips{padding-top:10px;padding-bottom:8px}.chip{min-height:35px;font-size:10px}.app.login-mode .login-view h1{font-size:28px}.app.login-mode .login-benefits{margin:21px 0}dialog{border-radius:12px;border-width:2px;max-width:min(370px,calc(100vw - 36px));max-height:calc(var(--app-height,100dvh) - 52px)}#toast{bottom:calc(93px + env(safe-area-inset-bottom,0px));max-width:min(350px,calc(100vw - 40px))}@media(min-width:600px){:root{--phone-gap:16px}.app{border-radius:38px!important;box-shadow:0 14px 40px #17263e20,0 0 0 1px #708191,inset 0 0 0 1px #ffffffb0}}@media(max-width:370px){:root{--phone-gap:4px;--phone-bezel:4px}.app{border-radius:28px!important}main{padding-left:13px;padding-right:13px}h1{font-size:22px}.tabs button{font-size:10px}.app.login-mode main{padding-left:18px;padding-right:18px}.snack-entry{padding:7px;font-size:9px}}@media(max-height:590px){.app{padding-top:16px;padding-bottom:5px}.app:before{top:5px;height:4px}.app:after{height:2px;bottom:1px}main{padding-top:10px}.sim-heading{margin-top:16px}.app.login-mode .login-benefits{margin:14px 0}.app.login-mode .login-footer{margin-top:16px}}

/* Desktop preview uses one fixed phone size, never the browser's aspect ratio. */
@media(min-width:600px){
 body{display:block;height:var(--app-height,100dvh)}
 .app{width:390px;max-width:none;height:844px;max-height:none;margin:0!important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(var(--phone-scale,1));transform-origin:center center;border-radius:38px!important}
}

/* Reserve the navigation height independently from scrollable content. */
.app{display:flex;flex-direction:column}
.app>main{flex:1 1 0;min-height:0!important;max-height:none;overflow-y:auto}
.app>nav{flex:0 0 auto;min-height:70px;position:relative!important}
@media(min-width:600px){.app>nav{padding-bottom:11px}}

.home-lesson{margin-top:20px;padding:20px 16px 16px;background:#f0f5e8;border:1px solid #adbea6;box-shadow:3px 3px 0 #d7e3d0}
.home-eyebrow{display:flex;align-items:center;gap:7px;font:11px var(--pixel);color:#6c7d56}.home-eyebrow .pixel-icon{width:15px;height:15px}
.home-lesson h2{font-size:23px;margin:17px 0 10px;line-height:1.5}.home-lesson p{font-size:14px;line-height:1.8}.home-lesson .primary{margin-top:18px;font-size:12px;padding:13px}
.home-counts{margin-top:23px}.home-counts h2{font-size:14px;margin:0 0 12px}.count-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.count-grid>div{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 3px;background:#fff9e7;border:1px solid #dfddc0}.count-grid b{font:26px var(--pixel);color:#9c7728}.count-grid span{font-size:10px;white-space:nowrap;letter-spacing:-.4px}.home-snack{margin-top:10px;background:#f3f5ed;border-color:#d5dfce}
.visual-entry{margin:10px 0 15px;padding:12px;background:#f0f4ea;border:1px solid #d3deca}.visual-entry h2{font-size:12px;margin:0 0 10px}.visual-links{display:grid;grid-template-columns:1fr 1fr;gap:6px}.visual-links button{display:flex;justify-content:space-between;align-items:center;padding:11px 9px;border:1px solid #b6c6ad;background:#fffdf6;font:10px/1.6 var(--pixel);text-align:left;min-height:42px}.visual-links button span{font-size:8px;color:#73866a}
/* Home: a compact rookie scorecard and a collectible rule ticket. */
.home-dashboard{padding-bottom:2px}.home-dashboard header{margin-bottom:17px;border-bottom:0;padding-bottom:0}.home-dashboard header:after{display:none}.home-dashboard header h1{font-size:23px}.home-dashboard header p{font-size:11px;margin-top:2px}.home-dashboard header .mascot{width:40px;height:40px;border:1px solid #a1b29e;background:#edf2df}
.rookie-score{display:block;padding:14px 15px;background:#253d50;border:1px solid #132b3b;box-shadow:3px 3px 0 #cad5cd;color:#fffae6;position:relative;overflow:hidden}.rookie-score:after{content:'';position:absolute;right:4px;top:4px;width:3px;height:3px;background:#69828d;box-shadow:-3px 0 #69828d,0 3px #69828d}.score-top{display:flex;justify-content:space-between;align-items:center;font:8px/1.5 var(--pixel);letter-spacing:.6px;color:#9fbbc3}.score-top>span:last-child{display:flex;align-items:center;gap:5px;letter-spacing:0;color:#eed28c;font-size:9px}.score-top .pixel-icon{width:11px;height:11px}.score-middle{display:flex;align-items:center;justify-content:space-between;margin:12px 0 11px}.score-middle>span:first-child{display:flex;align-items:center;gap:9px}.score-level{color:#f5cd6b;background:#3f5260;border:1px solid #71818a;padding:4px 5px;font:10px/1.5 var(--pixel)}.score-middle strong{font:13px/1.5 var(--pixel)}.score-total{display:flex;align-items:baseline;gap:6px}.score-total b{font:27px/1 var(--pixel);letter-spacing:1px;color:#ffe3a1}.score-total>span{font:10px var(--pixel);color:#adc0c4}.score-bottom{display:flex;gap:8px;align-items:center;font:9px var(--pixel);color:#d4e0df}.score-bottom .home-track{height:5px;flex:1;background:#4b6371}.score-bottom .home-track i{background:#efc967}.score-bottom>span:last-child{font-size:15px;line-height:1}
.home-section-head{display:flex;align-items:center;justify-content:space-between;margin:23px 0 11px;gap:10px}.home-section-head h2{font:14px/1.5 var(--pixel);margin:0}.home-section-head>span{font-size:10px;color:#8b9686}.rookie-ticket{border:1px solid #dac797;background:#fff4d6;box-shadow:3px 3px 0 #ece0be;position:relative}.ticket-meta{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-bottom:1px solid #e9dcb8;font:9px/1.5 var(--pixel);letter-spacing:.7px;color:#997647}.ticket-meta>span:last-child{letter-spacing:0;color:#947e52}.ticket-content{display:grid;grid-template-columns:minmax(0,1fr) 83px;gap:9px;align-items:center;padding:19px 14px 18px;min-height:127px}.ticket-content h2{font:22px/1.5 var(--pixel);margin:0 0 9px;letter-spacing:-.5px}.ticket-content p{font-size:12px;line-height:1.75;color:#706b53;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rookie-field{width:83px;height:83px;image-rendering:pixelated}.ticket-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-top:1px dashed #d5bf86;position:relative}.ticket-bottom:before,.ticket-bottom:after{content:'';position:absolute;width:10px;height:10px;border-radius:50%;background:#fffdf6;border:1px solid #dac797;top:-6px}.ticket-bottom:before{left:-6px;border-left-color:#fffdf6}.ticket-bottom:after{right:-6px;border-right-color:#fffdf6}.ticket-bottom>span{display:flex;align-items:center;gap:5px;font-size:10px;color:#94815d}.ticket-bottom .pixel-icon{width:12px;height:12px}.ticket-bottom button{display:flex;gap:12px;align-items:center;padding:9px 11px;background:#294557;color:#fff9df;border:1px solid #1b3646;box-shadow:2px 2px 0 #d3c195;font:11px/1.5 var(--pixel);min-height:36px}.ticket-bottom button>span{font-size:14px}
.rookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:11px}.rookie-action{display:flex;flex-direction:column;align-items:flex-start;text-align:left;position:relative;padding:14px 12px 15px;min-width:0;border:1px solid #becfce;box-shadow:2px 2px 0 #d3dfd8;background:#e6f0ee}.snack-action{border-color:#d5c9a7;box-shadow:2px 2px 0 #e6dfc7;background:#f6edd8}.action-icon{width:27px;height:27px;display:grid;place-items:center;background:#d2e4df;border:1px solid #b6cdc4;margin-bottom:13px;color:#436d62}.snack-action .action-icon{background:#eee0b8;border-color:#d5c392;color:#9b7c30}.action-icon .pixel-icon{width:15px;height:15px}.rookie-action strong{font:12px/1.6 var(--pixel);letter-spacing:-.2px}.action-caption{font-size:10px;line-height:1.5;color:#70837a;margin-top:5px}.snack-action .action-caption{color:#938264}.action-arrow{position:absolute;top:14px;right:12px;font:16px var(--pixel);color:#7a9789}.snack-action .action-arrow{color:#b09a66}.rookie-quiz{display:flex;width:100%;align-items:center;gap:11px;margin-top:18px;padding:13px 10px;border-top:1px solid #dce3d3;border-bottom:1px solid #dce3d3;text-align:left;box-shadow:none;background:transparent}.quiz-emblem{width:32px;height:32px;background:#f1e6e1;display:grid;place-items:center;color:#a46855;flex-shrink:0}.quiz-emblem .pixel-icon{width:18px;height:18px}.rookie-quiz>span:nth-child(2){display:grid;gap:5px;flex:1}.rookie-quiz strong{font:11px/1.5 var(--pixel)}.rookie-quiz small{font-size:10px;color:#8b9587}.rookie-quiz>span:last-child{font:19px var(--pixel);color:#879785}.home-signoff{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:17px;font:8px/1.6 var(--pixel);letter-spacing:.5px;color:#a5ae9e}.home-signoff .pixel-icon{height:11px;width:11px;color:#9aab92}
@media(max-width:370px){.score-middle strong{font-size:12px}.ticket-content{grid-template-columns:minmax(0,1fr) 67px;padding:16px 12px}.rookie-field{height:67px;width:67px}.ticket-content h2{font-size:20px}.rookie-action{padding-left:10px;padding-right:10px}.rookie-action strong{font-size:11px}.ticket-bottom{padding-left:12px;padding-right:12px}}
/* Home wordmark and the rookie bear. */
.home-dashboard header{align-items:center;gap:9px;margin-bottom:20px;min-height:66px}
.home-dashboard header h1{display:block;font:700 28px/1.45 var(--pixel);letter-spacing:-1.5px;margin-bottom:6px}
.brand-logo{display:inline-block;position:relative;white-space:nowrap;color:#284454;text-shadow:2px 2px 0 #d9e3d0;padding-bottom:3px}
.brand-wow{color:#456d61}.brand-question{color:#cd6650;display:inline-block;transform:rotate(7deg);margin-left:2px;text-shadow:2px 2px 0 #f0d4b6}
.brand-logo:after{content:'';position:absolute;height:3px;width:24px;bottom:0;left:1px;background:#c76c54;box-shadow:28px 0 #c76c54,56px 0 #c76c54}
.home-dashboard header p{font-size:10px;color:#7b8776;letter-spacing:-.2px}
.home-dashboard header .mascot{width:64px;height:70px;flex-shrink:0;border:0;background:transparent;box-shadow:none;margin:0;overflow:visible}
.home-dashboard header .mascot svg{width:100%;height:100%;filter:drop-shadow(2px 2px 0 #cbd7bf)}
@media(max-width:370px){.home-dashboard header h1{font-size:25px}.home-dashboard header .mascot{width:56px;height:63px}.home-dashboard header p{font-size:9px}}
.home-dashboard header .mascot{width:60px;height:60px}
@media(max-width:370px){.home-dashboard header .mascot{width:53px;height:53px}}
/* A small bitten baseball balances the new wordmark. */
.home-dashboard header .mascot{width:42px;height:42px}
.home-dashboard header{min-height:59px}
@media(max-width:370px){.home-dashboard header .mascot{width:38px;height:38px}}
.home-dashboard header{min-height:0;gap:0}
/* Unified rule lookup. */
.lookup-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#eaf0e3;padding:4px;margin:12px 0 3px}.lookup-modes button{padding:10px 3px;font:11px/1.5 var(--pixel);color:#75836d;min-height:38px}.lookup-modes .active{background:#2f4b53;color:#fff9df}.rule-category{font-size:9px;color:#81916d;display:block;margin-bottom:6px}.scene-hint{display:block;font-size:11px;line-height:1.6;color:#7d896f;margin-top:8px;padding-top:7px;border-top:1px dashed #d7dfcf}.result-label{font-size:10px;color:#8c9784;margin:13px 0 8px}.visual-entry summary{display:flex;align-items:center;justify-content:space-between;gap:8px;font:11px/1.5 var(--pixel);cursor:pointer;list-style:none;min-height:24px}.visual-entry summary::-webkit-details-marker{display:none}.visual-entry summary>span{font-size:9px;color:#7f8b71}.visual-entry[open] .visual-links{margin-top:12px}
/* KBO archive uses the same small pixel cards as the learning screens. */
.kbo-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:4px;gap:2px;background:#e9eee2;position:sticky;top:-14px;z-index:3;margin-bottom:17px}.kbo-tabs button{padding:10px 1px;font:10px/1.5 var(--pixel);min-height:38px;white-space:nowrap;color:#78836e}.kbo-tabs .active{background:#2c4656;color:#fff7dc}.kbo-kicker{font:8px/1.6 var(--pixel);letter-spacing:.7px;color:#8c9f9e;display:block}.kbo-welcome{background:#2c4656;color:#fffae7;padding:19px 16px;border:1px solid #1e3544;box-shadow:3px 3px 0 #d1ddd0}.kbo-welcome h2{font:18px/1.7 var(--pixel);margin:10px 0 20px}.kbo-facts{display:grid;grid-template-columns:1.2fr 1fr 1.1fr;border-top:1px dashed #5c7377;padding-top:13px;gap:8px}.kbo-facts>span{display:flex;flex-direction:column;align-items:flex-start;gap:7px}.kbo-facts b{font:22px/1.2 var(--pixel);color:#f3cf7e}.kbo-facts small{font-size:9px;color:#b1c4c0;white-space:nowrap}.kbo-facts .pixel-icon{width:26px;height:26px;color:#d5dcc6}.kbo-source{display:block;width:fit-content;font-size:11px;line-height:1.7;color:#55746f;text-decoration:underline;text-underline-offset:3px;padding:9px 0;overflow-wrap:anywhere}.kbo-season{border:1px solid #d2dccb;padding:4px 13px;background:#f3f6ec}.kbo-season>div{display:flex;gap:13px;align-items:center;padding:12px 0;border-bottom:1px dashed #d5dfcb}.kbo-season b{font:16px var(--pixel);color:#a0ad89}.kbo-season>div>span{display:grid;gap:5px}.kbo-season strong{font:12px var(--pixel)}.kbo-season small{font-size:11px;color:#7a8870}.kbo-detail{border:1px solid #d8dfce;background:#fffdf6;padding:13px;margin-top:12px}.kbo-detail summary{display:flex;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;font:11px/1.6 var(--pixel)}.kbo-detail summary::-webkit-details-marker{display:none}.kbo-detail p{font-size:12px;line-height:1.85;color:#6f7d66;margin:11px 0 0}.kbo-teams{display:grid;grid-template-columns:1fr 1fr;gap:8px}.kbo-teams button{display:flex;align-items:center;gap:7px;border:1px solid #d6dfcd;background:#f4f6ed;padding:10px 7px;text-align:left;min-width:0;min-height:63px}.team-code{width:29px;height:30px;display:grid;place-items:center;background:var(--team-color);color:#fff9e6;font:10px var(--pixel);box-shadow:2px 2px 0 #d5ddca;flex-shrink:0}.kbo-teams button>span:nth-child(2){display:grid;gap:5px;min-width:0;flex:1}.kbo-teams strong{font-size:10px;letter-spacing:-.4px;white-space:nowrap}.kbo-teams small{font-size:10px;color:#8a947d}.kbo-teams button>span:last-child{font-size:14px;color:#8e9c80}.team-code-large{width:54px;height:54px;font-size:17px;margin-top:22px}.kbo-note{font-size:10px;line-height:1.8;color:#8b9683;margin:14px 0 4px}.kbo-footer{margin-top:23px;padding-top:13px;border-top:1px dashed #d8dfcf}.kbo-section-intro{margin:20px 0 18px}.kbo-section-intro h2{font:19px/1.7 var(--pixel);margin:9px 0}.kbo-section-intro>p{font-size:12px;line-height:1.8;color:#7d8971}.history-item{position:relative;border-left:2px solid #c7d4bd;padding-left:12px;padding-bottom:22px;margin-left:6px}.history-item:before{content:'';position:absolute;left:-5px;top:2px;width:8px;height:8px;background:#b89b59;border:1px solid #fffdf6}.history-item summary{display:grid;grid-template-columns:47px minmax(0,1fr) 11px;gap:9px;list-style:none;cursor:pointer}.history-item summary::-webkit-details-marker{display:none}.history-year{font:15px/1.5 var(--pixel);color:#987f46}.history-item summary>span:nth-child(2){display:grid;gap:6px}.history-item small{font-size:9px;color:#8b9981}.history-item strong{font:12px/1.7 var(--pixel)}.history-item summary>span:nth-child(2)>span{font-size:11px;line-height:1.8;color:#7c8971}.history-item summary>b{font-size:12px;color:#8c9c7c}.history-item[open] summary>b{transform:rotate(45deg)}.history-more{margin:11px 0 0 55px;padding:10px;background:#f1f5e9}.history-more>p{font-size:12px;line-height:1.85;color:#6b7d60}.legend-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:10px}.legend-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:11px 10px 15px;min-width:0;background:#f8f0dc;border:1px solid #d6c79f;box-shadow:2px 2px 0 #e9dfc5}.legend-card-top{display:flex;justify-content:space-between;width:100%;font-size:10px;color:#9c895e}.legend-card-top small{font-size:9px}.legend-jersey{width:68px;height:68px;image-rendering:pixelated;display:block;margin:7px auto 9px}.legend-card>strong{font:16px/1.5 var(--pixel)}.legend-nickname{display:block;font-size:10px;line-height:1.8;color:#8c7c59;margin-top:5px}.legend-stat{display:flex;flex-direction:column;gap:7px;width:100%;margin-top:12px;padding-top:12px;border-top:1px dashed #d4c59e}.legend-stat b{font:21px/1 var(--pixel);color:#876e35}.legend-stat small{font-size:9px;color:#9b8e70;line-height:1.6}.legend-modal>.legend-jersey{width:95px;height:95px;margin-top:18px}.legend-modal>h2{margin:6px 0 9px}.legend-feature{margin:18px 0;background:#f5eedb;border:1px solid #ded0ab;padding:17px;display:grid;gap:8px}.legend-feature b{font:32px var(--pixel);color:#9b7d39}.legend-feature>span{font-size:13px}.legend-feature>small{font-size:11px;color:#8d805f}.legend-modal>p{font-size:13px;line-height:1.85}.legend-modal>.kbo-note{font-size:10px}.hall-banner{text-align:center;background:#f6edda;border:1px solid #dac99d;padding:22px 12px}.hall-icon{display:grid;place-items:center;margin:0 auto 13px;width:53px;height:53px;border:1px solid #d3bd80;background:#f1dfac}.hall-icon .pixel-icon{width:30px;height:30px;color:#997d38}.hall-banner .kbo-kicker{color:#ab9565}.hall-banner h2{font:18px/1.8 var(--pixel);margin:11px 0}.hall-banner p{font-size:11px;color:#9b8a65}.hall-status{padding:16px;margin-top:14px;border:1px solid #cfdbc2;background:#f0f5e6}.hall-status .badge{font-size:9px;background:#e0e8cc;color:#657846;border-radius:0}.hall-status h3{font:14px/1.8 var(--pixel);margin:12px 0 8px}.hall-status p{font-size:11px;line-height:1.8;color:#80906d}.hall-copy h3{font:12px/1.7 var(--pixel)}.hall-copy .outline{font-size:11px;margin-bottom:0}
@media(max-width:370px){.kbo-teams{gap:6px}.team-code{width:24px;height:27px;font-size:9px}.kbo-teams button{gap:5px;padding:9px 5px}.kbo-teams strong{font-size:9px}.kbo-tabs button{font-size:9px}.legend-card{padding:10px 7px 14px}}
/* KBO explanations open inside the app. */
.kbo-read-button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:12px 10px;margin:10px 0 4px;border:1px solid #d2ddc8;background:#edf3e6;text-decoration:none;text-align:left;font-size:11px;min-height:42px;color:#486b5b}.kbo-read-button>span{font:18px var(--pixel);line-height:1}.kbo-reader .modal-top{margin-bottom:23px}.reader-back{font:11px/1.6 var(--pixel);color:#5d7d68;padding:9px 0}.kbo-reader h2{font:23px/1.6 var(--pixel);margin:10px 0 14px}.reader-intro{font-size:14px;line-height:1.9;color:#738367;padding-bottom:18px;border-bottom:1px dashed #d2ddc7}.reader-section{position:relative;margin-top:24px}.reader-number{display:block;font:10px var(--pixel);color:#a19364;margin-bottom:7px}.reader-section h3{font:14px/1.8 var(--pixel);margin-bottom:10px}.reader-section p{font-size:14px;line-height:1.95;color:#667760;word-break:keep-all;overflow-wrap:anywhere}.reader-credit{margin:25px 0 15px;padding:12px;background:#f2f5ec;border:1px solid #dde5d2}.reader-credit summary{font-size:10px;color:#869478;cursor:pointer}.reader-credit p{font-size:10px;line-height:1.9;color:#89977e;margin-top:9px}.record-explainer{margin:19px 0;border-top:1px dashed #d9ddc9;padding-top:4px}.record-explainer h3{font:13px/1.8 var(--pixel);margin:16px 0 8px}.record-explainer p{font-size:13px;line-height:1.95;color:#748368}.team-history-box{margin:19px 0;padding:15px;background:#f0f4e9;border:1px solid #d1ddc6}.team-history-box h3{font:13px/1.7 var(--pixel);margin-bottom:12px}.team-title-count{font:24px/1.6 var(--pixel);color:#886d38;margin:7px 0}.team-title-count small{display:block;font:10px/1.8 var(--pixel);color:#819073}.team-history-box>p:not(.team-title-count){font-size:12px;line-height:1.9;color:#718266}.team-history-box>small{display:block;font-size:10px;line-height:1.8;color:#97a084;margin-top:9px}
/* Shared baselines and balanced columns for the cropped alignment issues. */
.kbo-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start}
.kbo-facts>span{display:grid;grid-template-rows:30px auto;justify-items:center;align-items:center;gap:9px;min-width:0;text-align:center}
.kbo-facts b{font-size:22px;line-height:30px}.kbo-facts .pixel-icon{width:27px;height:27px;align-self:center}.kbo-facts small{font-size:9px;line-height:1.7;white-space:normal;text-align:center;min-height:30px}
.modal-content>.modal-top{display:flex;align-items:center;justify-content:space-between;min-height:36px;margin:0 0 15px;gap:10px}
.modal-top .badge{display:inline-flex;align-items:center;min-height:27px;line-height:1.5;margin:0}
.modal-actions{display:flex;align-items:center;justify-content:center;flex:0 0 auto}.modal-actions .star{display:grid;place-items:center;width:38px;height:38px;min-width:38px;padding:0;margin:0;line-height:1;font:25px/1 var(--pixel)}
.modal-content>h2,.modal-content>.rule-summary{max-width:100%;text-align:left}.modal-content>.primary:last-child{margin-top:23px;margin-bottom:0;min-height:45px}.legend-modal>.legend-nickname,.legend-modal>h2,.legend-modal>.sub{text-align:center}.legend-modal>.legend-feature{text-align:center;justify-items:center}
.info-visual{display:block;margin:20px 0;padding:15px 13px;background:#f0f4e8;border:1px solid #d0ddc3;min-width:0}.info-visual figcaption{font:10px/1.8 var(--pixel);color:#7d8b6b;margin:0 0 13px;text-align:left}.info-visual>svg{width:100%;height:auto;max-height:150px;display:block}.visual-result{display:block;margin:9px 0 0;padding:8px;background:#dfe9d2;color:#527247;font:11px/1.7 var(--pixel);text-align:center}.ball-result{background:#f3e9c9;color:#927337}
.playoff-visual ol,.rule-step-visual{margin:0;padding:0;list-style:none}.playoff-visual li{display:grid;grid-template-columns:66px minmax(0,1fr) 18px;align-items:center;gap:9px;padding:12px 0;position:relative}.playoff-visual li+li{border-top:1px dashed #c8d5b7}.playoff-rank{font:10px/1.7 var(--pixel);padding:7px 3px;background:#e0e9d4;text-align:center;color:#75885d}.playoff-visual li:last-child .playoff-rank{background:#f1dda7;color:#957331}.playoff-visual li>span:nth-child(2){display:grid;gap:5px}.playoff-visual strong{font:12px/1.7 var(--pixel)}.playoff-visual small{font-size:10px;color:#8d987e;line-height:1.7}.playoff-visual .pixel-icon{width:16px;height:16px;color:#91a275}.playoff-visual li:last-child .pixel-icon{color:#c39a43}
.city-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.city-tiles>span{display:grid;gap:7px;padding:11px 3px;background:#fffdf2;border:1px solid #d8e1cb;text-align:center}.city-tiles b{font:12px var(--pixel)}.city-tiles small{font-size:10px;color:#9aa588}.record-tiles,.era-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}.record-tiles>span,.era-tiles>span{display:flex;flex-direction:column;align-items:center;padding:12px 5px;gap:8px;text-align:center;background:#fffaf0;border:1px solid #d9dfc6}.record-tiles .pixel-icon{width:18px;height:18px;color:#819276}.record-tiles strong{font:11px var(--pixel)}.record-tiles b,.era-tiles b{font:21px var(--pixel);color:#9b7e3f}.record-tiles small,.era-tiles small{font-size:9px;line-height:1.7;color:#9a9e81}.season-visual{display:grid;grid-template-columns:1fr 10px 1fr 10px 1fr;gap:2px;align-items:center}.season-visual>span{display:grid;gap:10px;text-align:center;align-items:center}.season-visual b{font:20px var(--pixel);color:#8a7748}.season-visual small{font-size:9px;line-height:1.7;color:#929d7d}.season-visual i{font-style:normal;color:#a4b08e}.hall-visual{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.hall-visual>span{display:grid;justify-items:center;gap:13px;background:#fffaf0;border:1px solid #d9dfc6;padding:14px 3px}.hall-visual .pixel-icon{width:26px;height:26px;color:#9b8a51}.hall-visual strong{font:10px/1.6 var(--pixel)}
.count-lights{display:flex;align-items:center;justify-content:center;gap:15px;padding:13px 0}.count-lights>b{font:13px var(--pixel);color:#7c8a71}.lights{display:flex;gap:8px}.lights>i{display:block;width:15px;height:15px;border:2px solid #a5b49a;background:#7f9f73;box-shadow:2px 2px 0 #d2ddc5}.gold-lights>i{background:#d8b457;border-color:#c6a354}.red-lights>i{background:#cb7b65;border-color:#b66856}.count-reading>p{font-size:11px;line-height:1.8;text-align:center;color:#7c8b6a;margin-top:8px}.rule-step-visual li{display:flex;align-items:center;gap:10px;padding:9px 0}.rule-step-visual li+li{border-top:1px dashed #d4dfc8}.rule-step-visual li>span{width:23px;height:23px;flex-shrink:0;display:grid;place-items:center;background:#dce6cf;font:11px var(--pixel);color:#7e9368}.rule-step-visual strong{font-size:12px;line-height:1.7;font-weight:500;color:#728465}
.back-icon{display:grid;place-items:center;width:36px;height:36px;min-width:36px;flex-shrink:0;padding:6px;margin:0;border:0;background:transparent;color:#2a4454;box-shadow:none;line-height:1}.back-icon svg{display:block;width:22px;height:22px}.back-header{justify-content:flex-start;align-items:center;gap:8px}.back-header>div{min-width:0}.back-header h1{font-size:21px;line-height:1.6;margin-bottom:3px}.back-header p{font-size:10px}.modal-content>.reader-top{justify-content:flex-start;gap:8px}.reader-top .back-icon{margin-left:-6px}
.modal-content>.rule-detail-top{justify-content:flex-start;gap:7px}.rule-detail-top>.back-icon{margin-left:-6px}.rule-detail-top>.modal-actions{margin-left:auto}

/* Single home entry after removing snack learning. */
.rookie-actions{grid-template-columns:minmax(0,1fr)}
.rookie-actions .find-action{display:grid;grid-template-columns:32px 1fr;column-gap:11px;padding-right:36px}
.rookie-actions .find-action .action-icon{grid-row:1 / 3;align-self:center;margin-bottom:0}
.rookie-actions .find-action .action-caption{grid-column:2;margin-top:3px}

/* Preserve icon proportions in flex and grid layouts. */
svg.pixel-icon{aspect-ratio:1 / 1;flex-shrink:0;object-fit:contain;overflow:visible}
.hall-visual .pixel-icon{width:32px;height:32px;min-height:32px;justify-self:center;align-self:center}
.legend-jersey{width:80px;height:80px;aspect-ratio:1 / 1;flex-shrink:0;overflow:visible}
.legend-modal>.legend-jersey{width:112px;height:112px}

/* Official team emblems rendered on a original vector and high-resolution image assets. */
img.team-logo{width:52px;height:52px;min-width:52px;flex:0 0 52px;aspect-ratio:1;border:0;border-radius:0;background:transparent;image-rendering:auto;object-fit:contain;display:block}
img.team-logo-large{width:96px;height:96px;margin:18px 0 10px}
.kbo-teams button{gap:8px;padding:10px 7px;min-height:78px}
.kbo-teams strong{white-space:normal;line-height:1.5;word-break:keep-all}

img.team-logo{image-rendering:auto;object-fit:contain;object-position:center;filter:none}
img.team-logo-large{width:112px;height:112px}

/* Level rewards and deliberately neutral player-card wireframes. */
.card-reward-entry{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:11px 2px 5px;text-align:left;font-size:10px;line-height:1.6;color:#71816b}.card-reward-entry>span:first-child{display:flex;align-items:center;gap:6px}.card-reward-entry .pixel-icon{width:13px;height:13px}.card-reward-entry>span:last-child{white-space:nowrap}.card-reward-entry.reward-ready{color:#896624}.card-reward-entry b{font-weight:700}.kbo-tabs{display:flex;overflow-x:auto;scrollbar-width:none;gap:3px}.kbo-tabs>button{flex:0 0 auto;padding:10px 11px}.kbo-tabs::-webkit-scrollbar{display:none}.collection-header{padding:18px 15px;background:#edf1e8;border:1px solid #cbd5c2}.collection-header h2{font:19px/1.6 var(--pixel);margin:9px 0}.collection-header p{font-size:12px;line-height:1.8;color:#6c7b65;margin:0}.collection-count{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #cbd5c2;margin-top:15px;padding-top:12px}.collection-count strong{font:26px var(--pixel);color:#354b50}.collection-count small{font-size:12px;color:#8a9580}.collection-count>span{font-size:10px;color:#6e7c62}.collection-note{font-size:10px;line-height:1.8;color:#87917e;margin:15px 0}.player-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.collection-item{min-width:0}.collection-item-head{display:flex;justify-content:space-between;align-items:center;gap:4px;margin:0 0 8px;font-size:10px}.collection-item-head>span{font-size:9px;color:#87917f}.is-ready .collection-item-head>span{color:#9b7021}.is-owned .collection-item-head>span{color:#4a785d}.player-card-wire{width:100%;aspect-ratio:2.5 / 3.5;display:flex;flex-direction:column;padding:9px;border:1px solid #86918c;border-radius:7px;background:#fcfcf9;box-shadow:2px 3px 0 #d8ddd4;color:#59645e;overflow:hidden}.wire-card-top,.wire-card-bottom{display:flex;justify-content:space-between;gap:4px;font:6px/1.6 system-ui,sans-serif;letter-spacing:.4px}.wire-card-top b{font-size:8px}.wire-photo{flex:1;min-height:40px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #aab2a9;background:#edf0ea;margin:8px 0;color:#859185;overflow:hidden}.wire-photo svg{width:62%;max-height:85px;fill:#c3cbc1;flex:1;min-height:0}.wire-photo span{font-size:8px;line-height:1.7;padding:4px;position:relative}.wire-name{font:12px/1.7 var(--pixel);color:#526052;margin-bottom:3px}.wire-info{display:flex;justify-content:space-between;gap:4px;font-size:7px;line-height:1.5}.wire-card-bottom{margin-top:8px;padding-top:5px;border-top:1px solid #d4d9cf;font-size:5px}.is-locked .player-card-wire{opacity:.45;box-shadow:none}.collection-requirement{font-size:9px;line-height:1.6;min-height:29px;margin:9px 0 0;color:#7c8873}.collection-item>button{font:10px/1.5 var(--pixel);padding:10px 4px;margin:7px 0 0;min-height:38px}.collection-item>button:disabled{opacity:.5;cursor:default;background:#e8ece3;color:#778171;box-shadow:none}.collection-quiz{font-size:11px;margin-top:22px}.player-card-modal{text-align:center}.player-card-modal h2{font-size:17px;margin:13px 0 18px}.player-card-wire.wire-large{width:210px;max-width:100%;margin:0 auto 20px;padding:14px}.wire-large .wire-card-top{font-size:9px}.wire-large .wire-card-top b{font-size:12px}.wire-large .wire-name{font-size:18px}.wire-large .wire-info{font-size:10px}.wire-large .wire-photo svg{max-height:128px}.wire-large .wire-photo span{font-size:11px}.wire-large .wire-card-bottom{font-size:7px}.player-card-modal>.sub{font-size:11px;line-height:1.8}

/* Supplied card artwork is displayed whole, without cropping or pixelation. */
.player-card-art{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:2.5 / 3.5;min-width:0}.player-card-art img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain;image-rendering:auto;border-radius:7px}.is-locked .player-card-art{opacity:.55}.player-card-art.wire-large{width:230px;max-width:100%;aspect-ratio:2 / 3;margin:0 auto 18px}.player-card-art.wire-large img{border-radius:8px}

/* Foil layers sit above the original, unchanged card artwork. */
.player-card-art{--holo-x:50%;--holo-y:40%;--holo-rx:0deg;--holo-ry:0deg;--holo-active:0;perspective:900px;touch-action:pan-y}
.holo-surface{display:block;position:relative;isolation:isolate;height:100%;aspect-ratio:2 / 3;max-width:100%;overflow:hidden;border-radius:7px;transform:rotateX(var(--holo-rx)) rotateY(var(--holo-ry));transition:transform .4s ease,box-shadow .4s ease;box-shadow:0 3px 9px #142c492b;backface-visibility:hidden}
.player-card-art .holo-surface>img{width:100%;height:100%;object-fit:contain;image-rendering:auto;border-radius:inherit}
.holo-foil,.holo-shine,.holo-sparkles{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.holo-foil{background:linear-gradient(118deg,transparent 8%,#91e8ff70 22%,#d6b8ff60 36%,transparent 47%,#ffc8df55 58%,#c9fff866 73%,transparent 88%);background-size:260% 260%;background-position:var(--holo-x) var(--holo-y);mix-blend-mode:screen;opacity:calc(.13 + var(--holo-active)*.17);animation:holo-colors 11s ease-in-out infinite;transition:opacity .4s}
.holo-shine{inset:-60%;background:linear-gradient(115deg,transparent 37%,#c0e9ff09 43%,#e5fcff45 48%,#ffffff9c 50%,#f9d8ff45 52%,transparent 60%);mix-blend-mode:screen;opacity:.48;transform:translateX(-60%);animation:holo-sweep 6.8s ease-in-out infinite}
.holo-sparkles{background:radial-gradient(ellipse at var(--holo-x) var(--holo-y),#ffffff38 0,transparent 45%),radial-gradient(circle at 8% 5%,#fff 0 .7px,transparent 2.6px),radial-gradient(circle at 94% 21%,#d7eeff 0 .8px,transparent 2.8px),radial-gradient(circle at 89% 91%,#fff 0 1px,transparent 3px),radial-gradient(circle at 7% 76%,#d6eaff 0 .8px,transparent 3px);mix-blend-mode:screen;opacity:.2;animation:holo-twinkle 4.8s ease-in-out infinite}
.player-card-art.wire-large .holo-surface{border-radius:8px}.player-card-art.wire-large .holo-shine{opacity:.58}
@keyframes holo-sweep{0%,15%{transform:translateX(-60%)}65%,100%{transform:translateX(60%)}}
@keyframes holo-colors{0%,100%{background-position:0% 25%}50%{background-position:100% 75%}}
@keyframes holo-twinkle{0%,100%{opacity:.15}48%{opacity:.55}72%{opacity:.23}}
@media(prefers-reduced-motion:reduce){.holo-surface{transform:none;transition:none}.holo-foil,.holo-shine,.holo-sparkles{animation:none;transition:none}.holo-foil{opacity:.12}.holo-shine{opacity:0}.holo-sparkles{opacity:.12}}

/* Image-first collectible viewer, sized to the available phone viewport. */
.card-preview-wrap .card-preview{display:block;width:100%;padding:0;border:0;background:none;border-radius:8px;touch-action:pan-y}.card-preview:disabled{opacity:1}.card-preview:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
dialog:has(.card-viewer){width:min(430px,calc(100vw - 20px));max-width:none;max-height:calc(100dvh - 20px);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;color:#fff;}
dialog:has(.card-viewer)::backdrop{background:#08101be8;backdrop-filter:blur(8px)}
.card-viewer{display:flex;flex-direction:column;align-items:center;padding:0 8px;gap:10px;max-height:calc(100dvh - 20px)}
.card-viewer-top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;font:12px/1.6 system-ui,sans-serif;color:#e4ebf5}.card-viewer-close{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;background:#ffffff19;border:1px solid #ffffff35;border-radius:50%;padding:11px}.card-viewer-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.card-flipper{display:block;padding:0;border:0;background:none;width:min(100%,calc((100dvh - 162px)*2/3));aspect-ratio:2/3;flex-shrink:0;perspective:1400px;touch-action:pan-y;border-radius:10px}.card-flip-inner{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.2,1)}.card-flipper[aria-pressed=true] .card-flip-inner{transform:rotateY(180deg)}.card-face{display:block;position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px}.card-back{transform:rotateY(180deg);overflow:hidden}.card-back img{display:block;width:100%;height:100%;object-fit:contain;border-radius:10px;user-select:none;-webkit-user-drag:none}.card-viewer .player-card-art.wire-large{width:100%;height:100%;max-width:none;margin:0;aspect-ratio:2/3}.card-viewer .holo-surface{width:100%;border-radius:10px}.card-viewer img{user-select:none;-webkit-user-drag:none}.card-viewer .player-card-wire.wire-large{width:min(100%,calc((100dvh - 162px)*2/3));margin:0;flex-shrink:0}.card-viewer-bottom{width:100%;display:flex;align-items:center;justify-content:center;gap:22px;font:11px/1.5 system-ui,sans-serif;color:#b6c6da}.card-viewer-bottom button{min-height:40px;padding:8px 14px;border:1px solid #ffffff40;border-radius:24px;color:#fff;background:#ffffff0c}.card-swipe-hint{margin:0;font:10px/1.5 system-ui,sans-serif;color:#9aaac0;text-align:center}
@media(prefers-reduced-motion:reduce){.card-flip-inner{transition:none}}

/* Keep card enlargement inside the visible device, including scaled desktop previews. */
dialog:has(.card-viewer){position:fixed;inset:auto;left:var(--card-frame-left);top:var(--card-frame-top);width:var(--card-frame-width);height:var(--card-frame-height);max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:var(--card-frame-radius);overflow:hidden;background:#08101bf5;container-type:size;box-shadow:none}
dialog:has(.card-viewer)::backdrop{background:transparent;backdrop-filter:none}
.card-viewer{width:100%;height:100%;max-height:none;padding:22px 16px 18px;gap:10px;justify-content:center}
.card-viewer-top{flex-shrink:0}.card-viewer-close{width:40px;height:40px;padding:9px}
.card-flipper{width:min(100%,calc((100cqh - 176px)*2/3))}
.card-viewer .player-card-wire.wire-large{width:min(100%,calc((100cqh - 176px)*2/3))}
.card-viewer-bottom,.card-swipe-hint{flex-shrink:0}

/* Shared level card on Home and My Page. */
.rookie-score .score-percent{font-size:9px;line-height:1.5}

/* Unclaimed rewards stay concealed until the player actually receives them. */
.card-preview-wrap .card-preview{position:relative;overflow:hidden}
.unowned-card-art{filter:blur(12px);transform:scale(1.1);pointer-events:none;user-select:none;opacity:.5}
.unowned-card-art .holo-foil,.unowned-card-art .holo-shine,.unowned-card-art .holo-sparkles{animation:none;opacity:0}
.card-preview:disabled{cursor:default;background:#dce2e2}
.card-preview .card-mystery{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:54px;height:62px;border:1px solid #ffffff50;border-radius:8px;background:#253d50e8;color:#ffe3a1;box-shadow:0 4px 15px #132b3b30;font:32px/1 var(--pixel);pointer-events:none}

/* One random draw station, separate from the collection. */
.card-draw-panel{display:grid;grid-template-columns:49px minmax(0,1fr);gap:14px 12px;margin:18px 0 24px;padding:17px 15px;background:#fff5da;border:1px solid #d5c28b;box-shadow:3px 3px 0 #e4dcc2}.draw-ticket-icon{display:grid;place-items:center;width:45px;height:62px;border:2px solid #9e8344;transform:rotate(-8deg);background:#253d50;color:#ffe3a1;box-shadow:3px 3px 0 #cbbb8c;font:29px/1 var(--pixel)}.card-draw-panel h3{font:13px/1.7 var(--pixel);margin:5px 0}.card-draw-panel p{font-size:11px;color:#7e724e}.card-draw-panel p b{color:#253d50}.card-draw-panel .primary{grid-column:1/-1;font-size:12px;margin:0;min-height:45px}.card-draw-panel small{grid-column:1/-1;font-size:10px;line-height:1.8;color:#8c805f;text-align:center}

/* Mystery marks have no surrounding badge or box. */
.card-preview .card-mystery{border:0;border-radius:0;background:none;box-shadow:none;text-shadow:0 2px 10px #172b4c66;font-size:40px}
.draw-ticket-icon{border:0;background:none;box-shadow:none;transform:none;color:#253d50;font-size:36px}

/* Draw sequence: spinning mystery card, then a soft diagonal foil reveal. */
.draw-reveal .card-flipper{position:relative;isolation:isolate}
.draw-mystery-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:24px 12px;border:1px solid #8facc9;border-radius:10px;background:radial-gradient(ellipse at 25% 20%,#3f718a88,transparent 58%),repeating-linear-gradient(135deg,#ffffff04 0 1px,transparent 1px 12px),#162b43;color:#f5dc9c;backface-visibility:hidden;box-shadow:inset 0 0 0 5px #89b6cb1a,0 0 22px #99d8ff22;transform-origin:center;animation:mystery-card-fade 6s ease both;pointer-events:none}
.mystery-symbol{font:76px/1 var(--pixel);text-shadow:0 0 24px #bcefff66}
.mystery-label{font:9px/1.7 var(--pixel);letter-spacing:2px;color:#a9c5da}
.draw-reveal .card-front>.player-card-art{mask-image:linear-gradient(135deg,#000 35%,transparent 65%);mask-size:300% 300%;animation:player-card-emerge 6s ease-in-out both}
.draw-reveal-light{position:absolute;inset:-12%;border-radius:12px;pointer-events:none;background:linear-gradient(120deg,transparent 20%,#92ddff00 37%,#9fcfff66 46%,#fff2cfbb 50%,#d9b7ff77 54%,transparent 66%);mix-blend-mode:screen;animation:draw-foil-reveal 6s ease-in-out both}
.draw-reveal .card-viewer-top>span,.draw-reveal .card-viewer-bottom,.draw-reveal .card-swipe-hint{animation:draw-caption-reveal 6s ease both}
@keyframes mystery-card-fade{0%,59%{opacity:1}76%{opacity:.65;filter:brightness(1.6)}100%{opacity:0;visibility:hidden}}
.card-draw-rotor{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d}
.draw-reveal .card-draw-rotor{animation:draw-card-turn 6s cubic-bezier(.3,.05,.2,1) both}
@keyframes draw-card-turn{0%{transform:scale(.72) rotateY(-55deg) rotateZ(-8deg)}40%{transform:scale(.92) rotateY(720deg) rotateZ(4deg)}59%,100%{transform:scale(1) rotateY(1080deg) rotateZ(0)}}
@keyframes player-card-emerge{0%,52%{opacity:0;mask-position:100% 100%}61%{opacity:1;mask-position:100% 100%}100%{opacity:1;mask-position:0% 0%}}
@keyframes draw-foil-reveal{0%,50%{opacity:0;transform:translateX(-75%)}62%{opacity:.5}78%{opacity:.85}100%{opacity:0;transform:translateX(75%)}}
@keyframes draw-caption-reveal{0%,80%{opacity:0}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.draw-mystery-card,.draw-reveal-light{display:none}.draw-reveal .card-draw-rotor{animation:none}.draw-reveal .card-front>.player-card-art{animation:none;mask-image:none}.draw-reveal .card-viewer-top>span,.draw-reveal .card-viewer-bottom,.draw-reveal .card-swipe-hint{animation:none}}

.quiz-motion{margin:0 0 16px;border:1px solid #c6d5bd;background:#f0f4e9;padding:8px;border-radius:8px;overflow:hidden}.quiz-motion svg{display:block;width:100%;height:auto;max-height:218px}.quiz-motion figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 3px;font:10px/1.5 var(--pixel);color:#657761}.quiz-motion figcaption button{min-height:36px;padding:7px 9px;background:#fffaf0;border:1px solid #bccbb0;border-radius:4px;color:#34556b}.quiz-motion-description{font:11px/1.7 system-ui,sans-serif;color:#63715c;border-top:1px dashed #cad6be;margin-top:5px;padding:8px 3px 2px}.quiz-motion+.option{margin-top:0}

/* Explicit percentage sizing avoids the My Page last-child arrow rule. */
.rookie-score .score-bottom>.score-percent,.rookie-score .score-bottom>.score-percent:last-child{font:9px/1.5 var(--pixel);letter-spacing:0}
.level-progress-caption{display:block;margin-top:9px;font:10px/1.6 system-ui,sans-serif;color:#b6ccd1}
.my-player-cards{margin:22px 0}.my-player-cards .home-section-head{margin:0 0 12px}.my-player-cards .home-section-head button{font:10px/1.6 var(--pixel);padding:6px 0;color:#73846d}
.my-card-shelf{display:flex;gap:12px;overflow-x:auto;padding:3px 2px 9px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#c4d0bf transparent}
.my-owned-card{flex:0 0 121px;min-width:0;padding:0;text-align:left;scroll-snap-align:start}.my-owned-card strong{display:block;font:12px/1.6 var(--pixel);margin:9px 0 2px}.my-owned-card small{font:10px/1.6 system-ui,sans-serif;color:#7a8973}
.my-cards-empty{padding:18px 12px;border:1px dashed #c7d3bd;background:#f1f4eb;text-align:center}.my-cards-empty p{font-size:12px;color:#7c8871}.my-cards-empty button{padding:10px 0 0;font:11px/1.6 var(--pixel);color:#34556b}

.quiz-pixel-motion canvas{width:100%;height:auto;max-height:none;aspect-ratio:400/326;image-rendering:pixelated;border:1px solid #a8b8a2;border-radius:4px;background:#f1f4e8}

/* Compact collection summaries leave room for the cards themselves. */
.collection-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}
.collection-header h2{font:15px/1.5 var(--pixel);margin:0 0 5px}.collection-header p{font-size:10px;line-height:1.6}
.collection-header .collection-count{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;margin:0;padding:0;border:0}
.collection-header .collection-count strong{font:20px/1.2 var(--pixel)}.collection-header .collection-count small{font-size:10px}.collection-header .collection-count>span{font-size:9px}
.card-draw-panel{grid-template-columns:30px minmax(0,1fr);gap:9px 11px;margin:12px 0 18px;padding:12px;box-shadow:2px 2px 0 #e4dcc2}
.card-draw-panel .draw-ticket-icon{width:30px;height:42px;font-size:29px}.card-draw-panel h3{font-size:12px;line-height:1.5;margin:0 0 4px}.card-draw-panel p{font-size:10px;line-height:1.5}
.card-draw-panel .primary{min-height:38px;padding:9px;font-size:10px;line-height:1.5;box-shadow:2px 2px 0 #8ba3b0}.card-draw-panel small{font-size:9px;line-height:1.6}
.kbo-welcome{padding:14px}.kbo-welcome h2{font-size:16px;line-height:1.6;margin:8px 0 12px}.kbo-facts{margin-top:0;padding-top:10px}.kbo-facts b{font-size:19px}.kbo-facts .pixel-icon{width:22px;height:22px}
.hall-banner{padding:14px 12px}.hall-icon{width:34px;height:34px;margin-bottom:8px}.hall-icon .pixel-icon{width:22px;height:22px}.hall-banner h2{font-size:15px;line-height:1.6;margin:8px 0}.hall-banner p{font-size:10px}

/* Every reading dialog has one top-right icon close, without a footer confirmation. */
.modal-close{display:grid;place-items:center;width:40px;height:40px;min-width:40px;flex-shrink:0;padding:10px;border:0;border-radius:50%;background:#eaf0e4;color:#30485a;box-shadow:none}
.modal-close svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.modal-close:active{background:#dbe5d6}
.modal-content .modal-top{min-height:40px;gap:8px;margin-bottom:12px}.modal-content .modal-actions{display:flex;align-items:center;gap:5px}.modal-content .modal-actions .star{align-self:auto}
.modal-content{overflow:visible}.modal-content .modal-top{position:sticky;top:0;z-index:4;background:#fffdf6}

/* Larger, consistent pixel navigation with generous tap targets. */
.app>nav{padding-top:6px;padding-left:8px;padding-right:8px;min-height:78px;gap:4px}
.app>nav>button{min-width:48px;min-height:58px;padding:3px 0;gap:4px;grid-template-rows:34px auto;align-content:center}
.app>nav .nav-icon{display:grid;place-items:center;width:48px;height:34px;border-radius:2px}
.app>nav .nav-icon .pixel-icon{width:28px;height:28px;flex-shrink:0;shape-rendering:crispEdges}
.app>nav .nav-label{font:11px/1.5 var(--pixel);letter-spacing:0;white-space:nowrap}
.my-difficulty{display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:1px 7px;border:1px solid #d2ddc8;background:#f1f4eb}
.my-difficulty h2{flex-shrink:0;margin:0;font:10px/1.5 var(--pixel);color:#6b7c66;white-space:nowrap}
.difficulty-options{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(48px,1fr));gap:3px}
.difficulty-options button{min-height:48px;padding:4px 2px;font:11px/1.5 var(--pixel);border-radius:2px;color:#7a8971}
.difficulty-options button.active{background:#ffe8ac;color:#253d50;box-shadow:inset 0 -2px 0 #c7a45d}

/* Keep the enlarged tap targets while balancing the visible glyphs. */
.app>nav>button[data-value="퀴즈"] .pixel-icon{width:23px;height:23px}
.quiz-emblem .pixel-icon{width:16px;height:16px}
.my-difficulty{border:0;background:none;padding:0;gap:12px}
.my-difficulty h2{color:#7c8a74;font-size:10px;padding:0 1px}
.difficulty-options{border:1px solid #d2ddc8;background:#f1f4eb;padding:2px;border-radius:3px}
.difficulty-options button{min-height:44px}.difficulty-options button.active{background:#ffe8ac}
.draw-panel-footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.card-draw-panel .draw-panel-footer small{font:9px/1.6 system-ui,sans-serif;text-align:left}

.difficulty-options button{min-height:48px}

/* Compact glyphs retain the existing comfortable navigation hit areas. */
.app>nav .nav-icon .pixel-icon,.app>nav>button[data-value="퀴즈"] .pixel-icon{width:21px;height:21px}
/* Matching entry cards, differentiated by their game-like color palettes. */
.rookie-actions{gap:10px}
.rookie-actions .rookie-action{display:grid;grid-template-columns:32px minmax(0,1fr) 16px;align-items:center;gap:11px;width:100%;min-height:76px;padding:13px 12px;border:1px solid #b9ceca;background:#e9f1ed;box-shadow:2px 2px 0 #d3dfd8}
.rookie-actions .action-icon{grid-row:auto;align-self:center;width:32px;height:32px;margin:0;background:#d7e7de;border:1px solid #afc9ba;color:#456b59}
.rookie-actions .action-icon .pixel-icon{width:16px;height:16px}
.action-copy{display:grid;gap:4px;min-width:0}
.rookie-actions .action-caption{display:block;grid-column:auto;margin:0;font:10px/1.6 var(--pixel);color:#6f8275}
.rookie-actions .action-arrow{position:static;font:16px var(--pixel);color:#6e8979}
.rookie-actions .quiz-action{background:#f6eedc;border-color:#d5c49a;box-shadow:2px 2px 0 #e5dcc5}
.quiz-action .action-icon{background:#ecdfbd;border-color:#d2bb84;color:#8c6b31}
.quiz-action .action-caption,.quiz-action .action-arrow{color:#927f58}
/* Pixel reading panel: typography, squared counters and crisp sprite artwork. */
.rule-detail,.rule-detail p,.rule-detail button,.rule-detail strong,.rule-detail figcaption,.rule-detail svg text{font-family:var(--pixel)}
.rule-detail .rule-summary,.rule-detail .example,.rule-detail .caution{font:12px/1.95 var(--pixel);word-break:keep-all;overflow-wrap:anywhere}
.rule-detail h2{font-size:21px;line-height:1.6}
.rule-detail .example,.rule-detail .caution,.rule-detail .info-visual{border-radius:0}
.rule-detail .example .pixel-icon,.rule-detail .caution .pixel-icon{width:14px;height:14px}
.rule-detail .info-visual svg{image-rendering:pixelated;shape-rendering:crispEdges}
.rule-detail .info-visual text{font-size:10px}
.rule-detail .info-visual figcaption,.rule-detail .info-visual p,.rule-detail .rule-step-visual strong,.rule-detail .visual-result{font:11px/1.9 var(--pixel)}
.rule-detail .lights>i,.rule-detail .rule-step-visual li>span{border-radius:0}
.rule-detail .info-visual{border:1px solid #c5d3b9;box-shadow:3px 3px 0 #e0e8d5}
.rookie-actions .find-action .action-icon{grid-row:auto;margin:0}
.rookie-actions .find-action .action-caption{grid-column:auto;margin:0}

/* A lighter, compact learning history section on My Page. */
.my-learning>.chips{padding:8px 0 6px;gap:7px}
.my-learning .chip{min-height:30px;padding:4px 10px;font:10px/1.6 var(--pixel);box-shadow:1px 1px 0 #dae2d9}
.my-learning .chip.active{box-shadow:1px 1px 0 #d8bc67}
.my-learning .rule-row{padding:10px 12px;border-width:1px;box-shadow:2px 2px 0 #dee5d9;align-items:center}
.my-learning .row-body h3{font-size:13px;line-height:1.6}
.my-learning .row-body p{font-size:11px;line-height:1.65;margin-top:4px}
.my-learning .empty{margin-top:8px;padding:16px 10px;font-size:12px;line-height:1.7}

/* Compact quiz reading and answers, retaining comfortable answer targets. */
.quiz-page .quiz-prompt{font:700 16px/1.75 var(--pixel);margin:14px 0;word-break:keep-all;overflow-wrap:anywhere}
.quiz-page .option{font:12px/1.7 var(--pixel);padding:10px 12px;min-height:44px;margin-top:8px;border-width:1px;box-shadow:2px 2px 0 #dbe3d5}
.quiz-page .option.correct{box-shadow:2px 2px 0 #aec99f}.quiz-page .option.wrong{box-shadow:2px 2px 0 #e3bbae}
.quiz-page .card{padding:14px}.quiz-page .card h2{font-size:15px;line-height:1.7}
.quiz-page .sub{font-size:12px;line-height:1.75}
.quiz-page .outline,.quiz-page .primary{font:11px/1.7 var(--pixel);min-height:40px;padding:9px 11px;margin-top:11px;border-width:1px;box-shadow:2px 2px 0 #8ba3b0}
.quiz-page .feedback{padding:12px;margin-top:12px;border-width:1px;box-shadow:2px 2px 0 #d7e1d3}
.quiz-page .feedback strong{font-size:12px}.quiz-page .feedback p{font-size:12px;line-height:1.8;margin-top:6px}
.quiz-page .score{font-size:32px}.quiz-page .badge{font-size:10px;padding:4px 6px}
.quiz-page .quiz-motion{margin-bottom:10px;padding:6px}
.quiz-page .quiz-motion figcaption button{min-height:32px;padding:5px 7px;font-size:10px}

/* Keep both sides anonymous throughout the mystery-card rotation. */
.draw-reveal .draw-back-cover{animation:draw-back-seal 6s step-end both}
.draw-reveal .card-back img{animation:draw-back-art 6s step-end both}
@keyframes draw-back-seal{0%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes draw-back-art{0%{opacity:0}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.draw-reveal .draw-back-cover{display:none}.draw-reveal .card-back img{animation:none;opacity:1}}
.locked-collection{margin-top:24px;padding-top:4px;border-top:1px solid #d8e0d1}
.collection-empty{padding:13px 10px;background:#f0f3e9;border:1px dashed #c8d3be;font:11px/1.8 var(--pixel);color:#7a8871}
.hall-inline>.home-section-head{margin-top:17px;margin-bottom:12px}
.hall-inline-article{padding:15px 13px;background:#fffef8;border:1px solid #d5ddcb;margin:0 0 14px}
.hall-inline-article>h3{font:700 14px/1.8 var(--pixel);margin:0 0 7px;color:#304953}
.hall-inline-intro{font-size:12px;line-height:1.85;color:#79866e}
.hall-inline-section{margin-top:14px;padding-top:12px;border-top:1px dashed #dce3d1}
.hall-inline-section h4{font:11px/1.8 var(--pixel);color:#5e7354;margin:0 0 5px}
.hall-inline-section p{font-size:12px;line-height:1.9;color:#6e7e65;word-break:keep-all;overflow-wrap:anywhere}

/* Keep the existing phone-sized viewport without drawing hardware around it. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.app{border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important;padding:10px 5px 0}
.app:before,.app:after{display:none!important}
/* Actual phones use compact component sizes rather than desktop type defaults. */
@media(max-width:599px){
 body{font-size:13px}
 .app{padding-top:max(6px,env(safe-area-inset-top,0px))}
 .app>main{padding:12px 13px 18px}
 header{margin-bottom:12px;padding-bottom:10px}
 h1,.home-dashboard header h1,.back-header h1{font-size:20px;line-height:1.5;letter-spacing:-.5px}
 header p,.home-dashboard header p{font-size:10px;line-height:1.6}
 h2{font-size:16px}h3{font-size:14px}
 .home-dashboard header{margin-bottom:13px}
 .rookie-score{padding:11px 12px}.score-middle{margin:9px 0}.score-middle strong{font-size:12px}.score-total b{font-size:24px}
 .home-section-head{margin:18px 0 9px}.home-section-head h2{font-size:12px}
 .ticket-meta{padding:8px 11px;font-size:8px}
 .ticket-content{padding:13px 11px;min-height:104px;grid-template-columns:minmax(0,1fr) 65px}
 .ticket-content h2{font-size:19px;margin-bottom:6px}.ticket-content p{font-size:11px;line-height:1.7}
 .rookie-field{width:65px;height:65px}.ticket-bottom{padding:8px 11px}.ticket-bottom>span{font-size:9px}.ticket-bottom button{padding:7px 9px;font-size:10px;min-height:34px}
 .rookie-actions{gap:8px}.rookie-actions .rookie-action{min-height:66px;padding:10px;gap:9px;grid-template-columns:28px minmax(0,1fr) 15px}
 .rookie-actions .action-icon{width:28px;height:28px}.rookie-actions strong{font-size:11px}.rookie-actions .action-caption{font-size:9px}
 .card{padding:13px}.search{padding:11px;font-size:13px;margin-bottom:7px}
 .lookup-modes{margin-top:9px}.lookup-modes button{padding:8px 2px;font-size:10px;min-height:34px}
 .chips{gap:6px;padding-top:8px;padding-bottom:7px}.chip{padding:6px 8px;font-size:10px;min-height:32px}
 .rule-row{padding:11px 12px;border-width:1px;box-shadow:2px 2px 0 #dee5d9}.row-body h3{font-size:13px;line-height:1.65}.row-body p{font-size:11px;line-height:1.75;margin-top:5px}.star{font-size:21px}
 .visual-entry{padding:10px}.visual-links button{padding:8px;font-size:9px;min-height:38px}
 .primary,.outline{font-size:11px;padding:10px;border-width:1px;margin-top:13px;box-shadow:2px 2px 0 #8ba3b0}
 .kbo-tabs{margin-bottom:12px;top:-12px}.kbo-tabs>button{font-size:9px;padding:8px 9px;min-height:34px}
 .kbo-welcome{padding:14px 12px}.kbo-welcome h2{font-size:16px;line-height:1.7}.kbo-section-intro h2{font-size:17px}
 .kbo-detail,.hall-inline-article{padding:12px}.kbo-detail p{font-size:12px;line-height:1.8}
 .collection-header{padding:10px 11px}.collection-header h2{font-size:13px}.collection-header p{font-size:9px}.collection-count strong{font-size:19px}
 .card-draw-panel{padding:11px}.card-draw-panel h3{font-size:11px}.card-draw-panel p{font-size:10px}
 .player-card-grid{gap:15px 10px}.collection-item-head{font-size:9px}.collection-item-head>span{font-size:8px}
 .my-difficulty{gap:8px}.difficulty-options button{min-height:40px;font-size:10px}.pill-count{font-size:10px}
 .app>nav{padding-top:4px;min-height:68px;gap:2px}.app>nav>button{min-height:54px;grid-template-rows:29px auto;gap:2px}.app>nav .nav-icon{height:29px}.app>nav .nav-label{font-size:10px}
 .modal-content{padding:17px}.rule-detail h2{font-size:19px}.rule-detail .rule-summary,.rule-detail .example,.rule-detail .caution{font-size:11px;line-height:1.9}.modal-content .modal-top{margin-bottom:8px}
 .quiz-page .quiz-prompt{font-size:15px;margin:12px 0}.quiz-page .option{font-size:11px;padding:9px 11px;min-height:42px}
}
/* Avoid Safari's automatic form-focus zoom while keeping manual zoom available. */
@supports(-webkit-touch-callout:none){@media(max-width:599px){input.search,.scenario-select select{font-size:16px}}}

/* On a phone the app is the page: no preview gutter or dotted wallpaper. */
@media(max-width:599px){
 html,body{background:#fffdf6!important;background-image:none!important}
 :root{--phone-gap:0px;--phone-bezel:0px}
 .app{width:100%;max-width:430px;height:var(--app-height,100dvh);max-height:var(--app-height,100dvh);margin:0 auto!important}
}

/* Restore legibility of the smallest mobile labels without enlarging whole cards. */
@media(max-width:599px){
 header p,.home-dashboard header p,.home-section-head>span,.ticket-meta,.ticket-bottom>span,.rookie-actions .action-caption,.home-signoff{font-size:11px;line-height:1.7}
 .ticket-meta{letter-spacing:0}.ticket-bottom{flex-wrap:wrap;row-gap:5px}.ticket-bottom button{font-size:11px}
 .ticket-content p,.row-body p,.scene-hint{font-size:12px;line-height:1.8}
 .rule-category,.result-label,.visual-entry summary>span,.visual-links button,.lookup-modes button,.chip{font-size:11px;line-height:1.7}
 .score-top{font-size:10px;letter-spacing:0}.score-top>span:last-child,.score-level,.score-total>span{font-size:11px}
 .rookie-score .score-bottom>.score-percent,.rookie-score .score-bottom>.score-percent:last-child{font:11px/1.5 var(--pixel)}
 .level-progress-caption,.card-reward-entry{font-size:11px;line-height:1.7}
 .kbo-tabs>button{font-size:11px;padding:8px 10px}.kbo-kicker{font-size:10px}.kbo-note,.kbo-footer{font-size:11px;line-height:1.8}
 .collection-header p,.collection-header .collection-count small,.collection-header .collection-count>span,.collection-item-head,.collection-item-head>span,.collection-requirement,.collection-item>button{font-size:11px;line-height:1.7}
 .collection-item-head{align-items:flex-start;flex-wrap:wrap;row-gap:2px}.collection-requirement{min-height:0}
 .card-draw-panel h3{font-size:12px}.card-draw-panel p,.card-draw-panel .primary,.card-draw-panel .draw-panel-footer small{font-size:11px;line-height:1.7}
 .my-difficulty h2,.difficulty-options button,.pill-count,.my-owned-card small,.footnote,.my-player-cards .home-section-head button{font-size:11px;line-height:1.7}
 .my-learning .row-body p{font-size:12px}.my-learning .chip{font-size:11px}.app>nav .nav-label{font-size:11px}
 .rule-detail .rule-summary,.rule-detail .example,.rule-detail .caution,.rule-detail .info-visual p,.rule-detail .rule-step-visual strong{font-size:12px;line-height:1.9}
 .quiz-page .option,.quiz-page .sub,.quiz-page .feedback p{font-size:13px;line-height:1.75}
 .quiz-page .badge,.quiz-motion-description,.quiz-page .quiz-motion figcaption,.quiz-page .quiz-motion figcaption button,.scenario-select,.controls>button,.sim-status strong,.rule-strip{font-size:11px;line-height:1.7}
 .card-swipe-hint,.card-viewer-bottom,.mystery-label{font-size:11px;line-height:1.7}
}

/* A compact rule reader, with readable body copy and a smaller diagram. */
dialog:has(.rule-detail){width:min(330px,calc(100vw - 40px));max-width:330px;max-height:calc(var(--app-height,100dvh) - 48px);border-width:1px}
.modal-content.rule-detail{padding:14px 15px}
.rule-detail .modal-top{margin-bottom:5px;min-height:40px}
.modal-content.rule-detail>h2{font-size:18px;line-height:1.5;margin:5px 0 8px}
.rule-detail .rule-summary,.rule-detail .example,.rule-detail .caution{font-size:12px;line-height:1.75}
.rule-detail .info-visual{margin:12px 0;padding:10px;box-shadow:2px 2px 0 #e0e8d5}
.rule-detail .info-visual figcaption{margin-bottom:5px;font-size:11px;line-height:1.6}
.rule-detail .info-visual>svg{max-height:105px}
.rule-detail .visual-result{margin-top:5px;padding:5px 6px;font-size:11px;line-height:1.6}
.rule-detail .example{padding:9px 10px;margin:12px 0}
.rule-detail .example strong{font-size:11px;line-height:1.7}
.rule-detail .outline{font-size:11px;line-height:1.7;min-height:38px;padding:8px 10px;margin-top:12px;border-width:1px;box-shadow:2px 2px 0 #d5c693}

/* Shared phone geometry: 393 × 852, with reserved system areas.
   Preserve the existing palette, sprites, typography and component order. */
:root{
 --phone-width:393px;
 --phone-height:852px;
 --phone-safe-top:max(59px,env(safe-area-inset-top,0px));
 --phone-safe-bottom:max(34px,env(safe-area-inset-bottom,0px));
 --phone-header:56px;
 --phone-inset:20px;
}
.app{
 width:min(100%,var(--phone-width));max-width:var(--phone-width);
 padding:var(--phone-safe-top) 0 0!important;
 display:flex;flex-direction:column;
}
.app>main{
 flex:1 1 0;min-width:0;min-height:0!important;
 padding:0 var(--phone-inset) 24px;
 overflow-x:hidden;overflow-y:auto;scroll-padding-top:16px;
}
.app>main header{
 position:relative;top:auto;z-index:auto;isolation:isolate;
 height:var(--phone-header);min-height:var(--phone-header);
 margin:0 0 16px;padding:0;border-bottom:0;
 align-items:center;
}
/* Preserve the header surface as it scrolls with the rest of the page. */
.app>main header:before{
 content:'';position:absolute;inset:0 calc(-1 * var(--phone-inset));
 background:#fffdf6;z-index:-1;pointer-events:none;
}
.app>main header:after{display:none}
.app>main header>div{min-width:0}
.app>main header h1{margin:0;line-height:1.5}
.app>main header p{margin:0;line-height:1.6;overflow-wrap:anywhere}
.app>main .home-dashboard{padding-bottom:0}
.app>nav{
 flex:0 0 calc(49px + var(--phone-safe-bottom));
 height:calc(49px + var(--phone-safe-bottom));
 min-height:calc(49px + var(--phone-safe-bottom));
 width:100%;max-width:none;position:relative!important;
 display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
 /* Include the existing 1px divider in the 49px navigation band. */
 padding:0 12px var(--phone-safe-bottom);border-top-width:1px;
}
.app>nav>button{
 width:100%;min-width:0;height:54px;min-height:54px;
 display:grid;grid-template-rows:26px 18px;
 justify-items:center;align-content:center;gap:6px;padding:2px 0;
 /* Lower the icon, active highlight and label together in the fixed bar. */
 translate:0 8px;
}
.app>nav .nav-icon{width:44px;height:26px;display:grid;place-items:center}
.app>nav .nav-icon .pixel-icon,
.app>nav>button[data-value="퀴즈"] .pixel-icon{width:24px;height:24px}
.app>nav .nav-label{font-size:12px;line-height:18px}
.app>nav>button.selected{color:#000}
.app>nav>button.selected .nav-icon{background:transparent;box-shadow:none;color:#000}
.app>main .quiz-page .quiz-intro{
 min-height:420px;padding:24px 16px;
 display:flex;flex-direction:column;justify-content:center;gap:12px;
 text-align:center;
}
.quiz-page .quiz-intro h2{margin:0;font-size:20px;line-height:1.6}
.quiz-page .quiz-intro .sub{margin:0 0 8px;font-size:15px;line-height:1.8}
.quiz-page .quiz-intro .outline{min-height:56px;margin:0;flex-shrink:0;text-align:center;font-size:15px;line-height:1.6}
.app>main .home-dashboard header h1{font-size:24px}
.app>main .home-dashboard header p{font-size:14px;line-height:1.4}
.brand-logo{padding-bottom:0}
.brand-logo:after{display:none}
@media(max-width:599px){.app>main .home-dashboard header h1{font-size:20px}}
.app>main .kbo-tabs{
 display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;
 position:relative;top:auto;margin-bottom:16px;overflow:visible;
}
.app>main .kbo-tabs>button{
 display:grid;place-items:center;min-width:0;min-height:44px;
 padding:6px 2px;text-align:center;white-space:normal;word-break:keep-all;
}
.app>main .home-section-head{margin-top:20px;margin-bottom:16px}
.app>main :is(.card,.rookie-score,.kbo-welcome,.kbo-detail,.hall-inline-article,.collection-header,.card-draw-panel,.visual-entry){padding:16px}
.app>main :is(.list,.rookie-actions,.kbo-teams,.legend-grid,.player-card-grid){gap:12px}
.app>main .rule-row{padding:16px}
.app>main .ticket-meta,.app>main .ticket-bottom{padding-left:16px;padding-right:16px}
.app>main .ticket-content{padding:16px}
.app>main :is(.rookie-action,.feedback){padding:16px}
.app>main :is(.card,.rule-row,.rookie-ticket,.rookie-score,.kbo-body,.quiz-page,.my-learning){min-width:0;max-width:100%}
.app>main :is(h2,h3,p,.action-copy){overflow-wrap:anywhere}
.app>main .sim-card .tabs button{min-width:0;white-space:normal}
.app>main .sim-card canvas{height:auto;max-width:100%}
dialog:not(:has(.card-viewer)){
 max-height:var(--phone-reader-height,calc(100dvh - 125px));
 max-width:min(353px,var(--phone-reader-width,calc(100vw - 40px)));
 overflow-y:auto;overscroll-behavior:contain;
}
.card-viewer{padding:var(--phone-safe-top) 20px var(--phone-safe-bottom)}
.card-flipper,.card-viewer .player-card-wire.wire-large{width:min(100%,calc((100cqh - 210px)*2/3))}
@media(min-width:600px){
 .app{width:var(--phone-width);height:var(--phone-height);max-height:none;margin:0!important}
}
@media(max-width:599px){
 .app{height:var(--app-height,100dvh);max-height:var(--app-height,100dvh);margin:0 auto!important}
}

/* Readable supporting text at phone size; keep artwork and large headings intact. */
.app>main header p{font-size:12px;line-height:1.5}
.app>main :is(.rule-category,.result-label,.chip,.lookup-modes button,
 .visual-entry summary>span,.visual-links button,.home-section-head>span,
 .ticket-meta,.ticket-bottom>span,.ticket-bottom button,.home-signoff,
 .score-top,.score-top>span:last-child,.score-level,.score-total>span,
 .score-percent,.level-progress-caption,.card-reward-entry,
 .kbo-tabs>button,.kbo-kicker,.kbo-note,.kbo-footer,.kbo-source,
 .kbo-facts small,.kbo-season small,.kbo-teams small,.legend-card-top,
 .legend-card-top small,.legend-nickname,.history-item small,
 .collection-header p,.collection-count small,.collection-count>span,
 .collection-item-head,.collection-item-head>span,.collection-requirement,
 .collection-item>button,.card-draw-panel p,.card-draw-panel .primary,
 .draw-panel-footer small,.my-difficulty h2,.difficulty-options button,
 .pill-count,.my-owned-card small,.footnote,.my-player-cards .home-section-head button,
 .scenario-select,.controls>button,.sim-status strong,.rule-strip,
 .quiz-page .badge,.quiz-motion-description,.quiz-motion figcaption,
 .quiz-motion figcaption button){font-size:12px;line-height:1.75}
.app>main :is(.ticket-content p,.row-body p,.scene-hint,
 .rookie-actions .action-caption,.kbo-detail p,.hall-inline-intro,
 .hall-inline-section p,.history-item summary>span:nth-child(2)>span,
 .history-more>p,.quiz-page .option,.quiz-page .feedback p,
 .my-learning .row-body p){font-size:14px;line-height:1.8}
.app>main :is(.rookie-actions strong,.home-section-head h2,
 .kbo-season strong,.kbo-detail summary,.hall-inline-section h4,
 .collection-empty,.my-learning .chip){font-size:14px;line-height:1.7}
.app>main .row-body h3{font-size:18px;line-height:1.6;margin:4px 0 6px}
.app>main .kbo-teams strong{font-size:12px;line-height:1.6;white-space:normal;overflow-wrap:anywhere}
.app>main .card-draw-panel h3{font-size:14px;line-height:1.7}
.app>main .quiz-page .quiz-prompt{font-size:18px;line-height:1.7}
.app>main .rookie-actions .rookie-action{min-height:80px}
.app>main .rookie-score .score-bottom>.score-percent{font-size:12px;line-height:1.5}
.app>main .score-top{flex-wrap:wrap;gap:6px}
.app>main .score-bottom{flex-wrap:wrap;row-gap:6px}
.app>main .card-reward-entry{flex-wrap:wrap;row-gap:6px}
.rule-detail :is(.rule-summary,.example,.caution){font-size:14px;line-height:1.8}
.rule-detail :is(.info-visual figcaption,.visual-result,.example strong,.outline){font-size:12px;line-height:1.7}
.card-swipe-hint,.card-viewer-bottom,.mystery-label{font-size:12px;line-height:1.7}