/* The stage is suede; the device art keeps its own geometry and materials. */
:root {
  --suede-color: #ff8508;
  --suede-image: url("jikkey-suede-bright.png");
}
html { min-height: 100%; background: var(--suede-color); }
body {
  min-height: 100svh; box-sizing: border-box;
  background-color: var(--suede-color); background-image: var(--suede-image);
  background-size: 640px 640px;
  color: #24180f;
  font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", ui-sans-serif, system-ui, sans-serif;
  word-break: keep-all; overflow-wrap: anywhere;
}
header { width: min(68rem, 100%); position: relative; min-height: 2.8rem; padding-right: 7.2rem; padding-left: 7.2rem; box-sizing: border-box; }
.brand-title { gap: .7rem; }
.brand-title .brand-logo-crop { position: relative; display: block; width: 9rem; height: 1.51rem; overflow: hidden; flex: none; mix-blend-mode: multiply; }
.brand-logo-crop .brand-logo { position: absolute; width: 116.75%; height: auto; max-width: none; left: -8.84%; top: -300%; }
.brand-title .brand-name { color: #24180f; font-size: .78em; font-weight: 600; }
#about > summary, #network-note > summary { color: #302017; border-color: #53321e88; }
#about > summary:hover, #network-note > summary:hover, #network-note[open] > summary { color: #120d09; border-color: #120d09; }
#language-switch { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; padding: 3px; gap: 2px; background: #251b15; border: 1px solid #5b3927; border-radius: 9px; box-shadow: 0 2px 6px #3a1c2022; }
#language-switch button { color: #c6b7aa; font: inherit; line-height: 1.2; font-size: .75rem; font-weight: 600; min-width: 2.55rem; min-height: 2rem; border: 0; border-radius: 6px; padding: .4rem .55rem; background: transparent; cursor: pointer; }
#language-switch button[aria-pressed="true"] { color: #25170d; background: #f5d2a8; }
#language-switch button:hover { color: #fff; background: #543827; }
#language-switch button[aria-pressed="true"]:hover { color: #25170d; background: #ffe1ba; }
#language-switch button:focus-visible { outline: 2px solid #fff0d9; outline-offset: 3px; }
#status, #network { color: #352418; font-weight: 600; }
#status.ready { color: #163a20; }
#status.err, #camera-hint { color: #4d0f0b; font-weight: 600; }
.hint, #getone p { color: #382719; }
.warn { color: #f7dcd0; background: #302019; border-color: #59382a; font-size: .84rem; padding: .6rem 1rem; }
.warn strong { color: #ffe9df; }
#capability-note { margin: 0; text-align: center; }
#firmware-switch, #fullscreen { background: #241c18; border-color: #543a2b; color: #e2d0c2; }
#firmware-switch { border: 1px solid #543a2b; padding: .35rem .55rem; border-radius: 9px; }
#firmware-switch .label { color: #e2d0c2; }
#firmware-switch button { color: #cdb9aa; }
#firmware-switch button[aria-pressed="true"] { color: #ffc587; }
#getone { border-color: #70401e66; }
#getone a { color: #24180f; }
#getone a:hover { color: #000; }
body.solo::before { background-color: var(--suede-color); background-image: var(--suede-image); background-size: 640px 640px; }
body.solo #language-switch { position: fixed; z-index: 61; top: .4rem; right: .4rem; left: auto; transform: none; }
body.solo #fullscreen { right: 7rem; }
@media (max-width: 61.99rem) {
  body.paired #stage-device { background-color: var(--suede-color); background-image: var(--suede-image); background-size: 640px 640px; }
}
/* Reuse the supplied photograph unchanged, framing just its physical card.
   The existing three buttons still own every input and card state. */
#cardtray { width: min(52rem, 100%); }
#cardtray .cardtray { gap: 1.15rem; font-family: inherit; }
#cardtray .cardtray-reader { box-sizing: border-box; width: min(27rem, 100%); }
#cardtray .cardtray-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 1.2rem; }
#cardtray .cardtray-cell { width: auto; flex: 1 1 0; gap: .65rem; }
#cardtray .cardtray-card {
  position: relative; display: block; width: 100%; aspect-ratio: 694 / 457;
  padding: 0; border: 0; border-radius: 4.6% / 7%; isolation: isolate;
  color: #fff6e7; background: #161513;
  box-shadow: 0 8px 14px #8a360b40, 0 2px 3px #60280555;
}
#cardtray .cardtray-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: url("jikkey-card-photo.png") 50.9% 49.3% / 180.7% 274.4% no-repeat;
  pointer-events: none;
}
#cardtray .cardtray-card:hover { transform: translateY(-4px); box-shadow: 0 12px 20px #78300b55; }
#cardtray .cardtray-card[aria-pressed="true"] {
  transform: translateY(-7px); outline: 2px solid #fff3d8; outline-offset: 3px;
  box-shadow: 0 13px 22px #78300b66;
}
#cardtray .cardtray-card:focus-visible { outline: 3px solid #fff3d8; outline-offset: 4px; }
#cardtray .cardtray-top { position: absolute; top: 13%; left: 8%; }
#cardtray .cardtray-top svg { display: none; }
#cardtray .cardtray-in { font-size: .7rem; font-weight: 700; color: #ffd799; letter-spacing: .06em; }
#cardtray .cardtray-name { position: absolute; top: 15%; right: 9%; font-size: 1.35rem; letter-spacing: -.03em; font-weight: 600; }
#cardtray .cardtray-pill {
  position: absolute; right: 9%; bottom: 23%; max-width: 48%;
  padding: .14rem .5rem; font-size: .75rem; border-color: #5c5549;
  background: #181612d9; color: #e2d8c7;
}
#cardtray .cardtray-tries { position: absolute; right: 9%; bottom: 8%; max-width: 82%; color: #d1c2aa; font-size: .7rem; }
#cardtray .cardtray-kind { min-height: 2.35rem; font-size: .82rem; border-radius: 7px; color: #eadcca; background: #28211b; border-color: #5c3f26; }
#cardtray .cardtray-kind:disabled { opacity: .75; }
@media (max-width: 40rem) {
  #cardtray .cardtray-row { gap: clamp(.5rem, 2vw, .85rem); }
  #cardtray .cardtray-cell { gap: .5rem; }
  /* Keep the photograph's proportions, with readable state below it. */
  #cardtray .cardtray-card {
    display: flex; flex-direction: column; align-items: center; flex: 1;
    aspect-ratio: auto; padding: calc(65.85% + .45rem) .25rem .45rem;
    border-radius: 7px; gap: .25rem; background: #211c17;
  }
  #cardtray .cardtray-card::before { bottom: auto; aspect-ratio: 694 / 457; border-radius: 7px; }
  #cardtray .cardtray-top { top: .4rem; left: .4rem; }
  #cardtray .cardtray-in { font-size: .55rem; letter-spacing: 0; }
  #cardtray .cardtray-name { top: .4rem; right: .4rem; font-size: clamp(.75rem, 2.8vw, 1.1rem); }
  #cardtray .cardtray-pill { position: static; align-self: center; max-width: 100%; box-sizing: border-box; padding: .1rem .3rem; font-size: .65rem; text-align: center; }
  #cardtray .cardtray-tries { position: static; max-width: 100%; font-size: .6rem; text-align: center; }
  #cardtray .cardtray-tries:empty { display: none; }
  #cardtray .cardtray-kind { min-height: 2.75rem; font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  #cardtray .cardtray-card { transition: none; }
}
.touch-hint { display: none; margin: 0; }
@media (any-pointer: coarse) {
  #screen { touch-action: none; }
  body.touch-ready:not(.solo) .touch-hint { display: block; }
}
@media (max-width: 36rem) {
  header { padding: 0 6.15rem 0 0; justify-content: flex-start; gap: .45rem; }
  .brand-title { gap: .4rem; flex-wrap: wrap; max-width: calc(100% - 1.8rem); }
  .brand-title .brand-logo-crop { width: 6.6rem; height: 1.105rem; }
  .brand-title .brand-name { font-size: .65em; }
  #language-switch button { min-width: 2.25rem; padding: .4rem; }
}
@media (max-width: 22rem) { .brand-title { flex-direction: column; align-items: flex-start; gap: .15rem; } }