@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,700;12..96,800&family=Caveat:wght@600;700&family=DM+Serif+Display&family=Inter:wght@400;500;600&display=swap');

:root{
  --paper:#FFF8EB;
  --paper2:#FFEDC8;
  --ink:#191919;
  --orange:#FF3B1F;
  --teal:#0ABAB5;
  --mustard:#FFC94A;
  --lav:#B4A0FF;
  --border:2.2px solid #191919;
  --shadow:4px 4px 0 #191919;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:url("https://www.transparenttextures.com/patterns/paper-fibers.png");
  opacity:.35; pointer-events:none;
}

/* header */
.header{
  position:sticky; top:0; z-index:30;
  background:var(--paper);
  border-bottom:var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 22px;
}
.logo{
  display:flex; align-items:center; gap:12px;
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800; letter-spacing:-1px; font-size:26px;
}
.logo-badge{
  background:var(--orange); color:white;
  padding:6px 10px; border:var(--border); box-shadow:3px 3px 0 #191919;
  transform:rotate(-2deg); font-size:19px;
}
.logo span:last-child{transform:rotate(1deg); display:inline-block}
.nav{display:flex; gap:18px; align-items:center; font-weight:600; font-size:14px}
.nav a{text-decoration:none; color:var(--ink); border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--ink)}
.btn-pill{
  background:var(--mustard); border:var(--border); box-shadow:3px 3px 0 #191919;
  padding:8px 16px; font-weight:800; cursor:pointer; font-family:'Bricolage Grotesque',sans-serif;
  transform:rotate(-0.5deg);
}
.btn-pill:active{transform:translate(2px,2px) rotate(-0.5deg); box-shadow:1px 1px 0 #191919}

/* hero */
.hero{
  max-width:1180px; margin:26px auto 0; padding:0 18px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:26px;
}
@media(max-width:860px){ .hero{grid-template-columns:1fr} }
.hero-left{
  background:white; border:var(--border); box-shadow:var(--shadow);
  padding:28px 26px 22px; position:relative; transform:rotate(-0.4deg);
}
.hero-left::after{
  content:""; position:absolute; right:-10px; top:18px; width:28px; height:80px;
  background:var(--teal); border:var(--border); transform:rotate(3deg);
}
.kicker{
  font-family:'Caveat',cursive; font-size:22px; color:var(--orange); transform:rotate(-1deg); display:inline-block;
}
.hero h1{
  font-family:'DM Serif Display',serif; font-size:44px; line-height:.95; margin:8px 0 10px;
  letter-spacing:-1.5px;
}
.hero h1 i{ font-family:'Caveat',cursive; color:var(--teal); font-style:normal; font-size:48px; position:relative}
.hero p{line-height:1.5; font-size:15.5px; max-width:560px; opacity:.85}
.hero-stats{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.stat{
  border:var(--border); background:var(--paper2); padding:10px 14px; font-weight:800; min-width:110px;
  box-shadow:2px 2px 0 #191919; font-family:'Bricolage Grotesque',sans-serif;
}
.stat small{display:block; font-weight:600; font-family:'Inter',sans-serif; font-size:11px; opacity:.7; text-transform:uppercase; letter-spacing:.5px}
.hero-right{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:start;
}
.polaroid{
  background:white; border:var(--border); box-shadow:var(--shadow); padding:8px 8px 18px;
  transform:rotate(var(--r)); position:relative;
}
.polaroid img{width:100%; height:110px; object-fit:cover; border:1.5px solid #191919; display:block}
.polaroid span{font-family:'Caveat',cursive; font-size:18px; display:block; text-align:center; margin-top:6px}
.tape{
  position:absolute; width:70px; height:18px; background:rgba(255,201,74,.85); border:1px solid rgba(0,0,0,.15);
  top:-8px; left:50%; transform:translateX(-50%) rotate(-2deg); backdrop-filter:blur(2px);
}

/* controls */
.controls{
  max-width:1180px; margin:22px auto 0; padding:0 18px;
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
}
.search-wrap{
  flex:1; min-width:240px; display:flex; align-items:center; gap:10px;
  background:white; border:var(--border); box-shadow:3px 3px 0 #191919; padding:10px 14px;
}
.search-wrap input{border:0; outline:0; flex:1; font-size:15px; font-family:'Inter',sans-serif}
.pills{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  border:var(--border); background:white; padding:7px 13px; font-weight:700; font-size:13px; cursor:pointer;
  box-shadow:2px 2px 0 #191919; font-family:'Bricolage Grotesque',sans-serif;
}
.pill.active{background:var(--ink); color:white; transform:rotate(-1deg)}
.count{font-family:'Caveat',cursive; font-size:20px; margin-left:auto}

/* grid */
.grid-wrap{max-width:1180px; margin:18px auto 0; padding:0 18px 40px}
.grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
@media(max-width:1080px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.grid{grid-template-columns:1fr}}

.card{
  background:white; border:var(--border); box-shadow:var(--shadow);
  padding:12px; position:relative; cursor:pointer;
  transform:rotate(var(--r,0deg));
  transition:transform .12s;
  display:flex; flex-direction:column; min-height:210px;
}
.card:hover{transform:rotate(0deg) translateY(-3px) scale(1.02); z-index:2}
.card-top{
  height:108px; border:1.8px solid #191919; display:flex; align-items:center; justify-content:center;
  font-size:44px; position:relative; overflow:hidden;
}
.card-top::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient( -8deg, transparent 0 10px, rgba(0,0,0,.03) 10px 11px);
}
.badge-cat{
  position:absolute; top:7px; left:7px; font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  background:white; border:1.5px solid #191919; padding:3px 6px;
}
.card h3{font-family:'Bricolage Grotesque',sans-serif; font-size:16px; margin:10px 0 4px; line-height:1.1}
.card p{font-size:12.5px; line-height:1.4; opacity:.75; margin:0; flex:1}
.card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:10px}
.play-btn{
  background:var(--ink); color:white; border:0; padding:7px 12px; font-weight:800; font-size:12px; cursor:pointer;
  font-family:'Bricolage Grotesque',sans-serif;
}
.play-btn:hover{background:var(--orange)}
.meta{font-size:11px; font-weight:600; opacity:.6}
.card:nth-child(3n){--r:-0.7deg}
.card:nth-child(3n+1){--r:0.6deg}
.card:nth-child(5n){--r:-1deg}
.card:nth-child(7n){--r:0.9deg}

/* modal */
.overlay{
  position:fixed; inset:0; background:rgba(25,25,25,.55); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:80; padding:18px;
}
.overlay.open{display:flex}
.modal{
  background:var(--paper); border:var(--border); box-shadow:8px 8px 0 #191919;
  width:min(860px,100%); max-height:92vh; overflow:auto; position:relative;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border-bottom:var(--border); background:white; position:sticky; top:0; z-index:2;
}
.modal-head h2{margin:0; font-family:'Bricolage Grotesque',sans-serif; font-size:22px}
.modal-head p{margin:2px 0 0; font-size:13px; opacity:.7}
.close{
  width:38px; height:38px; border:var(--border); background:var(--orange); color:white; font-weight:900; cursor:pointer;
  box-shadow:2px 2px 0 #191919;
}
.game-stage{padding:18px; display:grid; place-items:center; min-height:320px}
.game-box{
  background:white; border:var(--border); box-shadow:4px 4px 0 #191919; padding:14px; width:min(520px,100%);
}
.hint{font-size:12px; opacity:.6; text-align:center; margin-top:8px}
.kbd{border:1.5px solid #191919; border-bottom-width:3px; background:var(--paper2); padding:1px 6px; font-weight:800; font-size:11px}

/* footer */
.footer{
  border-top:var(--border); background:white; padding:28px 18px; margin-top:10px
}
.footer-inner{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.2fr .8fr; gap:18px}
@media(max-width:760px){.footer-inner{grid-template-columns:1fr}}
.hand{font-family:'Caveat',cursive; font-size:22px; transform:rotate(-0.6deg)}
.footer h4{font-family:'Bricolage Grotesque',sans-serif; margin:0 0 8px}
.footer p, .footer li{font-size:13.5px; line-height:1.6; opacity:.85}
.footer ul{padding-left:16px; margin:0}
.notice{
  background:var(--mustard); border:var(--border); box-shadow:3px 3px 0 #191919; padding:10px 12px; font-size:13px; font-weight:600;
  transform:rotate(0.3deg)
}

/* ===== Tablet Optimierung ===== */
*{ -webkit-tap-highlight-color: transparent; }
button, .card, .pill, .play-btn, .btn-pill{ touch-action:manipulation; }

/* Tablet: 768px - 1024px (iPad, Android Tablets) */
@media (max-width: 1024px){
  .header{ padding:10px 14px; gap:10px; flex-wrap:wrap }
  .logo{ font-size:22px }
  .logo-badge{ font-size:16px; padding:5px 8px }
  .nav{ gap:10px; font-size:13px }
  .btn-pill{ padding:10px 14px; min-height:44px }
  .hero{ gap:18px; margin-top:18px }
  .hero h1{ font-size:38px }
  .hero h1 i{ font-size:40px }
  .hero-right{ gap:10px }
  .polaroid img{ height:95px }
  .controls{ gap:10px }
  .search-wrap{ min-height:44px; padding:10px 12px }
  .search-wrap input{ font-size:16px } /* verhindert iOS Zoom */
  .pill{ padding:10px 14px; min-height:44px; font-size:13px }
  .grid{ gap:14px }
  .card{ min-height:200px }
  .card-top{ height:100px; font-size:40px }
  .play-btn{ padding:10px 14px; min-height:44px; font-size:13px }
  .modal{ width:min(92vw,860px) }
  .game-box{ width:min(560px,96vw) }
}

@media (max-width: 860px){
  .hero{ grid-template-columns:1fr }
  .hero-right{ grid-template-columns:1fr 1fr }
  .grid{ grid-template-columns:repeat(2,1fr) }
  /* Controls untereinander auf Tablet hochkant */
  .controls{ flex-direction:column; align-items:stretch }
  .search-wrap{ width:100% }
  .pills{ width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none }
  .pills::-webkit-scrollbar{ display:none }
  .count{ margin-left:0; align-self:flex-start }
  .footer-inner{ grid-template-columns:1fr }
}

/* Touch-Geräte: größere Hit-Areas, kein Hover-Wackeln */
@media (pointer: coarse){
  .card:hover{ transform:rotate(var(--r,0deg)); }
  .card:active{ transform:scale(0.98) }
  .btn-pill, .pill, .play-btn, .close{ min-height:44px; min-width:44px }
  .close{ width:44px; height:44px; font-size:18px }
  .card{ cursor:pointer }
}

/* Tablet Modal Vollbild-Feeling */
@media (max-width: 768px){
  .overlay{ padding:0; align-items:stretch }
  .overlay.open{ padding:0 }
  .modal{
    width:100%; max-width:100%; height:100dvh; max-height:100dvh;
    border:0; border-radius:0; box-shadow:none;
    display:flex; flex-direction:column
  }
  .modal-head{ padding:14px; flex-shrink:0 }
  .modal-head h2{ font-size:18px }
  .game-stage{ flex:1; overflow:auto; padding:14px; align-items:start; padding-top:16px; -webkit-overflow-scrolling:touch }
  .game-box{ width:100%; padding:12px }
  /* Canvas skaliert sauber */
  canvas{ max-width:100% !important; height:auto !important; touch-action:none }
  /* Game-Grids skalieren */
  #pac, #frog, #mine, #sud, #m3{ transform:scale(0.92); transform-origin:top center }
  #g2048, #mem, #p15{ transform:scale(0.96); transform-origin:top center }
}

/* Sehr kleine Tablets / große Phones */
@media (max-width: 600px){
  .header{ padding:10px 12px }
  .logo{ font-size:19px; gap:8px }
  .hero-left{ padding:20px 16px }
  .hero h1{ font-size:32px }
  .hero p{ font-size:14px }
  .stat{ min-width:86px; padding:8px 10px; font-size:13px }
  .polaroid{ padding:6px 6px 14px }
  .polaroid img{ height:84px }
  .grid{ grid-template-columns:1fr 1fr; gap:10px }
  .card{ padding:10px; min-height:188px }
  .card-top{ height:92px }
  .card h3{ font-size:15px }
}

/* iPad Landscape Spezial */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
  .grid{ grid-template-columns:repeat(3,1fr) }
  .hero{ grid-template-columns:1.1fr .9fr }
}

/* Verhindert Text-Select beim Daddeln, erlaubt aber Inputs */
.game-stage, .card, .modal-head{ user-select:none; -webkit-user-select:none }
.game-stage input, .game-stage textarea{ user-select:text; -webkit-user-select:text }

/* Safe Area für Tablets mit Notch */
@supports (padding: max(0px)){
  .header{ padding-left:max(14px, env(safe-area-inset-left)); padding-right:max(14px, env(safe-area-inset-right)) }
  .overlay{ padding:max(0px, env(safe-area-inset-top)) max(0px, env(safe-area-inset-right)) max(0px, env(safe-area-inset-bottom)) max(0px, env(safe-area-inset-left)) }
}