/* Yacheika 16 v0.7.7. Keep the version in the URL when updating the font. */
@font-face{font-family:"Yacheika 16";src:url('/assets/fonts/Yacheika16-v077-Variable.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
:root{--font-ui:"Yacheika 16",sans-serif}
body{font-family:var(--font-ui);font-size:18px;font-weight:500;font-kerning:normal;font-synthesis:none;letter-spacing:0}
button,input,textarea,select{font-family:var(--font-ui);font-synthesis:none}
h1,h2,h3,strong{font-weight:600}
.pixel-frame{font:500 18px/20px var(--font-ui)}
.pixel-bubble>.pixel-content{padding:5px 5px 7px}
.player-info-text{padding:5px 0 7px;line-height:20px}
.hand-turn-badge{font-weight:600}
.hand-turn-badge>.pixel-content{padding:5px 5px 7px 6px}
.my-turn-announcement{font-family:var(--font-ui);font-weight:700}
.team-badge img{display:block;width:20px;height:20px;max-width:none}

/* Game 89:91918: the viewport header stays separate from the scaled board. */
body.playing .table-stage>.table-header-menu{--top-menu-height:clamp(30px,calc(40px * var(--ui-scale)),40px);position:absolute;top:0;left:50%;transform:translateX(-50%);gap:10px;height:var(--top-menu-height);z-index:40}
body.playing .table-stage .table-header-menu .top-menu-button{width:44px;height:auto;min-height:var(--top-menu-height);padding:0 5px;inset:auto;position:relative}
/* The same edge frame rotates at the left/right screen edges; icons stay upright. */
.edge-menu-button{--edge-depth:40px;--edge-angle:0deg;outline:0}
.edge-menu-button>.pixel-content{translate:0 0;transition:translate 140ms ease-out}
.top-menu-button:is(:hover,:focus-visible)>.pixel-content{translate:0 5px}
.edge-left:is(:hover,:focus-visible)>.pixel-content{translate:5px 0}
.edge-right:is(:hover,:focus-visible)>.pixel-content{translate:-5px 0}
.edge-button-surface{position:absolute;left:50%;top:50%;width:44px;height:100%;transform:translate(-50%,-50%) rotate(var(--edge-angle));z-index:-1;pointer-events:none}
.edge-button-surface .pixel-corner-tl,.edge-button-surface .pixel-corner-tr{display:none}
.edge-button-surface>.pixel-skin:before{inset:0 0 5px}
.edge-button-surface>.pixel-skin:after{inset:0 5px}
body.playing .table-stage .table-header-menu{align-items:flex-start}
body.playing .table-stage .table-header-menu .top-menu-button{transition:padding-bottom 140ms ease-out}
body.playing .table-stage .table-header-menu .top-menu-button:is(:hover,:focus-visible){padding-bottom:5px}
.top-menu-button>.pixel-content{width:34px;height:var(--top-menu-height);padding:0 5px}
.side-menu-button{width:40px;height:44px;min-height:44px;padding:0;transition:width 140ms ease-out}
.side-menu-button .edge-button-surface{width:44px;height:var(--edge-depth);transition:height 140ms ease-out}
.side-menu-button:is(:hover,:focus-visible){--edge-depth:45px;width:45px}
.side-menu-button>.pixel-content{width:40px;height:44px;padding:0}
.edge-left{--edge-angle:-90deg}.edge-right{--edge-angle:90deg}
.edge-right>.pixel-content{margin-left:auto}
@media(prefers-reduced-motion:reduce){body.playing .table-stage .table-header-menu .top-menu-button,.side-menu-button,.side-menu-button .edge-button-surface,.edge-menu-button>.pixel-content{transition:none}}
body.playing .table-stage .demo-toolbar{top:auto;bottom:2px;left:50%;transform:translateX(-50%);max-width:calc(100% - 48px);font-size:12px;line-height:16px;z-index:50;opacity:.75}
.table-turn-heading{position:absolute;left:50%;top:29.183267%;transform:translateX(-50%);max-width:80%;overflow:hidden;text-overflow:ellipsis;font:700 clamp(18px,calc(24px * var(--ui-scale)),30px)/1.25 var(--font-ui);color:#e8dac7;text-align:center;text-transform:uppercase;white-space:nowrap;pointer-events:none;z-index:6}
body.playing .table-stage .current-turn-label{font:500 18px/20px var(--font-ui);max-width:calc(var(--field-size) - 70px);white-space:normal;text-align:center}
.current-turn-label:empty{display:none}
.compact-controls .current-turn-label{font-size:16px!important;line-height:20px!important}
.exchange-first-player{margin-top:4px}
body.playing .table-stage .table-piles .round-counter{position:absolute;bottom:calc(100% + 16px);left:50%;transform:translateX(-50%);white-space:nowrap}
body.playing .table-stage .table-piles .pixel-bubble{font-size:clamp(14px,calc(18px * var(--ui-scale)),22px);line-height:20px;font-weight:500}
.table-piles .muted{color:#7f6c6c;font-weight:500}.table-piles strong{font-weight:600}
.table-card-controls{gap:8px}
.table-card-controls .pixel-frame,.exchange-change-button{font-size:18px;line-height:20px;font-weight:600}
.table-change-card>.pixel-content,.exchange-change-button>.pixel-content{padding:10px 10px 12px}
.center-card-status>.pixel-content,.center-primary>.pixel-content{padding:0 10px;gap:7px}
.center-action-text{padding:10px 0 12px}
.center-seven-dots{padding-top:2px}

/* Keep the bottom card anchored as the pile grows upwards. */
body.playing .table-stage .table-card-stack>img{top:calc((5 - var(--stack-count) + var(--stack-index)) * 3px * var(--ui-scale))}

/* Rows stay 32px high. Capacity grows with the clear space between the hands. */
.table-history{width:max-content;max-width:calc((100vw - var(--field-size))/2 - 48px);height:auto;max-height:var(--side-height)}
.history-heading{font:500 14px/16px var(--font-ui);color:#7f6c6c;letter-spacing:1.54px}
.history-bubble{font:500 18px/20px var(--font-ui)}
.history-bubble>.pixel-content{padding:0 5px}
.history-text{padding:5px 0 7px;line-height:20px}
.history-preview .player-nickname{max-width:120px}
.history-preview-row:nth-child(5),.history-preview-row:nth-child(6){opacity:1}
.history-preview:has(>:nth-child(5))>.history-preview-row:nth-last-child(2){opacity:.5}
.history-preview:has(>:nth-child(5))>.history-preview-row:last-child{opacity:.25}
.table-stage.compact-history .table-history{max-width:none}

/* Fixed message viewport; the composer grows below it without moving messages. */
.table-chat-stream{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-end;gap:6px;width:var(--chat-width,328px);height:calc(var(--side-height,389px) - 38px);min-height:58px;color:#e8dac7}
body.playing .table-stage>.table-chat-stream{position:absolute;right:24px;top:50%;transform:translateY(calc(-50% - 20px));z-index:14}
.chat-stream-heading{flex:none;margin:0;border:0;background:none;padding:0 0 4px;font:500 14px/16px var(--font-ui);letter-spacing:1.54px;text-transform:uppercase;color:#aa9898;cursor:pointer}
.chat-stream-heading:hover,.chat-stream-heading:focus-visible{color:#e8dac7}
.chat-compact-button{display:none}
.chat-stream-content{position:relative;display:flex;flex:1;flex-direction:column;align-items:flex-end;min-height:0;max-width:100%;width:100%}
.chat-stream-content:after{content:"";position:absolute;top:100%;right:0;width:min(300px,100%);height:6px}
.chat-stream-list{display:flex;flex-direction:column;align-items:flex-end;gap:6px;overflow:auto;max-width:100%;width:100%;height:100%;scrollbar-width:none;overscroll-behavior:contain;overflow-anchor:none}
.chat-stream-list:before{content:"";margin-top:auto}
.chat-stream-list.is-scrolled{mask-image:linear-gradient(to bottom,transparent,#000 32px)}
.chat-message-bubble{width:fit-content;max-width:100%;min-height:32px;flex:none;font:500 18px/20px var(--font-ui);white-space:normal}
.chat-message-bubble>.pixel-content{min-width:0;max-width:100%;padding:5px 5px 7px}
.chat-copy{display:block;min-width:0;overflow-wrap:anywhere;white-space:pre-wrap;text-align:left}
.chat-message-name{font-weight:500}
.chat-stream-form{position:absolute;right:0;top:calc(100% + 6px);width:min(300px,100%);min-height:32px;font:500 18px/20px var(--font-ui);outline:0}
.chat-stream-form[hidden]{display:none}
.chat-stream-form>.pixel-content{width:100%;min-width:0;align-items:center;gap:6px;padding:0 5px}
.chat-stream-form textarea{box-sizing:border-box;display:block;min-width:0;width:100%;height:32px;min-height:32px;max-height:72px;resize:none;overflow-y:auto;scrollbar-width:none;margin:0;padding:5px 0 7px;border:0;outline:0;background:none;color:#e8dac7;font:500 18px/20px var(--font-ui);box-shadow:none;border-radius:0}
.chat-stream-form textarea::placeholder{color:#7f6c6c;opacity:1}
.chat-stream-form textarea:focus-visible{outline:0}
.chat-stream-list::-webkit-scrollbar,.chat-stream-form textarea::-webkit-scrollbar{display:none}
.chat-send{display:flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.chat-send img{width:20px;height:20px;max-width:none;display:block}
.chat-send:disabled{cursor:default;opacity:.4}
.chat-stream-form:has(textarea:placeholder-shown) .chat-send{display:none}
.table-stage.compact-history .table-history{left:0;width:45px;height:44px}
body.playing .table-stage.compact-chat>.table-chat-stream:not(.composer-open){right:0;width:45px;height:44px;min-height:0;transform:translateY(-50%)}
.compact-chat .chat-stream-heading{display:none}
.compact-chat .chat-compact-button{display:inline-flex;position:absolute;right:0;top:0}
body.playing .table-stage.compact-chat>.table-chat-stream:not(.composer-open) .chat-stream-content{display:none}
body.playing .table-stage.compact-chat>.table-chat-stream.composer-open{right:56px;width:328px;max-width:calc(100vw - 80px);padding-top:50px}
.compact-chat .composer-open .chat-compact-button{right:-56px;top:calc(50% + 20px);transform:translateY(-50%)}
.waiting-layout .table-chat-stream{width:100%;--side-height:420px;margin-bottom:78px}