/* Canonical game UI promoted from the approved Block Puzzle interface.
   Edit shared components here; engine board geometry stays in each game. */
.header-brand,
.header-nav,
.brand{
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand{
  text-decoration: none;
  gap: 10px;
  white-space: nowrap;
}
.brand img{
  width: 38px;
  height: 38px;
  border-radius: 11px;
}
.brand-tagline{
  padding-left: 24px;
  border-left: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.mode-switch{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 5px;
  background: #f2f3f8;
  border-radius: 10px;
}
.mode-switch button{
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  padding: 9px 4px;
  font-size: 12px;
  font-weight: 750;
}
.mode-switch button[aria-pressed="true"]{
  color: var(--purple);
  background: #fff;
  border-color: #e9e5fb;
  box-shadow: 0 2px 5px #26324c07;
}
.mode-switch span{
  display: block;
  font-size: 9px;
  font-weight: 500;
  margin-top: 4px;
}
.mode-switch svg{
  width: 12px;
  height: 12px;
  vertical-align: -2px;
}
.mode-note{
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
  margin: 12px 2px 18px;
  min-height: 38px;
}
.primary-button,
.secondary-button{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  min-height: 44px;
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 700;
}
.primary-button{
  background: var(--purple);
  color: #fff;
}
.primary-button:hover{
  background: #5846c7;
}
.secondary-button{
  background: #f3f1fc;
  color: var(--purple);
}
.secondary-button:hover{
  background: #eae6fa;
}
.install-dialog > .primary-button{
  width: 100%;
}
@media (max-width: 900px){.intro-badge,
  .brand-tagline{
    display: none;
  }
.control-card h2,
  .card-eyebrow,
  .mode-note,
  .session-note{
    display: none;
  }}
@media (max-width: 700px){.brand{
    gap: 7px;
  }
.brand img{
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
.mode-switch button{
    min-height: 48px;
    font-size: 13px;
  }
.mode-switch span{
    font-size: 10px;
  }
.mode-note{
    min-height: 0;
    margin-bottom: 14px;
  }
.primary-button,
  .secondary-button{
    min-height: 46px;
  }}
@media (max-width: 350px){.brand img{
    width: 27px;
    height: 27px;
  }}
.language-control{
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.language-control select{
  font: inherit;
  min-height: 40px;
  max-width: 130px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 6px;
  background: #fff;
  color: var(--color-text);
}
.mode-switch button > span{
  display: inline;
  font-size: 14px;
}
.mode-switch small{
  display: block;
  font-size: 11px;
  font-weight: 400;
  margin-top: 4px;
}
.mode-switch button svg{
  vertical-align: middle;
  margin-right: 4px;
}
.overlay .secondary-button{
  background: #fff;
  border: 1px solid var(--line);
  color: var(--purple);
}
.rules-page .language-control{
  margin: 24px 0;
}
.rules-page .primary-button{
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  padding: 12px 24px;
  margin-top: 20px;
}
@media (max-width: 900px){.mode-switch{
    grid-column: 1/-1;
    margin: 0;
  }
.language-control select{
    max-width: 115px;
  }}
#portal .primary-button,
.cms .primary-button{
  background: var(--purple);
  color: white;
  border-color: var(--purple);
}
.portal-header{
  min-height: 76px;
  padding: 14px max(20px, calc((100vw - 1160px) / 2));
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.portal-header .language-control{
  margin-left: auto;
}
.profile-menu{
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-menu small{
  display: block;
  text-align: left;
  color: var(--muted);
}
.portal-panel{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  min-height: 300px;
}
.portal-panel h1{
  font-size: 26px;
  max-width: none;
  margin: 0;
}
.portal-panel h2{
  font-size: 19px;
}
.panel-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 24px;
}
.portal-panel p{
  line-height: 1.8;
}
.portal-panel .selected,
.tabs .selected,
#portal .selected{
  background: #eee9ff;
  border-color: #b9a8ed;
  color: #6347ce;
}
.lobby-actions,
.room-toolbar,
.row-actions,
.settings-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.portal-panel label,
dialog label,
.cms label{
  display: grid;
  gap: 7px;
  color: #56627d;
  font-size: 14px;
  margin: 12px 0;
}
.portal-panel input,
.portal-panel select,
dialog input,
dialog select,
.cms input,
.cms select,
.cms textarea{
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  color: var(--color-text);
  background: #fff;
}
.inline-form{
  display: flex;
  align-items: end;
  gap: 10px;
  margin: 22px 0;
}
.inline-form label{
  margin: 0;
  flex: 1;
}
.inline-form input{
  max-width: 320px;
}
.tabs{
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin: 20px 0;
  padding-bottom: 6px;
}
.tabs button{
  white-space: nowrap;
}
.room-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.room-card{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  overflow: hidden;
}
.room-card h2{
  margin: 10px 0;
}
.room-card p{
  font-size: 13px;
  color: var(--muted);
}
.room-card .room-art{
  width: 100%;
  height: 120px;
}
.room-art{
  background: linear-gradient(135deg, #e9e5ff, #d5e6f7) !important;
  display: grid;
  place-items: center;
  border: 0 !important;
  overflow: hidden;
}
.room-art.space-2,
.room-art.space-7{
  background: linear-gradient(135deg, #e1f4e9, #c3e2d0) !important;
}
.room-art.space-3,
.room-art.space-8{
  background: linear-gradient(135deg, #fff1da, #efd1aa) !important;
}
.room-art.space-4,
.room-art.space-9{
  background: linear-gradient(135deg, #f4def4, #e7bfdc) !important;
}
.room-art.space-5,
.room-art.space-10{
  background: linear-gradient(135deg, #ddebf8, #b9d4ef) !important;
}
.room-art.space-6,
.room-art.space-11{
  background: linear-gradient(135deg, #e7edf2, #cad6e3) !important;
}
.pager{
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin: 24px 0;
}
.text-link{
  border: 0 !important;
  background: transparent !important;
  color: var(--purple) !important;
  padding: 0 !important;
  min-height: 30px !important;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.top-five{
  padding: 14px;
  background: #f8f5ff;
  border-radius: 10px;
  margin-bottom: 20px;
}
.table-scroll{
  overflow-x: auto;
}
.avatar{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #e9e2ff;
  color: #6750c8;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.avatar[data-avatar$="2"],
.avatar[data-avatar$="6"]{
  background: #d9f4e7;
  color: #237b56;
}
.avatar[data-avatar$="3"],
.avatar[data-avatar$="7"]{
  background: #fff0d1;
  color: #a56623;
}
.avatar[data-avatar$="4"],
.avatar[data-avatar$="8"]{
  background: #f7dfee;
  color: #a24279;
}
.person{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.person > div:nth-child(2){
  flex: 1;
  min-width: 0;
}
.person p,
.person small{
  font-size: 12px;
  color: var(--muted);
  margin: 3px 0;
}
.member-list{
  margin: 20px 0;
}
.icon-picker .room-art{
  height: 60px;
}
.cosmetic .avatar{
  width: 70px;
  height: 70px;
  font-size: 30px;
}
.portal-footer{
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.portal-footer a{
  color: var(--purple);
}
.bootstrap-form{
  max-width: 440px;
  margin: 30px auto;
}
.game-top{
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 16px;
}
.game-top > div{
  flex: 1;
  display: grid;
  gap: 5px;
}
.game-top strong{
  font-size: 28px;
}
.game-top small{
  font-size: 12px;
  color: var(--muted);
}
.chat-toggle{
  background: #6850d8 !important;
  color: white !important;
}
.chat-dot{
  color: #f0a5a5;
}
.chat-dot.connected{
  color: #8aefbd;
}
#chat-widget{
  position: fixed;
  right: 20px;
  bottom: 16px;
  width: 350px;
  z-index: 80;
  font-size: 13px;
}
.chat-box{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 40px #26324c25;
  padding: 10px;
}
.chat-tabs{
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.chat-tab{
  display: flex;
  flex-shrink: 0;
  background: #f5f3fb;
  border-radius: 8px;
}
.chat-tab.selected{
  background: #e6ddfc;
}
.chat-tab button{
  border: 0 !important;
  padding: 6px !important;
  min-height: 32px !important;
  background: transparent !important;
}
.chat-history{
  height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.chat-message{
  background: #f3f1f8;
  border-radius: 9px;
  padding: 8px 10px;
  margin: 8px 4px;
}
.chat-message.mine{
  background: #eae4fc;
}
.chat-message p{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 5px 0;
  line-height: 1.5;
}
#chat-form{
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
#chat-form input{
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}
#chat-form button{
  padding: 6px 9px;
}
.chat-error{
  color: #aa3451;
  font-size: 12px;
}
@media (max-width: 900px){.room-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.portal-header{
    padding: 12px 16px;
    gap: 10px;
  }
.profile-menu > span:not(.avatar){
    display: none;
  }
.portal-panel{
    padding: 16px;
  }
.game-top{
    gap: 10px;
  }
.game-top strong{
    font-size: 24px;
  }}
@media (max-width: 600px){.portal-header .brand__name{
    font-size: 19px;
  }
.portal-header .brand img{
    width: 28px;
    height: 28px;
  }
.portal-header{
    gap: 8px;
  }
.portal-header .language-control select{
    width: 100px;
    font-size: 12px;
  }
.profile-menu{
    padding: 3px !important;
  }
.profile-menu .avatar{
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
.portal-panel h1{
    font-size: 22px;
  }
.room-grid{
    grid-template-columns: 1fr;
  }
.room-card{
    display: grid;
    grid-template-columns: 95px 1fr;
    gap: 5px 14px;
  }
.room-card .room-art{
    height: 110px;
    grid-row: 1/5;
  }
.room-card h2,
  .room-card p{
    margin: 0;
  }
.room-card small{
    grid-column: 2;
  }
.room-card > button:last-child{
    grid-column: 2;
  }
.room-card .room-art{
    grid-column: 1;
  }
.person{
    flex-wrap: wrap;
  }
.person .row-actions{
    width: 100%;
    margin: 5px 0;
  }
.panel-title{
    align-items: start;
  }
.panel-title button{
    font-size: 11px !important;
    padding: 8px !important;
  }
.game-top button{
    font-size: 12px !important;
  }
#chat-widget{
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(350px, calc(100vw - 16px));
  }
.chat-history{
    height: min(260px, 35dvh);
  }
.chat-box{
    max-height: 75dvh;
  }
.portal-panel .inline-form{
    flex-wrap: wrap;
  }
.inline-form label{
    min-width: 140px;
  }
.inline-form input{
    max-width: none;
  }}
@media (min-width: 1200px){body.chat-open #portal-content{
    width: calc(100% - 400px);
    max-width: 1120px;
    margin-left: max(20px, calc((100vw - 1560px) / 2));
    margin-right: 380px;
  }}
.remote-game .game-top{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 4;
  padding: 12px 0;
}
.avatar[data-avatar="avatar-5"]{
  background: linear-gradient(45deg, #dce7ff, #eacdf9);
  border-radius: 50%;
}
.avatar[data-avatar="avatar-6"]{
  border-radius: 50% 12%;
}
.avatar[data-avatar="avatar-7"]{
  border-radius: 12% 50%;
}
.avatar[data-avatar="avatar-8"]{
  border-radius: 50%;
  outline: 2px dashed currentColor;
  outline-offset: -5px;
}
#portal .portal-header{
  background: #111d30ee;
  border-bottom: 1px solid #ffffff0d;
  min-height: 76px;
  padding: 14px max(24px, calc((100vw - 1340px) / 2));
  gap: 18px;
}
#portal .brand{
  color: #f3f6ff;
  font-size: 23px;
  letter-spacing: -0.8px;
}
#portal .portal-header .language-control select{
  background: #1b2a40;
  color: #b3c3da;
  border: 1px solid #33445e;
  border-radius: 9px;
  padding: 9px;
}
#portal .profile-menu{
  background: #1c2b42;
  border-color: #34445d;
  color: #e8f0ff;
  min-height: 46px;
}
#portal .profile-menu small{
  color: #91a3bd;
  font-size: 11px;
}
#portal .profile-menu .avatar{
  width: 35px;
  height: 35px;
}
#portal .ui-icon{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
}
#portal button.primary-button:not(.board__cell):not(.tray__slot),
#portal a.primary-button{
  background: #ffd36d;
  color: #342810;
  border-color: #ffda82;
  box-shadow: 0 3px 0 #b98a37;
  font-weight: 800;
}
#portal button.primary-button:not(.board__cell):not(.tray__slot):hover,
#portal a.primary-button:hover{
  background: #ffe095;
  border-color: #ffe095;
  transform: translateY(-1px);
}
#portal a.primary-button,
#portal a.secondary-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
}
#portal a.secondary-button{
  background: #25354e;
  color: #d4e0f5;
  border: 1px solid #3b4c67;
}
#portal .portal-panel{
  background: #142136;
  border: 1px solid #2b3a53;
  border-radius: 18px;
  padding: 26px;
  min-height: 300px;
  box-shadow: 0 12px 45px #00000012;
}
#portal .portal-panel p{
  color: #a4b4cf;
  line-height: 1.75;
}
#portal .portal-panel h1{
  color: #edf3ff;
  font-size: 25px;
  letter-spacing: -0.7px;
}
#portal .panel-title{
  margin-bottom: 25px;
}
#portal-content[data-page="lobby"] > .portal-panel{
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#portal-content[data-page="lobby"] > .portal-panel > .panel-title{
  display: none;
}
#portal .portal-nav .ui-icon{
  width: 18px;
  height: 18px;
}
#portal .text-link{
  color: #c6b8ff;
}
#portal button.text-link:not(.board__cell):not(.tray__slot){
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-height: 28px;
  text-align: left;
  font-weight: 600;
  color: #dce7fa;
}
#portal .selected:not(.tray__slot),
#portal .tabs button.selected:not(.board__cell):not(.tray__slot){
  background: #343252;
  color: #d0c5ff;
  border-color: #706398;
}
.entry-card{
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #17263c;
  border: 1px solid #ffffff15;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 90px #02081540;
}
.entry-art{
  position: relative;
  overflow: hidden;
  min-height: 645px;
  padding: 35px;
  background: radial-gradient(circle at 45% 35%, #39918860, transparent 55%),
    linear-gradient(145deg, #1d3e4d, #1b2a46 75%);
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
}
.entry-art::before,
.entry-art::after{
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border: 1px solid #ffffff0a;
  border-radius: 50%;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.entry-art::after{
  width: 380px;
  height: 380px;
}
.entry-art > .eyebrow{
  align-self: start;
  font-size: 9px;
  color: #9dcfc9;
}
.entry-art-caption{
  text-align: center;
  position: relative;
  margin-top: 20px;
}
.entry-art-caption h2{
  font-size: 28px;
  color: #e6f3f1;
  margin: 16px 0 9px;
  letter-spacing: -0.8px;
}
.entry-art-caption p{
  max-width: 310px;
  line-height: 1.8;
  color: #a5c4ca;
  font-size: 13px;
  margin: 0 auto;
}
.live-pill{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f4d482;
  border: 1px solid #f4d48240;
  border-radius: 40px;
  padding: 6px 12px;
  background: #f4d4820c;
}
#portal .live-pill .ui-icon{
  width: 13px;
  height: 13px;
}
.scene-spark{
  position: absolute;
  color: #ffe29b;
  font-size: 33px;
}
.scene-spark--one{
  right: 8%;
  top: 19%;
}
.scene-spark--two{
  left: 7%;
  bottom: 25%;
}
.entry-form{
  padding: 34px 38px 25px;
}
.entry-form h1{
  font-size: 49px;
  line-height: 1.06;
  letter-spacing: -2px;
  margin: 12px 0 15px;
  color: #f4f7ff;
  max-width: none;
}
.entry-form h1 > span{
  color: #ffd36d;
}
.entry-description{
  line-height: 1.8;
  color: #a4b6d1;
  font-size: 14px;
  margin: 0 0 22px;
}
#portal .bootstrap-form{
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
#portal .bootstrap-form > label{
  display: grid;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #c9d7ec;
}
#portal .bootstrap-form input[name="name"]{
  width: 100%;
  height: 48px;
  font-size: 15px;
}
.input-hint{
  font-size: 10px;
  color: #8196b4;
  margin: 7px 0 18px;
}
#portal .avatar-picker{
  border: 0;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
