/**
 * corkboard.css
 * The Notice Board scene: pin cup, cork board, pinned notes, the note
 * composer ("draft"), and the speech bubble caption.
 */
#scene-cork{padding:40px 48px 70px;color:var(--text-primary)}
.cork-title{font-size:30px;font-style:italic;margin-bottom:6px}
.cork-sub{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);margin-bottom:24px}
.cork-body{display:flex;gap:22px;align-items:flex-start}

.pin-cup-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0;padding-top:6px}
.pin{width:40px;height:40px;background-image:var(--pin-img);background-size:contain;background-repeat:no-repeat;background-position:center;image-rendering:pixelated;cursor:pointer;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.5));transition:opacity 120ms}
.pin.taken{opacity:.35;cursor:default}
.pin-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);text-align:center;width:80px}

#board{position:relative;flex:1;min-height:520px;background-color:var(--moss-600);background-image:var(--texture-cork);background-size:400px 400px;border:10px solid #3a2617;box-shadow:var(--shadow-book);overflow:hidden}
#board::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 60px rgba(0,0,0,.5);pointer-events:none}
#board.picking{cursor:crosshair}

.note{position:absolute;width:150px;background-image:var(--texture-paper);color:var(--text-on-page);padding:18px 13px 13px;font-size:13px;line-height:1.45;box-shadow:3px 5px 10px rgba(0,0,0,.5);transform:translate(-50%,-50%)}
.note .note-pin{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:16px;height:16px;background-image:var(--pin-img);background-size:contain;background-repeat:no-repeat;background-position:center;image-rendering:pixelated;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.5))}
.note .sig{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--text-on-page-muted);margin-top:8px;text-align:right}
.note .stamp{position:absolute;bottom:6px;right:6px;font-family:var(--font-mono);font-size:8px;letter-spacing:.08em;color:var(--rust-700);border:1px solid var(--rust-700);padding:1px 4px;transform:rotate(-6deg);opacity:.75}

.draft{position:absolute;width:170px;background-color:var(--page-200);background-image:var(--texture-paper);color:var(--text-on-page);padding:18px 11px 11px;box-shadow:4px 6px 14px rgba(0,0,0,.6);z-index:5;transform:translate(-50%,-50%)}
.draft textarea{width:100%;background:transparent;border:none;outline:none;resize:none;font-family:var(--font-serif);font-size:13px;color:var(--text-on-page)}
.draft textarea::placeholder{color:var(--text-on-page-muted);opacity:1}
.draft input[type=text]{width:100%;background:transparent;border:none;border-bottom:1px solid var(--border-on-page);outline:none;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-on-page);margin-bottom:6px;padding-bottom:3px}
.draft input[type=text]::placeholder{color:var(--text-on-page-muted);opacity:1}
.draft-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:4px}
.draft-actions button{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border:none;background:none}
.btn-cancel{color:var(--text-on-page-muted)}
.btn-pin{background:var(--accent-primary) !important;color:var(--ink-50) !important;border:1px solid var(--rust-700) !important;padding:4px 10px !important}

.speech-bubble{position:relative;background:var(--surface-panel-raised);border:3px solid var(--ink-200);padding:22px 28px;font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;line-height:1.75;color:var(--text-primary);box-shadow:5px 5px 0 0 rgba(8,6,4,.6);max-width:480px;margin-top:30px}
.speech-bubble::before{content:'';position:absolute;top:-14px;left:34px;width:16px;height:16px;background:var(--surface-panel-raised);border-left:3px solid var(--ink-200);border-top:3px solid var(--ink-200);transform:rotate(45deg)}