:root{--ocean-950:#112d3b;--ocean-900:#193847;--ocean-800:#2d4c60;--ocean-700:#47697a;--coral:#d65f4f;--yellow:#efc56d}
.game-intro h1{font-size:clamp(4rem,7vw,7.8rem)}.game-topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:13px;padding-bottom:13px}.mate-score{display:flex;gap:7px}.mate-score span{padding:6px 10px;border:1px solid rgba(255,255,255,.16);border-radius:5px;color:#c6d7df;font-size:.62rem}.mate-score b{margin-left:5px;color:white}.mate-progress{color:#b8cbd6;font-size:.6rem;letter-spacing:.07em;text-transform:uppercase}.mate-progress b{color:white}.mate-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px}.mate-table{display:flex;flex-direction:column;gap:15px;min-width:0;min-height:710px;padding:23px 25px 30px;background:radial-gradient(circle at 50% 46%,rgba(239,197,109,.1),transparent 40%),repeating-radial-gradient(circle at 50% 46%,transparent 0 154px,rgba(255,255,255,.035) 155px 156px,transparent 157px 310px),var(--ocean-800)}.mate-seat{width:100%}.mate-label{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:white;font-size:.72rem}.mate-label .avatar{width:31px;height:31px;background:var(--yellow);color:#17313e}.mate-label .avatar.bot{background:#c47885;color:white}.mate-label small{color:#c9d9e2;font-size:.59rem;text-transform:uppercase}.mate-hand{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;min-height:83px}.mate-hand button{padding:0;border:0;background:transparent;cursor:pointer}.mate-hand button:disabled{opacity:.43;cursor:default}.mate-hand button:not(:disabled):hover .mate-card,.mate-hand button:not(:disabled):focus-visible .mate-card{outline:3px solid var(--yellow);outline-offset:2px;transform:translateY(-6px)}.mate-hand button:focus-visible{outline:0}.mate-card{position:relative;display:block;flex:0 0 auto;width:54px;height:78px;border-radius:6px;background:#fff9ec;color:#18333b;box-shadow:0 5px 12px rgba(0,0,0,.21);font-family:var(--serif)}.mate-card.red{color:#d25e4f}.mate-card>span{position:absolute;top:5px;left:6px;font-size:1rem;line-height:1}.mate-card small{display:block;font-size:.54rem}.mate-card>b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.45rem;font-weight:400}.mate-middle{display:grid;grid-template-columns:1fr minmax(240px,2.5fr) 1fr;gap:10px;align-items:center;flex:1;min-height:265px}.mate-foreplaced{display:contents}.mate-foreplaced>div{text-align:center}.mate-foreplaced small,.mate-move small{display:block;margin-bottom:8px;color:#bfd3df;font-size:.52rem;letter-spacing:.09em;text-transform:uppercase}.mate-foreplaced .mate-card{margin:0 auto;width:42px;height:60px}.mate-foreplaced .mate-card>span{font-size:.8rem}.mate-foreplaced .mate-card>b{font-size:1.2rem}.mate-current{grid-column:2;grid-row:1;text-align:center}.table-kicker{margin:0 0 7px;color:var(--yellow);font-size:.58rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.mate-current h2{margin:0;color:#fff7e8;font-family:var(--serif);font-size:clamp(1.4rem,2.3vw,2.15rem);font-weight:400;line-height:1.1}.mate-move{display:flex;justify-content:center;gap:20px;margin:20px 0 0}.mate-move .mate-card,.empty-card{display:grid;place-items:center;width:57px;height:82px;margin:auto;border-radius:6px}.empty-card{border:1px dashed rgba(255,255,255,.32);color:#c1d6dc;font-size:.58rem}.mate-message{min-height:38px;margin:15px 0 0;color:#d7e5e9;font-size:.68rem;line-height:1.5}.mate-seat.you{padding-top:18px;border-top:1px solid rgba(255,255,255,.17)}.mate-skip{display:block;margin:12px auto 0;padding:10px 14px;border:1px solid var(--yellow);border-radius:4px;background:var(--yellow);color:#17313e;font-size:.66rem;font-weight:700;cursor:pointer}.mate-skip[hidden]{display:none}.no-cards{align-self:center;color:#cadbe0;font-size:.63rem}.game-panel{gap:17px;padding:24px 21px;background:#172e3a}.action-card p{min-height:0}.history-panel ol{max-height:320px}.history-panel li{display:block}.result-dialog{inset:0}.result-card{max-height:calc(100vh - 40px);overflow-y:auto}.result-card>button{width:100%;min-height:43px;border:0;background:var(--coral);color:#fff;font-weight:700;cursor:pointer}.mate-result-score{margin:18px 0;padding:13px;background:#e9decb;color:#17313c;font-family:var(--serif);font-size:1.45rem}.result-card>p[data-match-summary]{font-size:.73rem}.rules{padding-top:86px}.rules-grid article{min-height:190px}.game-background{margin-top:0}.game-taxonomy{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:27px}
@media(max-width:1100px){.mate-layout{grid-template-columns:1fr}.game-panel{display:grid;grid-template-columns:1fr 1fr}.history-panel{grid-column:1/-1}.mate-table{min-height:625px}.rules{grid-template-columns:1fr}}
@media(max-width:760px){.site-header nav a:first-child{display:inline}.game-topbar{padding:12px 16px}.mate-progress{order:3;width:100%;text-align:center;font-size:.53rem}.mate-table{min-height:0;padding:17px 9px 22px}.mate-hand{gap:3px;min-height:69px}.mate-card{width:42px;height:61px}.mate-card>span{top:4px;left:4px;font-size:.77rem}.mate-card small{font-size:.43rem}.mate-card>b{font-size:1.12rem}.mate-middle{grid-template-columns:58px minmax(0,1fr) 58px;min-height:230px;gap:4px}.mate-current h2{font-size:1.5rem}.mate-foreplaced small{font-size:.45rem}.mate-foreplaced .mate-card{width:35px;height:51px}.mate-move{gap:11px}.mate-move .mate-card,.empty-card{width:42px;height:61px}.game-panel{display:flex;padding:19px 17px}.rules{padding:60px 18px}.rules-grid article{min-height:0;padding:1.3rem 0}.game-taxonomy{grid-template-columns:1fr}.result-card{padding:1.5rem}}
@media(max-width:390px){.mate-card{width:38px;height:56px}.mate-hand{gap:2px}.mate-score span{font-size:.55rem}}
.mate-used{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.13)}.mate-used>div{min-width:0}.mate-used small{display:block;margin-bottom:7px;color:#c8d9df;font-size:.53rem;letter-spacing:.08em;text-transform:uppercase}.mate-used>div>div{display:flex;flex-wrap:wrap;gap:3px;min-height:42px}.mate-used .mate-card{width:27px;height:39px;border-radius:3px}.mate-used .mate-card>span{top:3px;left:3px;font-size:.53rem}.mate-used .mate-card small{margin:0;font-size:.34rem}.mate-used .mate-card>b{font-size:.75rem}
