@font-face { font-family: "Parcel Hand"; src: url("/assets/fonts/parcel/JustAnotherHand-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Parcel Print"; src: url("/assets/fonts/parcel/ShareTechMono-Regular.ttf") format("truetype"); font-display: swap; }
body[data-week="8"] .view-tabs { display:none; }
.parcel-game { max-width:1400px; margin:auto; padding:16px 24px 28px; color:#233e43; }
.parcel-game [hidden] { display:none!important; }
.parcel-game button { cursor:pointer; }
.parcel-game button:disabled { cursor:default; opacity:.5; }
.p8-navigation,.p8-navigation nav,.p8-controls,.p8-footer { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.p8-navigation { justify-content:space-between; margin-bottom:14px; }
.p8-navigation nav button { width:42px;height:38px;background:#eee6d6;border:1px solid #c3c9bb;border-radius:10px;color:#385755;font-weight:700; }
.p8-navigation nav [aria-current] { background:#315d56;color:#fff;border-color:#315d56;box-shadow:0 3px 0 #203c37; }
.p8-navigation > strong { font:700 13px monospace;letter-spacing:.06em; }
.p8-station { background:#eee9db;border:1px solid #bdc5b8;border-radius:20px;overflow:hidden;box-shadow:0 5px 0 #ccd3cb; }
.p8-mission { display:flex;justify-content:space-between;align-items:center;padding:18px 24px 0;gap:10px; }
.p8-mission small { color:#6b7661;font:700 10px monospace;letter-spacing:.14em; }
.p8-mission h2 { margin:4px 0;font-size:1.3rem; }
.p8-mission > span { background:#355d55;color:#fff;padding:8px 18px;border-radius:30px;font:700 18px monospace; }
.p8-parcels { position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:8px 30px 0; }
.p8-parcel-card { min-width:0;position:relative; }
.p8-parcel-card > header { display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:#697060; }
.p8-parcel-card > header span { font:700 10px monospace;letter-spacing:.1em; }
.p8-parcel-card > header strong { border-radius:20px;padding:3px 9px;background:#e0dfcd; }
.p8-parcel-card[data-state="pass"] > header strong { background:#d0e3c7;color:#275c31; }
.p8-parcel-card[data-state="fail"] > header strong { background:#f2d6c5;color:#7c392c; }
.p8-parcel-card[data-state="active"] > header strong { background:#cee3df;color:#235a57; }
.p8-box { position:relative;height:205px;margin:5px auto 0;max-width:350px; }
.p8-box > img { position:absolute;width:100%;height:100%;object-fit:fill; }
.p8-handwritten { position:absolute;inset:60px 8% auto 8%;min-height:110px;margin:0;padding:12px 14px;background:#fff6da;color:#3d3d36;box-shadow:0 2px 4px #442c2433;border-radius:3px;transform:rotate(-2deg);font:30px/1.02 "Parcel Hand",cursive;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:3; }
.p8-parcel-card:nth-child(2) .p8-handwritten { transform:rotate(2deg); }
.p8-printed { position:absolute;z-index:3;inset:40px 7% auto 7%;min-height:125px;padding:12px 14px;background:#fffef5;color:#263c3b;border-radius:3px;box-shadow:0 6px 12px #29251940;animation:p8-stick .65s cubic-bezier(.2,.8,.2,1) both; }
.p8-printed small { display:block;font:9px monospace;letter-spacing:.14em;border-bottom:2px solid #354841;padding-bottom:6px;margin-bottom:7px; }
.p8-result-stamp { position:absolute;z-index:2;top:-13px;right:-12px;width:62px;height:62px;object-fit:contain;transform:rotate(8deg);filter:drop-shadow(0 2px 1px #33261f40);pointer-events:none; }
.p8-parcel-card[data-state="fail"] .p8-result-stamp { transform:rotate(-8deg); }
.p8-output-lines { max-height:158px;overflow:auto;font:14px/1.45 "Parcel Print",monospace; }
.p8-output-field { display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;margin:3px 0; }
.p8-output-field > strong { font:inherit;font-weight:700; }
.p8-character { display:inline-grid;place-items:center;min-width:.62em;height:1.12em;margin-right:1px;border-bottom:1px solid #53645d;line-height:1; }
.p8-whitespace { color:transparent;border-bottom-color:#53645d; }
.p8-output-field.is-wrong { color:#71372f; }
.p8-character.is-highlighted { background:#ffd95a;border:1px solid #c3991c;border-bottom:2px solid #8f6b13;border-radius:2px;color:#5f4200; }
.p8-whitespace.is-highlighted { min-width:.72em;color:transparent; }
.p8-printed-error { margin:6px 0 0;padding:5px;background:#ffe0ce;border-left:3px solid #b65742;color:#78352c;font:10px/1.35 "Parcel Print",monospace;overflow-wrap:anywhere; }
.p8-parcel-error { position:relative;z-index:5;margin:7px 4px 0;padding:7px 9px;background:#fff0e3e8;border:1px solid #cc8269;border-left:4px solid #b6503f;border-radius:6px;color:#743a30;font:11px/1.45 system-ui,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere; }
.p8-printed::after { content:"";display:block;margin-top:10px;width:60%;height:10px;background:repeating-linear-gradient(90deg,#374b43 0 2px,transparent 2px 4px,#374b43 4px 5px,transparent 5px 8px); }
.p8-parcel-card[data-state="pass"] .p8-printed { border-top:4px solid #6e965a; }
.p8-parcel-card[data-state="fail"] .p8-printed { border-top:4px solid #be785d; }
.p8-scan { display:none;position:absolute;inset:20% 4% auto;height:3px;background:#5ef4df;box-shadow:0 0 14px #46f5dd;z-index:4; }
.p8-parcel-card[data-state="active"] .p8-scan { display:block;animation:p8-scan 1.3s ease-in-out infinite; }
.p8-floor { height:120px;position:relative;margin-top:0;background:linear-gradient(#d8dbcc,#d4dcca);border-top:1px solid #aab6a5; }
.p8-conveyor-track { height:26px;border-top:5px solid #8a9987;border-bottom:5px solid #7b887c;background:repeating-linear-gradient(90deg,#3d5553 0 20px,#6d8279 20px 23px);box-shadow:0 3px 3px #14231b30; }
.p8-robot { position:absolute;left:12%;bottom:3px;width:100px;height:115px;object-fit:contain;z-index:3;transition:left .65s ease; }
.p8-floor[data-state="running"] .p8-robot { animation:p8-hover 1.2s ease-in-out infinite; }
.p8-printer { position:absolute;right:18px;bottom:4px;width:105px;height:100px;object-fit:contain; }
.p8-floor > p { position:absolute;bottom:12px;left:27%;right:130px;margin:0;text-align:center;font-size:12px;color:#31564e; }
.p8-code-layout { display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;margin-top:22px;align-items:start; }
.p8-editor-panel,.p8-system { border-radius:16px;border:1px solid #becabe;background:#f9f7ef;padding:16px;min-width:0; }
.p8-editor-panel > header,.p8-system > header { display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px; }
.p8-code-layout h3 { font-size:1rem;margin:0; }
.p8-editor-panel header small,.p8-system header span { font-size:11px;color:#69796b; }
.p8-system > p { font-size:12px;line-height:1.6;margin:7px 0 12px;color:#506962; }
.p8-editor-wrap { height:330px;display:flex;background:#1d3038;border-radius:10px;overflow:hidden; }
.p8-editor-wrap > pre { flex:0 0 38px;margin:0;padding:12px 6px;font:14px/24px monospace;color:#8da79e;background:#253b41;overflow:hidden;text-align:right;box-sizing:border-box; }
.p8-source { position:relative;flex:1;min-width:0;overflow:hidden; }
.p8-source textarea { position:relative;z-index:2;width:100%;height:100%;box-sizing:border-box;resize:none;padding:12px;margin:0;border:0;border-radius:0;background:transparent;color:#f3f2e4;font:14px/24px monospace;tab-size:4;white-space:pre; }
.p8-source textarea:focus { outline:2px solid #7db9ac;outline-offset:-2px; }
.p8-guides { position:absolute;inset:0;pointer-events:none;font:14px/24px monospace; }
.p8-guides i { position:absolute;height:24px;border-left:1px solid #93b4a63b; }
.p8-trace { position:absolute;left:0;right:0;height:24px;border-left:3px solid #8cdfc1;background:#39584e;pointer-events:none; }
.p8-controls { margin-top:12px; }
.p8-controls .button,.p8-footer .button { font-size:12px; }
.parcel-game .button-primary { background:#315f53;border-color:#315f53; }
.p8-feedback { font-size:12px;line-height:1.6;margin:10px 0 0;color:#49645b;overflow-wrap:anywhere; }
.p8-program { margin:0;border-radius:10px;background:#e3e9df;padding:12px;color:#2b5047;overflow:auto;font:12px/1.8 monospace; }
.p8-program span { display:block;white-space:pre; }
.p8-program span.active { background:#bcdac5;box-shadow:-3px 0 #4d8b67; }
.p8-program mark { margin:0 -2px;padding:1px 2px;border-radius:3px;background:#ffe27a;color:#263c3b;font:inherit; }
.p8-hints { border-top:1px solid #d2dbcd;padding-top:10px;font-size:12px; }
.p8-hints summary { cursor:pointer;color:#416452; }
.p8-hints p { line-height:1.7; }
.p8-footer { margin:18px 0; }
.p8-footer > :last-child { margin-left:auto; }
@keyframes p8-stick { from { opacity:0;transform:translateY(-35px) rotate(6deg) scale(.9); } to { opacity:1;transform:translateY(0) rotate(-1deg) scale(1); } }
@keyframes p8-scan { 50% { top:85%; } }
@keyframes p8-hover { 50% { transform:translateY(-4px); } }
@media(max-width:850px) { .parcel-game { padding:12px; } .p8-code-layout { grid-template-columns:1fr; } .p8-parcels { padding:8px 12px 0;gap:8px; } .p8-handwritten { font-size:25px;padding:8px;inset:55px 5% auto; } .p8-box { height:190px; } .p8-printed { inset:35px 4% auto;padding:8px; } .p8-output-lines { font-size:11px; } }
@media(max-width:550px) {
 .p8-parcels { grid-template-columns:1fr;gap:12px; }
 .p8-parcel-card { max-width:380px;width:100%;margin:auto; }
 .p8-box { height:215px;max-width:330px; }
 .p8-handwritten { font-size:30px;inset:64px 8% auto;padding:12px; }
 .p8-printed { inset:44px 8% auto; }
 .p8-mission { padding:14px 14px 0; }
 .p8-floor { height:140px; }
 .p8-floor .p8-robot { left:12px!important;bottom:22px; }
 .p8-floor > p { left:10px;right:10px;bottom:5px;font-size:10px; }
 .p8-printer { width:80px;right:8px;bottom:24px; }
 .p8-controls .button:first-child { flex-basis:100%; } .p8-editor-panel header { flex-wrap:wrap; }
 .p8-parcel-card > header { font-size:12px; } .p8-output-lines { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .parcel-game *, .parcel-game *::after { animation:none!important;transition:none!important; } }