.creative-pocket { margin: 30px 0; border-top: 1px solid #4b62524d; border-bottom: 1px solid #4b62524d; padding: 18px 0; }
.creative-pocket > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; min-height: 44px; font-size: 17px; color: #e9ebdd; }
.creative-pocket > summary::-webkit-details-marker { display: none; }
.creative-pocket > summary:after { content: '+'; margin-left: auto; color: #ceb36d; }
.creative-pocket[open] > summary:after { content: '-'; }
.creative-pocket > summary svg { width: 20px; height: 20px; color: #b3cba2; }
.pocket-content { padding: 20px 0 6px; }
.pocket-content h3 { font-size: 22px; margin: 12px 0; }
.pocket-content p { font-size: 13px; line-height: 1.8; color: #b7c6bc; }
.pocket-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: start; }
.pocket-fields label { display: grid; gap: 8px; font-size: 12px; min-width: 0; color: #bdcec0; }
.pocket-fields input,.pocket-fields select,.pocket-content textarea { width: 100%; min-width: 0; border: 1px solid #526657; background: #1b2b24; color: #edf1e8; border-radius: 4px; padding: 12px; min-height: 44px; font-size: 16px; font-family: inherit; }
.pocket-content textarea { margin: 16px 0; resize: vertical; }
.pocket-content button,.visitor-dialog button:not(.dialog-close),.home-play-tools button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #e7ecde; border: 1px solid #677a655f; border-radius: 4px; background: #253b30; padding: 10px 14px; min-height: 44px; cursor: pointer; }
.pocket-content button svg,.visitor-dialog button svg,.home-play-tools svg { width: 18px; height: 18px; }
.pocket-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.pocket-note { font-size: 10px !important; color: #9baca0 !important; }
.pocket-output { margin-top: 18px; border-left: 2px solid #b3bf81; padding: 0 0 0 16px; min-height: 32px; }
.creative-pocket button:focus-visible,.creative-pocket summary:focus-visible,.visitor-dialog button:focus-visible,.home-play-tools button:focus-visible,.story-vignette:focus-visible { outline: 2px solid #e0c57c; outline-offset: 3px; }
.creative-pocket button:disabled,.visitor-dialog button:disabled { opacity: .4; cursor: default; }
.home-play-tools { position: static; display: flex; gap: 7px; }
.lodge-experiment .room-tools { flex-wrap: wrap; }
.home-play-tools button { width: 44px; padding: 0; background: #1b302bc7; backdrop-filter: blur(8px); }
.visitor-dialog { width: min(880px,calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; border: 1px solid #556b59; border-radius: 6px; padding: 28px; background: #13201b; color: #edf0e5; }
.visitor-dialog::backdrop { background: #08100bd9; backdrop-filter: blur(7px); }
.visitor-dialog h2 { font-size: 28px; margin: 8px 40px 20px 0; }
.visitor-dialog .dialog-close { position: absolute; top: 18px; right: 18px; }
.visitor-dialog .micro { color: #c6b570; }
.postcard-canvas { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 4px; touch-action: none; cursor: crosshair; background: #244837; }
.postcard-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0; }
.postcard-toolbar input[type=range] { width: 110px; }
.postcard-toolbar .ink-swatch { width: 44px; height: 44px; min-width: 44px; padding: 9px; background: transparent; }
.ink-swatch:before { content: ''; width: 20px; height: 20px; background: var(--ink); border-radius: 50%; display: block; }
.ink-swatch[aria-pressed=true] { border-color: #e4c775; }
.pocket-content .ink-swatch { width: 44px; height: 44px; padding: 9px; background: transparent; }
.passport-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.passport-grid button { flex-direction: column; padding: 18px 10px !important; min-height: 110px; font-size: 12px; text-align: center; }
.passport-grid button svg { width: 25px; height: 25px; }
.passport-grid .stamped { border-color: var(--stamp-color,#bbc780) !important; background: var(--stamp-bg,#365845) !important; }
.passport-grid .stamped svg { color: var(--stamp-color,#bbc780); }
.passport-grid button span { color: #abbca9; font-size: 10px; }
.visitor-dialog p { font-size: 13px; color: #bccabc; line-height: 1.8; }
.postcard-note { display: grid; gap: 8px; margin: 12px 0; font-size: 12px; color: #bfd1c1; }
.postcard-note input { min-height: 44px; padding: 10px; font-size: 16px; border: 1px solid #56705d; border-radius: 4px; background: #21382b; color: #edf0e5; }
.comparison-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 18px; }
.comparison-pair img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: 4px; }
.comparison-pair h4 { font-size: 17px; margin: 12px 0 6px; }
.comparison-pair p { margin-top: 4px; }
.craft-play-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: center; }
.craft-play-canvas { width: 100%; aspect-ratio: 1; background: #223a30; border-radius: 4px; }
.story-vignette[role=button] { cursor: zoom-in; }
.story-art-focus { width: min(480px,100%); margin: auto; aspect-ratio: 1; background: url('assets/story-vignettes.webp') 0 0 / 300% 200% no-repeat; }
.career-match { margin-top: 20px; font-size: 13px; }
.career-match li { padding: 8px 0; line-height: 1.8; color: #bed0c4; }
.lab-inspiration { margin: 24px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lab-inspiration p { margin: 0; max-width: 440px; }
@media(max-width:760px),(max-width:1100px) and (pointer:coarse) {
 .home-play-tools { position: static; padding-top: 10px; }
 .home-play-tools button { background: #20362a; }
 .creative-pocket > summary { font-size: 15px; }
 .pocket-fields { gap: 12px; }
 .pocket-content h3 { font-size: 20px; }
 .visitor-dialog { padding: 22px 16px; }
 .visitor-dialog h2 { font-size: 23px; }
 .passport-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .comparison-pair,.craft-play-layout { grid-template-columns: 1fr; }
 .craft-play-canvas { max-width: 340px; margin: auto; }
}
@media(max-width:400px) { .pocket-fields { grid-template-columns: 1fr; } }