/* Shared icon controls below the game player. */
.player-toolbar .player-icon-button{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid transparent;border-radius:13px;background:#ffffff0b;color:#dce2ec;cursor:pointer;touch-action:manipulation;transition:background .15s,color .15s,border-color .15s}
.player-toolbar .player-icon-button:hover{background:#ffffff1b;color:#fff;border-color:#ffffff24}
.player-toolbar .player-icon-button:focus-visible{outline:2px solid #b49af4;outline-offset:3px;background:#ffffff16}
.player-toolbar .player-icon-button .icon{display:block;width:24px;height:24px;stroke-width:1.8;pointer-events:none}
.player-toolbar #sound-toggle[data-muted="false"] .player-sound-off,.player-toolbar #sound-toggle[data-muted="true"] .player-sound-on,.player-toolbar #fullscreen-toggle[aria-pressed="false"] .player-contract,.player-toolbar #fullscreen-toggle[aria-pressed="true"] .player-expand{display:none}
.player-toolbar #sound-toggle[data-muted="true"]{color:#c7afff;background:#8b5cf61a}
.player-toolbar .player-icon-button[aria-disabled="true"]{opacity:.55;cursor:default}
.player-toolbar .player-tooltip::after{content:attr(data-tooltip);position:absolute;z-index:70;right:0;bottom:calc(100% + 11px);width:max-content;max-width:min(260px,calc(100vw - 28px));padding:8px 12px;border:1px solid #ffffff18;border-radius:9px;background:#11151ef5;box-shadow:0 5px 18px #0005;color:#f7f8fc;font-size:15px;font-weight:600;line-height:1.45;white-space:normal;text-align:center;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .13s,transform .13s,visibility .13s;pointer-events:none}
.player-toolbar .player-tooltip::before{content:"";position:absolute;z-index:71;bottom:calc(100% + 5px);right:16px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #11151ef5;opacity:0;visibility:hidden;transition:opacity .13s,visibility .13s;pointer-events:none}
.player-toolbar .player-tooltip:focus-visible::after,.player-toolbar .player-tooltip:focus-visible::before{opacity:1;visibility:visible;transform:translateY(0)}
@media(hover:hover){.player-toolbar .player-tooltip:hover::after,.player-toolbar .player-tooltip:hover::before{opacity:1;visibility:visible;transform:translateY(0)}}
@media(max-width:480px){.player-toolbar .player-toolbar-actions{gap:9px}.player-toolbar .player-icon-button{flex-basis:44px}}
@media(prefers-reduced-motion:reduce){.player-toolbar .player-icon-button,.player-toolbar .player-tooltip::before,.player-toolbar .player-tooltip::after{transition:none}}

/* Keep favorite state in the existing form and client handler. */
.player-toolbar .favorite-button.player-icon-button .icon{width:26px;height:26px;stroke-width:2.4}
.player-toolbar .favorite-button.player-icon-button[aria-pressed="true"]{background:#663b56;border-color:#945270;color:#ffc0d7}
.player-toolbar .favorite-button.player-icon-button[aria-pressed="true"]::after{content:attr(data-tooltip-remove)}

/* Title and voting stay together; the form reuses the existing vote endpoint. */
.player-toolbar>.player-toolbar-title{display:flex;align-items:center;justify-content:flex-start;flex:1 1 350px;min-width:0;gap:14px;margin:0;overflow:visible}
.player-toolbar .player-toolbar-title h1{flex:1 1 auto;min-width:0;margin:0;padding:0;font-size:24px;font-weight:750;line-height:1.25;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-toolbar>.player-toolbar-actions{max-width:100%;column-gap:8px;row-gap:8px}
.player-toolbar .invite-friend-button{margin-right:0}
.player-toolbar .player-system-actions{display:flex;align-items:center;flex:0 0 auto;gap:8px}
.player-toolbar .player-share-button .icon,.player-toolbar .player-report-button .icon{width:26px;height:26px;stroke-width:2.4}
.player-toolbar .player-report-button{color:#fff}
@media(max-width:760px){.player-toolbar>.player-toolbar-title{flex-basis:100%}.player-toolbar .player-toolbar-title h1{font-size:22px}}
@media(max-width:480px){.player-toolbar>.player-toolbar-title{gap:10px}.player-toolbar>.player-toolbar-actions{column-gap:8px;row-gap:8px}}

/* Inline game tags; keep directory tags unchanged. */
.game-page .game-tags{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.game-page .game-tags h2{flex:0 0 auto;margin:0 4px 0 0;white-space:nowrap}
.game-page .game-tags .tag-list{display:contents}
.game-page .game-tags .tag-list a{max-width:100%;font-size:20px}
@media(max-width:760px){.game-page .game-tags .tag-list a{font-size:19px}}

/* One personal thumbs vote; counts are shown only in the admin panel. */
.player-toolbar .game-vote{display:flex;align-items:center;flex:0 0 auto;gap:4px;width:auto;margin:0}
.player-toolbar .game-vote-button{color:#fff}
.player-toolbar .game-vote-button .icon{width:26px;height:26px;stroke-width:2.2}
.player-toolbar .game-vote-up[aria-pressed="true"]{color:#a8f4cd;background:#2b694c;border-color:#4a9d76}
.player-toolbar .game-vote-down[aria-pressed="true"]{color:#ffc0c9;background:#753a46;border-color:#ad5869}
.player-toolbar .game-vote-button[aria-pressed="true"] .icon{fill:currentColor;fill-opacity:.15}
.player-toolbar .game-vote-button:disabled{cursor:wait;opacity:.65}

/* Shorten the inline game field by 76 CSS pixels (about two centimetres).
   Percentage padding preserves the width-based ratio without a size container. */
.game-page .game-player{height:0;min-height:0;max-height:none;aspect-ratio:auto;padding-top:max(0px,calc(min(calc(100% / (var(--game-ratio,3/2))),max(120px,calc(100vh - 210px))) - 76px));padding-top:max(0px,calc(min(calc(100% / (var(--game-ratio,3/2))),max(120px,calc(100dvh - 210px))) - 76px))}
.game-page .game-player.is-viewport-fullscreen{height:100vh;height:100dvh;padding-top:0}
.game-page .game-player:fullscreen{height:100vh;height:100dvh;padding-top:0}
.game-page .game-player:-webkit-full-screen{height:100vh;height:100dvh;padding-top:0}


/* Own HTML5 launch menus need a usable mobile viewport, not a shortened card ratio.
   Specificity stays below the existing native/WebKit/fallback fullscreen rules. */
@media(max-width:760px) and (orientation:portrait){
 .game-page [data-owned-game="true"]{height:min(650px,calc(100vh - 100px));height:min(650px,calc(100dvh - 100px));padding-top:0}
}
@media(max-width:980px) and (max-height:600px) and (orientation:landscape){
 .game-page [data-owned-game="true"]{height:min(390px,calc(100vh - 56px));height:min(390px,calc(100dvh - 56px));padding-top:0}
}

/* Keep enlarged tooltips inside narrow viewports. */
@media(max-width:480px){
 .player-toolbar .player-tooltip::after{position:fixed;left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));width:auto;max-width:none}
 .player-toolbar .player-tooltip::before{display:none}
}