/* EDU/LAB · Missió: escriure i crear! · CSS responsiu, sense dependències */
:root{color-scheme:light;--navy:#102e3b;--ink:#182d38;--muted:#536973;--sea:#146d75;--mint:#bff0cb;--paper:#f4f5ef;--soft:#edf5f2;--line:#d5e0dd;--sun:#f7c86d;--white:#fff;--shadow:0 15px 40px rgba(12,48,49,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.56}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.52;cursor:not-allowed}button:focus-visible,a:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ec9f36;outline-offset:3px}a{color:#125c60}h1,h2,h3{line-height:1.18;letter-spacing:-.025em}h1{margin:.2em 0}h2{margin:.15em 0 .5em}p{margin:.5em 0 1em}small{font-size:.82rem}.app-shell{max-width:1220px;padding:0 24px;margin:auto}.app-header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #d9e1df;padding:20px 0;font-size:.8rem;font-weight:800;letter-spacing:.07em}.brand{font-size:1.02rem;text-decoration:none;color:#173b42}.brand span{color:#599783}.project-name{color:#597078}.small-button{border:1px solid #b3c6c2;background:transparent;color:#25474c;padding:9px 12px;border-radius:10px;font-size:.8rem;font-weight:700}.screen[hidden],.game-panel[hidden],.review[hidden],.model[hidden],.setup[hidden],#storyPlay[hidden]{display:none!important}.home-screen{padding:52px 0 25px}.hero-tag,.toolbar-eyebrow,.brief-label,.tag,.micro{letter-spacing:.1em;font-size:.76rem;font-weight:850;text-transform:uppercase}.hero-tag{color:#258373}.home-screen>h1{font-size:clamp(2.8rem,7vw,5.9rem);max-width:790px;letter-spacing:-.065em;line-height:1.04;color:var(--navy);margin:15px 0 18px}.home-screen>h1 em{font-style:normal;color:#278a78}.intro{font-size:1.15rem;max-width:755px;color:#455e66;line-height:1.75}.menu-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:38px}.menu-card{border:1px solid var(--line);border-top:7px solid var(--sea);padding:29px 25px;display:flex;flex-direction:column;align-items:flex-start;border-radius:19px;box-shadow:var(--shadow);background:white;min-height:405px}.menu-card.g2{border-top-color:#d59a45}.menu-card.g3{border-top-color:#9b81ca}.card-emoji{font-size:3rem;margin-bottom:10px;line-height:1.2}.menu-card .tag{color:#58817b}.menu-card h2{font-size:1.6rem;margin:8px 0 9px}.menu-card p{color:var(--muted);line-height:1.65}.skill{font-weight:760;font-size:.82rem;color:#335e59;margin:auto 0 14px}.primary-action,.button-main{border:0;background:var(--navy);color:white;border-radius:11px;padding:13px 17px;font-weight:750;min-height:45px}.primary-action{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px}.primary-action:hover,.button-main:hover{background:#23646b}.home-footnote,.endnote{font-size:.85rem;color:#5b7775;padding:22px 0;max-width:740px}.play-screen{padding:35px 0 20px}.game-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;flex-wrap:wrap}.toolbar-eyebrow{color:#367d77}.toolbar-left h1{font-size:clamp(1.8rem,4vw,3.1rem)}.toolbar-right{display:flex;flex-direction:column;gap:6px}.level-label{font-size:.8rem;color:#425f64;font-weight:750}select{padding:12px 35px 12px 13px;border:1px solid #adc5c1;background:#fff;border-radius:10px;color:#184348;font-weight:700;min-width:160px}.game-description{max-width:810px;color:var(--muted);margin:14px 0 23px}.game-panel{border:1px solid #d8e2df;background:white;padding:clamp(19px,3vw,35px);border-radius:19px;box-shadow:var(--shadow)}.game-status{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.84rem;font-weight:800;color:#186870;background:#e8f3f0;padding:10px 15px;border-radius:11px;margin:0 0 22px}.game-panel>h2{font-size:1.55rem}.game-panel>p,.helper{color:#566b70}.word-box,.answer-box{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding:18px;min-height:82px;background:#f1f7f4;border:2px dashed #b4d2c8;border-radius:14px;margin:18px 0}.word-box{background:#f7faf8}.answer-box{background:#fffbe9;border-color:#e2c98b}.word-chip{display:inline-block;border-radius:10px;padding:10px 14px;background:white;color:#163b40;border:1px solid #9dbcb4;font-weight:730;box-shadow:0 3px 0 #cbdcd7;transition:transform .1s}.word-chip:hover{transform:translateY(-2px)}.word-chip.chosen{background:#e4f0ff;border-color:#9bb6d9}.subheading{font-size:1rem;font-weight:800;margin:20px 0 -8px}.placeholder{font-style:italic;color:#7a8d8d}.hint-box{margin:10px 0;min-height:0;color:#27636b;font-weight:700}.hint-box:empty{display:none}.action-row{display:flex;flex-wrap:wrap;gap:10px;margin:17px 0}.button-alt,.button-quiet{border:1px solid #a6c2bd;background:#eef6f2;color:#23575b;border-radius:10px;font-weight:750;padding:11px 14px;min-height:45px}.button-quiet{background:transparent;border-color:#cddad7}.feedback{border-radius:11px;font-weight:690;line-height:1.55}.feedback:not(:empty){padding:14px 17px;margin-top:14px;border:1px solid #cddad4;background:#edf7f1;color:#215744}.feedback.error:not(:empty){background:#fff2e8;border-color:#eac39d;color:#815019}.feedback.success:not(:empty){background:#e8f9eb;border-color:#addabc;color:#205c3a}.brief{border-radius:13px;background:#eff6f8;padding:22px;border-left:5px solid #4e91a0}.brief h2{font-size:1.75rem;margin:.25em 0 .5em}.brief-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.brief-meta span{font-size:.85rem;border:1px solid #c0d9dc;background:white;border-radius:99px;padding:3px 10px}.brief p{font-size:1.07rem}.writing-label{display:block;font-weight:800;margin:15px 0 7px}textarea,input[type=text]{width:100%;border:1px solid #a9c3bf;border-radius:12px;padding:15px 16px;background:white;color:#1e3941}textarea{resize:vertical;min-height:132px;line-height:1.65}textarea:focus{border-color:#1b7b71}.writing-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#54716f;font-size:.83rem;margin:4px 0 12px}.review{background:#f7fbf8;border:1px solid #d2e4d8;border-radius:14px;padding:23px;margin:22px 0}.review h3{margin-top:0}.checks{display:grid;gap:7px}.checks .ok{color:#246b3a}.checks .todo{color:#855b20}.check-line{display:flex;align-items:flex-start;gap:11px;margin:11px 0;font-weight:590}.check-line input{accent-color:#19796d;width:20px;height:20px;flex:0 0 20px}.ideas{background:#fff;padding:15px;border-left:3px solid #87b8b0;margin:12px 0}.ideas ul{margin:5px 0;padding-left:25px}.model{background:#fff9e5;border:1px solid #e8dba5;padding:16px;border-radius:11px;margin:10px 0;line-height:1.7;white-space:pre-wrap}.setup{padding:8px 0 20px}.setup label{display:block;margin:16px 0 7px;font-weight:750}.dice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.die{background:#f1f5f8;border:1px solid #d6e3e8;padding:18px 14px;border-radius:12px;min-height:134px;display:flex;flex-direction:column;gap:8px}.die:nth-child(2){background:#eff8f3}.die:nth-child(3){background:#fff7e9}.die:nth-child(4){background:#f4f0fa}.die span{color:#456473;font-size:.72rem;font-weight:800;letter-spacing:.07em}.die strong{line-height:1.45}.turn-banner{margin:20px 0 13px;background:#173c48;color:white;border-radius:13px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}.turn-banner small{display:block;color:#c1dcda;letter-spacing:.09em;font-weight:760}.turn-banner strong{font-size:1.28rem}.challenge{background:#fff9e6;border-left:5px solid #e1af54;border-radius:8px;padding:15px 22px;margin:12px 0 19px}.challenge span{font-size:.76rem;color:#785720;font-weight:840;letter-spacing:.06em}.challenge p{font-weight:750;font-size:1.09rem;margin:6px 0}.challenge em{font-size:.86rem;color:#705f41}.story-board{background:#f7faf8;border-radius:14px;border:1px solid #d5e5dc;padding:22px;margin:20px 0}.story-board h3{margin:0 0 14px}.story-entries{display:grid;gap:11px}.story-entry{padding:13px 17px;background:white;border-left:4px solid #b3d7c1;border-radius:8px}.story-entry strong{display:block;color:#27736b;font-size:.8rem;margin-bottom:4px}.story-entry p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.bottom-actions{border-top:1px solid #d8e4db;padding-top:20px}.app-footer{border-top:1px solid #d8e4df;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:.79rem;color:#617472;padding:21px 0 35px}.doc-body .doc-shell{max-width:1080px;margin:auto;padding:22px}.doc-top{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:8px 0 24px;border-bottom:1px solid var(--line);font-size:.85rem;font-weight:770}.doc-hero{background:#173d49;color:white;padding:clamp(28px,5vw,55px);margin:20px 0;border-radius:18px}.doc-hero h1{font-size:clamp(2.4rem,5vw,4.8rem);letter-spacing:-.05em}.doc-hero h1 em{color:#b6eec1;font-style:normal}.doc-hero p{font-size:1.12rem;max-width:770px;color:#e0eae5}.doc-card{background:white;border:1px solid var(--line);border-radius:16px;padding:clamp(20px,3vw,34px);margin:15px 0}.doc-card h2{font-size:1.75rem}.doc-card p,.doc-card li{line-height:1.75}.doc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.doc-mini{padding:17px;border-radius:10px;background:#f0f6f3}.doc-mini strong{color:#1a655e}.doc-mini p{font-size:.92rem}.doc-actions{display:flex;gap:13px;flex-wrap:wrap;margin:19px 0}.doc-actions a{display:inline-block;text-decoration:none;background:#b6ebbd;color:#16453d;padding:13px 16px;border-radius:10px;font-weight:800}.doc-actions a.secondary{background:transparent;color:white;border:1px solid #85b9b6}.doc-footer{color:#607470;font-size:.82rem;padding:20px 0}.check-points{padding-left:20px}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:920px){.menu-cards{grid-template-columns:1fr}.menu-card{min-height:auto}.dice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.doc-cols{grid-template-columns:1fr}}@media(max-width:550px){.app-shell{padding:0 13px}.home-screen{padding-top:30px}.app-header{flex-wrap:wrap}.project-name{font-size:.68rem}.dice-grid{grid-template-columns:1fr 1fr}.die{min-height:125px;padding:12px}.word-chip{padding:9px 11px}.game-panel{padding:19px 14px}.game-toolbar{align-items:stretch}.game-toolbar .toolbar-right{width:100%}.game-toolbar select{width:100%}}@media print{.app-header,.app-footer,.action-row,.small-button,.toolbar-right,#gameDescription,.home-screen,.turn-banner .button-alt{display:none!important}.app-shell{max-width:none}.game-panel{box-shadow:none;border:0}.story-board{border:0}.game-toolbar{display:none!important}}

.doc-card .doc-actions a.secondary{background:#f5faf7;color:#1c645b;border:1px solid #9ccbb8}

/* Feedback automàtic accessible: comprovacions correctes, incorrectes i ajuda. */
.check-line[hidden], #storyChallengeWrap[hidden]{display:none!important}
#storyMechanical:not(:empty){background:#f7fbfc;border:1px solid #c8dcd9;padding:12px 17px;border-radius:12px;margin:12px 0}
#storyMechanical .ok,#messageMechanical .ok{color:#195d36;font-weight:650;margin:5px 0}
#storyMechanical .todo,#messageMechanical .todo{color:#9b4f16;font-weight:700;margin:5px 0}
#storyCheckFeedback:not(:empty),#messageFeedback:not(:empty),#phraseFeedback:not(:empty){scroll-margin-top:16px}

/* Nou accés destacat a la cursa d'avatars, sense modificar els tres jocs existents. */
.arcade-feature{display:grid;grid-template-columns:130px 1fr;gap:23px;align-items:center;border:3px solid #b990ff;background:linear-gradient(125deg,#4134ae,#6c49ba 58%,#9f55c6);color:#fff;border-radius:19px;padding:25px 28px;margin:33px 0 18px;box-shadow:0 9px 0 #30267a;position:relative;overflow:hidden}
.arcade-feature::after{content:"★";position:absolute;right:-22px;top:-80px;color:#fff;opacity:.07;font-size:16rem;pointer-events:none}
.arcade-symbol{width:120px;height:120px;display:grid;place-content:center;position:relative;background:#fff3c8;border:6px solid #f5bb3a;border-radius:30px;transform:rotate(-8deg);box-shadow:0 8px 0 #40308e;font-size:3.6rem;text-align:center}
.arcade-symbol span:nth-child(2){position:absolute;font-size:2.4rem;right:-21px;bottom:-16px;transform:rotate(15deg)}
.arcade-label{font-weight:900;font-size:.71rem;letter-spacing:.12em;color:#ffeb96}
.arcade-feature h2{font-size:clamp(1.6rem,3vw,2.65rem);letter-spacing:-.035em;margin:8px 0 9px;color:#fff}
.arcade-feature p{color:#f5eeff;max-width:840px;margin:0;font-size:.93rem;line-height:1.6}
.arcade-actions{display:flex;gap:13px;flex-wrap:wrap;align-items:center;margin:19px 0 0}
.arcade-btn,.arcade-offline{display:inline-flex;text-decoration:none;font-weight:900;padding:11px 16px;border-radius:10px;align-items:center;min-height:46px}
.arcade-btn{background:#ffdc4c;color:#30266c;box-shadow:0 4px 0 #c78d1f}
.arcade-offline{border:1px solid #dfcfff;color:#fff;background:rgba(255,255,255,.11)}
.arcade-feature a:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:690px){.arcade-feature{grid-template-columns:1fr;padding:20px;gap:12px}.arcade-symbol{width:80px;height:80px;font-size:2.2rem;border-width:4px;border-radius:18px}.arcade-symbol span:nth-child(2){font-size:1.5rem}}

/* Dues maneres de jugar: sense cursa i en una cursa amb mode a escollir. */
.play-way-picker{padding-top:15px}
.play-way-picker h2{font-size:1rem;color:#3d6462;letter-spacing:.12em;font-weight:950}
.play-way-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.play-way{display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto auto;gap:4px 12px;border:2px solid #cfe5dd;border-radius:15px;background:#f3fbf6;padding:16px 19px;text-decoration:none;color:#184d46}
.play-way>span{font-size:2.4rem;grid-row:1/4;align-self:center}
.play-way strong{font-size:1.08rem;letter-spacing:.01em}
.play-way small{font-size:.82rem;color:#4b6663;line-height:1.5}
.play-way b{font-size:.76rem;margin-top:4px}
.play-way-race{border-color:#c4baf4;background:#f0eefe;color:#4e3fa4}
.play-way-race small{color:#645c9b}
.play-way:focus-visible,.race-on-card:focus-visible{outline:3px solid #e4a13c;outline-offset:3px}
.play-way:hover{border-width:3px;padding:15px 18px}
.standalone-heading{margin-top:36px;scroll-margin-top:28px}
.standalone-heading h2{font-size:clamp(1.6rem,3vw,2.25rem);margin:6px 0}
.standalone-heading p{color:#607571;font-size:.94rem}
.race-on-card{margin:11px auto 0;display:block;font-size:.82rem;font-weight:820;color:#5744ac;text-align:center;text-decoration:underline;text-underline-offset:3px}
@media(max-width:660px){.play-way-grid{grid-template-columns:1fr}.play-way{padding:14px}}