/* Editor and management surfaces inherit the shared NullerGames portal tokens. */
.suika-dialog {
  width:min(900px,calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 32px);
  margin:auto;
  padding:0;
  overflow:hidden;
  /* The body is the only scroll container. Programmatic focus must not scroll
     the modal itself and push its fixed heading/footer out of view. */
  overflow:clip;
  border:1px solid var(--glass-line-2);
  border-radius:var(--radius);
  background:var(--pop-bg);
  color:var(--ink);
  box-shadow:var(--shadow);
}
.suika-dialog::backdrop {
  background:color-mix(in srgb,var(--page) 72%,transparent);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.dialog-form {display:flex;flex-direction:column;max-height:calc(100dvh - 34px);min-width:0;}
.dialog-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;border-bottom:1px solid var(--glass-line);flex:none;min-width:0;}
.dialog-heading h2 {font-size:23px;line-height:1.3;margin:0;overflow-wrap:anywhere;}
.dialog-close {display:grid;place-items:center;width:40px;height:40px;flex:none;padding:0;border:1px solid var(--glass-line-2);border-radius:50%;background:var(--glass-2);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;box-shadow:2px 2px 0 var(--base);transition:transform 120ms ease,box-shadow 120ms ease;}
.dialog-close:active {transform:translate(2px,2px);box-shadow:0 0 0 var(--base);}
.dialog-body {overflow:auto;overscroll-behavior:contain;padding:24px 26px;min-height:0;min-width:0;scrollbar-color:var(--glass-line-2) transparent;}
.dialog-footer {display:flex;gap:12px;justify-content:flex-end;align-items:center;padding:16px 26px;border-top:1px solid var(--glass-line);background:var(--pop-bg);flex:none;min-width:0;}
.dialog-footer .primary-button {width:auto;min-width:180px;}
.editor-label {display:block;font-size:14px;font-weight:750;margin-bottom:8px;color:var(--ink);}
.editor-field {width:100%;min-width:0;font:inherit;border:1px solid var(--glass-line-2);border-radius:var(--radius-s);padding:12px;background:color-mix(in srgb,var(--page) 60%,var(--glass-2));box-sizing:border-box;color:var(--ink);}
.editor-field::placeholder {color:var(--muted);opacity:1;}
.editor-field:focus-visible {outline:3px solid var(--press);outline-offset:2px;}
select.editor-field {cursor:pointer;}
.editor-help {font-size:13px;color:var(--muted);line-height:1.65;word-break:keep-all;overflow-wrap:anywhere;margin:10px 0 20px;}
.capacity-note {padding:12px 16px;background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--radius-s);color:var(--muted);font-size:13px;line-height:1.6;margin:0 0 20px;overflow-wrap:anywhere;}
.capacity-note.error,.editor-status.error {background:color-mix(in srgb,var(--press) 12%,var(--pop-bg));border-color:color-mix(in srgb,var(--press) 58%,var(--glass-line));color:var(--ink);}
.editor-section-title {margin:28px 0 14px;font-size:18px;line-height:1.4;letter-spacing:-.4px;color:var(--ink);}
.fruit-editor-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.fruit-editor {position:relative;background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--radius);padding:12px;min-width:0;text-align:center;}
.fruit-editor .fruit-image-label {cursor:pointer;display:block;}
.fruit-editor img {height:105px;width:100%;object-fit:contain;display:block;margin-bottom:10px;}
.fruit-editor .editor-field {padding:8px;text-align:center;font-size:13px;}
.asset-picker {position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}
.asset-picker:focus-visible+span,.fruit-image-label:focus-within {outline:3px solid var(--press);outline-offset:4px;border-radius:8px;}
.upload-label {font-size:12px;color:var(--ink);display:block;margin-bottom:9px;}
.asset-meta {font-size:11px;color:var(--muted);margin:8px 0 4px;min-height:1em;overflow-wrap:anywhere;}
.reset-asset {font:inherit;font-size:12px;background:none;border:0;text-decoration:underline;text-underline-offset:3px;color:var(--muted);cursor:pointer;padding:6px;}
.reset-asset:hover {color:var(--ink);text-decoration-color:var(--press);}
.fruit-editor .draw-fruit {display:flex;width:100%;min-height:36px;margin-top:8px;padding:7px;font-size:12px;}
.suika-dialog.drawing-active .dialog-body>:not(.fruit-drawing),.suika-dialog.drawing-active>.dialog-form>.dialog-footer {display:none!important;}
.suika-dialog.drawing-active .dialog-form {height:calc(100dvh - 34px);}
.suika-dialog.drawing-active .dialog-body {display:flex;flex-direction:column;flex:1;min-height:0;scroll-behavior:auto;}
.fruit-drawing {display:flex;flex-direction:column;position:relative;flex:1;max-width:600px;width:100%;margin:0 auto;min-width:0;min-height:0;}
.drawing-title,.fruit-drawing>.editor-help,.drawing-starters,.drawing-tools {flex:none;}
.drawing-title {font-size:19px;line-height:1.4;margin:0;word-break:keep-all;overflow-wrap:anywhere;}
.fruit-drawing>.editor-help {margin:7px 0 14px;}
.drawing-starters {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.drawing-tools {display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 14px;}
.drawing-colors {display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:100%;}
.drawing-color-picker {display:flex;align-items:center;gap:7px;font-size:13px;margin-right:3px;}
.drawing-color-picker input {width:35px;height:32px;padding:2px;border:1px solid var(--glass-line-2);border-radius:7px;background:var(--glass);cursor:pointer;}
.drawing-swatch {width:27px;height:27px;flex:none;padding:0;border:2px solid var(--glass-line-2);border-radius:50%;background:var(--swatch);cursor:pointer;}
.drawing-swatch:focus-visible,.drawing-color-picker input:focus-visible {outline:3px solid var(--press);outline-offset:3px;}
.drawing-width {display:flex;align-items:center;gap:8px;font-size:13px;min-width:0;flex:1 1 190px;}
.drawing-width input {width:100%;min-width:50px;accent-color:var(--press);flex:1;}
.drawing-width output {width:2ch;min-width:2ch;flex-shrink:0;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;}
.drawing-eraser[aria-pressed=true] {background:var(--press);border-color:var(--press);color:var(--press-ink);}
.drawing-surface {display:flex;align-items:center;justify-content:center;flex:1 1 0;min-height:122px;max-height:514px;width:100%;margin:0 auto;}
.drawing-canvas {display:block;flex:none;width:120px;height:120px;aspect-ratio:1;touch-action:none;cursor:crosshair;border:0;outline:1px solid var(--glass-line-2);border-radius:12px;background-color:var(--pop-bg);background-image:linear-gradient(45deg,var(--glass-line) 25%,transparent 25%),linear-gradient(-45deg,var(--glass-line) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--glass-line) 75%),linear-gradient(-45deg,transparent 75%,var(--glass-line) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;}
.drawing-canvas:focus-visible {outline:3px solid var(--press);outline-offset:-3px;}
.drawing-canvas[aria-disabled=true] {cursor:wait;}
.drawing-actions {display:flex;flex:none;gap:12px;align-items:center;justify-content:flex-end;margin-top:12px;padding:0;background:var(--pop-bg);z-index:1;}
.drawing-actions .primary-button {width:auto;min-width:160px;}
.drawing-status {position:absolute;bottom:86px;left:8px;right:8px;z-index:2;pointer-events:none;margin:0;box-shadow:var(--shadow);}
.sound-editor {display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px 20px;border:1px solid var(--glass-line);background:var(--glass);padding:18px;border-radius:var(--radius);margin-bottom:12px;align-items:start;min-width:0;}
.sound-editor h4 {margin:0 0 10px;font-size:15px;line-height:1.5;}
.sound-head {min-width:0;}
.sound-enabled {display:flex;align-items:flex-start;gap:7px;font-size:12px;line-height:1.5;word-break:keep-all;margin:0 0 11px;cursor:pointer;}
.sound-enabled input {flex:none;width:17px;height:17px;margin:1px 0 0;accent-color:var(--press);}
.sound-upload-actions {display:flex;flex-wrap:wrap;gap:8px;}
.record-sound[aria-pressed=true] {background:var(--press);color:var(--press-ink);border-color:var(--press);}
.record-status {font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums;margin:10px 0 0;color:var(--ink);}
.fruit-sounds-group {border-top:1px solid var(--glass-line);margin:20px 0 0;padding-top:16px;min-width:0;}
.fruit-sounds-group>summary {cursor:pointer;font-size:16px;font-weight:750;padding:8px 0;word-break:keep-all;}
.sound-fruit {border:1px solid var(--glass-line);border-radius:var(--radius-s);background:var(--glass);margin:9px 0;overflow:hidden;min-width:0;}
.sound-fruit-summary {display:flex;align-items:center;gap:10px;cursor:pointer;padding:11px 13px;list-style:none;min-width:0;}
.sound-fruit-summary::-webkit-details-marker {display:none;}
.sound-fruit-summary::after {content:'+';flex:none;font-size:20px;color:var(--muted);}
.sound-fruit[open]>.sound-fruit-summary::after {content:'−';}
.sound-fruit-summary img {width:38px;height:38px;object-fit:contain;flex:none;border-radius:8px;}
.sound-fruit-name {flex:1;min-width:0;font-size:13px;font-weight:650;word-break:keep-all;overflow-wrap:anywhere;line-height:1.5;}
.sound-summary-state {flex:none;color:var(--muted);font-size:11px;white-space:nowrap;}
.sound-fruit-content {background:transparent;border:0;border-top:1px solid var(--glass-line);border-radius:0;margin:0;}
.sound-controls input:disabled {opacity:.4;cursor:not-allowed;}
.sound-off>.sound-fruit-summary .sound-summary-state {color:var(--press);}
.file-button,.quiet-button {display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:40px;border:1px solid var(--glass-line-2);border-radius:var(--radius-s);padding:9px 12px;background:var(--glass-2);box-shadow:3px 3px 0 var(--base);cursor:pointer;font:inherit;font-size:13px;font-weight:650;line-height:1.3;color:var(--ink);transition:transform 120ms ease,box-shadow 120ms ease,background 160ms ease;}
.file-button {position:relative;}
.file-button:hover,.quiet-button:hover {transform:translate(1px,1px);box-shadow:2px 2px 0 var(--base);}
.file-button:active,.quiet-button:active {transform:translate(3px,3px);box-shadow:0 0 0 var(--base);}
.file-button:focus-within,.quiet-button:focus-visible,.reset-asset:focus-visible,.dialog-close:focus-visible {outline:3px solid var(--press);outline-offset:3px;}
.sound-controls {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;min-width:0;}
.sound-control {min-width:0;}
.sound-control label {display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:6px;color:var(--muted);}
.sound-control label span {font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;}
.sound-control input[type=range] {width:100%;accent-color:var(--press);}
.sound-control input[type=number] {width:90px;max-width:100%;}
.sound-controls .sound-meta {grid-column:1/-1;font-size:12px;line-height:1.5;color:var(--muted);margin:0;overflow-wrap:anywhere;}
.sound-actions {display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0;}
.editor-status {padding:10px 14px;background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--radius-s);color:var(--ink);font-size:13px;line-height:1.5;margin:16px 0 0;overflow-wrap:anywhere;}
.created-share {display:grid;gap:15px;text-align:center;padding:10px 0;min-width:0;}
.created-share h3 {font-size:26px;line-height:1.4;margin:0;}
.created-share input {font-size:14px;text-align:center;}
.created-share .primary-button {width:100%;}
.created-share .share-actions {display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.owned-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.owned-item {border:1px solid var(--glass-line);background:var(--glass);border-radius:var(--radius-s);padding:15px;min-width:0;}
.owned-item h3 {font-size:15px;margin:0 0 8px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;}
.owned-item p {font-size:12px;color:var(--muted);margin:0 0 10px;}
.owned-actions {display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.owned-actions a {font-size:12px;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--press);text-underline-offset:3px;}
.owned-actions button {min-height:36px;padding:0;}
.board-tabs {display:flex;gap:8px;margin-bottom:18px;}
.board-tabs button {flex:1;min-width:0;}
.board-tabs .selected {background:var(--press);border-color:var(--press);color:var(--press-ink);box-shadow:3px 3px 0 var(--press-base);font-weight:750;}
.rank-list {list-style:none;margin:0;padding:0;min-width:0;}
.rank-entry {display:grid;grid-template-columns:35px minmax(0,1fr) auto;gap:12px;padding:15px 8px;border-bottom:1px solid var(--glass-line);align-items:center;min-width:0;}
.rank-entry strong {font-size:18px;color:var(--muted);}
.rank-entry b {font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink);}
.rank-entry small {display:block;color:var(--muted);margin-top:4px;font-size:11px;word-break:keep-all;overflow-wrap:anywhere;}
.rank-name {min-width:0;overflow-wrap:anywhere;}
.rank-submit {display:flex;gap:10px;margin-bottom:22px;align-items:center;}
.rank-submit .editor-field {flex:1;min-width:0;}
.rank-submit button {white-space:nowrap;}
.rank-note {font-size:12px;color:var(--muted);line-height:1.6;overflow-wrap:anywhere;}
.board-empty {text-align:center;padding:40px 0;color:var(--muted);}
.dialog-body [hidden],.suika-dialog [hidden],.admin-page [hidden] {display:none!important;}
.danger-button {color:var(--ink);text-decoration-color:var(--press);}
.quiet-button.danger-button {border-color:color-mix(in srgb,var(--press) 55%,var(--glass-line));background:color-mix(in srgb,var(--press) 12%,var(--glass-2));}
.busy {opacity:.65;pointer-events:none;}

