.office-main { --game-color: #26c6b4; max-width: 1400px; padding-top: 76px; }
.office-heading-actions { margin-left: auto; display: flex; gap: 10px; }
.office-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.office-play { min-width: 0; }
.office-hud { grid-template-columns: repeat(4, minmax(0, 1fr)) 136px; }
#office-restart { white-space: nowrap; }
.office-pressure {
  display: flex; align-items: center; gap: 10px; margin: 14px 0; padding: 7px 14px; font-size: 12px; font-weight: 800;
  border: var(--a-edge); border-radius: 99px; background: var(--a-card); box-shadow: 0 3px 0 var(--a-ink);
}
.office-pressure progress {
  flex: 1; width: 0; height: 14px; appearance: none; -webkit-appearance: none; border: 2px solid var(--a-ink); border-radius: 99px;
  overflow: hidden; background: var(--a-soft);
}
.office-pressure progress::-webkit-progress-bar { background: var(--a-soft); }
.office-pressure progress::-webkit-progress-value { background: linear-gradient(90deg, #26c6b4, #ffc93c); border-radius: 99px; transition: width .15s; }
.office-pressure progress::-moz-progress-bar { background: linear-gradient(90deg, #26c6b4, #ffc93c); }
.office-pressure[data-urgent="true"] { background: #ffe1e6; animation: office-urgent .6s ease-in-out infinite alternate; }
:root[data-theme="dark"] .office-pressure[data-urgent="true"] { background: #4a2740; }
.office-pressure[data-urgent="true"] progress::-webkit-progress-value { background: linear-gradient(90deg, #ff8f6b, #ff4d6d); }
.office-pressure[data-urgent="true"] progress::-moz-progress-bar { background: linear-gradient(90deg, #ff8f6b, #ff4d6d); }
@keyframes office-urgent { to { transform: translateX(2px); } }
.office-pressure strong { width: 40px; text-align: right; font-family: var(--a-display) !important; font-size: 15px; font-variant-numeric: tabular-nums; }
.office-scene { height: min(58vh, 610px); min-height: 360px; }
#office-canvas { display: block; width: 100%; height: 100%; }
.office-overlay { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: center; flex-direction: column; gap: 10px; padding: 18px 18px 64px; }
.office-overlay > p { margin: 0; color: var(--bad); text-align: center; background: var(--a-card); font-size: 12px; }
.office-overlay > p:empty { display: none; }
.office-tools { display: flex; gap: 12px; justify-content: center; align-items: center; padding: 18px 0 10px; }
.office-tools button { height: 50px; }
.office-hold {
  background: #26c6b4 !important; color: #262842 !important; min-width: 188px; font-size: 16px !important; border-radius: 18px !important;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.office-hold svg { width: 20px; height: 20px; }
.office-hold[aria-pressed="true"] { background: #ffc93c !important; transform: translateY(4px); box-shadow: 0 0 0 var(--a-ink) !important; }
.office-tool { min-width: 52px; padding: 8px 12px; }
.office-feedback { display: flex; gap: 12px; justify-content: space-between; min-height: 30px; font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.office-rules summary { display: flex; gap: 8px; align-items: center; cursor: pointer; list-style: none; }
.office-rules summary::-webkit-details-marker { display: none; }
.office-rules summary svg { width: 18px; height: 18px; }
.office-rules summary svg:last-child { margin-left: auto; }
.office-rules[open] summary svg:last-child { transform: rotate(180deg); }
.office-rules summary:focus-visible { outline: 2px solid var(--a-teal); outline-offset: 4px; }
.office-rules p { font-size: 12px; line-height: 1.75; color: var(--ink-soft); margin: 12px 0 0; }
.office-rules p strong { color: var(--ink); }
.office-rules p:not(.office-rule-warning) strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 6px; background: var(--a-teal); border: 1.5px solid var(--a-ink); }
.office-rule-warning { padding: 9px 11px; border-radius: 12px; background: #ffe7eb; border: 2px solid var(--a-ink); color: #4a2a35 !important; }
.office-rule-warning strong { color: inherit !important; }
:root[data-theme="dark"] .office-rule-warning { background: #3d2440; color: #ffd9e0 !important; }
.office-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#office-register { display: flex; gap: 14px; align-items: flex-end; max-width: 480px; margin: 12px 0; }
#office-register .field { flex: 1; margin: 0; }
#office-register .action-btn { min-height: 44px; }
#office-register-status { min-height: 22px; font-size: 12px; color: var(--ink-soft); }
.office-result-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (prefers-reduced-motion: reduce) { .office-pressure[data-urgent="true"] { animation: none; } }
@media (max-width: 1024px) {
  .office-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; }
}
@media (max-width: 820px) {
  .office-main { padding: 66px 14px 28px; }
  .office-heading { margin-bottom: 10px; gap: 9px; }
  .office-heading .section-label { display: none; }
  .office-heading-actions { gap: 7px; }
  .office-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .office-hud { grid-template-columns: repeat(4, minmax(0, 1fr)) 92px; }
  #office-restart { font-size: 12px; padding: 6px 8px; gap: 4px; min-height: 38px; }
  #office-restart svg { width: 16px; height: 16px; }
  .office-pressure { margin: 10px 0; padding: 5px 12px; }
  .office-scene { height: calc(100svh - 340px); min-height: 280px; max-height: 590px; }
  .office-overlay { padding-bottom: 54px; }
  .office-tools { gap: 9px; padding: 12px 0 8px; }
  .office-hold { min-width: 156px; }
  .office-tool { padding: 7px; min-width: 44px; }
  .office-tools button { height: 46px; }
  .office-feedback { font-size: 11px; }
}
@media (max-width: 360px) {
  .office-main { padding-inline: 10px; }
  .office-hud { grid-template-columns: repeat(4, minmax(0, 1fr)) 84px; }
  #office-restart { padding-inline: 5px; }
  .office-hold { min-width: 132px; padding-inline: 9px; }
  .office-tools { gap: 7px; }
}