/* Theme-aware craft workbench: the canvas leads; the shelf supports discovery.
   Four-pixel rhythm, inherited chat type, quiet surface steps and elemental emoji. */
dialog.ic-modal { color:inherit; border:0; padding:0; width:min(1120px,calc(100% - 32px)); height:min(760px,calc(var(--ic-vh,100dvh) - 48px)); max-width:none; max-height:none; margin:auto; border-radius:16px; overflow:hidden; }
dialog.ic-modal[open] { display:flex; }
dialog.ic-modal::backdrop { background:rgba(0,0,0,.58); }
dialog.ic-modal.ic-expanded { width:calc(100% - 24px); height:calc(var(--ic-vh,100dvh) - 24px); }
#ic-game { --ic-line:rgba(128,128,128,.2); --ic-wash:rgba(128,128,128,.065); --ic-hover:rgba(128,128,128,.13); --ic-accent:#34858c; --ic-surface:inherit; width:100%; min-width:0; display:flex; flex-direction:column; font-family:inherit; font-size:14px; line-height:1.4; color:inherit; }
#ic-game *, #ic-game *::before, #ic-game *::after { box-sizing:border-box; }
#ic-game [hidden] { display:none !important; }
#ic-game button,#ic-game input,#ic-game select { font:inherit; color:inherit; }
#ic-game button { cursor:pointer; border:0; background:transparent; border-radius:8px; touch-action:manipulation; }
#ic-game button:disabled { opacity:.65; cursor:wait; }
#ic-game button:hover:not(:disabled) { background:var(--ic-hover); }
#ic-game button:active:not(:disabled) { transform:scale(.98); }
#ic-game :focus-visible { outline:2px solid var(--ic-accent); outline-offset:3px; }
#ic-game h2,#ic-game h3,#ic-game p { margin:0; }
.ic-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid var(--ic-line); }
.ic-heading,.ic-header-actions { display:flex; align-items:center; gap:12px; }
.ic-mark { color:var(--ic-accent); font-size:32px; line-height:1; }
#ic-game h2 { font-size:20px; letter-spacing:-.5px; font-weight:700; }
.ic-heading p { font-size:12px; opacity:.65; margin-top:2px !important; }
#ic-game .ic-icon { display:inline-flex; justify-content:center; align-items:center; width:44px; height:44px; flex-shrink:0; font-size:16px; }
.ic-workspace { display:grid; grid-template-columns:minmax(0,1fr) 320px; flex:1; min-height:0; position:relative; }
.ic-board { min-height:0; min-width:0; display:flex; flex-direction:column; }
.ic-board-toolbar { padding:8px 16px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ic-eyebrow { font-size:11px; font-weight:700; letter-spacing:1.4px; opacity:.65; }
#ic-game .ic-quiet { min-height:44px; padding:8px 12px; font-size:12px; }
.ic-quiet svg { margin-right:4px; }
.ic-canvas { flex:1; min-height:0; position:relative; overflow:hidden; isolation:isolate; background-image:radial-gradient(circle,var(--ic-line) 1px,transparent 1px); background-size:24px 24px; border-radius:8px; margin:0 12px; }
.ic-welcome { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:24px; gap:16px; }
.ic-example { display:flex; gap:12px; align-items:center; margin-bottom:8px; }
.ic-example span { display:grid; place-items:center; width:52px; height:52px; border-radius:12px; background:var(--ic-surface); box-shadow:0 0 0 1px var(--ic-line); font-size:28px; }
.ic-example b { opacity:.4; font-weight:400; }
#ic-game h3 { font-size:18px; letter-spacing:-.25px; font-weight:600; }
.ic-welcome p { opacity:.65; font-size:13px; max-width:310px; line-height:1.7; text-wrap:pretty; }
#ic-game .ic-primary { min-height:44px; padding:12px 16px; background:var(--ic-accent); color:var(--ic-on-accent,#fff); font-weight:600; }
#ic-game .ic-primary:hover { filter:brightness(1.08); background:var(--ic-accent); }
.ic-primary span { margin-left:12px; }
.ic-feedback { flex-shrink:0; min-height:48px; padding:8px 20px; display:flex; align-items:center; gap:8px; font-size:12px; }
.ic-status { opacity:.65; overflow-wrap:anywhere; }
.ic-status-dot { width:6px; height:6px; border-radius:50%; background:var(--ic-accent); flex-shrink:0; }
.ic-feedback.ic-working .ic-status-dot { animation:ic-pulse 1.2s ease-in-out infinite; }
.ic-feedback.ic-error .ic-status-dot { background:#c76b48; }
.ic-shelf { display:flex; flex-direction:column; min-height:0; border-left:1px solid var(--ic-line); }
.ic-shelf-heading { padding:20px 16px 12px; display:flex; justify-content:space-between; align-items:center; }
#ic-game .ic-shelf-heading h3 { font-size:16px; margin-top:4px; }
.ic-count { opacity:.4; font-size:13px; margin-left:4px; font-variant-numeric:tabular-nums; }
.ic-shelf-body { min-height:0; display:flex; flex:1; flex-direction:column; padding:0 16px; }
.ic-collection-tools { flex-shrink:0; }
.ic-search { display:flex; align-items:center; gap:8px; background:var(--ic-wash); border:1px solid var(--ic-line); border-radius:8px; padding:0 12px; min-height:44px; }
.ic-search svg { opacity:.4; font-size:12px; }
#ic-game .ic-search input { width:100%; min-width:0; height:44px; border:0 !important; outline-offset:0; background:transparent !important; font-size:16px; padding:0; }
.ic-sort-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; min-height:52px; }
.ic-sort-row label { display:flex; gap:8px; align-items:center; font-size:12px; width:100%; }
#ic-game .ic-sort { width:100%; min-width:0; min-height:36px; background:var(--ic-surface); border:1px solid var(--ic-line); padding:4px 8px; border-radius:6px; }
.ic-items { display:flex; flex-wrap:wrap; align-content:flex-start; align-items:flex-start; gap:8px; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:4px 4px 12px; margin:0 -4px; }
.ic-inventory-item { display:flex; flex:0 1 auto; min-width:0; align-items:center; max-width:100%; border:1px solid var(--ic-line); border-radius:8px; background:var(--ic-wash); }
#ic-game .ic-inventory-item > button:first-child { display:flex; flex:1 1 auto; align-items:center; gap:4px; min-height:36px; padding:4px 8px; font-size:13px; font-weight:600; min-width:0; text-align:left; border-radius:7px; user-select:none; -webkit-touch-callout:none; touch-action:none; }
.ic-inventory-item .ic-emoji { font-size:18px; }
.ic-inventory-item .ic-item-label { white-space:normal; overflow-wrap:anywhere; }
.ic-item-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.ic-emoji { font-size:20px; line-height:1.2; flex-shrink:0; }
.ic-inventory-item.ic-new { outline:1px solid var(--ic-accent); }
.ic-empty-list { padding:20px 0; opacity:.5; font-size:13px; }
.ic-shelf-footer { display:flex; align-items:center; justify-content:space-between; gap:4px; padding:8px 0; border-top:1px solid var(--ic-line); }
.ic-shelf-footer > span { font-size:10px; opacity:.65; max-width:130px; }
#ic-game .ic-reset { padding:8px 4px; }
#ic-game .ic-chip { position:absolute; top:0; left:0; display:flex; align-items:center; gap:8px; padding:8px 12px; min-height:44px; font-size:14px; max-width:min(250px,90%); border-radius:10px; background:var(--ic-surface); box-shadow:0 0 0 1px var(--ic-line),0 2px 4px rgba(0,0,0,.06); user-select:none; touch-action:none; cursor:grab; font-weight:600; z-index:1; }
#ic-game .ic-chip:hover { background:var(--ic-surface); box-shadow:0 0 0 1px var(--ic-accent),0 2px 6px rgba(0,0,0,.08); }
#ic-game .ic-chip.ic-selected,#ic-game .ic-chip.ic-target { box-shadow:0 0 0 2px var(--ic-accent); }
#ic-game .ic-chip.ic-dragging { z-index:5; cursor:grabbing; opacity:.85; }
#ic-game .ic-chip.ic-pending { opacity:.5; cursor:wait; }
.ic-inspector { position:absolute; z-index:10; right:12px; top:12px; width:min(360px,calc(100% - 24px)); max-height:calc(100% - 24px); overflow:auto; padding:16px; border-radius:12px; background:var(--ic-surface); box-shadow:0 0 0 1px var(--ic-line),0 8px 32px rgba(0,0,0,.14); }
.ic-inspector-heading { display:flex; align-items:center; justify-content:space-between; }
.ic-recipe-title { font-size:22px !important; margin:12px 0 20px !important; overflow-wrap:anywhere; }
.ic-recipe { padding:12px 0; border-top:1px solid var(--ic-line); display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.ic-recipe span { background:var(--ic-wash); padding:8px; border-radius:6px; overflow-wrap:anywhere; }
.ic-recipe b { opacity:.4; font-weight:400; }
.ic-recipe-content > p { opacity:.6; line-height:1.6; }
#ic-game .ic-reset-dialog { background:var(--ic-surface); color:inherit; border:1px solid var(--ic-line); border-radius:16px; padding:24px; max-width:min(400px,calc(100% - 32px)); box-shadow:0 12px 48px rgba(0,0,0,.2); }
.ic-reset-dialog::backdrop { background:rgba(0,0,0,.5); }
.ic-reset-dialog h3 { margin:16px 0 12px !important; }
.ic-reset-dialog p { opacity:.6; line-height:1.6; }
.ic-confirm-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:24px; }
#ic-game .ic-collapse { display:none; }
@keyframes ic-pulse { 50% { opacity:.3; } }
@media (max-width:767px) {
 dialog.ic-modal,dialog.ic-modal.ic-expanded { width:100%; max-width:none; height:var(--ic-vh,100dvh); max-height:none; margin:0; border-radius:0; }
 #ic-game { padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
 .ic-header { padding:8px 12px; gap:8px; }
 .ic-heading { gap:8px; }
 #ic-game h2 { font-size:18px; }
 .ic-heading p { font-size:10px; }
 .ic-heading .ic-mark { font-size:28px; }
 #ic-game .ic-expand { display:none; }
 .ic-workspace { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(150px,1fr) minmax(180px,38%); }
 .ic-shelf { border-left:0; border-top:1px solid var(--ic-line); }
 .ic-shelf-heading { padding:0 12px; min-height:40px; }
 .ic-shelf-heading .ic-eyebrow { display:none; }
 .ic-shelf-body { padding:0 12px; }
 #ic-game .ic-collapse { display:inline-flex; width:40px; height:40px; }
 .ic-shelf-heading h3 { margin:0 !important; }
 /* Keep filtering in one compact row so the collection gets the vertical space. */
 .ic-collection-tools { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding-bottom:4px; }
 .ic-sort-row { padding:0; min-height:40px; gap:4px; }
 .ic-sort-row label { width:auto; }
 .ic-sort-label { display:none; }
 #ic-game .ic-sort { width:124px; min-height:40px; font-size:16px; }
 #ic-game .ic-shuffle { width:40px; height:40px; }
 .ic-search { min-width:0; min-height:40px; padding:0 8px; }
 #ic-game .ic-search input { height:38px; }
 .ic-shelf-footer { padding:0; }
 .ic-board-toolbar { padding:0 8px 0 12px; }
 .ic-canvas { margin:0 8px; }
 .ic-feedback { min-height:40px; padding:4px 12px; font-size:11px; }
 .ic-welcome { padding:12px; gap:12px; }
 .ic-example { margin-bottom:0; gap:8px; }
 .ic-example span { width:40px; height:40px; font-size:24px; }
 .ic-welcome p { font-size:12px; }
 .ic-workspace.ic-shelf-collapsed { grid-template-rows:minmax(0,1fr) 44px; }
 .ic-shelf-collapsed .ic-shelf-body { display:none; }
 .ic-shelf-collapsed .ic-collapse svg { transform:rotate(180deg); }
}
@media (max-width:767px) and (max-height:650px) {
 .ic-welcome .ic-example { display:none; }
 .ic-welcome h3 { font-size:16px !important; }
 .ic-workspace { grid-template-rows:minmax(100px,1fr) minmax(160px,44%); }
 .ic-shelf-heading { padding:0 12px; }
 .ic-shelf-footer > span { display:none; }
}
@media (prefers-reduced-motion:reduce) { .ic-feedback.ic-working .ic-status-dot { animation:none; } #ic-game button:active { transform:none; } }

#ic-game .ic-glyph { width:20px; height:20px; display:inline-block; vertical-align:middle; flex-shrink:0; }
#ic-game .ic-search .ic-glyph,#ic-game .ic-quiet .ic-glyph { width:16px; height:16px; }

body:has(#ic-dialog[open]) { overflow:hidden; }

@media (max-height:500px) {
 .ic-welcome .ic-example { display:none; }
 .ic-welcome { padding:12px; gap:12px; }
 .ic-header { padding:8px 12px; }
}
@media (max-width:767px) {
 .ic-keyboard .ic-workspace { grid-template-rows:0 minmax(0,1fr); }
 .ic-keyboard .ic-board { visibility:hidden; overflow:hidden; }
 .ic-keyboard .ic-shelf-body { display:flex; }
}

/* Compact mouse controls; retain larger targets on touch screens. */
@media (pointer:coarse) {
 #ic-game .ic-inventory-item > button:first-child { min-height:40px; }
}

.ic-context-menu { position:absolute; z-index:20; width:220px; max-width:calc(100% - 16px); padding:4px; border-radius:10px; background:var(--ic-surface); box-shadow:0 0 0 1px var(--ic-line),0 8px 24px rgba(0,0,0,.14); }
.ic-context-title { padding:8px; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.65; }
#ic-game .ic-context-action { width:100%; min-height:34px; padding:8px; text-align:left; }
.ic-recipe-hint-touch { display:none; }
@media (pointer:coarse) { .ic-recipe-hint-mouse { display:none; } .ic-recipe-hint-touch { display:inline; } }

/* Independent from news/captcha badges, which have their own update lifecycle. */
.ic-launch-dot { display:inline-block; width:8px; height:8px; margin-left:8px; vertical-align:middle; border-radius:50%; background:#e53935; }
#open_left_menu > .ic-launch-dot { position:absolute; top:5px; right:8px; margin:0; pointer-events:none; }