/* Keep the game shell with the game, independently of the main site's cached styles. */
.room-game { display: flex; flex-direction: column; background: #283444; color: #fff0d5; cursor: default; font-family: var(--sans, sans-serif); }
.rg-hud { box-sizing: border-box; height: 44px; flex: none; display: flex; align-items: center; gap: 9px; padding: 5px 13px; border-bottom: 1px solid #ffffff13; background: #283444; }
.rg-level { width: 27px; height: 28px; display: grid; place-items: center; flex: none; border: 1px solid #a6c2aa60; border-radius: 5px; background: #3c5657; color: #cee1bc; font: 700 14px/1 ui-monospace, monospace; box-shadow: inset 0 -3px #22343a40; }
.rg-title { display: grid; gap: 3px; font-size: 12px; line-height: 1.1; font-weight: 700; }
.rg-title small { display: block; font-size: 9px; line-height: 1.2; font-weight: 400; color: #bdccce; }
.rg-score { margin-left: auto; flex: none; display: grid; gap: 2px; text-align: right; }
.rg-stars { display: flex; gap: 5px; justify-content: flex-end; }
.rg-stars i { font: 16px/1 ui-monospace, monospace; font-style: normal; color: #6d7d86; }
.rg-stars i.found { color: #ffda83; text-shadow: 0 0 8px #ffd87930; }
.rg-count { color: #c2cdd0; font: 9px/1.2 ui-monospace, monospace; }
.rg-canvas { display: block; width: 100%; height: 244px; flex: none; image-rendering: pixelated; cursor: crosshair; touch-action: pan-y; outline: none; }
.rg-canvas:focus-visible { outline: 2px solid #ffd879; outline-offset: -4px; }
.rg-controls { box-sizing: border-box; flex: 1; min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 5px 13px; border-top: 1px solid #ffffff13; background: #283444; }
.rg-keys { flex: none; display: grid; grid-template-columns: repeat(3, 11px); gap: 2px; }
.rg-keys kbd { box-sizing: border-box; display: grid; place-items: center; height: 11px; border: 1px solid #8c9a9d60; border-bottom-width: 2px; border-radius: 2px; background: #3b4c59; color: #cfdbd9; font: 8px/1 ui-monospace, monospace; }
.rg-keys kbd:first-child { grid-column: 2; }
.rg-keys kbd:nth-child(2) { grid-column: 1; }
.rg-hint { display: grid; gap: 3px; font-size: 10px; line-height: 1.1; }
.rg-hint b { font-weight: 650; color: #e1e7d9; }
.rg-hint small { display: block; color: #b3c3c9; font-size: 9px; line-height: 1.1; }
.rg-play { box-sizing: border-box; flex: none; margin-left: auto; min-width: 87px; height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px; border: 1px solid #ffe2a2; border-bottom: 3px solid #bc914a; border-radius: 5px; background: #f7d489; color: #303b42; font: 750 10px/1 var(--sans, sans-serif); cursor: pointer; }
.rg-play:hover { background: #ffe3a5; }
.rg-play:active { translate: 0 1px; }
.rg-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }