@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap";/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}.visible{visibility:visible}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.top-\[-20\%\]{top:-20%}.top-\[-25\%\]{top:-25%}.left-1\/2{left:50%}.z-50{z-index:50}.z-\[999\]{z-index:999}.container{width:100%}.mx-auto{margin-inline:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.size-fit{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.h-\[2rem\]{height:2rem}.h-full{height:100%}.min-h-min{min-height:-moz-min-content;min-height:min-content}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.max-w-\[20rem\]{max-width:20rem}.max-w-\[22rem\]{max-width:22rem}.max-w-\[28rem\]{max-width:28rem}.min-w-1\/2{min-width:50%}.min-w-\[80px\]{min-width:80px}.min-w-\[160px\]{min-width:160px}.min-w-\[300px\]{min-width:300px}.min-w-\[400px\]{min-width:400px}.flex-1{flex:1}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x, )var(--tw-rotate-y, )var(--tw-rotate-z, )var(--tw-skew-x, )var(--tw-skew-y, )}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-\[0\.38rem\]{gap:.38rem}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-x-auto{overflow-x:auto}.rounded-\[0\.625rem\]{border-radius:.625rem}.rounded-\[1\.5rem\]{border-radius:1.5rem}.rounded-\[1\.25rem\]{border-radius:1.25rem}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-\[\#00C48C\]{border-color:#00c48c}.border-\[\#CFD1D2\]{border-color:#cfd1d2}.border-\[\#E1E1E1\]{border-color:#e1e1e1}.bg-\[\#00C48C\]{background-color:#00c48c}.bg-\[\#EF4444\]{background-color:#ef4444}.bg-\[\#F4F4F4\]{background-color:#f4f4f4}.bg-transparent{background-color:#0000}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.fill-\[\#2F384C\]{fill:#2f384c}.p-\[1\.1rem\]{padding:1.1rem}.p-\[1\.8rem\]{padding:1.8rem}.p-\[1\.62rem\]{padding:1.62rem}.px-\[1\.88rem\]{padding-inline:1.88rem}.px-\[2\.75rem\]{padding-inline:2.75rem}.px-\[3rem\]{padding-inline:3rem}.py-\[0\.69rem\]{padding-block:.69rem}.py-\[1\.62rem\]{padding-block:1.62rem}.py-\[1\.125rem\]{padding-block:1.125rem}.pb-\[1\.5rem\]{padding-bottom:1.5rem}.pb-\[1\.69rem\]{padding-bottom:1.69rem}.pb-\[2rem\]{padding-bottom:2rem}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-start{text-align:start}.text-\[1\.5rem\]{font-size:1.5rem}.text-\[1\.375rem\]{font-size:1.375rem}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.text-\[\#00C48C\]{color:#00c48c}.text-\[\#2F384C\]{color:#2f384c}.text-\[\#666\]{color:#666}.text-\[\#797E88\]{color:#797e88}.text-\[\#888\]{color:#888}.text-\[\#EF4444\]{color:#ef4444}.text-\[\#FD5995\]{color:#fd5995}.\!normal-case{text-transform:none!important}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.opacity-70{opacity:.7}.shadow-\[0_10px_15px_rgba\(0\,0\,0\,0\.08\)\]{--tw-shadow:0 10px 15px var(--tw-shadow-color,#00000014);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0px_10px_15px_0px_rgba\(0\,_0\,_0\,_0\.08\)\]{--tw-shadow:0px 10px 15px 0px var(--tw-shadow-color,#00000014);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0px_20px_40px_0px_rgba\(0\,_0\,_0\,_0\.15\)\]{--tw-shadow:0px 20px 40px 0px var(--tw-shadow-color,#00000026);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.outline-none{--tw-outline-style:none;outline-style:none}.open\:flex:is([open],:popover-open,:open){display:flex}.open\:flex-col:is([open],:popover-open,:open){flex-direction:column}@media (hover:hover){.hover\:cursor-pointer:hover{cursor:pointer}.hover\:bg-\[\#00C48C\]:hover{background-color:#00c48c}.hover\:opacity-100:hover{opacity:1}}.focus\:ring-0:focus{--tw-ring-shadow:var(--tw-ring-inset, )0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset, )0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:outline-hidden:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.focus\:outline-hidden:focus{outline-offset:2px;outline:2px solid #0000}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset, )0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset, )0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:outline-hidden:focus-visible{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.focus-visible\:outline-hidden:focus-visible{outline-offset:2px;outline:2px solid #0000}}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:text-\[\#CBCECD\]:disabled{color:#cbcecd}.disabled\:opacity-50:disabled{opacity:.5}html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100%;margin:0;padding:0;font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}*{font-family:Outfit,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
#root {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

.games-container {
  padding: 1rem;
  min-height: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: visible;
}

@media (min-width: 768px) {
  .games-container {
  padding: 2rem;
  }
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem 4rem 1rem;
  justify-items: center;
}

/* Responsive grid ayarları - mobile first approach */
@media (max-width: 480px) {
  .games-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .games-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
  }
}

@media (min-width: 769px) {
  .games-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
  }
}

.game-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
}

.game-card {
  width: 250px;
  height: 250px;
  flex-shrink: 0;
  border-radius: 20px;
  background: #FFF;
  box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.game-card:hover {
  border-radius: 20px;
  border: 3px solid #FFF;
  background: rgba(0, 133, 255, 0.25);
  backdrop-filter: blur(1.75px);
}

.game-card .game-hover-overlay {
  display: none;
}

.game-card:hover .game-hover-overlay {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  z-index: 10;
  flex-direction: column;
}

.game-hover-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.game-hover-btn {
  width: 8.25rem;
  border-radius: 0.5rem;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.10);
  margin-top: 0;
  border-width: 1px;
  border-style: solid;
}

.game-hover-btn.get-links,
.game-hover-btn.settings {
  color: #0085FF;
  background: #FFF;
  border: 1px solid #0085FF;
}

.game-hover-btn.get-links:hover,
.game-hover-btn.settings:hover {
  background: #f5f8fa;
  color: #006fd6;
}

.game-hover-btn.play-demo {
  color: #FFF;
  background: #0085FF;
  border: 1px solid #0085FF;
}

.game-hover-btn.play-demo:hover {
  background: #006fd6;
}

.game-btn-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  margin-right: 0.1rem;
}

.game-image {
  width: 75%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  margin: 0 auto;
  align-self: center;
}

.game-title {
  margin-top: 1rem;
  color: #000;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  width: 100%;
  word-wrap: break-word;
}

@media (min-width: 768px) {
  .game-title {
    font-size: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .game-title {
    font-size: 1.375rem;
  }
}

/* Responsive game card sizes */
@media (max-width: 480px) {
  .game-card {
    width: 200px;
    height: 200px;
  }
}

@media (max-width: 768px) {
  .game-card {
    width: 220px;
    height: 220px;
  }
}

.game-card:hover .game-image {
  filter: none !important;
}