/* Optical sizes for the scanner's 5x7 glyphs; all interface text uses the same font. */
#board,
#board.dragging,
#board.selecting {
  cursor: auto !important;
}
.viewport { cursor: auto; }
#notice, #completion { pointer-events: none; }
#chat-form { position: relative; }
#emoji-toggle { min-width: 44px; height: 44px; padding: 4px; margin-left:auto; flex:none; display: inline-flex; justify-content: center; align-items: center; }
#chat-form > div { justify-content: flex-start; gap: 6px; }
#send-chat { flex:none; }
#emoji-toggle svg { width:32px; height:32px; stroke:none; fill:currentColor; color:#111; flex:none; }
#messages { margin-top:9px; }
#emoji-picker { position: absolute; bottom: 100%; left: 0; right: 0; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; z-index: 12; box-shadow: 3px 6px 16px #0004; }
#emoji-picker header { display: flex; align-items: center; justify-content: space-between; background: #000080; color: white; padding: 4px 6px; font-size: 14px; }
#emoji-grid { display: grid; grid-template-columns: repeat(4, 1fr); max-height: min(310px, 40dvh); overflow: auto; padding: 6px; gap: 4px; }
#emoji-grid button { padding: 4px; height: 56px; min-width: 0; }
.pack-emoji { display: inline-block; width: 64px; height: 64px; vertical-align: middle; }
#emoji-grid .pack-emoji { width: 42px; height: 42px; pointer-events: none; }
.pack-emoji canvas { width: 100% !important; height: 100% !important; image-rendering: pixelated; }
#cursor-note { position:absolute; z-index:4; width:240px; height:38px; color:white; border:1px solid white; padding:8px; font:16px 'CNDC Scanner'; pointer-events:none; caret-color:white; }
#cursor-note::placeholder { color:white; opacity:.85; }
#cursor-note.fading { opacity:0; transition:opacity 1200ms ease-in-out; }
#comment-pins { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.quick-note-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;}
.comment-pin { position:absolute; left:0; top:0; min-width:30px; height:30px; padding:2px; background:#000080; color:white; pointer-events:auto; }
#comment-dialog { width:min(380px,calc(100vw - 24px)); padding:12px; background:#c0c0c0; }
#comment-title { font-size:18px; background:#000080; color:white; margin:0 0 12px; padding:8px; }
#comment-text { width:100%; font:16px 'CNDC Scanner'; resize:vertical; }
#comment-form > div { display:flex; justify-content:flex-end; gap:6px; margin-top:10px; }
@media(prefers-reduced-motion:reduce) { #cursor-note.fading { transition:none; } }
#emoji-status { font-size: 14px; margin: 4px 8px; }
button,
input,
textarea {
  font-family: inherit;
}
.titlebar #connection {
  font-size: 14px;
}
.progress-label span,
.reference p,
.chat-retention,
#nickname,
#messages header,
#messages time,
footer,
.entry-content small,
#entry-error {
  font-size: 14px;
  line-height: 1.45;
}
#messages li,
#empty-chat,
#notice {
  font-size: 16px;
  line-height: 1.5;
}
.entry-content h3 {
  font-size: 24px;
  font-weight: normal;
  line-height: 1.35;
}
.work-area {
  position: relative;
}
.titlebar .short-title {
  display: none;
}
@media (max-width: 850px) {
  .toolbar button {
    font-size: 14px;
  }
  .toolgroup output {
    font-size: 14px;
  }
  .titlebar #connection {
    font-size: 12px;
  }
  .online {
    font-size: 14px;
  }
  aside {
    top: 0;
    right: 0;
    bottom: 0;
  }
  #notice {
    font-size: 14px;
  }
  footer {
    font-size: 12px;
  }
}
@media (max-width: 450px) {
  #help-toggle {
    font-size: 14px;
  }
  .titlebar h1 {
    max-width: calc(100% - 122px);
  }
}
@media (max-width: 600px) {
  .titlebar .full-title {
    display: none;
  }
  .titlebar .short-title {
    display: block;
  }
}
#assembly-time {
  font-size: 16px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid #808080;
  padding-left: 12px;
}
.toolbar [data-icon] {
  width: 22px;
  height: 24px;
  image-rendering: pixelated;
  flex: none;
}
#help-toggle {
  width: 38px;
  font-size: 20px;
  line-height: 1;
}
#help {
  position: fixed;
  z-index: 10;
  padding: 0;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  line-height: 1.4;
  box-shadow: 3px 6px 16px #0004;
}
#help > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #000080;
  color: #fff;
  padding: 4px 5px 4px 10px;
}
#help h2 {
  font-size: 16px;
  margin: 0;
  font-weight: normal;
}
#help figure {
  margin: 0 10px;
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #999;
}
#help [data-diagram] {
  width: 100px;
  height: 58px;
  image-rendering: pixelated;
}
#help [data-diagram="grab"] { height:78px; }
#help figcaption {
  font-size: 16px;
  line-height: 1.4;
}
#help figcaption strong {
  display: block;
  color: #000080;
  margin-bottom: 6px;
  font-weight: normal;
}
#help figcaption span {
  display: block;
  font-size: 14px;
}
#help > p,
#help details {
  font-size: 14px;
  margin: 10px;
  line-height: 1.45;
}
#help summary {
  cursor: pointer;
  color: #000080;
}
#help summary:focus-visible {
  outline: 2px solid #0000ff;
  outline-offset: 3px;
}
.toolbar button, #chat-form #emoji-toggle, #chat-form #send-chat {
  height:44px; min-height:44px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
}
.toolbar :is(#zoom-out,#zoom-in,#help-toggle,#quick-note-toggle,#comment-toggle), #chat-form #emoji-toggle { width:44px; padding:4px; }
.unicode-emoji { width:1em; height:1em; vertical-align:-.12em; image-rendering:pixelated; }
.comment-preview { position:fixed; z-index:20; width:280px; max-width:calc(100vw - 16px); padding:10px; background:#fff; border:2px solid #000080; box-sizing:border-box; overflow-wrap:anywhere; }
.comment-preview strong { font-weight:normal; }
.comment-preview p { margin:8px 0 0; max-height:40vh; overflow:auto; }
.comment-preview button { float:right; min-height:24px; padding:0 5px; }
#zone-toggle { width:44px; padding:4px; }
.hazard-icon { display:block; position:relative; width:24px; height:24px; overflow:hidden; border:2px solid #111; }
.hazard-icon::before { content:''; position:absolute; inset:-16px; background:repeating-linear-gradient(135deg,#111 0 6px,#ffff00 6px 12px); animation:hazard-travel 1s linear infinite; }
@keyframes hazard-travel { to { transform:translateX(17px); } }
@media(prefers-reduced-motion:reduce){.hazard-icon::before{animation:none;}}
.zone-layer { position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; }
.assembly-zone { position:absolute; left:0; top:0; box-sizing:border-box; pointer-events:none; }
.zone-name { position:absolute; top:4px; left:4px; max-width:calc(100% - 8px); width:max-content; box-sizing:border-box; display:flex; align-items:center; gap:5px; background:#ffff00; color:#111; padding:3px 5px; white-space:nowrap; font-size:12px; overflow:hidden; }
.zone-caption { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.zone-creator{position:absolute;left:5px;top:31px;max-width:calc(100% - 10px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#111;background:#ffff00;padding:2px 4px;}
.zone-creator:empty{display:none;}
.assembly-zone.invalid .zone-tape::before{background:repeating-linear-gradient(135deg,#800000 0 6px,#fff 6px 12px);}
#chat-typing{flex:none;min-height:20px;max-height:40px;padding:2px 8px;color:#000080;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#chat-typing[hidden]{display:none;}
.zone-name.movable { pointer-events:auto; cursor:move; touch-action:none; user-select:none; }
.admin-wordmark { width:96px; height:25px; image-rendering:pixelated; display:block; }
#messages li.admin-message { position:relative; isolation:isolate; overflow:hidden; border:0; padding:11px; background:transparent; }
#messages li.admin-message::before { content:''; position:absolute; inset:-24px; z-index:-1; pointer-events:none; background:repeating-linear-gradient(135deg,transparent 0 6px,#ffff0040 6px 12px); animation:admin-stripes 4s linear infinite; }
#messages li.admin-message::after { content:''; position:absolute; inset:0; padding:3px; z-index:-1; pointer-events:none; background:repeating-linear-gradient(135deg,#111 0 6px,#ffff00 6px 12px); background-position:-24px -24px; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; animation:admin-border-stripes 4s linear infinite; }
@keyframes admin-border-stripes { to { background-position:-7.02943725px -24px; } }
@media(prefers-reduced-motion:reduce){#messages li.admin-message::after{animation:none;}}
#messages li.admin-message > .zone-tape { display:none; }
@keyframes admin-stripes { to { transform:translateX(16.97056275px); } }
@media(prefers-reduced-motion:reduce){#messages li.admin-message::before{animation:none;}}
.area-diagram { width:100px; height:58px; display:flex; align-items:center; justify-content:center; }
.area-diagram .hazard-icon { width:48px; height:48px; box-sizing:border-box; }
.zone-resize { position:absolute; right:-8px; bottom:-8px; width:22px; height:22px; min-height:22px; padding:0; background:#ffff00; pointer-events:auto; touch-action:none; cursor:nwse-resize; }
.zone-resize::after { content:''; display:block; width:8px; height:8px; border-right:2px solid #111; border-bottom:2px solid #111; margin:auto; }
.zone-name button { pointer-events:auto; flex:none; width:22px; height:22px; min-height:22px; padding:0; }
.zone-tape { position:absolute; overflow:hidden; }
.zone-tape.top,.zone-tape.bottom { left:0; right:0; height:3px; }
.zone-tape.top { top:0; }.zone-tape.bottom { bottom:0; }
.zone-tape.left,.zone-tape.right { top:0; bottom:0; width:3px; }
.zone-tape.left { left:0; }.zone-tape.right { right:0; }
.zone-tape::before { content:''; position:absolute; inset:-24px; background:repeating-linear-gradient(135deg,#111 0 6px,#ffff00 6px 12px); animation:hazard-travel 4s linear infinite; }
@media(prefers-reduced-motion:reduce){.zone-tape::before{animation:none;}}
.toolbar,.toolbar .toolgroup { gap:7px; }
.toolbar .toolgroup { margin-right:0; }
.toolbar { column-gap:16px; row-gap:8px; }
.toolbar .toolbar-section { flex-wrap:wrap; }
.toolbar .navigation-tools { flex-wrap:wrap; }
.toolbar .zoom-tools { flex-wrap:nowrap; }
#help-toggle { position:relative; overflow:hidden; background:#000080; color:#fff; margin:0; flex:none; line-height:1; padding:0; display:inline-flex; align-items:center; justify-content:center; }
#help-toggle::after { content:''; position:absolute; inset:-8px auto -8px -28px; width:18px; pointer-events:none; background:#ffffff55; clip-path:polygon(55% 0,100% 0,100% 20%,80% 20%,80% 40%,60% 40%,60% 60%,40% 60%,40% 80%,20% 80%,20% 100%,0 100%,0 70%,20% 70%,20% 50%,40% 50%,40% 30%,55% 30%); animation:help-pixel-glint 7s steps(12,end) infinite; }
@keyframes help-pixel-glint { 0%,82% { transform:translateX(0); } 100% { transform:translateX(90px); } }
@media(prefers-reduced-motion:reduce){#help-toggle::after{animation:none;display:none;}}
.toolbar { column-gap:20px; }
.toolbar .toolbar-pointers { flex-wrap:nowrap; }
.toolbar-main { flex-wrap:wrap; }
.toolbar-icons { flex-wrap:wrap; }
.toolbar-rule-tip { position:fixed; z-index:40; width:300px; max-width:calc(100vw - 16px); box-sizing:border-box; overflow:auto; padding:10px 12px; background:#c0c0c0; color:#111; border:2px solid; border-color:#fff #404040 #404040 #fff; line-height:1.4; }
.toolbar-rule-tip strong { display:block; color:#000080; font-weight:normal; font-size:16px; }
.toolbar-rule-tip p { font-size:14px; margin:6px 0 0; }
#help-toggle:hover { background:#0000a0; }
#activity-toggle { width:44px; padding:6px; }
#activity-toggle svg { width:24px; height:24px; }
.activity-panel,.online-panel { position:fixed; z-index:25; width:min(440px,calc(100vw - 16px)); box-sizing:border-box; overflow:auto; background:#c0c0c0; border:2px solid; border-color:#fff #404040 #404040 #fff; padding:10px; }
.activity-panel header { display:flex; align-items:center; justify-content:space-between; gap:8px; background:#000080; color:white; padding:5px; }
.activity-panel h2,.activity-panel h3 { font-size:16px; font-weight:normal; margin:8px 0; }
.activity-panel p { font-size:14px; line-height:1.4; }
.activity-panel ol { padding:0; list-style:none; }
.activity-panel li { border-top:1px solid #888; padding:10px 0; overflow-wrap:anywhere; }
.activity-panel time { float:right; font-size:12px; }
.piece-count { display:inline-flex; align-items:center; gap:4px; border:1px solid #000080; padding:3px 5px; margin-left:8px; }
.piece-count svg { width:14px; height:14px; }
.activity-stat { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:8px 0; }
.activity-stat > span:last-child { flex-basis:100%; font-size:12px; }
.online-panel { width:min(260px,calc(100vw - 16px)); }
.online-panel button { display:block; width:100%; text-align:left; overflow:hidden; text-overflow:ellipsis; margin:4px 0; }
.online[role="button"] { cursor:pointer; }.online:focus-visible{outline:2px solid blue;}
.follow-banner { position:absolute; z-index:8; left:8px; right:8px; top:8px; background:#000080; color:white; padding:8px; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px; }
.follow-banner[hidden]{display:none;}.follow-banner button { color:#111; font-size:14px; }
#help-toggle[aria-expanded="true"] { background:#000060; border-color:#404040 #fff #fff #404040; }
@media(max-width:650px){.toolbar{column-gap:12px;}.toolbar .navigation-tools{flex:1 1 100%;}}
/* Keep the field primary on phones: one swipeable row, full-size targets. */
.mobile-chat-dock,.mobile-chat-close{display:none;}
#entry-admin-fields[hidden],#nick[hidden]{display:none!important;}
#entry-admin-key{width:100%;box-sizing:border-box;min-height:44px;font-size:16px;}
#entry-admin-toggle{display:block;width:100%;margin-top:16px;min-height:44px;}
.entry-content{position:relative;isolation:isolate;overflow:hidden;}
.entry-content>:not(.entry-puzzle-logo){position:relative;z-index:1;}
.entry-puzzle-logo{position:absolute;left:0;top:0;width:130px;height:201px;object-fit:contain;opacity:.36;filter:brightness(.45);pointer-events:none;z-index:0;}
.toolbar #pan{display:none;}
.touch-note-dialog label{display:block;}
.touch-note-dialog input{display:block;width:100%;margin:12px 0;min-height:44px;font-size:16px;}
.touch-note-dialog button{min-height:44px;margin-right:8px;}
@media(max-width:850px){
  .mobile-chat-dock{display:flex;position:absolute;left:8px;bottom:8px;z-index:6;align-items:flex-start;flex-direction:column-reverse;gap:6px;max-width:calc(100% - 16px);}
  .mobile-chat-dock #chat-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 10px;}
  .mobile-chat-dock canvas{width:24px;height:24px;image-rendering:pixelated;}
  .mobile-chat-preview{max-width:min(300px,100%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;text-align:left;min-height:44px;}
  .mobile-chat-preview[hidden]{display:none;}
  #unread:not(:empty){display:inline-block;background:#000080;color:#fff;padding:3px 5px;}
  #sidebar{position:fixed;inset:auto 8px calc(8px + var(--keyboard-inset,0px));width:auto;max-height:calc(var(--visible-height,100dvh) - 24px);height:min(560px,72dvh);z-index:30;box-sizing:border-box;}
  #sidebar .mobile-chat-close{display:block;align-self:flex-end;min-height:44px;flex-shrink:0;}
  #sidebar>section:first-of-type{display:none;}
  #chat-input{font-size:16px;}
  #comment-dialog,.touch-note-dialog{position:fixed;top:auto;bottom:calc(8px + var(--keyboard-inset,0px));left:8px;right:8px;margin:0;width:auto;max-width:none;max-height:calc(var(--visible-height,100dvh) - 16px);box-sizing:border-box;overflow:auto;padding:16px;}
  #comment-dialog textarea{font-size:16px;min-height:90px;max-height:30dvh;}
  .comment-preview{left:8px!important;right:8px;top:auto!important;bottom:calc(8px + var(--keyboard-inset,0px));width:auto;max-width:none;}
  .comment-preview button{min-width:44px;min-height:44px;}
  #notice{bottom:64px;}
  .toolbar{flex-wrap:nowrap;flex:0 0 auto;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:#808080 #c0c0c0;padding:6px 3px 8px;column-gap:16px;}
  .toolbar .toolgroup,.toolbar .navigation-tools,.toolbar .zoom-tools{flex:0 0 auto;flex-wrap:nowrap;}
  .toolbar button,.toolbar output{flex-shrink:0;}
  .toolbar button{min-width:44px;white-space:nowrap;}
  .toolbar #zone-toggle .hazard-icon{display:block;}
  .toolbar .zoom-tools{display:none;}
  .toolbar::-webkit-scrollbar{height:4px;}
  .toolbar::-webkit-scrollbar-thumb{background:#808080;}
  .toolbar::-webkit-scrollbar-track{background:#c0c0c0;}
}
.zone-name button,.comment-preview button,#emoji-close { display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.zone-dialog { background:#c0c0c0; border:2px solid #000080; max-width:calc(100vw - 32px); }
.zone-dialog label,.zone-dialog input { display:block; margin-bottom:12px; }
.zone-dialog input { width:100%; box-sizing:border-box; }
.chat-message-field { position:relative; isolation:isolate; flex:1; min-height:60px; margin:9px 5px; overflow:hidden; background:#fff; border:2px solid; border-color:#808080 #fff #fff #808080; display:flex; }
#messages { position:relative; z-index:1; background:transparent; border:0; margin:0; }
.chat-dvd-logo { position:absolute; left:0; top:0; width:76px; height:auto; max-height:80%; object-fit:contain; pointer-events:none; filter:brightness(.45) contrast(1.4); opacity:.72; }
.comment-pin.offscreen::after { content:''; display:block; width:16px; height:16px; background:white; clip-path:polygon(0 35%,55% 35%,55% 0,100% 50%,55% 100%,55% 65%,0 65%); transform:rotate(var(--direction)); }
@media (max-width: 650px) {
  .telemetry {
    display: grid;
    grid-template-columns: minmax(84px, 1fr) auto auto;
    gap: 7px 8px;
  }
  .progress-label {
    grid-area: 1/1;
    font-size: 16px;
  }
  #progress {
    grid-area: 2/1/3/3;
    width: 100%;
    height: 16px;
  }
  #percent {
    grid-area: 1/2;
    font-size: 14px;
  }
  .online {
    grid-area: 1/3;
    border-left: 0;
    padding-left: 0;
  }
  #assembly-time {
    grid-area: 2/3;
    font-size: 14px;
    border-left: 0;
    padding-left: 0;
    text-align: right;
  }
}