/* DC360 Turtle (jslogo): the DC360 menu bar in jslogo's top bar, Current file on two lines, and toasts.
   Added by the Libraries app updater (recipe turtle). */

/* jslogo's own heading and links make room for the DC360 bar (its language list stays, at the end). */
#topbar.dc360-tu-has-bar { display: flex; align-items: center; gap: 6px; padding-left: 4px; white-space: nowrap; overflow: hidden; }
#topbar.dc360-tu-has-bar > h1 { display: none; }
#topbar.dc360-tu-has-bar > .dc360mb { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
#topbar.dc360-tu-has-bar > #topbar-links { flex: none; margin: 0 8px 0 auto; }
#topbar.dc360-tu-has-bar > #topbar-altlinks { display: none; }

/* Current file: the DC360 standard in every app, on two lines like the title and description beside it. */
.dc360-tu-current { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 4px; row-gap: 0; align-items: baseline; align-content: center;
    max-width: 280px; min-width: 0; margin: 0 0 0 4px; padding: 1px 8px 1px 10px; background: none; border: 0; border-left: 1px solid rgba(127, 127, 127, 0.45);
    color: inherit; font: 13px/1.2 Arial, Helvetica, sans-serif; text-align: left; white-space: nowrap; cursor: pointer; }
.dc360-tu-current:hover .dc360-tu-cur-name { text-decoration: underline; }
.dc360-tu-current > :not(.dc360-cur-state) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dc360-tu-cur-label { opacity: 0.8; }
.dc360-tu-cur-name { font-weight: 700; }
.dc360-tu-cur-none { color: #d97706; font-style: italic; }
.dc360-tu-current > .dc360-cur-state { grid-column: 1 / -1; justify-self: start; font-size: 11px; line-height: 1.15; font-weight: 700; color: #16a34a; }
.dc360-tu-current > .dc360-cur-state.is-unsaved { color: #d97706; }
.dc360-tu-current > .dc360-cur-state:not(.is-unsaved)::before { content: "\2713  "; }

.dc360-tu-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100000; max-width: 80vw; padding: 10px 16px; border-radius: 10px;
    background: #1f2937; color: #fff; font: 600 14px/1.35 Arial, Helvetica, sans-serif; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); }
.dc360-tu-toast.is-error { background: #991b1b; }

/* The side panel (owner 2026-10-23): no list of links at the top (the menus open the panels: Insert > An example,
   View > Logo reference / My procedures / History), just the name of the panel showing. No Extras (File has Export
   and Download my code) and no Credits (Help > About). */
#sidebar-header.dc360-tu-panelhead { height: 34px; display: flex; align-items: center; padding: 0 10px; box-sizing: border-box;
    font: 700 14px/1.2 Arial, Helvetica, sans-serif; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sidebar-header.dc360-tu-panelhead > ul { display: none !important; }
#sidebar-header.dc360-tu-panelhead .dc360-tu-panelhint { margin-left: 6px; font-weight: 400; color: #6b7280; overflow: hidden; text-overflow: ellipsis; }
#sidebar-header.dc360-tu-panelhead ~ #sidebar { top: 34px !important; }
#sidebar #extras, #sidebar #links { display: none !important; }
/* Choosing a ticked panel in the menus again hides the side panel: the drawing gets the whole width. */
body.dc360-tu-nopanel #sidebar-header, body.dc360-tu-nopanel #sidebar { display: none !important; }
body.dc360-tu-nopanel #topbar, body.dc360-tu-nopanel #display-panel, body.dc360-tu-nopanel #input-panel { right: 0 !important; }

/* The Brain (owner 2026-10-23): one row per sub program with Edit and Delete, instead of jslogo's list of full code. */
#library.dc360-tu-has-brain > div:not(.dc360-tu-brain) { display: none !important; }
.dc360-tu-brain { padding: 8px 10px 12px; font: 13px/1.4 Arial, Helvetica, sans-serif; color: #1f2937; }
.dc360-tu-brain-pic { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto 6px; }
.dc360-tu-brain-intro { margin: 0 0 8px; color: #4b5563; }
.dc360-tu-brain-new { display: block; width: 100%; margin: 0 0 8px; padding: 8px 12px; border: 2px dashed #16a34a; border-radius: 8px; background: #f0fdf4;
    color: #15803d; font: 700 14px/1.2 Arial, Helvetica, sans-serif; cursor: pointer; }
.dc360-tu-brain-new:hover { background: #dcfce7; }
.dc360-tu-brain-empty p { margin: 8px 0 4px; }
.dc360-tu-brain-empty pre { margin: 0; padding: 6px 8px; background: #f3f4f6; border-radius: 6px; font: 12px/1.4 Consolas, "Courier New", monospace; }
.dc360-tu-brain-list { list-style: none; margin: 0; padding: 0; }
.dc360-tu-brain-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid #e5e7eb; }
.dc360-tu-brain-name { flex: 1 1 auto; min-width: 0; padding: 4px 6px; border: 0; border-radius: 4px; background: none; color: #111827; text-align: left; cursor: pointer;
    font: 700 13px/1.3 Consolas, "Courier New", monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc360-tu-brain-name:hover { background: #eef2ff; }
.dc360-tu-brain-btn { flex: none; padding: 2px 10px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; color: #1f2937; font: 12px/1.6 Arial, Helvetica, sans-serif; cursor: pointer; }
.dc360-tu-brain-btn:hover { background: #f1f5f9; }
.dc360-tu-brain-btn.is-delete { color: #b91c1c; border-color: #fecaca; }
.dc360-tu-brain-btn.is-delete:hover { background: #fef2f2; }
.dc360-tu-brain-foot { margin: 8px 0 0; color: #6b7280; }
.dc360-tu-brain-clear { padding: 0; border: 0; background: none; color: #b91c1c; text-decoration: underline; font: inherit; cursor: pointer; }

/* The hint, said by the student's Help character peeking up from the bottom of the drawing (owner 2026-10-23), the same
   look as the Python IDE and the Website Creator. It sits just above jslogo's red message bar (--dc360-tu-bar). */
.dc360-tu-mascot { position: absolute; left: 12px; bottom: calc(var(--dc360-tu-bar, 6px) - 60px); z-index: 50; display: flex; align-items: flex-end; gap: 10px;
    max-width: calc(100% - 24px); opacity: 0; pointer-events: none; transition: bottom .35s ease, opacity .25s ease; }
.dc360-tu-mascot.is-active { bottom: var(--dc360-tu-bar, 6px); opacity: 1; }
.dc360-tu-mascot-pic { width: 90px; height: auto; display: block; flex: none; }
.dc360-tu-mascot-bubble { align-self: flex-start; max-width: 460px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.97); color: #222;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); font: 14px/1.4 Arial, Helvetica, sans-serif; pointer-events: auto; cursor: pointer;
    transform: translateY(10px); transition: transform .25s ease; }
.dc360-tu-mascot.is-active .dc360-tu-mascot-bubble { transform: translateY(0); }
.dc360-tu-mascot-name { font-weight: 700; color: #d97706; margin-bottom: 2px; }
@media (max-width: 900px) { .dc360-tu-mascot-pic { width: 60px; } }

/* The Brain's pop-up editor (owner 2026-10-23): Edit opens the sub program here, not in the code box at the bottom. */
.dc360-tu-edit-overlay { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(15, 23, 42, 0.45); }
.dc360-tu-edit { display: flex; flex-direction: column; gap: 10px; width: min(720px, 100%); max-height: calc(100% - 16px); overflow-x: hidden; overflow-y: auto; padding: 16px 18px; box-sizing: border-box;
    border-radius: 12px; background: #fff; color: #1f2937; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); font: 14px/1.4 Arial, Helvetica, sans-serif; }
.dc360-tu-edit-head { display: flex; align-items: center; gap: 14px; padding: 4px 4px 10px; border-bottom: 1px solid #e5e7eb; }
.dc360-tu-edit-brain { width: 170px; height: auto; flex: none; }
.dc360-tu-edit-say { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.dc360-tu-edit-char { width: 80px; height: auto; flex: none; }
.dc360-tu-edit-bubble { position: relative; align-self: center; padding: 10px 14px; border-radius: 16px; background: #fef9c3; border: 2px solid #facc15;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.dc360-tu-edit-name { font-weight: 700; color: #d97706; }
/* The check as you type: a mistake (red), a spelling tip (orange) or all good (green); the line is marked. */
.dc360-tu-edit-bubble.is-problem { background: #fef2f2; border-color: #ef4444; }
.dc360-tu-edit-bubble.is-tip { background: #fff7ed; border-color: #fb923c; }
.dc360-tu-edit-bubble.is-good { background: #f0fdf4; border-color: #22c55e; }
.dc360-tu-edit-bubble.is-problem .dc360-tu-edit-line, .dc360-tu-edit-bubble.is-tip .dc360-tu-edit-line, .dc360-tu-edit-bubble.is-good .dc360-tu-edit-line { font-size: 15px; }
.dc360-tu-edit-bubble.is-shake { animation: dc360-tu-shake .4s ease; }
@keyframes dc360-tu-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.dc360-tu-edit .dc360-tu-edit-bad { background: #fee2e2; }
.dc360-tu-edit-btn.is-check { margin-right: auto; background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.dc360-tu-edit-btn.is-check:hover { background: #dbeafe; }
.dc360-tu-edit-line { font-size: 17px; font-weight: 700; color: #1f2937; }
@media (max-width: 640px) { .dc360-tu-edit-brain { width: 110px; } .dc360-tu-edit-char { width: 56px; } .dc360-tu-edit-line { font-size: 15px; } }
.dc360-tu-edit-title { font-size: 18px; font-weight: 700; }
.dc360-tu-edit-sub { color: #4b5563; }
.dc360-tu-edit > * { min-width: 0; flex: none; }
.dc360-tu-edit .CodeMirror { border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; box-sizing: border-box; }
.dc360-tu-edit-msg { padding: 8px 10px; border-radius: 6px; background: #fef2f2; border: 1px solid #fecaca; }
.dc360-tu-edit-err { color: #b91c1c; font-weight: 700; }
.dc360-tu-edit-hint { margin-top: 4px; white-space: pre-wrap; }
.dc360-tu-edit-foot { display: flex; justify-content: flex-end; gap: 8px; }
.dc360-tu-edit-btn { padding: 7px 16px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #1f2937; font: 600 14px/1.2 Arial, Helvetica, sans-serif; cursor: pointer; }
.dc360-tu-edit-btn:hover { background: #f1f5f9; }
.dc360-tu-edit-btn.is-primary { background: #16a34a; border-color: #15803d; color: #fff; }
.dc360-tu-edit-btn.is-primary:hover { background: #15803d; }

/* The maze game (owner 2026-10-23): the bar over the drawing, and its card at the top of Examples. */
.dc360-tu-mazebar { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.95); border: 2px solid #1e3a8a; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font: 14px/1.35 Arial, Helvetica, sans-serif; color: #1f2937; }
.dc360-tu-mazebar strong { color: #1e3a8a; }
.dc360-tu-maze-moves { margin-left: auto; font-weight: 700; color: #b45309; }
.dc360-tu-maze-btn { padding: 5px 12px; border: 1px solid #1e3a8a; border-radius: 6px; background: #fff; color: #1e3a8a; font: 700 13px/1.2 Arial, Helvetica, sans-serif; cursor: pointer; }
.dc360-tu-maze-btn:hover { background: #eff6ff; }
.dc360-tu-maze-btn.is-play { background: #16a34a; border-color: #15803d; color: #fff; }
.dc360-tu-maze-btn.is-play:hover { background: #15803d; }
.dc360-tu-gamecards { display: grid; gap: 8px; margin: 8px 10px 10px; }
.dc360-tu-gamecards .dc360-tu-mazecard { margin: 0; }
.dc360-tu-mazecard.is-town { border-color: #b45309; background: #fffbeb; }
.dc360-tu-mazecard.is-town .dc360-tu-mazecard-title { color: #b45309; }
.dc360-tu-mazecard.is-space { border-color: #4338ca; background: #0b1026; }
.dc360-tu-mazecard.is-space .dc360-tu-mazecard-title { color: #c7d2fe; }
.dc360-tu-mazecard.is-space .dc360-tu-mazecard-text { color: #e0e7ff; }
.dc360-tu-mazebar.is-space { border-color: #6366f1; }
.dc360-tu-mazebar.is-town { border-color: #b45309; }
.dc360-tu-maze-list { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.dc360-tu-maze-item { padding: 1px 6px; border-radius: 999px; background: #f3f4f6; font-size: 15px; line-height: 1.4; }
.dc360-tu-maze-item.is-got { background: #dcfce7; color: #15803d; font-weight: 700; }
.dc360-tu-helmet { position: absolute; pointer-events: none; z-index: 2; }

/* The games' big moments (owner 2026-10-23): the character in the middle of the drawing, dazed after a crash or
   jumping for joy (with confetti) after a win. Click to close. */
.dc360-tu-moment { position: absolute; left: 50%; top: 50%; z-index: 60; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 14px;
    max-width: calc(100% - 32px); cursor: pointer; animation: dc360-tu-pop .35s ease-out; }
.dc360-tu-moment-stage { position: relative; flex: none; }
.dc360-tu-moment-pic { display: block; width: 150px; height: auto; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .25)); }
.dc360-tu-moment.is-bump .dc360-tu-moment-pic { animation: dc360-tu-shake .5s ease-in-out 3; transform-origin: 50% 85%; }
.dc360-tu-moment.is-win .dc360-tu-moment-pic { animation: dc360-tu-jump .6s ease-in-out infinite; }
.dc360-tu-moment-dizzy { position: absolute; left: 50%; top: 2px; width: 90px; height: 30px; margin-left: -45px; animation: dc360-tu-spin 1s linear infinite; }
.dc360-tu-moment-dizzy span { position: absolute; font-size: 22px; line-height: 1; }
.dc360-tu-moment-dizzy span:nth-child(1) { left: 0; top: 4px; }
.dc360-tu-moment-dizzy span:nth-child(2) { left: 36px; top: -6px; }
.dc360-tu-moment-dizzy span:nth-child(3) { right: 0; top: 4px; }
.dc360-tu-moment-bubble { max-width: 340px; padding: 12px 16px; border-radius: 18px; background: #fff; color: #1f2937; border: 3px solid #f59e0b;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25); font: 15px/1.4 Arial, Helvetica, sans-serif; }
.dc360-tu-moment.is-bump .dc360-tu-moment-bubble { border-color: #ef4444; }
.dc360-tu-moment.is-win .dc360-tu-moment-bubble { border-color: #22c55e; font-size: 17px; font-weight: 700; }
.dc360-tu-moment-name { font-weight: 700; color: #d97706; margin-bottom: 2px; font-size: 14px; }
.dc360-tu-confetti { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 59; pointer-events: none; }
@keyframes dc360-tu-pop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes dc360-tu-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(6deg); } }
@keyframes dc360-tu-jump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes dc360-tu-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dc360-tu-moment, .dc360-tu-moment-pic, .dc360-tu-moment-dizzy { animation: none !important; } }
@media (max-width: 700px) { .dc360-tu-moment-pic { width: 100px; } .dc360-tu-moment-bubble { font-size: 14px; } }
.dc360-tu-mazecard { margin: 8px 10px 10px; padding: 10px 12px; border-radius: 10px; border: 2px solid #1e3a8a; background: #eff6ff; font: 13px/1.4 Arial, Helvetica, sans-serif; }
.dc360-tu-mazecard-title { font-size: 16px; font-weight: 700; color: #1e3a8a; }
.dc360-tu-mazecard-text { margin: 2px 0 8px; color: #1f2937; }

/* The credits pane (it was Links: no outside links on DC360). */
.dc360-tu-credits { margin: 12px; font-size: 13px; line-height: 1.5; color: #374151; }