@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.btn {
  display: inline-block;
  border-radius: 0.375rem;       /* rounded-md */
  font-weight: 700;              /* font-bold */
  color: #ffffff;                /* default: white */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease-in-out;
  text-align: center;
  text-decoration: none;
}

/* Xへ投稿するボタン */
.btn--share {
  margin-top: 1rem;
  padding: 0.5rem 2.5rem;        /* py-2 px-10 */
  background-color: #111827;     /* bg-gray-900 */
}

.btn--share:hover {
  background-color: #6b7280;     /* hover:bg-gray-500 */
}

/* もう一度占うボタン */
.btn--retry {
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;        /* py-2 px-6 */
  background-color: #f59e0b;     /* bg-yellow-500 */
}

.btn--retry:hover {
  background-color: #facc15;     /* hover:bg-yellow-400 */
}

/* 占うボタン（特別なスタイル） */
.btn--uranai {
  background-color: #fef3c7;     /* bg-yellow-100 */
  border: 1px solid #facc15;     /* border-yellow-400 */
  color: #78350f;                /* text-yellow-900 */
  padding: 0.75rem 1.5rem;       /* py-3 px-6 */
  font-size: 1.125rem;           /* text-lg */
  box-shadow: 5px 5px 0px 0px #facc15;
}

.btn--uranai:hover {
  filter: brightness(1.05);
}

.btn--uranai:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}