/* ===========================================================================
  EJAABA GAME CENTER — Royal Sapphire / 2026 visual system
  UI art is game content, while controls remain semantic and accessible.
  Author: Ejaaba design, with CC0 Kenney Puzzle Pack II derived game pieces.
=========================================================================== */
.gc-wrap{--gc-sapphire:#071d41;--gc-blue:#0d67cf;--gc-gold:#e9bd68;
  --gc-cyan:#8bdfff;--gc-soft:#eef5ff;font-family:system-ui,-apple-system,
  "Segoe UI","Noto Sans Arabic",Tahoma,sans-serif!important;letter-spacing:0}
.gc-wrap h1,.gc-wrap h2,.gc-wrap h3{font-family:inherit;font-weight:800}
.gc-wrap .gc-hero{border:1px solid #487fb8;border-radius:24px;
  background:radial-gradient(ellipse at 72% 10%,#1b5996a6,transparent 52%),
  radial-gradient(ellipse at 10% 90%,#204da3b0,transparent 45%),
  linear-gradient(118deg,#07182f,#0b2853 60%,#123d75);
  box-shadow:0 22px 52px #0a2c5a2a;min-height:274px}
.gc-wrap .gc-hero:after{background-size:48px 48px;opacity:.1}
.gc-wrap .gc-hero h1{font-size:clamp(2.1rem,4vw,3.6rem);line-height:1.4}
.gc-wrap .gc-hero h1 span{background:linear-gradient(100deg,#a9e1ff,#61b1ff,#e8d1a0);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gc-wrap .gc-eyebrow{font-size:.78rem;letter-spacing:1.1px;color:#bedffe}
.gc-wrap .gc-hero p{font-size:1.03rem;line-height:1.85}
.gc-wrap .gc-orbit{opacity:.46;filter:saturate(.85)}
.gc-wrap .gc-benefits{margin:17px 0 30px;gap:11px}
.gc-wrap .gc-benefits>span{background:linear-gradient(140deg,#09264d,#103b68);
  border:1px solid #4d85be80;border-radius:12px;font-weight:600;color:#eef8ff;
  box-shadow:0 8px 18px #07316620;font-size:.85rem;min-height:53px}
.gc-wrap .gc-heading h2{font-size:1.8rem;color:#153b68}
.gc-wrap .gc-heading span{font-size:.78rem;letter-spacing:.4px;color:#246cb1}
.gc-wrap .gc-games{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.gc-wrap .gc-game{border:1px solid #c9d9ed;border-radius:20px;background:#fff;
  box-shadow:0 12px 32px #1d46781c;transition:transform .18s,box-shadow .18s;overflow:hidden}
.gc-wrap .gc-game:hover{transform:translateY(-2px);box-shadow:0 18px 40px #1d467829}
.gc-wrap .gc-cover{height:203px;overflow:hidden;isolation:isolate;background:#071c43}
.gc-wrap .gc-cover:before,.gc-wrap .gc-cover .gc-shimmer{display:none}
.gc-wrap .gc-cover .gc-game-icon{width:100%!important;height:100%!important;
  object-fit:cover;max-width:none;filter:none!important;animation:none!important;
  transform:none;opacity:1}
.gc-wrap .gc-cover:after{content:"";position:absolute;inset:auto 0 0;height:50px;
  background:linear-gradient(0deg,#041d40ac,transparent);z-index:1;pointer-events:none}
.gc-wrap .gc-cover .gc-stars{z-index:2;color:#e7c87f;font-size:.73rem;letter-spacing:4px}
.gc-wrap .gc-cover small{z-index:2;color:#f4f9ff;font-size:.77rem;bottom:13px;
  background:#041a38a8;border:1px solid #d2e7ff49;border-radius:20px;padding:4px 10px}
.gc-wrap .gc-card-body{padding:17px 16px 18px;gap:10px}
.gc-wrap .gc-card-body h3{color:#143b69;font-weight:850;font-size:1.25rem}
.gc-wrap .gc-card-body>p{line-height:1.75;color:#58708c;font-size:.89rem}
.gc-wrap .gc-requirement{background:#eef6ff;border:1px solid #d8e8fa;
  color:#336893;border-radius:10px;padding:9px 10px;font-size:.8rem;line-height:1.6}
.gc-wrap .gc-requirement a{color:#0a67bc;text-decoration:underline;white-space:nowrap}
.gc-wrap .gc-card-actions{gap:8px;margin-top:3px}
.gc-wrap .gc-card-actions button{border-radius:11px;font-size:.9rem;font-weight:750;
  padding:12px 4px;white-space:nowrap;box-shadow:0 4px 10px #0e57b528}
.gc-wrap .gc-card-actions form:first-child button{background:linear-gradient(135deg,#0d70e4,#064ba7);
  color:white;border:1px solid #187be3}
.gc-wrap .gc-card-actions form:last-child button{background:#f0f6ff;color:#175ea7;
  border:1px solid #b5d4f5;box-shadow:none}
.gc-wrap .gc-rank-preview,.gc-wrap .gc-old{border:1px solid #d5e4f3;background:#f7fbff}
.gc-wrap .gc-old-grid a:hover{background:#eaf4ff;border-color:#93c3ed}
.gc-wrap .gc-gameplay-head{padding:17px 21px;gap:12px;border-radius:17px;
  min-height:109px;border:1px solid #446faa;
  background:radial-gradient(circle at 60% 0,#1c598f,transparent 55%),
   linear-gradient(124deg,#061c3c,#103e74)}
.gc-wrap .gc-gameplay-head img.gc-gameplay-symbol{width:100px;height:66px;object-fit:cover;
  border-radius:12px;border:1px solid #f4f6ff42;filter:none;box-shadow:0 4px 17px #0005}
.gc-wrap .gc-gameplay-head h1{font-size:clamp(1.2rem,2.7vw,1.85rem)}
.gc-wrap .gc-gameplay-head>div:nth-last-child(2){flex:1}
.gc-wrap .gc-timer{background:#061b38;border:1px solid #72b3e98c;border-radius:11px;
  padding:9px 12px;font-family:ui-monospace,Consolas,monospace;font-size:1rem;font-weight:850;
  color:#f1f9ff;box-shadow:inset 0 1px #b4efff18}
.gc-wrap .gc-game-intro{border:1px solid #cddff1;background:linear-gradient(115deg,#f2f8ff,#e8f2fc);
  border-radius:15px;box-shadow:0 5px 15px #17446e10;min-height:85px}
.gc-wrap .gc-game-intro .gc-instructions-icon{background:linear-gradient(140deg,#0d74db,#0754a0)}
.gc-wrap .gc-game-intro p{font-size:.91rem;line-height:1.8;color:#365e83}
.gc-wrap .gc-game-detail summary{background:white;color:#125ba7;border:1px solid #abcbe9}
.gc-wrap .gc-stage{background:radial-gradient(circle at 53% 14%,#183e79,#061a3c 65%,#07142e);
  border:1px solid #315995;border-radius:21px;box-shadow:0 12px 35px #10325931,
  inset 0 1px #aed7ff24;padding:20px;min-height:480px}
.gc-wrap .gc-stage:before{opacity:.17;background-size:44px 44px}
.gc-wrap .gc-statline{padding:12px 14px;border-radius:13px;background:#03132ebd;
  border:1px solid #769acb61;box-shadow:inset 0 1px #d7f1ff12}
.gc-wrap .gc-statline b{font-variant-numeric:tabular-nums;color:#ffe4a0;font-weight:800}
.gc-wrap .gc-board-title{margin:8px 0 13px;flex-wrap:wrap}
.gc-wrap .gc-board-title h2{font-size:1.25rem;color:#eef8ff}
.gc-wrap .gc-board-title span{color:#f1d69a;font-size:.88rem;font-weight:750;
  background:#092b52;border:1px solid #4b7ca5;border-radius:20px;padding:6px 11px}
.gc-wrap .gc-board-hint{font-size:.88rem;color:#d6e9ff;background:#08224687;
  border:1px solid #4d81bd52;border-radius:11px;padding:11px 12px;max-width:580px}
.gc-wrap .gc-jewels-board{width:100%;max-width:525px;border-radius:21px;
  padding:8px;gap:5px;direction:ltr;
  background:linear-gradient(145deg,#102b5c,#071838);
  border:2px solid #588cb5a6;box-shadow:0 12px 25px #020a1b91,inset 0 0 35px #2665a83e}
.gc-wrap .gc-jewels-board .gc-gem-tile{font-size:0!important;color:transparent!important;
  border:1px solid #84aed35c;border-radius:12px;background:
  linear-gradient(145deg,#24497b,#132f5f 56%,#0b2347)!important;
  box-shadow:inset 0 2px 1px #e4f4ff22,inset 0 -3px 3px #030c24b0,0 2px 5px #020b20a6;
  text-shadow:none!important;position:relative;overflow:hidden;touch-action:manipulation}
.gc-wrap .gc-jewels-board .gc-gem-tile:before{content:"";position:absolute;top:4%;left:8%;
  width:80%;height:25%;background:linear-gradient(#fff2,transparent);border-radius:90%;pointer-events:none}
.gc-wrap .gc-jewels-board .gc-gem-tile .gc-sprite{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 3px 3px #0006);transition:transform .18s ease}
.gc-wrap .gc-jewels-board .gc-gem-tile.gc-selected,
.gc-wrap .gc-jewels-board .gc-gem-tile.gc-hint-pair{border-color:#ffe3a0!important;
  box-shadow:0 0 0 3px #ffde88e3,0 0 20px #ffd47690!important;transform:scale(.96)}
.gc-wrap .gc-jewels-board .gc-gem-tile.gc-selected .gc-sprite{transform:scale(1.1)}
.gc-wrap .gc-jewels-board .gc-gem-tile:active .gc-sprite{transform:scale(.84)}
.gc-wrap .gc-hint-button{background:linear-gradient(140deg,#fff1c7,#e8bd6e);
  border:1px solid #f5ddad;color:#604421;border-radius:10px;font-weight:800}
.gc-wrap .gc-memory-board{max-width:540px;gap:9px}
.gc-wrap .gc-memory-board .gc-memory-tile{font-size:0!important;
  background:linear-gradient(145deg,#2264b4,#0c2858)!important;
  border:2px solid #649ed5;border-radius:13px;color:transparent!important;
  text-shadow:none!important;min-height:65px;padding:4px;overflow:hidden;transition:background .24s}
.gc-wrap .gc-memory-board .gc-memory-tile.gc-revealed{border-color:#c5eaff;
  background:linear-gradient(150deg,#f3fbff,#c0e6fc)!important}
.gc-wrap .gc-memory-board .gc-memory-tile.gc-matched{border-color:#87f0c8;
  background:linear-gradient(140deg,#dffcf1,#89d9bf)!important;
  box-shadow:0 0 19px #2fffd755!important}
.gc-wrap .gc-memory-board .gc-memory-tile .gc-sprite{max-width:100%;max-height:100%;
  width:94%;height:94%;object-fit:contain;filter:drop-shadow(0 3px 4px #061b3450)}
.gc-wrap .gc-memory-board .gc-memory-tile:not(.gc-revealed) .gc-sprite{width:73%;height:75%;filter:drop-shadow(0 1px 5px #77c3ff6e)}
.gc-wrap .gc-memory-board .gc-memory-tile.gc-revealed .gc-sprite{animation:gc-card-flip .26s ease-out}
@keyframes gc-card-flip{0%{transform:rotateY(75deg) scale(.93)}100%{transform:rotateY(0) scale(1)}}
.gc-wrap .gc-star-sky{max-width:520px;background:radial-gradient(ellipse at 50% 8%,#183b7c,#081837 85%);
  border:2px solid #467abd84;border-radius:20px;gap:10px;padding:11px}
.gc-wrap .gc-star-cell{font-size:0!important;border:1px solid #6487b777;
  border-radius:17px;background:linear-gradient(135deg,#102f64,#071940)!important;overflow:hidden}
.gc-wrap .gc-star-cell .gc-sprite{width:90%;height:90%;object-fit:contain;
  filter:drop-shadow(0 6px 7px #0008)}
.gc-wrap .gc-star-cell.is-star{border:2px solid #f6d886;background:
  radial-gradient(circle at 45% 40%,#77604580,#172751)!important;
  box-shadow:0 0 18px #f6c95f7a,inset 0 0 20px #f6cb5f38}
.gc-wrap .gc-star-cell.is-hazard{border:2px solid #e57e93;
  background:radial-gradient(circle at 45% 40%,#9a385170,#23153e)!important;
  box-shadow:inset 0 0 22px #e85e7350}
.gc-wrap .gc-star-cell.is-sky:after{content:"";width:8px;height:8px;border-radius:50%;
  background:#a9d6ef9c;box-shadow:0 0 12px #91cffa6e}
.gc-wrap .gc-maze-map{max-width:510px;padding:5px;gap:3px;border:6px solid #5a91ba;
  background:#0b2e4a;border-radius:17px;box-shadow:0 15px 30px #0007,inset 0 0 20px #0008}
.gc-wrap .gc-maze-tile{background:linear-gradient(145deg,#3d938e,#23626b)!important;
  border:1px solid #75dbba67;border-radius:7px;overflow:hidden;color:transparent!important;font-size:0!important}
.gc-wrap .gc-maze-tile.is-wall{border:1px solid #9eb1cc83;background:
  linear-gradient(145deg,#7585ad,#455879 55%,#334565)!important;
  box-shadow:inset 0 3px #dbe2f660,inset 3px 0 #b9cbef27,inset -3px -4px #1d315382}
.gc-wrap .gc-maze-tile.is-player{border:2px solid #d1f7ff;background:
  radial-gradient(circle,#57d7eb,#226db6)!important;box-shadow:0 0 16px #8ad8fbb6}
.gc-wrap .gc-maze-tile.is-key{border:2px solid #f7d68a;background:#7a603b!important}
.gc-wrap .gc-maze-tile.is-exit{border:2px solid #f1d18b;background:
  linear-gradient(140deg,#a77e47,#594c40)!important}
.gc-wrap .gc-maze-tile .gc-sprite{width:94%;height:94%;object-fit:contain;
  filter:drop-shadow(0 2px 3px #0008)}
.gc-wrap .gc-maze-tile.is-trail:not(.is-player){background:#398d86!important}
.gc-wrap .gc-maze-buttons button{font-size:1.8rem;border:1px solid #b5dcf8;background:
  linear-gradient(#287ec2,#14558a);color:#fff;border-radius:12px;
  box-shadow:0 4px 8px #06182a8c}
.gc-wrap .gc-secrets-board .gc-premium-door{width:188px;height:208px;
  background:none!important;filter:none;display:grid;place-items:center;
  border:2px solid #e7bd6d70;border-radius:80px 80px 17px 17px;
  box-shadow:0 0 36px #eebf5f32,inset 0 0 20px #e4b55c2b}
.gc-wrap .gc-secrets-board .gc-door .gc-sprite{width:96%;height:96%;
  object-fit:contain;filter:drop-shadow(0 5px 7px #0009)}
.gc-wrap .gc-puzzle-key{background:linear-gradient(135deg,#164574,#10325d);
  border:1px solid #7ab4eb;border-radius:12px;padding:12px 16px;color:#fff}
.gc-wrap .gc-puzzle-symbol{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:92px}
.gc-wrap .gc-puzzle-glyph{font-size:2rem;color:#ffe0a2;line-height:1.1}
.gc-wrap .gc-puzzle-number{font-size:.8rem;color:#d4e7ff}
.gc-wrap .gc-sky{border:1px solid #6ba3dd;background:#173963}
.gc-wrap .gc-difference-scenes{gap:13px}
.gc-wrap .gc-difference-scenes figure{border-radius:13px;border:2px solid #9dbedb;
  box-shadow:0 9px 19px #0713278a;overflow:hidden}
.gc-wrap .gc-difference-scenes figcaption{padding:9px 6px;background:#154174;
  color:#f0faff;font-weight:700}
.gc-wrap .gc-difference-scenes img{border:0;width:100%;display:block;user-select:none;
  -webkit-user-drag:none;touch-action:manipulation}
.gc-wrap .gc-difference-scenes [data-gc-diff-marks]{top:38px}
.gc-wrap .gc-spot-found{width:13%;border:3px solid #fff1a6;background:#2cc69462;
  box-shadow:0 0 18px #faff9d}
.gc-wrap .gc-side-panel{background:#f4f8ff;border:1px solid #d3e0ef;
  box-shadow:0 7px 23px #153c6b13}
.gc-wrap .gc-player-row{background:#fff;border:1px solid #dde8f5}
.gc-wrap .gc-side-tip{background:#e5f0fd}
.gc-wrap .gc-spark-burst{position:absolute;width:0;height:0;z-index:10;pointer-events:none}
.gc-wrap .gc-spark-burst i{position:absolute;display:block;width:8px;height:8px;
  border-radius:2px;background:#ffe8a0;box-shadow:0 0 10px #fddf78;
  animation:gc-spark-anim .78s ease-out both;
  transform:rotate(var(--angle))}
@keyframes gc-spark-anim{0%{opacity:1;transform:rotate(var(--angle)) translateX(0) scale(1.3)}
  100%{opacity:0;transform:rotate(var(--angle)) translateX(var(--distance)) scale(.2)}}
.gc-wrap .gc-invite-tools button{background:#164e84;border:1px solid #75a5d2}
.gc-wrap .gc-guide-video video{background:#061833;border:1px solid #a5cde6}
@media(max-width:960px){.gc-wrap .gc-games{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
 .gc-wrap{padding:0 6px;margin:11px auto 32px}
 .gc-wrap .gc-hero{padding:27px 20px;min-height:240px;border-radius:16px}
 .gc-wrap .gc-hero p{font-size:.94rem;line-height:1.75}
 .gc-wrap .gc-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:13px 0 22px}
 .gc-wrap .gc-benefits>span{font-size:.78rem;min-height:48px;padding:9px 7px}
 .gc-wrap .gc-games{grid-template-columns:1fr;gap:16px}
 .gc-wrap .gc-game{display:block;border-radius:17px}
 .gc-wrap .gc-cover{height:188px}
 .gc-wrap .gc-cover .gc-game-icon{width:100%!important;height:100%!important;object-fit:cover}
 .gc-wrap .gc-card-body{padding:15px 15px 17px}
 .gc-wrap .gc-card-body h3{font-size:1.21rem}
 .gc-wrap .gc-card-actions{flex-wrap:nowrap;gap:8px}
 .gc-wrap .gc-card-actions form{min-width:0;flex:1}
 .gc-wrap .gc-card-actions button{padding:12px 6px;font-size:.89rem}
 .gc-wrap .gc-gameplay-head{padding:13px 12px;gap:9px;border-radius:15px;min-height:85px}
 .gc-wrap .gc-gameplay-head img.gc-gameplay-symbol{width:75px;height:55px;border-radius:10px}
 .gc-wrap .gc-gameplay-head h1{font-size:1.13rem}
 .gc-wrap .gc-gameplay-head>a{font-size:.75rem;max-width:65px}
 .gc-wrap .gc-timer{font-size:.83rem;padding:7px 8px}
 .gc-wrap .gc-game-intro{padding:11px;gap:10px;margin:9px 0 12px}
 .gc-wrap .gc-game-intro .gc-instructions-icon{width:32px;height:32px;flex:0 0 32px}
 .gc-wrap .gc-game-intro p{font-size:.83rem;line-height:1.65}
 .gc-wrap .gc-stage{padding:11px;border-radius:16px;min-height:420px}
 .gc-wrap .gc-board-title h2{font-size:1.13rem}
 .gc-wrap .gc-board-title span{font-size:.75rem;padding:5px 8px}
 .gc-wrap .gc-jewels-board{padding:6px;gap:4px;border-radius:14px}
 .gc-wrap .gc-jewels-board .gc-gem-tile{border-radius:9px;min-height:40px}
 .gc-wrap .gc-memory-board{gap:7px}
 .gc-wrap .gc-memory-board .gc-memory-tile{min-height:54px;border-radius:11px}
 .gc-wrap .gc-star-sky{padding:8px;gap:7px;border-radius:14px}
 .gc-wrap .gc-star-cell{border-radius:14px;min-height:68px}
 .gc-wrap .gc-maze-map{border-width:5px;gap:2px}
 .gc-wrap .gc-maze-tile{border-radius:4px}
 .gc-wrap .gc-maze-buttons button{min-height:49px}
 .gc-wrap .gc-difference-scenes{grid-template-columns:1fr;gap:10px}
 .gc-wrap .gc-difference-scenes img{width:100%;height:auto;aspect-ratio:1000/620}
 .gc-wrap .gc-difference-scenes figure{max-width:580px;margin:auto}
 .gc-wrap .gc-side-panel{padding:14px}
}
@media(max-width:370px){
 .gc-wrap .gc-cover{height:164px}
 .gc-wrap .gc-card-actions button{font-size:.84rem}
 .gc-wrap .gc-memory-board{gap:5px}
 .gc-wrap .gc-board-hint{font-size:.8rem}
 .gc-wrap .gc-gem-tile{min-height:35px!important}
}
@media(prefers-reduced-motion:reduce){.gc-wrap .gc-sprite,.gc-wrap .gc-spark-burst i,
 .gc-wrap .gc-premium-memory{animation:none!important;transition:none!important}}
.gc-wrap .gc-guide-picture{flex:none;width:118px;height:90px;overflow:hidden;border-radius:12px;background:#081d40}
.gc-wrap .gc-guide-picture img{width:100%;height:100%;object-fit:cover;display:block}
.gc-wrap .gc-guide-video video{max-width:450px;aspect-ratio:9/16;max-height:700px;object-fit:contain}
@media(max-width:400px){.gc-wrap .gc-guide-picture{width:97px;height:78px}}