:root{
    --red:#b3382c;
    --red-dark:#832920;
    --gold:#c9a24b;
    --cream:#f4e8d0;
    --paper:#fbf3e3;
    --ink:#3a2a1e;
    --gray:#9c8b76;
    --border:#e6d3ab;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
    background:radial-gradient(ellipse at top, #fbf1de 0%, var(--cream) 60%);
    color:var(--ink);
    padding-bottom:60px;
  }
  header{
    text-align:center;
    padding:22px 16px 10px;
  }
  header h1{
    margin:0 0 4px;
    font-size:22px;
    letter-spacing:.03em;
  }
  header p.sub{
    margin:0;
    font-size:12px;
    color:var(--gray);
  }
  .orientation-toggle{
    display:flex;
    justify-content:center;
    gap:8px;
    margin:16px auto 4px;
  }
  .orientation-toggle button{
    border:1px solid var(--red);
    background:var(--paper);
    color:var(--red);
    padding:8px 16px;
    border-radius:20px;
    font-size:13px;
    cursor:pointer;
    font-weight:bold;
  }
  .orientation-toggle button.active{
    background:var(--red);
    color:#fff;
  }
  .card-editor-wrap{
    display:flex;
    justify-content:center;
    margin:20px auto 6px;
    padding:0 16px;
  }
  .card-frame{
    width:100%;
    max-width:420px;
    box-shadow:0 12px 32px rgba(90,50,20,.20), 0 2px 6px rgba(90,50,20,.10);
    border-radius:14px;
    overflow:hidden;
    background:var(--paper);
  }
  .card-frame.orientation-landscape{
    max-width:640px;
  }
  #cardCanvas{
    width:100%;
    height:auto;
    display:block;
    cursor:pointer;
    touch-action:manipulation;
  }
  .hint{
    text-align:center;
    font-size:12px;
    color:var(--gray);
    max-width:420px;
    margin:8px auto 0;
    padding:0 16px;
  }
  .actions{
    max-width:420px;
    margin:22px auto 0;
    padding:0 16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
  }
  .primary-btn{
    width:100%;
    background:linear-gradient(135deg, var(--red), var(--red-dark));
    color:#fff;
    border:none;
    padding:15px 20px;
    border-radius:26px;
    font-size:15px;
    font-weight:bold;
    letter-spacing:.03em;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(140,40,30,.30);
  }
  .primary-btn:active{ filter:brightness(0.94); }
  .secondary-btn{
    background:#fff;
    color:var(--ink);
    border:1px solid var(--border);
    padding:12px 20px;
    border-radius:26px;
    font-size:14px;
    cursor:pointer;
    width:100%;
  }
  .secondary-btn.danger{ color:var(--red); border-color:var(--red); }
  .secondary-btn:disabled{ opacity:.4; cursor:not-allowed; }
  .text-btn{
    background:none;
    border:none;
    color:var(--red);
    font-size:13px;
    cursor:pointer;
    padding:6px 0;
    text-decoration:underline;
  }
  .reset-link{
    text-align:center;
    font-size:12px;
    color:var(--gray);
    text-decoration:underline;
    cursor:pointer;
    margin-top:8px;
  }
  .hidden{ display:none !important; }

  /* modal */
  .modal{
    position:fixed;
    inset:0;
    background:rgba(30,20,12,.55);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    z-index:100;
  }
  @media (min-width:520px){
    .modal{ align-items:center; }
  }
  .modal-content{
    background:#fff;
    width:100%;
    max-width:420px;
    max-height:92vh;
    overflow-y:auto;
    border-radius:16px 16px 0 0;
    padding:20px 20px 24px;
  }
  @media (min-width:520px){
    .modal-content{ border-radius:16px; }
  }
  .modal-content h2{
    margin:0 0 4px;
    font-size:17px;
    text-align:center;
  }
  .modal-content p.modal-sub{
    margin:0 0 14px;
    font-size:12px;
    color:var(--gray);
    text-align:center;
  }
  .crop-stage{
    position:relative;
    width:260px;
    height:260px;
    margin:0 auto 10px;
    border-radius:50%;
    overflow:hidden;
    background:#eee;
    touch-action:none;
  }
  #cropCanvas{
    width:100%;
    height:100%;
    display:block;
    cursor:grab;
  }
  #cropCanvas:active{ cursor:grabbing; }
  .empty-crop-msg{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:12px;
    color:var(--gray);
    padding:20px;
    pointer-events:none;
  }
  .modal-content label{
    display:block;
    font-size:12px;
    color:var(--gray);
    margin:12px 0 4px;
  }
  .modal-content input[type=text],
  .modal-content textarea{
    width:100%;
    font-size:14px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:8px;
    font-family:inherit;
    resize:vertical;
  }
  .modal-content textarea{ min-height:56px; }
  .modal-content input[type=range]{ width:100%; }
  .rank-badge-preview{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:6px;
    background:var(--red);
    color:#fff;
    font-size:12px;
    font-weight:bold;
  }
  .modal-actions{
    display:flex;
    gap:8px;
    margin-top:14px;
  }
  .modal-actions button{ flex:1; margin:0; }

  #exportPreview{
    width:100%;
    border-radius:8px;
    border:1px solid var(--border);
    margin-bottom:14px;
  }