#portal .avatar-picker legend{
  margin-bottom: 9px;
  font-weight: 700;
  font-size: 12px;
}
#portal .avatar-picker > label{
  position: relative;
  margin: 0;
  cursor: pointer;
  display: block;
}
.avatar-picker input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.avatar-picker label > span:not(.sr-only){
  display: grid;
  place-items: center;
  min-height: 53px;
  border: 1px solid #3a4d66;
  background: #223750;
  border-radius: 12px;
  transition:
    border 0.15s,
    background 0.15s;
  position: relative;
}
.avatar-picker label .avatar{
  width: 44px;
  height: 44px;
  background: transparent;
}
.avatar-picker label b{
  display: none;
  position: absolute;
  right: -4px;
  bottom: -3px;
  background: #ffd36d;
  color: #34310e;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  text-align: center;
}
.avatar-picker input:checked + span{
  border: 2px solid #ffd978;
  background: #45513f;
}
.avatar-picker input:checked + span b{
  display: block;
}
.avatar-picker input:focus-visible + span{
  outline: 3px solid #77dfc2;
  outline-offset: 3px;
}
.avatar svg{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
}
#portal button.entry-submit:not(.board__cell):not(.tray__slot){
  width: 100%;
  min-height: 49px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 11px;
  padding: 12px 19px;
  font-size: 16px;
}
.entry-note{
  text-align: center;
  font-size: 10px;
  line-height: 1.6;
  color: #8396b3;
  margin: 10px 0 0;
}
.entry-solo{
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #ffffff10;
}
.entry-solo > span{
  color: #849ab8;
  font-size: 11px;
}
.entry-solo .text-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 10px;
}
.entry-features{
  display: flex;
  gap: 35px;
  align-items: center;
  justify-content: center;
  padding: 26px 0 0;
  color: #8298b7;
  font-size: 11px;
}
.entry-features > span{
  display: flex;
  gap: 7px;
  align-items: center;
}
#portal .entry-features .ui-icon{
  width: 15px;
  height: 15px;
  color: #5f9f9e;
}
#portal .mode-picker{
  display: flex;
  min-width: 0;
  gap: 8px;
  margin: 12px 0;
  padding: 0;
  border: 0;
}
#portal .mode-picker legend{
  font-size: 10px;
  color: #8ca2bf;
  margin-bottom: 7px;
}
#portal .mode-picker label{
  flex: 1;
  min-width: 0;
  max-width: none;
  margin: 0;
  cursor: pointer;
  position: relative;
}
.mode-option input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.mode-option > span{
  display: grid;
  gap: 4px;
  padding: 9px 11px;
  border: 1px solid #3b4c69;
  border-radius: 9px;
  background: #1b2c44;
}
.mode-option b{
  font-size: 11px;
  color: #b6c7e0;
  font-weight: 700;
}
.mode-option small{
  font-size: 10px;
  color: #7c93b4;
}
.mode-option input:checked + span{
  border-color: #8bcfb9;
  background: #29483f;
  box-shadow: 0 0 0 1px #8bcfb930;
}
.mode-option input:checked + span b{
  color: #b0edcf;
}
.mode-option input:focus-visible + span{
  outline: 3px solid #ffd978;
  outline-offset: 3px;
}
.entry-solo .mode-picker{
  margin-top: 8px;
  margin-bottom: 0;
}
.entry-solo .mode-picker legend,
.entry-solo .mode-option small{
  display: none;
}
.hub-welcome{
  display: flex;
  gap: 15px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.hub-welcome h2{
  color: #edf4ff;
  font-size: 29px;
  letter-spacing: -1px;
  line-height: 1.3;
  margin: 7px 0;
}
#portal .hub-welcome p{
  font-size: 13px;
  margin: 0;
  color: #8fa4c4;
}
.hub-live{
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 11px;
  color: #8fbaa9;
  border: 1px solid #3a5a4b;
  background: #1b332c;
  border-radius: 30px;
  padding: 9px 12px;
}
.hub-live i,
.room-state i{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #83d6ae;
}
.hub-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 24px;
}
.hub-main{
  min-width: 0;
}
.hub-actions{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}
.hub-actions > article{
  display: flex;
  flex-direction: column;
  align-items: start;
  border: 1px solid #33415b;
  border-radius: 16px;
  padding: 20px;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
#portal .hub-actions h2{
  font-size: 20px;
  letter-spacing: -0.5px;
  color: #e8f2fc;
  margin: 14px 0 8px;
}
#portal .hub-actions p{
  font-size: 11px;
  color: #8fa9c3;
  margin: 0 0 12px;
  line-height: 1.7;
}
.hub-actions .mode-picker{
  width: 100%;
}
.hub-actions .mode-option small{
  display: none;
}
#portal .hub-actions .mode-option b{
  font-size: 10px;
}
.hub-actions .mode-option > span{
  padding: 8px;
}
#portal .hub-actions button:not(.board__cell):not(.tray__slot){
  width: 100%;
  margin-top: auto;
  font-size: 12px;
}
.quick-settings{
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
#portal .quick-settings label{
  font-size: 10px;
  margin: 0;
  flex: 1;
}
#portal .quick-settings select{
  min-height: 33px;
  font-size: 11px;
  width: 87px;
  padding: 5px 8px;
}
.mini-avatars > .avatar{
  width: 35px;
  height: 35px;
  margin-right: -8px;
  border: 2px solid #292e4c;
}
.rooms-heading{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 18px;
}
.rooms-heading h2{
  color: #e6effe;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  font-size: 22px;
  letter-spacing: -0.5px;
}
.count-badge{
  font-size: 10px;
  color: #8da5c6;
  background: #25344c;
  border: 1px solid #35445e;
  padding: 3px 8px;
  border-radius: 6px;
}
#portal .join-strip{
  margin: 0;
  align-items: end;
  gap: 6px;
  max-width: 275px;
}
#portal .join-strip label{
  margin: 0;
  color: #859bb9;
  font-size: 10px;
}
#portal .join-strip input{
  min-height: 37px;
  padding: 8px 10px;
  width: 100%;
  max-width: none;
  font-size: 12px;
}
#portal .join-strip button{
  min-height: 37px;
  padding: 7px 10px;
}
#portal .room-filters{
  align-items: center;
  margin: 0 0 20px;
  gap: 7px;
  border-bottom: 1px solid #29384e;
  padding-bottom: 16px;
}
#portal .room-filters button:not(.board__cell):not(.tray__slot){
  font-size: 11px;
  border-color: transparent;
  background: transparent;
  min-height: 34px;
  padding: 7px 12px;
}
#portal .room-filters button.selected:not(.board__cell):not(.tray__slot){
  background: #293a54;
  border-color: #405474;
  color: #ecf3ff;
}
#portal .bot-legend .ui-icon{
  width: 14px;
  height: 14px;
}
#portal .room-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
#portal .room-card{
  padding: 0;
  border: 1px solid #2e3d56;
  border-radius: 14px;
  background: #17263d;
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 4px 12px #0000000d;
  transition:
    border-color 0.2s,
    transform 0.2s;
}
#portal .room-card:hover{
  border-color: #65759a;
  transform: translateY(-2px);
}
#portal .room-card button.room-art:not(.board__cell):not(.tray__slot){
  padding: 0;
  min-height: 0;
  height: auto;
  aspect-ratio: 360/190;
  width: 100%;
  border: 0;
  border-radius: 0;
  position: relative;
  display: block;
  background: #1d3449 !important;
}
.room-picture{
  display: block;
  width: 100%;
  height: 100%;
}
.room-art-label{
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  background: #101e30ce;
  color: #c1ddd9;
  border: 1px solid #ffffff15;
  border-radius: 6px;
  padding: 5px 7px;
}
#portal .room-art-label .ui-icon{
  width: 11px;
  height: 11px;
}
.room-card-content{
  padding: 14px;
}
.room-card-meta{
  display: flex;
  justify-content: space-between;
  gap: 5px;
  color: #7b93b5;
  font-size: 9px;
}
.room-state{
  display: flex;
  align-items: center;
  gap: 5px;
  color: #8cd4b6;
}
.room-state.is-playing{
  color: #ffd681;
}
.room-state.is-playing i{
  background: #ffd681;
}
.room-card h3{
  margin: 12px 0 7px;
  line-height: 1.3;
  font-size: 14px;
}
#portal .room-card h3 button.text-link:not(.board__cell):not(.tray__slot){
  font-size: 14px;
  font-weight: 750;
  color: #e4eeff;
  min-height: 0;
}
#portal .room-card .room-host{
  font-size: 10px;
  color: #8198b8;
  margin: 0 0 10px;
}
.room-rule-badges{
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.room-rule-badges > span{
  display: flex;
  gap: 4px;
  align-items: center;
  background: #24354e;
  color: #9cb2d0;
  font-size: 9px;
  border-radius: 5px;
  padding: 4px 6px;
}
#portal .room-rule-badges .ui-icon{
  width: 11px;
  height: 11px;
}
.room-card-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-top: 1px solid #2b3a52;
  margin-top: 14px;
  padding-top: 12px;
}
.room-card-bottom > span{
  display: flex;
  align-items: center;
  gap: 3px;
  color: #8ca3c4;
  font-size: 11px;
}
#portal .room-card-bottom > span .ui-icon{
  width: 15px;
  height: 15px;
  margin-right: 4px;
}
#portal button.join-room-button .ui-icon{
  width: 13px;
  height: 13px;
}
.hub-sidebar{
  display: grid;
  gap: 18px;
  align-content: start;
}
#portal .empty-rooms > .ui-icon{
  width: 35px;
  height: 35px;
}
#portal .top-five{
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px;
  margin-bottom: 18px;
  color: #e9cc83;
  font-size: 11px;
  background: #3c34272e;
  border-radius: 8px;
  overflow: hidden;
}
#portal .top-five button{
  white-space: nowrap;
}
#portal .pager{
  color: #8fa4c5;
  font-size: 12px;
  margin-top: 22px;
}
#portal .pager button{
  font-size: 11px;
  min-height: 34px;
}
#portal .portal-footer{
  color: #607898;
  font-size: 10px;
  border-top: 1px solid #ffffff0a;
  margin: 0 max(24px, calc((100vw - 1340px) / 2));
  padding: 22px 0;
  text-align: center;
}
#portal .portal-footer a{
  color: #8d9ab9;
}
#portal .icon-picker .room-art{
  padding: 0;
  border-radius: 9px;
  overflow: hidden;
  height: auto;
  aspect-ratio: 360/190;
}
#portal .member-list .person{
  border-color: #34465f;
  background: #1c2d44;
  border-radius: 13px;
  padding: 15px;
}
#portal .person .avatar{
  background: transparent;
  width: 46px;
  height: 46px;
}
#portal .person p{
  color: #8da4c6;
  font-size: 11px;
}
#portal .person small{
  color: #7890b1;
}
.waiting-overview{
  display: flex;
  align-items: center;
  gap: 26px;
  background: linear-gradient(120deg, #233d44, #242b48);
  border: 1px solid #3b5365;
  border-radius: 17px;
  padding: 22px;
  margin-bottom: 24px;
}
.waiting-illustration{
  width: 210px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid #ffffff15;
}
#portal .waiting-overview p{
  font-size: 12px;
  max-width: 580px;
  line-height: 1.8;
  margin: 8px 0;
}
#portal .waiting-overview .room-duration{
  display: inline-flex;
  color: #9fd7c3;
  padding: 6px 10px;
  border: 1px solid #52816d;
  border-radius: 7px;
  font-size: 11px;
}
.waiting-code{
  font-size: 10px;
  color: #93a6c4;
  margin-top: 12px;
}
.waiting-code strong{
  color: #f1d28a;
  margin-left: 8px;
  font-size: 16px;
  letter-spacing: 1px;
}
#portal .room-toolbar{
  gap: 9px;
  margin-bottom: 24px;
}
#portal .room-toolbar button{
  font-size: 12px;
}
#portal .table-scroll{
  border: 1px solid #30445f;
  border-radius: 12px;
  overflow: auto;
}
#portal .game-top{
  background: #142136;
  color: #e4edff;
  border-bottom: 1px solid #2a3d56;
  margin-bottom: 20px;
}
#portal .game-top small{
  color: #8fa7c9;
}
.mode-badge{
  display: inline-block;
  color: #a2d8c4;
  background: #28463e;
  border: 1px solid #466958;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 10px;
}
.ranking-layout-control{
  display: flex;
  justify-content: end;
  gap: 12px;
  align-items: center;
  color: #839fc3;
  font-size: 11px;
  margin-bottom: 14px;
}
#portal .ranking-layout-control select{
  width: auto;
  font-size: 11px;
  min-height: 33px;
  padding: 6px;
}
#chat-widget{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}
.chat-box,
.chat-toggle{
  pointer-events: auto;
}
#portal .chat-box{
  width: 100%;
  background: #192b42;
  border-color: #3a4c68;
  color: #bdcde4;
  box-shadow: 0 15px 45px #03091a66;
}
#portal .chat-toggle{
  background: #294a45 !important;
  color: #b7edda !important;
  border-color: #426c60 !important;
  font-size: 11px;
  min-height: 36px;
}
#portal .chat-tabs button{
  background: transparent;
  color: #a3b7d5;
  min-height: 30px;
  font-size: 10px;
  padding: 6px 10px;
  border-color: transparent;
}
#portal .chat-tab.selected{
  background: #35465f;
  border-color: #607c96;
}
#portal .chat-tab.selected button{
  color: #e0edff;
}
#portal .chat-history{
  height: 230px;
}
#portal .chat-message{
  color: #c0d3e9;
  border-color: #314760;
}
#portal .chat-message p{
  background: #233b52;
  color: #c0d3e9;
  font-size: 12px;
}
#portal #chat-form input{
  min-width: 0;
  font-size: 12px;
  padding: 10px;
  background: #112139;
}
#portal #chat-form button{
  font-size: 11px;
  padding: 8px 12px;
}
@media (min-width: 1200px){body.chat-open #portal-content{
    width: calc(100% - 390px);
    max-width: 1280px;
    margin-left: 24px;
    margin-right: 366px;
  }
body.chat-open .hub-sidebar{
    display: none;
  }
body.chat-open .hub-grid{
    grid-template-columns: 1fr;
  }}
@media (max-width: 1100px){.hub-grid{
    grid-template-columns: 1fr;
  }
.hub-sidebar{
    display: none;
  }
.hub-actions{
    grid-template-columns: 1.2fr 1fr 1fr;
  }
.entry-form{
    padding: 30px;
  }
.entry-form h1{
    font-size: 43px;
  }}
@media (max-width: 760px){.entry-card{
    grid-template-columns: 1fr;
    max-width: 470px;
    margin: auto;
    border-radius: 22px;
  }
.entry-art{
    min-height: 0;
    height: 145px;
    padding: 0;
    background: radial-gradient(ellipse at 50% 70%, #478b8e70, transparent 70%),
      #21394b;
  }
.entry-art > .eyebrow,
  .entry-art-caption,
  .scene-spark{
    display: none;
  }
.entry-art .hero-art{
    width: 215px;
    margin-top: -10px;
  }
.entry-art .hero-board{
    box-shadow: 0 8px 0 #0b1b2d;
  }
.entry-art .art-spark{
    display: none;
  }
.entry-art .art-label{
    font-size: 10px;
    padding: 6px 9px;
    right: 0;
  }
.entry-form{
    padding: 24px;
  }
.entry-form > .eyebrow{
    display: none;
  }
.entry-form h1{
    font-size: 38px;
    letter-spacing: -1.5px;
    margin: 0 0 12px;
  }
.entry-description{
    font-size: 12px;
    margin-bottom: 20px;
  }
.entry-features{
    flex-wrap: wrap;
    gap: 13px 20px;
    font-size: 9px;
    padding-top: 22px;
  }
.entry-solo{
    padding-top: 13px;
    margin-top: 15px;
  }
.entry-solo .mode-picker{
    margin-top: 8px;
  }
.entry-solo .text-link{
    font-size: 11px;
  }
.hub-welcome{
    align-items: start;
  }
.hub-welcome h2{
    font-size: 25px;
  }
.hub-live{
    display: none;
  }
.hub-actions{
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
.hub-actions > .quick-card{
    grid-column: 1/-1;
  }
.hub-actions > article{
    padding: 18px;
  }
#portal .hub-actions h2{
    font-size: 19px;
  }
.quick-card .mode-picker{
    max-width: none;
  }
.rooms-heading{
    align-items: start;
    flex-direction: column;
    gap: 15px;
  }
#portal .join-strip{
    max-width: none;
    width: 100%;
  }
.rooms-heading h2{
    font-size: 23px;
  }
#portal .room-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
.room-card-content{
    padding: 12px;
  }
.hub-actions .infinity-mark{
    font-size: 65px;
    margin: 12px auto 22px;
  }
.waiting-overview{
    gap: 18px;
    padding: 18px;
  }
.waiting-illustration{
    width: 120px;
    height: 90px;
  }
#portal .portal-panel{
    padding: 20px;
    border-radius: 16px;
  }
