/* Shared 2D vector assets for standalone Heliocode games; CSS keeps labels live and scalable. */
:root { --game-ui-ink:#24485f; --game-ui-soft-ink:#52758a; }
.heliocode-games-brand {
  display:block; width:max-content; max-width:100%; margin:0 0 clamp(12px,2vw,22px); color:#087fbd;
  background:linear-gradient(100deg,#08a9c3 0%,#2788d2 48%,#765acb 78%,#e36f91 100%);
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.95); filter:drop-shadow(0 3px 0 rgba(40,110,148,.18));
  font:700 clamp(1.55rem,3.4vw,2.35rem)/1 'Fredoka','Nunito',sans-serif; letter-spacing:.035em; text-align:left;
}
.nav-bar > .heliocode-games-brand,.top-nav > .heliocode-games-brand { flex:0 0 auto; margin:0 auto 0 0; }
.container > .heliocode-games-brand,.app > .heliocode-games-brand,main > .heliocode-games-brand { align-self:flex-start; }
.brand-lockup,.brand-title:has(.brand-word),.nav-bar .brand-name,.top-nav .brand-name,body.kubus-prototype .top .brand { display:none!important; }
.game-ui-toast {
  position:fixed; z-index:10000; left:50%; bottom:max(24px,env(safe-area-inset-bottom));
  width:max-content; max-width:min(92vw,560px); padding:17px 30px 19px;
  background:transparent url('../images/ui/panel-sky.svg') center/100% 100% no-repeat;
  color:#174f6d; font:700 1rem/1.4 'Fredoka','Nunito',sans-serif; text-align:center;
  filter:drop-shadow(0 8px 14px rgba(35,94,119,.22)); opacity:0; pointer-events:none;
  transform:translate(-50%,18px) scale(.96); transition:opacity .2s ease,transform .2s ease;
}
.game-ui-toast.is-visible { opacity:1; transform:translate(-50%,0) scale(1); }
.game-ui-button {
  position:relative; isolation:isolate; display:inline-flex; min-width:148px; min-height:56px; align-items:center; justify-content:center;
  overflow:hidden; padding:10px 20px; border:0!important; border-radius:28px!important; outline:0!important;
  background:transparent url('../images/ui/button-blue.svg') center/100% 100% no-repeat!important;
  color:#fff!important; box-shadow:none!important; font:700 1rem/1.1 'Fredoka','Nunito',sans-serif!important; text-align:center; text-shadow:0 1px 1px rgba(20,67,91,.25); cursor:pointer;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease!important;
}
.game-ui-button:hover:not(:disabled) { transform:scale(1.018)!important; filter:brightness(1.035) saturate(1.04)!important; box-shadow:none!important; outline:0!important; }
.game-ui-button:active:not(:disabled) { transform:scale(.97)!important; filter:brightness(.94) saturate(.96)!important; box-shadow:inset 0 4px 8px rgba(36,72,95,.2)!important; outline:0!important; }
.game-ui-button.selected:not(:focus-visible) { box-shadow:none!important; outline:0!important; outline-offset:0!important; }
.game-ui-button:focus-visible { outline:0!important; box-shadow:0 0 0 3px rgba(8,127,189,.38)!important; border-radius:28px!important; }
.game-ui-button:disabled { cursor:not-allowed; }
.game-ui-button:disabled { opacity:.52; cursor:not-allowed; }
.game-ui-button[hidden] { display:none!important; }
.game-ui-button--yellow { background-image:url('../images/ui/button-yellow.svg')!important; color:#744917!important; text-shadow:none; }
.game-ui-button--coral { background-image:url('../images/ui/button-coral.svg')!important; }
.game-ui-button--mint { background-image:url('../images/ui/button-mint.svg')!important; color:#145c43!important; text-shadow:none; }
.game-ui-button--violet { background-image:url('../images/ui/button-violet.svg')!important; }
.game-ui-panel { border:0!important; border-radius:0!important; background:transparent url('../images/ui/panel-sky.svg') center/100% 100% no-repeat!important; box-shadow:none!important; color:var(--game-ui-ink)!important; }
.game-ui-panel--wood { background-image:url('../images/ui/panel-wood.svg')!important; }
.game-ui-panel--mint { background-image:url('../images/ui/panel-mint.svg')!important; }
.game-ui-stat { position:relative; min-width:0; padding:13px 16px 14px!important; border:0!important; border-radius:0!important; background:transparent url('../images/ui/panel-sky.svg') center/100% 100% no-repeat!important; box-shadow:none!important; color:var(--game-ui-ink)!important; }
.game-ui-stat:nth-child(2n) { background-image:url('../images/ui/panel-wood.svg')!important; }
.game-ui-stat:nth-child(3n) { background-image:url('../images/ui/panel-mint.svg')!important; }
.game-ui-stat.game-ui-player-stat { background-image:url('../images/ui/panel-sky.svg')!important; }
.game-ui-stat.game-ui-player-stat { min-height:76px; padding:15px 20px 17px!important; }
.game-ui-stat__label { display:block; color:var(--game-ui-soft-ink)!important; font:800 .68rem/1.2 'Nunito',sans-serif!important; letter-spacing:.035em; text-transform:uppercase; }
.game-ui-stat__value { display:block; margin-top:3px; overflow:hidden; color:#087fbd!important; font:700 clamp(.9rem,1.4vw,1.16rem)/1.15 'Fredoka',sans-serif!important; text-overflow:ellipsis; white-space:nowrap; }
.game-ui-input { min-height:58px; padding:12px 17px!important; border:0!important; border-radius:0!important; background:transparent url('../images/ui/input-name.svg') center/100% 100% no-repeat!important; color:var(--game-ui-ink)!important; box-shadow:none!important; }
.game-ui-input::placeholder { color:#6d8190; opacity:1; }
.game-ui-player-card {
  display:inline-flex!important; width:min(260px,100%); min-width:190px; min-height:70px; flex-direction:column; justify-content:center;
  padding:13px 20px 15px!important; border:0!important; border-radius:0!important;
  background:transparent url('../images/ui/panel-sky.svg') center/100% 100% no-repeat!important;
  color:#087fbd!important; font:700 clamp(1.05rem,1.5vw,1.25rem)/1.15 'Fredoka','Nunito',sans-serif!important;
  text-align:center; text-shadow:none!important;
}
.game-ui-player-card::before { content:'PEMAIN'; display:block; margin-bottom:5px; color:#52758a; font:800 .68rem/1 'Nunito',sans-serif; letter-spacing:.06em; }
.game-ui-player-card:empty { display:none!important; }
.game-ui-toolbar { position:fixed; z-index:9998; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); display:flex; align-items:center; gap:8px; }
.game-ui-home-button { min-width:88px; min-height:48px; padding:8px 14px 9px; font-size:.9rem!important; }
.game-ui-sound-toggle { min-width:118px; min-height:48px; padding:9px 16px 12px; font-size:.9rem!important; }
@media(max-width:600px) { .game-ui-button { min-width:0; min-height:48px; padding:8px 12px 10px; font-size:.92rem!important; } .game-ui-stat { padding:10px 12px 12px!important; } .game-ui-stat.game-ui-player-stat { min-height:70px; padding:13px 15px 15px!important; } .game-ui-player-card { min-width:min(180px,100%); min-height:64px; padding:11px 16px 13px!important; font-size:1.05rem!important; } .game-ui-stat__label { font-size:.62rem!important; } }
@media(max-width:600px) { .game-ui-toolbar { top:max(8px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right)); gap:5px; } .game-ui-home-button { min-width:68px; min-height:42px; padding:7px 10px 8px; font-size:.8rem!important; } .game-ui-sound-toggle { min-width:90px; min-height:42px; font-size:.78rem!important; } }
@media(max-width:600px) { .heliocode-games-brand { margin-bottom:12px; font-size:clamp(1.5rem,7vw,2rem); } .game-ui-toast { padding:15px 24px 17px; font-size:.94rem; } }
.zoom-controls .game-ui-button { min-width:44px; min-height:44px; width:44px; height:44px; padding:0; }
@media(prefers-reduced-motion:reduce) { .game-ui-button,.game-ui-toast { transition:none; } }

/* Mahjong's game-specific rules are intentionally more scoped; these selectors let its SVG skin win cleanly. */
body.mahjong-prototype > #gameUiToast { position:fixed; z-index:10000; }
body.mahjong-prototype .game-ui-button { min-height:56px; padding:10px 20px; border:0!important; border-radius:28px!important; background:transparent url('../images/ui/button-blue.svg') center/100% 100% no-repeat!important; box-shadow:none!important; }
body.mahjong-prototype .game-ui-button--yellow { background-image:url('../images/ui/button-yellow.svg')!important; color:#744917!important; text-shadow:none!important; }
body.mahjong-prototype .game-ui-button--coral { background-image:url('../images/ui/button-coral.svg')!important; }
body.mahjong-prototype .game-ui-button--mint { background-image:url('../images/ui/button-mint.svg')!important; color:#145c43!important; text-shadow:none!important; }
body.mahjong-prototype .game-ui-button--violet { background-image:url('../images/ui/button-violet.svg')!important; }
body.mahjong-prototype .game-ui-button--yellow.selected { background-image:url('../images/ui/button-yellow.svg')!important; }
body.mahjong-prototype .game-ui-button--coral.selected { background-image:url('../images/ui/button-coral.svg')!important; }
body.mahjong-prototype .game-ui-button--mint.selected { background-image:url('../images/ui/button-mint.svg')!important; }
body.mahjong-prototype #startBtn.game-ui-button { width:min(100%,380px); min-height:64px; }
body.mahjong-prototype .game-ui-stat { padding:13px 16px 14px!important; border:0!important; border-radius:0!important; background:transparent url('../images/ui/panel-sky.svg') center/100% 100% no-repeat!important; box-shadow:none!important; }
body.mahjong-prototype .game-ui-stat:nth-child(2n) { background-image:url('../images/ui/panel-wood.svg')!important; }
body.mahjong-prototype .game-ui-stat:nth-child(3n) { background-image:url('../images/ui/panel-mint.svg')!important; }
body.mahjong-prototype #playerName.game-ui-input { min-height:62px; border:0!important; border-radius:0!important; background:transparent url('../images/ui/input-name.svg') center/100% 100% no-repeat!important; box-shadow:none!important; }
@media(max-width:600px) { body.mahjong-prototype .game-ui-button { min-height:48px; padding:8px 12px 10px; font-size:.92rem!important; } body.mahjong-prototype .game-ui-stat { padding:10px 12px 12px!important; } }

body.mahjong-prototype .game-ui-button--blue.selected { background-image:url('../images/ui/button-blue.svg')!important; }