/* SRADRAVEN GAME FREE WAVE 12 · original browser games
   No third-party game assets. Card backs use the site's own SRADRAVEN logo. */
:root{
  --gf-bg:#071014;--gf-panel:#0e181d;--gf-panel2:#121f25;--gf-line:#29404a;
  --gf-text:#eff7f8;--gf-muted:#9eb2b9;--gf-cyan:#53d9e5;--gf-orange:#ff9558;
  --gf-good:#7be4a8;--gf-bad:#ff8181;--gf-shadow:0 18px 55px rgba(0,0,0,.34);
}
.gf-page{max-width:1220px;margin:0 auto;padding:26px 16px 64px;color:var(--gf-text)}
.gf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px}
.gf-title{min-width:0}.gf-kicker{display:block;color:var(--gf-cyan);font-size:.78rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.gf-title h1{margin:.22rem 0 .35rem;font-size:clamp(2rem,5vw,3.65rem);line-height:.96}
.gf-title p{max-width:760px;margin:0;color:var(--gf-muted);font-size:1.02rem}
.gf-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.gf-btn{appearance:none;border:1px solid #38545f;border-radius:9px;background:#102027;color:#f4fbfc;padding:10px 13px;font-weight:850;cursor:pointer;min-height:42px}
.gf-btn:hover,.gf-btn:focus-visible{border-color:var(--gf-cyan);outline:none}.gf-btn.primary{background:#1e6870;border-color:#4ad3df}.gf-btn.orange{background:#7a3516;border-color:#ff9558}.gf-btn.danger{background:#582327;border-color:#e06d76}
.gf-btn[disabled]{opacity:.45;cursor:not-allowed}
.gf-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.gf-stage,.gf-panel{background:linear-gradient(180deg,#101a1f,#0b1418);border:1px solid var(--gf-line);border-radius:14px;box-shadow:var(--gf-shadow)}
.gf-stage{padding:16px;min-height:520px}.gf-panel{padding:16px}
.gf-panel h2,.gf-panel h3{margin:.15rem 0 .65rem}.gf-panel p{color:var(--gf-muted)}
.gf-statgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gf-stat{background:#0a1115;border:1px solid #263a43;border-radius:9px;padding:10px}.gf-stat small{display:block;color:var(--gf-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.gf-stat strong{font-size:1.25rem}
.gf-status{margin:0 0 12px;padding:10px 12px;border:1px solid #2b4650;border-radius:9px;background:#0a1419;color:#dcecef}.gf-status.good{border-color:#2e6d4a;color:#8df0b4}.gf-status.bad{border-color:#704049;color:#ff9aa1}
.gf-controls{display:grid;gap:10px;margin-top:12px}.gf-controls label{font-size:.78rem;color:var(--gf-muted);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.gf-controls select,.gf-controls input{width:100%;background:#071116;color:#eff7f8;border:1px solid #34505a;border-radius:8px;padding:10px}
.gf-help{font-size:.88rem;color:var(--gf-muted);margin-top:12px}.gf-help strong{color:#eef6f7}.gf-hidden{display:none!important}
.gf-logo-mini{width:28px;height:28px;object-fit:contain;vertical-align:middle;border-radius:5px}
.gf-board-center{display:grid;place-items:center;min-height:470px}
.gf-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(2,7,9,.82);backdrop-filter:blur(5px)}
.gf-modal[hidden]{display:none}.gf-modal-card{width:min(520px,100%);background:#101b20;border:1px solid #3b5963;border-radius:14px;padding:22px;box-shadow:0 30px 90px #000}.gf-modal-card h2{margin-top:0}
.gf-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gf-spacer{height:8px}

/* Hub */
.gf12-hub{max-width:1260px;margin:auto;padding:30px 16px 70px}.gf12-hero{border:1px solid #29434d;background:radial-gradient(circle at 10% 0%,rgba(75,215,229,.12),transparent 35%),#0b151a;border-radius:16px;padding:28px;box-shadow:var(--gf-shadow);margin-bottom:22px}
.gf12-hero h1{font-size:clamp(2.2rem,6vw,4.2rem);margin:.15rem 0}.gf12-hero p{color:#abc0c7;max-width:820px}.gf12-badges{display:flex;gap:7px;flex-wrap:wrap}.gf12-badges span{border:1px solid #34525d;background:#0c1b21;border-radius:999px;padding:6px 9px;font-size:.75rem;font-weight:850}
.gf12-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.gf12-card{display:flex;flex-direction:column;min-height:270px;text-decoration:none;color:inherit;background:#0d171c;border:1px solid #273d46;border-radius:14px;overflow:hidden;transition:.18s transform,.18s border-color,.18s box-shadow}
.gf12-card:hover{transform:translateY(-3px);border-color:#55dce8;box-shadow:0 16px 42px rgba(0,0,0,.32)}
.gf12-preview{height:116px;display:grid;place-items:center;background:radial-gradient(circle at center,rgba(83,217,229,.15),transparent 56%),linear-gradient(135deg,#0c242b,#12171b);font-size:3.4rem;position:relative;overflow:hidden}
.gf12-preview img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 4px 10px #0008)}.gf12-preview .gf12-symbols{letter-spacing:.08em;filter:drop-shadow(0 4px 10px #000)}
.gf12-card-body{padding:15px;display:flex;flex-direction:column;flex:1}.gf12-card-body small{color:#62dbe5;font-weight:900;letter-spacing:.08em}.gf12-card h2{margin:.35rem 0 .4rem;font-size:1.32rem}.gf12-card p{color:#9fb4bb;margin:0 0 12px;flex:1}.gf12-card strong{color:#ff9a5e}
.gf12-safe{margin-top:22px;padding:14px;border:1px solid #27424c;background:#0b1519;border-radius:12px;color:#9fb4bb}

/* Tic tac toe */
.ttt-board{width:min(92vw,520px);aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ttt-cell{border:1px solid #35535f;background:#0a161b;border-radius:12px;font-size:clamp(3rem,13vw,7rem);font-weight:950;color:#fff;display:grid;place-items:center;cursor:pointer}.ttt-cell.x{color:#55dce8}.ttt-cell.o{color:#ff9558}.ttt-cell.win{outline:3px solid #7be4a8}

/* Connect four */
.c4-board{width:min(94vw,700px);aspect-ratio:7/6;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:10px;background:#133b4a;border:1px solid #4d7180;border-radius:16px}
.c4-cell{border:0;border-radius:50%;background:#071014;box-shadow:inset 0 3px 7px #0009;cursor:pointer;min-width:0}.c4-cell.red{background:#e55b5b}.c4-cell.gold{background:#f1c455}.c4-cell.win{outline:3px solid #fff}

/* Reversi */
.rev-board{width:min(94vw,620px);aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);border:5px solid #183b32;border-radius:10px;overflow:hidden}.rev-cell{position:relative;border:1px solid #1a4638;background:#287052;padding:0;cursor:pointer}.rev-disc{position:absolute;inset:11%;border-radius:50%;box-shadow:0 4px 8px #0008}.rev-disc.black{background:#101416}.rev-disc.white{background:#eef2ee}.rev-cell.legal:after{content:"";position:absolute;inset:39%;border-radius:50%;background:#95d8b0aa}

/* Sudoku */
.sdk-board{width:min(94vw,620px);aspect-ratio:1;display:grid;grid-template-columns:repeat(9,1fr);border:3px solid #b6c8ce;background:#b6c8ce;gap:1px}.sdk-cell{position:relative;background:#0d171b;border:0;color:#eaf4f6;font-size:clamp(1rem,4vw,2rem);font-weight:850;cursor:pointer}.sdk-cell.fixed{background:#15262d;color:#6fe0ea}.sdk-cell.sel{background:#2c4852}.sdk-cell.peer{background:#152229}.sdk-cell.bad{color:#ff8080}.sdk-cell:nth-child(3n){border-right:2px solid #8fa6ad}.sdk-cell:nth-child(9n){border-right:0}.sdk-cell:nth-child(n+19):nth-child(-n+27),.sdk-cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid #8fa6ad}
.sdk-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}.sdk-pad button{min-height:48px}

/* Mines */
.mine-board{display:grid;gap:3px;justify-content:center;touch-action:manipulation}.mine-cell{width:clamp(25px,7vw,40px);aspect-ratio:1;border:1px solid #31505a;background:#14242a;color:#eff7f8;border-radius:5px;font-weight:900;cursor:pointer;padding:0}.mine-cell.open{background:#091317;border-color:#1f333b}.mine-cell.mine{background:#64272c}.mine-cell.flag{color:#ffb66c}.mine-cell[data-n="1"]{color:#6ed7ff}.mine-cell[data-n="2"]{color:#79e4a7}.mine-cell[data-n="3"]{color:#ff8181}.mine-cell[data-n="4"]{color:#bca0ff}.mine-cell[data-n="5"]{color:#ffad7a}

/* Memory */
.mem-board{display:grid;grid-template-columns:repeat(4,minmax(70px,130px));gap:10px;justify-content:center}.mem-card{aspect-ratio:3/4;border:1px solid #38545e;border-radius:10px;background:#0a151a;position:relative;transform-style:preserve-3d;transition:transform .24s;cursor:pointer;padding:0}.mem-card.open,.mem-card.matched{transform:rotateY(180deg)}.mem-face{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;border-radius:9px}.mem-back{background:linear-gradient(145deg,#092a33,#12171b)}.mem-back img{width:55%;height:55%;object-fit:contain}.mem-front{transform:rotateY(180deg);font-size:2.5rem;background:#132027}.mem-card.matched .mem-front{outline:2px solid #7be4a8}

/* Puzzle 15 */
.p15-board{width:min(92vw,560px);aspect-ratio:1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#071014;border:1px solid #334d56;padding:8px;border-radius:14px}.p15-tile{border:1px solid #47717d;background:linear-gradient(145deg,#14323b,#102027);color:#fff;font-size:clamp(1.6rem,8vw,3.4rem);font-weight:950;border-radius:10px;cursor:pointer}.p15-tile.empty{visibility:hidden}

/* Hangman */
.hang-wrap{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:22px;align-items:center}.hang-figure{height:360px;position:relative;border-bottom:5px solid #607781}.hang-figure span{position:absolute;background:#dce8eb;border-radius:4px}.hang-base{left:40px;bottom:0;width:8px;height:320px}.hang-top{left:40px;top:10px;width:190px;height:8px}.hang-rope{left:220px;top:10px;width:5px;height:55px}.hang-head{left:192px;top:62px;width:60px;height:60px;border:5px solid #dce8eb;background:transparent!important;border-radius:50%!important}.hang-body{left:219px;top:122px;width:6px;height:100px}.hang-arm1{left:186px;top:142px;width:72px;height:6px;transform:rotate(24deg)}.hang-arm2{left:186px;top:142px;width:72px;height:6px;transform:rotate(-24deg)}.hang-leg1{left:187px;top:235px;width:75px;height:6px;transform:rotate(54deg)}.hang-leg2{left:185px;top:235px;width:75px;height:6px;transform:rotate(-54deg)}.hang-figure span.off{display:none}.hang-word{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:22px 0}.hang-letter{min-width:34px;border-bottom:3px solid #6c8791;text-align:center;font-size:2rem;font-weight:900}.hang-keyboard{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.hang-keyboard button{width:42px;height:42px;padding:0}.hang-keyboard button.used{opacity:.35}

/* Solitaire */
.solitaire{min-height:650px;background:radial-gradient(circle at 50% 10%,#195f4c,#0b372d 55%,#08281f);border-radius:12px;padding:12px;overflow-x:auto}
.sol-row{display:flex;gap:clamp(6px,1.5vw,14px);min-width:700px}.sol-top{justify-content:space-between;margin-bottom:24px}.sol-stackset{display:flex;gap:12px}.sol-pile{width:88px;height:124px;border:1px dashed #8bb9a6;border-radius:9px;position:relative;flex:0 0 88px}.sol-tableau{display:grid;grid-template-columns:repeat(7,88px);gap:12px;min-width:700px}.sol-col{min-height:390px;position:relative;border-radius:9px}.playing-card{position:absolute;width:88px;height:124px;border-radius:9px;background:#f6f4ed;color:#152027;border:1px solid #17252b;box-shadow:0 3px 7px #0007;user-select:none;cursor:pointer;padding:6px;font-weight:900}.playing-card.red{color:#b52d36}.playing-card.back{background:linear-gradient(145deg,#092a33,#12252b);display:grid;place-items:center}.playing-card.back img{width:58px;height:58px;object-fit:contain}.playing-card.selected{outline:4px solid #55dce8}.playing-card .pc-rank{font-size:1.16rem;line-height:1}.playing-card .pc-suit{font-size:1.28rem}.playing-card .pc-big{display:grid;place-items:center;height:72px;font-size:2.3rem}.sol-foundation-label{position:absolute;inset:0;display:grid;place-items:center;color:#88b6a4;font-size:2rem;opacity:.5}

/* Backgammon */
.bg-board{position:relative;width:min(94vw,860px);min-width:720px;height:560px;display:grid;grid-template-columns:1fr 54px 1fr;background:#6a3e26;border:12px solid #302019;border-radius:12px;box-shadow:0 16px 40px #0008}
.bg-half{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:1fr 1fr;background:#c79868}.bg-point{position:relative;cursor:pointer}.bg-point.top:before,.bg-point.bottom:before{content:"";position:absolute;left:7%;right:7%;height:88%;clip-path:polygon(0 0,100% 0,50% 100%);background:#6c2f23}.bg-point:nth-child(even):before{background:#e5c18e}.bg-point.bottom:before{bottom:0;transform:rotate(180deg)}.bg-bar{background:#3d291f;border-left:3px solid #261913;border-right:3px solid #261913;display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:8px}.bg-checker{width:46px;height:46px;border-radius:50%;border:2px solid #1b1e20;display:grid;place-items:center;font-size:.7rem;font-weight:900;box-shadow:0 3px 6px #0008;position:absolute;left:50%;transform:translateX(-50%);z-index:3}.bg-checker.white{background:#e9e5d8;color:#1b2529}.bg-checker.black{background:#1c2427;color:#f3f3ee;border-color:#d9d6c9}.bg-point.legal{outline:3px solid #52dbe6;outline-offset:-4px}.bg-dice{display:flex;gap:8px}.bg-die{width:52px;height:52px;border-radius:8px;background:#f4f0e7;color:#111;display:grid;place-items:center;font-size:1.8rem;font-weight:950}

/* Responsive */
@media(max-width:980px){
  .gf-shell{grid-template-columns:1fr}.gf-stage{min-height:auto}.gf12-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hang-wrap{grid-template-columns:1fr}.hang-figure{width:320px;max-width:100%;margin:auto}
}
@media(max-width:650px){
  .gf-page{padding:18px 10px 54px}.gf-head{display:block}.gf-actions{justify-content:flex-start;margin-top:12px}.gf-stage,.gf-panel{border-radius:10px;padding:10px}
  .gf12-grid{grid-template-columns:1fr}.gf12-hero{padding:20px}.gf12-preview{height:105px}
  .mem-board{grid-template-columns:repeat(4,minmax(58px,1fr));gap:6px}.mine-cell{width:clamp(23px,8.4vw,36px)}
  .solitaire{padding:8px}.sol-row,.sol-tableau{transform-origin:top left}
}