.ranking-layout-control{
    display: none;
  }
.remote-game .game-top{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 12px;
    align-items: center;
    padding: 10px 0 14px;
  }
.remote-game .game-top > div{
    min-width: 0;
  }
.remote-game .game-top > button{
    width: 100%;
  }}
@media (max-width: 450px){#portal .portal-header{
    min-height: 64px;
    padding: 12px 16px;
    gap: 10px;
  }
#portal .brand{
    font-size: 20px;
  }
#portal .portal-header .language-control select{
    font-size: 11px;
    padding: 9px 5px;
  }
.entry-form{
    padding: 20px;
  }
.entry-art{
    height: 112px;
  }
.entry-art .hero-art{
    width: 190px;
    margin-top: -14px;
  }
.entry-form h1{
    font-size: 34px;
  }
#portal .avatar-picker{
    gap: 6px;
  }
.avatar-picker label > span:not(.sr-only){
    min-height: 46px;
  }
.avatar-picker label .avatar{
    width: 39px;
    height: 39px;
  }
.input-hint{
    margin-bottom: 14px;
  }
.entry-description{
    font-size: 11px;
    margin-bottom: 15px;
  }
.entry-solo > span{
    font-size: 10px;
  }
.mode-option > span{
    padding: 8px;
  }
.mode-option b{
    font-size: 10px;
  }
.entry-features{
    display: none;
  }
.entry-note{
    font-size: 9px;
  }
#portal .portal-footer{
    font-size: 9px;
    padding: 20px 0;
  }
.hub-welcome h2{
    font-size: 25px;
    max-width: 280px;
  }
.hub-welcome .eyebrow{
    font-size: 9px;
  }
#portal .hub-welcome p{
    font-size: 11px;
  }
#portal .hub-actions h2{
    font-size: 18px;
  }
.hub-actions > article{
    padding: 16px;
  }
#portal .hub-actions p{
    font-size: 10px;
  }
.room-card h3{
    margin-top: 10px;
  }
#portal .room-card h3 button.text-link:not(.board__cell):not(.tray__slot){
    font-size: 12px;
  }
.room-card-meta{
    font-size: 8px;
  }
.room-card .room-host{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
.room-card-content{
    padding: 10px;
  }
.room-art-label{
    left: 7px;
    top: 7px;
    font-size: 7px;
    padding: 4px 5px;
  }
.room-art-label .ui-icon{
    display: none;
  }
.room-card-bottom{
    flex-wrap: wrap;
    gap: 8px;
  }
.room-rule-badges{
    gap: 4px;
  }
.room-rule-badges > span{
    font-size: 8px;
    padding: 3px 5px;
  }
.waiting-overview{
    display: block;
  }
.waiting-illustration{
    display: none;
  }
#portal .room-toolbar button{
    font-size: 11px;
  }
.mini-avatars > .avatar{
    width: 31px;
    height: 31px;
  }}
#portal .avatar-picker input,
#portal .mode-option input{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
  margin: 0;
}
@media (max-width: 760px){.hub-actions > .create-card,
  .hub-actions > .solo-card{
    min-height: 130px;
    padding: 16px;
  }
.hub-actions > .create-card .action-icon,
  .hub-actions > .solo-card .action-icon{
    position: absolute;
    right: 12px;
    top: 14px;
    width: 25px;
    height: 25px;
    opacity: 0.7;
  }
.hub-actions > .create-card p,
  .hub-actions > .solo-card p,
  .hub-actions .mini-avatars,
  .hub-actions .infinity-mark{
    display: none;
  }
#portal .hub-actions > .create-card h2,
  #portal .hub-actions > .solo-card h2{
    font-size: 15px;
    margin: 0 24px 15px 0;
    line-height: 1.4;
  }
.hub-actions > .quick-card{
    padding: 16px;
  }
#portal .hub-actions > .quick-card h2{
    margin: 10px 0 6px;
  }
#portal .hub-actions > .quick-card p{
    font-size: 11px;
    margin-bottom: 5px;
  }}
#app .mode-switch{
  background: #112139;
  border-color: #344963;
}
#app .mode-switch button{
  color: #93aaca;
}
#app .mode-switch button[aria-pressed="true"]{
  background: #2a4d42;
  border-color: #69a78d;
  color: #bcf1d7;
}
#app .mode-note,
#app .intro-copy,
#app .tip-card p,
#app .board-instruction{
  color: #91a8c8;
}
#app .icon-button,
#app .tool-button,
#app .hud__mute,
#app .rotation-bar > button,
#app .language-control select{
  background: #233a53;
  color: #b7cbe5;
  border-color: #3c536f;
}
#app .primary-button,
#app .overlay__button{
  background: #ffd36d;
  color: #342810;
  border-color: #ffdf91;
}
#app .primary-button:hover{
  background: #ffe19b;
}
#app dialog .secondary-button{
  background: #294057;
  color: #c9def3;
  border-color: #49617e;
}
.rules-redesign .brand{
  display: inline-flex;
  gap: 10px;
  text-decoration: none;
}
.rules-redesign .language-control{
  float: right;
  margin: 0;
}
.rules-play-actions > .primary-button{
  background: #ffd36d;
  color: #342810;
}
.rules-play-actions > .secondary-button{
  background: #243b56;
  color: #cbdff5;
  border: 1px solid #3e5573;
}
@media (max-width: 600px){.rules-redesign .language-control > span{
    display: none;
  }
.rules-redesign .brand{
    font-size: 19px;
  }
.rules-redesign .language-control{
    width: 105px;
  }}
#portal .avatar{
  position: relative;
}
#portal .avatar-fallback{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #2d4562;
  color: #c4dcf4;
  border-radius: inherit;
  font-size: 14px;
}
#portal .avatar > svg{
  position: relative;
  z-index: 1;
}
#portal .room-card{
  display: block;
}
#portal .room-card-content,
#portal .panel-title > *,
#portal .hub-welcome > *,
#portal .inline-form > *,
#portal .mode-picker,
#portal .portal-nav{
  min-width: 0;
}
#portal .room-card h3,
#portal .panel-title h1,
#portal .share-room code{
  overflow-wrap: anywhere;
}
#portal .room-card h3 button{
  text-align: start;
  white-space: normal;
  max-width: 100%;
}
#portal .room-card .room-art{
  grid-row: auto;
  grid-column: auto;
}
#portal .portal-header{
  flex-wrap: wrap;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
#portal .portal-header .brand{
  min-width: 0;
}
@media (max-width: 760px){#portal input:not([type="radio"]):not([type="checkbox"]),
  #portal select,
  #portal textarea,
  #portal .portal-header .language-control select{
    font-size: 16px;
  }
#portal .portal-header .language-control select{
    width: 108px;
    max-width: 100%;
    min-height: 42px;
  }
#portal .portal-header{
    gap: 8px;
  }
#portal .room-filters{
    max-width: 100%;
  }
#portal .room-card .room-host{
    overflow-wrap: anywhere;
  }
#portal .panel-title{
    flex-wrap: wrap;
  }}
@media (max-width: 380px){#portal .portal-header .brand__name{
    font-size: 16px;
  }
#portal .portal-header .brand img{
    width: 24px;
    height: 24px;
  }
#portal .portal-header .language-control select{
    width: 100px;
    padding: 8px 2px;
  }
#portal .room-grid,
  #portal .hub-actions{
    grid-template-columns: minmax(0, 1fr);
  }
#portal .hub-actions > article{
    grid-column: auto;
  }
#portal .room-card-meta,
  #portal .room-host,
  #portal .room-rule-badges > span{
    font-size: 11px;
  }
#portal .room-card h3 button.text-link:not(.board__cell):not(.tray__slot){
    font-size: 16px;
  }
#portal .room-card-content{
    padding: 16px;
  }}
@media (max-width: 900px), (pointer: coarse){#portal input:not([type="radio"]):not([type="checkbox"]),
  #portal select,
  #portal textarea,
  #portal .portal-header .language-control select{
    font-size: 16px;
  }}
@media (max-width: 380px){#portal .portal-header:has(.profile-menu:not([hidden])) .brand__name{
    display: none;
  }
#portal .portal-header:has(.profile-menu:not([hidden])) .brand img{
    width: 32px;
    height: 32px;
  }}
#portal button.primary-button:not(.board__cell):not(.tray__slot),
#portal a.primary-button{
  color: #fff;
  background: #de5e31;
  border-color: #de5e31;
  box-shadow: 0 3px 8px #de5e3118;
}
#portal button.primary-button:not(.board__cell):not(.tray__slot):hover,
#portal a.primary-button:hover{
  background: #bd471f;
  border-color: #bd471f;
}
#portal button.text-link:not(.board__cell):not(.tray__slot){
  background: transparent;
  border: 0;
  color: #294b76;
  box-shadow: none;
}
#portal .selected:not(.tray__slot),
#portal .tabs button.selected:not(.board__cell):not(.tray__slot){
  color: #223f6b;
  background: #e8effa;
  border-color: #9db3d6;
}
#portal .club-sidebar{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 218px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 30px 20px 22px;
  background: #fff;
  border-right: 1px solid #dbe2ee;
  z-index: 70;
}
#portal .brand{
  color: #223655;
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
#portal .club-workspace{
  margin-left: 218px;
  padding: 0 30px;
  min-width: 0;
}
#portal .portal-header{
  padding: 19px 0;
  min-height: 88px;
  gap: 12px;
  background: transparent;
  border-bottom: 1px solid #d5deeb;
  flex-wrap: nowrap;
}
#portal .portal-header .brand{
  margin-right: auto;
}
#portal .portal-header .club-wordmark{
  font-size: 18px;
}
#portal .portal-header .club-mark{
  grid-template-columns: repeat(2, 10px);
}
#portal .portal-header .club-mark i{
  width: 10px;
  height: 10px;
}
#portal .portal-header .language-control{
  margin: 0;
}
#portal .portal-header .language-control select{
  background: #fff;
  color: #2b4366;
  border-color: #cbd6e5;
  font-size: 13px;
  padding: 8px;
}
#portal .profile-menu{
  color: #20314a;
  background: transparent;
  border-color: transparent;
  padding: 3px;
}
#portal .profile-menu small{
  color: #65738a;
}
#portal .profile-menu .avatar{
  width: 36px;
  height: 36px;
}
#portal .club-sidebar-bottom{
  margin-top: auto;
}
#portal .club-sidebar-bottom .pwa-shortcut{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #eaf0fb;
  padding: 16px;
  gap: 10px;
  margin: 0;
}
#portal .club-sidebar-bottom .pwa-shortcut > img{
  width: 38px;
  height: 38px;
}
#portal .club-sidebar-bottom .pwa-shortcut h2{
  font-size: 16px;
  line-height: 1.4;
}
#portal .club-sidebar-bottom .pwa-shortcut p{
  font-size: 12px;
  margin: 5px 0;
}
#portal .club-sidebar-bottom .pwa-shortcut button{
  width: 100%;
  font-size: 13px;
  padding: 9px;
}
#portal .portal-panel{
  background: #fff;
  border: 1px solid #d5deeb;
  box-shadow: 0 5px 20px #29466c05;
  border-radius: 16px;
  padding: 25px;
}
#portal .portal-panel p{
  color: #53637b;
}
#portal .portal-panel h1{
  color: #233c60;
}
#portal .portal-footer{
  background: transparent;
  color: #63738a;
  text-align: left;
  padding: 15px 0 28px;
  border-color: #d5deeb;
}
#portal .portal-footer a{
  color: #285489;
}
#portal[data-page="welcome"] .club-sidebar{
  display: none;
}
#portal[data-page="welcome"] .club-workspace{
  margin: 0 auto;
  max-width: 1240px;
}
#portal .entry-card{
  border: 1px solid #d5deeb;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 48px #203c6808;
}
#portal .entry-art{
  background: #e8eef7;
  color: #233c60;
  border: 0;
}
#portal .entry-art-caption h2{
  color: #233c60;
}
#portal .entry-art-caption p{
  color: #53637b;
}
#portal .entry-art > .eyebrow{
  color: #63738a;
}
#portal .live-pill{
  background: #dae6f4;
  border-color: #b3c7e2;
  color: #33567c;
}
#portal .entry-form{
  background: #fff;
}
#portal .entry-form h1{
  color: #20314a;
}
#portal .entry-form h1 > span{
  color: #de5e31;
}
#portal .entry-note,
#portal .entry-description,
#portal .entry-solo > span,
#portal .input-hint{
  color: #63738a;
}
#portal .entry-solo{
  border-color: #d5deeb;
}
#portal .avatar-picker > label > span{
  background: #edf2fa;
  border-color: #d5deeb;
}
#portal .avatar-picker input:checked + span{
  border-color: #de5e31;
  background: #fff3e9;
}
#portal .mode-option > span{
  background: #fff;
  color: #53637b;
  border-color: #cbd6e5;
  box-shadow: none;
}
#portal .mode-option b{
  color: #294b76;
}
#portal .mode-option input:checked + span{
  background: #e9effa;
  border-color: #7192c0;
  box-shadow: none;
}
#portal .mode-option input:checked + span b{
  color: #233f6a;
}
#portal .entry-features{
  color: #53637b;
}
#portal .hub-welcome{
  align-items: center;
  margin-bottom: 20px;
  padding: 0;
}
#portal .hub-welcome h2{
  font-size: 30px;
  margin: 5px 0;
  line-height: 1.25;
}
#portal .hub-welcome p{
  font-size: 14px;
}
#portal .hub-live{
  color: #526580;
  background: transparent;
  border: 0;
  font-size: 11px;
}
#portal .hub-live i,
#portal .room-state i{
  background: #468a6e;
}
#portal .hub-grid{
  display: block;
}
#portal .lobby-play-controls{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px 24px;
  background: #fff;
  border: 1px solid #d5deeb;
  border-radius: 15px;
  padding: 18px;
  margin-bottom: 26px;
}
#portal .lobby-rules{
  display: flex;
  gap: 16px;
  align-items: end;
}
#portal .lobby-rules .mode-picker{
  flex: 1;
  margin: 0;
  max-width: 380px;
}
#portal .lobby-rules .mode-picker legend{
  margin-bottom: 6px;
}
#portal .lobby-rules .mode-option > span{
  padding: 9px 12px;
  min-height: 44px;
}
#portal .lobby-rules .mode-option small{
  display: none;
}
#portal .quick-settings{
  display: flex;
  flex-direction: column;
  margin: 0;
  gap: 6px;
}
#portal .quick-settings label{
  color: #53637b;
  font-size: 12px;
}
#portal .quick-settings select{
  color: #294b76;
  min-height: 44px;
  padding: 9px;
}
#portal .lobby-play-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#portal .lobby-match-help{
  grid-column: 1/-1;
  margin: 0 !important;
  font-size: 12px;
  line-height: 1.5 !important;
}
#portal .rooms-heading{
  margin: 12px 0 16px;
}
#portal .rooms-heading h2{
  color: #233c60;
  font-size: 24px;
}
#portal .count-badge{
  color: #2d527e;
  background: #e2eaf7;
  border-color: #c6d5e9;
}
#portal .join-strip input{
  width: 130px;
  background: #fff;
}
#portal .room-filters{
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #d5deeb;
  padding-bottom: 13px;
  margin-bottom: 18px;
  gap: 8px;
}
#portal .room-filters button:not(.board__cell):not(.tray__slot){
  color: #53637b;
  background: transparent;
  border-color: transparent;
}
#portal .room-filters button.selected:not(.board__cell):not(.tray__slot){
  background: #e8effa;
  color: #223f6b;
  border-color: #c3d2e9;
}
#portal .bot-legend .ui-icon{
  display: none;
}
#portal .top-five{
  background: #fff;
  color: #53637b;
  border-color: #d5deeb;
}
#portal .room-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}
#portal .room-card{
  display: block;
  border: 1px solid #d4deeb;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  background: #fff;
  min-width: 0;
  box-shadow: 0 4px 15px #233c6006;
}
#portal .room-card:hover{
  border-color: #93abce;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px #233c600e;
}
#portal .room-card button.room-art:not(.board__cell):not(.tray__slot){
  width: 100%;
  height: auto;
  aspect-ratio: 360/150;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: block;
  background: #192c46;
  position: relative;
  overflow: hidden;
}
#portal .room-picture{
  width: 100%;
  height: 100%;
  display: block;
}
#portal .room-art-label{
  top: 11px;
  bottom: auto;
  left: 11px;
  font-size: 10px;
  color: #fff;
  background: #12253dc9;
  border: 1px solid #ffffff26;
  padding: 5px 8px;
  max-width: calc(100% - 22px);
}
#portal .room-card-content{
  padding: 15px;
}
#portal .room-card-meta{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #63738a;
}
#portal .room-state{
  color: #43765f;
  font-size: 10px;
}
#portal .room-state.is-playing{
  color: #a76b26;
}
#portal .room-state.is-playing i{
  background: #c5893a;
}
#portal .room-card h3{
  margin: 11px 0 4px;
  font-size: 18px;
  line-height: 1.35;
  min-height: 0;
}
#portal .room-card h3 button.text-link:not(.board__cell):not(.tray__slot){
  display: block;
  font-size: inherit;
  font-weight: 750;
  color: #233c60;
  min-height: 0;
  line-height: inherit;
}
#portal .room-card .room-host{
  color: #63738a;
  font-size: 12px;
  margin: 0 0 11px;
  overflow-wrap: anywhere;
}
.room-live-notice{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid #b9d4ee;
  border-left: 4px solid #3278bd;
  border-radius: 12px;
  padding: 18px;
  margin: 20px 0;
  background: #edf5ff;
}
.room-live-notice > div{
  min-width: 0;
}
#portal .room-live-notice p{
  margin: 6px 0 0;
}
.room-match-time{
  flex: none;
  text-align: right;
}
.room-match-time span{
  display: block;
  font-size: 12px;
}
.room-match-time strong{
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}
.room-round-complete{
  padding: 14px 18px;
  border-radius: 10px;
  background: #e8f5ee;
  color: #2a6248;
}
.room-share-panel{
  border: 1px solid #d5deeb;
  background: #f6f9fd;
  border-radius: 14px;
  padding: 22px;
  margin-top: 24px;
}
.room-share-code{
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.room-share-code > strong{
  font-size: 36px;
  font-weight: 750;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: #23436b;
  overflow-wrap: anywhere;
}
.room-share-link{
  min-width: 0;
}
.ranking-person{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 150px;
}
.ranking-person > .avatar{
  width: 30px;
  height: 30px;
  flex: none;
}
.ranking-social{
  gap: 6px;
  margin-top: 8px;
}
#portal .ranking-social button{
  padding: 5px 9px;
  min-height: 30px;
  font-size: 12px;
}
#portal .person[data-state="finished"]{
  border-color: #c6d9d0;
}
@media (max-width: 480px){.room-live-notice{
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
  }
.room-match-time strong{
    font-size: 23px;
  }
.room-share-panel{
    padding: 16px;
  }}
