/* Version 7.14, visual-cohesion audit: a calm shared design language across modules.
   No Quranic typesetting/content or interaction logic changed. */
:root{
 --cohesive-ink:#123e45;--cohesive-teal:#0d5963;
 --cohesive-muted:#55716f;--cohesive-border:#d6e5e0;
 --cohesive-sage:#eaf3ef;--cohesive-offwhite:#fcfdfa;
 --cohesive-peach:#f9eee5;--cohesive-blue:#e8f3f7;
 --cohesive-shadow:0 8px 24px rgba(20,77,80,.055);
}
/* Common letterforms, accessible target sizes, predictable focus. */
body{font-family:Tahoma,Arial,sans-serif}
button,a,input,select{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,
summary:focus-visible{outline:3px solid #187684!important;outline-offset:3px}
/* Intro heading is programmatically focused by the test's own script:
   remove only its UA rectangle; do NOT remove control focus indicators. */
#masteryApp h1[tabindex="-1"]:focus{outline:none!important}
/* Consistent white surfaces, fine sage lines, balanced radii */
#module-one-view .welcome,
#module-one-view .juz-path-card,
#module-one-view .mastery-invite,
#module-one-view .game-instructions,
#module-two-view .game-instructions,
.game-wrap .panel,
.panel,
.mastery-wrap .card{
 border:1px solid var(--cohesive-border);border-radius:23px;
 box-shadow:var(--cohesive-shadow);
}
#module-one-view .juz-path-card{border-radius:20px!important}
#module-one-view .mastery-invite{
 background:#fff;border-radius:20px;padding:clamp(18px,2.5vw,27px);
}
#module-one-view .mastery-invite .primary-link{border-radius:11px}
#module-one-view .juz-path-action{border-radius:11px!important}
#module-two-view .game-how-card{
 border:1px solid var(--cohesive-border)!important;border-radius:17px!important;
 background:#fff!important;box-shadow:none!important;
}
/* Cohesive game feature panel replaces the old oversized blue illustrated banner.
   Artwork now comes from lightweight CSS — no large SVG/image download. */
