@import url('https://fonts.googleapis.com/css2?family=Rye&family=Roboto+Slab:wght@400;600;700&display=swap');
:root{--wood:#2a160d;--wood2:#5e361e;--wood3:#7d4a27;--gold:#d6a451;--gold2:#f0cb7b;--paper:#e7d1a1;--ink:#28180e;--felt:#164c38;--felt2:#0b3326;--red:#8f2929;--shadow:#0009}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#1d1009;color:#f7e9c8;font-family:'Roboto Slab',serif}body{min-height:100vh;background:linear-gradient(90deg,#241309,#4b2918 50%,#241309);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.26;background:repeating-linear-gradient(90deg,#0000 0 78px,#1a0d07 79px 83px,#0000 84px 160px),repeating-linear-gradient(0deg,#0000 0 70px,#7e4a28 71px 74px,#0000 75px 140px);mix-blend-mode:multiply}a{color:var(--gold2);text-decoration:none}
.topbar{height:64px;background:linear-gradient(#28150bfa,#170c07f5);border-bottom:3px solid #a76d32;display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:sticky;top:0;z-index:50;box-shadow:0 4px 16px #0008}.brand{font-family:Rye,serif;color:#f0cf87;font-size:20px;letter-spacing:.8px;text-shadow:2px 2px #160b06;white-space:nowrap}.brand span{font-size:23px}.topbar nav{display:flex;gap:4px}.topbar nav a{padding:8px 11px;border-radius:4px;font-weight:700}.topbar nav a:hover{background:#694021}.topbar+main{padding:0;max-width:none}.topbar+main:empty{display:none}
main{max-width:1450px;margin:auto;padding:20px}.notice{margin:10px auto;padding:11px 14px;border-radius:5px;border:1px solid #a66c33;max-width:900px}.notice.ok{background:#244d34}.notice.err{background:#672a24}.btn{border:2px solid #b27b3d;border-radius:5px;background:linear-gradient(#86603c,#4a2a19);color:#fff0cd;padding:9px 13px;font:700 14px 'Roboto Slab',serif;cursor:pointer;box-shadow:0 3px 0 #211108,0 4px 10px #0006;transition:transform .1s,filter .1s}.btn:hover{filter:brightness(1.15);transform:translateY(-1px)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none}.btn.ghost{background:#29170e}.btn.small{padding:7px 10px}.wide{display:block;text-align:center;margin-top:10px}.formbox{max-width:550px;margin:40px auto;padding:30px}.parchment{background:linear-gradient(135deg,#ead7aa,#cda66b);color:var(--ink);border:4px solid #6b3f21;box-shadow:0 8px 20px #0007;border-radius:4px}.hero{text-align:center;padding:70px 30px}.hero h1,.guide h1,.formbox h2{font-family:Rye}.hero h1{font-size:60px;color:var(--gold2)}.hero-actions{display:flex;justify-content:center;gap:12px}.formbox form{display:grid;gap:14px}.formbox label{display:grid;gap:6px;font-weight:700}.formbox input,.formbox select,.chat input{padding:10px;border:2px solid #704522;border-radius:4px;background:#f5e7c8;color:#2b1a10;font:inherit}.section-head{display:flex;align-items:center;justify-content:space-between}.table-list{display:grid;gap:12px}.table-card{display:flex;justify-content:space-between;align-items:center;padding:16px;background:#3b2214dd;border:2px solid #80542e;border-radius:6px}.rankings{display:grid}.rankrow{display:grid;grid-template-columns:60px 1fr 100px 100px;padding:11px;border-bottom:1px solid #8b693c}.rankrow.head{font-weight:bold;background:#b98c52}.guide{padding:35px;max-width:1000px;margin:auto}.guide h2{font-family:Rye;border-bottom:2px solid #80512c;padding-bottom:5px}footer{text-align:center;padding:18px;color:#bca37b;font-size:11px}
/* ========================= WESTERN GAME TABLE ========================= */
.game-layout{width:100%;height:calc(100vh - 64px);min-height:620px;display:grid;grid-template-columns:178px minmax(0,1fr) 270px;gap:10px;padding:10px 12px 12px;position:relative;z-index:1}.game-rail{border:1px solid #6f4426;background:linear-gradient(180deg,#3a2012e8,#241309e8);box-shadow:0 8px 20px #0008;display:flex;flex-direction:column;padding:9px 7px;overflow:hidden}.rail-item{height:49px;display:flex;align-items:center;gap:11px;padding:0 12px;color:#f0d49a;border-bottom:1px solid #6e4427;font-size:13px;text-shadow:1px 1px #160a05}.rail-item span{font-size:23px;width:25px;text-align:center;color:#e0b766}.rail-item:hover{background:#70431f}.rail-spacer{flex:1}
.game-main{min-width:0;min-height:0;display:flex;align-items:stretch;justify-content:center}.table-frame{width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}.saloon-table{position:relative;width:min(100%,1080px);height:min(100%,760px);aspect-ratio:1.48/1;border-radius:50%;background:radial-gradient(ellipse at 50% 48%,#1a5b42 0%,var(--felt) 44%,var(--felt2) 82%);border:22px solid #704321;box-shadow:inset 0 0 0 4px #2c1a0f,inset 0 0 0 9px #9b6b36,inset 0 0 55px #000a,0 14px 30px #000b;overflow:hidden}.saloon-table:before{content:"";position:absolute;inset:10px;border:2px solid #c3944e;border-radius:50%;opacity:.65;pointer-events:none}.saloon-table:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 15%,#fff2 0,#0000 28%),linear-gradient(90deg,#0000 0 48%,#fff1 50%,#0000 52%);opacity:.13;pointer-events:none}.table-light{position:absolute;width:42%;height:24%;left:29%;top:0;background:radial-gradient(ellipse,#ffe6a633,#0000 70%);pointer-events:none}.table-brand{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);text-align:center;color:#b79b68;opacity:.62;pointer-events:none;text-shadow:2px 3px #09271d}.table-brand strong{display:block;font:clamp(28px,4vw,55px) Rye;letter-spacing:2px}.table-brand small{display:block;font-size:10px;letter-spacing:4px;margin-top:3px}
.seat{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,#3a2418f5,#1e120bf5);border:2px solid #a77339;border-radius:34px;padding:5px 10px 5px 5px;min-width:155px;box-shadow:0 4px 12px #000b;color:#f7e8c5}.seat b{display:block;font-size:13px}.seat small{display:block;color:#e2c78f;font-size:11px;margin-top:2px}.seat i{margin-left:auto;color:#48dc63;font-style:normal;font-size:12px}.seat.active{box-shadow:0 0 0 2px #e1b34f,0 5px 15px #000b}.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#5a4632,#160f0a 65%);border:2px solid #d0a154;font-size:25px;flex:0 0 auto}.seat1{top:16px;left:50%;transform:translateX(-50%)}.seat2{top:21%;right:2.5%}.seat3{top:49%;right:0}.seat4{bottom:17%;right:4%}.seat5{bottom:17%;left:4%}.seat6{top:49%;left:0}
.deck-area,.discard-area,.open-cards-area{position:absolute;z-index:3;display:grid;justify-items:center;gap:3px;color:#e0cb9d;font-size:10px;text-shadow:1px 1px #000}.deck-area{left:28%;top:42%}.discard-area{right:28%;top:42%}.deck,.discard{width:66px;height:94px;border-radius:7px;background:#efe4cb;color:#8d2929;border:3px solid #fff;display:grid;place-items:center;font-size:19px;box-shadow:4px 5px 9px #000a}.deck{background:repeating-linear-gradient(45deg,#7e2222 0 5px,#d4a36d 5px 8px);color:#fff}.cup{position:absolute;z-index:5;left:50%;top:42%;transform:translate(-50%,-50%);width:92px;text-align:center;background:linear-gradient(#6a3b20,#3d2113);padding:7px 10px 9px;border-radius:9px;border:2px solid #ad783c;box-shadow:0 7px 16px #000b}.cup-icon{font-size:34px;line-height:34px}.cup b{display:block;font:15px Rye;color:#e6bd6b}.cup strong{display:block;font:700 25px 'Roboto Slab'}.cup span{font-size:9px;color:#d9c293}.cup.pulse{animation:cupPulse .35s ease}@keyframes cupPulse{50%{transform:translate(-50%,-50%) scale(1.08);filter:brightness(1.3)}}
.open-cards-area{left:50%;top:22%;transform:translateX(-50%)}.open-cards{display:flex;gap:4px;min-height:58px}.open-cards .card{width:41px;height:59px;font-size:15px;padding:3px}.open-cards .card span{font-size:17px}.dealer-choice{position:absolute;z-index:20;left:50%;top:54%;transform:translate(-50%,-50%);width:min(430px,76%);padding:14px;background:#21120df5;border:3px solid #c38b45;border-radius:7px;box-shadow:0 10px 28px #000d;text-align:center}.dealer-title{font:21px Rye;color:#f2cf82}.dealer-sub{font-size:12px;margin:7px 0 10px;color:#e6d4b0}.dealer-preview{display:flex;justify-content:center;gap:6px;margin:6px 0 12px}.dealer-preview .card{width:54px;height:78px;font-size:20px}.dealer-actions{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}
.my-area{position:absolute;z-index:8;bottom:8px;left:50%;transform:translateX(-50%);width:min(600px,72%);text-align:center}.my-cards{display:flex;justify-content:center;gap:7px;min-height:96px}.card{width:65px;height:94px;background:#f5ead2;color:#24160d;border-radius:7px;border:3px solid #fff;box-shadow:3px 5px 8px #000a;display:flex;flex-direction:column;justify-content:space-between;padding:5px;font-size:25px;text-align:left}.card b{font-weight:700}.card span{font-size:29px;align-self:flex-end}.card.red{color:#a32c2c}.card.back{background:repeating-linear-gradient(45deg,#3c2520 0 5px,#c39b68 5px 7px);color:#fff;align-items:center;justify-content:center}.card.selectable{cursor:pointer;transition:.12s}.card.selectable:hover{transform:translateY(-10px)}.turn-banner{margin:3px auto;background:linear-gradient(#a96d34,#75431f);color:#fff0c8;padding:6px 14px;border-radius:4px;border:2px solid #d4a15c;font-weight:bold;max-width:330px;font-size:13px;box-shadow:0 2px 7px #0008}.actions{display:flex;justify-content:center;gap:6px;flex-wrap:nowrap}.actions .btn{font-size:12px;padding:8px 10px;white-space:nowrap}.hint{font-size:10px;color:#ddca9f;margin-top:3px}.hint.notice{animation:westernNotice .35s ease;color:#fff0c8}@keyframes westernNotice{0%{transform:scale(.96);opacity:.5}60%{transform:scale(1.03);opacity:1}100%{transform:scale(1);opacity:1}}
.game-sidebar{min-width:0;display:flex;flex-direction:column;gap:9px;overflow:hidden}.side-card{background:linear-gradient(180deg,#26150ef2,#170c08f2);border:2px solid #85562c;border-radius:5px;padding:10px;box-shadow:0 5px 15px #0008}.side-card h3{font:16px Rye;color:#e7bf70;margin:0 0 7px;text-shadow:1px 1px #120805}.player-line{display:flex;justify-content:space-between;align-items:center;padding:5px 4px;border-bottom:1px solid #4b2d1c;font-size:12px}.player-line:last-child{border-bottom:0}.chat{flex:1;min-height:0}.chatlog{height:100%;min-height:100px;max-height:220px;overflow:auto;background:#120906;padding:7px;font-size:11px;color:#ddd;border:1px solid #321b10}.chat form{display:flex;margin-top:6px}.chat input{min-width:0;flex:1;padding:7px;font-size:11px}.rank-mini-row{display:flex;justify-content:space-between;padding:4px 3px;font-size:11px;border-bottom:1px solid #4b2d1c}.side-link{display:block;text-align:right;margin-top:7px;font-size:10px}.game-summary{font-size:11px;line-height:1.5}
/* tablet */
@media(max-width:1150px){.game-layout{grid-template-columns:150px minmax(0,1fr) 235px;gap:7px;padding:7px}.rail-item{padding:0 7px;gap:7px;font-size:12px}.seat{min-width:135px}.seat b{font-size:11px}.seat small{font-size:9px}.avatar{width:38px;height:38px;font-size:21px}.my-area{width:78%}.card{width:58px;height:84px;font-size:22px}.card span{font-size:25px}.deck,.discard{width:58px;height:83px}.cup{width:78px}.cup-icon{font-size:28px}.cup strong{font-size:22px}}
/* tablet portrait / small tablet */
@media(max-width:900px){.topbar{height:58px}.game-layout{height:auto;min-height:calc(100vh - 58px);grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;padding:7px}.game-rail{display:none}.game-main{min-height:600px}.saloon-table{width:min(100%,900px);height:auto;min-height:600px}.game-sidebar{display:grid;grid-template-columns:1fr 1fr;overflow:visible}.chat{min-height:220px}.rank-mini{min-height:120px}.chatlog{max-height:150px}}
/* phones */
@media(max-width:600px){body{background:linear-gradient(90deg,#261309,#4a2918,#261309)}.topbar{padding:0 9px;height:54px}.brand{font-size:14px}.brand span{font-size:17px}.topbar nav{gap:0}.topbar nav a{font-size:10px;padding:6px 5px}.topbar nav a:nth-child(n+4){display:none}.game-layout{padding:4px;gap:5px;min-height:calc(100vh - 54px)}.game-main{min-height:470px}.saloon-table{min-height:470px;border-width:13px;aspect-ratio:1/1;max-height:calc(100vh - 320px);border-radius:44%}.saloon-table:before{inset:7px}.seat{min-width:105px;padding:3px 6px 3px 3px;gap:5px;border-width:1px}.seat b{font-size:9px}.seat small{font-size:8px}.seat i{font-size:8px}.avatar{width:30px;height:30px;font-size:17px;border-width:1px}.seat1{top:5px}.seat2{top:20%;right:-2px}.seat3{top:45%;right:-3px}.seat4{bottom:21%;right:2px}.seat5{bottom:21%;left:2px}.seat6{top:45%;left:-3px}.deck-area{left:18%;top:39%}.discard-area{right:18%;top:39%}.deck,.discard{width:46px;height:66px;font-size:15px;border-width:2px}.deck-area,.discard-area,.open-cards-area{font-size:8px}.cup{top:39%;width:62px;padding:4px 5px 6px;border-width:1px}.cup-icon{font-size:23px;line-height:23px}.cup b{font-size:10px}.cup strong{font-size:18px}.cup span{font-size:7px}.table-brand{top:51%}.table-brand strong{font-size:25px}.table-brand small{font-size:7px;letter-spacing:2px}.open-cards-area{top:23%}.open-cards{min-height:44px}.open-cards .card{width:30px;height:43px;font-size:10px}.open-cards .card span{font-size:12px}.my-area{bottom:5px;width:96%}.my-cards{gap:4px;min-height:72px}.card{width:47px;height:68px;font-size:17px;padding:4px;border-width:2px}.card span{font-size:20px}.turn-banner{font-size:10px;padding:4px 7px;margin:2px auto;max-width:250px}.actions{gap:3px}.actions .btn{font-size:9px;padding:6px 5px;border-width:1px}.hint{font-size:8px}.dealer-choice{width:92%;top:53%;padding:9px;border-width:2px}.dealer-title{font-size:15px}.dealer-sub{font-size:9px}.dealer-preview .card{width:40px;height:57px;font-size:14px}.dealer-actions .btn{font-size:9px;padding:6px}.game-sidebar{grid-template-columns:1fr}.chat{min-height:180px}.chatlog{max-height:120px}.side-card{padding:8px}.side-card h3{font-size:13px}}