/* Management retains the portal header and uses the same glass form surfaces. */
.admin-page .admin-main {max-width:1000px;padding-top:30px;padding-bottom:36px;}
.admin-page .admin-header {max-width:1000px;gap:12px;}
.admin-page .brand img {width:30px;height:30px;flex:none;}
.admin-page .brand {font-family:var(--font);font-size:20px;letter-spacing:-.7px;}
.admin-page .controls .pill,.admin-page .controls .pill:not(.theme-pill):not(.fullscreen-pill):not(.share-pill) {display:inline-flex;}
.admin-page .admin-intro h1 {display:block;font-size:28px;line-height:1.3;letter-spacing:-.9px;margin:0 0 8px;overflow:visible;}
.admin-page .admin-intro .editor-help {margin:0 0 24px;max-width:600px;}
.admin-page .admin-panel {padding:24px;border:1px solid var(--glass-line);border-radius:var(--radius);background:var(--glass);box-shadow:var(--shadow);margin-top:20px;min-width:0;}
.admin-page .admin-panel>.editor-section-title:first-child {margin-top:0;}
.admin-row {display:flex;gap:10px;align-items:center;}
.admin-row .editor-field {flex:1;min-width:0;}
.admin-row .quiet-button {flex:none;white-space:nowrap;}
.admin-item {border:1px solid var(--glass-line);background:var(--glass);border-radius:var(--radius-s);padding:16px;margin-bottom:12px;min-width:0;}
.admin-item h3 {font-size:16px;line-height:1.5;margin:0;overflow-wrap:anywhere;}
.admin-item .editor-help {margin:6px 0 12px;}
.admin-page .admin-back {display:inline-flex;margin-top:22px;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:4px;}
.admin-page #admin-ranks {margin-top:12px;}
.admin-page #admin-ranks .quiet-button {font-size:12px;white-space:nowrap;}

