[hidden] { display: none !important; }
* { letter-spacing: 0; }
button, input, textarea { font: inherit; box-sizing: border-box; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid #ec9900; outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#room-panel { background-image: url('../images/green-bg.png'); overflow-y: auto; }
.room-brand { margin: 72px 16px 48px; text-align: center; }
.room-brand h1 { font-size: 48px; color: #ecf0f1; }
.room-entry { width: min(440px, calc(100% - 32px)); margin: auto; color: #fff; }
.room-entry button, #room-return { padding: 12px 20px; border: 1px solid #777; border-radius: 4px; background: #ecf0f1; color: #231806; }
#room-create { width: 100%; background: #ec9900; border-color: #ec9900; }
#room-join-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 32px; }
#room-join-form label { grid-column: 1 / -1; }
#room-address { min-width: 0; width: 100%; padding: 10px; border: 1px solid #777; border-radius: 4px; }
#room-status { min-height: 48px; overflow-wrap: anywhere; }
#room-toolbar { position: absolute; z-index: 3; inset: 0 0 auto; min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f3f5f4; border-bottom: 1px solid #bdc6c3; box-sizing: border-box; }
#room-toolbar button { min-height: 34px; padding: 4px 10px; border: 1px solid #aab4b1; border-radius: 3px; background: #fff; white-space: nowrap; }
#room-role { font-size: 13px; }
#room-invite { flex: 1; min-width: 80px; max-width: 500px; height: 34px; padding: 4px 8px; border: 1px solid #aab4b1; border-radius: 3px; }
#host-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#puzzle-file { max-width: 180px; font-size: 12px; }
#login-panel { padding-top: 56px; box-sizing: border-box; overflow-y: auto; }
#login-panel > header { margin: 48px 16px 32px; }
#lp-nick { margin-bottom: 20px; max-width: calc(100% - 32px); }
#lp-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; height: auto; max-width: 800px; margin: 0 auto; padding: 12px; line-height: normal; }
#lp-logos .logo-choice { display: grid; place-items: center; flex: 0 0 72px; width: 72px; height: 80px; padding: 4px; background: transparent; border: 3px solid transparent !important; border-radius: 4px; }
#lp-logos .logo-choice.myMonster { border-color: inherit !important; background: rgba(255, 255, 255, .2); }
#lp-logos .logo-choice img, #lp-logos .logo-choice img:hover { width: 60px; max-height: 68px; object-fit: contain; border: 0; border-radius: 0; }
#lp-start-btn { margin: 20px 0 32px; }
#game-panel { top: auto; height: calc(100% - 56px); display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(140px, 200px); grid-template-rows: minmax(0, 1fr) 100px; }
#gs-chat { grid-column: 1; grid-row: 1 / 3; }
#gs-grid-container { grid-column: 2; grid-row: 1 / 3; min-width: 0; min-height: 0; }
#gs-scores { grid-column: 3; grid-row: 1; }
#ig-infos { grid-column: 3; grid-row: 2; }
#gs-chat, #gs-grid-container, #gs-scores, #ig-infos { float: none; width: 100% !important; height: 100%; }
#gs-scores { display: flex; flex-direction: column; overflow-y: auto; }
#gs-scores .playerScore { flex: 0 0 90px; width: 100%; min-height: 90px; border-bottom: 1px solid rgba(255, 255, 255, .25); }
#gs-scores .playerScore > img { position: absolute; top: 18px; left: 8px; width: 40px; height: 40px; object-fit: contain; }
#gs-scores .playerScore > footer { top: 16px; left: 58px; width: calc(100% - 62px); height: auto; text-align: left; }
#gs-scores .score-bar { left: 8px; bottom: 8px; height: 4px !important; width: calc(var(--progress, 0) * 1%); max-width: calc(100% - 16px); box-shadow: none; }
#ig-infos { position: relative; }
#ig-infos > header { padding: 8px 4px; height: auto; font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
#ig-infos > time { font-size: 20px; }
#ig-infos > footer { pointer-events: none; }
#winner-pic { width: 40px; }
#gsc-messages article { overflow-wrap: anywhere; white-space: pre-wrap; }
.gsc-button { padding: 0; height: 38px; }
#gsc-command-start:hover, #gsc-command-grid:hover { width: 50px; }
#gsc-command-start:hover:after, #gsc-command-grid:hover:after { content: none; }
.description span { white-space: pre-line; overflow-wrap: anywhere; }
#gs-grid-container .goRight { background-image: none; border-right: 3px solid #ec9900; }
#gs-grid-container .goDown { background-image: none; border-bottom: 3px solid #ec9900; }
#error-panel h1 { font-size: 32px; margin: 80px 16px 32px; }
#error-panel strong { margin: 24px; overflow-wrap: anywhere; }
#info-tooltip { z-index: 5; overflow-wrap: anywhere; }
@media (max-width: 1000px) {
  #room-toolbar { flex-wrap: wrap; }
  #host-tools { width: 100%; margin: 0; }
  #host-tools label { flex: 1; }
  #game-panel { height: calc(100% - 100px); grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 120px 70px; }
  #gs-chat { grid-column: 1; grid-row: 1 / 3; }
  #gs-grid-container { grid-column: 2; grid-row: 1 / 4; }
  #gs-scores { grid-column: 1; grid-row: 2; }
  #ig-infos { grid-column: 1; grid-row: 3; }
  #gs-chat { height: calc(100% - 120px); }
  #login-panel { padding-top: 100px; }
}
@media (max-width: 650px) {
  .room-brand { margin: 48px 12px 32px; }
  .lp-title { width: 38px; height: 44px; line-height: 44px; font-size: 30px; }
  #room-toolbar { padding: 6px; gap: 6px; }
  #room-role { display: none; }
  #room-toolbar button { font-size: 12px; padding: 4px 7px; }
  #puzzle-file { max-width: 155px; }
  #host-tools { font-size: 12px; }
  #game-panel { height: calc(100% - 98px); grid-template-columns: minmax(0, 1fr) 96px; grid-template-rows: minmax(180px, 1fr) 150px; overflow-y: auto; }
  #gs-grid-container { grid-column: 1 / 3; grid-row: 1; }
  #gs-chat { grid-column: 1; grid-row: 2; height: 100%; }
  #gs-scores { grid-column: 2; grid-row: 2; }
  #gs-scores .playerScore { flex-basis: 70px; min-height: 70px; }
  #gs-scores .playerScore > img { width: 28px; height: 28px; left: 3px; top: 8px; }
  #gs-scores .playerScore > footer { left: 35px; top: 8px; width: calc(100% - 38px); }
  #gs-scores h3 { font-size: 12px; }
  #gs-scores footer strong, #gs-scores footer span { font-size: 11px; }
  #ig-infos { display: none; }
  #lp-logos .logo-choice { flex-basis: 64px; width: 64px; height: 72px; }
  #lp-logos .logo-choice img { width: 52px; }
  #login-panel > header { margin-top: 16px; margin-bottom: 24px; }
  #error-panel h1 { font-size: 26px; }
}