#portal .room-rule-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#portal .room-rule-badges > span{
  color: #456080;
  background: #edf2fa;
  border: 0;
  font-size: 11px;
  padding: 5px 7px;
}
#portal .room-card-bottom{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  border-top: 1px solid #e2e8f2;
  margin-top: 13px;
  padding-top: 13px;
}
#portal .room-card-bottom > span{
  display: flex;
  align-items: center;
  color: #63738a;
  gap: 5px;
  font-size: 12px;
}
#portal .room-card-bottom > span b{
  color: #2b486f;
}
#portal .pager button{
  background: #fff;
  color: #294b76;
}
#portal .member-list .person,
#portal .competition-card,
#portal .result-card,
#portal .mission,
#portal .achievement,
#portal .cosmetic{
  background: #f7f9fc;
  border-color: #d5deeb;
}
#portal .waiting-overview{
  background: #edf2fa;
  border-color: #d5deeb;
}
#portal .waiting-overview h2,
#portal .waiting-overview .room-duration{
  color: #233c60;
}
#portal .waiting-overview p,
#portal .person p,
#portal .person small{
  color: #63738a;
}
#portal .room-toolbar button{
  color: #294b76;
  background: #fff;
}
#portal .practice-choices a.secondary-button{
  background: #fff;
  color: #294b76;
  border-color: #cbd6e5;
}
#portal .table-scroll{
  background: #fff;
  border-color: #d5deeb;
}
#portal .game-top{
  background: #edf2fa;
  border-color: #cbd6e5;
  color: #294b76;
}
#portal .game-top small,
#portal .board-instruction{
  color: #53637b;
}
#portal #chat-widget{
  position: fixed;
  top: 110px;
  right: 20px;
  bottom: 20px;
  width: 320px;
  font-size: 13px;
  z-index: 90;
  display: flex;
  align-items: stretch;
  pointer-events: none;
}
#portal #chat-widget .chat-toggle{
  pointer-events: auto;
  margin-top: auto;
  width: 100%;
  background: #223d68 !important;
  color: #fff !important;
  border-color: #223d68 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 8px 26px #233c6020;
}
#portal .chat-toggle > span:nth-child(2){
  flex: 1;
  text-align: left;
}
#portal .chat-toggle strong{
  font-size: 14px;
  display: block;
}
#portal .chat-toggle small{
  display: block;
  color: #d2dfef;
  font-size: 11px;
  margin-top: 2px;
}
#portal .chat-toggle .ui-icon{
  color: #fff;
}
#portal.chat-expanded .chat-toggle{
  display: none !important;
}
#portal .chat-box{
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #20314a;
  border: 1px solid #c5d3e6;
  border-radius: 14px;
  box-shadow: 0 8px 28px #233c6012;
  overflow: hidden;
}
#portal .chat-heading{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #223d68;
  padding: 15px;
  flex: none;
}
#portal .chat-heading > div{
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
#portal .chat-heading h2{
  color: #fff;
  font-size: 16px;
  margin: 0;
}
#portal .chat-heading button.chat-close{
  color: #fff;
  background: #ffffff12;
  border: 0;
  min-height: 32px;
  width: 32px;
  padding: 0;
  font-size: 24px;
}
#portal .chat-tabs{
  display: flex;
  flex: none;
  gap: 5px;
  padding: 10px;
  background: #f2f5fa;
  border-bottom: 1px solid #dbe3ef;
  overflow-x: auto;
}
#portal .chat-tab{
  color: #53637b;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
}
#portal .chat-tab.selected{
  color: #223f6b;
  background: #e1eaf8;
  border-color: #bccfe9;
}
#portal .chat-tabs button{
  color: inherit;
  background: transparent;
  font-size: 12px;
}
#portal .chat-tab.selected button{
  color: #223f6b;
}
#portal #chat-older{
  margin: 5px auto;
  min-height: 28px;
  font-size: 11px;
  padding: 4px 10px;
  flex: none;
}
#portal .chat-history{
  height: auto;
  flex: 1;
  min-height: 0;
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#portal .chat-message{
  display: flex;
  gap: 8px;
  background: transparent;
  color: #20314a;
  padding: 4px 0;
  margin: 6px 0;
  border: 0;
  align-items: flex-start;
}
#portal .chat-message .avatar{
  width: 29px;
  height: 29px;
  flex: none;
}
#portal .chat-message > div{
  flex: 1;
  min-width: 0;
}
#portal .chat-message-meta{
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #526580;
}
#portal .chat-message-meta button.text-link:not(.board__cell):not(.tray__slot){
  font-size: 11px;
  min-height: 20px;
}
#portal .chat-message p{
  color: #334e70;
  background: #edf2fa;
  border-radius: 0 9px 9px 9px;
  font-size: 13px;
  padding: 9px 11px;
  margin: 3px 0;
  line-height: 1.5;
}
#portal .chat-message.mine p{
  background: #e4edfb;
  color: #233f6b;
}
#portal #chat-form{
  flex: none;
  margin: 0;
  padding: 12px 10px;
  gap: 6px;
  border-top: 1px solid #dbe3ef;
  background: #fff;
}
#portal #chat-form input{
  font-size: 16px;
  min-height: 44px;
  background: #f6f8fc;
  color: #20314a;
  border-color: #cbd6e5;
  padding: 10px;
}
#portal #chat-form button{
  background: #285489;
  color: #fff;
  border-color: #285489;
  font-size: 12px;
  padding: 8px 11px;
}
#portal .chat-error{
  flex: none;
  margin: 0;
  padding: 0 10px;
  color: #a43d44;
  font-size: 11px;
  background: #fff;
}
#portal .chat-error:not(:empty){
  padding-bottom: 9px;
}
@media (min-width: 1024px){body.chat-open #portal .club-workspace{
    padding-right: 370px;
  }
body.chat-open #portal #chat-widget .chat-toggle{
    display: none;
  }
#portal #chat-widget:has(.chat-box[hidden]){
    top: auto;
    width: 280px;
  }
#portal .lobby-play-controls{
    grid-template-columns: 1fr;
  }}
@media (min-width: 1024px) and (max-width: 1279px){#portal .club-sidebar{
    width: 86px;
    padding: 27px 12px;
    align-items: center;
  }
#portal .club-sidebar .club-wordmark,
  #portal .club-sidebar-bottom,
  #portal .club-help,
  #portal .club-sidebar .portal-nav span{
    display: none;
  }
#portal .club-workspace{
    margin-left: 86px;
    padding-left: 22px;
    padding-right: 22px;
  }
body.chat-open #portal .club-workspace{
    padding-right: 304px;
  }
#portal #chat-widget{
    width: 264px;
    right: 18px;
  }
#portal .room-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
#portal .profile-menu > span:last-child{
    display: none;
  }}
@media (max-width: 1023px){#portal .club-sidebar{
    width: 175px;
    padding: 27px 14px;
  }
#portal .club-workspace{
    margin-left: 175px;
    padding: 0 22px;
  }
#portal .club-sidebar .club-wordmark{
    font-size: 20px;
  }
#portal .club-sidebar-bottom .pwa-shortcut h2{
    font-size: 14px;
  }
#portal .room-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
#portal .lobby-play-controls{
    grid-template-columns: 1fr;
  }
#portal .portal-header .brand{
    margin-right: auto;
  }
#portal .portal-header .club-wordmark{
    display: none;
  }
#portal .profile-menu > span:last-child{
    display: none;
  }
#portal .hub-live{
    display: none;
  }
#portal #chat-widget{
    top: auto;
    bottom: 22px;
    right: 22px;
    left: 197px;
    width: auto;
  }
#portal #chat-widget .chat-toggle{
    max-width: 330px;
    margin-left: auto;
  }
#portal #chat-widget:has(dialog[open]) .chat-toggle{
    visibility: hidden;
  }
#portal dialog.chat-box{
    position: fixed;
    top: calc(
      var(--chat-viewport-top, 0px) + var(--chat-viewport-height, 100dvh) -
        min(690px, var(--chat-viewport-height, 100dvh) - 16px)
    );
    left: max(8px, calc((100vw - 560px) / 2));
    right: auto;
    bottom: auto;
    margin: 0;
    width: calc(100vw - 16px);
    max-width: 560px;
    height: min(690px, calc(var(--chat-viewport-height, 100dvh) - 16px));
    max-height: none;
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
#portal dialog.chat-box::backdrop{
    background: #17283b80;
    backdrop-filter: blur(3px);
  }
body.chat-open:has(#portal dialog[open]){
    overflow: hidden;
  }}
@media (max-width: 760px){#portal .club-sidebar{
    position: fixed;
    inset: auto 0 0;
    height: calc(65px + env(safe-area-inset-bottom));
    width: 100%;
    padding: 5px 8px env(safe-area-inset-bottom);
    border: 0;
    border-top: 1px solid #d5deeb;
    gap: 0;
    z-index: 80;
  }
#portal .club-sidebar > .brand,
  #portal .club-sidebar-bottom,
  #portal .club-help{
    display: none;
  }
#portal .portal-nav .ui-icon{
    width: 20px;
    height: 20px;
  }
#portal .club-workspace{
    margin: 0;
    padding: 0 15px;
  }
#portal .portal-header{
    min-height: 73px;
    padding: 13px 0;
    gap: 7px;
    flex-wrap: nowrap;
  }
#portal .portal-header .club-wordmark{
    display: block;
    font-size: 16px;
  }
#portal .portal-header .brand{
    gap: 7px;
  }
#portal .portal-header .language-control select{
    width: 52px;
    padding: 7px 3px;
    min-height: 38px;
    font-size: 11px;
  }
#portal .portal-header .profile-menu{
    min-height: 38px;
  }
#portal .portal-header .profile-menu .avatar{
    width: 30px;
    height: 30px;
  }
#portal .header-chat .ui-icon{
    width: 17px;
    height: 17px;
  }
#portal .portal-footer{
    padding-bottom: 150px;
  }
#portal .hub-welcome{
    margin-bottom: 17px;
  }
#portal .hub-welcome h2{
    font-size: 25px;
  }
#portal .hub-welcome p{
    display: none;
  }
#portal .lobby-play-controls{
    padding: 13px;
    gap: 12px;
    margin-bottom: 23px;
  }
#portal .lobby-rules{
    gap: 10px;
  }
#portal .lobby-rules .mode-picker{
    min-width: 0;
  }
#portal .lobby-rules .mode-option > span{
    padding: 7px 6px;
    min-height: 40px;
  }
#portal .lobby-rules .mode-option b{
    font-size: 11px;
    white-space: normal;
  }
#portal .lobby-rules .mode-picker legend,
  #portal .quick-settings label{
    font-size: 11px;
  }
#portal .quick-settings{
    flex: none;
  }
#portal .quick-settings select{
    min-height: 40px;
    font-size: 12px;
    padding: 7px;
  }
#portal .lobby-play-actions{
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 6px;
  }
#portal .lobby-play-actions button:not(.board__cell):not(.tray__slot){
    font-size: 11px;
    padding: 10px 5px;
  }
#portal .lobby-match-help{
    font-size: 11px;
  }
#portal .rooms-heading{
    align-items: end;
    gap: 10px;
  }
#portal .rooms-heading .eyebrow{
    display: none;
  }
#portal .rooms-heading h2{
    font-size: 21px;
  }
#portal .join-strip{
    gap: 5px;
  }
#portal .join-strip label{
    font-size: 10px;
  }
#portal .join-strip input{
    width: 93px;
    padding: 7px;
    min-height: 36px;
    font-size: 12px;
  }
#portal .join-strip button{
    padding: 6px;
    min-height: 36px;
  }
#portal .room-filters{
    gap: 5px;
  }
#portal .room-filters button:not(.board__cell):not(.tray__slot){
    font-size: 11px;
    padding: 8px 9px;
    min-height: 36px;
  }
#portal .room-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
#portal .room-card{
    border-radius: 12px;
  }
#portal .room-card button.room-art:not(.board__cell):not(.tray__slot){
    aspect-ratio: 360/180;
  }
#portal .room-art-label{
    top: 7px;
    left: 7px;
    font-size: 8px;
    padding: 3px 5px;
    gap: 3px;
  }
#portal .room-art-label .ui-icon{
    width: 11px;
    height: 11px;
  }
#portal .room-card-content{
    padding: 11px;
  }
#portal .room-card-meta{
    font-size: 9px;
    flex-wrap: wrap;
    gap: 4px;
  }
#portal .room-state{
    font-size: 8px;
  }
#portal .room-card h3{
    font-size: 16px;
    min-height: 0;
    margin: 9px 0 4px;
  }
#portal .room-card .room-host{
    font-size: 10px;
  }
#portal .room-rule-badges{
    gap: 4px;
  }
#portal .room-rule-badges > span{
    padding: 4px 5px;
    font-size: 9px;
  }
#portal .room-rule-badges .ui-icon{
    width: 11px;
    height: 11px;
  }
#portal .room-card-bottom{
    gap: 9px;
    padding-top: 10px;
    margin-top: 10px;
  }
#portal #chat-widget{
    left: 15px;
    right: 15px;
    bottom: calc(77px + env(safe-area-inset-bottom));
    width: auto;
    top: auto;
  }
#portal #chat-widget .chat-toggle{
    width: 100%;
    max-width: none;
    min-height: 49px;
    padding: 8px 13px;
  }
#portal .chat-toggle strong{
    display: inline;
    font-size: 13px;
  }
#portal .chat-toggle small{
    display: inline;
    font-size: 11px;
    margin-left: 8px;
    color: #e0e8f4;
  }
#portal .portal-panel{
    padding: 16px;
    border-radius: 13px;
  }
#portal[data-page="welcome"] .club-workspace{
    padding: 0 15px;
  }
#portal .entry-form{
    padding: 24px 20px;
  }
#portal .entry-art{
    min-height: 260px;
  }
#portal .entry-features{
    flex-wrap: wrap;
    font-size: 11px;
    gap: 12px;
  }}
@media (max-width: 380px){#portal .club-workspace{
    padding: 0 12px;
  }
#portal .portal-header .club-wordmark{
    display: none;
  }
