/* One geometry for the visible app, fixed bars and every snap card. */
:root{--app-height:100vh;--app-top:0px;--header-height:84px;--strip-height:36px;--nav-height:0px;--feed-height:calc(var(--app-height) - var(--header-height) - var(--strip-height) - var(--nav-height))}
@supports(height:100dvh){:root{--app-height:100dvh}}
.topbar{top:var(--app-top);height:var(--header-height)}
.incubator-strip{top:calc(var(--app-top) + var(--header-height));height:var(--strip-height)}
.feed{top:calc(var(--app-top) + var(--header-height) + var(--strip-height));height:var(--feed-height)}
.game-card{height:var(--feed-height);min-height:var(--feed-height);max-height:var(--feed-height)}
dialog[open]{position:fixed;top:calc(var(--app-top) + var(--app-height)*.05);bottom:auto;max-height:calc(var(--app-height)*.9);margin:0 auto;overflow-y:auto;overscroll-behavior:contain}
@media(max-width:700px),(max-width:1000px) and (max-height:500px){
 :root{--header-height:calc(56px + env(safe-area-inset-top,0px));--strip-height:38px;--nav-height:calc(56px + env(safe-area-inset-bottom,0px))}
 .topbar{padding-top:env(safe-area-inset-top,0px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
 .topbar{gap:8px}.brand img{width:clamp(112px,35vw,143px)}.lang-pick{min-width:0;flex-shrink:1;max-width:130px}.lang-pick select{min-width:0}.submit-game{flex-shrink:0}
 .feed{left:0;right:0}.game-card{overflow:hidden}
 .mobile-nav{top:calc(var(--app-top) + var(--app-height) - var(--nav-height));bottom:auto;height:var(--nav-height);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
 .game-actions{top:58px;bottom:12px;max-height:380px;height:auto;margin-block:auto;align-self:auto;justify-content:space-evenly;gap:4px;padding:0;right:calc(7px + env(safe-area-inset-right,0px));width:48px}
 .game-actions .action{flex-shrink:0;min-height:44px;width:48px;gap:3px;line-height:1.25}.game-actions .icon{width:36px;height:36px}
 .game-card.playing .game-actions{top:58px;bottom:12px;gap:4px;max-height:220px}
 .game-top{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
 .game-info{padding-right:calc(70px + env(safe-area-inset-right,0px));padding-left:max(18px,env(safe-area-inset-left,0px))}
 .toast{bottom:auto;top:calc(var(--app-top) + var(--app-height) - var(--nav-height) - 60px)}
 .compact-feed .game-info{display:none}
 .compact-feed .game-actions{display:grid;grid-template-columns:repeat(2,44px);grid-auto-rows:minmax(44px,1fr);width:92px;gap:4px;top:52px;bottom:8px;max-height:160px;align-items:center;justify-items:center}
 .compact-feed .game-actions .action{width:44px;min-height:44px;justify-content:center}.compact-feed .game-actions .icon{width:32px;height:32px;font-size:20px}.compact-feed .game-actions .action>span:not(.icon){display:none}
 .compact-feed .game-card.playing .game-actions{display:flex;max-height:160px;width:44px}
}
@media(max-width:1000px) and (max-height:500px){
 :root{--header-height:calc(48px + env(safe-area-inset-top,0px));--strip-height:30px;--nav-height:calc(48px + env(safe-area-inset-bottom,0px))}
 .mobile-nav a,.mobile-nav button{height:48px}.is-demo .game-info{display:none}
 .game-actions{display:grid;grid-template-columns:repeat(2,44px);grid-auto-rows:minmax(44px,1fr);width:92px;gap:4px;top:52px;bottom:8px;max-height:160px;align-items:center;justify-items:center}
 .game-actions .action{width:44px;min-height:44px;justify-content:center}.game-actions .icon{width:32px;height:32px;font-size:20px}.game-actions .action>span:not(.icon){display:none}.game-actions .like{position:relative}.game-actions .like .action-count{display:block!important;position:absolute;right:-1px;bottom:-1px;background:#10162b;border-radius:8px;padding:1px 3px;font-size:9px!important}
 .game-card.playing .game-actions{display:flex;max-height:160px;width:44px}
}

/* 2026-11-07 Game-safe frame: on phones nothing of Gogashare is drawn on top of the game.
   Any game (including user-made ones we cannot change) gets a rectangle of its own;
   labels sit in a row above it and the buttons in a bar below it (portrait) or a column beside it (landscape). */
.game-top{height:52px;padding-block:0;flex-wrap:nowrap;overflow:hidden;background:#0b1021;border-bottom:1px solid #ffffff12}
.game-window{top:52px}
.swipe-edge{display:none}
@media(max-width:700px) and (min-height:501px){
 :root{--game-top-row:38px;--game-bar:58px}
 .game-top{inset:0 0 auto;height:var(--game-top-row);padding:0 max(14px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px));flex-wrap:nowrap;overflow:hidden;background:#080b13;border-bottom:1px solid #ffffff12;gap:6px}
 .game-top>*{flex-shrink:0}.game-top .game-category{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .game-window{top:var(--game-top-row);bottom:var(--game-bar)}
 .game-info{bottom:var(--game-bar);padding-right:18px}
 .swipe-edge{display:none}
 .game-actions,.game-card.playing .game-actions,.compact-feed .game-actions,.compact-feed .game-card.playing .game-actions{display:flex;flex-direction:row;align-items:center;justify-content:space-around;top:auto;bottom:0;left:0;right:0;width:auto;height:var(--game-bar);max-height:none;margin:0;padding:0 max(6px,env(safe-area-inset-right,0px)) 0 max(6px,env(safe-area-inset-left,0px));gap:0;background:#080b13;border-top:1px solid #ffffff12}
 .game-actions .action,.game-card.playing .game-actions .action{display:flex;flex-direction:column;justify-content:center;width:auto;min-width:48px;min-height:48px;gap:2px;font-size:9px}
 .game-actions .icon{width:34px;height:34px;font-size:19px}.action.like .icon{font-size:22px}
 .game-actions .action>span:not(.icon){display:block}.action.like>span:nth-child(2){display:none}
}
@media(max-width:1000px) and (max-height:500px){
 :root{--game-side:calc(100px + env(safe-area-inset-right,0px))}
 .game-top,.swipe-edge{display:none}
 .game-window{top:0;right:var(--game-side)}
 .game-info{right:var(--game-side);padding-right:18px}
 .game-actions,.game-card.playing .game-actions,.compact-feed .game-actions,.compact-feed .game-card.playing .game-actions{display:grid;grid-template-columns:repeat(2,44px);grid-auto-rows:44px;align-content:center;justify-content:center;gap:4px;top:0;bottom:0;right:0;width:var(--game-side);height:auto;max-height:none;margin:0;padding:0 env(safe-area-inset-right,0px) 0 0;background:#080b13;border-left:1px solid #ffffff12}
 .game-card.playing .game-actions .action{display:flex}
}

/* 2026-11-08 Game focus: while a game is being played (after the game's own start), the game gets the whole screen.
   Gogashare's logo, bars and buttons return when the game ends, together with a nudge to send feedback. */
.focus-handle{display:none}
.game-actions .action.nudge .icon{animation:gsnudge 1.2s ease-in-out infinite;border-color:#c6ff8a}
@keyframes gsnudge{50%{transform:scale(1.14);box-shadow:0 0 0 6px #c6ff8a40}}
@media(max-width:700px),(max-width:1000px) and (max-height:500px){
 html.game-focus{--header-height:0px;--strip-height:0px;--nav-height:0px}
 html.game-focus .topbar,html.game-focus .incubator-strip,html.game-focus .mobile-nav,html.game-focus .swipe-hint{display:none}
 .game-card.focus .game-top,.game-card.focus .game-actions,.game-card.focus .game-info{display:none!important}
 .game-card.focus .game-window{top:0!important;bottom:0!important;left:0!important;right:0!important}
 html.game-focus .focus-handle{display:flex;align-items:center;justify-content:center;position:fixed;z-index:60;right:0;top:calc(var(--app-top) + var(--app-height)*.42);width:32px;height:44px;border:1px solid #ffffff40;border-right:0;border-radius:12px 0 0 12px;padding:0 env(safe-area-inset-right,0px) 0 2px;background:#0b1021c4;opacity:.82;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 10px #0006}
 html.game-focus .focus-handle i{display:block;width:15px;height:2px;border-radius:1px;background:#fff;box-shadow:0 -5px 0 #fff,0 5px 0 #fff}
 html.game-focus .focus-handle:active{opacity:1;width:36px}
 .is-demo .game-info{display:none}
}
/* Menu mode: the game is paused and covered; one clear button goes back to play. */
.resume-veil{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#05070dd0;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);text-align:center;padding:20px}
.resume-veil p{margin:0;color:#c9d3e6;font-size:12px;letter-spacing:.04em}
.resume-play{border:0;border-radius:999px;padding:15px 34px;background:#c6ff8a;color:#0b1021;font:800 18px/1 inherit;box-shadow:0 8px 28px #0008;cursor:pointer}
/* PC: the menu button sits in the game's top-right corner while playing */
html.game-focus .game-window>.focus-handle{display:flex;align-items:center;justify-content:center;position:absolute;z-index:6;top:10px;right:10px;width:38px;height:38px;border:1px solid #ffffff40;border-radius:10px;background:#0b1021c4;opacity:.8;cursor:pointer;box-shadow:0 2px 10px #0006}
html.game-focus .game-window>.focus-handle:hover{opacity:1}
html.game-focus .game-window>.focus-handle i{display:block;width:16px;height:2px;border-radius:1px;background:#fff;box-shadow:0 -5px 0 #fff,0 5px 0 #fff}