:root{--cream: oklch(97% .012 78);--cream-dark: oklch(93% .018 72);--surface: oklch(99.5% .005 78);--border: oklch(88% .022 75);--felt: oklch(24% .06 250);--felt-light: oklch(30% .055 248);--felt-border: oklch(18% .045 250);--gold: oklch(66% .13 65);--gold-light: oklch(80% .1 65);--red: oklch(50% .18 25);--text: oklch(18% .015 72);--text-muted: oklch(52% .02 72);--text-on-felt: oklch(92% .02 75);--shadow-sm: 0 1px 4px rgba(0, 0, 0, .08);--shadow-md: 0 4px 16px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .14);--radius: 12px;--font-ui: "Plus Jakarta Sans", sans-serif;--nav-h: 60px;--tile-w: clamp(20px, calc((100vw - 59px) / 14), 48px);--tile-h: clamp(28px, calc((100vw - 59px) / 14 * 1.375), 66px);--sat: env(safe-area-inset-top, 0px);--sab: env(safe-area-inset-bottom, 0px);--sal: env(safe-area-inset-left, 0px);--sar: env(safe-area-inset-right, 0px)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow-x:hidden}body{font-family:var(--font-ui);background:var(--cream);color:var(--text);-webkit-font-smoothing:antialiased}#root{min-height:100vh;display:flex;flex-direction:column}button{font-family:var(--font-ui);cursor:pointer;border:none;outline:none}input,select{font-family:var(--font-ui)}.mj-tile{position:relative;display:flex;align-items:center;justify-content:center;width:var(--tile-w);height:var(--tile-h);background:linear-gradient(160deg,#fffff8,#f7f1df);border:1.5px solid #d2c8a6;border-radius:5px;box-shadow:inset 0 1.5px #ffffffeb,inset -1px -1.5px #0000000d,3px 5px #b5aa8a,3px 5px 8px #00000038;flex-shrink:0;transition:transform .12s ease,box-shadow .12s ease;-webkit-user-select:none;user-select:none}.mj-tile-face{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.mj-tile:hover{transform:translateY(-5px);box-shadow:inset 0 1.5px #ffffffeb,3px 9px #b5aa8a,3px 9px 12px #00000042}.mj-tile-selected{transform:translateY(-12px)!important;border-color:var(--gold)!important;box-shadow:inset 0 1.5px #ffffffeb,3px 14px 0 var(--gold),3px 14px 16px #0000004d!important}.mj-tile-back{background:repeating-linear-gradient(135deg,#1b4a2e 0,#1b4a2e 5px,#133820 5px,#133820 10px);border:1.5px solid #0f2c1a;box-shadow:inset 0 1px #ffffff14,3px 5px #0a1f12,3px 5px 8px #00000061}.mj-tile-small{--tile-w: clamp(15px, calc((100vw - 59px) / 14 * .75), 36px);--tile-h: clamp(21px, calc((100vw - 59px) / 14 * .75 * 1.375), 50px);border-radius:4px}.mj-tile-tiny{--tile-w: clamp(12px, calc((100vw - 59px) / 14 * .54), 26px);--tile-h: clamp(16px, calc((100vw - 59px) / 14 * .54 * 1.375), 36px);border-radius:3px;font-size:.72em}.mj-tile-small:hover{transform:translateY(-3px)}.mj-tile-tiny:hover{transform:translateY(-2px)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 20px;border-radius:8px;font-weight:600;font-size:14px;transition:all .15s ease;cursor:pointer;white-space:nowrap}.btn-primary{background:var(--felt);color:#fff;box-shadow:0 2px 8px #0000002e}.btn-primary:hover{background:var(--felt-light);transform:translateY(-1px);box-shadow:0 4px 12px #00000038}.btn-ghost{background:transparent;color:var(--text);border:1.5px solid var(--border)}.btn-ghost:hover{background:var(--cream-dark)}.btn-large{padding:13px 32px;font-size:16px;border-radius:10px}.btn-sm{padding:6px 14px;font-size:13px;border-radius:6px}.btn-action{background:#007e9a;background:oklch(55% .15 220);color:#fff;box-shadow:0 2px 8px #0000002e}.btn-action:hover{background:#006f87;background:oklch(50% .15 220)}.btn-win{background:linear-gradient(135deg,#b91c1c,#dc2626);color:#fff;box-shadow:0 3px 12px #b91c1c66;animation:pulse-win 1.2s ease-in-out infinite}@keyframes pulse-win{0%,to{box-shadow:0 3px 12px #b91c1c66}50%{box-shadow:0 3px 24px #b91c1ca6}}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}.room-card{transition:box-shadow .15s,transform .15s}.room-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.input{width:100%;padding:10px 14px;border-radius:8px;border:1.5px solid var(--border);background:var(--cream);font-size:14px;color:var(--text);transition:border-color .15s;-webkit-appearance:none;-moz-appearance:none;appearance:none}.input:focus{outline:none;border-color:var(--gold)}.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.form-group label{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.app-nav{position:sticky;top:0;z-index:50;height:calc(var(--nav-h) + var(--sat));padding-top:var(--sat);background:var(--surface);border-bottom:1.5px solid var(--border);display:flex;align-items:center;padding-left:calc(24px + var(--sal));padding-right:calc(24px + var(--sar));gap:0;box-shadow:0 1px 8px #0000000f}.nav-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:var(--text);flex-shrink:0;cursor:pointer}.nav-logo-icon{width:34px;height:34px;border-radius:8px;background:var(--felt);display:flex;align-items:center;justify-content:center;font-size:15px;color:#fde68a;font-family:var(--font-ui);font-weight:700}.nav-tabs{display:flex;gap:2px;margin:0 24px;flex:1;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.nav-tabs::-webkit-scrollbar{display:none}.nav-tab{padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;color:var(--text-muted);background:transparent;transition:all .15s;border:none;cursor:pointer;font-family:var(--font-ui)}.nav-tab:hover{background:var(--cream);color:var(--text)}.nav-tab.active{background:var(--cream-dark);color:var(--text);font-weight:600}.nav-user{display:flex;align-items:center;gap:10px;margin-left:auto}.nav-points{font-size:13px;font-weight:600;color:var(--gold)}.screen{max-width:860px;margin:0 auto;width:100%;padding:28px 24px 80px}.screen-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:16px}.screen-title{font-size:26px;font-weight:700;letter-spacing:-.02em}.screen-subtitle{font-size:14px;color:var(--text-muted);margin-top:4px}.tab-bar{display:flex;gap:4px;margin-bottom:20px;flex-wrap:wrap}.tab-btn{padding:8px 18px;border-radius:8px;font-size:14px;font-weight:500;color:var(--text-muted);background:transparent;transition:all .15s;border:1.5px solid transparent;cursor:pointer;font-family:var(--font-ui)}.tab-btn:hover{background:var(--cream-dark);color:var(--text)}.tab-btn.active{background:var(--surface);color:var(--text);font-weight:600;border-color:var(--border);box-shadow:var(--shadow-sm)}.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}.stat-card{padding:16px}.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--felt);animation:spin .8s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.mj-tile-winning{animation:tile-win-pulse 1.6s ease-in-out infinite}@keyframes tile-win-pulse{0%,to{box-shadow:var(--tile-shadow)}50%{box-shadow:0 0 18px 4px #fbbf24aa,var(--tile-shadow)}}.mj-tile-shimmer{position:relative;overflow:hidden}.mj-tile-shimmer:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(105deg,transparent 30%,oklch(90% .15 80 / .55) 50%,transparent 70%);animation:shimmer-sweep .65s ease-out forwards}@keyframes shimmer-sweep{0%{transform:translate(-120%)}to{transform:translate(120%)}}.game-screen{display:flex;flex-direction:column;height:100vh;max-height:100vh;overflow:hidden;background:var(--felt);--text: var(--text-on-felt);--text-muted: rgba(255, 255, 255, .5);--border: rgba(255, 255, 255, .12);--surface: rgba(0, 0, 0, .25);--cream: rgba(255, 255, 255, .07);--cream-dark: rgba(255, 255, 255, .11)}.game-header{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:52px;background:var(--felt);border-bottom:1.5px solid var(--felt-border);flex-shrink:0;gap:16px}.game-table{flex:1;min-height:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,var(--felt-light),var(--felt));position:relative;display:grid;grid-template-columns:140px 1fr 140px;grid-template-rows:auto 1fr auto;gap:8px;padding:12px}.player-area{background:var(--surface);border-top:1.5px solid var(--border);padding:12px 20px 14px;flex-shrink:0}.player-info-bar{display:flex;align-items:center;gap:10px;margin-bottom:8px;justify-content:center}.hand-area{display:flex;align-items:flex-end;gap:4px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;padding-top:24px;min-height:78px;justify-content:center}.mj-tile-drawn{transform:translateY(-10px)!important;border-color:#38bdf8!important;box-shadow:inset 0 1.5px #ffffffeb,3px 12px #0369a1,3px 12px 14px #00000047,0 0 10px #38bdf88c!important}.hand-tiles{display:flex;gap:4px;flex-shrink:0}.action-bar{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap;justify-content:center}.opp-seat{display:flex;flex-direction:column;gap:6px;align-items:center}.opp-top{grid-column:1 / -1;grid-row:1}.opp-left{grid-column:1;grid-row:2;justify-content:center;align-self:center}.opp-right{grid-column:3;grid-row:2;justify-content:center;align-self:center}.opp-info{display:flex;gap:6px;align-items:center;background:#00000040;border-radius:8px;padding:5px 8px;min-width:0}.opp-info>div{min-width:0;overflow:hidden}.opp-info>div>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.opp-tiles{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}.opp-tiles-left,.opp-tiles-right{flex-wrap:wrap;max-width:130px}.discard-pool{grid-column:2;grid-row:2;position:relative;display:grid;grid-template-areas:". top ." "left center right" ". bottom .";grid-template-columns:1fr auto 1fr;grid-template-rows:auto 1fr auto;gap:6px;align-items:center;justify-items:center;background:#00000026;border-radius:12px;padding:10px;border:1px solid rgba(255,255,255,.06)}.discard-zone{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;max-width:150px}.discard-zone-0{grid-area:bottom}.discard-zone-1{grid-area:left;flex-direction:column}.discard-zone-2{grid-area:top}.discard-zone-3{grid-area:right;flex-direction:column}.table-center-info{grid-area:center;display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#0000004d;border:1px solid rgba(255,255,255,.1)}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--cream);padding:24px}.auth-card{background:var(--surface);border:1.5px solid var(--border);border-radius:20px;padding:40px 36px;width:100%;max-width:420px;box-shadow:var(--shadow-lg)}.auth-logo{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:28px}.auth-logo-icon{width:48px;height:48px;border-radius:12px;background:var(--felt);display:flex;align-items:center;justify-content:center;font-size:20px;color:#fde68a;font-weight:700}.auth-logo-text{font-size:22px;font-weight:700;letter-spacing:-.02em}.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--text-muted);font-size:12px}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--border)}.step-dots{display:flex;gap:8px;justify-content:center;margin-bottom:28px}.step-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:all .3s}.step-dot.active{width:24px;border-radius:4px;background:var(--felt)}.username-status{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:6px}.learn-layout{display:grid;grid-template-columns:210px 1fr;gap:0;min-height:calc(100vh - var(--nav-h))}.learn-sidebar{border-right:1.5px solid var(--border);padding:24px 12px;position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto;background:var(--surface)}.learn-nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:14px;cursor:pointer;transition:all .15s;color:var(--text-muted);font-weight:500;width:100%;border:none;background:transparent;text-align:left;font-family:var(--font-ui)}.learn-nav-item:hover{background:var(--cream);color:var(--text)}.learn-nav-item.active{background:var(--cream-dark);color:var(--text);font-weight:600}.learn-content{padding:32px 40px 80px;max-width:680px}.learn-mobile-tabs{display:none}.learn-mobile-tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px;border:none;background:transparent;border-radius:8px;cursor:pointer;font-size:11px;font-weight:500;color:var(--text-muted);font-family:var(--font-ui);white-space:nowrap;flex:1;transition:all .15s}.learn-mobile-tab.active{color:var(--text);background:var(--cream-dark);font-weight:600}.learn-mobile-tab:hover{color:var(--text);background:var(--cream)}.learn-section-title{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}.learn-section-sub{font-size:15px;color:var(--text-muted);margin-bottom:24px;line-height:1.6}.tile-row{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-end;margin:14px 0}.learn-rule-card{background:var(--cream);border:1.5px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:12px}.learn-rule-card h4{font-size:14px;font-weight:700;margin-bottom:6px}.learn-rule-card p{font-size:13px;color:var(--text-muted);line-height:1.6}.step-card{display:flex;gap:16px;padding:14px;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;margin-bottom:12px}.step-num{width:32px;height:32px;border-radius:50%;background:var(--felt);color:#fde68a;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}.score-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}.score-table th{text-align:left;padding:8px 12px;background:var(--cream-dark);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.score-table td{padding:9px 12px;border-bottom:1px solid var(--border)}.score-table tr:last-child td{border-bottom:none}.profile-hero{margin-bottom:20px}.claim-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 0}.claim-tile-preview{display:flex;align-items:center;gap:10px;padding:8px 14px;background:#ffefe0;background:oklch(96% .04 65);border:1.5px solid var(--gold);border-radius:10px;margin-bottom:8px}.bot-thinking{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:13px;padding:6px 0}@media (max-width: 680px){.content-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 680px){.learn-layout{grid-template-columns:1fr}.learn-sidebar{display:none}.learn-content{padding:12px 16px 60px}.learn-mobile-tabs{display:flex;gap:4px;margin-bottom:20px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.learn-mobile-tabs::-webkit-scrollbar{display:none}}@media (max-width: 600px){.screen{padding:16px 14px 60px}.screen-title{font-size:clamp(20px,5.5vw,26px)}.game-table{grid-template-columns:80px 1fr 80px;padding:8px}.app-nav{padding-left:calc(14px + var(--sal));padding-right:calc(14px + var(--sar))}}.game-root{padding-top:var(--sat);padding-left:var(--sal);padding-right:var(--sar)}.game-action-bar{padding-bottom:max(10px,var(--sab))}.mj-hand{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 8px 4px;max-width:100%;overflow:hidden}.mj-hand-bonus{display:flex;gap:3px;margin-bottom:2px}.mj-hand-tiles{display:flex;flex-wrap:nowrap;gap:3px;justify-content:flex-start;max-width:100%;overflow:hidden}.mj-meld{display:flex;gap:2px}.mj-discard-pool{width:100%;height:100%;display:grid;grid-template-areas:".    top   ." "left mid   right" ".    bot   .";grid-template-rows:1fr auto 1fr;grid-template-columns:1fr auto 1fr;gap:4px;padding:6px;box-sizing:border-box}.mj-discard-zone{display:flex;flex-wrap:wrap;gap:2px;padding:4px}.mj-discard-zone--top{grid-area:top;align-items:flex-end;justify-content:center}.mj-discard-zone--bottom{grid-area:bot;align-items:flex-start;justify-content:center}.mj-discard-zone--left{grid-area:left;align-items:center;justify-content:flex-end;flex-direction:column}.mj-discard-zone--right{grid-area:right;align-items:center;justify-content:flex-start;flex-direction:column}.mj-tile--claimable{outline:2px solid #fbbf24;outline-offset:2px;border-radius:6px}.mj-opponent{padding:6px 10px;background:#051606b3;border-bottom:1px solid oklch(28% .06 145);min-height:42px;display:flex;flex-direction:column;gap:3px;--opp-fs-name: clamp(12px, 3vw, 13px);--opp-fs-sub: clamp(12px, 2.6vw, 12px);--opp-fs-badge: clamp(12px, 2.8vw, 12px)}.mj-opponent--left,.mj-opponent--right{border-bottom:none;border-right:1px solid oklch(28% .06 145);min-width:clamp(60px,18vw,120px);max-width:clamp(70px,22vw,130px);justify-content:center}.mj-opponent--right{border-right:none;border-left:1px solid oklch(28% .06 145)}