@media(max-width:650px) {
  .dialog-heading,.dialog-body,.dialog-footer {padding:16px;}
  .dialog-heading h2 {font-size:20px;}
  .fruit-editor-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
  .fruit-editor {padding:8px;}
  .fruit-editor img {height:83px;}
  .drawing-tools .quiet-button {font-size:12px;padding:8px 10px;}
  .drawing-width {flex-basis:100%;}
  .drawing-actions {gap:8px;}
  .drawing-actions .primary-button {min-width:0;flex:1;}
  .sound-editor {grid-template-columns:minmax(0,1fr);padding:14px;gap:12px;}
  .sound-editor h4 {display:inline;margin:0;}
  .sound-editor .sound-head {display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
  .sound-editor .sound-enabled {margin:0 0 0 auto;}
  .sound-editor .sound-upload-actions,.sound-editor .record-status {width:100%;}
  .sound-editor .sound-upload-actions>* {flex:1;}
  .owned-list {grid-template-columns:minmax(0,1fr);}
  .dialog-footer .primary-button {min-width:0;flex:1;}
  .rank-entry {gap:8px;}
  .rank-submit {flex-wrap:wrap;}
  .rank-submit button {width:100%;}
  .admin-page .admin-main {padding-top:24px;}
  .admin-page .admin-panel {padding:18px;}
  .admin-page .admin-intro h1 {font-size:24px;}
}
@media(max-width:420px) {
  .suika-dialog {width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);}
  .dialog-form {max-height:calc(100dvh - 18px);}
  .suika-dialog.drawing-active .dialog-form {height:calc(100dvh - 18px);}
  .fruit-editor-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .sound-controls {gap:12px;}
  .sound-actions {grid-column:1/-1;}
  .sound-fruit-summary {gap:8px;padding:10px;}
  .sound-fruit-summary img {width:30px;height:30px;}
  .sound-fruit-name {font-size:12px;}
  .sound-summary-state {font-size:10px;}
  .dialog-footer {gap:8px;}
  .dialog-footer .quiet-button {padding:9px 10px;}
  .drawing-title {font-size:17px;}
  .fruit-drawing>.editor-help {font-size:12px;margin:5px 0 9px;}
  .drawing-starters {gap:6px;margin-bottom:9px;}
  .drawing-starters .quiet-button {min-height:34px;padding:7px 9px;font-size:11px;}
  .drawing-tools {gap:7px;margin-bottom:10px;}
  .drawing-width {flex:1 1 150px;font-size:12px;gap:5px;}
  .drawing-width input {min-width:40px;}
  .drawing-tools .quiet-button {min-height:34px;font-size:11px;padding:7px 9px;}
  .drawing-colors {gap:5px;}
  .drawing-swatch {width:24px;height:24px;}
  .drawing-color-picker {font-size:12px;gap:5px;margin-right:0;}
  .drawing-color-picker input {width:30px;height:28px;}
  .rank-entry {grid-template-columns:24px minmax(0,1fr) auto;padding-right:0;padding-left:0;}
  .admin-page .brand {font-size:17px;gap:7px;}
  .admin-page .brand img {width:27px;height:27px;}
  .admin-page .admin-header {gap:8px;}
  .admin-page .controls {gap:6px;}
  .admin-page .controls .pill:not(.theme-pill) {padding:8px 10px;font-size:12px;}
  .admin-page #admin-ranks .quiet-button {padding:8px;font-size:11px;}
}
@media(prefers-reduced-motion:reduce) {
  .dialog-close,.file-button,.quiet-button {transition:none;}
}