#portal .room-grid{
    grid-template-columns: minmax(0, 1fr);
  }
#portal .room-card button.room-art:not(.board__cell):not(.tray__slot){
    aspect-ratio: 360/150;
  }
#portal .room-card h3{
    min-height: 0;
  }
#portal .room-card .room-host{
    font-size: 12px;
  }
#portal .room-card-meta{
    font-size: 11px;
    flex-wrap: nowrap;
  }
#portal .room-state{
    font-size: 10px;
  }
#portal .room-rule-badges > span{
    font-size: 11px;
  }
#portal .lobby-rules{
    flex-wrap: wrap;
  }
#portal .lobby-rules .mode-picker{
    flex-basis: 100%;
    max-width: none;
  }
#portal .quick-settings{
    flex-direction: row;
    align-items: center;
  }
#portal .lobby-play-actions{
    grid-template-columns: 1fr 1fr;
  }
#portal .lobby-play-actions .launch-button{
    grid-column: 1/-1;
  }}
@media (prefers-reduced-motion: reduce){#portal .room-card,
  #portal button{
    transition: none;
  }}
#portal .rooms-heading{
  flex-direction: row;
  align-items: end;
}
#portal .rooms-heading .join-strip{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: auto;
}
#portal .lobby-rules .mode-picker{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}
#portal .lobby-rules .mode-picker label{
  width: auto;
  display: block;
}
#portal .lobby-rules .mode-picker legend{
  grid-column: 1/-1;
}
@media (max-width: 760px){#portal .portal-header .language-control select{
    width: 48px;
    font-size: 16px;
  }
#portal .rooms-heading h2{
    font-size: 19px;
  }
#portal .join-strip input{
    width: 87px;
  }
#portal .club-sidebar .portal-nav button{
    min-height: 54px;
    font-size: 9px;
  }}
#portal .quick-settings{
  width: auto;
  flex: 0 0 auto;
  align-items: stretch;
}
#portal .lobby-rules .mode-picker{
  flex: 1 1 0;
}
@media (max-width: 760px){#portal .quick-settings label{
    max-width: 90px;
  }
#portal .quick-settings select,
  #portal .join-strip input{
    font-size: 16px;
  }
#portal .rooms-heading h2{
    flex-wrap: wrap;
  }}
@media (min-width: 1024px){body.chat-open #portal-content{
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    padding-right: 0;
  }}
#app .brand,
#app .brand__name > span,
.rules-redesign .brand{
  color: #233c60;
}
#app .mode-switch{
  background: #f2f5fa;
  border-color: #d5deeb;
}
#app .mode-switch button{
  color: #53637b;
}
#app .mode-switch button[aria-pressed="true"]{
  background: #e1eaf8;
  color: #223f6b;
  border-color: #a5bcde;
}
#app .mode-note,
#app .intro-copy,
#app .tip-card p,
#app .board-instruction,
#app .hud,
#app .site-footer{
  color: #63738a;
}
#app .icon-button,
#app .tool-button,
#app .hud__mute,
#app .rotation-bar > button,
#app .language-control select{
  background: #fff;
  color: #294b76;
  border-color: #cbd6e5;
}
#app .primary-button,
#app .overlay__button{
  background: #de5e31;
  color: #fff;
  border-color: #de5e31;
}
#app .primary-button:hover{
  background: #bd471f;
}
#app dialog .secondary-button{
  background: #edf2fa;
  color: #294b76;
  border-color: #cbd6e5;
}
.rules-redesign .primary-button{
  color: #fff;
  background: #de5e31;
  border-color: #de5e31;
}
.rules-redesign .secondary-button{
  color: #294b76;
  background: #fff;
  border-color: #cbd6e5;
}
#portal .portal-header button.install-app:not(.board__cell):not(.tray__slot){
  color: #fff;
  background: #223d68;
  border-color: #223d68;
}
#portal
  .portal-header
  button.install-app:not(.board__cell):not(.tray__slot):hover{
  background: #162d50;
}
@media (min-width: 1024px){#portal:not([data-page="welcome"]) .portal-header > .brand{
    display: none;
  }}
#portal .bootstrap-form > label{
  color: #53637b;
}
#portal .remote-game .game-top{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  padding: 16px;
  top: 8px;
  border: 1px solid #cbd6e5;
  border-radius: 14px;
  box-shadow: 0 3px 12px #203c6808;
}
#portal .remote-game .game-top > div{
  min-width: 0;
  gap: 4px;
}
#portal .remote-game .game-top strong{
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
#portal .remote-game .game-top > button{
  min-width: 0;
  width: 100%;
  min-height: 42px;
}
#portal[data-page="run"] .panel-title{
  margin-bottom: 16px;
  gap: 12px;
}
#portal[data-page="run"] .ranking-layout-control{
  margin-bottom: 12px;
}
@container play-area (min-width: 560px){#portal .remote-game .game-top{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
    gap: 20px;
    padding: 16px 20px;
  }
#portal .remote-game .game-top > button{
    width: auto;
  }}
@container play-area (max-width: 300px){#portal .remote-game .game-top{
    padding: 12px;
    gap: 10px;
  }}
#portal
  .lobby-play-actions
  .play-now-button:not(.board__cell):not(.tray__slot){
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  min-width: 215px;
  padding: 14px 22px;
  background: #d85225;
  border-color: #c6441b;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 6px 18px #d852252b;
}
#portal .play-now-button > .ui-icon{
  width: 21px;
  height: 21px;
}
#portal .lobby-play-actions{
  align-items: stretch;
}
#portal .lobby-play-actions .secondary-button{
  align-self: center;
}
#portal .room-toolbar{
  display: flex;
  gap: 8px;
  align-items: center;
}
#portal .room-toolbar [data-action="leave-room"]{
  margin-left: auto;
}
#portal .room-toolbar [data-action="ready"]{
  min-height: 48px;
  font-size: 14px;
}
#portal .room-toolbar [data-action="ready"][aria-pressed="true"]{
  color: #286244;
  background: #e5f3e9;
  border-color: #78a98d;
}
#portal button.room-chat-button:not(.board__cell):not(.tray__slot){
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #234c80;
  background: #e7effb;
  border-color: #aec4e3;
}
#portal .member-list .person{
  padding: 14px;
  border: 1px solid #d5deeb;
  border-left: 4px solid #c1cbd8;
  border-radius: 11px;
  min-height: 86px;
}
#portal .member-list .person[data-state="ready"]{
  border-left-color: #3e8c62;
  background: #f1f8f3;
}
#portal .member-list .person[data-state="playing"]{
  border-left-color: #c47a28;
  background: #fff9ee;
}
#portal .member-list .person p{
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 6px;
  margin: 7px 5px 4px 0;
  background: #e9eef5;
  color: #53637b;
  font-size: 12px;
  font-weight: 650;
}
#portal .member-list .person[data-state="ready"] p{
  background: #dcefe2;
  color: #286244;
}
#portal .member-list .person[data-state="playing"] p{
  background: #ffedcf;
  color: #855319;
}
#portal .member-presence{
  display: inline-block;
  font-size: 11px;
  margin-left: 3px;
}
#portal .room-host-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
#portal .room-guide{
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  margin: 18px 0;
  border: 1px solid #c0d2e9;
  background: #edf3fc;
  border-radius: 12px;
}
#portal .room-guide > div{
  flex: 1;
}
#portal .room-guide strong{
  color: #294b76;
  font-size: 14px;
}
#portal .room-guide p{
  font-size: 12px;
  line-height: 1.6;
  margin: 6px 0 0;
}
#portal .room-guide button{
  flex: none;
}
#portal .room-countdown{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid #e9bb8c;
  background: #fff5e7;
  border-radius: 14px;
  margin: 18px 0;
}
#portal .room-countdown > strong{
  display: grid;
  place-items: center;
  flex: none;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  color: #fff;
  background: #d85225;
  font-size: 42px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
#portal .room-countdown h2{
  font-size: 21px;
  color: #8d3d1c;
  margin: 0 0 7px;
}
#portal .room-countdown p{
  color: #795337;
  font-size: 13px;
  margin: 0;
}
@media (max-width: 760px){#portal .lobby-play-actions{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
#portal
    .lobby-play-actions
    .play-now-button:not(.board__cell):not(.tray__slot){
    grid-column: 1/-1;
    min-width: 0;
    min-height: 54px;
    padding: 13px 18px;
    font-size: 17px;
  }
#portal .room-toolbar{
    gap: 7px;
  }
#portal .room-toolbar [data-action="ready"]{
    flex-basis: 100%;
    min-height: 49px;
    font-size: 15px;
  }
#portal .room-toolbar [data-action="leave-room"]{
    margin-left: 0;
  }
#portal .room-guide{
    align-items: flex-start;
    padding: 13px;
    gap: 10px;
  }
#portal .room-guide button{
    padding: 7px 10px;
    font-size: 12px;
  }
#portal .room-countdown{
    gap: 14px;
    padding: 15px;
  }
#portal .room-countdown > strong{
    width: 58px;
    height: 58px;
    font-size: 35px;
  }
#portal .room-countdown h2{
    font-size: 18px;
  }
#portal .room-countdown p{
    font-size: 12px;
  }
#portal .member-list .person{
    gap: 9px;
    padding: 12px 10px;
  }}
#portal .waiting-code,
#portal .waiting-code strong{
  color: #294b76;
}
.friend-share .row-actions{
  justify-content: center;
}
#portal .chat-tab-navigation{
  display: flex;
  flex: none;
  align-items: center;
  min-width: 0;
  background: #f2f5fa;
  border-bottom: 1px solid #dbe3ef;
}
#portal .chat-tab-navigation .chat-tabs{
  flex: 1;
  min-width: 0;
  border: 0;
}
#portal .chat-tab-navigation > button{
  flex: none;
  width: 32px;
  min-height: 36px;
  padding: 3px;
  margin: 3px;
  font-size: 24px;
}
#portal .room-event-banner{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 16px;
  border: 1px solid #e7be91;
  border-radius: 12px;
  background: #fff3e4;
  color: #754a22;
}
#portal .room-event-banner p{
  flex: 1;
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.6;
  color: inherit;
}
#portal .room-event-banner button{
  flex: none;
  min-width: 32px;
  min-height: 32px;
  padding: 2px;
  background: transparent;
  color: inherit;
  font-size: 24px;
}
@media (min-width: 1440px){body:not(.chat-open) #portal-content[data-page="lobby"]:has(> .portal-ad){
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: start;
  }
body:not(.chat-open) #portal-content[data-page="lobby"] > .portal-ad{
    order: 0;
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 24px 0;
  }}
#portal .game-layout[hidden],
#portal .ranking-layout-control[hidden],
#portal .room-terminal[hidden]{
  display: none;
}
.room-terminal{
  max-width: 1120px;
  margin: 16px auto 32px;
}
.match-results{
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid #ccd9e8;
  border-radius: 20px;
  background: #f8fbff;
}
.match-results > header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.match-results h2{
  margin: 0;
}
.match-results > p{
  color: #526882;
  line-height: 1.6;
}
.result-state{
  flex-shrink: 0;
  border-radius: 20px;
  padding: 6px 12px;
  background: #e9eef9;
  font-size: 12px;
}
.match-results[data-official="true"] .result-state{
  background: #d5f3e6;
  color: #205c44;
}
.match-results table{
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
}
.match-results th,
.match-results td{
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid #dce5ef;
}
.match-results th{
  background: #e6edf7;
  color: #465d7b;
  font-size: 13px;
}
.match-results tbody tr:nth-child(even){
  background: #eff4fa;
}
.room-terminal > .result-actions{
  justify-content: center;
  margin-top: 24px;
}
.room-terminal > .result-actions button{
  min-width: 200px;
}
.onboarding-offer .row-actions{
  flex-shrink: 0;
}
@media (max-width: 600px){.match-results{
    padding: 14px;
    border-radius: 14px;
  }
.match-results h2{
    font-size: 18px;
  }}
.simulation-info{
  color: #63738a;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#portal .room-card .simulation-info{
  margin: -3px 0 10px;
  font-size: 11px;
}
.live-standings{
  border: 1px solid #ccd9e8;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.live-standings > header{
  padding: 16px;
  background: #f0f6fc;
  border-bottom: 1px solid #e0e8f1;
}
#portal .live-standings h2{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  margin: 0 0 6px;
}
.live-standings ol{
  list-style: none;
  margin: 0;
  padding: 4px 10px;
}
.live-standings li{
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 12px 6px;
  border-bottom: 1px solid #edf1f6;
}
.live-standings li:last-child{
  border-bottom: 0;
}
.live-standings li.is-you{
  background: #eaf5ed;
  border-radius: 8px;
}
.live-standings li > div{
  min-width: 0;
}
.live-standings li strong{
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.live-standings li small{
  display: block;
  font-size: 11px;
  margin-top: 4px;
}
.live-standings li strong small{
  display: inline;
}
.live-standings li b{
  font-size: 16px;
  color: #204f7e;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  max-width: 100px;
}
#portal .live-standings > p{
  font-size: 11px;
  padding: 0 16px 12px;
  line-height: 1.6;
}
#portal .personal-run-summary{
  margin: 20px 0 16px;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid #d2e0ed;
  border-radius: 18px;
  background: #fff;
}
.personal-run-summary > header{
  display: flex;
  align-items: center;
  gap: 14px;
}
#portal .personal-run-summary h2{
  font-size: 19px;
  margin: 0 0 6px;
}
#portal .personal-run-summary p{
  margin: 0;
  line-height: 1.6;
}
.personal-run-summary dl{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 0;
}
.personal-run-summary dl > div{
  min-width: 0;
  padding: 12px;
  border-radius: 12px;
  background: #f2f6fb;
}
.personal-run-summary dt{
  color: #596f8b;
  font-size: 12px;
}
.personal-run-summary dd{
  margin: 6px 0 0;
  color: #203e68;
  font-weight: 750;
  font-size: 24px;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
#portal .terminal-board .game-top,
#portal .terminal-board .remote-mode,
#portal .terminal-board .board-instruction,
#portal .terminal-board #remote-status,
#portal .terminal-board #remote-result{
  display: none;
}
@media (max-width: 600px){.personal-run-summary dl{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.personal-run-summary > header{
    align-items: start;
  }}
#portal .remote-game .game-top--compact{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
#portal .remote-game .game-top--compact:not(:has(.hud-rank-button)){
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
}
#portal .game-top--compact > div{
  gap: 2px;
}
#portal .game-top--compact small{
  font-size: 10px;
}
#portal .game-top--compact #remote-score{
  font-size: clamp(20px, 5cqi, 28px);
}
#portal .game-top--compact #remote-time{
  font-size: clamp(17px, 4cqi, 24px);
}
#portal
  .game-top--compact
  > button.game-action-icon:not(.board__cell):not(.tray__slot){
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 8px;
  border-color: #bccfe3;
  background: #fff;
  border-radius: 10px;
}
#portal .game-top--compact .game-action-icon .ui-icon{
  width: 20px;
  height: 20px;
}
#portal
  .game-top--compact
  > button.end-run-icon:not(.board__cell):not(.tray__slot){
  color: #a84b35;
  border-color: #ead2c9;
}
#portal .game-top--compact > button[aria-expanded="true"]{
  background: #e0efff;
  border-color: #709ac3;
}
#portal .live-standings > header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
}
#portal .live-standings h2{
  font-size: 15px;
  margin: 0;
}
#portal .live-standings > header small{
  font-size: 11px;
}
#portal .live-standings table{
  min-width: 600px;
  width: 100%;
  border-collapse: collapse;
}
#portal .live-standings th,
#portal .live-standings td{
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid #e1e9f2;
}
#portal .live-standings th{
  font-size: 11px;
}
#portal .live-standings td{
  font-size: 12px;
}
#portal .live-standings tr.is-you > td{
  background: #eaf5ed;
}
#portal .live-standings td.live-points{
  font-size: 18px;
  font-weight: 750;
  color: #204f7e;
  font-variant-numeric: tabular-nums;
}
#live-ranking-side .live-standings > header{
  flex-direction: column;
  align-items: start;
  padding-right: 48px;
}
#portal .live-standings--cards table,
#portal .live-standings--cards tbody{
  display: block;
  min-width: 0;
}
#portal .live-standings--cards thead{
  position: absolute;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
}
#portal .live-standings--cards tbody{
  padding: 8px;
}
#portal .live-standings--cards tr{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: relative;
  padding: 8px;
  border: 1px solid #e1e9f2;
  border-radius: 10px;
  margin-bottom: 8px;
  background: #fff;
}
#portal .live-standings--cards tr.is-you{
  background: #eaf5ed;
  border-color: #b9d9c2;
}
#portal .live-standings--cards td{
  border: 0;
  padding: 5px 4px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  background: transparent;
}
#portal .live-standings--cards td.live-place{
  position: absolute;
  top: 8px;
  left: 8px;
  width: 26px;
  font-weight: 700;
}
#portal .live-standings--cards td.live-player-name{
  grid-column: 1 / -1;
  padding-left: 28px;
}
#portal .live-standings--cards td[data-label]::before{
  content: attr(data-label);
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #526882;
  padding-bottom: 3px;
}
#portal .live-standings--cards td.live-player-status{
  grid-column: span 2;
}
@media (max-width: 600px){#portal .remote-game .game-top--compact{
    padding: 10px;
    gap: 4px;
  }
