:root{--bg:#f7f7f2;--ink:#202b29;--muted:#85908a;--green:#215a4d;--line:#e3e7df;--yellow:#f8d68b;--orange:#db7752;--white:#fff;--radius:20px;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid #d3953e;outline-offset:4px}input:focus{outline:2px solid #5b9079;outline-offset:1px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.site-shell{max-width:1280px;margin:auto;padding:0 48px}.header{height:102px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:10px;font-size:27px;font-weight:850;letter-spacing:-1px;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:38px;height:42px;background:var(--green);color:var(--yellow);border-radius:13px;font-size:29px}.brand-dot{color:var(--orange)}.brand small{font-size:11px;letter-spacing:2px;font-weight:500;display:inline-block;vertical-align:middle;margin-left:10px;color:#7f8982}.header nav{display:flex;gap:36px}.nav-link{background:none;border:0;font-size:14px;color:#858c84;padding:14px 0;position:relative;font-weight:600}.nav-link.active{color:var(--green)}.nav-link.active:after{position:absolute;content:'';bottom:1px;width:18px;height:3px;background:var(--green);border-radius:2px;left:calc(50% - 9px)}.nav-link span{font-size:11px;margin-left:3px}.user-button{border:1px solid #dce2d8;background:transparent;border-radius:30px;display:flex;align-items:center;gap:9px;padding:7px 12px 7px 7px;font-size:12px;max-width:220px}.avatar{background:#edc98d;color:#614b32;width:42px;height:42px;border-radius:14px;display:inline-grid;place-items:center;font-size:23px;flex-shrink:0;font-weight:650}.avatar.small{width:29px;height:29px;font-size:19px;border-radius:50%}#account-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-arrow{margin-left:8px;color:#66766d}.hero{min-height:435px;border-radius:25px;background:#204e43;position:relative;display:flex;overflow:hidden;color:#fff9e8}.hero:after{content:'';position:absolute;inset:0;background-image:radial-gradient(#ffffff09 .8px,transparent .8px);background-size:5px 5px;pointer-events:none}.hero-copy{position:relative;z-index:1;padding:44px 52px;width:57%}.eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:2px;font-weight:600;color:#cad8c9}.live-dot{width:5px;height:5px;background:var(--yellow);border-radius:50%}.hero h1{font-size:57px;line-height:1.2;letter-spacing:2px;margin:20px 0 13px;font-weight:850}.hero-period{color:var(--yellow)}.hero p{font-size:13px;line-height:1.9;color:#b9cdc0;margin:0 0 25px}.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;border:0;padding:14px 20px;border-radius:10px;font-size:13px;font-weight:650;min-height:46px;transition:transform .15s,background .15s}.button:hover{transform:translateY(-2px)}.button.yellow{background:var(--yellow);color:#243c31}.button.dark{background:#263f35;color:white}.button.green{background:var(--green);color:white}.button.secondary{background:#eef0ea;color:#3d574a}.full{width:100%}.hero-tags{display:flex;gap:12px;align-items:center;font-size:9px;color:#9fb6a6;margin-top:21px;letter-spacing:.5px}.hero-tags i{height:3px;width:3px;border-radius:50%;background:#7d9d89}.hero-art{position:absolute;right:0;top:0;width:49%;height:100%}.orbit{position:absolute;border:1px solid #c4d7ad25;border-radius:50%;width:460px;height:460px;top:70px;left:0;transform:rotate(-25deg)}.orbit-two{width:580px;height:580px;top:-22px;left:-44px}.art-star{position:absolute;color:#bdd1a4}.star-one{left:8%;top:13%;font-size:42px}.star-two{right:11%;top:32%;font-size:30px;color:#f4d58a}.art-caption{position:absolute;right:9%;top:11%;font-size:9px;letter-spacing:2px;line-height:1.9;color:#b7cbb6}.art-card{width:143px;height:212px;border-radius:13px;background:#f9f4df;box-shadow:0 15px 35px #102d2540;position:absolute;display:flex;flex-direction:column;padding:16px;top:118px;left:21%;color:#1b3e32;border:4px solid #fffbef}.art-card>span{font-size:32px;font-weight:750;line-height:1}.art-card b{font-size:76px;line-height:1.3;text-align:center}.art-card small{position:absolute;bottom:12px;right:14px;font-size:25px;transform:rotate(180deg)}.card-back{transform:rotate(-19deg);top:100px;left:20%;background:#e8e9d4}.card-front{transform:rotate(12deg);left:42%;top:140px;color:#d26f4b}.art-chip{position:absolute;width:78px;height:78px;border:8px dashed #f2c975;border-radius:50%;background:#264a3a;bottom:51px;left:17%;transform:rotate(-15deg);display:flex;align-items:center;justify-content:center;font-size:27px;color:#f3d48f;box-shadow:0 7px 0 #143d2d}.art-chip small{font-size:7px;position:absolute;bottom:5px;letter-spacing:2px}.art-sticker{position:absolute;right:6%;bottom:35px;background:#d2dbb8;color:#2f4a39;border-radius:50%;width:91px;height:91px;transform:rotate(15deg);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;letter-spacing:1px;border:1px dashed #38593e;outline:5px solid #d2dbb8}.art-sticker strong{font-size:22px;margin-top:4px}.quick-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 28px;margin:22px 0 40px;background:#eeefe6;border:1px solid #e5e8dc;border-radius:14px}.quick-strip>div{display:flex;align-items:center;gap:17px}.strip-icon{font-size:35px;color:#5d715a}.quick-strip strong{display:block;font-size:14px;margin-bottom:6px}.quick-strip small{font-size:11px;color:#87917e}.quick-strip form{display:flex;gap:9px}.quick-strip input{width:160px;border:1px solid #dfe3d8;background:#fbfbf7;border-radius:8px;padding:11px 14px;font-size:12px;letter-spacing:1px}.quick-strip .button{font-size:12px;min-height:41px;padding:11px 17px;gap:16px}.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:30px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:19px}.section-heading h2{font-size:22px;margin:10px 0 0;letter-spacing:.5px}.section-heading h3{margin:0;font-size:14px}.eyebrow.ink{font-size:9px;letter-spacing:2px;color:#879281}.muted{color:#9aa592}.tiny-label{font-size:10px;color:#939a8d;white-space:nowrap}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.game-card{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#fffefa;transition:transform .2s}.game-card.featured:hover{transform:translateY(-4px)}.game-visual{height:169px;position:relative;overflow:hidden}.ddz-visual{background:#edd6b7}.game-badge{position:absolute;top:12px;left:12px;z-index:1;background:#fffdf2d9;color:#6f5936;padding:5px 7px;font-size:9px;border-radius:5px}.game-badge.pale{background:#ffffff8c;color:#6e7a64}.mini-cards{display:flex;position:absolute;left:26px;top:44px;transform:rotate(-7deg)}.mini-cards i{font-style:normal;width:61px;height:86px;background:#fffaf0;box-shadow:0 3px 7px #795a3025;border:2px solid #fffdf3;border-radius:7px;padding:7px;font-weight:750;font-size:16px;margin-left:-10px;transform:rotate(-13deg);color:#3b4c37}.mini-cards i:nth-child(2){transform:rotate(2deg);color:#cd7557;margin-top:1px}.mini-cards i:nth-child(3){transform:rotate(16deg);margin-top:8px}.mini-cards span{display:block;text-align:center;font-size:34px}.visual-label{position:absolute;bottom:12px;left:15px;font-size:9px;letter-spacing:1px;color:#8b7352}.visual-spark{position:absolute;top:26px;right:14px;font-size:29px;color:#92764f}.game-info{padding:15px 13px 12px;display:flex;align-items:center;justify-content:space-between;gap:5px}.game-info h3{font-size:17px;margin:0 0 7px}.game-info p{font-size:9px;color:#9b9f92;margin:0;white-space:nowrap}.round-button{width:29px;height:29px;border-radius:50%;border:0;background:#255843;color:white;font-size:19px;flex-shrink:0}.game-bottom{display:flex;justify-content:space-between;gap:4px;padding:10px 12px;border-top:1px solid #edf0e6;font-size:8px;color:#9a9f92}.game-bottom>span:first-child{color:#53765c}.status-dot{display:inline-block;background:#80a783;border-radius:50%;width:5px;height:5px;margin-right:5px;vertical-align:middle}.gomoku-visual{background:#dce4ce}.gomoku-board{height:118px;width:118px;position:absolute;left:calc(50% - 59px);top:33px;background-image:linear-gradient(#8c9c663b 1px,transparent 1px),linear-gradient(90deg,#8c9c663b 1px,transparent 1px);background-size:25px 25px;transform:rotate(-9deg);border:7px solid #d1daba;box-shadow:0 7px 18px #85927320}.stone{position:absolute;width:21px;height:21px;border-radius:50%}.black{background:#354d3c;box-shadow:inset -3px -3px 4px #172c29,0 2px 3px #28443030}.white{background:#fffdf1;box-shadow:inset -3px -3px 4px #c5c9aa,0 2px 3px #28443030}.s1{left:15px;top:15px}.s2{left:40px;top:15px}.s3{left:40px;top:40px}.s4{left:65px;top:40px}.s5{left:65px;top:65px}.coming-icon{color:#a1aa98;font-size:20px}.puzzle-visual{background:#dce2e5}.puzzle-art{position:absolute;left:calc(50% - 49px);top:43px;display:grid;grid-template-columns:46px 46px;gap:7px;transform:rotate(8deg)}.puzzle-art i{height:46px;font-style:normal;display:grid;place-items:center;border-radius:8px;background:#f3f1e7;color:#8d998d;font-weight:750;font-size:22px;box-shadow:0 3px 0 #b6c3c5}.puzzle-art i:nth-child(2){background:#d6d8bd;color:#5e735c}.puzzle-art i:nth-child(3){background:#d9bd98;color:#fff9e9}.puzzle-art i:nth-child(4){background:#65877d;color:white}.play-panel{background:#e8ecdf;border:1px solid #dfe5d5;border-radius:16px;padding:22px}.panel-kicker{display:flex;justify-content:space-between;color:#819074;font-size:8px;letter-spacing:1.7px}.panel-kicker>span:last-child{font-size:23px;line-height:1}.play-panel h2{font-size:27px;line-height:1.4;letter-spacing:1px;margin:22px 0 12px}.play-panel p{font-size:11px;color:#87917d;line-height:1.9;margin-bottom:20px}.text-button{border:0;background:none;color:#6c7f68;font-size:10px;padding:14px 2px;text-align:center}.play-panel .text-button{width:100%}.panel-foot{border-top:1px solid #d7dfcb;padding-top:15px;font-size:8px;color:#9ca68d;white-space:nowrap;text-align:center}.rank-preview{margin-top:26px;padding:19px;border:1px solid var(--line);border-radius:16px;background:#fafbf5}.rank-preview .section-heading{margin-bottom:6px}.rank-preview h3{font-size:12px}.rank-preview h3 span{font-size:10px;color:#8a9a80;margin-left:5px}.rank-cup{font-size:24px;color:#9b8c5f}.rank-subtitle{color:#a0a594;font-size:9px;margin:0 0 15px}.rank-row{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #e9ece1}.rank-pos{color:#9aa18c;font-size:11px;min-width:16px;font-weight:700}.rank-row:first-child .rank-pos{color:#bc9b43}.rank-name{font-size:11px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-score{font-size:12px;font-weight:700;color:#658462}.empty-state{padding:35px 16px;color:#9ca38f;font-size:12px;text-align:center;line-height:1.8}.empty-state.compact{font-size:11px;padding:25px 5px}.how-section{margin-top:34px}.how-section .section-heading h2{font-size:17px;margin:0}.steps{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #e2e7d9;border-radius:14px;background:#f1f3e9;padding:21px 16px}.steps>div{padding:0 12px;border-right:1px solid #dde4d4}.steps>div:last-child{border:0}.steps>div>span{font-size:10px;color:#a4ad94;display:block;margin-bottom:12px;font-weight:650}.steps strong{font-size:12px}.steps p{font-size:10px;color:#9ca48e;line-height:1.9;margin-bottom:0}.bottom-banner{margin-top:38px;display:flex;align-items:center;gap:22px;background:#e8ede0;border:1px solid #dfe7d6;border-radius:15px;padding:24px 28px}.bottom-banner>span:first-child{font-size:46px;color:#758d64}.bottom-banner h2{font-size:17px;margin:0 0 8px}.bottom-banner p{font-size:10px;color:#89947c;margin:0}.banner-cards{margin-left:auto;font-size:27px;letter-spacing:8px;color:#94a384}footer{display:flex;align-items:center;gap:17px;padding:35px 0;color:#a7ae9e;font-size:10px}.footer-brand{font-size:22px;color:#78876f}.footer-brand .brand-mark{width:27px;height:29px;font-size:22px;border-radius:9px;background:#94a889;color:#edf0e3}footer small{margin-left:auto;font-size:9px}.ranking-heading{padding:48px 0 30px}.ranking-heading h1{font-size:39px;margin:17px 0;letter-spacing:1px}.ranking-heading h1 span{color:var(--orange)}.ranking-heading p{font-size:13px;color:#8b9687;line-height:1.9}.rank-table-wrap{background:#fffefa;border:1px solid var(--line);border-radius:17px;overflow-x:auto;min-height:200px}.rank-table{border-collapse:collapse;width:100%;font-size:13px;text-align:left}.rank-table th{padding:19px 24px;font-weight:500;font-size:11px;color:#929b87;background:#edf0e6}.rank-table td{padding:19px 24px;border-bottom:1px solid #ecefe5}.rank-table tr.mine{background:#edf2e7}.rank-table .rank-number{font-weight:700;color:#a8945f}.ranking-note{font-size:11px;color:#98a08e;margin:20px 0 60px}dialog{border:0;border-radius:23px;padding:34px;width:min(420px,calc(100vw - 32px));background:#fcfcf7;color:var(--ink);box-shadow:0 20px 100px #102b3050}dialog::backdrop{background:#1d342a70;backdrop-filter:blur(5px)}.modal-close{position:absolute;right:14px;top:12px;background:none;border:0;font-size:27px;color:#9da593;padding:4px 9px}.modal-icon{width:49px;height:49px;background:#e9eedf;color:#5b7959;border-radius:15px;display:grid;place-items:center;font-size:30px;margin-bottom:22px}.modal h2{font-size:26px;letter-spacing:.5px;margin:13px 0}.modal h2 span{color:#d39a64}.modal p{font-size:12px;color:#8e9786;line-height:1.9}.modal label{font-size:11px;display:block;margin:24px 0 10px}.modal input{width:100%;border:1px solid #dde4d4;border-radius:10px;background:white;padding:14px;font-size:14px}.form-error{font-size:11px;min-height:30px;color:#ba5a42;padding:7px 0}.identity-note{font-size:10px;color:#9ba58c;line-height:1.9;margin-top:17px}.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:25px 0}.profile-stats>div{background:#edf1e6;border-radius:10px;padding:15px 5px;text-align:center;font-size:10px;color:#8a977e}.profile-stats strong{display:block;font-size:24px;color:#3e644a;margin-bottom:8px}.rules-modal{width:min(520px,calc(100vw - 32px));max-height:86dvh}.rules-copy{font-size:12px;line-height:1.9}.rules-copy h3{font-size:13px;margin:22px 0 7px;color:#577047}.rules-copy p{margin:0}.rules-modal>.button{margin-top:25px}.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);background:#183c33ed;color:#f8f7e6;padding:13px 22px;border-radius:12px;font-size:12px;max-width:calc(100vw - 32px);z-index:100;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;text-align:center;box-shadow:0 5px 25px #183c3330}.toast.show{opacity:1;transform:translate(-50%,0)}
/* The table shares the lobby's quiet green, with touch-sized controls. */
.room-view{height:100dvh;min-height:620px;background:#1b4c40;color:#f3f1da;display:flex;flex-direction:column;overflow:hidden}.room-header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #ffffff12;background:#163d33;gap:12px}.room-back{border:0;background:none;color:#cbdbbd;font-size:13px;padding:12px 0}.room-title{text-align:center;display:flex;flex-direction:column;gap:7px}.room-title strong{font-size:17px}.room-title strong span{font-weight:400;font-size:13px;color:#cbdbbd;margin-left:10px;letter-spacing:2px}.room-title small{font-size:10px;color:#8db79d}.table-outline{background:transparent;border:1px solid #668b68;color:#dee7c6;min-height:36px;padding:10px 14px;font-size:11px;gap:8px}.table-wrap{max-width:1100px;width:100%;flex:1;margin:auto;position:relative;background-image:radial-gradient(ellipse at 50% 46%,#376d501a 0,#376d501a 34%,transparent 34.2%),radial-gradient(ellipse at 50% 46%,transparent 40%,#c2d2a313 40.2%,transparent 40.5%)}.table-topline{position:absolute;top:18px;left:25px;right:25px;display:flex;justify-content:space-between;gap:10px}.table-rule{font-size:10px;color:#7ea28b}.table-help{border:0;background:none;color:#8cae94;font-size:11px}.bottom-cards{position:absolute;top:55px;left:50%;transform:translateX(-50%);display:flex;gap:5px;justify-content:center;min-height:52px}.playing-card{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background:#fffbed;color:#294b3a;border:1px solid #e1ddc6;border-radius:8px;width:58px;height:82px;padding:6px 8px;font-size:20px;font-weight:750;box-shadow:0 3px 0 #bec6ac;flex-shrink:0;user-select:none;touch-action:manipulation}.playing-card.red{color:#c15d43}.playing-card .suit{font-size:19px;line-height:1.2}.playing-card .large-suit{position:absolute;bottom:8px;right:7px;font-size:26px}.playing-card.joker{font-size:11px;padding:9px 6px;line-height:1.25}.playing-card.joker .suit{font-size:30px;margin-top:5px}.playing-card.back{background:repeating-linear-gradient(45deg,#79967a 0,#79967a 3px,#91a485 3px,#91a485 6px);border:3px solid #ced6b8;box-shadow:0 2px 0 #173f32}.bottom-cards .playing-card{width:36px;height:51px;font-size:14px;padding:4px 5px;border-radius:5px}.bottom-cards .suit{font-size:13px}.bottom-cards .large-suit{display:none}.bottom-cards .joker{font-size:8px}.bottom-cards .joker .suit{font-size:19px}.opponent{position:absolute;top:140px;width:150px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}.opponent.left{left:35px}.opponent.right{right:35px}.opponent .avatar{width:49px;height:49px;font-size:23px;background:#b5c29b;border:2px solid transparent}.opponent.current .avatar{border-color:#f5d486;box-shadow:0 0 0 4px #f5d48622}.opponent-name{font-size:13px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seat-detail{font-size:10px;color:#a5bea5}.seat-badge{padding:3px 8px;background:#103a2d99;border-radius:5px;font-size:9px;color:#c0d3ac}.seat-badge.landlord{background:#e8be77;color:#5b4a31}.seat-empty{color:#749980;font-size:11px;line-height:2}.seat-empty .avatar{background:#285a46;border:1px dashed #6d916f;color:#7fa183}.opponent .seat-action{min-height:35px;font-size:11px;color:#e1d9ad;margin-top:6px}.opponent .seat-action .playing-card{width:28px;height:39px;padding:3px 4px;font-size:10px;margin-left:-9px;border-radius:4px;box-shadow:none}.opponent .seat-action .suit{font-size:10px}.opponent .seat-action .large-suit{display:none}.opponent .seat-action .joker{font-size:6px}.opponent .seat-action .joker .suit{font-size:14px}.table-center{position:absolute;left:50%;top:27%;transform:translateX(-50%);text-align:center;max-width:60%;width:460px}.table-center .waiting-title{font-size:24px;font-weight:700;letter-spacing:1px;color:#e5e9cb}.table-center p{font-size:12px;color:#9bb79a;line-height:1.9}.table-center .waiting-code{font-size:29px;letter-spacing:9px;color:#f6d58b;margin:13px 0}.table-center .button{margin-top:5px}.last-play{position:absolute;top:45%;left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:10px;max-width:57%;width:550px}.last-play>div{display:flex;justify-content:center;max-width:100%;flex-wrap:wrap;row-gap:8px;padding-left:12px}.last-play .playing-card{width:42px;height:59px;padding:5px;font-size:15px;margin-left:-12px;box-shadow:0 2px 0 #b7c4a3}.last-play .suit{font-size:14px}.last-play .large-suit{font-size:19px;right:5px;bottom:5px}.last-play .joker{font-size:8px}.last-play .joker .suit{font-size:22px}.last-play small{font-size:10px;color:#a5bd96}.room-note{position:absolute;bottom:266px;left:15px;right:15px;text-align:center;color:#aac39c;font-size:11px;pointer-events:none}.self-meta{position:absolute;bottom:204px;left:35px;display:flex;align-items:center;gap:10px;right:35px}.self-meta>div{display:flex;flex-direction:column;gap:5px}.self-meta strong{font-size:12px}.self-meta small{font-size:10px;color:#8eae8c}.self-meta .avatar{background:#f0cf8d;width:37px;height:37px;font-size:19px}.turn-clock{margin-left:auto;color:#f3d186;background:#123c2d;min-width:44px;text-align:center;padding:7px 8px;border-radius:8px;font-size:17px;font-variant-numeric:tabular-nums}.turn-clock:empty{display:none}.chat-toggle{background:#295e48;border:1px solid #527b57;width:34px;height:34px;border-radius:50%;color:#bdd0a6;font-size:21px}.action-bar{position:absolute;bottom:144px;left:20px;right:20px;display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px}.action-bar .button{min-width:96px;gap:6px;padding:12px 16px;font-size:13px}.action-bar .table-muted{background:#37684f;color:#d6e3bc}.action-bar .table-primary{background:#f1d18c;color:#3a4d32}.action-bar .turn-label{font-size:13px;color:#d0dfb5}.hand{position:absolute;bottom:32px;left:23px;right:23px;height:108px;display:flex;align-items:flex-end;justify-content:safe center;overflow-x:auto;overflow-y:hidden;padding:20px 5px 5px 28px;scrollbar-width:thin;scrollbar-color:#6e8d63 transparent}.hand .playing-card{width:62px;height:85px;margin-left:-23px;cursor:pointer;border-radius:7px;transition:transform .12s,background .12s;outline:none}.hand .playing-card.selected{transform:translateY(-17px);background:#fff1bd;border-color:#e1c169}.hand .playing-card:focus-visible{outline:2px solid #f8d68b;outline-offset:2px}.hand-tip{position:absolute;bottom:9px;left:10px;right:10px;text-align:center;font-size:9px;color:#7eaa86}.chat-bubble{position:absolute;top:19%;left:50%;transform:translateX(-50%);background:#fcf7d9;color:#3c5940;border-radius:12px;padding:10px 15px;max-width:60%;font-size:11px;z-index:5}.chat-menu{display:flex;flex-wrap:wrap;gap:8px}.chat-menu button{border:1px solid #dce4d1;background:#f1f3e9;border-radius:8px;padding:12px;font-size:12px;color:#49643f;flex:1 0 40%}.result-title{font-size:31px!important;color:#f6d58b!important;margin:0 0 10px!important;font-weight:750}.result-score{font-size:15px;color:#d7e4ba}.result-table{display:flex;gap:12px;justify-content:center;margin-top:15px;font-size:11px;color:#b9ceaa}.result-table span{display:flex;flex-direction:column;gap:7px}.result-table strong{color:#f2d491}.room-view.finished .last-play{top:51%}.room-view.finished .room-note{bottom:267px}
@media(min-width:1500px){.site-shell{padding:0 48px}.hero{min-height:460px}.hero-copy{padding-top:48px}.hero h1{font-size:62px}.game-visual{height:180px}}
@media(max-width:1050px){.site-shell{padding:0 30px}.header{height:88px}.content-grid{grid-template-columns:minmax(0,1fr) 235px;gap:22px}.hero-copy{padding:38px}.hero h1{font-size:49px}.hero-art{width:47%}.art-card{width:125px;height:187px;left:15%}.card-front{left:39%}.art-sticker{width:74px;height:74px;bottom:38px;font-size:9px}.art-sticker strong{font-size:19px}.art-chip{left:6%;width:64px;height:64px}.game-grid{gap:11px}.game-visual{height:145px}.mini-cards{left:18px;top:42px}.mini-cards i{width:48px;height:72px}.mini-cards span{font-size:27px}.game-info{padding:13px 10px}.game-info h3{font-size:16px}.game-info p{font-size:8px}.game-bottom{font-size:7px;padding:9px 8px}.play-panel{padding:20px}.play-panel h2{font-size:25px}.section-heading h2{font-size:20px}.gomoku-board{transform:rotate(-9deg) scale(.86);top:22px}.puzzle-art{transform:rotate(8deg) scale(.85);top:29px}.steps{padding:20px 8px}.steps>div{padding:0 10px}}
@media(max-width:760px){.site-shell{padding:0 20px}.header{height:78px;gap:12px}.brand{font-size:24px}.brand small{display:none}.brand-mark{width:33px;height:36px;font-size:26px;border-radius:11px}.header nav{gap:18px}.nav-link{font-size:12px}.user-button{font-size:10px;padding:5px 9px 5px 5px;gap:5px;max-width:132px}.user-button .avatar{width:25px;height:25px}.account-arrow{display:none}.hero{min-height:404px;border-radius:20px}.hero-copy{padding:32px 28px;width:62%}.hero h1{font-size:43px;margin-top:21px;line-height:1.22}.hero p{font-size:11px;margin-bottom:23px}.hero .eyebrow{font-size:9px;letter-spacing:1px}.hero-art{width:43%}.art-card{width:105px;height:155px;padding:10px;top:155px;left:0}.art-card>span{font-size:23px}.art-card b{font-size:56px}.art-card small{font-size:18px}.card-front{left:24%;top:182px}.card-back{top:149px;left:3%}.art-chip{left:-5%;bottom:41px;width:55px;height:55px;border-width:6px;font-size:21px}.art-chip small{font-size:5px}.art-caption{font-size:6px;right:12%;top:21%}.star-one{font-size:28px;left:-4%;top:14%}.star-two{right:9%;top:35%;font-size:21px}.art-sticker{width:58px;height:58px;bottom:20px;right:8%;font-size:7px}.art-sticker strong{font-size:16px}.hero-tags{font-size:8px;gap:8px;white-space:nowrap;margin-top:21px}.hero .button{font-size:12px;padding:12px 16px;gap:15px}.orbit-one{left:-78px;top:100px;width:340px;height:340px}.orbit-two{left:-130px;top:40px;width:450px;height:450px}.quick-strip{padding:18px;margin:17px 0 28px;gap:15px;flex-wrap:wrap}.quick-strip>div{gap:10px}.quick-strip strong{font-size:13px}.quick-strip small{font-size:10px}.strip-icon{font-size:27px}.quick-strip form{flex:1;min-width:260px}.quick-strip input{flex:1;min-width:0;width:130px}.quick-strip .button{font-size:11px}.content-grid{display:block}.game-visual{height:165px}.game-info h3{font-size:17px}.game-info p{font-size:9px}.game-bottom{font-size:8px;padding:10px}.mini-cards{left:calc(50% - 58px);top:44px}.mini-cards i{width:58px;height:82px}.mini-cards span{font-size:31px}.gomoku-board{transform:rotate(-9deg);top:33px}.puzzle-art{transform:rotate(8deg);top:43px}.side-column{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}.play-panel h2{font-size:24px;margin:15px 0 10px}.play-panel p{font-size:10px}.play-panel .button{font-size:11px}.rank-preview{margin:0;padding:16px}.rank-preview h3{font-size:11px}.panel-kicker{font-size:7px}.panel-foot{font-size:7px}.steps{padding:20px 12px}.steps>div{padding:0 12px}.steps p{font-size:10px}.bottom-banner{padding:20px;gap:14px;margin-top:26px}.bottom-banner h2{font-size:15px}.bottom-banner>span:first-child{font-size:34px}.banner-cards{display:none}footer{flex-wrap:wrap;padding:28px 0;gap:12px}footer small{width:100%;margin:0;font-size:8px}.footer-brand{font-size:19px}.ranking-heading{padding:35px 0 20px}.ranking-heading h1{font-size:30px}.ranking-heading p{font-size:11px}.rank-table th,.rank-table td{padding:17px 13px;font-size:11px}.rank-table th{font-size:10px}.room-header{height:67px;padding:0 18px}.room-view{min-height:600px}.table-wrap{background-size:auto}.opponent{top:145px;width:90px}.opponent.left{left:10px}.opponent.right{right:10px}.opponent-name{font-size:11px;max-width:90px}.opponent .avatar{width:41px;height:41px;font-size:20px}.opponent .seat-action{font-size:10px}.opponent .seat-action .playing-card{width:24px;height:34px;font-size:8px;padding:3px}.opponent .seat-action .suit{font-size:9px}.table-center{top:26%;max-width:61%}.table-center .waiting-title{font-size:19px}.table-center .waiting-code{font-size:23px;letter-spacing:6px}.table-center p{font-size:10px}.table-center .button{font-size:10px;min-height:34px;padding:9px 12px}.table-topline{left:17px;right:17px;top:15px}.table-rule{font-size:8px}.table-help{font-size:9px}.bottom-cards{top:45px}.self-meta{left:18px;right:18px;bottom:193px}.action-bar{bottom:135px;gap:8px;left:12px;right:12px}.action-bar .button{min-width:76px;padding:12px 13px;font-size:12px;min-height:42px}.action-bar .turn-label{font-size:11px}.hand{bottom:29px;left:10px;right:10px;height:103px;padding-left:24px}.hand .playing-card{width:48px;height:73px;margin-left:-25px;font-size:17px;padding:5px}.hand .playing-card .suit{font-size:16px}.hand .playing-card .large-suit{font-size:24px;right:5px;bottom:6px}.hand .playing-card.joker{font-size:9px}.hand .playing-card.joker .suit{font-size:23px}.hand-tip{font-size:8px;bottom:10px}.room-note{bottom:251px;font-size:9px}.room-view.finished .room-note{bottom:251px}.last-play{top:45%;max-width:60%}.last-play .playing-card{width:34px;height:49px;margin-left:-13px;font-size:12px;padding:4px;border-radius:5px}.last-play .suit{font-size:12px}.last-play .large-suit{font-size:15px}.last-play .joker{font-size:7px}.last-play .joker .suit{font-size:18px}.last-play small{font-size:9px}.result-title{font-size:25px!important}.result-score{font-size:13px}.result-table{font-size:9px;gap:10px}.table-center .result-table{margin-top:12px}.chat-bubble{font-size:10px;top:20%;max-width:65%}.seat-detail{font-size:9px}.turn-clock{font-size:15px;min-width:37px}}
@media(max-width:430px){.site-shell{padding:0 15px}.header nav{gap:12px}.header{gap:10px}.brand{gap:7px;font-size:23px}.user-button{max-width:103px}.hero{min-height:383px}.hero-copy{padding:28px 23px;width:66%}.hero h1{font-size:38px;letter-spacing:0}.hero p{font-size:10px}.hero-art{width:40%}.art-card{width:88px;height:135px;top:167px;border-width:3px}.art-card b{font-size:48px}.card-front{top:193px;left:19%}.art-card>span{font-size:21px}.art-sticker{right:11%;bottom:25px;width:47px;height:47px;font-size:6px;outline-width:3px}.art-sticker strong{font-size:13px;margin-top:1px}.art-chip{left:-12%;bottom:26px;width:47px;height:47px;font-size:18px;border-width:5px}.art-caption{top:26%;right:8%;font-size:5px;letter-spacing:1.4px}.hero-tags{font-size:7px;gap:6px}.hero .eyebrow{font-size:8px;letter-spacing:.5px}.star-one{left:0;top:15%;font-size:25px}.star-two{top:37%;right:10%}.game-grid{grid-template-columns:1fr 1fr;gap:12px}.game-grid .game-card:last-child{display:none}.game-visual{height:160px}.game-info{padding:14px 12px}.game-info p{font-size:9px}.game-bottom{font-size:8px}.section-heading h2{font-size:21px}.tiny-label{font-size:8px}.side-column{gap:12px}.play-panel{padding:17px}.play-panel h2{font-size:22px}.play-panel .button{padding:12px 10px;font-size:10px}.rank-preview{padding:14px}.rank-preview h3{font-size:10px}.rank-subtitle{font-size:8px}.rank-cup{font-size:19px}.rank-row{gap:7px}.rank-name,.rank-pos{font-size:10px}.rank-score{font-size:11px}.panel-foot{font-size:6px}.play-panel .text-button{font-size:8px}.steps{padding:18px 6px}.steps>div{padding:0 10px}.steps p{font-size:8px}.steps strong{font-size:11px}.steps>div>span{font-size:9px}.bottom-banner h2{font-size:13px}.bottom-banner p{font-size:9px}.bottom-banner{gap:12px;padding:19px 15px}.bottom-banner>span:first-child{font-size:31px}.quick-strip form{min-width:230px}.quick-strip strong{font-size:12px}.quick-strip small{font-size:9px}.user-button{gap:5px}.room-title strong{font-size:14px}.room-title strong span{font-size:11px;margin-left:4px}.room-header{padding:0 12px;gap:8px}.room-back{font-size:11px}.table-outline{font-size:10px;padding:9px 11px}.opponent{top:129px;width:74px}.opponent.left{left:6px}.opponent.right{right:6px}.opponent-name{max-width:73px;font-size:10px}.opponent .avatar{width:36px;height:36px;font-size:18px}.seat-badge{font-size:8px;padding:3px 6px}.table-center{top:26%;max-width:58%}.table-center .waiting-title{font-size:16px}.table-center .waiting-code{font-size:21px;letter-spacing:4px}.table-center p{font-size:9px}.last-play{max-width:57%;top:46%}.opponent .seat-action .playing-card{width:21px;height:30px;font-size:7px;margin-left:-10px;padding:2px}.opponent .seat-action .suit{font-size:8px}.table-center .result-title{font-size:23px!important}.room-view{min-height:600px}.hand .playing-card{width:43px;margin-left:-27px;padding:4px;font-size:16px;height:70px}.hand .playing-card .large-suit{font-size:21px;right:4px}.hand .playing-card .suit{font-size:14px}.hand .playing-card.joker{font-size:8px}.hand .playing-card.joker .suit{font-size:21px}.action-bar .button{min-width:69px;font-size:11px;padding:11px 13px}.room-note{font-size:8px;bottom:250px}.rank-table th,.rank-table td{padding:16px 10px;font-size:10px}.ranking-heading h1{font-size:27px}}
@media(max-height:700px) and (min-width:761px){.room-view{min-height:610px}.opponent{top:110px}.table-center{top:22%}.bottom-cards{top:37px}.last-play{top:40%}.room-note{bottom:253px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}