/*
 * Audited game board layout.
 *
 * The legacy game widgets intentionally use their own float-based internals
 * (the animated word letters, timers, history items and score digits).  This
 * file positions only the outer regions; it does not reset every nested div.
 */

@media (min-width: 801px) {
 body.modern-classic[data-game-view='for-gaming'] {
  min-width:0 !important;
  overflow:hidden !important;
  background:#effceb !important;
 }

 body.modern-classic[data-game-view='for-gaming'] #Middle,
 body.modern-classic[data-game-view='for-gaming'] .GameBox {
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .GameBox {
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#effceb !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-title {
  position:absolute !important;
  top:10px !important;
  left:50% !important;
  width:min(420px,calc(100vw - 360px)) !important;
  height:30px !important;
  margin:0 !important;
  padding:0 12px !important;
  box-sizing:border-box !important;
  transform:translateX(-50%) !important;
  border-radius:999px !important;
  line-height:30px !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  z-index:90 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body {
  position:absolute !important;
  top:62px !important;
  left:50% !important;
  width:1180px !important;
  height:650px !important;
  min-height:650px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  /* Keep the stage centered with broadly supported transforms.  CSS math
   * division made the entire transform invalid in Chromium, leaving the
   * stage anchored at 50% and half of the UI off-screen. */
  transform:translateX(-50%) !important;
  transform-origin:top center !important;
  background:transparent !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body > .game-head,
 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body > .game-body,
 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body > .game-input {
  float:none !important;
  box-sizing:border-box !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-head {
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:1180px !important;
  height:350px !important;
  min-height:350px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
 }

 /* Keep this classic widget intact; its inner letters/timers use floats. */
 body.modern-classic[data-game-view='for-gaming'] .jjoriping {
  position:absolute !important;
  top:34px !important;
  left:290px !important;
  width:500px !important;
  height:112px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  transform:none !important;
  z-index:20 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .jjoObj {
  position:relative !important;
  float:left !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .jjoDisplayBar {
  float:left !important;
  width:486px !important;
  height:80px !important;
  overflow:hidden !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .jjo-display {
  width:476px !important;
   height:23px !important;
   min-height:0 !important;
  padding:8px 5px !important;
  font-size:20px !important;
  line-height:23px !important;
  letter-spacing:0 !important;
  word-spacing:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
 }

 /* Do not force float/display here: body.js changes direction for KAP words. */
 body.modern-classic[data-game-view='for-gaming'] .jjo-display .display-text {
  width:20px;
  text-align:center;
 }

 body.modern-classic[data-game-view='for-gaming'] .jjoDisplayBar .graph {
  float:left !important;
  width:484px !important;
  height:20px !important;
  overflow:hidden !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .jjoDisplayBar .graph-bar {
  float:left !important;
  height:16px !important;
  padding-top:4px !important;
  line-height:16px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
 }

 body.modern-classic[data-game-view='for-gaming'] #TurnHint {
   position:absolute !important;
   /* It is mounted inside .jjoriping.  Its coordinate therefore needs to
    * include the word board's own top offset; 548px lands below the player
    * cards even when the compact desktop stage is scaled to .9. */
   top:548px !important;
   left:0 !important;
   width:500px !important;
   min-height:0 !important;
   max-height:74px !important;
   padding:2px 4px !important;
   box-sizing:border-box !important;
   overflow-y:auto !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:5px !important;
  z-index:30 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] #TurnHint button {
  float:none !important;
 width:auto !important;
 height:28px !important;
 min-height:28px !important;
  max-width:calc(100% - 8px) !important;
 margin:0 !important;
 padding:3px 10px !important;
  overflow:hidden !important;
  border:1px solid #b7dcc3 !important;
  border-radius:999px !important;
  color:#24573e !important;
  background:#fff !important;
 font-size:13px !important;
 line-height:20px !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .chain {
  position:absolute !important;
  top:68px !important;
  left:818px !important;
  width:100px !important;
  height:45px !important;
  margin:0 !important;
  padding-top:55px !important;
  transform:none !important;
  z-index:22 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .rounds {
  position:absolute !important;
  top:4px !important;
  left:0 !important;
  width:1180px !important;
  margin:0 !important;
  text-align:center !important;
  z-index:25 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .items {
  position:absolute !important;
  top:72px !important;
  left:64px !important;
  width:100px !important;
  height:45px !important;
  margin:0 !important;
  z-index:16 !important;
 }

 /* These are mode-specific legacy panes.  JavaScript controls their display. */
 body.modern-classic[data-game-view='for-gaming'] .b-left {
  position:absolute !important;
  top:34px !important;
  left:938px !important;
  width:222px !important;
  max-height:240px !important;
  margin:0 !important;
  padding:12px !important;
  box-sizing:border-box !important;
  overflow:auto !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.94) !important;
  color:#244b38 !important;
  text-shadow:none !important;
  z-index:34 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .word-meaning-panel {
  position:absolute !important;
  top:34px !important;
  left:938px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  width:222px !important;
  min-height:102px !important;
  margin:0 !important;
  padding:13px 15px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  border:1px solid #cce8d3 !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 10px 26px rgba(61,111,75,.15) !important;
  color:#234b37 !important;
  z-index:30 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .word-meaning-label {
  color:#528168 !important;
  font-size:12px !important;
  font-weight:800 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .word-meaning-word {
  overflow:hidden !important;
  color:#204d36 !important;
  font-size:19px !important;
  line-height:23px !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .word-meaning-definition {
  display:-webkit-box !important;
  overflow:hidden !important;
  color:#506b5a !important;
  font-size:13px !important;
  line-height:18px !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .word-meaning-panel.is-empty {
  opacity:.72 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] #ShieldStatus {
  position:absolute !important;
  top:146px !important;
  left:938px !important;
  right:auto !important;
  width:222px !important;
  box-sizing:border-box !important;
  text-align:center !important;
  z-index:31 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .history-holder {
  position:absolute !important;
  top:184px !important;
  left:290px !important;
  width:500px !important;
  height:42px !important;
  margin:0 !important;
  overflow:hidden !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.74) !important;
  box-shadow:0 6px 18px rgba(72,112,83,.08) !important;
  z-index:16 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .history {
  display:block !important;
  width:1200px !important;
  height:42px !important;
  min-width:0 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .history-item {
  float:left !important;
  display:block !important;
  flex:none !important;
  box-sizing:content-box !important;
 }

 /* Keep the engine's classic hints hidden until it explicitly shows them. */
 body.modern-classic[data-game-view='for-gaming'] .hints {
  position:absolute !important;
  top:234px !important;
  left:290px !important;
  width:500px !important;
  height:38px !important;
  margin:0 !important;
  overflow:hidden !important;
  z-index:17 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .hint-item {
  float:none !important;
  display:block !important;
  width:auto !important;
  max-width:476px !important;
  height:24px !important;
  max-height:24px !important;
  margin:0 auto !important;
  padding:6px 12px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  border-radius:999px !important;
  background:rgba(36,75,56,.9) !important;
  color:#fff !important;
  font-size:13px !important;
  line-height:12px !important;
  text-align:center !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-input {
  position:absolute !important;
  top:282px !important;
  left:290px !important;
  width:500px !important;
  height:58px !important;
  margin:0 !important;
  padding:7px !important;
  box-sizing:border-box !important;
  border:3px solid rgba(151,222,181,.86) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.96) !important;
  transform:none !important;
  z-index:24 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] #game-input {
  float:left !important;
  width:414px !important;
  height:38px !important;
  margin:0 !important;
  padding:0 12px !important;
  box-sizing:border-box !important;
  border:0 !important;
  border-radius:11px !important;
  outline:0 !important;
  background:#fff !important;
  color:#26372d !important;
  font-family:"Noto Sans KR","Malgun Gothic",sans-serif !important;
  font-size:18px !important;
  font-weight:500 !important;
   line-height:38px !important;
   letter-spacing:0 !important;
   word-spacing:0 !important;
   text-align:left !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-input button {
  float:right !important;
  width:64px !important;
  height:38px !important;
  min-height:38px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:11px !important;
  background:#aee7be !important;
  color:#23543c !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:38px !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body {
  position:absolute !important;
  top:370px !important;
  left:0 !important;
  display:flex !important;
  flex-flow:row nowrap !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:14px !important;
  width:1180px !important;
  height:190px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  transform:none !important;
  z-index:18 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body .game-user {
  float:none !important;
  display:grid !important;
   /* The avatar is 90px high with a 2px vertical margin.  Keep its full
    * 94px footprint inside the first grid row so it cannot bleed into the
    * nickname or score row on a live game card. */
   grid-template-rows:94px 25px 36px !important;
  grid-template-columns:100px !important;
  place-items:center !important;
  flex:0 0 112px !important;
  width:110px !important;
  height:165px !important;
  margin:0 !important;
  padding:2px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  border-radius:12px !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body .game-user-current {
  height:175px !important;
  margin-top:-10px !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body .game-user-image {
  float:none !important;
  display:block !important;
  width:90px !important;
  height:90px !important;
  margin:2px auto !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body .game-user-title {
  float:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100px !important;
  height:25px !important;
  margin:0 !important;
  overflow:hidden !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body .game-user-title .expl {
  display:none !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body .game-user-level {
  float:none !important;
  flex:0 0 auto !important;
  width:18px !important;
  height:18px !important;
  margin-right:3px !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body .game-user-name {
  float:none !important;
  width:auto !important;
  max-width:82px !important;
  height:20px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  font-size:14px !important;
  line-height:20px !important;
  text-align:center !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body .game-user-score {
  float:none !important;
  width:96px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:10px !important;
  font-size:28px !important;
  font-weight:800 !important;
  line-height:36px !important;
  text-align:center !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body .game-user-score-char {
  display:inline-block !important;
  float:none !important;
  width:auto !important;
  min-width:14px !important;
  height:36px !important;
  margin:0 !important;
  padding:0 !important;
  color:#287c59 !important;
  font-size:28px !important;
  font-weight:800 !important;
  line-height:36px !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .ChatBox {
  position:fixed !important;
  top:auto !important;
  right:auto !important;
  bottom:18px !important;
  left:20px !important;
  width:326px !important;
  height:156px !important;
  margin:0 !important;
  z-index:75 !important;
 }
}

/* Fixed desktop fallbacks avoid unsupported calc division while keeping the
 * 1180px classic stage entirely visible on narrower desktop windows. */
@media (min-width:1062px) and (max-width:1200px) {
 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body {
  left:calc(50% - 531px) !important;
  transform:scale(.9) !important;
  transform-origin:top left !important;
 }
}
@media (min-width:1001px) and (max-width:1061px) {
 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body {
  left:calc(50% - 495.6px) !important;
  transform:scale(.84) !important;
  transform-origin:top left !important;
 }
}
@media (min-width:901px) and (max-width:1000px) {
 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body {
  left:calc(50% - 448px) !important;
  transform:scale(.76) !important;
  transform-origin:top left !important;
 }
}
@media (min-width:801px) and (max-width:900px) {
 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body {
  left:calc(50% - 378px) !important;
  transform:scale(.64) !important;
  transform-origin:top left !important;
 }
}

/* On short laptop windows, retain the entire game board above the compact
 * bottom-left chat.  Fixed scales are deliberate: CSS calc() division is
 * not valid in Chromium and previously made the transform disappear. */
@media (min-width:1201px) and (max-height:820px) {
 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body {
  left:calc(50% - 531px) !important;
  transform:scale(.9) !important;
  transform-origin:top left !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .ChatBox {
  bottom:10px !important;
  left:12px !important;
  width:280px !important;
  height:126px !important;
 }
}

@media (min-width:1001px) and (max-width:1200px) and (max-height:820px) {
 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body {
  left:calc(50% - 472px) !important;
  transform:scale(.8) !important;
  transform-origin:top left !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .ChatBox {
  bottom:10px !important;
  left:12px !important;
  width:280px !important;
  height:126px !important;
 }
}

@media (min-width:1001px) and (max-height:700px) {
 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body {
  left:calc(50% - 472px) !important;
  transform:scale(.8) !important;
  transform-origin:top left !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .ChatBox {
  bottom:8px !important;
  left:10px !important;
  width:236px !important;
  height:108px !important;
 }
}

@media (min-width:801px) and (max-width:1000px) and (max-height:720px) {
 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body {
  left:calc(50% - 378px) !important;
  transform:scale(.64) !important;
  transform-origin:top left !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .ChatBox {
  bottom:8px !important;
  left:10px !important;
  width:240px !important;
  height:100px !important;
 }
}

/* These utility panels are injected by the classic rule.  Never let them
 * leak into a different game mode, whose legacy float layout would otherwise
 * position the unstyled nodes over its own board. */
body:not(.modern-classic) #WordMeaning,
body:not(.modern-classic) #ShieldStatus,
body:not(.modern-classic) #TurnHint {
 display:none !important;
}

@media (max-width: 800px) {
 body.modern-classic[data-game-view='for-gaming'] {
  min-width:0 !important;
  overflow:hidden !important;
  background:#effceb !important;
 }

 body.modern-classic[data-game-view='for-gaming'] #Middle,
 body.modern-classic[data-game-view='for-gaming'] .GameBox {
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .GameBox {
  border:0 !important;
  border-radius:0 !important;
  background:#effceb !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-title {
  top:54px !important;
  left:50% !important;
  width:calc(100vw - 24px) !important;
  height:28px !important;
  margin:0 !important;
  padding:0 10px !important;
  box-sizing:border-box !important;
  transform:translateX(-50%) !important;
  line-height:28px !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  z-index:91 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body {
  position:absolute !important;
  top:86px !important;
  left:0 !important;
  width:100% !important;
  height:calc(100dvh - 86px) !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  transform:none !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body > .game-head,
 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body > .game-body,
 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body > .game-input {
  float:none !important;
  box-sizing:border-box !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-head {
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  height:270px !important;
  min-height:270px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .jjoriping {
   position:absolute !important;
  top:12px !important;
  left:50% !important;
  width:500px !important;
  height:112px !important;
  margin:0 !important;
  overflow:visible !important;
  transform:translateX(-50%) scale(.84) !important;
  transform-origin:top center !important;
  z-index:20 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .jjoObj,
 body.modern-classic[data-game-view='for-gaming'] .jjoDisplayBar,
 body.modern-classic[data-game-view='for-gaming'] .jjoDisplayBar .graph,
 body.modern-classic[data-game-view='for-gaming'] .jjoDisplayBar .graph-bar {
  float:left !important;
 }

 body.modern-classic[data-game-view='for-gaming'] #TurnHint {
   position:absolute !important;
   /* This node lives inside the scaled word-board.  660px maps just below
    * the centered player cards on phone widths instead of over them. */
   top:660px !important;
  left:0 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
   gap:4px !important;
   width:500px !important;
   max-height:64px !important;
   padding:2px 4px !important;
   box-sizing:border-box !important;
   overflow-y:auto !important;
   z-index:30 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] #TurnHint button {
  float:none !important;
 width:auto !important;
 height:26px !important;
 min-height:26px !important;
  max-width:calc(100% - 8px) !important;
 margin:0 !important;
 padding:2px 8px !important;
  overflow:hidden !important;
 border-radius:999px !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .chain,
 body.modern-classic[data-game-view='for-gaming'] .items,
 body.modern-classic[data-game-view='for-gaming'] #ShieldStatus {
  display:none !important;
 }

 /* Keep the word meaning available on phones.  It fits between the word
  * board and the history strip, leaving the input and player cards clear. */
 body.modern-classic[data-game-view='for-gaming'] .word-meaning-panel {
  position:absolute !important;
  top:116px !important;
  left:12px !important;
  display:grid !important;
  grid-template-columns:auto auto minmax(0, 1fr) !important;
  align-items:center !important;
  gap:5px !important;
  width:calc(100vw - 24px) !important;
  min-height:34px !important;
  max-height:34px !important;
  margin:0 !important;
  padding:4px 8px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  border:1px solid #cce8d3 !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.96) !important;
  color:#234b37 !important;
  z-index:31 !important;
 }
 body.modern-classic[data-game-view='for-gaming'] .word-meaning-label {
  font-size:10px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
 }
 body.modern-classic[data-game-view='for-gaming'] .word-meaning-word {
  max-width:66px !important;
  font-size:13px !important;
  line-height:18px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
 }
 body.modern-classic[data-game-view='for-gaming'] .word-meaning-definition {
  display:block !important;
  min-width:0 !important;
  overflow:hidden !important;
  color:#506b5a !important;
  font-size:11px !important;
  line-height:18px !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .b-left {
  position:absolute !important;
  top:165px !important;
  left:12px !important;
  width:calc(100vw - 24px) !important;
  max-height:92px !important;
  box-sizing:border-box !important;
  overflow:auto !important;
  z-index:32 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .history-holder {
  position:absolute !important;
  top:155px !important;
  left:12px !important;
  width:calc(100vw - 24px) !important;
  height:36px !important;
  margin:0 !important;
  overflow:hidden !important;
  border-radius:11px !important;
  z-index:15 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .history {
  display:block !important;
  width:1200px !important;
  height:36px !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .history-item {
  float:left !important;
  display:block !important;
  flex:none !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .hints {
  position:absolute !important;
  top:198px !important;
  left:12px !important;
  width:calc(100vw - 24px) !important;
  height:34px !important;
  margin:0 !important;
  overflow:hidden !important;
  z-index:16 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .hint-item {
  float:none !important;
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:24px !important;
  margin:0 auto !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-input {
  position:absolute !important;
  top:240px !important;
  left:12px !important;
  width:calc(100vw - 24px) !important;
  height:54px !important;
  margin:0 !important;
  padding:6px !important;
  box-sizing:border-box !important;
  border-radius:16px !important;
  transform:none !important;
  z-index:24 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] #game-input {
  float:left !important;
  width:calc(100% - 64px) !important;
  height:38px !important;
  margin:0 !important;
  padding:0 10px !important;
  box-sizing:border-box !important;
  border:0 !important;
  border-radius:10px !important;
  font-size:16px !important;
  line-height:38px !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-input button {
  float:right !important;
  width:58px !important;
  height:38px !important;
  min-height:38px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:10px !important;
  line-height:38px !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body {
  position:absolute !important;
  top:314px !important;
  left:0 !important;
  display:flex !important;
  flex-flow:row nowrap !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:8px !important;
  width:100% !important;
  height:170px !important;
  margin:0 !important;
  padding:0 6px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  transform:none !important;
  z-index:18 !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body .game-user {
  float:none !important;
  display:grid !important;
  grid-template-rows:78px 24px 31px !important;
  grid-template-columns:86px !important;
  place-items:center !important;
  flex:0 0 98px !important;
  width:96px !important;
  height:139px !important;
  margin:0 !important;
  padding:2px !important;
  box-sizing:border-box !important;
  border-radius:11px !important;
  overflow:hidden !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body .game-user-current {
  height:147px !important;
  margin-top:-8px !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body .game-user-image {
  float:none !important;
  display:block !important;
  width:74px !important;
  height:74px !important;
  margin:2px auto !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body .game-user-title {
  float:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:86px !important;
  height:23px !important;
  margin:0 !important;
  overflow:hidden !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body .game-user-title .expl {
  display:none !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body .game-user-level {
  float:none !important;
  width:16px !important;
  height:16px !important;
  margin-right:2px !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body .game-user-name {
  float:none !important;
  width:auto !important;
  max-width:73px !important;
  height:18px !important;
  margin:0 !important;
  padding:0 !important;
  font-size:12px !important;
  line-height:18px !important;
  text-align:center !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .game-body .game-user-score {
  float:none !important;
  width:84px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  font-size:24px !important;
  line-height:30px !important;
  text-align:center !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .ChatBox {
  position:fixed !important;
  top:auto !important;
  right:8px !important;
  bottom:8px !important;
  left:8px !important;
  width:auto !important;
  height:118px !important;
  margin:0 !important;
  z-index:75 !important;
 }
}

@media (min-width:361px) and (max-width:480px) {
 body.modern-classic[data-game-view='for-gaming'] .jjoriping {
  transform:translateX(-50%) scale(.70) !important;
 }
}
@media (max-width:360px) {
 body.modern-classic[data-game-view='for-gaming'] .jjoriping {
  transform:translateX(-50%) scale(.62) !important;
 }
 body.modern-classic[data-game-view='for-gaming'] #TurnHint {
  /* The smaller scale needs a larger unscaled offset to keep the hint row
   * below the cards as well. */
  top:750px !important;
 }
}

/* Very short phones need a compact lower area.  Keep the promised order
 * (cards → hint → chat) while preserving a usable chat input. */
@media (max-width:800px) and (max-height:700px) {
 body.modern-classic[data-game-view='for-gaming'] .game-body {
  top:280px !important;
  height:160px !important;
 }
 body.modern-classic[data-game-view='for-gaming'] #TurnHint {
  top:595px !important;
  max-height:54px !important;
 }
 body.modern-classic[data-game-view='for-gaming'] .ChatBox {
  right:6px !important;
  bottom:3px !important;
  left:6px !important;
  height:76px !important;
 }
}

@media (max-width:360px) and (max-height:700px) {
 body.modern-classic[data-game-view='for-gaming'] #TurnHint {
  top:670px !important;
 }
}

/*
 * Ultra-wide desktops used to inherit a stale, pre-stage layout from the
 * legacy stylesheet: the fixed-size classic board stayed at the upper left
 * while the rest of the 2K/4K viewport was empty.  The classic board is
 * deliberately kept at its readable native size, but the *whole* stage is
 * centered vertically as well as horizontally.  Keeping the transform to a
 * simple translate also avoids the invalid CSS-math division that previously
 * made a transform disappear in Chromium.
 */
@media (min-width:1600px) and (min-height:850px) {
 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body {
  top:clamp(110px, calc(50dvh - 320px), 220px) !important;
  left:50% !important;
  width:1180px !important;
  height:650px !important;
  min-height:650px !important;
  transform:translateX(-50%) !important;
  transform-origin:top center !important;
 }
}

/* A page-level status strip keeps the maintenance notice visible only while
 * a match is active.  It lives outside the legacy float-based board, so it
 * cannot alter the board's word animation or player-card measurements. */
#GameMaintenanceNotice {
 display:none;
}

body[data-game-view] #GameMaintenanceNotice {
 position:fixed;
 top:0;
 right:0;
 left:0;
 display:flex;
 align-items:center;
 justify-content:center;
 min-height:34px;
 margin:0;
 padding:7px 16px;
 box-sizing:border-box;
 background:#111;
 color:#fff;
 font-family:"Noto Sans KR","Malgun Gothic",sans-serif;
 font-size:13px;
 font-weight:700;
 line-height:20px;
 text-align:center;
 text-shadow:none;
 word-break:keep-all;
 z-index:85;
 pointer-events:none;
}

/* On desktop, leave a clear row below the strip for the room header before
 * the fixed classic stage begins.  The ultra-wide vertical centering rule is
 * restored below so large displays retain their centered board. */
@media (min-width:801px) {
 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-title {
  top:42px !important;
 }

 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body {
  top:78px !important;
 }
}

@media (min-width:1600px) and (min-height:850px) {
 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body {
  top:clamp(110px, calc(50dvh - 320px), 220px) !important;
 }
}

/* Keep phone controls and the compact board below the strip without taking
 * vertical space away from the input, cards, hints, or chat regions. */
@media (max-width:800px) {
 body[data-game-view] #GameMaintenanceNotice {
  min-height:34px;
  padding:4px 10px 4px 96px;
  font-size:10px;
  line-height:14px;
  word-break:break-word;
 }
}

/* Lobby and room panels need their own containing blocks.  The legacy
 * stylesheet left the room list in normal flow, so wide screens clipped the
 * cards as soon as the modern grid was enabled. */
body[data-game-view='for-lobby'] .RoomListBox {
 position:fixed !important;
 top:72px !important;
 right:28px !important;
 bottom:24px !important;
 left:236px !important;
 width:auto !important;
 height:auto !important;
 max-width:none !important;
 margin:0 !important;
 box-sizing:border-box !important;
 overflow:hidden !important;
 z-index:60 !important;
}
body[data-game-view='for-lobby'] .RoomListBox .product-title {
 float:none !important;
 min-height:54px !important;
 padding:15px 22px !important;
 box-sizing:border-box !important;
 font-size:18px !important;
}
body[data-game-view='for-lobby'] .RoomListBox .product-body {
 float:none !important;
 display:grid !important;
 grid-template-columns:repeat(auto-fill,minmax(340px,1fr)) !important;
 grid-auto-rows:156px !important;
 align-content:start !important;
 gap:16px !important;
 width:100% !important;
 height:calc(100% - 54px) !important;
 padding:18px 22px !important;
 box-sizing:border-box !important;
 overflow:auto !important;
}
body[data-game-view='for-lobby'] .RoomListBox .rooms-item {
 position:relative !important;
 float:none !important;
 width:100% !important;
 height:156px !important;
 min-width:0 !important;
 margin:0 !important;
 padding:18px !important;
 box-sizing:border-box !important;
 overflow:hidden !important;
 border:1px solid #d2e8d8 !important;
 border-radius:18px !important;
 background:#fff !important;
 box-shadow:0 8px 22px rgba(40,93,61,.10) !important;
}
body[data-game-view='for-lobby'] .RoomListBox .rooms-item > div {
 float:none !important;
 box-sizing:border-box !important;
}
body[data-game-view='for-lobby'] .RoomListBox .rooms-channel {
 position:absolute !important;
 top:18px !important;
 left:18px !important;
 width:11px !important;
 height:11px !important;
 margin:0 !important;
}
body[data-game-view='for-lobby'] .RoomListBox .rooms-number {
 position:absolute !important;
 top:34px !important;
 left:18px !important;
 width:48px !important;
 height:auto !important;
 margin:0 !important;
 padding:0 !important;
 border:0 !important;
 color:#628f72 !important;
 font-size:13px !important;
}
body[data-game-view='for-lobby'] .RoomListBox .rooms-title {
 position:absolute !important;
 top:50px !important;
 right:70px !important;
 left:18px !important;
 width:auto !important;
 height:28px !important;
 padding:0 !important;
 overflow:hidden !important;
 color:#203a2a !important;
 font-size:20px !important;
 line-height:28px !important;
 text-overflow:ellipsis !important;
 white-space:nowrap !important;
}
body[data-game-view='for-lobby'] .RoomListBox .rooms-limit {
 position:absolute !important;
 top:20px !important;
 right:18px !important;
 width:auto !important;
 height:auto !important;
 padding:0 !important;
 color:#385d46 !important;
 font-size:14px !important;
}
body[data-game-view='for-lobby'] .RoomListBox .rooms-details {
 position:absolute !important;
 right:18px !important;
 bottom:20px !important;
 left:18px !important;
 width:auto !important;
 height:34px !important;
 margin:0 !important;
 padding-top:8px !important;
 border-top:1px solid #e3eee6 !important;
}
body[data-game-view='for-lobby'] .RoomListBox .rooms-mode,
body[data-game-view='for-lobby'] .RoomListBox .rooms-round,
body[data-game-view='for-lobby'] .RoomListBox .rooms-time {
 float:left !important;
 width:auto !important;
 height:auto !important;
 margin:0 10px 0 0 !important;
 padding:0 !important;
 color:#628271 !important;
 font-size:13px !important;
 line-height:20px !important;
}
body[data-game-view='for-lobby'] .RoomListBox .rooms-lock {
 position:absolute !important;
 right:18px !important;
 bottom:18px !important;
 width:auto !important;
 height:auto !important;
 padding:0 !important;
 color:#315b40 !important;
 font-size:19px !important;
}
body[data-game-view='for-lobby'] .RoomListBox .rooms-gaming { background:#f2f7f3 !important; }
body[data-game-view='for-lobby'] .RoomListBox .rooms-create {
 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
 background:linear-gradient(135deg,#c9f4d5,#f0ffd7) !important;
 color:#286447 !important;
 font-size:20px !important;
 font-weight:800 !important;
}
body[data-game-view='for-lobby'] .RoomListBox .rooms-create > div { padding:0 !important; }

/* A larger, movable-size chat panel is anchored to the lower right in every
 * game state.  The drag handle stores each player's preferred size locally. */
body[data-game-view] .ChatBox {
 position:fixed !important;
 top:auto !important;
 right:18px !important;
 bottom:18px !important;
 left:auto !important;
 width:var(--kkutu-chat-width, clamp(420px,32vw,560px)) !important;
 height:var(--kkutu-chat-height, 260px) !important;
 min-width:360px !important;
 min-height:180px !important;
 max-width:calc(100vw - 36px) !important;
 max-height:calc(100dvh - 88px) !important;
 margin:0 !important;
 box-sizing:border-box !important;
 z-index:82 !important;
}
body[data-game-view] .ChatBox .product-body { padding:12px !important; }
body[data-game-view] .ChatBox #Talk,
body[data-game-view] .ChatBox #ChatBtn { height:48px !important; }
.chat-resize-grip {
 position:absolute !important;
 right:3px !important;
 bottom:3px !important;
 z-index:5 !important;
 width:22px !important;
 height:22px !important;
 min-height:0 !important;
 padding:0 !important;
 border:0 !important;
 border-radius:6px !important;
 color:#4d7a5c !important;
 background:rgba(203,239,213,.92) !important;
 font-size:12px !important;
 line-height:22px !important;
 cursor:nesw-resize !important;
 touch-action:none !important;
}
.rank-season-notice {
 display:flex;
 min-height:154px;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:6px;
 text-align:center;
 color:#2b6146;
}
.rank-season-icon { font-size:42px; line-height:1; }
.rank-season-notice h3 { margin:2px 0 0; font-size:25px; }
.rank-season-notice p { margin:0; color:#d36a34; font-size:21px; font-weight:800; }
.rank-season-notice > span:last-child { color:#759180; font-size:14px; }

@media (max-width:800px) {
 body[data-game-view='for-lobby'] .RoomListBox {
  top:54px !important;
  right:8px !important;
  bottom:8px !important;
  left:8px !important;
 }
 body[data-game-view='for-lobby'] .RoomListBox .product-body {
  grid-template-columns:1fr !important;
  grid-auto-rows:144px !important;
  padding:12px !important;
 }
 body[data-game-view='for-lobby'] .RoomListBox .rooms-item { height:144px !important; }
 body[data-game-view] .ChatBox {
  right:8px !important;
  bottom:8px !important;
  width:min(390px,calc(100vw - 16px)) !important;
  height:190px !important;
  min-width:0 !important;
  min-height:0 !important;
 }
 .chat-resize-grip { display:none !important; }
}

/* Give high-resolution desktop players a genuinely larger board instead of
 * leaving the classic-size widgets surrounded by unused space. */
@media (min-width:1600px) and (min-height:850px) {
 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body {
  transform:translateX(-50%) scale(1.10) !important;
  transform-origin:top center !important;
 }
}

/* Participant cards must remain an interactive, visible layer even while
 * the legacy word-board animates.  Earlier rules let a late player record
 * inherit an old float layout, placing it outside the stage on wide screens. */
body.modern-classic[data-game-view='for-gaming'] .GameBox .game-body {
 position:absolute !important;
 top:330px !important;
 left:50% !important;
 display:flex !important;
 align-items:flex-start !important;
 justify-content:center !important;
 width:min(1180px,calc(100% - 32px)) !important;
 height:190px !important;
 margin:0 !important;
 padding:0 !important;
 overflow:visible !important;
 transform:translateX(-50%) !important;
 z-index:42 !important;
 pointer-events:auto !important;
}
body.modern-classic[data-game-view='for-gaming'] .GameBox .game-body .game-user {
 display:grid !important;
 visibility:visible !important;
 opacity:1 !important;
 cursor:pointer !important;
 pointer-events:auto !important;
}
body.modern-classic[data-game-view='for-gaming'] .GameBox .game-body .game-user:focus-visible {
	outline:3px solid #50bc83 !important;
	outline-offset:3px !important;
}
@media (min-width:801px) {
	body.modern-classic[data-game-view='for-gaming'] .GameBox .game-body .game-user-score {
		display:flex !important;
		grid-row:3 !important;
		grid-column:1 !important;
		align-items:center !important;
		justify-content:center !important;
		visibility:visible !important;
		opacity:1 !important;
		min-height:36px !important;
		color:#287c59 !important;
	}
	body.modern-classic[data-game-view='for-gaming'] .GameBox .game-body .game-user-score-char {
		display:block !important;
		float:none !important;
		visibility:visible !important;
		opacity:1 !important;
	}
}

@media (min-width:801px) {
	.GameBox .game-body .game-user-score {
		display:flex !important;
		align-items:center !important;
		justify-content:center !important;
		visibility:visible !important;
		opacity:1 !important;
		min-height:30px !important;
		color:#287c59 !important;
		font-size:24px !important;
		font-weight:800 !important;
		line-height:30px !important;
	}
	.GameBox .game-body .game-user-score-char {
		display:block !important;
		float:none !important;
		visibility:visible !important;
		opacity:1 !important;
	}
}

/* This control is outside the legacy menu, whose game-state visibility is
 * frequently rewritten by the old UI code.  It therefore cannot disappear
 * during a round or under the maintenance strip. */
#GameExitControl {
 position:fixed;
 top:42px;
 right:22px;
 display:none;
 min-width:108px;
 height:38px;
 padding:0 16px;
 border:1px solid rgba(255,255,255,.65);
 border-radius:12px;
 background:#ef766f;
 color:#fff;
 font-family:"Noto Sans KR","Malgun Gothic",sans-serif;
 font-size:14px;
 font-weight:800;
 line-height:36px;
 box-shadow:0 5px 14px rgba(90,37,34,.22);
 cursor:pointer;
 z-index:110;
}
body[data-game-view='for-gaming'] #GameExitControl { display:block !important; }

@media (max-width:800px) {
 body.modern-classic[data-game-view='for-gaming'] .GameBox .game-body {
  top:304px !important;
  width:calc(100% - 12px) !important;
  height:160px !important;
 }
 #GameExitControl {
  top:39px;
  right:8px;
  min-width:78px;
  height:31px;
  padding:0 10px;
  border-radius:10px;
  font-size:11px;
  line-height:29px;
 }
}

/* Ranked play ----------------------------------------------------------- */
.ranked-panel {
 display:flex;
 flex-direction:column;
 align-items:center;
 min-height:390px;
 padding:8px 10px 12px;
 box-sizing:border-box;
 color:#272353;
 text-align:center;
}
.ranked-panel-head { display:flex; align-items:center; gap:14px; width:100%; text-align:left; }
#RankTierIcon { width:84px; height:84px; object-fit:contain; flex:0 0 84px; }
.ranked-panel-head h3 { margin:0 0 4px; color:#32265f; font-size:25px; }
.ranked-panel-head p { margin:0; color:#655f8c; font-size:14px; font-weight:700; }
.ranked-guest-warning { width:100%; margin:10px 0 7px; padding:9px 12px; box-sizing:border-box; border-radius:11px; background:#fff5d8; color:#855a13; font-size:12px; font-weight:700; line-height:1.45; }
.rank-tier-gallery { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; width:100%; margin:2px 0 8px; }
.rank-tier-gallery div { display:flex; min-width:0; flex-direction:column; align-items:center; gap:2px; color:#605a83; font-size:10px; font-weight:800; }
.rank-tier-gallery img { width:50px; height:50px; object-fit:contain; }
.ranked-rules { margin:4px 0 12px; color:#6d6890; font-size:12px; font-weight:700; }
#RankQueueBtn { float:none; width:min(300px,100%); min-height:46px; border:0; border-radius:14px; background:linear-gradient(135deg,#5039a5,#7d48d4); color:#fff; font-size:16px; font-weight:900; box-shadow:0 8px 18px rgba(75,48,156,.25); cursor:pointer; }
#RankQueueBtn:hover { filter:brightness(1.07); }

#RankMatchOverlay { position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; background:rgba(10,12,37,.72); }
#RankMatchOverlay section { width:440px; max-width:100%; padding:28px; box-sizing:border-box; border:1px solid rgba(174,143,255,.75); border-radius:24px; background:linear-gradient(145deg,#23204d,#3b2671); color:#fff; text-align:center; box-shadow:0 20px 55px rgba(0,0,0,.42); }
#RankMatchOverlay img { width:86px; height:86px; object-fit:contain; }
#RankMatchOverlay h2 { margin:5px 0 14px; font-size:27px; }
#RankMatchOverlay p { margin:12px 0; color:#ded5ff; line-height:1.55; }
#RankMatchOverlay button { float:none; min-height:42px; padding:9px 18px; border:1px solid #cbb9ff; border-radius:12px; background:#f0eaff; color:#39246a; font-weight:800; cursor:pointer; }

body.ranked-match[data-game-view='for-gaming'] { background:#0d1030 !important; }
body.ranked-match[data-game-view='for-gaming'] #Middle {
 background-color:#0d1030 !important;
 background-image:radial-gradient(circle at 50% 42%,rgba(104,65,226,.52),transparent 42%),linear-gradient(135deg,#10133d 0%,#25185c 48%,#102e55 100%),url('/img/custom/ranks/rank-kkutugame.png') !important;
 background-repeat:no-repeat !important;
 background-position:center,center,center !important;
 background-size:100% 100%,100% 100%,min(62vh,620px) !important;
}
body.ranked-match[data-game-view='for-gaming'] .GameBox { background:rgba(13,16,48,.68) !important; }
body.ranked-match[data-game-view='for-gaming'] .GameBox .product-title { background:rgba(62,39,130,.9) !important; color:#fff !important; }
body.ranked-match[data-game-view='for-gaming'] .jjoDisplayBar { box-shadow:0 8px 28px rgba(13,7,54,.38); }

/* The meaning field was previously positioned using a fixed left offset.
 * Keep it visible at the right of the enlarged stage on every desktop size. */
@media (min-width:801px) {
 body.modern-classic[data-game-view='for-gaming'] .word-meaning-panel {
  top:30px !important;
  right:24px !important;
  left:auto !important;
  width:272px !important;
  min-height:116px !important;
  background:rgba(255,255,255,.97) !important;
  z-index:61 !important;
 }
 body.modern-classic[data-game-view='for-gaming'] .word-meaning-word { font-size:21px !important; }
body.modern-classic[data-game-view='for-gaming'] .word-meaning-definition { font-size:14px !important; line-height:20px !important; -webkit-line-clamp:3 !important; }

/* The lobby character must retain a visible base body even when an account
 * has no legacy Moremi back-part equipped. */
#LobbyHeroImage .moremi-body,
.my-image .moremi-body {
	display:block !important;
	position:absolute !important;
	inset:0;
	width:100% !important;
	height:100% !important;
	object-fit:cover;
	object-position:center bottom;
}

.moremi-body[data-moremi-base] {
	object-fit:contain !important;
	object-position:center bottom !important;
}
 body.modern-classic[data-game-view='for-gaming'] #ShieldStatus { top:158px !important; right:24px !important; left:auto !important; width:272px !important; }
}

@media (max-width:800px) {
 #LeaderboardDiag { width:calc(100vw - 24px) !important; height:465px !important; }
 #LeaderboardDiag .dialog-title { width:calc(100% - 20px) !important; }
 #RankTierIcon { width:68px; height:68px; flex-basis:68px; }
 .ranked-panel-head h3 { font-size:21px; }
 .rank-tier-gallery img { width:42px; height:42px; }
 .ranked-rules { font-size:11px; }
}

@media (min-width:801px) {
 body.modern-classic[data-game-view='for-gaming'] .GameBox .product-body {
  left:50% !important;
  transform:translateX(-50%) scale(var(--kkutu-stage-scale, 1)) !important;
  transform-origin:top center !important;
 }
}

#ResultDiag .rank-result-summary {
 float:none !important;
 clear:both;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 width:calc(100% - 10px);
 margin:6px 1px 2px;
 padding:9px 12px;
 box-sizing:border-box;
 border:1px solid #b8a8ef;
 border-radius:12px;
 background:linear-gradient(135deg,#eeeaff,#f8f5ff);
 color:#37275f;
 font-size:14px;
}
#ResultDiag .rank-result-summary.is-hidden { display:none !important; }
#RankResultDelta { color:#6040b9; font-size:16px; }
#RankResultRating { color:#4d4a66; font-weight:800; white-space:nowrap; }

@media (max-width:800px) {
 #ResultDiag .rank-result-summary { gap:7px; padding:8px 9px; font-size:12px; }
 #RankResultDelta { font-size:13px; }
}

body.waiting-room .RoomBox {
 background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,255,239,.82)) !important;
 border:1px solid rgba(195,235,206,.9) !important;
 border-radius:24px !important;
 box-shadow:0 20px 55px rgba(45,101,67,.16) !important;
 overflow:hidden;
}
body.waiting-room .RoomBox .product-title {
 display:flex;
 align-items:center;
 min-height:48px !important;
 padding:0 20px !important;
 box-sizing:border-box;
 background:linear-gradient(90deg,#d7f7df,#f3f9cc) !important;
 color:#205f4d !important;
 font-size:15px !important;
 font-weight:900;
}
body.waiting-room .RoomBox .product-title > * { float:none !important; }
body.waiting-room .RoomBox .room-head-title { flex:1; min-width:150px; width:auto !important; text-align:left !important; }
body.waiting-room .RoomBox .room-head-number { width:auto !important; margin-right:10px; color:#4b9275; }
body.waiting-room .RoomBox .room-head-mode,
body.waiting-room .RoomBox .room-head-limit,
body.waiting-room .RoomBox .room-head-round,
body.waiting-room .RoomBox .room-head-time { width:auto !important; margin-left:12px; color:#487464; font-size:12px; }
body.waiting-room .RoomBox .product-body {
 display:grid;
 grid-template-columns:74px minmax(0,1fr);
 gap:18px;
 height:calc(100% - 48px) !important;
 padding:20px !important;
 box-sizing:border-box;
 overflow:auto;
}
body.waiting-room .team-selector {
 float:none !important;
 display:flex;
 flex-direction:column;
 gap:8px;
 width:auto !important;
 height:auto !important;
 margin:0 !important;
 padding:0 16px 0 0 !important;
 border:0 !important;
 border-right:1px solid #d7ead9 !important;
}
body.waiting-room .team-button {
 float:none !important;
 display:grid;
 place-items:center;
 width:48px !important;
 min-height:48px;
 height:48px !important;
 margin:0 !important;
 padding:0 !important;
 border:3px solid rgba(255,255,255,.88);
 border-radius:50% !important;
 box-sizing:border-box;
 color:#fff;
 font-size:14px;
 font-weight:900;
 box-shadow:0 5px 13px rgba(48,84,54,.16);
 transition:transform .16s ease,box-shadow .16s ease;
}
body.waiting-room .team-button:hover { margin:0 !important; border-bottom:3px solid rgba(255,255,255,.88) !important; transform:translateY(-2px) scale(1.06); }
body.waiting-room .team-chosen { outline:3px solid #3fae78; outline-offset:3px; }
body.waiting-room .room-users {
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
 align-content:start;
 gap:14px;
 width:100% !important;
 max-width:100% !important;
 min-width:0 !important;
 box-sizing:border-box !important;
 overflow:visible !important;
}
body.waiting-room .room-user {
 float:none !important;
 display:grid;
 grid-template-columns:88px minmax(0,1fr);
 grid-template-rows:88px auto;
 gap:8px 10px;
 width:auto !important;
 min-width:0 !important;
 min-height:132px;
 height:auto !important;
 margin:0 !important;
 padding:13px !important;
 border:1px solid #d3e8d7;
 border-radius:20px !important;
 box-sizing:border-box;
 overflow:hidden;
 background:linear-gradient(145deg,#fff,#effcf1) !important;
 box-shadow:0 8px 20px rgba(45,102,67,.1);
 transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
body.waiting-room .room-user:hover { background:linear-gradient(145deg,#fff,#e5fae8) !important; border-color:#78d59a; transform:translateY(-3px); box-shadow:0 14px 25px rgba(45,102,67,.16); }
body.waiting-room .room-user div { float:none !important; }
body.waiting-room .room-user-image { grid-row:1; width:88px !important; height:88px !important; margin:0 !important; }
body.waiting-room .room-user-stat { display:flex; flex-direction:column; align-items:stretch; width:auto !important; height:auto !important; padding:2px 0 !important; font-size:13px; }
body.waiting-room .room-user-stat div { margin:0 0 7px !important; }
body.waiting-room .room-user-ready { width:auto !important; padding:5px 8px; border-radius:999px; text-align:center !important; background:#eff2ef; }
body.waiting-room .room-user-readied { color:#176d4f; background:#d9f7df; }
body.waiting-room .room-user-master { color:#956216; background:#fff3c8; }
body.waiting-room .room-user-spectate { color:#7354a6; background:#eee5ff; }
body.waiting-room .room-user-team { width:auto !important; margin-top:auto !important; margin-left:0 !important; padding:5px 8px; border-radius:999px; text-align:center !important; color:#fff; }
body.waiting-room .room-user-title { grid-column:1 / -1; display:flex; align-items:center; width:auto !important; padding:0 !important; font-size:15px !important; }
body.waiting-room .room-user-level { flex:0 0 auto; width:27px !important; height:27px !important; }
body.waiting-room .room-user-name { min-width:0; padding:5px 0 0 7px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:800px) {
 body.waiting-room .RoomBox .product-title { min-height:42px !important; padding:0 12px !important; }
 body.waiting-room .RoomBox .room-head-mode,
 body.waiting-room .RoomBox .room-head-round,
 body.waiting-room .RoomBox .room-head-time { display:none; }
 body.waiting-room .RoomBox .product-body { grid-template-columns:1fr; gap:12px; padding:12px !important; }
 body.waiting-room .team-selector { flex-direction:row; padding:0 0 12px !important; border-right:0 !important; border-bottom:1px solid #d7ead9 !important; overflow:auto; }
 body.waiting-room .team-button { flex:0 0 42px; width:42px !important; min-height:42px; height:42px !important; }
 body.waiting-room .room-users { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
 body.waiting-room .room-user { grid-template-columns:64px minmax(0,1fr); grid-template-rows:64px auto; min-height:104px; padding:9px !important; border-radius:16px !important; }
 body.waiting-room .room-user-image { width:64px !important; height:64px !important; }
 body.waiting-room .room-user-stat { font-size:11px; }
 body.waiting-room .room-user-ready,
 body.waiting-room .room-user-team { padding:3px 4px; }
 body.waiting-room .room-user-title { font-size:12px !important; }
}

body.waiting-room .kkutu-menu #StartBtn,
body.waiting-room .kkutu-menu #ReadyBtn {
 display:none !important;
}
body.waiting-room .RoomBox .product-body {
 display:flex !important;
 flex-direction:column;
 gap:0;
 padding:0 !important;
 overflow:hidden;
}
body.waiting-room .room-stage-actions {
 display:flex;
 gap:8px;
 padding:12px 20px 10px;
 overflow-x:auto;
 border-bottom:1px solid #e0efdf;
 background:rgba(255,255,255,.62);
}
body.waiting-room .room-stage-actions button {
 flex:0 0 auto;
 min-height:36px;
 padding:7px 14px;
 border:0;
 border-radius:999px;
 color:#315c50;
 background:#fff;
 box-shadow:0 3px 8px rgba(35,76,49,.1);
 font-weight:900;
 cursor:pointer;
}
body.waiting-room #RoomInviteAction { color:#2468b3; }
body.waiting-room #RoomBotAction { color:#52605b; }
body.waiting-room .room-stage-content {
 display:grid;
 grid-template-columns:74px minmax(0,1fr);
 flex:1;
 min-height:0;
 gap:18px;
 padding:18px 20px;
 overflow:auto;
}
body.waiting-room .room-users {
 grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important;
 gap:16px !important;
 padding:0 !important;
}
body.waiting-room .room-user,
body.waiting-room .room-user-empty {
 position:relative;
 display:block !important;
 min-height:190px !important;
 height:190px !important;
 padding:0 !important;
 border-radius:16px !important;
 overflow:hidden;
 background:linear-gradient(145deg,#e5f9e7,#bce9c9) !important;
 box-shadow:0 5px 13px rgba(30,75,44,.15) !important;
}
body.waiting-room .room-user:before {
 content:"";
 position:absolute;
 inset:0;
 background:radial-gradient(circle at 50% 10%,rgba(255,255,255,.88),transparent 48%),linear-gradient(180deg,rgba(255,255,255,.1),rgba(55,124,70,.22));
 pointer-events:none;
}
body.waiting-room .room-user-image {
 position:absolute;
 z-index:1;
 top:12px;
 left:50%;
 width:122px !important;
 height:122px !important;
 margin:0 !important;
 transform:translateX(-50%);
 filter:drop-shadow(0 8px 7px rgba(26,72,41,.19));
}
body.waiting-room .room-user-stat {
 position:absolute;
 z-index:2;
 top:10px;
 right:10px;
 display:block !important;
 width:auto !important;
 height:auto !important;
 padding:0 !important;
 font-size:12px !important;
}
body.waiting-room .room-user-stat div { display:none !important; }
body.waiting-room .room-user-stat .room-user-ready {
 display:block !important;
 min-width:0;
 padding:5px 8px !important;
 border-radius:999px;
 color:#386554;
 background:rgba(255,255,255,.86);
 box-shadow:0 2px 5px rgba(31,76,45,.1);
}
body.waiting-room .room-user-stat .room-user-team { display:none !important; }
body.waiting-room .room-user-title {
 position:absolute;
 z-index:2;
 right:0;
 bottom:0;
 left:0;
 display:flex !important;
 align-items:center;
 width:auto !important;
 min-height:49px;
 padding:9px 12px !important;
 box-sizing:border-box;
 color:#253c31;
 background:rgba(255,255,255,.82);
 backdrop-filter:blur(10px);
}
body.waiting-room .room-user-level { width:30px !important; height:30px !important; }
body.waiting-room .room-user-name { padding:6px 0 0 8px !important; font-size:14px; }
body.waiting-room .room-user:hover { transform:translateY(-3px) !important; }
body.waiting-room .room-user-empty {
 display:grid !important;
 place-items:center;
 border:2px dashed rgba(97,139,105,.24) !important;
 background:rgba(255,255,255,.42) !important;
 box-shadow:none !important;
}
body.waiting-room .room-user-empty span {
 display:grid;
 place-items:center;
 width:62px;
 height:62px;
 border-radius:50%;
 color:rgba(68,108,76,.35);
 background:rgba(255,255,255,.45);
 font-size:42px;
 font-weight:200;
}
body.waiting-room .room-stage-footer {
 display:flex;
 align-items:center;
 justify-content:flex-end;
 min-height:64px;
 padding:10px 20px;
 box-sizing:border-box;
 background:rgba(255,255,255,.72);
 border-top:1px solid #e0efdf;
}
body.waiting-room #RoomPrimaryAction {
 min-width:188px;
 min-height:48px;
 padding:10px 28px;
 border:0;
 border-radius:16px;
 color:#fff;
 background:linear-gradient(135deg,#ef786d,#d95d61);
 box-shadow:0 8px 18px rgba(180,68,72,.25);
 font-size:18px;
 font-weight:900;
 letter-spacing:.04em;
 cursor:pointer;
}

@media (max-width:800px) {
 body.waiting-room .room-stage-actions { padding:9px 12px; }
 body.waiting-room .room-stage-actions button { min-height:33px; padding:6px 11px; font-size:12px; }
 body.waiting-room .room-stage-content { display:block; padding:12px; overflow:auto; }
 body.waiting-room .team-selector { margin-bottom:12px !important; }
 body.waiting-room .room-users { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
 body.waiting-room .room-user,
 body.waiting-room .room-user-empty { min-height:145px !important; height:145px !important; }
 body.waiting-room .room-user-image { top:8px; width:88px !important; height:88px !important; }
 body.waiting-room .room-user-title { min-height:39px; padding:5px 7px !important; }
 body.waiting-room .room-user-level { width:23px !important; height:23px !important; }
 body.waiting-room .room-user-name { padding:4px 0 0 5px !important; font-size:11px; }
 body.waiting-room .room-stage-footer { min-height:56px; padding:8px 12px; }
 body.waiting-room #RoomPrimaryAction { width:100%; min-width:0; min-height:42px; font-size:16px; }
}

body[data-game-view='for-gaming'] .GameBox .product-body {
 position:relative !important;
 left:auto !important;
 top:auto !important;
 display:flex !important;
 flex-direction:column !important;
 align-items:stretch !important;
 width:min(1120px,calc(100vw - 32px)) !important;
 height:auto !important;
 min-height:0 !important;
 margin:0 auto !important;
 padding:0 0 24px !important;
 overflow:visible !important;
 transform:none !important;
}
body[data-game-view='for-gaming'] .GameBox .game-head {
 position:relative !important;
 left:auto !important;
 top:auto !important;
 width:100% !important;
 height:250px !important;
 min-height:250px !important;
 margin:0 !important;
 padding:0 !important;
 overflow:visible !important;
}
body[data-game-view='for-gaming'] .GameBox .jjoriping {
 position:absolute !important;
 left:50% !important;
 top:38px !important;
 width:500px !important;
 margin:0 !important;
 transform:translateX(-50%) !important;
}
body[data-game-view='for-gaming'] .GameBox .chain {
 position:absolute !important;
 left:calc(50% + 270px) !important;
 top:95px !important;
 margin:0 !important;
 transform:none !important;
}
body[data-game-view='for-gaming'] .GameBox .word-meaning-panel {
 position:absolute !important;
 right:0 !important;
 left:auto !important;
 top:24px !important;
 width:205px !important;
 min-height:104px !important;
 z-index:25 !important;
}
body[data-game-view='for-gaming'] .GameBox .history-holder {
 position:absolute !important;
 left:50% !important;
 top:153px !important;
 width:500px !important;
 margin:0 !important;
 transform:translateX(-50%) !important;
}
body[data-game-view='for-gaming'] .GameBox .hints {
 position:absolute !important;
 left:50% !important;
 top:201px !important;
 width:500px !important;
 margin:0 !important;
 transform:translateX(-50%) !important;
}
body[data-game-view='for-gaming'] .GameBox .game-input {
 position:relative !important;
 left:auto !important;
 top:auto !important;
 order:2 !important;
 width:min(620px,100%) !important;
 height:62px !important;
 margin:8px auto 22px !important;
 transform:none !important;
 z-index:30 !important;
}
body[data-game-view='for-gaming'] .GameBox #game-input { width:calc(100% - 70px) !important; }
body[data-game-view='for-gaming'] .GameBox .game-body {
 position:relative !important;
 left:auto !important;
 top:auto !important;
 order:3 !important;
 display:flex !important;
 justify-content:center !important;
 align-items:flex-start !important;
 width:100% !important;
 height:auto !important;
 min-height:188px !important;
 margin:0 !important;
 padding:0 12px 28px !important;
 box-sizing:border-box !important;
 transform:none !important;
}
body[data-game-view='for-gaming'] .GameBox .game-body .game-user { flex:0 0 116px !important; }
body.waiting-room .kkutu-menu #StartBtn.for-master,
body.waiting-room .kkutu-menu #ReadyBtn.for-normal {
 display:block !important;
 position:fixed !important;
 right:22px !important;
 bottom:22px !important;
 z-index:120 !important;
 min-width:132px !important;
 min-height:50px !important;
 border-radius:15px !important;
 color:#fff !important;
 font-size:18px !important;
 font-weight:900 !important;
 box-shadow:0 8px 20px rgba(62,66,43,.26) !important;
}
body[data-game-view='for-master'] #RoomPrimaryAction,
body[data-game-view='for-normal'] #RoomPrimaryAction {
 display:block !important;
 position:fixed !important;
 right:22px !important;
 bottom:22px !important;
 z-index:140 !important;
 min-width:138px !important;
 min-height:52px !important;
 margin:0 !important;
 border-radius:15px !important;
 color:#fff !important;
 background:linear-gradient(135deg,#ef786d,#d95d61) !important;
 font-size:18px !important;
 font-weight:900 !important;
 box-shadow:0 8px 20px rgba(116,46,47,.28) !important;
}
body.waiting-room #RoomStartAction,
body.waiting-room #RoomReadyAction {
 display:none !important;
 align-items:center !important;
 justify-content:center !important;
 min-width:112px !important;
 min-height:40px !important;
 margin-left:auto !important;
 padding:0 20px !important;
 border:0 !important;
 border-radius:12px !important;
 color:#fff !important;
 font-size:16px !important;
 font-weight:900 !important;
 cursor:pointer !important;
 box-shadow:0 5px 14px rgba(35,78,48,.20) !important;
}
body[data-game-view='for-master'] #RoomStartAction {
 display:inline-flex !important;
 background:linear-gradient(135deg,#ef786d,#d95d61) !important;
}
body[data-game-view='for-normal'] #RoomReadyAction {
 display:inline-flex !important;
 background:linear-gradient(135deg,#55b982,#368b65) !important;
}
body[data-game-view='for-master'] #RoomReadyAction,
body[data-game-view='for-normal'] #RoomStartAction { display:none !important; }
body[data-game-view='for-gaming'] .GameBox .chain { display:none !important; }
@font-face { font-family:'DungGeunMo'; src:url('/media/DungGeunMo.ttf') format('truetype'); font-display:swap; }
body.dunggeunmo-font, body.dunggeunmo-font input, body.dunggeunmo-font button { font-family:'DungGeunMo', sans-serif !important; }
body.dunggeunmo-font *:not(.fa) { font-family:'DungGeunMo', sans-serif !important; }
.jjo-display.dunggeunmo-font, #game-display.dunggeunmo-font, .game-display.dunggeunmo-font, .display.dunggeunmo-font { font-family:'DungGeunMo', sans-serif !important; }
.font-dunggeunmo-preview { display:flex; align-items:center; justify-content:center; background:#29426b; color:#fff; font-family:'DungGeunMo', sans-serif !important; font-size:16px; }
.ShopBox .product-body { padding:28px !important; box-sizing:border-box; }
.shop-welcome { margin-bottom:22px; color:#245942; font-size:25px; font-weight:900; }
.shop-font-card { display:flex; gap:22px; align-items:center; max-width:650px; padding:22px; border-radius:20px; background:#fff; box-shadow:0 10px 28px rgba(48,93,64,.15); }
.shop-font-preview { display:flex; align-items:center; justify-content:center; width:220px; height:130px; border-radius:15px; background:linear-gradient(135deg,#263f38,#446d5d); color:#fff; font:32px 'DungGeunMo', sans-serif; }
.shop-font-info { flex:1; }
.shop-font-info h3 { margin:0 0 8px; font-size:23px; }
.shop-font-info p { margin:0 0 14px; color:#567064; }
.shop-font-info strong { display:block; color:#d8793b; font-size:20px; }
.shop-font-info button { margin-top:12px; padding:10px 24px; border:0; border-radius:10px; background:#4ca774; color:#fff; font-weight:900; cursor:pointer; }
#ResultDiag {
 border:0 !important;
 border-radius:22px !important;
 overflow:hidden !important;
 background:linear-gradient(160deg,#f8fffb,#e5f6eb) !important;
 box-shadow:0 24px 55px rgba(30,75,47,.26) !important;
}
#ResultDiag .dialog-head { background:linear-gradient(135deg,#3d8e68,#6cc68f) !important; color:#fff !important; }
#ResultDiag .dialog-body { padding:14px !important; box-sizing:border-box; }
#ResultDiag .result-board { width:100% !important; max-height:270px; overflow:auto; }
#ResultDiag .result-board-item {
 display:grid !important;
 grid-template-columns:38px 30px minmax(0,1fr) 72px 58px !important;
 align-items:center !important;
 gap:7px !important;
 min-height:48px !important;
 margin:7px 0 !important;
 padding:5px 9px !important;
 box-sizing:border-box !important;
 border-radius:12px !important;
 background:rgba(255,255,255,.86) !important;
 box-shadow:0 3px 8px rgba(33,91,56,.09) !important;
}
#ResultDiag .result-board-item > * { float:none !important; width:auto !important; margin:0 !important; }
#ResultDiag .result-board-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:800; }
#ResultDiag .result-board-me { outline:2px solid #67bd87; background:#fff !important; }
@media (max-width:800px) {
 body[data-game-view='for-gaming'] .GameBox .product-body { width:calc(100vw - 16px) !important; }
 body[data-game-view='for-gaming'] .GameBox .game-head { height:216px !important; min-height:216px !important; }
 body[data-game-view='for-gaming'] .GameBox .jjoriping { top:30px !important; width:calc(100% - 70px) !important; max-width:430px !important; }
 body[data-game-view='for-gaming'] .GameBox .chain { left:auto !important; right:8px !important; top:78px !important; transform:scale(.78) !important; transform-origin:right center !important; }
 body[data-game-view='for-gaming'] .GameBox .word-meaning-panel { display:none !important; }
 body[data-game-view='for-gaming'] .GameBox .history-holder { top:133px !important; width:calc(100% - 22px) !important; }
 body[data-game-view='for-gaming'] .GameBox .hints { top:176px !important; width:calc(100% - 22px) !important; }
 body[data-game-view='for-gaming'] .GameBox .game-input { width:calc(100% - 10px) !important; height:56px !important; margin:4px auto 16px !important; }
 body[data-game-view='for-gaming'] .GameBox .game-body { gap:8px !important; min-height:155px !important; padding-bottom:12px !important; overflow-x:auto !important; justify-content:flex-start !important; }
 body[data-game-view='for-gaming'] .GameBox .game-body .game-user { flex:0 0 102px !important; }
 body.waiting-room .kkutu-menu #StartBtn.for-master,
 body.waiting-room .kkutu-menu #ReadyBtn.for-normal { right:12px !important; bottom:12px !important; min-width:104px !important; min-height:44px !important; font-size:15px !important; }
 body[data-game-view='for-master'] #RoomPrimaryAction,
 body[data-game-view='for-normal'] #RoomPrimaryAction { right:12px !important; bottom:12px !important; min-width:112px !important; min-height:44px !important; font-size:15px !important; }
 #ResultDiag .result-board-item { grid-template-columns:29px 24px minmax(0,1fr) 52px !important; }
 #ResultDiag .result-board-score { display:none !important; }
}

/* Brief, CSS-only eyelid overlay: body and equipment never move. */
.moremi .moremi-blink, .moremi-blink {
 position:absolute !important; inset:0; width:100% !important; height:100% !important;
 object-fit:contain !important; object-position:center bottom !important;
 pointer-events:none; opacity:0;
 animation:moremi-natural-blink 5.2s steps(1,end) infinite;
}

/* The bot sprite has less transparent edge padding than Moremi. */
.moremi-body[src*="/moremi/robot.png"] {
	transform:scale(.86);
	transform-origin:center bottom;
}
@keyframes moremi-natural-blink {
 0%,94%,98%,100% { opacity:0; }
 95%,97% { opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
 .moremi-blink { animation:none !important; opacity:0 !important; }
}

/* Every active player keeps a visible character card and live score. */
body[data-game-view='for-gaming'] .GameBox .game-body .game-user { display:grid !important; visibility:visible !important; opacity:1 !important; }
body[data-game-view='for-gaming'] .GameBox .game-body .game-user-image,
body[data-game-view='for-gaming'] .GameBox .game-body .game-user-score { display:flex !important; visibility:visible !important; opacity:1 !important; }
body[data-game-view='for-gaming'] .GameBox .game-body .game-user-score { align-items:center !important; justify-content:center !important; min-height:32px !important; color:#287c59 !important; font-weight:900 !important; }
#MyCurrentGameScore { margin-top:6px; padding:5px 8px; border-radius:9px; background:#e2f6e8; color:#27734d; font-size:13px; font-weight:900; text-align:center; }
body[data-game-view='for-gaming'] .GameBox .jjo-display { white-space:normal !important; overflow:visible !important; text-overflow:clip !important; word-break:break-all !important; overflow-wrap:anywhere !important; }
.game-replay-controller .replay-stop { background:#df6868 !important; color:#fff !important; }
@media (max-width:800px) {
 .moremi .moremi-body, .moremi-body { width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; object-fit:contain !important; object-position:center bottom !important; }
 .GameBox .game-body .game-user { flex:0 0 112px !important; }
 .GameBox .game-body .game-user-score { display:flex !important; min-height:28px !important; }
}
#ReplayBtn, #ReplayDiag { display:none !important; }
.GameBox .product-title #MyCurrentGameScore { display:inline-block !important; float:right !important; margin:5px 10px 0 0 !important; padding:5px 10px !important; border-radius:9px !important; background:#e2f6e8 !important; color:#27734d !important; font-size:14px !important; font-weight:900 !important; }
.jjoriping { position:relative; }
.jjoEyeClosed {
 position:absolute !important;
 z-index:6;
 opacity:0;
 pointer-events:none;
 transform:none !important;
 translate:none !important;
}
.jjoEyeClosedR { transform:scaleX(-1) !important; }
.jjoriping.word-transition .jjoEyeL,
.jjoriping.word-transition .jjoEyeR { animation:jjo-open-eye-hide 1.5s ease both !important; }
.jjoriping.word-transition .jjoEyeClosed { animation:jjo-close-eye 1.5s ease both !important; }
.jjoriping.word-transition .jjoDisplayBar { animation:none !important; transform:none !important; }
@keyframes jjo-close-eye { 0%,100% { opacity:0; } 10%,90% { opacity:1; } }
@keyframes jjo-open-eye-hide { 0%,100% { opacity:1; } 10%,90% { opacity:0; } }

/* Keep the player row fixed when the turn changes. */
body[data-game-view='for-gaming'] .GameBox .game-body .game-user-current { margin-top:0 !important; margin-bottom:0 !important; transform:none !important; animation:none !important; }

/* Final waiting-room layout: all controls stay inside a centered 4 x 2 board. */
body.waiting-room .kkutu-menu #SpectateBtn,
body.waiting-room .kkutu-menu #SetRoomBtn,
body.waiting-room .kkutu-menu #InviteBtn,
body.waiting-room .kkutu-menu #DictionaryBtn,
body.waiting-room .kkutu-menu #ExitBtn,
body.waiting-room .kkutu-menu #StartBtn,
body.waiting-room .kkutu-menu #ReadyBtn { display:none !important; }
body.waiting-room .RoomBox {
 position:fixed !important;
 left:50% !important;
 right:auto !important;
 top:50vh !important;
 bottom:auto !important;
 width:min(1800px,calc(100vw - 32px)) !important;
 height:min(820px,calc(100vh - 96px)) !important;
 max-width:1800px !important;
 max-height:820px !important;
 transform:translate(-50%,-50%) !important;
}
html body.waiting-room[data-game-view='for-master'] .RoomBox,
html body.waiting-room[data-game-view='for-normal'] .RoomBox {
 top:50vh !important;
 bottom:auto !important;
 transform:translate(-50%,-50%) !important;
}
body.waiting-room .RoomBox .product-body { overflow:hidden !important; }
body.waiting-room .room-stage-actions { flex:0 0 auto; align-items:center; }
body.waiting-room .room-stage-content { flex:1; min-height:0; }
body.waiting-room .room-users {
 display:grid !important;
 grid-template-columns:repeat(4,minmax(0,1fr)) !important;
 grid-template-rows:repeat(2,minmax(150px,1fr)) !important;
 align-content:stretch !important;
 height:100% !important;
 overflow:hidden !important;
}
body.waiting-room .room-user,
body.waiting-room .room-user-empty { min-height:0 !important; height:auto !important; }
body.waiting-room .room-user { order:-1; visibility:visible !important; opacity:1 !important; }
body.waiting-room .room-user-image {
 top:46% !important;
 width:150px !important;
 height:150px !important;
 transform:translate(-50%,-50%) !important;
 object-fit:contain !important;
 object-position:center !important;
}
body.waiting-room .room-stage-footer,
body.waiting-room #RoomPrimaryAction { display:none !important; }
@media(max-width:800px){
 body.waiting-room .RoomBox { top:58px !important; bottom:auto !important; width:calc(100vw - 24px) !important; height:min(680px,calc(100vh - 208px)) !important; min-height:430px !important; max-height:680px!important; transform:translateX(-50%)!important; }
 html body.waiting-room[data-game-view='for-master'] .RoomBox,
 html body.waiting-room[data-game-view='for-normal'] .RoomBox { top:58px!important; bottom:auto!important; transform:translateX(-50%)!important; }
 body.waiting-room .room-stage-content { overflow:auto !important; }
 body.waiting-room .room-users { grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-template-rows:none !important; height:auto !important; overflow:visible !important; }
 body.waiting-room .room-user,
 body.waiting-room .room-user-empty { min-height:145px !important; height:145px !important; }
 body.waiting-room .room-user-image { top:45% !important; width:104px !important; height:104px !important; }
}

/* Stable record table and lobby user rows. */
#ProfileDiag #profile-record, #ProfileDiag .profile-record-field { width:100% !important; box-sizing:border-box !important; }
#ProfileDiag .profile-record-field { display:grid !important; grid-template-columns:35% 32% 33% !important; align-items:center !important; min-height:28px !important; margin:0 !important; }
#ProfileDiag .profile-record-field > div { float:none !important; width:auto !important; text-align:center !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
.UserListBox .product-body { box-sizing:border-box !important; }
.UserListBox .users-item { display:flex !important; align-items:center !important; gap:7px !important; min-height:44px !important; box-sizing:border-box !important; }
.UserListBox .users-item > div { float:none !important; }
.UserListBox .users-image { flex:0 0 34px !important; width:34px !important; height:34px !important; }
.UserListBox .users-level { flex:0 0 20px !important; width:20px !important; height:20px !important; }
.UserListBox .users-name { flex:1 1 auto !important; min-width:0 !important; }

/* Keep account information in one clean right-side block. */
body[data-game-view='for-lobby'] .MeBox { left:0 !important; right:auto !important; z-index:8 !important; }
body[data-game-view='for-lobby'] .MeBox .my-level { white-space:nowrap !important; }

body[data-game-view='for-lobby'] .MeBox { top:48px !important; left:0 !important; right:auto !important; width:190px !important; }
body[data-game-view='for-lobby'] .MeBox .product-body { display:block !important; min-height:118px !important; }
body[data-game-view='for-lobby'] .MeBox .my-stat-name { display:block !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }

/* Lobby identity: only avatar, name, level and experience are shown. */
body[data-game-view='for-lobby'] .MeBox { width:390px !important; height:72px !important; top:12px !important; }
body[data-game-view='for-lobby'] .MeBox .my-stat-level,
body[data-game-view='for-lobby'] .MeBox .my-stat-ping { display:none !important; }
body[data-game-view='for-lobby'] .MeBox .my-image { position:absolute !important; left:8px !important; top:8px !important; }
body[data-game-view='for-lobby'] .MeBox .my-stat { position:static !important; width:auto !important; padding:0 !important; }
body[data-game-view='for-lobby'] .MeBox .my-stat-name { position:absolute !important; left:74px !important; top:7px !important; width:300px !important; height:24px !important; }
body[data-game-view='for-lobby'] .MeBox .my-level { left:74px !important; top:30px !important; }
body[data-game-view='for-lobby'] .MeBox .my-gauge { left:122px !important; top:31px !important; width:252px !important; }
body[data-game-view='for-lobby'] .MeBox .my-gauge-text { left:122px !important; top:32px !important; width:252px !important; }

/* Profile strip proportions matching the requested compact layout. */
body[data-game-view='for-lobby'] .MeBox { width:430px !important; height:78px !important; top:6px !important; }
body[data-game-view='for-lobby'] .MeBox .my-image { left:8px !important; top:10px !important; width:54px !important; height:54px !important; }
body[data-game-view='for-lobby'] .MeBox .my-stat-name { left:74px !important; top:10px !important; width:340px !important; font-size:20px !important; line-height:24px !important; }
body[data-game-view='for-lobby'] .MeBox .my-level { left:74px !important; top:41px !important; width:48px !important; font-size:11px !important; }
body[data-game-view='for-lobby'] .MeBox .my-gauge { left:124px !important; top:42px !important; width:292px !important; height:14px !important; }
body[data-game-view='for-lobby'] .MeBox .my-gauge-text { left:124px !important; top:43px !important; width:292px !important; }

/* Lift the whole lobby profile strip while preserving its internal alignment. */
body[data-game-view='for-lobby'] .MeBox { top:0 !important; }

#TutorialBtn { position:relative; }
#TutorialBtn:after { content:'처음 오셨나요?'; display:block; font-size:10px; opacity:.72; margin-top:2px; }

/* Autumn lobby contrast pass: keep the information readable over the scene. */
body[data-game-view='for-lobby'] #LobbyHeroName {
 display:inline-block !important;
 margin:8px 0 0 !important;
 padding:7px 16px !important;
 border:1px solid rgba(255,255,255,.24) !important;
 border-radius:13px !important;
 background:rgba(0,0,0,.58) !important;
 color:#fff !important;
 text-shadow:none !important;
}
body[data-game-view='for-lobby'] #LobbyHeroSub {
 color:#fff !important;
 text-shadow:0 1px 3px rgba(0,0,0,.88) !important;
}

/* The signed-in player strip stays clear at the upper-left. */
body[data-game-view='for-lobby'] .MeBox {
 left:12px !important;
 top:8px !important;
 width:420px !important;
 height:72px !important;
 border:1px solid rgba(255,255,255,.24) !important;
 border-radius:16px !important;
 background:rgba(0,0,0,.60) !important;
 box-shadow:0 8px 22px rgba(0,0,0,.25) !important;
}
body[data-game-view='for-lobby'] .MeBox .my-image { left:9px !important; top:9px !important; }
body[data-game-view='for-lobby'] .MeBox .my-stat-name {
 left:76px !important;
 top:9px !important;
 width:326px !important;
 color:#fff !important;
 text-shadow:0 1px 2px rgba(0,0,0,.8) !important;
}
body[data-game-view='for-lobby'] .MeBox .my-level {
 left:76px !important;
 top:39px !important;
 color:#fff !important;
 text-shadow:0 1px 2px rgba(0,0,0,.8) !important;
}
body[data-game-view='for-lobby'] .MeBox .my-gauge {
 left:124px !important;
 top:41px !important;
 width:278px !important;
 background:rgba(0,0,0,.48) !important;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.40) !important;
}
body[data-game-view='for-lobby'] .MeBox .my-gauge-text {
 left:124px !important;
 top:42px !important;
 width:278px !important;
 color:#fff !important;
 text-shadow:0 1px 2px rgba(0,0,0,.9) !important;
}

/* Quick menu buttons use the same dark glass treatment. */
body[data-game-view='for-lobby'] .kkutu-menu button,
body[data-game-view='for-lobby'] #QuickRoomBtn {
 border:1px solid rgba(255,255,255,.28) !important;
 background:rgba(0,0,0,.60) !important;
 color:#fff !important;
 box-shadow:0 7px 18px rgba(0,0,0,.22) !important;
 text-shadow:none !important;
}
body[data-game-view='for-lobby'] .kkutu-menu button:hover,
body[data-game-view='for-lobby'] #QuickRoomBtn:hover { background:rgba(0,0,0,.74) !important; }
body[data-game-view='for-lobby'] .kkutu-menu .toggled { color:#fff !important; background:rgba(0,0,0,.76) !important; }
body[data-game-view='for-lobby'] #QuickRoomBtn:after { color:rgba(255,255,255,.84) !important; }

/* Keep the chat and online list compact, with white player cards. */
body[data-game-view='for-lobby'] .ChatBox {
 right:18px !important;
 bottom:18px !important;
 background:rgba(0,0,0,.64) !important;
 border:1px solid rgba(255,255,255,.24) !important;
 box-shadow:0 8px 22px rgba(0,0,0,.28) !important;
}
body[data-game-view='for-lobby'] .ChatBox .product-title,
body[data-game-view='for-lobby'] .ChatBox #Chat,
body[data-game-view='for-lobby'] .ChatBox #Chat * { color:#fff !important; }
body[data-game-view='for-lobby'] .ChatBox .product-body { background:transparent !important; }
body[data-game-view='for-lobby'] .ChatBox #Talk {
 background:rgba(0,0,0,.50) !important;
 border:1px solid rgba(255,255,255,.35) !important;
 color:#fff !important;
}
body[data-game-view='for-lobby'] .ChatBox #Talk::placeholder { color:rgba(255,255,255,.66) !important; }
body[data-game-view='for-lobby'] .ChatBox #ChatBtn {
 background:rgba(0,0,0,.76) !important;
 border:1px solid rgba(255,255,255,.30) !important;
 color:#fff !important;
}
body[data-game-view='for-lobby'] .UserListBox {
 top:78px !important;
 bottom:calc(var(--kkutu-chat-height, 260px) + 38px) !important;
 height:auto !important;
 background:rgba(0,0,0,.62) !important;
 border:1px solid rgba(255,255,255,.20) !important;
 border-right:0 !important;
 box-shadow:-8px 0 22px rgba(0,0,0,.24) !important;
}
body[data-game-view='for-lobby'] .UserListBox .product-title { background:transparent !important; color:#fff !important; }
body[data-game-view='for-lobby'] .UserListBox .product-body { background:transparent !important; }
body[data-game-view='for-lobby'] .UserListBox .users-item {
 background:rgba(255,255,255,.96) !important;
 box-shadow:0 2px 8px rgba(0,0,0,.18) !important;
}
body[data-game-view='for-lobby'] .UserListBox .users-name { color:#26352c !important; }

/* Nudge the top-right signed-in control in from the edge. */
body[data-game-view='for-lobby'] #AccountBar { right:28px !important; }

@media (max-width:800px) {
 body[data-game-view='for-lobby'] .MeBox { left:8px !important; top:8px !important; width:calc(100% - 116px) !important; }
 body[data-game-view='for-lobby'] .MeBox .my-stat-name { width:calc(100% - 88px) !important; }
 body[data-game-view='for-lobby'] .MeBox .my-gauge,
 body[data-game-view='for-lobby'] .MeBox .my-gauge-text { width:calc(100% - 142px) !important; }
 body[data-game-view='for-lobby'] .UserListBox { display:none !important; }
 body[data-game-view='for-lobby'] .ChatBox { right:8px !important; bottom:8px !important; }
}

/* Lobby polish: the character, name and subtitle share one glass panel. */
body[data-game-view='for-lobby'] #LobbyHero {
 box-sizing:border-box !important;
 width:268px !important;
 height:auto !important;
 min-height:286px !important;
 padding:16px 16px 13px !important;
 border:1px solid rgba(255,255,255,.25) !important;
 border-radius:24px !important;
 background:rgba(0,0,0,.55) !important;
 box-shadow:0 14px 34px rgba(0,0,0,.28) !important;
}
body[data-game-view='for-lobby'] #LobbyHeroImage { filter:drop-shadow(0 14px 10px rgba(0,0,0,.32)) !important; }
body[data-game-view='for-lobby'] #LobbyHeroName { margin-top:5px !important; }
body[data-game-view='for-lobby'] #LobbyHeroSub {
 display:inline-block !important;
 margin-top:6px !important;
 padding:3px 10px !important;
 border-radius:999px !important;
 background:rgba(0,0,0,.42) !important;
}

/* Lift the compact identity block away from the screen edge. */
body[data-game-view='for-lobby'] .MeBox { top:4px !important; }

/* Chat is just the conversation area and input; no green title or chat badge. */
body[data-game-view='for-lobby'] .ChatBox .product-title { display:none !important; }
body[data-game-view='for-lobby'] .ChatBox .product-body { height:100% !important; }
body[data-game-view='for-lobby'] .ChatBox .product-title::before,
body[data-game-view='for-lobby'] .ChatBox .product-title::after { display:none !important; content:none !important; }

/* Float the online panel inward like the chat and soften its corners. */
body[data-game-view='for-lobby'] .UserListBox {
 right:18px !important;
 width:252px !important;
 border:1px solid rgba(255,255,255,.24) !important;
 border-radius:18px !important;
 overflow:hidden !important;
}
body[data-game-view='for-lobby'] .UserListBox .product-title {
 padding:10px 13px 7px !important;
 border-radius:0 !important;
}
body[data-game-view='for-lobby'] .UserListBox .product-body { padding:8px !important; }
body[data-game-view='for-lobby'] .UserListBox .users-item {
 margin:0 0 7px !important;
 border:1px solid rgba(255,255,255,.62) !important;
 border-radius:12px !important;
 background:rgba(255,255,255,.72) !important;
}

/* Custom tutorial book icon. */
body[data-game-view='for-lobby'] #TutorialBtn::before {
 content:'' !important;
 position:absolute !important;
 left:12px !important;
 top:50% !important;
 width:22px !important;
 height:22px !important;
 transform:translateY(-50%) !important;
 background:url('/img/custom/tutorial-icon.svg?v=20260913-1') center / contain no-repeat !important;
}
body[data-game-view='for-lobby'] #TutorialBtn::after { color:rgba(255,255,255,.72) !important; }

@media (max-width:800px) {
 body[data-game-view='for-lobby'] #LobbyHero { width:188px !important; min-height:204px !important; padding:12px 10px 10px !important; border-radius:19px !important; }
 body[data-game-view='for-lobby'] #LobbyHeroImage { width:128px !important; height:128px !important; }
 body[data-game-view='for-lobby'] #LobbyHeroName { padding:5px 10px !important; font-size:15px !important; }
 body[data-game-view='for-lobby'] #LobbyHeroSub { margin-top:4px !important; font-size:11px !important; }
 body[data-game-view='for-lobby'] .MeBox { top:2px !important; }
}

/* Keep the mobile quick match button above the chat panel. */
@media (max-width:800px) {
 body[data-game-view='for-lobby'] #QuickRoomBtn,
 body[data-game-view='for-lobby'] #QuickRoomBtn:hover,
 body[data-game-view='for-lobby'] #QuickRoomBtn:active {
  bottom:218px !important;
 }
}

/* The game utility controls use a compact, separate dark-glass group. */
body[data-game-view] #HelpBtn { display:none !important; }
body[data-game-view] #SettingBtn,
body[data-game-view] #CommunityBtn {
 top:12px !important;
 border:1px solid rgba(255,255,255,.28) !important;
 background:rgba(0,0,0,.62) !important;
 color:#fff !important;
 box-shadow:0 5px 14px rgba(0,0,0,.22) !important;
}
body[data-game-view] #SettingBtn { right:18px !important; }
body[data-game-view] #CommunityBtn { right:78px !important; }
body[data-game-view] #AccountBar {
 top:12px !important;
 right:138px !important;
 max-width:calc(100vw - 212px) !important;
}
body[data-game-view] #AccountBar button {
 border:1px solid rgba(255,255,255,.28) !important;
 border-radius:12px !important;
 background:rgba(0,0,0,.62) !important;
 color:#fff !important;
 box-shadow:0 5px 14px rgba(0,0,0,.22) !important;
}
#TutorialOverlay { position:fixed; inset:0; z-index:100500; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(25,46,32,.55); }
#TutorialOverlay section { width:min(390px,100%); padding:28px; border-radius:20px; background:#fffef7; box-shadow:0 20px 60px rgba(0,0,0,.25); text-align:center; }
#TutorialOverlay h2 { margin:0 0 12px; color:#285c42; } #TutorialOverlay p { min-height:72px; margin:0 0 20px; line-height:1.7; color:#405247; }
#TutorialOverlay button { border:0; border-radius:12px; padding:11px 28px; background:#6fcf7d; color:#fff; font-weight:800; cursor:pointer; }

/* Full-screen autumn intro artwork */
#Intro {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100vw !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background: #e57b35 !important;
}
#Intro #intro {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
#Intro #version { display: none !important; }
#Intro #intro-text {
  position: absolute !important;
  top: auto !important;
  bottom: 22px !important;
  left: 50% !important;
  width: auto !important;
  max-width: calc(100% - 32px) !important;
  transform: translateX(-50%) !important;
  padding: 8px 14px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-shadow: 0 1px 3px rgba(47, 23, 9, .8) !important;
  border-radius: 999px !important;
  background: rgba(55, 28, 13, .42) !important;
}
#Loading, #Loading.game-data-loading {
  padding-top: 0 !important;
  background: #e57b35 url('/img/custom/intro-desktop.png?v=20260913-intro-2') center center / cover no-repeat !important;
  color: transparent !important;
  text-shadow: none !important;
}
@media (max-width: 767px) {
  #Loading, #Loading.game-data-loading {
    background-image: url('/img/custom/intro-mobile.png?v=20260913-intro-1') !important;
  }
  #Intro #intro-text { bottom: 18px !important; font-size: 13px !important; }
}

/* On desktop fullscreen browsers, keep the OS taskbar unobscured. */
@media (pointer: fine) {
  #Intro, #Loading, #Loading.game-data-loading {
    height: var(--kkutu-desktop-available-height, 100dvh) !important;
  }
}



/* Guest nickname is entered in the lobby, never through a browser prompt. */
#GuestNameEntry { position:fixed; z-index:32; left:12px; top:88px; display:flex; align-items:center; gap:6px; max-width:calc(100vw - 24px); padding:8px; border:1px solid #cbe9d2; border-radius:12px; background:rgba(255,255,255,.94); box-shadow:0 8px 22px rgba(35,79,46,.14); color:#24533a; font-size:12px; font-weight:800; }
#GuestNameEntry label { white-space:nowrap; }
#GuestNameInput { width:116px; min-width:0; height:30px; padding:0 8px; border:1px solid #b9dcc3; border-radius:8px; outline:0; color:#23432f; font:inherit; background:#fff; }
#GuestNameInput:focus { border-color:#55ae72; box-shadow:0 0 0 3px rgba(85,174,114,.15); }
#GuestNameSave { height:30px; border:0; border-radius:8px; padding:0 10px; background:#65c985; color:#fff; font:inherit; font-weight:900; cursor:pointer; }
#GuestNameHint { max-width:130px; color:#5d8170; font-size:11px; line-height:1.2; }
@media(max-width:767px) { #GuestNameEntry { top:178px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 20px); } #GuestNameHint { display:none; } }


/* Autumn artwork for the game lobby. */
body[data-game-view='for-lobby'] { background:#342012 url('/img/custom/lobby-desktop.png?v=20260913-lobby-1') center / cover fixed no-repeat !important; }
body[data-game-view='for-lobby'] #Middle, body[data-game-view='for-lobby'] #Jungle { background:transparent !important; }
body[data-game-view='for-lobby']::before { content:''; position:fixed; inset:0; z-index:-1; background:rgba(25,19,12,.12); pointer-events:none; }
/* The guest setup blocks all game controls until a name has been set. */
body.guest-name-locked #GuestNameEntry { position:fixed !important; inset:0 !important; z-index:2147483600 !important; display:flex !important; flex-direction:column; justify-content:center; align-items:center; gap:13px; max-width:none !important; width:100vw !important; height:100dvh !important; padding:28px !important; border:0 !important; border-radius:0 !important; color:#fff !important; background:rgba(20,15,10,.60) !important; box-shadow:none !important; backdrop-filter:blur(5px); font-size:19px !important; }
body.guest-name-locked #GuestNameEntry::before { content:'손님 이름 설정'; font-size:36px; font-weight:900; letter-spacing:-2px; text-shadow:0 2px 7px #000; }
body.guest-name-locked #GuestNameEntry::after { content:'이름을 정하면 게임을 시작할 수 있어요.'; order:1; margin-top:-7px; color:#fff8df; font-size:15px; font-weight:700; }
body.guest-name-locked #GuestNameEntry label { font-size:17px !important; }
body.guest-name-locked #GuestNameInput { order:2; width:min(330px,86vw) !important; height:48px !important; text-align:center; font-size:18px !important; }
body.guest-name-locked #GuestNameSave { order:3; width:min(330px,86vw); height:48px !important; border-radius:12px !important; font-size:17px !important; background:#ef9b2e !important; box-shadow:0 8px 18px rgba(0,0,0,.3); }
body.guest-name-locked #GuestNameHint { order:4; min-height:20px; max-width:86vw; color:#fff8df !important; font-size:13px !important; }
@media(max-width:767px) { body[data-game-view='for-lobby'] { background-image:url('/img/custom/lobby-mobile.png?v=20260913-lobby-1') !important; background-position:center !important; } body.guest-name-locked #GuestNameEntry::before { font-size:30px; } }

/* Chuseok server: Yut board */
#YutBoard{position:relative;width:min(880px,94vw);margin:0 auto 14px;padding:18px 24px;border:1px solid rgba(255,255,255,.32);border-radius:22px;background:rgba(0,0,0,.64);color:#fff;box-sizing:border-box;box-shadow:0 14px 38px rgba(0,0,0,.32)}
#YutBoard header,#YutBoard .yut-score{display:flex;align-items:center;justify-content:space-between;gap:14px}
#YutBoard header b{font-size:22px}#YutBoard .yut-track{position:relative;width:min(610px,72vw);aspect-ratio:1;margin:18px auto 20px;border-radius:18px;background:rgba(235,210,150,.13)}
#YutBoard .yut-lines{position:absolute;inset:8%;width:84%;height:84%;overflow:visible}#YutBoard .yut-lines path{fill:none;stroke:rgba(255,244,211,.62);stroke-width:1.8;vector-effect:non-scaling-stroke}
#YutBoard .yut-center-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:rgba(255,244,211,.78);font-size:34px;line-height:1}
#YutBoard .yut-track i{position:absolute;width:42px;height:42px;transform:translate(-50%,-50%);border:2px solid rgba(255,244,211,.72);border-radius:50%;display:flex;align-items:center;justify-content:center;background:#40372f;box-shadow:0 3px 9px rgba(0,0,0,.4);font-style:normal;z-index:2}
#YutBoard .yut-track i small{font-size:10px;color:#fff;white-space:nowrap}#YutBoard .yut-track i.yut-corner{width:54px;height:54px;background:#5a4939}
#YutBoard .yut-piece{position:absolute;inset:3px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-style:normal;font-weight:800;font-size:10px;z-index:3}
#YutBoard .team-1{background:#e85f91}#YutBoard .team-2{background:#f5c94b}
@media(max-width:800px){#YutBoard{width:96vw;padding:12px;margin-bottom:8px}#YutBoard header{align-items:flex-start;flex-direction:column;gap:4px}#YutBoard header b{font-size:18px}#YutBoard .yut-track{width:min(82vw,430px);margin:12px auto 16px}#YutBoard .yut-track i{width:29px;height:29px;border-width:1px}#YutBoard .yut-track i.yut-corner{width:36px;height:36px}#YutBoard .yut-track i small{font-size:8px}#YutBoard .yut-center-mark{font-size:24px}}
#YutChoice{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.42);backdrop-filter:blur(5px)}
#YutChoice .yut-choice-card{width:min(520px,92vw);padding:26px;border:1px solid rgba(255,255,255,.3);border-radius:22px;background:rgba(20,18,17,.94);box-shadow:0 20px 60px rgba(0,0,0,.48);color:#fff;text-align:center}#YutChoice b{font-size:22px}#YutChoice p{margin:8px 0 20px;color:rgba(255,255,255,.72)}
#YutChoice .yut-choice-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#YutChoice button{min-height:54px;padding:10px 14px;border:1px solid rgba(255,255,255,.28);border-radius:14px;background:linear-gradient(145deg,rgba(232,95,145,.82),rgba(90,48,70,.88));color:#fff;font-weight:800;font-size:15px;cursor:pointer}#YutChoice button:hover{transform:translateY(-2px);filter:brightness(1.12)}
@media(max-width:600px){#YutChoice .yut-choice-card{padding:20px 16px}#YutChoice .yut-choice-buttons{grid-template-columns:1fr}#YutChoice b{font-size:18px}}

/* The classic player strip is only 190px tall. Yut needs its own full-height
   stage so the board remains visible instead of being scrolled inside it. */
body.yut-mode[data-game-view='for-gaming'] .GameBox{overflow-y:auto!important;overflow-x:hidden!important}
body.yut-mode[data-game-view='for-gaming'] .GameBox .game-body{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;align-items:flex-start!important;padding-bottom:24px!important}
body.yut-mode[data-game-view='for-gaming'] #YutBoard{flex:0 1 780px;width:min(780px,calc(100% - 320px));margin:0 14px 0 0}
body.yut-mode[data-game-view='for-gaming'] #YutBoard .yut-track{width:min(550px,72vw);margin:12px auto 16px}
body.yut-mode[data-game-view='for-gaming'] #YutBoard .yut-lines{inset:0;width:100%;height:100%}
@media(max-width:800px){body.yut-mode[data-game-view='for-gaming'] .GameBox .game-body{flex-wrap:wrap!important;justify-content:center!important;overflow:visible!important}body.yut-mode[data-game-view='for-gaming'] #YutBoard{flex:0 0 100%;width:100%;margin:0 0 12px}body.yut-mode[data-game-view='for-gaming'] #YutBoard .yut-track{width:min(78vw,430px)}}
@media(min-width:801px) and (max-height:900px){
 body.yut-mode[data-game-view='for-gaming'] .GameBox .game-head{height:110px!important;min-height:110px!important}
 body.yut-mode[data-game-view='for-gaming'] .GameBox .game-body{top:180px!important}
 body.yut-mode[data-game-view='for-gaming'] .GameBox .jjoriping{top:8px!important;transform:translateX(-50%) scale(.62)!important;transform-origin:top center!important}
 body.yut-mode[data-game-view='for-gaming'] .GameBox .word-meaning-panel{top:5px!important;max-height:100px!important;overflow:auto!important}
 body.yut-mode[data-game-view='for-gaming'] .GameBox .history-holder,body.yut-mode[data-game-view='for-gaming'] .GameBox .hints{display:none!important}
 body.yut-mode[data-game-view='for-gaming'] .GameBox .game-input{height:54px!important;margin:4px auto 12px!important}
 body.yut-mode[data-game-view='for-gaming'] #YutBoard{flex:0 1 500px!important;width:min(500px,calc(100% - 320px))!important;padding:10px 14px!important}
 body.yut-mode[data-game-view='for-gaming'] #YutBoard header b{font-size:18px!important}
 body.yut-mode[data-game-view='for-gaming'] #YutBoard .yut-track{width:min(380px,72vw,calc(100dvh - 340px),calc(100% - 28px));margin:8px auto!important;left:50%;transform:translateX(-50%)}
 body.yut-mode[data-game-view='for-gaming'] .ChatBox{left:auto!important;right:12px!important;bottom:8px!important;width:260px!important}
}

/* Yut uses real diagonal stops and one token for each piece in a stack. */
#YutBoard .yut-track i.yut-diagonal{width:27px;height:27px;background:#6a5540;border-color:#f7dda1}
#YutBoard .yut-track i.yut-diagonal.yut-corner{width:35px;height:35px;background:#775a3a}
#YutBoard .yut-stack{position:absolute;inset:-3px;z-index:4;display:flex;align-content:center;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px;background:transparent!important;pointer-events:none}
#YutBoard .yut-stack .yut-token,#YutBoard .yut-finished .yut-token{width:15px;height:15px;flex:none;border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 2px 5px rgba(0,0,0,.45)}
#YutBoard .yut-stack.team-1 .yut-token,#YutBoard .yut-finished .yut-token.team-1{background:#f078a4}
#YutBoard .yut-stack.team-2 .yut-token,#YutBoard .yut-finished .yut-token.team-2{background:#ffdc59}
#YutBoard .yut-score>span{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-weight:800}
#YutBoard .yut-finished{display:inline-flex;align-items:center;gap:3px;min-height:17px;font-style:normal;background:transparent}
#YutBoard .yut-throw{position:absolute;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);width:190px;height:145px;border:1px solid rgba(255,231,180,.55);border-radius:22px;background:rgba(29,20,15,.94);box-shadow:0 14px 30px rgba(0,0,0,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;pointer-events:none}
#YutBoard .yut-sticks{display:flex;align-items:center;justify-content:center;gap:10px}#YutBoard .yut-throw strong{position:absolute;left:0;right:0;bottom:12px;text-align:center;color:#ffe093;font-size:25px;opacity:0;transform:scale(.65);transition:.25s ease}#YutBoard .yut-throw.show-result strong{opacity:1;transform:scale(1)}
#YutBoard .yut-throw span{width:20px;height:65px;border-radius:10px;background:linear-gradient(90deg,#a77b47,#f9d18a 38%,#d29b56);border:2px solid #ffe0a3;box-shadow:0 4px 8px rgba(0,0,0,.35);animation:yut-stick-throw 1.1s cubic-bezier(.2,.65,.24,1) both}
#YutBoard .yut-throw span:nth-child(2){animation-delay:.07s}#YutBoard .yut-throw span:nth-child(3){animation-delay:.13s}#YutBoard .yut-throw span:nth-child(4){animation-delay:.2s}
@keyframes yut-stick-throw{0%{transform:translateY(54px) rotate(-45deg);opacity:0}40%{transform:translateY(-43px) rotate(190deg);opacity:1}75%{transform:translateY(8px) rotate(340deg)}100%{transform:translateY(0) rotate(360deg)}}
#ResultDiag .result-board.yut-team-results{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:none}
#ResultDiag .yut-team-result{display:flex;align-items:center;justify-content:center;gap:12px;min-height:90px;border:1px solid rgba(255,255,255,.3);border-radius:15px;color:#fff;background:rgba(0,0,0,.55);font-size:20px}
#ResultDiag .yut-team-result-piece{width:26px;height:26px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px #0006}
#ResultDiag .yut-team-result.team-1 .yut-team-result-piece{background:#f078a4}
#ResultDiag .yut-team-result.team-2 .yut-team-result-piece{background:#ffdc59}
#ResultDiag .yut-team-result.is-winner{outline:2px solid #e6c274}
#ResultDiag .yut-team-result b{font-size:25px}
@media(max-width:800px){#YutBoard .yut-track i.yut-diagonal{width:22px;height:22px}#YutBoard .yut-track i.yut-diagonal.yut-corner{width:27px;height:27px}#YutBoard .yut-stack .yut-token{width:11px;height:11px;border-width:1px}#ResultDiag .yut-team-result{font-size:14px;min-height:72px;gap:5px}#ResultDiag .yut-team-result b{font-size:18px}}
@media(prefers-reduced-motion:reduce){#YutBoard .yut-throw span{animation:none}}
.yut-admin-roll{position:absolute;z-index:20;right:14px;top:12px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}.yut-admin-roll .yut-admin-toggle{padding:7px 11px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(0,0,0,.68);color:#fff;font-weight:800;cursor:pointer}.yut-admin-options{display:none;grid-template-columns:repeat(3,48px);gap:5px;padding:8px;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(10,10,10,.9);box-shadow:0 8px 22px rgba(0,0,0,.35)}.yut-admin-roll.is-open .yut-admin-options{display:grid}.yut-admin-options button{height:34px;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:#292929;color:#fff;font-weight:800;cursor:pointer}.yut-admin-options button:hover,.yut-admin-options button.is-selected{border-color:#ff78ad;background:#7c294c}.yut-admin-roll small{display:none;padding:4px 8px;border-radius:8px;background:rgba(0,0,0,.75);color:#ffd4e5;font-weight:700}.yut-admin-roll.is-open small{display:block}@media(max-width:800px){.yut-admin-roll{right:8px;top:8px}.yut-admin-roll .yut-admin-toggle{padding:6px 9px;font-size:11px}.yut-admin-options{grid-template-columns:repeat(3,42px)}.yut-admin-options button{height:30px;font-size:11px}}

/* Make the player's Ping balance visible at a glance. */
#AccountBar .my-stat-ping{position:relative!important;display:block;float:none!important;box-sizing:border-box;min-width:82px;width:max-content!important;min-height:34px;margin:0!important;padding:5px 12px 5px 39px!important;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:#132342!important;box-shadow:0 5px 14px rgba(0,0,0,.3);color:#fff!important;font-size:17px;font-weight:900;line-height:22px;white-space:nowrap;text-align:left}
#AccountBar .my-stat-ping:before{content:'C';position:absolute;left:6px;top:4px;display:grid;width:26px;height:26px;place-items:center;border-radius:50%;background:#ffad25;color:#fff;font-size:16px;font-weight:900;line-height:26px;box-shadow:inset 0 -2px 0 rgba(174,99,0,.25)}
@media(max-width:800px){#AccountBar .my-stat-ping{min-width:76px;padding-right:9px!important;font-size:14px}}
.fa-pencil{display:none!important}
/* The legacy level sprite looks like a pencil at small sizes; keep textual levels only. */
.users-level,.game-user-level,.room-user-level,.profile-level,.rip-level,.my-stat-level{display:none!important}

/* Daily quests */
#DailyQuestBtn{background:rgba(0,0,0,.68)!important;color:#fff!important}
#DailyQuestOverlay{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px)}
.daily-quest-panel{position:relative;width:min(620px,94vw);padding:28px;border:1px solid rgba(255,255,255,.28);border-radius:24px;background:rgba(20,18,17,.94);box-shadow:0 24px 70px rgba(0,0,0,.55);color:#fff;box-sizing:border-box}
.daily-quest-panel header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;padding-right:36px}.daily-quest-panel h2{margin:0 0 5px;font-size:27px}.daily-quest-panel header p{margin:0;color:rgba(255,255,255,.68);font-size:13px}.daily-quest-money{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.12);white-space:nowrap;color:#ffe7a6}
.daily-quest-close{position:absolute;right:17px;top:16px;width:36px;height:36px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:23px;cursor:pointer}
.daily-quest-list{display:grid;gap:11px}.daily-quest-card{padding:16px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(255,255,255,.07)}.daily-quest-card.is-complete{border-color:rgba(247,202,91,.72);background:rgba(247,202,91,.12)}
.daily-quest-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.daily-quest-card strong{display:block;margin-bottom:4px;font-size:16px}.daily-quest-card p{margin:0;color:rgba(255,255,255,.7);font-size:13px}.daily-quest-reward{display:inline-flex!important;align-items:center;min-height:30px;padding:0 11px;border:1px solid rgba(255,214,110,.55);border-radius:999px;background:rgba(255,190,55,.14);font-weight:900;color:#ffd66e!important;white-space:nowrap}.daily-quest-progress{height:8px;margin:13px 0 6px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.14)}.daily-quest-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#69d78c,#d8ef77)}.daily-quest-card.is-complete .daily-quest-progress i{background:#f2c85d}.daily-quest-card small{color:rgba(255,255,255,.76)}
.daily-quest-login{padding:38px 18px;border:1px dashed rgba(255,255,255,.24);border-radius:15px;text-align:center;color:rgba(255,255,255,.8)}.daily-quest-panel footer{margin-top:17px;color:rgba(255,255,255,.55);font-size:12px;text-align:center}
@media(max-width:600px){#DailyQuestOverlay{padding:10px}.daily-quest-panel{padding:22px 15px}.daily-quest-panel header{display:block}.daily-quest-panel h2{font-size:23px}.daily-quest-money{display:inline-block;margin-top:12px}.daily-quest-card-head{align-items:flex-start}.daily-quest-card{padding:14px 12px}.daily-quest-reward{font-size:12px}}

#DailySpinBtn{background:rgba(0,0,0,.68)!important;color:#fff!important}
#DailySpinOverlay{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:14px;background:#000a;backdrop-filter:blur(7px)}
.daily-spin-card{position:relative;width:min(440px,96vw);padding:24px 20px 28px;border:1px solid #ffffff55;border-radius:22px;background:#1c1919f5;color:#fff;text-align:center;box-shadow:0 20px 60px #0009;box-sizing:border-box}
.daily-spin-card h2{margin:0;font-size:25px}.daily-spin-card p{margin:5px 0 14px;color:#fffd;font-size:13px}.daily-spin-close{position:absolute;right:12px;top:12px;width:32px;height:32px;border:1px solid #fff7;border-radius:50%;background:#0008;color:#fff;font-size:22px;cursor:pointer}
.daily-spin-stage{position:relative;width:280px;height:290px;margin:auto}.daily-spin-wheel{position:absolute;left:0;top:10px;width:280px;height:280px;border:7px solid #ffe6a6;border-radius:50%;background:conic-gradient(#e9a75f 0 45deg,#a83751 45deg 90deg,#6185c2 90deg 135deg,#b88ac8 135deg 180deg,#3e9f81 180deg 225deg,#d6bb54 225deg 270deg,#dd795b 270deg 315deg,#728eb6 315deg 360deg);box-shadow:0 8px 25px #0008;transition:transform 4.5s cubic-bezier(.13,.69,.12,1)}.daily-spin-wheel b{position:absolute;left:50%;top:50%;font-size:17px;text-shadow:0 2px 3px #000b}.daily-spin-pointer{position:absolute;left:50%;top:-4px;z-index:2;transform:translateX(-50%);font-size:32px;color:#fff1a1;text-shadow:0 2px 7px #000}.daily-spin-center{position:absolute;left:50%;top:calc(50% + 10px);transform:translate(-50%,-50%);width:68px;height:68px;display:grid;place-items:center;border:5px solid #fff2ba;border-radius:50%;background:#3e2a32;color:#fff;font-size:23px;font-weight:900;box-shadow:0 3px 10px #0008;pointer-events:none}.daily-spin-message{min-height:24px;margin:12px 0;color:#ffe69e;font-weight:800}.daily-spin-button{width:100%;min-height:48px;border:1px solid #fff8;border-radius:12px;background:#a43c57;color:#fff;font-size:17px;font-weight:900;cursor:pointer}.daily-spin-button:disabled{opacity:.55;cursor:default}
@media(max-width:380px){.daily-spin-stage{transform:scale(.86);transform-origin:center top;height:256px}}

/* Event outfit layers. The supplied hanbok art is aligned over the mascot,
   while the kite sits on its right without occupying a hand slot. */
.moremi-chuseok-hanbok{position:absolute!important;z-index:5!important;left:0!important;top:20%!important;width:100%!important;height:100%!important;object-fit:contain;pointer-events:none}
.moremi-chuseok-kite{position:absolute!important;z-index:3!important;left:74%!important;top:4%!important;width:58%!important;height:85%!important;object-fit:contain;pointer-events:none}
#LobbyHeroImage .moremi-chuseok-hanbok{top:20%!important}
#LobbyHeroImage .moremi-chuseok-kite{left:74%!important;top:4%!important}

/* Keep the permanent font offer and loaded character items visible together. */
#shop-shelf .shop-goods-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;align-content:start;margin-top:16px}
#shop-shelf .shop-goods-list .goods{float:none!important;display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;width:auto!important;height:auto!important;min-height:82px;margin:0!important;padding:10px!important;box-sizing:border-box;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:rgba(0,0,0,.48);color:#fff;box-shadow:none}
#shop-shelf .shop-goods-list .goods:hover{background:rgba(255,255,255,.16)}
#shop-shelf .shop-goods-list .goods-image{grid-row:1/3;width:58px;height:58px;margin:0;background-size:contain;background-position:center;background-repeat:no-repeat}
#shop-shelf .shop-goods-list .goods-title,#shop-shelf .shop-goods-list .goods-cost{width:auto;margin:0;color:#fff;min-width:0}
#shop-shelf .shop-goods-list .goods-cost{color:#ffe29b;font-weight:800}
#shop-shelf .shop-status{margin:16px 0;padding:15px;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(0,0,0,.4);color:#fff}
#shop-shelf .shop-status button{margin-left:10px;padding:6px 12px;border:1px solid #fff8;border-radius:8px;background:#ffffff24;color:#fff;cursor:pointer}
@media(max-width:580px){#shop-shelf .shop-goods-list{grid-template-columns:1fr 1fr;gap:8px}#shop-shelf .shop-goods-list .goods{grid-template-columns:42px minmax(0,1fr);column-gap:7px;min-height:70px;padding:7px!important}#shop-shelf .shop-goods-list .goods-image{width:42px;height:42px}#shop-shelf .shop-goods-list .goods-title{font-size:12px}#shop-shelf .shop-goods-list .goods-cost{font-size:11px}}

#shop-shelf .shop-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;align-items:stretch}
#shop-shelf .shop-card-grid .shop-font-card{display:flex;flex-direction:column;align-items:stretch;gap:12px;max-width:none;min-width:0;margin:0;padding:16px;box-sizing:border-box;border:1px solid rgba(255,255,255,.25);border-radius:18px;background:rgba(0,0,0,.45);color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.18)}
#shop-shelf .shop-card-grid .shop-font-preview,#shop-shelf .shop-card-grid .shop-item-preview{display:grid;place-items:center;width:100%;height:150px;overflow:hidden;border-radius:12px;background:rgba(0,0,0,.38)}
#shop-shelf .shop-card-grid .shop-item-preview img{display:block;max-width:95%;max-height:145px;object-fit:contain}
#shop-shelf .shop-card-grid .shop-font-info{display:flex;flex:1;flex-direction:column;align-items:flex-start;min-width:0}
#shop-shelf .shop-card-grid .shop-font-info h3{font-size:20px;color:#fff}
#shop-shelf .shop-card-grid .shop-font-info p{flex:1;color:rgba(255,255,255,.78)}
#shop-shelf .shop-card-grid .shop-font-info strong{color:#ffe29b}
#shop-shelf .shop-card-grid .shop-font-info button{min-width:90px;margin-top:12px;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.4)}
@media(max-width:650px){#shop-shelf .shop-card-grid{grid-template-columns:1fr;gap:10px}#shop-shelf .shop-card-grid .shop-font-card{flex-direction:row;align-items:center;padding:12px;min-height:122px}#shop-shelf .shop-card-grid .shop-font-preview,#shop-shelf .shop-card-grid .shop-item-preview{flex:0 0 105px;width:105px;height:105px}#shop-shelf .shop-card-grid .shop-item-preview img{max-height:102px}#shop-shelf .shop-card-grid .shop-font-info h3{font-size:17px}#shop-shelf .shop-card-grid .shop-font-info p{font-size:12px;margin-bottom:7px}}

/* Three offers share a row on desktop; narrow screens can swipe across them. */
#shop-shelf .shop-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#shop-shelf .shop-card-grid .shop-font-card{width:100%;min-width:0}
#shop-shelf .shop-card-grid .shop-font-preview{font-size:clamp(19px,2vw,28px)}
@media(min-width:701px) and (max-width:1100px){#shop-shelf .shop-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
 .ShopBox .product-body{padding:12px!important}
 #shop-shelf .shop-card-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(190px,68vw);gap:10px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;padding:2px 2px 12px}
 #shop-shelf .shop-card-grid .shop-font-card{flex-direction:column;align-items:stretch;min-height:270px;padding:12px;scroll-snap-align:start}
 #shop-shelf .shop-card-grid .shop-font-preview,#shop-shelf .shop-card-grid .shop-item-preview{flex:none;width:100%;height:110px}
 #shop-shelf .shop-card-grid .shop-item-preview img{max-height:108px}
 #shop-shelf .shop-card-grid .shop-font-info h3{font-size:17px}
 #shop-shelf .shop-card-grid .shop-font-info p{font-size:12px;line-height:1.4}
 #shop-shelf .shop-card-grid .shop-font-info button{width:100%}
}