/* Sảnh mini game — intentionally independent of .dc-song (seasonal shopping).
   The old shared CSS collapsed the status into a narrow grid cell and stretched
   the second game card. Keep three explicit columns here. */
#arcade-modal .arcade-paper{
  box-sizing:border-box;
  width:min(660px,calc(100vw - 24px));
  max-width:100%;
  max-height:calc(100dvh - 20px);
  padding:19px 29px 22px;
  overflow-x:hidden;overflow-y:auto;
  border-radius:21px;
}
#arcade-modal .arcade-paper>.book-eyebrow{
  display:block;margin:48px 0 4px;
  padding:0!important;min-height:0;
  text-align:center;font-size:13px;font-weight:800;
  letter-spacing:.16em;color:#805b3a;
}
#arcade-modal .arcade-paper>h2{
  margin:0 0 7px!important;padding:0!important;
  font-size:clamp(27px,3vw,35px);font-weight:400;
  line-height:1.18;text-align:center;color:#583721;
}
#arcade-modal .arcade-paper .loto-note{
  margin:0 auto 15px;max-width:510px;
  font:600 14px/1.45 var(--font-body,Nunito,sans-serif);
  text-align:center;color:#75553c;
}
#arcade-modal .arcade-game-list{display:grid;gap:11px;margin:0}
#arcade-modal .arcade-game-card{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  align-items:center;gap:13px;
  box-sizing:border-box;
  width:100%;min-height:100px;
  margin:0;padding:14px 15px;
  border:2px solid #b98a55;border-radius:13px;
  background:linear-gradient(120deg,#fffaf0,#f9ecd5);
  text-align:left;color:#603b25;
  box-shadow:0 3px 0 #8f63322a;
  font-family:var(--font-body,Nunito,sans-serif);
  cursor:pointer;
  transition:background .15s,transform .15s,border-color .15s;
}
#arcade-modal .arcade-game-card.is-ready:hover{
  background:linear-gradient(120deg,#fff9eb,#f2e2bd);
  border-color:#78934f;
  transform:translateY(-1px);
}
#arcade-modal .arcade-game-card:focus-visible{
  outline:3px solid #778e4d;outline-offset:3px;
}
#arcade-modal .arcade-game-card:disabled{
  cursor:not-allowed;
  background:#f2e5cf;
  border-color:#c5a57c;
  box-shadow:none;
  color:#715843;
}
#arcade-modal .arcade-game-art{
  display:grid;place-items:center;
  width:54px;height:54px;min-width:0;
  border-radius:14px;
  background:#f4dfb9;
  border:1px solid #e0bd86;
}
#arcade-modal .arcade-game-card:disabled .arcade-game-art{background:#ead9bc}
#arcade-modal .arcade-game-art svg{display:block;width:43px;height:43px;max-width:100%}
#arcade-modal .arcade-game-copy{display:flex;min-width:0;flex-direction:column;gap:4px}
#arcade-modal .arcade-game-copy strong{
  display:block;
  font:700 21px/1.22 var(--font-display,Patrick,Nunito,sans-serif);
  color:#604026;
}
#arcade-modal .arcade-game-copy>span{
  display:block;min-width:0;
  font:600 13px/1.43 var(--font-body,Nunito,sans-serif);
  color:#735641;overflow-wrap:normal;
}
#arcade-modal .arcade-game-state{
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;min-width:96px;
  max-width:100%;padding:6px 9px;
  border-radius:999px;border:1px solid #d5b68b;
  background:#eaddc8;
  font:800 12px/1.25 var(--font-body,Nunito,sans-serif);
  color:#755940;white-space:nowrap;
  text-align:center;overflow-wrap:normal;
}
#arcade-modal .arcade-game-state.is-ready{
  color:#4b7033;background:#ecf3dc;border-color:#a8be85;
}
#arcade-modal .arcade-paper .loto-actions{margin:15px 0 0}
#arcade-modal .arcade-paper .loto-actions .shell-primary{
  min-height:50px;margin:0;padding:8px 14px;
  border-radius:11px;
  font:800 17px/1.25 var(--font-body,Nunito,sans-serif);
}
@media(max-width:600px){
  #arcade-modal .arcade-paper{padding:14px 15px 17px}
  #arcade-modal .arcade-paper>.book-eyebrow{margin-top:46px;font-size:11px}
  #arcade-modal .arcade-paper>h2{font-size:27px}
  #arcade-modal .arcade-paper .loto-note{font-size:12px;margin-bottom:11px}
  #arcade-modal .arcade-game-list{gap:9px}
  #arcade-modal .arcade-game-card{
    grid-template-columns:45px minmax(0,1fr);
    gap:4px 10px;min-height:0;padding:11px 12px;
  }
  #arcade-modal .arcade-game-art{width:44px;height:44px;border-radius:10px;grid-row:1/3}
  #arcade-modal .arcade-game-art svg{width:37px;height:37px}
  #arcade-modal .arcade-game-copy strong{font-size:19px}
  #arcade-modal .arcade-game-copy>span{font-size:12px}
  #arcade-modal .arcade-game-state{
    grid-column:2;justify-self:start;
    min-width:0;font-size:11px;padding:4px 9px;margin-top:3px;
  }
  #arcade-modal .arcade-paper .loto-actions{margin-top:11px}
}
@media(orientation:landscape) and (max-height:500px){
  #arcade-modal .arcade-paper{padding:9px 21px 12px}
  #arcade-modal .arcade-paper>.book-eyebrow{margin-top:37px;margin-bottom:1px}
  #arcade-modal .arcade-paper>h2{font-size:26px;margin:0 0 3px!important}
  #arcade-modal .arcade-paper .loto-note{font-size:12px;margin-bottom:7px}
  #arcade-modal .arcade-game-list{gap:7px}
  #arcade-modal .arcade-game-card{min-height:70px;padding:7px 12px;gap:8px}
  #arcade-modal .arcade-game-art{width:41px;height:41px}
  #arcade-modal .arcade-game-art svg{width:34px;height:34px}
  #arcade-modal .arcade-game-copy strong{font-size:18px}
  #arcade-modal .arcade-game-copy>span{font-size:11px}
  #arcade-modal .arcade-paper .loto-actions{margin-top:8px}
  #arcade-modal .arcade-paper .loto-actions .shell-primary{min-height:44px;font-size:14px}
}