/* =========================================
   FRACTION PIZZA MASTER — MOBILE FIRST UI
   ========================================= */
:root{--cream:#fff8e8;--paper:#fffdf7;--ink:#453126;--muted:#7c6659;--tomato:#d9553f;--tomato-dark:#a83b2d;--basil:#3d8d5c;--cheese:#ffd66d;--crust:#d89443;--line:#ead8b8;--sky:#dff4ee;--shadow:0 14px 32px rgba(94,58,32,.13);--text-scale:1}*{box-sizing:border-box}html{background:#f7ead3;font-size:calc(16px * var(--text-scale))}body{min-width:320px;min-height:100vh;margin:0;color:var(--ink);background:radial-gradient(circle at 50% -10%,#fff9e9,#f7ead5 62%,#efdcc0);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Noto Sans Thai",sans-serif}button,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #1767a8;outline-offset:3px}.app-shell{width:min(1120px,100%);min-height:100vh;margin:auto;padding:10px 9px 25px}.game-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;min-height:58px}.back-link{display:inline-flex;align-items:center;gap:5px;min-width:44px;min-height:44px;color:#725444;text-decoration:none;font-size:.78rem;font-weight:800}.back-link span{display:none}.brand{display:flex;align-items:center;justify-content:center;gap:7px}.brand>span{font-size:1.35rem}.brand h1{margin:0;font-family:Georgia,"Noto Serif Thai",serif;font-size:1rem}.brand p{margin:0;color:var(--muted);font-size:.58rem}.header-tools{display:flex;gap:3px}.header-tools button{width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:9px;color:#62483b;background:#fffaf0;font-size:.7rem;font-weight:900}.round-hud{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;order:4}.round-hud[hidden]{display:none}.round-hud>div{padding:5px;border:1px solid var(--line);border-radius:8px;background:rgba(255,253,247,.8);text-align:center}.round-hud span{display:block;color:#8d7567;font-size:.52rem;font-weight:700}.round-hud strong{font-size:.77rem;font-variant-numeric:tabular-nums}.round-hud>div.timer-danger{border-color:#e16d61;background:#fff0ec}.screen{display:none;animation:screen-in .25s ease}.screen.active{display:block}.eyebrow{margin:0 0 5px;color:var(--tomato);font-size:.63rem;font-weight:900;letter-spacing:.1em}.primary-button,.secondary-button{min-height:48px;padding:11px 16px;border-radius:12px;font-weight:900}.primary-button{border:1px solid #b94231;color:#fff;background:linear-gradient(135deg,#e66d4f,#c94735);box-shadow:0 7px 16px rgba(190,67,45,.24)}.secondary-button{border:1px solid #d2b789;color:#654936;background:#fff9e9}
/* Home */.home-screen{padding:25px 13px;text-align:center}.home-art{position:relative;width:155px;height:145px;margin:6px auto}.pizza-logo{display:grid;width:132px;height:132px;margin:auto;place-items:center;border:8px solid #c87734;border-radius:50%;background:radial-gradient(circle,#f5e28e 0 63%,#dfa34e 64%);box-shadow:0 15px 24px rgba(128,72,28,.2);animation:pizza-float 3s ease-in-out infinite}.pizza-logo span{font-size:4rem}.steam{position:absolute;top:-5px;width:18px;height:48px;border-left:4px solid rgba(145,118,89,.35);border-radius:50%;animation:steam-rise 2.2s ease-in-out infinite}.steam-one{left:52px}.steam-two{right:41px;animation-delay:-1s}.home-screen h2{margin:7px 0 10px;font-family:Georgia,"Noto Serif Thai",serif;font-size:clamp(1.55rem,7vw,2.5rem);line-height:1.2}.home-screen h2 em{color:var(--tomato);font-style:normal}.home-screen>p:not(.eyebrow){max-width:570px;margin:0 auto;color:var(--muted);font-size:.9rem;line-height:1.65}.home-actions{display:grid;gap:9px;max-width:420px;margin:20px auto 0}.home-actions .text-button{min-height:44px;border:0;color:#765747;background:transparent;font-weight:800}.privacy-note{display:flex;align-items:flex-start;gap:9px;max-width:550px;margin:22px auto 0;padding:11px;border:1px solid #add8c0;border-radius:12px;color:#315f49;background:#effaf2;text-align:left}.privacy-note span{font-size:1.2rem}.privacy-note p{margin:0;font-size:.68rem;line-height:1.5}.privacy-note strong{display:block}
/* Lessons */.lesson-screen{padding:18px 5px}.screen-heading{display:flex;align-items:flex-start;gap:12px;margin-bottom:17px}.screen-heading .back-screen{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:10px;color:#735647;background:#fff9ec;font-size:.7rem}.screen-heading h2{margin:0;font-family:Georgia,"Noto Serif Thai",serif;font-size:1.4rem}.screen-heading p:last-child{margin:3px 0 0;color:var(--muted);font-size:.72rem}.lesson-grid{display:grid;gap:10px}.lesson-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;width:100%;min-height:90px;padding:13px;border:1px solid var(--line);border-radius:15px;color:var(--ink);background:linear-gradient(145deg,#fffdf8,#fff3d9);text-align:left;box-shadow:0 7px 16px rgba(102,62,32,.07);transition:.16s}.lesson-card:hover{border-color:#d99d57;transform:translateY(-2px)}.lesson-icon{display:grid;width:52px;height:52px;place-items:center;border-radius:14px;background:#ffeab8;font-size:1.65rem}.lesson-card h3{margin:0;font-size:.92rem}.lesson-card p{margin:3px 0 0;color:var(--muted);font-size:.65rem;line-height:1.4}.lesson-card small{padding:4px 7px;border-radius:99px;color:#286747;background:#e8f7ec;font-size:.55rem;font-weight:800}
/* Restaurant and game */.game-screen{padding-top:9px}.restaurant-scene{position:relative;display:flex;align-items:center;gap:9px;min-height:112px;padding:11px 50px 11px 8px;border:1px solid #cce2d8;border-radius:16px;background:linear-gradient(155deg,#ecfaf4,#d7eee7);overflow:hidden}.restaurant-scene::after{position:absolute;right:-18px;bottom:-31px;width:96px;height:96px;border-radius:50%;content:"";background:rgba(78,145,107,.09)}.customer{position:relative;flex:0 0 58px;height:78px}.customer-face{position:absolute;z-index:2;top:0;left:7px;display:grid;width:46px;height:46px;place-items:center;border:2px solid #cb8e67;border-radius:50%;background:#ffd2ae;font-size:1.35rem}.customer-body{position:absolute;bottom:0;left:0;width:60px;height:47px;border-radius:50% 50% 7px 7px;background:#5c8ca5}.order-bubble{position:relative;z-index:2}.order-bubble p{margin:0;color:#4b7867;font-size:.61rem;font-weight:800}.order-bubble h2{margin:3px 0;font-family:Georgia,"Noto Serif Thai",serif;font-size:clamp(1.1rem,4.5vw,1.55rem)}.order-bubble p:last-child{color:#688477;font-size:.61rem;font-weight:500}.restaurant-scene #pause-button{position:absolute;z-index:3;top:9px;right:8px;min-width:40px;height:40px;border:1px solid #bad6c9;border-radius:9px;color:#3f6b5b;background:#f6fffa;font-size:.73rem;font-weight:800}.restaurant-scene #pause-button span{display:none}.kitchen-counter{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(#fffdf8,#fff4dd);box-shadow:var(--shadow)}.visual-area{display:flex;align-items:center;justify-content:center;gap:12px;min-height:282px;overflow:auto}.pizza-wrap{position:relative;flex:0 0 auto;text-align:center}.pizza-wrap h3{margin:0 0 6px;color:#745344;font-size:.7rem}.pizza-svg{width:min(250px,72vw);height:auto;overflow:visible;filter:drop-shadow(0 12px 9px rgba(111,66,27,.2));transform:rotate(-4deg)}.pizza-slice{stroke:#a86231;stroke-width:2;fill:#f7d96b;cursor:pointer;transition:filter .15s,transform .15s;transform-box:fill-box;transform-origin:center}.pizza-slice:nth-child(3n){fill:#f2cc5c}.pizza-slice:hover,.pizza-slice:focus{filter:brightness(1.06)}.pizza-slice.selected,.pizza-slice.locked-selected{fill:#e35c41;stroke:#923528;filter:drop-shadow(0 0 4px rgba(207,59,39,.35))}.pizza-slice.selected{transform:scale(1.045)}.pizza-slice.correct{fill:#52ad72;stroke:#276a42}.pizza-slice.incorrect{fill:#e7924f;stroke:#a74c2f}.pizza-crust{fill:none;stroke:#cd8339;stroke-width:9;pointer-events:none}.pizza-center{fill:#f9e694;pointer-events:none}.pizza-topping{fill:#b9362f;stroke:#fff1b7;stroke-width:1;pointer-events:none}.fraction-label{display:inline-flex;align-items:center;gap:4px;margin-top:5px;padding:5px 9px;border:1px solid #e1c99e;border-radius:99px;background:#fff9ea;font-family:Georgia,serif;font-weight:900}.fraction-stack{display:inline-grid;line-height:1;text-align:center}.fraction-stack span:first-child{padding-bottom:2px;border-bottom:2px solid currentColor}.fraction-stack span:last-child{padding-top:2px}.answer-area{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:0}.answer-choice{min-width:72px;min-height:50px;padding:8px 12px;border:2px solid #dec79e;border-radius:12px;color:#634738;background:#fffdf8;font-family:Georgia,serif;font-size:1rem;font-weight:900}.answer-choice.selected{border-color:#d7523e;color:#b63f31;background:#fff0e9;box-shadow:0 0 0 3px rgba(215,82,62,.12)}.pizza-option{padding:8px;border:2px solid transparent;border-radius:14px;background:#fffaf0}.pizza-option.selected{border-color:var(--tomato);background:#fff0e9}.pizza-option .pizza-svg{width:min(140px,35vw)}.comparison-symbols .answer-choice{font-size:1.35rem}.feedback{display:flex;align-items:center;gap:8px;min-height:52px;margin-top:10px;padding:9px 10px;border:1px solid #ead6b3;border-radius:11px;background:#fffaf0}.feedback>span{font-size:1.25rem}.feedback p{margin:0;color:#70584a;font-size:.68rem;line-height:1.45}.feedback.success{border-color:#9fd0af;background:#effaf2}.feedback.error{border-color:#e8b2a7;background:#fff1ed}.game-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.game-actions button{min-height:48px;border:1px solid #d9c09a;border-radius:11px;color:#684b3b;background:#fff9e9;font-weight:800}.game-actions .serve-button{grid-column:1/-1;border-color:#bc4432;color:#fff;background:linear-gradient(135deg,#e46b4e,#c94735);font-size:.95rem}.game-actions button:disabled{cursor:not-allowed;opacity:.55}
/* Results */.result-screen{padding:28px 8px;text-align:center}.result-medal{display:grid;width:86px;height:86px;margin:auto;place-items:center;border:5px solid #efc151;border-radius:50%;background:#fff2ab;box-shadow:0 12px 25px rgba(135,85,29,.18);font-size:2.6rem}.result-screen h2{margin:7px 0;font-family:Georgia,"Noto Serif Thai",serif;font-size:1.7rem}.result-privacy{margin:0;color:var(--muted);font-size:.67rem}.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-width:520px;margin:17px auto}.result-grid>div{padding:11px;border:1px solid var(--line);border-radius:11px;background:#fffaf0}.result-grid span{display:block;color:#887064;font-size:.61rem}.result-grid strong{font-size:1.05rem}.result-stars{color:#e4aa2f;font-size:2rem;letter-spacing:4px}.review-box{display:none;max-width:620px;margin:13px auto;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fffaf0;text-align:left}.review-box.visible{display:block}.review-item{padding:8px 0;border-bottom:1px solid #eadcc3}.review-item:last-child{border:0}.review-item b{display:block;font-size:.72rem}.review-item p{margin:3px 0 0;color:var(--muted);font-size:.65rem;line-height:1.4}.result-actions{display:grid;gap:8px;max-width:420px;margin:17px auto}.result-actions a{display:grid;min-height:46px;place-items:center;color:#6e5141;text-decoration:none;font-weight:800}
/* Modal */.modal[hidden]{display:none!important}.modal{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:16px;opacity:0;pointer-events:none;background:rgba(65,42,29,.55);backdrop-filter:blur(5px);transition:opacity .2s}.modal.visible{opacity:1;pointer-events:auto}.modal-card{width:min(430px,100%);padding:24px 18px;border:1px solid #dfc394;border-radius:19px;background:linear-gradient(145deg,#fffdf5,#fff0d4);box-shadow:0 24px 60px rgba(72,43,24,.35);text-align:center}.modal-icon{font-size:2.8rem}.modal-card h2{margin:4px 0 9px;font-family:Georgia,"Noto Serif Thai",serif}.modal-card p,.modal-card li{color:#715b4e;font-size:.75rem;line-height:1.6}.modal-card ol{text-align:left}.modal-actions{display:grid;gap:7px;margin-top:15px}.modal-actions button{min-height:46px;border:1px solid #c54634;border-radius:10px;color:#fff;background:#d85b45;font-weight:900}.modal-actions #modal-secondary{border-color:#d5bd97;color:#6e5141;background:#fff9eb}
@keyframes screen-in{from{opacity:0;transform:translateY(6px)}}@keyframes pizza-float{50%{transform:translateY(-6px) rotate(3deg)}}@keyframes steam-rise{50%{opacity:.35;transform:translateY(-12px) scaleX(1.3)}}.motion-off *,.motion-off *::before,.motion-off *::after{animation:none!important;transition:none!important}@media(min-width:640px){.app-shell{padding:14px 18px 30px}.game-header{grid-template-columns:150px auto 1fr auto}.back-link span{display:inline}.brand{justify-content:flex-start}.round-hud{grid-column:auto;grid-row:auto;order:initial}.home-screen{padding-top:40px}.lesson-grid{grid-template-columns:repeat(2,1fr)}.restaurant-scene{padding:14px 75px 14px 14px}.customer{flex-basis:80px}.customer-face{width:58px;height:58px;font-size:1.7rem}.customer-body{width:75px;height:48px}.restaurant-scene #pause-button span{display:inline}.visual-area{min-height:350px}.pizza-svg{width:290px}.game-actions{grid-template-columns:140px 140px 1fr}.game-actions .serve-button{grid-column:auto}.result-actions{grid-template-columns:1fr 1fr}.result-actions a{grid-column:1/-1}.modal-actions{grid-template-columns:1fr 1fr}.modal-actions button:only-child{grid-column:1/-1}}@media(min-width:900px){.game-screen{max-width:880px;margin:auto}.lesson-screen{max-width:900px;margin:auto}.home-art{width:180px;height:165px}.pizza-logo{width:150px;height:150px}.visual-area{gap:30px}.pizza-option .pizza-svg{width:175px}.result-grid{grid-template-columns:repeat(4,1fr)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}