@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{--navy:#0d2135;--blue:#187bbf;--teal:#168e8e;--ink:#142b3a;--muted:#6c7e8d;--paper:#f5f8fa;--white:#fff;--line:#e1e9ed}*{box-sizing:border-box}body{margin:0;font-family:Outfit,'IBM Plex Sans Thai',sans-serif;color:var(--ink);background:var(--paper)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}.container{width:min(1170px,calc(100% - 40px));margin:auto}.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.nav{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:76px}.brand{font-weight:800;letter-spacing:.065em;display:flex;align-items:center;gap:10px;color:var(--navy);white-space:nowrap}.brand b{color:var(--teal)}.brand-mark{width:36px;height:36px;background:var(--navy);color:white;border-radius:10px;display:grid;place-items:center;font-size:24px}.links,.nav-actions,.actions{display:flex;align-items:center;gap:18px}.links a{font-size:14px;font-weight:600;color:#516677}.links a:hover,.text-link,a:hover{color:var(--blue)}.nav-actions{gap:8px}.page{min-height:calc(100vh - 154px)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 19px;border-radius:10px;font-weight:700;border:1px solid transparent;transition:.15s;white-space:nowrap}.btn:hover{transform:translateY(-1px)}.btn-primary{background:#177fba;color:white;box-shadow:0 6px 16px #177fba1b}.btn-primary:hover{background:#11689d;color:white}.btn-outline{border-color:#c8d7df;color:var(--navy);background:white}.btn-ghost{background:transparent}.btn-sm{padding:9px 12px;font-size:13px}.btn-full{width:100%}.hero{display:grid;grid-template-columns:1fr .92fr;align-items:center;gap:65px;padding:78px 0 60px}.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:800;color:var(--teal);margin-bottom:14px}.hero h1,.auth-side h1{font-size:clamp(42px,5.3vw,78px);line-height:1.13;letter-spacing:-.045em;margin:0 0 22px;color:var(--navy)}.hero h1 em,.auth-side h1 em{font-style:normal;color:var(--blue)}.hero p,.auth-side p{font-size:17px;color:#687e8f;line-height:1.85;max-width:480px}.hero .actions{margin-top:26px}.hero-note{color:#95a7b3;font-size:12px;margin-top:35px}.math-art{background:linear-gradient(145deg,#0e2a43,#17445b);border-radius:23px;padding:26px;box-shadow:0 25px 70px #0d34432a;color:#b2ccd8;transform:rotate(-2deg)}.art-label,.art-bottom{font-size:11px;letter-spacing:.18em;font-weight:800;display:flex;justify-content:space-between}.art-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:22px 0}.tile{aspect-ratio:1;background:#f0e8d8;color:#213948;border-radius:9px;display:grid;place-items:center;font-size:clamp(23px,3.7vw,48px);font-weight:800;box-shadow:inset 0 -4px 0 #d4c4a9}.tile.accent{background:#e5a763}.stats{display:grid;grid-template-columns:repeat(3,1fr);background:white;border:1px solid var(--line);border-radius:16px;padding:22px 12px}.stats div{text-align:center;border-right:1px solid var(--line)}.stats div:last-child{border:0}.stats strong{display:block;color:var(--navy);font-size:28px}.stats span,.muted{color:var(--muted)}.stats span{font-size:13px}.section{margin:70px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:34px 0 24px}.section-head h1,.section-head h2{margin:0;color:var(--navy);font-size:32px}.section-head p{margin-bottom:0}.text-link{font-weight:700;color:var(--blue);font-size:14px}.panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 30px #17394b06}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:16px 22px;border-bottom:1px solid var(--line)}th{color:#718695;font-size:12px;letter-spacing:.07em;text-transform:uppercase;background:#fafcfd}td{font-size:14px}tr:last-child td{border-bottom:0}.rank{color:var(--teal);font-weight:800}.footer{border-top:1px solid var(--line);background:white}.foot{display:flex;justify-content:space-between;padding:24px 0;color:#8c9da8;font-size:12px}.auth-wrap{display:grid;grid-template-columns:.9fr 1fr;gap:80px;align-items:center;max-width:1030px;margin:65px auto}.auth-side{align-self:start;padding-top:64px}.auth-side h1{font-size:clamp(38px,4.2vw,59px)}.auth-card{padding:35px}.auth-card h2{margin:0;color:var(--navy);font-size:27px}.auth-card p{margin:8px 0 24px}.form-grid{display:grid;gap:17px;margin-top:21px}.form-grid label{font-size:13px;font-weight:700;color:#31495a;display:grid;gap:7px}.form-grid input:not([type=checkbox]){display:block;width:100%;padding:12px 13px;border:1px solid #d6e1e7;border-radius:9px;background:#fbfcfd;outline:none;min-height:45px}.form-grid input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #168ac014}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid .checkbox{display:flex;align-items:center;font-weight:500}.auth-bottom{text-align:center;font-size:13px}.auth-bottom a{color:var(--blue);font-weight:800}.alert{padding:13px 16px;border-radius:9px;margin:14px 0;font-size:14px}.alert-error{background:#fff2f0;color:#9e3131;border:1px solid #f5d1cd}.alert-success{background:#e9f8ef;color:#247b51;border:1px solid #cae8d5}.profile-layout{display:grid;grid-template-columns:290px 1fr;gap:22px;margin:25px 0 70px}.profile-card{text-align:center;padding:30px 26px}.avatar{width:90px;height:90px;display:grid;place-items:center;margin:auto auto 15px;background:linear-gradient(135deg,#1a83bc,#16a6a2);color:white;border-radius:24px;font-weight:800;font-size:40px}.profile-card h2{margin:5px 0}.pill{display:inline-block;background:#e8f5f7;color:#137b89;border-radius:30px;padding:6px 15px;margin-top:18px;font-weight:700;font-size:12px}.profile-data{margin-top:25px;border-top:1px solid var(--line);text-align:left}.profile-data div{display:flex;justify-content:space-between;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);font-size:13px}.profile-data span{color:var(--muted)}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.metric{padding:24px}.metric span,.metric small{display:block;color:var(--muted);font-size:12px}.metric strong{display:block;font-size:38px;color:var(--navy);margin:9px 0}.section-panel{padding:25px;margin-top:20px}.section-panel h2{font-size:21px;margin:0 0 22px}.result-counters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.result-counters div{background:#f5f9fb;border-radius:11px;text-align:center;padding:18px}.result-counters b{display:block;font-size:25px}.result-counters span{font-size:12px;color:var(--muted)}.empty-state{text-align:center;padding:32px 12px;color:#78909e}.empty-state strong{color:#405c6d}.empty-state p{font-size:13px}.narrow{max-width:650px;margin:50px auto 80px}.edit-card{padding:32px}.rule-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:28px 0 70px}.rule-card{padding:30px}.rule-number{color:var(--teal);font-weight:800}.rule-card h2{font-size:21px}.rule-card p{color:var(--muted);line-height:1.8}.small{font-size:12px}@media(max-width:1000px){.links{display:none}.hero{gap:30px}.auth-wrap{gap:32px}}@media(max-width:720px){.container{width:min(100% - 26px,1170px)}.nav{min-height:65px}.brand{font-size:13px}.brand-mark{width:30px;height:30px}.hide-mobile{display:none}.btn-sm{padding:8px;font-size:12px}.hero{grid-template-columns:1fr;padding:48px 0 35px}.hero h1{font-size:49px}.math-art{max-width:470px;width:100%;margin:auto;transform:none}.stats strong{font-size:21px}.stats span{font-size:11px}.stats{padding:16px 3px}.section{margin:46px 0}.section-head h1,.section-head h2{font-size:26px}.auth-wrap{grid-template-columns:1fr;margin:35px auto;gap:18px}.auth-side{padding:0}.auth-side h1{font-size:36px}.auth-side p{font-size:14px}.auth-card{padding:24px}.two-cols{grid-template-columns:1fr}.profile-layout{grid-template-columns:1fr}.metric{padding:14px}.metric strong{font-size:27px}.metric-grid{gap:8px}.foot{flex-direction:column;gap:5px}.rule-grid{grid-template-columns:1fr}}
/* Phase 2 board */
.amath-shell{--cell:min(4.1vw,37px);border:1px solid #dbe6ed;border-radius:20px;padding:12px;background:#f8fafc}.amath-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}.amath-score{font-weight:800;background:white;padding:9px 12px;border-radius:12px}.amath-status{font-weight:700;color:#176b79}.amath-game{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px}.amath-board-wrap{min-width:0;display:flex;align-items:flex-start;justify-content:center;overflow:auto}.amath-board{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));width:min(100%,min(78vh,780px));aspect-ratio:1;gap:2px;padding:5px;border-radius:9px;background:#152f46;touch-action:pan-x pan-y}.amath-cell{min-width:0;min-height:0;border:0;border-radius:3px;background:#e7f0ed;position:relative;display:flex;align-items:center;justify-content:center;color:#234;font-size:clamp(7px,1vw,11px);font-weight:800;cursor:pointer;padding:0}.amath-cell[data-bonus=TE]{background:#f1adac}.amath-cell[data-bonus=DE]{background:#f7dfa3}.amath-cell[data-bonus=TP]{background:#a8d8e9}.amath-cell[data-bonus=DP]{background:#f8ccad}.amath-cell.pending{outline:2px solid #027f74;outline-offset:-2px}.amath-tile{width:93%;height:91%;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 2px 2px #0002;border:1px solid #c1ac83;border-radius:4px;background:#fdf4dc;color:#182c3f;font-weight:800;font-size:clamp(9px,1.35vw,20px);user-select:none;touch-action:none}.amath-tile small{position:absolute;bottom:1px;right:2px;font-size:8px}.amath-rack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:10px 0}.amath-rack .amath-tile{min-height:48px;width:100%;cursor:pointer}.amath-rack .amath-tile.selected{outline:3px solid #00998b}.amath-side{display:flex;flex-direction:column;gap:12px}.amath-side-card{background:white;border:1px solid #e0e9ef;border-radius:16px;padding:15px}.amath-side-card h2{font-size:16px;margin:0 0 8px}.amath-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px}.amath-buttons button:first-child{grid-column:span 2}.amath-feedback{min-height:20px;color:#176b79;font-size:13px}.amath-feedback.error{color:#bc3b30}.amath-choices{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:10px 0}.amath-choices select{padding:9px;border-radius:8px;border:1px solid #ccd6df}.amath-legend{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:12px;font-size:11px}.amath-moves{font-size:12px;max-height:230px;overflow:auto}.amath-moves div{padding:5px 0;border-bottom:1px solid #e6edf0}.board-toolbar{display:flex;gap:8px}.amath-shell:fullscreen{background:#f8fafc;overflow:auto;display:flex;flex-direction:column}.amath-shell:fullscreen .amath-game{flex:1}.amath-shell:fullscreen .amath-board{width:min(calc(100vh - 125px),calc(100vw - 350px))}@media(max-width:950px){.amath-game{grid-template-columns:1fr}.amath-board{width:min(100%,min(84vh,700px))}.amath-rack{grid-template-columns:repeat(8,minmax(0,1fr))}.amath-rack .amath-tile{min-height:40px}.amath-shell:fullscreen .amath-board{width:min(calc(100vw - 25px),calc(100vh - 400px))}}@media(max-width:520px){.amath-shell{padding:5px}.amath-board{gap:1px;padding:2px;width:100%}.amath-cell{font-size:6px}.amath-tile{font-size:10px}.amath-tile small{font-size:6px}.amath-rack{gap:3px}.amath-side-card{padding:10px}.amath-score{font-size:12px;padding:6px}}
/* Phase 3 Lobby / online */
.room-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #e2e8f0}
#waiting-room{margin-bottom:20px}#amath-app:fullscreen{padding:12px;background:#f3f6fa;overflow:auto}#amath-app:fullscreen .amath-board{width:min(90vh,85vw);height:min(90vh,85vw)}
#clock-line{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.02em}