/* Shared Shire chrome. Keep game objects, answer colours and canvas geometry intact. */
@font-face {
  font-family: "Shire Queensland";
  src: url("/tools/english/full-stop-gem-quest/fonts/EduQLDBeginner.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
:root { --shire-font: "Shire Queensland", "Edu QLD Beginner", "Comic Sans MS", cursive; }
body, body :where(h1,h2,h3,h4,h5,h6,p,a,button,input,select,textarea,label,span,strong,small,b,em,li,dt,dd,th,td,div,section,summary,nav,header,footer,figcaption) {
  font-family: var(--shire-font) !important;
}
/* Keep source-code fields readable in the level editor. */
body :is(pre,code,kbd,samp), body :is(pre,code) *, body textarea.code {
  font-family: ui-monospace, monospace !important;
}
@media screen {
  /* PNG plank art sits behind the label; existing sizes and touch behaviour remain. */
  body :is(button, input[type=button], input[type=submit], input[type=reset], .button, .btn, .text-btn, .back-btn, .paper-button, .home-link, a.back, .utilities a, .breadcrumb, .subject-link strong):not(:where(.arrow-btn,.item,.gap,.pin,.cell,.swatch,.color-btn,.colour-btn,.color-option,.block,.mini-block,.sort-token,.supply-item,.place,.mode-card,.picture-card,.palette-piece,.letter-tile,.slot,.word-block,.word-chip,.word-brick,.chest,[data-shire-art])) {
    background: url("/assets/mediumbutton.png") center / 100% 100% no-repeat !important;
    color: #fff4d6 !important;
    border-color: transparent !important;
    border-image: none;
    text-shadow: 0 2px 2px #160e08, 0 0 4px #160e08;
    box-shadow: none;
    font-weight: 700;
  }
  body :is(.text-btn,.back-btn,.paper-button,.home-link,a.back,.utilities a,.breadcrumb,.subject-link strong) {
    padding: 10px 20px;
    min-height: 44px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
  }
  .subject-link strong { display: block; min-width: 150px; }
  body :is(.direction-pad button,.alpha-touch-controls button,.letter-btn) {
    background-image: url("/assets/smallbutton.png") !important;
  }
  body :is(.btn-large,.cat-btn) { background-image: url("/assets/largebutton.png") !important; }
  /* Border-image draws inside the existing box, without changing play coordinates. */
  body :is(dialog,.container,.panel,.card,.activity-card,.tool-card,.development-card,.empty-state,.level-card,.workspace-panel,.game-panel,.scroll-container,.instructions-modal,.audio-panel,.puzzle-card,.intro,.demonstration,.completion,.word-rack,.place,.mode-card,.picture-card,.scene,.center-panel,.alpha-play-shell,.shire-frame) {
    border-image: url("/assets/mediumbutton.png") 32 / 8px / 0 stretch !important;
    border-radius: 3px;
  }
  body :is(.place,.mode-card,.picture-card) { background-image: none; }
  /* Retain state meaning even when an app normally communicates it by fill colour. */
  body :is(button,.button):is([aria-pressed=true],[aria-selected=true],[aria-current=true],.selected,.active,.correct) {
    outline: 3px solid #e8b954;
    outline-offset: -3px;
  }
  body button.correct { outline-color: #51ba79; }
  body button.wrong { outline: 3px solid #e17453; outline-offset: -3px; }
  body :is(button,.button,.text-btn,.back-btn,.paper-button):disabled { opacity: .48; }
  body :is(button,a,input,select,textarea,summary):focus-visible {
    outline: 3px solid #e8b954;
    outline-offset: 3px;
  }
  @media (hover:hover) {
    body :is(button,.button,.text-btn,.back-btn,.paper-button):hover:not(:disabled):not(:where(.item,.gap,.pin,.cell,.swatch,.color-btn,.colour-btn,.color-option,.block,.mini-block,.sort-token,.supply-item,.place,.mode-card,.picture-card,.palette-piece,.letter-tile,.slot,.word-block,.word-chip,.word-brick,.chest,[data-shire-art])) {
      filter: brightness(1.16);
    }
  }
  /* Small navigation copy needs enough size for the Queensland letterforms. */
  .subject-link .subject-note,.activity-copy p,.nav-footer,.globe-caption { font-size: 1rem; }
  .utilities,.breadcrumb { font-size: 1rem; }
  .activity-copy { padding: 20px; }
  @media (max-width:600px) {
    .subject-link strong { min-width: 0; width: 100%; padding-inline: 12px; }
    body :is(dialog,.panel,.card,.activity-card,.place,.scene,.shire-frame) { border-image-width: 6px !important; }
  }
}