#portal .live-standings > header{
    flex-wrap: wrap;
    gap: 6px;
  }
#portal[data-page="run"] .panel-title{
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 12px;
  }
#portal[data-page="run"] .panel-title h1{
    font-size: 20px;
    margin: 0;
  }
#portal .full-live-ranking .live-standings table,
  #portal .full-live-ranking .live-standings tbody{
    display: block;
    min-width: 0;
  }
#portal .full-live-ranking .live-standings thead{
    position: absolute;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
#portal .full-live-ranking .live-standings tbody{
    padding: 8px;
  }
#portal .full-live-ranking .live-standings tr{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: relative;
    padding: 8px;
    border: 1px solid #e1e9f2;
    border-radius: 10px;
    margin-bottom: 8px;
  }
#portal .full-live-ranking .live-standings td{
    border: 0;
    padding: 5px 4px;
    min-width: 0;
    overflow-wrap: anywhere;
  }}
#portal .game-top--compact .run-timer small,
#portal .game-top--compact #remote-time{
  white-space: normal;
  overflow-wrap: anywhere;
}
.match-results-heading{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}
.match-results-return{
  flex: none;
  min-width: 180px;
  white-space: normal;
}
@media (max-width: 760px){#portal .match-results > header{
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
.match-results-heading{
    justify-content: space-between;
    gap: 8px;
  }
#portal .match-results-return{
    width: 100%;
    min-height: 44px;
    min-width: 0;
  }}
/* Shared layout contract for every game using the Block Puzzle interface. */
#portal[data-game-ui-version="1"] .club-sidebar{position:fixed;inset:0 auto 0 0;z-index:80;display:flex;flex-direction:column;background:#fff}
#portal[data-game-ui-version="1"] .club-workspace{min-height:100vh;padding:0 32px}
#portal[data-game-ui-version="1"] .game-platform-content{width:100%;max-width:1420px;margin:0 auto;padding:24px 0 36px}
#portal[data-game-ui-version="1"][data-page="lobby"] .game-platform-content>.portal-panel{padding:0;border:0;box-shadow:none;background:transparent}
#portal[data-game-ui-version="1"][data-page="lobby"] .game-platform-content>.portal-panel>.panel-title{display:none}
#portal[data-game-ui-version="1"] .portal-panel input,#portal[data-game-ui-version="1"] .portal-panel select{font:inherit}
#portal[data-game-ui-version="1"] .room-card button:disabled{cursor:default;opacity:.5}
#portal[data-game-ui-version="1"] .room-picture{overflow:visible}
#portal[data-game-ui-version="1"] .chat-tabs{min-height:43px;display:flex;gap:6px;align-items:center;padding:6px}
#portal[data-game-ui-version="1"] #chat-widget{position:fixed;z-index:90}
#portal[data-game-ui-version="1"] #chat-panel[hidden]{display:none!important}
#portal[data-game-ui-version="1"] .game-platform-content>.entry-card{margin-top:12px}
#portal[data-game-ui-version="1"] .shared-game-avatar{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:#e2f1ed;color:#197d79;font-size:17px;font-weight:700}
#portal[data-game-ui-version="1"] .shared-game-avatar svg{width:100%;height:100%}
#portal[data-game-ui-version="1"] .game-room-count{font-size:12px;color:#708b92}
#portal[data-game-ui-version="1"] .game-live-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
#portal[data-game-ui-version="1"] .game-live-meta>h1{margin:0 auto 0 0;font-size:23px}
#portal[data-game-ui-version="1"] .game-live-meta button{padding:9px 12px}
#portal[data-game-ui-version="1"] .game-help{font-size:12px;line-height:1.8;color:#6d838b}
#portal[data-game-ui-version="1"] .empty-rooms{padding:30px;text-align:center;font-size:13px}
#portal[data-game-ui-version="1"] .game-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 20px}
#portal[data-game-ui-version="1"] .game-tabs button{padding:9px 14px}
#portal[data-game-ui-version="1"] .game-table-summary{overflow-wrap:anywhere}
@media(min-width:761px){#portal[data-game-ui-version="1"] .club-workspace{margin-left:76px}html[data-heron-rail="expanded"] #portal[data-game-ui-version="1"] .club-workspace{margin-left:220px}}
@media(min-width:1024px){body.chat-open #portal[data-game-ui-version="1"] .club-workspace{padding-right:360px}}
@media(max-width:1023px){#portal[data-game-ui-version="1"] #chat-widget{position:fixed;top:auto;bottom:22px;right:22px;left:98px;width:auto}#portal[data-game-ui-version="1"] #chat-widget .chat-toggle{max-width:330px;margin-left:auto}#portal[data-game-ui-version="1"] .chat-box[open]{position:fixed;inset:auto 0 0;width:100%;max-width:680px;margin:0 auto;height:min(78dvh,660px);border:1px solid #d5e6e3;border-radius:18px 18px 0 0;padding:0;overflow:hidden}#portal[data-game-ui-version="1"] .chat-box::backdrop{background:#17313b66}#portal[data-game-ui-version="1"] #chat-widget:has(dialog[open]) .chat-toggle{visibility:hidden}}
@media(max-width:760px){#portal[data-game-ui-version="1"] .club-sidebar{position:fixed;inset:auto 0 0;width:100%;height:calc(65px + env(safe-area-inset-bottom));padding:5px 8px env(safe-area-inset-bottom);border:0;border-top:1px solid var(--hg-line);gap:0;display:flex!important}#portal[data-game-ui-version="1"] .club-workspace{padding:0 15px 76px;margin-left:0}#portal[data-game-ui-version="1"] #club-navigation{width:100%}#portal[data-game-ui-version="1"] .club-sidebar .hg-library-nav{display:none}#portal[data-game-ui-version="1"] .game-platform-content{padding:20px 0 24px}#portal[data-game-ui-version="1"] #chat-widget{left:15px;right:15px;bottom:calc(77px + env(safe-area-inset-bottom))}#portal[data-game-ui-version="1"] .game-live-meta>h1{font-size:19px}#portal[data-game-ui-version="1"] .entry-form input{font-size:16px}#portal[data-game-ui-version="1"] .game-live-meta button{font-size:11px}}
#portal[data-game-ui-version="1"] .checkbox-label{display:flex;align-items:center;gap:9px}
#portal[data-game-ui-version="1"] .checkbox-label input[type="checkbox"]{width:17px!important;min-height:17px!important;height:17px!important;margin:0!important;accent-color:var(--hg-accent)}
#portal[data-game-ui-version="1"] .entry-art>.room-picture{width:100%;height:auto;max-height:360px;position:relative;margin:55px 0 15px}
#portal[data-game-ui-version="1"] .avatar-picker .avatar svg{width:100%;height:100%}
#portal[data-game-ui-version="1"] .game-platform-content .room-toolbar button{min-height:42px}
#portal[data-game-ui-version="1"] .portal-header{display:flex;align-items:center;position:relative;min-height:88px;border-bottom:1px solid var(--hg-line);gap:10px}
#portal[data-game-ui-version="1"] :where(.room-card,.room-toolbar,.entry-form,.panel-title,.lobby-play-controls,.game-live-meta,.portal-nav,.match-results,.room-share-panel,.chat-box,dialog) button{font:600 14px var(--hg-font);padding:10px 14px;border:1px solid var(--hg-line);border-radius:10px}
#portal[data-game-ui-version="1"] :where(.entry-form,.chat-box,.portal-panel,dialog) input:not([type="radio"]):not([type="checkbox"]),#portal[data-game-ui-version="1"] :where(.entry-form,.portal-panel,dialog) select{font:14px var(--hg-font);padding:10px;border:1px solid #d8e4e5;border-radius:8px;background:white;color:var(--hg-ink);min-height:42px}
#portal[data-game-ui-version="1"] .entry-form label{display:grid;gap:7px;font-size:13px}
#portal[data-game-ui-version="1"] .top-five:empty{display:none}
@media(max-width:760px){#portal[data-game-ui-version="1"] .portal-header{display:grid}#portal[data-game-ui-version="1"] :where(.entry-form,.chat-box,dialog) input:not([type="radio"]):not([type="checkbox"]){font-size:16px}}

/* Heron Game shared shell. Board geometry, piece colours and game rules stay scoped
   to their existing styles; these tokens and surfaces match the approved portal. */
body:has(#portal),
body:has(#app),
body:has(.rules-redesign) {
  background: var(--hg-background);
  color: var(--hg-ink);
}
#portal {
  --color-bg: var(--hg-background);
  --color-text: var(--hg-ink);
  --muted: #677581;
  --line: var(--hg-line);
  --purple: var(--hg-accent);
  background: var(--hg-background);
  color: var(--hg-ink);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
}
.heron-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hg-ink);
  text-decoration: none;
  flex-shrink: 0;
}
.heron-bird {
  display: block;
  object-fit: contain;
  flex: none;
  width: 28px;
  height: 40px;
}
.heron-wordmark {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.65px;
  line-height: 1.1;
  white-space: nowrap;
}
#portal .brand.heron-brand {
  color: var(--hg-ink);
  gap: 8px;
}
#portal h1,
#portal h2,
#portal h3 {
  color: var(--hg-ink);
}
#portal p,
#portal small,
#portal label,
#portal legend {
  color: #677581;
}
#portal a,
#portal .text-link {
  color: var(--hg-accent-dark);
}
#portal button:not(.board__cell):not(.tray__slot) {
  border-color: #dce5e6;
  color: #3a565d;
  border-radius: 10px;
}
#portal button:not(.board__cell):not(.tray__slot):hover {
  background: #edf7f6;
  border-color: #a4cdce;
}
#portal button.primary-button:not(.board__cell):not(.tray__slot),
#portal a.primary-button,
#portal
  .lobby-play-actions
  .play-now-button:not(.board__cell):not(.tray__slot) {
  color: #fff;
  background: var(--hg-accent);
  border-color: var(--hg-accent);
  border-radius: 24px;
  box-shadow: 0 4px 14px #008e9e18;
}
#portal button.primary-button:not(.board__cell):not(.tray__slot):hover,
#portal a.primary-button:hover {
  background: var(--hg-accent-dark);
  border-color: var(--hg-accent-dark);
}
#portal .selected:not(.tray__slot),
#portal .tabs button.selected:not(.board__cell):not(.tray__slot),
#portal .mode-option:has(input:checked) > span {
  background: #e7f5f5;
  color: var(--hg-accent-dark);
  border-color: #aad6d8;
}
#portal .portal-panel,
#portal .room-card,
#portal .live-standings,
#portal .personal-run-summary {
  border-color: #e0e8e8;
  box-shadow: 0 3px 14px #18383b04;
}
#portal .room-card:hover {
  border-color: #9dcccd;
  box-shadow: 0 6px 20px #008e9e0a;
}
#portal .portal-header {
  border-bottom-color: var(--hg-line);
  min-height: 88px;
}
#portal[data-page] .portal-header > a.heron-brand {
  display: flex;
  margin-right: auto;
}
#portal .club-page-label {
  display: block;
  margin: 0 8px 0 0;
  font-size: 12px;
  color: #677581;
  font-weight: 500;
}
#portal .portal-header button.install-app:not(.board__cell):not(.tray__slot) {
  background: var(--hg-accent);
  color: #fff;
  border-color: var(--hg-accent);
}
#portal
  .portal-header
  button.install-app:not(.board__cell):not(.tray__slot):hover {
  background: var(--hg-accent-dark);
}
#portal .portal-footer {
  border-color: var(--hg-line);
  color: #677581;
}
#portal .entry-art {
  background: #dff5f3;
}
#portal .entry-art-caption h2 {
  color: #153b42;
}
#portal .entry-art-caption p,
#portal .entry-art > .eyebrow {
  color: #527b80;
}
#portal .entry-form h1 > span,
#portal .entry-form .text-link {
  color: var(--hg-accent);
}
#portal .entry-card {
  border-color: #d3e8e7;
}
#portal .live-pill {
  color: var(--hg-accent-dark);
  background: #f0fffc;
  border-color: #b5dbd9;
}
#portal .lobby-play-controls,
#portal .hub-welcome,
#portal .game-top,
#portal .terminal-board {
  background: #f0f8f7;
  border-color: #d5e8e6;
}
#portal .live-standings > header,
#portal th {
  background: #edf6f5;
  color: #456266;
}
#portal .match-results {
  background: #fbfdfc;
  border-color: #d7e8e6;
}
#portal .match-results th {
  background: #e8f3f2;
  color: #456266;
}
#portal .match-results tbody tr:nth-child(even),
#portal .live-standings tbody tr:nth-child(even) {
  background: #f6faf9;
}
#portal .chat-heading {
  background: var(--hg-accent-dark);
}
#portal .chat-heading h2 {
  color: #fff;
}
#portal .chat-message p {
  background: #eef7f6;
}
#portal .chat-message.mine p {
  background: #def1ef;
}
#portal #chat-form button,
#portal .chat-toggle {
  background: #008e9e !important;
  border-color: var(--hg-accent);
  color: #fff;
}
#portal .chat-toggle small,
#portal .chat-toggle strong {
  color: #fff;
}
#portal .chat-tab.selected button {
  color: var(--hg-accent-dark);
  border-color: #b9dadb;
  background: #e7f5f5;
}
#portal button:focus-visible,
#portal a:focus-visible,
#portal input:focus-visible,
#portal select:focus-visible {
  outline-color: var(--hg-accent);
}
#portal .portal-nav button:not(.board__cell):not(.tray__slot) {
  color: #657381;
}
#portal .portal-nav button.selected:not(.board__cell):not(.tray__slot) {
  background: #e7f5f5;
  color: var(--hg-accent);
}
@media (min-width: 761px) {
  #portal .club-sidebar,
  #portal[data-page="welcome"] .club-sidebar {
    display: flex;
    width: 76px;
    padding: 0 12px 20px;
    gap: 22px;
    align-items: center;
    border-color: var(--hg-line);
  }
  #portal .club-sidebar > .heron-brand {
    width: 76px;
    height: 88px;
    justify-content: center;
    border-bottom: 1px solid var(--hg-line);
  }
  #portal .club-sidebar > .heron-brand .heron-bird {
    width: 34px;
    height: 49px;
  }
  #portal .heron-brand--rail .heron-wordmark,
  #portal:has(.club-sidebar) .portal-header .heron-bird {
    display: none;
  }
  #portal .club-sidebar-bottom {
    display: none;
  }
  #portal .club-help {
    margin-top: auto;
    font-size: 10px;
    line-height: 1.6;
    text-align: center;
    white-space: normal;
  }
  #portal .club-workspace,
  #portal[data-page="welcome"] .club-workspace {
    margin-left: 76px;
    padding: 0 32px;
  }
  #portal .portal-nav {
    display: flex;
    flex-direction: column;
    margin: 0;
    gap: 14px;
  }
  #portal .portal-nav button:not(.board__cell):not(.tray__slot) {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
    justify-content: center;
    border-radius: 12px;
  }
  #portal .club-sidebar .portal-nav span {
    display: none;
  }
  #portal .portal-nav .ui-icon {
    width: 22px;
    height: 22px;
  }
}
@media (min-width: 1024px) {
  body.chat-open #portal .club-workspace {
    padding-right: 360px;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body.chat-open #portal .club-workspace {
    padding-right: 304px;
  }
}
@media (max-width: 1023px) {
  #portal .club-page-label {
    display: none;
  }
}
@media (max-width: 760px) {
  #portal .club-sidebar {
    background: #fff;
    border-top-color: var(--hg-line);
  }
  #portal[data-page="welcome"] .club-sidebar {
    display: none;
  }
  #portal .club-workspace,
  #portal[data-page="welcome"] .club-workspace {
    margin-left: 0;
    padding: 0 12px;
  }
  #portal .portal-header {
    min-height: 76px;
    gap: 6px;
  }
  #portal .portal-header .heron-wordmark {
    font-size: 16px;
  }
  #portal .portal-header .heron-bird {
    width: 23px;
    height: 34px;
  }
  #portal .portal-header .heron-brand {
    gap: 5px;
  }
  #portal .portal-nav button:not(.board__cell):not(.tray__slot) {
    font-size: 9px;
    border-radius: 10px;
  }
}
@media (max-width: 420px) {
  #portal .portal-header .heron-wordmark {
    font-size: 13px;
    letter-spacing: -0.5px;
  }
  #portal .portal-header .heron-bird {
    width: 20px;
    height: 29px;
  }
  #portal .portal-header .heron-brand {
    gap: 4px;
  }
  #portal .portal-header {
    gap: 5px;
  }
  #portal .portal-header .language-control select {
    width: 44px;
    padding: 6px 3px;
    font-size: 12px;
  }
  #portal .portal-header .install-app,
  #portal .portal-header .header-chat,
  #portal .portal-header .profile-menu {
    min-width: 32px;
    width: 32px;
    min-height: 36px;
    padding: 5px;
  }
  #portal .portal-header .install-label,
  #portal .portal-header .header-chat > span,
  #portal .profile-menu > span:last-child {
    display: none;
  }
}
/* The standalone practice and rules screens use the same identity and accents. */
#app {
  --color-bg: var(--hg-background);
  --color-text: var(--hg-ink);
  --muted: #677581;
  --line: var(--hg-line);
  --purple: var(--hg-accent);
}
#app .site-header,
.rules-redesign {
  background: #fff;
  border-color: var(--hg-line);
}
#app .brand.heron-brand,
.rules-redesign .brand.heron-brand {
  display: inline-flex;
  color: var(--hg-ink);
  gap: 8px;
}
#app .heron-wordmark {
  font-size: 17px;
}
#app .primary-button,
#app .new-game-button,
.rules-redesign .primary-button {
  background: var(--hg-accent);
  border-color: var(--hg-accent);
  color: #fff;
}
#app .header-nav a,
.rules-redesign .secondary-button {
  color: var(--hg-accent-dark);
}
.rules-redesign .eyebrow {
  color: var(--hg-accent);
}
@media (max-width: 420px) {
  #app .heron-wordmark {
    font-size: 13px;
  }
  #app .heron-bird {
    width: 20px;
    height: 29px;
  }
  #app .brand.heron-brand {
    gap: 4px;
  }
  .rules-redesign .heron-wordmark {
    font-size: 17px;
  }
}
#portal button.join-room-button:not(.board__cell):not(.tray__slot),
#portal button.rotate-control:not(.board__cell):not(.tray__slot) {
  background: var(--hg-accent);
  color: #fff;
  border-color: var(--hg-accent);
}
#portal .chat-heading .chat-close {
  color: #fff;
  background: #ffffff20;
  border-color: transparent;
}
#portal .portal-nav .nav-short-label {
  display: none;
}
@media (max-width: 760px) {
  #portal .portal-nav .nav-full-label {
    display: none;
  }
  #portal .portal-nav .nav-short-label {
    display: block;
    line-height: 1.2;
    font-size: 10px;
  }
}