#module-one-view .module-one-game-banner{margin:23px 0 18px}
#module-one-view .module-one-banner-art.cohesive-challenge-surface,
#module-two-view .game-banner.cohesive-challenge-surface,
#module-two-view .game-mobile-banner.cohesive-challenge-surface{
 position:relative;overflow:hidden;display:flex!important;
 align-items:center;justify-content:space-between;gap:22px;
 min-height:215px;height:auto;padding:clamp(22px,3.5vw,42px)!important;
 border:1px solid #d3e5de;border-radius:24px;
 background:#f3f8f5!important;box-shadow:var(--cohesive-shadow);
 color:var(--cohesive-ink);text-align:right;
}
.cohesive-challenge-surface:before{
 content:"";position:absolute;left:-70px;top:-100px;width:290px;height:330px;
 border-radius:43% 57% 65% 35% / 63% 41% 59% 37%;background:#e1eff5;
 transform:rotate(16deg);pointer-events:none;
}
.cohesive-challenge-surface:after{
 content:"";position:absolute;left:24%;bottom:-185px;width:330px;height:250px;
 border-radius:55% 45% 24% 76% / 60% 35% 65% 40%;background:#f9eadd;
 pointer-events:none;opacity:.65;
}
.cohesive-challenge-copy{position:relative;z-index:1;flex:1;min-width:0;max-width:610px}
.cohesive-eyebrow{display:inline-block;color:#346761;font-size:12px;font-weight:800;
 background:white;border:1px solid #d9e9e2;border-radius:999px;padding:5px 12px;
}
.cohesive-challenge-copy h2,.cohesive-challenge-copy h1,
#module-two-view .game-mobile-banner h1{
 margin:12px 0 7px!important;font-size:clamp(25px,3.3vw,38px)!important;
 line-height:1.45;color:var(--cohesive-teal)!important;font-weight:900;
}
.cohesive-challenge-copy p,#module-two-view .game-mobile-banner p{
 margin:0 0 17px;color:#526e6d;font-size:clamp(13px,1.6vw,16px);line-height:1.8;
}
.cohesive-challenge-cta,
#module-one-view .module-one-banner-art .cohesive-challenge-cta,
#module-two-view .game-banner .cohesive-challenge-cta,
#module-two-view .game-mobile-banner .cohesive-challenge-cta{
 position:relative!important;inset:auto!important;display:inline-flex!important;
 width:auto!important;height:auto!important;min-height:45px;align-items:center;
 justify-content:center;gap:10px;text-decoration:none!important;padding:11px 24px;
 border:1px solid var(--cohesive-teal);border-radius:12px;background:var(--cohesive-teal);
 color:#fff!important;font-size:14px!important;font-weight:800;cursor:pointer;
}
.cohesive-challenge-visual{
 position:relative;z-index:1;flex:none;width:180px;height:145px;
 display:flex;justify-content:center;align-items:flex-end;gap:8px;flex-wrap:wrap;
}
.cohesive-big-symbol{position:absolute;top:-18px;left:50%;font-size:98px;line-height:1;
 color:#79b5ac;transform:translateX(-50%);font-family:Arial,sans-serif;
}
.cohesive-spark{position:absolute;top:12px;right:13px;color:#e0a846;font-size:23px}
.cohesive-minichip{position:relative;z-index:2;display:inline-block;min-width:48px;
 padding:5px 9px;background:#fff;border:1px solid #cee0db;border-radius:9px;
 font-size:11px;font-weight:750;color:#386967;text-align:center;
}
/* The original navigation actions remain present in the document. */
#module-two-view .game-mobile-banner.cohesive-challenge-surface{display:none!important}
/* Game rounds now share the same quiet framed-card treatment. */
#lobby .round-card[data-round]{
 border:1px solid var(--cohesive-border)!important;border-radius:20px;
 box-shadow:var(--cohesive-shadow);background:#fff!important;
 transition:border-color .16s,transform .16s;
}
#lobby .round-card[data-round]:hover{border-color:#8bb9b4!important;transform:translateY(-2px)}
#lobby .round-card .round-icon{border-radius:11px;background:var(--cohesive-sage)}
#lobby .revise-reminder{border:1px solid var(--cohesive-border);border-radius:18px;background:#f8faf8}
#lobby .panel,#play.panel,#finish.panel,#victory.panel{border-radius:23px}
/* Mastery: typography, pill-like header links, matching soft surfaces. */
.mastery-header{border-bottom:1px solid var(--cohesive-border)}
.mastery-header .brand{text-decoration:none;color:var(--cohesive-teal)}
.mastery-header nav a{display:inline-block;text-decoration:none;padding:5px 9px;
 border-radius:9px;color:var(--cohesive-teal)}
.mastery-header nav a:hover{background:var(--cohesive-sage)}
.mastery-wrap .card{border-radius:22px;box-shadow:var(--cohesive-shadow)}
.mastery-wrap h1{color:var(--cohesive-teal);font-weight:900;line-height:1.4;
 letter-spacing:0}
.mastery-wrap .stat{border:1px solid #e3ede9;border-radius:14px}
/* Mobile rhythm */
@media(max-width:720px){
 #module-one-view .module-one-banner-art.cohesive-challenge-surface,
 #module-two-view .game-mobile-banner.cohesive-challenge-surface{
  display:flex!important;flex-direction:column;align-items:flex-start;gap:7px;
  min-height:0;padding:24px 21px!important;border-radius:20px;
 }
 #module-two-view .game-banner.cohesive-challenge-surface{display:none!important}
 .cohesive-challenge-visual{display:none}
 .cohesive-challenge-surface:before{left:-140px;top:-155px}
 .cohesive-challenge-surface:after{left:-110px;bottom:-190px}
 #module-one-view .welcome{border-radius:21px}
 #module-one-view .juz-path-card{border-radius:18px!important}
 .mastery-wrap .card{border-radius:20px}
 .mastery-header nav{gap:5px!important}
}
@media(prefers-reduced-motion:reduce){#lobby .round-card[data-round]:hover{transform:none}}