/* Readable scores at laptop, desktop and 4K sizes; mobile remains scrollable. */
.score-point{cursor:help;pointer-events:all}.score-point:focus{outline:none;stroke:#d8b56c;stroke-width:7px}
.score-popup{margin:0;inset:auto}
.score-popup{position:fixed;z-index:1000;width:clamp(270px,18vw,650px);max-width:calc(100vw - 20px);max-height:80dvh;overflow:auto;box-sizing:border-box;padding:clamp(16px,.8vw,30px);background:#fffcf1;color:#34513d;border:1px solid #c5b789;border-radius:15px;box-shadow:0 12px 35px #102f3a40;font-size:clamp(13px,.57vw,22px);pointer-events:none}
.score-popup h3{font:1.4em var(--serif);margin:0 0 10px}.score-popup p{font-size:1em!important;line-height:1.5;margin:8px 0}.score-popup ul{list-style:none;margin:12px 0 0;padding:0}.score-popup li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:1px solid #e3e5d6;padding:7px 0}.score-popup b{white-space:nowrap}.score-popup small{font-size:.8em}
.difficulty-control{display:flex;flex-direction:column;gap:10px;margin:22px 0;font-size:clamp(15px,.6vw,23px);font-weight:650}.difficulty-control select{font:inherit;background:#fffdf5;border:1px solid #bbcaaa;border-radius:8px;padding:12px;color:inherit;width:100%}.difficulty-control small{font-size:.8em;font-weight:400;line-height:1.6;color:#718264}
/* Disabled buttons must keep their fan transform, including on hover. */
.hand .playing-card:disabled,.hand .playing-card:disabled:hover{transform:translateX(var(--x)) translateY(var(--y)) rotate(var(--rot));z-index:var(--index);animation:none;cursor:default}
.hand .playing-card:disabled .card-face{transform:none;box-shadow:0 2px 4px #16332630}
.hand .playing-card.illegal .card-face{filter:brightness(.68) saturate(.6);transition:filter .2s}
.seat[data-mood="pleased"] .expression-layer,.seat[data-mood="delighted"] .expression-layer{background-image:url('/assets/seated-happy.png');opacity:var(--joy,1)}
.seat[data-mood="happy"] .expression-layer{opacity:var(--joy,1)}
.seat[data-mood="delighted"] .avatar-wrap{animation:joy-nod .7s ease-in-out 2}
@keyframes joy-nod{0%,100%{translate:0 0}40%{translate:0 -5px;rotate:-1deg}70%{rotate:1deg}}
.selected-avatar{--sprite-x:0%;--blink-x:50%;--happy-x:100%;--think-x:0%;--avatar-image:var(--sheet);--blink-image:var(--sheet);--happy-image:var(--sheet);--think-image:var(--sheet);background-image:var(--avatar-image);background-size:300% 100%;background-position:var(--sprite-x) 0;background-repeat:no-repeat}
.avatar-fiete,.avatar-frieda,.avatar-milo{--avatar-image:url('/assets/seated-friends.png');--blink-image:url('/assets/seated-blink.png');--happy-image:url('/assets/seated-happy.png');--think-image:url('/assets/seated-thoughtful.png');--blink-x:var(--sprite-x);--happy-x:var(--sprite-x);--think-x:var(--sprite-x)}
.avatar-frieda{--sprite-x:50%}.avatar-milo{--sprite-x:100%}
.avatar-lotte{--sheet:url('/assets/avatar-lotte.png')}.avatar-bruno{--sheet:url('/assets/avatar-bruno.png')}.avatar-oskar{--sheet:url('/assets/avatar-oskar.png')}.avatar-nelli{--sheet:url('/assets/avatar-nelli.png')}.avatar-greta{--sheet:url('/assets/avatar-greta.png')}.avatar-pepe{--sheet:url('/assets/avatar-pepe.png')}.avatar-ida{--sheet:url('/assets/avatar-ida.png')}.avatar-theo{--sheet:url('/assets/avatar-theo.png')}.avatar-paula{--sheet:url('/assets/avatar-paula.png')}.avatar-anton{--sheet:url('/assets/avatar-anton.png')}
.avatar-wrap .portrait.selected-avatar{background-image:var(--avatar-image);background-position:var(--sprite-x) 0;background-size:300% 100%}
.seat .selected-avatar .expression-layer{background-position:var(--think-x) 0;background-image:var(--think-image);mask-image:radial-gradient(ellipse 37% 30% at 50% 36%,#000 75%,transparent 100%)}
.seat:is([data-mood="happy"],[data-mood="pleased"],[data-mood="delighted"]) .selected-avatar .expression-layer{background-image:var(--happy-image);background-position:var(--happy-x) 0}
.seat .selected-avatar .blink-layer{background-image:var(--blink-image);background-position:var(--blink-x) 0;mask-image:radial-gradient(ellipse 36% 25% at 50% 33%,#000 72%,transparent 100%)}
.seat[data-avatar] .arm-layer{clip-path:polygon(0 60%,100% 60%,100% 100%,68% 100%,55% 84%,45% 84%,32% 100%,0 100%)}
.seat[data-avatar="fiete"] .arm-layer{clip-path:polygon(0 55%,100% 55%,100% 100%,73% 100%,66% 96%,59% 91%,54% 86%,51% 82%,47% 82%,44% 85%,36% 89%,29% 94%,24% 100%,0 100%)}
.seat[data-avatar="frieda"] .arm-layer{clip-path:polygon(0 55%,100% 55%,100% 100%,71% 100%,65% 97%,59% 90%,55% 83%,52% 79%,48% 79%,44% 85%,39% 92%,31% 100%,0 100%)}
.seat[data-avatar="milo"] .arm-layer{clip-path:polygon(0 55%,100% 55%,100% 100%,69% 100%,63% 96%,59% 92%,56% 87%,52% 85%,48% 89%,44% 94%,38% 100%,0 100%)}
.seat[data-avatar="fiete"] .expression-layer{mask-image:radial-gradient(ellipse 38% 30% at 52% 43%,#000 78%,transparent 100%)}
.seat[data-avatar="frieda"] .expression-layer{mask-image:radial-gradient(ellipse 42% 30% at 50% 44%,#000 78%,transparent 100%)}
.seat[data-avatar="milo"] .expression-layer{mask-image:radial-gradient(ellipse 40% 32% at 57% 43%,#000 78%,transparent 100%)}
.seat[data-avatar="fiete"] .blink-layer{mask-image:radial-gradient(ellipse 15% 12% at 40% 36%,#000 75%,transparent 100%),radial-gradient(ellipse 15% 12% at 67% 43%,#000 75%,transparent 100%)}
.seat[data-avatar="frieda"] .blink-layer{mask-image:radial-gradient(ellipse 19% 16% at 40% 38%,#000 75%,transparent 100%),radial-gradient(ellipse 19% 16% at 64% 39%,#000 75%,transparent 100%)}
.seat[data-avatar="milo"] .blink-layer{mask-image:radial-gradient(ellipse 17% 12% at 42% 44%,#000 75%,transparent 100%),radial-gradient(ellipse 17% 12% at 69% 35%,#000 75%,transparent 100%)}
.avatar-picker{margin:24px 0;padding:22px;background:#f7f5ec;color:#34513d;border:1px solid #dedfcc;border-radius:16px}
.avatar-picker h2{font:28px var(--serif)}.avatar-picker>p{font-size:14px;line-height:1.6;margin:8px 0 18px;color:#65745b}
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px}.avatar-grid button{background:#fffdf6;border:2px solid #e3e5d6;border-radius:14px;display:flex;flex-direction:column;align-items:center;padding:10px 6px;gap:4px;min-width:0}
.avatar-grid button[aria-pressed="true"]{border-color:#356449;background:#e4ecdb;box-shadow:0 0 0 2px #d4ddbe}.avatar-grid button:disabled{opacity:.5}.avatar-grid button:not(:disabled):hover{background:#e9eddd}.avatar-grid .portrait{display:block;width:86px;height:86px;background-color:transparent}.avatar-grid strong{font-size:15px}.avatar-grid small{font-size:11px;overflow-wrap:anywhere}.waiting-person>.selected-avatar{display:block;width:65px;height:65px;margin:auto}
.game-chat{padding:18px;min-width:0}.game-chat .chat-heading{display:block}.game-chat h2{font:24px var(--serif)}.game-chat .chat-messages{max-height:210px}.game-chat .chat-form{flex-wrap:wrap}.game-chat .chat-form input{width:100%;min-width:0}.game-chat .chat-form button{margin-left:auto}.live-chat-policy{font-size:14px;line-height:1.5;margin-bottom:12px}.game-chat #live-chat-status{margin:10px 0}
.seat .speech-bubble[data-kind="player"]{max-width:clamp(180px,10vw,380px);font-size:clamp(12px,.55vw,21px);overflow-wrap:anywhere}
.own-chat-bubble{position:absolute;z-index:20;left:18px;bottom:calc(100% - 8px);background:#fcf3de;border:1px solid #d5bc87;color:#36503b;padding:14px 18px;border-radius:16px 16px 16px 0;max-width:min(80vw,420px);font-size:clamp(14px,.6vw,23px);line-height:1.5;overflow-wrap:anywhere;pointer-events:none;box-shadow:0 5px 18px #16332630}
@media(min-width:1800px){
 dialog:has(.rule-option){width:clamp(740px,37vw,1420px);max-width:calc(100vw - 40px);padding:clamp(28px,1.2vw,46px)}
 dialog:has(.rule-option) h2{font-size:clamp(30px,1.2vw,46px)}
 .rule-option label,.online-rule-grid .rule-option label{font-size:clamp(16px,.65vw,25px);line-height:1.5;padding:clamp(12px,.65vw,25px)}
 .rule-option input{width:clamp(18px,.7vw,27px);height:clamp(18px,.7vw,27px)}
 .rule-info{width:clamp(24px,.9vw,35px);height:clamp(24px,.9vw,35px);font-size:clamp(15px,.58vw,22px)}
 .rule-tooltip{font-size:clamp(16px,.65vw,25px);line-height:1.6;padding:18px 22px;width:min(560px,85vw);max-width:85vw}
 .match-controls label,.match-section p,.bot-choice,.sidebar .quiet-button{font-size:clamp(16px,.6vw,23px)}
 .avatar-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.avatar-grid .portrait{width:120px;height:120px}.avatar-grid strong{font-size:22px}.avatar-grid small{font-size:16px}
 .game-chat h2{font-size:32px}.game-chat .chat-message,.game-chat .chat-form,.game-chat .chat-form button,.game-chat .subtle,.live-chat-policy{font-size:clamp(15px,.57vw,22px)}
}
@media(prefers-reduced-motion:reduce){.seat[data-mood="delighted"] .avatar-wrap{animation:none}}
.reduced-motion .seat[data-mood="delighted"] .avatar-wrap{animation:none}
.result-modal,#scores-dialog,#detail-dialog.score-dialog{--score-font:clamp(16px,.7vw,27px);font-size:var(--score-font);width:min(1120px,max(720px,34vw));max-width:calc(100vw - 28px);padding:clamp(24px,1.3vw,50px);max-height:92dvh;scrollbar-gutter:stable}
.result-modal .result-top p,#detail-dialog.score-dialog #detail-content>p{font-size:1em;line-height:1.65;color:#53634e}
.result-modal .result-top h2,.score-dialog .modal-header h2,#scores-dialog h2{font-size:clamp(30px,1.35vw,52px)}
.result-modal .eyebrow,.result-modal .section-eyebrow,.score-dialog .eyebrow,#scores-dialog .eyebrow{font-size:.7em;color:#637258}
.result-score{padding:1em;gap:1em}
.result-modal .result-score,.score-dialog .result-score{font-size:.9em}
.result-modal .result-score strong,.score-dialog .result-score strong{font-size:2.4em;margin:.2em}
.result-modal .result-score span,.result-modal .result-score small,.score-dialog .result-score span,.score-dialog .result-score small{font-size:.85em;color:#59684f}
.result-modal .result-row,.score-dialog .result-row{font-size:1em;padding:.7em 0;line-height:1.45;color:#4e6248;align-items:baseline}
.result-row strong{font-variant-numeric:tabular-nums;flex-shrink:0}
.result-modal .result-total,.score-dialog .result-total{font-size:1.15em;border-top:2px solid #ccd6bd}
.result-modal .result-players,.score-dialog .result-players{font-size:.85em;display:grid;grid-template-columns:1fr 1fr;gap:.65em}
.result-players span{overflow-wrap:anywhere}
.result-modal .primary-button,.result-modal .quiet-button,.score-dialog .primary-button{font-size:.9em;padding:.8em 1em}
.result-modal .close-button,.score-dialog .close-button,#scores-dialog .close-button{width:40px;height:40px;font-size:30px}
.result-modal #result-content>.close-button{float:right}
#scores-content,#detail-content{overflow-x:auto}
#scores-dialog .score-table,.score-dialog .score-table{font-size:1em}
#scores-dialog .score-table th,.score-dialog .score-table th{font-size:.85em;color:#53634e}
.score-table th,.score-table td{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#detail-dialog.score-dialog #detail-content>p.subtle{font-size:.8em}
.solo-choice{position:absolute;z-index:12;top:53%;left:50%;transform:translate(-50%,-50%);width:min(85%,830px);padding:clamp(16px,1vw,32px);border:1px solid #dbd5b9;border-radius:16px;background:#faf7eafa;box-shadow:0 12px 40px #112d3840;text-align:center;color:#284a3a}
.solo-choice h2{font:clamp(22px,1vw,38px) var(--serif);margin:8px 0}
.solo-choice p{font-size:clamp(12px,.55vw,21px);line-height:1.5;margin:8px 0 16px}
.solo-actions{display:flex;flex-wrap:wrap;align-items:end;justify-content:center;gap:12px}
.solo-actions label{display:flex;flex-direction:column;text-align:left;gap:5px;font-size:14px}
.solo-actions select{background:#fffdf7;border:1px solid #c4d0b7;border-radius:6px;padding:10px;font:inherit;color:inherit}
.trick-event{position:absolute;z-index:10;top:48%;left:50%;transform:translate(-50%,-10px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;width:max-content;max-width:85%;text-align:center;background:#fbf3dcf5;border:1px solid #c5a568;border-radius:14px;padding:14px 24px;color:#2c4d3d;box-shadow:0 10px 36px #12392e30}
.trick-event.visible{opacity:1;transform:translate(-50%,0)}
.trick-event strong{display:block;font:clamp(24px,1vw,38px) var(--serif)}
.trick-event span{display:block;font-size:clamp(13px,.55vw,21px);line-height:1.5;margin-top:5px}
.trick-event>div+div{margin-top:10px}
@media(min-width:1800px){
  .game-layout,.online-page .game-layout{grid-template-columns:minmax(0,1fr) clamp(310px,15vw,580px);gap:clamp(18px,1vw,36px)}
  .sidebar{gap:clamp(16px,.8vw,30px)}
  .sidebar .side-card{padding:clamp(22px,1vw,38px);border-radius:18px}
  .sidebar .section-eyebrow{font-size:clamp(11px,.44vw,17px)}
  .sidebar .section-eyebrow>span{font-size:inherit}
  .sidebar h2{font-size:clamp(27px,1.05vw,40px)}
  .sidebar .side-intro,.sidebar .player-details small,.sidebar .sidebar-note p{font-size:clamp(14px,.58vw,22px);line-height:1.6}
  .sidebar .player-list{gap:clamp(20px,1vw,38px);margin-top:clamp(24px,1.1vw,42px)}
  .sidebar .player-row{gap:clamp(12px,.65vw,25px)}
  .sidebar .player-row .portrait{width:clamp(48px,2vw,76px);height:clamp(48px,2vw,76px)}
  .sidebar .player-details strong,.sidebar .player-total,.sidebar .player-row>strong{font-size:clamp(17px,.75vw,28px)}
  .sidebar .player-total small{font-size:clamp(12px,.5vw,19px)}
  .sidebar .rule-chip{font-size:clamp(13px,.55vw,21px);padding:8px 10px}
  .sidebar .tempo-row,.sidebar .tempo-row select,.sidebar .tip-card p,.sidebar .score-link{font-size:clamp(14px,.6vw,23px)}
  .sidebar .tip-card{padding:clamp(20px,.9vw,34px);gap:16px}
  .sidebar .sidebar-note{margin-top:26px;padding-top:24px}
  .solo-actions button,.solo-actions label{font-size:clamp(15px,.6vw,23px)}
}
@media(max-width:600px){
  .result-modal,#scores-dialog,#detail-dialog.score-dialog{padding:18px;--score-font:15px}
  .result-modal .result-players,.score-dialog .result-players{grid-template-columns:1fr}
  .solo-choice{top:59%;padding:12px;width:94%}.solo-choice .eyebrow{display:none}
  .solo-choice p{margin:5px 0 8px}.solo-actions{gap:7px}.solo-actions label{font-size:12px}
  .solo-actions button{padding:10px;font-size:12px}.solo-actions select{padding:8px}
  .trick-event{padding:10px 14px;top:44%}
  .toolbar-right{flex-wrap:wrap;justify-content:flex-end}
}
@media(prefers-reduced-motion:reduce){.trick-event{transition:none}}

.chart-content{margin:12px -8px 0}.score-chart svg{width:100%;height:auto;display:block;overflow:visible}.score-chart svg text{font:17px system-ui,sans-serif;fill:#5b6b52}.chart-legend{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;font-size:13px;margin:6px 0 14px}.chart-legend>span{display:flex;align-items:center;gap:6px;min-width:0}.chart-legend i{width:9px;height:9px;border-radius:50%;flex:none}.chart-legend>span>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chart-legend strong{font-variant-numeric:tabular-nums;margin-left:auto}.chart-empty,.match-summary{font-size:13px;line-height:1.6;color:#526649}.chart-card .quiet-button{display:block;margin:8px 0 0;font-size:12px;text-align:left}.match-section{border-top:1px solid #dfe4d4;margin:20px 0;padding-top:20px}.match-section h3{font:24px var(--serif);margin-bottom:10px}.match-controls{display:flex;gap:14px;margin:14px 0;align-items:end}.match-controls label{display:flex;flex-direction:column;gap:7px;font-size:13px;flex:1}.match-controls select,.match-controls input{font:inherit;color:inherit;border:1px solid #cfd8c2;border-radius:7px;padding:10px;background:#fffdf7;min-width:0;width:100%}.match-controls .match-target{max-width:110px}.match-finished{padding:18px 20px;border:1px solid #d6bc76;background:#f2e7c9;border-radius:12px;margin:16px 0}.match-finished strong{font-size:1.3em}.next-rule-note{font-size:13px;line-height:1.5;background:#f1e6c9;border-radius:7px;padding:10px;margin-top:12px}.tile-goal{font-size:12px;line-height:1.5;color:#617455}.score-dialog .chart-legend,#scores-dialog .chart-legend{font-size:.9em}.score-dialog .score-chart,#scores-dialog .score-chart{margin:20px 0}
@media(min-width:1800px){.sidebar .chart-legend{font-size:clamp(15px,.57vw,22px)}.sidebar .match-summary,.sidebar .chart-empty,.sidebar .next-rule-note,.sidebar .chart-card .quiet-button{font-size:clamp(14px,.55vw,21px)}.table-topline #round-label,.table-topline #online-round{font-size:clamp(14px,.6vw,23px)}}