/* Complete shared Heron navigation, available before choosing a player name. */
#portal .club-sidebar {
  overflow-y: auto;
  overscroll-behavior: contain;
}
#portal .heron-library-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hg-line);
}
#portal .heron-library-nav a,
#portal .guest-game-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 44px;
  color: #657381;
  text-decoration: none;
  border-radius: 12px;
}
#portal .heron-library-nav a:hover,
#portal .guest-game-nav a:hover {
  background: #e7f5f5;
  color: var(--hg-accent);
}
#portal .heron-library-nav > a > span {
  display: none;
}
#portal .heron-library-nav .ui-icon {
  width: 22px;
  height: 22px;
}
#portal .portal-header {
  position: relative;
  z-index: 75;
  gap: 10px;
}
#portal .portal-header > .heron-brand {
  order: 0;
  margin-right: 12px;
}
#portal .portal-header > .club-page-label {
  display: none;
}
#portal .heron-library-search {
  order: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 110px;
  max-width: 440px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 24px;
  background: #f0f3f3;
  padding: 0 12px;
  margin: 0 auto 0 0;
}
#portal .heron-library-search:focus-within {
  border-color: var(--hg-accent);
  background: #fff;
}
#portal .heron-library-search > .ui-icon {
  color: #657582;
  width: 18px;
  height: 18px;
}
#portal .heron-library-search input[type="search"] {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  outline: none;
  min-height: 38px;
}
#portal .heron-library-search input:focus-visible {
  outline: none;
}
#portal .portal-header .heron-library-search > button[type="submit"] {
  display: grid;
  place-items: center;
  flex: none;
  padding: 3px;
  border: 0;
  min-height: 30px;
  height: 30px;
  width: 28px;
  background: transparent;
}
#portal .portal-header .language-control {
  order: 2;
  margin: 0;
}
#portal .portal-header .install-app {
  order: 3;
}
#portal #heron-favorites {
  order: 4;
}
#portal #header-chat {
  order: 5;
}
#portal #profile-menu,
#portal #heron-guest-profile {
  order: 6;
}
#portal #heron-menu-toggle {
  order: 7;
}
#portal .portal-header .heron-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 38px;
  height: 38px;
  width: 38px;
  padding: 8px;
  border: 1px solid #dce5e6;
  border-radius: 12px;
  background: #fff;
  color: #45636a;
  text-decoration: none;
}
#portal #heron-search-toggle {
  display: none;
  order: 1;
}
#portal .heron-global-menu {
  position: absolute;
  right: 0;
  top: calc(100% - 4px);
  z-index: 100;
  width: min(340px, calc(100vw - 24px));
  max-height: min(650px, calc(100dvh - 100px));
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dce5e6;
  border-radius: 16px;
  box-shadow: 0 12px 40px #173b4220;
  padding: 8px;
}
#portal .heron-menu-group + .heron-menu-group {
  border-top: 1px solid var(--hg-line);
  margin-top: 6px;
  padding-top: 6px;
}
#portal .heron-global-menu .heron-menu-group > a,
#portal .heron-global-menu .heron-menu-group > button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  text-align: left;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 13px;
  color: #304b52;
  text-decoration: none;
}
#portal .heron-global-menu .heron-menu-group > a:hover,
#portal .heron-global-menu .heron-menu-group > button:hover {
  background: #edf7f6;
}
#portal .heron-global-menu .ui-icon {
  width: 19px;
  height: 19px;
}
#portal .entry-access-note {
  padding: 10px 12px;
  border-radius: 10px;
  background: #eef8f6;
  color: #39676b;
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 18px;
}
@media (min-width: 761px) {
  #portal .club-sidebar,
  #portal[data-page="welcome"] .club-sidebar {
    gap: 14px;
  }
  #portal .club-sidebar .portal-nav {
    gap: 8px;
  }
  #portal
    .club-sidebar
    .portal-nav
    > button:not(.board__cell):not(.tray__slot) {
    min-height: 44px;
    height: 44px;
  }
  #portal .guest-game-nav > a > span {
    display: none;
  }
}
@media (min-width: 761px) and (max-width: 1350px) {
  #portal .portal-header .install-label,
  #portal .portal-header .header-chat > span,
  #portal .profile-menu > span:last-child {
    display: none;
  }
  #portal .portal-header .install-app,
  #portal .portal-header .header-chat,
  #portal .portal-header .profile-menu {
    min-width: 38px;
    width: 38px;
    padding: 7px;
  }
}
@media (max-width: 1099px) {
  #portal .heron-library-search {
    display: none;
  }
  #portal #heron-search-toggle {
    display: inline-flex;
    margin-left: auto;
  }
  #portal .portal-header > .heron-brand {
    margin-right: auto;
  }
  #portal .portal-header.heron-search-open {
    padding-bottom: 70px;
  }
  #portal .portal-header.heron-search-open .heron-library-search {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    max-width: none;
    width: 100%;
  }
}
@media (max-width: 760px) {
  #portal .portal-header {
    gap: 5px;
  }
  #portal #heron-favorites,
  #portal #heron-guest-profile {
    display: none;
  }
  #portal .portal-header .install-label,
  #portal .portal-header .header-chat > span,
  #portal .profile-menu > span:last-child {
    display: none;
  }
  #portal .portal-header .install-app,
  #portal .portal-header #header-chat,
  #portal .portal-header .heron-header-icon,
  #portal .portal-header #profile-menu {
    width: 32px;
    min-width: 32px;
    height: 36px;
    min-height: 36px;
    padding: 6px;
  }
  #portal .portal-header .heron-header-icon .ui-icon {
    width: 19px;
    height: 19px;
  }
  #portal[data-page="welcome"] .club-workspace {
    padding-bottom: 90px;
  }
  #portal[data-page="welcome"] .club-sidebar {
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: center;
    overflow: visible;
  }
  #portal:not([data-page="welcome"]) .heron-library-nav {
    display: none;
  }
  #portal[data-page="welcome"] .heron-library-nav {
    flex-direction: row;
    flex: 3;
    min-width: 0;
    width: auto;
    gap: 0;
    border: 0;
    padding: 0;
  }
  #portal[data-page="welcome"] .heron-library-nav [data-library-view="recent"] {
    display: none;
  }
  #portal[data-page="welcome"] #club-navigation {
    flex: 2;
    min-width: 0;
    width: auto;
  }
  #portal .heron-library-nav a,
  #portal .guest-game-nav a,
  #portal .guest-game-nav button {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    padding: 5px 2px;
    width: auto;
    min-width: 0;
    height: 52px;
    min-height: 52px;
    font-size: 9px;
  }
  #portal .heron-library-nav > a > span,
  #portal .guest-game-nav > a > span,
  #portal .guest-game-nav button > span {
    display: block;
    font-size: 9px;
    line-height: 1.2;
  }
  #portal .guest-game-nav {
    flex-direction: row;
    width: 100%;
    gap: 0;
  }
}
@media (max-width: 360px) {
  #portal .portal-header {
    gap: 3px;
  }
  #portal .portal-header .heron-wordmark {
    font-size: 12px;
  }
  #portal .portal-header .language-control select {
    width: 40px;
  }
  #portal .portal-header .heron-bird {
    width: 17px;
    height: 25px;
  }
}

@media (max-width: 360px) {
  #portal:not([data-page="welcome"]) .portal-header .heron-wordmark {
    white-space: normal;
    max-width: 40px;
    font-size: 10px;
    line-height: 1.15;
  }
}

/* Centre the entry within the space beside the rail on wide displays. */
#portal[data-page="welcome"] .club-workspace {
  max-width: none;
}
#portal[data-page="welcome"] .portal-header,
#portal[data-page="welcome"] .portal-footer {
  max-width: 1160px;
  margin-inline: auto;
}


