/* Last-layer layout: playable city + messages, with optional management sheets. */
body.play-layout .ticker,
body.play-layout .command h1,
body.play-layout .edition,
body.play-layout footer {
  display: none;
}
body.play-layout header {
  height: 48px;
  padding: 0 16px;
}
body.play-layout main {
  padding: 8px 12px;
  gap: 0;
}
body.play-layout .command {
  min-height: 30px;
  margin-bottom: 6px;
}
body.play-layout .command > div:first-child {
  display: none;
}
body.play-layout .clock {
  width: 100%;
  justify-content: space-between;
}
body.play-layout .game-toolbar {
  flex-wrap: nowrap;
  gap: 7px;
}
body.play-layout .game-toolbar > button {
  display: none;
}
body.play-layout .game-toolbar > #open-card,
body.play-layout .game-toolbar > #manage-game {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  font-size: 12px;
}
body.play-layout .view-switch #world-view {
  display: none;
}
body.play-layout .view-switch button {
  min-height: 42px;
  font-size: 12px;
}
body.play-layout #manage-game {
  margin-left: auto;
  background: #d7b570;
  color: #193134;
}
body.play-layout .time-status {
  min-height: 27px;
  padding: 5px 10px;
}
body.play-layout .time-status small {
  display: none;
}
body.play-layout .time-status > small {
  display: none;
}
body.play-layout .stats {
  margin-bottom: 6px;
}
body.play-layout .stat {
  height: 56px;
  padding: 5px 9px;
}
body.play-layout .stat strong {
  font-size: 18px;
}
body.play-layout .workspace {
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 12px;
}
body.play-layout .workspace > .decision-panel {
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}
body.play-layout .workspace > .decision-panel > #decision {
  height: 100%;
  min-height: 0;
}
body.play-layout .workspace .message-phone {
  height: 100%;
  margin: 0;
}
body.play-layout #drawer[open] {
  position: fixed !important;
  top: 90px;
  bottom: 16px;
  left: auto;
  right: 16px;
  width: min(620px, calc(100vw - 32px));
  max-height: none !important;
  z-index: 80;
  margin: 0 !important;
  box-sizing: border-box;
  box-shadow: 0 16px 65px #0009;
  border: 1px solid #62817b;
  background: #142e32;
  overflow: auto;
  border-radius: 18px;
  padding: 16px;
  flex: none !important;
}
body.play-layout #drawer .drawer-top {
  position: sticky;
  top: -16px;
  background: #142e32;
  z-index: 3;
  padding: 12px 0;
}
body.play-layout #drawer .drawer-top h2 {
  font-size: 20px;
}
body.play-layout #drawer-close {
  min-width: 44px;
  min-height: 44px;
}
.manage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.manage-grid button {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 5px;
  text-align: left;
  padding: 15px;
  min-height: 78px;
  background: #203d40;
}
.manage-grid button span {
  grid-row: span 2;
  font-size: 23px;
  color: #e0c080;
}
.manage-grid button small {
  color: #a8c2c0;
  font-size: 11px;
}
body.play-layout .city-heading {
  padding: 8px 11px;
  align-items: center;
}
body.play-layout .city-heading h2 {
  font-size: 14px;
}
body.play-layout .city-heading #scene-zoom,
body.play-layout .city-heading #city-build {
  display: none;
}
body.play-layout #camera-tools {
  display: flex;
}
body.play-layout #camera-tools > * {
  display: none !important;
}
body.play-layout #camera-tools > #camera-home,
body.play-layout #camera-tools > #open-earth-3d {
  display: block !important;
  min-height: 36px;
}
body.play-layout .city-heading .eyebrow {
  display: none;
}
body.play-layout #city-caption {
  display: none;
}
body.play-layout .map-bottom {
  display: none;
}
body.play-layout .country-strip {
  padding: 6px 10px;
}
body.play-layout .country-bubbles {
  top: 58px;
  max-width: 170px;
}
body.play-layout.tools-open #camera-tools {
  position: fixed;
  z-index: 100;
  top: 95px;
  right: 20px;
  max-width: min(380px, calc(100vw - 40px));
  padding: 15px;
  background: #173137;
  border: 1px solid #74968e;
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0 15px 60px #0008;
}
body.play-layout.tools-open #camera-tools > * {
  display: block !important;
  min-height: 44px;
  font-size: 12px;
}
body.play-layout.tools-open #close-city-tools {
  background: #dabb7b;
  color: #1b3437;
}
body.play-layout .research-node p,
body.play-layout .research-node small {
  line-height: 1.45;
}
body.play-layout .research-node > button {
  min-height: 44px;
}
@media (max-width: 700px) {
  body.play-layout {
    height: auto;
    min-height: 100dvh;
    overflow: auto;
    display: block;
  }
  body.play-layout header {
    height: 46px;
    padding: 0 10px;
  }
  body.play-layout .brand {
    font-size: 17px;
  }
  body.play-layout .brand-mark {
    width: 28px;
    height: 29px;
    font-size: 21px;
  }
  body.play-layout header .header-actions #save,
  body.play-layout header .header-actions #new {
    display: none;
  }
  body.play-layout main {
    display: flex;
    min-height: 0;
    overflow: visible;
    padding: 7px 8px 20px;
  }
  body.play-layout .stats {
    gap: 4px;
  }
  body.play-layout .stat {
    height: 52px;
    padding: 5px 4px;
  }
  body.play-layout .stat strong {
    font-size: 13px;
  }
  body.play-layout .stat-top {
    font-size: 7px;
    min-height: 14px;
  }
  body.play-layout .stat .bar {
    margin-top: 1px;
  }
  body.play-layout .time-status {
    min-height: 28px;
  }
  body.play-layout .time-status > div:first-child {
    min-width: 85px;
  }
  body.play-layout .month-meter {
    display: none;
  }
  body.play-layout .game-toolbar {
    gap: 4px;
    margin-bottom: 7px;
  }
  body.play-layout .game-toolbar > #open-card,
  body.play-layout .game-toolbar > #manage-game,
  body.play-layout .view-switch button {
    font-size: 11px;
    padding: 8px;
    min-height: 44px;
  }
  body.play-layout .view-switch {
    gap: 3px;
    margin: 0;
  }
  body.play-layout .workspace {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
    flex: none;
  }
  body.play-layout .map-panel {
    flex: none;
    min-height: 0;
    overflow: hidden;
  }
  body.play-layout #map-stage {
    flex: none;
    height: clamp(240px, 36svh, 340px);
    min-height: 0;
  }
  body.play-layout #city-panel {
    height: 100%;
    min-height: 0;
  }
  body.play-layout .workspace > .decision-panel {
    display: block !important;
    height: auto;
    overflow: visible;
    padding: 0;
  }
  body.play-layout .workspace > .decision-panel > #decision {
    height: auto;
  }
  body.play-layout .workspace .message-phone {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    border-radius: 24px;
    padding-bottom: 9px;
  }
  body.play-layout .message-phone .phone-status,
  body.play-layout .message-phone .chat-date,
  body.play-layout .message-phone .message-stamp,
  body.play-layout .message-phone .decision-key {
    display: none;
  }
  body.play-layout .message-phone .role-heading {
    padding: 11px 12px;
  }
  body.play-layout .message-phone .role-heading strong {
    font-size: 15px;
  }
  body.play-layout .message-phone .role-heading small {
    font-size: 11px;
  }
  body.play-layout .message-phone.quick-card .incoming-message {
    margin: 10px 12px;
    padding: 12px;
  }
  body.play-layout .message-phone.quick-card .card-content p {
    font-size: 14px;
  }
  body.play-layout .message-phone.quick-card .choices {
    margin: 0 12px 8px;
    grid-template-columns: 1fr;
  }
  body.play-layout .message-phone.quick-card .choices button,
  body.play-layout .message-phone.quick-card > .ignore-choice {
    min-height: 48px;
    font-size: 14px;
    padding: 10px 12px;
  }
  body.play-layout .message-phone.quick-card > .ignore-choice {
    margin: 0 12px;
    width: calc(100% - 24px);
  }
  body.play-layout .message-phone .choices small {
    font-size: 11px;
  }
  body.play-layout .message-phone .reply-caption {
    margin: 0 12px 7px;
    padding-top: 0;
  }
  body.play-layout .idle-phone .phone-saver {
    min-height: 130px;
  }
  body.play-layout .idle-phone .saver-caption {
    padding: 16px;
  }
  body.play-layout .saver-caption small {
    display: none;
  }
  body.play-layout .saver-next {
    min-height: 48px;
  }
  body.play-layout .city-heading h2 {
    max-width: 160px;
    font-size: 12px;
  }
  body.play-layout .country-strip {
    min-height: 36px;
  }
  body.play-layout #drawer[open] {
    top: 62px;
    bottom: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    border-radius: 18px;
    padding: 12px;
  }
  body.play-layout .research-grid {
    grid-template-columns: 1fr;
  }
  body.play-layout .speeds button {
    min-height: 36px;
    padding: 6px 12px;
  }
}
body.play-layout:not(.tools-open)
  .city-panel:has(#country-webgl[data-showcase='true'])
  #webgl-labels {
  display: none;
}
body.play-layout:not(.tools-open) #camera-tools > #open-earth-3d {
  display: none !important;
}
body.play-layout .city-heading {
  flex-wrap: nowrap !important;
}
body.play-layout .city-heading > div:last-child {
  flex-shrink: 0;
}
body.play-layout .city-heading h2 {
  white-space: normal;
}
body.play-layout #country-webgl {
  touch-action: none;
}
body.play-layout #drawer[open] {
  height: calc(100dvh - 106px);
}
@media (max-width: 700px) {
  body.play-layout #drawer[open] {
    height: calc(100dvh - 70px);
  }
}
body.play-layout:not(.tools-open) .city-heading > div:first-child {
  flex: 1;
  min-width: 0;
}
body.play-layout:not(.tools-open) .city-heading > div:last-child {
  width: 36px;
  min-width: 36px;
  flex: 0 0 36px;
}
body.play-layout:not(.tools-open) #camera-tools {
  width: 36px;
  min-width: 0;
}
body.play-layout .city-heading h2 {
  max-width: none !important;
}
body.play-layout .city-heading {
  min-height: 44px;
}
.goal-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 13px;
  border: 1px solid #46605d;
  border-radius: 8px;
  background: #172c2b;
  margin: 7px 0;
  color: #efdab0;
}
.goal-strip div {
  min-width: 0;
}
.goal-strip small {
  display: block;
  color: #b9cece;
  font-size: 11px;
  margin-top: 3px;
}
.goal-strip button {
  flex-shrink: 0;
  min-height: 40px;
}
.goal-choices {
  display: flex;
  gap: 8px;
}
.goal-choices button {
  flex: 1;
  min-height: 48px;
}
.goal-choices [aria-pressed='true'] {
  border-color: #e8b964;
  background: #413e2a;
}
.goal-steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}
.goal-steps li {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #20383c;
  border-radius: 8px;
}
.goal-steps small {
  display: block;
  margin-top: 4px;
  color: #aec7cb;
}
.goal-steps .done {
  opacity: 0.65;
  color: #96d1af;
}
.goal-note {
  font-size: 11px;
  color: #abc1c2;
  line-height: 1.6;
}
#goal-act,
#goal-wait,
#goal-intel {
  width: 100%;
  min-height: 48px;
  border-color: #dfb96f;
}
@media (max-width: 700px) {
  .goal-strip {
    padding: 7px 9px;
  }
  .goal-strip b {
    font-size: 12px;
  }
  .goal-strip small {
    font-size: 10px;
  }
  .goal-strip button {
    font-size: 11px;
  }
}
.research-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.research-tabs button {
  flex: 1;
  min-height: 44px;
  padding: 8px;
  font-size: 12px;
}
.research-tabs [aria-pressed='true'] {
  border-color: #e7bc6d;
  background: #413b2e;
}
.research-route {
  width: 100%;
  text-align: left;
  margin-bottom: 15px;
  min-height: 44px;
  color: #f0cf92;
}
.compact-research {
  grid-template-columns: 1fr !important;
  gap: 10px;
}
.compact-research .research-node {
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 14px;
}
.compact-research .research-node p {
  margin: 0;
  font-size: 12px;
  grid-column: 1;
}
.compact-research .research-node > small {
  grid-column: 1;
}
.compact-research .research-node > button {
  grid-column: 2;
  grid-row: 1/4;
  max-width: 200px;
  min-height: 44px;
}
.compact-research .research-node progress {
  grid-column: 1;
}
.research-foot {
  display: block;
  margin-top: 12px;
  color: #a8c3c5;
}
.goal-next {
  margin: 15px 0;
  padding: 18px;
  border: 1px solid #657972;
  border-radius: 12px;
  background: #213a3d;
}
.goal-next h3 {
  margin: 9px 0;
}
.goal-next > small {
  display: block;
  color: #b2cccb;
  font-size: 11px;
}
.goal-estimate {
  font-size: 13px;
  color: #edc686;
}
.goal-details {
  margin: 16px 0;
}
.goal-details summary {
  cursor: pointer;
  min-height: 44px;
  padding: 10px 0;
}
.goal-details .goal-steps li {
  padding: 8px;
}
.goal-details .goal-steps b {
  font-size: 12px;
}
@media (max-width: 500px) {
  .compact-research .research-node {
    grid-template-columns: 1fr;
  }
  .compact-research .research-node > button {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
    width: 100%;
  }
  .research-tabs button {
    font-size: 11px;
    flex: 1 1 40%;
  }
}
body.play-layout .game-toolbar > #open-projects {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  font-size: 12px;
  background: #294e42;
  border-color: #6b947d;
}
/* Tajná služba je prvotriedny prvok: vedľa Budovať, s počtom hrozieb (červená) alebo výstrah (žltá). */
body.play-layout .game-toolbar > #open-intelligence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  font-size: 12px;
  background: #2f2a46;
  border-color: #7d76a8;
}
.intel-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  text-align: center;
  background: #e3bd5c;
  color: #1a1a12;
}
.intel-badge.threat {
  background: #e0655c;
  color: #fff;
}
.saver-intel {
  margin-top: 6px;
  width: 100%;
  font-size: 12px;
  background: #2f2a46;
  border-color: #7d76a8;
}
.goal-strip > div {
  flex: 1;
}
.goal-strip #quick-goal {
  background: #37523b;
  border-color: #85a575;
}
.goal-strip #open-goal {
  padding: 8px;
  min-width: 48px;
}
.simple-hint {
  font-size: 13px;
  color: #b8d0ca;
}
.simple-buildings {
  display: grid;
  gap: 12px;
  margin: 15px 0;
}
.simple-buildings article {
  padding: 16px;
  background: #203d40;
  border: 1px solid #45645f;
  border-radius: 12px;
  display: grid;
  gap: 9px;
}
.simple-buildings small {
  color: #b1cbc4;
}
.simple-buildings button {
  min-height: 46px;
}
.idle-phone .saver-caption small {
  letter-spacing: 1px;
}
.idle-phone .saver-caption h3 {
  font-size: 22px;
}
@media (max-width: 700px) {
  body.play-layout .game-toolbar {
    gap: 4px;
    flex-wrap: wrap;
  }
  .goal-strip {
    flex-wrap: wrap;
  }
  .goal-strip > div {
    flex-basis: 100%;
  }
  .goal-strip #quick-goal {
    flex: 1;
  }
  .simple-buildings article {
    padding: 12px;
  }
}
body.phone-has-notice #notice-bar {
  display: none !important;
}
.phone-has-notice .saver-caption p {
  font-size: 13px;
  line-height: 1.5;
}
.phone-has-notice .saver-caption h3 {
  font-size: 20px;
}
/* Construction fills the available panel vertically, without a sideways strip. */
body.play-layout #drawer #drawer-content #projects.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 12px;
  width: 100%;
  min-width: 0;
  overflow: visible;
  padding: 0;
}
body.play-layout #drawer-content > .projects-panel {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
body.play-layout #drawer #projects > .project {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px;
  overflow-wrap: anywhere;
}
body.play-layout #drawer #projects .project p {
  min-height: 0;
  flex: 1;
}
body.play-layout #drawer #projects .project button {
  min-height: 44px;
  white-space: normal;
}
@media (max-width: 500px) {
  body.play-layout #drawer #drawer-content #projects.project-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}