/* Fun學奇機 2026-10-02 site-wide consistency (user-approved preview white-screen/index3+index4):
   white screens + login outer background, grey-edged white cards with soft shadows, small-radius square/rect bezel keys,
   dark-grey line icons (Tabler Icons webfont v3.48.0, MIT, see fonts/tabler-icons-LICENSE.txt). Loaded last on every page. */
/* Preview: every screen white like the login page; white cards get a light-grey edge + mid-grey soft shadow. */
:root{--wc-line:#DFE4DD;--wc-line-strong:#D3D9D1;--wc-shadow:0 1px 2px rgba(58,64,60,.07),0 6px 16px rgba(58,64,60,.12);--wc-shadow-lg:0 2px 4px rgba(58,64,60,.06),0 14px 30px rgba(58,64,60,.14);--wc-key:0 3px 0 var(--wc-line-strong),0 7px 14px rgba(58,64,60,.12)}
/* screen backgrounds */
html body.fun-portal .portal-machine>main,html body.fun-game .learning-machine>main,html body>.machine>main,html body .shell>main{background:#fff!important}
html body.fun-portal #catalog,html body.fun-portal #catalog[data-view=home],html body.fun-portal #admin{background:#fff!important}
html body.fun-game .machine-side,html body>.machine>main>aside{background:transparent!important}
/* portal cards */
html body.fun-portal .fp-door,html body.fun-portal .fp-box,html body.fun-portal .fp-shelf .fp-book-card,html body.fun-portal #category-back,html body.fun-portal .fp-bubble,html body.fun-portal .fp-chip,
html body.fun-portal .admin-side,html body.fun-portal .table-wrap,html body.fun-portal #admin .card{border:1px solid var(--wc-line)!important;box-shadow:var(--wc-shadow)!important}
html body.fun-portal .fp-door:hover,html body.fun-portal .fp-box:hover{box-shadow:0 2px 4px rgba(58,64,60,.08),0 12px 26px rgba(58,64,60,.16)!important}
html body.fun-portal .fp-zone{box-shadow:0 1px 2px rgba(58,64,60,.05),0 8px 22px rgba(58,64,60,.09)!important}
/* game rail: keys and info cards */
.fun-game .machine-nav>a,.fun-game .machine-nav>button,html body>.machine nav>*,
.fun-game .machine-side>button,.fun-game .round-actions>button,.fun-game .machine-side .actions>button,html body>.machine .actions button,html body>.machine aside button,.fun-game .machine-side button.mission,.fun-game .bottom button.mission,
html body.fp-frame .fp-back{border:1.5px solid var(--wc-line)!important;box-shadow:var(--wc-key)!important}
.fun-game .machine-nav>a:active,.fun-game .machine-side button:active,html body>.machine aside button:active{box-shadow:0 1px 0 var(--wc-line-strong),0 3px 8px rgba(58,64,60,.12)!important}
.fun-game .game-guide,html body>.machine .guide,.fun-game .machine-meters>*:not(#my-badges),html body>.machine .meters>*:not(#badge-place):not(:has(#my-badges)),html body>.machine aside>section{border:1px solid var(--wc-line)!important;box-shadow:var(--wc-shadow)!important}
/* the big learning screen */
.fun-game .machine-screen,html body>.machine .screen,html body>.machine .worksheet{border:1px solid var(--wc-line)!important;box-shadow:var(--wc-shadow-lg)!important}
html body>.machine .screen-heading{border-bottom:1px solid #EEF1ED!important}html body>.machine .screen-foot{border-top:1px solid #EEF1ED!important}
/* small white cards inside screens */
.fun-game .choice,.fun-game #target{border-color:var(--wc-line)!important;box-shadow:var(--wc-shadow)!important}
/* copyright page */
html body .shell>main{box-shadow:0 -4px 0 #6f8d0c,inset 0 5px 0 rgba(60,80,10,.14),inset 0 9px 16px rgba(50,70,10,.2),0 0 0 3px #92b315!important}

/* Preview round 2 (on top of white.css): login outer background everywhere, darker card edge + stronger shadow,
   top-right bezel keys = small-radius squares / rectangles with single dark-grey line icons (Tabler Icons font). */
@font-face{font-family:fp-icons;src:url(/shared/fonts/tabler-icons.woff2) format('woff2');font-display:block}
:root{--wc-line:#CBD2C9;--wc-line-strong:#B9C1B7;--wc-shadow:0 1px 2px rgba(50,56,52,.10),0 8px 20px rgba(50,56,52,.17);--wc-shadow-lg:0 2px 5px rgba(50,56,52,.09),0 16px 34px rgba(50,56,52,.19);--wc-key:0 3px 0 var(--wc-line-strong),0 9px 18px rgba(50,56,52,.16);
 --key-r:10px;--key-h:44px;--icon:#3F4541}
/* outer background = login page (#FAF7FF) */
html,html body,html body.fun-game,html body.fun-portal{background:#FAF7FF!important}
/* ── top-right bezel keys ── */
.learning-machine .header-controls button,.learning-machine .header-controls a,html body>.machine .header-right button,html body.fun-portal .topbar #nav .key,html body .shell header a.back,html body .cd-pill{
 border-radius:var(--key-r)!important;height:var(--key-h)!important;min-height:var(--key-h)!important;color:var(--icon)!important;box-sizing:border-box!important}
html body .fp-round-key,html body.fun-portal .topbar #nav .key{width:var(--key-h)!important;min-width:var(--key-h)!important;padding:0!important;display:inline-grid!important;place-items:center}
.learning-machine .header-controls button:not(.fp-round-key):not(.cd-toggle),html body>.machine .header-right button:not(.fp-round-key):not(.cd-toggle),html body .shell header a.back{padding:0 14px!important;display:inline-flex!important;align-items:center;gap:6px;font-size:15px!important}
html body .cd-pill{padding:0 6px 0 8px!important}
html body .cd-wrap .cd-pill>.cd-clock,html body .cd-wrap .cd-pill>.cd-toggle{height:calc(var(--key-h) - 6px)!important}
/* icons: one dark grey, line style */
.fpi::before,html body #sound.fp-round-key::before,html body #fullscreen.fp-round-key::before,html body.fun-portal .topbar #nav .key i::before,html body .cd-icon::before,html body .shell header a.back::before{font-family:fp-icons!important;font-weight:400!important;font-style:normal;line-height:1;color:var(--icon)!important;-webkit-font-smoothing:antialiased}
html body #sound.fp-round-key::before{content:"\eafc"!important;font-size:23px!important}
html body #fullscreen.fp-round-key{font-size:0!important;color:transparent!important}
html body #fullscreen.fp-round-key::before{content:"\ea28";font-size:22px}
html body #sound.fp-round-key[aria-pressed=false]::after{inset:6px!important;border-radius:50%!important}
html body .cd-icon{font-size:0!important}html body .cd-icon::before{content:"\ea70";font-size:19px}
html body .cd-seg.on,html body .cd-colon circle{fill:var(--icon)!important}html body .cd-seg{fill:#3F454114!important}
html body .cd-toggle{color:var(--icon)!important}html body .cd-toggle[aria-checked=true] .cd-track{background:var(--icon)!important;border-color:var(--icon)!important}html body .cd-track{border-color:#8A918C!important;background:#D9DED8!important}html body .cd-knob{border-color:#8A918C!important}
html body.fun-portal .topbar #nav .key i{font-size:0!important;display:block;line-height:0}html body.fun-portal .topbar #nav .key i::before{font-size:22px}
html body.fun-portal #home-btn i::before{content:"\eac1"}html body.fun-portal #admin-btn i::before{content:"\ecf7"}html body.fun-portal #password-btn i::before{content:"\eac7"}html body.fun-portal #logout i::before{content:"\eba8"}
html body.fun-portal .topbar #nav .key span{display:none!important}
html body .shell header a.back{font-size:0!important}html body .shell header a.back::before{content:"\eac1";font-size:21px}html body .shell header a.back::after{content:"回首頁";font:700 15px BrandHuninn,'Microsoft JhengHei',sans-serif;color:var(--icon)}
@media(max-width:1100px),(max-height:700px){:root{--key-h:38px}html body #sound.fp-round-key::before{font-size:20px!important}html body #fullscreen.fp-round-key::before{font-size:19px}}
/* darker card edge, stronger shadow (variables used by white.css) */
html body.fun-portal .fp-door:hover,html body.fun-portal .fp-box:hover{box-shadow:0 2px 5px rgba(50,56,52,.10),0 16px 32px rgba(50,56,52,.21)!important}
html body.fun-portal .fp-zone{box-shadow:0 1px 3px rgba(50,56,52,.07),0 10px 26px rgba(50,56,52,.12)!important}
/* centre the game header's right-hand group in the 60px green bezel (header box sits 6px/5px lower than the bezel centre) */
.learning-machine .header-controls,html body>.machine .header-right{translate:0 -6px}
@media(max-width:1100px),(max-height:700px){.learning-machine .header-controls,html body>.machine .header-right{translate:0 -5px}}
/* icon always dead-centre inside its key, whatever the game's own button rules say */
html body .fp-round-key{display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;vertical-align:middle}
html body .fp-round-key::before{display:block;line-height:1!important;margin:0!important}
.learning-machine .header-controls button,html body>.machine .header-right button{line-height:1!important}
html body .cd-toggle,html body .cd-toggle .cd-toggle-text,.learning-machine .header-controls button,html body>.machine .header-right button{color:var(--icon)!important}

/* Preview round 3 (on top of white.css + white2.css) */
:root{--wc-line:#B7BFB5;--wc-line-strong:#A5AEA3;--wc-shadow:0 1px 3px rgba(45,50,47,.13),0 10px 22px rgba(45,50,47,.21);--wc-shadow-lg:0 2px 6px rgba(45,50,47,.12),0 18px 38px rgba(45,50,47,.23);--wc-key:0 3px 0 var(--wc-line-strong),0 10px 20px rgba(45,50,47,.19);--mo-green:#6B9C09}
/* timer switch ON = ㄇ monster green */
html body .cd-toggle[aria-checked=true] .cd-track{background:var(--mo-green)!important;border-color:#557D07!important}
/* top bar text next to 阿桀: dark grey (home only shows it; category/admin titles removed) */
html body.fun-portal .topbar .where{color:#3F4541!important;text-shadow:none!important}
/* back buttons: line-icon arrow + 回上一頁 */
.fpi-back::before,html body.fp-frame .fp-back::before{font-family:fp-icons;content:"\ea19";font-size:19px;line-height:1;margin-right:6px;color:#3F4541;font-weight:400}
html body.fp-frame .fp-back{display:inline-flex!important;align-items:center;justify-content:center}
html body.fun-portal #category-back{display:inline-flex!important;align-items:center;gap:0;color:#3F4541!important}
/* teacher dashboard number cards + search box */
html body.fun-portal #admin-summary>*{background:#fff!important;border:1px solid var(--wc-line)!important;box-shadow:var(--wc-shadow)!important;border-radius:16px!important}
html body.fun-portal #admin #search{border:1.5px solid var(--wc-line)!important}
html body.fun-portal .admin-side button{border:1px solid var(--wc-line)!important}
html body.fun-portal #records-btn i::before{content:"\ebea"}
html body.fun-portal #class-btn i::before{content:"\ebf2"}
html body.fun-portal .topbar #nav .key[hidden]{display:none!important}
html body.fun-portal .class-entry{display:block;margin-top:10px;padding:12px 14px;border-radius:14px;background:#FFF0C4;color:#8A5A2A;font-weight:900;text-align:center;text-decoration:none;box-shadow:0 3px 0 #E8D29A}html body.fun-portal .class-entry:hover{filter:brightness(1.03)}