/* 4444GM approved game UI，2026-10-23。 */

.optimized .primary-actions{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.optimized .primary-button.primary-button{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  height:64px;
  min-height:64px;
  padding:0 12px;
  border:0;
  border-radius:18px;
  box-shadow:0 7px 16px rgba(69,65,87,.12);
  isolation:isolate
}
.optimized .primary-button::before{
  content:"";
  position:absolute;
  width:100px;
  height:100px;
  top:-36px;
  right:-30px;
  border:15px solid rgba(255,255,255,.11);
  border-radius:50%;
  background:rgba(0,0,0,.025);
  z-index:-1;
  pointer-events:none
}
.optimized .primary-button.register{
  color:#fff;
  background:linear-gradient(115deg,#ff7850,#f3482a)
}
.optimized .primary-button.download{
  color:#fff;
  background:linear-gradient(115deg,#5279f7,#2d50cc)
}
.optimized .primary-button .button-copy,
.optimized .primary-button .button-copy strong,
.optimized .primary-button .button-copy b{
  color:#fff;
  font-size:clamp(13px,4vw,16px);
  font-weight:800
}
.optimized .primary-button .primary-icon{
  align-self:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.18);
  color:#fff
}
.optimized .primary-button .primary-icon svg{width:19px;height:19px}
.optimized .primary-button .button-copy{padding:0}
.optimized .primary-button:hover{filter:brightness(1.03)}
.optimized .primary-button:active{transform:scale(.985);filter:none}

.optimized.w1 .tool-grid{gap:8px;margin-top:10px}
.optimized .tool-button.compact-sub-action,
.optimized .tool-grid .tool-button.compact-sub-action.contact-entry,
.optimized .tool-grid .tool-button.compact-sub-action.is-save{
  grid-column:auto;
  width:auto;
  height:56px;
  min-height:56px;
  padding:0 10px;
  gap:9px;
  justify-content:flex-start;
  border-radius:15px;
  border:1px solid #e9e3db;
  background:#fffefa;
  color:#19202b;
  box-shadow:0 3px 9px rgba(69,55,38,.035)
}
.optimized .tool-button.compact-sub-action>span:last-child,
.optimized .tool-grid .tool-button.compact-sub-action.is-save>span:last-child{
  flex:1;
  min-width:0;
  color:inherit;
  font-size:clamp(11px,3.4vw,14px);
  font-weight:750;
  line-height:1.3;
  white-space:nowrap;
  overflow-wrap:normal;
  padding:0;
  text-align:left
}
.optimized .tool-button.compact-sub-action::after{
  content:"";
  display:block;
  position:static;
  flex:0 0 5px;
  width:5px;
  height:5px;
  margin:0 2px 0 0;
  border:0;
  border-top:1.5px solid #a4aebc;
  border-right:1.5px solid #a4aebc;
  border-radius:0;
  background:none;
  box-shadow:none;
  transform:rotate(45deg)
}
.optimized .tool-button.compact-sub-action .tool-icon,
.optimized .tool-grid .tool-button.compact-sub-action.is-save .tool-icon{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:10px;
  color:#4569ec;
  background:#f0f3ff
}
.optimized .tool-button.compact-sub-action .tool-icon svg{width:18px;height:18px;stroke-width:1.8}
.optimized .tool-button.compact-sub-action.is-intro{
  color:#19202b
}
.optimized .tool-button.compact-sub-action.is-recharge{
  color:#19202b
}
.optimized .tool-button.compact-sub-action.is-recharge .tool-icon{color:#ff6650;background:#fff0eb}
.optimized .tool-grid .tool-button.compact-sub-action.is-customer{
  color:#19202b
}
.optimized .tool-grid .tool-button.compact-sub-action.is-customer .tool-icon{color:#209267;background:#ecf7ef}
.optimized .tool-grid .tool-button.compact-sub-action.is-save{
  border-color:#dcd8ff;
  color:#594bb6;
  background:#efedff
}
.optimized .tool-grid .tool-button.compact-sub-action.is-save .tool-icon{color:#fff;background:linear-gradient(135deg,#8c80e4,#7061ce)}
.optimized .tool-grid .tool-button.compact-sub-action.is-save::after{border-color:#9589d9}
.optimized .tool-grid .tool-button.compact-sub-action.is-save.is-full-row{
  grid-column:1 / -1;
  width:100%;
  justify-content:center
}
.optimized .tool-grid .tool-button.compact-sub-action.is-save.is-full-row>span:last-child{flex:0 1 auto;text-align:center}
.optimized .tool-grid .tool-button.compact-sub-action.is-save.is-full-row::after{display:none}
.optimized .tool-button.compact-sub-action.is-unavailable{opacity:1;color:#6f7783}
.optimized .tool-button.compact-sub-action.is-unavailable::after{display:none}
.optimized .tool-button.compact-sub-action:hover{filter:brightness(.99)}
.optimized .tool-button.compact-sub-action:active{transform:translateY(1px)}

.optimized .codes{gap:8px}
.optimized .code-card{
  display:block;
  padding:12px 14px;
  border:1px solid #f0e6dc;
  border-radius:14px;
  background:#fff
}
.optimized .code-top{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:12px
}
.optimized .code-main{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px
}
.optimized .code-value{
  flex:none;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
  color:#3a312a;
  font-size:16px;
  font-weight:750;
  letter-spacing:0;
  line-height:1.3
}
.optimized .code-date{display:none}
.optimized .copy-btn{
  align-self:center;
  min-width:64px;
  height:32px;
  margin:0;
  padding:0 10px;
  border:0;
  border-radius:8px;
  background:#fff1e6;
  color:#c46a32;
  font-size:12px;
  font-weight:650
}
.optimized .code-desc{
  display:block;
  margin:10px 0 0;
  padding-top:10px;
  border-top:1px solid #f4ebe3;
  color:#6d6158;
  font-size:13px;
  line-height:1.7;
  white-space:normal;
  overflow:visible
}
@media(max-width:374px){
  .optimized .code-date{display:none}
}

/* Keep the heading and benefit tags on one line, including narrow phones. */
.optimized .game-title-row{flex-wrap:nowrap;gap:6px}
.optimized .game-title-row .game-name{
  flex:0 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip
}
.optimized .game-edition{flex:none;font-size:9px;padding:0 5px;white-space:nowrap}
.optimized .tags{
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:none;
  overscroll-behavior-x:contain
}
.optimized .tags::-webkit-scrollbar{display:none}
.optimized .tag{
  flex:0 0 auto;
  height:22px;
  padding:0 5px;
  font-size:clamp(9px,2.4vw,10px);
  white-space:nowrap
}

/* The announcement is attached to the bottom edge inside the banner. */
.optimized .hero-clean{position:relative;isolation:isolate}
.optimized .hero-clean>picture{display:block}
.optimized .hero-clean .compact-game-announcement{
  position:absolute;
  inset:auto 0 0;
  z-index:1;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  width:100%;
  height:40px;
  margin:0;
  padding:0 12px;
  border:0;
  border-top:1px solid rgba(255,255,255,.15);
  border-radius:0;
  background:rgba(24,34,44,.88);
  backdrop-filter:blur(6px);
  color:#fff;
  font-size:12px;
  line-height:1.35;
  text-align:left;
  cursor:pointer
}
.optimized .hero-clean .notice-label{color:#ffdb98;font-size:11px;white-space:nowrap}
.optimized .hero-clean .notice-text{
  min-width:0;
  white-space:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  text-overflow:clip;
  font-weight:600
}
.optimized .hero-clean .notice-text::-webkit-scrollbar{display:none}
.optimized .hero-clean .notice-view{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px 6px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:6px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:10px;
  white-space:nowrap
}
.optimized .hero-clean .notice-view::after{content:" ›";font-size:14px}
.optimized .hero-clean .notice-date{margin:0;color:#e1e8ef;font-size:10px;opacity:1}
.optimized .hero-clean .compact-game-announcement:hover{background:rgba(31,44,57,.96)}
.optimized .hero-clean .compact-game-announcement:focus-visible{outline:2px solid #ffdb98;outline-offset:-3px}
.optimized .primary-button .button-copy{white-space:nowrap;min-width:0}
.optimized .primary-button .button-copy strong{white-space:nowrap}
.optimized .primary-button.invite-button{justify-content:center}
.optimized .primary-button.invite-button>b{display:block;min-width:0;white-space:nowrap;overflow-wrap:normal}
@media(max-width:374px){
  .optimized .primary-button.primary-button{gap:7px;padding-inline:9px;height:60px;min-height:60px;border-radius:16px}
  .optimized .primary-button .primary-icon{width:28px;height:28px;flex-basis:28px;border-radius:9px}
  .optimized .tool-button.compact-sub-action,
  .optimized .tool-grid .tool-button.compact-sub-action.contact-entry,
  .optimized .tool-grid .tool-button.compact-sub-action.is-save{height:52px;min-height:52px;padding-inline:8px;gap:7px;border-radius:14px}
  .optimized .tool-button.compact-sub-action .tool-icon,
  .optimized .tool-grid .tool-button.compact-sub-action.is-save .tool-icon{width:28px;height:28px;flex-basis:28px;border-radius:9px}
  .optimized .hero-clean .compact-game-announcement{gap:6px;padding-inline:10px;height:38px}
}