:root{
  --ink:#25222b;
  --paper:#fffaf3;
  --card:#ffffff;
  --line:#2f2a36;
  --shadow:6px 7px 0 rgba(37,34,43,.16);
  --history:#f2c96d;
  --english:#f6a9b8;
  --art:#8fd0c3;
  --dnd:#b9a5df;
  --cream:#fff2d7;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Trebuchet MS,Arial,sans-serif;color:var(--ink);background:#f6efe6}
body{
  background-image:
    radial-gradient(circle at 18px 18px,rgba(67,56,77,.07) 2px,transparent 2px),
    linear-gradient(90deg,rgba(255,255,255,.34) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.34) 1px,transparent 1px);
  background-size:36px 36px,72px 72px,72px 72px;
}
a{color:inherit}
.wrap{width:min(1160px,92vw);margin:0 auto;padding:34px 0 60px}
.hero{position:relative;text-align:center;padding:36px 20px 28px}
.kicker{display:inline-block;background:#fff;border:2px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:3px 4px 0 rgba(37,34,43,.13)}
h1{font-size:clamp(40px,6vw,74px);line-height:.95;margin:18px auto 12px;font-family:"Arial Rounded MT Bold",Trebuchet MS,Arial,sans-serif;letter-spacing:-.045em;max-width:900px;text-shadow:3px 3px 0 #fff}
.subtitle{font-size:clamp(17px,2vw,22px);line-height:1.45;max-width:720px;margin:0 auto;color:#57505f}
.sticker{position:absolute;font-size:clamp(26px,4vw,48px);filter:drop-shadow(2px 3px 0 rgba(37,34,43,.12));transform:rotate(var(--r,0deg));user-select:none}
.s1{left:7%;top:15%;--r:-10deg}.s2{right:9%;top:23%;--r:9deg}.s3{left:14%;bottom:4%;--r:10deg}.s4{right:17%;bottom:0;--r:-9deg}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px}
.subject{display:block;text-decoration:none;background:var(--card);border:3px solid var(--line);border-radius:24px;padding:26px;min-height:220px;box-shadow:var(--shadow);transition:transform .14s ease,box-shadow .14s ease;position:relative;overflow:hidden}
.subject:hover,.subject:focus-visible{transform:translate(-2px,-3px);box-shadow:9px 11px 0 rgba(37,34,43,.17);outline:none}
.subject:after{content:"";position:absolute;width:140px;height:140px;border:3px solid var(--line);border-radius:50%;right:-55px;bottom:-65px;opacity:.12}
.icon{width:66px;height:66px;border:3px solid var(--line);border-radius:20px;display:grid;place-items:center;font-size:34px;background:#fff;box-shadow:3px 4px 0 rgba(37,34,43,.12);margin-bottom:17px}
.subject h2{font-family:"Arial Rounded MT Bold",Trebuchet MS,Arial,sans-serif;font-size:30px;margin:0 0 7px}.subject p{margin:0;color:#5a5361;font-size:17px;line-height:1.45;max-width:480px}.go{display:inline-flex;margin-top:18px;font-weight:900;align-items:center;gap:7px}
.history{background:linear-gradient(135deg,#fff 0 67%,#fff1c7 67%)}.history .icon{background:var(--history)}
.english{background:linear-gradient(135deg,#fff 0 67%,#ffe1e7 67%)}.english .icon{background:var(--english)}
.art{background:linear-gradient(135deg,#fff 0 67%,#dff6f0 67%)}.art .icon{background:var(--art)}
.dnd{background:linear-gradient(135deg,#fff 0 67%,#eee7fb 67%)}.dnd .icon{background:var(--dnd)}
.footer{text-align:center;color:#746d79;font-size:14px;margin-top:34px}
.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:900;background:#fff;border:2px solid var(--line);border-radius:999px;padding:10px 16px;box-shadow:3px 4px 0 rgba(37,34,43,.12);margin-bottom:22px}
.section-title{text-align:left;padding:12px 0 8px}.section-title h1{text-align:left;margin:8px 0 12px;max-width:none;font-size:clamp(38px,5vw,62px)}.section-title p{font-size:19px;color:#5b5461;max-width:750px;line-height:1.5}
.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:24px}
.game-card{background:#fff;border:3px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:0;overflow:hidden;display:flex;flex-direction:column;min-height:430px}
.game-banner{min-height:150px;padding:24px;display:flex;align-items:flex-end;border-bottom:3px solid var(--line);position:relative;overflow:hidden}.game-banner:before{content:"ᚢ ᚱ ᚴ ᛏ ᛁ ᚾ ᚷ";position:absolute;left:-10px;top:17px;font-size:37px;letter-spacing:10px;opacity:.12;transform:rotate(-5deg);font-weight:900}.beginner .game-banner{background:#f5cf75}.intermediate .game-banner{background:#a9c9c0}
.level{display:inline-block;background:#fff;border:2px solid var(--line);border-radius:999px;padding:7px 12px;font-size:14px;font-weight:900;position:relative;z-index:1}
.game-body{padding:25px;display:flex;flex-direction:column;flex:1}.game-body h2{font-family:"Arial Rounded MT Bold",Trebuchet MS,Arial,sans-serif;font-size:30px;line-height:1.05;margin:0 0 10px}.game-body p{font-size:17px;line-height:1.5;color:#57505f;margin:0}.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.chip{border:2px solid #d8d2dc;background:#faf8fb;border-radius:999px;padding:6px 10px;font-size:13px;font-weight:800}.play{margin-top:auto;display:block;text-align:center;text-decoration:none;background:var(--ink);color:#fff;border:3px solid var(--line);border-radius:16px;padding:15px;font-size:18px;font-weight:900;box-shadow:4px 5px 0 rgba(37,34,43,.16);transition:.12s ease}.play:hover,.play:focus-visible{transform:translate(-1px,-2px);box-shadow:6px 7px 0 rgba(37,34,43,.18);outline:none}
.placeholder{background:#fff;border:3px dashed #9c95a3;border-radius:24px;padding:40px;text-align:center;margin-top:30px}.placeholder .big{font-size:56px}.placeholder h2{font-size:30px;margin:8px 0}.placeholder p{font-size:18px;color:#615a67}
@media(max-width:760px){.wrap{width:min(94vw,700px);padding-top:18px}.hero{padding-top:28px}.grid,.game-grid{grid-template-columns:1fr}.subject{min-height:190px}.sticker{display:none}.game-card{min-height:390px}.section-title p{font-size:17px}}