/* The notebook reuses the game's illustrations and button system. */
html:has(dialog.personal-space[open]) {overflow:hidden;}
.space-rail,.space-close,.space-tabs,.space-back,.space-progress {display:none;}
.space-page,.space-header,.space-scroll {display:contents;}
:is(#draw-dialog,#avatar-dialog,#settings-dialog).personal-space[open] {
  width:min(1100px,96vw);height:min(680px,94dvh);max-width:none;max-height:none;
  padding:0;margin:auto;overflow:hidden;border:3px solid #59418e;border-radius:28px;
  background:#fff6fc;box-shadow:0 8px 0 #b486b8;grid-template-columns:190px minmax(0,1fr);display:grid;
}
.personal-space .space-rail {display:flex;flex-direction:column;gap:18px;padding:20px 14px;background:#ffeaf5;border-right:3px solid #b888c6;min-height:0;overflow:auto;}
.space-brand {font-size:26px;font-weight:bold;color:#39256e;margin:0 0 4px;text-align:center;text-shadow:0 2px white;}
.personal-space button {touch-action:manipulation;}
.personal-space .space-rail button {min-height:48px;margin:0;display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:9px 12px;font-size:16px;border:2px solid #59418e;outline:2px solid #fff;box-shadow:inset 0 0 0 2px #fffd,0 4px 0 #aa81b9;}
.space-rail button img {width:30px;height:32px;object-fit:contain;flex:none;}
.space-rail .space-section[aria-current] {color:#fff;text-shadow:1px 1px #78206c;}
.space-rail .space-section[data-section="settings"] {margin-top:auto;}
.space-rail .space-store {justify-content:center!important;}
.space-avatar-icon {order:-1;width:32px;height:36px;flex:none;overflow:hidden;display:block;}
.space-avatar-icon .avatar-frame {width:100%;height:100%;display:block;}
.personal-space .space-page {display:grid;grid-template-rows:auto auto minmax(0,1fr);padding:16px 20px 18px;min-width:0;min-height:0;background:#fbf7ff;}
.personal-space .space-header {display:flex;align-items:center;gap:12px;min-height:48px;padding-bottom:10px;min-width:0;}
.personal-space .space-header h1 {font-family:'Arial Rounded MT Bold','Trebuchet MS',sans-serif!important;font-size:clamp(22px,3vw,32px)!important;font-weight:bold!important;line-height:1.15;margin:0!important;text-align:left;color:#39256e;min-width:0;overflow-wrap:anywhere;}
.personal-space .space-progress {display:block;margin:0 0 0 auto;font-size:14px;font-weight:bold;white-space:nowrap;}
.personal-space .space-close,.personal-space .space-back {display:grid;place-items:center;min-width:44px;width:44px;height:44px;flex:none;padding:0;margin:0;font-size:32px;line-height:1;}
.personal-space .space-close {margin-left:auto;}
.personal-space .space-tabs {display:flex;gap:10px;margin:0;padding:2px 3px 14px;}
.space-tabs button {flex:1;min-width:0;min-height:44px;padding:7px 10px;margin:0;font-size:15px;}
.space-tabs button[aria-pressed="true"] {color:white;text-shadow:1px 1px #78206c;outline:2px solid #81429b;outline-offset:1px;}
.personal-space .space-scroll {display:block;overflow:auto;min-height:0;min-width:0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#bb9cd6 #eee5f9;padding:4px 6px 6px 3px;scroll-padding:8px;}
.personal-space [hidden] {display:none!important;}
.personal-space #draw-status:empty,.personal-space #draw-actions,.personal-space #settings-close {display:none;}
.personal-space .toy-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.personal-space .toy-grid article {position:relative;min-width:0;padding:10px 6px;display:flex;flex-direction:column;align-items:center;}
.personal-space .toy-grid .toy-picture,.personal-space .toy-grid .collectible-art,.personal-space .toy-grid .mystery {height:clamp(100px,24dvh,180px);width:100%;flex:none;}
.personal-space .toy-grid .collectible-art>.toy-picture {height:100%;}
.personal-space .toy-grid h2 {font-size:16px;line-height:1.2;margin:6px 0;min-height:2.4em;display:grid;place-items:center;}
.personal-space .toy-grid .rarity-badge {font-size:12px;margin-top:auto;}
.personal-space .toy-grid p {font-size:16px;margin:5px 0 0;}
/* The whole owned card is a keyboard-accessible story button. */
.personal-space .toy-grid .story-button {position:absolute;inset:0;width:100%;height:100%;margin:0;max-width:none;padding:0;color:transparent;font-size:0;background:none;border:0;box-shadow:none;outline:none;border-radius:18px;transform:none;}
.personal-space .toy-grid article:focus-within {outline:3px solid #813ba5;outline-offset:-3px;}
.personal-space .toy-grid article:has(.story-button):hover {border-color:#813ba5;}
.personal-space .collections-home {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:3px 2px 6px;}
.personal-space .collection-entry {min-height:150px;padding:10px;}
.personal-space .collection-entry .toy-picture {height:80px;}
.personal-space .collection-panel {padding:0;border:0;background:transparent!important;}
.personal-space .collection-heading {font-size:17px!important;text-align:left!important;}
.personal-space .collection-progress {font-size:13px;text-align:left;margin:4px 0 10px;}
.personal-space .completion-badge {font-size:12px;padding:4px 8px;margin:0 0 10px;}
.personal-space .story-view {max-width:none;display:flex;flex-direction:column;align-items:center;}
.personal-space .story-view>.toy-picture,.personal-space .story-view>.collectible-art {flex:none;}
.personal-space .story-view .collectible-story {font-size:26px;margin:10px 0;}
#avatar-dialog.personal-space .space-page,#settings-dialog.personal-space .space-page {grid-template-rows:auto minmax(0,1fr);}
#avatar-dialog.personal-space .space-scroll {display:flex;flex-direction:column;overflow:hidden;}
.personal-space .avatar-subtitle {text-align:left;margin:0 0 10px;}
.personal-space .avatar-layout {min-height:0;flex:1;grid-template-columns:32% minmax(0,1fr);gap:18px;align-items:stretch;}
.personal-space .avatar-preview-wrap {align-self:center;}
.personal-space #avatar-preview {height:clamp(130px,33dvh,300px);}
.personal-space #avatar-options {overflow:auto;padding:4px 8px 8px 4px;overscroll-behavior:contain;scrollbar-width:thin;}
.personal-space .avatar-option {min-height:44px;font-size:14px;}
.personal-space .skin-option {width:44px;height:44px;}
.personal-space .avatar-actions {flex:none;justify-content:flex-end;gap:10px;padding:8px 3px 3px;margin:0;}
.personal-space .avatar-actions button {min-height:44px;font-size:14px;padding:8px 14px;}
#avatar-save-status:empty {display:none;}
.personal-space #avatar-save-status {margin:4px 0;font-size:13px;}
.personal-space .mobile-actions {justify-content:flex-start;padding:4px;}
.personal-space .mobile-actions button,.personal-space .cloud-panel button {min-height:44px;font-size:14px;}
.personal-space #settings-account {text-align:left;}
.personal-space #mobile-help {text-align:left;line-height:1.5;}
.personal-space .save-tools {display:block;margin:14px 0;}
.personal-space .save-tools summary {padding:12px 0;min-height:44px;cursor:pointer;}
@media (max-height:600px) and (orientation:landscape), (max-width:700px), (display-mode:fullscreen), (display-mode:standalone) {
  :is(#draw-dialog,#avatar-dialog,#settings-dialog).personal-space[open] {width:100vw;height:100dvh;border-radius:0;border:0;box-shadow:none;grid-template-columns:clamp(160px,22vw,190px) minmax(0,1fr);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
  .personal-space .space-rail {padding:12px 10px;gap:14px;}
  .space-brand {font-size:22px;margin:0;}
  .personal-space .space-rail button {font-size:15px;min-height:46px;padding:6px 8px;gap:5px;}
  .space-rail button img {width:26px;height:28px;}
  .personal-space .space-page {padding:8px 12px 6px;}
  .personal-space .space-header {padding-bottom:6px;gap:8px;}
  .personal-space .space-header h1 {font-size:24px!important;}
  .personal-space .space-progress {font-size:12px;}
  .personal-space .space-tabs {padding-bottom:9px;}
  .personal-space .toy-grid .toy-picture,.personal-space .toy-grid .collectible-art,.personal-space .toy-grid .mystery {height:clamp(100px,29dvh,160px);}
  .personal-space .toy-grid .collectible-art>.toy-picture {height:100%;}
  .personal-space .toy-grid article {padding:8px 5px;}
  .personal-space .toy-grid h2 {font-size:14px;margin:4px 0;}
  .personal-space .collections-home {gap:10px;}
  .personal-space .collection-entry {min-height:132px;padding:6px;}
  .personal-space .collection-entry .toy-picture {height:62px;}
  .personal-space .avatar-layout {grid-template-columns:27% minmax(0,1fr);gap:12px;}
  .personal-space .avatar-subtitle {font-size:13px;margin:0 0 5px;}
  .personal-space #avatar-options legend {font-size:14px;}
  .personal-space #avatar-options fieldset {margin-bottom:12px;}
  .personal-space .avatar-choices {gap:8px;}
  .personal-space .avatar-preview-wrap {padding:4px;}
  .personal-space .avatar-actions {padding-top:7px;}
}
@media (max-width:600px) and (orientation:portrait) {
  :is(#draw-dialog,#avatar-dialog,#settings-dialog).personal-space[open] {grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);}
  .personal-space .space-rail {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:10px 12px 12px;border-right:0;border-bottom:2px solid #b888c6;overflow:visible;}
  .space-brand {grid-column:1/3;text-align:left;align-self:center;}
  .personal-space .space-rail .space-store {grid-column:3;grid-row:1;font-size:13px;}
  .personal-space .space-rail .space-section {font-size:13px;justify-content:center;padding:6px 3px;gap:3px;}
  .space-rail button img,.space-avatar-icon {width:22px;height:26px;}
  .space-rail .space-section[data-section="settings"] {margin:0;}
  .personal-space .space-header h1 {font-size:22px!important;}
  .personal-space .space-progress {font-size:11px;}
  .personal-space .space-tabs button {font-size:14px;padding:7px 5px;}
  .personal-space .toy-grid,.personal-space .collections-home {grid-template-columns:repeat(2,minmax(0,1fr));}
  .personal-space .toy-grid .toy-picture,.personal-space .toy-grid .collectible-art,.personal-space .toy-grid .mystery {height:125px;}
  .personal-space .toy-grid .collectible-art>.toy-picture {height:100%;}
  .personal-space .avatar-layout {grid-template-columns:1fr;grid-template-rows:135px minmax(0,1fr);gap:8px;}
  .personal-space .avatar-preview-wrap {padding:0;border:0;background:none;align-self:stretch;}
  .personal-space #avatar-preview {height:135px;}
  .personal-space .avatar-preview-wrap p {display:none;}
  .personal-space .avatar-actions {justify-content:center;flex-wrap:nowrap;}
  .personal-space .avatar-actions button {font-size:12px;padding:8px 10px;}
}