.footer{margin-top:38px;border-top:1px solid var(--line);display:flex;align-items:center;gap:20px;padding:24px 0 26px;font-size:10px;color:#899398}.footer p{margin:0;color:#687a81}.footer span{margin-left:auto}.footer a{display:flex;align-items:center;gap:6px}.footer a:hover{color:var(--teal)}.footer svg{width:12px;height:12px}
@media(max-width:950px){.footer{flex-wrap:wrap;gap:8px 20px}.footer span{margin-left:auto}.footer a{width:100%}}
@media(max-width:600px){.footer{margin-top:28px;padding-top:19px;font-size:9px;gap:9px 10px;line-height:1.5}.footer p{width:100%;font-size:11px}.footer span{margin-left:0}.footer a{margin-left:auto;width:auto}}
@media(max-width:360px){.footer a{margin-left:0;width:100%}}
/* Canonical header, library rail and mobile navigation for all Heron pages. */

.rail{width:var(--rail);position:fixed;inset:0 auto 0 0;background:#fff;border-right:1px solid var(--line);display:flex;align-items:center;flex-direction:column;z-index:5}.rail-brand{height:87px;width:100%;display:grid;place-items:center;border-bottom:1px solid var(--line)}.rail-nav{display:flex;flex-direction:column;gap:15px;margin-top:26px}.nav-action{width:48px;height:48px;background:none;border-radius:12px;display:grid;place-items:center;color:#657381;transition:background .16s,color .16s}.nav-action:hover{background:#f2f7f7;color:var(--teal)}.nav-action.is-active{background:#e7f5f5;color:var(--teal)}.nav-action.is-active svg{fill:currentColor;stroke-width:1.4}.rail-caption{margin-top:auto;margin-bottom:30px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;letter-spacing:2.3px;color:#7e8c93}
.page-shell{margin-left:var(--rail)}.topbar{height:88px;padding:0 40px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:40px;background:rgba(255,255,255,.9);position:relative;z-index:4}.wordmark{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:20px;letter-spacing:-.65px;font-weight:800}.wordmark img{width:27px;height:33px}.search{margin:0;max-width:640px;flex:1;position:relative;display:flex;align-items:center;background:#f1f3f3;min-width:0;border:1px solid transparent;border-radius:40px;height:46px;padding:0 17px;gap:10px;transition:border-color .15s,background .15s}.search:focus-within{background:#fff;border-color:var(--teal)}.search svg{width:20px;height:20px;color:#657582}.search input{width:100%;min-width:0;border:0;background:none;outline:none;font-size:14px;color:var(--ink);height:100%}.search input::placeholder{color:#7b8792}.search input:focus-visible{outline:none}.search kbd{font:11px/1.6 inherit;border:1px solid #dce1e3;border-radius:4px;padding:0 6px;color:#8a959d}.topbar-actions{display:flex;align-items:center;gap:12px;margin-left:auto}.icon-button{display:grid;place-items:center;width:42px;height:42px;background:transparent;border-radius:50%;color:#556573}.icon-button:hover{background:#edf6f6;color:var(--teal)}.header-play{font-size:12px;font-weight:700;white-space:nowrap;display:flex;gap:8px;align-items:center;color:var(--teal)}.header-play svg{width:16px}.mobile-search,.menu-toggle,.mobile-menu{display:none}.bottom-nav{display:none}
@media(max-width:1250px){.topbar{gap:24px;padding:0 28px}.header-play{display:none}}
@media(max-width:950px){.topbar{gap:18px;height:78px;padding:0 23px}.rail-brand{height:77px}.rail-nav{gap:10px}.nav-action{width:43px;height:43px}.wordmark{font-size:18px}.wordmark img{display:none}}
@media(max-width:600px){.rail{display:none}.page-shell{margin-left:0}.topbar{height:67px;padding:0 20px;gap:10px;flex-wrap:wrap}.wordmark{font-size:17px;letter-spacing:-.55px;gap:7px}.wordmark img{display:block;width:23px;height:30px}.topbar-actions{gap:4px}.icon-button{width:40px;height:44px}.icon-button svg{width:21px;height:21px}.mobile-search,.menu-toggle{display:grid}.search{display:none}.topbar.search-open{height:auto;min-height:67px;padding-bottom:14px;row-gap:0}.topbar.search-open .wordmark,.topbar.search-open .topbar-actions{height:66px}.topbar.search-open .search{display:flex;order:3;flex-basis:100%;max-width:none;height:43px}.search kbd{display:none}.mobile-menu{position:absolute;right:16px;top:61px;min-width:228px;background:#fff;padding:8px;box-shadow:0 12px 40px #20343b26;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:1px;z-index:8}.mobile-menu button,.mobile-menu a{display:block;text-align:left;background:transparent;padding:13px 14px;border-radius:7px;font-size:13px}.mobile-menu button:hover,.mobile-menu a:hover{background:#eaf6f6}.mobile-menu button.is-active{color:var(--teal);background:#eaf6f6}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:10;background:#fffffff5;border-top:1px solid var(--line);padding:7px 20px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -3px 20px #243b4c04;backdrop-filter:blur(14px)}.bottom-nav button{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;min-height:46px;gap:5px;background:none;color:#7a8791;font-size:9px}.bottom-nav svg{width:21px;height:21px}.bottom-nav .is-active{color:var(--teal);font-weight:700}.bottom-nav .is-active svg{fill:currentColor;stroke-width:1.3}}
@media(max-width:360px){.topbar{padding:0 15px}.wordmark{font-size:15px}.topbar-actions{gap:0}}

/* One brand lockup in the header; desktop navigation starts at the top of its rail. */
.rail-brand img{width:38px;height:55px}.wordmark{font-size:20px;font-weight:800;letter-spacing:-.55px;gap:8px}.wordmark .brand-bird{display:block;width:28px;height:40px}
@media(max-width:950px) and (min-width:601px){.wordmark{font-size:18px}.wordmark .brand-bird{width:25px;height:36px}}
@media(max-width:600px){.wordmark{font-size:17px;gap:7px}.wordmark .brand-bird{width:28px;height:40px}}
@media(max-width:360px){.wordmark{font-size:15px;gap:6px}.wordmark .brand-bird{width:25px;height:36px}}

@media(min-width:601px){.rail-nav{margin-top:20px}}
@media(min-width:601px) and (max-width:950px){.rail-nav{margin-top:17px}}
:root{--hg-accent:#008e9e;--hg-accent-dark:#007887;--hg-background:#fafbfa;--hg-ink:#101e2b;--hg-line:#e6e9eb;--hg-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
:is(#portal[data-heron-shell],[data-heron-shell="portal"]) .hg-header .hg-brand{display:flex;align-items:center;gap:8px;color:var(--hg-ink);font-family:var(--hg-font);font-size:20px;font-weight:800;letter-spacing:-.55px;text-decoration:none;flex-shrink:0}
:is(#portal[data-heron-shell],[data-heron-shell="portal"]) .hg-header .hg-brand .heron-wordmark{font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:1.1;white-space:nowrap}
:is(#portal[data-heron-shell],[data-heron-shell="portal"]) .hg-header .hg-brand .brand-bird{display:block!important;width:28px;height:40px;object-fit:contain;flex:none}
#portal[data-heron-shell] .hg-library-nav{margin-top:20px;gap:15px}
#portal[data-heron-shell] .hg-library-nav a{width:48px;height:48px}
#portal[data-heron-shell] .hg-search kbd{font-size:11px;line-height:1.6;border:1px solid var(--hg-line);border-radius:4px;padding:0 6px;color:#8a959d}
#portal[data-heron-shell] .hg-search{gap:8px}
@media(min-width:761px) and (max-width:1099px){#portal[data-heron-shell] .hg-header .hg-brand{font-size:18px}}
@media(max-width:760px){#portal[data-heron-shell] .hg-library-nav{margin-top:0;gap:0}#portal[data-heron-shell] .hg-library-nav a{width:100%;height:46px}#portal[data-heron-shell] .hg-header .hg-brand{font-size:16px;gap:5px}#portal[data-heron-shell] .hg-header .hg-brand .brand-bird{width:23px;height:34px}#portal[data-heron-shell] .hg-search kbd{display:none}}
@media(max-width:420px){#portal[data-heron-shell] .hg-header .hg-brand{font-size:13px;gap:4px}#portal[data-heron-shell] .hg-header .hg-brand .brand-bird{width:20px;height:29px}}
@media(max-width:360px){#portal[data-heron-shell] .hg-header .hg-brand{font-size:12px;gap:3px}#portal[data-heron-shell] .hg-header .hg-brand .brand-bird{width:17px;height:25px}#portal[data-heron-shell]:not([data-page="welcome"]) .hg-header .hg-brand .heron-wordmark{white-space:normal;max-width:40px;font-size:10px;line-height:1.15}}
:root{--teal:var(--hg-accent);--teal-dark:var(--hg-accent-dark);--ink:var(--hg-ink);--line:var(--hg-line)}
body[data-heron-shell]{background:var(--hg-background);color:var(--hg-ink);font-family:var(--hg-font)}
.hg-search>button{display:grid;place-items:center;width:28px;min-width:28px;height:32px;padding:0;border:0;background:transparent;border-radius:8px;color:#657582}
.hg-footer{display:flex;align-items:center;flex-wrap:wrap;gap:20px;border-top:1px solid var(--hg-line);color:#677581;font:12px/1.6 var(--hg-font);padding:24px 0;margin-top:34px}.hg-footer p{margin:0}.hg-footer .hg-footer-brand{font-weight:800;color:var(--hg-ink);font-size:12px}.hg-footer span{margin-left:auto}.hg-footer a{display:inline-flex;align-items:center;gap:6px}.hg-footer svg{width:15px;height:15px}
#portal[data-heron-shell] .hg-footer{display:flex;align-items:center;flex-wrap:wrap;gap:20px;width:100%;max-width:1420px;margin:0 auto;padding:24px 0;border-top:1px solid var(--hg-line);text-align:left;font:12px/1.6 var(--hg-font);color:#677581}
#portal[data-heron-shell][data-page="welcome"] .hg-footer{max-width:1160px}
@media(max-width:600px){.hg-footer,#portal[data-heron-shell] .hg-footer{gap:12px;font-size:11px}.hg-footer .hg-footer-brand{width:100%}.hg-footer span{margin-left:0}.hg-footer .hg-footer-rules{margin-left:auto}}
/* Shared library rail: one preference for the home page and every game. */
.hg-rail-toggle{display:flex;align-items:center;justify-content:center;gap:12px;flex:none;width:44px;height:44px;margin:16px auto 0;padding:10px;border:0;border-radius:10px;background:#eef5f5;color:#4b6870;cursor:pointer;font:13px var(--hg-font)}
.hg-rail-toggle span,.hg-library-nav .hg-menu-label{display:none}
.hg-rail .hg-library-nav{margin-top:14px!important}
@media(min-width:761px){
 html[data-heron-rail="expanded"]{--rail:220px}
 html[data-heron-rail="expanded"] body[data-heron-shell="portal"]{--rail:220px}
 html[data-heron-rail="expanded"] .rail{width:220px;align-items:stretch;padding-inline:12px}
 html[data-heron-rail="expanded"] .page-shell{margin-left:220px}
 html[data-heron-rail="expanded"] .hg-rail-toggle{justify-content:flex-start;width:100%;margin-top:16px}
 html[data-heron-rail="expanded"] .hg-rail-toggle span,html[data-heron-rail="expanded"] .hg-library-nav .hg-menu-label{display:block}
 html[data-heron-rail="expanded"] .hg-library-nav{align-items:stretch;width:100%}
 html[data-heron-rail="expanded"] .hg-library-nav .nav-action,html[data-heron-rail="expanded"] #portal .hg-library-nav a{display:flex;width:100%;height:46px;gap:12px;justify-content:flex-start;padding:10px 13px;font-size:13px;white-space:nowrap;text-decoration:none}
 html[data-heron-rail="expanded"] .rail-caption{writing-mode:horizontal-tb;transform:none;margin: auto 12px 24px;letter-spacing:1px}
 html[data-heron-rail="expanded"] #portal .club-sidebar{width:220px;align-items:stretch}
 html[data-heron-rail="expanded"] #portal .club-workspace,html[data-heron-rail="expanded"] #portal[data-page="welcome"] .club-workspace{margin-left:220px}
 html[data-heron-rail="expanded"] #portal #club-navigation{width:100%}
 html[data-heron-rail="expanded"] #portal .portal-nav>button,html[data-heron-rail="expanded"] #portal .guest-game-nav>a{width:100%;justify-content:flex-start;gap:12px;padding:10px 13px;white-space:nowrap}
 html[data-heron-rail="expanded"] #portal .club-sidebar .portal-nav span:not(.nav-short-label){display:block}
 html[data-heron-rail="expanded"] #portal .club-help{text-align:left}
}
@media(min-width:601px) and (max-width:760px){.hg-rail-toggle{display:none}}
@media(max-width:760px){#portal .hg-rail-toggle{display:none}}
@media(max-width:600px){.hg-rail-toggle{display:none}}
.hg-language select{border:1px solid var(--hg-line);border-radius:8px;padding:8px 4px;background:#fff;color:var(--hg-ink);font:12px var(--hg-font);height:36px}
.hg-profile-trigger{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;max-width:165px;border:1px solid var(--hg-line);border-radius:10px;padding:7px 10px;background:white;color:var(--hg-ink);font:12px var(--hg-font);cursor:pointer}
.hg-profile-trigger svg{width:18px;height:18px;flex:none}.hg-profile-trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hg-profile-dialog{border:1px solid var(--hg-line);border-radius:16px;padding:26px;width:min(420px,calc(100% - 30px));color:var(--hg-ink);font:14px/1.5 var(--hg-font);box-shadow:0 16px 60px #163e4526}
.hg-profile-dialog::backdrop{background:#10252b70}.hg-dialog-heading{display:flex;align-items:center;gap:14px;justify-content:space-between}.hg-dialog-heading h2{margin:0;font-size:22px;letter-spacing:-.6px}.hg-dialog-heading button{font-size:24px;border:0;background:transparent;padding:0 6px;cursor:pointer}.hg-profile-dialog>form>p{font-size:13px;color:#657581}.hg-profile-dialog label{display:block;font-weight:600;font-size:13px}.hg-profile-dialog input{display:block;width:100%;margin:7px 0 16px;border:1px solid #c5d7d9;border-radius:9px;min-height:42px;padding:9px 12px;font:16px var(--hg-font)}.hg-save-profile{width:100%;border:0;border-radius:9px;padding:12px;background:var(--hg-accent);color:white;font-weight:700;cursor:pointer}.hg-save-profile:disabled{opacity:.6}.hg-profile-dialog .hg-profile-error{color:#b33d3d}
@media(max-width:1150px){.topbar .header-play{display:none}.hg-profile-trigger{max-width:130px}}
@media(max-width:600px){.topbar{padding-inline:12px;gap:4px}.topbar .topbar-actions{gap:1px}.hg-profile-trigger{width:32px;min-width:32px;padding:6px;border:0}.hg-profile-trigger [data-heron-player-name]{display:none}.hg-language select{height:32px;font-size:11px;padding:5px 0}.topbar .icon-button{width:32px}.topbar .wordmark{font-size:15px}}
@media(max-width:360px){.topbar .wordmark{font-size:13px;gap:3px}.topbar .wordmark .brand-bird{width:20px}.topbar .icon-button{width:28px}.hg-profile-trigger{width:28px;min-width:28px}}
@media(min-width:761px){html[data-heron-rail="expanded"] #portal .hg-library-nav a>.hg-menu-label{display:block}}
@media(min-width:761px){html[data-heron-rail="expanded"] #portal .club-sidebar .portal-nav>button:not(.board__cell):not(.tray__slot){width:100%;min-width:0;justify-content:flex-start;gap:12px;padding:10px 13px}}

/* The rail toggle stays below the scrollable menu, at the bottom of the PC rail. */
.hg-rail-content{display:flex;flex-direction:column;align-items:center;width:100%;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.hg-rail-bottom{display:flex;flex-direction:column;align-items:center;flex:none;width:100%;padding:12px 0 16px}
.hg-rail-bottom .rail-caption{margin:0 auto 16px}
.hg-rail-bottom .hg-rail-toggle{margin:0 auto}
.hg-rail-bottom .hg-rail-toggle svg{width:22px;height:22px;flex:none}
@media(min-width:761px){
 html[data-heron-rail="expanded"] .hg-rail-content{align-items:stretch}
 html[data-heron-rail="expanded"] .hg-rail-bottom .hg-rail-toggle{width:100%;margin:0}
 #portal .hg-rail-content{gap:14px}
 #portal .hg-rail-bottom{padding:0}
 #portal .hg-rail-content .club-help{margin-top:auto;padding-top:14px;padding-bottom:4px}
 .hg-rail-content .hg-library-nav{margin-top:20px!important;flex:none}
 .hg-rail-content #club-navigation{flex:none}
}
@media(max-height:640px){.hg-rail-bottom .rail-caption{display:none}}
@media(max-width:760px){#portal .hg-rail-content{display:contents}#portal .hg-rail-bottom{display:none}}
@media(max-width:600px){.hg-rail-bottom{display:none}}

/* Game identity lives in the header; the library identity anchors its PC rail. */
#portal[data-heron-shell] .hg-header>.hg-mobile-site-brand{display:none}
#portal[data-heron-shell] .hg-header .hg-game-brand{display:flex;text-decoration:none;gap:8px;color:var(--hg-ink)}
#portal[data-heron-shell] .hg-game-icon{display:block;width:32px;height:32px;flex:none;border-radius:8px;object-fit:contain}
.hg-game-wordmark{font-size:inherit;font-weight:800;line-height:1.15;white-space:nowrap}
#portal[data-heron-shell] .hg-rail-brand{display:flex;flex:none;width:100%;justify-content:center;min-height:92px;border-bottom:1px solid var(--hg-line);padding:12px 0}
#portal[data-heron-shell] .hg-rail-brand .hg-brand{display:flex;flex-direction:column;gap:5px;align-items:center;margin:0;width:100%}
#portal[data-heron-shell] .hg-rail-brand .heron-bird{display:block;width:28px;height:40px}
#portal[data-heron-shell] .hg-rail-brand .heron-wordmark{display:block;max-width:56px;font-size:10px;line-height:1.15;white-space:normal;text-align:center;letter-spacing:.15px}
@media(min-width:761px){html[data-heron-rail="expanded"] #portal .hg-rail-brand{padding:18px 10px;min-height:88px}html[data-heron-rail="expanded"] #portal .hg-rail-brand .hg-brand{flex-direction:row;gap:8px}html[data-heron-rail="expanded"] #portal .hg-rail-brand .heron-wordmark{max-width:none;white-space:nowrap;font-size:15px;letter-spacing:-.4px}}
/* Two mobile bars: site identity/account/menu, then game identity and play tools. */
@media(max-width:760px){
 #portal[data-heron-shell] .hg-rail-brand{display:none}
 #portal[data-heron-shell] .hg-header{display:grid;grid-template-columns:minmax(84px,1fr) 32px 32px 40px 32px 32px;grid-template-rows:40px 44px;column-gap:4px;row-gap:12px;height:auto;min-height:116px;padding:10px 0}
 #portal[data-heron-shell] .hg-header::before{content:"";position:absolute;left:0;right:0;top:56px;border-top:1px solid var(--hg-line);pointer-events:none}
 #portal[data-heron-shell] .hg-header>.hg-mobile-site-brand{display:flex;grid-row:1;grid-column:1/4;min-width:0}
 #portal[data-heron-shell] .hg-mobile-site-brand .hg-brand{font-size:16px;gap:6px;margin:0}
 #portal[data-heron-shell] .hg-mobile-site-brand .heron-wordmark{font-size:16px;max-width:none;white-space:nowrap;line-height:1.1}
 #portal[data-heron-shell] .hg-mobile-site-brand .brand-bird{width:23px;height:34px}
 #portal[data-heron-shell] .hg-header #heron-guest-profile,#portal[data-heron-shell] .hg-header #profile-menu{display:inline-flex;grid-row:1;grid-column:5;margin:0}
 #portal[data-heron-shell] .hg-header #heron-menu-toggle{grid-row:1;grid-column:6;margin:0}
 #portal[data-heron-shell] .hg-header .hg-game-brand{grid-row:2;grid-column:1/3;gap:5px;margin:0;min-width:0;font-size:13px}
 #portal[data-heron-shell] .hg-game-icon{width:26px;height:26px;border-radius:7px}
 #portal[data-heron-shell] .hg-game-wordmark{white-space:normal}
 #portal[data-heron-shell] .hg-header #heron-search-toggle{grid-row:2;grid-column:3;margin:0}
 #portal[data-heron-shell] .hg-header .language-control{grid-row:1;grid-column:4;margin:0}
 #portal[data-heron-shell] .hg-header .language-control select{width:40px;max-width:100%}
 #portal[data-heron-shell] .hg-header .install-app{grid-row:2;grid-column:4;margin:0}
 #portal[data-heron-shell] .hg-header #header-chat{grid-row:2;grid-column:5;margin:0}
 #portal[data-heron-shell] .hg-header #heron-favorites{display:inline-flex;grid-row:2;grid-column:6;margin:0}
 #portal[data-heron-shell] .hg-header.heron-search-open{padding-bottom:10px}
 #portal[data-heron-shell] .hg-header.heron-search-open .heron-library-search{position:static;grid-row:3;grid-column:1/-1;left:auto;right:auto;bottom:auto;width:100%;height:44px;margin:0}
 #portal[data-heron-shell] .hg-header .hg-menu{top:54px}
}
@media(max-width:360px){#portal[data-heron-shell] .hg-header .hg-game-brand{font-size:11px;gap:4px}#portal[data-heron-shell] .hg-game-icon{width:22px;height:22px}#portal[data-heron-shell] .hg-mobile-site-brand .heron-wordmark{font-size:14px}}
/* The site name has its own mobile row, including after a player signs in. */
@media(max-width:760px){#portal[data-heron-shell] .hg-header .hg-mobile-site-brand .heron-wordmark{max-width:none;white-space:nowrap;font-size:16px;line-height:1.1;letter-spacing:-.4px}}
@media(max-width:360px){#portal[data-heron-shell] .hg-header .hg-mobile-site-brand .heron-wordmark{font-size:14px}}